update

src/assets/configurations.example.ts

@@ -60,4 +60,9 @@ export enum API_PATHS {
   addCustomerRank = 'customerLevel/add',
   updateCustomerRank = 'customerLevel/update',
   getDetailCustomerRank = 'customerLevel/detail',
+  getListField = 'field',
+  deleteField = 'field/delete',
+  addField = 'field/add',
+  updateField = 'field/update',
+  getDetailField = 'field/detail',
 }

src/assets/enums.ts

@@ -18,3 +18,8 @@ export enum CustomerRankStatus {
   active = 1,
   inactive = 0,
 }
+
+export enum FieldStatus {
+  active = 1,
+  inactive = 0,
+}

src/assets/type.ts

@@ -262,6 +262,7 @@ export type CustomerRank = {
 };
 
 export type AddCustomerRank = {
+  code: string;
   name: string;
   description: string;
   level: number;
@@ -285,3 +286,30 @@ export type DetailCustomerRank = {
   level: number;
   status: number;
 };
+
+export type Field = {
+  id: number;
+  name: string;
+  description: string;
+  status: number;
+};
+
+export type AddField = {
+  name: string;
+  description: string;
+  status: number;
+};
+
+export type UpdateField = {
+  id: number;
+  name: string;
+  description: string;
+  status: number;
+};
+
+export type DetailField = {
+  id: number;
+  name: string;
+  description: string;
+  status: number;
+};

src/components/add-update-field/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 30rem" bordered>
+      <q-form
+        greedy
+        @submit.prevent="
+          $emit('saveFieldInfo', {});
+          $emit('update:isOpened', false);
+        "
+      >
+        <q-card-section class="q-pa-none">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                isUpdate
+                  ? $t('field.dialogLabel.title.addField')
+                  : $t('field.dialogLabel.title.updateField')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 10rem)"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="$t('field.dialogLabel.fieldLabels.name')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="description"
+                @update:model-value="$emit('update:description', $event)"
+                :label="$t('field.dialogLabel.fieldLabels.description')"
+                :rules="descriptionRules"
+                type="textarea"
+                class="q-my-sm"
+                outlined
+              ></q-input>
+              <div class="q-pt-sm">
+                <span class="text-body1">{{
+                  $t('field.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  :true-value="1"
+                  :false-value="2"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('field.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('field.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    isUpdate: { type: Boolean, default: false },
+    name: { type: String, required: true },
+    description: { type: String, required: true },
+    status: { type: Number, required: true },
+  },
+  setup() {
+    const descriptionRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('field.validateMessages.requireDescription'),
+    ];
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('field.validateMessages.requireName'),
+    ];
+    return {
+      descriptionRules,
+      nameRules,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:name',
+    'update:description',
+    'update:status',
+    'saveFieldInfo',
+  ],
+});
+</script>

src/components/units-manager/add-update-unit-dialog/index.vue

@@ -322,6 +322,7 @@
     v-model:bank="bank"
     v-model:cardCode="cardCode"
     v-model:numberCard="numberCard"
+    v-model:userCard="userCard"
     v-model:cardType="cardType"
     v-model:isDefault="isDefault"
     :bankOptions="bankOptions"
@@ -335,6 +336,7 @@
     v-model:bank="bank"
     v-model:cardCode="cardCode"
     v-model:numberCard="numberCard"
+    v-model:userCard="userCard"
     v-model:cardType="cardType"
     v-model:isDefault="isDefault"
     :bankOptions="bankOptions"
@@ -437,6 +439,15 @@ const bankAccountTableColumns = [
     align: 'left',
     sortable: false,
   },
+  {
+    name: 'userCard',
+    field: 'userCard',
+    required: true,
+    label: i18n.global.t('managingUnitAdd.tableColumns.userCard'),
+    headerStyle: 'text-align: center !important;',
+    align: 'left',
+    sortable: false,
+  },
   {
     name: 'bank',
     field: 'bank',
@@ -517,6 +528,7 @@ export default defineComponent({
     const cardType: Ref<number | undefined> = ref(undefined);
     const cardCode = ref('');
     const numberCard = ref('');
+    const userCard = ref('');
     const isDefault: Ref<number> = ref(2);
     const bankOptions: Ref<number | undefined> = ref(undefined);
     const cardTypeOptions: Ref<number | undefined> = ref(undefined);
@@ -795,6 +807,7 @@ export default defineComponent({
       bank,
       cardCode,
       numberCard,
+      userCard,
       cardType,
       isDefault,
       bankOptions,

src/components/units-manager/unit-add-update-bank-account/index.vue

@@ -65,6 +65,16 @@
                 :rules="cardCodeRules"
                 clearable
               ></q-input>
+              <q-input
+                :model-value="userCard"
+                @update:model-value="$emit('update:userCard', $event)"
+                :label="$t('managingUnitAdd.dialogLabel.fieldLabels.userCard')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="userCardRules"
+                clearable
+              ></q-input>
               <q-input
                 :model-value="numberCard"
                 @update:model-value="$emit('update:numberCard', $event)"
@@ -129,6 +139,7 @@ export default defineComponent({
     cardType: { type: Number, required: true },
     cardTypeOptions: { type: Array, required: true },
     cardCode: { type: String, required: true },
+    userCard: { type: String, required: true },
     numberCard: { type: Number, required: true },
     isDefault: { type: Number, required: true },
   },
@@ -153,11 +164,17 @@ export default defineComponent({
         (val && val.trim().length) ||
         i18n.global.t('managingUnitAdd.validateMessages.requireNumberCard'),
     ];
+    const userCardRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireUserCard'),
+    ];
     return {
       bankdRules,
       cardTypeRules,
       cardCodeRules,
       numberCardRules,
+      userCardRules,
     };
   },
   emits: [
@@ -165,6 +182,7 @@ export default defineComponent({
     'update:cardCode',
     'update:bank',
     'update:numberCard',
+    'update:userCard',
     'update:cardType',
     'update:isDefault',
     'saveBankAccountInfo',

src/i18n/vi/index.ts

@@ -227,7 +227,8 @@ export default {
       timeUpdate: 'Thời gian hợp đồng',
       status: 'Trạng thái',
       //ds bankaccount
-      cardCode: 'Mã thẻ',
+      cardCode: 'Số tài khoản',
+      userCard: 'Chủ tài khoản',
       numberCard: 'Số ghi trên thẻ',
       bank: 'Ngân hàng',
       cardType: 'Loại thẻ',
@@ -252,10 +253,11 @@ export default {
         contractTimeFrom: 'Thời gian bắt đầu hợp đồng *',
         status: 'Trạng thái',
         //ds bankaccount
-        cardCode: 'Mã thẻ *',
+        cardCode: 'Số tài khoản *',
         numberCard: 'Số ghi trên thẻ *',
         bank: 'Ngân hàng *',
         cardType: 'Loại thẻ *',
+        userCard: 'Chủ tài khoản *',
       },
     },
     toolTipMessage: {
@@ -277,8 +279,9 @@ export default {
       //ds bankaccount
       requireBank: 'Vui lòng chọn Ngân hàng',
       requireCardType: 'Vui lòng chọn Loại thẻ',
-      requireCardCode: 'Vui lòng nhập Mã thẻ',
+      requireCardCode: 'Vui lòng nhập Số tài khoản',
       requireNumberCard: 'Vui lòng nhập Số ghi trên thẻ',
+      requireUserCard: 'Vui lòng nhập Chủ tài khoản',
     },
     confirmActionsTitle: {
       confirmDelete: 'Bạn có chắc chắn muốn xóa hợp đồng với nghệ sỹ?',
@@ -517,7 +520,7 @@ export default {
 
   //xếp hạng khách hàng
   customerRank: {
-    title: 'Danh mục xếp hạng khách hàng',
+    title: 'Hạng điểm khách hàng',
     tableColumnsCustomerRank: {
       stt: 'STT',
       code: 'Mã xếp hạng',
@@ -568,4 +571,54 @@ export default {
         'Cập nhật danh mục xếp hạng khách hàng thành công',
     },
   },
+
+  //lĩnh vực hoạt động
+  field: {
+    title: 'Lĩnh vực hoạt động',
+    tableColumnsField: {
+      stt: 'STT',
+      name: 'Tên lĩnh vực',
+      description: 'Mô tả',
+      status: 'Trạng thái',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+    dialogLabel: {
+      title: {
+        addField: 'Thêm lĩnh vực hoạt động',
+        updateField: 'Cập nhật lĩnh vực hoạt động',
+      },
+      fieldLabels: {
+        name: 'Tên lĩnh vực',
+        description: 'Mô tả *',
+        status: 'Trạng thái',
+      },
+    },
+    toolTipMessage: {
+      updateField: 'Cập nhật',
+      deleteField: 'Xoá',
+    },
+    crudActions: {
+      save: 'Lưu',
+      cancel: 'Đóng',
+    },
+    validateMessages: {
+      requireName: 'Vui lòng nhập Tên lĩnh vực',
+      requireDescription: 'Vui lòng nhập Mô tả',
+    },
+    confirmActionsTitle: {
+      confirmDeleteFieldTitle: 'Xác nhận',
+      confirmDeleteFieldCancelBtnLabel: 'Huỷ',
+      confirmDeleteFieldContent:
+        'Bạn có chắc chắn muốn xoá lĩnh vực hoạt động này không?',
+    },
+    actionMessages: {
+      addNewFieldAccess: 'Thêm lĩnh vực hoạt động thành công',
+      deleteFieldAccess: 'Xoá lĩnh vực hoạt động thành công',
+      updateFieldAccess: 'Cập nhật lĩnh vực hoạt động thành công',
+    },
+  },
 };

src/pages/linh-vuc-hoat-dong/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('field.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="nameField"
+        type="text"
+        dense
+        outlined
+        label="Tên lĩnh vực"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        @click="getListField"
+        style="width: 7.14rem"
+      ></q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        style="width: 7.14rem"
+        @click="openAddFieldDialog"
+      >
+      </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="fieldTableRows"
+        :columns="fieldTableColumns"
+        row-key="unitCode"
+        separator="cell"
+        :no-data-label="$t('emptyData')"
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-action="item">
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateFieldDialog(item.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('field.toolTipMessage.updateField')
+              }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete-outline"
+              @click="confirmDeleteField(item.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('field.toolTipMessage.deleteField')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-status="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === FieldStatus.active ? 'positive' : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === FieldStatus.active
+                    ? $t('field.statusLabel.active')
+                    : $t('field.statusLabel.inactive')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+
+    <AddUpdateFieldDialog
+      v-model:isOpened="addFieldDialogIsOpened"
+      v-model:name="name"
+      v-model:description="description"
+      v-model:status="status"
+      isUpdate
+      @saveFieldInfo="addNewField"
+    />
+
+    <AddUpdateFieldDialog
+      v-model:isOpened="updateFieldDialogIsOpened"
+      v-model:name="name"
+      v-model:description="description"
+      v-model:status="status"
+      @saveFieldInfo="updateNewField"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
+import { API_PATHS } from 'src/assets/configurations';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { Field, AddField, DetailField, UpdateField } from 'src/assets/type';
+import { config } from 'src/assets/configurations';
+import { FieldStatus } from 'src/assets/enums';
+import AddUpdateFieldDialog from 'components/add-update-field/index.vue';
+import { Dialog, Notify } from 'quasar';
+
+export default defineComponent({
+  components: {
+    AddUpdateFieldDialog,
+  },
+  setup() {
+    const fieldTableColumns = [
+      // {
+      //   name: 'index',
+      //   field: 'index',
+      //   required: true,
+      //   label: 'STT',
+      //   align: 'center',
+      //   sortable: false,
+      // },
+      {
+        name: 'name',
+        field: 'name',
+        required: true,
+        label: i18n.global.t('field.tableColumnsField.name'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'description',
+        field: 'description',
+        required: true,
+        label: i18n.global.t('field.tableColumnsField.description'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('field.tableColumnsField.status'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('field.tableColumnsField.action'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
+    const fieldTableRows: Ref<unknown[]> = ref([]);
+    const addFieldDialogIsOpened = ref(false);
+    const updateFieldDialogIsOpened = ref(false);
+    const description = ref('');
+    const name = ref('');
+    const status: Ref<number> = ref(FieldStatus.active);
+    const fieldId: Ref<number | undefined> = ref(undefined);
+    const nameField = ref('');
+
+    //gọi api ds
+    const getListField = async () => {
+      const response = (await api({
+        url: API_PATHS.getListField,
+        method: 'GET',
+        params: {
+          name: nameField.value,
+        },
+      })) as AxiosResponse<BaseResponseBody<Field[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        fieldTableRows.value = response.data.data;
+      }
+    };
+
+    const confirmDeleteField = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'field.confirmActionsTitle.confirmDeleteFieldTitle'
+        ),
+        message: i18n.global.t(
+          'field.confirmActionsTitle.confirmDeleteFieldContent'
+        ),
+        cancel: i18n.global.t(
+          'field.confirmActionsTitle.confirmDeleteFieldCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteField(id);
+      });
+    };
+
+    //gói api xóa
+    const deleteField = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteField,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('field.actionMessages.deleteFieldAccess'),
+          });
+          void getListField();
+        }
+      } catch (error) {}
+    };
+
+    const openAddFieldDialog = () => {
+      name.value = '';
+      description.value = '';
+      status.value = FieldStatus.active;
+      addFieldDialogIsOpened.value = true;
+    };
+
+    //gọi api add
+    const addNewField = async () => {
+      const data = {
+        name: name.value,
+        description: description.value,
+        status: status.value,
+      };
+      const response = (await api({
+        url: API_PATHS.addField,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<AddField[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        addFieldDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t('field.actionMessages.addNewFieldAccess'),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListField();
+      }
+    };
+
+    const openUpdateFieldDialog = (id: number) => {
+      void getDetailField(id);
+      updateFieldDialogIsOpened.value = true;
+    };
+
+    //gọi api detail
+    const getDetailField = async (id: number) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getDetailField,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<DetailField>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          fieldId.value = response.data.data.id;
+          name.value = response.data.data.name;
+          description.value = response.data.data.description;
+          status.value = response.data.data.status;
+        }
+      } catch (error) {}
+    };
+
+    //gọi api update
+    const updateNewField = async () => {
+      const data = {
+        id: fieldId.value,
+        name: name.value,
+        description: description.value,
+        status: status.value,
+      };
+      const response = (await api({
+        url: API_PATHS.updateField,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<UpdateField[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        updateFieldDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t('field.actionMessages.updateFieldAccess'),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListField();
+      }
+    };
+
+    onMounted(() => {
+      void getListField();
+    });
+    return {
+      addFieldDialogIsOpened,
+      updateFieldDialogIsOpened,
+      fieldTableColumns,
+      fieldTableRows,
+      getListField,
+      FieldStatus,
+      openAddFieldDialog,
+      name,
+      description,
+      status,
+      addNewField,
+      confirmDeleteField,
+      deleteField,
+      openUpdateFieldDialog,
+      getDetailField,
+      updateNewField,
+      nameField,
+    };
+  },
+});
+</script>

src/pages/xep-hang-khach-hang/index.vue

@@ -58,7 +58,7 @@
     <div class="col-12 q-mt-sm">
       <q-table
         :rows="customerRankTableRows"
-        :columns="customerRanlTableColumns"
+        :columns="customerRankTableColumns"
         row-key="unitCode"
         separator="cell"
         :no-data-label="$t('emptyData')"
@@ -158,7 +158,7 @@ export default defineComponent({
     AddUpdateCustomerRankDialog,
   },
   setup() {
-    const customerRanlTableColumns = [
+    const customerRankTableColumns = [
       // {
       //   name: 'index',
       //   field: 'index',
@@ -374,7 +374,7 @@ export default defineComponent({
     return {
       addCustomerRankDialogIsOpened,
       updateCustomerRankDialogIsOpened,
-      customerRanlTableColumns,
+      customerRankTableColumns,
       customerRankTableRows,
       getListCustomerRank,
       CustomerRankStatus,

src/router/routes.ts

@@ -11,6 +11,7 @@ export enum Pages {
   customer = 'khach-hang',
   addArtist = 'them-nghe-sy',
   customerRank = 'xep-hang-khach-hang',
+  field = 'linh-vuc-hoat-dong',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -68,6 +69,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/xep-hang-khach-hang/index.vue'),
         name: Pages.customerRank,
       },
+      {
+        path: 'linh-vuc-hoat-dong',
+        component: () => import('pages/linh-vuc-hoat-dong/index.vue'),
+        name: Pages.field,
+      },
     ],
   },