活动介绍

el-form-item中default-value和default-time同时使用

时间: 2025-04-19 08:57:42 浏览: 27
### 如何在 `el-form-item` 中同时设置默认值 (`default-value`) 和默认时间 (`default-time`) 在 Element UI 的表单项组件中,直接通过 `el-form-item` 设置 `default-value` 和 `default-time` 并不是标准做法。相反,这些属性通常是针对特定类型的输入控件(如日期选择器或时间选择器)。为了实现这一需求,可以考虑以下方法: #### 方法一:初始化数据对象中的字段 最常见的方式是在 Vue 组件的数据模型里预先设定好初始值。对于既包含具体数值又包含时间的情况,可以在创建实例时就给对应的 model 属性赋初值。 ```javascript export default { data() { return { form: { dateAndTime: new Date(), // 默认当前时间和日期作为初始值 } }; }, }; ``` 当使用 `<el-date-picker>` 或者其他支持 datetime 类型的选择器时,可以直接绑定到这个已经设置了默认值得变量上[^1]。 #### 方法二:利用插槽自定义内容并手动控制默认值 如果需要更复杂的逻辑处理,默认情况下无法满足,则可以通过 slot 自定义内部结构,并借助 JavaScript 来管理状态变化。这种方式允许开发者完全掌控何时以及怎样应用默认的时间和值。 ```html <template> <el-form :model="form"> <el-form-item label="Date and Time Picker with Default Value"> <!-- 使用 scoped slot 定制化 input --> <el-date-picker v-model="form.dateAndTime" type="datetime" placeholder="Choose a date and time" @blur="handleBlur" /> </el-form-item> </el-form> </template> <script> import moment from 'moment'; export default { methods: { handleBlur(event) { const target = event.target; if (!target.value) { this.form.dateAndTime = moment().format('YYYY-MM-DD HH:mm:ss'); // 当失去焦点且无输入时设为现在时刻 } } }, mounted(){ this.handleBlur({}); // 页面加载完成后立即触发一次 blur 模拟行为以确保有默认显示 }, data() { return { form: { dateAndTime: null, } }; } } </script> ``` 需要注意的是,在实际开发过程中应当依据具体的业务场景灵活调整上述方案;此外,还需关注所使用的版本是否兼容某些特性,因为框架更新可能会引入新的特性和改动旧有的 API 设计[^2]。
阅读全文

相关推荐

<template> <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%" scroll> <el-form ref="formRef" :model="formData" label-width="120px" scroll-to-error v-loading="formLoading"> <el-row> <el-col :span="24"> <el-form-item label="客户:" prop="name"> <el-select v-model="formData.id" clearable placeholder="请选择" @change="getTalentInfo(formData.id)"> <el-option v-for="item in talentList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="手机号:" prop="phone"> {{ formData.phone }} </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="成本价:" prop="cost"> {{ formData.cost }}元 </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="成交价:" prop="cost"> {{ formData.cost }}元 </el-form-item> </el-col> </el-row> <el-row> <el-col :span="8"> <el-form-item label="级别:"> {{ item.level }} </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="等级:"> {{ item.subLevel }} </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="专业:"> {{ item.major }} </el-form-item> </el-col> </el-row> <el-col :span="8"> <el-form-item label="三类:"> {{ item.category }} </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="社保:"> {{ item.socialSecurityInformation }}(暂时未匹配) </el-form-item> </el-col> </el-form> <template #footer> <el-button type="success">转入待匹配</el-button> <el-button type="warning">暂存</el-button> <el-button type="danger">特殊状态</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading"> 确 定 </el-button> <el-button @click="dialogVisible = false">取 消</el-button> </template> </Dialog> </template> <style lang="scss" scoped> .major { border: 1px solid #8a8a8a; padding: 20px 0px; } .major-item { margin-bottom: 20px; border-bottom: 1px solid #eee; &:last-child { border-bottom: none; margin-bottom: 0; } } .validity-period { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; } :deep(.validity-period .el-input) { width: calc(50% - 10px); } </style> 样式优化

<template> <el-dialog :title="!dataForm.id ? '新增电池信息' : '修改电池信息'" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible" width="90%" top="5vh" custom-class="multi-column-dialog"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" class="multi-column-form"> <el-row :gutter="30"> <el-col :span="8"> 电池基本信息 <el-form-item label="电池编号" prop="hwid"> <el-input v-model="dataForm.hwid" placeholder="电池编号" disabled></el-input> </el-form-item> <el-form-item label="电芯类型" prop="batteryCellId"> <el-select v-model="dataForm.batteryCellId" placeholder="选择电芯类型"> <el-option v-for="item in batteryCellIds" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind" placeholder="选择电池类型"> <el-option v-for="item in batteryKinds" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="电芯封装" prop="batteryCellPackageId"> <el-select v-model="dataForm.batteryCellPackageId" placeholder="选择电芯封装"> <el-option v-for="item in batteryCellPackageIds" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="电池串数" prop="batteryBunchs"> <el-input v-model="dataForm.batteryBunchs" placeholder="电池串数"></el-input> </el-form-item> <el-form-item label="电池并数" prop="batteryUnions"> <el-input v-model="dataForm.batteryUnions" placeholder="电池并数"></el-input> </el-form-item> <el-form-item label="单体电压(V)" prop="singleBatteryVoltage"> <el-input v-model="dataForm.singleBatteryVoltage" placeholder="单体电压"></el-input> </el-form-item> <el-form-item label="额定总压(V)" prop="ratedTotalPressure"> <el-input v-model="dataForm.ratedTotalPressure" placeholder="额定总压"></el-input> </el-form-item> </el-col> <el-col :span="8"> 规格参数 <el-form-item label="额定电流(A)" prop="ratedCurrent"> <el-input v-model="dataForm.ratedCurrent" placeholder="额定电流"></el-input> </el-form-item> <el-form-item label="额定容量(Ah)" prop="ratedCapacity"> <el-input v-model="dataForm.ratedCapacity" placeholder="额定容量"></el-input> </el-form-item> <el-form-item label="额定能量(kWh)" prop="ratedEnergy"> <el-input v-model="dataForm.ratedEnergy" placeholder="额定能量"></el-input> </el-form-item> <el-form-item label="电池箱数" prop="batteryQuantity"> <el-input v-model="dataForm.batteryQuantity" placeholder="电池箱数"></el-input> </el-form-item> <el-form-item label="电池厂商" prop="batteryFirm"> <el-input v-model="dataForm.batteryFirm" placeholder="电池厂商"></el-input> </el-form-item> <el-form-item label="激活日期" prop="activationDate"> <el-date-picker v-model="dataForm.activationDate" type="date" placeholder="选择日期" disabled style="width: 100%"> </el-date-picker> </el-form-item> <el-form-item label="BMS编号" prop="bmsNum"> <el-input v-model="dataForm.bmsNum" placeholder="BMS编号"></el-input> </el-form-item> <el-form-item label="电芯编码" prop="batteryCellNum"> <el-input v-model="dataForm.batteryCellNum" placeholder="电芯编码"></el-input> </el-form-item> <el-form-item label="标称容量(Ah)" prop="nominalCapacity"> <el-input v-model="dataForm.nominalCapacity" placeholder="标称容量"></el-input> </el-form-item> </el-col> <el-col :span="8"> 状态与位置 <el-form-item label="系统状态" prop="sysStatus"> <el-select v-model="dataForm.sysStatus" placeholder="系统状态"> <el-option v-for="item in sysStatuses" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="警报状态" prop="alarmStatus"> <el-select v-model="dataForm.alarmStatus" placeholder="报警状态"> <el-option v-for="item in alarmStatuses" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="所属项目" prop="projectId"> <el-select v-model="dataForm.projectId" placeholder="所属项目"> <el-option v-for="item in projectIds" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="地理位置" prop="cityId"> <el-select v-model="dataForm.proviceId" placeholder="省份" @change="handleChange" style="margin-bottom: 10px"> <el-option v-for="item in provices" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> <el-select v-model="dataForm.cityId" placeholder="城市" @change="handleChange2" style="margin-bottom: 10px"> <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> <el-select v-model="dataForm.districtId" placeholder="区县"> <el-option v-for="item in districts" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> 设备信息 <el-form-item label="软件版本" prop="softVersion"> <el-input v-model="dataForm.softVersion" placeholder="软件版本"></el-input> </el-form-item> <el-form-item label="硬件版本" prop="hardwareVersion"> <el-input v-model="dataForm.hardwareVersion" placeholder="硬件版本"></el-input> </el-form-item> <el-form-item label="动力类型" prop="powerTypeId"> <el-select v-model="dataForm.powerTypeId" placeholder="选择动力类型"> <el-option v-for="item in powerTypeIds" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="二维码" prop="qrCode"> <el-input v-model="dataForm.qrCode" placeholder="二维码"></el-input> </el-form-item> </el-col> </el-row> 网络信息 <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="SCID" prop="scid"> <el-input v-model="dataForm.scid" placeholder="SCID"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="PLMN" prop="plmn"> <el-input v-model="dataForm.plmn" placeholder="PLMN"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="LAC" prop="lac"> <el-input v-model="dataForm.lac" placeholder="LAC"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="CID" prop="cid"> <el-input v-model="dataForm.cid" placeholder="CID"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei" placeholder="IMEI"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid" placeholder="ICCID"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="CCID" prop="ccid"> <el-input v-model="dataForm.ccid" placeholder="CCID"></el-input> </el-form-item> </el-col> </el-row> </el-form> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </el-dialog> </template> <script> export default { data () { return { visible: false, dataForm: { id: 0, hwid: '', batteryCellId: [], batteryKind: [], batteryCellPackageId: [], batteryBunchs: '', batteryUnions: '', singleBatteryVoltage: '', ratedTotalPressure: '', ratedCurrent: '', ratedCapacity: '', ratedEnergy: '', batteryQuantity: '', batteryFirm: '', activationDate: '', bmsNum: '', batteryCellNum: '', batteryChassisNum: '', nominalCapacity: '', sysStatus: '', alarmStatus: '', projectId: '', cityId: '', softVersion: '', hardwareVersion: '', powerTypeId: '', qrCode: '', scid: '', plmn: '', lac: '', cid: '', imei: '', iccid: '', ccid: '', // sysStatus: [], // cityId: [], districtId:[], proviceId:[], // tempproviceId: '', // softVersion: '', // alarmStatus: [], // projectId: [], // powerTypeId: [] }, dataRule: { hwid: [ { required: true, message: '电池编号不能为空', trigger: 'blur' } ], batteryCellId: [ { required: true, message: '电芯类型id不能为空', trigger: 'blur' } ], batteryKind: [ { required: true, message: '电池类型id不能为空', trigger: 'blur' } ], batteryCellPackageId: [ { required: true, message: '电芯封装id不能为空', trigger: 'blur' } ], batteryBunchs: [ { required: true, message: '电池串数不能为空', trigger: 'blur' } ], batteryUnions: [ { required: true, message: '电池并数不能为空', trigger: 'blur' } ], singleBatteryVoltage: [ { required: true, message: '单体电压不能为空', trigger: 'blur' } ], ratedTotalPressure: [ { required: true, message: '额定总压不能为空', trigger: 'blur' } ], ratedCurrent: [ { required: true, message: '额定电流不能为空', trigger: 'blur' } ], ratedCapacity: [ { required: true, message: '额定容量不能为空', trigger: 'blur' } ], ratedEnergy: [ { required: true, message: '额定能量不能为空', trigger: 'blur' } ], batteryQuantity: [ { required: true, message: '电池箱数不能为空', trigger: 'blur' } ], batteryFirm: [ { required: true, message: '电池厂商不能为空', trigger: 'blur' } ], activationDate: [ { required: true, message: '激活日期不能为空', trigger: 'blur' } ], bmsNum: [ { required: true, message: 'BMS编号不能为空', trigger: 'blur' } ], batteryCellNum: [ { required: true, message: '电芯编码不能为空', trigger: 'blur' } ], // batteryChassisNum: [ // { required: true, message: '底盘编号不能为空', trigger: 'blur' } // ], nominalCapacity: [ { required: true, message: '标称容量不能为空', trigger: 'blur' } ], capacity: [ { required: true, message: '容量不能为空', trigger: 'blur' } ], // createTime: [ // { required: true, message: '不能为空', trigger: 'blur' } // ], // updateTime: [ // { required: true, message: '更新时间不能为空', trigger: 'blur' } // ] sysStatus: [ { required: true, message: '系统状态不能为空', trigger: 'blur' } ], // alarmStatus: [ // { required: true, message: '警报状态不能为空', trigger: 'blur' } // ], // projectId: [ // { required: true, message: '所属项目不能为空', trigger: 'blur' } // ], // cityId: [ // { required: true, message: '城市不能为空', trigger: 'blur' } // ], softVersion: [ { required: true, message: '软件版本不能为空', trigger: 'blur' } ], // hardwareVersion: [ // { required: true, message: '硬件版本不能为空', trigger: 'blur' } // ], powerTypeId: [ { required: true, message: '动力类型不能为空', trigger: 'blur' } ], // qrCode: [ // { required: true, message: '二维码不能为空', trigger: 'blur' } // ], // scid: [ // { required: true, message: 'scid不能为空', trigger: 'blur' } // ], // plmn: [ // { required: true, message: 'plmn不能为空', trigger: 'blur' } // ], // lac: [ // { required: true, message: 'lac不能为空', trigger: 'blur' } // ], // cid: [ // { required: true, message: 'cid不能为空', trigger: 'blur' } // ], // imei: [ // { required: true, message: 'imei不能为空', trigger: 'blur' } // ], // iccid: [ // { required: true, message: 'iccid不能为空', trigger: 'blur' } // ], // ccid: [ // { required: true, message: 'ccid不能为空', trigger: 'blur' } // ] }, batteryCellIds: [], batteryKinds:[{ value: 0, label: '运营' },{ value: 1, label: '售后' },{ value: 2, label: '内测' },{ value: 3, label: '报废' }], batteryCellPackageIds: [], provices: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶', disabled: true }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value:'', cities: [], districts: [], sysStatuses: [], powerTypeIds: [], projectIds:[], customIds:[], alarmStatuses:[] } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/info/${this.dataForm.id}), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.provices = data.data.provices this.cities = data.data.cities this.districts = data.data.districts this.sysStatuses = data.data.sysStatuses this.powerTypeIds = data.data.powers this.alarmStatuses = data.data.alarmStatuses this.projectIds = data.data.projectIds this.batteryCellIds = data.data.batteryCellIds this.batteryCellPackageIds = data.data.batteryCellPackageIds const socitem = data.data.bmsBatteryInfo // this.dataForm.batteryNum = data.bmsBatteryInfo.batteryNum this.dataForm.hwid = socitem.hwid this.dataForm.batteryCellId = socitem.batteryCellId this.dataForm.batteryKind = socitem.batteryKind this.dataForm.batteryCellPackageId = socitem.batteryCellPackageId this.dataForm.batteryBunchs = socitem.batteryBunchs this.dataForm.batteryUnions = socitem.batteryUnions this.dataForm.singleBatteryVoltage = socitem.singleBatteryVoltage this.dataForm.ratedTotalPressure = socitem.ratedTotalPressure this.dataForm.ratedCurrent = socitem.ratedCurrent this.dataForm.ratedCapacity = socitem.ratedCapacity this.dataForm.ratedEnergy = socitem.ratedEnergy this.dataForm.batteryQuantity = socitem.batteryQuantity this.dataForm.batteryFirm = socitem.batteryFirm this.dataForm.activationDate = socitem.activationDate this.dataForm.bmsNum = socitem.bmsNum this.dataForm.batteryCellNum = socitem.batteryCellNum // this.dataForm.batteryChassisNum = socitem.batteryChassisNum this.dataForm.nominalCapacity = socitem.nominalCapacity // this.dataForm.capacity = socitem.capacity this.dataForm.sysStatus = socitem.sysStatus this.dataForm.alarmStatus = socitem.alarmStatus this.dataForm.projectId = socitem.projectId this.dataForm.cityId = socitem.cityId this.dataForm.districtId = socitem.districtId this.dataForm.proviceId = socitem.proviceId this.dataForm.softVersion = socitem.softVersion this.dataForm.hardwareVersion = socitem.hardwareVersion this.dataForm.powerTypeId = socitem.powerTypeId this.dataForm.qrCode = socitem.qrCode this.dataForm.scid = socitem.scid this.dataForm.plmn = socitem.plmn this.dataForm.lac = socitem.lac this.dataForm.cid = socitem.cid this.dataForm.imei = socitem.imei this.dataForm.iccid = socitem.iccid this.dataForm.ccid = socitem.ccid this.dataForm.createTime = socitem.createTime this.dataForm.updateTime = socitem.updateTime } }) }else{ this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/getmenus), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.provices = data.data.provices // this.cities = data.data.cities // this.districts = data.data.districts this.sysStatuses = data.data.sysStatuses this.powerTypeIds = data.data.powers this.alarmStatuses = data.data.alarmStatuses this.projectIds = data.data.projectIds this.batteryCellIds = data.data.batteryCellIds this.batteryCellPackageIds = data.data.batteryCellPackageIds } }) } }) }, mouseblur() { // alert("鼠标失去焦点,检查HWID是否重复"); }, handleChange(value) { // alert("鼠标"+value); this.dataForm.cityId = '' this.dataForm.districtId = '' this.getCities(value, 2) }, handleChange2(value) { // alert("鼠标===="+value); this.dataForm.districtId = '' this.getCities(value, 3) }, getCities(pid, level) { this.$http({ url: this.$http.adornUrl('/battery/bmsdistrictarea/getCitiesByPid'), method: 'get', params: this.$http.adornParams({ 'level': level, 'pid': pid }) }).then(({data}) => { if (data && data.code === 0) { if(level==1){ this.provices = data.data } if(level==2){ this.cities = data.data } if(level==3){ this.districts = data.data } } else { this.provices = [] this.cities = [] this.districts = [] } }) }, // 表单提交 dataFormSubmit () { this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/${!this.dataForm.id ? 'save' : 'update'}), method: 'post', data: this.$http.adornData({ 'id': this.dataForm.id || undefined, 'hwid': this.dataForm.hwid, 'batteryCellId': this.dataForm.batteryCellId, 'batteryKind': this.dataForm.batteryKind, 'batteryCellPackageId': this.dataForm.batteryCellPackageId, 'batteryBunchs': this.dataForm.batteryBunchs, 'batteryUnions': this.dataForm.batteryUnions, 'singleBatteryVoltage': this.dataForm.singleBatteryVoltage, 'ratedTotalPressure': this.dataForm.ratedTotalPressure, 'ratedCurrent': this.dataForm.ratedCurrent, 'ratedCapacity': this.dataForm.ratedCapacity, 'ratedEnergy': this.dataForm.ratedEnergy, 'batteryQuantity': this.dataForm.batteryQuantity, 'batteryFirm': this.dataForm.batteryFirm, // 'activationDate': this.dataForm.activationDate, 'activateDateFormat': this.dataForm.activationDate, 'bmsNum': this.dataForm.bmsNum, 'batteryCellNum': this.dataForm.batteryCellNum, // 'batteryChassisNum': this.dataForm.batteryChassisNum, 'nominalCapacity': this.dataForm.nominalCapacity, // 'capacity': this.dataForm.capacity, 'sysStatus': this.dataForm.sysStatus, 'alarmStatus': this.dataForm.alarmStatus, 'projectId': this.dataForm.projectId, 'cityId': this.dataForm.cityId, 'districtId': this.dataForm.districtId, 'proviceId': this.dataForm.proviceId, 'softVersion': this.dataForm.softVersion, 'hardwareVersion': this.dataForm.hardwareVersion, 'powerTypeId': this.dataForm.powerTypeId, 'qrCode': this.dataForm.qrCode, 'scid': this.dataForm.scid, 'plmn': this.dataForm.plmn, 'lac': this.dataForm.lac, 'cid': this.dataForm.cid, 'imei': this.dataForm.imei, 'iccid': this.dataForm.iccid, 'ccid': this.dataForm.ccid, 'createTime': this.dataForm.createTime, 'updateTime': this.dataForm.updateTime }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style scoped> /* 添加样式优化 */ .multi-column-dialog { max-width: 1400px; } .multi-column-form { max-height: 70vh; overflow-y: auto; padding: 10px 15px; } .form-section { background: #f8f9fc; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #ebeef5; } .section-header { display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; color: #409EFF; font-weight: bold; } .section-header i { margin-right: 8px; font-size: 18px; } .network-section { margin-top: 20px; } .location-selectors { display: flex; flex-direction: column; } .el-form-item { margin-bottom: 18px; } .el-select, .el-input { width: 100%; } /* 响应式调整 */ @media (max-width: 1200px) { .el-col { width: 100% !important; } .multi-column-dialog { width: 95% !important; } } </style> 使用el-tab-pan优化

<template> <el-row :gutter="20"> <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme"> <el-col> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable prefix-icon="Search" style="margin-bottom: 20px"/> <el-tree :data="typeOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="treeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick"/> </el-col> <el-col> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" style="width: 240px"/> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" style="width: 240px"/> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 240px"> <el-option v-for="dict in mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value"/> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button> <el-button icon="refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['mdm:typeAttr:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="upload" @click="handleImport" v-hasPermi="['mdm:typeAttr:import']" >导入 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="edit" @click="handleUrlUpdate" v-hasPermi="['mdm:mdmMaterialType:edit']"> 编辑命名规则 </el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型名称" align="center" prop="typemgrName" width="140"/> <el-table-column label="类型编号" align="center" prop="typemgrNum" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template #default="scope"> <dict-tag :options="mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数值最大值" align="center" prop="maxVal" width="120"/> <el-table-column label="数值最小值" align="center" prop="minVal" width="120"/> <el-table-column label="默认值" align="center" prop="defaultVal"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isNull"/> </template> </el-table-column> <el-table-column label="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/> <el-table-column label="URL地址" align="center" prop="href"/> <el-table-column label="是否可查询" align="center" prop="isQuery" width="120"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isQuery"/> </template> </el-table-column> <el-table-column label="是否表单显示" align="center" prop="isShowForm" width="120"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isShowForm"/> </template> </el-table-column> <el-table-column label="是否列表显示" align="center" prop="isShowList" width="120"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isShowList"/> </template> </el-table-column> <el-table-column label="是否只读" align="center" prop="isReadOnly"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isReadOnly"/> </template> </el-table-column> <el-table-column label="表单排序" align="center" prop="orderNum"/> <el-table-column label="是否支持排序" align="center" prop="sortFlag" width="120"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.sortFlag"/> </template> </el-table-column> <el-table-column label="数值是否有公差" align="center" prop="isTolerance" width="120"> <template #default="scope"> <dict-tag :options="mdm_common_flag_list" :value="scope.row.isTolerance"/> </template> </el-table-column> <el-table-column label="正则表达式校验" align="center" prop="regularCheck" width="120"/> <el-table-column label="状态" align="center" prop="status"> <template #default="scope"> <dict-tag :options="mdm_common_status_list" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="合法值" align="center" prop="validStr" width="150"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right"> <template #default="scope"> <el-button link icon="edit" type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> <el-button link type="primary" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> <el-button link type="primary" icon="edit" @click="eidtValid(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >编辑合法值 </el-button> </template> </el-table-column> </el-table> 0" :total="total" v-model:page="queryParams.pageNum" v-model::limit="queryParams.pageSize" @pagination="getList"/> </el-col> </splitpanes> </el-row> <el-dialog :title="title" v-model="open" width="850px" append-to-body> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number"> <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <el-tree-select v-model="form.typemgrId" :data="typeOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" :current-node-key="form.typemgrId" placeholder="请选择物料类型" check-strictly style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数值最大值" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数值最大值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值最小值" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数值最小值" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认值" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否可查询" prop="isQuery"> <el-select v-model="form.isQuery" placeholder="请选择是否可查询" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否列表显示" prop="isShowList"> <el-select v-model="form.isShowList" placeholder="请选择是否列表显示" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数值是否有公差" style="width: 240px"> <el-option v-for="dict in mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in mdm_common_status_list" :key="dict.value" :value="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </template> </el-dialog> <el-dialog title="修改命名规则" v-model="openUrledit" width="500px" append-to-body> <el-form ref="urlformRef" :model="urlform" :rules="urlEditrules" label-width="80px"> <el-form-item label="命名规则" prop="namingrule"> <el-input v-model="urlform.namingrule" placeholder="请输入命名规则"/> </el-form-item> </el-form> <template #footer> <el-button type="primary" @click="submitFormNamingrule">确 定</el-button> <el-button @click="cancelSubmitUrlEdit">取 消</el-button> </template> </el-dialog> <el-dialog :title="validtitle" v-model="validOpen" width="650px" append-to-body> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="plus" @click="handleValidAdd" v-hasPermi="['mdm:validlist:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="edit" :disabled="validsingle" @click="handleValidUpdate" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="delete" :disabled="validMultiple" @click="handleValidDeleteBtn" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </el-col> </el-row> <el-table v-loading="validTableLoading" :data="validlistList" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="合法值名称" align="center" prop="name"/> <el-table-column label="排序" align="center" prop="orderNum"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link icon="edit" @click="handleValidUpdate(scope.row)" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> <el-button link icon="delete" @click="handleValidDelete(scope.row)" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </template> </el-table-column> </el-table> <template #footer> <el-button type="primary" @click="validSubmitForm">关 闭</el-button> </template> </el-dialog> <el-dialog :title="validAddtitle" v-model="validAddOpen" width="500px" append-to-body> <el-form ref="validformRef" :model="validform" :rules="validRules" label-width="80px"> <el-form-item label="合法值名称" prop="name" label-width="95px"> <el-input v-model="validform.name" placeholder="请输入合法值名称"/> </el-form-item> <el-form-item label="排序" prop="orderNum" label-width="95px"> <el-input v-model="validform.orderNum" placeholder="请输入排序"/> </el-form-item> </el-form> <template #footer> <el-button type="primary" @click="validAddSubmitForm">确 定</el-button> <el-button @click="validAddCancel">取 消</el-button> </template> </el-dialog> </template> <script setup name="typeAtrr"> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import {getMdmMaterialType, updateMdmMaterialType} from "@/api/mdm/mdmMaterialType"; import {treeselect} from "@/api/mdm/mdmMaterialType"; import {listValidlist, getValidlist, delValidlist, addValidlist, updateValidlist} from "@/api/mdm/validlist"; import {getToken} from "@/utils/auth"; import "splitpanes/dist/splitpanes.css" import useAppStore from '@/store/modules/app' import {Splitpanes, Pane} from "splitpanes" const {proxy} = getCurrentInstance(); const appStore = useAppStore() // 使用字典 const { mdm_common_flag_list, mdm_common_status_list, mdm_common_column_type } = proxy.useDict("mdm_common_flag_list", "mdm_common_status_list", "mdm_common_column_type"); // 响应式状态 const loading = ref(true); const showSearch = ref(true); const open = ref(false); const validOpen = ref(false); const validAddOpen = ref(false); const openUrledit = ref(false); const title = ref(''); const validtitle = ref(''); const validAddtitle = ref(''); const total = ref(0); const single = ref(true); const multiple = ref(true); const validsingle = ref(false); const validMultiple = ref(true); const validTableLoading = ref(true); const materiaTypelName = ref(''); const typeOptions = ref([]); const typeAttrList = ref([]); const validlistList = ref([]); const queryFormRef = ref(null); const formRef = ref(null); const validformRef = ref(null); const urlformRef = ref(null); const uploadRef = ref(null); // 查询参数 const queryParams = reactive({ pageNum: 1, pageSize: 10, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, }); // 表单数据 const data = reactive({ form: { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null }, //合法值 validform: { id: null, attributeId: null, name: null, orderNum: null, }, //命名规则 urlform: { id: null, namingrule: null, } }); const {form, validform, urlform} = toRefs(data); // 上传配置 const upload = reactive({ open: false, title: "", isUploading: false, updateSupport: 0, headers: {Authorization: "Bearer " + getToken()}, url: import.meta.env.VITE_APP_BASE_API + "/mdm/typeAttr/importData" }); // 选中ID集合 const ids = ref([]); const validIds = ref([]); // 当前选中属性行 const selectedAttrRow = ref(null); // 表单验证规则 const rules = reactive({ number: [{required: true, message: "编号不能为空", trigger: "blur"}], name: [{required: true, message: "名称不能为空", trigger: "blur"}], typemgrId: [{required: true, message: "类型ID不能为空", trigger: "blur"}], dataType: [{required: true, message: "字段类型不能为空", trigger: "change"}], }); const urlEditrules = reactive({ namingrule: [{required: true, message: "命名规则不能为空", trigger: "blur"}], }); const validRules = reactive({ name: [{required: true, message: "名称不能为空", trigger: "blur"}], }); // 监听物料类型名称变化 watch(materiaTypelName, (val) => { proxy.$refs["treeRef"].filter(val); }); // 获取列表 function getList() { console.log("========属性规则getList======"); loading.value = true; try { listTypeAttr(queryParams).then(response => { console.log("========属性规则getList======", response); typeAttrList.value = response.rows; total.value = response.total; }) } catch (error) { console.error('获取列表失败:', error); // ElMessage.error('获取数据失败'); } finally { loading.value = false; } }; function resetFormState() { form.value = { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null }; proxy.resetForm("formRef"); }; function resetValidAddForm() { validform.value = { id: null, attributeId: null, name: null, orderNum: null } proxy.resetForm("validformRef"); }; function resetUrlForm() { urlform.value = { id: null, namingrule: null } proxy.resetForm("urlformRef"); }; function handleQuery() { queryParams.pageNum = 1; getList(); }; function resetQuery() { proxy.resetForm("queryForm"); handleQuery(); }; function handleSelectionChange(selection) { ids.value = selection.map(item => item.id); single.value = selection.length != 1; multiple.value = !selection.length; }; function handleAdd() { resetFormState(); // getTreeselect(); open.value = true; title.value = "添加属性规则"; }; function handleUpdate(row) { resetFormState(); // getTreeselect() const id = row.id || ids.value; getTypeAttr(id).then(response => { open.value = true; title.value = "修改属性规则"; form.value = response.data; }); }; function submitForm() { proxy.$refs["formRef"].validate(valid => { if (valid) { if (form.value.id != null) { updateTypeAttr(form.value).then(response => { proxy.$modal.msgSuccess("修改成功"); open.value = false; getList(); }); } else { // console.log(form.value); addTypeAttr(form.value).then(response => { proxy.$modal.msgSuccess("新增成功"); open.value = false; getList(); }); } } }) }; function cancel() { open.value = false; resetFormState(); }; function handleDelete(row) { // console.log('删除ids', ids.value); const delIds = row.id || ids.value; proxy.$modal.confirm('是否确认删除属性规则编号为"' + delIds + '"的数据项?').then(function () { return delTypeAttr(delIds); }).then(() => { getList(); proxy.$modal.msgSuccess("删除成功"); }).catch(() => { }); }; function handleExport() { proxy.download('mdm/typeAttr/export', { ...queryParams.value }, typeAttr_${new Date().getTime()}.xlsx) }; function filterNode(value, data) { if (!value) return true; return data.label.includes(value); }; function handleNodeClick(data) { queryParams.typemgrId = data.id; handleQuery(); }; function getTreeselect() { const response = treeselect().then(response => { console.log('获取树形数据成功:', response); typeOptions.value = response.data; }); }; function eidtValid(row) { selectedAttrRow.value = row; getValidDataList(row); }; function getValidDataList(row) { validOpen.value = true; validTableLoading.value = true; try { const query = { pageNum: 1, pageSize: 1000, attributeId: row.id }; listValidlist(query).then(response => { // console.log('获取合法值列表成功:', response); validlistList.value = response.rows; }); } catch (error) { // console.error('获取合法值列表失败:', error); // ElMessage.error('获取合法值列表失败'); } finally { validTableLoading.value = false; } }; function validSubmitForm() { validOpen.value = false; }; function handleValidAdd() { validAddOpen.value = true; validAddtitle.value = "添加合法值"; resetValidAddForm(); }; function validAddSubmitForm() { console.log('添加合法值', selectedAttrRow.value.id); validform.value.attributeId = selectedAttrRow.value.id proxy.$refs["validformRef"].validate(valid => { if (valid) { if (validform.value.id != null) { updateValidlist(validform.value).then(response => { proxy.$modal.msgSuccess("修改成功"); validAddOpen.value = false; getValidDataList(selectedAttrRow.value); }); } else { addValidlist(validform.value).then(response => { proxy.$modal.msgSuccess("新增成功"); validAddOpen.value = false; getValidDataList(selectedAttrRow.value); }); } } }); }; function validAddCancel() { validAddOpen.value = false; resetValidAddForm(); }; function handleValidSelectionChange(selection) { validIds.value = selection.map(item => item.id); validsingle.value = selection.length !== 1; validMultiple.value = !selection.length; }; function handleValidDeleteBtn() { const ids = validIds.value; proxy.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(ids); }).then(() => { proxy.$modal.msgSuccess("删除成功"); getValidDataList(selectedAttrRow.value); }).catch(() => { }); }; function handleValidDelete(row) { const ids = row.id; proxy.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项?').then(function () { return delValidlist(ids); }).then(() => { getValidDataListByAttrId(row.attributeId); proxy.$modal.msgSuccess("删除成功"); }).catch(() => { }); }; function getValidDataListByAttrId(attrId) { const query = { pageNum: 1, pageSize: 1000, attributeId: attrId }; try { listValidlist(query).then(response => { validlistList.value = response.rows; }); } catch (error) { console.error('获取合法值列表失败:', error); } }; function handleUrlUpdate() { // openUrledit.value = true; resetUrlForm(); // console.log('修改命名规则'); const currentNode = proxy.$refs.treeRef.getCurrentNode(); // const currentNode = treeRef.value.getCurrentNode(); if (!currentNode) { proxy.$modal.msgWarning("请先在左侧树中选择一个物料类型"); return; } console.log('进入到', currentNode.id); getMdmMaterialType(currentNode.id).then(response => { openUrledit.value = true; // console.log('获取数据成功:', response); urlform.value = response.data; }); }; function submitFormNamingrule() { proxy.$refs["urlformRef"].validate(valid => { if (valid) { if (urlform.value.id != null) { updateMdmMaterialType(urlform.value).then(response => { proxy.$modal.msgSuccess("修改成功"); openUrledit.value = false; }); } } }); }; function cancelSubmitUrlEdit() { openUrledit.value = false; resetUrlForm(); }; function handleImport() { upload.title = "导入属性"; upload.open = true; }; function importTemplate() { // 下载模板实现(需根据实际API调整) console.log('下载模板'); }; function handleFileUploadProgress() { upload.isUploading = true; }; function handleFileSuccess(response) { upload.open = false; upload.isUploading = false; if (uploadRef.value) { uploadRef.value.clearFiles(); } ElMessageBox.alert( ${response.msg}, "导入结果", {dangerouslyUseHTMLString: true} ); getList(); }; function submitFileForm() { if (uploadRef.value) { uploadRef.value.submit(); } }; // 编辑合法值 function handleValidUpdate(row) { resetValidAddForm() const id = row.id || validIds.value getValidlist(id).then(response => { validform.value = response.data; validAddOpen.value = true; title.value = "修改合法值列表"; }); } getTreeselect() getList() </script> 只有首次能够进入 ,再次进入会是空白 ,而且其他菜单也显示不出来了

<el-form-item v-if="question.question_type === 1" :label="question.question_text" :prop="${question.question_code}" :rules="[ { required: true, message: '请选择', trigger: 'change'} ]"> <el-radio-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-radio v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-radio> </el-radio-group> </el-form-item> <el-form-item v-else-if="question.question_type === 2" :label="question.question_text" :prop="${question.question_code}" :rules="[ { type: 'array', required: true, message: '请至少选择一项', trigger: 'change'} ]"> <el-checkbox-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-checkbox v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-checkbox> </el-checkbox-group> </el-form-item> <el-form ref="formRefs" :model="info" :rules="rules" label-width="80px" @submit.prevent=""> <el-row :gutter="16"> <el-col :span="6"> <el-form-item label="姓名" prop="name"> <el-input clearable v-model="info.name" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="性别" prop="gender"> <el-input clearable v-model="info.gender" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="年龄" prop="age"> <el-input clearable v-model="info.age" :disabled='isUpdate' /> </el-form-item> </el-col> </el-row> <el-row :gutter="16"> <el-col :span="10"> <el-form-item label="身份证号" prop="id_no"> <el-input clearable maxlength="18" v-model="info.id_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系方式" prop="phone_no"> <el-input clearable maxlength="11" v-model="info.phone_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="调查方式" prop="visit_type"> <el-radio-group v-model="info.visit_type" :disabled='isUpdate'> <el-radio value="自助" label="自助" /> <el-radio value="电话" label="电话" /> <el-radio value="微信" label="微信" /> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form>vue3如何实现formRef与formRefs校验全部通过才可提交function submit() {}

<template> <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" > <el-form-item label="产品名称" prop="name"> <el-input v-model="ruleForm.name" /> </el-form-item> <el-form-item label="产品描述" prop="description"> <el-input v-model="ruleForm.description" type="textarea" /> </el-form-item> <el-form-item label="产品描述" prop="description"> <el-input v-model="ruleForm.description" /> </el-form-item> <el-form-item label="Activity zone" prop="region"> <el-select v-model="ruleForm.region" placeholder="Activity zone"> <el-option label="Zone one" value="shanghai" /> <el-option label="Zone two" value="beijing" /> </el-select> </el-form-item> <el-form-item label="Activity count" prop="count"> <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" /> </el-form-item> <el-form-item label="Activity time" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker v-model="ruleForm.date1" type="date" aria-label="Pick a date" placeholder="Pick a date" style="width: 100%" /> </el-form-item> </el-col> <el-col class="text-center" :span="2"> - </el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker v-model="ruleForm.date2" aria-label="Pick a time" placeholder="Pick a time" style="width: 100%" /> </el-form-item> </el-col> </el-form-item> <el-form-item label="Instant delivery" prop="delivery"> <el-switch v-model="ruleForm.delivery" /> </el-form-item> <el-form-item label="Activity location" prop="location"> <el-segmented v-model="ruleForm.location" :options="locationOptions" /> </el-form-item> <el-form-item label="Activity type" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox> <el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox> <el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox> <el-checkbox value="Simple brand exposure" name="type"> Simple brand exposure </el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="Resources" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio value="Sponsorship">Sponsorship</el-radio> <el-radio value="Venue">Venue</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button> <el-button @click="resetForm(ruleFormRef)">Reset</el-button> </el-form-item> </el-form> </template> <script lang="ts" setup> // import productApi from '@/api/place' import { ref, reactive } from 'vue'; import type { FormInstance, FormRules } from 'element-plus' interface RuleForm { name: string description: string region: string count: string date1: string date2: string delivery: boolean location: string type: string[] resource: string } const ruleFormRef = ref<FormInstance>() const ruleForm = reactive<RuleForm>({ name: '', description:'', region: '', count: '', date1: '', date2: '', delivery: false, location: '', type: [], resource: '', }) const locationOptions = ['Home', 'Company', 'School'] const rules = reactive<FormRules<RuleForm>>({ name: [ { required: true, message: '请输入商品名称', trigger: 'blur' }, { max: 10, message: '长度超过10位', trigger: 'blur' }, ], description: [ { required: true, message: '请输入商品描述', trigger: 'blur' }, { max: 200, message: '长度超过200位', trigger: 'blur' }, ], region: [ { required: true, message: 'Please select Activity zone', trigger: 'change', }, ], count: [ { required: true, message: 'Please select Activity count', trigger: 'change', }, ], date1: [ { type: 'date', required: true, message: 'Please pick a date', trigger: 'change', }, ], date2: [ { type: 'date', required: true, message: 'Please pick a time', trigger: 'change', }, ], location: [ { required: true, message: 'Please select a location', trigger: 'change', }, ], type: [ { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change', }, ], resource: [ { required: true, message: 'Please select activity resource', trigger: 'change', }, ], }) const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { console.log('submit!') } else { console.log('error submit!', fields) } }) } const resetForm = (formEl: FormInstance | undefined) => { if (!formEl) return formEl.resetFields() } const options = Array.from({ length: 10000 }).map((_, idx) => ({ value: ${idx + 1}, label: ${idx + 1}, })) // //产品分类 // function getCategory(){ // productApi.getCategory().then(res => { // categorys.value = res.data; // }) // }  </script> 怎么转换成<script setup>

<template> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> <el-tree :data="typeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick" /> </el-col> <el-col :span="20" :xs="24"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable> <el-option v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['mdm:typeAttr:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型" align="center" prop="typemgrName" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数值最大值" align="center" prop="maxVal" width="120"/> <el-table-column label="数值最小值" align="center" prop="minVal" width="120"/> <el-table-column label="默认值" align="center" prop="defaultVal"/> <el-table-column label="合法值列表" align="center" prop="validList" width="120"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list " :value=“scope.row.isNull”/> <el-button size=“mini” type=“text” icon=“el-icon-edit” @click=“handleUpdate(scope.row)” v-hasPermi=“[‘mdm:typeAttr:edit’]” >修改 <el-button size=“mini” type=“text” icon=“el-icon-delete” @click=“handleDelete(scope.row)” v-hasPermi=“[‘mdm:typeAttr:remove’]” >删除 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number" > <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <treeselect v-model="form.typemgrId" :options="typeOptions" :show-count="true" placeholder="请选择物料类型" style="width: 240px" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数值最大值" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数值最大值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值最小值" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数值最小值" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认值" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key=“dict.value” :label=“dict.label” :value=“dict.value” > <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key=“dict.value” :label=“dict.label” :value=“dict.value” > <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数值是否有公差" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="合法值列表" prop="validList"> <el-table :data="validDataList" v-loading="validLoading" ref="validTable" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典标签" align="center" prop="dictLabel"> <template slot-scope="scope"> {{scope.row.dictLabel}} <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> </template> </el-table-column> <el-table-column label="字典键值" align="center" prop="dictValue" /> </el-table> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </el-dialog> </el-col> </el-row> </template> <script> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import { treeselect } from "@/api/mdm/mdmMaterialType"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"; export default { name: "TypeAttr", dicts: ['mdm_common_flag_list', 'mdm_common_status_list','mdm_common_column_type'], components: { Treeselect }, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 属性规则表格数据 typeAttrList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, }, // 表单参数 form: {}, // 表单校验 rules: { number: [ {required: true, message: "编号不能为空", trigger: "blur"} ], name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], typemgrId: [ {required: true, message: "类型ID不能为空", trigger: "blur"} ], dataType: [ {required: true, message: "字段类型不能为空", trigger: "change"} ], }, defaultProps: { children: "children", label: "label" }, typeOptions : undefined, materiaTypelName : undefined, //合法值列表字典值 validDataList: undefined , validDataListTotal : undefined , validLoading : true, // treeselectOptions: [], selectedValues: [] ,// 存储当前选中的 dictValue 数组 isInitSelection: false, }; }, watch: { // 根据名称筛选部门树 materiaTypelName(val) { this.$ refs.tree.filter(val); } }, created() { this.getList(); this.getTreeselect() }, methods: { /** 查询属性规则列表 */ getList() { this.loading = true; listTypeAttr(this.queryParams).then(response => { this.typeAttrList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.getTreeselect(); this.open = true; this.title = "添加属性规则"; this.getValidList() }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getTypeAttr(id).then(response => { this.form = response.data; // this.form = {}; // this.$ set(this, 'form', response.data); // 强制设置响应式 console.log("点击修改按钮后:") console.log(this.form.validList) this.open = true; this.title = "修改属性规则"; this.getValidList(); // this.$ nextTick().then(() => { // this.initDefaultSelection() // }) }); }, /** 提交按钮 */ submitForm() { this.$ refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateTypeAttr(this.form).then(response => { this.$ modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addTypeAttr(this.form).then(response => { this.$ modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$ modal.confirm('是否确认删除属性规则编号为"' + ids + '"的数据项?').then(function () { return delTypeAttr(ids); }).then(() => { this.getList(); this.$ modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('mdm/typeAttr/export', { ...this.queryParams }, typeAttr_${new Date().getTime()}.xlsx) }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { this.queryParams.typemgrId = data.id; this.handleQuery(); }, /** 查询物料类型树结构 */ getTreeselect() { treeselect().then(response => { const originalData = response.data; this.typeOptions = response.data; // this.treeselectOptions = originalData.map(item => ({ // value: item.id, // 将 id 映射为 value // label: item.name // 将 name 映射为 label // })); // console.log(mappedData); }); }, /** 查询字典数据列表 */ getValidList() { console.log("进入字典初始化") this.validLoading = true; const query = { pageNum: 1, pageSize: 1000, dictType: "mdm_validlist_dict", } listData(query).then(response => { this.validDataList = response.rows; this.validDataListTotal = response.total; // 数据加载完成后使用 nextTick 确保 DOM 已渲染表格 this.$ nextTick(() => { this.initDefaultSelection(); // 安全地初始化选中 }); this.validLoading = false; }); }, initDefaultSelection(){ this.isInitSelection = true; if(this.form.validList == null){ return } const table = this.$ refs.validTable; const selectedArray = this.form.validList.split(','); console.log("初始化字典数据:"); console.log(selectedArray); // 根据唯一标识(如 dictCode)查找要选中的行 // 遍历数据,匹配需要默认选中的行 this.selectedValues = []; this.validDataList.forEach(row => { if (selectedArray.includes(row.dictValue)) { table.toggleRowSelection(row, true); // 默认选中该行 this.selectedValues.push(row.dictValue); } }); // 初始化完成后恢复标志位 this.$ nextTick(() => { this.isInitSelection = false; }); }, handleValidSelectionChange(selection) { console.log("进入选中方法"); if (this.isInitSelection) { // 如果是初始化选中阶段,不执行业务逻辑 return; } console.log("进入选中方法"); // 更新选中项的 dictValue 到 selectedValues 并同步到 form.validList this.selectedValues = selection.map(item => item.dictValue); this.form.validList = this.selectedValues.join(','); console.log("选中后:"); console.log(this.form.validList); }, } }; </script> 第一次点击正常勾选 ,关闭弹窗后,再次点击 就不正常

<el-form :rules="formRules" :model="pageModel.form" label-width="120px" size="small" class="el-form-container "> <el-form-item label="姓名" prop="policeName" class="content"> <el-input v-model.trim="pageModel.form.policeName" :disabled="pageModel.pageInfo.formConfig.type == '2' " @compositionstart="isComposing = true" @compositionend="handleCompositionEnd" /> </el-form-item> <el-form-item label="性别" prop="sex" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-select v-model="pageModel.form.sex" placeholder="请选择" style="width: 100%" :disabled="pageModel.pageInfo.formConfig.type == '2' "> <el-option v-for="(item, index) in pageModel.pageInfo .sexType" :key="index" :label="item.dictLabel" :value="item.dictValue"> </el-option> </el-select> </el-form-item> <el-form-item label="身份证号" prop="idCard" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.idCard" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="所属单位" prop="deptId" class="content"> <el-cascader :options="pageModel.listDept" v-model="pageModel.form.deptId" :props="{ children: 'children', label: 'deptName', value: 'deptId', checkStrictly: true, }" style="width: 100%" @change="changeHandel" :disabled="pageModel.pageInfo.formConfig.type == '2' " clearable /> </el-form-item> <el-form-item label="警号" prop="policeCode" class="content"> <el-input v-model="pageModel.form.policeCode" :disabled="pageModel.pageInfo.formConfig.type == '2' " onkeyup="this.value=this.value.replace(/[^\w_]/g,'')" /> </el-form-item> <el-form-item label="警种" prop="policeType" class="content"> <el-input v-model="pageModel.form.policeType" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="接入方式" prop="pattern" class="content"> <el-select v-model="pageModel.form.pattern" placeholder="请选择" style="width: 100%" :disabled="pageModel.pageInfo.formConfig.type == '2' "> <el-option v-for="(item, index) in pageModel.pageInfo .type" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="单位信息" prop="shortName" class="content"> <el-input v-model="pageModel.form.shortName" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="职务" prop="post" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.post" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="手机号" prop="phone" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.phone" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="邮箱" prop="email" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.email" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="头像" prop="userPic" class="content flex-container" v-if="pageModel.pageInfo.environmentShow === true"> <el-upload class="upload-demo" action="" v-else v-model="pageModel.form.userPic" :http-request="uploadActionHandle" :before-upload="beforeAvatarUpload" :before-remove="beforeDeleteImage" :on-remove="deleteImageHandel" :file-list="pageModel.pageInfo.imageList" list-type="picture"> <el-button size="small" type="primary">点击上传 </el-button> </el-upload> </el-form-item> <el-form-item label="备注" prop="remark" class="content flex-container" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.remark" :disabled="pageModel.pageInfo.formConfig.type == '2' " type="textarea" :rows="3" /> </el-form-item>/** createBy: muyufei time: 2023-10-16 10:20:03 des: 提交form校验规则 */ export const formRules = { policeName: [ {required: true, message: '姓名不能为空', trigger: 'blur'} ], policeCode: [ {required: true, message: '警号不能为空', trigger: 'blur'} ], deptId: [ {required: true, message: '所属单位不能为空', trigger: 'change'} ] }

<template> <el-dialog :title="!dataForm.id ? '新增电池信息' : '修改电池信息'" :close-on-click-modal="false" :visible.sync="visible" width="80%" top="5vh" class="custom-dialog" @close="resetForm" > <el-tabs v-model="activeTab" type="border-card"> <el-tab-pane label="基础信息" name="basic"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="电池ID" prop="batteryId"> <el-input v-model="dataForm.batteryId" placeholder="请输入电池ID"></el-input> </el-form-item> <el-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind" placeholder="请选择电池类型" clearable style="width:100%" > <el-option label="运营" :value="0"></el-option> <el-option label="售后" :value="1"></el-option> <el-option label="内测" :value="2"></el-option> <el-option label="报废" :value="3"></el-option> </el-select> </el-form-item> <el-form-item label="电池电压(V)" prop="batteryVoltage"> <el-input-number v-model="dataForm.batteryVoltage" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="电池电流(A)" prop="batteryCurrent"> <el-input-number v-model="dataForm.batteryCurrent" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="电池SOC(%)" prop="batterySoc"> <el-input-number v-model="dataForm.batterySoc" :min="0" :max="100" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="工作模式" prop="batteryWorkMode"> <el-select v-model="dataForm.batteryWorkMode" placeholder="请选择工作模式" clearable style="width:100%" > <el-option label="放电模式(0x01)" :value="1"></el-option> <el-option label="充电模式(0x10)" :value="16"></el-option> <el-option label="保护模式(0x21)" :value="33"></el-option> <el-option label="待机无输出模式(0x30)" :value="48"></el-option> <el-option label="待机预放电模式(0x31)" :value="49"></el-option> <el-option label="故障需返厂(0xFF)" :value="255"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="最高温度(℃)" prop="batteryTemperatureMax"> <el-input-number v-model="dataForm.batteryTemperatureMax" :min="-50" :max="100" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最低温度(℃)" prop="batteryTemperatureMin"> <el-input-number v-model="dataForm.batteryTemperatureMin" :min="-50" :max="100" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最高电压(V)" prop="batteryVoltageMax"> <el-input-number v-model="dataForm.batteryVoltageMax" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="最低电压(V)" prop="batteryVoltageMin"> <el-input-number v-model="dataForm.batteryVoltageMin" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="循环次数" prop="batteryCycleTimes"> <el-input-number v-model="dataForm.batteryCycleTimes" :min="0" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="状态信息" name="status"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="保护状态码" prop="batteryProtectCode"> <el-input v-model="dataForm.batteryProtectCode" placeholder="16位二进制保护状态码"> <el-tooltip slot="append" content="保护状态 bit16~bit 31 保留 bit15:Gsensor 故障 bit14:BMS 与 Tracker通讯超时 bit13: 预放电失败 bit12: IC保护 bit11: 智能充电通信超时 bit10:压差过大 bit9:温差过大 bit8:短路 bit7:充电过压 bit6:充电过流 bit5:放电欠压 bit4:放电过流 bit3:充电低温 bit2:充电高温 bit1:放电高温 bit0:放电低温" placement="top" :open-delay="500"> <el-button icon="el-icon-question"></el-button> </el-tooltip> </el-input> </el-form-item> <el-form-item label="故障状态码" prop="batteryErrorCode"> <el-input v-model="dataForm.batteryErrorCode" placeholder="16位二进制故障状态码"> <el-tooltip slot="append" content="转成2进制, 总共为16位,高8位为电池包工作状态,低8位为故障状态码 bit9BMS 与 Tracker通讯故障,bit8BMS 板 G sensor损坏,(8/9无效)bit7:失效,bit6:失衡,bit5:放电 MOS 损坏,bit4:充电 MOS 损坏,bit3IC 损坏,bit2:温度传感器损坏,bit1:采样线断线,虚焊等故障 保留,置 0,bit0:保留" placement="top" :open-delay="500"> <el-button icon="el-icon-question"></el-button> </el-tooltip> </el-input> </el-form-item> <el-form-item label="MOS状态" prop="mosStatus"> <el-input v-model="dataForm.mosStatus" placeholder="MOS状态"></el-input> </el-form-item> <el-form-item label="MOS温度(℃)" prop="mosTemp"> <el-input-number v-model="dataForm.mosTemp" :min="-50" :max="150" :precision="1" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="稳定状态" prop="steadyStatus"> <el-input v-model="dataForm.steadyStatus" placeholder="稳定状态"></el-input> </el-form-item> <el-form-item label="单体电压(V)" prop="cellVoltage"> <el-input-number v-model="dataForm.cellVoltage" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="业务模式" prop="businessmode"> <el-select v-model="dataForm.businessmode" placeholder="请选择业务模式" clearable style="width:100%" > <el-option label="关机模式(1)" :value="1"></el-option> <el-option label="运营模式(2)" :value="2"></el-option> <el-option label="运输模式(3)" :value="3"></el-option> <el-option label="通讯充电模式(4)" :value="4"></el-option> <el-option label="盲充模式(5)" :value="5"></el-option> <el-option label="存储模式(6)" :value="6"></el-option> <el-option label="搜寻模式(7)" :value="7"></el-option> <el-option label="返厂模式(8)" :value="8"></el-option> </el-select> </el-form-item> <el-form-item label="数据标志" prop="flag"> <el-select v-model="dataForm.flag" placeholder="请选择数据标志" clearable style="width:100%" > <el-option label="设备主动上报(1)" :value="1"></el-option> <el-option label="平台主动推送(2)" :value="2"></el-option> <el-option label="平台指令反馈(3)" :value="3"></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="设备信息" name="device"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="设备型号" prop="model"> <el-input v-model="dataForm.model" placeholder="设备型号"></el-input> </el-form-item> <el-form-item label="制造商" prop="manufacture"> <el-input v-model="dataForm.manufacture" placeholder="制造商"></el-input> </el-form-item> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei" placeholder="IMEI"></el-input> </el-form-item> <el-form-item label="IMSI" prop="imsi"> <el-input v-model="dataForm.imsi" placeholder="IMSI"></el-input> </el-form-item> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid" placeholder="ICCID"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="硬件版本" prop="trackerHardwareVersion"> <el-input v-model="dataForm.trackerHardwareVersion" placeholder="硬件版本"></el-input> </el-form-item> <el-form-item label="软件版本" prop="trackerSoftwareVersion"> <el-input v-model="dataForm.trackerSoftwareVersion" placeholder="软件版本"></el-input> </el-form-item> <el-form-item label="上报原因" prop="reportreason"> <el-input v-model="dataForm.reportreason" placeholder="上报原因"></el-input> </el-form-item> <el-form-item label="检测状态" prop="detstatus"> <el-input v-model="dataForm.detstatus" placeholder="检测状态"></el-input> </el-form-item> <el-form-item label="信号强度" prop="csq"> <el-input-number v-model="dataForm.csq" :min="0" :max="31" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> <el-tab-pane label="位置信息" name="location"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="180px" size="small" > <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="网络类型" prop="networkType"> <el-input v-model="dataForm.networkType" placeholder="网络类型"></el-input> </el-form-item> <el-form-item label="定位模式" prop="locationMode"> <el-input v-model="dataForm.locationMode" placeholder="定位模式"></el-input> </el-form-item> <el-form-item label="经度" prop="longitude"> <el-input-number v-model="dataForm.longitude" :min="-180" :max="180" :precision="6" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="经度方向" prop="longitudeDirection"> <el-select v-model="dataForm.longitudeDirection" placeholder="请选择方向" clearable style="width:100%" > <el-option label="东经(E)" value="E"></el-option> <el-option label="西经(W)" value="W"></el-option> </el-select> </el-form-item> <el-form-item label="纬度" prop="latitude"> <el-input-number v-model="dataForm.latitude" :min="-90" :max="90" :precision="6" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="纬度方向" prop="latitudeDirection"> <el-select v-model="dataForm.latitudeDirection" placeholder="请选择方向" clearable style="width:100%" > <el-option label="北纬(N)" value="N"></el-option> <el-option label="南纬(S)" value="S"></el-option> </el-select> </el-form-item> <el-form-item label="GPS速度(km/h)" prop="gpsSpeed"> <el-input-number v-model="dataForm.gpsSpeed" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="GPS信号" prop="gpsSignal"> <el-input-number v-model="dataForm.gpsSignal" :min="0" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="卫星数量" prop="satelliteNum"> <el-input-number v-model="dataForm.satelliteNum" :min="0" :max="32" :precision="0" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> <el-form-item label="定位精度(m)" prop="accuracy"> <el-input-number v-model="dataForm.accuracy" :min="0" :precision="2" controls-position="right" style="width:100%" ></el-input-number> </el-form-item> </el-col> </el-row> </el-form> </el-tab-pane> </el-tabs> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </el-dialog> </template> <script> export default { data () { // 验证16位二进制码的自定义规则 const validateBinary16 = (rule, value, callback) => { if (!value) { callback(new Error('不能为空')); } else if (!/^[01]{16}$/.test(value)) { callback(new Error('必须是16位二进制数(由0和1组成)')); } else { callback(); } }; return { visible: false, activeTab: 'basic', // 当前激活的标签页 dataForm: { id: 0, batteryKind: null, // 新增的电池类型字段 batteryId: '', batteryVoltage: '', batteryCurrent: '', batterySoc: '', batteryHardVersion: '', batterySoftVersion: '', batteryWorkMode: '', batteryProtectCode: '', batteryErrorCode: '', batteryTemperatureMax: '', batteryTemperatureMin: '', batteryVoltageMax: '', batteryVoltageMin: '', mosStatus: '', mosTemp: '', batteryCycleTimes: '', steadyStatus: '', cellVoltage: '', model: '', manufacture: '', imei: '', imsi: '', iccid: '', trackerHardwareVersion: '', trackerSoftwareVersion: '', reportreason: '', detstatus: '', csq: '', networkType: '', locationMode: '', longitude: '', longitudeDirection: '', latitude: '', latitudeDirection: '', gpsSpeed: '', gpsSignal: '', satelliteNum: '', accuracy: '', businessmode: '', flag: '', uploadTime: '', createTime: '', updateTime: '' }, dataRule: { batteryId: [ { required: true, message: '请输入电池ID', trigger: 'blur' } ], batteryKind: [ { required: true, message: '请选择电池类型', trigger: 'change' } ], batteryVoltage: [ { required: true, message: '请输入电池电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值' } ], batteryCurrent: [ { required: true, message: '请输入电池电流', trigger: 'blur' }, { type: 'number', message: '必须为数字值' } ], batterySoc: [ { required: true, message: '请输入电池SOC', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 100 } ], batteryWorkMode: [ { required: true, message: '请选择工作模式', trigger: 'change' } ], batteryProtectCode: [ { required: true, validator: validateBinary16, trigger: 'blur' } ], batteryErrorCode: [ { required: true, validator: validateBinary16, trigger: 'blur' } ], batteryTemperatureMax: [ { required: true, message: '请输入最高温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 100 } ], batteryTemperatureMin: [ { required: true, message: '请输入最低温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 100 } ], batteryVoltageMax: [ { required: true, message: '请输入最高电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], batteryVoltageMin: [ { required: true, message: '请输入最低电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], mosStatus: [ { required: true, message: '请输入MOS状态', trigger: 'blur' } ], mosTemp: [ { required: true, message: '请输入MOS温度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -50, max: 150 } ], batteryCycleTimes: [ { required: true, message: '请输入循环次数', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], steadyStatus: [ { required: true, message: '请输入稳定状态', trigger: 'blur' } ], cellVoltage: [ { required: true, message: '请输入单体电压', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], model: [ { required: true, message: '请输入设备型号', trigger: 'blur' } ], manufacture: [ { required: true, message: '请输入制造商', trigger: 'blur' } ], imei: [ { required: true, message: '请输入IMEI', trigger: 'blur' } ], imsi: [ { required: true, message: '请输入IMSI', trigger: 'blur' } ], iccid: [ { required: true, message: '请输入ICCID', trigger: 'blur' } ], trackerHardwareVersion: [ { required: true, message: '请输入硬件版本', trigger: 'blur' } ], trackerSoftwareVersion: [ { required: true, message: '请输入软件版本', trigger: 'blur' } ], reportreason: [ { required: true, message: '请输入上报原因', trigger: 'blur' } ], detstatus: [ { required: true, message: '请输入检测状态', trigger: 'blur' } ], csq: [ { required: true, message: '请输入信号强度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 31 } ], networkType: [ { required: true, message: '请输入网络类型', trigger: 'blur' } ], locationMode: [ { required: true, message: '请输入定位模式', trigger: 'blur' } ], longitude: [ { required: true, message: '请输入经度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -180, max: 180 } ], longitudeDirection: [ { required: true, message: '请选择经度方向', trigger: 'change' } ], latitude: [ { required: true, message: '请输入纬度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: -90, max: 90 } ], latitudeDirection: [ { required: true, message: '请选择纬度方向', trigger: 'change' } ], gpsSpeed: [ { required: true, message: '请输入GPS速度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], gpsSignal: [ { required: true, message: '请输入GPS信号', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], satelliteNum: [ { required: true, message: '请输入卫星数量', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0, max: 32 } ], accuracy: [ { required: true, message: '请输入定位精度', trigger: 'blur' }, { type: 'number', message: '必须为数字值', min: 0 } ], businessmode: [ { required: true, message: '请选择业务模式', trigger: 'change' } ], flag: [ { required: true, message: '请选择数据标志', trigger: 'change' } ], uploadTime: [ { required: true, message: '请选择上传时间', trigger: 'change' } ], createTime: [ { required: true, message: '请选择创建时间', trigger: 'change' } ], updateTime: [ { required: true, message: '请选择更新时间', trigger: 'change' } ] } } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(/maya/mybatteryinfolastest/info/${this.dataForm.id}), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.dataForm = { ...this.dataForm, ...data.myBatteryInfoLastest } } }) } }) }, // 重置表单 resetForm() { if (this.$refs['dataForm']) { this.$refs['dataForm'].resetFields(); this.activeTab = 'basic'; } }, // 表单提交 dataFormSubmit () { this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(/maya/mybatteryinfolastest/${!this.dataForm.id ? 'save' : 'update'}), method: 'post', data: this.$http.adornData({ ...this.dataForm }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style scoped> .custom-dialog >>> .el-dialog__body { padding: 20px 30px; max-height: 70vh; overflow-y: auto; } .custom-dialog >>> .el-tabs--border-card { box-shadow: none; border: none; } .custom-dialog >>> .el-tabs__content { padding: 15px; } .custom-dialog >>> .el-tabs__item { font-weight: bold; } .custom-dialog >>> .el-tabs__item.is-active { color: #409EFF; background-color: #f5f7fa; } .custom-dialog >>> .el-tabs--border-card > .el-tabs__header { background-color: #f5f7fa; border-bottom: 1px solid #e4e7ed; } .custom-dialog >>> .el-form-item { margin-bottom: 20px; } .custom-dialog >>> .el-input-number { width: 100%; } .custom-dialog >>> .el-select { width: 100%; } </style> 根据这些Map<String, Object> mapinfo = new HashMap<String, Object>(); mapinfo.put("battery_id", device_id); //device_id mapinfo.put("upload_time", uploadtime); mapinfo.put("payload", data); mapinfo.put("create_time", DateUtils.getCurrentDateTime()); //mapinfo.put("topic", topic); if("getBatteryInfo".equals(topic_arr[5].trim())){ // 查询电池数据 //mapinfo.put("battery_id", data_arr[0]); //device_id //mapinfo.put("upload_time", uploadtime); //mapinfo.put("payload", data); mapinfo.put("imei", data_arr[1]); mapinfo.put("iccid", data_arr[2]); mapinfo.put("longitude_direction", data_arr[3]); mapinfo.put("longitude", data_arr[4]); mapinfo.put("latitude_direction", data_arr[5]); mapinfo.put("latitude", data_arr[6]); mapinfo.put("gpsSpeed", data_arr[7]); mapinfo.put("battery_soft_version", data_arr[8]); mapinfo.put("tracker_software_version", data_arr[9]); mapinfo.put("gps_signal", data_arr[10]); mapinfo.put("satellite_num", data_arr[11]); mapinfo.put("soc", data_arr[12]); mapinfo.put("battery_cycle_times", data_arr[13]); mapinfo.put("battery_temperature_max", data_arr[14]); mapinfo.put("battery_temperature_min", data_arr[15]); mapinfo.put("mos_temp", data_arr[16]); mapinfo.put("battery_voltage", data_arr[17]); mapinfo.put("battery_voltage_max", data_arr[18]); mapinfo.put("battery_voltage_min", data_arr[19]); mapinfo.put("battery_work_mode", data_arr[20]); mapinfo.put("mos_status", data_arr[21]); mapinfo.put("battery_current", data_arr[22]); mapinfo.put("cell_voltage", data_arr[23]); mapinfo.put("steady_status", data_arr[24]); mapinfo.put("battery_error_code", data_arr[25]); //mapinfo.put("create_time", DateUtils.getCurrentDateTime()); mapinfo.put("flag", 3); // 1:设备主动请求或上报 2:平台主动推送或下指令 3:平台指令反馈的结果 Integer batteryKind=(Integer) SqlUtils.queryInfoOne(Config.getConfigBean().getDatasourcesBean().getDatasourceBean().get(0).getAlias() , "getBatteryKindByImei", mapinfo); mapinfo.put("battery_kind",Objects.isNull(batteryKind)?2:batteryKind);有的字段全部判断为不可编辑,除了电池类型,帮我修改该页面

<template> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px" style="margin-top: -0.275rem;background-color: #fff;border: 0px solid #DCDFE6;"> <el-form-item label="电池编号" prop="hwid"> <el-input :disabled="true" v-model="dataForm.hwid" placeholder="电池编号"></el-input> </el-form-item> <el-form-item label="电芯类型" prop="batteryCellId"> <el-select v-model="dataForm.batteryCellId" placeholder="选择电芯类型"> <el-option v-for="item in batteryCellIds" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind" placeholder="选择电池类型"> <el-option v-for="item in batteryKinds" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> <el-form-item label="电芯封装" prop="batteryCellPackageId"> <el-select v-model="dataForm.batteryCellPackageId" placeholder="选择电芯封装"> <el-option v-for="item in batteryCellPackageIds" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="电池串数" prop="batteryBunchs"> <el-input v-model="dataForm.batteryBunchs" placeholder="电池串数"></el-input> </el-form-item> <el-form-item label="电池并数" prop="batteryUnions"> <el-input v-model="dataForm.batteryUnions" placeholder="电池并数"></el-input> </el-form-item> <el-form-item label="单体电压(V)" prop="singleBatteryVoltage"> <el-input v-model="dataForm.singleBatteryVoltage" placeholder="单体电压"></el-input> </el-form-item> <el-form-item label="额定总压(V)" prop="ratedTotalPressure"> <el-input v-model="dataForm.ratedTotalPressure" placeholder="额定总压"></el-input> </el-form-item> <el-form-item label="额定电流(A)" prop="ratedCurrent"> <el-input v-model="dataForm.ratedCurrent" placeholder="额定电流"></el-input> </el-form-item> <el-form-item label="额定容量(Ah)" prop="ratedCapacity"> <el-input v-model="dataForm.ratedCapacity" placeholder="额定容量"></el-input> </el-form-item> <el-form-item label="额定能量(kWh)" prop="ratedEnergy"> <el-input v-model="dataForm.ratedEnergy" placeholder="额定能量"></el-input> </el-form-item> <el-form-item label="电池箱数" prop="batteryQuantity"> <el-input v-model="dataForm.batteryQuantity" placeholder="电池箱数"></el-input> </el-form-item> <el-form-item label="电池厂商" prop="batteryFirm"> <el-input v-model="dataForm.batteryFirm" placeholder="电池厂商"></el-input> </el-form-item> <el-form-item label="激活日期" prop="activationDate"> <el-date-picker v-model="dataForm.activationDate" type="date" :disabled="true" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item label="BMS编号" prop="bmsNum"> <el-input v-model="dataForm.bmsNum" placeholder="BMS编号"></el-input> </el-form-item> <el-form-item label="电芯编码" prop="batteryCellNum"> <el-input v-model="dataForm.batteryCellNum" placeholder="电芯编码"></el-input> </el-form-item> <el-form-item label="标称容量(Ah)" prop="nominalCapacity"> <el-input v-model="dataForm.nominalCapacity" placeholder="标称容量"></el-input> </el-form-item> <el-form-item label="系统状态" prop="sysStatus"> <el-select v-model="dataForm.sysStatus" placeholder="系统状态"> <el-option v-for="item in sysStatuses" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="警报状态" prop="alarmStatus"> <el-select v-model="dataForm.alarmStatus" placeholder="报警状态"> <el-option v-for="item in alarmStatuses" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="所属项目" prop="projectId"> <el-select v-model="dataForm.projectId" placeholder="所属项目"> <el-option v-for="item in projectIds" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="城市" prop="cityId" style="display: flex;flex-direction: row;"> <el-select v-model="dataForm.proviceId" placeholder="省份" @change="handleChange"> <el-option v-for="item in provices" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> <el-select v-model="dataForm.cityId" placeholder="城市" @change="handleChange2"> <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> <el-select v-model="dataForm.districtId" placeholder="区县"> <el-option v-for="item in districts" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="软件版本" prop="softVersion"> <el-input v-model="dataForm.softVersion" placeholder="软件版本"></el-input> </el-form-item> <el-form-item label="硬件版本" prop="hardwareVersion"> <el-input v-model="dataForm.hardwareVersion" placeholder="硬件版本"></el-input> </el-form-item> <el-form-item label="动力类型" prop="powerTypeId"> <el-select v-model="dataForm.powerTypeId" placeholder="选择动力类型"> <el-option v-for="item in powerTypeIds" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="二维码" prop="qrCode"> <el-input v-model="dataForm.qrCode" placeholder="二维码"></el-input> </el-form-item> <el-form-item label="SCID" prop="scid"> <el-input v-model="dataForm.scid" placeholder="SCID"></el-input> </el-form-item> <el-form-item label="PLMN" prop="plmn"> <el-input v-model="dataForm.plmn" placeholder="PLMN"></el-input> </el-form-item> <el-form-item label="LAC" prop="lac"> <el-input v-model="dataForm.lac" placeholder="LAC"></el-input> </el-form-item> <el-form-item label="CID" prop="cid"> <el-input v-model="dataForm.cid" placeholder="CID"></el-input> </el-form-item> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei" placeholder="IMEI"></el-input> </el-form-item> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid" placeholder="ICCID"></el-input> </el-form-item> <el-form-item label="CCID" prop="ccid"> <el-input v-model="dataForm.ccid" placeholder="CCID"></el-input> </el-form-item> </el-form> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </el-dialog> </template> <script> export default { data () { return { visible: false, dataForm: { id: 0, hwid: '', batteryCellId: [], batteryKind: [], batteryCellPackageId: [], batteryBunchs: '', batteryUnions: '', singleBatteryVoltage: '', ratedTotalPressure: '', ratedCurrent: '', ratedCapacity: '', ratedEnergy: '', batteryQuantity: '', batteryFirm: '', activationDate: '', bmsNum: '', batteryCellNum: '', batteryChassisNum: '', nominalCapacity: '', sysStatus: '', alarmStatus: '', projectId: '', cityId: '', softVersion: '', hardwareVersion: '', powerTypeId: '', qrCode: '', scid: '', plmn: '', lac: '', cid: '', imei: '', iccid: '', ccid: '', // sysStatus: [], // cityId: [], districtId:[], proviceId:[], // tempproviceId: '', // softVersion: '', // alarmStatus: [], // projectId: [], // powerTypeId: [] }, dataRule: { hwid: [ { required: true, message: '电池编号不能为空', trigger: 'blur' } ], batteryCellId: [ { required: true, message: '电芯类型id不能为空', trigger: 'blur' } ], batteryKind: [ { required: true, message: '电池类型id不能为空', trigger: 'blur' } ], batteryCellPackageId: [ { required: true, message: '电芯封装id不能为空', trigger: 'blur' } ], batteryBunchs: [ { required: true, message: '电池串数不能为空', trigger: 'blur' } ], batteryUnions: [ { required: true, message: '电池并数不能为空', trigger: 'blur' } ], singleBatteryVoltage: [ { required: true, message: '单体电压不能为空', trigger: 'blur' } ], ratedTotalPressure: [ { required: true, message: '额定总压不能为空', trigger: 'blur' } ], ratedCurrent: [ { required: true, message: '额定电流不能为空', trigger: 'blur' } ], ratedCapacity: [ { required: true, message: '额定容量不能为空', trigger: 'blur' } ], ratedEnergy: [ { required: true, message: '额定能量不能为空', trigger: 'blur' } ], batteryQuantity: [ { required: true, message: '电池箱数不能为空', trigger: 'blur' } ], batteryFirm: [ { required: true, message: '电池厂商不能为空', trigger: 'blur' } ], activationDate: [ { required: true, message: '激活日期不能为空', trigger: 'blur' } ], bmsNum: [ { required: true, message: 'BMS编号不能为空', trigger: 'blur' } ], batteryCellNum: [ { required: true, message: '电芯编码不能为空', trigger: 'blur' } ], // batteryChassisNum: [ // { required: true, message: '底盘编号不能为空', trigger: 'blur' } // ], nominalCapacity: [ { required: true, message: '标称容量不能为空', trigger: 'blur' } ], capacity: [ { required: true, message: '容量不能为空', trigger: 'blur' } ], // createTime: [ // { required: true, message: '不能为空', trigger: 'blur' } // ], // updateTime: [ // { required: true, message: '更新时间不能为空', trigger: 'blur' } // ] sysStatus: [ { required: true, message: '系统状态不能为空', trigger: 'blur' } ], // alarmStatus: [ // { required: true, message: '警报状态不能为空', trigger: 'blur' } // ], // projectId: [ // { required: true, message: '所属项目不能为空', trigger: 'blur' } // ], // cityId: [ // { required: true, message: '城市不能为空', trigger: 'blur' } // ], softVersion: [ { required: true, message: '软件版本不能为空', trigger: 'blur' } ], // hardwareVersion: [ // { required: true, message: '硬件版本不能为空', trigger: 'blur' } // ], powerTypeId: [ { required: true, message: '动力类型不能为空', trigger: 'blur' } ], // qrCode: [ // { required: true, message: '二维码不能为空', trigger: 'blur' } // ], // scid: [ // { required: true, message: 'scid不能为空', trigger: 'blur' } // ], // plmn: [ // { required: true, message: 'plmn不能为空', trigger: 'blur' } // ], // lac: [ // { required: true, message: 'lac不能为空', trigger: 'blur' } // ], // cid: [ // { required: true, message: 'cid不能为空', trigger: 'blur' } // ], // imei: [ // { required: true, message: 'imei不能为空', trigger: 'blur' } // ], // iccid: [ // { required: true, message: 'iccid不能为空', trigger: 'blur' } // ], // ccid: [ // { required: true, message: 'ccid不能为空', trigger: 'blur' } // ] }, batteryCellIds: [], batteryKinds:[{ value: 0, label: '运营' },{ value: 1, label: '售后' },{ value: 2, label: '内测' },{ value: 3, label: '报废' }], batteryCellPackageIds: [], provices: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶', disabled: true }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value:'', cities: [], districts: [], sysStatuses: [], powerTypeIds: [], projectIds:[], customIds:[], alarmStatuses:[] } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/info/${this.dataForm.id}), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.provices = data.data.provices this.cities = data.data.cities this.districts = data.data.districts this.sysStatuses = data.data.sysStatuses this.powerTypeIds = data.data.powers this.alarmStatuses = data.data.alarmStatuses this.projectIds = data.data.projectIds this.batteryCellIds = data.data.batteryCellIds this.batteryCellPackageIds = data.data.batteryCellPackageIds const socitem = data.data.bmsBatteryInfo // this.dataForm.batteryNum = data.bmsBatteryInfo.batteryNum this.dataForm.hwid = socitem.hwid this.dataForm.batteryCellId = socitem.batteryCellId this.dataForm.batteryKind = socitem.batteryKind this.dataForm.batteryCellPackageId = socitem.batteryCellPackageId this.dataForm.batteryBunchs = socitem.batteryBunchs this.dataForm.batteryUnions = socitem.batteryUnions this.dataForm.singleBatteryVoltage = socitem.singleBatteryVoltage this.dataForm.ratedTotalPressure = socitem.ratedTotalPressure this.dataForm.ratedCurrent = socitem.ratedCurrent this.dataForm.ratedCapacity = socitem.ratedCapacity this.dataForm.ratedEnergy = socitem.ratedEnergy this.dataForm.batteryQuantity = socitem.batteryQuantity this.dataForm.batteryFirm = socitem.batteryFirm this.dataForm.activationDate = socitem.activationDate this.dataForm.bmsNum = socitem.bmsNum this.dataForm.batteryCellNum = socitem.batteryCellNum // this.dataForm.batteryChassisNum = socitem.batteryChassisNum this.dataForm.nominalCapacity = socitem.nominalCapacity // this.dataForm.capacity = socitem.capacity this.dataForm.sysStatus = socitem.sysStatus this.dataForm.alarmStatus = socitem.alarmStatus this.dataForm.projectId = socitem.projectId this.dataForm.cityId = socitem.cityId this.dataForm.districtId = socitem.districtId this.dataForm.proviceId = socitem.proviceId this.dataForm.softVersion = socitem.softVersion this.dataForm.hardwareVersion = socitem.hardwareVersion this.dataForm.powerTypeId = socitem.powerTypeId this.dataForm.qrCode = socitem.qrCode this.dataForm.scid = socitem.scid this.dataForm.plmn = socitem.plmn this.dataForm.lac = socitem.lac this.dataForm.cid = socitem.cid this.dataForm.imei = socitem.imei this.dataForm.iccid = socitem.iccid this.dataForm.ccid = socitem.ccid this.dataForm.createTime = socitem.createTime this.dataForm.updateTime = socitem.updateTime } }) }else{ this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/getmenus), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.provices = data.data.provices // this.cities = data.data.cities // this.districts = data.data.districts this.sysStatuses = data.data.sysStatuses this.powerTypeIds = data.data.powers this.alarmStatuses = data.data.alarmStatuses this.projectIds = data.data.projectIds this.batteryCellIds = data.data.batteryCellIds this.batteryCellPackageIds = data.data.batteryCellPackageIds } }) } }) }, mouseblur() { // alert("鼠标失去焦点,检查HWID是否重复"); }, handleChange(value) { // alert("鼠标"+value); this.dataForm.cityId = '' this.dataForm.districtId = '' this.getCities(value, 2) }, handleChange2(value) { // alert("鼠标===="+value); this.dataForm.districtId = '' this.getCities(value, 3) }, getCities(pid, level) { this.$http({ url: this.$http.adornUrl('/battery/bmsdistrictarea/getCitiesByPid'), method: 'get', params: this.$http.adornParams({ 'level': level, 'pid': pid }) }).then(({data}) => { if (data && data.code === 0) { if(level==1){ this.provices = data.data } if(level==2){ this.cities = data.data } if(level==3){ this.districts = data.data } } else { this.provices = [] this.cities = [] this.districts = [] } }) }, // 表单提交 dataFormSubmit () { this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(/battery/bmsbatteryinfo/${!this.dataForm.id ? 'save' : 'update'}), method: 'post', data: this.$http.adornData({ 'id': this.dataForm.id || undefined, 'hwid': this.dataForm.hwid, 'batteryCellId': this.dataForm.batteryCellId, 'batteryKind': this.dataForm.batteryKind, 'batteryCellPackageId': this.dataForm.batteryCellPackageId, 'batteryBunchs': this.dataForm.batteryBunchs, 'batteryUnions': this.dataForm.batteryUnions, 'singleBatteryVoltage': this.dataForm.singleBatteryVoltage, 'ratedTotalPressure': this.dataForm.ratedTotalPressure, 'ratedCurrent': this.dataForm.ratedCurrent, 'ratedCapacity': this.dataForm.ratedCapacity, 'ratedEnergy': this.dataForm.ratedEnergy, 'batteryQuantity': this.dataForm.batteryQuantity, 'batteryFirm': this.dataForm.batteryFirm, // 'activationDate': this.dataForm.activationDate, 'activateDateFormat': this.dataForm.activationDate, 'bmsNum': this.dataForm.bmsNum, 'batteryCellNum': this.dataForm.batteryCellNum, // 'batteryChassisNum': this.dataForm.batteryChassisNum, 'nominalCapacity': this.dataForm.nominalCapacity, // 'capacity': this.dataForm.capacity, 'sysStatus': this.dataForm.sysStatus, 'alarmStatus': this.dataForm.alarmStatus, 'projectId': this.dataForm.projectId, 'cityId': this.dataForm.cityId, 'districtId': this.dataForm.districtId, 'proviceId': this.dataForm.proviceId, 'softVersion': this.dataForm.softVersion, 'hardwareVersion': this.dataForm.hardwareVersion, 'powerTypeId': this.dataForm.powerTypeId, 'qrCode': this.dataForm.qrCode, 'scid': this.dataForm.scid, 'plmn': this.dataForm.plmn, 'lac': this.dataForm.lac, 'cid': this.dataForm.cid, 'imei': this.dataForm.imei, 'iccid': this.dataForm.iccid, 'ccid': this.dataForm.ccid, 'createTime': this.dataForm.createTime, 'updateTime': this.dataForm.updateTime }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> 优化此页面结构和ui,横向分模块展示

<template> <el-form :inline="true" class="form"> <el-form-item label="学号"> <el-input v-model="studentId" placeholder="请输入学号" /> </el-form-item> <el-form-item label="姓名"> <el-input v-model="name" placeholder="请输入姓名" /> </el-form-item> <el-form-item label="年龄"> <el-input v-model.number="age" type="number" placeholder="请输入年龄" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="email" placeholder="请输入邮箱" /> </el-form-item> <el-form-item> <el-button type="primary" @click="addRoommate">添加</el-button> <el-button type="danger" @click="store.clearAll">清空</el-button> </el-form-item> </el-form> <el-table :data="list" style="width: 100%"> <el-table-column prop="studentId" label="学号" width="120" /> <el-table-column prop="name" label="姓名" width="150"> <template #default="scope"> {{ scope.row.name }} </template> </el-table-column> <el-table-column prop="age" label="年龄" width="100"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="操作" width="120"> <template #default="{ row }"> <el-button size="small" type="danger" @click="store.removeRoommate(row.studentId)">删除</el-button> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { useRoommateStore } from '../store/roommates.js' import { storeToRefs } from 'pinia'; const router = useRouter(); const store = useRoommateStore() const {list} = storeToRefs(store); const studentId = ref(0) const name = ref('') const age = ref(18) const email = ref('') function goToUserDetail(userId) { router.push({ name: 'UserDetail', params: { studentId: userId } }); } const addRoommate = () => { store.addRoommate({ studentId: studentId.value, name: name.value, age: age.value, email: email.value }) } </script> <style scoped> /* Add custom styles here if needed */ </style>

最新推荐

recommend-type

langchain4j-community-neo4j-1.0.0-beta4.jar中文文档.zip

1、压缩文件中包含: 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法: 解压最外层zip,再解压其中的zip包,双击 【index.html】 文件,即可用浏览器打开、进行查看。 3、特殊说明: (1)本文档为人性化翻译,精心制作,请放心使用; (2)只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; (3)不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件。 5、本文件关键字: jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
recommend-type

年轻时代音乐吧二站:四万音乐与图片资料库

根据提供的信息,我们可以梳理出以下知识点: ### 知识点一:年轻时代音乐吧二站修正版 从标题“年轻时代音乐吧二站修正版”可以推断,这是一个与音乐相关的网站或平台。因为提到了“二站”,这可能意味着该平台是某个项目或服务的第二代版本,表明在此之前的版本已经存在,并在此次发布中进行了改进或修正。 #### 描述与知识点关联 描述中提到的“近四万音乐数据库”,透露了该音乐平台拥有一个庞大的音乐库,覆盖了大约四万首歌曲。对于音乐爱好者而言,这表明用户可以访问和欣赏到广泛和多样的音乐资源。该数据库的规模对于音乐流媒体平台来说是一个关键的竞争力指标。 同时,还提到了“图片数据库(另附带近500张专辑图片)”,这暗示该平台不仅提供音乐播放,还包括了视觉元素,如专辑封面、艺人照片等。这不仅增强了用户体验,还可能是为了推广音乐或艺人而提供相关视觉资料。 ### 知识点二:下载 影音娱乐 源代码 源码 资料 #### 下载 “下载”是指从互联网或其他网络连接的计算机中获取文件的过程。在这个背景下,可能意味着用户可以通过某种方式从“年轻时代音乐吧二站修正版”平台下载音乐、图片等资源。提供下载服务需要具备相应的服务器存储空间和带宽资源,以及相应的版权许可。 #### 影音娱乐 “影音娱乐”是指以音频和视频为主要形式的娱乐内容。在这里,显然指的是音乐吧平台提供的音乐播放服务,结合上述的图片数据库,该平台可能还支持视频内容或直播功能,为用户提供丰富的视听享受。 #### 源代码 提到“源代码”和“源码”,很可能意味着“年轻时代音乐吧二站修正版”可能是开源的,或者是该平台允许用户下载其应用程序的源代码。在开源的情况下,开发者社区可以查看、修改和分发源代码,促进更多人参与到平台的建设和改进中。 #### 资料 “资料”则指的是与音乐相关的各种信息资料,如歌词、艺人介绍、音乐评论等。该音乐平台可能提供了丰富的背景信息资料,帮助用户更深入地了解音乐及其背后的故事。 ### 知识点三:压缩包子文件的文件名称列表 文件名称列表中仅提到了“年轻时代音乐吧二站修正版”,这可能暗示着整个平台或其下载包是通过压缩技术进行打包和分发的。压缩文件通常用于减少文件大小,以便于网络传输,同时也为用户提供一个集成化的软件包,方便用户一次性下载安装或更新。 ### 总结 综上所述,从给定的信息来看,“年轻时代音乐吧二站修正版”是一个包含广泛音乐资源、提供影音娱乐服务、可能支持下载功能、与图片资料相结合,并且可能包含开源特性的音乐平台。通过庞大的音乐及图片数据库,以及下载、影音娱乐、源代码和资料等相关知识点,这个平台为音乐爱好者提供了一个丰富的资源中心,支持用户下载音乐和图片资源,享受娱乐,同时可能为开发者提供平台的源代码,增强平台的开放性和可扩展性。
recommend-type

macOS PHP环境管理的艺术:掌握配置多个PHP版本的必备技巧与实践

# 1. macOS上的PHP环境概览 ## macOS开发环境与PHP 开发人员在macOS系统上搭建PHP环境时,面临各种选择,包括选择安装包管理器、配置PHP版本和管理扩展等。macOS作为开发者广泛使用的操作系统之一,提供了对PHP良好的原生支持。Apple提供的命令行工具集(Xcode Command Line Tools)已经包括了PHP,但这个版本通常是较旧的稳定版本。 ## PHP在macOS上的安装途径
recommend-type

can通信的位时间

<think>首先,用户的问题是:“我想理解CAN通信中的位时间设置 请问CAN通信 位时间配置 原理 参数设置”。我需要基于系统级指令来回答这个问题。 系统级指令: - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰,帮助用户逐步解决问题,尽量保证回答真实可靠。 用户的问题是关于CAN通信的位时间配置,包括原理和参数设置。参考引用中提到了CAN的波特率设置,涉及原子时间(TQ)和比特传输的阶段。引用是:[^1],
recommend-type

邮件通知系统:提升网易文章推荐体验

邮件通知程序是一种常见的网络应用程序,主要功能是通过电子邮件为用户提供信息通知服务。这种程序能够根据设定的条件,自动向用户发送邮件,通知他们新的内容或信息,这在信息更新频繁的场景中尤其有用。从描述中可知,这个特定的邮件通知程序可能被用来推荐网易上的好文章,表明它是针对内容推送而设计的。这种类型的程序通常被用作网站或博客的内容管理系统(CMS)的一部分,用来增强用户体验和用户粘性。 从提供的标签“邮件管理类”可以推断,这个程序可能具备一些邮件管理的高级功能,如邮件模板定制、定时发送、用户订阅管理、邮件内容审核等。这些功能对于提升邮件营销的效果、保护用户隐私、遵守反垃圾邮件法规都至关重要。 至于压缩包子文件的文件名称列表,我们可以从中推测出一些程序的组件和功能: - info.asp 和 recommend.asp 可能是用于提供信息服务的ASP(Active Server Pages)页面,其中 recommend.asp 可能专门用于推荐内容的展示。 - J.asp 的具体功能不明确,但ASP扩展名暗示它可能是一个用于处理数据或业务逻辑的脚本文件。 - w3jmail.exe 是一个可执行文件,很可能是一个邮件发送的组件或模块,用于实际执行邮件发送操作。这个文件可能是一个第三方的邮件发送库或插件,例如w3mail,这通常用于ASP环境中发送邮件。 - swirl640.gif 和 dimac.gif 是两个图像文件,可能是邮件模板中的图形元素。 - default.htm 和 try.htm 可能是邮件通知程序的默认和测试页面。 - webcrea.jpg 和 email.jpg 是两个图片文件,可能是邮件模板设计时使用的素材或示例。 邮件通知程序的核心知识点包括: 1. 邮件系统架构:邮件通知程序通常需要后端服务器和数据库来支持。服务器用于处理邮件发送逻辑,数据库用于存储用户信息、订阅信息以及邮件模板等内容。 2. SMTP 协议:邮件通知程序需要支持简单邮件传输协议(SMTP)以与邮件服务器通信,发送邮件到用户指定的邮箱。 3. ASP 编程:由于提及了ASP页面,这表明开发邮件通知程序可能用到 ASP 技术。ASP 允许在服务器端执行脚本以生成动态网页内容。 4. 邮件内容设计:设计吸引人的邮件内容对于提高用户互动和兴趣至关重要。邮件模板通常包括文本、图片、链接,以及可能的个性化元素。 5. 用户订阅管理:邮件通知程序需要提供用户订阅和退订的功能,以便用户可以控制他们接收到的信息类型和数量。 6. 邮件发送策略:为了遵守反垃圾邮件法律并提高邮件送达率,邮件通知程序需要实现合理的发送策略,例如定时发送、避免过度发送、邮件列表管理等。 7. 安全性和隐私保护:发送邮件时需要确保邮件内容的安全性和用户隐私,避免敏感信息泄露,并且遵守相关的数据保护法律和规范。 8. 性能优化:邮件通知程序需要有效地处理大量用户的邮件发送请求,保证邮件发送的高效性,并且优化系统性能以应对高峰时段。 9. 用户体验:良好的用户体验设计能够增加用户的互动和满意度,包括清晰的订阅界面、灵活的邮件设置选项、易于理解的通知内容等。 10. 反馈机制:用户对邮件的反馈,如打开率、点击率和退订率,是衡量邮件通知程序效果的重要指标。有效的反馈机制可以帮助改进邮件内容和发送策略。 通过了解这些知识点,我们可以对邮件通知程序的设计、开发和运作有更全面的认识。
recommend-type

【macOS PHP开发环境搭建新手必备】:使用brew一步到位安装nginx、mysql和多版本php的终极指南

# 1. macOS PHP开发环境概述 ## macOS下PHP开发的重要性 在macOS上设置PHP开发环境是开发高效Web应用程序的关键。macOS为开发者提供了一个稳定且用户友好的操作系统环境,结合了Unix的强大功能和苹果的直观界面设计。由于其Linux类似的核心,macOS常被视为Web开发的理想平台,特别是在搭
recommend-type

windows AD 组策略设置的时候是建议一个功能新建一条组策略么?还是在默认组策略上设置

<think>嗯,用户问的是在Windows AD组策略设置时,是建议每个功能新建一条组策略,还是直接在默认域策略上修改。这个问题涉及到AD管理的最佳实践。 从企业管理的角度思考,默认域策略(Default Domain Policy)作为AD安装时自动生成的策略,其实承担着基础安全配置的角色,比如密码策略、账户锁定策略这些关键设置。如果在这上面随意修改,风险确实很高——万一配置出错会影响整个域的用户和计算机。 我记得微软官方文档特别强调过要保护默认域策略。实际操作中,更合理的做法是针对不同的管理目标创建专用的组策略对象(GPO)。比如单独为"驱动器映射"、"IE安全设置"或"屏幕锁定超时
recommend-type

文件分割神器:快速压缩与管理大文件

标题《快刀斩乱麻》描述了一款文件分割软件的功能和特点。从描述中我们可以提炼出以下几个重要的知识点: 1. 文件分割功能:软件的主要用途是将一个大型文件分割成多个较小的部分。在早期计算机时代,由于存储介质(如软盘)的容量有限,常常需要将大文件拆分存储。而今,这种需求可能在移动存储设备空间受限或网络传输带宽有限的情况下仍然存在。 2. 文件管理:分割后的文件会被放置在新建的文件夹中,使得用户能够轻松管理和查看这些文件片段。这是软件为用户考虑的一个贴心功能,提高了文件的可访问性和组织性。 3. 文件合并功能:在需要的时候,用户可以将分割后的文件重新组合成原始大文件。这一功能确保了文件的完整性,方便用户在需要使用完整文件时能够快速还原。 4. 硬盘空间节省:分割并合并文件后,软件提供了一键删除输出文件的功能,以减少不必要的硬盘占用。这对于硬盘空间紧张的用户来说是非常实用的功能。 5. MP3片段提取:软件能够提取MP3文件的片段,并且从指定位置开始播放,这为音乐爱好者提供了方便。此功能可能涉及音频文件的编辑和处理技术。 6. 批处理功能:支持同时处理多个文件的分割任务。此功能可以提高处理多个大型文件时的工作效率,节省用户的时间和劳动。 7. 界面与易用性:描述中提到该软件拥有一个美观的用户界面,并且非常容易使用,即使是初次使用也能快速掌握。这对于非技术用户来说至关重要,因为它降低了使用软件的技术门槛。 8. 应用场景:软件可以在磁盘空间不足时成为用户的得力助手。这表明软件可以解决一些实际问题,满足用户特定的需求。 【压缩包子文件的文件名称列表】中包含的setup.exe文件名暗示这是一个安装程序,用户通过运行该程序可以在计算机上安装“快刀斩乱麻”软件。而readme.txt通常是一个说明文档,包含了软件的安装指南、功能介绍、操作说明或版权信息等,方便用户在安装或使用软件时查阅相关信息。 总结来说,【标题】中所述的“快刀斩乱麻”是一款针对文件分割和管理任务而设计的软件,具备文件分割、管理、合并、空间节省、音频处理和批处理等实用功能,界面设计简洁且用户友好,适用于多种场景下对文件进行高效管理。
recommend-type

【SD550螺丝刀控制器全方位攻略】:破解操作、维护、升级及故障排除的终极指南

# 摘要 本文全面介绍了SD550螺丝刀控制器的使用和维护,从基础操作到进阶功能探索,再到故障排除和性能优化。文章首先概述了SD550控制器的基本操作,包括界面熟悉和操作参数设定。进阶部分探讨了自定义程序、脚本编写以及多任务操作和管理。维护与升级章节提供了日常维护步骤和软硬件升级的具体指导,确保控制器性能稳定。故障排除章节详细讨论了问题的识别、诊断及常见操作问题的解决方法,并强调了预防性维护的重要性。案例研究和经验分享章节通过分析典型应用案例,分享了维护升级的成功经验和行业专家的见解,对未来技术趋势做出预测。总体而言,本文为用户提供了全面的操作指南、维护策略和故障解决方法,有助于提升SD550
recommend-type

集群和分布式的区别

<think>嗯,用户想理解集群和分布式系统的区别。这个问题其实在系统架构设计中很基础但也很重要,从引用内容看用户应该已经接触过一些资料,但可能还缺乏系统性的对比。 用户提供的引用材料挺全面,特别是引用2和引用4把集群描述为"相同功能的多副本",分布式则是"拆分业务"。不过引用3提到mysql的例子时,把分布式存储和分布式文件系统混在一起讨论了,这里可能需要帮用户厘清。 我注意到用户可能存在的几个认知盲点:一是容易把技术实现和设计目的混淆,比如引用4提到负载均衡就只想到集群;二是对"单点故障"的理解可能停留在表面,没意识到分布式系统里某个业务节点故障和集群中某个副本故障的恢复机制完全不同。