vue-ant-patterns/biz-es/b-table-collection/index.js

vue-ant-patterns

import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import _extends from 'babel-runtime/helpers/extends';
import Vue from 'vue';
import { Tag } from 'ant-design-vue';
import defaultProps from './defaultProps';
import { request, getCache, setCache } from '../_biz-utils';
import renderType from './renderType';
import extend from 'extend';

// import { hasProp } from 'ant-design-vue/lib/_util/props-util';
var globalExpire = (global || window).globalJSConfig.globalExpire;

// const token = Vue.ils.get('token');

var cacheName = 'tableCollection';

var BTableCollection = {
  mixins: [renderType],
  name: 'b-table-collection',
  props: _extends({}, defaultProps),
  cacheCodeOptions: (getCache(cacheName) || {})[cacheName] || {},
  model: {
    prop: 'value',
    event: 'change'
  },
  created: function created() {
    // const { tableCollection = {} } = getCache(cacheName) || {};
    // this.$options.cacheCodeOptions = tableCollection;
    this.queryOptions();
  },
  mounted: function mounted() {},
  data: function data() {
    var _$props = this.$props,
        value = _$props.value,
        type = _$props.type,
        multiple = _$props.multiple;

    var val = value;
    var vType = type;
    if (multiple) {
      if (typeof val === 'string') {
        val = [val];
      }
      if (type === 'radio') {
        vType = 'checkbox';
      }
    }
    if (!multiple && type === 'checkbox') {
      if (Array.isArray(val)) {
        val = val[val.length - 1];
      }
      vType = 'radio';
    }

    return {
      sValue: val,
      vType: vType,
      options: [],
      sMultiple: multiple ? 'multiple' : 'default'
    };
  },

  watch: {
    multiple: function multiple(v, oV) {
      var sValue = this.sValue;

      this.sMultiple = v ? 'multiple' : 'default';
      this.setTypeAndVal();
    },
    tableName: function tableName(nName, oName) {
      if (oName !== nName) {
        this.queryOptions();
      }
    },
    type: function type(v) {
      this.vType = v;
      this.setTypeAndVal();
    },
    value: function value(v) {
      this.sValue = v;
    }
  },
  methods: {
    setTypeAndVal: function setTypeAndVal() {
      var _$props2 = this.$props,
          multiple = _$props2.multiple,
          type = _$props2.type;
      var sValue = this.sValue,
          vType = this.vType;

      var val = sValue;
      if (multiple) {
        if (typeof val === 'string') {
          this.sValue = [val];
        }
        if (vType === 'radio') {
          this.vType = 'checkbox';
        }
      }
      if (!multiple) {
        if (Array.isArray(val)) {
          this.sValue = val[val.length - 1];
        }
        if (vType === 'checkbox') {
          this.vType = 'radio';
        }
      }
    },
    renderComponent: function renderComponent() {
      var h = this.$createElement;
      var _$props3 = this.$props,
          status = _$props3.status,
          keys = _$props3.keys;
      var options = this.options,
          sValue = this.sValue,
          vType = this.vType;

      var _keys = _slicedToArray(keys, 2),
          k = _keys[0],
          n = _keys[1];

      var opt = options.map(function (it) {
        var v = it[k],
            label = it[n];

        if (Array.isArray(sValue)) {
          return sValue.includes(v) ? it : null;
        }
        return v === sValue ? it : null;
      }).filter(function (T) {
        return T;
      });

      if (status === 'view') {
        return h('span', [opt.length ? opt.length === 1 ? opt[0][n] : opt.map(function (it) {
          return h(Tag, [it[n]]);
        }) : null]);
      }
      if (!vType) return null;

      return this['render$' + vType]();
    },
    queryOptions: function queryOptions() {
      var _this = this;

      var _$props4 = this.$props,
          tableName = _$props4.tableName,
          queryParam = _$props4.queryParam;
      var cacheCodeOptions = this.$options.cacheCodeOptions;


      if (!tableName) return;

      var cloneQueryParam = extend(true, { data: {} }, queryParam);
      var cacheData = cacheCodeOptions[tableName];

      if (cacheData) {
        this.options = cacheData;
        this.$emit('optionLoad', extend({}, cacheData));
        return;
      }

      cloneQueryParam.data.tableName = tableName;
      request(cloneQueryParam).then(function (res) {
        var resData = res.data;
        var msg = resData.msg,
            code = resData.code,
            data = resData.data;

        if (code === 200) {
          _this.options = data;

          _this.$options.cacheCodeOptions[tableName] = data;
          setCache(data, tableName, cacheName);

          // const cacheData = {
          //   ...(cache || {}),
          //   'table-collection': {
          //     ...(tableCollectionCache || {}),
          //     [tableName]: data,
          //   },
          // };

          // const expire = Vue.ils.get('cookieExpire') || globalExpire;
          // Vue.ils.set('dataCache', cacheData, expire);

          _this.$emit('optionLoad', data);
        } else {
          _this.$message.error(msg);
        }
      })['finally'](function () {
        _this.$root.isLoading = false;
      });
    }
  },
  render: function render() {
    return this.renderComponent();
  }
};

BTableCollection.tableCollectionProps = defaultProps;
BTableCollection.install = function (Vue) {
  Vue.component(BTableCollection.name, BTableCollection);
};

export default BTableCollection;