备份还原ui新

heyujie

2022-02-09 211cd7469ebc7df813ffd320c90f64fd1c2f1aee

 src/pages/vindicate/views/backUp.vue

@@ -28,7 +28,6 @@
          </div>

          <div class="bar">

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

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

            <el-input

              v-model="dir"

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

@@ -66,16 +65,20 @@
        <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 }}</span>

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

            <span class="operation" @click="recoverFile(item)">恢复</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>

@@ -92,7 +95,6 @@
  recoverBackup,

} from "@/api/system";

export default {

  mounted() {},

  created() {

    this.getBakConfig();

    this.getBakFileList();

@@ -173,10 +175,10 @@
      });

    },

    recoverFile(bakDir) {

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

        debugger

        res.data

      })

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

        debugger;

        res.data;

      });

    },

    saveBakConfig() {

      setBakConfig({

@@ -208,7 +210,6 @@
  width: 100%;

  background-color: #fbfaff;

}



.backup-content {

  height: 100%;

  display: flex;

@@ -270,6 +271,7 @@
  .backup-right {

    flex: 1;

    flex-basis: auto;

    padding: 10px;

    overflow: auto;

    box-sizing: border-box;

    position: relative;

@@ -308,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%;

@@ -327,65 +338,79 @@
          .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: var(--colorCard);

          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 {

      width: 251px;

      height: 40px;

      margin-top: 80px;

      margin-top: 100px;

      background: var(--colorCard) !important;

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

      border-radius: 25px;