【店滴云】后台 diy 表单生成增强，满足多种输入要求

【店滴云】后台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); } }, }, }