create don-vi-chu-quan page

src/i18n/vi/index.ts

@@ -27,6 +27,7 @@ export default {
     add: 'Thêm mới',
     update: 'Cập nhật',
     delete: 'Xoá',
+    search: 'Tìm kiếm',
     details: 'Chi tiết',
   },
 
@@ -130,4 +131,17 @@ export default {
       deleteUser: 'Xoá',
     },
   },
+  managingUnit: {
+    tableColumns: {
+      unit: 'Mã đơn vị',
+      unitName: 'Tên đơn vị',
+      deputy: 'Người đại diện',
+      field: 'Lĩnh vực',
+      email: 'Email',
+      phoneNumber: 'SĐT',
+      status: 'Trạng thái',
+      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, ref, Ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const userTableColumns = [
+      {
+        name: 'userName',
+        field: 'userName',
+        required: true,
+        label: 'STT',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'userName',
+        field: 'userName',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.unit'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'fullName',
+        field: 'fullName',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.unitName'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'email',
+        field: 'email',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.deputy'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'phoneNumber',
+        field: 'phoneNumber',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.field'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'unit',
+        field: 'unit',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.email'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'unit',
+        field: 'unit',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.phoneNumber'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.status'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('managingUnit.tableColumns.action'),
+        align: 'left',
+        sortable: true,
+      },
+    ];
+    const userTableRows: Ref<unknown[]> = ref([]);
+    return { userTableColumns, userTableRows };
+  },
+});

src/pages/don-vi-chu-quan/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
+        dense
+        outlined
+        :label="$t('managingUnit.tableColumns.unitName')"
+      ></q-input>
+    </div>
+    <div class="col-2"><q-select dense outlined></q-select></div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        class="text-none"
+        :label="$t('crudActions.search')"
+      >
+      </q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn color="primary" class="text-none" :label="$t('crudActions.add')">
+      </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="userTableRows"
+        :columns="userTableColumns"
+        row-key="name"
+        separator="cell"
+      >
+      </q-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ManagingUnit.ts"></script>

src/pages/nguoi-dung/User.ts

@@ -10,9 +10,14 @@ import { computed, defineComponent, onMounted, ref, Ref } from 'vue';
 import AddNewUserDialogComponent from '../../components/user-management/add-new-user-dialog/index.vue';
 import UpdateUserDialogComponent from '../../components/user-management/update-user-dialog/index.vue';
 import { GroupInfoType } from '../nhom-nguoi-dung/UserGroup';
+import Pagination from 'components/pagination/index.vue';
 
 export default defineComponent({
-  components: { AddNewUserDialogComponent, UpdateUserDialogComponent },
+  components: {
+    AddNewUserDialogComponent,
+    UpdateUserDialogComponent,
+    Pagination,
+  },
   setup() {
     const totalPage = ref(0);
     const pageIndex = ref(1);
@@ -359,6 +364,11 @@ export default defineComponent({
       void getListUsers();
       void getListUserGroup();
     });
+
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListUsers();
+    };
     return {
       rows: userTableRows,
       userTableColumns,
@@ -395,6 +405,8 @@ export default defineComponent({
       updateUser,
       getUserDetail,
       openAddUserDialog,
+      getListUsers,
+      changePageSize,
     };
   },
 });

src/pages/nguoi-dung/index.vue

@@ -85,16 +85,13 @@
         </template>
       </q-table>
     </div>
-    <div class="col-12 q-pa-lg flex flex-center">
-      <q-pagination
-        v-model="pageIndex"
-        :max="totalPage"
-        direction-links
-        boundary-links
-        icon-first="skip_previous"
-        icon-last="skip_next"
-        icon-prev="fast_rewind"
-        icon-next="fast_forward"
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getListUsers"
       />
     </div>
 

src/router/routes.ts

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