profitManage1.1/src/views/resource/serverRegister/handle.vue

<template>
  <div class="app-container">
    <Form :formList="formList" :ruleFormData="ruleForm" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" @fnClick="callback"></Form>
    <el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
  export default {
    name: 'serverRegisterEdit',
    components: {Form},
    dicts: ['rm_topology_type'],
    data() {
      return {
        loading: false,
        ruleForm: {},
        formList: [],
        paramsData: {},
        switchNameList: [],
        serverNameList: [],
        serverPortList: [],
        interfaceNameList: [],
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
      if (this.paramsData && this.paramsData.id) {
        // this.getFormDataList(this.paramsData.id);
      }
      this.switchList();
      this.fnFormList();

    },
    methods: {
      // formList集合
      fnFormList(objVal) {
        if (this.paramsData && this.paramsData.readonly) {
          this.formList = [{
            config: {title: '基本信息',labelWidth: '140px', readonly: true},
            controls: {
              id: {label: 'ID',hidden: true},
              clientId: {label: 'ClientID', span: 12, type: 'select', options:[]},
              hardwareSn: {label: '设备SN', span: 12, type: 'input'},
              one: {label: 'IP1-运营商', span: 12, type: 'input'},
              one1: {label: 'IP1-省', span: 12, type: 'input'},
              one2: {label: 'IP1-市', span: 12, type: 'input'},
              one3: {label: 'IP1-业务公网', span: 12, type: 'input'},
              one4: {label: 'IP1-接口名称', span: 12, type: 'input'},
              one5: {label: 'IP1-mac地址', span: 12, type: 'input'},
              one6: {label: 'IP1-接口类型', span: 12, type: 'input'},
              one7: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
              one8: {label: '管理网-运营商', span: 12, type: 'input'},
              one9: {label: '管理网-省', span: 12, type: 'input'},
              one10: {label: '管理网-市', span: 12, type: 'input'},
              one11: {label: '管理网-公网IP', span: 12, type: 'input'},
              one12: {label: '管理网-接口名称', span: 12, type: 'input'},
              one13: {label: '管理网-mac地址', span: 12, type: 'input'},
              one14: {label: '管理网-接口类型', span: 12, type: 'input'},
              one15: {label: '管理网-IPv4地址', span: 12, type: 'input'},
              one16: {label: '管理网-网关', span: 12, type: 'input'},
              one17: {label: '心跳时间间隔', span: 12, type: 'input'},
              one18: {label: '心跳次数', span: 12, type: 'input'},
              one19: {label: '业务名称', span: 12, type: 'input'},
              one20: {label: '逻辑节点标识', span: 12, type: 'input'},
              one21: {label: '在线状态', span: 12, type: 'input'},
              one22: {label: '注册状态', span: 12, type: 'input'},
              one23: {label: '注册时间', span: 12, type: 'input'},
              one24: {label: '上机时间', span: 12, type: 'input'},
              one25: {label: 'agent版本', span: 12, type: 'input'},
              machineCode: {label: '金山machineCode', span: 12, type: 'input'},
            }
          }];
        } else {
          this.formList = [{
            config: {title: '基本信息',labelWidth: '140px', colSpan: 'disBlock'},
            controls: {
              id: {label: 'ID',hidden: true},
              clientId: {label: 'ClientID', span: 12, type: 'select', options:[], required: true},
              machineCode: {label: '金山machineCode', span: 12, type: 'input', required: true},
            }
          }];
        }
      },
      // 获取交换机下拉
      switchList() {
        resNameBtType({resourceType: 2}).then(val => {
          this.switchNameList = val && val;
          this.formList[0].controls.clientId['options'] = val && val.map(item => {
            return Object.assign({label: item.resourceName, value: item.resourceName});
          });
        });
      },
      // 获取详情
      getFormDataList(id) {
        getTopology(id).then(val => {
          this.ruleForm = val && val.data;
          this.switchList();
          this.fnServerNameList();
        }).catch(() => {
          this.$modal.msgError("操作失败")
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              let content = '<p style="font-size: 1rem;font-weight: 600;">确认添加machineCode</p>' +
                '<p style="height: 0px;margin-bottom: 50px;">一旦添加machineCode后，将不能修改</p>';
              this.$modal.confirm(content, {submitTitle: '确认添加'}).then(() => {
                let fnType = addTopology;
                if (dataVal && dataVal.id) {
                  fnType = updateTopology;
                }
                if(this.loading) return;
                this.loading = true;
                fnType(dataVal).then(response => {
                  this.$modal.msgSuccess(response.msg);
                  this.$router.push("/resource/serverRegister");
                  this.loading = false;
                }).catch(() => {
                  this.$modal.msgError("操作失败")
                });
              }).catch(() => {});
              break;
            case 'cancel':
              this.$router.push("/resource/serverRegister");
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-radio {
    margin-right: 15px!important;
  }
</style>