update Artist

src/i18n/vi/index.ts

@@ -143,5 +143,20 @@ export default {
       action: 'Chức năng',
     },
   },
+
+  artist: {
+    tableColumnsArtist: {
+      artistName: 'Tên nghệ sỹ',
+      artistCode: 'Mã nghệ sỹ',
+      fullName: 'Họ tên',
+      stageName: 'Nghệ danh',
+      avatar: 'Avatar',
+      linhvuc: 'Lĩnh vực',
+      work: 'Công việc',
+      dochuyen: 'Độ chuyên',
+      ratings: 'Xếp hạng',
+      action: 'Chức năng',
+    },
+  },
   recordPerPage: 'Số bản ghi',
 };

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

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
-import { API_PATHS } from 'src/assets/configurations.example';
-import { AxiosResponse } from 'axios';
-import { api, BaseResponseBody } from 'src/boot/axios';
+// import { API_PATHS } from 'src/assets/configurations.example';
+// import { AxiosResponse } from 'axios';
+// import { api, BaseResponseBody } from 'src/boot/axios';
 
 export default defineComponent({
   components: {

src/pages/nghe-sy/artist.ts

+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const dataTest = ref([])
+    const userTableColumnsArtist = [
+      {
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'artistCode',
+        field: 'artistCode',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.artistCode'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'fullName',
+        field: 'fullName',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.fullName'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'stageName',
+        field: 'stageName',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.stageName'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'avatar',
+        field: 'avatar',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.avatar'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'linhvuc',
+        field: 'linhvuc',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.linhvuc'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'work',
+        field: 'work',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.work'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'dochuyen',
+        field: 'dochuyen',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.dochuyen'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'ratings',
+        field: 'ratings',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.ratings'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const userTableRowsArtist: Ref<unknown[]> = ref([]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(10);
+    const fullNameKeyword = ref('');
+    const fieldOptionsMusic = ref([
+      { id: 1, text: 'Thể thao' },
+      { id: 2, text: 'Âm nhạc' },
+    ]);
+    const fieldSelectedMusic: Ref<number | undefined> = ref();
+    const fieldOptionsDoChuyen = ref([
+        { id: 1, text: 'Chuyên nghiệp' },
+        { id: 2, text: 'Nghiệp dư' },
+      ]);
+      const fieldSelectedDoChuyen: Ref<number | undefined> = ref();
+      const fieldOptionsRatings = ref([
+        { id: 1, text: 'VIP_1' },
+        { id: 2, text: 'VIP_2' },
+      ]);
+      const fieldSelectedRatings: Ref<number | undefined> = ref();
+      const getListArtist = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.getListArtist,
+      //     method: 'GET',
+      //     params: {
+      //       pageIndex: pageIndex.value,
+      //       pageSize: pageSize.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      const fakeData: unknown[] = [
+        {
+          artistCode: '0001',
+          fullName: 'Nguyễn Tùng Dương',
+          stageName: 'Tùng Dương',
+          avatar: '',
+          linhvuc: 'Âm nhạc',
+          work: 'Ca sĩ',
+          dochuyen: 'Chuyên nghiệp',
+          ratings: 'VIP_1'
+        },
+      ];
+      userTableRowsArtist.value = fakeData;
+    };
+    const filterListArtist = () => {
+        //   const response = (await api({
+        //     url: API_PATHS.filterListArtist,
+        //     method: 'GET',
+        //     params: {
+        //       unitName: fullNameKeyword.value,
+        //       fieldName: fieldSelected.value,
+        //     },
+        //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      // userTableRowsArtist.value =  userTableRowsArtist.value.filter((item: unknown) => item.fullName = fullNameKeyword)
+    };
+      const changePageSize = () => {
+        pageIndex.value = 1;
+        void getListArtist();
+      };
+    onMounted(() => {
+      void getListArtist();
+    });
+    return { userTableColumnsArtist, userTableRowsArtist, getListArtist,
+        pageIndex,
+        pageSize,
+        filterListArtist,
+        dataTest,
+        totalPage,
+        changePageSize,
+        fullNameKeyword,
+        fieldSelectedMusic,
+        fieldOptionsMusic, 
+        fieldSelectedDoChuyen,
+        fieldOptionsDoChuyen,
+        fieldSelectedRatings,
+        fieldOptionsRatings,
+     };
+  },
+});

src/pages/nghe-sy/index.vue

+<template>
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="fullNameKeyword"
+        dense
+        outlined
+        :label="$t('artist.tableColumnsArtist.artistName')"
+      ></q-input>
+    </div>
+    <div class="col-2" dense outlined>
+      <q-select
+        v-model="fieldSelectedMusic"
+        :options="fieldOptionsMusic"
+        option-label="text"
+        option-value="id"
+        dense
+        outlined
+        label="Lĩnh vực"
+      ></q-select>
+    </div>
+    <div class="col-2" dense outlined>
+      <q-select
+        v-model="fieldSelectedDoChuyen"
+        :options="fieldOptionsDoChuyen"
+        option-label="text"
+        option-value="id"
+        dense
+        outlined
+        label="Độ chuyên"
+      ></q-select>
+    </div>
+    <div class="col-2" dense outlined>
+      <q-select
+        v-model="fieldSelectedRatings"
+        :options="fieldOptionsRatings"
+        option-label="text"
+        option-value="id"
+        dense
+        outlined
+        label="Xếp hạng"
+      ></q-select>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        @click="filterListArtist"
+      >
+      </q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="userTableRowsArtist"
+        :columns="userTableColumnsArtist"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+      >
+      </q-table>
+      <div class="col-12 q-mt-sm">
+        <Pagination
+          v-model:currentPage="pageIndex"
+          v-model:pageSize="pageSize"
+          :totalPage="totalPage"
+          @update:pageSize="changePageSize"
+          @update:currentPage="getListArtist"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./artist.ts"></script>

src/router/routes.ts

@@ -6,6 +6,7 @@ export enum Pages {
   groupUsers = 'nhom-nguoi-dung',
   cmsUser = 'nguoi-dung',
   managingUnit = 'don-vi-chu-quan',
+  artist = 'nghe-sy',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -38,6 +39,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/don-vi-chu-quan/index.vue'),
         name: Pages.managingUnit,
       },
+      {
+        path: '/nghe-sy',
+        component: () => import('pages/nghe-sy/index.vue'),
+        name: Pages.artist,
+      },
     ],
   },