jeecgboot使用的问题记录

最近使用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 });
};

 radios使用字典配置方式

{field: 'sex',component: 'JDictSelectTag',label: '性别',componentProps: {dictCode: 'sex2',type: 'radio',},
},

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.表单数据联动方式

{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,},             
}

9.表格表单自定义重置按钮操作

const search = ref(''); 
const { tableContext } = useListPage({tableProps:{formConfig:{resetFunc:()=>{//重置按钮，需要保存二级部门Idlet timer = setTimeout(async () => {clearTimeout(timer);let obj = {secondDepartId: '',};return await getForm().setFieldsValue(obj);});search.value['secondDepartId'] = '';}}}});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！