439 lines
13 KiB
TypeScript
439 lines
13 KiB
TypeScript
/**
|
|
* 根据 fForm.name 决定要显示哪些设置项
|
|
*/
|
|
export const fieldEditors = {
|
|
text: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.prefixIcon', label: '前图标', type: 'icon'},
|
|
{key: 'props.suffixIcon', label: '后图标', type: 'icon'},
|
|
{key: 'props.minlength', label: '最少输入', type: 'number'},
|
|
{key: 'props.maxlength', label: '最多输入', type: 'number'},
|
|
{key: 'props.showWordLimit', label: '显示字数', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
textarea: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.rows', label: '默认行数', type: 'number'},
|
|
{key: 'props.minlength', label: '最少输入', type: 'number'},
|
|
{key: 'props.maxlength', label: '最多输入', type: 'number'},
|
|
{key: 'props.showWordLimit', label: '显示字数', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
password: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.prefixIcon', label: '前图标', type: 'icon'},
|
|
{key: 'props.suffixIcon', label: '后图标', type: 'icon'},
|
|
{key: 'props.minlength', label: '最少输入', type: 'number'},
|
|
{key: 'props.maxlength', label: '最多输入', type: 'number'},
|
|
{key: 'props.showWordLimit', label: '显示字数', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
number: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.precision', label: '精度', type: 'number'},
|
|
{key: 'props.step', label: '步长', type: 'number'},
|
|
{key: 'props.stepStrictly', label: '严格步数', type: 'switch'},
|
|
{
|
|
key: 'props.controlsPosition', label: '按钮位置', type: 'radio', options: [
|
|
{label: '默认', value: ''},
|
|
{label: '右侧', value: 'right'},
|
|
]
|
|
},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
select: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.multiple', label: '是否多选', type: 'switch'},
|
|
{key: 'props.filterable', label: '能否筛选', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
cascader: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.placeholder', label: '占位提示', type: 'input'},
|
|
{key: 'props.separator', label: '分隔符', type: 'input'},
|
|
{key: 'props.showAllLevels', label: '展示全路径', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.props.multiple', label: '是否多选', type: 'switch'},
|
|
{key: 'props.filterable', label: '能否筛选', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
radio: [
|
|
{
|
|
key: 'style', label: '选项样式', type: 'radio', options: [
|
|
{label: '默认', value: ''},
|
|
{label: '按钮', value: 'button'},
|
|
]
|
|
},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
checkbox: [
|
|
{key: 'props.min', label: '最少应选', type: 'number'},
|
|
{key: 'props.max', label: '最多可选', type: 'number'},
|
|
{
|
|
key: 'style', label: '选项样式', type: 'radio', options: [
|
|
{label: '默认', value: ''},
|
|
{label: '按钮', value: 'button'},
|
|
]
|
|
},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
switch: [
|
|
{key: 'props.activeText', label: '打开提示', type: 'input'},
|
|
{key: 'props.inactiveText', label: '关闭提示', type: 'input'},
|
|
{key: 'props.activeValue', label: '打开值', type: 'input'},
|
|
{key: 'props.inactiveValue', label: '关闭值', type: 'input'},
|
|
{key: 'props.activeActionIcon', label: '打开图标', type: 'icon'},
|
|
{key: 'props.inactiveActionIcon', label: '关闭图标', type: 'icon'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
slider: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{key: 'props.min', label: '最大值', type: 'number'},
|
|
{key: 'props.max', label: '最小值', type: 'number'},
|
|
{key: 'props.step', label: '步长', type: 'number'},
|
|
{key: 'props.showStops', label: '显示间隔点', type: 'switch'},
|
|
{key: 'props.range', label: '范围选择', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
rate: [
|
|
{key: 'props.max', label: '最大值', type: 'number'},
|
|
{key: 'props.allowHalf', label: '是否半选', type: 'switch'},
|
|
{key: 'props.showScore', label: '显示分数', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
color: [
|
|
{
|
|
key: 'props.colorFormat', label: '颜色格式', type: 'select', options: [
|
|
{label: 'hsl', value: 'hsl'},
|
|
{label: 'hsv', value: 'hsv'},
|
|
{label: 'hex(when show-alpha is false)', value: 'hex'},
|
|
{label: 'rgb(when show-alpha is true)', value: 'rgb'},
|
|
]
|
|
},
|
|
{key: 'props.showAlpha', label: '透明度', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
upload: [
|
|
{key: 'props.name', label: '文件字段名', type: 'input'},
|
|
{key: 'btnText', label: '按钮文字', type: 'input'},
|
|
{key: 'props.accept', label: '文件类型', type: 'input'},
|
|
{
|
|
key: 'props.listType', label: '列表类型', type: 'radio', options: [
|
|
{label: 'text', value: 'text'},
|
|
{label: 'picture', value: 'picture'},
|
|
{label: 'picture-card', value: 'picture-card'}
|
|
]
|
|
},
|
|
{key: 'tip', label: '提示信息', type: 'input'},
|
|
{key: 'props.multiple', label: '是否多选', type: 'switch'},
|
|
{key: 'props.autoUpload', label: '自动上传', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
date: [
|
|
{key: 'width', label: '组件宽度', type: 'input'},
|
|
{
|
|
key: 'props.type', label: '时间类型', type: 'select', options: [
|
|
{label: '日', value: 'date'},
|
|
{label: '周', value: 'week'},
|
|
{label: '月', value: 'month'},
|
|
{label: '年', value: 'year'},
|
|
{label: '日期时间', value: 'datetime'},
|
|
]
|
|
},
|
|
{key: 'props.format', label: '显示格式', type: 'input'},
|
|
{key: 'props.valueFormat', label: '日期格式', type: 'input'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
daterange: [
|
|
{
|
|
key: 'props.type', label: '时间类型', type: 'select', options: [
|
|
{label: '日期范围', value: 'daterange'},
|
|
{label: '月范围', value: 'monthrange'},
|
|
{label: '日期时间范围', value: 'datetimerange'},
|
|
]
|
|
},
|
|
{key: 'props.rangeSeparator', label: '分隔符', type: 'input'},
|
|
{key: 'props.format', label: '显示格式', type: 'input'},
|
|
{key: 'props.valueFormat', label: '日期格式', type: 'input'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
time: [
|
|
{key: 'props.editable', label: '可输入', type: 'switch'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
timerange: [
|
|
{key: 'props.editable', label: '可输入', type: 'switch'},
|
|
{key: 'props.rangeSeparator', label: '分隔符', type: 'input'},
|
|
{key: 'props.clearable', label: '能否清空', type: 'switch'},
|
|
{key: 'props.readonly', label: '是否只读', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
button: [
|
|
{key: 'labelWidth', label: '标签宽度', type: 'number'},
|
|
{key: 'btnText', label: '按钮文字', type: 'input'},
|
|
{
|
|
key: 'props.type', label: '按钮类型', type: 'select', options: [
|
|
{label: 'primary', value: 'primary'},
|
|
{label: 'success', value: 'success'},
|
|
{label: 'warning', value: 'warning'},
|
|
{label: 'danger', value: 'danger'},
|
|
{label: 'info', value: 'info'},
|
|
{label: 'default', value: ''},
|
|
]
|
|
},
|
|
{key: 'props.icon', label: '图标', type: 'icon'},
|
|
{key: 'props.plain', label: '朴素按钮', type: 'switch'},
|
|
{key: 'props.text', label: '文字按钮', type: 'switch'},
|
|
{key: 'props.round', label: '圆角按钮', type: 'switch'},
|
|
{key: 'props.circle', label: '圆形按钮', type: 'switch'},
|
|
{key: 'props.disabled', label: '是否禁用', type: 'switch'},
|
|
],
|
|
layout: [
|
|
{key: 'props.gutter', label: '分栏间隔', type: 'number'},
|
|
]
|
|
}
|
|
// 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'
|
|
export const getComponent = (type) => {
|
|
const map = {
|
|
text: 'el-input',
|
|
textarea: 'el-input',
|
|
password: 'el-input',
|
|
number: 'el-input-number',
|
|
select: 'el-select',
|
|
cascader: 'el-cascader',
|
|
radio: 'el-radio-group',
|
|
checkbox: 'el-checkbox-group',
|
|
switch: 'el-switch',
|
|
slider: 'el-slider',
|
|
rate: 'el-rate',
|
|
color: 'el-color-picker',
|
|
upload: 'el-upload',
|
|
date: 'el-date-picker',
|
|
daterange: 'el-date-picker',
|
|
time: 'el-time-picker',
|
|
timerange: 'el-time-picker',
|
|
button: 'el-button'
|
|
}
|
|
return map[type] || 'div'
|
|
}
|
|
|
|
export function getByPath(obj, path) {
|
|
return path.split('.').reduce((o, k) => o?.[k], obj)
|
|
}
|
|
|
|
export function setByPath(obj, path, value) {
|
|
const keys = path.split('.')
|
|
let o = obj
|
|
keys.slice(0, -1).forEach(k => o = o[k])
|
|
o[keys[keys.length - 1]] = value
|
|
}
|
|
|
|
export const inputComps = [{
|
|
title: "单行文本",
|
|
icon: "pi-icon-line-input",
|
|
name: "text",
|
|
props: {
|
|
type: 'text'
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false
|
|
}, {
|
|
title: "多行文本",
|
|
icon: "pi-icon-multi-input",
|
|
name: "textarea",
|
|
props: {
|
|
type: 'textarea'
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false
|
|
}, {
|
|
title: "密码",
|
|
icon: "pi-icon-lock",
|
|
name: "password",
|
|
props: {
|
|
type: 'password',
|
|
showPassword: true
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false
|
|
}, {
|
|
title: "计数器",
|
|
icon: "pi-icon-number-input",
|
|
name: "number",
|
|
props: {
|
|
controlsPosition: ''
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
value: 1
|
|
}]
|
|
export const choiceComps = [{
|
|
title: "下拉组件",
|
|
icon: "pi-icon-select",
|
|
name: "select",
|
|
props: {},
|
|
rules: [],
|
|
options: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "级联组件",
|
|
icon: "pi-icon-cascader",
|
|
name: "cascader",
|
|
props: {
|
|
props: {
|
|
label: 'label',
|
|
value: 'value',
|
|
multiple: false,
|
|
},
|
|
options: [{label: '一号楼', value: 'r1', children: [{label: '二单元', value: 'c2'}]}]
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "单选组件",
|
|
icon: "pi-icon-radio",
|
|
name: "radio",
|
|
props: {},
|
|
rules: [],
|
|
options: [],
|
|
width: "100%",
|
|
style: '',
|
|
required: false,
|
|
}, {
|
|
title: "多选组件",
|
|
icon: "pi-icon-checkbox",
|
|
name: "checkbox",
|
|
props: {},
|
|
rules: [],
|
|
options: [],
|
|
style: '',
|
|
required: false,
|
|
}, {
|
|
title: "开关",
|
|
icon: "pi-icon-switch",
|
|
name: "switch",
|
|
props: {},
|
|
rules: [],
|
|
required: false,
|
|
}, {
|
|
title: "滑块",
|
|
icon: "pi-icon-slider",
|
|
name: "slider",
|
|
props: {},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "时间选择",
|
|
icon: "pi-icon-time-picker",
|
|
name: "time",
|
|
props: {
|
|
format: 'HH:mm:ss',
|
|
valueFormat: 'HH:mm:ss'
|
|
},
|
|
rules: []
|
|
}, {
|
|
title: "时间范围",
|
|
icon: "pi-icon-time-range",
|
|
name: "timerange",
|
|
props: {
|
|
isRange: true,
|
|
format: 'HH:mm:ss',
|
|
valueFormat: 'HH:mm:ss'
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "日期选择",
|
|
icon: "pi-icon-date-picker",
|
|
name: "date",
|
|
props: {
|
|
type: "date",
|
|
format: 'YYYY-MM-DD',
|
|
valueFormat: 'YYYY-MM-DD'
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "日期范围",
|
|
icon: "pi-icon-date-range",
|
|
name: "daterange",
|
|
props: {
|
|
type: "daterange",
|
|
format: 'YYYY-MM-DD',
|
|
valueFormat: 'YYYY-MM-DD'
|
|
},
|
|
rules: [],
|
|
width: "100%",
|
|
required: false,
|
|
}, {
|
|
title: "评分",
|
|
icon: "pi-icon-rate",
|
|
name: "rate",
|
|
props: {},
|
|
rules: [],
|
|
required: false,
|
|
}, {
|
|
title: "颜色选择",
|
|
icon: "pi-icon-color-picker",
|
|
name: "color",
|
|
props: {},
|
|
rules: [],
|
|
required: false,
|
|
}, {
|
|
title: "上传",
|
|
icon: "pi-icon-upload-file",
|
|
name: "upload",
|
|
props: {
|
|
listType: 'text',
|
|
name: 'file'
|
|
},
|
|
rules: [],
|
|
required: false,
|
|
btnText: "点击上传"
|
|
}]
|
|
export const layoutComps = [{
|
|
title: "行容器",
|
|
icon: "pi-icon-row-layout",
|
|
name: "layout",
|
|
props: {
|
|
gutter: 15
|
|
},
|
|
children: []
|
|
}, {
|
|
title: "按钮",
|
|
icon: "pi-icon-button",
|
|
name: "button",
|
|
props: {
|
|
type: 'primary'
|
|
},
|
|
btnText: "按钮文字"
|
|
}];
|