fix ：备份页面组件修改样式修改

2022-04-11 12:29:50 +08:00
parent c4b24fa657
commit dad29bb976
7 changed files with 275 additions and 185 deletions
--- a/nezha-fronted/src/assets/css/components/common/rightBox/backupsBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/backupsBox.scss
@@ -1,7 +1,12 @@
 .right-box{
-  .right-box__container{
  
+  .right-box__container{
+    .form-item__switch{
+      text-align: unset !important;
+    }
    .container__form{
+      .form-tabs{
+
        .el-tabs--card>.el-tabs__header{
          .el-tabs__nav{
            width: 100%;
@@ -25,26 +30,76 @@
        .el-tabs--card>.el-tabs__content{
          display: none;
        }
+      }
      .check_box{
+        
        .el-form-item__content{
+          text-align: unset !important;
+          
          .el-checkbox-button{
            width: calc(100% / 7);
            .el-checkbox-button__inner{
              width: 100%;
              padding: 11px 3px;
            }
+            
+          }
+          .el-checkbox-button .is-focus {
+            .el-checkbox-button__inner{
+            border: none;
+            }
          }
        }
      }
      .check-month_box{
        .el-form-item__content{
          .el-checkbox-button{
-            width: calc(100% / 7);
+            border: 1px solid $--border-color-base;
+            width: calc((100% / 7) - 2px);
            .el-checkbox-button__inner{
              width: 100%;
+              border: none;
          }
        } 
+        .el-checkbox-button .is-checked{
+          border: none;
        }
+        .el-checkbox-button  .is-focus{
+          border: 1px solid $--border-color-base;
+
+        }
+
+        // .el-checkbox-button:nth-of-type(8){
+        //   border-left: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(15){
+        //   border-left: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(22){
+        //   border-left: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(29){
+        //   border-left: 1px solid $--border-color-base;
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(26){
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(27){
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(28){
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(30){
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:nth-of-type(31){
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
+        // .el-checkbox-button:last-of-type{
+        //   border-bottom: 1px solid $--border-color-base;
+        // }
      }
      .start_at{
        .el-form-item__content{
@@ -58,3 +113,4 @@
    }
  }
 }
+}
--- a/nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss
@@ -1,21 +1,36 @@
-
+.backups-table{
  .nz-table2 {
+      .el-table__row{
+        td:last-of-type{
+          // border-bottom: 1px solid $--border-color-light !important;
+          border: none !important;
+        }
+      }
+  }
    .el-table:not(.chart-table) {
      .table-operation-items {
        display: flex;
        justify-content: center;
-      .el-dropdown{
-        .table-operation-item{
-          width: 30px !important;
-          height: 30px !important;
+        
+        .table-operation-edit {
+          background: $--background-color-2;
+          border: 1px solid $--border-color-base;
+          border-radius: 2px;
+          width: 22px;
+          height: 22px;
+          i{
+            font-size: 12px !important;
          }
        }
        .table-operation-del{
-        background: $--button-primary-color;
-        border: 1px solid #DEDEDE;
+          background: $--background-color-2;
+          border: 1px solid $--border-color-base;
          border-radius: 2px;
-        width: 30px;
-        height: 30px;
+          width: 22px;
+          height: 22px;
+          i{
+            font-size: 12px !important;
+          }
        }
        .table-operation-button {
            border: none;
@@ -23,10 +38,10 @@
          color: $--button-primary-color;
          display: flex;
          text-align: center;
-        line-height: 30px;
+          line-height: 22px;
          justify-content: center;
          align-items: center;
-        height: 30px;
+          height: 22px;
          // width: 130px;
          max-width: 98px;
          min-width: 74px;
--- a/nezha-fronted/src/assets/css/components/page/config/backups.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/backups.scss
@@ -37,4 +37,16 @@
      }
    }
  }
+  .backup_box{
+    .el-form-item:last-of-type {
+
+      .el-form-item__content {
+        margin-left: 0 !important;
+        text-align: unset !important;
+      }
+      .nz-btn {
+        margin: 0 10px;
+      }
+    }
+  }
 }
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -1,4 +1,6 @@
 import vm from '../../../main'
+import lodash from 'lodash'
+
 // ipv4 ip校验
 export function host (rule, value, callback) {
  if (!value || value.trim() == '') {
@@ -197,6 +199,15 @@ export function arrLength (rule, value, callback) { // 校验数组
    callback(new Error(vm.$t('validate.required')))
  }
 }
+export function datePicker (rule, value, callback) { // 校验时间选择
+  if(value[0]&&value[1]){
+    callback()
+  }else{
+    callback(new Error(vm.$t('validate.required')))
+  }
+   
+  }
+

 export function sysObjectIdInput (rule, value, callback) {
  const sysId = /^(\d{1,9}\.){0,}[\d]+$/
--- a/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
@@ -17,7 +17,11 @@
          label-width="120px"
          ref="backupsForm"
        >
-          <el-form-item :label="$t('backup.schedule')" prop="type">
+          <el-form-item
+            :label="$t('backup.schedule')"
+            prop="type"
+            class="form-tabs"
+          >
            <el-tabs
              v-model="editBackup.type"
              @tab-click="datasourceChange"
@@ -27,7 +31,8 @@
              <el-tab-pane :label="$t('backup.only')" name="1"> </el-tab-pane>
              <el-tab-pane :label="$t('backup.Daily')" name="2"> </el-tab-pane>
              <el-tab-pane :label="$t('backup.Weekly')" name="3"> </el-tab-pane>
-              <el-tab-pane :label="$t('backup.Monthly')" name="4"> </el-tab-pane>
+              <el-tab-pane :label="$t('backup.Monthly')" name="4">
+              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item
@@ -53,18 +58,28 @@
            </el-time-picker>
          </el-form-item>
          <el-form-item
-            :label="$t('backup.Enable')"
-
-            prop="status"
-            class="form-item__switch"
-            v-if="whoshow !== 2 ? true : false"
+            :label="$t('backup.RepeatEvery')"
+            prop="repeat"
+            v-if="whoshow === 2 || whoshow === 3 ? true : false"
          >
-            <el-switch
-              class="switch"
-              v-model="editBackup.status"
-              @change="statusChange"
+            <el-input
+              v-if="whoshow === 3 ? true : false"
+              size="small"
+              v-model="editBackup.repeat"
+              id="chart-box-title"
+              @change="inputchange"
            >
-            </el-switch>
+              <template slot="append">{{ $t("backup.week") }}</template>
+            </el-input>
+            <el-input
+              v-if="whoshow === 2 ? true : false"
+              size="small"
+              v-model="editBackup.repeat"
+              id="chart-box-title"
+              @change="inputchange"
+            >
+              <template slot="append">{{ $t("backup.day") }}</template>
+            </el-input>
          </el-form-item>
          <el-form-item
            :label="$t('backup.DayOfMonth')"
@@ -84,20 +99,6 @@
              >
            </el-checkbox-group>
          </el-form-item>
-          <el-form-item
-            :label="$t('backup.backupRetention')"
-
-            prop="retention"
-            v-if="whoshow !== 2 ? true : false"
-          >
-            <el-input
-              maxlength="64"
-              size="small"
-              v-model="editBackup.retention"
-              id="chart-box-title"
-              @change="inputchange"
-            ></el-input>
-          </el-form-item>
          <el-form-item
            :label="$t('backup.WeekOn')"
            prop="checkDay"
@@ -117,28 +118,31 @@
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
-            :label="$t('backup.RepeatEvery')"
-            prop="repeat"
-            v-if="whoshow === 2 || whoshow === 3 ? true : false"
+            :label="$t('backup.backupRetention')"
+            prop="retention"
+            v-if="whoshow !== 2 ? true : false"
          >
            <el-input
-              v-if="whoshow === 3 ? true : false"
+              maxlength="64"
              size="small"
-              v-model="editBackup.repeat"
+              v-model="editBackup.retention"
              id="chart-box-title"
              @change="inputchange"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item
+            :label="$t('backup.Enable')"
+            prop="status"
+            class="form-item__switch"
+            v-if="whoshow !== 2 ? true : false"
          >
-              <template slot="append">{{$t('backup.week')}}</template>
-            </el-input>
-            <el-input
-              v-if="whoshow === 2 ? true : false"
-              size="small"
-              v-model="editBackup.repeat"
-              id="chart-box-title"
-              @change="inputchange"
+            <el-switch
+              class="switch"
+              v-model="editBackup.status"
+              @change="statusChange"
            >
-              <template slot="append">{{$t('backup.day')}}</template>
-            </el-input>
+            </el-switch>
          </el-form-item>
        </el-form>
      </div>
@@ -167,7 +171,8 @@
 <script>
 import bus from "@/libs/bus";
 import { put } from "@/http";
-import { arrLength } from "@/components/common/js/validate";
+import { arrLength, datePicker } from "@/components/common/js/validate";
+import moment from "moment-timezone";

 export default {
  name: "backupsBox",
@@ -206,13 +211,7 @@ export default {
            trigger: "change",
          },
        ],
-        datepicker: [
-          {
-            required: true,
-            message: this.$t("validate.required"),
-            trigger: "change",
-          },
-        ],
+        datepicker: [{ validator: datePicker, trigger: "blur" }],
        checkDays: [
          {
            required: true,
@@ -244,7 +243,15 @@ export default {
        ],
        checkDay: [{ validator: arrLength, trigger: "blur" }],
      },
-      week: [this.$t('week.Mon'),this.$t('week.Tue'),this.$t('week.Wed'),this.$t('week.Thu'),this.$t('week.Fri'),this.$t('week.Sat'),this.$t('week.Sun'),],
+      week: [
+        this.$t("week.Mon"),
+        this.$t("week.Tue"),
+        this.$t("week.Wed"),
+        this.$t("week.Thu"),
+        this.$t("week.Fri"),
+        this.$t("week.Sat"),
+        this.$t("week.Sun"),
+      ],
      month: [
        1,
        2,
@@ -326,20 +333,26 @@ export default {
    },
    statusChange(item) {
      this.$forceUpdate();
-      console.log(item);
-      if (item) {
+      if (item == true) {
        this.editBackup.state = 1;
-        this.$emit("statechange", true);
      } else {
        this.editBackup.state = 0;
-        this.$emit("statechange", false);
      }
    },
    save() {
      this.$refs.backupsForm.validate((valid) => {
        if (valid) {
+          this.editBackup.datepicker[0] = bus
+            .timeFormate(this.editBackup.datepicker[0])
+            .split(" ")[0];
+
          this.editBackup.stime = this.editBackup.datepicker.join(" ");
-          this.editBackup.stime = this.timezoneToUtcTime(this.editBackup.stime); // 将本地时间转 utc时间
+          let offset = localStorage.getItem("nz-sys-timezone");
+          offset = moment.tz(offset).format("Z");
+          this.editBackup.stime = new Date(this.editBackup.stime).getTime();
+          offset = Number.parseInt(offset);
+          this.editBackup.stime -= offset * 60 * 60 * 1000;
+
          put("/sys/backup", {
            state: Number(this.editBackup.state),
            schedule: {
@@ -352,7 +365,6 @@ export default {
          }).then((res) => {
            if (res.code === 200) {
              this.esc(true);
-              console.log(this.editBackup);
            }
          });
        }
@@ -362,7 +374,6 @@ export default {
      this.$forceUpdate();
    },
    datasourceChange(tab) {
-      console.log(tab.name);
      switch (tab.name) {
        case "2":
          this.whoshow = 2;
@@ -377,8 +388,6 @@ export default {
          this.whoshow = 4;
          break;
      }
-      console.log(this.whoshow);
-      console.log(this.editBackup);
      this.$forceUpdate();
    },
    clickOutside() {
@@ -395,8 +404,6 @@ export default {
      deep: true,
      immediate: true,
      handler(n) {
-        //   debugger
-        console.log(n);
        this.editBackup = JSON.parse(JSON.stringify(n));
        this.editBackup.checkDay = [];
        this.editBackup.checkDays = [];
@@ -406,7 +413,6 @@ export default {
        const time = stime1.split(" ");
        time[0] = stime;
        this.$set(this.editBackup, "datepicker", time);
-        console.log("obj", this.editBackup);
        if (this.editBackup.state == 1) {
          this.editBackup.status = true;
          this.$emit("statechange", true);
@@ -494,10 +500,11 @@ export default {
    "editBackup.datepicker": {
      deep: true,
      handler(n) {
-        this.editBackup.datepicker[0] = bus.timeFormate(
-          new Date(n[0]),
-          "YYYY-MM-DD"
-        );
+        console.log(n);
+        this.editBackup.datepicker[0] = bus
+          .timeFormate(new Date(n[0]))
+          .split(" ")[0];
+        console.log(this.editBackup.datepicker[0]);
      },
    },
  },
--- a/nezha-fronted/src/components/common/table/settings/backupsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/backupsTable.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="backups-table">
  <el-table :data="isConfigurations ? tableData : tableData2" border>
    <el-table-column
      class="table-column__head"
@@ -23,10 +24,10 @@
          {{ tableData[0].schedule && utcTimeToTimezoneStr(tableData[0].schedule.stime) ?utcTimeToTimezoneStr(tableData[0].schedule.stime):'' }}
        </span>
        <span v-if="item.prop === 'state'">
-          <el-switch class="switch" v-model="switchStatus"> </el-switch>
+          <el-switch class="switch" v-model="tableData[0].state" disabled> </el-switch>
        </span>
        <span v-if="item.prop === 'time'">
-          {{ scope.row.time ? scope.row.time : "" }}
+          {{ scope.row.time ? changeDate(scope.row.time ) : "" }}
        </span>
        <span v-if="item.prop === 'size'">
          {{ scope.row.size ? getNum(scope.row.size) : "" }}
@@ -34,7 +35,9 @@
        <span v-if="item.prop === 'fileName'"> {{ scope.row.fileName }} </span>
      </template>
    </el-table-column>
-    <el-table-column :resizable="false" fixed="right">
+    <el-table-column :resizable="false" fixed="right" 
+    width="165px"
+    >
      <div
        slot-scope="scope"
        class="table-operation-items"
@@ -43,46 +46,30 @@
        <button class="table-operation-button" @click="backupNow(scope.row)">
          {{$t('backup.backupNow')}}
        </button>
-        <el-dropdown size="medium" trigger="click" @command="tableOperation">
-          <div class="table-operation-item table-operation-item--more">
-            <i class="nz-icon nz-icon-more3"></i>
-          </div>
-          <el-dropdown-menu
-            slot="dropdown"
-            class="right-box-select-top right-public-box-dropdown-top"
-          >
-            <el-dropdown-item command="edit"
-              ><i class="nz-icon nz-icon-edit"></i
-              ><span class="operation-dropdown-text">{{
-                $t("overall.edit")
-              }}</span></el-dropdown-item
-            >
-            <el-dropdown-item @click="tableOperation('del', scope.row)"
-              ><i class="nz-icon nz-icon-delete"></i
-              ><span class="operation-dropdown-text">{{
-                $t("overall.delete")
-              }}</span></el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </el-dropdown>
+        <button class="table-operation-edit" @click="edit(scope.row)">
+         <i class="nz-icon-gear nz-icon"></i>
+        </button>
      </div>
+
      <div slot-scope="scope" v-else class="table-operation-items">
        <button class="table-operation-button" @click="Restore(scope.row)">
          {{$t('backup.Restore')}}
        </button>
-        <button class="table-operation-del" @click="del(scope.row)">
-          <i class="nz-icon nz-icon-delete"></i>
+        <button class="table-operation-edit" @click="del(scope.row)">
+          <i class="nz-icon nz-icon-delete" style="font-size='12px'"></i>
        </button>
      </div>
    </el-table-column>
  </el-table>
+</div>
 </template>

 <script>
-import { get, post } from '@/http'
+import { get, post ,put} from '@/http'
 import lodash from 'lodash'
 import bus from '@/libs/bus'

+
 export default {
  name: 'backupsTable',
  mixins: [],
@@ -91,11 +78,10 @@ export default {
    loading: Boolean,
    customTableTitle: Array,
    isConfigurations: Boolean,
-    isState: Boolean
  },
  data () {
    return {
-      switchStatus: true,
+        
      tableData: [
        {
          retention: '',
@@ -129,6 +115,21 @@ export default {
  },

  methods: {
+      Restore(row){
+          put('/sys/backup/restore',{filename:row.fileName}).then(res=>{
+            if(res.code == 200){
+                this.getTableData('backup')
+            }
+        })
+      },
+      del(item){
+          console.log(item);
+      },
+      changeDate(item){
+          let time =Date.parse(item)
+          let time1 = this.timeFormate(time)
+          return time1
+      },
      getNum(item){
          return bus.getNumStr(item)
      },
@@ -138,8 +139,7 @@ export default {
              if (res.code === 200) {
                if (res.data) {
                  this.tableData[0].retention = res.data.retention
-                  this.tableData[0].state = res.data.state
-                  this.switchStatus = res.data.state === 1
+                  this.tableData[0].state = res.data.state == 1? true :false
                  for (const i in res.data.schedule) {
                    this.tableData[0].schedule[i] = res.data.schedule[i]
                  }
@@ -154,19 +154,31 @@ export default {
                }
              }
            })
-        }else{
-            await get('/sys/backup').then((res) => {
+        }else if(item == 'backup'){
+             get('/sys/backup').then((res) => {
              if (res.code === 200) {
                if (res.data) {
                  this.tableData[0].retention = res.data.retention
-                  this.tableData[0].state = res.data.state
-                  this.switchStatus = res.data.state === 1
+                  this.tableData[0].state = res.data.state == 1? true :false
                  for (const i in res.data.schedule) {
                    this.tableData[0].schedule[i] = res.data.schedule[i]
                  }
                }
              }
            })
+      this.$forceUpdate();
+
+        }else if(item == 'recent'){
+             post('/sys/backup/list').then((res) => {
+              if (res.code === 200) {
+                if (res.data) {
+                    this.tableData2 = res.data
+                    
+                }
+              }
+            })
+      this.$forceUpdate();
+
        }
    },
    backupNow (item) {
@@ -174,30 +186,12 @@ export default {
        console.log(res)
      })
    },
-    tableOperation (command) {
-      if (command) {
-        if (command === 'edit') {
+    edit () {
          this.$emit('edit', this.tableData[0])
-        } else if (command === 'del') {
-        }
-      }
    }
  },

  watch: {
-    isState: {
-      deep: true,
-      handler (n) {
-        this.switchStatus = n
-        this.tableData[0].state = n === true ? 1 : 0
-      }
-    },
-    switchStatus: {
-      deep: true,
-      handler (n) {
-        this.tableData[0].state = n === true ? 1 : 0
-      }
-    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/page/config/backups.vue
+++ b/nezha-fronted/src/components/page/config/backups.vue
@@ -14,7 +14,6 @@
          ref="backupsTable1"
            :custom-table-title="customTableTitle"
            :is-configurations="true"
-            :is-state ='isState'
            @edit="edit"
          >
          </backups-table>
@@ -42,7 +41,7 @@
      </nz-data-list>
    </div>
    <transition name="right-box">
-      <backups-box v-if="rightBoxshow"  :obj="object" @close="closeRightBox" @statechange='statechange'></backups-box>
+      <backups-box v-if="rightBoxshow"  :obj="object" @close="closeRightBox" class="backup_box"></backups-box>
    </transition>
  </div>
 </template>
@@ -87,7 +86,6 @@ export default {
        }
      ],
      rightBoxshow: false,
-      isState: '',
      isRefresh: ''
    }
  },
@@ -117,13 +115,10 @@ export default {
    },
    closeRightBox (refresh) {
      if (refresh) {
-        this.$refs.backupsTable1.getTableData('backupsTable1')
+        this.$refs.backupsTable1.getTableData('backup')
      }
      this.rightBoxshow = false
    },
-    statechange (Boolean) {
-      this.isState = Boolean
-    }
  },

  watch: {}