perf: DEFECT-809 configuration center add thumbnail

ww
1 parent 90cd407d
Showing 7 changed files with 91 additions and 34 deletions
src/api/configuration/center/configurationCenter.ts
src/assets/icons/configuration.svg
src/assets/images/configuration.png
src/components/Form/src/components/ApiUpload.vue
src/views/configuration/center/ConfigurationCenterDrawer.vue
src/views/configuration/center/center.data.ts
src/views/configuration/center/index.vue
--- a/src/api/configuration/center/configurationCenter.ts
View file @96568ed
+++ b/src/api/configuration/center/configurationCenter.ts
View file @96568ed
@@ -6,8 +6,10 @@ import type {
   ConfigurationCenterItemsModal,
 } from './model/configurationCenterModal';
 import { getPageData } from '../../base';
+import { FileUploadResponse } from '../../oem/model';
 enum API {
   basicUrl = '/configuration/center',
+  UPLOAD = '/oss/upload',
 }
 export const getPage = (params: queryPageParams) => {
@@ -43,3 +45,7 @@ export const saveOrUpdateConfigurationCenter = (
 ) => {
   return isUpdate ? updateConfigurationCenter(params) : saveConfigurationCenter(params);
 };
+
+export const uploadThumbnail = (file: FormData) => {
+  return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
+};
--- a/src/assets/icons/configuration.svg 0 → 100644
View file @96568ed
+++ b/src/assets/icons/configuration.svg 0 → 100644
View file @96568ed
+<svg t="1667959039355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2798" width="32" height="32"><path d="M860.068571 666.422857L726.857143 731.245714c-8.685714 4.205714-18.742857 4.205714-27.428572 0l-133.211428-64.822857A31.296 31.296 0 0 1 548.571429 638.262857V477.165714c0-11.977143 6.857143-22.948571 17.645714-28.16l133.211428-64.822857c8.685714-4.205714 18.742857-4.205714 27.428572 0l133.211428 64.822857c10.788571 5.211429 17.645714 16.182857 17.645715 28.16v161.097143c0 11.977143-6.857143 22.948571-17.645715 28.16z" fill="#B4D7FE" p-id="2799"></path><path d="M713.142857 701.988571V543.542857l-139.337143-68.571428M852.48 474.971429L713.142857 543.542857" fill="#B4D7FE" p-id="2800"></path><path d="M950.857143 146.285714H73.142857c-10.057143 0-18.285714 8.228571-18.285714 18.285715v621.714285c0 10.057143 8.228571 18.285714 18.285714 18.285715h205.714286v54.857142c0 10.057143 8.228571 18.285714 18.285714 18.285715h429.714286c10.057143 0 18.285714-8.228571 18.285714-18.285715v-54.857142H950.857143c10.057143 0 18.285714-8.228571 18.285714-18.285715V164.571429c0-10.057143-8.228571-18.285714-18.285714-18.285715zM708.571429 841.142857h-393.142858v-36.571428h393.142858v36.571428z m224-73.142857H91.428571V182.857143h841.142858v585.142857z" fill="#248BFF" p-id="2801"></path><path d="M182.857143 274.285714h201.142857v36.571429H182.857143z" fill="#B4D7FE" p-id="2802"></path><path d="M411.428571 237.714286H155.428571c-5.028571 0-9.142857 4.114286-9.142857 9.142857v457.142857c0 5.028571 4.114286 9.142857 9.142857 9.142857h256c5.028571 0 9.142857-4.114286 9.142858-9.142857V246.857143c0-5.028571-4.114286-9.142857-9.142858-9.142857z m-228.571428 36.571428h201.142857v36.571429H182.857143v-36.571429z m0 402.285715V347.428571h201.142857v329.142858H182.857143zM867.474286 452.571429l-146.285715-71.222858c-2.56-1.188571-5.302857-1.828571-8.045714-1.828571s-5.485714 0.64-8.045714 1.828571l-146.285714 71.222858c-6.217143 3.108571-10.24 9.417143-10.24 16.457142v177.371429c0 7.04 4.022857 13.348571 10.24 16.457143l146.285714 71.222857c2.56 1.188571 5.302857 1.828571 8.045714 1.828571s5.485714-0.64 8.045714-1.828571l146.285715-71.222857c6.308571-3.017143 10.24-9.417143 10.24-16.457143V469.028571c0-7.04-4.022857-13.348571-10.24-16.457142zM713.142857 418.102857l107.245714 52.205714-107.428571 52.937143c-0.64-0.365714-1.28-0.822857-1.92-1.097143l-105.142857-51.748571L713.142857 418.102857z m-128 82.834286l109.714286 54.034286v133.394285l-109.714286-53.394285V500.937143z m146.285714 187.428571V554.971429l109.714286-54.034286v134.034286l-109.714286 53.394285z" fill="#248BFF" p-id="2803"></path><path d="M347.428571 411.428571H219.428571c-10.057143 0-18.285714-8.228571-18.285714-18.285714s8.228571-18.285714 18.285714-18.285714h128c10.057143 0 18.285714 8.228571 18.285715 18.285714s-8.228571 18.285714-18.285715 18.285714zM859.428571 292.571429H484.571429c-10.057143 0-18.285714-8.228571-18.285715-18.285715s8.228571-18.285714 18.285715-18.285714h374.857142c10.057143 0 18.285714 8.228571 18.285715 18.285714s-8.228571 18.285714-18.285715 18.285715zM667.428571 356.571429H484.571429c-10.057143 0-18.285714-8.228571-18.285715-18.285715s8.228571-18.285714 18.285715-18.285714h182.857142c10.057143 0 18.285714 8.228571 18.285715 18.285714s-8.228571 18.285714-18.285715 18.285715zM548.571429 420.571429h-64c-10.057143 0-18.285714-8.228571-18.285715-18.285715s8.228571-18.285714 18.285715-18.285714h64c10.057143 0 18.285714 8.228571 18.285714 18.285714s-8.228571 18.285714-18.285714 18.285715zM237.714286 475.428571h-18.285715c-10.057143 0-18.285714-8.228571-18.285714-18.285714s8.228571-18.285714 18.285714-18.285714h18.285715c10.057143 0 18.285714 8.228571 18.285714 18.285714s-8.228571 18.285714-18.285714 18.285714z" fill="#248BFF" p-id="2804"></path><path d="M301.714286 539.428571h-82.285715c-10.057143 0-18.285714-8.228571-18.285714-18.285714s8.228571-18.285714 18.285714-18.285714h82.285715c10.057143 0 18.285714 8.228571 18.285714 18.285714s-8.228571 18.285714-18.285714 18.285714z" fill="#248BFF" p-id="2805"></path><path d="M274.285714 603.428571h-54.857143c-10.057143 0-18.285714-8.228571-18.285714-18.285714s8.228571-18.285714 18.285714-18.285714h54.857143c10.057143 0 18.285714 8.228571 18.285715 18.285714s-8.228571 18.285714-18.285715 18.285714z" fill="#248BFF" p-id="2806"></path></svg>
--- a/src/assets/images/configuration.png 0 → 100644
View file @96568ed
+++ b/src/assets/images/configuration.png 0 → 100644
View file @96568ed
--- a/src/components/Form/src/components/ApiUpload.vue
View file @96568ed
+++ b/src/components/Form/src/components/ApiUpload.vue
View file @96568ed
@@ -4,10 +4,10 @@
   };
 </script>
 <script lang="ts" setup>
-  import { Upload, Spin } from 'ant-design-vue';
+  import { Upload, Spin, Tooltip } from 'ant-design-vue';
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { computed, ref, unref, useAttrs } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { cloneDeep } from 'lodash-es';
   import { isFunction, isNumber, isObject } from '/@/utils/is';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -23,8 +23,6 @@
   const { prefixCls } = useDesign('api-upload');
   const emit = defineEmits(['update:fileList', 'preview', 'download']);
-  const attrs = useAttrs();
-
   const { createMessage } = useMessage();
   const loading = ref(false);
@@ -70,6 +68,16 @@
     return disabled ? disabled : unref(componentDisabled);
   });
+  const isPictureCard = computed(() => {
+    const { listType } = props;
+    return listType === 'picture-card';
+  });
+
+  const getMaxFileLimit = computed(() => {
+    const { maxFileLimit } = props;
+    return isPictureCard.value ? 1 : maxFileLimit;
+  });
+
   const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => {
     try {
       setUploadStatus(true);
@@ -78,10 +86,10 @@
       if (api && isFunction(api)) {
         const data = await api(file);
         if (isObject(data) && Reflect.has(data, 'uid') && Reflect.has(data, 'name')) {
-          const { fileList, maxFileLimit } = props;
+          const { fileList } = props;
           let _fileList = cloneDeep(fileList);
-          if (isNumber(maxFileLimit) && _fileList.length === maxFileLimit) {
+          if (isNumber(unref(getMaxFileLimit)) && _fileList.length === unref(getMaxFileLimit)) {
             _fileList.splice(0, 1);
           }
@@ -106,49 +114,36 @@
     emit('update:fileList', _fileList);
   };
-  const defaultPreview = (file: FileItem) => {
-    console.log('default preview', file);
-  };
-
-  const defaultDownload = (file: FileItem) => {
-    console.log('default download', file);
-  };
-
   const handlePreview = (file: FileItem) => {
-    if (Reflect.has(attrs, 'preview')) {
-      emit('preview', file);
-      return;
-    }
-    defaultPreview(file);
+    emit('preview', file);
   };
   const handleDownload = (file: FileItem) => {
-    if (Reflect.has(attrs, 'download')) {
-      emit('download', file);
-      return;
-    }
-    defaultDownload(file);
+    emit('download', file);
   };
 </script>
 <template>
-  <Upload.Dragger
+  <Upload
     class="block"
     :class="prefixCls"
     :file-list="props.fileList"
+    :list-type="props.listType"
     :disabled="getDisabled"
     :before-upload="handleBeforeUpload"
     @preview="handlePreview"
     @download="handleDownload"
     :remove="handleRemove"
   >
-    <Spin :spinning="loading">
+    <Spin v-if="!fileList.length" :spinning="loading">
       <div class="w-full h-full flex flex-col justify-center content-center">
-        <InboxOutlined class="text-[3rem] !text-blue-500" />
-        <div class="m-2 text-gray-400">点击上传或拖拽上传</div>
+        <Tooltip title="点击上传或拖拽上传">
+          <InboxOutlined class="text-[3rem] !text-blue-500" />
+        </Tooltip>
+        <div v-if="!isPictureCard" class="m-2 text-gray-400 text-sm">点击上传或拖拽上传</div>
       </div>
     </Spin>
-  </Upload.Dragger>
+  </Upload>
 </template>
 <style lang="less">
@@ -164,6 +159,12 @@
       .ant-upload-list-item-name {
         width: calc(100% - 22px);
       }
+
+      .ant-upload-select-text {
+        width: 100%;
+        text-align: center;
+        border: 1px dashed #d9d9d9;
+      }
     }
   }
 </style>
--- a/src/views/configuration/center/ConfigurationCenterDrawer.vue
View file @96568ed
+++ b/src/views/configuration/center/ConfigurationCenterDrawer.vue
View file @96568ed
@@ -17,6 +17,8 @@
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
   export default defineComponent({
     name: 'ConfigurationDrawer',
@@ -36,6 +38,11 @@
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
         if (unref(isUpdate)) {
+          if (data.record.thumbnail) {
+            data.record.thumbnail = [
+              { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
+            ];
+          }
           if (data.record.organizationDTO) {
             await setFieldsValue(data.record);
           } else {
@@ -51,9 +58,14 @@
         try {
           const { createMessage } = useMessage();
           const values = await validate();
+          if (Reflect.has(values, 'thumbnail')) {
+            const file = (values.thumbnail || []).at(0) || {};
+            values.thumbnail = file.url || null;
+          }
           setDrawerProps({ confirmLoading: true });
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';
+          console.log(values);
           await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
           closeDrawer();
           emit('success');
--- a/src/views/configuration/center/center.data.ts
View file @96568ed
+++ b/src/views/configuration/center/center.data.ts
View file @96568ed
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 export enum Platform {
   PHONE = 'phone',
   PC = 'pc',
@@ -64,6 +67,37 @@ export const searchFormSchema: FormSchema[] = [
 export const formSchema: FormSchema[] = [
   {
+    field: 'thumbnail',
+    label: '缩略图',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
+  },
+
+  {
     field: 'name',
     label: '组态名称',
     required: true,
--- a/src/views/configuration/center/index.vue
View file @96568ed
+++ b/src/views/configuration/center/index.vue
View file @96568ed
@@ -26,6 +26,7 @@
   import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
+  import { cloneDeep } from 'lodash';
   const listColumn = ref(4);
@@ -99,7 +100,7 @@
     if (record) {
       openDrawer(true, {
         isUpdate: true,
-        record,
+        record: cloneDeep(record),
       });
     } else {
       openDrawer(true, {
@@ -205,9 +206,9 @@
             <Card hoverable>
               <template #cover>
                 <img
-                  class="w-48 h-48 flex justify-center items-center"
+                  class="w-36 h-36 flex justify-center items-center"
                   alt="example"
-                  :src="configurationSrc"
+                  :src="item.thumbnail || configurationSrc"
                 />
               </template>
               <template class="ant-card-actions" #actions>
@@ -244,8 +245,10 @@
               </template>
               <Card.Meta :title="item.name">
                 <template #description>
-                  <div class="truncate">{{ item.organizationDTO.name }}</div>
-                  <div class="truncate">{{ item.remark }} </div>
+                  <div class="truncate h-11">
+                    <div class="truncate">{{ item.organizationDTO.name }}</div>
+                    <div class="truncate">{{ item.remark || '' }} </div>
+                  </div>
                 </template>
               </Card.Meta>
             </Card>