hanbaoshan
2020-09-14 19d871dc4f3bd48e0906868ba5b35a457b128964
src/pages/settings/components/ClusterManagement.vue
@@ -14,23 +14,23 @@
              <el-form-item label="集群ID">
                <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
              </el-form-item>
              <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
              <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
                <el-input v-model="ruleForm.clusterpwd" placeholder="请输入6-12位密码,或点击生成" size="small">
                  <el-button type="text" slot="suffix" @click="generatePassword">生成密码</el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="虚拟IP" prop="virtualip">
              <!-- <el-form-item label="虚拟IP" prop="virtualip">
                <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
              </el-form-item>
              <el-form-item style="width:440px">
              </el-form-item> -->
              <el-form-item style="width:500px">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 加入已有集群 -->
          <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
          <el-tab-pane label="加入已有集群" name="3" :disabled="isHasColony">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm">
              <el-form-item label="IP地址" style="width:440px">
                <el-input v-model="joinForm.clusterip" placeholder="请输入集群内任意IP地址" size="small">
@@ -48,7 +48,7 @@
                <!-- <el-button size="mini" :disabled="searchDis" @click="searchColony">搜索集群</el-button>
                <el-button size="mini" @click="stopSearch">停止搜索</el-button>-->
              </el-form-item>
              <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
              <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
                <el-input
                  v-model="joinForm.clusterpwd"
                  placeholder="请输入集群密码"
@@ -71,7 +71,7 @@
            <el-form-item label="集群ID">
              <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
            <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
              <el-input
                v-model="ruleForm.clusterpwd"
                disabled
@@ -80,9 +80,9 @@
              ></el-input>
            </el-form-item>
            <el-form-item label="虚拟IP" prop="virtualip">
            <!-- <el-form-item label="虚拟IP" prop="virtualip">
              <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
            </el-form-item>
            </el-form-item> -->
            <el-form-item style="width:440px;text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
              <el-button
@@ -103,6 +103,22 @@
          v-loading="loading"
          @selected-node="joinNode"
        ></serfDiagram>
      </el-col>
    </el-row>
    <div class="ui-top-view">
      <div class="ui-top-title">漂移IP</div>
    </div>
    <el-row>
      <el-col :span="12">
        <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;">
          <el-form-item label="虚拟IP" prop="virtual_ip">
            <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input>
            <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch>
          </el-form-item>
          <el-form-item style="width:500px">
            <el-button type="primary" size="small" @click="saveForm('vrIpForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="ui-top-view">
@@ -160,7 +176,9 @@
  findCluster,
  updateClusterName,
  joinCluster,
  leave
  leave,
  getVrrp,
  setVrrp
} from "@/api/clusterManage";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -193,7 +211,13 @@
      ruleForm: {
        clustername: "",
        clusterpwd: "",
        virtualip: ""
        //virtualip: ""
      },
      vrIpForm: {
        enable: true,
        //serve_port: "",
        serve_port: null,
        virtual_ip: ""
      },
      manageForm: {
        clustername: "测试集群1",
@@ -209,6 +233,11 @@
          { required: true, message: "请输入集群名称", trigger: "change" }
        ],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
        // virtualip: [
        //   { required: true, message: "请输入虚拟IP", trigger: "change" }
        // ]
      },
      vrIpRules: {
        virtualip: [
          { required: true, message: "请输入虚拟IP", trigger: "change" }
        ]
@@ -265,10 +294,30 @@
            clusterId: this.clusterid,
            clusterName: this.ruleForm.clustername,
            password: this.ruleForm.clusterpwd,
            virtualip: this.ruleForm.virtualip
            //virtualip: this.ruleForm.virtualip
          };
          this.createColony(json).then(() => {
            this.findCluster();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveForm(formName) {
      debugger
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          let json = {
            enable: this.vrIpForm.enable,
            serve_port: this.vrIpForm.serve_port,
            virtual_ip: this.vrIpForm.virtual_ip,
          };
          setVrrp(json).then(() => {
            this.getVrrpInfo();
          });
        } else {
          console.log("error submit!!");
@@ -419,7 +468,7 @@
          this.clusterid = res.data.clusterId;
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          this.ruleForm.virtualip = res.data.virtualip
          //this.ruleForm.virtualip = res.data.virtualip
          let list = res.data.nodes.map(i => {
            let obj = {};
            obj.cluster_id = i.cluster_id;
@@ -439,6 +488,16 @@
          // this.activeName = '1'
        }
      }
    },
    getVrrpInfo(){
      getVrrp().then(res=>{
        if(res.success){
          this.vrIpForm.virtual_ip = res.data.virtual_ip;
          this.vrIpForm.enable = res.data.enable;
        }
      }).catch(e=>{
        console.log(e)
      })
    },
    async updateClusterName() {
      let res = await updateClusterName({
@@ -539,11 +598,12 @@
      this.ruleForm.clusterpwd = uuid.join("");
    },
    onIpBlur(ip) {
      this.ruleForm.virtualip = ip;
      this.vrIpForm.virtual_ip = ip;
    }
  },
  mounted() {
    this.findCluster();
    this.getVrrpInfo();
  },
  created() { }
};