create work page

src/i18n/vi/index.ts

@@ -924,4 +924,23 @@ export default {
       inactiveEvent: 'Xoá',
     },
   },
+  work: {
+    title: 'Danh sách công việc',
+    titleColumnsTable: {
+      stt: 'STT',
+      workName: 'Tên công việc',
+      fieldName: 'Lĩnh vực',
+      description: 'Mô tả',
+      status: 'Trạng thái',
+      createTime: 'Thời gian tạo',
+      createBy: 'Người tạo',
+      updateBy: 'Người cập nhật',
+      updateTime: 'Thời gian cập nhật',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+  },
 };

src/pages/cong-viec/index.vue

+<template>
+  <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('work.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="keywordSearch"
+        dense
+        outlined
+        :label="$t('work.titleColumnsTable.workName')"
+        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="listWorks"
+        :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-statusBooking="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === BookingStatus.active ? 'positive' : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === BookingStatus.active
+                    ? $t('listBooking.statusLabel.activeBooking')
+                    : $t('listBooking.statusLabel.inactiveBooking')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-statusActive="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === ActiveStatus.active ? 'positive' : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === ActiveStatus.active
+                    ? $t('listBooking.statusLabel.activeEvent')
+                    : $t('listBooking.statusLabel.inactiveEvent')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-action>
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn flat round color="primary" icon="mdi-information-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('listBooking.toolTipMessage')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./work.ts"></script>

src/pages/cong-viec/work.ts

+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+import { BookingStatus } from 'src/assets/enums';
+import { ActiveStatus } from 'src/assets/enums';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const tableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.stt'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'workName',
+        field: 'workName',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.workName'),
+        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        sortable: false,
+      },
+      {
+        name: 'fieldName',
+        field: 'fieldName',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.fieldName'),
+        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        sortable: false,
+      },
+      {
+        name: 'description',
+        field: 'description',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.description'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'createBy',
+        field: 'createBy',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.createBy'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'createTime',
+        field: 'createTime',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.createTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'updateBy',
+        field: 'updateBy',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.updateBy'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'updateTime',
+        field: 'updateTime',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.updateTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('work.titleColumnsTable.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const listWorks = ref([
+      {
+        stt: 1,
+        workName: 'Ca sỹ',
+        fieldName: 'Âm nhạc',
+        description: 'Mô tả',
+        createBy: 'admin',
+        createTime: '18:00:00 - 30/4/2021',
+        updateBy: 'nhanvien',
+        updateTime: '20:00:00 - 30/4/2021',
+        status: 1,
+      },
+    ]);
+    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 getListWorks();
+    };
+
+    const getListWorks = () => {
+      console.log('API List Menu');
+    };
+
+    onMounted(() => {
+      void getListWorks();
+    });
+    return {
+      keywordSearch,
+      status,
+      listWorks,
+      tableColumns,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      getListWorks,
+      BookingStatus,
+      ActiveStatus,
+    };
+  },
+});

src/router/routes.ts

@@ -18,6 +18,7 @@ export enum Pages {
   infoVAB = 'thong-tin-chung',
   menu = 'menu',
   listBooking = 'danh-sach-booking',
+  work = 'cong-viec',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -110,6 +111,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/danh-sach-booking/index.vue'),
         name: Pages.listBooking,
       },
+      {
+        path: 'cong-viec',
+        component: () => import('pages/cong-viec/index.vue'),
+        name: Pages.work,
+      },
     ],
   },