510 lines
13 KiB
Vue
510 lines
13 KiB
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">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="editBackup.datepicker[0]"
|
||
|
|
type="date"
|
||
|
|
placeholder="选择日期"
|
||
|
|
>
|
||
|
|
</el-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: "",
|
||
|
|
|
||
|
|
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: {},
|
||
|
|
|
||
|
|
beforeMount() {},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
changeCheck(item) {
|
||
|
|
if (this.editBackup.type == 3) {
|
||
|
|
let nums = [];
|
||
|
|
this.editBackup.nums = [];
|
||
|
|
for (let 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) {
|
||
|
|
let 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(" ");
|
||
|
|
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 + "";
|
||
|
|
let stime = this.editBackup.stime;
|
||
|
|
let time = stime.split(" ");
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
let 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;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
let 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>
|