网站式登录页面模板下载广州引流推广公司
最近使用jeecgboot些项目，总结使用过程中的问题。
form表单
1.下拉框 — 使用字典方式
{label: '工单状态',field: 'orderStatus',component: 'JDictSelectTag',componentProps: {dictCode: 'emergency_order_status',},
}2.下拉框—使用接口获取数据方式
配置项
{ label: '工单状态',field: 'orderStatus',component: 'Input',componentProps: {api: employeeUnit,fieldNames: {label: 'departName',value: 'orgCode',},},
}Api
export const employeeUnit = (params) => {return defHttp.get({ url: Api.employeeUnit, params });
};3.表单发送之前对数据操作
表格查询发送之前的方法searchInfo和beforeFetch都可以添加参数
const { tableContext } = useListPage({tableProps: {api: queryTenantPackUserList,immediate: false,columns: tenantPackUserColumns,searchInfo:{}, // 额外的请求参数canResize: false,useSearchForm: false,beforeFetch: (params) => {//可以在请求之前默认添加参数params.tenantId = tenantPackData.tenantId;return params;},actionColumn: {width: 120,fixed: 'right',},},
});4.表单数据联动方式
1. componentProps 传入回调函数配置，通过表单的事件来控制数据联动
2.formModel 表单数据
例 选择二级部门后再选择三级部门
{label: '二级部门',field: 'deptId',component: 'ApiSelect',componentProps: ({ formModel }) => {return {api: getSecondaryDepartmentList,resultField: 'list',labelField: 'departName',valueField: 'id',immediate: false,onChange: (val, option) => {if (val) {option.thirdDepart = '';if (formModel.hasOwnProperty('thirdDepartId')) {formModel.thirdDepartId = '';}}},onDeselect: () => {formModel.deptId = '';if (formModel.hasOwnProperty('thirdDepartId')) {formModel.thirdDepartId = '';}},};},
},
{label: '三级部门',field: 'thirdDepartId',component: 'ApiSelect',componentProps: ({ formModel }) => {return {api: getThirdDepartmentList,resultField: 'list',labelField: 'departName',params: {secondDepartId: formModel.deptId,},valueField: 'id',immediate: false,onFocus: () => {if (!formModel.deptId) {return createMessage.warn('请先选择二级部门！');}};},
},5.获取表格查询条件参数,在你需要的方法中就可以拿到数据
const [registerTable, { getForm, reload }, { rowSelection, selectedRowKeys }] = tableContext;function getTableForm(){console.log(getForm().getFieldsValue())
}
6.弹窗下拉框和时间空间，加上下面这句就可以超出弹窗了
getPopupContainer: () => document.body,
{label: '允许预约日期',field: 'orderDate',component: 'RangePicker',componentProps: () => {return {valueType: 'Date',getPopupContainer: () => document.body,valueFormat: 'YYYY-MM-DD',};},rules: [{ required: true }],},7.使用RangePicker时间空间，在初始化表格中的属性fieldMapToTime可设置，开始时间和结束时间字段以及格式
字段配置
{label: '日期',field: 'medicalDate',component: 'RangePicker',componentProps: () => {return {valueType: 'Date',getPopupContainer: () => document.body,};},rules: [{ required: true }],},页面设置开始时间和结束时间字段
const { tableContext } = useListPage({tableProps: {title: '',columns,canResize: false,formConfig: {schemas: searchFormSchema,autoSubmitOnEnter: true,showAdvancedButton: false,fieldMapToNumber: [],fieldMapToTime: [['medicalDate', ['medicalDateStart', 'medicalDateEnd'], 'YYYY-MM-DD']],},actionColumn: {width: 160,fixed: 'right',},},});8.设置表格查询样式
formConfig: { baseColProps: {xs: 24,sm: 8,md: 6,lg: 8,xl: 6,xxl: 10,},
}