diff --git a/src/api/disRevenue/resource.js b/src/api/disRevenue/resource.js index b8d8789..ef2b801 100644 --- a/src/api/disRevenue/resource.js +++ b/src/api/disRevenue/resource.js @@ -1360,3 +1360,11 @@ export function getPppoeConfig(data) { data: data }) } +// 新增 ---应用于服务器管理详情 +export function addPoeConfigMain(data) { + return request({ + url: '/rocketmq/rmPppoeConfigMain', + method: 'post', + data: data + }) +} diff --git a/src/views/resource/serverRegister/PPPoEConfig.vue b/src/views/resource/serverRegister/PPPoEConfig.vue index b81e991..b3ba610 100644 --- a/src/views/resource/serverRegister/PPPoEConfig.vue +++ b/src/views/resource/serverRegister/PPPoEConfig.vue @@ -36,7 +36,7 @@ import * as XLSX from 'xlsx'; import Form from '@/components/form/index.vue'; import TableList from '@/components/table/index.vue'; - import {networkList} from '@/api/disRevenue/resource'; + import {networkList, addPoeConfigMain} from '@/api/disRevenue/resource'; export default { name: "PPPoEConfig", components: {Form, TableList}, @@ -50,10 +50,17 @@ watch: { modelVal: { handler(val, oldVal) { - console.log(val,oldVal) if (val && val.length > 0) { - this.ruleForm = val[0]; - this.roleList = val[0].subList; + val[0].pppoeEnabled = val[0] && (val[0].pppoeEnabled || val[0].pppoeEnabled === 0) ? val[0].pppoeEnabled.toString() : val[0].pppoeEnabled; + let newModel = JSON.parse(JSON.stringify(val)); + this.ruleForm = newModel[0]; + newModel[0].subList.map((item,index) => { + item['targetIndexNum'] = index + 1; + if (index !== 0) { + item['showNum'] = '1'; + } + }); + this.roleList = newModel[0].subList; this.poeInterfaceList(); } }, @@ -78,6 +85,7 @@ ] } }, + ipList: [], } }, created() { @@ -93,52 +101,94 @@ clientId: {label: 'clientId', hidden: true}, pppoeEnabled: {label: '启用PPPoE', span: readonly ? 12 : 24, type: 'radio', options: this.dict.type.pppoe_enabled, required: true}, pppoeConfigMode: {label: 'PPPoE配置方式', span: readonly ? 10 : 24, type: 'select', options: this.dict.type.pppoe_config_mode, warningTitle: '使用multi_wan_conntrack.sh', required: true}, - pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: [], required: true}, + pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: this.ipList || [], required: true}, subList: {label: 'PPPoE配置规则', span: 24, slotName: 'tempPoeConfigRules'}, } }]; this.columns = { id: { label: `ID`,width: '50'}, - serialNumber: { label: `序号`, width: '50',visible: true}, + serialNumber: { label: `序号`, minWidth: '50',visible: true, type: 'number', placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'}, vlanId: { label: `VLANID`, minWidth: '100',visible: true, type: 'number', placeholder: '请输入数字', slotName: readonly ? null : 'tempEditModel'}, ipv4Address: { label: `IPv4地址`, minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'}, ipv4MaskBits: { label: `IPv4掩码位数`, minWidth: '100',visible: true, type: 'number', min: 1, max: 32, placeholder: '请输入1-32', slotName: readonly ? null : 'tempEditModel'}, ipv4Gateway:{ label: `IPv4网关`,minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'}, - bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '130', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'}, + bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '140', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'}, macAddress: { label: `MAC地址`, minWidth: '120', visible: readonly}, status: { label: `连通状态`, minWidth: '100', visible: readonly}, }; }, poeInterfaceList() { networkList({clientId: this.ruleForm.clientId, newFlag: 1}).then(res => { - let ipList = []; + this.ipList = []; res && res.data.map(item => { - this.ipContentList[item.id] = item; - ipList.push({label: item.interfaceName, value: item.id}); + this.ipList.push({label: item.interfaceName, value: item.interfaceName}); }); - this.formList[0].controls.pppoeInterface['options'] = ipList; + this.formList[0].controls.pppoeInterface['options'] = this.ipList; }); }, + // 切换编辑和保存 formSubmit() { - this.ruleForm = {name: '12'}; if (!this.readonly) { - console.log('submit=====',this.roleList,this.ruleForm); + this.ruleForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model); + this.submitPoeModel(); } else { - this.roleList = this.roleList.length > 0 ? this.roleList : [{serialNumber: '1', vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}]; + this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111}); + this.roleList = this.roleList.length > 0 ? this.roleList : [{targetIndexNum: 1, serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}]; + this.readonly = !this.readonly; + this.fnFormList(this.readonly); } - this.readonly = !this.readonly; - this.fnFormList(this.readonly); + }, + // 新增判断 + submitPoeModel() { + let params = { + clientId: this.ruleForm.clientId, + pppoeEnabled: this.ruleForm.pppoeEnabled, + pppoeConfigMode: this.ruleForm.pppoeConfigMode, + pppoeInterface: this.ruleForm.pppoeInterface, + subList: this.roleList + }; + let indexNum = 0; + if (this.modelVal && this.modelVal[0] && this.modelVal[0].subList && this.modelVal[0].subList.length === this.roleList.length) { + let arr = ['vlanId', 'serialNumber', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult']; + Object.keys(params).some(keyName => { + if (keyName ==='subList') { + params['subList'].some((item,index) => { + arr.some(keyTowName => { + if (item[keyTowName] !== this.modelVal[0].subList[index][keyTowName]) { + indexNum = 1; + return true; + } + }); + return true; + }); + } else if (params[keyName] !== this.modelVal[0][keyName]) { + indexNum = 1; + } + }); + } else { + indexNum = 1; + } + if (indexNum === 0) { + this.readonly = true; + this.fnFormList(this.readonly); + return; + } + addPoeConfigMain(params).then(res => { + this.ruleForm = Object.assign(this.ruleForm, this.$refs.formRef.$refs.ruleForm.model, {typeName: 222}); + this.readonly = true; + this.fnFormList(this.readonly); + }); }, // 监听事件 callback(result, dataVal, formVal) { if (result && result.fnCode) { switch (result.fnCode) { case 'add': - this.roleList.push({showNum: '1', serialNumber: this.roleList.length + 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}); + this.roleList.push({targetIndexNum: this.roleList.length + 1,showNum: '1', serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}); break; case 'delete': - console.log('dataVal===',dataVal); - this.roleList.splice(dataVal.serialNumber - 1, 1); + this.roleList.splice(this.roleList.findIndex(item => item.targetIndexNum === dataVal.targetIndexNum), 1); + break; case 'submit': console.log('contentList===',this.contentList, 'dataVal===',dataVal); // this.$emit("dialogResult", {open: false}); @@ -161,7 +211,6 @@ document.body.removeChild(link); }, handleFileUpload(file) { - console.log('file====',file); // 如果是使用 Element UI 的 el-upload 组件,文件对象是 file.raw const actualFile = file.raw || file; // 兼容两种获取方式[1,3](@ref) @@ -189,19 +238,18 @@ // 6. 将解析后的数据存储在组件的 data 中 // this.excelData = jsonData; - console.log('解析到的Excel数据:', jsonData); + // console.log('解析到的Excel数据:', jsonData); // 可以在这里调用后续处理方法,如数据校验、发送到后端等 this.processExcelData(jsonData); } catch (error) { - console.error('解析Excel文件时出错:', error); + // console.error('解析Excel文件时出错:', error); this.$message.error('文件解析失败,请检查文件格式是否正确。'); } }; fileReader.onerror = (error) => { - console.error('读取文件失败:', error); this.$message.error('读取文件失败,请重试。'); }; @@ -216,17 +264,14 @@ let arrList = []; data.map((item,index) => { if (item && item.length > 0) { - let arr = ['vlanId', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult']; - let obj = {serialNumber: oldDataList.length + index + 1, showNum: '1'}; + let arr = ['vlanId', 'serialNumber', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult']; + let obj = {targetIndexNum: oldDataList.length + index + 1, showNum: '1'}; arr.forEach((val, valIndex) => { obj[val] = item[valIndex]; - // console.log('val===',val, valIndex); - // arrList.push(obj); }); - // console.log('item===',item, 'obj===', obj); + arrList.push(obj); } }); - // console.log('arrList===',arrList); this.roleList = oldDataList.concat(arrList); } else { this.$message.warning('导入的文件中没有数据。'); @@ -237,7 +282,7 @@ this.roleList.forEach(item => { let indexNum = 0; Object.keys(item).some(val => { - if (val !== 'serialNumber' && val !== 'showNum' && item[val]) { + if (val !== 'serialNumber' && val !== 'targetIndexNum' && val !== 'showNum' && item[val]) { indexNum = 1; return; } diff --git a/src/views/resource/serverRegister/details.vue b/src/views/resource/serverRegister/details.vue index b754f22..b3d171e 100644 --- a/src/views/resource/serverRegister/details.vue +++ b/src/views/resource/serverRegister/details.vue @@ -45,7 +45,7 @@