fix:select框加滚动条
This commit is contained in:
wenyann
parent
977182a193
commit
aa4bb3e8f9
|
|
@ -1,272 +1,283 @@
|
||||||
<template>
|
<template>
|
||||||
<el-dialog :close-on-click-modal="false" width="60%" class="schedule-edit" :visible.sync="dialogVisible"
|
<el-dialog :close-on-click-modal="false" width="60%" class="schedule-edit" :visible.sync="dialogVisible"
|
||||||
@close="close">
|
@close="close">
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<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">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
prop="cronValue">
|
prop="cronValue">
|
||||||
<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-form-item>
|
}}
|
||||||
<el-form-item>
|
</el-button>
|
||||||
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
|
</el-form-item>
|
||||||
{{ $t('schedule.generate_expression') }}
|
<el-form-item>
|
||||||
</el-link>
|
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
|
||||||
</el-form-item>
|
{{ $t('schedule.generate_expression') }}
|
||||||
<crontab-result :ex="form.cronValue" ref="crontabResult"/>
|
</el-link>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
<el-dialog width="60%" :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false">
|
<crontab-result :ex="form.cronValue" ref="crontabResult"/>
|
||||||
<crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
|
</el-form>
|
||||||
</el-dialog>
|
<el-dialog width="60%" :title="$t('schedule.generate_expression')" :visible.sync="showCron"
|
||||||
</el-tab-pane>
|
:modal="false">
|
||||||
<el-tab-pane :label="$t('schedule.task_notification')" name="second">
|
<crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value"
|
||||||
<template>
|
ref="crontab"/>
|
||||||
<el-table
|
</el-dialog>
|
||||||
:data="tableData"
|
</el-tab-pane>
|
||||||
style="width: 100%">
|
<el-tab-pane :label="$t('schedule.task_notification')" name="second">
|
||||||
<el-table-column
|
<template>
|
||||||
prop="event"
|
<el-table
|
||||||
:label="$t('schedule.event')">
|
:data="tableData"
|
||||||
<template v-slot:default="{row}">
|
style="width: 100%">
|
||||||
<span v-if="row.event === 'EXECUTE_SUCCESSFUL'"> {{ $t('schedule.event_success') }}</span>
|
<el-table-column
|
||||||
<span v-else-if="row.event === 'EXECUTE_FAILED'"> {{ $t('schedule.event_failed') }}</span>
|
prop="event"
|
||||||
<span v-else>{{ row.event }}</span>
|
:label="$t('schedule.event')">
|
||||||
</template>
|
<template v-slot:default="{row}">
|
||||||
</el-table-column>
|
<span v-if="row.event === 'EXECUTE_SUCCESSFUL'"> {{ $t('schedule.event_success') }}</span>
|
||||||
<el-table-column
|
<span v-else-if="row.event === 'EXECUTE_FAILED'"> {{ $t('schedule.event_failed') }}</span>
|
||||||
prop="name"
|
<span v-else>{{ row.event }}</span>
|
||||||
:label="$t('schedule.receiver')"
|
</template>
|
||||||
width="200"
|
</el-table-column>
|
||||||
>
|
<el-table-column
|
||||||
<template v-slot:default="{row}">
|
prop="name"
|
||||||
<el-select v-model="row.names" filterable multiple :placeholder="$t('commons.please_select')"
|
:label="$t('schedule.receiver')"
|
||||||
@click.native="userList()">
|
width="240"
|
||||||
<el-option
|
>
|
||||||
v-for="item in options"
|
<template v-slot:default="{row}">
|
||||||
:key="item.id"
|
<el-select v-model="row.names" filterable multiple
|
||||||
:label="item.name"
|
:placeholder="$t('commons.please_select')"
|
||||||
:value="item.name">
|
@click.native="userList()" style="width: 100%;">
|
||||||
</el-option>
|
<el-option
|
||||||
</el-select>
|
v-for="item in options"
|
||||||
</template>
|
:key="item.id"
|
||||||
</el-table-column>
|
:label="item.name"
|
||||||
<el-table-column
|
:value="item.name">
|
||||||
prop="type"
|
</el-option>
|
||||||
:label="$t('schedule.receiving_mode')"
|
</el-select>
|
||||||
>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:label="$t('test_resource_pool.enable_disable')"
|
prop="type"
|
||||||
prop="enable"
|
:label="$t('schedule.receiving_mode')"
|
||||||
>
|
>
|
||||||
<template v-slot:default="{row}">
|
</el-table-column>
|
||||||
<el-switch
|
<el-table-column
|
||||||
v-model="row.enable"
|
:label="$t('test_resource_pool.enable_disable')"
|
||||||
active-value="true"
|
prop="enable"
|
||||||
inactive-value="false"
|
>
|
||||||
inactive-color="#DCDFE6"
|
<template v-slot:default="{row}">
|
||||||
/>
|
<el-switch
|
||||||
</template>
|
v-model="row.enable"
|
||||||
</el-table-column>
|
active-value="true"
|
||||||
</el-table>
|
inactive-value="false"
|
||||||
<div style="padding-top: 20px;">
|
inactive-color="#DCDFE6"
|
||||||
<el-button type="primary" @click="saveNotice">{{ $t('commons.save') }}</el-button>
|
/>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-tab-pane>
|
</el-table>
|
||||||
</el-tabs>
|
<div style="padding-top: 20px;">
|
||||||
</div>
|
<el-button type="primary" @click="saveNotice">{{ $t('commons.save') }}</el-button>
|
||||||
</template>
|
</div>
|
||||||
</el-dialog>
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</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 {
|
|
||||||
name: "MsScheduleEdit",
|
|
||||||
components: {CrontabResult, Crontab},
|
|
||||||
props: {
|
|
||||||
testId: String,
|
|
||||||
save: Function,
|
|
||||||
schedule: {},
|
|
||||||
customValidate: {
|
|
||||||
type: Function,
|
|
||||||
default: defaultCustomValidate
|
|
||||||
},
|
|
||||||
isReadOnly: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
'schedule.value'() {
|
|
||||||
this.form.cronValue = this.schedule.value;
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
data() {
|
export default {
|
||||||
const validateCron = (rule, cronValue, callback) => {
|
name: "MsScheduleEdit",
|
||||||
let customValidate = this.customValidate(this.getIntervalTime());
|
components: {CrontabResult, Crontab},
|
||||||
if (!cronValue) {
|
props: {
|
||||||
callback(new Error(this.$t('commons.input_content')));
|
testId: String,
|
||||||
} else if (!cronValidate(cronValue)) {
|
save: Function,
|
||||||
callback(new Error(this.$t('schedule.cron_expression_format_error')));
|
schedule: {},
|
||||||
}
|
customValidate: {
|
||||||
// else if(!this.intervalShortValidate()) {
|
type: Function,
|
||||||
// callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
|
default: defaultCustomValidate
|
||||||
// }
|
},
|
||||||
else if (!customValidate.pass) {
|
isReadOnly: {
|
||||||
callback(new Error(customValidate.info));
|
type: Boolean,
|
||||||
} else {
|
default: false
|
||||||
callback();
|
},
|
||||||
}
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
operation: true,
|
|
||||||
dialogVisible: false,
|
|
||||||
showCron: false,
|
|
||||||
form: {
|
|
||||||
cronValue: ""
|
|
||||||
},
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
event: "EXECUTE_SUCCESSFUL",
|
|
||||||
type: "EMAIL",
|
|
||||||
names: [],
|
|
||||||
enable: false
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
event: "EXECUTE_FAILED",
|
|
||||||
type: "EMAIL",
|
|
||||||
names: [],
|
|
||||||
enable: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
options: [{}],
|
|
||||||
enable: true,
|
|
||||||
type: "",
|
|
||||||
activeName: 'first',
|
|
||||||
rules: {
|
|
||||||
cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
userList() {
|
|
||||||
this.result = this.$get('user/list', response => {
|
|
||||||
this.options = response.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleClick() {
|
|
||||||
if (this.activeName === "second") {
|
|
||||||
this.result = this.$get('notice/query/' + this.testId, response => {
|
|
||||||
if (response.data.length > 0) {
|
|
||||||
this.tableData = response.data
|
|
||||||
|
|
||||||
this.tableData[0].event = "EXECUTE_SUCCESSFUL"
|
|
||||||
this.tableData[0].type = "EMAIL"
|
watch: {
|
||||||
this.tableData[1].event = "EXECUTE_FAILED"
|
'schedule.value'() {
|
||||||
this.tableData[1].type = "EMAIL"
|
this.form.cronValue = this.schedule.value;
|
||||||
} else {
|
}
|
||||||
this.tableData[0].names = []
|
},
|
||||||
this.tableData[1].names = []
|
data() {
|
||||||
}
|
const validateCron = (rule, cronValue, callback) => {
|
||||||
})
|
let customValidate = this.customValidate(this.getIntervalTime());
|
||||||
}
|
if (!cronValue) {
|
||||||
},
|
callback(new Error(this.$t('commons.input_content')));
|
||||||
buildParam() {
|
} else if (!cronValidate(cronValue)) {
|
||||||
let param = {};
|
callback(new Error(this.$t('schedule.cron_expression_format_error')));
|
||||||
param.notices = this.tableData
|
}
|
||||||
param.testId = this.testId
|
// else if(!this.intervalShortValidate()) {
|
||||||
return param;
|
// callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
|
||||||
},
|
// }
|
||||||
open() {
|
else if (!customValidate.pass) {
|
||||||
this.dialogVisible = true;
|
callback(new Error(customValidate.info));
|
||||||
this.form.cronValue = this.schedule.value;
|
} else {
|
||||||
listenGoBack(this.close);
|
callback();
|
||||||
this.handleClick()
|
}
|
||||||
this.activeName = 'first'
|
};
|
||||||
},
|
return {
|
||||||
crontabFill(value, resultList) {
|
operation: true,
|
||||||
//确定后回传的值
|
dialogVisible: false,
|
||||||
this.form.cronValue = value;
|
showCron: false,
|
||||||
this.$refs.crontabResult.resultList = resultList;
|
form: {
|
||||||
this.$refs['from'].validate();
|
cronValue: ""
|
||||||
},
|
},
|
||||||
showCronDialog() {
|
tableData: [
|
||||||
this.showCron = true;
|
{
|
||||||
},
|
event: "EXECUTE_SUCCESSFUL",
|
||||||
saveCron() {
|
type: "EMAIL",
|
||||||
this.$refs['from'].validate((valid) => {
|
names: [],
|
||||||
if (valid) {
|
enable: false
|
||||||
this.intervalShortValidate();
|
},
|
||||||
this.save(this.form.cronValue);
|
{
|
||||||
this.dialogVisible = false;
|
event: "EXECUTE_FAILED",
|
||||||
} else {
|
type: "EMAIL",
|
||||||
return false;
|
names: [],
|
||||||
|
enable: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: [{}],
|
||||||
|
enable: true,
|
||||||
|
type: "",
|
||||||
|
activeName: 'first',
|
||||||
|
rules: {
|
||||||
|
cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
userList() {
|
||||||
|
this.result = this.$get('user/list', response => {
|
||||||
|
this.options = response.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick() {
|
||||||
|
if (this.activeName === "second") {
|
||||||
|
this.result = this.$get('notice/query/' + this.testId, response => {
|
||||||
|
if (response.data.length > 0) {
|
||||||
|
this.tableData = response.data
|
||||||
|
|
||||||
|
this.tableData[0].event = "EXECUTE_SUCCESSFUL"
|
||||||
|
this.tableData[0].type = "EMAIL"
|
||||||
|
this.tableData[1].event = "EXECUTE_FAILED"
|
||||||
|
this.tableData[1].type = "EMAIL"
|
||||||
|
} else {
|
||||||
|
this.tableData[0].names = []
|
||||||
|
this.tableData[1].names = []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
buildParam() {
|
||||||
|
let param = {};
|
||||||
|
param.notices = this.tableData
|
||||||
|
param.testId = this.testId
|
||||||
|
return param;
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
this.form.cronValue = this.schedule.value;
|
||||||
|
listenGoBack(this.close);
|
||||||
|
this.handleClick()
|
||||||
|
this.activeName = 'first'
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveNotice() {
|
||||||
|
let param = this.buildParam();
|
||||||
|
this.result = this.$post("notice/save", param, () => {
|
||||||
|
this.$success(this.$t('commons.save_success'));
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
},
|
|
||||||
saveNotice() {
|
|
||||||
let param = this.buildParam();
|
|
||||||
this.result = this.$post("notice/save", param, () => {
|
|
||||||
this.$success(this.$t('commons.save_success'));
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-select__tags {
|
||||||
|
flex-wrap: unset;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue