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

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 @@
     }
   }
 }
+}

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{
+        .table-operation-edit {
-          width: 30px !important;
+          background: $--background-color-2;
-          height: 30px !important;
+          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;
+          background: $--background-color-2;
-        border: 1px solid #DEDEDE;
+          border: 1px solid $--border-color-base;
           border-radius: 2px;
-        width: 30px;
+          width: 22px;
-        height: 30px;
+          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;

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;
+      }
+    }
+  }
 }

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]+$/

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')"
+            :label="$t('backup.RepeatEvery')"
-
+            prop="repeat"
-            prop="status"
+            v-if="whoshow === 2 || whoshow === 3 ? true : false"
-            class="form-item__switch"
-            v-if="whoshow !== 2 ? true : false"
           >
-            <el-switch
+            <el-input
-              class="switch"
+              v-if="whoshow === 3 ? true : false"
-              v-model="editBackup.status"
+              size="small"
-              @change="statusChange"
+              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')"
+            :label="$t('backup.backupRetention')"
-            prop="repeat"
+            prop="retention"
-            v-if="whoshow === 2 || whoshow === 3 ? true : false"
+            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-switch
-            </el-input>
+              class="switch"
-            <el-input
+              v-model="editBackup.status"
-              v-if="whoshow === 2 ? true : false"
+              @change="statusChange"
-              size="small"
-              v-model="editBackup.repeat"
-              id="chart-box-title"
-              @change="inputchange"
             >
-              <template slot="append">{{$t('backup.day')}}</template>
+            </el-switch>
-            </el-input>
           </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: [
+        datepicker: [{ validator: datePicker, trigger: "blur" }],
-          {
-            required: true,
-            message: this.$t("validate.required"),
-            trigger: "change",
-          },
-        ],
         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 == true) {
-      if (item) {
         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(
+        console.log(n);
-          new Date(n[0]),
+        this.editBackup.datepicker[0] = bus
-          "YYYY-MM-DD"
+          .timeFormate(new Date(n[0]))
-        );
+          .split(" ")[0];
+        console.log(this.editBackup.datepicker[0]);
       },
     },
   },

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">
+        <button class="table-operation-edit" @click="edit(scope.row)">
-          <div class="table-operation-item table-operation-item--more">
+         <i class="nz-icon-gear nz-icon"></i>
-            <i class="nz-icon nz-icon-more3"></i>
+        </button>
-          </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>
       </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)">
+        <button class="table-operation-edit" @click="del(scope.row)">
-          <i class="nz-icon nz-icon-delete"></i>
+          <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.tableData[0].state = res.data.state == 1? true :false
-                  this.switchStatus = res.data.state === 1
                   for (const i in res.data.schedule) {
                     this.tableData[0].schedule[i] = res.data.schedule[i]
                   }
@@ -154,19 +154,31 @@ export default {
                 }
               }
             })
-        }else{
+        }else if(item == 'backup'){
-            await get('/sys/backup').then((res) => {
+             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.tableData[0].state = res.data.state == 1? true :false
-                  this.switchStatus = res.data.state === 1
                   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) {
+    edit () {
-      if (command) {
-        if (command === '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>

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: {}