mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-04 04:45:28 +08:00
Jeecg-Boot 2.1.0 版本发布，Online表单开发&在线代码生成器（迟到的版本）
This commit is contained in:
zhangdaihao
68
ant-design-vue-jeecg/src/components/jeecg/JCron.vue
Normal file
68
ant-design-vue-jeecg/src/components/jeecg/JCron.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="components-input-demo-presuffix">
|
||||
<a-input @click="openModal" placeholder="corn表达式" v-model="cron" @change="handleOK">
|
||||
<a-icon slot="prefix" type="schedule" title="corn控件"/>
|
||||
<a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
|
||||
</a-input>
|
||||
<JCronModal ref="innerVueCron" :data="cron" @ok="handleOK"></JCronModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import JCronModal from "./modal/JCronModal";
|
||||
export default {
|
||||
name: 'JCron',
|
||||
components: {
|
||||
JCronModal
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
required: false,
|
||||
type: String,
|
||||
default:()=>{
|
||||
return '* * * * * ? *'
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
cron: this.value,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.cron = val
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openModal(){
|
||||
this.$refs.innerVueCron.show();
|
||||
},
|
||||
handleOK(val){
|
||||
this.cron = val;
|
||||
this.$emit("change", this.cron);
|
||||
//this.$emit("change", Object.assign({}, this.cron));
|
||||
},
|
||||
handleEmpty(){
|
||||
this.handleOK('')
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.components-input-demo-presuffix .anticon-close-circle {
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
transition: color 0.3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:hover {
|
||||
color: #f5222d;
|
||||
}
|
||||
.components-input-demo-presuffix .anticon-close-circle:active {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<!-- JEditableTable -->
|
||||
<!-- @version 1.4.2 -->
|
||||
<!-- @version 1.4.4 -->
|
||||
<!-- @author sjlei -->
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
@ -26,6 +26,9 @@
|
||||
<div class="thead" ref="thead">
|
||||
<div class="tr" :style="{width: this.realTrWidth}">
|
||||
<!-- 左侧固定td -->
|
||||
<div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
||||
<span></span>
|
||||
</div>
|
||||
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
||||
<!--:indeterminate="true"-->
|
||||
<a-checkbox
|
||||
@ -62,85 +65,95 @@
|
||||
<div v-if="rows.length===0" class="tr-nodata">
|
||||
<span>暂无数据</span>
|
||||
</div>
|
||||
<!-- 动态生成tr -->
|
||||
<template v-for="(row,rowIndex) in rows">
|
||||
<!-- tr 只加载可见的和预加载的总共十条数据 -->
|
||||
<div
|
||||
v-if="
|
||||
<draggable v-model="rows" handle=".td-ds-icons" @end="handleDragMoveEnd">
|
||||
|
||||
<!-- 动态生成tr -->
|
||||
<template v-for="(row,rowIndex) in rows">
|
||||
<!-- tr 只加载可见的和预加载的总共十条数据 -->
|
||||
<div
|
||||
v-if="
|
||||
rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
|
||||
(parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
|
||||
"
|
||||
:id="`${caseId}tbody-tr-${rowIndex}`"
|
||||
:data-idx="rowIndex"
|
||||
class="tr"
|
||||
:class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
|
||||
:style="buildTrStyle(rowIndex)"
|
||||
:key="row.id">
|
||||
<!-- 左侧固定td -->
|
||||
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
||||
<!-- 此 v-for 只是为了拼接 id 字符串 -->
|
||||
<template v-for="(id,i) in [`${row.id}`]">
|
||||
<a-checkbox
|
||||
:id="id"
|
||||
:key="i"
|
||||
:checked="selectedRowIds.indexOf(id) !== -1"
|
||||
@change="handleChangeLeftCheckbox"/>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
|
||||
<span>{{ rowIndex+1 }}</span>
|
||||
</div>
|
||||
<!-- 右侧动态生成td -->
|
||||
<div
|
||||
class="td"
|
||||
v-for="col in columns"
|
||||
v-show="col.type !== formTypes.hidden"
|
||||
:key="col.key"
|
||||
:style="buildTdStyle(col)">
|
||||
:id="`${caseId}tbody-tr-${rowIndex}`"
|
||||
:data-idx="rowIndex"
|
||||
class="tr"
|
||||
:class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
|
||||
:style="buildTrStyle(rowIndex)"
|
||||
:key="row.id">
|
||||
<!-- 左侧固定td -->
|
||||
|
||||
<!-- 此 v-for 只是为了拼接 id 字符串 -->
|
||||
<template v-for="(id,i) in [`${col.key}${row.id}`]">
|
||||
<div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
||||
<div class="td-ds-icons">
|
||||
<a-icon type="align-left"/>
|
||||
<a-icon type="align-right"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- native input -->
|
||||
<label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
|
||||
<a-tooltip
|
||||
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
||||
<!-- 此 v-for 只是为了拼接 id 字符串 -->
|
||||
<template v-for="(id,i) in [`${row.id}`]">
|
||||
<a-checkbox
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
:key="i"
|
||||
:checked="selectedRowIds.indexOf(id) !== -1"
|
||||
@change="handleChangeLeftCheckbox"/>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
|
||||
<span>{{ rowIndex+1 }}</span>
|
||||
</div>
|
||||
<!-- 右侧动态生成td -->
|
||||
<div
|
||||
class="td"
|
||||
v-for="col in columns"
|
||||
v-show="col.type !== formTypes.hidden"
|
||||
:key="col.key"
|
||||
:style="buildTdStyle(col)">
|
||||
|
||||
<input
|
||||
<!-- 此 v-for 只是为了拼接 id 字符串 -->
|
||||
<template v-for="(id,i) in [`${col.key}${row.id}`]">
|
||||
|
||||
<!-- native input -->
|
||||
<label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
|
||||
<a-tooltip
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
|
||||
<input
|
||||
:id="id"
|
||||
v-bind="buildProps(row,col)"
|
||||
:data-input-number="col.type === formTypes.inputNumber"
|
||||
:placeholder="replaceProps(col, col.placeholder)"
|
||||
@input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
|
||||
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
||||
@mouseout="()=>{handleMouseoutCommono(row,col)}"/>
|
||||
|
||||
</a-tooltip>
|
||||
|
||||
</label>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="col.type === formTypes.checkbox">
|
||||
<a-checkbox
|
||||
:key="i"
|
||||
:id="id"
|
||||
v-bind="buildProps(row,col)"
|
||||
:data-input-number="col.type === formTypes.inputNumber"
|
||||
:placeholder="replaceProps(col, col.placeholder)"
|
||||
@input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
|
||||
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
||||
@mouseout="()=>{handleMouseoutCommono(row,col)}"/>
|
||||
|
||||
</a-tooltip>
|
||||
|
||||
</label>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="col.type === formTypes.checkbox">
|
||||
<a-checkbox
|
||||
:key="i"
|
||||
:id="id"
|
||||
v-bind="buildProps(row,col)"
|
||||
:checked="checkboxValues[id]"
|
||||
@change="(e)=>handleChangeCheckboxCommon(e,row,col)"
|
||||
/>
|
||||
</template>
|
||||
<!-- select -->
|
||||
<template v-else-if="col.type === formTypes.select">
|
||||
<a-tooltip
|
||||
:key="i"
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
:checked="checkboxValues[id]"
|
||||
@change="(e)=>handleChangeCheckboxCommon(e,row,col)"
|
||||
/>
|
||||
</template>
|
||||
<!-- select -->
|
||||
<template v-else-if="col.type === formTypes.select">
|
||||
<a-tooltip
|
||||
:key="i"
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
|
||||
<span
|
||||
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
||||
@ -165,17 +178,17 @@
|
||||
<!--</template>-->
|
||||
</a-select>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<!-- date -->
|
||||
<template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
|
||||
<a-tooltip
|
||||
:key="i"
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<!-- date -->
|
||||
<template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
|
||||
<a-tooltip
|
||||
:key="i"
|
||||
:id="id"
|
||||
placement="top"
|
||||
:title="(tooltips[id] || {}).title"
|
||||
:visible="(tooltips[id] || {}).visible || false"
|
||||
:autoAdjustOverflow="true">
|
||||
|
||||
<span
|
||||
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
||||
@ -195,80 +208,81 @@
|
||||
@change="(v)=>handleChangeJDateCommon(v,id,row,col,col.type === formTypes.datetime)"/>
|
||||
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<div v-else-if="col.type === formTypes.upload" :key="i">
|
||||
<template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
|
||||
<a-input
|
||||
:key="fileKey"
|
||||
:readOnly="true"
|
||||
:value="file.name"
|
||||
>
|
||||
|
||||
<template slot="addonBefore" style="width: 30px">
|
||||
<a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
|
||||
<a-icon type="loading"/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else-if="file.status==='done'" title="上传完成">
|
||||
<a-icon type="check-circle" style="color:#00DB00;"/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else title="上传失败">
|
||||
<a-icon type="exclamation-circle" style="color:red;"/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template slot="addonAfter" style="width: 30px">
|
||||
<a-tooltip title="删除并重新上传">
|
||||
<a-icon
|
||||
v-if="file.status!=='uploading'"
|
||||
type="close-circle"
|
||||
style="cursor: pointer;"
|
||||
@click="()=>handleClickDelFile(id)"/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
</a-input>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<div :hidden="uploadValues[id] != null">
|
||||
<div v-else-if="col.type === formTypes.upload" :key="i">
|
||||
<template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
|
||||
<a-input
|
||||
:key="fileKey"
|
||||
:readOnly="true"
|
||||
:value="file.name"
|
||||
>
|
||||
|
||||
<template slot="addonBefore" style="width: 30px">
|
||||
<a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
|
||||
<a-icon type="loading"/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else-if="file.status==='done'" title="上传完成">
|
||||
<a-icon type="check-circle" style="color:#00DB00;"/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else title="上传失败">
|
||||
<a-icon type="exclamation-circle" style="color:red;"/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template slot="addonAfter" style="width: 30px">
|
||||
<a-tooltip title="删除并重新上传">
|
||||
<a-icon
|
||||
v-if="file.status!=='uploading'"
|
||||
type="close-circle"
|
||||
style="cursor: pointer;"
|
||||
@click="()=>handleClickDelFile(id)"/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
</a-input>
|
||||
</template>
|
||||
|
||||
<div :hidden="uploadValues[id] != null">
|
||||
|
||||
<a-upload
|
||||
name="file"
|
||||
:data="{'isup':1}"
|
||||
:multiple="false"
|
||||
:action="col.action"
|
||||
:headers="uploadGetHeaders(row,col)"
|
||||
:showUploadList="false"
|
||||
v-bind="buildProps(row,col)"
|
||||
@change="(v)=>handleChangeUpload(v,id,row,col)"
|
||||
>
|
||||
<a-button icon="upload">{{ col.placeholder }}</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
<a-upload
|
||||
name="file"
|
||||
:data="{'isup':1}"
|
||||
:multiple="false"
|
||||
:action="col.action"
|
||||
:headers="uploadGetHeaders(row,col)"
|
||||
:showUploadList="false"
|
||||
v-bind="buildProps(row,col)"
|
||||
@change="(v)=>handleChangeUpload(v,id,row,col)"
|
||||
>
|
||||
<a-button icon="upload">{{ col.placeholder }}</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="col.type === formTypes.slot" :key="i">
|
||||
<slot
|
||||
:name="(col.slot || col.slotName) || col.key"
|
||||
:index="rowIndex"
|
||||
:text="inputValues[rowIndex][col.key]"
|
||||
:column="col"
|
||||
:rowId="removeCaseId(row.id)"
|
||||
:getValue="()=>_getValueForSlot(row.id)"
|
||||
:target="getVM()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.type === formTypes.slot" :key="i">
|
||||
<slot
|
||||
:name="(col.slot || col.slotName) || col.key"
|
||||
:text="inputValues[rowIndex][col.key]"
|
||||
:column="col"
|
||||
:rowId="removeCaseId(row.id)"
|
||||
:getValue="()=>_getValueForSlot(row.id)"
|
||||
:target="getVM()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- else (normal) -->
|
||||
<span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
|
||||
</template>
|
||||
<!-- else (normal) -->
|
||||
<span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -- tr end -- -->
|
||||
|
||||
</template>
|
||||
<!-- -- tr end -- -->
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -278,6 +292,7 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import { FormTypes, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
|
||||
import { cloneObject, randomString } from '@/utils/util'
|
||||
@ -289,7 +304,7 @@
|
||||
|
||||
export default {
|
||||
name: 'JEditableTable',
|
||||
components: { JDate },
|
||||
components: { JDate, Draggable },
|
||||
props: {
|
||||
// 列信息
|
||||
columns: {
|
||||
@ -338,7 +353,16 @@
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
// 是否可拖拽排序
|
||||
dragSort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dragSortKey: {
|
||||
type: String,
|
||||
default: 'orderNum'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -354,7 +378,8 @@
|
||||
// 'max-height': '400px'
|
||||
tbody: { left: '0px' },
|
||||
// 左侧固定td的style
|
||||
tdLeft: { 'min-width': '4%', 'max-width': '45px' }
|
||||
tdLeft: { 'min-width': '4%', 'max-width': '45px' },
|
||||
tdLeftDs: { 'min-width': '30px', 'max-width': '35px' },
|
||||
},
|
||||
// 表单的类型
|
||||
formTypes: FormTypes,
|
||||
@ -455,89 +480,92 @@
|
||||
},
|
||||
// 侦听器
|
||||
watch: {
|
||||
dataSource: function (newValue) {
|
||||
this.initialize()
|
||||
dataSource: {
|
||||
immediate: true,
|
||||
handler: function (newValue) {
|
||||
this.initialize()
|
||||
|
||||
let rows = []
|
||||
let checkboxValues = {}
|
||||
let selectValues = {}
|
||||
let jdateValues = {}
|
||||
// 禁用行的id
|
||||
let disabledRowIds = (this.disabledRowIds || [])
|
||||
newValue.forEach((data, newValueIndex) => {
|
||||
// 判断源数据是否带有id
|
||||
if (data.id == null || data.id === '') {
|
||||
data.id = this.removeCaseId(this.generateId() + newValueIndex)
|
||||
}
|
||||
let rows = []
|
||||
let checkboxValues = {}
|
||||
let selectValues = {}
|
||||
let jdateValues = {}
|
||||
// 禁用行的id
|
||||
let disabledRowIds = (this.disabledRowIds || [])
|
||||
newValue.forEach((data, newValueIndex) => {
|
||||
// 判断源数据是否带有id
|
||||
if (data.id == null || data.id === '') {
|
||||
data.id = this.removeCaseId(this.generateId() + newValueIndex)
|
||||
}
|
||||
|
||||
let value = { id: this.caseId + data.id }
|
||||
let row = { id: value.id }
|
||||
let disabled = false
|
||||
this.columns.forEach(column => {
|
||||
let inputId = column.key + value.id
|
||||
let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()
|
||||
if (column.type === FormTypes.checkbox) {
|
||||
let value = { id: this.caseId + data.id }
|
||||
let row = { id: value.id }
|
||||
let disabled = false
|
||||
this.columns.forEach(column => {
|
||||
let inputId = column.key + value.id
|
||||
let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()
|
||||
if (column.type === FormTypes.checkbox) {
|
||||
|
||||
// 判断是否设定了customValue（自定义值）
|
||||
if (column.customValue instanceof Array) {
|
||||
let customValue = (column.customValue[0] || '').toString()
|
||||
checkboxValues[inputId] = (sourceValue === customValue)
|
||||
} else {
|
||||
checkboxValues[inputId] = sourceValue
|
||||
}
|
||||
// 判断是否设定了customValue（自定义值）
|
||||
if (column.customValue instanceof Array) {
|
||||
let customValue = (column.customValue[0] || '').toString()
|
||||
checkboxValues[inputId] = (sourceValue === customValue)
|
||||
} else {
|
||||
checkboxValues[inputId] = sourceValue
|
||||
}
|
||||
|
||||
} else if (column.type === FormTypes.select) {
|
||||
if (sourceValue) {
|
||||
// 判断是否是多选
|
||||
selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
|
||||
} else {
|
||||
selectValues[inputId] = undefined
|
||||
}
|
||||
} else if (column.type === FormTypes.select) {
|
||||
if (sourceValue) {
|
||||
// 判断是否是多选
|
||||
selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
|
||||
} else {
|
||||
selectValues[inputId] = undefined
|
||||
}
|
||||
|
||||
} else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
|
||||
jdateValues[inputId] = sourceValue
|
||||
} else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
|
||||
jdateValues[inputId] = sourceValue
|
||||
|
||||
} else if (column.type === FormTypes.slot) {
|
||||
if (sourceValue !== 0 && !sourceValue) {
|
||||
value[column.key] = column.defaultValue
|
||||
} else {
|
||||
value[column.key] = sourceValue
|
||||
}
|
||||
|
||||
} else if (column.type === FormTypes.slot) {
|
||||
if (sourceValue !== 0 && !sourceValue) {
|
||||
value[column.key] = column.defaultValue
|
||||
} else {
|
||||
value[column.key] = sourceValue
|
||||
}
|
||||
|
||||
} else {
|
||||
value[column.key] = sourceValue
|
||||
}
|
||||
// 解析disabledRows
|
||||
for (let columnKey in this.disabledRows) {
|
||||
// 判断是否有该属性
|
||||
if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
|
||||
// row[columnKey] =
|
||||
|
||||
// 解析disabledRows
|
||||
for (let columnKey in this.disabledRows) {
|
||||
// 判断是否有该属性
|
||||
if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
|
||||
// row[columnKey] =
|
||||
|
||||
if (disabled !== true) {
|
||||
disabled = this.disabledRows[columnKey] === data[columnKey]
|
||||
if (disabled) {
|
||||
disabledRowIds.push(row.id)
|
||||
if (disabled !== true) {
|
||||
disabled = this.disabledRows[columnKey] === data[columnKey]
|
||||
if (disabled) {
|
||||
disabledRowIds.push(row.id)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
this.inputValues.push(value)
|
||||
rows.push(row)
|
||||
})
|
||||
this.inputValues.push(value)
|
||||
rows.push(row)
|
||||
})
|
||||
this.disabledRowIds = disabledRowIds
|
||||
this.checkboxValues = checkboxValues
|
||||
this.selectValues = selectValues
|
||||
this.jdateValues = jdateValues
|
||||
this.rows = rows
|
||||
this.disabledRowIds = disabledRowIds
|
||||
this.checkboxValues = checkboxValues
|
||||
this.selectValues = selectValues
|
||||
this.jdateValues = jdateValues
|
||||
this.rows = rows
|
||||
|
||||
// 更新form表单的值
|
||||
this.$nextTick(() => {
|
||||
this.updateFormValues()
|
||||
})
|
||||
// 更新form表单的值
|
||||
this.$nextTick(() => {
|
||||
this.updateFormValues()
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
immediate: true,
|
||||
@ -722,6 +750,12 @@
|
||||
this.selectValues = selectValues
|
||||
this.jdateValues = jdateValues
|
||||
|
||||
if (this.dragSort) {
|
||||
this.inputValues.forEach((item, index) => {
|
||||
item[this.dragSortKey] = (index + 1)
|
||||
})
|
||||
}
|
||||
|
||||
if (update) {
|
||||
this.rows = rows
|
||||
this.$nextTick(() => {
|
||||
@ -751,6 +785,7 @@
|
||||
},
|
||||
/** 添加一行 */
|
||||
add(num = 1, forceScrollToBottom = false) {
|
||||
if (num < 1) return
|
||||
// let timestamp = new Date().getTime()
|
||||
let rows = this.rows
|
||||
let row
|
||||
@ -1230,6 +1265,31 @@
|
||||
}
|
||||
},
|
||||
|
||||
/** 拖动结束，交换inputValue中的值 */
|
||||
handleDragMoveEnd(event) {
|
||||
let { oldIndex, newIndex } = event
|
||||
|
||||
let values = this.inputValues
|
||||
// 存储旧数据，并删除旧项目
|
||||
let temp = values[oldIndex]
|
||||
values.splice(oldIndex, 1)
|
||||
// 向新项目里添加旧数据
|
||||
values.splice(newIndex, 0, temp)
|
||||
|
||||
values.forEach((item, index) => {
|
||||
item[this.dragSortKey] = (index + 1)
|
||||
})
|
||||
|
||||
this.forceUpdateFormValues()
|
||||
|
||||
// 触发已拖动事件
|
||||
this.$emit('dragged', {
|
||||
oldIndex,
|
||||
newIndex,
|
||||
target: this
|
||||
})
|
||||
},
|
||||
|
||||
/* --- common function begin --- */
|
||||
|
||||
/** 鼠标移入 */
|
||||
@ -1355,7 +1415,12 @@
|
||||
_loadDictConcatToOptions(column) {
|
||||
initDictOptions(column.dictCode).then((res) => {
|
||||
if (res.success) {
|
||||
column.options = (column.options || []).concat(res.result)
|
||||
let newOptions = (column.options || [])// .concat(res.result)
|
||||
res.result.forEach(item => {
|
||||
for (let option of newOptions) if (option.value === item.value) return
|
||||
newOptions.push(item)
|
||||
})
|
||||
column.options = newOptions
|
||||
} else {
|
||||
console.group(`JEditableTable 查询字典(${column.dictCode})发生异常`)
|
||||
console.log(res.message)
|
||||
@ -1377,14 +1442,46 @@
|
||||
|
||||
/** 辅助方法：指定a-select 和 j-data 的父容器 */
|
||||
getParentContainer(node) {
|
||||
if (this.$el && this.$el.nodeType !== 8) {
|
||||
return this.$el
|
||||
let element = (() => {
|
||||
// nodeType 8 : Comment : 注释
|
||||
if (this.$el && this.$el.nodeType !== 8) {
|
||||
return this.$el
|
||||
}
|
||||
let doc = document.getElementById(this.caseId + 'inputTable')
|
||||
if (doc != null) {
|
||||
return doc
|
||||
}
|
||||
return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
})()
|
||||
|
||||
// 递归判断是否带有 overflow: hidden；的父元素
|
||||
const ifParent = (child) => {
|
||||
let currentOverflow = null
|
||||
if (child['currentStyle']) {
|
||||
currentOverflow = child['currentStyle']['overflow']
|
||||
} else if (window.getComputedStyle) {
|
||||
currentOverflow = window.getComputedStyle(child)['overflow']
|
||||
}
|
||||
if (currentOverflow != null) {
|
||||
if (currentOverflow === 'hidden') {
|
||||
// 找到了带有 hidden 的标签，判断它的父级是否还有 hidden，直到遇到完全没有 hidden 或 body 的时候才停止递归
|
||||
let temp = ifParent(child.parentNode)
|
||||
return temp != null ? temp : child.parentNode
|
||||
} else
|
||||
// 当前标签没有 hidden ，如果有父级并且父级不是 body 的话就继续递归判断父级
|
||||
if (child.parentNode && child.parentNode.tagName.toLocaleLowerCase() !== 'body') {
|
||||
return ifParent(child.parentNode)
|
||||
} else {
|
||||
// 直到 body 都没有遇到有 hidden 的标签
|
||||
return null
|
||||
}
|
||||
} else {
|
||||
return child
|
||||
}
|
||||
}
|
||||
let doc = document.getElementById(this.caseId + 'inputTable')
|
||||
if (doc != null) {
|
||||
return doc
|
||||
}
|
||||
return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
|
||||
let temp = ifParent(element)
|
||||
return (temp != null) ? temp : element
|
||||
},
|
||||
|
||||
/** 辅助方法：替换${...}变量 */
|
||||
@ -1440,6 +1537,9 @@
|
||||
props['showSearch'] = true
|
||||
}
|
||||
|
||||
// 判断是否是禁用的列
|
||||
props['disabled'] = !!col['disabled']
|
||||
|
||||
// 判断是否为禁用的行
|
||||
if (props['disabled'] !== true) {
|
||||
props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
|
||||
@ -1515,6 +1615,38 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.td-ds {
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.td-ds-icons {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
width: 100%;
|
||||
/*padding: 25% 0;*/
|
||||
height: 100%;
|
||||
|
||||
.anticon-align-left,
|
||||
.anticon-align-right {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.anticon-align-left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.anticon-align-right {
|
||||
right: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.myValue = newValue
|
||||
this.myValue = (newValue == null ? '' : newValue)
|
||||
},
|
||||
myValue(newValue) {
|
||||
console.log(newValue)
|
||||
|
||||
@ -2,30 +2,33 @@
|
||||
|
||||
## 参数配置
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------------|---------|------|----------------------------------------------------------------|
|
||||
| columns | array | ✔️ | 表格列的配置描述，具体项见下表 |
|
||||
| dataSource | array | ✔️ | 表格数据 |
|
||||
| loading | boolean | | 是否正在加载，加载中不会显示任何行，默认false |
|
||||
| actionButton | boolean | | 是否显示操作按钮，包括"新增"、"删除"，默认false |
|
||||
| rowNumber | boolean | | 是否显示行号，默认false |
|
||||
| rowSelection | boolean | | 是否可选择行，默认false |
|
||||
| maxHeight | number | | 设定最大高度(px)，默认400 |
|
||||
| disabledRows | object | | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例 |
|
||||
| disabled | boolean | | 是否禁用所有行，默认false |
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|--------------|---------|------|---------------------------------------------------------------------------------|
|
||||
| columns | array | ✔️ | 表格列的配置描述，具体项见下表 |
|
||||
| dataSource | array | ✔️ | 表格数据 |
|
||||
| loading | boolean | | 是否正在加载，加载中不会显示任何行，默认false |
|
||||
| actionButton | boolean | | 是否显示操作按钮，包括"新增"、"删除"，默认false |
|
||||
| rowNumber | boolean | | 是否显示行号，默认false |
|
||||
| rowSelection | boolean | | 是否可选择行，默认false |
|
||||
| dragSort | boolean | | 是否可拖动排序，默认false |
|
||||
| dragSortKey | string | | 拖动排序存储的Key，无需定义在columns内也能在getValues()时获取到值，默认orderNum |
|
||||
| maxHeight | number | | 设定最大高度(px)，默认400 |
|
||||
| disabledRows | object | | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例 |
|
||||
| disabled | boolean | | 是否禁用所有行，默认false |
|
||||
|
||||
### columns 参数详解
|
||||
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|---------------|--------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| title | string | ✔️ | 表格列头显示的问题 |
|
||||
| key | string | ✔️ | 列数据在数据项中对应的 key，必须是唯一的 |
|
||||
| type | string | ✔️ | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值 |
|
||||
| width | string | | 列的宽度，可以是百分比，也可以是`px`或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比 |
|
||||
| placeholder | string | | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） |
|
||||
| defaultValue | string | | 默认值，在新增一行时生效 |
|
||||
| validateRules | array | | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则) |
|
||||
| props | object | | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}` |
|
||||
| 参数 | 类型 | 必填 | 说明 |
|
||||
|---------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| title | string | ✔️ | 表格列头显示的问题 |
|
||||
| key | string | ✔️ | 列数据在数据项中对应的 key，必须是唯一的 |
|
||||
| type | string | ✔️ | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值 |
|
||||
| width | string | | 列的宽度，可以是百分比，也可以是`px`或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比 |
|
||||
| placeholder | string | | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） |
|
||||
| defaultValue | string | | 默认值，在新增一行时生效 |
|
||||
| validateRules | array | | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则) |
|
||||
| props | object | | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}` |
|
||||
| disabled | boolean | | 是否禁用当前列，默认false |
|
||||
|
||||
#### 当 type=checkbox 时所需的参数
|
||||
|
||||
@ -40,7 +43,7 @@
|
||||
|------------|---------|------|----------------------------------------------------|
|
||||
| options | array | ✔️ | 下拉选项列表，详见下表 |
|
||||
| allowInput | boolean | | 是否允许用户输入内容，并创建新的内容 |
|
||||
| dictCode | String | | 数据字典Code，若options也有值，则拼接再options后面 |
|
||||
| dictCode | String | | 数据字典Code，若options也有值，则拼接在options后面 |
|
||||
|
||||
##### options 所需参数
|
||||
|
||||
@ -75,11 +78,12 @@
|
||||
|
||||
## 事件
|
||||
|
||||
| 事件名 | 触发时机 | 参数 |
|
||||
|-----------------|----------------------------------------------------|-------------------------------|
|
||||
| added | 当添加行操作完成后触发 | |
|
||||
| deleted | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id |
|
||||
| selectRowChange | 当行被选中或取消选中时触发 | `selectedRowIds` 被选中行的id |
|
||||
| 事件名 | 触发时机 | 参数 |
|
||||
|-----------------|----------------------------------------------------|--------------------------------------------------|
|
||||
| added | 当添加行操作完成后触发 | |
|
||||
| deleted | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id |
|
||||
| selectRowChange | 当行被选中或取消选中时触发 | `selectedRowIds` 被选中行的id |
|
||||
| valueChange | 当数据发生改变的时候触发的事件 | `{ type, row, column, value, target }` Event对象 |
|
||||
|
||||
## 方法
|
||||
|
||||
@ -490,6 +494,7 @@ this.$refs.editableTable.getValues((error, values) => {
|
||||
/* a 标签的点击事件，删除当前选中的行 */
|
||||
handleDelete(props) {
|
||||
// 参数解释
|
||||
// props.index ：当前行的下标
|
||||
// props.text ：当前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
|
||||
// props.rowId ：当前选中行的id，如果是新增行则是临时id
|
||||
// props.column ：当前操作的列
|
||||
|
||||
928
ant-design-vue-jeecg/src/components/jeecg/modal/JCronModal.vue
Normal file
928
ant-design-vue-jeecg/src/components/jeecg/modal/JCronModal.vue
Normal file
@ -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="60"></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="60"></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="scss">
|
||||
.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="scss" 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>
|
||||
Reference in New Issue
Block a user