update

src/assets/type.ts

@@ -332,6 +332,7 @@ export type DetailUnit = {
   contracts: Array<Contract>;
   classification: Array<ClassificationOptions>;
   taxCode: string;
+  classificatonId: Array<ClassificationOptions>;
 };
 
 export type CustomerType = {

src/components/danh-sach-san-pham-noi-bat-chua-chon/add.vue

@@ -3,7 +3,7 @@
     <q-card style="min-width: 1200px" bordered>
       <q-form greedy @submit.prevent="handleConfirmAdd">
         <q-card-section style="padding-bottom: 10px">
-          <q-item style="padding-left: 10px">
+          <q-item style="padding-left: 10px; padding-right: 0px">
             <q-item-section
               ><q-item-label class="text-h6 text-weight-regular">
                 Danh sách sản phẩm
@@ -25,6 +25,10 @@
               color="primary"
               icon="mdi-magnify"
             />
+
+            <q-btn @click="openAddDialog = true" color="primary"
+              >Thêm mới</q-btn
+            >
           </q-item>
         </q-card-section>
         <div class="col-12 q-mt-sm">
@@ -88,6 +92,14 @@
         </q-card-actions>
       </q-form>
     </q-card>
+
+    <openAdd
+      v-model:imageUrl="imageUrl"
+      v-model:isOpened="openAddDialog"
+      @SetAvatar="setAvatar($event)"
+      @deleteAvatar="deleteAvatar"
+      @successful="listProductNotActive"
+    />
   </q-dialog>
 </template>
 
@@ -101,10 +113,11 @@ import { api, BaseResponseBody } from 'src/boot/axios';
 import Pagination from 'components/pagination/index.vue';
 import { listProductNotActives, PaginationResponse } from 'src/assets/type';
 import { emit } from 'cluster';
+import openAdd from '../danh-sach-san-pham-noi-bat-chua-chon/addNewProduct.vue';
 export default defineComponent({
   components: {
     Pagination,
-
+    openAdd,
     // AddUpdateBannerDialog,
   },
   props: {
@@ -114,6 +127,13 @@ export default defineComponent({
     },
   },
   setup(props, context) {
+    const avatarFile: Ref<File | null> = ref(null);
+    const setAvatar = (value: { file?: File; url?: string }) => {
+      avatarFile.value = value.file as File;
+      imageUrl.value = value.url as string;
+    };
+    const imageUrl: Ref<string | null> = ref(null);
+    const openAddDialog = ref(false);
     watch(
       () => props.isOpened,
       (value) => {
@@ -124,6 +144,11 @@ export default defineComponent({
         }
       }
     );
+
+    const deleteAvatar = () => {
+      imageUrl.value = null;
+    };
+
     const bannerTableColumns = [
       {
         name: 'name',
@@ -193,6 +218,7 @@ export default defineComponent({
       void listProductNotActive();
     };
     const handleConfirmAdd = async () => {
+      if ((selected.value || []).length !== 0) {
         const data = [] as any[];
         for (let i = 0; i < selected.value.length; i++) {
           data.push(selected.value[i]?.id);
@@ -219,6 +245,13 @@ export default defineComponent({
             context.emit('update:isOpened', false);
           }
         } catch (error) {}
+      } else {
+        Notify.create({
+          type: 'warning',
+          message: 'Vui lòng chọn sản phẩm',
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+      }
     };
 
     const handleTogle = () => {
@@ -262,7 +295,10 @@ export default defineComponent({
       configImg,
       selected,
       keyWord,
+      openAddDialog,
+      imageUrl,
       changePageSize,
+      deleteAvatar,
       // hàm
       // handleConfim,
       listProductNotActive,
@@ -270,6 +306,7 @@ export default defineComponent({
       handleConfirmAdd,
       handleTogle,
       search,
+      setAvatar,
     };
   },
   emits: ['update:isOpened', 'saveBannerInfo'],

src/components/danh-sach-san-pham-noi-bat-chua-chon/addNewProduct.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 80rem" bordered>
+      <q-form greedy @submit.prevent="$emit('update:isOpened', false)">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">
+                Thêm mới sản phẩm nổi bật
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 15rem)"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-6 q-mt-sm">
+              <div class="row flex-center">
+                <div>
+                  <q-card class="q-mb-sm" v-if="imageUrl !== null">
+                    <q-img
+                      @click="uploadAvatar"
+                      :src="imageUrl"
+                      style="height: 290px; width: 450px; cursor: pointer"
+                    ></q-img>
+                    <q-icon
+                      name="mdi-close-circle"
+                      color="red"
+                      style="
+                        position: absolute;
+                        right: 0;
+                        font-size: 18px;
+                        cursor: pointer;
+                      "
+                      @click="deleteAvatar"
+                    ></q-icon>
+                  </q-card>
+                  <div
+                    @click="uploadAvatar"
+                    v-else
+                    class="q-mb-sm"
+                    style="
+                      height: 290px;
+                      width: 450px;
+                      border: 2px dashed #5d319e;
+                      border-radius: 4px;
+                      cursor: pointer;
+                    "
+                  >
+                    <div
+                      style="
+                        height: 290px;
+                        width: 450px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                      "
+                    >
+                      <q-icon
+                        style="color: #5d319e"
+                        name="mdi-cloud-upload"
+                        size="xl"
+                      ></q-icon>
+                      Tải ảnh lên
+                    </div>
+                  </div>
+                  <div>
+                    <input
+                      ref="upload"
+                      hidden
+                      @change="selectedFile($event.target.files)"
+                      type="file"
+                      accept="image/png, image/jpeg"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-6">
+              <q-select
+                v-model="artistName"
+                :label="$t('listHotProduct.dialogLabel.fieldLabels.artistName')"
+                class="q-my-sm"
+                :options="artistOptions"
+                option-label="artistName"
+                option-value="id"
+                type="text"
+                outlined
+                :rules="artistNameRules"
+                clearable
+              ></q-select>
+              <q-input
+                v-model="nameProduct"
+                :label="$t('listHotProduct.dialogLabel.fieldLabels.name')"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="nameRules"
+                clearable
+              ></q-input>
+              <q-input
+                v-model="embeddedUrl"
+                :label="
+                  $t('listHotProduct.dialogLabel.fieldLabels.embeddedUrl')
+                "
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="embeddedUrlRules"
+                clearable
+              ></q-input>
+              <div class="q-pt-sm">
+                <span class="text-body1">{{
+                  $t('listHotProduct.dialogLabel.fieldLabels.salientStatus')
+                }}</span
+                ><q-toggle
+                  v-model="salientStatus"
+                  :true-value="SystemHotProductStatus.active"
+                  :false-value="SystemHotProductStatus.inactive"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            :label="$t('listHotProduct.crudActions.cancel')"
+            @click="$emit('update:isOpened', false)"
+          />
+          <q-btn
+            @click="handleSave"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('listHotProduct.crudActions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { SystemHotProductStatus } from 'src/assets/enums';
+import { defineComponent, ref, Ref, watch } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+
+import { ListArrayArtist } from 'src/assets/type';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+export default defineComponent({
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    imageUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(_, context) {
+    watch(
+      () => _.isOpened,
+      (value) => {
+        if (value) {
+          void reset();
+
+          void getArrayArtist();
+        }
+      }
+    );
+    const salientStatus = ref(1);
+    const artistOptions: Ref<ListArrayArtist[]> = ref([]);
+    const artistName: Ref<ListArrayArtist | undefined> = ref();
+    const embeddedUrl: Ref<string | null> = ref(null);
+    const nameProduct = ref(null);
+
+    const selectedFile = (value: FileList) => {
+      context.emit('SetAvatar', {
+        file: value[0],
+        url: URL.createObjectURL(value[0]),
+      });
+    };
+
+    const getArrayArtist = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayArtist,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayArtist[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        artistOptions.value = response.data.data;
+      }
+    };
+    const reset = () => {
+      artistOptions.value = [];
+      artistName.value = undefined;
+      embeddedUrl.value = null;
+      nameProduct.value = null;
+    };
+    const deleteAvatar = () => {
+      context.emit('deleteAvatar');
+    };
+    const upload = ref(null);
+    const uploadAvatar = () => {
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      upload.value?.click();
+    };
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('listHotProduct.validateMessages.requireName'),
+    ];
+    const artistNameRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('listHotProduct.validateMessages.requireArtistName'),
+    ];
+    const embeddedUrlRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('listHotProduct.validateMessages.requireEmbeddedUrl'),
+    ];
+
+    const handleSave = () => {
+      context.emit('successful');
+      context.emit('update:isOpened', false);
+    };
+
+    return {
+      nameRules,
+      artistNameRules,
+      embeddedUrlRules,
+      embeddedUrl,
+      SystemHotProductStatus,
+      artistOptions,
+      nameProduct,
+      artistName,
+      salientStatus,
+      selectedFile,
+      deleteAvatar,
+      uploadAvatar,
+
+      upload,
+      handleSave,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:imageUrl',
+    'SetAvatar',
+    'deleteAvatar',
+    'successful',
+  ],
+});
+</script>

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

@@ -13,7 +13,7 @@
                 isUpdate
                   ? $t('managingUnit.dialogLabel.title.add')
                   : $t('managingUnit.dialogLabel.title.update')
-              }}123</q-item-label>
+              }}</q-item-label>
             </q-item-section>
           </q-item>
         </q-card-section>
@@ -56,7 +56,6 @@
                 </template>
               </q-input>
 
-  
               <q-input
                 :model-value="name"
                 @update:model-value="$emit('update:name', $event)"
@@ -125,7 +124,6 @@
                 clearable
               ></q-input>
 
-
               <q-select
                 :model-value="fields"
                 @update:model-value="$emit('update:fields', $event)"
@@ -604,7 +602,6 @@ export default defineComponent({
 
     const taxCode = ref('');
 
-
     const usernameInputRules = [
       (val?: string) => (val && val.trim().length) || 'Vui lòng nhập tài khoản',
     ];
@@ -613,8 +610,9 @@ export default defineComponent({
     ];
 
     const taxCodeRules = [
-        (val?: string) => (val && val.trim().length) || 'Vui lòng nhập mã số thuế',
-     ]
+      (val?: string) =>
+        (val && val.trim().length) || 'Vui lòng nhập mã số thuế',
+    ];
 
     const nameRules = [
       (val?: string) =>
@@ -720,10 +718,6 @@ export default defineComponent({
       })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
       if (response.data.error.code === config.API_RES_CODE.OK.code) {
         fieldsAddOptions.value = response.data.data;
-
-  
-
-        
       }
     };
 

src/pages/don-vi-chu-quan/index.vue

@@ -438,7 +438,7 @@ export default defineComponent({
 
     const openAddUnitDialog = () => {
       unitField.value = [];
-     taxCode.value = '',
+      taxCode.value = '';
       unitName.value = null;
       unitRepresentative.value = '';
       unitEmail.value = '';
@@ -476,7 +476,7 @@ export default defineComponent({
           unitStatus.value = response.data.data.status;
           unitArtistList.value = response.data.data.contracts;
 
-          unitField.value = response.data.data.classification;
+          unitField.value = response.data.data.classificatonId;
           unitUserName.value = response.data.data.userName;
           unitPassword.value = response.data.data.password;
         }
@@ -565,7 +565,7 @@ export default defineComponent({
         userName: unitUserName.value,
         password: unitPassword.value,
         contracts: unitArtistList.value,
-       taxCode: taxCode.value
+        taxCode: taxCode.value,
       };
       const response = (await api({
         url: API_PATHS.updateUnit,
@@ -603,7 +603,7 @@ export default defineComponent({
           userName: unitUserName.value,
           password: unitPassword.value,
           contracts: unitArtistList.value,
-          taxCode :taxCode.value
+          taxCode: taxCode.value,
         };
         const response = (await api({
           url: API_PATHS.artistOwnerAdd,