vue-rise-realize/packages/components/mixin/remoteDataMixin.js

一款服务于 Rise 前端低代码平台的表单渲染器

/**
 * 模块说明
 * @module 含remoteData属性组件
 * @author Max.Law 2022/08/26
 */

import { SMARTS_OBJECT } from '../../utils';

const configMixin = {
  props: {
    remoteData: {
      //内部数据
      type: Object,
      default() {
        return {
          optionList: [],
          dataType: '',
        };
      },
    },
  },
  data() {
    return {
      optionList: [],
      remoteDataIsOK: false,
    };
  },
  inject: ['formInstance'],
  watch: {
    remoteData() {
      if (this.remoteData.dataType) {
        this.dataProcessing();
      }
    },
  },
  beforeMount() {
    if (this.remoteData.dataType) {
      this.dataProcessing();
    }
  },
  computed: {
    queryConfig() {
      return this.remoteData.queryConfig
        ? this.handlerGetParams(this.remoteData.queryConfig, this.formInstance)
        : undefined;
    },
    remoteKey() {
      let tag = this.remoteData.url;
      if (this.queryConfig) {
        tag += JSON.stringify(this.queryConfig);
      }
      return tag;
    },
  },
  methods: {
    dataProcessing() {
      //数据处理
      if (this.remoteData.dataType === 'static') {
        this.$set(this, 'optionList', this.remoteData.optionList);
        this.remoteDataIsOK = true;
      } else {
        let keyWord = '';
        if (this.remoteData.dataType == 'dic') {
          keyWord = this.remoteData.dicKeyWord;
        } else {
          keyWord = this.remoteKey;
        }

        if (this.formInstance.dicList) {
          const dicList = this.formInstance.dicList[keyWord];
          if (dicList && dicList.length != 0) {
            this.$set(this, 'optionList', dicList);
            this.remoteDataIsOK = true;
          } else {
            this.handlerRemote();
          }
        }
      }
    },
    handlerGetParams(array = [], formInstance) {
      let tag = {};
      array.forEach((element) => {
        if (element.value.indexOf('${') == -1) {
          tag[element.key] = element.value;
        } else {
          const param = element.value.match(/\$\{(\S*)\}/)[1];
          const memory = Object.assign({}, formInstance.formData, {
            otherInfo: formInstance.otherInfo,
          });
          tag[element.key] = SMARTS_OBJECT('find', param, memory);
        }
      });
      return tag;
    },
    handlerRemote() {
      if (
        //字典值处理
        this.remoteData.dataType == 'dic' &&
        this.remoteData.dicKeyWord
      ) {
        if (this.formInstance.getDic) {
          this.formInstance
            .getDic(this.remoteData.dicKeyWord)
            .then((data) => {
              this.formInstance.dicList[this.remoteData.dicKeyWord] = data;
              this.$set(this, 'optionList', data);
              this.remoteDataIsOK = true;
            })
            .catch(() => {
              this.formInstance.$message.error('字典值获取失败！');
            });
        } else {
          this.formInstance.$message.warning('请传入字典值api');
        }
      } else if (this.remoteData.dataType == 'remote' && this.remoteData.url) {
        this.formInstance
          .axios({
            url: this.remoteData.url,
            method: this.remoteData.ajaxMethod,
            data: this.remoteData.ajaxMethod == 'post' && this.queryConfig,
            params: this.remoteData.ajaxMethod == 'get' && this.queryConfig,
          })
          .then((response) => {
            let tag = response.data.data;
            if (this.remoteData.callback) {
              //存在回调函数
              let fn = new Function('response', this.remoteData.callback).bind(
                this.formInstance,
              );

              tag = fn(response);
            }

            return tag;
          })
          .then((data) => {
            this.formInstance.dicList[this.remoteKey] = data;
            this.$set(this, 'optionList', data);
            this.remoteDataIsOK = true;
          })
          .catch(() => {
            this.formInstance.$message.error('获取数据失败！');
          });
      }
    },
  },
};

export default configMixin;