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