fix: DEFECT-1644 所有可以上传图片的都需要预览个删除按钮

fengwotao
1 parent 6c08bd8b
Showing 3 changed files with 50 additions and 30 deletions
src/views/device/list/config/data.ts
src/views/device/list/cpns/modal/DeviceModal.vue
src/views/device/list/cpns/step/DeviceStep1.vue
--- a/src/views/device/list/config/data.ts
View file @5b2888a
+++ b/src/views/device/list/config/data.ts
View file @5b2888a
@@ -12,6 +12,9 @@ import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/compo
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
@@ -29,8 +32,33 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'icon',
     label: '设备图片',
-    slot: 'iconSelect',
-    component: 'Input',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        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: 'alias',
--- a/src/views/device/list/cpns/modal/DeviceModal.vue
View file @5b2888a
+++ b/src/views/device/list/cpns/modal/DeviceModal.vue
View file @5b2888a
@@ -157,7 +157,7 @@
               sn: stepRecord.name,
               customerId: currentDeviceData.customerId,
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
             };
@@ -169,7 +169,7 @@
               ...stepRecord,
               sn: stepRecord.name,
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
               deviceToken:
--- a/src/views/device/list/cpns/step/DeviceStep1.vue
View file @5b2888a
+++ b/src/views/device/list/cpns/step/DeviceStep1.vue
View file @5b2888a
@@ -22,24 +22,6 @@
             </div>
           </div>
         </template>
-        <template #iconSelect>
-          <Upload
-            name="avatar"
-            accept=".png,.jpg,.jpeg,.gif"
-            :show-upload-list="false"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :customRequest="customUpload"
-            :before-upload="beforeUpload"
-          >
-            <img v-if="devicePic" :src="devicePic" alt="avatar" />
-            <div v-else>
-              <LoadingOutlined v-if="loading" />
-              <PlusOutlined v-else />
-              <div class="ant-upload-text">图片上传</div>
-            </div>
-          </Upload>
-        </template>
         <template #snCode="{ model, field }">
           <div class="flex">
             <Input v-model:value="model[field]" placeholder="请输入设备名称" />
@@ -115,10 +97,9 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
-  import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
-  import { EnvironmentTwoTone, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+  import { Input, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
+  import { EnvironmentTwoTone } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
@@ -130,21 +111,20 @@
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { toRaw } from 'vue';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
   export default defineComponent({
     components: {
       BasicForm,
       Input,
       AutoComplete,
-      Upload,
       EnvironmentTwoTone,
-      PlusOutlined,
       Modal,
       Form,
       FormItem: Form.Item,
       Row,
       Col,
-      LoadingOutlined,
       DeptDrawer,
     },
     props: {
@@ -202,8 +182,11 @@
       async function nextStep() {
         try {
           let values = await validate();
-          values = { devicePic: devicePic.value, ...positionState, ...values };
-          delete values.icon;
+          if (Reflect.has(values, 'icon')) {
+            const file = (unref(values.icon) || []).at(0) || {};
+            values.icon = file.url || null;
+          }
+          values = { ...positionState, ...values };
           delete values.deviceAddress;
           emit('next', values);
           // 获取输入的数据
@@ -405,6 +388,11 @@
         positionState.address = deviceInfo.address;
         devicePositionState.value = { ...toRaw(positionState) };
         devicePic.value = deviceInfo.avatar;
+        if (deviceInfo.avatar) {
+          setFieldsValue({
+            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
+          });
+        }
         setFieldsValue({
           ...data,
           code: data?.code,
@@ -414,6 +402,10 @@
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
         const value = getFieldsValue();
+        if (Reflect.has(value, 'icon')) {
+          const file = (value.icon || []).at(0) || {};
+          value.icon = file.url || null;
+        }
         return {
           ...value,
           ...(value?.code || value?.addressCode