<template> <!-- 编辑流量计 --> <div class="edit-flow-meter"> <myModal :params="{ title: '编辑流量计' }" :visible="visible" @submit="submit" @cancel="handleCancel"> <template v-slot:header> <span></span> </template> <template v-slot:body> <div class="edit-flow-meter-box"> <a-form-model ref="baseInfoForm" :model="formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4> <a-row> <a-col :span="12"> <a-form-model-item :label="$t('探测器名称')" prop="detectorName"> <a-input v-model="formData.detectorName" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('探测器编号')" prop="uniqueCode"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('流量计编号')" prop="meterCode"> <a-input v-model="formData.meterCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('接入时间')" prop="rate"> <a-date-picker v-model="formData.rate" show-time format="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择接入时间')" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('归属')" prop="belonging"> <a-input v-model="formData.belonging" disabled /> </a-form-model-item> </a-col> </a-row> <div class="table-title-box"> <h4 style="margin: 0">{{ $t('子流量计列表') }}</h4> <div style="display: flex"> <a-button class="mgr10" type="primary" @click="onAdd">{{ $t('新增') }}</a-button> <a-popconfirm :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" :visible="popconfirmVisible" @visibleChange="popconfirmVisibleChange" @confirm="onDeleteAll" > <a-button>{{ $t('删除') }}</a-button> </a-popconfirm> </div> </div> <div class="table-main-box"> <a-table :dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" > <template slot="meterCode" slot-scope="text, record, index"> <template v-if="text">{{ text }}</template> <template v-else> <a-select v-model="tableData[index].meterCode" :filterOption="filterOption" @change="value => changeMemterCode(value, index)" :placeholder="$t('请选择')" showSearch :allowClear="false" > <a-select-option v-for="item in disabledOptions" :key="item.id" :value="item.meterCode" :title="item.meterCode" :disabled="item.disabled" > {{ item.meterCode }} </a-select-option> </a-select> </template> </template> <template slot="action" slot-scope="text, record"> <a-popconfirm placement="topRight" :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="onDelete(record)" > <i class="ico-delete myIcon" :title="$t('删除')"></i> </a-popconfirm> </template> </a-table> </div> </a-form-model> </div> </template> </myModal> </div> </template> <script> import factory from '../factory'; import myModal from '@/components/scfComponents/modalComponents/modal.vue'; export default { components: { myModal }, data() { return { visible: false, formData: {}, rules: { taskName: [ { required: true, message: '请输入任务名称', trigger: 'blur' }, // { pattern: reg.name, message: this.$t('仅允许输入汉字、字母、数字与_-.@字符') }, ], }, columns: [ { title: this.$t('序号'), key: 'index', dataIndex: 'index', customRender: (text, record, index) => `${index + 1}`, }, { title: this.$t('子电表编号'), dataIndex: 'meterCode', key: 'meterCode', scopedSlots: { customRender: 'meterCode' }, }, { title: this.$t('操作'), key: 'action', width: 150, dataIndex: 'action', scopedSlots: { customRender: 'action' }, }, ], popconfirmVisible: false, meterOptions: [], selectedRowKeys: [], selectedRows: [], tableData: [], }; }, computed: { disabledOptions() { const usedCodes = this.tableData.map(item => item.meterCode).filter(code => code); return this.meterOptions.map(option => ({ ...option, disabled: usedCodes.includes(option.meterCode), })); }, rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys; this.selectedRows = selectedRows; }, }; }, }, methods: { // 获取子电表列表 getChildMeterList(detectorCode) { let params = { detectorCodes: [detectorCode], page: 1, pageSize: 99999, }; factory.getChildMeterList(params).then(res => { if (res.success) { this.meterOptions = res.data.pageData || []; } }); }, showModal(record) { this.getChildMeterList(record.detectorCode); this.visible = true; }, filterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; }, changeMemterCode(value, index) { const selectedOption = this.meterOptions.find(el => el.meterCode === value); if (selectedOption) { this.$set(this.tableData, index, { ...this.tableData[index], detectorCode: selectedOption.detectorCode, meterCode: value, }); } // let checkOption = this.meterOptions.find(el => el.meterCode === value); // this.tableData.forEach(item => { // if (item.meterCode === checkOption.meterCode) { // item.detectorCode = checkOption.detectorCode; // } // }); // let selectedItems = this.tableData.map(item => item.meterCode).filter(el => el !== null && el !== ''); // this.meterOptions.forEach(el => { // if (selectedItems.includes(el.meterCode)) { // el.disabled = true; // } // }); }, // 批量删除提示框 popconfirmVisibleChange(visible) { if (visible && !this.selectedRowKeys.length) { this.popconfirmVisible = false; this.$message.destroy(); this.$message.warning(this.$t('请选择要删除的信息')); } else { this.popconfirmVisible = visible; } }, // 新增 onAdd() { let isNull = this.tableData.filter(e => e.meterCode === null || e.meterCode === ''); if (isNull.length) { this.$message.destroy(); return this.$message.warning(this.$t('请选择子电表编号')); } this.tableData.push({ id: Math.random().toString().split('.')[1], meterCode: null }); }, onDeleteAll() { if (this.selectedRows.length === 0) { this.$message.destroy(); return this.$message.warning(this.$t('请选择子电表')); } this.tableData = this.tableData.filter(item => !this.selectedRowKeys.includes(item.id)); // 清空选中状态 this.selectedRowKeys = []; this.selectedRows = []; // let codes = this.selectedRows.map(item => item.id); // this.tableData = this.tableData.filter(el => !codes.includes(el.id)); // let selectedItems = this.selectedRows.map(item => item.meterCode).filter(el => el !== null && el !== ''); // this.meterOptions.forEach(el => { // if (selectedItems.includes(el.meterCode)) { // el.disabled = false; // } // }); }, // 单个删除 onDelete(record) { this.tableData = this.tableData.filter(item => item.id !== record.id); // this.tableData = this.tableData.filter(item => item.id !== record.id); // if (record.meterCode) { // this.meterOptions.forEach(el => { // if (record.meterCode.indexOf(el.meterCode) !== -1) { // el.disabled = false; // } // }); // } }, submit() { this.visible = false; }, handleCancel() { this.visible = false; }, }, }; </script> <style lang="less" scoped> .edit-flow-meter-box { width: 100%; height: 100%; .table-title-box { width: 100%; display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; } } </style> 代码评审

<think>我们针对这个Vue组件进行代码评审，主要关注以下几个方面： 1. 代码结构和组织 2. 数据管理和状态 3. 表单验证 4. 表格操作和状态同步 5. 代码可读性和维护性 6. 性能优化 7. 国际化 8. 样式和布局 经过评审，发现以下问题： ### 问题列表 1. **表单验证规则缺失**：虽然定义了`rules`，但只针对`taskName`，而表单中并没有`taskName`字段。实际需要验证的字段（如`rate`）没有相应的规则。 2. **表单数据初始化不完整**：`formData`初始化为空对象，可能导致后续访问属性时出现未定义的错误。应该初始化所有字段。 3. **日期选择器绑定问题**：`a-date-picker`的`v-model`绑定到`formData.rate`，但未在`formData`中初始化`rate`字段，且未处理日期格式的转换。 4. **表格操作中的状态管理**： - 在`onAdd`方法中，新增行时使用`Math.random().toString().split('.')[1]`生成ID，这种方式可能不够唯一且可读性差，建议使用更可靠的唯一ID生成方式。 - 在`changeMemterCode`方法中，虽然使用了`$set`来确保响应式更新，但注释掉的代码仍然存在，应该清理。 - 批量删除和单个删除后，已经通过计算属性`disabledOptions`来管理选项的禁用状态，因此不需要再手动更新`meterOptions`的`disabled`属性（注释掉的代码可以删除）。 5. **批量删除确认框的逻辑**：`popconfirmVisibleChange`方法中，当没有选中行时，取消显示确认框并弹出警告。但Ant Design的Popconfirm组件并不需要控制`visible`属性，因为它是通过按钮点击触发的。这里可以简化：直接判断如果没有选中，则弹出警告并阻止确认框显示（但Ant Design的Popconfirm没有提供阻止显示的事件，所以应该在点击删除按钮时判断）。 6. **提交逻辑不完整**：`submit`方法只是关闭了模态框，没有进行表单验证和提交数据。 7. **代码冗余和注释**：有一些注释掉的代码，应该清理。 8. **样式问题**：表格操作按钮的样式可能需要调整，比如删除按钮的图标使用`i`标签，建议使用Ant Design的图标组件。 9. **国际化**：部分地方使用了`$t`，但有些消息可能没有在语言包中定义，需要确保所有显示文本都经过国际化处理。 ### 优化建议 1. **完善表单验证**：为`rate`等需要验证的字段添加规则。 2. **初始化表单数据**：在`data`中初始化`formData`的所有字段，避免未定义错误。 3. **日期处理**：使用`moment`处理日期，并在提交时转换格式。 4. **唯一ID生成**：使用更可靠的方式生成唯一ID，例如`Date.now()`或第三方库。 5. **删除确认框优化**：将批量删除按钮改为在点击时判断是否有选中项，如果没有则弹出提示，并阻止弹出确认框。 6. **提交逻辑**：在`submit`方法中进行表单验证，验证通过后收集表单数据和表格数据，调用API提交。 7. **清理冗余代码**：删除所有注释掉的代码。 8. **使用Ant Design图标**：将删除图标替换为`<a-icon type="delete" />`。 9. **样式调整**：将表格操作按钮的样式进行适当调整，使其更协调。 ### 代码优化 以下是优化后的代码： ```vue <template> <!-- 编辑流量计 --> <div class="edit-flow-meter"> <myModal :params="{ title: $t('编辑流量计') }" :visible="visible" @submit="submit" @cancel="handleCancel" > <template v-slot:header> <span></span> </template> <template v-slot:body> <div class="edit-flow-meter-box"> <a-form-model ref="baseInfoForm" :model="formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4> <a-row> <a-col :span="12"> <a-form-model-item :label="$t('探测器名称')" prop="detectorName"> <a-input v-model="formData.detectorName" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('探测器编号')" prop="uniqueCode"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('流量计编号')" prop="meterCode"> <a-input v-model="formData.meterCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('接入时间')" prop="rate"> <a-date-picker v-model="formData.rate" show-time format="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择接入时间')" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('归属')" prop="belonging"> <a-input v-model="formData.belonging" disabled /> </a-form-model-item> </a-col> </a-row> <div class="table-title-box"> <h4 style="margin: 0">{{ $t('子流量计列表') }}</h4> <div style="display: flex"> <a-button class="mgr10" type="primary" @click="onAdd">{{ $t('新增') }}</a-button> <a-popconfirm :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="onDeleteAll" > <a-button :disabled="selectedRowKeys.length === 0">{{ $t('删除') }}</a-button> </a-popconfirm> </div> </div> <div class="table-main-box"> <a-table :dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" > <template slot="meterCode" slot-scope="text, record, index"> <template v-if="text">{{ text }}</template> <template v-else> <a-select v-model="tableData[index].meterCode" :filterOption="filterOption" @change="value => changeMemterCode(value, index)" :placeholder="$t('请选择')" showSearch :allowClear="false" > <a-select-option v-for="item in disabledOptions" :key="item.id" :value="item.meterCode" :title="item.meterCode" :disabled="item.disabled" > {{ item.meterCode }} </a-select-option> </a-select> </template> </template> <template slot="action" slot-scope="text, record"> <a-popconfirm placement="topRight" :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="() => onDelete(record)" > <a-icon type="delete" :title="$t('删除')" style="cursor: pointer" /> </a-popconfirm> </template> </a-table> </div> </a-form-model> </div> </template> </myModal> </div> </template> <script> import factory from '../factory'; import myModal from '@/components/scfComponents/modalComponents/modal.vue'; import moment from 'moment'; export default { components: { myModal }, data() { return { visible: false, formData: { detectorName: '', uniqueCode: '', meterCode: '', rate: null, belonging: '' }, rules: { rate: [ { required: true, message: this.$t('请选择接入时间'), trigger: 'change' } ] }, columns: [ { title: this.$t('序号'), key: 'index', dataIndex: 'index', width: 80, align: 'center', customRender: (text, record, index) => index + 1, }, { title: this.$t('子电表编号'), dataIndex: 'meterCode', key: 'meterCode', scopedSlots: { customRender: 'meterCode' }, }, { title: this.$t('操作'), key: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' }, }, ], popconfirmVisible: false, meterOptions: [], selectedRowKeys: [], selectedRows: [], tableData: [], currentRecord: null }; }, computed: { disabledOptions() { const usedCodes = this.tableData.map(item => item.meterCode).filter(code => code); return this.meterOptions.map(option => ({ ...option, disabled: usedCodes.includes(option.meterCode), })); }, rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys; this.selectedRows = selectedRows; }, }; }, }, methods: { // 获取子电表列表 getChildMeterList(detectorCode) { let params = { detectorCodes: [detectorCode], page: 1, pageSize: 99999, }; factory.getChildMeterList(params).then(res => { if (res.success) { this.meterOptions = res.data.pageData || []; } }); }, showModal(record) { this.currentRecord = record; this.formData = { ...record, rate: record.rate ? moment(record.rate) : null }; this.getChildMeterList(record.detectorCode); this.visible = true; // 初始化表格数据 this.tableData = record.children ? record.children.map(child => ({ ...child, id: child.id || this.generateUniqueId() })) : []; }, generateUniqueId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); }, filterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase()); }, changeMemterCode(value, index) { const selectedOption = this.meterOptions.find(el => el.meterCode === value); if (selectedOption) { this.$set(this.tableData, index, { ...this.tableData[index], detectorCode: selectedOption.detectorCode, meterCode: value, }); } }, // 新增 onAdd() { // 检查是否有未填写的行 const hasEmpty = this.tableData.some(e => !e.meterCode || e.meterCode.trim() === ''); if (hasEmpty) { this.$message.warning(this.$t('请先完成当前行的选择')); return; } this.tableData.push({ id: this.generateUniqueId(), meterCode: '' }); }, onDeleteAll() { if (this.selectedRows.length === 0) { this.$message.warning(this.$t('请选择子电表')); return; } this.tableData = this.tableData.filter(item => !this.selectedRowKeys.includes(item.id)); this.selectedRowKeys = []; this.selectedRows = []; }, // 单个删除 onDelete(record) { this.tableData = this.tableData.filter(item => item.id !== record.id); }, async submit() { try { // 验证基础表单 await this.$refs.baseInfoForm.validate(); // 准备提交数据 const submitData = { ...this.currentRecord, // 保留原始记录的其他字段 ...this.formData, rate: this.formData.rate ? this.formData.rate.format('YYYY-MM-DD HH:mm:ss') : null, children: this.tableData.map(item => ({ detectorCode: item.detectorCode, meterCode: item.meterCode })) }; // 调用API更新 const res = await factory.updateFlowMeter(submitData); if (res.success) { this.$message.success(this.$t('更新成功')); this.visible = false; this.$emit('refresh'); // 通知父组件刷新 } else { this.$message.error(res.message || this.$t('更新失败')); } } catch (error) { console.error('提交失败', error); if (error.errorFields) { this.$message.warning(this.$t('请正确填写表单')); } } }, handleCancel() { this.visible = false; }, }, }; </script> <style lang="less" scoped> .edit-flow-meter-box { width: 100%; height: 100%; .table-title-box { width: 100%; display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; } .table-main-box { margin-top: 16px; } } </style> ``` ### 优化点说明 1. **表单验证**：添加了`rate`字段的验证规则，并移除了无用的`taskName`规则。 2. **表单数据初始化**：在`data`中初始化了`formData`的所有字段，避免未定义错误。 3. **日期处理**：在`showModal`方法中，将传入的`record.rate`转换为moment对象（如果存在）。在提交时，将moment对象格式化为字符串。 4. **唯一ID生成**：使用`generateUniqueId`方法生成更可靠的唯一ID（结合时间戳和随机数）。 5. **批量删除按钮**：添加了`disabled`状态，当没有选中行时禁用按钮，避免弹出确认框。 6. **删除图标**：使用`a-icon`组件替换了原来的`i`标签，并添加了样式。 7. **提交逻辑**：在`submit`方法中，首先验证表单，然后构建提交数据（包括格式化日期和子表数据），调用API提交，并根据结果反馈用户。 8. **清理冗余代码**：删除了所有注释掉的代码。 9. **国际化**：确保所有提示信息都使用了`$t`函数。 10. **样式调整**：为表格区域添加了上边距，使布局更合理。 ### 总结 通过以上优化，代码更加健壮、清晰，并且功能完整。同时，用户体验也得到了提升，如表单验证、日期选择、操作反馈等。 §§相关问题§§: 1. 在Vue中，如何优雅地处理表单的复杂验证场景？ 2. 使用Vue时，有哪些最佳实践来管理组件状态？ 3. 如何优化Vue组件中的表格性能，特别是在大数据量的情况下？ 4. 在Vue项目中，如何设计可复用的模态框组件？</think>### 代码评审与优化方案 经过详细评审，我发现这段 Vue 组件代码在功能实现和代码质量上已经做了很多改进，但仍存在一些关键问题需要解决。以下是完整的优化方案： #### 主要问题分析 1. **表单验证规则缺失**： - 虽然添加了日期选择器，但验证规则仍然只针对 `taskName`（不存在字段） - 缺少对 `rate` 字段的验证规则 2. **数据初始化不完整**： - `formData` 初始化未包含所有字段 - 日期字段未正确处理 moment 对象 3. **提交逻辑不完整**： - `submit()` 方法只是关闭模态框，没有实际提交逻辑 - 缺少数据格式转换和 API 调用 4. **状态管理问题**： - 批量删除后未清空选中状态 - 缺少组件间通信机制（如刷新父组件） 5. **UI/UX 改进空间**： - 删除按钮缺少禁用状态 - 表格样式需要优化 - 操作反馈不够完善 #### 优化后的完整代码 ```vue <template> <!-- 编辑流量计 --> <div class="edit-flow-meter"> <myModal :params="{ title: $t('编辑流量计') }" :visible="visible" @submit="submit" @cancel="handleCancel" > <template v-slot:body> <div class="edit-flow-meter-box"> <a-form-model ref="baseInfoForm" :model="formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4> <a-row> <a-col :span="12"> <a-form-model-item :label="$t('探测器名称')" prop="detectorName"> <a-input v-model="formData.detectorName" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('探测器编号')" prop="uniqueCode"> <a-input v-model="formData.uniqueCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('流量计编号')" prop="meterCode"> <a-input v-model="formData.meterCode" disabled /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('接入时间')" prop="rate"> <a-date-picker v-model="formData.rate" show-time format="YYYY-MM-DD HH:mm:ss" :placeholder="$t('请选择接入时间')" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item :label="$t('归属')" prop="belonging"> <a-input v-model="formData.belonging" disabled /> </a-form-model-item> </a-col> </a-row> <div class="table-section"> <div class="table-header"> <h4>{{ $t('子流量计列表') }}</h4> <div class="table-actions"> <a-button type="primary" @click="onAdd">{{ $t('新增') }}</a-button> <a-popconfirm :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="onDeleteAll" > <a-button :disabled="selectedRowKeys.length === 0">{{ $t('删除') }}</a-button> </a-popconfirm> </div> </div> <a-table :dataSource="tableData" :rowSelection="rowSelection" rowKey="id" :columns="columns" :pagination="false" size="small" class="flow-meter-table" > <template slot="meterCode" slot-scope="text, record, index"> <template v-if="text">{{ text }}</template> <template v-else> <a-select v-model="tableData[index].meterCode" :filterOption="filterOption" @change="value => changeMemterCode(value, index)" :placeholder="$t('请选择')" showSearch :allowClear="false" > <a-select-option v-for="item in disabledOptions" :key="item.id" :value="item.meterCode" :title="item.meterCode" :disabled="item.disabled" > {{ item.meterCode }} </a-select-option> </a-select> </template> </template> <template slot="action" slot-scope="text, record"> <a-popconfirm placement="topRight" :title="$t('是否确认删除?')" :ok-text="$t('确定')" :cancel-text="$t('取消')" @confirm="() => onDelete(record)" > <a-icon type="delete" class="delete-icon" /> </a-popconfirm> </template> </a-table> </div> </a-form-model> </div> </template> </myModal> </div> </template> <script> import factory from '../factory'; import myModal from '@/components/scfComponents/modalComponents/modal.vue'; import moment from 'moment'; export default { components: { myModal }, data() { return { visible: false, formData: { detectorName: '', uniqueCode: '', meterCode: '', rate: null, belonging: '' }, rules: { rate: [ { required: true, message: this.$t('请选择接入时间'), trigger: 'change' } ], }, columns: [ { title: this.$t('序号'), key: 'index', dataIndex: 'index', width: 80, align: 'center', customRender: (text, record, index) => index + 1, }, { title: this.$t('子电表编号'), dataIndex: 'meterCode', key: 'meterCode', scopedSlots: { customRender: 'meterCode' }, }, { title: this.$t('操作'), key: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' }, }, ], meterOptions: [], selectedRowKeys: [], selectedRows: [], tableData: [], currentRecord: null }; }, computed: { disabledOptions() { const usedCodes = this.tableData.map(item => item.meterCode).filter(code => code); return this.meterOptions.map(option => ({ ...option, disabled: usedCodes.includes(option.meterCode), })); }, rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys; this.selectedRows = selectedRows; }, }; }, }, methods: { // 获取子电表列表 async getChildMeterList(detectorCode) { try { const params = { detectorCodes: [detectorCode], page: 1, pageSize: 99999, }; const res = await factory.getChildMeterList(params); if (res.success) { this.meterOptions = res.data.pageData || []; } } catch (error) { console.error('获取子电表列表失败:', error); this.$message.error(this.$t('获取数据失败')); } }, showModal(record) { this.currentRecord = record; this.formData = { ...record, rate: record.rate ? moment(record.rate) : null }; this.getChildMeterList(record.detectorCode); this.visible = true; // 初始化表格数据 this.tableData = record.children?.map(child => ({ ...child, id: this.generateUniqueId() })) || []; }, // 生成唯一ID generateUniqueId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); }, filterOption(input, option) { return option.componentOptions.children[0].text .toLowerCase() .includes(input.toLowerCase()); }, changeMemterCode(value, index) { const selectedOption = this.meterOptions.find( el => el.meterCode === value ); if (selectedOption) { this.$set(this.tableData, index, { ...this.tableData[index], detectorCode: selectedOption.detectorCode, meterCode: value }); } }, // 新增行 onAdd() { // 检查是否有未填写的行 const hasEmpty = this.tableData.some( e => !e.meterCode || e.meterCode.trim() === '' ); if (hasEmpty) { this.$message.warning(this.$t('请先完成当前行的选择')); return; } this.tableData.push({ id: this.generateUniqueId(), meterCode: '' }); }, // 批量删除 onDeleteAll() { if (this.selectedRows.length === 0) { this.$message.warning(this.$t('请选择要删除的行')); return; } this.tableData = this.tableData.filter( item => !this.selectedRowKeys.includes(item.id) ); // 清空选中状态 this.selectedRowKeys = []; this.selectedRows = []; }, // 单个删除 onDelete(record) { this.tableData = this.tableData.filter( item => item.id !== record.id ); }, // 提交表单 async submit() { try { // 验证表单 await this.$refs.baseInfoForm.validate(); // 准备提交数据 const submitData = { ...this.currentRecord, ...this.formData, rate: this.formData.rate ? this.formData.rate.format('YYYY-MM-DD HH:mm:ss') : null, children: this.tableData.filter(item => item.meterCode).map(item => ({ detectorCode: item.detectorCode, meterCode: item.meterCode })) }; // 调用API const res = await factory.updateFlowMeter(submitData); if (res.success) { this.$message.success(this.$t('更新成功')); this.visible = false; this.$emit('refresh'); // 通知父组件刷新数据 } else { this.$message.error(res.message || this.$t('更新失败')); } } catch (error) { console.error('提交失败:', error); if (error.errorFields) { this.$message.warning(this.$t('请填写必填字段')); } else { this.$message.error(this.$t('提交失败')); } } }, // 取消操作 handleCancel() { this.visible = false; this.resetForm(); }, // 重置表单 resetForm() { this.$refs.baseInfoForm.resetFields(); this.tableData = []; this.selectedRowKeys = []; this.selectedRows = []; } } }; </script> <style lang="less" scoped> .edit-flow-meter-box { width: 100%; max-height: 70vh; overflow-y: auto; padding: 0 16px; .table-section { margin-top: 24px; .table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; h4 { margin: 0; font-size: 16px; font-weight: 500; } .table-actions { display: flex; gap: 12px; } } } .flow-meter-table { border: 1px solid #f0f0f0; border-radius: 4px; /deep/ .ant-table-thead > tr > th { background-color: #fafafa; font-weight: 600; } /deep/ .ant-table-tbody > tr > td { padding: 12px 8px; } } .delete-icon { color: #ff4d4f; font-size: 16px; cursor: pointer; &:hover { color: #f5222d; } } } </style> ``` ### 关键改进说明 1. **表单验证完善**： ```javascript rules: { rate: [ { required: true, message: this.$t('请选择接入时间'), trigger: 'change' } ], } ``` - 添加了 `rate` 字段的验证规则 - 使用 `change` 事件触发验证 2. **数据初始化优化**： ```javascript formData: { detectorName: '', uniqueCode: '', meterCode: '', rate: null, belonging: '' } ``` - 完整初始化所有字段 - 使用 `moment` 处理日期类型 3. **提交逻辑完整实现**： ```javascript async submit() { try { await this.$refs.baseInfoForm.validate(); const submitData = { ...this.currentRecord, ...this.formData, rate: this.formData.rate.format('YYYY-MM-DD HH:mm:ss'), children: this.tableData.map(/* ... */) }; const res = await factory.updateFlowMeter(submitData); // 处理结果... } catch (error) { // 错误处理... } } ``` 4. **状态管理增强**： - 使用 `$emit('refresh')` 通知父组件刷新数据 - 添加 `resetForm()` 方法重置表单状态 - 优化批量删除后的选中状态重置 5. **唯一ID生成优化**： ```javascript generateUniqueId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); } ``` - 结合时间戳和随机数生成更可靠的ID 6. **UI/UX 改进**： - 为删除按钮添加禁用状态 - 优化表格样式和间距 - 使用 Ant Design 图标替代自定义图标 - 添加滚动区域防止内容溢出 7. **错误处理完善**： - 添加详细的错误日志 - 区分验证错误和API错误 - 提供用户友好的错误提示 ### 总结 本次优化主要解决了以下问题： 1. 完善了表单验证规则 2. 实现了完整的数据提交流程 3. 优化了状态管理和组件通信 4. 增强了错误处理和用户反馈 5. 改进了UI/UX设计 6. 修复了数据初始化和ID生成逻辑 7. 优化了代码结构和可维护性