feat: 水毁增加附件上传

packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue

@@ -466,4 +466,12 @@ onMounted(() => {
   max-width: 260px;
   flex-shrink: 0;
 }
+:deep(.upload-block) {
+  display: flex;
+  justify-content: flex-end;
+}
+:deep(.preview-block .preview-list) {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue

@@ -9,7 +9,7 @@
       </template>
 
       <!-- 所有表单项合并到一个区域，每行一个 -->
-      <el-form :model="formData" >
+      <el-form :model="formData">
         <BlockItem title="处置情况">
           <!-- 处置措施 -->
           <el-form-item label="处置措施" required>
@@ -132,6 +132,13 @@
           </el-radio-group>
         </el-form-item> -->
 
+        <el-form-item label="附件">
+          <div class="upload-wrapper">
+            <FileUpload v-model="formData.fileList" type="image" :limit="6" />
+            <div class="upload-tip">只能上传jpg/png文件，且不超过500kb 最多上传6张照片</div>
+          </div>
+        </el-form-item>
+
         <el-form-item>
           <el-button type="primary" @click="handleAddSubmit">追加记录</el-button>
         </el-form-item>
@@ -147,14 +154,15 @@ import { request } from '@shared/utils/request'
 import BlockItem from '@/component/BlockItem.vue'
 import NumberInput from '@/component/NumberInput/NumberInput.vue'
 import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
 import { useRouter } from 'vue-router'
 
 // Props 定义
 const props = defineProps({
   value: {
     type: Object,
-    default: () => ({})
-  }
+    default: () => ({}),
+  },
 })
 
 // Emits 定义
@@ -163,12 +171,10 @@ const emit = defineEmits(['input', 'change'])
 const router = useRouter()
 
 const createDefaultFormData = () => ({
-  event: {
-  },
-  report: {
-  },
+  event: {},
+  report: {},
   lossList: [],
-  fileList: []
+  fileList: [],
 })
 
 // 表单数据
@@ -181,25 +187,25 @@ const roadConditionOptions = [
   { label: '省道', value: '省道' },
   { label: '县道', value: '县道' },
   { label: '乡道', value: '乡道' },
-  { label: '村道', value: '村道' }
+  { label: '村道', value: '村道' },
 ]
 
 const blockedOptions = [
   { label: '是', value: true },
-  { label: '否', value: false }
+  { label: '否', value: false },
 ]
 
 const repairProgressOptions = [
   { label: '未抢险', value: '未抢险' },
   { label: '抢险中', value: '抢险中' },
-  { label: '已完成', value: '已完成' }
+  { label: '已完成', value: '已完成' },
 ]
 
 // 日期选择器配置
 const pickerOptions = {
   disabledDate(time) {
     return time.getTime() < new Date(2020, 0, 1) || time.getTime() > new Date(2030, 11, 31)
-  }
+  },
 }
 
 // 监听外部传入的值
@@ -210,7 +216,7 @@ watch(
       initFormData(newVal)
     }
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 )
 
 // 监听表单数据变化，向外传递
@@ -220,7 +226,7 @@ watch(
     emit('input', newVal)
     emit('change', newVal)
   },
-  { deep: true }
+  { deep: true },
 )
 
 // 初始化表单数据
@@ -276,7 +282,7 @@ const handleAddSubmit = async () => {
 
     // 添加事件类型和站点信息
     const submitData = {
-      ...formData.value
+      ...formData.value,
       // 可以在这里添加站点信息等其他数据
     }
 
@@ -288,7 +294,7 @@ const handleAddSubmit = async () => {
     const res = await request({
       url: apiUrl,
       method: 'post',
-      data: submitData
+      data: submitData,
     })
 
     if (res?.code === '00000') {
@@ -316,7 +322,7 @@ defineExpose({
   initFormData,
   getFormData,
   resetForm,
-  calibrateTime
+  calibrateTime,
 })
 </script>
 
@@ -358,4 +364,10 @@ defineExpose({
     }
   }
 }
+.upload-tip {
+    margin-top: 8px;
+    color: #909399;
+    font-size: 12px;
+    line-height: 1.6;
+  }
 </style>

packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue

@@ -38,6 +38,7 @@
               </div>
               <div class="content-wrapper">
                 <div class="basic-info-wrapper">
+                  <div>
                     <el-row :gutter="24" class="report-info-row">
                       <el-col v-for="item in getReportInfoItems(report)" :key="item.label" :span="24" class="info-column">
                         <div class="info-item">
@@ -46,6 +47,7 @@
                         </div>
                       </el-col>
                   </el-row>
+                  </div>
                   <div class="file-list">
                     <FileUpload v-model="report.fileList" :readonly="!isEdit" />
                   </div>
@@ -252,9 +254,9 @@ const getDisasterDetail = async () => {
       if (isEdit.value) {
         const newFormData = {
           ...data,
-          lossList: null,
+          lossList: [],
           report: {},
-          fileList: null
+          fileList: []
         }
         nextTick(() => {
           continueReport.value?.initFormData(newFormData)
@@ -405,4 +407,12 @@ onMounted(() => {
   max-width: 320px;
   flex-shrink: 0;
 }
+:deep(.upload-block) {
+  display: flex;
+  justify-content: flex-end;
+}
+:deep(.preview-block .preview-list) {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>