@ctzy-web-client/plugin-component-vue 1.0.9 → 1.0.10

package/es/data-table/data-table.mjs

@@ -0,0 +1,369 @@
+import { createElementVNode, defineComponent, useAttrs, ref, computed, unref, watch, provide, reactive, nextTick, onUnmounted, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, mergeProps, withCtx, createBlock, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString, normalizeStyle } from 'vue';
+import { ElMessage, ElTable, ElTableColumn, ElPagination } from 'element-plus';
+import { useService, useGlobalConfig, dataTableKey, useNamespace, useEventDispatcher } from '@ctzy-web-client/web-base-client-vue';
+import DynamicComponent from './dynamic-component.mjs';
+import DataTableColumn from './data-table-column.mjs';
+import { useDataTableDrag } from './use-datatable-drag.mjs';
+import { get } from 'lodash';
+import { Subject, debounceTime, Observable, filter, map, delayWhen, from, skipWhile } from 'rxjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("i", { class: "ptp-icon ptp-buzhou-yidong" }, null, -1);
+const __default__ = defineComponent({ name: "BwaDataTable" });
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    dataTable: {
+      type: Object,
+      required: true
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    indexColumnLabel: {
+      type: String,
+      default: "\u7F16\u53F7"
+    },
+    selection: {
+      type: Boolean,
+      default: false
+    },
+    paginationLayout: {
+      type: String,
+      default: "sizes, prev, pager, next, jumper"
+    },
+    paginationPageSizes: {
+      type: Array,
+      default: () => [10, 20, 50, 100, 200]
+    },
+    showPagination: {
+      type: Boolean,
+      default: true
+    },
+    whereParamName: {
+      type: String,
+      default: ""
+    },
+    showDrag: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["drag"],
+  setup(__props, { emit }) {
+    var _a;
+    const props = __props;
+    const attrs = useAttrs();
+    const userService = useService("UserService");
+    const elTable = ref(null);
+    const dataTable = props.dataTable;
+    dataTable._userService = (_a = userService.value) == null ? void 0 : _a.getUserList;
+    const dataTableEl = ref(null);
+    const displayColumns = computed(
+      () => unref(dataTable).getDisplayColumns() || []
+    );
+    watch(
+      computed(() => props.whereParamName),
+      (whereParamName) => {
+        dataTable.setWhereParamName(whereParamName || "");
+      },
+      { immediate: true, flush: "sync" }
+    );
+    const searchParams = computed(() => props.searchParams);
+    const debounceDelay = useGlobalConfig("debounceDelay", 500);
+    provide(
+      dataTableKey,
+      reactive({
+        dataTable,
+        displayColumns
+      })
+    );
+    const ns = useNamespace("datatable");
+    const { barRectangle } = useDataTableDrag(
+      dataTableEl,
+      ".bwa-datatable__drag",
+      ".el-table__row",
+      { emit }
+    );
+    const processing = ref(false);
+    const data = computed(() => {
+      return props.dataTable.data;
+    });
+    useEventDispatcher(dataTable, "load-successfully", async (res) => {
+      if (res.code != 0) {
+        return;
+      }
+      const _userService = unref(userService);
+      if (!_userService) {
+        return;
+      }
+      let columns = dataTable.getColumns();
+      const componentNames = ["BwaUserSelect", "BwaUserMultiSelect"];
+      columns = columns.filter((column) => componentNames.includes(column.formComponent)).filter((column) => column.visible).filter((column) => column.isExtend);
+      if (!columns.length) {
+        return;
+      }
+      processing.value = true;
+      const data2 = res.data;
+      let ids = data2.reduce((result, item) => {
+        return result.concat(
+          columns.reduce((result2, column) => {
+            let value = get(item, column.fullAttrName);
+            value = Array.isArray(value) ? value : value ? [value] : [];
+            return result2.concat(value);
+          }, [])
+        );
+      }, []).map((id) => id + "");
+      ids = [...new Set(ids)];
+      try {
+        const userListResult = await _userService.getUserListByIds(ids);
+        if (userListResult.code != 0) {
+          return;
+        }
+        for (const column of columns) {
+          column.componentProps = column.componentProps || {};
+          column.componentProps.options = (userListResult.data || []).map(
+            (item) => ({
+              label: item.label,
+              value: item.value
+            })
+          );
+        }
+        console.log(userListResult);
+      } finally {
+        processing.value = false;
+      }
+    });
+    const sortHandle = (column, prop, order) => {
+      let sortColumn2 = "";
+      let sortType = "";
+      if (column.order) {
+        sortColumn2 = column.prop;
+        sortType = column.order == "descending" ? 0 : 1;
+        dataTable.setParam("sortColumn", sortColumn2);
+        dataTable.setParam("sortType", sortType);
+      } else {
+        dataTable.setParam("sortColumn", sortColumn2);
+        dataTable.setParam("sortType", sortType);
+      }
+      dataTable.load();
+    };
+    useEventDispatcher(dataTable, "load-successfully", (res) => {
+      if (!elTable.value) {
+        return;
+      }
+      unref(elTable).store.updateSelectionByRowKey();
+      if (res.code != 0) {
+        ElMessage.error(res.msg);
+      }
+    });
+    function sortColumn(array) {
+      array.forEach((item) => {
+        var _a2, _b;
+        item.no = (_a2 = item.getColumnIndex) == null ? void 0 : _a2.call(item);
+        if ((_b = item.children) == null ? void 0 : _b.length) {
+          sortColumn(item.children);
+        }
+      });
+      array.sort((cur, pre) => cur.no - pre.no);
+    }
+    const tableSelectSubject = new Subject();
+    const selectionChange = tableSelectSubject.next.bind(tableSelectSubject);
+    const totalPage = computed(() => dataTable.getTotalPage());
+    const tableSelectSubscription = tableSelectSubject.pipe(debounceTime(debounceDelay)).subscribe(unref(dataTable).setSelection.bind(unref(dataTable)));
+    const selectChangeAPIObservable = new Observable(
+      (observer) => useEventDispatcher(
+        props.dataTable,
+        "select-change",
+        observer.next.bind(observer)
+      )
+    ).pipe(
+      filter((selection) => {
+        if (!unref(elTable)) {
+          return false;
+        }
+        const selectionRows = unref(elTable).getSelectionRows();
+        if (selectionRows.length !== selection.length) {
+          return true;
+        }
+        const primaryKey = dataTable.primaryKey;
+        return !selectionRows.every(
+          (item) => selection.find((itm) => item[primaryKey] === item[primaryKey])
+        );
+      })
+    ).subscribe((selection) => {
+      unref(elTable).clearSelection();
+      for (const item of selection) {
+        unref(elTable).toggleRowSelection(item, true);
+      }
+    });
+    if (props.autoLoad) {
+      dataTable.load();
+    }
+    const searchParamsSubscription = new Observable(
+      (observer) => useEventDispatcher(
+        props.dataTable.filterPanel,
+        "params-change",
+        observer.next.bind(observer)
+      )
+    ).pipe(
+      filter(() => props.dataTable.filterPanel.ready),
+      debounceTime(unref(debounceDelay))
+    ).subscribe(() => {
+      props.dataTable.load();
+    });
+    const subscription = props.dataTable.getDisplayColumnsSubject().pipe(
+      map(() => unref(elTable)),
+      delayWhen(() => from(nextTick())),
+      map((elTable2) => elTable2 == null ? void 0 : elTable2.store),
+      skipWhile((store) => !store)
+    ).subscribe((store) => {
+      sortColumn(unref(store.states._columns));
+      store.updateColumns();
+      store.scheduleLayout();
+    });
+    onUnmounted(() => {
+      selectChangeAPIObservable.unsubscribe();
+      subscription.unsubscribe();
+      tableSelectSubscription.unsubscribe();
+      searchParamsSubscription.unsubscribe();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b()),
+        ref_key: "dataTableEl",
+        ref: dataTableEl
+      }, [
+        renderSlot(_ctx.$slots, "default", { dataTable: unref(dataTable) }, () => [
+          createVNode(unref(ElTable), mergeProps({
+            class: "content",
+            height: "100%",
+            ref_key: "elTable",
+            ref: elTable,
+            data: unref(data),
+            "row-key": unref(dataTable).primaryKey,
+            "show-header": "",
+            stripe: ""
+          }, unref(attrs), {
+            onSelectionChange: unref(selectionChange),
+            onSortChange: sortHandle,
+            border: __props.border
+          }), {
+            empty: withCtx(() => [
+              renderSlot(_ctx.$slots, "empty-table")
+            ]),
+            default: withCtx(() => [
+              __props.showDrag ? (openBlock(), createBlock(unref(ElTableColumn), {
+                key: 0,
+                width: "40px"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    class: normalizeClass(unref(ns).e("drag"))
+                  }, [
+                    renderSlot(_ctx.$slots, "default", {}, () => [
+                      _hoisted_1
+                    ])
+                  ], 2)
+                ]),
+                _: 3
+              })) : createCommentVNode("v-if", true),
+              __props.selection ? renderSlot(_ctx.$slots, "selection", { key: 1 }, () => [
+                createVNode(unref(ElTableColumn), {
+                  type: "selection",
+                  align: "center",
+                  width: "56",
+                  "reserve-selection": true
+                })
+              ]) : createCommentVNode("v-if", true),
+              __props.showIndex ? renderSlot(_ctx.$slots, "index", { key: 2 }, () => [
+                createVNode(unref(ElTableColumn), {
+                  type: "index",
+                  width: "60",
+                  align: "center",
+                  label: __props.indexColumnLabel
+                }, null, 8, ["label"])
+              ]) : createCommentVNode("v-if", true),
+              renderSlot(_ctx.$slots, "table-columns", { dataTable: unref(dataTable) }, () => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayColumns), (item) => {
+                  return openBlock(), createBlock(DataTableColumn, mergeProps({
+                    "column-key": item.attrName,
+                    key: item.attrName,
+                    label: item.title,
+                    prop: item.fullAttrName,
+                    "min-width": item.width,
+                    align: item.align
+                  }, item.componentProps, {
+                    sortable: item.sortable == "custom"
+                  }), {
+                    header: withCtx(() => [
+                      renderSlot(_ctx.$slots, `table-header-col-${item.attrName}`, {}, () => [
+                        createTextVNode(toDisplayString(item.title), 1)
+                      ])
+                    ]),
+                    default: withCtx(({ row, $index }) => [
+                      unref(data).length ? renderSlot(_ctx.$slots, "table-col-" + item.attrName, {
+                        key: 0,
+                        row,
+                        index: $index,
+                        column: item,
+                        dataTable: unref(dataTable)
+                      }, () => [
+                        createVNode(unref(DynamicComponent), {
+                          column: item,
+                          record: row
+                        }, null, 8, ["column", "record"])
+                      ]) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                  }, 1040, ["column-key", "label", "prop", "min-width", "align", "sortable"]);
+                }), 128))
+              ]),
+              renderSlot(_ctx.$slots, "column-append")
+            ]),
+            _: 3
+          }, 16, ["data", "row-key", "onSelectionChange", "border"])
+        ]),
+        __props.showPagination ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(unref(ns).e("pagination"))
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("pagination-info"))
+          }, " \u5171" + toDisplayString(unref(totalPage)) + "\u9875\uFF0C" + toDisplayString(unref(dataTable).totalRecCount) + "\u6761 ", 3),
+          createVNode(unref(ElPagination), {
+            currentPage: unref(dataTable).pageNum,
+            "page-sizes": __props.paginationPageSizes,
+            "page-size": unref(dataTable).pageSize,
+            layout: __props.paginationLayout,
+            total: unref(dataTable).totalRecCount,
+            onSizeChange: _cache[0] || (_cache[0] = ($event) => unref(dataTable).setPageSize($event)),
+            onCurrentChange: _cache[1] || (_cache[1] = ($event) => unref(dataTable).pageTo($event)),
+            teleported: false
+          }, null, 8, ["currentPage", "page-sizes", "page-size", "layout", "total"])
+        ], 2)) : createCommentVNode("v-if", true),
+        unref(barRectangle) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(unref(ns).e("dragbar")),
+          style: normalizeStyle({
+            left: unref(barRectangle).left + "px",
+            top: unref(barRectangle).top + "px",
+            width: unref(barRectangle).width + "px",
+            height: unref(barRectangle).height + "px"
+          })
+        }, null, 6)) : createCommentVNode("v-if", true)
+      ], 2);
+    };
+  }
+});
+var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "data-table.vue"]]);
+
+export { DataTable as default };

package/es/data-table/dynamic-component.mjs

@@ -0,0 +1,48 @@
+import { computed, h, unref } from 'vue';
+import get from 'lodash/get';
+import { useDynamicComponent } from '../utils.mjs';
+
+const formatValue = (column, value) => {
+  const options = column.componentProps.options || [];
+  const _value = Array.isArray(value) ? value : [value];
+  const labels = _value.map((v) => {
+    var _a;
+    return (_a = options.find((option) => option.value === v)) != null ? _a : null;
+  });
+  if (labels.includes(null)) {
+    return null;
+  }
+  return labels.map((item) => item.label).join(",");
+};
+var DynamicComponent = {
+  props: {
+    column: Object,
+    record: Object
+  },
+  emits: ["on-change"],
+  setup(props, context) {
+    const {
+      component,
+      params
+    } = useDynamicComponent(props, context, "BwaDataColumnView", "fullAttrName");
+    const viewType = computed(() => props.column.formComponent === "BwaRichText" ? "html" : "");
+    return () => {
+      var _a;
+      let value = get(props.record, props.column.fullAttrName);
+      if (Array.isArray((_a = props.column.componentProps) == null ? void 0 : _a.options)) {
+        value = formatValue(props.column, value) || value;
+      }
+      return h(unref(component), {
+        ...unref(params),
+        value,
+        type: props.column.type,
+        align: props.column.align,
+        rule: props.column.rule,
+        template: props.column.template,
+        defaultValue: props.column.default || "-"
+      });
+    };
+  }
+};
+
+export { DynamicComponent as default };

package/es/data-table/index.mjs

@@ -0,0 +1,13 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DataTable from './data-table.mjs';
+import DataTableColumn from './data-table-column.mjs';
+import DataColumnView from './data-column-view.mjs';
+
+const BwaDataTable = withInstall(DataTable, {
+  DataTableColumn,
+  DataColumnView
+});
+const BwaDataTableColumn = withInstall(DataTableColumn);
+const BwaDataColumnView = withInstall(DataColumnView);
+
+export { BwaDataColumnView, BwaDataTable, BwaDataTableColumn, BwaDataTable as default };

package/es/data-table/use-datatable-drag.mjs

@@ -0,0 +1,110 @@
+import { ref, onMounted, unref, onBeforeUnmount } from 'vue';
+import { fromEvent, filter, tap, map, switchMap, takeUntil } from 'rxjs';
+import { Rectangle } from '../math/Rectangle.mjs';
+
+const useDataTableDrag = (el, dragClass, itemClass, context) => {
+  let mousedownSubscription = null;
+  let barRectangle = ref(null);
+  onMounted(() => {
+    let mouseDownObservable = fromEvent(unref(el), "mousedown");
+    let mousemoveObservable = fromEvent(unref(document), "mousemove");
+    let mouseupObservable = fromEvent(unref(document), "mouseup");
+    let rectangles = [];
+    let cloneEl = null;
+    let offsetX = 0;
+    let offsetY = 0;
+    let targetIndex = -1;
+    mousedownSubscription = mouseDownObservable.pipe(filter((event) => {
+      const list = Array.from(unref(el).querySelectorAll(dragClass));
+      const item = list.find((item2) => item2.contains(event.target));
+      if (item) {
+        event.index = list.indexOf(item);
+        const row = Array.from(unref(el).querySelectorAll(itemClass)).find((row2) => row2.contains(item));
+        const _cloneEl = row.cloneNode(true);
+        const boundary = row.getBoundingClientRect();
+        cloneEl = document.createElement("div");
+        cloneEl.className = "bwa-datatable";
+        const tableEl = document.createElement("table");
+        tableEl.className = "el-table";
+        const tbodyEl = document.createElement("tbody");
+        cloneEl.append(tableEl);
+        tableEl.appendChild(tbodyEl);
+        tbodyEl.appendChild(_cloneEl);
+        offsetX = event.x - boundary.left;
+        offsetY = event.y - boundary.top;
+        console.log();
+        Object.assign(cloneEl.style, {
+          position: "absolute",
+          left: event.clientX - offsetX + "px",
+          top: event.clientY - offsetY + "px",
+          zIndex: "9999",
+          height: boundary.height + "px",
+          width: boundary.width + "px",
+          opacity: "0.6",
+          pointerEvents: "none"
+        });
+        document.body.appendChild(cloneEl);
+        document.body.style.cursor = "move";
+        document.body.style.userSelect = "none";
+      }
+      return !!item;
+    }), tap(() => {
+      rectangles = Array.from(unref(el).querySelectorAll(itemClass)).map((item) => {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = item.getBoundingClientRect();
+        return new Rectangle(x, y, width, height);
+      });
+    }), map((event) => {
+      return {
+        index: event.index,
+        x: event.clientX,
+        y: event.clientY
+      };
+    }), switchMap(({
+      index,
+      x,
+      y
+    }) => {
+      return mousemoveObservable.pipe(takeUntil(mouseupObservable.pipe(tap(() => {
+        if (targetIndex !== -1) {
+          context.emit("drag", index, targetIndex);
+        }
+        cloneEl == null ? void 0 : cloneEl.remove();
+        rectangles = [];
+        offsetX = offsetY = 0;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        barRectangle.value = null;
+        targetIndex = -1;
+      }))), map((event) => {
+        Object.assign(cloneEl.style, {
+          left: event.clientX - offsetX + "px",
+          top: event.clientY - offsetY + "px"
+        });
+        const rectangle = rectangles.find((rectangle2) => rectangle2.pointIn(event.x, event.y));
+        if (!rectangle) {
+          targetIndex = -1;
+          barRectangle.value = null;
+          return;
+        }
+        targetIndex = rectangles.indexOf(rectangle);
+        const direction = event.clientY >= rectangle.cy ? "after" : "before";
+        targetIndex = targetIndex + (direction === "after" ? 1 : 0);
+        barRectangle.value = new Rectangle(rectangle.left, direction === "after" ? rectangle.bottom : rectangle.top, rectangle.width, 2);
+      }));
+    })).subscribe((info) => {
+    });
+  });
+  onBeforeUnmount(() => {
+    mousedownSubscription == null ? void 0 : mousedownSubscription.unsubscribe();
+  });
+  return {
+    barRectangle
+  };
+};
+
+export { useDataTableDrag };