关于pc端管理台“增、删、修、改”

• 按照功能划分
  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];
    }
  }
}