nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue

<template>
  <div
    v-clickoutside="{ obj: editBackup, func: esc }"
    class="right-box "
  >
    <div class="right-box__header">
      <div class="header__title">{{ editBackup.name }}</div>
      <div class="header__operation">
        <span v-cancel="{ obj: editBackup, func: esc }"
          ><i class="nz-icon nz-icon-close"></i
        ></span>
      </div>
    </div>
    <div class="right-box__container right-box-container__left">
      <div class="container__form">
        <el-form
          :model="editBackup"
          :rules="rules"
          label-position="top"
          label-width="120px"
          ref="backupsForm"
        >
          <el-form-item label="schedule" prop="type">
            <el-tabs
              v-model="editBackup.type"
              @tab-click="datasourceChange"
              type="card"
              class="backups-info-tab"
            >
              <el-tab-pane label="One time only" name="1"> </el-tab-pane>
              <el-tab-pane label="Daily" name="2"> </el-tab-pane>
              <el-tab-pane label="Weekly" name="3"> </el-tab-pane>
              <el-tab-pane label="Monthly" name="4"> </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label="Start at" prop="datepicker" v-if="whoshow" class="start_at">
            <my-date-picker
              v-model="editBackup.datepicker[0]"
              type="date"
              :format="timeFormatStrToDatePickFormat(dateFormatStr)"
              placeholder="选择日期"
            >
            </my-date-picker>

            <el-time-picker
              :value-format="'HH:mm:ss'"
              :format="'HH:mm:ss'"
              v-model="editBackup.datepicker[1]"
              placeholder="选择时间"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item
            label="Enable"
            prop="status"
            class="form-item__switch"
            v-if="whoshow !== 2 ? true : false"
          >
            <el-switch
            class="switch"
              v-model="editBackup.status"
              @change="statusChange"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="Every day of the months"
            prop="checkDays"
            v-if="whoshow === 4 ? true : false"
            style=""
          >
            <el-checkbox-group
              v-model="editBackup.checkDays"
              @change="changeCheck"
            >
              <el-checkbox-button
                v-for="(item, day) in month"
                :label="day"
                :key="item"
                >{{ item }}</el-checkbox-button
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="Backup Retention"
            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="Week on"
            prop="checkDay"
            v-if="whoshow === 3 ? true : false"
            class="check_box"
          >
            <el-checkbox-group
              v-model="editBackup.checkDay"
              @change="changeCheck"
            >
              <el-checkbox-button
                v-for="(day, index) in week"
                :label="index"
                :key="index"
                >{{ week[index] }}</el-checkbox-button
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="Repeat every"
            prop="repeat"
            v-if="whoshow === 2 || whoshow === 3 ? true : false"
          >
            <el-input
              v-if="whoshow === 3 ? true : false"
              size="small"
              v-model="editBackup.repeat"
              id="chart-box-title"
              @change="inputchange"
            >
              <template slot="append">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">days</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="right-box__footer">
      <button
        id="asset-edit-cancel"
        v-cancel="{ obj: editBackup, func: esc }"
        class="footer__btn footer__btn--light"
      >
        <span>{{ $t("overall.cancel") }}</span>
      </button>
      <button
        id="asset-edit-save"
        :class="{ 'footer__btn--disabled': prevent_opt.save }"
        :disabled="prevent_opt.save"
        class="footer__btn"
        @click="save"
      >
        <span>{{ $t("overall.save") }}</span>
      </button>
    </div>
  </div>
</template>

<script>
import bus from '@/libs/bus'
import { put } from '@/http'

export default {
  name: 'backupsBox',
  props: {
    obj: {
      type: Object
    }
  },
  data () {
    return {
      editBackup: {
        status: '',
        checkDays: [],
        checkDay: [],
        timepicker: '',
        datepicker: '',
        retention: '',
        state: '',
        schedule: {
          repeat: '',
          stime: '',
          type: '',
          nums: []
        }
      },
      whoshow: '',
      activeName: '',
      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
      rules: {
        type: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        datepicker: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        checkDays: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        retention: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: ['blur', 'change']
          }
        ],
        Status: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        repeat: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        checkDay: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ]
      },
      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      month: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        'Last'
      ]
    }
  },

  components: {},

  computed: {},

  created () {
    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
    if (dateFormatStr) {
      this.dateFormatStr = dateFormatStr.split(' ')[0]
    } else {
      this.dateFormatStr = 'YYYY-MM-DD'
    }
  },

  beforeMount () {},

  mounted () {
  },

  methods: {

    changeCheck (item) {
      if (this.editBackup.type == 3) {
        const nums = []
        this.editBackup.nums = []
        for (const i in this.editBackup.checkDay) {
          nums.push(Number(this.editBackup.checkDay[i]) + 1)
        }
        console.log(nums)
        this.editBackup.nums = nums
      } else if (this.editBackup.type == 4) {
        const nums = []
        this.editBackup.nums = []
        this.editBackup.checkDays.forEach((e, i) => {
          if (e === 31) {
            nums.push(-1)
          } else {
            nums.push(Number(this.editBackup.checkDays[i]) + 1)
          }
        })
        console.log(nums)
        this.editBackup.nums = nums
      }
      this.$forceUpdate()
    },
    statusChange (item) {
      this.$forceUpdate()
      console.log(item)
      if (item) {
        this.editBackup.state = 1
        this.$emit('statechange', true)
      } else {
        this.editBackup.state = 0
        this.$emit('statechange', false)
      }
    },
    save () {
      console.log(this.editBackup)

      this.editBackup.stime = this.editBackup.datepicker.join(' ')
      this.editBackup.stime = this.timezoneToUtcTime(this.editBackup.stime) // 将本地时间转 utc时间
      put('/sys/backup', {
        state: Number(this.editBackup.state),
        schedule: {
          type: Number(this.editBackup.type),
          stime: this.editBackup.stime,
          repeat: Number(this.editBackup.repeat),
          nums: this.editBackup.nums
        },
        retention: Number(this.editBackup.retention)
      }).then((res) => {
        if (res.code === 200) {
          this.esc(true)
        }
      })
    },
    inputchange (n) {
      this.$forceUpdate()
    },
    datasourceChange (tab) {
      console.log(tab.name)
      switch (tab.name) {
        case '2':
          this.whoshow = 2
          break
        case '1':
          this.whoshow = 1
          break
        case '3':
          this.whoshow = 3
          break
        case '4':
          this.whoshow = 4
          break
      }
      console.log(this.whoshow)
      console.log(this.editBackup)
      this.$forceUpdate()
    },
    clickOutside () {
      this.esc(false)
    },
    /* 关闭弹框 */
    esc (refresh) {
      this.$emit('close', refresh)
    }
  },

  watch: {
    obj: {
      deep: true,
      immediate: true,
      handler (n) {
        //   debugger
        console.log(n)
        this.editBackup = JSON.parse(JSON.stringify(n))
        this.editBackup.checkDay = []
        this.editBackup.checkDays = []
        this.editBackup.type = this.editBackup.type + ''
        const stime1 = this.utcTimeToTimezoneStr(this.editBackup.stime)
        const stime = this.utcTimeToTimezone(this.editBackup.stime)
        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)
        } else {
          this.editBackup.status = false
          this.$emit('statechange', false)
        }
        switch (this.editBackup.type) {
          case '1':
            this.activeName = '1'
            this.whoshow = 1
            break
          case '2':
            this.activeName = '2'
            this.whoshow = 2
            break
          case '3':
            this.activeName = '3'
            this.whoshow = 3
            break
          case '4':
            this.activeName = '4'
            this.whoshow = 4
            break
        }
        const checkdays = []

        this.checkDay = []
        if (this.editBackup.type == 3) {
          this.editBackup.nums.forEach((e) => {
            checkdays.push(e - 1)
            if (e === -1) {
              checkdays.push(6)
            }
          })
          // for (let i in checkdays) {
          //   this.checkDay.push(this.week[i]);
          // }
          this.$set(this.editBackup, 'checkDay', checkdays)

          //   this.editBackup.checkDay = checkdays
        } else if (this.editBackup.type == 4) {
          this.editBackup.nums.forEach((e) => {
            if (e === -1) {
              checkdays.push(31)
            } else {
              checkdays.push(e - 1)
            }
          })
          this.$set(this.editBackup, 'checkDays', checkdays)
        }
        console.log('editBackupNow', this.editBackup)
        // this.$nextTick(() => {
        //   this.$forceUpdate();
        // });
        this.$forceUpdate()
      }
    },
    'editBackup.status': {
      deep: true,
      handler (n) {
        console.log(n)
        if (n) {
          this.editBackup.state = 1
          this.editBackup.status = n
          this.$emit('statechange', true)
        } else {
          this.editBackup.state = 0
          this.editBackup.status = n
          this.$emit('statechange', false)
        }
      }
    },
    'editBackup.checkDay': {
      deep: true,
      handler (n) {
        console.log(n)
        n.forEach((e, i) => {
          if (e === 6) {
            this.editBackup.checkDay[i] = -1
          }
        })
        const nums = []
        this.editBackup.nums = []
        this.editBackup.checkDay.forEach((e, i) => {
          nums.push(Number(i) + 1)
        })

        this.editBackup.nums = nums
        console.log('checkDay', this.editBackup.checkDay)
      }
    },
    'editBackup.datepicker': {
      deep: true,
      handler (n) {
        this.editBackup.datepicker[0] = bus.timeFormate(
          new Date(n[0]),
          'YYYY-MM-DD'
        )
      }
    }
    // "editBackup.checkDays": {
    //   deep: true,
    //   handler(n) {
    //     n.forEach((e, i) => {
    //       if (e === 31) {
    //         this.editBackup.checkDays[i] = -2;
    //       }
    //     });
    //     console.log("checkDays", this.editBackup.checkDays);
    //   },
    // },
  }
}
</script>
<style lang='' scoped>
</style>