日期时间新版

heyujie

2021-09-24 84ad5590bafc58e17ebcf7ebdce2cd70c0c22ea9

 src/pages/settings/views/clusterManagement.vue

@@ -1,6 +1,6 @@
<template>

  <div class="all">

    <div class="cluster-guanli" v-if="showCurCluster">

    <div class="cluster-guanli" v-if="showCurCluster&& isHasColony">

      <cloud-node :nodes="innerNodes"></cloud-node>



      <div class="bar">

@@ -22,13 +22,13 @@
            >&#xe60c;</span

          >

          <span

            class="icon iconfont"

            class="icon iconfont" style="font-size:21px;"

            @click="clearInput(1)"

            v-show="isFillingName"

            >&#xe649;</span

          >

          <span

            class="icon iconfont"

          <span 
            class="icon iconfont" style="font-size:20px;"

            @click="updateCluster(1)"

            v-show="isFillingName"

            >&#xe62a;</span

@@ -65,14 +65,14 @@
            >&#xe60c;</span

          >

          <span

            class="icon iconfont"

            class="icon iconfont" style="font-size:21px;"

            @click="clearInput(2)"

            v-show="isFillingIp"

            >&#xe649;</span

          >

          <span

            class="icon iconfont"

            @click="updateCluster(2)"

            @click="updateCluster(2)" style="font-size:20px;"

            v-show="isFillingIp"

            >&#xe62a;</span

          >

@@ -83,12 +83,19 @@
    </div>



    <div class="cluster-content">

      <div class="cluster-center" ref="left" v-if="!showCurCluster">

        <div class="menu-item" @click="isCreate = true">创建集群</div>

        <div class="menu-item" @click="isCreate = false">加入已有集群</div>

      <div class="cluster-center" ref="left" v-if="!showCurCluster|| !isHasColony">

        <div

          class="menu-item"

          :class="activePage == i ? 'menu-item-active' : ''"

          v-for="(item, i) in tabList"

          :key="i"

          @click="openRight(i)"

        >

          {{ item }}

        </div>

      </div>

      <div class="cluster-right" v-if="!showCurCluster">

        <div class="create-new" v-if="isCreate">

      <div class="cluster-right" v-if="!showCurCluster || !isHasColony">

        <div class="create-new" v-if="activePage == 0">

          <el-form

            :model="ruleForm"

            :rules="rules"

@@ -131,10 +138,11 @@
          </el-form>

          <div class="save-btn" @click="saveCluster('ruleForm')">保存</div>

        </div>

        <div class="join-exist" v-if="!isCreate">



        <div class="join-exist" v-if="activePage == 1">

          <el-form

            :model="joinForm"

            :rules="joinRules"

            :rules="joinExistRules"

            ref="joinForm"

            class="join-form"

            label-width="150px"

@@ -190,18 +198,13 @@
import {

  createSerfCluster,

  randomPwd,

  leave,

  search,

  getSearchNodes,

  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import cloudNode from "../components/CloudNode";

import ipInput from "@/components/subComponents/IPInput";

@@ -221,12 +224,18 @@
        }

      }, 1000);

    };

    const checkID= (rule, value, callback) => {

      if (!value) {

        return callback(new Error("密码不能为空"));

      }

    }

    return {

      innerNodes: [],

      intervalTimer: null,

      isFillingName: false,

      isFillingIp: false,

      inputName: "",

      activePage: 0,

      inputIp: "",

      serverIp: "",

      members: [],

@@ -255,19 +264,18 @@
      searchNum: "",

      scheduleId: "",

      isCreate: true,

      tabList: ["创建集群", "加入已有集群"],

      rules: {

        clustername: [

          { required: true, message: "请输入集群名称", trigger: "change" },

          { required: true, message: "请输入集群名称", trigger: "blur" },

        ],

        clusterpwd: [{ validator: checkPwd, trigger: "change" }],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

        virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],

      },

      joinRules: {

        clusterid: [

          { required: true, message: "请输入集群ID", trigger: "change" },

        ],

        clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],

        clusterpwd: [{ validator: checkPwd, trigger: "change" }],

      joinExistRules: {

        clusterid: [{ validator: checkID, trigger: "blur" }],

        clusterip: [{ validator: isIPv4, trigger: "blur" }],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

      },

    };

  },

@@ -277,15 +285,13 @@
  },

  mounted() {

    this.findCluster();

    let _this = this;

    this.intervalTimer = setInterval(() => {

      _this.findCluster();

      this.findCluster();

    }, 30000);

  },

  beforeDestroy() {

    clearInterval(this.intervalTimer);

  },

  props: ["barName"],

  methods: {

    async createCluster(json) {

      let res = await createSerfCluster(json);

@@ -323,12 +329,12 @@
    async joinCluster(json) {

      let res = await joinCluster(json);

      if (res.success) {

        this.members = []

        this.members = [];

      }

      this.$notify({

        title: res.success ? "成功" : "失败",

        message: res.msg,

        type: res.success ? "success" : "error"

        type: res.success ? "success" : "error",

      });

    },

    join(formName) {

@@ -399,6 +405,9 @@
        this.stopSearch();

      }, 10 * 1000);

    },

    openRight( i) {

      this.activePage = i;

    },

    async stopSearch() {

      if (!this.loading) {

        return true;

@@ -407,7 +416,7 @@
        searchNum: this.searchNum,

      })

        .then((res) => {

        this.loading = false;

          this.loading = false;

          this.searchDis = false;

          window.clearInterval(this.scheduleId);

        })

@@ -448,12 +457,29 @@
      this.ruleForm.clusterpwd = uuid.join("");

    },

    exitCluster() {

      clearInterval(this.intervalTimer);

      this.showCurCluster = false;

      this.ruleForm.virtualIp = "";

      this.ruleForm.clustername = "";

      this.ruleForm.clusterpwd = "";

      this.clusterid = "";

      this.$confirm("确定退出集群吗？","提示").then(async () => {

          let res = await leave();

          this.$notify({

            title: res.success ? "成功" : "失败",

            message: res.msg,

            type: res.success ? "success" : "error",

          });

          if (res && res.success) {

            clearInterval(this.intervalTimer);

            this.showCurCluster = false;

            this.ruleForm.virtualIp = "";

            this.ruleForm.clustername = "";

            this.ruleForm.clusterpwd = "";

            this.clusterid = "";

          }

      },(err) => {

        clearInterval(this.intervalTimer);

            this.showCurCluster = false;

            this.ruleForm.virtualIp = "";

            this.ruleForm.clustername = "";

            this.ruleForm.clusterpwd = "";

            this.clusterid = "";

      })

    },

    clearInput(typ) {

      if (typ == 1) {

@@ -480,7 +506,6 @@
      }

    },

    onIpBlur(ip) {

      console.log(ip);

      this.ruleForm.virtualIp = ip;

    },

    async updateCluster(v) {

@@ -563,14 +588,20 @@
    padding: 0 20px;

    justify-content: space-between;

    align-items: center;

    .title{

          font-size: 14px;

    }

    .input-area {

      display: flex;

      width: 340px;

      height: 30px;

      line-height: 30px;

      justify-content: inherit;

      //   padding: 0 20px;

      box-sizing: border-box;

      .icon{

        cursor: pointer;

        // font-size: 18px;

      }

    }

  }

  .exit {

@@ -583,6 +614,7 @@
    line-height: 40px;

    font-size: 14px;

    margin-top: 20px;

    cursor: pointer;

  }

}

.cluster-content {

@@ -599,25 +631,34 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    // background-color: lightpink;

    border-right: 5px solid #f8f8f8;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

      background-color: #f8f8f8; cursor: pointer;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 8px;

      line-height: 40px;

      font-size: 14px;

      line-height: 50px;

      font-size: 15px;

      text-align: left;

      box-sizing: border-box;

      padding: 0 20px;

    }

    .menu-item-active {

      background-color: var(--colorCard);

      color: white;

    }

    .menu-item:hover {

      background-color: var(--colorCard);

      color: white;

    }

  }

  .cluster-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    // background-color: rgba(240, 242, 245, 1);

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    // .create-new .join-exist {

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -646,7 +687,6 @@
    .ip-input-container {

      max-width: none !important;

    }

    // }

    .ntp-bar {

      height: 40px;

      background-color: rgba(248, 248, 248, 1);