vue-ant-patterns/biz-es/b-vm/table.js

vue-ant-patterns

import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _extends from 'babel-runtime/helpers/extends';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import { Table } from 'ant-design-vue';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { sortList, isEmptyObj } from '../../es/_utils';
import { DIcon, DIconButton, DContainer } from '../../es/';
import mixin from './mixinBase';

var Horizontal = DContainer.Horizontal;


export default {
  name: 'VmTable',
  mixins: [mixin],
  props: {
    panel: PropTypes.object,
    section: PropTypes.object,
    panelInfo: PropTypes.array,
    sectionInfo: PropTypes.array,
    fieldInfo: PropTypes.array,
    dataSource: PropTypes.object,
    vmStatus: PropTypes.string.def('view'),
    dateFormat: PropTypes.string.def('YYYY-MM-DD'),
    localeCode: PropTypes.string.def('zh-cn'),
    tableAction: PropTypes.array,
    tableRowKey: PropTypes.string,
    tableCustomConfig: PropTypes.func
  },
  data: function data() {
    var vmStatus = this.$props.vmStatus;

    var isEdit = vmStatus === 'edit';
    return {
      isEdit: isEdit,
      v_status: 'view'
    };
  },

  watch: {
    vmStatus: function vmStatus(val) {
      this.isEdit = val === 'edit';
      this.v_status = 'view';
    }
  },
  methods: {
    /**
     * 操作列
     */
    actionColumn: function actionColumn(columnArr) {
      var _this = this;

      var h = this.$createElement;
      var _$props = this.$props,
          section = _$props.section,
          panel = _$props.panel,
          panelInfo = _$props.panelInfo,
          sectionInfo = _$props.sectionInfo,
          localeCode = _$props.localeCode,
          tableAction = _$props.tableAction;

      var _panelInfo = _slicedToArray(panelInfo, 3),
          vPanelKey = _panelInfo[0],
          vPanelCodeKey = _panelInfo[1],
          vPanelNameKey = _panelInfo[2];

      var _sectionInfo = _slicedToArray(sectionInfo, 3),
          vSectionKey = _sectionInfo[0],
          vSectionCodeKey = _sectionInfo[1],
          vSectionNameKey = _sectionInfo[2];

      var isEdit = this.isEdit;


      var key = panel[vPanelCodeKey] + '-' + section[vSectionCodeKey] + '-first-action';
      var lang = this.langType[localeCode];
      var action = lang.action;


      var firstColObj = {
        key: key,
        title: action,
        width: 60,
        align: 'center',
        customRender: function customRender(text, record, index) {
          var buttonProps = {
            props: {
              size: 'small',
              disabled: !isEdit
            },
            on: {
              click: function click() {
                _this.showConfirm({ text: text, panel: panel, section: section, record: record, index: index });
              }
            }
          };
          var editProps = {
            on: {
              click: function click() {
                _this.$emit('tableEdit', { text: text, panel: panel, section: section, record: record, index: index });
              }
            }
          };
          var isEditAction = tableAction.includes('edit');
          var isDeleteACtion = tableAction.includes('delete');

          return !isEditAction && !isDeleteACtion ? null : h(Horizontal, [isDeleteACtion ? h(
            DIconButton,
            buttonProps,
            [h(DIcon, {
              attrs: { type: 'delete' }
            })]
          ) : null, isEditAction ? h(
            DIconButton,
            _extends({}, buttonProps, editProps),
            [h(DIcon, {
              attrs: { type: 'edit' }
            })]
          ) : null]);
        }
      };

      columnArr.unshift(firstColObj);
    },

    /**
     * 首列增加链接
     */
    columnFirstHandler: function columnFirstHandler(_ref) {
      var _this2 = this;

      var panel = _ref.panel,
          section = _ref.section,
          columnArr = _ref.columnArr,
          dataList = _ref.dataList;
      var h = this.$createElement;

      var _getFieldProperty = this.getFieldProperty({
        panel: panel,
        section: section,
        field: dataList[0]
      }),
          fieldName = _getFieldProperty.fieldName,
          isDisplayInGrid = _getFieldProperty.isDisplayInGrid,
          controlType = _getFieldProperty.controlType;

      if (!isDisplayInGrid) {}

      columnArr[0].customRender = function (text, record, index) {
        var linkProps = {
          props: {},
          on: {
            click: function click(e) {
              _this2.$emit('tableDetail', { text: text, panel: panel, section: section, record: record, index: index });
            }
          }
        };
        var value = void 0;
        var isConstant = controlType === 'CONSTANT';
        /**
         * 表格类型的常数代码不使用常数代码组件, 通过字段直接取值
         */
        if (isConstant) {
          value = record[fieldName] ? record[fieldName].name : '';
        } else {
          value = _this2.getFieldValue(controlType, fieldName, record);
        }
        return h(
          'a',
          linkProps,
          [value]
        );
      };
    },

    /**
     * 根据模板数据, 生成 table 使用的 columns
     */
    createColumn: function createColumn() {
      var _this3 = this;

      var _$props2 = this.$props,
          section = _$props2.section,
          panel = _$props2.panel;
      var fieldsList = section.fieldsList;

      var cloneFieldList = [].concat(_toConsumableArray(fieldsList));

      // 排序
      sortList(cloneFieldList);

      // 过滤掉无效的数据 或者 不需要显示的数据
      cloneFieldList = cloneFieldList.map(function (item) {
        var isDisplayInGrid = item.isDisplayInGrid;

        if (!isDisplayInGrid) return;
        return item;
      }).filter(function (T) {
        return T;
      });

      var columnArr = cloneFieldList.map(function (item) {
        var _getFieldProperty2 = _this3.getFieldProperty({
          panel: panel,
          section: section,
          field: item
        }),
            fieldName = _getFieldProperty2.fieldName,
            nFieldName = _getFieldProperty2.nFieldName,
            label = _getFieldProperty2.label,
            controlType = _getFieldProperty2.controlType;

        var colObj = {
          key: nFieldName,
          dataIndex: fieldName,
          title: label,
          customRender: function customRender(text, record, index) {
            var isConstant = controlType === 'CONSTANT';
            /**
             * 表格类型的常数代码不使用常数代码组件, 通过字段直接取值
             */
            if (isConstant) {
              return record[fieldName] ? record[fieldName].name : '';
            }
            var v = _this3.getFieldValue(controlType, fieldName, record);
            return v;
          }
        };

        return colObj;
      }).filter(function (T) {
        return T;
      });

      this.columnFirstHandler({ section: section, panel: panel, columnArr: columnArr, dataList: cloneFieldList });

      this.actionColumn(columnArr);

      return columnArr;
    },
    showConfirm: function showConfirm(_ref2) {
      var _this4 = this;

      var text = _ref2.text,
          panel = _ref2.panel,
          section = _ref2.section,
          record = _ref2.record,
          index = _ref2.index;
      var _$props3 = this.$props,
          panelInfo = _$props3.panelInfo,
          sectionInfo = _$props3.sectionInfo,
          localeCode = _$props3.localeCode;

      var _panelInfo2 = _slicedToArray(panelInfo, 3),
          vPanelKey = _panelInfo2[0],
          vPanelCodeKey = _panelInfo2[1],
          vPanelNameKey = _panelInfo2[2];

      var _sectionInfo2 = _slicedToArray(sectionInfo, 3),
          vSectionKey = _sectionInfo2[0],
          vSectionCodeKey = _sectionInfo2[1],
          vSectionNameKey = _sectionInfo2[2];

      var isEdit = this.isEdit;


      var key = panel[vPanelCodeKey] + '-' + section[vSectionCodeKey] + '-first-action';
      var lang = this.langType[localeCode];
      var confirmDelete = lang.confirmDelete,
          confirm = lang.confirm,
          cancel = lang.cancel;

      var setConfirmStatus = function setConfirmStatus(cfm, status) {
        cfm.update({
          cancelDisable: status,
          confirmLoading: status,
          maskClosable: !status,
          cancelButtonProps: {
            props: {
              // disabled: status,
            }
          },
          okButtonProps: {
            props: {
              loading: status
            }
          }
        });
      };
      var confirmIns = this.$confirm({
        disabled: !isEdit,
        title: confirmDelete,
        okText: confirm,
        cancelText: cancel,
        maskClosable: true,
        confirmLoading: false,
        key: key,
        onOk: function onOk() {
          setConfirmStatus(confirmIns, true);
          return new Promise(function (resolve, reject) {
            _this4.$emit('tableDelete', { text: text, panel: panel, section: section, record: record, index: index }, function (cb) {
              resolve();
            }, function (rejectCallback) {
              confirmIns.update({
                okButtonProps: {
                  props: {
                    loading: false
                  }
                }
              });
            });
          })['finally'](function () {
            setConfirmStatus(confirmIns, false);
          });
        },
        onCancel: function onCancel() {
          // this.confirmLoading = false;
          // this.cancelDisable = false;
          // this.maskClosable = true;
        }
      });
    }
  },
  render: function render() {
    var h = arguments[0];
    var _$props4 = this.$props,
        section = _$props4.section,
        dataSource = _$props4.dataSource,
        sectionInfo = _$props4.sectionInfo,
        tableRowKey = _$props4.tableRowKey,
        tableCustomConfig = _$props4.tableCustomConfig,
        panel = _$props4.panel;

    var _sectionInfo3 = _slicedToArray(sectionInfo, 1),
        sectionIdKey = _sectionInfo3[0];
    // const { fieldsList } = section;


    var cols = this.createColumn();
    var tableConfig = tableCustomConfig ? tableCustomConfig({ panel: panel, section: section }) : null;
    var source = isEmptyObj(dataSource) ? [] : dataSource[section[sectionIdKey]] || [];
    var tableProps = tableConfig ? tableConfig : {
      props: {
        dataSource: source,
        columns: [].concat(_toConsumableArray(cols)),
        pagination: false,
        rowKey: tableRowKey,
        size: 'small'
      }
    };
    return h(Table, tableProps);
  }
};