update

src/assets/type.ts

@@ -83,7 +83,7 @@ export type WorkType = {
   numIndex: number;
 };
 
-export type ARTISTOWNER = {
+export type ArtistOwner = {
   id: number;
   code: string;
   name: string;

src/components/managingunits/add-new-managingunits-dialog/NewManagingUnits.ts

@@ -9,6 +9,8 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    managingUnitAddTableRows: {type: Array, required: true},
+    managingUnitAddTableColumns: {type: Array, required: true},
     fieldsOptions: {type: Array, required: true},
     fields: { type: Number, required: true},
     code: { type: String, required: true },

src/components/managingunits/add-new-managingunits-dialog/index.vue

@@ -118,21 +118,73 @@
             </div>
           </div>
         </q-card-section>
-        <div class="col-auto text-h6 text-weight-regular flex q-ml-md">
-          {{ $t('managingUnit.titleAdd')
-          }}<span style="color: red" class="q-ml-xs">*</span>
+
+        <div class="row">
+          <div class="col-auto text-h6 text-weight-regular flex q-ml-md">
+            {{ $t('managingUnit.titleAdd')
+            }}<span style="color: red" class="q-ml-xs">*</span>
+          </div>
+          <q-space></q-space>
+          <div class="col-auto">
+            <q-btn
+              color="primary"
+              no-caps
+              :label="$t('managingUnitAdd.AddmanagingUnit')"
+              class="q-mr-sm"
+            >
+            </q-btn>
+          </div>
         </div>
 
         <q-card-actions>
           <div class="col-12 q-mt-sm">
             <q-table
+              :rows="managingUnitAddTableRows"
+              :columns="managingUnitAddTableColumns"
               separator="cell"
               :no-data-label="$t('emptyData')"
               hide-pagination
             >
+              <template v-slot:body-cell-action="">
+                <q-td style="padding: 0" class="flex flex-center">
+                  <q-btn flat round color="primary" icon="mdi-delete-outline">
+                    <q-tooltip :offset="[20, 10]">{{
+                      $t('managingUnitAdd.toolTipMessage.delete')
+                    }}</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    color="primary"
+                    icon="mdi-account-edit-outline"
+                  >
+                    <q-tooltip :offset="[20, 10]">{{
+                      $t('managingUnitAdd.toolTipMessage.updateInfo')
+                    }}</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </template>
+              <template v-slot:body-cell-status="rowData">
+                <q-td>
+                  <div align="center">
+                    <q-chip
+                      :color="rowData.value ? 'positive' : 'orange'"
+                      text-color="white"
+                      size="sm"
+                    >
+                      {{
+                        rowData.value
+                          ? $t('managingUnitAdd.statusLabel.active')
+                          : $t('managingUnitAdd.statusLabel.inactive')
+                      }}
+                    </q-chip>
+                  </div>
+                </q-td>
+              </template>
             </q-table>
           </div>
         </q-card-actions>
+
         <q-card-actions align="right">
           <div>
             <q-btn

src/i18n/vi/index.ts

@@ -193,6 +193,51 @@ export default {
     // },
   },
 
+  //Add đơn vị chủ quản
+  managingUnitAdd: {
+    AddmanagingUnit: 'Thêm nghệ sỹ',
+    tableColumns: {
+      sttAdd: 'STT',
+      nameAdd: 'Tên đơn vị',
+      myedityAdd: 'Nghệ danh',
+      fieldsAdd: 'Lĩnh vực',
+      timeAdd: 'Thời gian hợp đồng',
+      status: 'Trạng thái',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Còn thời gian',
+      inactive: 'Hết hợp đồng',
+    },
+    dialogLabel: {
+      title: {
+        add: 'Thêm nghệ sỹ',
+        update: 'Cập nhật nghệ sỹ',
+      },
+    fieldLabels: {
+      nameAdd: 'Tên đơn vị *',
+      myedityAdd: 'Nghệ danh *',
+      fieldsAdd: 'Lĩnh vực *',
+      timeAdd: 'Thời gian hợp đồng *',
+      status: 'Trạng thái',
+      },
+    },
+    toolTipMessage: {
+      updateInfo: 'Cập nhật',
+      delete: 'Xóa nghệ sỹ',
+    },
+    crudActions: {
+      save: 'Lưu',
+      cancel: 'Đóng',
+    },
+    // validateMessages: {
+    // },
+    // confirmActionsTitle: {
+    // },
+    // actionMessages: {
+    // },
+  },
+
   // khách hàng
   customer: {
     title: 'Danh sách khách hàng',

src/pages/don-vi-chu-quan/ManagingUnit.ts

@@ -6,7 +6,7 @@ import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import {
   PaginationResponse,
-  ARTISTOWNER,
+  ArtistOwner,
 } from 'src/assets/type';
 import { config } from 'src/assets/configurations';
 import AddNewManagingUnitsDialogComponent from '../../components/managingunits/add-new-managingunits-dialog/index.vue';
@@ -110,7 +110,97 @@ export default defineComponent({
         sortable: false,
       },
     ];
+
+    const managingUnitAddTableColumns = [
+      {
+        name: 'sttAdd',
+        field: 'sttAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.sttAdd'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'nameAdd',
+        field: 'nameAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.nameAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'myedityAdd',
+        field: 'myedityAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.myedityAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'fieldsAdd',
+        field: 'fieldsAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.fieldsAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'timeAdd',
+        field: 'timeAdd',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.timeAdd'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.status'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('managingUnitAdd.tableColumns.action'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
     const managingUnitTableRows: Ref<unknown[]> = ref([]);
+    const managingUnitAddTableRows: Ref<unknown[]> = ref([]);
+    const getListAddUnit = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.getListArtist,
+      //     method: 'GET',
+      //     params: {
+      //       pageIndex: pageIndex.value,
+      //       pageSize: pageSize.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+    //   const fakeData: unknown[] = [
+    //     {
+    //       id: 1,
+    //       sttAdd: 1,
+    //       nameAdd: 'Ưng Hoàng Phúc',
+    //       myedityAdd: 'Ưng Hoàng Phúc',
+    //       fieldsAdd: 'Âm nhạc',
+    //       timeAdd: '05/05/2021 - 05/05/2022',
+    //       status: 1,
+    //     },
+    //   ];
+    //   managingUnitAddTableRows.value = fakeData;
+    };
+
     const showDialog = ref(false);
     const code: Ref<string | undefined> = ref();
     const name: Ref<string | undefined> = ref();
@@ -141,7 +231,7 @@ export default defineComponent({
             pageSize: pageSize.value,
           },
         })) as AxiosResponse<
-          BaseResponseBody<PaginationResponse<ARTISTOWNER>>
+          BaseResponseBody<PaginationResponse<ArtistOwner>>
         >;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           managingUnitTableRows.value = response.data.data.data;
@@ -184,8 +274,10 @@ export default defineComponent({
 
     onMounted(() => {
       void getListUnits();
+      void getListAddUnit();
     });
     return {
+      getListAddUnit,
       openAddManagingUnitsDialog,
       addNewManagingUnits,
       showDialog,
@@ -200,6 +292,8 @@ export default defineComponent({
       representative,
       managingUnitTableColumns,
       managingUnitTableRows,
+      managingUnitAddTableColumns,
+      managingUnitAddTableRows,
       getListUnits,
       pageIndex,
       pageSize,

src/pages/don-vi-chu-quan/index.vue

@@ -106,6 +106,8 @@
         v-model:phone-number="phoneNumber"
         v-model:status="status"
         v-model:fields="fields"
+        v-model:managing-unit-add-table-rows="managingUnitAddTableRows"
+        v-model:managing-unit-add-table-columns="managingUnitAddTableColumns"
         :fields-options="fieldsOptions"
         @click:CloseBtn="showDialog = false"
         @addNewManagingUnits="addNewManagingUnits"