目录
7.使用RangePicker时间空间,在初始化表格中的属性fieldMapToTime可设置,开始时间和结束时间字段以及格式
最近使用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
});
11.表单回显处理,无边框样式
{
label: '答题时长',
field: 'answerTime',
component: 'Input',
componentProps: () => ({
style: {
width: '100%',
border: 'none',
outline: 'none',
},
placeholder: '',
readonly: true,
}),
},