JPopup弹窗选择组件 ✔

组件参数

参数	类型	必填	说明
placeholder	string		placeholder
code	string	是	online报表编码
sorter	String	否	默认排序列，使用方法：列名=desc|asc。例：age=asc
width	number	否	宽度
multi	Boolean	否	是否支持多选，默认值false
param	object	否	动态参数对象，在online报表参数里手动新增记录，然后就可以在自己页面里传递同名参数，作为数据查询条件，如果是字符串类型需要设置成双引号内套单引号的格式 如{name:"'admin'"}
spliter	string	否	分隔符，默认,，只对数据库不是,分割的值有用，最终数据库保存还是,
groupId	string	否	分组id
setFieldValue	function	否	设置表单value值的方法，表单模式下使用
formElRef	object	否	表单组件实例,v-model模式下使用
fieldConfig	array	否	popup回调参数值配置，具体见下
showAdvancedButton	Boolean	否	popup是否显示展开和关闭，默认true展开()

fieldConfig配置：

参数	类型	说明
source	string	pop弹窗列表中的取值参数
target	string	返回给表单中的目标参数，多个逗号分隔

效果展示

使用示例

<template>
    <BasicForm :labelWidth="200" :schemas="schemas" :actionColOptions="{ span: 24 }" @submit="handleSubmit" />
</template>
<script lang="ts">
    import { defineComponent } from 'vue';
    import { BasicForm, FormSchema,JPopup, FormActionType} from '/@/components/Form'
    import { useMessage } from '/@/hooks/web/useMessage';

    const schemas: FormSchema[] = [
        {
            field: 'pop',
            component: 'JPopup',
            label: 'JPopup示例',
            helpMessage: ['component模式'],
            colProps: {
                span: 8,
            },
            componentProps: ({ formActionType }) => {
                let { setFieldsValue } = formActionType
                return {
                    setFieldsValue,
                    placeholder: '请选择',
                    code: 'report_user',
                    fieldConfig: [{ source: 'username', target: 'pop' }, { source: 'realname', target: 'popback' }],
                    multi: true,
                }
            },
        },
        {
            field: 'pop',
            component: 'Input',
            label: 'popup回调值',
            colProps: {
                span: 8,
            },
        },
        {
            field: 'popback',
            component: 'Input',
            label: 'popback回调值',
            colProps: {
                span: 8,
            },
        }]

    export default defineComponent({
        components: { BasicForm,JPopup },
        setup() {
            const { createMessage } = useMessage();
            return {
                schemas,
                handleSubmit: (values: any) => {
                createMessage.success('click search,values:' + JSON.stringify(values));
                }
           };
        }
    });
</script>