@ctzy-web-client/plugin-component-vue 1.0.22 → 1.0.24

package/es/datatable-settings/datatable-settings.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, useAttrs, ref, computed, unref, getCurrentScope, onScopeDispose, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, createTextVNode, createElementBlock, createVNode, createCommentVNode, toDisplayString, withModifiers, Fragment, renderList, renderSlot } from 'vue';
+import { useAttrs, ref, watch, computed, unref, getCurrentScope, onScopeDispose, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, createTextVNode, createElementBlock, createVNode, createCommentVNode, toDisplayString, withModifiers, Fragment, renderList, renderSlot } from 'vue';
 import { ElTooltip, ElIcon, ElScrollbar, ElSwitch } from 'element-plus';
 import { useNamespace, useValue, useService, useEventDispatcher } from '@ctzy-web-client/web-base-client-vue';
 import { BwaDraglist } from '../drag-list/index.mjs';
@@ -6,168 +6,255 @@ import { map } from 'rxjs';
 import { dataModelDB } from '../utils/db.mjs';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
 
-const __default__ = defineComponent({ name: "BwaDataTableSetting" });
-const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  props: {
-    dataTable: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const attrs = useAttrs();
-    const ns = useNamespace("datatable-settings");
-    const value = ref(false);
-    const appName = useValue("AppName");
-    const userService = useService("UserService");
-    const userID = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = unref(userService)) == null ? void 0 : _a.userInfo) == null ? void 0 : _b.id) || "";
-    });
-    const isShowResetColumn = computed(
-      () => !props.dataTable.isDefaultColumnSort()
-    );
-    const key = computed(
-      () => `${unref(appName)}_${props.dataTable.name}_settings`
-    );
-    const search = ref("");
-    const columns = computed(
-      () => props.dataTable.getColumns().filter((column) => column.settings.visible).filter((column) => column.settings.visible)
-    );
-    const initColumns = async () => {
-      var _a, _b, _c;
-      let persistentColumnInfos = [];
-      const result = await dataModelDB.tableHeaderSettings.where("[app+tableName+userID]").equals([unref(appName), props.dataTable.name, unref(userID)]).toArray();
-      if (result.length) {
-        persistentColumnInfos = (_b = (_a = result[0]) == null ? void 0 : _a.columnInfo) != null ? _b : [];
-      }
-      if (persistentColumnInfos.some((item) => typeof item === "string")) {
-        persistentColumnInfos = persistentColumnInfos.map((columnInfo) => {
-          return typeof columnInfo === "object" ? columnInfo : { name: columnInfo, visible: true };
-        });
-      }
-      const _dataTable = props.dataTable;
-      let dataTableColumns = _dataTable.getColumns().slice().filter((item) => item.settings.visible);
-      persistentColumnInfos = persistentColumnInfos.filter(
-        (item) => dataTableColumns.findIndex((column) => column.name === item.name) !== -1
-      );
-      if (!persistentColumnInfos) {
-        return dataTableColumns;
-      }
-      let sortedColumns = persistentColumnInfos.map(
-        (columnInfo) => dataTableColumns.find((column) => column.name === columnInfo.name)
-      ).filter(Boolean);
-      dataTableColumns = sortedColumns.concat(
-        dataTableColumns.filter(
-          (column) => !sortedColumns.find((col) => column.name === col.name)
-        )
-      );
-      for (const column of dataTableColumns) {
-        const persistentItem = persistentColumnInfos.find(
-          (item) => item.name === column.name
-        );
-        column.visible = (_c = persistentItem == null ? void 0 : persistentItem.visible) != null ? _c : column.visible;
-      }
-      props.dataTable.setDisplayColumns(
-        dataTableColumns.filter((column) => column.visible)
-      );
-      return dataTableColumns;
-    };
-    const resetColumns = () => {
-      const _dataTable = props.dataTable;
-      _dataTable.resetColumnSort();
-    };
-    const allSearchedColumns = computed(() => {
-      const _search = unref(search);
-      return unref(columns).filter((column) => column.title.indexOf(_search) > -1);
-    });
-    const hiddenSearchedColumns = computed(
-      () => unref(allSearchedColumns).filter((item) => !item.visible)
-    );
-    const displaySearchedColumns = computed(() => {
-      const _search = unref(search);
-      return props.dataTable.getDisplayColumns().filter((column) => column.settings.visible).filter((column) => column.title.indexOf(_search) > -1);
-    });
-    const handleSortChange = (sort) => {
-      const _columns = unref(columns);
-      const displayColumns = sort.map(
-        (attrName) => {
-          var _a;
-          return (_a = _columns.find((column) => column.attrName === attrName)) != null ? _a : null;
-        }
-      ).filter(Boolean);
-      props.dataTable.setDisplayColumns(displayColumns);
-    };
-    const scope = getCurrentScope();
-    const handleInitCompleted = async () => {
-      const dataTableColumns = await initColumns();
-      const subscription = props.dataTable.getDisplayColumnsSubject().pipe(
-        map((displayColumns) => {
-          const hiddenColumns = dataTableColumns.filter(
-            (column) => !displayColumns.find(
-              (displayColumn) => displayColumn.attrName === column.attrName
-            )
-          );
-          return [...displayColumns, ...hiddenColumns].map((column) => ({
-            name: column.name,
-            visible: column.visible
-          }));
-        })
-      ).subscribe({
-        next: (columnInfo) => {
-          dataModelDB.tableHeaderSettings.put({
-            app: unref(appName),
-            tableName: props.dataTable.name,
-            userID: unref(userID),
-            columnInfo
-          });
-        }
-      });
-      scope.run(() => {
-        onScopeDispose(() => {
-          subscription.unsubscribe();
-        });
-      });
-    };
-    if (!props.dataTable.inited) {
-      useEventDispatcher(props.dataTable, "init-completed", handleInitCompleted);
-    } else {
-      handleInitCompleted();
-    }
-    return (_ctx, _cache) => {
-      const _component_RefreshRight = resolveComponent("RefreshRight");
-      const _component_Close = resolveComponent("Close");
-      return openBlock(), createBlock(unref(ElTooltip), mergeProps({
-        visible: value.value,
-        "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => value.value = $event)
-      }, unref(attrs), {
-        effect: "light",
-        "show-arrow": false,
-        trigger: "click",
-        "popper-class": unref(ns).b(),
-        "gpu-acceleration": false,
-        placement: "bottom",
-        "append-to": ".bwa-application"
-      }), {
-        content: withCtx(() => [
-          createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("content"))
+const _sfc_main = {
+  __name: 'datatable-settings',
+  props: {
+  dataTable: {
+    type: Object,
+    required: true,
+  },
+},
+  emits: [
+  'reset-columns',
+  'sort-change',
+  'close',
+  'visible-change',
+  'column-visible-change'
+],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+defineOptions({ name: 'BwaDataTableSetting' });
+
+
+
+
+
+const attrs = useAttrs();
+
+const ns = useNamespace('datatable-settings');
+
+const value = ref(false);
+
+const handleClose = () => {
+  value.value = false;
+  emit('close');
+};
+
+const handleColumnVisibleChange = (column, visible) => {
+  const  tableColumns = [...displaySearchedColumns.value,...hiddenSearchedColumns.value ];
+  emit('column-visible-change', tableColumns);
+};
+
+// 监听value变化，emit visible-change事件
+watch(value, (newValue) => {
+  emit('visible-change', newValue);
+});
+
+const appName = useValue('AppName');
+const userService = useService('UserService');
+
+const userID = computed(() => unref(userService)?.userInfo?.id || '');
+
+const isShowResetColumn = computed(
+  () => !props.dataTable.isDefaultColumnSort()
+);
+
+const key = computed(
+  () => `${unref(appName)}_${props.dataTable.name}_settings`
+);
+
+const search = ref('');
+
+const columns = computed(() =>
+  props.dataTable
+    .getColumns()
+    .filter((column) => column.settings.visible)
+    .filter((column) => column.settings.visible)
+);
+
+const initColumns = async () => {
+  let persistentColumnInfos = [];
+
+  const result = await dataModelDB.tableHeaderSettings
+    .where('[app+tableName+userID]')
+    .equals([unref(appName), props.dataTable.name, unref(userID)])
+    .toArray();
+
+  if (result.length) {
+    persistentColumnInfos = result[0]?.columnInfo ?? [];
+  }
+
+  if (persistentColumnInfos.some((item) => typeof item === 'string')) {
+    persistentColumnInfos = persistentColumnInfos.map((columnInfo) => {
+      return typeof columnInfo === 'object'
+        ? columnInfo
+        : { name: columnInfo, visible: true };
+    });
+  }
+
+  const _dataTable = props.dataTable;
+  let dataTableColumns = _dataTable
+    .getColumns()
+    .slice()
+    .filter((item) => item.settings.visible);
+
+  persistentColumnInfos = persistentColumnInfos.filter(
+    (item) =>
+      dataTableColumns.findIndex((column) => column.name === item.name) !== -1
+  );
+
+  if (!persistentColumnInfos) {
+    return dataTableColumns;
+  }
+
+  let sortedColumns = persistentColumnInfos
+    .map((columnInfo) =>
+      dataTableColumns.find((column) => column.name === columnInfo.name)
+    )
+    .filter(Boolean);
+
+  dataTableColumns = sortedColumns.concat(
+    dataTableColumns.filter(
+      (column) => !sortedColumns.find((col) => column.name === col.name)
+    )
+  );
+
+  for (const column of dataTableColumns) {
+    const persistentItem = persistentColumnInfos.find(
+      (item) => item.name === column.name
+    );
+    column.visible = persistentItem?.visible ?? column.visible;
+  }
+
+  props.dataTable.setDisplayColumns(
+    dataTableColumns.filter((column) => column.visible)
+  );
+
+  return dataTableColumns;
+};
+
+const resetColumns = () => {
+  const _dataTable = props.dataTable;
+
+  _dataTable.resetColumnSort();
+  emit('reset-columns');
+};
+
+const allSearchedColumns = computed(() => {
+  const _search = unref(search);
+  return unref(columns).filter((column) => column.title.indexOf(_search) > -1);
+});
+
+const hiddenSearchedColumns = computed(() =>
+  unref(allSearchedColumns).filter((item) => !item.visible)
+);
+
+const displaySearchedColumns = computed(() => {
+  const _search = unref(search);
+  return props.dataTable
+    .getDisplayColumns()
+    .filter((column) => column.settings.visible)
+    .filter((column) => column.title.indexOf(_search) > -1);
+});
+
+const handleSortChange = (sort) => {
+  const _columns = unref(columns);
+  const displayColumns = sort
+    .map(
+      (attrName) =>
+        _columns.find((column) => column.attrName === attrName) ?? null
+    )
+    .filter(Boolean);
+
+  props.dataTable.setDisplayColumns(displayColumns);
+    const tableColumns = [...displaySearchedColumns.value,...hiddenSearchedColumns.value ];
+  emit('column-visible-change', tableColumns);
+  emit('sort-change', sort, displayColumns);
+};
+
+const scope = getCurrentScope();
+
+const handleInitCompleted = async () => {
+  const dataTableColumns = await initColumns();
+
+  const subscription = props.dataTable
+    .getDisplayColumnsSubject()
+    .pipe(
+      map((displayColumns) => {
+        const hiddenColumns = dataTableColumns.filter(
+          (column) =>
+            !displayColumns.find(
+              (displayColumn) => displayColumn.attrName === column.attrName
+            )
+        );
+
+        return [...displayColumns, ...hiddenColumns].map((column) => ({
+          name: column.name,
+          visible: column.visible,
+        }));
+      })
+    )
+    .subscribe({
+      next: (columnInfo) => {
+        dataModelDB.tableHeaderSettings.put({
+          app: unref(appName),
+          tableName: props.dataTable.name,
+          userID: unref(userID),
+          columnInfo: columnInfo,
+        });
+      },
+    });
+
+  scope.run(() => {
+    onScopeDispose(() => {
+      subscription.unsubscribe();
+    });
+  });
+};
+
+if (!props.dataTable.inited) {
+  useEventDispatcher(props.dataTable, 'init-completed', handleInitCompleted);
+} else {
+  handleInitCompleted();
+}
+
+return (_ctx, _cache) => {
+  const _component_RefreshRight = resolveComponent("RefreshRight");
+  const _component_Close = resolveComponent("Close");
+
+  return (openBlock(), createBlock(unref(ElTooltip), mergeProps({
+    visible: value.value,
+    "onUpdate:visible": _cache[1] || (_cache[1] = $event => ((value).value = $event))
+  }, unref(attrs), {
+    effect: "light",
+    "show-arrow": false,
+    trigger: "click",
+    "popper-class": unref(ns).b(),
+    "gpu-acceleration": false,
+    placement: "bottom",
+    "append-to": ".bwa-application"
+  }), {
+    content: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass(unref(ns).e('content'))
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e('header'))
+        }, [
+          createTextVNode(" 表头设置 "),
+          createElementVNode("span", {
+            class: normalizeClass(unref(ns).e('tools'))
           }, [
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).e("header"))
-            }, [
-              createTextVNode(" \u8868\u5934\u8BBE\u7F6E "),
-              createElementVNode("span", {
-                class: normalizeClass(unref(ns).e("tools"))
-              }, [
-                unref(isShowResetColumn) ? (openBlock(), createElementBlock("span", {
+            (unref(isShowResetColumn))
+              ? (openBlock(), createElementBlock("span", {
                   key: 0,
-                  class: normalizeClass([unref(ns).e("tools-item"), unref(ns).e("refresh")]),
+                  class: normalizeClass([unref(ns).e('tools-item'), unref(ns).e('refresh')]),
                   onClick: resetColumns
                 }, [
                   createVNode(unref(ElTooltip), {
-                    content: "\u6062\u590D\u9ED8\u8BA4",
+                    content: "恢复默认",
                     "append-to": ".bwa-application"
                   }, {
                     default: withCtx(() => [
@@ -175,53 +262,48 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                         default: withCtx(() => [
                           createVNode(_component_RefreshRight)
                         ]),
-                        _: 1
+                        _: 1 /* STABLE */
                       })
                     ]),
-                    _: 1
+                    _: 1 /* STABLE */
                   })
-                ], 2)) : createCommentVNode("v-if", true),
-                createElementVNode("span", {
-                  class: normalizeClass([unref(ns).e("tools-item"), unref(ns).e("close")]),
-                  onClick: _cache[0] || (_cache[0] = ($event) => value.value = false)
-                }, [
-                  createVNode(unref(ElTooltip), {
-                    content: "\u5173\u95ED",
-                    "append-to": ".bwa-application"
-                  }, {
+                ], 2 /* CLASS */))
+              : createCommentVNode("v-if", true),
+            createElementVNode("span", {
+              class: normalizeClass([unref(ns).e('tools-item'), unref(ns).e('close')]),
+              onClick: handleClose
+            }, [
+              createVNode(unref(ElTooltip), {
+                content: "关闭",
+                "append-to": ".bwa-application"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(ElIcon), null, {
                     default: withCtx(() => [
-                      createVNode(unref(ElIcon), null, {
-                        default: withCtx(() => [
-                          createVNode(_component_Close)
-                        ]),
-                        _: 1
-                      })
+                      createVNode(_component_Close)
                     ]),
-                    _: 1
+                    _: 1 /* STABLE */
                   })
-                ], 2)
-              ], 2)
-            ], 2),
-            createCommentVNode(` <div :class="ns.e('search')">\r
-          <ElInput\r
-            v-model="search"\r
-            :clearable="true"\r
-            prefix-icon="Search"\r
-            placeholder="\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22"\r
-          />\r
-        </div> `),
-            createVNode(unref(ElScrollbar), { "max-height": "500px" }, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  class: normalizeClass(unref(ns).e("main"))
-                }, [
-                  unref(displaySearchedColumns).length ? (openBlock(), createElementBlock("div", {
+                ]),
+                _: 1 /* STABLE */
+              })
+            ], 2 /* CLASS */)
+          ], 2 /* CLASS */)
+        ], 2 /* CLASS */),
+        createCommentVNode(" <div :class=\"ns.e('search')\">\r\n          <ElInput\r\n            v-model=\"search\"\r\n            :clearable=\"true\"\r\n            prefix-icon=\"Search\"\r\n            placeholder=\"请输入关键词搜索\"\r\n          />\r\n        </div> "),
+        createVNode(unref(ElScrollbar), { "max-height": "500px" }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e('main'))
+            }, [
+              (unref(displaySearchedColumns).length)
+                ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: normalizeClass(unref(ns).b("section"))
+                    class: normalizeClass(unref(ns).b('section'))
                   }, [
                     createElementVNode("div", {
-                      class: normalizeClass(unref(ns).be("section", "header"))
-                    }, "\u663E\u793A\u5B57\u6BB5", 2),
+                      class: normalizeClass(unref(ns).be('section', 'header'))
+                    }, "显示字段", 2 /* CLASS */),
                     createVNode(unref(BwaDraglist), {
                       data: unref(displaySearchedColumns),
                       labelAttr: "title",
@@ -230,80 +312,73 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                     }, {
                       default: withCtx(({ item }) => [
                         createElementVNode("div", {
-                          class: normalizeClass(unref(ns).be("section", "content"))
+                          class: normalizeClass(unref(ns).be('section', 'content'))
                         }, [
                           createElementVNode("div", {
-                            class: normalizeClass(unref(ns).e("field-item"))
+                            class: normalizeClass(unref(ns).e('field-item'))
                           }, [
-                            createElementVNode("span", null, toDisplayString(item.title), 1),
+                            createElementVNode("span", null, toDisplayString(item.title), 1 /* TEXT */),
                             createVNode(unref(ElSwitch), {
                               modelValue: item.visible,
-                              "onUpdate:modelValue": ($event) => item.visible = $event,
-                              size: "small",
+                              "onUpdate:modelValue": $event => ((item.visible) = $event),
                               disabled: item.settings.disabled,
-                              onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
-                              }, ["stop"]))
-                            }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
-                          ], 2)
-                        ], 2)
+                              onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+                              onChange: (val) => handleColumnVisibleChange(item, val)
+                            }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue", "disabled", "onChange"])
+                          ], 2 /* CLASS */)
+                        ], 2 /* CLASS */)
                       ]),
-                      _: 1
-                    }, 8, ["data"]),
-                    createCommentVNode(` <div\r
-                v-show="!displaySearchedColumns.length"\r
-                :class="ns.be('section', 'empty')"\r
-              >\r
-                \u6682\u65E0\u5B57\u6BB5\r
-              </div> `)
-                  ], 2)) : createCommentVNode("v-if", true),
-                  unref(hiddenSearchedColumns).length ? (openBlock(), createElementBlock("div", {
+                      _: 1 /* STABLE */
+                    }, 8 /* PROPS */, ["data"]),
+                    createCommentVNode(" <div\r\n                v-show=\"!displaySearchedColumns.length\"\r\n                :class=\"ns.be('section', 'empty')\"\r\n              >\r\n                暂无字段\r\n              </div> ")
+                  ], 2 /* CLASS */))
+                : createCommentVNode("v-if", true),
+              (unref(hiddenSearchedColumns).length)
+                ? (openBlock(), createElementBlock("div", {
                     key: 1,
-                    class: normalizeClass(unref(ns).b("section"))
+                    class: normalizeClass(unref(ns).b('section'))
                   }, [
                     createElementVNode("div", {
-                      class: normalizeClass(unref(ns).be("section", "header"))
-                    }, "\u672A\u663E\u793A\u5B57\u6BB5", 2),
+                      class: normalizeClass(unref(ns).be('section', 'header'))
+                    }, "未显示字段", 2 /* CLASS */),
                     createElementVNode("div", {
-                      class: normalizeClass(unref(ns).be("section", "content"))
+                      class: normalizeClass(unref(ns).be('section', 'content'))
                     }, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(hiddenSearchedColumns), (column) => {
-                        return openBlock(), createElementBlock("div", {
+                        return (openBlock(), createElementBlock("div", {
                           key: column.attrName,
-                          class: normalizeClass(unref(ns).e("field-item"))
+                          class: normalizeClass(unref(ns).e('field-item'))
                         }, [
-                          createElementVNode("span", null, toDisplayString(column.title), 1),
+                          createElementVNode("span", null, toDisplayString(column.title), 1 /* TEXT */),
                           createVNode(unref(ElSwitch), {
                             modelValue: column.visible,
-                            "onUpdate:modelValue": ($event) => column.visible = $event,
-                            size: "small",
-                            disabled: column.settings.disabled
-                          }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
-                        ], 2);
-                      }), 128))
-                    ], 2),
-                    createCommentVNode(` <div\r
-                v-show="!hiddenSearchedColumns.length"\r
-                :class="ns.be('section', 'empty')"\r
-              >\r
-                \u6682\u65E0\u5B57\u6BB5\r
-              </div> `)
-                  ], 2)) : createCommentVNode("v-if", true)
-                ], 2)
-              ]),
-              _: 1
-            })
-          ], 2)
-        ]),
-        default: withCtx(() => [
-          createElementVNode("span", null, [
-            renderSlot(_ctx.$slots, "default")
-          ])
-        ]),
-        _: 3
-      }, 16, ["visible", "popper-class"]);
-    };
-  }
-});
-var DataTableSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "datatable-settings.vue"]]);
+                            "onUpdate:modelValue": $event => ((column.visible) = $event),
+                            disabled: column.settings.disabled,
+                            onChange: (val) => handleColumnVisibleChange(column, val)
+                          }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue", "disabled", "onChange"])
+                        ], 2 /* CLASS */))
+                      }), 128 /* KEYED_FRAGMENT */))
+                    ], 2 /* CLASS */),
+                    createCommentVNode(" <div\r\n                v-show=\"!hiddenSearchedColumns.length\"\r\n                :class=\"ns.be('section', 'empty')\"\r\n              >\r\n                暂无字段\r\n              </div> ")
+                  ], 2 /* CLASS */))
+                : createCommentVNode("v-if", true)
+            ], 2 /* CLASS */)
+          ]),
+          _: 1 /* STABLE */
+        })
+      ], 2 /* CLASS */)
+    ]),
+    default: withCtx(() => [
+      createElementVNode("span", null, [
+        renderSlot(_ctx.$slots, "default")
+      ])
+    ]),
+    _: 3 /* FORWARDED */
+  }, 16 /* FULL_PROPS */, ["visible", "popper-class"]))
+}
+}
+
+};
+var DataTableSettings = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"datatable-settings.vue"]]);
 
 export { DataTableSettings as default };