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

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

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

<BasicTable :searchInfo="search"></BasicTable>

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

  });

10.设置表单动态label内容

使用updateSchema设置

const [registerForm, { setProps, updateSchema, resetFields, setFieldsValue}] = useForm({
        labelWidth: 100,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { span: 24 },
    });

updateSchema({
     field: 'doctorName',//表单字段
     label: '',// 根据状态设置动态label
});