vue-ant-patterns/es/d-form-list/FormList.js

vue-ant-patterns

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import cx from 'classnames';
import Draggable from 'vuedraggable';
var DFormList = {
  name: 'DFormList',
  props: {
    prefixCls: PropTypes.string.def('depot-dformlist'),
    columns: PropTypes.array, // 标题列数组
    dataSource: PropTypes.array, // 数据数组
    sortDone: PropTypes.func, // 排序调整回调方法
    removeDone: PropTypes.func, // 移除行数据回调方法
    addDone: PropTypes.func, // 新增行回调方法
    showAddBtn: PropTypes.bool.def(true), // 是否可新增
    showRemoveBtn: PropTypes.bool.def(true), // 是否可移除
    isDrag: PropTypes.bool.def(true), // 是否允许拖拽排序
    addlabel: PropTypes.string
  },
  model: {
    prop: 'dataSource',
    event: 'change'
  },
  data: function data() {
    return {
      dataSource_data: this.dataSource,
      formObjList: []
    };
  },

  watch: {
    dataSource: {
      handler: function handler(val, oval) {
        this.formObjList = [];
        this.dataSource_data = val;
      },

      deep: true
    }
  },
  methods: {
    /**
     * 新增列表项
     * @param {*} e
     */
    addListItem: function addListItem(e) {
      var olddata = [].concat(_toConsumableArray(this.dataSource_data));
      var newData = {};
      this.columns.forEach(function (citem, cindex) {
        newData[citem.dataIndex] = '';
      });
      var newRdata = this.dataSource_data.concat([newData]);
      this.$emit('addDone', newRdata, olddata);
    },

    /**
     * 删除列表项方法
     * @param {*} mindex
     */
    minusListItem: function minusListItem(mindex) {
      var _this = this;

      var olditem = this.dataSource_data[mindex];
      this.formObjList.splice(mindex, 1);
      var newDataSource = this.formObjList.map(function (_fobj, _findex) {
        return _extends({}, _this.dataSource_data[_findex], _fobj.getFieldsValue());
      });
      this.$emit('removeDone', newDataSource, mindex, olditem);
    },

    /**
     * 值变更回调
     *
     * @param {*} dindex
     * @param {*} values
     */
    changeValue: function changeValue(dindex, values) {
      var newdata = this.collectDataSource(dindex, values);
      this.$emit('changeDone', newdata, dindex, values);
    },

    /**
     * @description: change 收集新数据
     * @param {type}
     * @return:
     */
    collectDataSource: function collectDataSource(dindex, values) {
      var _this2 = this;

      var newDataSource = this.formObjList.map(function (_fobj, _findex) {
        return _extends({}, _this2.dataSource_data[_findex], _fobj.getFieldsValue());
      });
      newDataSource[dindex] = _extends({}, this.dataSource_data[dindex], newDataSource[dindex], values);
      return newDataSource;
    },

    /**
     * 排序变更回调
     * @param {*} element
     * @param {*} newIndex
     * @param {*} oldIndex
     */
    sortCBack: function sortCBack(element, newIndex, oldIndex) {
      this.$emit('sortDone', this.dataSource_data, element, newIndex, oldIndex);
    },

    /**
     * @description: 构建行
     * @param {type}
     * @return:
     */
    renderListBody: function renderListBody(ditem, dindex) {
      var _this3 = this;

      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          columns = this.columns;

      var formobj = this.formObjList[dindex] ? this.formObjList[dindex] : this.$form.createForm(this, {
        onValuesChange: function onValuesChange(props, values) {
          _this3.changeValue(dindex, values);
        }
      });
      this.formObjList[dindex] = formobj;
      var getFieldDecorator = formobj.getFieldDecorator;

      var resDoms = columns.map(function (citem, cindex) {
        var _cx;

        var controwitemProps = {
          'class': cx((_cx = {}, _defineProperty(_cx, prefixCls + '-content-row-item', true), _defineProperty(_cx, prefixCls + '-content-row-item-flex', !citem.width), _cx))
        };
        var v = ditem[citem.dataIndex];
        var rules = citem.rules;
        var rdom = getFieldDecorator(citem.dataIndex, {
          initialValue: v,
          rules: rules
        })(_this3.renderDom(citem, dindex, v));
        return h(
          'a-form-item',
          _mergeJSXProps([controwitemProps, {
            style: { width: citem.width ? citem.width + 'px' : 'auto', 'margin-right': '0px' }
          }]),
          [rdom]
        );
      });
      var resformProps = {
        props: {
          form: formobj,
          layout: 'inline'
        },
        style: {
          display: 'flex',
          width: '100%',
          flex: 1
        }
      };
      var resform = h(
        'a-form',
        resformProps,
        [resDoms]
      );
      return resform;
    },

    /**
     * @description: 构建输入组件
     * @param {type}
     * @return:
     */
    renderDom: function renderDom(citem, dindex, v) {
      var h = this.$createElement;
      var $slots = this.$slots,
          $scopedSlots = this.$scopedSlots,
          dataSource_data = this.dataSource_data;

      var slot_name = citem.dataIndex;
      var _vnode = $scopedSlots[slot_name] && $scopedSlots[slot_name]({ record: dataSource_data[dindex], index: dindex }) || h('a-input', _mergeJSXProps([{
        attrs: { size: 'small' }
      }, citem.wrappers]));
      return _vnode;
    },

    /**
     * 校验 并获取字段 value
     * 返回 promise
     */
    validateFields: function validateFields() {
      var _this4 = this;

      var formObjList = this.formObjList;
      // validateFields

      var errorsArray = [];
      formObjList.forEach(function (_formItem) {
        _formItem.validateFields(function (errors, values) {
          errorsArray.push(errors);
        });
      });
      var hasErr = errorsArray.some(function (errItem) {
        return errItem !== null;
      });
      return new Promise(function (resolve, reject) {
        resolve({ errors: hasErr ? errorsArray : undefined, values: _this4.dataSource_data });
      });
    }
  },
  render: function render() {
    var _cx4,
        _cx5,
        _this5 = this,
        _cx7,
        _cx8,
        _cx9,
        _cx10,
        _cx11;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        columns = this.columns,
        dataSource_data = this.dataSource_data,
        showAddBtn = this.showAddBtn,
        showRemoveBtn = this.showRemoveBtn,
        isDrag = this.isDrag,
        addlabel = this.addlabel,
        $slots = this.$slots;

    var dformlistProps = {
      'class': cx(_defineProperty({}, '' + prefixCls, true))
    };
    var titleProps = {
      'class': cx(_defineProperty({}, prefixCls + '-title', true))
    };

    var titleiconProps = {
      'class': cx((_cx4 = {}, _defineProperty(_cx4, prefixCls + '-title-icon', true), _defineProperty(_cx4, prefixCls + '-title-icon-hidden', !isDrag), _cx4))
    };
    var titleoperationProps = {
      'class': cx((_cx5 = {}, _defineProperty(_cx5, prefixCls + '-title-operation', true), _defineProperty(_cx5, prefixCls + '-title-operation-hidden', !showRemoveBtn), _cx5))
    };
    var contProps = {
      'class': cx(_defineProperty({}, prefixCls + '-content', true)),
      props: {
        list: dataSource_data
      },
      attrs: {
        handle: '.icondraganddrop'
      },
      on: {
        start: function start(e) {
          e.item.classList.add(prefixCls + '-content-dropactive');
        },
        end: function end(e) {
          e.item.classList.remove(prefixCls + '-content-dropactive');
        },
        change: function change(e) {
          var _e$moved = e.moved,
              element = _e$moved.element,
              newIndex = _e$moved.newIndex,
              oldIndex = _e$moved.oldIndex;

          _this5.sortCBack(element, newIndex, oldIndex);
        }
      }
    };
    var controwProps = {
      'class': cx((_cx7 = {}, _defineProperty(_cx7, prefixCls + '-content-row', true), _defineProperty(_cx7, prefixCls + '-content-row-cursormove', isDrag), _cx7))
    };
    var controwiconProps = {
      'class': cx((_cx8 = {}, _defineProperty(_cx8, prefixCls + '-content-row-icon', true), _defineProperty(_cx8, prefixCls + '-content-row-icon-hidden', !isDrag), _defineProperty(_cx8, 'handleicon', true), _cx8))
    };
    var dragiconProps = {
      'class': cx((_cx9 = {}, _defineProperty(_cx9, 'iconfont', true), _defineProperty(_cx9, 'icondraganddrop', true), _defineProperty(_cx9, prefixCls + '-content-row-dragicon', true), _cx9))
    };
    var controwoperationProps = {
      'class': cx((_cx10 = {}, _defineProperty(_cx10, prefixCls + '-content-row-operation', true), _defineProperty(_cx10, prefixCls + '-content-row-operation-hidden', !showRemoveBtn), _cx10))
    };
    var footProps = {
      'class': cx((_cx11 = {}, _defineProperty(_cx11, prefixCls + '-foot', true), _defineProperty(_cx11, prefixCls + '-foot-hidden', !showAddBtn), _cx11)),
      on: {
        click: this.addListItem
      }
    };
    var plusProps = {
      'class': cx(_defineProperty({}, prefixCls + '-content-row-plusicon', true)),
      props: {
        style: { fontSize: '18px' },
        type: 'plus'
      }
    };
    var minusProps = {
      'class': cx(_defineProperty({}, prefixCls + '-content-row-minusicon', true)),
      props: {
        type: 'minus-circle'
      }
    };
    return h(
      'div',
      dformlistProps,
      [h(
        'div',
        titleProps,
        [h('div', titleiconProps), columns.map(function (citem, cindex) {
          var _cx14;

          var titleitemProps = {
            'class': cx((_cx14 = {}, _defineProperty(_cx14, prefixCls + '-title-item', true), _defineProperty(_cx14, prefixCls + '-title-item-flex', !citem.width), _cx14))
          };
          return h(
            'div',
            _mergeJSXProps([titleitemProps, { style: { width: citem.width ? citem.width + 'px' : 'auto' } }]),
            [h(
              'span',
              {
                'class': citem && citem.rules && citem.rules.find(function (_ritem) {
                  return _ritem.required;
                }) ? 'formlistTitlerequired' : ''
              },
              [citem.title]
            )]
          );
        }), h('div', titleoperationProps)]
      ), h(
        Draggable,
        contProps,
        [h(
          'transition-group',
          {
            attrs: { type: 'transition', name: 'flip-list' }
          },
          [dataSource_data.map(function (ditem, dindex) {
            // const k = ditem[rowKey];
            return h(
              'div',
              _mergeJSXProps([controwProps, { key: dindex }]),
              [h(
                'div',
                controwiconProps,
                [h('span', dragiconProps)]
              ), _this5.renderListBody(ditem, dindex), h(
                'div',
                controwoperationProps,
                [h('a-icon', _mergeJSXProps([minusProps, {
                  on: {
                    'click': function click() {
                      return _this5.minusListItem(dindex);
                    }
                  }
                }]))]
              )]
            );
          })]
        )]
      ), h(
        'div',
        footProps,
        [addlabel ? addlabel : $slots.addlabel ? $slots.addlabel : h('a-icon', plusProps)]
      )]
    );
  }
};

export default DFormList;