集群管理搜索集群

heyujie

2022-01-26 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d

 src/pages/vindicate/views/backUp.vue

@@ -2,14 +2,18 @@
  <div class="all">

    <div class="backup-content">

      <div class="backup-center" ref="left">

        <div class="menu-item" @click="openRight(i)"  v-for="(item, i) in tabList"  :class="activePage == i ? 'menu-item-active' : ''"

          :key="i">

        <div

          class="menu-item"

          @click="openRight(i)"

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

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

          :key="i"

        >

          <div class="con">

            <span class="icon iconfont">{{ item.icon }}</span>

            <span class="menu-text">{{ item.name }}</span>

          </div>

        </div>

        
      </div>

      <div class="backup-right">

        <div class="auto" v-if="activePage == 0">

@@ -24,14 +28,18 @@
          </div>

          <div class="bar">

            <div class="name">备份目录</div>

            <input type="file" id="file_input" webkitdirectory directory />

            <!-- <input type="file" id="file_input" webkitdirectory directory /> -->

            <el-input

              v-model="dir"

              :placeholder="'请输入备份目录'"

              size="small"

            ></el-input>

          </div>

          <div class="bar">

            <div class="name">备份间隔 / 天</div>

            <el-input

              v-model="interval"

              v-model.number="interval"

              :placeholder="'请输入天数'"

              @change="handleChange"

              size="small"

            ></el-input>

            <!-- :controls="false" -->

@@ -39,9 +47,8 @@
          <div class="bar">

            <div class="name">备份数据保存时间 / 天</div>

            <el-input

              v-model="lifeSpan"

              v-model.number="lifeSpan"

              placeholder="请输入天数"

              @change="handleChange"

              size="small"

            ></el-input>

          </div>

@@ -51,6 +58,10 @@
              >立即备份</el-button

            >

          </div>



          <el-button class="save-btn" type="primary" @click="saveBakConfig"

            >保存</el-button

          >

        </div>

        <div class="recover" v-if="activePage == 1">

          <div class="title">显示备份的文件范围：{{ 5 }}</div>

@@ -62,9 +73,9 @@
          </div>



          <div class="bar" v-for="(item, i) in fileList" :key="i">

            <span class="time">{{ item.time }}</span>

            <span class="time">{{ item.name }}</span>

            <span class="operation">恢复</span>

            <span class="time">{{ item }}</span>

            <span class="time">{{ item }}</span>

            <span class="operation" @click="recoverFile(item)">恢复</span>

          </div>

        </div>

      </div>

@@ -73,70 +84,121 @@
</template>



<script>

import {

  getBakConfig,

  setBakConfig,

  backupRN,

  getBackupList,

  recoverBackup,

} from "@/api/system";

export default {

  mounted() {},

  created() {

    this.getBakConfig();

    this.getBakFileList();

  },

  data() {

    return {

       tabList: [

      tabList: [

        { name: "自动备份设置", icon: "\ue6f2" },

        { name: "从备份中恢复", icon: "\ue6db" },

      ],

      fileList: [

        { time: "2010-10-02 12:30:09", name: "文件1" },

        { time: "2010-10-02 12:30:09", name: "文件12121212121" },

        { time: "2010-10-02", name: "文件2211" },

        { time: "2011", name: "备份文件2" },

      ],

      warnSpn: "\ue71c",

      fileList: [],

      activePage: 0,

      interval: "",

      lifeSpan: "",

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      isBackUp: true,

      interval: null,

      lifeSpan: null,

      dir: "",

      isBackUp: false,

    };

  },

  methods: {

    getBakFileList() {

      getBackupList().then((res) => {

        this.fileList = res.data;

      });

    },

    getBakConfig() {

      getBakConfig().then((res) => {

        this.isBackUp = res.data.enable;

        this.lifeSpan = res.data.saveDays;

        this.interval = res.data.period;

        this.dir = res.data.dir;

      });

    },

    openRight(i) {

      this.activePage = i;

    },

    handleChange() {},

    backUpNow() {

      this.$confirm("您是否确认立即备份所有应用的配置数据？", "立即备份", {

      const h = this.$createElement;

      const icon = this.$msgbox({

        title: "",

        message: h(

          "div",

          {

            style:

              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",

          },

          [

            h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),

            h("span", { class: "warn-title" }, "立即备份"),

            h(

              "span",

              { class: "warn-dec" },

              "确认立即备份所有应用的配置数据？"

            ),

          ]

        ),

        showCancelButton: true,

        confirmButtonText: "确定",

        cancelButtonText: "取消",

      }).then(() => {

        this.$message({

          type: "success",

          message: "备份成功",

        });

        backupRN({

          enable: this.isBackUp,

          dir: this.dir,

          period: this.interval,

          saveDays: this.lifeSpan,

        })

          .then((res) => {

            if (res.code == 200) {

              this.$notify.success(res.msg);

            } else {

              this.$notify.error(res.msg);

            }

          })

          .catch((err) => {

            this.$notify.error(err.msg);

          });

      });

      //  .then((resp) => {

      //         if (resp.success) {

      //           this.$message({

      //             type: "success",

      //             message: "删除数据成功",

      //           });

      //           this.loading = false;

      //         }

      //       })

      //       .catch((err) => {

      //         this.$message({

      //           type: "error",

      //           message: "删除数据失败！",

      //         });

      //         this.loading = false;

      //       });

    },

    recoverFile(bakDir) {

      recoverBackup({bakDir}).then((res) => {

        debugger

        res.data

      })

    },

    saveBakConfig() {

      setBakConfig({

        enable: this.isBackUp,

        dir: this.dir,

        period: this.interval,

        saveDays: this.lifeSpan,

      })

        .then((res) => {

          if (res.code == 200) {

            this.$notify.success(res.msg);

            this.getBakConfig();

          } else {

            this.$notify.error(res.msg);

          }

        })

        .catch((err) => {

          this.$notify.error(err.msg);

        });

    },

    switchChange(val) {

      console.log(val);

      this.saveBakConfig();

    },

  },

};

@@ -144,7 +206,7 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

  background-color: #fbfaff;

}



.backup-content {

@@ -154,44 +216,55 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  border-top:2px solid #E1E0E6 ;

  border-left:2px solid #E1E0E6 ;

  border-top: 4px solid rgb(242, 242, 247);

  border-left: 4px solid rgb(242, 242, 247);



  .backup-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;

    padding: 9px 10px 0 10px;

    border-right: 4px solid rgb(242, 242, 247);

    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 50px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      cursor: pointer;

      padding: 0 20px;

      padding: 0 15px;

      display: flex;

      justify-content: space-between;

      .con {

        .iconfont {

          font-size: 20px;

          line-height: 32px;

          width: 32px;

          height: 26px;

          margin-right: 10px;

          color: #333;

        }

        .menu-text {

          font-size: 15px;

          font-size: 16px;

          font-weight: 700;

        }

      }

    }

    .menu-item-active {

      color: #fff;

      background-color: var(--colorCard);

      background-color: var(--colorCard) !important;

      .iconfont {

        color: #fff !important;

      }

      .menu-text {

        color: #fff;

      }

    }

    .menu-item:hover {

      color: #fff;

      background-color: var(--colorCard);

      background-color: #f2f2f7;

    }

  }

  .backup-right {

@@ -200,7 +273,6 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

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

      > .el-form-item__label:before,

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

@@ -303,7 +375,7 @@
          text-align: left;

        }

        .operation {

          color: rgba(26, 115, 232, 1);

          color: var(--colorCard);

          cursor: pointer;

          width: 10%;

          text-align: right;

@@ -311,15 +383,12 @@
      }

    }

    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      width: 251px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

      margin-top: 80px;

      background: var(--colorCard) !important;

      border: 1px solid var(--colorCard) !important;

      border-radius: 25px;

    }

  }

}