Merge branch 'local_dev_ft' into 'main'

pref:优化产品Topic列表 移除不需要的文字；优化个人头像上传头像使用自带组件

See merge request yunteng/thingskit-front!491

@@ -179,14 +179,22 @@
         cropper?.value?.[event]?.(arg);
       }
 
+      const blobToFile = (blob, fileName) => {
+        const file = new File([blob], fileName, { type: blob.type });
+        const formData = new FormData();
+        formData.append('file', file);
+        return formData;
+      };
+
       async function handleOk() {
         const uploadApi = props.uploadApi;
         if (uploadApi && isFunction(uploadApi)) {
           const blob = dataURLtoBlob(previewSource.value);
+          const base64D = blobToFile(blob, filename);
           try {
             setModalProps({ confirmLoading: true });
-            const result = await uploadApi({ name: 'file', file: blob, filename });
-            emit('uploadSuccess', { source: previewSource.value, data: result.data });
+            const result = await uploadApi(base64D);
+            emit('uploadSuccess', { source: previewSource.value, data: result.fileStaticUri });
             closeModal();
           } finally {
             setModalProps({ confirmLoading: false });

-<template>
-  <div :class="getClass" :style="getStyle">
-    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
-      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
-        <Icon
-          icon="ant-design:cloud-upload-outlined"
-          :size="getIconWidth"
-          :style="getImageWrapperStyle"
-          color="#d6d6d6"
-        />
-      </div>
-      <img :src="sourceValue" v-if="sourceValue" alt="avatar" />
-    </div>
-    <a-button
-      :class="`${prefixCls}-upload-btn`"
-      @click="openModal"
-      v-if="showBtn"
-      v-bind="btnProps"
-    >
-      {{ btnText ? btnText : t('component.cropper.selectImage') }}
-    </a-button>
-
-    <CopperModal
-      @register="register"
-      @uploadSuccess="handleUploadSuccess"
-      :uploadApi="uploadApi"
-      :src="sourceValue"
-    />
-  </div>
-</template>
-<script lang="ts">
-  import {
-    defineComponent,
-    computed,
-    CSSProperties,
-    unref,
-    ref,
-    watchEffect,
-    watch,
-    PropType,
-  } from 'vue';
-  import CopperModal from './CopperModal.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useModal } from '/@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import type { ButtonProps } from '/@/components/Button';
-  import Icon from '/@/components/Icon';
-
-  const props = {
-    width: { type: [String, Number], default: '200px' },
-    value: { type: String },
-    showBtn: { type: Boolean, default: true },
-    btnProps: { type: Object as PropType<ButtonProps> },
-    btnText: { type: String, default: '' },
-    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
-  };
-
-  export default defineComponent({
-    name: 'CropperAvatar',
-    components: { CopperModal, Icon },
-    props,
-    emits: ['update:value', 'change'],
-    setup(props, { emit, expose }) {
-      const sourceValue = ref(props.value || '');
-      const { prefixCls } = useDesign('cropper-avatar');
-      const [register, { openModal, closeModal }] = useModal();
-      const { createMessage } = useMessage();
-      const { t } = useI18n();
-
-      const getClass = computed(() => [prefixCls]);
-
-      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
-
-      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
-
-      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
-
-      const getImageWrapperStyle = computed(
-        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
-      );
-
-      watchEffect(() => {
-        sourceValue.value = props.value || '';
-      });
-
-      watch(
-        () => sourceValue.value,
-        (v: string) => {
-          emit('update:value', v);
-        }
-      );
-
-      function handleUploadSuccess(source) {
-        sourceValue.value = source;
-        emit('change', source);
-        createMessage.success(t('component.cropper.uploadSuccess'));
-      }
-
-      expose({ openModal: openModal.bind(null, true), closeModal });
-
-      return {
-        t,
-        prefixCls,
-        register,
-        openModal,
-        getIconWidth,
-        sourceValue,
-        getClass,
-        getImageWrapperStyle,
-        getStyle,
-        handleUploadSuccess,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-cropper-avatar';
-
-  .@{prefix-cls} {
-    display: inline-block;
-    text-align: center;
-
-    &-image-wrapper {
-      overflow: hidden;
-      cursor: pointer;
-      background: @component-background;
-      border: 1px solid @border-color-base;
-      border-radius: 50%;
-
-      img {
-        width: 100%;
-      }
-    }
-
-    &-image-mask {
-      opacity: 0;
-      position: absolute;
-      width: inherit;
-      height: inherit;
-      border-radius: inherit;
-      border: inherit;
-      background: rgba(0, 0, 0, 0.4);
-      cursor: pointer;
-      -webkit-transition: opacity 0.4s;
-      transition: opacity 0.4s;
-
-      :deep(svg) {
-        margin: auto;
-      }
-    }
-
-    &-image-mask:hover {
-      opacity: 40;
-    }
-
-    &-upload-btn {
-      margin: 10px auto;
-    }
-  }
-</style>
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <Icon
+          icon="ant-design:cloud-upload-outlined"
+          :size="getIconWidth"
+          :style="getImageWrapperStyle"
+          color="#d6d6d6"
+        />
+      </div>
+      <img :src="sourceValue" v-if="sourceValue" alt="avatar" />
+    </div>
+    <a-button
+      :class="`${prefixCls}-upload-btn`"
+      @click="openModal"
+      v-if="showBtn"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </a-button>
+
+    <CopperModal
+      @register="register"
+      @uploadSuccess="handleUploadSuccess"
+      :uploadApi="uploadApi"
+      :src="sourceValue"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import {
+    defineComponent,
+    computed,
+    CSSProperties,
+    unref,
+    ref,
+    watchEffect,
+    watch,
+    PropType,
+  } from 'vue';
+  import CopperModal from './CopperModal.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import type { ButtonProps } from '/@/components/Button';
+  import Icon from '/@/components/Icon';
+
+  const props = {
+    width: { type: [String, Number], default: '200px' },
+    value: { type: String },
+    showBtn: { type: Boolean, default: true },
+    btnProps: { type: Object as PropType<ButtonProps> },
+    btnText: { type: String, default: '' },
+    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
+  };
+
+  export default defineComponent({
+    name: 'CropperAvatar',
+    components: { CopperModal, Icon },
+    props,
+    emits: ['update:value', 'change'],
+    setup(props, { emit, expose }) {
+      const sourceValue = ref(props.value || '');
+      const { prefixCls } = useDesign('cropper-avatar');
+      const [register, { openModal, closeModal }] = useModal();
+      const { createMessage } = useMessage();
+      const { t } = useI18n();
+
+      const getClass = computed(() => [prefixCls]);
+
+      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
+
+      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
+
+      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+      const getImageWrapperStyle = computed(
+        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
+      );
+
+      watchEffect(() => {
+        sourceValue.value = props.value || '';
+      });
+
+      watch(
+        () => sourceValue.value,
+        (v: string) => {
+          emit('update:value', v);
+        }
+      );
+
+      function handleUploadSuccess(source) {
+        sourceValue.value = source.data;
+        emit('change', source);
+        createMessage.success(t('component.cropper.uploadSuccess'));
+      }
+
+      expose({ openModal: openModal.bind(null, true), closeModal });
+
+      return {
+        t,
+        prefixCls,
+        register,
+        openModal,
+        getIconWidth,
+        sourceValue,
+        getClass,
+        getImageWrapperStyle,
+        getStyle,
+        handleUploadSuccess,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-cropper-avatar';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    text-align: center;
+
+    &-image-wrapper {
+      overflow: hidden;
+      cursor: pointer;
+      background: @component-background;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &-image-mask {
+      opacity: 0;
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      border-radius: inherit;
+      border: inherit;
+      background: rgba(0, 0, 0, 0.4);
+      cursor: pointer;
+      -webkit-transition: opacity 0.4s;
+      transition: opacity 0.4s;
+
+      :deep(svg) {
+        margin: auto;
+      }
+    }
+
+    &-image-mask:hover {
+      opacity: 40;
+    }
+
+    &-upload-btn {
+      margin: 10px auto;
+    }
+  }
+</style>

@@ -13,30 +13,9 @@
         <div class="text-center cursor-pointer">
           <div class="text-left text-lg border-gray-200 p-2 border">个人头像</div>
           <div class="flex items-center justify-center mt-4">
-            <Upload
-              name="avatar"
-              list-type="picture-card"
-              class="round !flex justify-center items-center"
-              :show-upload-list="false"
-              :customRequest="customUpload"
-              :before-upload="beforeUpload"
-            >
-              <img
-                class="round"
-                v-if="personalPicture || headerImg"
-                :src="personalPicture || headerImg"
-                alt="avatar"
-              />
-              <div v-else>
-                <div>
-                  <LoadingOutlined class="text-3xl" v-if="loading" />
-                  <PlusOutlined v-else class="text-3xl" />
-                </div>
-              </div>
-            </Upload>
+            <CropperAvatar @change="handleChange" :uploadApi="uploadApi" :value="personalPicture" />
           </div>
         </div>
-
         <Description @register="registerDesc" class="mt-8 p-4" />
       </div>
       <div class="ml-4 border border-gray-200">
@@ -49,22 +28,19 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './config';
   import { Description, DescItem, useDescription } from '/@/components/Description/index';
   import { uploadApi, personalPut } from '/@/api/personal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { Upload } from 'ant-design-vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
-  import type { FileItem } from '/@/components/Upload/src/typing';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
   import headerImg from '/@/assets/images/logo.png';
   import { getMyInfo } from '/@/api/sys/user';
   import { UserInfoModel } from '/@/api/sys/model/userModel';
   import { UserInfo } from '/#/store';
+  import { CropperAvatar } from '/@/components/Cropper';
 
   const schema: DescItem[] = [
     {
@@ -95,7 +71,12 @@
 
   export default defineComponent({
     name: 'Index',
-    components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
+    components: {
+      BasicModal,
+      BasicForm,
+      Description,
+      CropperAvatar,
+    },
     emits: ['refreshPersonal', 'register'],
     setup(_, { emit }) {
       const loading = ref(false);
@@ -111,31 +92,8 @@
         column: 1,
         bordered: true,
       });
-
-      const customUpload = async ({ file }) => {
-        if (beforeUpload(file)) {
-          personalPicture.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await uploadApi(formData);
-          if (response.fileStaticUri) {
-            personalPicture.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      };
-
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
+      const handleChange = (e) => {
+        personalPicture.value = e.data;
       };
 
       const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
@@ -146,7 +104,7 @@
       const [registerModal, { closeModal }] = useModalInner(async () => {
         const info = await getMyInfo();
         personalInfo.value = info;
-        personalPicture.value = info.avatar;
+        personalPicture.value = info.avatar || headerImg;
         setFieldsValue(info);
         setDescProps({ data: info });
       });
@@ -157,7 +115,7 @@
         const record = await personalPut({
           ...value,
           id: userInfo.userId,
-          avatar: unref(personalPicture),
+          avatar: personalPicture.value,
         });
 
         userStore.setUserInfo(record as unknown as UserInfo);
@@ -171,13 +129,13 @@
         personalInfo,
         registerDesc,
         personalPicture,
-        beforeUpload,
-        customUpload,
         handleSubmit,
         registerModal,
         registerForm,
         loading,
         headerImg,
+        uploadApi,
+        handleChange,
       };
     },
   });

@@ -55,7 +55,9 @@ export const topicTableColumn: BasicColumn[] = [
     customRender: ({ text }: { text: any }) => {
       return h(
         'span',
+
         {
+          style: { cursor: 'pointer' },
           onClick: () => {
             handeleCopy(text);
           },
@@ -73,6 +75,7 @@ export const topicTableColumn: BasicColumn[] = [
       return h(
         'span',
         {
+          style: { cursor: 'pointer' },
           onClick: () => {
             handeleCopy(text);
           },
@@ -180,8 +183,8 @@ export const list = [
   {
     deviceType: '网关/直连/网关子设备',
     function: '事件上报',
-    release: 'v1/devices/event/${deviceId}/${identifier}/{$eventType}',
-    subscribe: 'v1/devices/event/${deviceId}/${identifier}/{$eventType}',
+    release: 'v1/devices/event/${deviceId}/${identifier}',
+    subscribe: 'v1/devices/event/${deviceId}/${identifier}',
     platform: '订阅',
     device: '发布',
   },

@@ -6,52 +6,21 @@
           <template #logoUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  @preview="handlePreview"
-                  :customRequest="customUploadLogoPic"
-                  :before-upload="beforeUploadLogoPic"
-                >
-                  <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
               </template>
               <template #uploadText>
-                <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-                </div>
+                <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
               </template>
             </ContentUploadText>
           </template>
           <template #bgUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadBgPic"
-                  :before-upload="beforeUploadBgPic"
-                >
-                  <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading1" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
               </template>
               <template #uploadText>
                 <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
+                  支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过5M
                 </div>
               </template>
             </ContentUploadText>
@@ -83,7 +52,7 @@
               </template>
               <template #uploadText>
                 <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
+                  支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过5M
                 </div>
               </template>
             </ContentUploadText>
@@ -108,15 +77,16 @@
   import { defineComponent, ref, unref, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Loading } from '/@/components/Loading/index';
-  import { Card, Upload, Input, Modal, Spin } from 'ant-design-vue';
+  import { Card, Upload, Input, Modal } from 'ant-design-vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { schemas } from '../config/AppDraw.config';
   import { FileItem, FileInfo } from '../types/index';
-  import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';
+  import { bgUpload, resetAppInfo } from '/@/api/oem/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
@@ -129,7 +99,7 @@
       Modal,
       Authority,
       ContentUploadText,
-      Spin,
+      CustomUploadComp,
     },
     setup() {
       const loading = ref(false);
@@ -170,59 +140,20 @@
         previewVisible.value = true;
       };
 
+      const handleSetBgImgUrl = (d) => {
+        bgPic.value = d;
+      };
+
+      const handleSetLogoImgUrl = (d) => {
+        logoPic.value = d;
+      };
+
       // logo图片上传
       const logoPic = ref();
-      async function customUploadLogoPic({ file }) {
-        if (beforeUploadLogoPic(file)) {
-          logoPic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await logoUpload(formData);
-          if (response.fileStaticUri) {
-            logoPic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-      const beforeUploadLogoPic = (file) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 < 500;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过500KB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
 
       // 登录页背景上传
       const bgPic = ref();
-      async function customUploadBgPic({ file }) {
-        if (beforeUploadBgPic(file)) {
-          bgPic.value = '';
-          loading1.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await bgUpload(formData);
-          if (response.fileStaticUri) {
-            bgPic.value = response.fileStaticUri;
-            loading1.value = false;
-          }
-        }
-      }
-      const beforeUploadBgPic = (file) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过2MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
+
       // 首页轮播图
       const fileList = ref<FileItem[]>([]);
       async function customUploadHomeSwiper({ file }) {
@@ -337,10 +268,6 @@
         handleUpdateInfo,
         handleCancel,
         handlePreview,
-        customUploadLogoPic,
-        beforeUploadLogoPic,
-        customUploadBgPic,
-        beforeUploadBgPic,
         customUploadHomeSwiper,
         beforeUploadHomeSwiper,
         handleChange,
@@ -351,6 +278,8 @@
         loading,
         loading1,
         handleResetInfo,
+        handleSetBgImgUrl,
+        handleSetLogoImgUrl,
       };
     },
   });
@@ -371,9 +300,4 @@
     border: 1px dashed #d9d9d9;
     text-align: left;
   }
-
-  .fill-img {
-    width: 100%;
-    height: 100%;
-  }
 </style>

@@ -6,26 +6,10 @@
           <template #logoUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadLogoPic"
-                  :before-upload="beforeUploadLogoPic"
-                >
-                  <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
               </template>
               <template #uploadText>
-                <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-                </div>
+                <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
               </template>
             </ContentUploadText>
           </template>
@@ -61,23 +45,7 @@
           <template #bgUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadBgPic"
-                  :before-upload="beforeUploadBgPic"
-                >
-                  <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />
-                  <div v-else>
-                    <div>
-                      <Spin v-if="loading2" tip="正在上传中..." />
-                      <PlusOutlined v-else />
-                      <div class="ant-upload-text">上传</div>
-                    </div>
-                  </div></Upload
-                >
+                <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
               </template>
               <template #uploadText>
                 <div class="box-outline">
@@ -112,19 +80,13 @@
   import { Loading } from '/@/components/Loading/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
-  import {
-    logoUpload,
-    iconUpload,
-    bgUpload,
-    getPlatForm,
-    updatePlatForm,
-    resetPlateInfo,
-  } from '/@/api/oem/index';
+  import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
@@ -137,6 +99,7 @@
       Authority,
       ContentUploadText,
       Spin,
+      CustomUploadComp,
     },
     setup() {
       const loading = ref(false);
@@ -163,30 +126,13 @@
       const logoPic = ref();
       const iconPic = ref();
       const bgPic = ref();
-      // logo图片上传
-      async function customUploadLogoPic({ file }) {
-        if (beforeUploadLogoPic(file)) {
-          logoPic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await logoUpload(formData);
-          if (response.fileStaticUri) {
-            logoPic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-      const beforeUploadLogoPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 < 500;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过500KB!');
-        }
-        return isJpgOrPng && isLt2M;
+
+      const handleSetBgImgUrl = (d) => {
+        bgPic.value = d;
+      };
+
+      const handleSetLogoImgUrl = (d) => {
+        logoPic.value = d;
       };
       // Icon上传
       async function customUploadIconPic({ file }) {
@@ -213,32 +159,6 @@
         }
         return isJpgOrPng && isLt2M;
       };
-      // 登录页背景上传
-      async function customUploadBgPic({ file }) {
-        if (beforeUploadBgPic(file)) {
-          bgPic.value = '';
-          loading2.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await bgUpload(formData);
-          if (response.fileStaticUri) {
-            bgPic.value = response.fileStaticUri;
-            loading2.value = false;
-          }
-        }
-      }
-      const beforeUploadBgPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
-
       // 更新
       const handleUpdateInfo = async () => {
         try {
@@ -296,18 +216,16 @@
         logoPic,
         iconPic,
         bgPic,
-        customUploadLogoPic,
-        beforeUploadLogoPic,
         customUploadIconPic,
         beforeUploadIconPic,
-        customUploadBgPic,
-        beforeUploadBgPic,
         compState,
         handleUpdateInfo,
         loading,
         loading1,
         loading2,
         handleResetInfo,
+        handleSetBgImgUrl,
+        handleSetLogoImgUrl,
       };
     },
   });

@@ -5,21 +5,7 @@
         <template #qrcode>
           <ContentUploadText>
             <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadqrcodePic"
-                :before-upload="beforeUploadqrcodePic"
-              >
-                <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
-                <div v-else>
-                  <Spin v-if="loading" tip="正在上传中..." />
-                  <PlusOutlined v-else />
-                  <div class="ant-upload-text">上传</div>
-                </div></Upload
-              >
+              <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" />
             </template>
             <template #uploadText>
               <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
@@ -46,7 +32,7 @@
 
 <script lang="ts">
   import { defineComponent, onMounted, ref, computed } from 'vue';
-  import { Card, Upload, Spin } from 'ant-design-vue';
+  import { Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas, provSchemas } from '../config/enterPriseInfo.config';
   import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
@@ -54,25 +40,21 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache';
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import { qrcodeUpload } from '/@/api/oem/index';
-  import type { FileItem } from '/@/components/Upload/src/typing';
   import type { CityItem, Code } from '../types';
   import { Authority } from '/@/components/Authority';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
       Card,
       BasicForm,
       Loading,
-      Upload,
-      PlusOutlined,
       Authority,
       ContentUploadText,
-      Spin,
+      CustomUploadComp,
     },
     setup() {
       const userInfo: any = getAuthCache(USER_INFO_KEY);
@@ -119,30 +101,8 @@
       const { createMessage } = useMessage();
 
       const qrcodePic = ref();
-      const customUploadqrcodePic = async ({ file }) => {
-        clearValidate('qrcode');
-        if (beforeUploadqrcodePic(file)) {
-          qrcodePic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await qrcodeUpload(formData);
-          if (response.fileStaticUri) {
-            qrcodePic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      };
-      const beforeUploadqrcodePic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
+      const handleSetCodeImgUrl = (d) => {
+        qrcodePic.value = d;
       };
       // 更新
       const handleUpdateInfo = async () => {
@@ -372,11 +332,10 @@
         compState,
         qrcodePic,
         handleUpdateInfo,
-        customUploadqrcodePic,
-        beforeUploadqrcodePic,
         registerCustomForm,
         loading,
         isWhereAdmin,
+        handleSetCodeImgUrl,
       };
     },
   });

+<script setup name="CustomUploadComp" lang="ts">
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { Upload, Spin } from 'ant-design-vue';
+  import { ref, watchEffect } from 'vue';
+  import { useUpload } from './hooks/useUploadFile.hook';
+  import { logoUpload } from '/@/api/oem';
+
+  const props = withDefaults(
+    defineProps<{
+      imgUrl: string;
+    }>(),
+    {
+      imgUrl: '',
+    }
+  );
+  const emit = defineEmits(['setImg']);
+
+  const { beforeUploadVerify } = useUpload();
+
+  const uploadLoading = ref(false);
+
+  const uploadImgUrl = ref('');
+
+  //上传图片接口
+  const customUpload = async ({ file }) => {
+    try {
+      if (beforeUploadVerify(file)) {
+        uploadImgUrl.value = '';
+        uploadLoading.value = true;
+        const formData = new FormData();
+        formData.append('file', file);
+        const response = await logoUpload(formData);
+        if (response.fileStaticUri) {
+          uploadImgUrl.value = response.fileStaticUri;
+          emit('setImg', uploadImgUrl.value);
+        }
+      }
+    } finally {
+      uploadLoading.value = false;
+    }
+  };
+
+  watchEffect(() => {
+    init();
+  });
+  function init() {
+    if (!props.imgUrl) uploadImgUrl.value = '';
+    uploadImgUrl.value = props.imgUrl;
+  }
+</script>
+
+<template>
+  <div>
+    <Upload
+      name="avatar"
+      list-type="picture-card"
+      class="avatar-uploader"
+      :show-upload-list="false"
+      :customRequest="customUpload"
+      :before-upload="beforeUploadVerify"
+    >
+      <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
+      <div v-else>
+        <Spin v-if="uploadLoading" tip="正在上传中..." />
+        <PlusOutlined v-else />
+        <div class="ant-upload-text">上传</div>
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .fill-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+
+export const useUpload = () => {
+  //验证图片类型和大小
+  const beforeUploadVerify = ({ type, size }) => {
+    const isJpgOrPng = type === 'image/jpeg' || type === 'image/png';
+    if (!isJpgOrPng) {
+      createMessage.error('只能上传图片文件!');
+    }
+    const limitImgSize = (size as number) / 1024 / 1024 < 5;
+    if (!limitImgSize) {
+      createMessage.error('图片大小不能超过5MB!');
+    }
+    return isJpgOrPng && limitImgSize;
+  };
+  return {
+    beforeUploadVerify,
+  };
+};

+import CustomUploadComp from './CustomUploadComp.vue';
+export { CustomUploadComp };