From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug

---
 src/pages/vindicate/views/backUp.vue |  355 +++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 226 insertions(+), 129 deletions(-)

diff --git a/src/pages/vindicate/views/backUp.vue b/src/pages/vindicate/views/backUp.vue
index 2f3071f..aa2b81e 100644
--- a/src/pages/vindicate/views/backUp.vue
+++ b/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,8 +208,8 @@
 <style lang="scss">
 .all {
   width: 100%;
+  background-color: #fbfaff;
 }
-
 .backup-content {
   height: 100%;
   display: flex;
@@ -153,51 +217,64 @@
   flex: 1;
   flex-basis: auto;
   box-sizing: border-box;
+  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)
@@ -233,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%;
@@ -252,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;
     }
   }
 }

--
Gitblit v1.8.0