[修改]修改两个组件的父名称

This commit is contained in:
zer0Black
2021-03-11 09:53:44 +08:00
parent 042d25053f
commit 35eb1449d4
135 changed files with 164 additions and 165 deletions
@@ -0,0 +1,928 @@
<template>
<a-modal
title="corn表达式"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="close"
cancelText="关闭">
<div class="card-container">
<a-tabs type="card">
<a-tab-pane key="1" type="card">
<span slot="tab"><a-icon type="schedule" /> 秒</span>
<a-radio-group v-model="result.second.cronEvery">
<a-row>
<a-radio value="1">每一秒钟</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="59"></a-input-number>
秒执行 从
<a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
秒开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">具体秒数(可多选)</a-radio>
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
<a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="59"></a-input-number>
<a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
</a-radio>
</a-row>
</a-radio-group>
</a-tab-pane>
<a-tab-pane key="2">
<span slot="tab"><a-icon type="schedule" />分</span>
<div class="tabBody">
<a-radio-group v-model="result.minute.cronEvery">
<a-row>
<a-radio value="1">每一分钟</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
分执行 从
<a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
分开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">具体分钟数(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
<a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
<a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="3">
<span slot="tab"><a-icon type="schedule" /> 时</span>
<div class="tabBody">
<a-radio-group v-model="result.hour.cronEvery">
<a-row>
<a-radio value="1">每一小时</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
小时执行 从
<a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
小时开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体小时数(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
<a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">周期从
<a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
<a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
小时
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="4">
<span slot="tab"><a-icon type="schedule" /> 天</span>
<div class="tabBody">
<a-radio-group v-model="result.day.cronEvery">
<a-row>
<a-radio value="1">每一天</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
周执行 从
<a-select size="small" v-model="result.week.incrementStart">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
开始
</a-radio>
</a-row>
<a-row>
<a-radio value="3">每隔
<a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
天执行 从
<a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
天开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="4">具体星期几(可多选)</a-radio>
<a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio class="long" value="5">具体天数(可多选)</a-radio>
<a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
<a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="6">在这个月的最后一天</a-radio>
</a-row>
<a-row>
<a-radio value="7">在这个月的最后一个工作日</a-radio>
</a-row>
<a-row>
<a-radio value="8">在这个月的最后一个
<a-select size="small" v-model="result.day.cronLastSpecificDomDay">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-radio>
</a-row>
<a-row>
<a-radio value="9">
在本月底前
<a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
</a-radio>
</a-row>
<a-row>
<a-radio value="10">最近的工作日(周一至周五)至本月
<a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
</a-radio>
</a-row>
<a-row>
<a-radio value="11">在这个月的第
<a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
<a-select size="small" v-model="result.week.cronNthDayDay">
<a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
</a-select>
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="5">
<span slot="tab"><a-icon type="schedule" /> 月</span>
<div class="tabBody">
<a-radio-group v-model="result.month.cronEvery">
<a-row>
<a-radio value="1">每一月</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
月执行 从
<a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
月开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体月数(可多选)</a-radio>
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
<a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">从
<a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
<a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
月之间的每个月
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
<a-tab-pane key="6">
<span slot="tab"><a-icon type="schedule" /> 年</span>
<div class="tabBody">
<a-radio-group v-model="result.year.cronEvery">
<a-row>
<a-radio value="1">每一年</a-radio>
</a-row>
<a-row>
<a-radio value="2">每隔
<a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
年执行 从
<a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
年开始
</a-radio>
</a-row>
<a-row>
<a-radio class="long" value="3">具体年份(可多选)</a-radio>
<a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
<a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
</a-select>
</a-row>
<a-row>
<a-radio value="4">从
<a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
<a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
年之间的每一年
</a-radio>
</a-row>
</a-radio-group>
</div>
</a-tab-pane>
</a-tabs>
<div class="bottom">
<span class="value">{{this.cron }}</span>
</div>
</div>
</a-modal>
</template>
<script>
export default {
name:'VueCron',
props:['data'],
data(){
return {
visible: false,
confirmLoading:false,
size:'large',
weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
result: {
second:{},
minute:{},
hour:{},
day:{},
week:{},
month:{},
year:{}
},
defaultValue: {
second:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:0,
specificSpecific:[],
},
minute:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:'0',
specificSpecific:[],
},
hour:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:'0',
rangeEnd:'0',
specificSpecific:[],
},
day:{
cronEvery:'',
incrementStart:1,
incrementIncrement:'1',
rangeStart:'',
rangeEnd:'',
specificSpecific:[],
cronLastSpecificDomDay:1,
cronDaysBeforeEomMinus:1,
cronDaysNearestWeekday:1,
},
week:{
cronEvery:'',
incrementStart:1,
incrementIncrement:1,
specificSpecific:[],
cronNthDayDay:1,
cronNthDayNth:1,
},
month:{
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:1,
specificSpecific:[],
},
year:{
cronEvery:'',
incrementStart:2017,
incrementIncrement:1,
rangeStart:2019,
rangeEnd: 2019,
specificSpecific:[],
},
label:''
}
}
},
computed: {
modalWidth(){
return 608;
},
secondsText() {
let seconds = '';
let cronEvery=this.result.second.cronEvery||'';
switch (cronEvery.toString()){
case '1':
seconds = '*';
break;
case '2':
seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement;
break;
case '3':
this.result.second.specificSpecific.map(val=> {seconds += val+','});
seconds = seconds.slice(0, -1);
break;
case '4':
seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd;
break;
}
return seconds;
},
minutesText() {
let minutes = '';
let cronEvery=this.result.minute.cronEvery||'';
switch (cronEvery.toString()){
case '1':
minutes = '*';
break;
case '2':
minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement;
break;
case '3':
this.result.minute.specificSpecific.map(val=> {
minutes += val+','
});
minutes = minutes.slice(0, -1);
break;
case '4':
minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd;
break;
}
return minutes;
},
hoursText() {
let hours = '';
let cronEvery=this.result.hour.cronEvery||'';
switch (cronEvery.toString()){
case '1':
hours = '*';
break;
case '2':
hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement;
break;
case '3':
this.result.hour.specificSpecific.map(val=> {
hours += val+','
});
hours = hours.slice(0, -1);
break;
case '4':
hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd;
break;
}
return hours;
},
daysText() {
let days='';
let cronEvery=this.result.day.cronEvery||'';
switch (cronEvery.toString()){
case '1':
break;
case '2':
case '4':
case '11':
days = '?';
break;
case '3':
days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement;
break;
case '5':
this.result.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.result.day.cronLastSpecificDomDay + 'L';
break;
case '9':
days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
break;
case '10':
days = this.result.day.cronDaysNearestWeekday+"W";
break
}
return days;
},
weeksText() {
let weeks = '';
let cronEvery=this.result.day.cronEvery||'';
switch (cronEvery.toString()){
case '1':
case '3':
case '5':
weeks = '?';
break;
case '2':
weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement;
break;
case '4':
this.result.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.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth;
break;
}
return weeks;
},
monthsText() {
let months = '';
let cronEvery=this.result.month.cronEvery||'';
switch (cronEvery.toString()){
case '1':
months = '*';
break;
case '2':
months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement;
break;
case '3':
this.result.month.specificSpecific.map(val=> {
months += val+','
});
months = months.slice(0, -1);
break;
case '4':
months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd;
break;
}
return months;
},
yearsText() {
let years = '';
let cronEvery=this.result.year.cronEvery||'';
switch (cronEvery.toString()){
case '1':
years = '*';
break;
case '2':
years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement;
break;
case '3':
this.result.year.specificSpecific.map(val=> {
years += val+','
});
years = years.slice(0, -1);
break;
case '4':
years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd;
break;
}
return years;
},
cron(){
return `${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'?'} ${this.yearsText||'*'}`
},
},
watch:{
visible:{
handler() {
// if(this.data){
// //this. result = Object.keys(this.data.value).length>0?this.deepCopy(this.data.value):this.deepCopy(this.defaultValue);
// //this.result = Object.keys(this.data.value).length>0?clone(this.data.value):clone(this.defaultValue);
// //this.result = Object.keys(this.data.value).length>0?clone(JSON.parse(this.data.value)):clone(this.defaultValue);
// this.result = Object.keys(this.data.value).length>0?JSON.parse(this.data.value):JSON.parse(JSON.stringify(this.defaultValue));
// }else{
// //this.result = this.deepCopy(this.defaultValue);
// //this.result = clone(this.defaultValue);
// this.result = JSON.parse(JSON.stringify(this.defaultValue));
// }
let label = this.data;
if(label){
this.secondsReverseExp(label)
this.minutesReverseExp(label);
this.hoursReverseExp(label);
this.daysReverseExp(label);
this.daysReverseExp(label);
this.monthsReverseExp(label);
this.yearReverseExp(label);
JSON.parse(JSON.stringify(label));
}else {
this.result = JSON.parse(JSON.stringify(this.defaultValue));
}
}
}
},
methods: {
show(){
this.visible = true;
// console.log('secondsReverseExp',this.secondsReverseExp(this.data));
// console.log('minutesReverseExp',this.minutesReverseExp(this.data));
// console.log('hoursReverseExp',this.hoursReverseExp(this.data));
// console.log('daysReverseExp',this.daysReverseExp(this.data));
// console.log('monthsReverseExp',this.monthsReverseExp(this.data));
// console.log('yearReverseExp',this.yearReverseExp(this.data));
},
handleSubmit(){
this.$emit('ok',this.cron);
this.close();
this.visible = false;
},
close(){
this.visible = false;
},
secondsReverseExp(seconds) {
let val = seconds.split(" ")[0];
//alert(val);
let second = {
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:0,
specificSpecific:[]
};
switch (true) {
case val.includes('*'):
second.cronEvery = '1';
break;
case val.includes('/'):
second.cronEvery = '2';
second.incrementStart = val.split('/')[0];
second.incrementIncrement = val.split('/')[1];
break;
case val.includes(','):
second.cronEvery = '3';
second.specificSpecific = val.split(',').map(Number).sort();
break;
case val.includes('-'):
second.cronEvery = '4';
second.rangeStart = val.split('-')[0];
second.rangeEnd = val.split('-')[1];
break;
default:
second.cronEvery = '1';
}
this.result.second = second;
},
minutesReverseExp(minutes) {
let val = minutes.split(" ")[1];
let minute = {
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:0,
specificSpecific:[],
}
switch (true) {
case val.includes('*'):
minute.cronEvery = '1';
break;
case val.includes('/'):
minute.cronEvery = '2';
minute.incrementStart = val.split('/')[0];
minute.incrementIncrement = val.split('/')[1];
break;
case val.includes(','):
minute.cronEvery = '3';
minute.specificSpecific = val.split(',').map(Number).sort();
break;
case val.includes('-'):
minute.cronEvery = '4';
minute.rangeStart = val.split('-')[0];
minute.rangeEnd = val.split('-')[1];
break;
default:
minute.cronEvery = '1';
}
this.result.minute = minute;
},
hoursReverseExp(hours) {
let val = hours.split(" ")[2];
let hour ={
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:'0',
specificSpecific:[],
};
switch (true) {
case val.includes('*'):
hour.cronEvery = '1';
break;
case val.includes('/'):
hour.cronEvery = '2';
hour.incrementStart = val.split('/')[0];
hour.incrementIncrement = val.split('/')[1];
break;
case val.includes(','):
hour.cronEvery = '3';
hour.specificSpecific = val.split(',').map(Number).sort();
break;
case val.includes('-'):
hour.cronEvery = '4';
hour.rangeStart = val.split('-')[0];
hour.rangeEnd = val.split('-')[1];
break;
default:
hour.cronEvery = '1';
}
this.result.hour = hour;
},
daysReverseExp(cron) {
let days = cron.split(" ")[3];
let weeks = cron.split(" ")[5];
let day ={
cronEvery:'',
incrementStart:1,
incrementIncrement:1,
rangeStart:1,
rangeEnd:1,
specificSpecific:[],
cronLastSpecificDomDay:1,
cronDaysBeforeEomMinus:1,
cronDaysNearestWeekday:1,
};
let week = {
cronEvery:'',
incrementStart:1,
incrementIncrement:1,
specificSpecific:[],
cronNthDayDay:1,
cronNthDayNth:'1',
};
if (!days.includes('?')) {
switch (true) {
case days.includes('*'):
day.cronEvery = '1';
break;
case days.includes('?'):
// 2、4、11
break;
case days.includes('/'):
day.cronEvery = '3';
day.incrementStart = days.split('/')[0];
day.incrementIncrement = days.split('/')[1];
break;
case days.includes(','):
day.cronEvery = '5';
day.specificSpecific = days.split(',').map(Number).sort();
// day.specificSpecific.forEach(function (value, index) {
// day.specificSpecific[index] = value -1;
// });
break;
case days.includes('LW'):
day.cronEvery = '7';
break;
case days.includes('L-'):
day.cronEvery = '9';
day.cronDaysBeforeEomMinus = days.split('L-')[1];
break;
case days.includes('L'):
//alert(days);
if(days.len == 1){
day.cronEvery = '6';
day.cronLastSpecificDomDay = '1';
}
else
{
day.cronEvery = '8';
day.cronLastSpecificDomDay = Number(days.split('L')[0]);
}
break;
case days.includes('W'):
day.cronEvery = '10';
day.cronDaysNearestWeekday = days.split('W')[0];
break;
default:
day.cronEvery = '1';
}
}else {
switch (true){
case weeks.includes('/'):
day.cronEvery = '2';
week.incrementStart = weeks.split("/")[0];
week.incrementIncrement = weeks.split("/")[1];
break;
case weeks.includes(','):
day.cronEvery = '4';
week.specificSpecific = weeks.split(',').map(Number).sort();
break;
case '#':
day.cronEvery = '11';
week.cronNthDayDay = weeks.split("#")[0];
week.cronNthDayNth = weeks.split("#")[1];
break;
default:
day.cronEvery = '1';
week.cronEvery = '1';
}
}
this.result.day = day;
this.result.week = week;
},
monthsReverseExp(cron) {
let months = cron.split(" ")[4];
let month = {
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:1,
specificSpecific:[],
};
switch (true){
case months.includes('*'):
month.cronEvery = '1';
break;
case months.includes('/'):
month.cronEvery = '2';
month.incrementStart = months.split('/')[0];
month.incrementIncrement = months.split('/')[1];
break;
case months.includes(','):
month.cronEvery = '3';
month.specificSpecific = months.split(',').map(Number).sort();
break;
case months.includes('-'):
month.cronEvery = '4';
month.rangeStart = months.split('-')[0];
month.rangeEnd = months.split('-')[1];
break;
default:
month.cronEvery = '1';
}
this.result.month = month;
},
yearReverseExp(cron) {
let years = cron.split(" ")[6];
let year = {
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:2019,
rangeEnd:2019,
specificSpecific:[],
};
switch (true){
case years.includes('*'):
year.cronEvery = '1';
break;
case years.includes('/'):
year.cronEvery = '2';
year.incrementStart = years.split('/')[0];
year.incrementIncrement = years.split('/')[1];
break;
case years.includes(','):
year.cronEvery = '3';
year.specificSpecific = years.split(',').map(Number).sort();
break;
case years.includes('-'):
year.cronEvery = '4';
year.rangeStart = years.split('-')[0];
year.rangeEnd = years.split('-')[1];
break;
default:
year.cronEvery = '1';
}
this.result.year = year;
}
}
}
</script>
<style lang="less">
.card-container {
background: #fff;
overflow: hidden;
padding: 12px;
position: relative;
width: 100%;
.ant-tabs{
border:1px solid #e6ebf5;
padding: 0;
.ant-tabs-bar {
margin: 0;
outline: none;
border-bottom: none;
.ant-tabs-nav-container{
margin: 0;
.ant-tabs-tab {
padding: 0 24px!important;
background-color: #f5f7fa!important;
margin-right: 0px!important;
border-radius: 0;
line-height: 38px;
border: 1px solid transparent!important;
border-bottom: 1px solid #e6ebf5!important;
}
.ant-tabs-tab-active.ant-tabs-tab{
color: #409eff;
background-color: #fff!important;
border-right:1px solid #e6ebf5!important;
border-left:1px solid #e6ebf5!important;
border-bottom:1px solid #fff!important;
font-weight: normal;
transition:none!important;
}
}
}
.ant-tabs-tabpane{
padding: 15px;
.ant-row{
margin: 10px 0;
}
.ant-select,.ant-input-number{
width: 100px;
}
}
}
}
</style>
<style lang="less" scoped>
.container-widthEn{
width: 755px;
}
.container-widthCn{
width: 608px;
}
.language{
text-align: center;
position: absolute;
right: 13px;
top: 13px;
border: 1px solid transparent;
height: 40px;
line-height: 38px;
font-size: 16px;
color: #409eff;
z-index: 1;
background: #f5f7fa;
outline: none;
width: 47px;
border-bottom: 1px solid #e6ebf5;
border-radius: 0;
}
.card-container{
.bottom{
display: flex;
justify-content: center;
padding: 10px 0 0 0;
.cronButton{
margin: 0 10px;
line-height: 40px;
}
}
}
.tabBody{
.a-row{
margin: 10px 0;
.long{
.a-select{
width:354px;
}
}
.a-input-number{
width: 110px;
}
}
}
</style>
@@ -0,0 +1,395 @@
<template>
<j-modal
:title="title"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
wrapClassName="j-popup-modal"
@ok="handleSubmit"
@cancel="handleCancel"
cancelText="关闭">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchByquery">
<a-row :gutter="24" v-if="showSearchFlag">
<template v-for="(item,index) in queryInfo">
<template v-if=" item.hidden==='1' ">
<a-col :md="8" :sm="24" :key=" 'query'+index " v-show="toggleSearchStatus">
<online-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></online-query-form-item>
</a-col>
</template>
<template v-else>
<a-col :md="8" :sm="24" :key=" 'query'+index ">
<online-query-form-item :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></online-query-form-item>
</a-col>
</template>
</template>
<a-col :md="8" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
已选择&nbsp;<a style="font-weight: 600">{{ table.selectedRowKeys.length }}</a>项&nbsp;&nbsp;
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
<a v-if="!showSearchFlag" style="margin-left: 24px" @click="onlyReload">刷新</a>
</div>
<a-table
ref="table"
size="middle"
bordered
:rowKey="combineRowKey"
:columns="table.columns"
:dataSource="table.dataSource"
:pagination="table.pagination"
:loading="table.loading"
:rowSelection="{fixed:true,selectedRowKeys: table.selectedRowKeys, onChange: handleChangeInTableSelect}"
@change="handleChangeInTable"
style="min-height: 300px"
:scroll="tableScroll"
:customRow="clickThenCheck">
</a-table>
</j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import {filterObj} from '@/utils/util'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { httpGroupRequest } from '@/api/GroupRequest.js'
const MODAL_WIDTH = 1200;
export default {
name: 'JPopupOnlReport',
props: ['multi', 'code', 'groupId', 'param'],
components:{
},
data(){
return {
visible:false,
title:"",
confirmLoading:false,
queryInfo:[],
toggleSearchStatus:false,
queryParam:{
},
dictOptions: {},
url: {
getColumns: '/online/cgreport/api/getRpColumns/',
getData: '/online/cgreport/api/getData/',
getQueryInfo: '/online/cgreport/api/getQueryInfo/'
},
table: {
loading: true,
// 表头
columns: [],
//数据集
dataSource: [],
// 选择器
selectedRowKeys: [],
selectionRows: [],
// 分页参数
pagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}
},
cgRpConfigId:"",
modalWidth:MODAL_WIDTH,
tableScroll:{x:true},
dynamicParam:{}
}
},
mounted() {
//this.loadColumnsInfo()
},
watch: {
code() {
this.loadColumnsInfo()
},
param:{
deep:true,
handler(){
this.dynamicParamHandler()
this.loadData();
},
}
},
computed:{
showSearchFlag(){
return this.queryInfo && this.queryInfo.length>0
}
},
methods:{
loadColumnsInfo(){
let url = `${this.url.getColumns}${this.code}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url
}
httpGroupRequest(() => getAction(url), groupIdKey).then(res => {
if(res.success){
this.initDictOptionData(res.result.dictOptions);
this.cgRpConfigId = res.result.cgRpConfigId
this.title = res.result.cgRpConfigName
let currColumns = res.result.columns
for(let a=0;a<currColumns.length;a++){
if(currColumns[a].customRender){
let dictCode = currColumns[a].customRender;
currColumns[a].customRender=(text)=>{
return filterMultiDictText(this.dictOptions[dictCode], text+"");
}
}
}
this.table.columns = [...currColumns]
this.initQueryInfo()
}
})
},
initQueryInfo() {
let url = `${this.url.getQueryInfo}${this.cgRpConfigId}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url
}
httpGroupRequest(() => getAction(url), groupIdKey).then((res) => {
// console.log("获取查询条件", res);
if (res.success) {
this.dynamicParamHandler(res.result)
this.queryInfo = res.result
//查询条件加载后再请求数据
this.loadData(1)
} else {
this.$message.warning(res.message)
}
})
},
//处理动态参数
dynamicParamHandler(arr){
if(arr && arr.length>0){
//第一次加载查询条件前 初始化queryParam为空对象
let queryTemp = {}
for(let item of arr){
if(item.mode==='single'){
queryTemp[item.field] = ''
}
}
this.queryParam = {...queryTemp}
}
let dynamicTemp = {}
if(this.param){
Object.keys(this.param).map(key=>{
let str = this.param[key]
if(key in this.queryParam){
if(str && str.startsWith("'") && str.endsWith("'")){
str = str.substring(1,str.length-1)
}
//如果查询条件包含参数 设置值
this.queryParam[key]=str
}
dynamicTemp[key] = this.param[key]
})
}
this.dynamicParam = {...dynamicTemp}
},
loadData(arg) {
if (arg == 1) {
this.table.pagination.current = 1
}
let params = this.getQueryParams();//查询条件
this.table.loading = true
let url = `${this.url.getData}${this.cgRpConfigId}`
//缓存key
let groupIdKey
if (this.groupId) {
groupIdKey = this.groupId + url + JSON.stringify(params)
}
httpGroupRequest(() => getAction(url, params), groupIdKey).then(res => {
this.table.loading = false
// console.log("daa",res)
let data = res.result
if (data) {
this.table.pagination.total = Number(data.total)
this.table.dataSource = data.records
} else {
this.table.pagination.total = 0
this.table.dataSource = []
}
})
},
getQueryParams() {
let paramTarget = {}
if(this.dynamicParam){
//处理自定义参数
Object.keys(this.dynamicParam).map(key=>{
paramTarget['self_'+key] = this.dynamicParam[key]
})
}
let param = Object.assign(paramTarget, this.queryParam, this.sorter);
param.pageNo = this.table.pagination.current;
param.pageSize = this.table.pagination.pageSize;
return filterObj(param);
},
handleChangeInTableSelect(selectedRowKeys, selectionRows) {
//update-begin-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
if(!selectedRowKeys || selectedRowKeys.length==0){
this.table.selectionRows = []
}else if(selectedRowKeys.length == selectionRows.length){
this.table.selectionRows = selectionRows
}else{
//当两者长度不一的时候 需要判断
let keys = this.table.selectedRowKeys
let rows = this.table.selectionRows;
//这个循环 添加新的记录
for(let i=0;i<selectionRows.length;i++){
let combineKey = this.combineRowKey(selectionRows[i])
if(keys.indexOf(combineKey)<0){
//如果 原来的key 不包含当前记录 push
rows.push(selectionRows[i])
}
}
//这个循环 移除取消选中的数据
this.table.selectionRows = rows.filter(item=>{
let combineKey = this.combineRowKey(item)
return selectedRowKeys.indexOf(combineKey)>=0
})
}
//update-end-author:taoyan date:2020902 for:【issue】开源online的几个问题 LOWCOD-844
this.table.selectedRowKeys = selectedRowKeys
},
handleChangeInTable(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
if (Object.keys(sorter).length > 0) {
this.sorter.column = sorter.field
this.sorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
}
this.table.pagination = pagination
this.loadData()
},
handleCancel() {
this.close()
},
handleSubmit() {
if(!this.multi){
if(this.table.selectionRows && this.table.selectionRows.length>1){
this.$message.warning("请选择一条记录")
return false
}
}
if(!this.table.selectionRows || this.table.selectionRows.length==0){
this.$message.warning("请选择一条记录")
return false
}
this.$emit('ok', this.table.selectionRows);
this.close()
},
close() {
this.$emit('close');
this.visible = false;
this.onClearSelected()
},
show(){
this.visible = true
this.loadColumnsInfo()
},
handleToggleSearch(){
this.toggleSearchStatus = !this.toggleSearchStatus;
},
searchByquery(){
this.loadData(1);
},
onlyReload(){
this.loadData();
},
searchReset(){
Object.keys(this.queryParam).forEach(key=>{
this.queryParam[key]=""
})
this.loadData(1);
},
onClearSelected(){
this.table.selectedRowKeys = []
this.table.selectionRows = []
},
combineRowKey(record){
let res = ''
Object.keys(record).forEach(key=>{
res+=record[key]
})
if(res.length>50){
res = res.substring(0,50)
}
return res
},
clickThenCheck(record){
return {
on: {
click: () => {
let rowKey = this.combineRowKey(record)
if(!this.table.selectedRowKeys || this.table.selectedRowKeys.length==0){
let arr1=[],arr2=[]
arr1.push(record)
arr2.push(rowKey)
this.table.selectedRowKeys=arr2
this.table.selectionRows=arr1
}else{
if(this.table.selectedRowKeys.indexOf(rowKey)<0){
this.table.selectedRowKeys.push(rowKey)
this.table.selectionRows.push(record)
}else{
let rowKey_index = this.table.selectedRowKeys.indexOf(rowKey)
this.table.selectedRowKeys.splice(rowKey_index,1);
this.table.selectionRows.splice(rowKey_index,1);
}
}
}
}
}
},
//防止字典中有垃圾数据
initDictOptionData(dictOptions){
let obj = { }
Object.keys(dictOptions).map(k=>{
obj[k] = dictOptions[k].filter(item=>{
return item!=null
});
});
this.dictOptions = obj
}
}
}
</script>
<style scoped>
</style>