PPPoE表单添加字段之间关联功能

1、PPPoE表单添加字段之间关联功能 2、服务器管理详情带宽字段修改 3、优化PPPoE表单切换只读时清空数据出现的必填提示
2026-01-09 18:57:36 +08:00
parent c6eced0841
commit 19e5bb3d31
4 changed files with 94 additions and 56 deletions
@@ -93,6 +93,7 @@
                      :label="option.label"
                      :value="option.value"></el-option>
                  </el-select>
+                  <span v-if="!toBoolean(formVal.disabled || formItem.config.readonly)" class="warningCol">{{formVal.warningTitle}}</span>
                </template>

                <template v-else-if="formVal.type === 'treeSelect'">
@@ -393,6 +394,8 @@
            } else if (item.controls[val] && item.controls[val].required) {
              let msgType = item.controls[val].type === 'input' ? '请输入' : '请选择';
              this.rules[val] = [{required: true,message: `${msgType}${item.controls[val].label}`}];
+            } else {
+              delete this.rules[val];
            }
          });
        });
@@ -5,28 +5,36 @@
    <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback">
      <template #tempPoeConfigRules="{ field, model, formModel }">
        <div v-if="!readonly">
-          <el-upload
-            class="disInlineBlock mr20"
-            action=""
-            :auto-upload="false"
-            :on-change="handleFileUpload"
-            accept=".xls, .xlsx, .numbers"
-            :show-file-list="false">
-            <el-button size="mini" type="primary">导入</el-button>
-          </el-upload>
-<!--          <el-button type="primary" size="mini" >导入</el-button>-->
-          <el-button type="info" size="mini" @click="downloadTemp">模板下载</el-button>
+          <template v-if="formModel && formModel.pppoeConfigMode === '1'">
+            <el-upload
+              class="disInlineBlock mr20"
+              action=""
+              :auto-upload="false"
+              :on-change="handleFileUpload"
+              accept=".xls, .xlsx, .numbers"
+              :show-file-list="false">
+              <el-button size="mini" type="primary">导入</el-button>
+            </el-upload>
+            <el-button type="info" size="mini" @click="downloadTemp">模板下载</el-button>
+          </template>
          <div style="margin-left: -120px">
            <TableList id="tabHeadCenter" ref="tabRef" :columns="columns" :config="config" :queryParams="{total: 0}" :tableList="roleList"  @fnClick="callback">
              <template #tempEditModel="{ row, valueKey, column }">
-                <el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" class="w100" :controls="false" :min="column.min || undefined" :max="column.max || undefined"  size="small" :placeholder="column.placeholder || ''" />
-                <el-input v-else v-model="row[valueKey]" class="w100" size="small" :placeholder="column.placeholder" />
+                <el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" :disabled="formModel.pppoeConfigMode === '2' ? column.editShow === '2' ? false : true : false"
+                                 class="w100" :controls="false" :min="column.min || undefined" :max="column.max || undefined"  size="small" :placeholder="column.placeholder || ''" />
+                <el-input v-else v-model="row[valueKey]" class="w100" size="small"  :disabled="formModel.pppoeConfigMode === '2' ? column.editShow === '2' ? false : true : false"
+                          :placeholder="column.placeholder" />
              </template>
            </TableList>
          </div>
        </div>
        <div v-else style="margin-left: -120px">
-          <TableList ref="tabRef" :columns="columns" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :queryParams="{total: 0}" :tableList="roleList"></TableList>
+          <TableList ref="tabRef" :columns="columns" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :queryParams="{total: 0}" :tableList="roleList">
+            <template #tempStatus="{ valueKey, row, column }">
+              <span v-if="row[valueKey] === '0'">未连通</span>
+              <span v-if="row[valueKey] === '1'">已连通</span>
+            </template>
+          </TableList>
        </div>
      </template>
    </Form>
@@ -61,7 +69,9 @@
                item['showNum'] = '1';
              }
            });
-            this.roleList = newModel[0].subList;
+            this.readonly = true;
+            this.roleList = JSON.parse(JSON.stringify(newModel[0].subList));
+            this.fnFormList(this.readonly);
            this.poeInterfaceList();
          }
        },
@@ -77,21 +87,12 @@
        contentList: [{oneNum: '',ipv4Addr: '', ipv4Num: '', ipv4Graw: ''}],
        roleList: [],
        columns: {},
-        config: {
-          colHiddenCheck: true, colTopHiddenIcon: true,
-          tableButton: {
-            line: [
-              {content: '新增', fnCode: 'add', type: 'text'},
-              {content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
-            ]
-          }
-        },
+        config: {},
        ipList: [],
        loadingBool: false,
      }
    },
    created() {
-      this.fnFormList(this.readonly);
    },
    methods: {
      // formList集合
@@ -101,9 +102,9 @@
          controls: {
            id: {label: 'ID', hidden: true},
            clientId: {label: 'clientId', hidden: true},
-            pppoeEnabled: {label: '启用PPPoE', span: readonly ? 12 : 24, type: 'radio', options: this.dict.type.pppoe_enabled, required: readonly ? false : true},
-            pppoeConfigMode: {label: 'PPPoE配置方式', span: readonly ? 10 : 24, type: 'select', options: this.dict.type.pppoe_config_mode, warningTitle: '使用multi_wan_conntrack.sh', required: readonly ? false : true},
-            pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: this.ipList || [], required: readonly ? false : 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', eventName: 'change', options: this.dict.type.pppoe_config_mode, warningTitle: '使用multi_wan_conntrack.sh', required: true},
+            pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: this.ipList || [], required: true, hidden: this.ruleForm.pppoeConfigMode === '1' ? false: true,},
            subList: {label: 'PPPoE配置规则', span: 24, slotName: 'tempPoeConfigRules'},
          }
        }];
@@ -114,10 +115,23 @@
          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: '140', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
+          bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '140', visible: true, editShow: '2', placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
          macAddress: { label: `MAC地址`, minWidth: '120', visible: readonly},
-          status: { label: `连通状态`, minWidth: '100', visible: readonly},
+          status: { label: `连通状态`, minWidth: '100', slotName: 'tempStatus', visible: readonly},
        };
+        if (!readonly && this.ruleForm.pppoeConfigMode === '1') {
+          this.config = {
+            colHiddenCheck: true, colTopHiddenIcon: true,
+              tableButton: {
+              line: [
+                {content: '新增', fnCode: 'add', type: 'text'},
+                {content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
+              ]
+            }
+          };
+        } else {
+          this.config = {colHiddenCheck: true, colTopHiddenIcon: true}
+        }
      },
      poeInterfaceList() {
        if (this.loadingBool) return;
@@ -134,13 +148,8 @@
      // 切换编辑和保存
      formSubmit(num) {
        if (num === '-1') {
-          // this.readonly = true;
-          // this.fnFormList(this.readonly);
-          // this.ruleForm = Object.assign({}, this.modelVal[0], {typeName: 111});
-
          // 1. 获取表单引用
          const formRef = this.$refs.formRef;
-          // console.log('gggg===', formRef.$refs.ruleForm);
          // 2. 先清除所有表单校验
          if (formRef && formRef.$refs.ruleForm) {
            formRef.$refs.ruleForm.clearValidate(); // 清除校验提示
@@ -208,6 +217,8 @@
          if (!await this.fnFormValid()) {
            formValidateBool = false;
          }
+        } else {
+          this.$refs.formRef.$refs.ruleForm.clearValidate(); // 清除校验提示
        }
        if (!formValidateBool) return;
        let params = {
@@ -244,9 +255,10 @@
          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);
+          this.$emit('poeDataChange');
+          // this.ruleForm = Object.assign(this.ruleForm, this.$refs.formRef.$refs.ruleForm.model, {typeName: 222});
+          // this.readonly = true;
+          // this.fnFormList(this.readonly);
        });
      },
      // 监听事件
@@ -259,20 +271,42 @@
            case 'delete':
              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});
-              break;
-            case 'cancel':
-              this.$emit("dialogResult", {open: false});
+            case 'pppoeConfigMode':
+              if (dataVal === '1') {
+                this.formList[0].controls.pppoeInterface['hidden'] = false;
+                this.config = {
+                  colHiddenCheck: true, colTopHiddenIcon: true,
+                    tableButton: {
+                    line: [
+                      {content: '新增', fnCode: 'add', type: 'text'},
+                      {content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
+                    ]
+                  }
+                };
+              } else if (dataVal === '2') {
+                if (this.modelVal[0].pppoeConfigMode.toString() === '2') {
+                  let newModel = JSON.parse(JSON.stringify(this.modelVal));
+                  newModel[0].subList.map((item,index) => {
+                    item['targetIndexNum'] = index + 1;
+                    if (index !== 0) {
+                      item['showNum'] = '1';
+                    }
+                  });
+                  this.roleList = newModel[0].subList;
+                } else {
+                  this.roleList = [];
+                }
+                this.formList[0].controls.pppoeInterface['hidden'] = true;
+                this.config = {
+                  colHiddenCheck: true, colTopHiddenIcon: true,
+                };
+              }
              break;
            default:
          }
        }
      },
      downloadTemp() {
-        // this.download('http://172.16.15.51:9300/statics/csvfile/macvlan_vlan.csv', {
-        // }, `template_${new Date().getTime()}.xlsx`)
        const link = document.createElement('a');
        link.href = 'http://172.16.15.51:9300/statics/csvfile/macvlan_vlan.csv';
        link.download = 'macvlan_vlan.csv';
@@ -283,13 +317,10 @@
      handleFileUpload(file) {
        // 如果是使用 Element UI 的 el-upload 组件，文件对象是 file.raw
        const actualFile = file.raw || file; // 兼容两种获取方式[1,3](@ref)
-
        if (!actualFile) {
          return;
        }
-
        const fileReader = new FileReader();
-
        fileReader.onload = (e) => {
          try {
            // 1. 获取读取结果，并将其转换为 Uint8Array
@@ -322,7 +353,6 @@
        fileReader.onerror = (error) => {
          this.$message.error('读取文件失败，请重试。');
        };
-
        // 开始以 ArrayBuffer 格式读取文件
        fileReader.readAsArrayBuffer(actualFile);
      },
@@ -7,7 +7,7 @@
          <div class="disInlineBlock w80" style="padding-left: 10px;">
            <div>{{item.name}}</div>
            <div v-if="item.num || item.num === 0" class="mt20" style="font-size: 2rem;">{{item.num}}{{item.unit}}</div>
-            <div v-else style="margin-top: 40px;font-size: 14px;color: #f00;">没有监控策略，暂无数据！</div>
+            <div v-else style="margin-top: 40px;font-size: 14px;color: #f00;">暂无数据</div>
          </div>
          <div class="disInlineBlock w20 " style="vertical-align: top;">
            <img width="50" :src="item.imgUrl" alt="">
@@ -85,7 +85,7 @@
        </el-tab-pane>
        <!--    PPPoE配置     -->
        <el-tab-pane label="PPPoE配置" name="PPPoE配置">
-          <PPPoEConfig v-if="activeName === 'PPPoE配置'" :key="activeName" :modelVal="mapDataList['PPPoE配置']"></PPPoEConfig>
+          <PPPoEConfig v-if="activeName === 'PPPoE配置'" :key="activeName" :modelVal="mapDataList['PPPoE配置']" @poeDataChange="fnPoeDataChange"></PPPoEConfig>
        </el-tab-pane>
      </el-tabs>
    </div>
@@ -119,7 +119,7 @@
        systemModel: {},
        headerList: [
          {name: 'CPU使用率(%)', num: 0, imgUrl: cpuUseImg},
-          {name: '带宽', num: 0, imgUrl: bandWImg},
+          {name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
          {name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
          {name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
        ],
@@ -281,10 +281,10 @@
      },
      // 顶部四块信息
      headerFourData(data) {
+        this.headerList[1].num = data.reportedBandwidth;
        trafficSerDetails({clientId: data.clientId, name: data.ip1InterfaceName}).then(res => {
          if (res && res.data) {
            this.headerList[0].num = res.data.cpuUti;
-            this.headerList[1].num = res.data.speed;
            this.headerList[2].num = res.data.cpuCores;
            this.headerList[3].num = res.data.memTotalSize;
          }
@@ -312,7 +312,8 @@
      async upMaxVersion(model) {
        let agentType = await this.fnAgentIsNew(model);
        if (agentType && agentType.newFlag) {
-          updateAgentManage(agentType).then(res => {
+          let params = {deployDevice: model.clientId, method: '0', fileUrl: agentType.fileUrl, fileMd5: agentType.fileMd5};
+          updateAgentManage(params).then(res => {
            console.log('res===',res);
          });
        } else {
@@ -407,6 +408,10 @@
          }
        });
      },
+      // pppoe回调
+      fnPoeDataChange() {
+        this.fnPppoeConfig('PPPoE配置');
+      },
      // PPPoE配置
      fnPppoeConfig(keyName) {
        getPppoeConfig({clientId: this.paramsData.clientId}).then(res => {
@@ -299,7 +299,7 @@
              ],
              line: [
                {content: '选择业务IP', fnCode: 'pubilcNet', type: 'primary', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', hasPermi: 'resource:serverRegister:pubilcNet'},
-                {content: '图形监控', fnCode: 'echartView', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:echartView'},// rocketmq:traffic
+                // {content: '图形监控', fnCode: 'echartView', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:echartView'},// rocketmq:traffic
                {content: '详情', fnCode: 'details', type: 'primary', icon: 'el-icon-view', hasPermi: 'rocketmq:traffic'}, // resource:serverRegister:details
                {title: '更多', hasPermi: ['system:businessDeploy', 'rocketmq:policy', 'rocketmq:monitorPolicy', 'rocketmq:remote', 'resource:serverRegister:tagRemarkEdit', 'resource:serverRegister:mtrChartVew', 'resource:serverRegister:cancelFlash', 'resource:serverRegister:createFrpAddr', 'resource:serverRegister:showFrpAddr'], more: [
                    {content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'system:businessDeploy'},