Recently, I am using vben admin to develop a back-end management system. The back-end framework of vben admin is very encapsulated and has very fine granularity. If you understand the components or API usage, it will be developed very quickly. If you don't understand it, it will be very painful. There are currently very few blogs about vben admin development issues, so some problems are difficult to find. I have gone through such a process, so I summarized the problems encountered during development, hoping to save students who can use it from taking some detours.
1. What should I do if the data structure returned by the interface request does not match the current table component?
First of all, the first problem I encountered was that the backend returned the data, but the data structure and data name were not what I wanted, because the table component was encapsulated and the field names were also predetermined, so What should I do if the data structure and data name returned by the backend are different?
Look at the code first
// 获取页面的列表数据
// getRuleList();
const [registerTable, {
getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
api: getRuleList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showResetButton: false,
showSubmitButton: false,
},
beforeFetch: (params) => {
params.ruleId = query.ruleId;
return params;
},
afterFetch: (data) => {
console.log('-------------------请求之后的参数处理---------');
// 获取接口的原始数据
getRawData();
return data;
},
useSearchForm: true,
bordered: true,
showIndexColumn: false,
});
For the getRuleList interface, the data structure I hope to return is like this:
{
code:2000
message:null,
data:{
list: [....],
last: 161,
count: 1610,
pageNo: 1,
pageSize: 10,
}
}
But now the data structure returned by the backend is like this:
{
resultCode:2000
resultMessage:null,
resultData:{
records: [....],
pageCount: 161,
totalCount: 1610,
pageNum: 1,
pageSize: 10,
}
}
At this time, you need to do a layer of conversion after the interface request data comes back;
code show as below:
//获取客户资料列表
export const getRuleList = (params: any) => {
return new Promise((resolve, reject) => {
defHttp
.post<any>(
{
url: Api.GetRuleList,
params,
}
)
.then((res) => {
console.log('-----------列表返回的数据------------');
console.log(res);
resolve({
code:res.resultCode,
message:res.message,
data:{
list: res.resultData.records,
last: res.resultData.pageCount,
count: res.resultData.totalCount,
pageNo: res.resultData.pageNum,
pageSize: res.resultData.pageSize,
}
});
});
});
};
After a layer of transformation, the current data structure meets this requirement;
This problem is solved and the form data is rendered.
But new data has arrived. If the page has a search form, how can the data in the form be displayed in reverse?
2. On a page with forms and tables, how can the form data be displayed in reverse?
This problem needs to be completed in two steps. The first step is to get the form data; the second step is to assign the value to the form;
I encountered this problem because the table data can be displayed in reverse, but the form data cannot be obtained.
// 获取页面的列表数据
// getRuleList();
const [registerTable, {
getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
api: getRuleList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showResetButton: false,
showSubmitButton: false,
},
// 请求数据接口之前的处理函数
beforeFetch: (params) => {
params.ruleId = query.ruleId;
return params;
},
// 请求接口数据之后的处理函数
afterFetch: (data) => {
console.log('-------------------请求之后的参数处理---------');
// 获取接口的原始数据并给表单赋值，使表单反显
getRawData();
return data;
},
useSearchForm: true,
bordered: true,
showIndexColumn: false,
});
1. Solve the first step problem: get the form data
When the print request comes back in the afterFetch processing function, the data is printed, but it cannot be printed. At this time, we don’t know what the data is, but judging from the page data rendered later, the data should be res.data.list, list It does not contain form data, only table data. So how do I get the original request data?
vben admin provides a method getRawDataSource in useTable (please see how it is introduced in the code) to get the original data of the interface. At this time, you can get the form data.
// 获取接口的原始数据
// getRawData();
// 获取接口的完整数据
function getRawData() {
console.log('请在控制台查看！');
console.log(getRawDataSource());
// 获取到请求回来的原始数据，然后对原始数据赋值
let getFormData = getRawDataSource();
// 第一步 拿到表单数据
fromData.name = getFormData.data.name;
fromData.departmentName = getFormData.data.departmentName;
fromData.field = getFormData.data.field;
fromData.scenarioName = getFormData.data.scenarioName;
fromData.applicableUserName = getFormData.data.applicableUserName;
console.log('---------------form表单-----------------');
console.log(fromData);
// 第二步 对表单数据进行赋值
let form = getForm();
console.log('---------------获取到的form表单数据-----------------');
console.log(form);
getForm().setFieldsValue({
datalistName: fromData.departmentName,
department: fromData.departmentName,
field: fromData.field,
UsageScenario: fromData.scenarioName,
applicableUser: fromData.applicableUserName,
});
}
2. Solve the problem in the second step: assign the obtained data to the form
The getForm method is provided in useTable. The getForm method contains various methods for processing the form. The method for assigning values to the form is setFieldsValue, which is the method for setting the form data. (The code for the first step above also includes the code for the second step)
// 第二步 对表单数据进行赋值
let form = getForm();
console.log('---------------获取到的form表单数据-----------------');
console.log(form);
getForm().setFieldsValue({
datalistName: fromData.departmentName,
department: fromData.departmentName,
field: fromData.field,
UsageScenario: fromData.scenarioName,
applicableUser: fromData.applicableUserName,
});
The problems in the first and second steps have been solved. We still have one step to complete, which is when to call getRawData to obtain data and assign values.
At this time we will use afterFetch and call getRawData in afterFetch, which completely solves my problem.
Okay, that’s it. A new summary will be issued in the future. I hope it can help everyone.