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，一经查实，立即删除！

相关文章

Git设置代理服务器

Git设置代理服务器

方式一 如果说使用的是项目http或者https地址&#xff0c;就配置http与https代理即可&#xff0c;输入以下命令&#xff1a; git config --global http.proxy "socks5://127.0.0.1:1080" git config --global https.proxy "socks5://127.0.0.1:1080"这样…
阅读更多...
Sugon RackServer服务器监控指标解读

Sugon RackServer服务器监控指标解读

监控易是一款功能强大的IT基础设施监控软件&#xff0c;能够实时监控各类IT设备的运行状态&#xff0c;包括服务器、网络设备等。通过对Sugon RackServer服务器的监控&#xff0c;管理员可以实时了解服务器的性能、稳定性和可用性&#xff0c;确保业务的正常运行。 一、SNMP连…
阅读更多...
点晴模切ERP系统持续引领模切企业管理

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

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

Cortex-A510——DDR

Cortex-A510——DDR 小狼http://blog.csdn.net/xiaolangyangyang [持续演进]资料整理&#xff1a;可以学习 N 小时的 DDR DDR 学习时间 (Part A - 1)&#xff1a;一篇 2002 年的 DDR 控制器设计硕士论文DDR 学习时间 (Part A - 2)&#xff1a;学习 Micron DDR4 TN-40-07&…
阅读更多...
编程网站究竟需要怎样的电脑？深入剖析与终极选择

编程网站究竟需要怎样的电脑？深入剖析与终极选择

编程网站究竟需要怎样的电脑&#xff1f;深入剖析与终极选择 在数字化浪潮中&#xff0c;编程网站作为技术与创新的交汇点&#xff0c;对电脑的要求自然非同一般。那么&#xff0c;究竟什么样的电脑才能满足编程网站的需求呢&#xff1f;接下来&#xff0c;我们将从四个方面、…
阅读更多...
盘一盘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 …
阅读更多...
字符 ‘d‘ → 整数 d 的转换代码为：‘d‘-‘0‘

字符 ‘d‘ → 整数 d 的转换代码为：‘d‘-‘0‘

【知识点】 字符 d → 整数 d 的转换代码为&#xff1a;d-0【算法代码】 #include <bits/stdc.h> using namespace std;int ans;int main() {string s;cin>>s;for(int i0; i<s.length(); i) {ans*10;anss[i]-0;}cout<<ans<<endl;return 0; }/* in:…
阅读更多...
红酒的甜蜜秘密：如何搭配甜点？

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

在品味美食的旅程中&#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…
阅读更多...
用jquery实现文本隐藏和显示的相互转换

用jquery实现文本隐藏和显示的相互转换

用jquery写一段代码&#xff0c;其中包括一段文字和两个按钮&#xff0c;一个按钮显示“隐藏”&#xff0c;一个按钮显示“显示”。代码初次运行时&#xff0c;仅显示一点文字和隐藏按钮&#xff0c;显示按钮不显示&#xff0c;点击隐藏按钮后&#xff0c;一段文字和隐藏按钮的…
阅读更多...
人工智能在自动驾驶中的目标检测研究

人工智能在自动驾驶中的目标检测研究

摘要 随着自动驾驶技术的快速发展&#xff0c;视觉识别作为核心技术之一&#xff0c;扮演着至关重要的角色。本文旨在探讨人工智能如何通过视觉识别在自动驾驶中进行目标检测。我们将详细讨论目标检测的基本原理、常用算法、最新进展、已有的开源项目及其在自动驾驶中的应用和…
阅读更多...
【C++】类中的六个默认成员函数(构造函数、析构函数、拷贝构造函数、复制重载函数等)

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

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

力扣155.最小栈

力扣155.最小栈 用栈存对组 first为元素&#xff0c;second为当前栈内最小值 class MinStack {stack<pair<int, int>> st;public:MinStack() {}void push(int x) {if(st.size() 0)st.push({x,x});elsest.push({x,min(x,st.top().second)});}void pop() {st.pop…
阅读更多...
LASA数据集

LASA数据集

一、LASA数据集介绍 LASA Handwriting Dataset包含字母表中手写字母的二维轨迹&#xff08;位置和速度&#xff09;。这些已被广泛用于将复杂轨迹的建模与动力学系统进行比较。 LASA数据集是由EFPL大学A. Billard教授团队提供的。 二、LASA数据集链接 LASA Handwriting Dat…
阅读更多...
谷歌广告投放技巧--购物广告，Pmax广告

谷歌广告投放技巧--购物广告，Pmax广告

我的文章首发在公众号，之后同步到CSDN，知乎，还有个人博客:haiwaibiji.com. 本次更新的内容是谷歌展示广告+购物广告（PLA）+Pmax广告投放的核心事项，广告的东西有很多，很杂，但核心其实就那么一两样，至于其他的，锦上添花为主。 展示广告 投放-核心事项 标准展示广告 …
阅读更多...
解决Spring Boot中的国际化与本地化问题

解决Spring Boot中的国际化与本地化问题

解决Spring Boot中的国际化与本地化问题 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 国际化与本地化概述 在开发面向全球用户的应用程序时&#xff0c;国际化&#xff08;Internationalization…
阅读更多...
kafka与zookeeper的SSL认证教程

kafka与zookeeper的SSL认证教程

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

Copyright @ 2022~2023