**JPopup 弹窗选择组件** [TOC] ## 组件参数 | 参数 | 类型 | 必填 |说明| |--------------|---------|----|---------| --- | | 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回调参数值配置，具体见下| fieldConfig配置： | 参数 | 类型 | 说明 |--------------|---------|---------| | source |string | pop弹窗列表中的取值参数 | | target |string | 返回给表单中的目标参数，多个逗号分隔 | ## 效果展示  ## 使用示例 ```vue <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>