@fe6/water-pro/es/table-pro/src/components/settings/column-setting.js

An enterprise-class UI design language and Vue-based implementation

import { resolveDirective as _resolveDirective, resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { defineComponent, ref, reactive, toRefs, watchEffect, nextTick, unref, computed } from 'vue';
import { SettingOutlined, DragOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { isUndefined, isNull } from '@fe6/shared';
import { default as Popover } from '../../../../popover';
import { default as Checkbox } from '../../../../checkbox';
import { default as Divider } from '../../../../divider';
import { default as Button } from '../../../../button';
import ContainerScroll from '../../../../container-scroll/container-scroll';
import Tooltip from '../../../../tooltip';
import useConfigInject from '../../../../_util/hooks/useConfigInject';
import { getPopupContainer } from '../../../../_util/dom';
import { useSortable } from '../../../../_util/hooks/use-sortable';
import { useTableContext } from '../../hooks/use-table-context';
export default defineComponent({
  name: 'ColumnSetting',
  components: _defineProperty({
    SettingOutlined: SettingOutlined,
    DragOutlined: DragOutlined,
    ContainerScroll: ContainerScroll,
    Divider: Divider,
    LeftOutlined: LeftOutlined,
    RightOutlined: RightOutlined
  }, Button.name, Button),
  props: {
    prefixCls: String
  },
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('table-pro-basic-column-setting', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var table = useTableContext();
    var defaultRowSelection = table.getRowSelection();
    var inited = false;
    var cachePlainOptions = ref([]);
    var plainOptions = ref([]);
    var plainSortOptions = ref([]);
    var columnListRef = ref(null);
    var state = reactive({
      indeterminate: false,
      checkAll: true,
      checkedList: [],
      defaultCheckList: []
    });
    var checkIndex = ref(false);
    var checkSelect = ref(false);
    var getValues = computed(function () {
      return unref(table === null || table === void 0 ? void 0 : table.getBindValues) || {};
    });
    watchEffect(function () {
      var columns = table.getColumns();

      if (columns.length) {
        init();
      }
    });
    watchEffect(function () {
      var values = unref(getValues);
      checkIndex.value = !!values.showIndexColumn;
      checkSelect.value = !!values.rowSelection;
    });

    function getColumns() {
      var ret = [];
      table.getColumns({
        ignoreIndex: true,
        ignoreAction: true
      }).forEach(function (item) {
        ret.push(_extends({
          label: item.title || item.customTitle,
          value: item.dataIndex || item.title
        }, item));
      });
      return ret;
    }

    function init() {
      var columns = getColumns();
      var checkList = table.getColumns().map(function (item) {
        if (item.defaultHidden) {
          return '';
        }

        return item.dataIndex || item.title;
      }).filter(Boolean);

      if (!plainOptions.value.length) {
        plainOptions.value = columns;
        plainSortOptions.value = columns;
        cachePlainOptions.value = columns;
        state.defaultCheckList = checkList;
      } else {
        // const fixedColumns = columns.filter((item) =>
        //   Reflect.has(item, 'fixed')
        // ) as BasicColumn[];
        unref(plainOptions).forEach(function (item) {
          var findItem = columns.find(function (col) {
            return col.dataIndex === item.dataIndex;
          });

          if (findItem) {
            item.fixed = findItem.fixed;
          }
        });
      }

      state.checkedList = checkList;
    } // checkAll change


    function onCheckAllChange(e) {
      state.indeterminate = false;
      var checkList = plainOptions.value.map(function (item) {
        return item.value;
      });

      if (e.target.checked) {
        state.checkedList = checkList;
        table.setColumns(checkList);
      } else {
        state.checkedList = [];
        table.setColumns([]);
      }
    } // Trigger when check/uncheck a column


    function onChange(checkedList) {
      var len = plainOptions.value.length;
      state.indeterminate = !!checkedList.length && checkedList.length < len;
      state.checkAll = checkedList.length === len;
      var sortList = unref(plainSortOptions).map(function (item) {
        return item.value;
      });
      checkedList.sort(function (prev, next) {
        return sortList.indexOf(prev) - sortList.indexOf(next);
      });
      table.setColumns(checkedList);
    } // reset columns


    function reset() {
      state.checkedList = _toConsumableArray(state.defaultCheckList);
      state.checkAll = true;
      state.indeterminate = false;
      plainOptions.value = unref(cachePlainOptions);
      plainSortOptions.value = unref(cachePlainOptions);
      table.setColumns(table.getCacheColumns());
    } // Open the pop-up window for drag and drop initialization


    function handleVisibleChange() {
      if (inited) {
        return;
      }

      nextTick(function () {
        var columnListEl = unref(columnListRef);

        if (!columnListEl) {
          return;
        }

        var el = columnListEl.$el;

        if (!el) {
          return;
        } // Drag and drop sort


        var _useSortable = useSortable(el, {
          handle: ".".concat(prefixClsNew.value, "-coulmn-drag-icon"),
          onEnd: function onEnd(evt) {
            var oldIndex = evt.oldIndex,
                newIndex = evt.newIndex;

            if (isUndefined(oldIndex) && isNull(oldIndex) || isUndefined(newIndex) && isNull(newIndex) || oldIndex === newIndex) {
              return;
            } // Sort column


            // Sort column
            var columns = getColumns();
            var oldIndexNumber = oldIndex;
            var newIndexNumber = newIndex;

            if (oldIndexNumber > newIndexNumber) {
              columns.splice(newIndexNumber, 0, columns[oldIndexNumber]);
              columns.splice(oldIndexNumber + 1, 1);
            } else {
              columns.splice(newIndexNumber + 1, 0, columns[oldIndexNumber]);
              columns.splice(oldIndexNumber, 1);
            }

            plainSortOptions.value = columns;
            plainOptions.value = columns;
            table.setColumns(columns);
          }
        }),
            initSortable = _useSortable.initSortable;

        initSortable();
        inited = true;
      });
    } // Control whether the serial number column is displayed


    function handleIndexCheckChange(e) {
      table.setProps({
        showIndexColumn: e.target.checked
      });
    } // Control whether the check box is displayed


    function handleSelectCheckChange(e) {
      table.setProps({
        rowSelection: e.target.checked ? defaultRowSelection : undefined
      });
    }

    function handleColumnFixed(item, fixed) {
      var _a;

      if (!state.checkedList.includes(item.dataIndex)) {
        return;
      }

      var columns = getColumns();
      var isFixed = item.fixed === fixed ? false : fixed;
      var index = columns.findIndex(function (col) {
        return col.dataIndex === item.dataIndex;
      });

      if (index !== -1) {
        columns[index].fixed = isFixed;
      }

      item.fixed = isFixed;

      if (isFixed && !item.width) {
        item.width = 100;
      }

      (_a = table.setCacheColumnsByField) === null || _a === void 0 ? void 0 : _a.call(table, item.dataIndex, {
        fixed: isFixed
      });
      table.setColumns(columns);
    }

    return _extends(_extends({}, toRefs(state)), {
      onCheckAllChange: onCheckAllChange,
      onChange: onChange,
      plainOptions: plainOptions,
      reset: reset,
      prefixClsNew: prefixClsNew,
      columnListRef: columnListRef,
      handleVisibleChange: handleVisibleChange,
      checkIndex: checkIndex,
      checkSelect: checkSelect,
      handleIndexCheckChange: handleIndexCheckChange,
      handleSelectCheckChange: handleSelectCheckChange,
      defaultRowSelection: defaultRowSelection,
      handleColumnFixed: handleColumnFixed,
      getPopupContainer: getPopupContainer
    });
  },
  render: function render() {
    var _this = this;

    var popoverTitleNode = _createVNode("div", {
      "class": "".concat(this.prefixClsNew, "__popover-title")
    }, [_createVNode(Checkbox, {
      "checked": this.checkAll,
      "indeterminate": this.indeterminate,
      "onChange": this.onCheckAllChange
    }, {
      default: function _default() {
        return [_createTextVNode("\u5217\u5C55\u793A")];
      }
    }), _createVNode(Checkbox, {
      "checked": this.checkIndex,
      "onChange": this.handleIndexCheckChange
    }, {
      default: function _default() {
        return [_createTextVNode("\u5E8F\u53F7\u5217")];
      }
    }), _createVNode(Checkbox, {
      "checked": this.checkSelect,
      "disabled": !this.defaultRowSelection,
      "onChange": this.handleSelectCheckChange
    }, {
      default: function _default() {
        return [_createTextVNode("\u52FE\u9009\u5217")];
      }
    }), _createVNode(_resolveComponent("a-button"), {
      "size": "small",
      "type": "link",
      "onClick": this.reset
    }, {
      default: function _default() {
        return [' ', _createTextVNode("\u91CD\u7F6E"), ' '];
      }
    })]);

    var popoverCheckNodes = [];
    var popoverCheckToolTipLeftSlot = {
      title: function title() {
        return '固定到左侧';
      }
    };
    var popoverCheckToolTipRightSlot = {
      title: function title() {
        return '固定到右侧';
      }
    };
    this.plainOptions.forEach(function (item) {
      var pItemNode = _createVNode("div", {
        "class": "".concat(_this.prefixClsNew, "__check-item")
      }, [_createVNode(DragOutlined, {
        "class": "".concat(_this.prefixClsNew, "-coulmn-drag-icon")
      }, null), _createVNode(Checkbox, {
        "value": item.value,
        "disabled": item.label === 'Action'
      }, {
        default: function _default() {
          return [item.label];
        }
      }), _createVNode(Tooltip, {
        "placement": "bottomLeft",
        "mouse-leave-delay": 0.4
      }, _objectSpread({
        default: function _default() {
          return [_createVNode(LeftOutlined, {
            "icon": "line-md:arrow-align-left",
            "class": ["".concat(_this.prefixClsNew, "__fixed-left"), {
              active: item.fixed === 'left',
              disabled: !_this.checkedList.includes(item.value)
            }],
            "onClick": function onClick() {
              return _this.handleColumnFixed(item, 'left');
            }
          }, null)];
        }
      }, popoverCheckToolTipLeftSlot)), _createVNode(Divider, {
        "type": "vertical"
      }, null), _createVNode(Tooltip, {
        "placement": "bottomLeft",
        "mouse-leave-delay": 0.4
      }, _objectSpread({
        default: function _default() {
          return [_createVNode(RightOutlined, {
            "class": ["".concat(_this.prefixClsNew, "__fixed-right"), {
              active: item.fixed === 'right',
              disabled: !_this.checkedList.includes(item.value)
            }],
            "onClick": function onClick() {
              return _this.handleColumnFixed(item, 'right');
            }
          }, null)];
        }
      }, popoverCheckToolTipRightSlot))]);

      popoverCheckNodes.push(pItemNode);
    });

    var popoverContentNode = _createVNode(ContainerScroll, null, {
      default: function _default() {
        return [_createVNode(Checkbox.Group, {
          "ref": "columnListRef",
          "value": _this.checkedList,
          "onChange": _this.onChange
        }, {
          default: function _default() {
            return [popoverCheckNodes];
          }
        })];
      }
    });

    var popoverSlot = {
      title: function title() {
        return popoverTitleNode;
      },
      content: function content() {
        return popoverContentNode;
      },
      default: function _default() {
        return _createVNode(SettingOutlined, null, null);
      }
    };

    var toolTipDefaultNode = _createVNode(Popover, {
      "placement": "bottomLeft",
      "trigger": "click",
      "overlay-class-name": "".concat(this.prefixClsNew, "__cloumn-list"),
      "onVisibleChange": this.handleVisibleChange
    }, popoverSlot);

    var toolTipSlot = {
      title: function title() {
        return _createVNode("span", null, [_createTextVNode("\u5217\u8BBE\u7F6E")]);
      },
      default: function _default() {
        return toolTipDefaultNode;
      }
    };
    return _createVNode(Tooltip, {
      "placement": "top"
    }, toolTipSlot);
  }
});