vue-ant-patterns/biz-lib/b-constant/index.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _bizUtils = require('../_biz-utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

/*
 * @Description: 常数代码
 * @Autor: liuyanxin
 * @Date: 2020-05-12 15:37:04
 * @LastEditors: daibing
 * @LastEditTime: 2021-09-16 14:11:30
 */
var API_PLATFORM = (global || window).globalJSConfig.SERVICE_CONFIG.API_PLATFORM;

var getCodeSelectorDataURL = API_PLATFORM + 'codeSelectorController/getCodeSelectorData';

/**
 * 缓存名, 公共数据放在 localStorage dataCache 下
 */
var cacheName = 'constant';

var BConstant = {
  name: 'BConstant',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-biz-constant'),
    typeCode: _vueTypes2['default'].string,
    allowClear: _vueTypes2['default'].bool.def(false), // 支持清除
    // defaultValue: PropTypes.oneOfType([String, Object, PropTypes.arrayOf(Object)]),
    defaultValue: _vueTypes2['default'].oneOfType([String, Object, _vueTypes2['default'].arrayOf(_vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number, _vueTypes2['default'].object]))]),
    // value: PropTypes.oneOfType([String, Object, PropTypes.arrayOf(Object)]), // 组件值
    value: _vueTypes2['default'].oneOfType([String, Object, _vueTypes2['default'].arrayOf(_vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number, _vueTypes2['default'].object]))]), // 组件值
    placeholder: _vueTypes2['default'].string.def(''), // 选择框默认文字
    multiple: _vueTypes2['default'].bool.def(false),
    showSearch: _vueTypes2['default'].bool.def(true),
    status: _vueTypes2['default'].oneOf(['edit', 'view']).def('edit'),
    disabled: _vueTypes2['default'].bool.def(false),
    size: _vueTypes2['default'].oneOf(['small', 'large', 'default']).def('default'),
    currentUrl: _vueTypes2['default'].string.def('')
  },
  cacheCodeOptions: ((0, _bizUtils.getCache)(cacheName) || {})[cacheName] || {},
  data: function data() {
    var _$props = this.$props,
        value = _$props.value,
        typeCode = _$props.typeCode;

    /**
     * 单选
     * 业务层数据返回格式为 Object{ code, value, typeCode }
     * 多选还不确定
     *
     * 组件需要 typeCode 确定类型
     * 假设业务层传递
     *
     * value String
     * typeCode String
     *
     * value Object
     * typeCode String
     *
     * 可能会有多选
     * value [Object]
     * typeCode String
     */

    var values = [];
    var vTypeCode = typeCode;
    if ((0, _propsUtil.hasProp)(this, 'value') && value) {
      values = this.getCodes(value);
    }
    if (!(0, _propsUtil.hasProp)(this, 'typeCode') || !typeCode) {
      vTypeCode = this.getTypeCode(value);
    }

    return {
      dataSource: null,
      selectCode: values,
      vTypeCode: vTypeCode
    };
  },

  watch: {
    value: function value() {
      var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

      this.selectCode = this.getCodes(val);
    },
    typeCode: function typeCode(val, oval) {
      this.vTypeCode = val;
      this.loadDataSource();
      this.$emit('input', null);
    }
  },
  created: function created() {
    this.loadDataSource();
  },

  methods: {
    // 获取 typeCode
    getTypeCode: function getTypeCode(value) {
      var oItem = null;
      if (Array.isArray(value)) {
        oItem = value[0];
      } else if ((typeof value === 'undefined' ? 'undefined' : (0, _typeof3['default'])(value)) === 'object') {
        oItem = value;
      }
      return oItem ? oItem.typeCode : '';
    },
    getCodes: function getCodes(value) {
      var values = [];

      if (!value) return values;
      if (Array.isArray(value)) {
        values = value.map(function (it) {
          return (typeof it === 'undefined' ? 'undefined' : (0, _typeof3['default'])(it)) === 'object' ? it.code : it;
        }).filter(function (T) {
          return T;
        });
      } else if ((typeof value === 'undefined' ? 'undefined' : (0, _typeof3['default'])(value)) === 'object') {
        values = [value.code || ''];
      } else {
        // 字符串
        values = [value];
      }
      return values;
    },
    loadDataSource: function () {
      var _ref = (0, _asyncToGenerator3['default'])( /*#__PURE__*/_regenerator2['default'].mark(function _callee() {
        var vTypeCode, currentUrl, paramObj, _$options$cacheCodeOp, cacheCodeOptions, cacheData, res, rData;

        return _regenerator2['default'].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                vTypeCode = this.vTypeCode, currentUrl = this.currentUrl;
                paramObj = {
                  url: currentUrl ? currentUrl : getCodeSelectorDataURL,
                  method: 'post',
                  data: {
                    typeCode: vTypeCode
                  }
                };
                _$options$cacheCodeOp = this.$options.cacheCodeOptions, cacheCodeOptions = _$options$cacheCodeOp === undefined ? {} : _$options$cacheCodeOp;
                cacheData = cacheCodeOptions[vTypeCode];

                if (!cacheData) {
                  _context.next = 7;
                  break;
                }

                this.dataSource = cacheData;
                return _context.abrupt('return');

              case 7:
                _context.next = 9;
                return (0, _bizUtils.request)(paramObj);

              case 9:
                res = _context.sent;
                rData = res.data.data;

                this.$options.cacheCodeOptions[vTypeCode] = rData;
                (0, _bizUtils.setCache)(rData, vTypeCode, cacheName);
                this.dataSource = rData;

              case 14:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function loadDataSource() {
        return _ref.apply(this, arguments);
      }

      return loadDataSource;
    }(),

    /**
     * @description: 构建 LIST POPUP 下拉框
     * @param {type}
     * @return:
     */
    rander_LIST_POPUP: function rander_LIST_POPUP() {
      var _this = this;

      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          dataSource = this.dataSource,
          allowClear = this.allowClear,
          placeholder = this.placeholder,
          multiple = this.multiple,
          disabled = this.disabled,
          size = this.size;

      var POPUP_Props = {
        props: {
          allowClear: allowClear,
          placeholder: placeholder,
          value: this.selectCode,
          mode: multiple ? 'multiple' : 'default',
          disabled: disabled,
          size: size,
          dropdownStyle: { 'max-height': '300px', overflow: 'auto' }
        },
        on: {
          change: function change(e) {
            var res = _this.formatReturnData(e);
            // this.selectValue = res;
            _this.selectCode = e;

            _this.$emit('change', res);
            _this.$emit('input', res); // v-model
          }
        },
        style: { width: '100%' }
      };
      return h(
        'a-select',
        POPUP_Props,
        [dataSource ? dataSource.codeList.map(function (dataitem) {
          return h(
            'a-select-option',
            {
              attrs: { value: dataitem.code }
            },
            [dataitem.name]
          );
        }) : '']
      );
    },

    /**
     * @description: 构建 LIST COMBOBOx 下拉框
     * @param {type}
     * @return:
     */
    rander_LIST_COMBOBOX: function rander_LIST_COMBOBOX() {
      var _this2 = this;

      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          dataSource = this.dataSource,
          allowClear = this.allowClear,
          placeholder = this.placeholder,
          multiple = this.multiple,
          disabled = this.disabled,
          size = this.size;

      var COMBOBOX_Props = {
        props: {
          allowClear: allowClear,
          placeholder: placeholder,
          value: this.selectCode,
          mode: multiple ? 'multiple' : 'default',
          disabled: disabled,
          size: size,
          dropdownStyle: { 'max-height': '300px', overflow: 'auto' }
        },
        on: {
          change: function change(e) {
            var res = _this2.formatReturnData(e);
            // this.selectValue = res;
            _this2.selectCode = e;

            _this2.$emit('change', res);
            _this2.$emit('input', res); // v-model
          }
        }
      };
      return h(
        'a-select',
        COMBOBOX_Props,
        [dataSource ? dataSource.codeList.map(function (dataitem) {
          return h(
            'a-select-option',
            {
              attrs: { value: dataitem.code }
            },
            [dataitem.name]
          );
        }) : '']
      );
    },


    /**
     * @description: LIST SELECTBOX Radio组件
     * @param {type}
     * @return:
     */
    rander_LIST_SELECTBOX: function rander_LIST_SELECTBOX() {
      var _this3 = this;

      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          dataSource = this.dataSource,
          allowClear = this.allowClear,
          multiple = this.multiple,
          disabled = this.disabled,
          size = this.size;

      var options = dataSource.codeList.map(function (dataitem) {
        return { label: dataitem.name, value: dataitem.code };
      });
      var SELECTBOX_Props = {
        props: {
          options: options,
          value: this.selectCode,
          disabled: disabled,
          size: size
        },
        on: {
          change: function change(e) {
            var _v = multiple ? e : e.target.value;

            var res = multiple ? _v.map(function (_item) {
              return _this3.formatReturnData(_item);
            }) : _this3.formatReturnData(_v);
            // this.selectValue = res;
            _this3.selectCode = _v;

            _this3.$emit('change', res);
            _this3.$emit('input', res); // v-model
          }
        }
      };
      return multiple ? h('a-checkbox-group', SELECTBOX_Props) : h('a-radio-group', SELECTBOX_Props);
    },


    /**
     * @description:TREE 组件 TREE_POPUP
     * @param {type}
     * @return:
     */
    rander_TREE_POPUP: function rander_TREE_POPUP() {
      var _this4 = this;

      var h = this.$createElement;
      var _$props2 = this.$props,
          showSearch = _$props2.showSearch,
          multiple = _$props2.multiple,
          allowClear = _$props2.allowClear,
          disabled = _$props2.disabled,
          size = _$props2.size;
      var dataSource = this.dataSource,
          placeholder = this.placeholder;
      var _dataSource$codeList = dataSource.codeList,
          codeList = _dataSource$codeList === undefined ? [] : _dataSource$codeList;

      var formatData1 = dataSource ? dataSource.codeList.map(function (_item) {
        _item.id = _item.code;
        _item.pId = _item.parentCode;
        _item.label = _item.name;
        _item.value = _item.code;
        return _item;
      }) : [];
      var TREE_POPUP_Props = {
        props: {
          treeDataSimpleMode: true,
          treeData: formatData1,
          placeholder: placeholder,
          allowClear: allowClear,
          value: this.selectCode,
          multiple: multiple,
          showSearch: showSearch,
          searchPlaceholder: '搜索',
          filterTreeNode: function filterTreeNode(inputValue, treeNode) {
            return (treeNode.componentOptions.propsData.title || '').indexOf(inputValue) > -1;
          },
          disabled: disabled,
          size: size,
          dropdownStyle: { 'max-height': '300px', overflow: 'auto' }
        },
        on: {
          change: function change(e) {
            var res = _this4.formatReturnData(e);
            // this.selectValue = res;
            _this4.selectCode = e;

            _this4.$emit('change', res);
            _this4.$emit('input', res); // v-model
          }
        }
      };
      return h('a-tree-select', TREE_POPUP_Props);
    },


    /**
     * @description:TREE 组件 TREE_COMBOBOX
     * @param {type}
     * @return:
     */
    rander_TREE_COMBOBOX: function rander_TREE_COMBOBOX() {
      var _this5 = this;

      var h = this.$createElement;
      var _$props3 = this.$props,
          showSearch = _$props3.showSearch,
          multiple = _$props3.multiple,
          allowClear = _$props3.allowClear,
          disabled = _$props3.disabled,
          size = _$props3.size;
      var dataSource = this.dataSource,
          placeholder = this.placeholder;
      var _dataSource$codeList2 = dataSource.codeList,
          codeList = _dataSource$codeList2 === undefined ? [] : _dataSource$codeList2;

      var formatData1 = dataSource ? dataSource.codeList.map(function (_item) {
        _item.id = _item.code;
        _item.pId = _item.parentCode;
        _item.label = _item.name;
        _item.value = _item.code;
        return _item;
      }) : [];
      var TREE_POPUP_Props = {
        props: {
          treeDataSimpleMode: true,
          treeData: formatData1,
          placeholder: placeholder,
          allowClear: allowClear,
          value: this.selectCode,
          multiple: multiple,
          showSearch: showSearch,
          searchPlaceholder: '搜索',
          filterTreeNode: function filterTreeNode(inputValue, treeNode) {
            return (treeNode.componentOptions.propsData.title || '').indexOf(inputValue) > -1;
          },
          disabled: disabled,
          size: size,
          dropdownStyle: { 'max-height': '300px', overflow: 'auto' }
        },
        on: {
          change: function change(e) {
            var res = _this5.formatReturnData(e);
            // this.selectValue = res;
            _this5.selectCode = e;

            _this5.$emit('change', res);
            _this5.$emit('input', res); // v-model
          }
        }
      };
      return h('a-tree-select', TREE_POPUP_Props);
    },


    /**
     * @description: 格式化返回数据
     * @param {type}
     * @return:
     */
    formatReturnData: function formatReturnData(e) {
      var codeList = this.dataSource.codeList;

      if (e === undefined) {
        return this.multiple ? [] : null;
      }
      if (typeof e === 'string') {
        var _resObj = codeList.find(function (_citem) {
          return _citem.code === e;
        });
        var code = _resObj.code,
            name = _resObj.name,
            typeCode = _resObj.typeCode,
            value = _resObj.value,
            parentCode = _resObj.parentCode;

        return { code: code, name: name, typeCode: typeCode, value: value, parentCode: parentCode };
      }

      var resObj = codeList.filter(function (_citem) {
        return e.includes(_citem.code);
      });
      var resArr = resObj.map(function (_item) {
        var code = _item.code,
            name = _item.name,
            typeCode = _item.typeCode,
            value = _item.value,
            parentCode = _item.parentCode;

        return { code: code, name: name, typeCode: typeCode, value: value, parentCode: parentCode };
      });
      return resArr;
    },
    renderResult: function renderResult() {
      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          dataSource = this.dataSource,
          allowClear = this.allowClear,
          status = this.status,
          multiple = this.multiple,
          selectCode = this.selectCode;

      var _ref2 = dataSource || {},
          codeList = _ref2.codeList;

      var contProps = {
        props: {
          grow: true
        },
        'class': (0, _defineProperty3['default'])({}, prefixCls + '-view', 1)
      };
      var vals = !dataSource || !codeList ? null : this.formatReturnData(selectCode);
      return h(
        'div',
        contProps,
        [!vals ? null : vals.map(function (it) {
          // 先看看效果
          // return <a-tag>{it.name}</a-tag>;
          return it.name;
        }).join(', ')]
      );
    }
  },
  render: function render() {
    var h = arguments[0];
    var prefixCls = this.prefixCls,
        dataSource = this.dataSource,
        allowClear = this.allowClear,
        status = this.status,
        multiple = this.multiple,
        selectCode = this.selectCode;

    var isView = status === 'view';
    var wrap = {
      'class': (0, _defineProperty3['default'])({}, prefixCls, 1)
    };
    if (isView) {
      return this.renderResult();
    }
    return dataSource !== null ? h(
      'div',
      wrap,
      [this['rander_' + dataSource.dataStructure + '_' + dataSource.controlType]()]
    ) : '';
  }
};
BConstant.install = function (Vue) {
  Vue.component(BConstant.name, BConstant);
};

exports['default'] = BConstant;