-
按照功能划分
1、新增、编辑 (可以对数据进行进行操控)
2、查看和列表页(对数据进行展示) -
按照数据展示划分
1、新增、编辑、查看 共享一个页面
如果这3个页面的“数据项”不一致,那么可以要求后端这3个页面的“字段名”保持一致。
{
let params = {
...this.params, // ...3个点的作用--去掉数组、对象外套,一般用于数组、对象的合并
start_time: this.params.create_time[0] ? this.params.create_time[0] + ' 00:00:00' : '',
end_time: this.params.create_time[1] ? this.params.create_time[1] + ' 23:59:59' : ''
};
}
如果后端返回的“字段名”不一致,那么就需要你用函数的方式对“出参”、“入参”进行转换。
// 入参
getParams(){
const params = {
name: 'zhanglc',
age: 26,
......
}
return params
}
2、列表页一个页面
如果新增页面中有“下拉框”项,那么详情页和列表页一般该项的数据展示的是key值,此时就需要用到封装函数来映射对应的value值。(下面写法都是vue写法)
思路,数组转换成 对象{key: value}
data(){
return{
incateArr: [] // 通过接口获取下拉框的数组值/对象值
}
}
// 映射对应关系
toInvateType(val){
if(this.incateArr.length){
return toMapType(val, this.incateArr, key, value)
}
}
// 映射关系
/**
* @param arr 要映射的数据(array,string,number)
* @param obj 对应映射的数组或对象
* @param value 如果obj是数组,需要传value
* @param label 如果obj是数组,需要传label
* @returns {*}
*/
export function toMapType (arr, obj, value, label) {
if (arr && obj) {
let mapObj = {};
if (Array.isArray(obj)) {
if (obj.length) {
obj.map(item => {
mapObj[item[value]] = item[label];
});
}
} else {
mapObj = obj;
}
if (Array.isArray(arr)) {
let objArr = [];
for (let i = 0; i < arr.length; i++) {
objArr.push(mapObj[arr[i]]);
}
return objArr.join('、');
} else {
return mapObj[arr];
}
}
}