|
|
|
@ -230,17 +230,35 @@ const attrList = computed(() => { |
|
|
|
|
|
|
|
const temp =reactive<PublicAtrr[]>([ |
|
|
|
{ |
|
|
|
label: '标签名称', |
|
|
|
value: item.label, |
|
|
|
path: 'item.label', |
|
|
|
vHide: [ |
|
|
|
'table', |
|
|
|
'grid', |
|
|
|
'tabs', |
|
|
|
'title', |
|
|
|
'gridChild', |
|
|
|
'div', |
|
|
|
'inputSlot', |
|
|
|
'flex', |
|
|
|
'button', |
|
|
|
'txt' |
|
|
|
], |
|
|
|
eventName: 'labelNameVal' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '组件类型', |
|
|
|
value: unitName, |
|
|
|
placeholder: '组件类型', |
|
|
|
path: 'unitName' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '自定义Class', |
|
|
|
value: config.className, |
|
|
|
placeholder: '样式类名', |
|
|
|
path: 'config.className' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// label: '自定义Class', |
|
|
|
// value: config.className, |
|
|
|
// placeholder: '样式类名', |
|
|
|
// path: 'config.className' |
|
|
|
// }, |
|
|
|
{ |
|
|
|
label: '字段标识', |
|
|
|
value: name, |
|
|
|
@ -281,6 +299,23 @@ const attrList = computed(() => { |
|
|
|
'treeSelect', |
|
|
|
'digitpage' |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '帮助信息', |
|
|
|
value: config.help, |
|
|
|
path: 'config.help', |
|
|
|
vHide: [ |
|
|
|
'table', |
|
|
|
'grid', |
|
|
|
'tabs', |
|
|
|
'gridChild', |
|
|
|
'divider', |
|
|
|
'div', |
|
|
|
'inputSlot', |
|
|
|
'flex', |
|
|
|
'button', |
|
|
|
'txt' |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '按钮类型', |
|
|
|
@ -328,26 +363,9 @@ const attrList = computed(() => { |
|
|
|
}, |
|
|
|
vShow: ['button', 'div'] |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
label: 'label值', |
|
|
|
value: item.label, |
|
|
|
path: 'item.label', |
|
|
|
vHide: [ |
|
|
|
'table', |
|
|
|
'grid', |
|
|
|
'tabs', |
|
|
|
'title', |
|
|
|
'gridChild', |
|
|
|
'div', |
|
|
|
'inputSlot', |
|
|
|
'flex', |
|
|
|
'button', |
|
|
|
'txt' |
|
|
|
], |
|
|
|
eventName: 'labelNameVal' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '隐藏label', |
|
|
|
label: '隐藏标签', |
|
|
|
value: item.showLabel, |
|
|
|
path: 'item.showLabel', |
|
|
|
type: 'switch', |
|
|
|
@ -366,23 +384,7 @@ const attrList = computed(() => { |
|
|
|
'txt' |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '帮助信息', |
|
|
|
value: config.help, |
|
|
|
path: 'config.help', |
|
|
|
vHide: [ |
|
|
|
'table', |
|
|
|
'grid', |
|
|
|
'tabs', |
|
|
|
'gridChild', |
|
|
|
'divider', |
|
|
|
'div', |
|
|
|
'inputSlot', |
|
|
|
'flex', |
|
|
|
'button', |
|
|
|
'txt' |
|
|
|
] |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
label: '表单栅格', |
|
|
|
value: config.span, |
|
|
|
@ -498,76 +500,76 @@ const attrList = computed(() => { |
|
|
|
type: 'switch', |
|
|
|
vShow: ['select'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '是否禁用', |
|
|
|
value: control.disabled, |
|
|
|
path: 'control.disabled', |
|
|
|
type: 'switch', |
|
|
|
vShow: [ |
|
|
|
'input', |
|
|
|
'password', |
|
|
|
'textarea', |
|
|
|
'radio', |
|
|
|
'checkbox', |
|
|
|
'select', |
|
|
|
'date', |
|
|
|
'switch', |
|
|
|
'number', |
|
|
|
'cascader', |
|
|
|
'upload', |
|
|
|
'rate', |
|
|
|
'tinymce', |
|
|
|
'treeSelect' |
|
|
|
], |
|
|
|
vIf: state.isSearch |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '是否禁用编辑', |
|
|
|
value: config.editDisabled, |
|
|
|
path: 'config.editDisabled', |
|
|
|
type: 'switch', |
|
|
|
vShow: [ |
|
|
|
'input', |
|
|
|
'password', |
|
|
|
'textarea', |
|
|
|
'radio', |
|
|
|
'checkbox', |
|
|
|
'select', |
|
|
|
'date', |
|
|
|
'switch', |
|
|
|
'number', |
|
|
|
'cascader', |
|
|
|
'upload', |
|
|
|
'treeSelect', |
|
|
|
'table', |
|
|
|
'flex' |
|
|
|
], |
|
|
|
vIf: state.isSearch |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '添加页隐藏', |
|
|
|
value: config.disabledAdd, |
|
|
|
path: 'config.disabledAdd', |
|
|
|
type: 'switch', |
|
|
|
vIf: state.isSearch, |
|
|
|
vHide: ['inputSlot'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '编辑页隐藏', |
|
|
|
value: config.disabledEdit, |
|
|
|
path: 'config.disabledEdit', |
|
|
|
type: 'switch', |
|
|
|
vIf: state.isSearch, |
|
|
|
vHide: ['inputSlot'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '详情页隐藏', |
|
|
|
value: config.disabledDetail, |
|
|
|
path: 'config.disabledDetail', |
|
|
|
type: 'switch', |
|
|
|
vIf: state.isSearch, |
|
|
|
vHide: ['inputSlot'] |
|
|
|
}, |
|
|
|
// { |
|
|
|
// label: '是否禁用', |
|
|
|
// value: control.disabled, |
|
|
|
// path: 'control.disabled', |
|
|
|
// type: 'switch', |
|
|
|
// vShow: [ |
|
|
|
// 'input', |
|
|
|
// 'password', |
|
|
|
// 'textarea', |
|
|
|
// 'radio', |
|
|
|
// 'checkbox', |
|
|
|
// 'select', |
|
|
|
// 'date', |
|
|
|
// 'switch', |
|
|
|
// 'number', |
|
|
|
// 'cascader', |
|
|
|
// 'upload', |
|
|
|
// 'rate', |
|
|
|
// 'tinymce', |
|
|
|
// 'treeSelect' |
|
|
|
// ], |
|
|
|
// vIf: state.isSearch |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '是否禁用编辑', |
|
|
|
// value: config.editDisabled, |
|
|
|
// path: 'config.editDisabled', |
|
|
|
// type: 'switch', |
|
|
|
// vShow: [ |
|
|
|
// 'input', |
|
|
|
// 'password', |
|
|
|
// 'textarea', |
|
|
|
// 'radio', |
|
|
|
// 'checkbox', |
|
|
|
// 'select', |
|
|
|
// 'date', |
|
|
|
// 'switch', |
|
|
|
// 'number', |
|
|
|
// 'cascader', |
|
|
|
// 'upload', |
|
|
|
// 'treeSelect', |
|
|
|
// 'table', |
|
|
|
// 'flex' |
|
|
|
// ], |
|
|
|
// vIf: state.isSearch |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '添加页隐藏', |
|
|
|
// value: config.disabledAdd, |
|
|
|
// path: 'config.disabledAdd', |
|
|
|
// type: 'switch', |
|
|
|
// vIf: state.isSearch, |
|
|
|
// vHide: ['inputSlot'] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '编辑页隐藏', |
|
|
|
// value: config.disabledEdit, |
|
|
|
// path: 'config.disabledEdit', |
|
|
|
// type: 'switch', |
|
|
|
// vIf: state.isSearch, |
|
|
|
// vHide: ['inputSlot'] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: '详情页隐藏', |
|
|
|
// value: config.disabledDetail, |
|
|
|
// path: 'config.disabledDetail', |
|
|
|
// type: 'switch', |
|
|
|
// vIf: state.isSearch, |
|
|
|
// vHide: ['inputSlot'] |
|
|
|
// }, |
|
|
|
{ |
|
|
|
label: '设为Input输入框的前/后缀', |
|
|
|
value: type === 'inputSlot', |
|
|
|
@ -3104,9 +3106,9 @@ const disabledIstrue = (val:string) => { |
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-if="controlData.config"> |
|
|
|
<el-form-item label="联动条件" class="form_cont"> |
|
|
|
<!-- <el-form-item label="联动条件" class="form_cont"> |
|
|
|
<el-switch v-model="controlData.config.linkKey" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> --> |
|
|
|
<template v-if="controlData.config.linkKey"> |
|
|
|
<el-form-item class="form_cont"> |
|
|
|
<el-input |
|
|
|
@ -3286,8 +3288,8 @@ const disabledIstrue = (val:string) => { |
|
|
|
<el-button @click="addSelectOption">{{ controlData.type === 'cascader' ? '编辑' : '新增' }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</template> |
|
|
|
<template v-if="controlData.config.optionsType === 3"> |
|
|
|
<el-button type="primary" style="margin-bottom:10px;margin-left:11px" plain @click="optionsValue3Setting">选择系统表单字段</el-button> |
|
|
|
<template v-else-if="controlData.config.optionsType === 3"> |
|
|
|
<el-button type="primary" style="margin-bottom:10px;margin-left:80px" plain @click="optionsValue3Setting">选择系统表单字段</el-button> |
|
|
|
<!-- <el-button style="padding-top: 5px;" type="primary" link append-to-body="true" modal="true" @click="optionsValue3Setting" >选择系统表单字段</el-button> --> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
@ -3377,7 +3379,7 @@ const disabledIstrue = (val:string) => { |
|
|
|
> |
|
|
|
|
|
|
|
<!-- <div class="h3"><h3>校验设置</h3></div> --> |
|
|
|
<el-divider content-position="left">校验1设置</el-divider> |
|
|
|
<el-divider content-position="left">校验设置</el-divider> |
|
|
|
<div v-if="showHide(['input', 'password', 'component'], true)"> |
|
|
|
<el-form-item |
|
|
|
v-for="(item, index) in controlData.customRules" |
|
|
|
@ -3449,7 +3451,7 @@ const disabledIstrue = (val:string) => { |
|
|
|
</el-form-item> |
|
|
|
</template> |
|
|
|
<!-- <div class="h3"><h3>其他属性</h3></div> --> |
|
|
|
<el-divider content-position="left">其他属性</el-divider> |
|
|
|
<!-- <el-divider content-position="left">其他属性</el-divider> |
|
|
|
<div v-if="showHide(['grid', 'card', 'gridChild', 'divider', 'div'])" class="form_cont"> |
|
|
|
|
|
|
|
|
|
|
|
@ -3463,7 +3465,7 @@ const disabledIstrue = (val:string) => { |
|
|
|
</el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<el-divider content-position="left">高级属性</el-divider> |
|
|
|
|
|
|
|
<LayoutPage v-if="cssIsShouw(attrList)" v-model:styles-val="controlDataStyls" :place="controlData.type" /> |
|
|
|
@ -3539,9 +3541,9 @@ const disabledIstrue = (val:string) => { |
|
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="form_cont"> |
|
|
|
<el-form-item class="form_cont" label="数据标题"> |
|
|
|
|
|
|
|
|
|
|
|
数据标题 |
|
|
|
<el-tree-select |
|
|
|
v-model="formData.dataTitle" |
|
|
|
multiple |
|
|
|
@ -3554,7 +3556,87 @@ const disabledIstrue = (val:string) => { |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<template v-if="!state.isSearch"> |
|
|
|
|
|
|
|
<el-divider content-position="left">表单整体布局</el-divider> |
|
|
|
<el-form-item label="组件尺寸" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.size"> |
|
|
|
<el-radio-button label="large">大</el-radio-button> |
|
|
|
<el-radio-button label="default">适中</el-radio-button> |
|
|
|
<el-radio-button label="small">小</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="表单样式名称" class="form_cont"> |
|
|
|
<el-select |
|
|
|
v-model="formData.class" |
|
|
|
class="m-2" |
|
|
|
placeholder="额外添加的表单class类名" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in optionsCss" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="行内表单模式" class="form_cont"> |
|
|
|
<el-switch v-model="formData.inline" active-text="开启" inactive-text="关闭" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签宽度" class="form_cont"> |
|
|
|
<el-input v-model="formData.labelWidth" clearable placeholder="表单标签宽度"> |
|
|
|
<template #append >PX</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签后缀" class="form_cont"> |
|
|
|
<el-input v-model="formData.labelSuffix" placeholder="表单标签后缀" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="表单标签对齐方式" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.labelPosition"> |
|
|
|
<el-radio-button label="left">左</el-radio-button> |
|
|
|
<el-radio-button label="right">右</el-radio-button> |
|
|
|
<el-radio-button label="top">上</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="必填项星号位置" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.requireAsteriskPosition"> |
|
|
|
<el-radio-button label="left">左</el-radio-button> |
|
|
|
<el-radio-button label="right">右</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否隐藏星号" class="form_cont"> |
|
|
|
<el-switch v-model="formData.hideRequiredAsterisk" active-text="隐藏" inactive-text="显示" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="校验错误信息" class="form_cont"> |
|
|
|
<el-switch v-model="formData.showMessage" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="行内展示校验信息" class="form_cont"> |
|
|
|
<el-switch v-model="formData.inlineMessage" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="校验结果反馈图标" class="form_cont"> |
|
|
|
<el-switch v-model="formData.statusIcon" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-divider content-position="left">表单功能补充</el-divider> |
|
|
|
<el-form-item class="form_cont"> |
|
|
|
<el-button @click="editFormStyle(state.tooltip.css)" |
|
|
|
> |
|
|
|
编辑表单样式 |
|
|
|
<el-tooltip :content="state.tooltip.css" placement="top"> |
|
|
|
<el-icon> |
|
|
|
<QuestionFilled /> |
|
|
|
</el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</el-button> |
|
|
|
<el-button @click="editFormDict(state.tooltip.dict)" |
|
|
|
> |
|
|
|
设置数据字典 |
|
|
|
<el-tooltip :content="state.tooltip.dict" placement="top"> |
|
|
|
<el-icon> |
|
|
|
<QuestionFilled /> |
|
|
|
</el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
<template v-if="!state.isSearch"> |
|
|
|
<el-divider content-position="left">接口数据事件</el-divider> |
|
|
|
|
|
|
|
<el-form-item v-if="!state.isSearch" class="form_cont"> |
|
|
|
@ -3638,85 +3720,6 @@ const disabledIstrue = (val:string) => { |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</template> |
|
|
|
<el-divider content-position="left">表单整体布局</el-divider> |
|
|
|
<el-form-item label="组件尺寸" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.size"> |
|
|
|
<el-radio-button label="large">大</el-radio-button> |
|
|
|
<el-radio-button label="default">适中</el-radio-button> |
|
|
|
<el-radio-button label="small">小</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="表单样式名称" class="form_cont"> |
|
|
|
<el-select |
|
|
|
v-model="formData.class" |
|
|
|
class="m-2" |
|
|
|
placeholder="额外添加的表单class类名" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in optionsCss" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="行内表单模式" class="form_cont"> |
|
|
|
<el-switch v-model="formData.inline" active-text="开启" inactive-text="关闭" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签宽度" class="form_cont"> |
|
|
|
<el-input v-model="formData.labelWidth" clearable placeholder="表单标签宽度"> |
|
|
|
<template #append >PX</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签后缀" class="form_cont"> |
|
|
|
<el-input v-model="formData.labelSuffix" placeholder="表单标签后缀" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="表单标签对齐方式" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.labelPosition"> |
|
|
|
<el-radio-button label="left">左</el-radio-button> |
|
|
|
<el-radio-button label="right">右</el-radio-button> |
|
|
|
<el-radio-button label="top">上</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="必填项星号位置" class="form_cont"> |
|
|
|
<el-radio-group v-model="formData.requireAsteriskPosition"> |
|
|
|
<el-radio-button label="left">左</el-radio-button> |
|
|
|
<el-radio-button label="right">右</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否隐藏星号" class="form_cont"> |
|
|
|
<el-switch v-model="formData.hideRequiredAsterisk" active-text="隐藏" inactive-text="显示" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="校验错误信息" class="form_cont"> |
|
|
|
<el-switch v-model="formData.showMessage" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="以行内形式展示校验信息" class="form_cont"> |
|
|
|
<el-switch v-model="formData.inlineMessage" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否显示校验结果反馈图标" class="form_cont"> |
|
|
|
<el-switch v-model="formData.statusIcon" active-text="显示" inactive-text="隐藏" /> |
|
|
|
</el-form-item> |
|
|
|
<el-divider content-position="left">表单功能补充</el-divider> |
|
|
|
<el-form-item class="form_cont"> |
|
|
|
<el-button @click="editFormStyle(state.tooltip.css)" |
|
|
|
> |
|
|
|
编辑表单样式 |
|
|
|
<el-tooltip :content="state.tooltip.css" placement="top"> |
|
|
|
<el-icon> |
|
|
|
<QuestionFilled /> |
|
|
|
</el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</el-button> |
|
|
|
<el-button @click="editFormDict(state.tooltip.dict)" |
|
|
|
> |
|
|
|
设置数据字典 |
|
|
|
<el-tooltip :content="state.tooltip.dict" placement="top"> |
|
|
|
<el-icon> |
|
|
|
<QuestionFilled /> |
|
|
|
</el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
|