1.点击表单也按钮，弹出自定义页面

需求

1.数据字典列表，点击新建列表（SQL）字典和点击树形（SQL）字典，进入表单之后。
2.点击字段配置，弹出自定义页面。

操作步骤

解决方案

在对应功能的按钮配置中，给字段配置按钮写点击事件。代码如下：

• 示例：

    const {Modal,Form,Input} = JE.useUi(); 
    const {h,createVNode,ref}= JE.useVue();
    const { encode, decode} = JE.useUtils();
    const {$func} = EventOptions;
    // 判断类型SQL_TREE 树形sql, SQL列表sql
    const type = $func.getFuncForm().getModel().DICTIONARY_DDTYPE;
    const key = type == 'SQL' ? 'DICTIONARY_SQLPZXXLB' : 'DICTIONARY_SQLCONFIG';
    //获取字段数据
    const value = $func.getFuncForm().getModel()[key];
    const formRef = ref('');
    let sqlVnodeArr = [];
    let formState = {};
    if(type == 'SQL'){
        formState = {
            "separator": ",",
            "idField": "",
            "codeField": "",
            "nameField": "",
            "iconClsField": "",
            "fontClsField": "",
            "fontBackgroundClsField": ""
        }
        //回显数据到弹出页面
        Object.assign(formState, decode(value));
        sqlVnodeArr = [{
            id: 'idField',
            text: '主键',
            placeholder: '填写SQL中对照（id）的字段',
            required: false,
            requiredText: '该输入项为必填项！',
        },{
            id: 'codeField',
            text: '编码',
            placeholder: '填写SQL中对照（code）的字段',
            // required: true,
            requiredText: '该输入项为必填项！',
        },{
            id: 'nameField',
            text: '名称',
            placeholder: '填写SQL中对照（text）的字段',
            required: true,
            requiredText: '该输入项为必填项！',
        },{
            id: 'iconClsField',
            text: '图标样式',
            placeholder: '填写SQL中对照（iconCls）的字段',
        },{
            id: 'fontClsField',
            text: '字体样式',
            placeholder: '填写SQL中对照（textColor）的字段',
        },
        {
            id: 'fontBackgroundClsField',
            text: '字体背景样式',
            placeholder: '填写SQL中对照（backgroundColor）的字段',
        }]
    } else if(type == 'SQL_TREE') {
        formState = {
            "idField": "",
            "codeField": "",
            "nameField": "",
            "pathField":"",
            "nodeTypeField":"",
            "treeOrderIndexField":"",
            "parentField":"",
            "parentPathField":"",
            "disabledField":"",
            "iconClsField": "",
            "fontClsField": "",
            "fontBackgroundClsField": ""
        }
        //回显数据到弹出页面
        Object.assign(formState, decode(value));
        sqlVnodeArr = [{
            id: 'idField',
            text: '主键',
            placeholder: '填写SQL中对照（id）的字段',
            // required: true,
            requiredText: '该输入项为必填项！',
        },{
            id: 'codeField',
            text: '编码',
            placeholder: '填写SQL中对照（id）的字段',
            requiredText: '该输入项为必填项！',
        },{
            id: 'nameField',
            text: '名称',
            placeholder: '填写SQL中对照（text）的字段',
            requiredText: '该输入项为必填项！',
        },
        {
            id: 'pathField',
            text: '树形路径',
            placeholder: '填写SQL中对照（path）的字段。例如：PID/PID/ID',
            // required: true,
            requiredText: '该输入项为必填项！',
        },
        {
            id: 'nodeTypeField',
            text: '节点类型',
            placeholder: '填写SQL中对照（nodeType）的字段',
            requiredText: '该输入项为必填项！',
        },
        {
            id: 'treeOrderIndexField',
            text: '树形排序字段',
            placeholder: '填写SQL中对照（treeOrderIndex）的字段',
            requiredText: '该输入项为必填项！',
        },
        {
            id: 'parentField',
            text: '父节点',
            placeholder: '填写SQL中对照（paren）的字段',
            requiredText: '该输入项为必填项！',
        },
        {
            id: 'parentPathField',
            text: '父节点路径',
            placeholder: '写SQL中对照（parenPath）的字段。例如：PID/PID',
        },
        {
            id: 'disabledField',
            text: '是否启用',
            placeholder: '填写SQL中对照（disabled）的字段',
        },
        {
            id: 'iconClsField',
            text: '图标样式',
            placeholder: '填写SQL中对照（iconCls）的字段',
        },{
            id: 'fontClsField',
            text: '字体样式',
            placeholder: '填写SQL中对照（textColor）的字段',
        },
        {
            id: 'fontBackgroundClsField',
            text: '字体背景样式',
            placeholder: '填写SQL中对照（backgroundColor）的字段',
        }]
    } else {
        return false;
    }

    const labelCol1 = { style: 'width:100px;' };
    const Vnode = sqlVnodeArr.map((item)=>{
        return  h(Form.Item, {label: item.text,name: item.id,rules:[{ required: item.required, message: item.requiredText }]}, createVNode(Input,{placeholder:item.placeholder, value: formState[item.id],
          'onUpdate:value': function (val) {
              formState[item.id] = val;
          }}))
    })
    //表单弹出
    const renderContent = ()=> {return h(Form,{ref:formRef, size: 'small',autocomplete:"off",model: formState,labelCol: labelCol1,
    },Vnode)};
    Modal.alert({
        title: '字段配置',
        width: '800px',
        height: 'auto',
        content:renderContent,
        cancelButton: true,
        okButton: {
          closable: false,
          handler: ({$modal})=>{
                formRef.value.validate().then(()=>{
                    $func.getFuncForm().getModel()[key] = encode(formState);
                    $modal.close() 
                }).catch((error) => {
                    console.error(error);
                });
          },
        }
    });

效果展示