test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 合并代码修改部分页面显示

This commit is contained in:
Captain.B 2020-09-01 18:02:47 +08:00
parent 5aa7019bb0
commit da8c52e6e3
2 changed files with 289 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
frontend/src/business/components/common/components/MsScheduleConfig.vue
View File

@ -1,104 +1,110 @@
<template> <template>
<div class="schedule-config"> <div class="schedule-config">
<div> <div>
<span class="cron-ico" @click="scheduleEdit"> <span class="cron-ico" @click="scheduleEdit">
<i class="el-icon-date" size="small"></i> <i class="el-icon-date" size="small"></i>
<span class="character">SCHEDULER</span> <span class="character">SCHEDULER</span>
</span> </span>
<el-switch :disabled="!schedule.value || isReadOnly" v-model="schedule.enable" @change="scheduleChange"/> <el-switch :disabled="!schedule.value || isReadOnly" v-model="schedule.enable" @change="scheduleChange"/>
<ms-schedule-edit :is-read-only="isReadOnly" :schedule="schedule" :save="save" :custom-validate="customValidate" ref="scheduleEdit"/> <ms-schedule-edit :is-read-only="isReadOnly" :schedule="schedule" :save="save" :custom-validate="customValidate"
ref="scheduleEdit"/>
</div> </div>
<div> <div>
<span> <span>
{{$t('schedule.next_execution_time')}}： {{ $t('schedule.next_execution_time') }}：
<span :class="{'disable-character': !schedule.enable}" v-if="!schedule.enable">{{$t('schedule.not_set')}}</span> <span :class="{'disable-character': !schedule.enable}"
v-if="!schedule.enable">{{ $t('schedule.not_set') }}</span>
<crontab-result v-if="schedule.enable" :enable-simple-mode="true" :ex="schedule.value" ref="crontabResult"/> <crontab-result v-if="schedule.enable" :enable-simple-mode="true" :ex="schedule.value" ref="crontabResult"/>
</span> </span>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import MsScheduleEdit from "./MsScheduleEdit"; import MsScheduleEdit from "./MsScheduleEdit";
import CrontabResult from "../cron/CrontabResult"; import CrontabResult from "../cron/CrontabResult";
function defaultCustomValidate() {return {pass: true};} function defaultCustomValidate() {
return {pass: true};
}
export default { export default {
name: "MsScheduleConfig", name: "MsScheduleConfig",
components: {CrontabResult, MsScheduleEdit}, components: {CrontabResult, MsScheduleEdit},
data() { data() {
return {
recentList: [],
}
},
props: {
save: Function,
schedule: {},
checkOpen: {
type: Function,
default() {
return { return {
recentList: [], checkOpen() {
} return true;
},
props: {
save: Function,
schedule: {},
checkOpen: {
type: Function,
default() {
return {
checkOpen() {return true;}
}
} }
},
customValidate: {
type: Function,
default: defaultCustomValidate
},
isReadOnly: {
type: Boolean,
default: false
}
},
methods: {
scheduleEdit() {
if (!this.checkOpen()) {
return;
}
this.$refs.scheduleEdit.open();
},
scheduleChange() {
this.$emit('scheduleChange');
},
flashResultList() {
this.$refs.crontabResult.expressionChange();
} }
} }
},
customValidate: {
type: Function,
default: defaultCustomValidate
},
isReadOnly: {
type: Boolean,
default: false
} }
},
methods: {
scheduleEdit() {
if (!this.checkOpen()) {
return;
}
this.$refs.scheduleEdit.open();
},
scheduleChange() {
this.$emit('scheduleChange');
},
flashResultList() {
this.$refs.crontabResult.expressionChange();
}
}
}
</script> </script>
<style scoped> <style scoped>
.schedule-config { .schedule-config {
float: right; float: right;
width: 250px; width: 250px;
height: 15px; height: 15px;
line-height: 25px; line-height: 25px;
} }
.el-icon-date { .el-icon-date {
font-size: 20px; font-size: 20px;
margin-left: 5px; margin-left: 5px;
} }
.character { .character {
font-weight: bold; font-weight: bold;
margin: 0 5px; margin: 0 5px;
} }
.disable-character { .disable-character {
color: #cccccc; color: #cccccc;
} }
.el-switch { .el-switch {
margin: 0 5px; margin: 0 5px;
} }
.cron-ico { .cron-ico {
cursor: pointer; cursor: pointer;
} }
</style> </style>

424
frontend/src/business/components/common/components/MsScheduleEdit.vue
View File

@ -1,238 +1,234 @@
<template> <template>
<el-dialog :close-on-click-modal="false" width="35%" class="schedule-edit" :visible.sync="dialogVisible" <el-dialog :close-on-click-modal="false" width="70%" class="schedule-edit" :visible.sync="dialogVisible"
@close="close"> @close="close">
<template> <el-tabs v-model="activeName" @tab-click="handleClick">
<div> <el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-form :model="form" :rules="rules" ref="from">
<el-tab-pane :label="$t('schedule.edit_timer_task')" name="first"> <el-form-item
<el-form :model="form" :rules="rules" ref="from"> prop="cronValue">
<el-form-item <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
prop="cronValue"> :placeholder="$t('schedule.please_input_cron_expression')"/>
<el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp" <!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
:placeholder="$t('schedule.please_input_cron_expression')"/> <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{ $t('commons.save') }}</el-button>
<!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>--> </el-form-item>
<el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button> <el-form-item>
</el-form-item> <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
<el-form-item> {{ $t('schedule.generate_expression') }}
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog"> </el-link>
{{$t('schedule.generate_expression')}} </el-form-item>
</el-link> <crontab-result :ex="form.cronValue" ref="crontabResult"/>
</el-form-item> </el-form>
<crontab-result :ex="form.cronValue" ref="crontabResult"/> <el-dialog :title="$t('schedule.generate_expression')" width="70%" :visible.sync="showCron" :modal="false">
</el-form> <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
<el-dialog :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false"> </el-dialog>
<crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/> </el-tab-pane>
</el-dialog> <el-tab-pane :label="$t('schedule.task_notification')" name="second">
</el-tab-pane> <template>
<el-tab-pane :label="$t('schedule.task_notification')" name="second"> <el-table
<template> :data="tableData"
<el-table style="width: 100%">
:data="tableData" <el-table-column
style="width: 100%"> prop="event"
<el-table-column :label="$t('schedule.event')"
prop="event" >
:label="$t('schedule.event')" </el-table-column>
> <el-table-column
</el-table-column> prop="receiver"
<el-table-column :label="$t('schedule.receiver')"
prop="receiver" width="200"
:label="$t('schedule.receiver')" >
width="200" <template v-slot:default="{row}">
> <el-input
<template v-slot:default="{row}"> size="mini"
<el-input type="textarea"
size="mini" :rows="1"
type="textarea" class="edit-input"
:rows="1" v-model="row.receiver"
class="edit-input" :placeholder="$t('schedule.receiver')"
v-model="row.receiver" clearable>
:placeholder="$t('schedule.receiver')" </el-input>
clearable> </template>
</el-input> </el-table-column>
</template> <el-table-column
</el-table-column> prop="email"
<el-table-column :label="$t('schedule.receiving_mode')"
prop="email" width="300">
:label="$t('schedule.receiving_mode')" <template v-slot:default="{row}">
width="300"> <el-input
<template v-slot:default="{row}"> size="mini"
<el-input type="textarea"
size="mini" :rows="1"
type="textarea" class="edit-input"
:rows="1" v-model="row.email"
class="edit-input" :placeholder="$t('schedule.input_email')"
v-model="row.email" clearable>
:placeholder="$t('schedule.input_email')" </el-input>
clearable> </template>
</el-input> </el-table-column>
</template> <el-table-column
</el-table-column> align="center"
<el-table-column :label="$t('schedule.operation')"
align="center" show-overflow-tooltip>
:label="$t('schedule.operation')" <template slot-scope="scope">
show-overflow-tooltip> <el-switch
<template slot-scope="scope"> v-model="scope.row.status"
<el-switch :active-value="1"
v-model="scope.row.status" :inactive-value="2"
:active-value="1" active-color="#13ce66"
:inactive-value="2" inactive-color="#ff4949"
active-color="#13ce66" />
inactive-color="#ff4949" </template>
/> </el-table-column>
</template> </el-table>
</el-table-column> </template>
</el-table> </el-tab-pane>
</template> </el-tabs>
</el-tab-pane>
</el-tabs>
</div>
</template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import Crontab from "../cron/Crontab"; import Crontab from "../cron/Crontab";
import CrontabResult from "../cron/CrontabResult"; import CrontabResult from "../cron/CrontabResult";
import {cronValidate} from "../../../../common/js/cron"; import {cronValidate} from "@/common/js/cron";
import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils"; import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
function defaultCustomValidate() { function defaultCustomValidate() {
return {pass: true}; return {pass: true};
} }
export default { export default {
name: "MsScheduleEdit", name: "MsScheduleEdit",
components: {CrontabResult, Crontab}, components: {CrontabResult, Crontab},
props: { props: {
save: Function, save: Function,
schedule: {}, schedule: {},
customValidate: { customValidate: {
type: Function, type: Function,
default: defaultCustomValidate default: defaultCustomValidate
},
isReadOnly: {
type: Boolean,
default: false
}
}, },
watch: { isReadOnly: {
'schedule.value'() { type: Boolean,
this.form.cronValue = this.schedule.value; default: false
}
},
watch: {
'schedule.value'() {
this.form.cronValue = this.schedule.value;
}
},
data() {
const validateCron = (rule, cronValue, callback) => {
let customValidate = this.customValidate(this.getIntervalTime());
if (!cronValue) {
callback(new Error(this.$t('commons.input_content')));
} else if (!cronValidate(cronValue)) {
callback(new Error(this.$t('schedule.cron_expression_format_error')));
} }
}, // else if(!this.intervalShortValidate()) {
data() { // callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
const validateCron = (rule, cronValue, callback) => { // }
let customValidate = this.customValidate(this.getIntervalTime()); else if (!customValidate.pass) {
if (!cronValue) { callback(new Error(customValidate.info));
callback(new Error(this.$t('commons.input_content'))); } else {
} else if (!cronValidate(cronValue)) { callback();
callback(new Error(this.$t('schedule.cron_expression_format_error')));
}
// else if(!this.intervalShortValidate()) {
// callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
// }
else if (!customValidate.pass) {
callback(new Error(customValidate.info));
} else {
callback();
}
};
return {
operation: true,
dialogVisible: false,
showCron: false,
form: {
cronValue: ""
},
tableData: [
{
event: '执行成功',
receiver: '',
email: '',
operation: 1
}, {
event: '执行成功',
receiver: '',
email: '',
operation: 2
}
],
email: "",
enable: true,
activeName: 'first',
rules: {
cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
}
} }
}, };
methods: { return {
handleClick() { operation: true,
dialogVisible: false,
showCron: false,
form: {
cronValue: ""
}, },
open() { tableData: [
this.dialogVisible = true; {
this.form.cronValue = this.schedule.value; event: '执行成功',
listenGoBack(this.close); receiver: '',
}, email: '',
crontabFill(value, resultList) { operation: 1
//确定后回传的值 }, {
this.form.cronValue = value; event: '执行成功',
this.$refs.crontabResult.resultList = resultList; receiver: '',
this.$refs['from'].validate(); email: '',
}, operation: 2
showCronDialog() {
this.showCron = true;
},
saveCron() {
this.$refs['from'].validate((valid) => {
if (valid) {
this.intervalShortValidate();
this.save(this.form.cronValue);
this.dialogVisible = false;
} else {
return false;
}
});
},
close() {
this.dialogVisible = false;
this.form.cronValue = '';
this.$refs['from'].resetFields();
if (!this.schedule.value) {
this.$refs.crontabResult.resultList = [];
} }
removeGoBackListener(this.close); ],
}, email: "",
intervalShortValidate() { enable: true,
if (this.getIntervalTime() < 3 * 60 * 1000) { activeName: 'first',
// return false; rules: {
this.$info(this.$t('schedule.cron_expression_interval_short_error')); cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
}
return true;
},
resultListChange() {
this.$refs['from'].validate();
},
getIntervalTime() {
let resultList = this.$refs.crontabResult.resultList;
let time1 = new Date(resultList[0]);
let time2 = new Date(resultList[1]);
return time2 - time1;
} }
} }
},
methods: {
handleClick() {
},
open() {
this.dialogVisible = true;
this.form.cronValue = this.schedule.value;
listenGoBack(this.close);
},
crontabFill(value, resultList) {
//确定后回传的值
this.form.cronValue = value;
this.$refs.crontabResult.resultList = resultList;
this.$refs['from'].validate();
},
showCronDialog() {
this.showCron = true;
},
saveCron() {
this.$refs['from'].validate((valid) => {
if (valid) {
this.intervalShortValidate();
this.save(this.form.cronValue);
this.dialogVisible = false;
} else {
return false;
}
});
},
close() {
this.dialogVisible = false;
this.form.cronValue = '';
this.$refs['from'].resetFields();
if (!this.schedule.value) {
this.$refs.crontabResult.resultList = [];
}
removeGoBackListener(this.close);
},
intervalShortValidate() {
if (this.getIntervalTime() < 3 * 60 * 1000) {
// return false;
this.$info(this.$t('schedule.cron_expression_interval_short_error'));
}
return true;
},
resultListChange() {
this.$refs['from'].validate();
},
getIntervalTime() {
let resultList = this.$refs.crontabResult.resultList;
let time1 = new Date(resultList[0]);
let time2 = new Date(resultList[1]);
return time2 - time1;
}
} }
}
</script> </script>
<style scoped> <style scoped>
.inp { .inp {
width: 50%; width: 50%;
margin-right: 20px; margin-right: 20px;
} }
.el-form-item { .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>