el-upload 上传多个图片或多个文件，编辑，回显，删除操作

后端查询详情接口数据：

[{"id": 91,"name": "Default","sort": 0,"fold": false,"deletable": false,"uniqueId": "machine_cabinet","infoList": [{"id": 542,"name": "assets_number","humpName": "assetsNumber","label": "资产编号","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "机柜A01","valueAttribute": null},{"id": 548,"name": "cabinet_model","humpName": "cabinetModel","label": "机柜模型","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "123","valueAttribute": null},{"id": 549,"name": "cabinet_model_type","humpName": "cabinetModelType","label": "机柜模型类型","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "123","valueAttribute": null},{"id": 550,"name": "cabinet_type","humpName": "cabinetType","label": "机柜属性","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "123","valueAttribute": null},{"id": 543,"name": "category_id","humpName": "categoryId","label": "类别","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 540,"name": "create_time","humpName": "createTime","label": "创建时间","dateType": 5,"typeValue": "date","dateTypeValue": null,"dateTypeName": "日期","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "2024-07-05","valueAttribute": null},{"id": 544,"name": "device_category_id","humpName": "deviceCategoryId","label": "设备类别","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 551,"name": "electric_switch","humpName": "electricSwitch","label": "市电开关","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 491,"name": "example","humpName": "example","label": "实例名","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": null,"max": null,"regex": null,"required": false,"requiredDefault": null,"edit": false,"primaryKey": false,"hide": false,"hint": null,"uniquely": false,"deletable": false,"groupId": 91,"query": true,"queryOrder": 0,"show": true,"showDefault": false,"showOrder": 0,"uniqueId": null,"orderQuery": false,"value": "机柜A01","valueAttribute": null},{"id": 492,"name": "example_department","humpName": "exampleDepartment","label": "所属科室","dateType": 12,"typeValue": "isCascade","dateTypeValue": "/sso-management/department/getDepById?","dateTypeName": "组织","sort": 1,"min": null,"max": null,"regex": null,"required": false,"requiredDefault": null,"edit": false,"primaryKey": false,"hide": false,"hint": null,"uniquely": false,"deletable": false,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": [],"valueAttribute": [{"child": [{"child": null,"key": 100000023,"key2": null,"name": "测试部门","parent": null,"pid": 100000022,"value": "测试部门"}],"key": 100000022,"key2": null,"name": "测试公司","parent": null,"pid": 0,"value": "测试公司"},{"child": [{"child": null,"key": 100000080,"key2": null,"name": "二级部门","parent": null,"pid": 100000079,"value": "二级部门"}],"key": 100000079,"key2": null,"name": "一级部门","parent": null,"pid": 0,"value": "一级部门"},{"child": [{"child": null,"key": 100000083,"key2": null,"name": "a科室","parent": null,"pid": 100000082,"value": "a科室"},{"child": null,"key": 100000085,"key2": null,"name": "b科室","parent": null,"pid": 100000082,"value": "b科室"},{"child": null,"key": 100000123,"key2": null,"name": "c部门","parent": null,"pid": 100000082,"value": "c部门"}],"key": 100000082,"key2": null,"name": "科技科","parent": null,"pid": 0,"value": "科技科"},{"child": null,"key": 100000091,"key2": null,"name": "测试1","parent": null,"pid": 0,"value": "测试1"},{"child": [{"child": [{"child": null,"key": 100000122,"key2": null,"name": "测试部门11111111","parent": null,"pid": 100000120,"value": "测试部门11111111"}],"key": 100000120,"key2": null,"name": "测试部门111","parent": null,"pid": 100000106,"value": "测试部门111"}],"key": 100000106,"key2": null,"name": "测试部门1","parent": null,"pid": 0,"value": "测试部门1"},{"child": null,"key": 100000107,"key2": null,"name": "测试部门2","parent": null,"pid": 0,"value": "测试部门2"},{"child": null,"key": 100000108,"key2": null,"name": "测试部门3","parent": null,"pid": 0,"value": "测试部门3"},{"child": null,"key": 100000109,"key2": null,"name": "测试部门4","parent": null,"pid": 0,"value": "测试部门4"},{"child": null,"key": 100000110,"key2": null,"name": "测试部门5","parent": null,"pid": 0,"value": "测试部门5"}]},{"id": 493,"name": "example_state","humpName": "exampleState","label": "实例状态","dateType": 11,"typeValue": "select","dateTypeValue": "/cmdb/dict/query?args=example_state&","dateTypeName": "列表","sort": 1,"min": null,"max": null,"regex": null,"required": false,"requiredDefault": null,"edit": false,"primaryKey": false,"hide": false,"hint": null,"uniquely": false,"deletable": false,"groupId": 91,"query": true,"queryOrder": 0,"show": true,"showDefault": false,"showOrder": 0,"uniqueId": null,"orderQuery": false,"value": ["1"],"valueAttribute": [{"id": 33,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "1","value": "使用中","sort": 1,"enable": true,"defaulted": true,"remark": "系统生成"},{"id": 34,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "2","value": "维护中","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 35,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "3","value": "闲置","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 36,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "4","value": "备用","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 37,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "5","value": "报废","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 38,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "6","value": "已出厂","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 39,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "7","value": "送修","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"},{"id": 40,"createTime": "2024-05-24 14:17:00","groups": "example_state","key": "8","value": "损坏待修","sort": 1,"enable": true,"defaulted": false,"remark": "系统生成"}]},{"id": 558,"name": "h","humpName": "h","label": "高","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 490,"name": "id","humpName": "id","label": "主键ID","dateType": 0,"typeValue": "number","dateTypeValue": null,"dateTypeName": null,"sort": 1,"min": null,"max": null,"regex": null,"required": false,"requiredDefault": null,"edit": false,"primaryKey": true,"hide": true,"hint": "隐藏主键ID","uniquely": false,"deletable": false,"groupId": 91,"query": false,"queryOrder": 1,"show": false,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": 1,"valueAttribute": null},{"id": 556,"name": "l","humpName": "l","label": "长","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 559,"name": "location","humpName": "location","label": "地理位置","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 560,"name": "model","humpName": "model","label": "规格型号","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 561,"name": "name","humpName": "name","label": "机柜名称","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "机柜A01","valueAttribute": null},{"id": 562,"name": "power_capacity","humpName": "powerCapacity","label": "电力容量","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 545,"name": "qr_code","humpName": "qrCode","label": "二维码","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 546,"name": "resource_category_id","humpName": "resourceCategoryId","label": "资源类别","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 563,"name": "room","humpName": "room","label": "所属机房","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "1","valueAttribute": null},{"id": 564,"name": "room_number","humpName": "roomNumber","label": "机房内部编号","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 547,"name": "style_type","humpName": "styleType","label": "标签样式","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 552,"name": "toward","humpName": "toward","label": "朝向","dateType": 2,"typeValue": "number","dateTypeValue": null,"dateTypeName": "数字","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 565,"name": "unumber","humpName": "unumber","label": "总U数","dateType": 2,"typeValue": "number","dateTypeValue": null,"dateTypeName": "数字","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "42","valueAttribute": null},{"id": 541,"name": "update_time","humpName": "updateTime","label": "更新时间","dateType": 5,"typeValue": "date","dateTypeValue": null,"dateTypeName": "日期","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 566,"name": "ups_switch","humpName": "upsSwitch","label": "UPS开关","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 567,"name": "vendor","humpName": "vendor","label": "机柜厂商","dateType": 1,"typeValue": "input","dateTypeValue": null,"dateTypeName": "短字符","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 557,"name": "w","humpName": "w","label": "宽","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 553,"name": "x","humpName": "x","label": "横轴","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 554,"name": "y","humpName": "y","label": "纵轴","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 555,"name": "z","humpName": "z","label": "竖轴","dateType": 3,"typeValue": "float","dateTypeValue": null,"dateTypeName": "浮点","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 91,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null}]},{"id": 95,"name": "文件","sort": 1,"fold": false,"deletable": true,"uniqueId": "machine_cabinet","infoList": [{"id": 673,"name": "file","humpName": "file","label": "文件","dateType": 14,"typeValue": "file","dateTypeValue": null,"dateTypeName": "文件","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 95,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": null,"valueAttribute": null},{"id": 671,"name": "img","humpName": "img","label": "图片","dateType": 13,"typeValue": "image","dateTypeValue": null,"dateTypeName": "图片","sort": 1,"min": "","max": "","regex": null,"required": false,"requiredDefault": "","edit": true,"primaryKey": false,"hide": false,"hint": "","uniquely": null,"deletable": true,"groupId": 95,"query": true,"queryOrder": 1,"show": true,"showDefault": false,"showOrder": 1,"uniqueId": null,"orderQuery": false,"value": "[{\"name\":\"4\",\"url\":\"cmdb/20240711/11432589000952.png\"},{\"name\":\"1\",\"url\":\"cmdb/20240711/21296220514619.png\"},{\"name\":\"2\",\"url\":\"cmdb/20240711/4042956264619.png\"}]","valueAttribute": null}]}
]

vue组件代码：（代码有点乱，只看上传有关的就行）

<template><!-- 资源实例详情-- 属性页面 --><div class="property"><el-form:inline="true":model="formInline"label-width="130px"label-position="right"style="padding-left: 80px"><div v-for="item in detailList" :key="item.id"><el-row><div class="subName">{{ item.name }}</div></el-row><div class="sunNameSpace"><el-form-itemstyle="width: 40%":label="v.label"v-for="(v, i) in item.infoList"v-if="v.name !== 'id'":key="v.id"><div @mouseleave="editModeButton = false"><!-- 非编辑状态 --><span v-if="!editMode" @mouseenter="doEnter(v)"><spanv-if="v.typeValue == 'select' &&v[`valueAttribute${i}`] &&v[`valueAttribute${i}`].length > 0"><el-select v-model="v.value" clearable disabled><el-optionv-for="w in v[`valueAttribute${i}`]":key="w.key":label="w.value":value="w.key"></el-option></el-select></span><spanv-else-if="v.typeValue == 'isCascade' &&v[`valueAttribute${i}`] &&v[`valueAttribute${i}`].length > 0"><el-cascaderv-model="v.value":options="v[`valueAttribute${i}`]":props="propsCascader"disabled></el-cascader></span><span v-else-if="v.typeValue == 'bool'"><el-switch v-model="v.value" disabled></el-switch></span><span v-else-if="v.typeValue == 'image'" style="display: flex"><imgstyle="width: 148px; margin-right: 10px":src="item.url"v-for="(item, index) in getImgListBase(v.value)":key="index"/></span><span v-else-if="v.typeValue == 'file'"><el-upload :file-list="getImgListBase(v.value)"> </el-upload></span><span v-else>{{ v.value }}</span></span><!-- 鼠标移入显示复制右边icon --><!-- <span v-if="editModeButton && currnetField == v.id"><iclass="el-icon-document-copy colorStyle"v-clipboard:copy="v.value"v-clipboard:success="clipboardSuccess"></i></span> --><!-- 编辑状态 --><div v-if="editMode"><el-inputv-if="v.typeValue == 'input' || v.typeValue == 'textarea'"v-model="v.value"@change="changeInput(v)"@blur="getDataListS(v)"></el-input><el-inputv-else-if="v.typeValue == 'number' || v.typeValue == 'float'"type="number"v-model="v.value"@change="changeInput(v)"></el-input><el-date-pickerstyle="width: 202px"v-else-if="v.typeValue == 'date'"value-format="yyyy-MM-dd"type="date"v-model="v.value"@change="changeInput(v)"></el-date-picker><el-date-pickerstyle="width: 202px"v-else-if="v.typeValue == 'time'"value-format="yyyy-MM-dd HH:mm:ss"type="datetime"v-model="v.value"@change="changeInput(v)"></el-date-picker><el-switchv-else-if="v.typeValue == 'bool'"v-model="v.value"@change="changeInput(v)"></el-switch><spanstyle="display: flex"v-else-if="v.typeValue == 'image'"@click="doChangeImg(v)"><el-uploadref="upload"actionmultiplelist-type="picture-card":file-list="getImgListBase(v.value)":on-preview="handlePictureCardPreview":on-remove="handleRemoveImg":http-request="uploadFilesImg":on-change="changeFileImg":headers="headers"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></span><span v-else-if="v.typeValue == 'file'" @click="doOperate(v)"><el-uploadref="upload"actionmultiple:file-list="getImgListBase(v.value)":on-preview="handlePictureCardPreview":on-remove="handleRemove":http-request="uploadFiles":on-change="changeFile":headers="headers"><el-button size="small" type="primary" @click="doChange(v)">点击上传</el-button></el-upload></span><el-selectstyle="width: 202px"v-else-if="v.typeValue == 'select' &&v[`valueAttribute${i}`] &&v[`valueAttribute${i}`].length > 0"v-model="v.value"clearable@change="changeInput(v)"><el-optionv-for="w in v[`valueAttribute${i}`]":key="w.key":label="w.value":value="w.key"></el-option></el-select><el-cascaderstyle="width: 202px"v-else-if="v.typeValue == 'isCascade' &&v[`valueAttribute${i}`] &&v[`valueAttribute${i}`].length > 0"v-model="v.value":options="v[`valueAttribute${i}`]":props="propsCascader"@change="changeInput(v)"></el-cascader></div></div></el-form-item></div></div></el-form><div style="float: right; margin-right: 50px"><el-buttonv-if="!editMode"type="primary"size="mini"@click="editMode = true;editModeButton = false;">编辑</el-button><el-buttonv-if="editMode"type="primary"size="mini"@click="handleSubmit">保存</el-button><el-button v-if="editMode" size="mini" @click="doCancel">取消</el-button></div></div>
</template><script>
import { mapGetters } from "vuex";
import {details,updateResource,querySelectR,getAddress,upload,
} from "@/api/cmdb/model";
import UploadFile from "./UploadFile.vue";
export default {components: { UploadFile },computed: {...mapGetters(["getActiveModel", "getResourceId"]),},data() {return {baseUrl:process.env.NODE_ENV === "development"? "http://10.7.40.178:10180/file/": window.location.protocol + "//" + window.location.host + "/file/",formInline: {},editModeButton: false,editMode: false,currnetField: "",detailList: [],options: [],propsCascader: {value: "key",label: "value",children: "child",},dialogImageUrl: "",dialogVisible: false,fileList: [], // 上传文件列表fileListImg: [], // 上传文件列表currnetFieldName: "",currnetFieldNameImg: "",imgList: "1.png,2.png",headers: { "Content-Type": "multipart/form-data" }, //必须加这个dataImgList: [],dataFileList: [],};},mounted() {this.getList();this.getSelect();},methods: {getReplaceAll(str, find, replace) {return str.replace(new RegExp(find, "g"), replace);},getImgListBase(data) {let arr = [];// eval 去掉数组外层的引号，转成数组if (data) {arr = eval(data);arr.forEach((v) => {if (!v.url.includes("http")) {v.url = this.baseUrl + v.url;}});}return arr;},getImgList(data) {let arr = [];// eval 去掉数组外层的引号，转成数组if (data) {arr = eval(data);arr.forEach((v) => {v.url = v.url;});}return arr;},getDataListS(v) {if (v.regex) {/*这个正则表示的是输入框前后不得有空格*/let re = v.regex.replace("\n", "");// 将后端返回的正则字符串转为正则对象let reg = new Function("return " + re)();if (reg.test(v.value) == true) {/*所需要写的事件*/} else {/*空格的时候的提示语*/this.$message.error(`${v.label}正则校验不通过，请重新输入`);}}},/** 复制代码成功 */clipboardSuccess() {this.$modal.msgSuccess("复制成功");},doEnter(v) {this.editModeButton = true;this.currnetField = v.id;},// 获取下拉字段的下拉值getSelect() {// querySelectR({ args: "default" }).then((res) => {//   if (res.code == 0) {//     this.options = res.data;//   }// });},// 编辑-保存handleSubmit() {// console.log("编辑数据:", this.formInline);let params = {uniqueId: this.getActiveModel.uniqueId,id: this.getResourceId,args: this.formInline,};updateResource(params).then((res) => {if (res.code == 0) {this.editMode = false;this.$message.success(res.desc);this.getList();} else {this.editMode = false;res.desc && this.$message.error(res.desc);}}).catch((err) => {this.editMode = false;err.desc && this.$message.error(err.desc);});},changeInput(v) {if (v.typeValue == "bool") {if (v.value) {this.formInline[v.name] = 1;} else {this.formInline[v.name] = 0;}} else if (v.typeValue == "isCascade") {this.formInline[v.name] = v.value.join();} else {this.formInline[v.name] = v.value;}},getList() {let params = {uniqueId: this.getActiveModel.uniqueId,id: this.getResourceId,};details(params).then((res) => {if (res.code == 0) {this.detailList = res.data;this.detailList.forEach((v1) => {v1.infoList.forEach((v2, i2) => {if (v2.typeValue == "isCascade" || v2.typeValue == "select") {getAddress(process.env.NODE_ENV === "development"? "http://10.7.40.178:10176" + v2.dateTypeValue: window.location.protocol +"//" +window.location.host +v2.dateTypeValue,{}).then((res2) => {// v2[`valueAttribute${i2}`] = res2;this.$set(v2, `valueAttribute${i2}`, res2); // 双向绑定，回显问题});if (v2.typeValue == "isCascade") {v2.value = v2.value.map(Number); // 级联下拉转换成Number数组，编辑回显绑定} else {v2.value = v2.value.join();}}// 图片文件格式数据处理if (v2.typeValue == "image") {this.dataImgList = this.getImgList(v2.value);} else if (v2.typeValue == "file") {this.dataFileList = this.getImgList(v2.value);}});});} else {res.desc && this.$message.error(res.desc);}}).catch((err) => {err.desc && this.$message.error(err.desc);});},doCancel() {this.editMode = false;this.getList();},handleRemoveImg(file, fileList) {// 延时获取，当前操作的字段名字setTimeout(() => {// console.log("删除img", this.currnetFieldNameImg, file, fileList);this.formInline[this.currnetFieldNameImg] = fileList;}, 1000);},handleRemove(file, fileList) {setTimeout(() => {console.log("删除", this.currnetFieldName, file, fileList);this.formInline[this.currnetFieldName] = fileList;}, 1000);},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},//通过onchanne触发方法获得文件列表changeFileImg(file, fileList) {this.fileListImg = fileList;},changeFile(file, fileList) {this.fileList = fileList;},uploadFilesImg(file) {const _file = file.file;var formData = new FormData();// formData.append("files", _file);formData.append("args", "cmdb");this.fileListImg.forEach((v) => {formData.append("files", v.raw);});upload(formData).then((res) => {if (res.code == 0) {// 如果dataImgList长度为零，说明之前没有图片，就直接赋值上传接口返回的数据，如果不为零，需要把之前的老数据也带上if (this.dataImgList.length == 0) {this.formInline[this.currnetFieldNameImg] = res.data;} else {this.formInline[this.currnetFieldNameImg] = [...res.data,...this.dataImgList,];}this.$message.success("上传成功");} else {res.desc && this.$message.error(res.desc);}}).catch((err) => {err.desc && this.$message.error(err.desc);});},uploadFiles(file) {const _file = file.file;var formData = new FormData();// formData.append("files", _file);formData.append("args", "cmdb");this.fileList.forEach((v) => {formData.append("files", v.raw);});upload(formData).then((res) => {if (res.code == 0) {// this.formInline[this.currnetFieldName] = res.data;if (this.dataFileList.length == 0) {this.formInline[this.currnetFieldName] = res.data;} else {this.formInline[this.currnetFieldName] = [...res.data,...this.dataFileList,];}this.$message.success("上传成功");} else {res.desc && this.$message.error(res.desc);}}).catch((err) => {err.desc && this.$message.error(err.desc);});},// 删除图片后获取namedoChangeImg(v) {this.currnetFieldNameImg = v.name;},doChange(v) {this.currnetFieldName = v.name;},// 删除文件后获取namedoOperate(v) {console.log(111111, v);this.currnetFieldName = v.name;},},
};
</script><style lang="scss" scoped>
.property {margin-top: 20px;.subName {font-size: 16px;padding-left: 10px;border-left: 3px solid #ccc;}.colorStyle {color: #409eff;cursor: pointer;margin-left: 5px;}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/870296.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

点晴模切ERP系统持续引领模切企业管理

点晴模切ERP系统持续引领模切企业管理

数字化转型是制造企业迈向高质量发展的关键步骤,而升级优化企业管理平台,将企业数据信息有效利用、功能模块优化调整、流程架构科学规划,则是数字化转型的核心要素。 当今时代的模切ERP领域竞争者众多&#xff0c;为什么点晴模切ERP能从中脱颖而出&#xff1f;为什么那么多模切…
阅读更多...
盘一盘3DGS对哪些行业影响最大？

盘一盘3DGS对哪些行业影响最大？

在日新月异的科技时代&#xff0c;每一个新兴技术的诞生都像是宇宙中的新星&#xff0c;以其独特的光芒照亮并改变着世界。3DGS正是这样一项技术&#xff0c;它的出现无疑对传统3D视觉产生了巨大的冲击&#xff0c;也给各行各业带来了巨大的影响。作为CV界的新晋黑马&#xff0…
阅读更多...
Deepspeed : AttributeError: ‘DummyOptim‘ object has no attribute ‘step‘

Deepspeed : AttributeError: ‘DummyOptim‘ object has no attribute ‘step‘

题意&#xff1a;尝试在一个名为 DummyOptim 的对象上调用 .step() 方法&#xff0c;但是这个对象并没有定义这个方法 问题背景&#xff1a; I want to use deepspeed for training LLMs along with Huggingface Trainer. But when I use deepspeed along with trainer I get …
阅读更多...
红酒的甜蜜秘密：如何搭配甜点？

红酒的甜蜜秘密：如何搭配甜点？

在品味美食的旅程中&#xff0c;甜点与红酒的搭配总是能带来意想不到的惊喜。红酒的醇厚与甜点的细腻&#xff0c;在口中交织出美妙的旋律&#xff0c;让人陶醉不已。今天&#xff0c;就让我们一起探索红酒的甜蜜秘密&#xff0c;看看如何与甜点很好搭配&#xff0c;享受这一场…
阅读更多...
DLP迎来新机遇 | 天空卫士数据防泄漏防护市场占有率连续三年第一

DLP迎来新机遇 | 天空卫士数据防泄漏防护市场占有率连续三年第一

IDC 于近日发布了《中国数据泄露防护市场份额&#xff0c;2023&#xff1a;DLP迎来新机遇》&#xff08;Doc#CHC50973524 &#xff0c;2024年6月&#xff09;报告&#xff0c;天空卫士DLP产品以21.9%的市场份额再次位列中国数据防泄露防护市场第一。这一成绩体现了天空卫士在技…
阅读更多...
软件供应链安全：如何防范潜在的攻击？

软件供应链安全：如何防范潜在的攻击？

来源&#xff1a;https://thehackernews.com/2024/06/practical-guidance-for-securing-your.html 软件生产组织面临越来越大的监管和法律压力&#xff0c;要求其保护供应链并确保软件的完整性&#xff0c;这不足为奇。在过去几年里&#xff0c;软件供应链已经成为攻击者越来越…
阅读更多...
odoo 自定义菜单模型等进行报表输出

odoo 自定义菜单模型等进行报表输出

由于个性化需求，要定义不同报表不同条件搜索， 所以自定义有如下： 模型字段权限菜单功能如下： 启用：创建新菜单、form视图、action动作 前提：模型已经创建好， 禁用：对菜单进行归档处理 删除数据：如若正在使用，请先禁用报表 另附资料 全部代码如下: class IframeMana…
阅读更多...
【C++】类中的六个默认成员函数(构造函数、析构函数、拷贝构造函数、复制重载函数等)

【C++】类中的六个默认成员函数(构造函数、析构函数、拷贝构造函数、复制重载函数等)

类中的六个默认成员函数 默认成员函数为了解决C语言存在的一些问题而诞生&#xff0c;默认存在于类中&#xff0c;进行某种操作时会自动调用默认成员函数&#xff0c;如想在此种操作中自动实现某种操作&#xff0c;可以手动定义此默认成员函数&#xff0c;如果手动定义则取代默…
阅读更多...
kafka与zookeeper的SSL认证教程

kafka与zookeeper的SSL认证教程

作者 乐维社区&#xff08;forum.lwops.cn&#xff09;许远 在构建现代的分布式系统时&#xff0c;确保数据传输的安全性至关重要。Apache Kafka 和 Zookeeper 作为流行的分布式消息队列和协调服务&#xff0c;提供了SSL&#xff08;Secure Sockets Layer&#xff09;认证机制&…
阅读更多...
汇凯金业：如何判断黄金的买入时机

汇凯金业：如何判断黄金的买入时机

黄金&#xff0c;作为全球公认的避险资产&#xff0c;其价格波动受到多种因素的影响&#xff0c;包括经济数据、货币政策、地缘政治风险等。对于投资者而言&#xff0c;把握黄金的最佳买入点是实现投资收益最大化的关键。本文将探讨影响黄金价格的主要因素&#xff0c;并提供一…
阅读更多...
八大排序之——计数排序全方位剖析！(小白也能轻松看懂！)

八大排序之——计数排序全方位剖析！(小白也能轻松看懂！)

目录 1. 计数排序的思想动图 2. 从思想到代码的实现 >1.创建临时数组 >2.统计次数 >3.排序 >4.简单版本 3. 是否可以优化呢~ 4. 计数排序的时空复杂度 5.总结 计数排序的优点 计数排序的局限性 6、完结散花 个人主页&#xff1a;秋风起&#xff0c;再归来…
阅读更多...
【腾讯云业务运营暑期实习面试题】

【腾讯云业务运营暑期实习面试题】

题目&#xff1a; &#xff08;全程大概50来分钟左右&#xff0c;面试官挺好的&#xff0c;不清楚的问题也在一直引导我&#xff0c;总体来说非常好&#xff0c;挺喜欢这个面试官的&#xff09; 1、自我介绍 2、讲讲文件的权限以及把目录下所有文件都修改 文件的权限 rwx --&…
阅读更多...
动态规划(DFS -＞ 记忆化搜索 -＞动态规划)

动态规划(DFS -＞ 记忆化搜索 -＞动态规划)

问题一&#xff1a; 首先看一个最经典的问题&#xff1a;上台阶问题。P1255 数楼梯 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 我们首先看一下&#xff0c;如何用DFS的方法进行解题。 假设我们要上到第5级台阶&#xff1a; 可以看出上到第五级台阶时&#xff0c;可能是…
阅读更多...
oak相机使用oak官网方式标定

oak相机使用oak官网方式标定

目录 一、depthai ROS驱动 一、depthai ROS驱动 &#xff08;1&#xff09;驱动下载地址&#xff1a;2. C 开发快速上手 — DepthAI Docs 0.3.0.0 documentation sudo apt install ./depthai_2.17.1_arm64.deb //运行 Python3 utilities/cam_test.py -mres 400 -cams rgb,m …
阅读更多...
探索大模型：袋鼠云在 Text To SQL 上的实践与优化

探索大模型：袋鼠云在 Text To SQL 上的实践与优化

Text To SQL 指的是将自然语言转化为能够在关系型数据库中执行的结构化查询语言&#xff08;简称 SQL&#xff09;。近年来&#xff0c;伴随人工智能大模型技术的不断进步&#xff0c;Text To SQL 任务的成功率显著提升&#xff0c;这得益于大模型的推理、理解以及指令遵循等能…
阅读更多...
自闭症学校排名前十：为星儿点亮未来

自闭症学校排名前十：为星儿点亮未来

在自闭症教育领域&#xff0c;有许多优秀的学校和机构为自闭症儿童提供着专业的帮助和支持。 星贝育园&#xff1a;以其独特的教育理念和个性化的教学方法脱颖而出。学校拥有一支经验丰富、富有爱心的教师团队&#xff0c;为孩子们提供全方位的关爱和教育。注重培养孩子的综合能…
阅读更多...
手机通讯录大营救，恢复sim卡联系人的3个重要方法

手机通讯录大营救，恢复sim卡联系人的3个重要方法

在数字化世界的浩瀚海洋中&#xff0c;手机通讯录就像一艘承载着人际关系的生命之船。然而&#xff0c;当这艘船遭遇风浪&#xff0c;即sim卡上的联系人信息意外丢失时&#xff0c;我们该如何进行一场惊心动魄的大营救&#xff0c;找回那些珍贵的联系人呢&#xff1f;别担心&am…
阅读更多...
Backend - C# 的日志Lognet4

Backend - C# 的日志Lognet4

目录 一、安装 log4net 插件 &#xff08;一&#xff09;作用 &#xff08;二&#xff09;操作 &#xff08;三&#xff09;注意 二、配置 &#xff08;一&#xff09;配置AssemblyInfo.cs &#xff08;二&#xff09;配置log4net.config 1. 创建log4net.config文件&#xff08…
阅读更多...
空间自回归模型及 Stata 具体操作步骤

空间自回归模型及 Stata 具体操作步骤

目录 一、理论原理 二、数据准备 三、程序代码及解释 四、代码运行结果 一、理论原理 空间自回归模型&#xff08;Spatial Autoregressive Model&#xff0c;SAR&#xff09;是一种用于分析具有空间相关性的数据的统计模型。它假设观测值之间的相关性不仅取决于传统的时间或…
阅读更多...
xxl-job从2.3.0升级到2.4.1版本遇到的问题及解决方法

xxl-job从2.3.0升级到2.4.1版本遇到的问题及解决方法

一、maven升级版本 <!-- xxl-job包 --> <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>2.4.1</version> </dependency> 二、在nacos对应服务的配置文件增加accessToken配…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023