update

src/assets/configurations.example.ts

@@ -97,4 +97,14 @@ export enum API_PATHS {
   getDetailInfoVAB = 'information/detail',
   updateInfoVAB = 'information/update',
   getListVABInfo = 'information',
+  getListBanner = 'config/home/banner',
+  getDetailBanner = 'config/home/banner/detail',
+  addBanner = 'config/home/banner/add',
+  updateBanner = 'config/home/banner/update',
+  deleteBanner = 'config/home/banner/delete',
+  getListConfigPartner = 'config/home/partner',
+  deleteConfigPartner = 'config/home/partner/delete',
+  addConfigPartner = 'config/home/partner/add',
+  getDetailConfigPartner = 'config/home/partner/detail',
+  updateConfigPartner = 'config/home/partner/update',
 }

src/assets/type.ts

@@ -565,3 +565,105 @@ export type UpdateVABInfoType = {
   twtLink: string;
   fbLink: string;
 };
+
+export type ListBannerConfig = {
+  id: number;
+  name: string;
+  bannerType: string;
+  numIndex: number;
+  image: string;
+  urlTarget: string;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type DetailBannerConfig = {
+  id: number;
+  name: string;
+  bannerType: string;
+  numIndex: number;
+  image: string;
+  urlTarget: string;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type UpdateBannerConfig = {
+  id: number;
+  name: string;
+  bannerType: string;
+  numIndex: number;
+  image: string;
+  urlTarget: string;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type AddBannerConfig = {
+  name: string;
+  bannerType: string;
+  numIndex: number;
+  image: string;
+  urlTarget: string;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type ListConfigPartner = {
+  id: number;
+  name: string;
+  image: string;
+  numIndex: number;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type DetailConfigPartner = {
+  id: number;
+  name: string;
+  image: string;
+  numIndex: number;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type updateConfigPartnerConfig = {
+  id: number;
+  name: string;
+  image: string;
+  numIndex: number;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};
+
+export type addConfigPartnerConfig = {
+  name: string;
+  image: string;
+  numIndex: number;
+  status: number;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+};

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

@@ -4,7 +4,7 @@
     :model-value="isOpened"
     @update:model-value="$emit('update:isOpened', $event)"
   >
-    <q-card class="full-width" style="max-width: 50rem" bordered>
+    <q-card class="full-width" style="max-width: 80rem" bordered>
       <q-form
         greedy
         @submit.prevent="
@@ -27,53 +27,69 @@
 
         <q-card-section
           class="overflow-auto"
-          style="max-height: calc(100vh - 10rem)"
+          style="max-height: calc(100vh - 15rem)"
         >
           <div class="row q-col-gutter-sm">
             <div class="col-6">
-              <div class="row flex-center q-pt-sm">
+              <div class="row flex-center">
                 <div>
-                  <q-card style="margin-bottom: 8px" v-if="image !== null">
+                  <q-card class="q-mb-sm" v-if="image !== null">
                     <q-img
-                      :src="image"
-                      style="height: 268px; width: 350px"
                       @click="uploadAvatar"
-                    >
-                    </q-img>
+                      :src="image"
+                      style="height: 250px; width: 450px; cursor: pointer"
+                    ></q-img>
                     <q-icon
                       name="mdi-close-circle"
                       color="red"
-                      style="position: absolute; right: 0; font-size: 18px"
+                      style="
+                        position: absolute;
+                        right: 0;
+                        font-size: 18px;
+                        cursor: pointer;
+                      "
                       @click="deleteAvatar"
                     ></q-icon>
                   </q-card>
-                  <q-card v-else style="margin-bottom: 8px">
-                    <q-img
-                      src="~/assets/noavatar.png"
-                      style="height: 265px; width: 350px"
-                    ></q-img>
-                  </q-card>
-
-                  <q-card @click="uploadAvatar">
-                    <div align="center" class="flex flex-center q-py-xs">
+                  <div
+                    @click="uploadAvatar"
+                    v-else
+                    class="q-mb-sm"
+                    style="
+                      height: 250px;
+                      width: 450px;
+                      border: 2px dashed #5d319e;
+                      border-radius: 4px;
+                      cursor: pointer;
+                    "
+                  >
+                    <div
+                      style="
+                        height: 250px;
+                        width: 450px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                      "
+                    >
                       <q-icon
                         style="color: #5d319e"
-                        name="mdi-plus-circle-outline"
-                        :size="'xs'"
+                        name="mdi-cloud-upload"
+                        size="xl"
                       ></q-icon>
-                      <div class="q-mt-xs">
-                        {{ $t('banner.uploadImg') }}
-                      </div>
+                      Tải ảnh lên
                     </div>
-
+                  </div>
+                  <div>
                     <input
                       ref="upload"
                       hidden
-                      type="file"
                       @change="selectedFile($event.target.files)"
+                      type="file"
                       accept="image/png, image/jpeg"
                     />
-                  </q-card>
+                  </div>
                 </div>
               </div>
             </div>
@@ -88,7 +104,17 @@
                 :rules="nameRules"
                 clearable
               ></q-input>
-              <q-select
+              <q-input
+                :model-value="numIndex"
+                @update:model-value="$emit('update:numIndex', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.numIndex')"
+                mask="####"
+                class="q-my-sm"
+                outlined
+                :rules="numIndexRules"
+                clearable
+              ></q-input>
+              <!-- <q-select
                 :model-value="type"
                 @update:model-value="$emit('update:type', $event)"
                 :label="$t('banner.dialogLabel.bannerLabels.type')"
@@ -100,21 +126,19 @@
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></q-select>
-              <q-select
+              ></q-select> -->
+              <!-- <q-select
                 :model-value="location"
                 @update:model-value="$emit('update:location', $event)"
                 :label="$t('banner.dialogLabel.bannerLabels.location')"
                 :rules="locationRules"
                 :options="locationOptions"
                 map-options
-                option-value="id"
-                option-label="name"
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></q-select>
-              <q-input
+              ></q-select> -->
+              <!-- <q-input
                 :model-value="urlTarget"
                 @update:model-value="$emit('update:urlTarget', $event)"
                 :label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
@@ -123,7 +147,7 @@
                 class="q-my-sm"
                 outlined
                 clearable
-              ></q-input>
+              ></q-input> -->
               <div class="q-pt-sm">
                 <span class="text-body1">{{
                   $t('banner.dialogLabel.bannerLabels.status')
@@ -175,12 +199,11 @@ export default defineComponent({
     isUpdate: { type: Boolean, default: false },
     name: { type: String, required: true },
     image: { type: String, required: true },
-    urlTarget: { type: String, required: true },
+    // urlTarget: { type: String, required: true },
     status: { type: Number, required: true },
-    type: { type: Number, required: true },
-    typeOptions: { type: Array, required: true },
-    location: { type: Number, required: true },
-    locationOptions: { type: Array, required: true },
+    // type: { type: Number, required: true },
+    // typeOptions: { type: Array, required: true },
+    numIndex: { type: Number, required: true },
   },
   setup(_, context) {
     const selectedFile = (value: FileList) => {
@@ -199,42 +222,43 @@ export default defineComponent({
       // eslint-disable-next-line
       upload.value?.click();
     };
-    const urlTargetRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('banner.validateMessages.requireUrlTarget'),
-    ];
+    // const urlTargetRules = [
+    //   (val?: string) =>
+    //     (val && val.trim().length) ||
+    //     i18n.global.t('banner.validateMessages.requireUrlTarget'),
+    // ];
     const nameRules = [
       (val?: string) =>
         (val && val.trim().length) ||
         i18n.global.t('banner.validateMessages.requireName'),
     ];
-    const typeRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('banner.validateMessages.requireType'),
-    ];
-    const locationRules = [
+    // const typeRules = [
+    //   (val?: number) =>
+    //     val !== undefined ||
+    //     i18n.global.t('banner.validateMessages.requireType'),
+    // ];
+    const numIndexRules = [
       (val?: number) =>
         val !== undefined ||
         i18n.global.t('banner.validateMessages.requireLocation'),
     ];
     return {
-      urlTargetRules,
+      // urlTargetRules,
       nameRules,
-      typeRules,
-      locationRules,
+      // typeRules,
+      numIndexRules,
       selectedFile,
       deleteAvatar,
       uploadAvatar,
+      upload,
     };
   },
   emits: [
     'update:isOpened',
     'update:name',
-    'update:urlTarget',
-    'update:type',
-    'update:location',
+    // 'update:urlTarget',
+    // 'update:type',
+    'update:numIndex',
     'update:status',
     'update:image',
     'SetAvatar',

src/components/add-update-cau-hinh-doi-tac-truyen-thong/index.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('saveConfigPartnerInfo', {});
+          $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('configPartner.dialogLabel.title.addConfigPartner')
+                  : $t('configPartner.dialogLabel.title.updateConfigPartner')
+              }}</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">
+              <div class="row flex-center">
+                <div>
+                  <q-card class="q-mb-sm" v-if="image !== null">
+                    <q-img
+                      @click="uploadAvatar"
+                      :src="image"
+                      style="height: 250px; 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: 250px;
+                      width: 450px;
+                      border: 2px dashed #5d319e;
+                      border-radius: 4px;
+                      cursor: pointer;
+                    "
+                  >
+                    <div
+                      style="
+                        height: 250px;
+                        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-input
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="
+                  $t('configPartner.dialogLabel.configPartnerLabels.name')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="numIndex"
+                @update:model-value="$emit('update:numIndex', $event)"
+                :label="
+                  $t('configPartner.dialogLabel.configPartnerLabels.numIndex')
+                "
+                mask="####"
+                class="q-my-sm"
+                outlined
+                :rules="numIndexRules"
+                clearable
+              ></q-input>
+              <!-- <q-select
+                :model-value="type"
+                @update:model-value="$emit('update:type', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.type')"
+                :rules="typeRules"
+                :options="typeOptions"
+                map-options
+                option-value="id"
+                option-label="name"
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-select> -->
+              <!-- <q-select
+                :model-value="location"
+                @update:model-value="$emit('update:location', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.location')"
+                :rules="locationRules"
+                :options="locationOptions"
+                map-options
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-select> -->
+              <!-- <q-input
+                :model-value="urlTarget"
+                @update:model-value="$emit('update:urlTarget', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
+                :rules="urlTargetRules"
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input> -->
+              <div class="q-pt-sm">
+                <span class="text-body1">{{
+                  $t('configPartner.dialogLabel.configPartnerLabels.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('banner.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('configPartner.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } 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 },
+    image: { type: String, required: true },
+    // urlTarget: { type: String, required: true },
+    status: { type: Number, required: true },
+    // type: { type: Number, required: true },
+    // typeOptions: { type: Array, required: true },
+    numIndex: { type: Number, required: true },
+  },
+  setup(_, context) {
+    const selectedFile = (value: FileList) => {
+      context.emit('SetAvatar', {
+        file: value[0],
+        url: URL.createObjectURL(value[0]),
+      });
+    };
+    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 urlTargetRules = [
+    //   (val?: string) =>
+    //     (val && val.trim().length) ||
+    //     i18n.global.t('banner.validateMessages.requireUrlTarget'),
+    // ];
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('configPartner.validateMessages.requireName'),
+    ];
+    // const typeRules = [
+    //   (val?: number) =>
+    //     val !== undefined ||
+    //     i18n.global.t('banner.validateMessages.requireType'),
+    // ];
+    const numIndexRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('configPartner.validateMessages.requireLocation'),
+    ];
+    return {
+      // urlTargetRules,
+      nameRules,
+      // typeRules,
+      numIndexRules,
+      selectedFile,
+      deleteAvatar,
+      uploadAvatar,
+      upload,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:name',
+    // 'update:urlTarget',
+    // 'update:type',
+    'update:numIndex',
+    'update:status',
+    'update:image',
+    'SetAvatar',
+    'deleteAvatar',
+    'saveConfigPartnerInfo',
+  ],
+});
+</script>

src/router/routes.ts

@@ -22,6 +22,7 @@ export enum Pages {
   configSystem = 'cau-hinh-trang-tinh',
   news = 'cau-hinh-tin-tuc',
   hotProduct = 'cau-hinh-san-pham-noi-bat',
+  configPartner = 'cau-hinh-doi-tac-truyen-thong',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -134,6 +135,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/cau-hinh-san-pham-noi-bat/index.vue'),
         name: Pages.hotProduct,
       },
+      {
+        path: 'cau-hinh-doi-tac-truyen-thong',
+        component: () =>
+          import('pages/cau-hinh-doi-tac-truyen-thong/index.vue'),
+        name: Pages.configPartner,
+      },
     ],
   },