refactor: 提取图片上传组件，上传名统一修改

src/components/UploadImages/types.ts

@@ -0,0 +1,6 @@
+export interface ImageItem {
+  url: string;
+  name?: string;
+  size?: number;
+  file?: File;
+}

src/views/security-confidentiality/access-control/utils.ts

@@ -12,10 +12,16 @@ export function unformatImage(file?: string) {
   return fileData;
 }
 
-const formatImage = async (data: ImageItem) => {
+export const formatImage = async (data: ImageItem) => {
   if (!data.file) return data;
-  const name = data.file.name;
-  const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName: name, file: data.file });
+  const uuid = Math.random().toString(36).substring(2, 9);
+  const timestamp = Date.now().toString();
+  const random = Math.random().toString(36).substring(2, 4);
+  const res = await uploadFileApi({
+    bizType: UPLOAD_BIZ_TYPE.ATTACHMENT,
+    fileName: `${uuid}-${timestamp}-${random}`,
+    file: data.file,
+  });
   return res.url;
 };
 

src/views/disaster/disaster-control/PageDisposalRectificationItem.vue

@@ -36,7 +36,7 @@
   import { ElMessage } from 'element-plus';
   import UploadLoading from '@/components/UploadLoading.vue';
   import BasicForm from '@/components/BasicForm.vue';
-  import UploadImages from './src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
   import { formatAttachment } from '@/components/UploadFiles/utils';
   import DisasterInfo from './src/components/DisasterInfo.vue';
@@ -92,8 +92,14 @@
   };
   const formatImageList = async (file: File) => {
     if (!file) return file;
-    const fileName = file.name;
-    const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName, file });
+    const uuid = Math.random().toString(36).substring(2, 9);
+    const timestamp = Date.now().toString();
+    const random = Math.random().toString(36).substring(2, 4);
+    const res = await uploadFileApi({
+      bizType: UPLOAD_BIZ_TYPE.ATTACHMENT,
+      fileName: `${uuid}-${timestamp}-${random}`,
+      file,
+    });
     return res.url;
   };
 

src/views/disaster/disaster-control/src/components/CreateLossReportItem.vue

@@ -73,7 +73,7 @@
 <script setup lang="ts">
   import { useRoute } from 'vue-router';
   import { onMounted, ref, watch } from 'vue';
-  import UploadImages from './UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import BasicForm from '@/components/BasicForm.vue';
   import GroupSelect from '@/components/PersonGroup/components/GroupSelect.vue';
   import { useDisasterControlHook } from '../hook';

src/views/disaster/disaster-control/src/components/EditLossReportItem.vue

@@ -78,7 +78,7 @@
 <script setup lang="ts">
   import { useRoute } from 'vue-router';
   import { onMounted, ref, watch } from 'vue';
-  import UploadImages from './UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import BasicForm from '@/components/BasicForm.vue';
   import GroupSelect from '@/components/PersonGroup/components/GroupSelect.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';

src/views/emergency/emergency-drill/components/DrillPlanRecordForm.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
   import BasicForm from '@/components/BasicForm.vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import ShowImages from './ShowImages.vue';
   import DrillPlanApprovalDialog from './DrillPlanApprovalDialog.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';

src/views/emergency/emergency-drill/components/DrillPlanRecordItem.vue

@@ -120,8 +120,14 @@
 
   const formatImageList = async (file: File) => {
     if (!file) return file;
-    const fileName = file.name;
-    const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName, file });
+    const uuid = Math.random().toString(36).substring(2, 9);
+    const timestamp = Date.now().toString();
+    const random = Math.random().toString(36).substring(2, 4);
+    const res = await uploadFileApi({
+      bizType: UPLOAD_BIZ_TYPE.ATTACHMENT,
+      fileName: `${uuid}-${timestamp}-${random}`,
+      file,
+    });
     return '"' + res.url + '"';
   };
 

src/views/security-confidentiality/access-control/components/AccessCreate.vue

@@ -19,13 +19,13 @@
   import { ElMessage } from 'element-plus';
   import BasicForm from '@/components/BasicForm.vue';
   import UploadLoading from '@/components/UploadLoading.vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useUserInfoHook } from '@/views/disaster/hooks';
   import { createAccessRecord } from '@/api/security-confidentiality-access';
   import { CreateAccessRuleForm, CreateAccessQuery } from '../types';
   import { ACCESS_FORM_CONFIG, ACCESS_FORM_DATA, ACCESS_FORM_RULES } from '../configs/form';
-  import { formatImageList } from '../utils';
+  import { formatImageList } from '@/components/UploadImages/utils';
 
   const { realname } = useUserInfoHook();
 

src/views/security-confidentiality/access-control/components/AccessEdit.vue

@@ -24,12 +24,12 @@
   import { ElMessage } from 'element-plus';
   import BasicForm from '@/components/BasicForm.vue';
   import UploadLoading from '@/components/UploadLoading.vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { updateAccessRecord, getAccessRecordDetail } from '@/api/security-confidentiality-access';
   import type { AccessDetailResponse, CreateAccessRuleForm, UpdateAccessQuery } from '../types';
   import { ACCESS_FORM_CONFIG, ACCESS_FORM_DATA, ACCESS_FORM_RULES } from '../configs/form';
-  import { formatImageList, unformatImage } from '../utils';
+  import { formatImageList, unformatImage } from '@/components/UploadImages/utils';
 
   const props = defineProps<{
     id: number;

src/views/security-confidentiality/access-control/types.ts

@@ -1,9 +1,4 @@
-export interface ImageItem {
-  url: string;
-  name?: string;
-  size?: number;
-  file?: File;
-}
+import { ImageItem } from '@/components/UploadImages/types';
 
 export interface AccessTableQuery {
   fieldType?: number | null; //1-事件,2-地点

src/views/security-confidentiality/surveillance-management/components/ManageDrawer.vue

@@ -121,7 +121,7 @@
   import { ImageItem } from '@/types/disaster-control';
   import { useUserInfoHook } from '@/hooks/useUserInfoHook';
   import { OrganizationUserTree } from '@/views/system/user/types';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import {
     findUserByWorkNo,
     transformTreeData,

src/views/traffic/accident/components/ManageAccidentItem.vue

@@ -122,7 +122,7 @@
   import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { ElForm, ElMessage } from 'element-plus';
   import { Delete, Plus } from '@element-plus/icons-vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useUserInfoHook } from '@/views/disaster/hooks';
   import { ImageItem } from '@/types/disaster-control';
   import { UPLOAD_BIZ_TYPE, uploadFileApi } from '@/api/minio';
@@ -267,8 +267,14 @@
   // 格式化事故图片
   const formatImageList = async (file: File) => {
     if (!file) return file;
-    const fileName = file.name;
-    const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName, file });
+    const uuid = Math.random().toString(36).substring(2, 9);
+    const timestamp = Date.now().toString();
+    const random = Math.random().toString(36).substring(2, 4);
+    const res = await uploadFileApi({
+      bizType: UPLOAD_BIZ_TYPE.ATTACHMENT,
+      fileName: `${uuid}-${timestamp}-${random}`,
+      file,
+    });
     return '"' + res.url + '"';
   };
 

src/views/traffic/violation/act/components/ActCreate.vue

@@ -119,14 +119,14 @@
   import { ElMessage } from 'element-plus';
   import BasicForm from '@/components/BasicForm.vue';
   import UploadLoading from '@/components/UploadLoading.vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useUserInfoHook } from '@/views/disaster/hooks';
   import { createActData } from '@/api/traffic-violation/traffic-act';
   import { CreateActRuleForm, CreateActQuery } from '../types';
   import { ACT_FORM_CONFIG, ACT_FORM_DATA, ACT_FORM_RULES } from '../configs/form';
   import { ACT_VIOLATION_TYPE, ACT_VIOLATION_TYPE_OPTIONS } from '../constants';
-  import { formatImageList } from '../utils';
+  import { formatImageList } from '@/components/UploadImages/utils';
 
   const { realname } = useUserInfoHook();
 

src/views/traffic/violation/act/components/ActEdit.vue

@@ -124,14 +124,14 @@
   import { ElMessage } from 'element-plus';
   import BasicForm from '@/components/BasicForm.vue';
   import UploadLoading from '@/components/UploadLoading.vue';
-  import UploadImages from '@/views/disaster/disaster-control/src/components/UploadImages.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useUserInfoHook } from '@/views/disaster/hooks';
   import { getActDataDetail, updateActData } from '@/api/traffic-violation/traffic-act';
   import { CreateActRuleForm, UpdateActQuery, ActTableData } from '../types';
   import { ACT_FORM_CONFIG, ACT_FORM_DATA, ACT_FORM_RULES } from '../configs/form';
   import { ACT_VIOLATION_TYPE, ACT_VIOLATION_TYPE_OPTIONS } from '../constants';
-  import { unformatImage, formatImageList } from '../utils';
+  import { unformatImage, formatImageList } from '@/components/UploadImages/utils';
 
   const props = defineProps<{
     id: number;

src/views/traffic/violation/act/components/ImageViewer.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
   import { computed } from 'vue';
-  import { unformatImage } from '../utils';
+  import { unformatImage } from '@/components/UploadImages/utils';
 
   const props = defineProps<{
     fileList: string;

src/views/traffic/violation/act/utils.ts

@@ -1,32 +0,0 @@
-import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
-import type { ImageItem } from './types';
-
-export function stringToArray(str?: string): number[] | undefined {
-  if (!str) return undefined;
-  return JSON.parse('[' + str + ']');
-}
-
-export function unformatImage(file?: string) {
-  if (!file) return undefined;
-  const fileData: string[] = JSON.parse(file);
-  return fileData;
-}
-
-const formatImage = async (data: ImageItem) => {
-  if (!data.file) return data;
-  const name = data.file.name;
-  const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName: name, file: data.file });
-  return res.url;
-};
-
-export const formatImageList = async (data: Array<ImageItem> | undefined) => {
-  if (!data || data.length === 0) return null;
-  const res = await Promise.all(
-    data.map(async (item) => {
-      if (!item.file) return item.url;
-      const res = await formatImage(item);
-      return res;
-    }),
-  );
-  return res;
-};