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 | 358 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 226 insertions(+), 132 deletions(-) diff --git a/src/pages/vindicate/views/backUp.vue b/src/pages/vindicate/views/backUp.vue index 075b2a4..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)" + > + </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; } } } -- Gitblit v1.8.0