| | |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="车辆照片" |
| | | min-width="100" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-image v-if="scope.row.vehiclePhotos && scope.row.vehiclePhotos.length" |
| | | :src="scope.row.vehiclePhotos[0]" |
| | | :preview-src-list="scope.row.vehiclePhotos" |
| | | preview-teleported |
| | | fit="cover" |
| | | style="width: 60px; height: 44px; border-radius: 4px" /> |
| | | <span v-else>--</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="备注" |
| | | prop="remark" |
| | | min-width="160" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="车辆照片:" |
| | | prop="vehiclePhotos"> |
| | | <ImageUpload v-model:file-list="form.vehiclePhotos" |
| | | :limit="10" |
| | | permanent /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </FormDialog> |
| | | </div> |
| | |
| | | |
| | | <script setup> |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import ImageUpload from "@/components/AttachmentUpload/image/index.vue"; |
| | | import pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { ref, reactive, toRefs, getCurrentInstance } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | |
| | | loadCapacity: null, |
| | | status: "启用", |
| | | remark: "", |
| | | vehiclePhotos: [], |
| | | }, |
| | | rules: { |
| | | plateNumber: [{ required: true, message: "请输入车牌号", trigger: "blur" }], |
| | |
| | | loadCapacity, |
| | | status: status || "启用", |
| | | remark, |
| | | // 接口返回的就是 URL 字符串数组,直接喂给 el-upload 回显 |
| | | vehiclePhotos: Array.isArray(row.vehiclePhotos) ? [...row.vehiclePhotos] : [], |
| | | }; |
| | | } else { |
| | | form.value = { |
| | |
| | | loadCapacity: null, |
| | | status: "启用", |
| | | remark: "", |
| | | vehiclePhotos: [], |
| | | }; |
| | | } |
| | | }; |
| | |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | const api = form.value.id ? updateVehicle : addVehicle; |
| | | api(form.value).then(() => { |
| | | // 后端 vehiclePhotos 是 List<String>,只存 URL;上传组件给的是 {name, url} 对象数组, |
| | | // 直接传对象会 JSON 解析失败报 400。另外传 null 不更新,想删光必须显式传 [] |
| | | const payload = { |
| | | ...form.value, |
| | | vehiclePhotos: (form.value.vehiclePhotos || []) |
| | | .map(item => (typeof item === "string" ? item : item?.url || item?.previewURL || "")) |
| | | .filter(Boolean), |
| | | }; |
| | | api(payload).then(() => { |
| | | proxy.$modal.msgSuccess("操作成功"); |
| | | closeDia(); |
| | | getList(); |