@fe6/water-pro/es/classify/src/Classify.js

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

import { Fragment as _Fragment, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, createVNode as _createVNode } 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; }

import _regeneratorRuntime from "@babel/runtime/regenerator";

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; }

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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

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

import { __awaiter } from "tslib";
import { defineComponent, ref, unref, onUpdated, onUnmounted, watchEffect, nextTick, computed } from 'vue';
import Omit from 'omit.js';
import { hasOwn, isUndefined } from '@fe6/shared';
import { LoadingOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { isEmpty } from 'lodash';
import ASelect from '../../select';
import { Option as SelectOption } from '../../vc-select';
import ADivider from '../../divider';
import AModal from '../../modal';
import AButton from '../../button';
import ADrawer from '../../drawer';
import AEmpty from '../../empty';
import Spin from '../../spin';
import { FormPro, useForm } from '../../form-pro';
import { TablePro, TableAction, useTable } from '../../table-pro';
import PRESENTED_IMAGE_SIMPLE from '../../empty/simple';
import useConfigInject from '../../_util/hooks/useConfigInject';
import useFetch from '../../_util/hooks/use-fetch';
import PropTypes from '../../_util/vue-types';
import { useRuleFormItem } from '../../_util/hooks/use-form-item';

var VNodes = function VNodes(_, _ref) {
  var attrs = _ref.attrs;
  return attrs.vnodes;
};

var createDefFormConfig = {
  schemas: [],
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 10
  },
  showResetButton: false,
  showSubmitButton: false
};
export default defineComponent({
  name: 'AClassify',
  props: {
    value: PropTypes.any,
    api: {
      type: Function,
      default: null
    },
    apiParams: PropTypes.object.def({}),
    loopGetOptions: PropTypes.bool,
    filterOption: {
      type: Function,
      default: function _default(inputValue, option) {
        return option.label.includes(inputValue);
      }
    },
    removeApi: {
      type: Function,
      default: null
    },
    removeApiParams: PropTypes.object.def({}),
    removeTip: PropTypes.string,
    removeKey: PropTypes.string.def('id'),
    editApi: {
      type: Function,
      default: null
    },
    editApiParams: PropTypes.object.def({}),
    createFormConfig: PropTypes.object.def({}),
    createApi: {
      type: Function,
      default: null
    },
    showDropdownAdd: PropTypes.bool.def(true),
    showDropdownManger: PropTypes.bool.def(true),
    createApiParams: PropTypes.object.def({}),
    createTitle: PropTypes.string,
    editTitle: PropTypes.string,
    drawerTitle: PropTypes.string,
    drawerWidth: PropTypes.number.def(650),
    drawerZIndex: PropTypes.number.def(1000),
    drawerCreateButtonText: PropTypes.string,
    drawerTableApi: {
      type: Function,
      default: null
    },
    drawerTableApiParams: PropTypes.object.def({}),
    drawerTableColumns: {
      type: [Array],
      default: function _default() {
        return [];
      }
    },
    drawerTableActionWidth: {
      type: Number,
      default: 200
    },
    drawerTableDraggableBtn: PropTypes.bool.def(false),
    showOneFirstSortBtn: {
      type: Function,
      default: function _default(_ref2) {
        var index = _ref2.index;
        return index > 0;
      }
    },
    showOneLastSortBtn: {
      type: Function,
      default: function _default(_ref3, table) {
        var index = _ref3.index;
        return index < table.getDataSource().length - 1;
      }
    },
    showTwoFirstSortBtn: {
      type: Function,
      default: function _default(_ref4) {
        var index = _ref4.index;
        return index > 0;
      }
    },
    showTwoLastSortBtn: {
      type: Function,
      default: function _default(_ref5, table) {
        var index = _ref5.index,
            record = _ref5.record;
        var theParent = table.getDataSource().find(function (_ref6) {
          var id = _ref6.id;
          return id === record.parentId;
        });
        return theParent && index < theParent.children.length - 1;
      }
    },
    drawerTableDraggable: PropTypes.bool.def(false),
    drawerTableDragKey: PropTypes.string.def('id'),
    drawerTableDragApi: {
      type: Function,
      default: null
    },
    selectOptions: PropTypes.array,
    labelKey: PropTypes.string.def('label'),
    subLabelKey: PropTypes.string.def('subLabel'),
    valueKey: PropTypes.string.def('value'),
    subClassify: PropTypes.bool.def(false),
    createSubFormConfig: PropTypes.object.def({}),
    parentIdLabel: PropTypes.string.def('parentId'),
    isOneClassify: {
      type: Function,
      default: function _default(_ref7) {
        var record = _ref7.record;
        return record.parentId === 0;
      }
    }
  },
  emits: ['on-edit', 'on-remove'],
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('classify', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

    var _useRuleFormItem = useRuleFormItem(props),
        _useRuleFormItem2 = _slicedToArray(_useRuleFormItem, 1),
        state = _useRuleFormItem2[0];

    var _useFetch = useFetch(props.api),
        fetch = _useFetch.fetch;

    var _useForm = useForm(),
        _useForm2 = _slicedToArray(_useForm, 2),
        formRegister = _useForm2[0],
        formMethods = _useForm2[1];

    var loading = ref(false);
    var options = ref([]);

    var getOptionDatas = function getOptionDatas() {
      if (!loading.value && props.api) {
        loading.value = true;

        try {
          fetch({
            success: function success(res) {
              loading.value = false;
              options.value = res;
            },
            error: function error() {
              loading.value = false;
            },
            params: props.apiParams
          });
        } catch (err) {
          loading.value = false;
        }
      }
    };

    var getOptionsTime = ref(1);

    var dropdownVisibleChange = function dropdownVisibleChange(dropDownIsOpen) {
      if (dropDownIsOpen && !unref(options).length && getOptionsTime.value < 2 && !props.loopGetOptions) {
        getOptionsTime.value += props.loopGetOptions ? 0 : 1;
        getOptionDatas();
      }
    };

    var resetAjaxApi = function resetAjaxApi() {
      getOptionsTime.value = 1;
      options.value = [];
    };

    var isEdit = ref(-1);
    var createModalStatus = ref(false);
    var createLoading = ref(false);

    var _useFetch2 = useFetch(props.createApi),
        createFecth = _useFetch2.fetch;

    var _useFetch3 = useFetch(props.editApi),
        editFecth = _useFetch3.fetch;

    var removeLoadingId = ref('');

    var _useFetch4 = useFetch(props.removeApi),
        removeFecth = _useFetch4.fetch;

    var classifyLang = computed(function () {
      var _a;

      return (_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.Classify;
    });
    var dragOtions = {};

    if (props.subClassify) {
      dragOtions.filter = '.ant-table-row-level-0';
    }

    var _useTable = useTable({
      draggable: props.drawerTableDraggable,
      canResize: true,
      pagination: false,
      dataSource: [],
      dragOtions: dragOtions,
      columns: [].concat(_toConsumableArray(props.drawerTableColumns), [{
        dataIndex: 'action',
        key: 'action',
        width: props.drawerTableActionWidth,
        slots: {
          customRender: 'action',
          title: 'actionTitle'
        }
      }])
    }),
        _useTable2 = _slicedToArray(_useTable, 2),
        tableRegister = _useTable2[0],
        tableMethods = _useTable2[1];

    var drawerStatus = ref(false);
    var drawerLoading = ref(false);

    var _useFetch5 = useFetch(props.drawerTableApi),
        drawerFecth = _useFetch5.fetch;

    var _useFetch6 = useFetch(props.drawerTableDragApi),
        drawerDragFecth = _useFetch6.fetch; // 子级拖拽返回的数据


    var drawerOneDatas = ref([]);

    var toOneForChildren = function toOneForChildren() {
      tableDatas.value.forEach(function (theItem) {
        drawerOneDatas.value.push(theItem);

        if (theItem.children && theItem.children.length > 0) {
          theItem.children.forEach(function (theChild) {
            drawerOneDatas.value.push(theChild);
          });
        }
      });
    };

    var tableDatas = ref([]);

    var getTableDatas = function getTableDatas() {
      if (!drawerLoading.value) {
        drawerLoading.value = true;

        try {
          drawerFecth({
            success: function success(res) {
              tableDatas.value = res;

              if (props.subClassify) {
                toOneForChildren();
              }

              tableMethods.setTableData(res);
              drawerLoading.value = false;
            },
            error: function error() {
              drawerLoading.value = false;
            },
            params: props.drawerTableApiParams
          });
        } catch (err) {
          drawerLoading.value = false;
        }
      }
    };

    var dragIdsWithPid = function dragIdsWithPid(dragIdList) {
      var idsWithPid = [];
      dragIdList.forEach(function (theId) {
        var theItem = drawerOneDatas.value.find(function (dItem) {
          return dItem.id === theId;
        });

        if (theItem) {
          var _idsWithPid$push;

          idsWithPid.push((_idsWithPid$push = {}, _defineProperty(_idsWithPid$push, props.parentIdLabel, theItem[props.parentIdLabel] || 0), _defineProperty(_idsWithPid$push, "id", theId), _idsWithPid$push));
        }
      });
      return idsWithPid;
    };

    var tableDragDatas = function tableDragDatas(dragIdList) {
      if (!drawerLoading.value) {
        drawerLoading.value = true;

        try {
          drawerDragFecth({
            success: function success() {
              drawerLoading.value = false;
            },
            error: function error() {
              drawerLoading.value = false;
            },
            params: props.subClassify ? {
              dragIdList: dragIdList,
              drawerOneDatas: drawerOneDatas.value,
              idsWithPid: dragIdsWithPid(dragIdList)
            } : dragIdList
          });
        } catch (err) {
          drawerLoading.value = false;
        }
      }
    };

    var apiValue = ref('');
    watchEffect(function () {
      apiValue.value = state.value || props.value;

      if (props.selectOptions) {
        options.value = props.selectOptions;
      }

      if (!isUndefined(apiValue.value) && String(apiValue.value).length > 0 && !loading.value && !options.value.length) {
        getOptionDatas();
      }
    });
    onUpdated(function () {
      if (!unref(options).length) {
        getOptionsTime.value = 0;
      }
    });
    onUnmounted(function () {
      getOptionsTime.value = 0;
    });
    return {
      prefixClsNew: prefixClsNew,
      dropdownVisibleChange: dropdownVisibleChange,
      resetAjaxApi: resetAjaxApi,
      loading: loading,
      options: options,
      apiValue: apiValue,
      createModalStatus: createModalStatus,
      formRegister: formRegister,
      formMethods: formMethods,
      createFecth: createFecth,
      isEdit: isEdit,
      editFecth: editFecth,
      removeFecth: removeFecth,
      removeLoadingId: removeLoadingId,
      createLoading: createLoading,
      drawerStatus: drawerStatus,
      drawerLoading: drawerLoading,
      getTableDatas: getTableDatas,
      tableDragDatas: tableDragDatas,
      tableDatas: tableDatas,
      tableRegister: tableRegister,
      tableMethods: tableMethods,
      getOptionDatas: getOptionDatas,
      classifyLang: classifyLang,
      drawerOneDatas: drawerOneDatas
    };
  },
  methods: {
    handleCreateModalStatus: function handleCreateModalStatus(isTheOne) {
      return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                this.createModalStatus = !this.createModalStatus;
                _context.next = 3;
                return nextTick();

              case 3:
                if (this.createModalStatus && (!isEmpty(this.createFormConfig) || !isEmpty(this.createSubFormConfig))) {
                  // FIX Object.assign 用 merge 一二级编辑切换的时候表单字段不会更新
                  this.formMethods.setProps(_extends(createDefFormConfig, isTheOne ? this.createFormConfig : this.createSubFormConfig));
                }

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));
    },
    createOk: function createOk() {
      return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var _this = this;

        var thePass, myFormData, params;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                if (this.createLoading) {
                  _context3.next = 11;
                  break;
                }

                _context3.next = 3;
                return this.formMethods.validateFields();

              case 3:
                thePass = _context3.sent;

                if (!thePass) {
                  _context3.next = 11;
                  break;
                }

                _context3.next = 7;
                return this.formMethods.getFieldsValue();

              case 7:
                myFormData = _context3.sent;
                this.createLoading = true;
                params = this.isEdit > -1 ? _extends(_extends(_extends({}, myFormData), {
                  id: this.isEdit
                }), this.editApiParams) : _extends(_extends({}, myFormData), this.createApiParams);
                this[this.isEdit > -1 ? 'editFecth' : 'createFecth']({
                  success: function success() {
                    return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
                      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
                        while (1) {
                          switch (_context2.prev = _context2.next) {
                            case 0:
                              this.createLoading = false;
                              this.resetAjaxApi();

                              if (this.drawerStatus) {
                                this.getTableDatas();
                              }

                              _context2.next = 5;
                              return this.createCandel();

                            case 5:
                              this.getOptionDatas();
                              this.$emit('on-edit', this.isEdit);

                            case 7:
                            case "end":
                              return _context2.stop();
                          }
                        }
                      }, _callee2, this);
                    }));
                  },
                  error: function error() {
                    _this.createLoading = false;
                  },
                  params: params
                });

              case 11:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));
    },
    createCandel: function createCandel() {
      return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                _context4.next = 2;
                return this.formMethods.resetFields();

              case 2:
                this.handleCreateModalStatus();
                this.isEdit = -1;

              case 4:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));
    },
    handleDrawerStatus: function handleDrawerStatus() {
      this.drawerStatus = !this.drawerStatus;

      if (this.drawerStatus) {
        this.getTableDatas();
      }
    },
    handleDelete: function handleDelete(removeData) {
      var _this2 = this;

      if (this.removeTip && !this.removeLoadingId) {
        this.removeLoadingId = removeData[this.removeKey];
        AModal.confirm({
          title: this.removeTip,
          okText: '确定',
          cancelText: '取消',
          onOk: function onOk() {
            _this2.removeFecth({
              success: function success() {
                return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
                  return _regeneratorRuntime.wrap(function _callee5$(_context5) {
                    while (1) {
                      switch (_context5.prev = _context5.next) {
                        case 0:
                          this.removeLoadingId = '';
                          this.resetAjaxApi();
                          this.getTableDatas();
                          this.getOptionDatas();
                          this.$emit('on-remove');

                        case 5:
                        case "end":
                          return _context5.stop();
                      }
                    }
                  }, _callee5, this);
                }));
              },
              error: function error() {
                _this2.removeLoadingId = '';
              },
              params: _extends(_defineProperty({}, _this2.removeKey, [_this2.removeLoadingId]), _this2.removeApiParams)
            });
          },
          onCancel: function onCancel() {
            _this2.removeLoadingId = '';
          }
        });
      }
    },
    handleEdit: function handleEdit(editData, isSub, isEdit) {
      return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
          while (1) {
            switch (_context6.prev = _context6.next) {
              case 0:
                this.handleCreateModalStatus(isSub);
                _context6.next = 3;
                return nextTick();

              case 3:
                if (!(!isSub && !isEdit)) {
                  _context6.next = 6;
                  break;
                }

                _context6.next = 6;
                return this.formMethods.setFieldsValue(_defineProperty({}, this.parentIdLabel, editData.id));

              case 6:
                if (isEdit) {
                  this.isEdit = editData.id;
                  this.formMethods.setFieldsValue(editData);
                }

              case 7:
              case "end":
                return _context6.stop();
            }
          }
        }, _callee6, this);
      }));
    },
    tableDragEnd: function tableDragEnd(oldNum, newNum) {
      var _this3 = this;

      var dragList = (this.subClassify ? this.drawerOneDatas : this.tableDatas).map(function (tdItem) {
        return tdItem[_this3.drawerTableDragKey];
      });

      if (oldNum > newNum) {
        dragList.splice(newNum, 0, dragList[oldNum]);
        dragList.splice(oldNum + 1, 1);
      } else {
        dragList.splice(newNum + 1, 0, dragList[oldNum]);
        dragList.splice(oldNum, 1);
      }

      this.tableDragDatas(dragList);
    }
  },
  render: function render() {
    var _this4 = this;

    var _a, _b, _c, _d, _e, _f, _g;

    var selectSlot = {
      notFoundContent: function notFoundContent() {
        return notFoundNode;
      }
    };
    var notFoundNode = null;

    if (this.loading) {
      var emptySlots = {
        image: function image() {
          return _createVNode(LoadingOutlined, {
            "style": "font-size: 30px"
          }, null);
        }
      };
      notFoundNode = _createVNode("div", null, [_createVNode(AEmpty, {
        "description": ((_a = this.classifyLang) === null || _a === void 0 ? void 0 : _a.loading) || '正在加载'
      }, emptySlots)]);
    } else {
      var _emptySlots = {
        image: function image() {
          return _createVNode(PRESENTED_IMAGE_SIMPLE, null, null);
        }
      };
      notFoundNode = _createVNode("div", null, [_createVNode(AEmpty, {
        "s": _emptySlots
      }, null)]);
    }

    var createIconNode = this.createLoading ? _createVNode(LoadingOutlined, null, null) : _createVNode(PlusOutlined, null, null);
    var drawerIconNode = this.drawerLoading ? _createVNode(LoadingOutlined, null, null) : _createVNode(EditOutlined, null, null);

    var dropdownRender = function dropdownRender(_ref8) {
      var menuNode = _ref8.menuNode;

      var _a, _b, _c, _d;

      var addNode;

      if (_this4.showDropdownAdd) {
        addNode = _createVNode(AButton, {
          "size": "small",
          "type": "link",
          "onClick": function onClick() {
            return _this4.handleCreateModalStatus(true);
          }
        }, {
          default: function _default() {
            return [createIconNode, _createTextVNode(" "), ((_a = _this4.classifyLang) === null || _a === void 0 ? void 0 : _a.dropdownAdd) || '添加'];
          }
        });
      }

      var theOptBtnSlot = _this4.$slots.optionButtonSlot ? (_c = (_b = _this4.$slots).optionButtonSlot) === null || _c === void 0 ? void 0 : _c.call(_b, {
        loading: _this4.loading
      }) : null;
      var mangeNode;

      if (_this4.showDropdownManger) {
        mangeNode = _createVNode(AButton, {
          "size": "small",
          "type": "link",
          "onClick": _this4.handleDrawerStatus
        }, {
          default: function _default() {
            return [drawerIconNode, _createTextVNode(" "), ((_d = _this4.classifyLang) === null || _d === void 0 ? void 0 : _d.dropdownHandle) || '管理'];
          }
        });
      }

      return _createVNode("div", null, [_createVNode(VNodes, {
        "vnodes": menuNode
      }, null), _createVNode(ADivider, {
        "style": {
          margin: '4px 0'
        }
      }, null), _createVNode("div", {
        "style": "text-align: right;"
      }, [addNode, mangeNode, theOptBtnSlot])]);
    };

    selectSlot.dropdownRender = dropdownRender;
    var optNodes = [];
    var optChilds = this.options.filter(function (oItem) {
      return hasOwn(oItem, 'children') && oItem.children.length > 0;
    });

    if (optChilds.length) {
      optChilds.forEach(function (oItem, oIdx) {
        var ocNode = [];
        oItem.children.forEach(function (ocItem, ocIdx) {
          var childInner = ocItem[_this4.labelKey]; // FIX： 在项目中选中之后会出现死循环
          // if (this.subLabelKey) {
          //   childInner = (
          //     <div key={`${oIdx}-${ocIdx}-box`}>
          //       <div key={`${oIdx}-${ocIdx}-label`}>{ocItem[this.labelKey]}</div>
          //       <APypography.Text key={`${oIdx}-${ocIdx}-text`} type="secondary" size="small">
          //         {ocItem[this.subLabelKey]}
          //       </APypography.Text>
          //     </div>
          //   );
          // }

          ocNode.push(_createVNode(ASelect.Option, {
            "key": "".concat(oIdx, "-").concat(ocIdx, "-opts"),
            "value": ocItem[_this4.valueKey]
          }, {
            default: function _default() {
              return [childInner];
            }
          }));
        });
        optNodes.push(_createVNode(ASelect.OptGroup, {
          "label": oItem[_this4.labelKey],
          "key": oIdx
        }, {
          default: function _default() {
            return ocNode;
          }
        }));
      });
    } else {
      this.options.forEach(function (oItem, oIdx) {
        var childInner = oItem[_this4.labelKey]; // FIX： 在项目中选中之后会出现死循环
        // if (this.subLabelKey) {
        //   childInner = (
        //     <div key={`${oIdx}-box`}>
        //       <div key={`${oIdx}-inner`}>{oItem[this.labelKey]}</div>
        //       <APypography.Text key={`${oIdx}-text`} type="secondary" size="small">
        //         {oItem[this.subLabelKey]}
        //       </APypography.Text>
        //     </div>
        //   );
        // }

        optNodes.push(_createVNode(SelectOption, {
          "key": oIdx,
          "value": oItem[_this4.valueKey]
        }, {
          default: function _default() {
            return [childInner];
          }
        }));
      });
    }

    selectSlot.default = function () {
      return optNodes;
    };

    var tableActionNode = function tableActionNode(params) {
      var _a, _b, _c, _d, _e;

      var record = params.record;
      var oneAction = [{
        label: ((_a = _this4.classifyLang) === null || _a === void 0 ? void 0 : _a.editTitle) || '编辑',
        onClick: function onClick() {
          return _this4.handleEdit(record, true, true);
        }
      }, {
        label: ((_b = _this4.classifyLang) === null || _b === void 0 ? void 0 : _b.remove) || '删除',
        color: 'danger',
        loading: _this4.removeLoadingId === record[_this4.removeKey],
        onClick: function onClick() {
          return _this4.handleDelete(record);
        }
      }];
      var twoAction = [{
        label: ((_c = _this4.classifyLang) === null || _c === void 0 ? void 0 : _c.editTitle) || '编辑',
        onClick: function onClick() {
          return _this4.handleEdit(record, false, true);
        }
      }, {
        label: ((_d = _this4.classifyLang) === null || _d === void 0 ? void 0 : _d.remove) || '删除',
        color: 'danger',
        loading: _this4.removeLoadingId === record[_this4.removeKey],
        onClick: function onClick() {
          return _this4.handleDelete(record);
        }
      }];
      var addSub = {
        label: ((_e = _this4.classifyLang) === null || _e === void 0 ? void 0 : _e.editSubTitle) || '新增二级',
        onClick: function onClick() {
          return _this4.handleEdit(record, false, false);
        }
      };
      var upOneSub = {
        label: '上移',
        onClick: function onClick() {
          _this4.$emit('up-sort', params, _this4.tableMethods);
        }
      };
      var downOneSub = {
        label: '下移',
        onClick: function onClick() {
          _this4.$emit('down-sort', params, _this4.tableMethods);
        }
      }; // 是分组的
      // 不是全部的一级
      // 是一级分类
      // 数据包括全部大于2

      var theAllDatas = _this4.tableMethods.getDataSource();

      if (_this4.subClassify && _this4.isOneClassify(params)) {
        // 如果是按钮排序，并不是全部
        if (_this4.drawerTableDraggableBtn && theAllDatas.length > 1) {
          if (!_this4.showOneFirstSortBtn(params, _this4.tableMethods)) {
            oneAction.splice(1, 0, downOneSub);
          } else if (!_this4.showOneLastSortBtn(params, _this4.tableMethods)) {
            oneAction.splice(1, 0, upOneSub);
          } else {
            oneAction.splice(1, 0, downOneSub);
            oneAction.splice(1, 0, upOneSub);
          }
        }

        oneAction.splice(1, 0, addSub);
      }

      if (_this4.subClassify && _this4.drawerTableDraggableBtn && !_this4.isOneClassify(params)) {
        var theParent = _this4.tableMethods.getDataSource().find(function (_ref9) {
          var id = _ref9.id;
          return id === params.record.parentId;
        });

        if (theParent.children.length > 1) {
          if (!_this4.showTwoFirstSortBtn(params, _this4.tableMethods)) {
            twoAction.splice(1, 0, downOneSub);
          } else if (!_this4.showTwoLastSortBtn(params, _this4.tableMethods)) {
            twoAction.splice(1, 0, upOneSub);
          } else {
            twoAction.splice(1, 0, downOneSub);
            twoAction.splice(1, 0, upOneSub);
          }
        }
      }

      return _this4.subClassify ? _createVNode(TableAction, {
        "actions": _this4.isOneClassify(params) ? oneAction : twoAction
      }, null) : _createVNode(TableAction, {
        "actions": oneAction
      }, null);
    };

    var tableTitleActionNode = function tableTitleActionNode() {
      var _a;

      return ((_a = _this4.classifyLang) === null || _a === void 0 ? void 0 : _a.action) || '操作';
    };

    return _createVNode(_Fragment, null, [_createVNode(ASelect, _objectSpread(_objectSpread({}, Omit(this.$attrs, ['onUpdate:value'])), {}, {
      "value": this.apiValue,
      "loading": this.loading,
      "virtual": true,
      "class": "".concat(this.prefixClsNew, "-select"),
      "filter-option": this.filterOption,
      "onDropdownVisibleChange": this.dropdownVisibleChange
    }), selectSlot), _createVNode(AModal, {
      "visible": this.createModalStatus,
      "centered": true,
      "cancel-text": ((_b = this.classifyLang) === null || _b === void 0 ? void 0 : _b.cancelText) || '取消',
      "ok-text": ((_c = this.classifyLang) === null || _c === void 0 ? void 0 : _c.okText) || '确定',
      "mask-closable": false,
      "z-index": 1002,
      "title": this.isEdit > -1 ? ((_d = this.classifyLang) === null || _d === void 0 ? void 0 : _d.editTitle) || '编辑' : ((_e = this.classifyLang) === null || _e === void 0 ? void 0 : _e.createTitle) || '添加',
      "okButtonProps": {
        loading: this.createLoading
      },
      "onOk": this.createOk,
      "onCancel": this.createCandel
    }, {
      default: function _default() {
        return [_createVNode(FormPro, {
          "onRegister": _this4.formRegister
        }, null)];
      }
    }), _createVNode(ADrawer, {
      "visible": this.drawerStatus,
      "centered": true,
      "title": ((_f = this.classifyLang) === null || _f === void 0 ? void 0 : _f.drawerTitle) || '管理',
      "width": this.drawerWidth,
      "onClose": this.handleDrawerStatus,
      "placement": "right",
      "zIndex": this.drawerZIndex,
      "wrapClassName": "".concat(this.prefixClsNew, "-drawer").concat(this.drawerTableDraggable ? " ".concat(this.prefixClsNew, "-drawer-drag") : '')
    }, {
      default: function _default() {
        return [_createVNode(AButton, {
          "block": true,
          "onClick": function onClick() {
            return _this4.handleCreateModalStatus(true);
          }
        }, {
          default: function _default() {
            return [_createVNode(PlusOutlined, null, null), _createTextVNode(" "), _this4.drawerCreateButtonText || ((_g = _this4.classifyLang) === null || _g === void 0 ? void 0 : _g.drawerCreateButtonText) || '添加'];
          }
        }), _createVNode(Spin, {
          "spinning": _this4.drawerLoading
        }, {
          default: function _default() {
            return [_createVNode(TablePro, {
              "class": _this4.subClassify && _this4.drawerTableDraggable ? 'a-table-pro--drag-sub' : '',
              "onRegister": _this4.tableRegister,
              "onDragEnd": _this4.tableDragEnd
            }, _extends({
              action: tableActionNode,
              actionTitle: tableTitleActionNode
            }, _this4.$slots))];
          }
        })];
      }
    })]);
  }
});