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

View File

@ -6,13 +6,15 @@
<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>
@ -20,12 +22,14 @@
</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() {
@ -40,7 +44,9 @@
type: Function, type: Function,
default() { default() {
return { return {
checkOpen() {return true;} checkOpen() {
return true;
}
} }
} }
}, },
@ -67,38 +73,38 @@
this.$refs.crontabResult.expressionChange(); 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>

View File

@ -1,8 +1,6 @@
<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>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="$t('schedule.edit_timer_task')" name="first"> <el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
<el-form :model="form" :rules="rules" ref="from"> <el-form :model="form" :rules="rules" ref="from">
@ -11,16 +9,16 @@
<el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp" <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
:placeholder="$t('schedule.please_input_cron_expression')"/> :placeholder="$t('schedule.please_input_cron_expression')"/>
<!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>--> <!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
<el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button> <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{ $t('commons.save') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog"> <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
{{$t('schedule.generate_expression')}} {{ $t('schedule.generate_expression') }}
</el-link> </el-link>
</el-form-item> </el-form-item>
<crontab-result :ex="form.cronValue" ref="crontabResult"/> <crontab-result :ex="form.cronValue" ref="crontabResult"/>
</el-form> </el-form>
<el-dialog :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false"> <el-dialog :title="$t('schedule.generate_expression')" width="70%" :visible.sync="showCron" :modal="false">
<crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/> <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
</el-dialog> </el-dialog>
</el-tab-pane> </el-tab-pane>
@ -85,23 +83,21 @@
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </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: {
@ -221,18 +217,18 @@
return time2 - time1; 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>