发运管理新增开始结束里程和图片

src/views/salesServiceManagement/components/sparePartsList.vue

@@ -689,7 +689,7 @@ export default {
     // 处理仓库选择变更
     async handleWarehouseChange(row, index, warehouseId) {
       const selectedWarehouse = row.warehouseList.find(
-        item => item.warehouseId === warehouseId
+        (item) => item.warehouseId === warehouseId
       );
       if (selectedWarehouse) {
         await this.warehouseChange(selectedWarehouse, row, index);
@@ -697,7 +697,11 @@ export default {
     },
     // 仓库变更后更新库存
     async warehouseChange(item, row, index) {
-      this.$set(this.form.tableList[index], 'warehouseName', item.warehouseName);
+      this.$set(
+        this.form.tableList[index],
+        'warehouseName',
+        item.warehouseName
+      );
       this.$set(this.form.tableList[index], 'warehouseId', item.warehouseId);
       // 重新调用库存查询接口
       this.$set(

src/views/transportManager/shipManage/taskWorkManage/components/feeInfoDialog.vue

@@ -1,30 +1,45 @@
 <template>
   <ele-modal
-  custom-class="ele-dialog-form long-dialog-form"
-  :centered="true"
-  :visible.sync="feeInfoDialogFlag"
-  title="报工信息"
-  :append-to-body="true" 
-  :close-on-click-modal="false"
-  :maxable="true"
-  :resizable="true"
-  width="60%"
-  :before-close="cancel">
-    <el-form v-if="dialogType=='view'" ref="form" :rules="rules" :model="form" label-width="120px">
+    custom-class="ele-dialog-form long-dialog-form"
+    :centered="true"
+    :visible.sync="feeInfoDialogFlag"
+    title="报工信息"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :maxable="true"
+    :resizable="true"
+    width="60%"
+    :before-close="cancel"
+  >
+    <el-form
+      v-if="dialogType === 'view'"
+      ref="form"
+      :rules="rules"
+      :model="form"
+      label-width="120px"
+    >
       <headerTitle title="基础信息"></headerTitle>
       <el-row>
         <el-col :span="12">
           <el-form-item label="任务类型" prop="taskType">
-            <DictSelection clearable dictName="派车任务类型" v-model="form.taskType"
-                           :disabled="dialogType==='view'"
-                           disabled
-                           @itemChange="(val)=>handleChangeFinLink(val)"></DictSelection>
+            <DictSelection
+              clearable
+              dictName="派车任务类型"
+              v-model="form.taskType"
+              :disabled="dialogType === 'view'"
+              disabled
+              @itemChange="(val) => handleChangeFinLink(val)"
+            ></DictSelection>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="单据名称" prop="taskCode">
-            <el-input v-model="form.taskCode" disabled @click.native="(val)=>handleSelectData(val)"
-                      clearable></el-input>
+            <el-input
+              v-model="form.taskCode"
+              disabled
+              @click.native="(val) => handleSelectData(val)"
+              clearable
+            ></el-input>
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,30 +53,102 @@
           <el-form-item label="司机" prop="driverName">
             <el-input disabled v-model="form.driverName"></el-input>
           </el-form-item>
-
-
         </el-col>
       </el-row>
+      <!-- 查看模式的里程信息一行显示 -->
       <el-row>
-        <el-col :span="12">
-          <el-form-item label="里程" prop="mileage">
-            <el-input type="number" disabled :min="0" v-model="form.mileage" clearable>
+        <el-col :span="8">
+          <el-form-item label="开始里程" prop="startMileage">
+            <el-input
+              type="number"
+              disabled
+              :min="0"
+              v-model.number="form.startMileage"
+              clearable
+            >
               <template slot="append">KM</template>
             </el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="电话" prop="mileage">
-            <el-input v-model="form.phone" disabled clearable>
+        <el-col :span="8">
+          <el-form-item label="结束里程" prop="endMileage">
+            <el-input
+              type="number"
+              disabled
+              :min="0"
+              v-model.number="form.endMileage"
+              clearable
+            >
+              <template slot="append">KM</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="总里程" prop="mileage">
+            <el-input
+              type="number"
+              disabled
+              :min="0"
+              v-model.number="form.mileage"
+              clearable
+            >
+              <template slot="append">KM</template>
             </el-input>
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="phone">
+            <el-input v-model="form.phone" disabled clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="开始里程图片">
+            <div v-if="startMileageImgs.length > 0" class="image-group">
+              <el-image
+                v-for="(img, index) in startMileageImgs"
+                :key="index"
+                style="width: 100px; height: 100px; margin-right: 10px"
+                fit="cover"
+                :src="img.url"
+                :preview-src-list="startMileageImgs.map(item => item.url)"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束里程图片">
+            <div v-if="endMileageImgs.length > 0" class="image-group">
+              <el-image
+                v-for="(img, index) in endMileageImgs"
+                :key="index"
+                style="width: 100px; height: 100px; margin-right: 10px"
+                fit="cover"
+                :src="img.url"
+                :preview-src-list="endMileageImgs.map(item => item.url)"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <!-- 其他查看模式内容保持不变 -->
       <el-row>
         <el-col :span="12">
           <el-form-item label="计费方式" prop="billingMethod">
-            <el-select v-model="form.billingMethod" placeholder="请选择" style="width: 100%" disabled>
-              <el-option v-for="item in billingMethodList" :label="item.label" :value="item.value"></el-option>
+            <el-select
+              v-model="form.billingMethod"
+              placeholder="请选择"
+              style="width: 100%"
+              disabled
+            >
+              <el-option
+                v-for="item in billingMethodList"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -74,15 +161,31 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="单价" prop="price">
-            <el-input-number :controls="false" style="width: 100%" :min="0" v-model="form.price" disabled></el-input-number>
+            <el-input-number
+              :controls="false"
+              style="width: 100%"
+              :min="0"
+              v-model.number="form.price"
+              disabled
+            ></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="数量" prop="quantity">
-            <el-input type="number" :controls="false" style="width: 100%" :min="0" v-model="form.quantity"
-                      disabled>
-              <template v-if="form.billingMethod==1" slot="append">m³</template>
-              <template v-else-if="form.billingMethod==2" slot="append">KG</template>
+            <el-input
+              type="number"
+              :controls="false"
+              style="width: 100%"
+              :min="0"
+              v-model.number="form.quantity"
+              disabled
+            >
+              <template v-if="form.billingMethod == 1" slot="append"
+                >m³</template
+              >
+              <template v-else-if="form.billingMethod == 2" slot="append"
+                >KG</template
+              >
               <template v-else slot="append">辆车</template>
             </el-input>
           </el-form-item>
@@ -105,26 +208,40 @@
           <el-form-item label="开始时间" prop="realStartTime">
             <el-date-picker
               v-model="form.realStartTime"
-              :picker-options="{disabledDate:(time)=>{return form.realEndTime&&time.getTime()>new Date(form.realEndTime)}}"
+              :picker-options="{
+                disabledDate: (time) => {
+                  return (
+                    form.realEndTime &&
+                    time.getTime() > new Date(form.realEndTime)
+                  );
+                }
+              }"
               type="datetime"
               disabled
               style="width: 100%"
               value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择日期时间">
-            </el-date-picker>
+              placeholder="选择日期时间"
+            ></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="完成时间" prop="realEndTime">
             <el-date-picker
               v-model="form.realEndTime"
-              :picker-options="{disabledDate:(time)=>{return form.realStartTime&&time.getTime()<new Date(form.realStartTime)}}"
+              :picker-options="{
+                disabledDate: (time) => {
+                  return (
+                    form.realStartTime &&
+                    time.getTime() < new Date(form.realStartTime)
+                  );
+                }
+              }"
               type="datetime"
               disabled
               style="width: 100%"
               value-format="yyyy-MM-dd HH:mm:ss"
-              placeholder="选择日期时间">
-            </el-date-picker>
+              placeholder="选择日期时间"
+            ></el-date-picker>
           </el-form-item>
         </el-col>
       </el-row>
@@ -138,82 +255,180 @@
     </el-form>
     <el-form v-else ref="form" :rules="rules" :model="form" class="el-form-box">
       <headerTitle title="基础信息"></headerTitle>
-     <el-row>
-       <el-col :span="12">
-         <el-form-item label="里程" prop="mileage" label-width="50px">
-           <el-input type="number" v-model="form.mileage" clearable :disabled="dialogType=='view'">
-             <template slot="append">KM</template>
-           </el-input>
-         </el-form-item>
-       </el-col>
-     </el-row>
-
+      <!-- 编辑模式的里程信息一行显示 -->
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="开始里程" prop="startMileage" label-width="80px">
+            <el-input
+              type="number"
+              v-model.number="form.startMileage"
+              clearable
+              :disabled="dialogType == 'view'"
+              @change="calculateMileage"
+            >
+              <template slot="append">KM</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="结束里程" prop="endMileage" label-width="80px">
+            <el-input
+              type="number"
+              v-model.number="form.endMileage"
+              clearable
+              :disabled="dialogType == 'view'"
+              @change="calculateMileage"
+            >
+              <template slot="append">KM</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="总里程" prop="mileage" label-width="80px">
+            <el-input
+              type="number"
+              v-model.number="form.mileage"
+              clearable
+              disabled
+            >
+              <template slot="append">KM</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <headerTitle title="费用信息"></headerTitle>
-    <!-- 数据表格 -->
-    <ele-pro-table
-      ref="table"
-      :columns="columns"
-      :datasource="form.costList"
-      :needPage="false"
-      :toolkit="[]"
-      :minHeight="100"
-      tool-class="ele-toolbar-form"
-      cache-key="eomContactPageTable"
-    >
-      <!-- 表头工具栏 -->
-      <template v-slot:toolbar>
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-plus"
-          class="ele-btn-icon"
-          v-if="dialogType!='view'"
-          @click="handleAddInfo">
-          新增费用
-        </el-button>
-      </template>
+      <!-- 图片上传区域 -->
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="开始里程图片" prop="startMileageImagesFileIds">
+            <ImgUpload
+              ref="startImgUploadRef"
+              v-model="startMileageImgs"
+              v-if="dialogType !== 'view'"
+            />
+            <div v-if="dialogType === 'view' && startMileageImgs.length > 0" class="image-group">
+              <el-image
+                v-for="(img, index) in startMileageImgs"
+                :key="index"
+                style="width: 100px; height: 100px; margin-right: 10px"
+                fit="cover"
+                :src="img.url"
+                :preview-src-list="startMileageImgs.map(item => item.url)"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束里程图片" prop="endMileageImagesFileIds">
+            <ImgUpload
+              ref="endImgUploadRef"
+              v-model="endMileageImgs"
+              v-if="dialogType !== 'view'"
+            />
+            <div v-if="dialogType === 'view' && endMileageImgs.length > 0" class="image-group">
+              <el-image
+                v-for="(img, index) in endMileageImgs"
+                :key="index"
+                style="width: 100px; height: 100px; margin-right: 10px"
+                fit="cover"
+                :src="img.url"
+                :preview-src-list="endMileageImgs.map(item => item.url)"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-      <template v-slot:action="{row,$index}">
-        <el-popconfirm
-          class="ele-action"
-          title="确定要删除此信息吗？"
-          @confirm="handleDelInfo($index)">
-          <template v-slot:reference>
-            <el-link
-              type="danger"
-              :underline="false"
-              icon="el-icon-delete">
-              删除
-            </el-link>
-          </template>
-        </el-popconfirm>
-      </template>
-      <template v-slot:costType="{row,$index}" v-if="dialogType!='view'">
-        <el-form-item :prop="'costList.'+$index+'.costType'"
-                      :rules="{required:true,message:'请选择费用类型',trigger:['blur','change']}">
-          <DictSelection clearable dictName="计划工单费用类型" v-model="row.costType"
-                         @itemChange="(val)=>handleChangeFinLink(val,row,$index)"></DictSelection>
-        </el-form-item>
-      </template>
-      <template v-slot:cost="{row,$index}" v-if="dialogType!='view'">
-        <el-form-item :prop="'costList.'+$index+'.cost'"
-                      :rules="{required:true,message:'请输入金额',trigger:['blur','change']}">
-          <el-input-number :precision="2" :controls="false" :min="0" v-model="row.cost"
-                           style="width: 100%"></el-input-number>
-        </el-form-item>
+      <headerTitle title="费用信息"></headerTitle>
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="form.costList"
+        :needPage="false"
+        :toolkit="[]"
+        :minHeight="100"
+        tool-class="ele-toolbar-form"
+        cache-key="eomContactPageTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            v-if="dialogType !== 'view'"
+            @click="handleAddInfo"
+          >
+            新增费用
+          </el-button>
+        </template>
 
-      </template>
-      <template v-slot:remark="{row,$index}" v-if="dialogType!='view'">
-        <el-input v-model="row.remark"></el-input>
-      </template>
-      <template v-slot:headerGLLXMC="{column}">
-        <span class="is-required">{{ column.label }}</span>
-      </template>
-    </ele-pro-table>
+        <template v-slot:action="{ row, $index }">
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此信息吗？"
+            @confirm="handleDelInfo($index)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+        <template
+          v-slot:costType="{ row, $index }"
+          v-if="dialogType !== 'view'"
+        >
+          <el-form-item
+            :prop="'costList.' + $index + '.costType'"
+            :rules="{
+              required: true,
+              message: '请选择费用类型',
+              trigger: ['blur', 'change']
+            }"
+          >
+            <DictSelection
+              clearable
+              dictName="计划工单费用类型"
+              v-model="row.costType"
+              @itemChange="(val) => handleChangeFinLink(val, row, $index)"
+            ></DictSelection>
+          </el-form-item>
+        </template>
+        <template v-slot:cost="{ row, $index }" v-if="dialogType !== 'view'">
+          <el-form-item
+            :prop="'costList.' + $index + '.cost'"
+            :rules="{
+              required: true,
+              type: 'number',
+              message: '请输入有效的金额',
+              trigger: ['blur', 'change']
+            }"
+          >
+            <el-input-number
+              :precision="2"
+              :controls="false"
+              :min="0"
+              v-model.number="row.cost"
+              style="width: 100%"
+            ></el-input-number>
+          </el-form-item>
+        </template>
+        <template v-slot:remark="{ row, $index }" v-if="dialogType !== 'view'">
+          <el-input v-model="row.remark"></el-input>
+        </template>
+        <template v-slot:headerGLLXMC="{ column }">
+          <span class="is-required">{{ column.label }}</span>
+        </template>
+      </ele-pro-table>
     </el-form>
     <div slot="footer">
-      <el-button type="primary" @click="handleSave" v-if="dialogType!='view'">保存</el-button>
+      <el-button type="primary" @click="handleSave" v-if="dialogType !== 'view'"
+        >保存</el-button
+      >
       <el-button @click="cancel">返回</el-button>
     </div>
   </ele-modal>
@@ -221,15 +436,18 @@
 
 
 <script>
-
-
-import {logisticlistcostGetByIdAPI, logistictraklistnoteUpdateAPI} from "@/api/transportManager/shipManage/taskWork";
-import {deepClone} from "@/utils";
-import {mapGetters} from 'vuex';
-
+import {
+  logisticlistcostGetByIdAPI,
+  logistictraklistnoteUpdateAPI
+} from '@/api/transportManager/shipManage/taskWork';
+import { deepClone } from '@/utils';
+import { mapGetters } from 'vuex';
+import ImgUpload from '@/views/commodityManagement/commodityPriceList/components/imgUpload.vue';
 export default {
-  name: "feeInfoDialog",
-  components: {},
+  name: 'feeInfoDialog',
+  components: {
+    ImgUpload
+  },
 
   props: {
     feeInfoDialogFlag: {
@@ -239,31 +457,67 @@ export default {
   },
   data() {
     return {
-      editIndex: undefined,//当前修改数据的下标
+      editIndex: undefined,
       billingMethodList: [
-        {
-          label: '按方计费',
-          value: '1',
-        },
-        {
-          label: '按重量计费',
-          value: '2',
-        },
-        {
-          label: '专车计费',
-          value: '3',
-        },
+        { label: '按方计费', value: '1' },
+        { label: '按重量计费', value: '2' },
+        { label: '专车计费', value: '3' }
       ],
       form: {
-        mileage:'',
-        costList: []
+        startMileage: null, // 数字类型初始值
+        endMileage: null, // 数字类型初始值
+        mileage: null, // 数字类型初始值
+        // 新增：图片路径字段（对应后端返回的图片实际路径）
+        startMileageImagesPaths: '', 
+        endMileageImagesPaths: '',
+        // 保留：图片ID字段（用于保存时提交）
+        startMileageImagesFileIds: '', 
+        endMileageImagesFileIds: '',
+        costList: [],
+        taskType: '',
+        taskCode: '',
+        trakNumber: '',
+        driverName: '',
+        phone: '',
+        billingMethod: '',
+        totalCost: '',
+        price: null, // 数字类型
+        quantity: null, // 数字类型
+        startPlace: '',
+        endPlace: '',
+        realStartTime: '',
+        realEndTime: '',
+        remark: ''
       },
       dialogType: '',
-      rules:{
-        mileage:{required:true,message:'请输入',trigger:'blur'}
+      rules: {
+        startMileage: {
+          required: true,
+          type: 'number',
+          message: '请输入有效的开始里程（数字）',
+          trigger: ['blur', 'change']
+        },
+        endMileage: {
+          required: true,
+          type: 'number',
+          message: '请输入有效的结束里程（数字）',
+          trigger: ['blur', 'change']
+        },
+        startMileageImagesFileIds: {
+          required: true,
+          message: '请上传开始里程图片',
+          trigger: 'change'
+        },
+        endMileageImagesFileIds: {
+          required: true,
+          message: '请上传结束里程图片',
+          trigger: 'change'
+        }
       },
-      currentRow: {}
-    }
+      currentRow: {},
+      startMileageImgs: [], // 图片显示数组（包含url和id）
+      endMileageImgs: []
+    };
   },
   computed: {
     ...mapGetters(['getDictValue']),
@@ -287,7 +541,7 @@ export default {
           slot: 'costType',
           headerSlot: 'headerGLLXMC',
           formatter: (row, column) => {
-            return this.getDictValue('计划工单费用类型', row.costType)
+            return this.getDictValue('计划工单费用类型', row.costType);
           }
         },
         {
@@ -305,81 +559,234 @@ export default {
           align: 'center',
           showOverflowTooltip: true,
           minWidth: 130,
-          slot: 'remark',
-        },
-      ]
-      let action = [{
-        columnKey: 'action',
-        slot: 'action',
-        label: '操作',
-        resizable: false,
-        width: 80,
-        align: 'center',
-        showOverflowTooltip: true,
-        fixed: 'right'
-      },]
-      this.dialogType === 'view' ? list = [...list] : list = [...list, ...action]
-      return list
-    },
+          slot: 'remark'
+        }
+      ];
+      const action = [
+        {
+          columnKey: 'action',
+          slot: 'action',
+          label: '操作',
+          resizable: false,
+          width: 80,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'right'
+        }
+      ];
+      return this.dialogType === 'view' ? list : [...list, ...action];
+    }
   },
-  mounted() {
+  watch: {
+    // 同步图片id到表单模型（用于保存）
+    startMileageImgs: {
+      handler(val) {
+        this.form.startMileageImagesFileIds = val
+          .map((img) => img.id)
+          .filter(Boolean)
+          .join(',');
+      },
+      immediate: true
+    },
+    endMileageImgs: {
+      handler(val) {
+        this.form.endMileageImagesFileIds = val
+          .map((img) => img.id)
+          .filter(Boolean)
+          .join(',');
+      },
+      immediate: true
+    }
   },
   methods: {
-    //初始化
+    calculateMileage() {
+      const start = Number(this.form.startMileage) || 0;
+      const end = Number(this.form.endMileage) || 0;
+
+      if (start === 0 && end === 0) {
+        this.form.mileage = null;
+        return;
+      }
+
+      this.form.mileage = end - start;
+      if (this.form.mileage < 0) {
+        this.$message.warning('结束里程不能小于开始里程');
+        this.form.mileage = 0;
+      }
+    },
+
+    handleSelectData(val) {
+      // 原逻辑保留
+    },
+
     async init(row = {}, type) {
-      this.dialogType = type
-      this.currentRow = row
-      await this.getInfo(row.id)
+      this.dialogType = type;
+      this.currentRow = row;
+      await this.getInfo(row.id);
     },
-    //获取详情
+
     async getInfo(id) {
-      this.form = await logisticlistcostGetByIdAPI(id)
-      this.form.costList.forEach((item, index) => {
-        item.costType = item.costType + ''
-      })
+      const response = await logisticlistcostGetByIdAPI(id);
+
+      // 处理表单基础数据
+      this.form = {
+        ...response,
+        startMileage: response.startMileage !== null ? Number(response.startMileage) : null,
+        endMileage: response.endMileage !== null ? Number(response.endMileage) : null,
+        mileage: response.mileage !== null ? Number(response.mileage) : null,
+        price: response.price !== null ? Number(response.price) : null,
+        quantity: response.quantity !== null ? Number(response.quantity) : null,
+        // 关键：获取后端返回的图片路径和ID
+        startMileageImagesPaths: this.formatImagePaths(response.startMileageImagesPaths),
+        endMileageImagesPaths: this.formatImagePaths(response.endMileageImagesPaths),
+        startMileageImagesFileIds: this.formatImageIds(response.startMileageImagesFileIds),
+        endMileageImagesFileIds: this.formatImageIds(response.endMileageImagesFileIds)
+      };
+
+      // 处理开始里程图片（使用路径生成URL，同步ID）
+      this.startMileageImgs = this.form.startMileageImagesPaths
+        ? this.form.startMileageImagesPaths.split(',').map((path, index) => ({
+            id: this.form.startMileageImagesFileIds.split(',')[index] || '', // 对应ID
+            url: `${window.location.origin}/api/main/file/getFile?objectName=${path}`, // 使用路径作为参数
+            status: 'done'
+          }))
+        : [];
+
+      // 处理结束里程图片（同上）
+      this.endMileageImgs = this.form.endMileageImagesPaths
+        ? this.form.endMileageImagesPaths.split(',').map((path, index) => ({
+            id: this.form.endMileageImagesFileIds.split(',')[index] || '',
+            url: `${window.location.origin}/api/main/file/getFile?objectName=${path}`,
+            status: 'done'
+          }))
+        : [];
+
+      // 回显上传组件
+      this.$nextTick(() => {
+        this.$refs.startImgUploadRef?.putValue(this.startMileageImgs);
+        this.$refs.endImgUploadRef?.putValue(this.endMileageImgs);
+      });
+
+      // 处理费用列表
+      this.form.costList = (response.costList || []).map((item) => ({
+        ...item,
+        costType: item.costType + '',
+        cost: item.cost !== null ? Number(item.cost) : null
+      }));
+    },
+
+    // 格式化图片路径（处理后端返回的路径格式）
+    formatImagePaths(paths) {
+      if (!paths) return '';
+      if (Array.isArray(paths)) {
+        return paths.filter(Boolean).join(',');
+      }
+      return paths.toString().trim();
+    },
+
+    // 格式化图片ID（处理后端返回的ID格式）
+    formatImageIds(ids) {
+      if (!ids) return '';
+      if (Array.isArray(ids)) {
+        return ids.filter(Boolean).join(',');
+      }
+      return ids.toString().trim();
     },
-    //新增关联信息数据
+
     handleAddInfo() {
-      this.form.costList.push(
-        {
-          id: '',
-          costType: '',
-          cost: undefined,
-          listId: this.currentRow.id,
-          remark: '',
-        }
-      )
+      this.form.costList.push({
+        id: '',
+        costType: null,
+        cost: null,
+        listId: this.currentRow.id,
+        remark: ''
+      });
     },
 
-    //删除关联信息数据
     handleDelInfo(index) {
-      this.form.costList.splice(index, 1)
+      this.form.costList.splice(index, 1);
     },
-    //修改关联类型
+
     handleChangeFinLink(val, row, index) {
-      this.editIndex = index
+      this.editIndex = index;
       this.$nextTick(() => {
-        this.$refs.form.clearValidate('costList.' + index + '.cost')
-      })
+        this.$refs.form.clearValidate('costList.' + index + '.cost');
+      });
     },
+
     cancel() {
-      this.$emit('update:feeInfoDialogFlag', false)
+      this.$nextTick(() => {
+        this.$refs.startImgUploadRef?.putValue([]);
+        this.$refs.endImgUploadRef?.putValue([]);
+        this.startMileageImgs = [];
+        this.endMileageImgs = [];
+        this.form = {
+          startMileage: null,
+          endMileage: null,
+          mileage: null,
+          startMileageImagesPaths: '',
+          endMileageImagesPaths: '',
+          startMileageImagesFileIds: '',
+          endMileageImagesFileIds: '',
+          costList: [],
+          taskType: '',
+          taskCode: '',
+          trakNumber: '',
+          driverName: '',
+          phone: '',
+          billingMethod: '',
+          totalCost: '',
+          price: null,
+          quantity: null,
+          startPlace: '',
+          endPlace: '',
+          realStartTime: '',
+          realEndTime: '',
+          remark: ''
+        };
+      });
+      this.$emit('update:feeInfoDialogFlag', false);
     },
-    //
+
     handleSave() {
-     if( !this.form.costList.length) return this.$message.warning('请添加费用信息')
-      this.$refs.form.validate(async valid => {
-        if (!valid) return this.$message.warning('有必填项未填，请检查')
-        this.form.status = 2
-        let data = deepClone(this.form)
-        await logistictraklistnoteUpdateAPI(data)
-        this.$message.success('操作成功')
-        this.$emit('reload')
-        this.cancel()
-      })
-    },
+      if (!this.form.costList.length) {
+        return this.$message.warning('请添加费用信息');
+      }
+
+      const invalidItem = this.form.costList.find(
+        (item) => !item.costType || item.cost === null || item.cost < 0
+      );
+      if (invalidItem) {
+        return this.$message.warning('请完善所有费用项的类型和金额（金额需大于等于0）');
+      }
+
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) {
+          Object.keys(this.$refs.form.fields).forEach((key) => {
+            this.$refs.form.fields[key].validate();
+          });
+          return this.$message.warning('有必填项未填，请检查');
+        }
+
+        this.form.status = 2;
+        const data = deepClone(this.form);
+
+        // 提交时使用图片ID（与后端保持一致）
+        data.startMileageImagesFileIds = this.form.startMileageImagesFileIds;
+        data.endMileageImagesFileIds = this.form.endMileageImagesFileIds;
+
+        try {
+          await logistictraklistnoteUpdateAPI(data);
+          this.$message.success('操作成功');
+          this.$emit('reload');
+          this.cancel();
+        } catch (error) {
+          this.$message.error('保存失败：' + (error.message || '未知错误'));
+        }
+      });
+    }
   }
-}
+};
 </script>
 
 
@@ -388,10 +795,15 @@ export default {
   margin-bottom: 20px;
 }
 :deep(.ele-dialog-form .el-dialog) {
-  z-index: 3000 !important;  /* 数值需大于遮罩层z-index（通常1000-2000） */
+  z-index: 3000 !important;
 }
-/* 若遮罩层层级异常，也可调整遮罩层z-index（可选） */
 :deep(.el-dialog__wrapper) {
-  z-index: 2999 !important;  /* 确保遮罩层低于弹窗 */
+  z-index: 2999 !important;
+}
+.image-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
 }
-</style>
+</style>