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

1、PPPoE表单添加字段之间关联功能
2、服务器管理详情带宽字段修改
3、优化PPPoE表单切换只读时清空数据出现的必填提示

src/components/form/index.vue

@@ -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];
             }
           });
         });

src/views/resource/serverRegister/PPPoEConfig.vue

@@ -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
+          <template v-if="formModel && formModel.pppoeConfigMode === '1'">
-            class="disInlineBlock mr20"
+            <el-upload
-            action=""
+              class="disInlineBlock mr20"
-            :auto-upload="false"
+              action=""
-            :on-change="handleFileUpload"
+              :auto-upload="false"
-            accept=".xls, .xlsx, .numbers"
+              :on-change="handleFileUpload"
-            :show-file-list="false">
+              accept=".xls, .xlsx, .numbers"
-            <el-button size="mini" type="primary">导入</el-button>
+              :show-file-list="false">
-          </el-upload>
+              <el-button size="mini" type="primary">导入</el-button>
-<!--          <el-button type="primary" size="mini" >导入</el-button>-->
+            </el-upload>
-          <el-button type="info" size="mini" @click="downloadTemp">模板下载</el-button>
+            <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-number v-if="column.type === 'number'" v-model="row[valueKey]" :disabled="formModel.pppoeConfigMode === '2' ? column.editShow === '2' ? false : true : false"
-                <el-input v-else v-model="row[valueKey]" class="w100" size="small" :placeholder="column.placeholder" />
+                                 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: {
+        config: {},
-          colHiddenCheck: true, colTopHiddenIcon: true,
-          tableButton: {
-            line: [
-              {content: '新增', fnCode: 'add', type: 'text'},
-              {content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
-            ]
-          }
-        },
         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},
+            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: readonly ? false : 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: readonly ? false : 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.$emit('poeDataChange');
-          this.readonly = true;
+          // this.ruleForm = Object.assign(this.ruleForm, this.$refs.formRef.$refs.ruleForm.model, {typeName: 222});
-          this.fnFormList(this.readonly);
+          // 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':
+            case 'pppoeConfigMode':
-              // console.log('contentList===',this.contentList, 'dataVal===',dataVal);
+              if (dataVal === '1') {
-              // this.$emit("dialogResult", {open: false});
+                this.formList[0].controls.pppoeInterface['hidden'] = false;
-              break;
+                this.config = {
-            case 'cancel':
+                  colHiddenCheck: true, colTopHiddenIcon: true,
-              this.$emit("dialogResult", {open: false});
+                    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);
       },

src/views/resource/serverRegister/details.vue

@@ -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 => {

src/views/resource/serverRegister/index.vue

@@ -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'},