245 lines
10 KiB
TypeScript
245 lines
10 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.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.rangeSeparator', label: '分隔符', type: 'input'},
|
|
{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: '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'},
|
|
]
|
|
}
|
|
// '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
|
|
}
|