kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui库和web端产品库合并版本(还需修复细节)

Browse Source
This commit is contained in:
kubbo
2022-11-29 18:27:14 +08:00
parent 5e4bd93238
commit 8bf6c57668
151 changed files with 28267 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
ui/packages/basic/AiCron.vue Normal file
View File

@@ -0,0 +1,522 @@
<template>
<section class="AiCron">
<div id="changeContab">
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i>秒</span>
<div class="tabBody">
<el-row>
<el-radio v-model="second.cronEvery" label="1">每一秒中</el-radio>
</el-row>
<el-row>
<el-radio v-model="second.cronEvery" label="2">每隔
<el-input-number size="small" v-model="second.incrementIncrement" :min="1" :max="60"></el-input-number>
秒执行 从
<el-input-number size="small" v-model="second.incrementStart" :min="0" :max="59"></el-input-number>
秒开始
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="second.cronEvery" label="3">具体秒数(可多选)
<el-select size="small" multiple v-model="second.specificSpecific">
<el-option v-for="(val,i) in 60" :key="i" :value="val-1">{{val-1}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="second.cronEvery" label="4">周期从
<el-input-number size="small" v-model="second.rangeStart" :min="1" :max="60"></el-input-number>
到
<el-input-number size="small" v-model="second.rangeEnd" :min="0" :max="59"></el-input-number>
秒
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i>分</span>
<div class="tabBody">
<el-row>
<el-radio v-model="minute.cronEvery" label="1">每一分钟</el-radio>
</el-row>
<el-row>
<el-radio v-model="minute.cronEvery" label="2">每隔
<el-input-number size="small" v-model="minute.incrementIncrement" :min="1" :max="60"></el-input-number>
分执行 从
<el-input-number size="small" v-model="minute.incrementStart" :min="0" :max="59"></el-input-number>
分开始
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="minute.cronEvery" label="3">具体分钟数(可多选)
<el-select size="small" multiple v-model="minute.specificSpecific">
<el-option v-for="(val,i) in 60" :key="i" :value="val-1">{{val-1}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="minute.cronEvery" label="4">周期从
<el-input-number size="small" v-model="minute.rangeStart" :min="1" :max="60"></el-input-number>
到
<el-input-number size="small" v-model="minute.rangeEnd" :min="0" :max="59"></el-input-number>
分
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i>时</span>
<div class="tabBody">
<el-row>
<el-radio v-model="hour.cronEvery" label="1">每一小时</el-radio>
</el-row>
<el-row>
<el-radio v-model="hour.cronEvery" label="2">每隔
<el-input-number size="small" v-model="hour.incrementIncrement" :min="0" :max="23"></el-input-number>
小时执行 从
<el-input-number size="small" v-model="hour.incrementStart" :min="0" :max="23"></el-input-number>
小时开始
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="hour.cronEvery" label="3">具体小时数(可多选)
<el-select size="small" multiple v-model="hour.specificSpecific">
<el-option v-for="(val,i) in 24" :key="i" :value="val-1">{{val-1}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="hour.cronEvery" label="4">周期从
<el-input-number size="small" v-model="hour.rangeStart" :min="0" :max="23"></el-input-number>
到
<el-input-number size="small" v-model="hour.rangeEnd" :min="0" :max="23"></el-input-number>
小时
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i>天</span>
<div class="tabBody">
<el-row>
<el-radio v-model="day.cronEvery" label="1">每一天</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="2">每隔
<el-input-number size="small" v-model="week.incrementIncrement" :min="1" :max="7"></el-input-number>
周执行 从
<el-select size="small" v-model="week.incrementStart">
<el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
</el-select>
开始
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="3">每隔
<el-input-number size="small" v-model="day.incrementIncrement" :min="1" :max="31"></el-input-number>
天执行 从
<el-input-number size="small" v-model="day.incrementStart" :min="1" :max="31"></el-input-number>
天开始
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="day.cronEvery" label="4">具体星期几(可多选)
<el-select size="small" multiple v-model="week.specificSpecific">
<el-option v-for="(val,i) in 7"
:key="i"
:label="weeks[val-1]"
:value="['SUN','MON','TUE','WED','THU','FRI','SAT'][val-1]"
></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="day.cronEvery" label="5">具体天数(可多选)
<el-select size="small" multiple v-model="day.specificSpecific">
<el-option v-for="(val,i) in 31" :key="i" :value="val">{{val}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="6">在这个月的最后一天</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="7">在这个月的最后一个工作日</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="8">在这个月的最后一个
<el-select size="small" v-model="day.cronLastSpecificDomDay">
<el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="9">
<el-input-number size="small" v-model="day.cronDaysBeforeEomMinus" :min="1" :max="31"></el-input-number>
在本月底前
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="10">最近的工作日(周一至周五) 至本月
<el-input-number size="small" v-model="day.cronDaysNearestWeekday" :min="1" :max="31"></el-input-number>
日
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="11">在这个月的第
<el-input-number size="small" v-model="week.cronNthDayNth" :min="1" :max="5"></el-input-number>
个
<el-select size="small" v-model="week.cronNthDayDay">
<el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
</el-select>
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 月</span>
<div class="tabBody">
<el-row>
<el-radio v-model="month.cronEvery" label="1">每个月</el-radio>
</el-row>
<el-row>
<el-radio v-model="month.cronEvery" label="2">每隔
<el-input-number size="small" v-model="month.incrementIncrement" :min="0" :max="12"></el-input-number>
月执行 从
<el-input-number size="small" v-model="month.incrementStart" :min="0" :max="12"></el-input-number>
月开始
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="month.cronEvery" label="3">具体月数(可多选)
<el-select size="small" multiple v-model="month.specificSpecific">
<el-option v-for="(val,i) in 12" :key="i" :label="val" :value="val"></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="month.cronEvery" label="4">从
<el-input-number size="small" v-model="month.rangeStart" :min="1" :max="12"></el-input-number>
到
<el-input-number size="small" v-model="month.rangeEnd" :min="1" :max="12"></el-input-number>
</el-radio>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
<div class="bottom">
<span class="value">{{cron}}</span>
<el-button type="primary" @click="change">保存</el-button>
<el-button type="primary" @click="close">取消</el-button>
</div>
</div>
</section>
</template>
<script>
export default {
name: "AiCron",
model: {
prop: 'value',
event: "change"
},
props: {
value: String
},
data() {
return {
weeks: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
second: {
cronEvery: '',
incrementStart: '3',
incrementIncrement: '5',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
},
minute: {
cronEvery: '',
incrementStart: '3',
incrementIncrement: '5',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
},
hour: {
cronEvery: '',
incrementStart: '3',
incrementIncrement: '5',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
},
day: {
cronEvery: '',
incrementStart: '1',
incrementIncrement: '1',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: '',
cronDaysNearestWeekday: '',
},
week: {
cronEvery: '',
incrementStart: '1',
incrementIncrement: '1',
specificSpecific: [],
cronNthDayDay: 1,
cronNthDayNth: '1',
},
month: {
cronEvery: '',
incrementStart: '3',
incrementIncrement: '5',
rangeStart: '',
rangeEnd: '',
specificSpecific: [],
},
output: {
second: '',
minute: '',
hour: '',
day: '',
month: '',
Week: '',
},
visible: false,
cronArr:['*','*','*','*','*','?']
}
},
watch: {
cron(val) {
this.value = val
}
},
computed: {
secondsText() {
let seconds = this.cronArr[0];
let cronEvery = this.second.cronEvery;
switch (cronEvery.toString()) {
case '1':
seconds = '*';
break;
case '2':
seconds = this.second.incrementStart + '/' + this.second.incrementIncrement;
break;
case '3':
this.second.specificSpecific.map(val => {
seconds += val + ','
});
seconds = seconds.slice(0, -1);
break;
case '4':
seconds = this.second.rangeStart + '-' + this.second.rangeEnd;
break;
}
return seconds;
},
minutesText() {
let minutes = this.cronArr[2];;
let cronEvery = this.minute.cronEvery;
switch (cronEvery.toString()) {
case '1':
minutes = '*';
break;
case '2':
minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement;
break;
case '3':
this.minute.specificSpecific.map(val => {
minutes += val + ','
});
minutes = minutes.slice(0, -1);
break;
case '4':
minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd;
break;
}
return minutes;
},
hoursText() {
let hours = this.cronArr[2];;
let cronEvery = this.hour.cronEvery;
switch (cronEvery.toString()) {
case '1':
hours = '*';
break;
case '2':
hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement;
break;
case '3':
this.hour.specificSpecific.map(val => {
hours += val + ','
});
hours = hours.slice(0, -1);
break;
case '4':
hours = this.hour.rangeStart + '-' + this.hour.rangeEnd;
break;
}
return hours;
},
daysText() {
let days = this.cronArr[3];;
let cronEvery = this.day.cronEvery;
switch (cronEvery.toString()) {
case '1':
break;
case '2':
case '4':
case '11':
days = '?';
break;
case '3':
days = this.day.incrementStart + '/' + this.day.incrementIncrement;
break;
case '5':
this.day.specificSpecific.map(val => {
days += val + ','
});
days = days.slice(0, -1);
break;
case '6':
days = "L";
break;
case '7':
days = "LW";
break;
case '8':
days = this.day.cronLastSpecificDomDay + 'L';
break;
case '9':
days = 'L-' + this.day.cronDaysBeforeEomMinus;
break;
case '10':
days = this.day.cronDaysNearestWeekday + "W";
break
}
return days;
},
weeksText() {
let weeks = this.cronArr[5];;
let cronEvery = this.day.cronEvery;
switch (cronEvery.toString()) {
case '1':
case '3':
case '5':
weeks = '?';
break;
case '2':
weeks = this.week.incrementStart + '/' + this.week.incrementIncrement;
break;
case '4':
this.week.specificSpecific.map(val => {
weeks += val + ','
});
weeks = weeks.slice(0, -1);
break;
case '6':
case '7':
case '8':
case '9':
case '10':
weeks = "?";
break;
case '11':
weeks = this.week.cronNthDayDay + "#" + this.week.cronNthDayNth;
break;
}
return weeks;
},
monthsText() {
let months = this.cronArr[4];
let cronEvery = this.month.cronEvery;
switch (cronEvery.toString()) {
case '1':
months = '*';
break;
case '2':
months = this.month.incrementStart + '/' + this.month.incrementIncrement;
break;
case '3':
this.month.specificSpecific.map(val => {
months += val + ','
});
months = months.slice(0, -1);
break;
case '4':
months = this.month.rangeStart + '-' + this.month.rangeEnd;
break;
}
return months;
},
cron() {
return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} `
},
},
methods: {
getValue() {
return this.cron;
},
change() {
this.$emit('change', this.cron);
this.close();
},
close() {
this.$emit('close')
},
},
mounted() {
if(this.value) this.cronArr = this.value.trim().split(" ")
}
}
</script>
<style lang="scss" scoped>
.AiCron {
#changeContab {
.language {
position: absolute;
right: 25px;
z-index: 1;
}
.el-tabs {
box-shadow: none;
}
.tabBody {
.el-row {
margin: 10px 0;
.long {
.el-select {
width: 350px;
}
}
.el-input-number {
width: 110px;
}
}
}
.bottom {
width: 100%;
text-align: center;
margin-top: 5px;
position: relative;
.value {
font-size: 18px;
vertical-align: middle;
margin-right: 10px;
}
}
}
}
</style>