create menu page

src/assets/type.ts

@@ -388,3 +388,13 @@ export type PostAddType = {
   updateBy?: string;
   updateTime?: string;
 };
+
+export type MenuType = {
+  name: string;
+  location: string;
+  sites: string;
+  createBy: string | null;
+  createTime: string | null;
+  updateBy: string | null;
+  updateTime: string | null;
+};

src/i18n/vi/index.ts

@@ -883,4 +883,19 @@ export default {
       updateInfoVABAccess: 'Cập nhật thông tin VAB thành công',
     },
   },
+
+  menu: {
+    title: 'Danh sách menu',
+    titleColumnsTable: {
+      stt: 'STT',
+      name: 'Tên menu',
+      location: 'Vị trí',
+      sites: 'Sites',
+      createBy: 'Người tạo',
+      createTime: 'Thời gian tạo',
+      updateBy: 'Người cập nhật',
+      updateTime: 'Thời gian cập nhật',
+      action: 'Chức năng',
+    },
+  },
 };

src/pages/menu/Menu.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 tableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.stt'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'name',
+        field: 'name',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.name'),
+        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        sortable: false,
+      },
+      {
+        name: 'location',
+        field: 'location',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.location'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'sites',
+        field: 'sites',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.location'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'createBy',
+        field: 'createBy',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.createBy'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'createTime',
+        field: 'createTime',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.createTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'updateBy',
+        field: 'updateBy',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.updateBy'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'updateTime',
+        field: 'updateTime',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.updateTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('menu.titleColumnsTable.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const listMenu = ref([]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(10);
+    const keywordSearch: Ref<string | null> = ref(null);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListMenu();
+    };
+
+    const getListMenu = () => {
+      console.log('API List Menu');
+    };
+
+    onMounted(() => {
+      void getListMenu();
+    });
+    return {
+      keywordSearch,
+      status,
+      listMenu,
+      tableColumns,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      getListMenu,
+    };
+  },
+});

src/pages/menu/index.vue

 <template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
+      {{ $t('menu.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="keywordSearch"
+        dense
+        outlined
+        :label="$t('menu.titleColumnsTable.name')"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        style="width: 100px"
+      >
+      </q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        style="width: 100px"
+      >
+      </q-btn>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="listMenu"
+        :columns="tableColumns"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        :pagination="{ rowsPerPage: pageSize }"
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-action>
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customer.toolTipMessage.updateCustomerInfo')
+              }}</q-tooltip>
+            </q-btn>
+            <q-btn flat round color="primary" icon="mdi-delete-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customer.toolTipMessage.deleteCustomer')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  // name: 'PageName'
-})
-</script>
+<script lang="ts" src="./Menu.ts"></script>

src/router/routes.ts

@@ -16,6 +16,7 @@ export enum Pages {
   postCategory = 'danh-muc-bai-viet',
   banner = 'banner',
   infoVAB = 'thong-tin-chung',
+  menu = 'menu',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -98,6 +99,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/thong-tin-chung/index.vue'),
         name: Pages.infoVAB,
       },
+      {
+        path: 'menu',
+        component: () => import('pages/menu/index.vue'),
+        name: Pages.menu,
+      },
     ],
   },