zcloud-ui/src/utils/handleData.js

A Component Library for Vue.js.

import Http from 'zcloud-ui/src/utils/axios';
/**
 * @description: 用法
 * @return {*}
 */
// this.$template.handleTemplateData({
// 	dataName: 'formData',
// 	modelName: 'model',
// 	watchName: "xxxx",
// 	vue: this,
// })

/**
 * 处理数据 用处：需要远程请求数据  配置paramsUrl：“。。。。”
 *
 * @param {Object} dataName 数据源名字
 * @param {Object} modelName 组件中v-model数据 名字
 * @param {Object} watchName 保证监听属性得唯一性（组件复用得时候用到）
 * @param {Object} initData 给模板一个原始data 里面包含模板得所有属性已经默认值得处理 （这里用于 表格数据切换 需要重置form）
 * @param {Object} vue vue指针
 */
let watchsBox = {};

export default function handleData (options) {
  watchsBox = {};
  let vue = options.vue || {};
  let templetList = vue[options.dataName] || [];
  //   初始化数据 赋值
  let model = vue[options.modelName];
  templetList.forEach(it => {
    // 部门的下拉 treeSelect 特殊处理
    if (it.type === 'treeSelect') {
      vue.$set(
        vue[options.modelName],
        it.value,
        model[it.value] !== undefined &&
                model[it.value] !== null &&
                model[it.value] !== ''
          ? model[it.value]
          : null,
      );
    } else {
      vue.$set(
        vue[options.modelName],
        it.value,
        model[it.value] !== undefined &&
            model[it.value] !== null &&
            model[it.value] !== ''
          ? model[it.value]
          : (it.type === 'checkbox' || it.multiple || (it.props && it.props.multiple))
            ? []
            : '',
      );
    }
  });
  // 处理下watch
  let watchName = options.watchName || 'commond';

  if (!watchsBox[watchName]) {
    watchsBox[watchName] = new Map();
  }
  
  for (let templet of templetList) {
    doTemplateAjax(templet, options);
  }
}

/**
 * 处理单个模板 templet
 *
 * @param {Object} dataName 数据源名字
 * @param {Object} modelName 组件中v-model数据 名字
 * @param {Object} watchName 保证监听属性得唯一性（组件复用得时候用到）
 * @param {Object} vue vue指针
 * @param {Object} isNoFirst 监听触发的时候为true
 */
const doTemplateAjax = (templet, options, isNoFirst = false) => {
  let modelName = options.modelName;
  let vue = options.vue;
  // let watchName = options.watchName
  // 后续这里加类型 判断是否有接口请求
  if (templet.type === 'select' || templet.type === 'cascader') {
    if (templet.urlBox && templet.urlBox.baseUrl) {
      let { url, params, initParams } = getParams(templet, options);
      // // 判断接口是否需要model中得其他参数
      let isPost = true;
      for (let item in initParams) {
        if (
          initParams[item] === '' ||
            initParams[item] === null ||
            initParams[item] === undefined || 
                    (Array.isArray(initParams[item]) && initParams[item].length === 0)
        ) {
          isPost = false;
          break;
        }
      }
      if (isPost) {
        Http(
          url,
          {
            apiNum: templet.urlBox.apiNum || 0,
            returnAll: 1,
            ignoreRepeat: true,
            authCode: templet.urlBox.authCode,
            ...params
          }
        ).then(res => {
          // 支持两者 1.res.result 为list  2.res.result.list 3.res.result.row
          if (
            res.result && (Array.isArray(res.result) || 
            (res.result.list && Array.isArray(res.result.list)) ||
            (res.datresulta.row && Array.isArray(res.result.row)))
          ) {
            let isHas = false;
            let list = res.result;
            if (res.result.list && Array.isArray(res.result.list)) {
              list = res.result.list;
            }
            if (res.result.row && Array.isArray(res.result.row)) {
              list = res.result.row;
            }
            list.forEach(item => {
              // 设置自定义的key value
              if (templet.urlBox.dataUrlDes) {
                item.typename = item[templet.urlBox.dataUrlDes.key];
                if (templet.urlBox.dataUrlDes.key1) {
                  item.typename = item.typename + '(' + item[templet.urlBox.dataUrlDes.key1] + ')';
                }
                item.typecode = item[templet.urlBox.dataUrlDes.value];
              }
              if (
                Array.isArray(vue[modelName][templet.value]) && 
                vue[modelName][templet.value].indexOf(item.typecode) !== -1
              ) {
                // 多选数组 说明原有得值 能匹配到数据
                isHas = true;
              } else if (
                vue[modelName][templet.value] === item.typecode
              ) {
                // 说明原有得值 能匹配到数据
                isHas = true;
              }
            });

            // 未匹配到数组 重置值
            if (!isHas && isNoFirst) {
              doEmpty(vue, templet, modelName);
            }
            
            // 增加全部选项
            if (templet.urlBox.isAll && list.length > 0) {
              list.unshift({
                typename: '全部',
                typecode: '全部'
              });
              if (vue[modelName][templet.value].length === list.length - 1) {
                vue.$set(vue[modelName], [templet.value], ['全部']);
              }
            }

            options.vue.$set(templet, 'options', list);
          }
        }).catch(err => {
          console.log(err);
          options.vue.$set(templet, 'options', [
            { typename: '接口请求数据错误1', typecode: 0, code: '1111' },
            { typename: '接口请求数据错误2', typecode: 1, code: '1111' }
          ]);
        });
      } else {
        // 这里应该不用重新赋值
        if (isNoFirst) {
          doEmpty(vue, templet, modelName);
        }
      }
    }
  }
};

/**
 * @description: 清空关联值
 * @param {*} vue
 * @param {*} templet
 * @param {*} modelName
 * @return {*}
 */
const doEmpty = (vue, templet, modelName) => {
  if ((templet.type === 'checkbox' || templet.multiple || (templet.props && templet.props.multiple))) {
    vue.$set(vue[modelName], [templet.value], []);
  } else {
    vue.$set(vue[modelName], [templet.value], '');
  }
};

/**
 * 处理url参数
 *
 * @param {Object} dataName 数据源名字
 * @param {Object} modelName 组件中v-model数据 名字
 * @param {Object} watchName 保证监听属性得唯一性（组件复用得时候用到）
 * @param {Object} vue vue指针
 */
const getParams = (templet, options) => {
  let modelName = options.modelName;
  let vue = options.vue;
  let watchName = options.watchName;
  // 判断url 有没有参数
  let url = templet.urlBox.baseUrl;

  let initParams = {};
  // let headers = templet.headers || {}
  let paramsList = [];
  if (templet.urlBox.paramsUrl) {
    paramsList = templet.urlBox.paramsUrl.split('&');
  }
  // 处理参数 建立监听
  paramsList.forEach(element => {
    if (element.indexOf('=') >= 0) {
      let tempParams = element.split('=');
      initParams[tempParams[0]] = tempParams[1];
    } else {
      // 解析联动参数  xxx{aaa}
      let arr = element.split('$');
      initParams[arr[0]] = vue[modelName][arr[1]];
      if (!watchsBox[watchName].get(`${modelName}.${arr[1]}`)) {
        // 因为这里有联动得参数，自身需要 建立监听
        vue.$watch(`${modelName}.${arr[1]}`, () => {
          console.log(
            `监听成功，再次执行对应得单个模板数据${modelName}.${arr[1]}`,
            templet,
          );
          // 监听变化之后，将相关联需要它作为参数得模板对应得字段设置为“”
          doTemplateAjax(templet, options, true);
        });
      }
      watchsBox[watchName].set(`${modelName}.${arr[1]}`, true);
    }
  });

  let params = {};
  if (templet.urlBox.paramName) {
    params[templet.urlBox.paramName] = JSON.parse(JSON.stringify(initParams));
  } else {
    params = JSON.parse(JSON.stringify(initParams));
  }

  return { url, params, initParams };
};