Signed-off-by: chy <chy@163.com>
This commit is contained in:
108
src/views/lowdesign/general/components/TipView.vue
Normal file
108
src/views/lowdesign/general/components/TipView.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="control-word-content">
|
||||
<table cellspacing="0" cellpadding="0" style="width: 100%">
|
||||
<tbody v-for="(control, index) in tbodyList" :key="index">
|
||||
<tr>
|
||||
<td colspan="2" class="title">
|
||||
<span>{{ control.title }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(tr, trIndex) in control.list" :key="trIndex">
|
||||
<template v-if="props.type == 'simple'">
|
||||
<td>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="value" v-if="tr.value">
|
||||
<el-tooltip v-if="tr.tip" :content="tr.tip">
|
||||
{{ valueStyle == 'simple' ? tr.value : `【 ${tr.value} 】` }}
|
||||
</el-tooltip>
|
||||
<template v-else>
|
||||
{{ valueStyle == 'simple' ? tr.value : `【 ${tr.value} 】` }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-12px" :class="{ 'pl-5px': valueStyle == 'simple' }" v-if="tr.label">
|
||||
{{ tr.label }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td v-for="(td, tdIndex) in tr" :key="tdIndex" :colspan="td.colspan">
|
||||
<div class="flex flex-wrap">
|
||||
<span class="value" v-if="td.value">
|
||||
<el-tooltip v-if="td.tip" :content="td.tip">
|
||||
{{ valueStyle == 'simple' ? td.value : `【 ${td.value} 】` }}
|
||||
</el-tooltip>
|
||||
<template v-else>
|
||||
{{ valueStyle == 'simple' ? td.value : `【 ${td.value} 】` }}
|
||||
</template>
|
||||
</span>
|
||||
<span :class="{ 'pl-5px': valueStyle == 'simple' }" v-if="td.label">
|
||||
{{ td.label }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import controlParams from '@/components/LowDesign/src/utils/tipView'
|
||||
|
||||
defineOptions({ name: 'TipView' })
|
||||
interface Props {
|
||||
type?: 'default' | 'simple'
|
||||
valueStyle?: 'default' | 'simple'
|
||||
tipKeyList?: Array<string>
|
||||
width?: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const tbodyList = computed(() => {
|
||||
const list = [] as any
|
||||
if (props.tipKeyList) {
|
||||
props.tipKeyList.forEach((key) => {
|
||||
list.push(controlParams[key])
|
||||
})
|
||||
}
|
||||
return list
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.control-word-content {
|
||||
padding: 5px 10px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 8px;
|
||||
text-align: left;
|
||||
border: 1px solid black;
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
&.title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark .control-word-content {
|
||||
td {
|
||||
border-color: var(--el-border-color-dark) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
450
src/views/lowdesign/general/components/VerifyOption.vue
Normal file
450
src/views/lowdesign/general/components/VerifyOption.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="verify-option">
|
||||
<el-container class="h-100%">
|
||||
<el-aside width="220px" class="left-tree">
|
||||
<div class="verify-title">
|
||||
<span>校验类型</span>
|
||||
</div>
|
||||
<div class="verify-draggable">
|
||||
<draggable
|
||||
class="verify-content"
|
||||
tag="div"
|
||||
:list="verifyTypeList"
|
||||
:group="{ name: 'config', pull: 'clone', put: false }"
|
||||
ghost-class="verify-ghost"
|
||||
:sort="false"
|
||||
item-key="value"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="verify-item" @click="setOption(element)">
|
||||
<span>{{ element.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main class="main-option">
|
||||
<div class="option-title table-item-row">
|
||||
<div class="row-item">
|
||||
<div class="cell">序号</div>
|
||||
</div>
|
||||
<div class="row-item text-center">
|
||||
<div class="cell">校验类型</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">校验表达式</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">启用状态</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-content">
|
||||
<draggable
|
||||
class="content-draggable"
|
||||
:list="verifyList"
|
||||
:group="{ name: 'option', put: true }"
|
||||
ghost-class="option-ghost"
|
||||
:animation="300"
|
||||
handle=".move-box"
|
||||
item-key="prop"
|
||||
@add="handleAddColumn"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="option-item table-item-row mt--2px">
|
||||
<div class="row-item move-box">
|
||||
<div class="cell">{{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="row-item move-box">
|
||||
<div class="cell">
|
||||
<avue-text-ellipsis
|
||||
:key="element.value"
|
||||
:text="element.label"
|
||||
:height="40"
|
||||
:width="140"
|
||||
use-tooltip
|
||||
placement="top"
|
||||
>
|
||||
<template #more>
|
||||
<small>...</small>
|
||||
</template>
|
||||
</avue-text-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">
|
||||
<template v-if="element.controlType == 'length'">
|
||||
<div class="flex items-center">
|
||||
<span>最小长度：</span>
|
||||
<avue-input-number
|
||||
class="flex-basis-90px flex-shrink-0"
|
||||
v-model="element.leng_min"
|
||||
></avue-input-number>
|
||||
<span class="ml-10px">最大长度：</span>
|
||||
<avue-input-number
|
||||
class="flex-basis-90px flex-shrink-0"
|
||||
v-model="element.leng_max"
|
||||
></avue-input-number>
|
||||
<span class="ml-10px">输入类型：</span>
|
||||
<avue-select
|
||||
class="flex-basis-100px flex-shrink-0"
|
||||
v-model="element.leng_type"
|
||||
:dic="lengTypeDic"
|
||||
></avue-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="element.controlType == 'regExp'">
|
||||
<div class="flex items-center">
|
||||
<span>正则：</span>
|
||||
<avue-input
|
||||
class="reg-exp-input flex-1"
|
||||
v-model="element.regExp"
|
||||
:placeholder="element.tip"
|
||||
prepend="/"
|
||||
append="/"
|
||||
></avue-input>
|
||||
<span class="ml-10px">失败提示语：</span>
|
||||
<avue-input
|
||||
class="flex-basis-120px flex-shrink-0"
|
||||
v-model="element.msg"
|
||||
></avue-input>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="element.controlType == 'MEditor'">
|
||||
<avue-input
|
||||
v-model="element.customStr"
|
||||
readonly
|
||||
@click="openEditor(index)"
|
||||
></avue-input>
|
||||
</template>
|
||||
<template v-else-if="patternObj[element.type] || element.tip">
|
||||
<div class="h-32px line-height-32px">
|
||||
{{
|
||||
patternObj[element.type] ||
|
||||
(isSub ? element.subTip || element.tip : element.tip)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">
|
||||
<avue-switch v-model="element.display" :dic="switchDic"></avue-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<div class="cell">
|
||||
<el-button type="danger" link text @click="delRow(element)"> 删除 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<DesignPopup v-model="MEDialog.value" v-bind="MEDialog.params" :isBodyFull="true">
|
||||
<template #default>
|
||||
<MonacoEditor v-model="MEData.value" v-bind="MEData.params"></MonacoEditor>
|
||||
</template>
|
||||
</DesignPopup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { rulesVerify, patternObj } from '@/components/LowDesign/src/utils/verifyOption'
|
||||
import useMEDialog from '@/hooks/design/useMEDialog'
|
||||
|
||||
defineOptions({ name: 'VerifyOption' })
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
isSub?: boolean
|
||||
filterKey?: string[]
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const verifyStr = defineModel<string>({ default: '' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { MEDialog, MEData, openMEDialog } = useMEDialog()
|
||||
|
||||
const switchDic = [
|
||||
{ label: '', value: false },
|
||||
{ label: '', value: true }
|
||||
]
|
||||
const lengTypeDic = [
|
||||
{ label: '任意字符', value: 'all' },
|
||||
{ label: '数字', value: 'number' },
|
||||
{ label: '字母', value: 'alphabet' },
|
||||
{ label: '中文', value: 'chinese' }
|
||||
]
|
||||
|
||||
const verifyList = ref<any>([])
|
||||
|
||||
const verifyTypeList = computed(() => {
|
||||
if (props.filterKey) {
|
||||
return rulesVerify.filter((item) => !props.filterKey?.includes(item.type))
|
||||
}
|
||||
return rulesVerify
|
||||
})
|
||||
|
||||
const onlyKeyList = computed(() => {
|
||||
return verifyList.value
|
||||
.filter((item) => !['customRegExp', 'customRule'].includes(item.type) && item.prop)
|
||||
.map((item) => item.type)
|
||||
})
|
||||
|
||||
const openEditor = (index) => {
|
||||
openMEDialog(
|
||||
{
|
||||
prop: 'customStr',
|
||||
label: '自定义校验规则',
|
||||
params: {
|
||||
width: '50%'
|
||||
}
|
||||
},
|
||||
verifyList.value[index]
|
||||
)
|
||||
}
|
||||
|
||||
const initFun = () => {
|
||||
verifyList.value = []
|
||||
if (verifyStr.value) verifyList.value = JSON.parse(verifyStr.value)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(val) => {
|
||||
if (val) initFun()
|
||||
}
|
||||
)
|
||||
|
||||
const handleAddColumn = (e) => {
|
||||
const newIndex = e.newIndex
|
||||
const data = cloneDeep(verifyList.value[newIndex])
|
||||
if (onlyKeyList.value.includes(data.type)) {
|
||||
verifyList.value = verifyList.value.filter((item) => item.prop)
|
||||
message.info('该校验类型已存在')
|
||||
return
|
||||
}
|
||||
if (data.type == 'leng') data.leng_type = 'all'
|
||||
if (data.type == 'customRule')
|
||||
data.customStr = `return {
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('值不能为空')) //校验失败
|
||||
} else {
|
||||
callback() //校验成功
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}`
|
||||
if (!data.prop) data.prop = `option_${Math.ceil(Math.random() * 9999999)}`
|
||||
data.display = true
|
||||
verifyList.value[newIndex] = data
|
||||
}
|
||||
const setOption = (row) => {
|
||||
verifyList.value.push(row)
|
||||
handleAddColumn({ newIndex: verifyList.value.length - 1 })
|
||||
setTimeout(() => {
|
||||
getOptionStr()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const delRow = (row) => {
|
||||
verifyList.value = verifyList.value.filter((item) => item.prop != row.prop)
|
||||
}
|
||||
|
||||
const getOptionStr = () => {
|
||||
if (verifyList.value.length) return JSON.stringify(verifyList.value)
|
||||
else ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initFun()
|
||||
})
|
||||
|
||||
defineExpose({ getOptionStr })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.verify-option {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: -1px;
|
||||
|
||||
.left-tree {
|
||||
padding: 10px;
|
||||
border: 1px solid #f1f1f1;
|
||||
|
||||
.verify-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
||||
.el-icon {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.verify-draggable {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.verify-item {
|
||||
width: 160px;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
cursor: move;
|
||||
background-color: #f4f6fc;
|
||||
border: 1px dashed #f4f6fc;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-option {
|
||||
padding: 0;
|
||||
border: 1px solid #f1f1f1;
|
||||
border-left: 0;
|
||||
|
||||
.option-content {
|
||||
height: calc(100% - 41px);
|
||||
|
||||
.content-draggable {
|
||||
height: 100%;
|
||||
padding-bottom: 55px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.option-ghost {
|
||||
position: relative;
|
||||
width: 0 !important;
|
||||
height: 32px;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 1px 2px 0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
background: white;
|
||||
border-left: 5px solid var(--el-color-primary);
|
||||
content: '';
|
||||
outline: none 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.table-item-row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
||||
.row-item {
|
||||
height: 100%;
|
||||
min-height: 32px;
|
||||
padding: 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
|
||||
.cell {
|
||||
padding: 0 12px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reg-exp-input {
|
||||
::v-deep(.el-input) {
|
||||
.el-input-group__prepend,
|
||||
.el-input-group__append {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
flex-basis: 60px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex-basis: 170px;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex: 1;
|
||||
line-height: normal;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
flex-basis: 110px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
flex-basis: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.move-box {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-title {
|
||||
background-color: #fafafa;
|
||||
|
||||
.row-item:nth-child(3) {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-custom {
|
||||
.custom-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
padding: 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.custom-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
src/views/lowdesign/general/components/index.ts
Normal file
3
src/views/lowdesign/general/components/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import TipView from './TipView.vue';
|
||||
import VerifyOption from './VerifyOption.vue';
|
||||
export { TipView, VerifyOption }
|
||||
268
src/views/lowdesign/general/components/useRenderVxeColumn.tsx
Normal file
268
src/views/lowdesign/general/components/useRenderVxeColumn.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import { VxeUI } from 'vxe-table'
|
||||
import { tableInfoOption } from '../../tableDesign/designData';
|
||||
import { MonacoEditor } from '@/components/MonacoEditor/index'
|
||||
import { useAppStoreWithOut } from '@/store/modules/app'
|
||||
|
||||
const appStore = useAppStoreWithOut()
|
||||
|
||||
//表单开发校验
|
||||
const infoTableIsEdit = ({ row, column }, { verifyEdit, noStop }) => {
|
||||
let bool = true
|
||||
//判断如果是 需要编辑校验并且是系统字段 不可编辑
|
||||
if (verifyEdit && tableInfoOption.disabledArr.includes(row.fieldCode) && row.only) bool = false
|
||||
//判断是否可以绑定字典
|
||||
if (!['select', 'radio', 'checkbox', 'tree', 'cascader', 'dicTableSelect'].includes(row.controlType) && ['dictType', 'dictCode', 'dictTable', 'dictText', 'dictTextFormatter', 'dictTableColumn', 'dictTableSearch'].includes(column.field)) {
|
||||
if (!noStop) bool = false
|
||||
}
|
||||
// if (row.controlType != 'dicTableSelect' && column.field == 'dictTableColumn') bool = false
|
||||
//判断如果是 系统字典 不可编辑
|
||||
if (row.dictType == 'dict' && ['dictTable', 'dictText', 'dictTableColumn', 'dictTableSearch'].includes(column.field)) bool = false
|
||||
//判断如果没有同步数据库 接口查询、外键 不可编辑
|
||||
if (row.isDb == 'N' && ['queryIsDb', 'mainTable', 'mainField'].includes(column.field)) bool = false
|
||||
//如果是树表pid的接口查询 不可编辑
|
||||
if (row.fieldCode == 'pid' && row.only && column.field == 'queryIsDb') bool = false
|
||||
//如果是id 接口查询 不可编辑
|
||||
if (row.fieldCode == 'id' && row.only && column.field == 'queryIsDb') bool = false
|
||||
//如果配置了外键 接口查询 不可编辑
|
||||
if (row.mainField && row.mainField && column.field == 'queryIsDb') bool = false
|
||||
//如果虚拟字段 处理方式为空 处理配置不能编辑
|
||||
if (!row.virtualType && ['virtual_java_str', 'virtual_sql_str', 'virtual_fun_str'].includes(column.field)) bool = false
|
||||
return bool
|
||||
}
|
||||
|
||||
const handleLowClickInput = (row, column) => {
|
||||
const prop = column.fieldProp || column.field
|
||||
let text = row[prop]
|
||||
if (text) {
|
||||
if (['summarySql', 'virtual_sql_str', 'virtual_java_str'].includes(prop)) {
|
||||
const obj = JSON.parse(text)
|
||||
text = obj[obj.valueType]
|
||||
if (prop == 'summarySql' && obj.valueType == 'group') {
|
||||
text = text.replace('#{lideeyunji_summary_table}', '当前表的数据源')
|
||||
}
|
||||
if (prop == 'virtual_java_str') {
|
||||
if (obj.valueType == 'group') {
|
||||
text = text.map(item => `${item.type == 'CALCULATE' ? '计算' : '拼接'}：${item.value} `).join(' ')
|
||||
} else if (obj.valueType == 'custom') {
|
||||
text = `JAVA类名/Sping Key：${text.javaPath}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
watch(() => appStore.isDark, (val) => {
|
||||
if (val) VxeUI.setTheme('dark')
|
||||
else VxeUI.setTheme('light')
|
||||
}, { immediate: true })
|
||||
|
||||
export const useRenderVxeColumn = (useType = 'table') => {
|
||||
if (VxeUI.renderer.get('LowInput') !== null) return
|
||||
const stopIcon = <icon style="position: absolute; right: 4px; top: 2px; color: #f56c6c;" size={14} icon="uiw:stop-o" />
|
||||
const lowControl = {
|
||||
LowInput: {
|
||||
default: (renderOpts, { row, column, fieldProp }, isStop) => {
|
||||
const prop = fieldProp || column.field
|
||||
if (isStop) return (<div> <span>{row[prop]}</span> {stopIcon} </div>)
|
||||
return <span>{row[prop]}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column, fieldProp }) => {
|
||||
const { placeholder } = renderOpts
|
||||
const prop = fieldProp || column.field
|
||||
return <el-input class="my-cell" text="text" v-model={row[prop]} placeholder={placeholder ? placeholder : '请输入 ' + column.title} />
|
||||
}
|
||||
},
|
||||
LowNumber: {
|
||||
default: (renderOpts, { row, column }, isStop) => {
|
||||
if (isStop) return (<div> <span>{row[column.field]}</span> {stopIcon} </div>)
|
||||
return <span>{row[column.field]}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column }) => {
|
||||
return <div class="w-100% flex"><el-input-number v-model={row[column.field]} controls={false} placeholder={'请输入 ' + column.title} {...(renderOpts.params || {})} /></div>
|
||||
}
|
||||
},
|
||||
LowCheckbox: {
|
||||
default: (renderOpts, { row, column }, isStop) => {
|
||||
if (isStop) return (<div> <span>{row[column.field] == 'Y' ? '√' : ''}</span> {stopIcon} </div>)
|
||||
return <span>{row[column.field] == 'Y' ? '√' : ''}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column }) => {
|
||||
return <el-checkbox v-model={row[column.field]} true-value="Y" false-value="N" />
|
||||
}
|
||||
},
|
||||
LowCheckboxSum: {
|
||||
default: (renderOpts, { row, column }, isStop) => {
|
||||
if (isStop) return (<div> <span>{!!row[column.field] ? '√' : ''}</span> {stopIcon} </div>)
|
||||
return <span>{!!row[column.field] ? '√' : ''}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column }) => {
|
||||
return <el-checkbox v-model={row[column.field]} true-value={row.fieldCode+'_s'} false-value="" />
|
||||
}
|
||||
},
|
||||
LowSelect: {
|
||||
default: (renderOpts, { row, column }, isStop = false) => {
|
||||
if (column.field == 'dictType' && !row[column.field] && infoTableIsEdit({ row, column }, renderOpts)) {
|
||||
return <div class="c-#ccc text-12px">可配置</div>
|
||||
}
|
||||
const { typeKey } = renderOpts
|
||||
let dicObj = {}
|
||||
if (typeKey && row[typeKey]) {
|
||||
dicObj = renderOpts[`${row[typeKey]}DicObj`] || {}
|
||||
if (row[typeKey] == 'table' && column.field != 'dictTable' && row.dictTable) dicObj = dicObj[row.dictTable] || {}
|
||||
} else if (column.field == 'mainField') {
|
||||
dicObj = renderOpts.dicObj || {}
|
||||
if (row.mainTable) dicObj = dicObj[row.mainTable] || {}
|
||||
} else if (!typeKey) dicObj = renderOpts['dicObj'] || {}
|
||||
let value = row[column.field]
|
||||
if (value === '' || value === undefined || value === null) value = []
|
||||
if (typeof value == 'string') value = [value]
|
||||
if (value.length && Object.keys(dicObj).length) {
|
||||
const text: Array<string> = []
|
||||
value.forEach(key => text.push(dicObj[key] || key))
|
||||
value = text.join(' | ')
|
||||
}
|
||||
if (isStop) return (<div> <span>{value}</span> {stopIcon} </div>)
|
||||
return <span>{value}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, rowIndex, column }) => {
|
||||
const { multiple, filterable, allowCreate, typeKey } = renderOpts
|
||||
let dicData = [] as any
|
||||
if (typeKey && row[typeKey]) {
|
||||
dicData = renderOpts[`${row[typeKey]}DicData`]
|
||||
if (row[typeKey] == 'table' && column.field != 'dictTable') {
|
||||
if (row.dictTable) dicData = dicData[row.dictTable]
|
||||
else dicData = [{ label: '请先选择 字典Table', value: '-1', disabled: true }]
|
||||
}
|
||||
} else if (column.field == 'mainField') {
|
||||
dicData = renderOpts.dicData
|
||||
if (row.mainTable) dicData = dicData[row.mainTable]
|
||||
else dicData = [{ label: '请先选择 外键-主表名', value: '-1', disabled: true }]
|
||||
} else if (!typeKey) dicData = renderOpts['dicData']
|
||||
|
||||
//树表
|
||||
if (column.field == 'dictTable' && ['tree', 'cascader'].includes(row.controlType) && row.dictType) {
|
||||
dicData = renderOpts['treeDicData']
|
||||
}
|
||||
|
||||
//设置禁用选择
|
||||
if (column.field == 'dictType') {
|
||||
dicData = dicData.map(item => {
|
||||
if (['tree', 'cascader', 'dicTableSelect'].includes(row.controlType) && item.value == 'dict') item.disabled = true
|
||||
else item.disabled = false
|
||||
return item
|
||||
})
|
||||
}
|
||||
return (
|
||||
<avue-select
|
||||
popper-class="vxe-table--ignore-clear"
|
||||
v-model={row[column.field]}
|
||||
placeholder={'请选择 ' + column.title}
|
||||
dic={dicData}
|
||||
multiple={multiple}
|
||||
filterable={filterable}
|
||||
allowCreate={allowCreate}
|
||||
onChange={() => renderOpts.events ? renderOpts.events.change(row, column.field, rowIndex) : ''}
|
||||
/>
|
||||
)
|
||||
}
|
||||
},
|
||||
LowSummaryBottomSql: {
|
||||
default: (renderOpts, { row, column }, isStop = false) => {
|
||||
const { dicObj } = renderOpts
|
||||
let value = row.summaryJson.sqlType
|
||||
if (value === '' || value === undefined || value === null) return ''
|
||||
if (value == 'custom') return <span>自定义SQL：<span style="color:#409EFF">{row.summaryJson.sqlValue}</span></span>
|
||||
if (Object.keys(dicObj).length) value = dicObj[value]
|
||||
if (isStop) return (<div> <span>{value}</span> {stopIcon} </div>)
|
||||
return <span>{value}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column }) => {
|
||||
const { dicData } = renderOpts
|
||||
const visible = row.summaryJson.sqlType == 'custom'
|
||||
return (
|
||||
<el-popover popper-class="low-summary-buttom-sql__popover" popper-style={{ width: 'auto', height: 'auto' }} visible={visible} placement='bottom-start' v-slots={{
|
||||
reference: () => (
|
||||
<avue-select
|
||||
popper-class="vxe-table--ignore-clear"
|
||||
v-model={row.summaryJson.sqlType}
|
||||
placeholder={'请选择 ' + column.title}
|
||||
dic={dicData}
|
||||
/>
|
||||
),
|
||||
default: () => (
|
||||
<div style={{ width: '400px', height: '200px' }} class="vxe-table--ignore-clear">
|
||||
<MonacoEditor v-model={row.summaryJson.sqlValue} language='mysql' editorOption={{ minimap: false }}></MonacoEditor>
|
||||
</div>
|
||||
),
|
||||
}}>
|
||||
</el-popover>
|
||||
)
|
||||
}
|
||||
},
|
||||
LowClickInput: {
|
||||
default: (renderOpts, { row, column, fieldProp }, isStop) => {
|
||||
const text = handleLowClickInput(row, { ...column, fieldProp })
|
||||
if (isStop) return (<div> <span>{text}</span> {stopIcon} </div>)
|
||||
return <span>{text}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, rowIndex, column, fieldProp }) => {
|
||||
const prop = fieldProp || column.field
|
||||
const text = handleLowClickInput(row, { ...column, fieldProp })
|
||||
return <el-input class="my-cell" readonly onClick={() => renderOpts.events.click(row, prop, rowIndex)} text="text" value={text} placeholder={'请输入 ' + column.title} />
|
||||
}
|
||||
},
|
||||
virtualInput: {
|
||||
default: (renderOpts, { row, column }, isStop) => {
|
||||
if (!row.virtualType) isStop = true
|
||||
const option = { row, column, fieldProp: `virtual_${row.virtualType}_str` }
|
||||
if (row.virtualType == 'fun') return lowControl.LowInput.default(renderOpts, option, isStop)
|
||||
else return lowControl.LowClickInput.default(renderOpts, option, isStop)
|
||||
},
|
||||
edit: (renderOpts, { row, rowIndex, column }) => {
|
||||
const option = { row, column, rowIndex, fieldProp: `virtual_${row.virtualType}_str` }
|
||||
if (row.virtualType == 'fun') return lowControl.LowInput.edit(renderOpts, option)
|
||||
else return lowControl.LowClickInput.edit(renderOpts, option)
|
||||
}
|
||||
},
|
||||
LowMonacoEditorInput: {
|
||||
default: (renderOpts, { row, column, fieldProp }, isStop) => {
|
||||
const prop = fieldProp || column.field
|
||||
if (isStop) return (<div> <span>{row[prop]}</span> {stopIcon} </div>)
|
||||
return <span>{row[prop]}</span>
|
||||
},
|
||||
edit: (renderOpts, { row, column, fieldProp }) => {
|
||||
const prop = fieldProp || column.field
|
||||
return (
|
||||
<el-popover popper-style={{ width: 'auto', height: 'auto' }} placement='top' trigger='click' v-slots={{
|
||||
reference: () => (
|
||||
<el-input class="my-cell" text="text" v-model={row[prop]} clearable placeholder={'请输入 ' + column.title} onClick={() => renderOpts.events.click(row)} />
|
||||
),
|
||||
default: () => (
|
||||
<div>
|
||||
<div style={{ fontSize: '16px' }}>{row.fieldName}（{row.fieldCode}） {column.title}</div>
|
||||
<div style={{ width: '600px', height: '200px' }} class="vxe-table--ignore-clear">
|
||||
<MonacoEditor v-model={row[prop]} language='javascript' editorOption={{ minimap: false }}></MonacoEditor>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}}>
|
||||
</el-popover>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const key in lowControl) {
|
||||
const addObj = { renderDefault: lowControl[key].default, renderCell: lowControl[key].default }
|
||||
if (lowControl[key].edit) {
|
||||
addObj['renderEdit'] = (renderOpts: any, params) => {
|
||||
if (useType == 'table') {
|
||||
if (!infoTableIsEdit(params, renderOpts)) return lowControl[key].default(renderOpts, params, true)
|
||||
}
|
||||
return lowControl[key].edit(renderOpts, params)
|
||||
}
|
||||
}
|
||||
VxeUI.renderer.add(key, addObj)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user