修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 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,17 @@
          </div>

          <div class="bar">

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

            <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 +46,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,20 +57,28 @@
              >立即备份</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>



          <div class="table-head">

            <span class="line1">自动备份时间</span>

            <span class="line1">备份文件名称</span>

            <span class="line2">操作</span>

          </div>

          <div class="table-body">

            <div class="table-head">

              <span class="line1">自动备份时间</span>

              <span class="line1">备份文件名称</span>

              <span class="line2">恢复备份</span>

            </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>

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

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

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

              <span class="operation iconfont" @click="recoverFile(item)"

                >&#xe666;

              </span>

            </div>

          </div>

        </div>

      </div>

@@ -73,70 +87,120 @@
</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,9 +208,8 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

  background-color: #fbfaff;

}



.backup-content {

  height: 100%;

  display: flex;

@@ -154,53 +217,64 @@
  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 {

    flex: 1;

    flex-basis: auto;

    padding: 10px;

    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)

@@ -236,16 +310,25 @@
      .bar {

        display: flex;

        align-items: center;

        height: 50px;

        padding: 0 25px;

        background-color: #f8f8f8;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 10px;

        border-radius: 8px;

        margin-bottom: 10px;

        height: 48px;

        background-color: #f2f2f7;

        .el-button--small,

        .el-button--small.is-round {

          padding: 9px 19px;

          background: var(--colorCard) !important;

          border-radius: 25px;

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

        }

        .name {

          font-size: 15px;

          font-size: 14px;

          text-align: left;

          min-width: 180px;

          font-weight: 600;

          min-width: 170px;

        }

        .el-input {

          width: 100%;

@@ -255,71 +338,82 @@
          .el-input__inner {

            border: none;

            border-radius: 8px;

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

            text-align: left;

            background: #fbfaff;

            border-radius: 20px;

          }

        }

      }

    }

    .recover {

      .title {

        font-size: 13px;

        color: #868686;

        text-align: left;

        padding: 0 10px;

        margin-bottom: 10px;

      }

      .table-head {

        height: 30px;

        line-height: 30px;

        display: flex;

        // justify-content: space-between;

        box-sizing: border-box;

        font-size: 15px;

        padding: 0 10px;

        margin-bottom: 5px;

        .line1 {

          flex: 4;

          text-align: left;

        }

        .line2 {

          flex: 1;

          text-align: right;

        }

      }

      .bar {

        height: 40px;

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

        display: flex;

        box-sizing: border-box;

        padding: 0 10px;

        align-items: center;

        border-radius: 8px;

        color: #797979;

        font-size: 14px;

        color: #333333;

        text-align: left;

        margin-bottom: 10px;

        .time {

          width: 45%;

          text-align: left;

        line-height: 18px;

        font-weight: bold;

      }

      .table-body {

        box-sizing: border-box;

        padding: 10px 20px;

        padding-bottom: 5px;

        background: #f2f2f7;

        border-radius: 8px;

        .table-head {

          height: 30px;

          line-height: 30px;

          display: flex;

          box-sizing: border-box;

          font-size: 15px;

          padding: 0 10px;

          margin-bottom: 5px;

          font-size: 14px;

          color: #666666;

          .line1 {

            flex: 3;

            text-align: left;

          }

          .line2 {

            flex: 1;

            text-align: left;

            min-width: 60px;

          }

        }

        .operation {

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

          cursor: pointer;

          width: 10%;

          text-align: right;

        .bar {

          height: 32px;

          background-color: #ffffff;

          display: flex;

          box-sizing: border-box;

          padding: 0 10px;

          align-items: center;

          border-radius: 20px;

          color: #333333;

          font-size: 12px;

          margin-bottom: 8px;

          font-weight: bold;

          .time {

            width: 42.857%;

            text-align: left;

          }

          .operation {

            color: var(--colorCard);

            cursor: pointer;

            width: 14.2857%;

            min-width: 60px;

            text-align: left;

            font-size: 20px;

          }

        }

      }

    }

    .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: 100px;

      background: var(--colorCard) !important;

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

      border-radius: 25px;

    }

  }

}