ele-admin-plus 1.1.4-beta.3 → 1.1.5-beta.1

package/es/ele-pro-table/components/tool-column.js

@@ -1,50 +1,43 @@
-import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, withModifiers, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, normalizeClass } from "vue";
-import VueDraggable from "vuedraggable";
+import { defineComponent, ref, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { Setting } from "@element-plus/icons-vue";
-import { ElCheckbox, ElCheckboxGroup, ElIcon, ElLink } from "element-plus";
+import { ElCheckbox, ElIcon } from "element-plus";
+import { eachTree } from "../../utils/core";
 import EleTooltip from "../../ele-tooltip/index";
-import ElePopover from "../../ele-popover/index";
-import { HolderOutlined, VerticalRightOutlined, VerticalLeftOutlined } from "../../icons";
 import EleTool from "../../ele-tool/index";
-import { getSettingCols, sortCols, getCheckedColumns, getColsCacheKey } from "../util";
+import { getSettingCols, getCheckedColumns, getColsCacheKey } from "../util";
+import ToolColumnList from "./tool-column-list";
 const _sfc_main = defineComponent({
   name: "ToolColumn",
   components: {
-    VueDraggable,
     ElCheckbox,
-    ElCheckboxGroup,
     ElIcon,
-    ElLink,
     EleTooltip,
-    ElePopover,
     Setting,
-    HolderOutlined,
-    VerticalRightOutlined,
-    VerticalLeftOutlined,
-    EleTool
+    EleTool,
+    ToolColumnList
   },
   props: {
-    // 提示文字
+    /** 提示文字 */
     title: String,
-    // 提示位置
+    /** 提示位置 */
     placement: String,
-    // 全选文字
+    /** 全选文字 */
     checkAllText: String,
-    // 重置文字
+    /** 重置文字 */
     resetText: String,
-    // 无标题列文字
+    /** 无标题列文字 */
     untitledText: String,
-    // 固定在左侧文字
+    /** 固定在左侧文字 */
     fixedLeftText: String,
-    // 固定在右侧文字
+    /** 固定在右侧文字 */
     fixedRightText: String,
-    // 列数据
+    /** 列数据 */
     columns: Array,
-    // 是否开启列拖拽排序
+    /** 是否开启列拖拽排序 */
     sortable: Boolean,
-    // 是否开启开关固定列
+    /** 是否开启开关固定列 */
     allowFixed: Boolean,
-    // 列配置缓存本地的名称
+    /** 列配置缓存本地的名称 */
     cacheKey: String
   },
   emits: {
@@ -52,96 +45,41 @@ const _sfc_main = defineComponent({
   },
   setup(props, { emit }) {
     const data = ref([]);
-    const checkedIds = ref([]);
-    const isChecked = ref(false);
+    const isCheckAll = ref(false);
     const isIndeterminate = ref(false);
     const tooltipContent = ref("");
     const virtualRef = ref();
-    const popperClass = computed(() => {
-      const classes = ["ele-tool-column"];
-      if (props.sortable) {
-        classes.push("is-sortable");
-      }
-      return classes.join(" ");
-    });
-    const updateSortCols = (cols) => {
-      data.value = sortCols(cols);
-      onSortChange();
-    };
-    const onCheckedChange = () => {
-      data.value.forEach((d) => {
-        d.checked = checkedIds.value.includes(d.uid);
-      });
-      isChecked.value = data.value.length > 0 && data.value.length === checkedIds.value.length;
-      isIndeterminate.value = checkedIds.value.length !== 0 && data.value.length !== checkedIds.value.length;
-      const columns = getCheckedColumns(
+    const initData = () => {
+      const cols = getSettingCols(
         props.columns,
-        data.value,
-        checkedIds.value,
-        props.sortable
+        props.untitledText,
+        props.cacheKey
       );
-      cacheSettingCols();
-      emit("update:columns", columns);
-    };
-    const onCheckAllChange = () => {
-      if (isChecked.value) {
-        checkedIds.value = data.value.map((d) => d.uid);
-      } else {
-        checkedIds.value = [];
-      }
-      isIndeterminate.value = false;
-      data.value.forEach((d) => {
-        d.checked = checkedIds.value.includes(d.uid);
+      data.value = cols;
+      let checkAll = true;
+      let indeterminate = false;
+      eachTree(data.value, (d) => {
+        if (!d.checked && checkAll) {
+          checkAll = false;
+        }
+        if (d.checked && !indeterminate) {
+          indeterminate = true;
+        }
+        if (!checkAll && indeterminate) {
+          return false;
+        }
       });
-      const columns = getCheckedColumns(
-        props.columns,
-        data.value,
-        checkedIds.value,
-        props.sortable
-      );
-      cacheSettingCols();
-      emit("update:columns", columns);
+      isCheckAll.value = data.value.length > 0 && checkAll;
+      isIndeterminate.value = !checkAll && indeterminate;
     };
-    const onReset = () => {
-      const result = getSettingCols(props.columns, props.untitledText);
-      data.value = result.data;
-      checkedIds.value = result.checkedIds;
-      isChecked.value = result.isChecked;
-      isIndeterminate.value = result.isIndeterminate;
-      const columns = getCheckedColumns(
-        props.columns,
-        result.data,
-        result.checkedIds,
-        props.sortable
-      );
-      cleanSettingCols();
-      emit("update:columns", columns);
-    };
-    const onSortChange = () => {
+    const updateColumns = () => {
       const columns = getCheckedColumns(
         props.columns,
         data.value,
-        checkedIds.value,
         props.sortable
       );
-      cacheSettingCols();
       emit("update:columns", columns);
     };
-    const onItemFixedLeft = (col) => {
-      const cols = [...data.value];
-      const index = cols.findIndex((c) => c.uid === col.uid);
-      const isFixedLeft = col.fixed === true || col.fixed === "left";
-      cols[index].fixed = isFixedLeft ? false : "left";
-      data.value = sortCols(cols);
-      onSortChange();
-    };
-    const onItemFixedRight = (col) => {
-      const cols = [...data.value];
-      const index = cols.findIndex((c) => c.uid === col.uid);
-      cols[index].fixed = col.fixed === "right" ? false : "right";
-      data.value = sortCols(cols);
-      onSortChange();
-    };
     const cacheSettingCols = () => {
       if (props.cacheKey) {
         localStorage.setItem(
@@ -155,47 +93,107 @@ const _sfc_main = defineComponent({
         localStorage.removeItem(getColsCacheKey(props.cacheKey));
       }
     };
-    const openTooltip = (e, content) => {
-      virtualRef.value = e.currentTarget;
-      tooltipContent.value = content ?? "";
+    const onCheckedChange = (item, checked) => {
+      let checkAll = true;
+      let indeterminate = false;
+      eachTree(data.value, (d) => {
+        if (d.uid === item.uid) {
+          d.checked = checked;
+        }
+        if (!d.checked && checkAll) {
+          checkAll = false;
+        }
+        if (d.checked && !indeterminate) {
+          indeterminate = true;
+        }
+        if (d.uid === item.uid && !checkAll && indeterminate) {
+          return false;
+        }
+      });
+      isCheckAll.value = data.value.length > 0 && checkAll;
+      isIndeterminate.value = !checkAll && indeterminate;
+      cacheSettingCols();
+      updateColumns();
     };
-    watch(
-      () => props.columns,
-      (columns) => {
-        if (!columns) {
-          return;
+    const onCheckAllChange = (checked) => {
+      isCheckAll.value = checked;
+      isIndeterminate.value = false;
+      eachTree(data.value, (d) => {
+        if (d.checked !== checked) {
+          d.checked = checked;
         }
-        const result = getSettingCols(
-          columns,
-          props.untitledText,
-          props.cacheKey
-        );
-        data.value = result.data;
-        checkedIds.value = result.checkedIds;
-        isChecked.value = result.isChecked;
-        isIndeterminate.value = result.isIndeterminate;
-      },
-      {
-        immediate: true,
-        deep: true
+      });
+      cacheSettingCols();
+      updateColumns();
+    };
+    const onReset = () => {
+      cleanSettingCols();
+      initData();
+      updateColumns();
+    };
+    const onSortChange = (colItems, parent) => {
+      if (!parent) {
+        data.value = colItems;
+      } else {
+        eachTree(data.value, (d) => {
+          if (d.uid === parent.uid) {
+            d.children = colItems;
+            return false;
+          }
+        });
       }
+      cacheSettingCols();
+      updateColumns();
+    };
+    const onFixedLeft = (colItem) => {
+      eachTree(data.value, (d) => {
+        if (d.uid === colItem.uid) {
+          d.fixed = d.fixed === true || d.fixed === "left" ? false : "left";
+          return false;
+        }
+      });
+      cacheSettingCols();
+      updateColumns();
+    };
+    const onFixedRight = (colItem) => {
+      eachTree(data.value, (d) => {
+        if (d.uid === colItem.uid) {
+          d.fixed = d.fixed === "right" ? false : "right";
+          return false;
+        }
+      });
+      cacheSettingCols();
+      updateColumns();
+    };
+    const onFixedLeftTooltip = (el) => {
+      virtualRef.value = el;
+      tooltipContent.value = props.fixedLeftText ?? "";
+    };
+    const onFixedRightTooltip = (el) => {
+      virtualRef.value = el;
+      tooltipContent.value = props.fixedRightText ?? "";
+    };
+    watch(
+      [() => props.columns, () => props.untitledText],
+      () => {
+        initData();
+      },
+      { immediate: true, deep: true }
     );
     return {
       data,
-      checkedIds,
-      isChecked,
+      isCheckAll,
       isIndeterminate,
       tooltipContent,
       virtualRef,
-      popperClass,
-      updateSortCols,
       onCheckedChange,
       onCheckAllChange,
       onReset,
       onSortChange,
-      onItemFixedLeft,
-      onItemFixedRight,
-      openTooltip
+      onFixedLeft,
+      onFixedRight,
+      onFixedLeftTooltip,
+      onFixedRightTooltip
     };
   }
 });
@@ -206,29 +204,13 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-tool-column-label" };
-const _hoisted_2 = {
-  key: 0,
-  class: "ele-tool-column-handle"
-};
-const _hoisted_3 = { class: "ele-tool-column-label" };
-const _hoisted_4 = {
-  key: 1,
-  class: "ele-tool-column-fixed"
-};
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = ["onClick"];
+const _hoisted_1 = { class: "ele-tool-column-header" };
+const _hoisted_2 = { class: "ele-tool-column-label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Setting = resolveComponent("Setting");
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ElCheckbox = resolveComponent("ElCheckbox");
-  const _component_ElLink = resolveComponent("ElLink");
-  const _component_HolderOutlined = resolveComponent("HolderOutlined");
-  const _component_VerticalRightOutlined = resolveComponent("VerticalRightOutlined");
-  const _component_VerticalLeftOutlined = resolveComponent("VerticalLeftOutlined");
-  const _component_VueDraggable = resolveComponent("VueDraggable");
-  const _component_ElCheckboxGroup = resolveComponent("ElCheckboxGroup");
-  const _component_ElePopover = resolveComponent("ElePopover");
+  const _component_ToolColumnList = resolveComponent("ToolColumnList");
   const _component_EleTooltip = resolveComponent("EleTooltip");
   const _component_EleTool = resolveComponent("EleTool");
   return openBlock(), createBlock(_component_EleTool, {
@@ -236,140 +218,73 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   }, {
     default: withCtx(() => [
-      createVNode(_component_ElePopover, {
+      createVNode(_component_EleTooltip, {
         trigger: "click",
         placement: "bottom-end",
+        popperClass: "ele-tool-column",
         transition: "el-zoom-in-top",
-        popperClass: _ctx.popperClass,
+        gpuAcceleration: false,
+        effect: "light",
+        isPopover: true,
         popperOptions: {
           modifiers: [{ name: "offset", options: { offset: [20, 10] } }]
         }
       }, {
-        reference: withCtx(() => [
-          createVNode(_component_ElIcon, null, {
-            default: withCtx(() => [
-              createVNode(_component_Setting, { style: { "transform": "scale(1.08)" } })
-            ]),
-            _: 1
-          })
-        ]),
-        default: withCtx(() => [
+        body: withCtx(() => [
           createElementVNode("div", {
-            class: "ele-tool-column-header",
-            onClick: _cache[1] || (_cache[1] = withModifiers(() => {
-            }, ["stop"]))
+            class: normalizeClass(["ele-popover-body", { "is-sortable": _ctx.sortable }])
           }, [
             createElementVNode("div", _hoisted_1, [
-              createVNode(_component_ElCheckbox, {
-                modelValue: _ctx.isChecked,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.isChecked = $event),
-                indeterminate: _ctx.isIndeterminate,
-                onChange: _ctx.onCheckAllChange
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.checkAllText), 1)
-                ]),
-                _: 1
-              }, 8, ["modelValue", "indeterminate", "onChange"])
-            ]),
-            createVNode(_component_ElLink, {
-              type: "primary",
-              underline: false,
-              onClick: _ctx.onReset
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(_ctx.resetText), 1)
+              createElementVNode("div", _hoisted_2, [
+                createVNode(_component_ElCheckbox, {
+                  modelValue: _ctx.isCheckAll,
+                  indeterminate: _ctx.isIndeterminate,
+                  "onUpdate:modelValue": _ctx.onCheckAllChange
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.checkAllText), 1)
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "indeterminate", "onUpdate:modelValue"])
               ]),
-              _: 1
-            }, 8, ["onClick"])
-          ]),
-          createVNode(_component_ElCheckboxGroup, {
-            modelValue: _ctx.checkedIds,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.checkedIds = $event),
-            onChange: _ctx.onCheckedChange
-          }, {
+              createElementVNode("div", {
+                class: "ele-tool-column-link",
+                onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onReset && _ctx.onReset(...args))
+              }, toDisplayString(_ctx.resetText), 1)
+            ]),
+            _ctx.data.length ? (openBlock(), createBlock(_component_ToolColumnList, {
+              key: 0,
+              data: _ctx.data,
+              sortable: _ctx.sortable,
+              allowFixed: _ctx.allowFixed,
+              onSortChange: _ctx.onSortChange,
+              onCheckedChange: _ctx.onCheckedChange,
+              onFixedLeft: _ctx.onFixedLeft,
+              onFixedRight: _ctx.onFixedRight,
+              onFixedLeftTooltip: _ctx.onFixedLeftTooltip,
+              onFixedRightTooltip: _ctx.onFixedRightTooltip
+            }, null, 8, ["data", "sortable", "allowFixed", "onSortChange", "onCheckedChange", "onFixedLeft", "onFixedRight", "onFixedLeftTooltip", "onFixedRightTooltip"])) : createCommentVNode("", true)
+          ], 2),
+          createVNode(_component_EleTooltip, {
+            trigger: "hover",
+            placement: "top",
+            teleported: false,
+            persistent: false,
+            virtualTriggering: true,
+            virtualRef: _ctx.virtualRef,
+            content: _ctx.tooltipContent
+          }, null, 8, ["virtualRef", "content"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_ElIcon, null, {
             default: withCtx(() => [
-              createVNode(_component_VueDraggable, {
-                itemKey: "uid",
-                animation: 300,
-                modelValue: _ctx.data,
-                setData: () => void 0,
-                handle: ".ele-tool-column-handle",
-                componentData: { class: "ele-tool-column-body" },
-                "onUpdate:modelValue": _ctx.updateSortCols
-              }, {
-                item: withCtx(({ element: d }) => [
-                  createElementVNode("div", {
-                    class: "ele-tool-column-item",
-                    onClick: _cache[4] || (_cache[4] = withModifiers(() => {
-                    }, ["stop"]))
-                  }, [
-                    _ctx.sortable ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                      createVNode(_component_ElIcon, null, {
-                        default: withCtx(() => [
-                          createVNode(_component_HolderOutlined)
-                        ]),
-                        _: 1
-                      })
-                    ])) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_3, [
-                      createVNode(_component_ElCheckbox, {
-                        label: d.uid
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(d.label), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["label"])
-                    ]),
-                    _ctx.allowFixed ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                      createElementVNode("div", {
-                        class: normalizeClass([
-                          "ele-tool-fixed-item",
-                          { "is-active": d.fixed === true || d.fixed === "left" }
-                        ]),
-                        onClick: ($event) => _ctx.onItemFixedLeft(d),
-                        onMouseover: _cache[2] || (_cache[2] = (e) => _ctx.openTooltip(e, _ctx.fixedLeftText))
-                      }, [
-                        createVNode(_component_ElIcon, null, {
-                          default: withCtx(() => [
-                            createVNode(_component_VerticalRightOutlined)
-                          ]),
-                          _: 1
-                        })
-                      ], 42, _hoisted_5),
-                      createElementVNode("div", {
-                        class: normalizeClass([
-                          "ele-tool-fixed-item",
-                          { "is-active": d.fixed === "right" }
-                        ]),
-                        onClick: ($event) => _ctx.onItemFixedRight(d),
-                        onMouseover: _cache[3] || (_cache[3] = (e) => _ctx.openTooltip(e, _ctx.fixedRightText))
-                      }, [
-                        createVNode(_component_ElIcon, null, {
-                          default: withCtx(() => [
-                            createVNode(_component_VerticalLeftOutlined)
-                          ]),
-                          _: 1
-                        })
-                      ], 42, _hoisted_6)
-                    ])) : createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["modelValue", "onUpdate:modelValue"])
+              createVNode(_component_Setting, { style: { "transform": "scale(1.08)" } })
             ]),
             _: 1
-          }, 8, ["modelValue", "onChange"])
+          })
         ]),
         _: 1
-      }, 8, ["popperClass"]),
-      createVNode(_component_EleTooltip, {
-        placement: "top",
-        virtualRef: _ctx.virtualRef,
-        content: _ctx.tooltipContent,
-        virtualTriggering: true
-      }, null, 8, ["virtualRef", "content"])
+      })
     ]),
     _: 1
   }, 8, ["title", "placement"]);