【店滴云】后台diy表单生成增强，满足多种输入要求
1、输入框输入，输入框类型处理
2、二级联动处理
3、编辑器初始化
4、数据联动显示处理
export const form = {
'blocs': {
'type': 'cascader-store',
'label': '选择公司'
},
'ishot': {
'type': 'radio',
'label': '是否热门',
isOptions: true,
options: [{
text: '是',
value: 1
},
{
text: '否',
value: 2
}
]
},
pcate: {
label: '一级分类',
// 只需要在这里指定为 tree-select 即可
type: 'tree-select',
// 属性参考: https://vue-treeselect.js.org/
attrs: {
multiple: false,
clearable: true
},
options: async data => {
console.log('编 号', data.name)
const res = await initCate(0)
console.log('编 号', res.data)
const arr = [{
id: 0,
label: '一级分类'
}]
console.log('父级菜单', res.data)
return arr.concat(res.data)
}
},
ccate: {
label: '二级分类',
// 只需要在这里指定为 tree-select 即可
type: 'tree-select',
// 属性参考: https://vue-treeselect.js.org/
attrs: {
multiple: false,
clearable: true
},
vif: data => data.pcate,
// 这里必须制定 optionsLinkageFields 做为关联字段，当次字段值发生变化时，会重新出发请求
optionsLinkageFields: ['pcate'],
options: async data => {
console.log('编 号', data.name)
if (data.pcate) {
const res = await initCate(data.pcate)
console.log('编 号', res.data)
const arr = [{
id: 0,
label: '二级分类'
}]
console.log('父级菜单', res.data)
return arr.concat(res.data)
}
}
},
'page': {
'type': 'select',
'label': '页面标识',
'isOptions': true,
'options': [{
text: '手机端-首页',
value: 'mobileHome'
},
{
text: '手机端-会展服务',
value: 'mobileService'
},
{
text: '电脑端-首页',
value: 'pc-index'
},
{
text: '电脑端-行业资讯',
value: 'pc-Industry'
}
]
},
'page1': {
'type': 'select',
'label': '页面标识',
'isOptions': true,
'options': async data => {
console.log('编 号', data.name)
if (data.pcate) {
const res = await initCate(data.pcate)
console.log('编 号', res.data)
const arr = [{
id: 0,
label: '二级分类'
}]
console.log('父级菜单', res.data)
return arr.concat(res.data)
}
}
},
'title': {
'type': 'input',
'label': '标题'
},
'description': {
'type': 'textarea',
'label': '简介'
},
'content': {
'type': 'fire-editor',
'label': '详情'
},
'thumb': {
'type': 'image-uploader',
'label': '图片'
},
'source': {
'type': 'input',
'label': '来源'
},
'author': {
'type': 'input',
'label': '作者'
},
'displayorder': {
'type': 'input',
'label': '排序'
},
'linkurl': {
'type': 'input',
'label': '链接地址'
},
'is_top': {
'type': 'radio',
'label': '是否置顶',
'isOptions': true,
'options': [{
'text': '是',
'value': 1
},
{
'text': '否',
'value': 2
}
]
},
'name': {
'type': 'input',
'label': '卡券名'
},
num_sort: {
type: 'input',
label: '排序',
attrs: {
type: 'number'
}
},
meal_type: {
type: 'radio',
label: '默认套餐类型',
isOptions: true,
options: [
{
text: '1小时',
value: 1
},
{
text: '2小时',
value: 2
},
{
text: '4小时',
value: 4
}
]
},
type: {
type: 'radio',
label: '卡券类型',
isOptions: true,
options: [
{
text: '代金券',
value: 1
},
{
text: '时长卡',
value: 2
},
{
text: '次卡',
value: 3
},
{
text: '折扣券',
value: 4
},
{
text: '体验券',
value: 5
}
],
on: {
input: (data) => {
console.log(data)
this.showNum = data
}
}
},
explain: {
type: 'input',
label: '卡券说明'
},
price: {
type: 'input',
label: '卡券金额(元)',
attrs: {
type: 'number'
}
},
use_start: {
type: 'time',
label: '时间限制-开始时间',
attrs: {
pickerOptions: {
start: '00:30',
step: '00:30',
end: '24:00'
}
}
},
use_end: {
type: 'time',
label: '时间限制-结束时间',
attrs: {
pickerOptions: {
start: '00:30',
step: '00:30',
end: '24:00'
}
}
},
enable_start: {
type: 'datetime',
label: '有效期开始时间',
attrs: {
valueFormat: 'yyyy-MM-dd HH🇲🇲ss'
}
},
coupon_img: {
label: '卡券主图',
type: 'image-uploader' // 只需要在这里指定为 image-uploader 即可
// attrs: {
// multiple: true,
// limit: 10
// }
},
background: {
label: '卡券背景',
type: 'image-uploader' // 只需要在这里指定为 image-uploader 即可
},
parent: {
label: "父级菜单",
// 只需要在这里指定为 tree-select 即可
type: "tree-select",
// 属性参考: https://vue-treeselect.js.org/
attrs: {
multiple: false,
clearable: true,
},
vif: (data) => data.module_name,
// 这里必须制定 optionsLinkageFields 做为关联字段，当次字段值发生变化时，会重新出发请求
optionsLinkageFields: ["module_name"],
options: async (data) => {
if (data.name || data.module_name) {
const obj = {};
this.$set(obj, "Menu[module_name]", data.module_name);
const res = await fetchList(obj);
const arr = [
{
id: 0,
label: "一级菜单",
},
];
return arr.concat(res.data.list);
}
},
},
}