hfn-components 0.6.6 → 0.6.8

package/es/components/htTable/src/htTable.vue.mjs

@@ -1,109 +1,214 @@
 import _sfc_main from './htTable.vue2.mjs';
-import { withDirectives, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createVNode } from 'vue';
+import { openBlock, createElementBlock, withDirectives, createBlock, withCtx, createCommentVNode, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, renderSlot, createVNode, withModifiers } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
-const _hoisted_1 = {
-  key: 0,
-  class: "header-text-wrap"
-};
+const _hoisted_1 = { class: "ht-table-wrapper" };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };
-const _hoisted_4 = {
-  key: 1,
-  class: "header-text-wrap"
+const _hoisted_4 = { key: 2 };
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = { style: { "padding": "20px 0", "text-align": "center" } };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = /* @__PURE__ */ createElementVNode(
+  "p",
+  { style: { "margin": "8px 0 0", "color": "#999", "font-size": "14px" } },
+  "\u6682\u65E0\u6570\u636E",
+  -1
+  /* HOISTED */
+);
+const _hoisted_9 = {
+  key: 0,
+  class: "ht-table-pagination"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return withDirectives((openBlock(), createBlock($setup["ElTable"], {
-    data: $setup.props.dataSource,
-    style: { "width": "100%" },
-    height: "100%",
-    "header-cell-style": {
-      background: $setup.props.headerColor,
-      color: "#000",
-      "font-weight": 500,
-      "font-size": "12px"
-    }
-  }, {
-    default: withCtx(() => [
-      (openBlock(true), createElementBlock(
-        Fragment,
-        null,
-        renderList($setup.props.tableColumn, (item) => {
-          return openBlock(), createBlock($setup["ElTableColumn"], {
-            key: item.key,
-            prop: item.key,
-            width: item.width
-          }, {
-            header: withCtx(() => [
-              item.customizeLabel ? (openBlock(), createElementBlock("span", _hoisted_1, [
-                item.customizeLabel === "target" ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                  createElementVNode(
-                    "div",
-                    null,
-                    toDisplayString($setup.targetHead.filter((items) => items.key === item.key.split("_")[0])[0].name),
-                    1
-                    /* TEXT */
-                  ),
-                  createElementVNode(
-                    "div",
-                    null,
-                    toDisplayString($setup.TARGET_END_KEY.filter((items) => items.key === item.key.split("_")[1])[0].name),
-                    1
-                    /* TEXT */
-                  )
-                ])) : (openBlock(), createElementBlock(
-                  "div",
-                  _hoisted_3,
-                  toDisplayString($setup.wrapText(item.customizeLabel)),
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    withDirectives((openBlock(), createBlock($setup["ElTable"], {
+      ref: "tableRef",
+      data: $setup.props.dataSource,
+      "row-key": $setup.props.rowKey || void 0,
+      style: { "width": "100%" },
+      height: "100%",
+      "header-cell-style": {
+        background: $setup.props.headerColor,
+        color: "#000",
+        "font-weight": 500,
+        "font-size": "12px"
+      },
+      onSortChange: $setup.handleSortChange,
+      onFilterChange: $setup.handleFilterChange,
+      onSelectionChange: $setup.handleSelectionChange
+    }, {
+      empty: withCtx(() => [
+        createElementVNode("div", _hoisted_6, [
+          createElementVNode("img", {
+            src: $setup.EmptySimple,
+            alt: "\u6682\u65E0\u6570\u636E"
+          }, null, 8, _hoisted_7),
+          _hoisted_8
+        ])
+      ]),
+      default: withCtx(() => [
+        $setup.props.selectable ? (openBlock(), createBlock($setup["ElTableColumn"], {
+          key: 0,
+          type: "selection",
+          width: "32",
+          "reserve-selection": true
+        })) : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList($setup.props.tableColumn, (item) => {
+            return openBlock(), createBlock($setup["ElTableColumn"], {
+              key: item.key,
+              prop: item.dataKey || item.key,
+              "column-key": item.dataKey || item.key,
+              width: item.width,
+              sortable: item.sortable || false,
+              filters: item.filters,
+              "filter-multiple": true,
+              "header-align": item.headerAlign || "left",
+              "show-overflow-tooltip": ""
+            }, {
+              header: withCtx(() => [
+                createCommentVNode(" \u81EA\u5B9A\u4E49\u8868\u5934\u63D2\u69FD "),
+                item.headerSlot ? renderSlot(_ctx.$slots, item.headerSlot, { key: 0 }) : item.customizeLabel ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  [
+                    createCommentVNode(" \u539F\u6709\u8868\u5934\u903B\u8F91 "),
+                    createElementVNode("span", null, [
+                      item.customizeLabel === "target" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                        createElementVNode(
+                          "div",
+                          null,
+                          toDisplayString($setup.targetHead.filter((items) => items.key === item.key.split("_")[0])[0].name),
+                          1
+                          /* TEXT */
+                        ),
+                        createElementVNode(
+                          "div",
+                          null,
+                          toDisplayString($setup.TARGET_END_KEY.filter((items) => items.key === item.key.split("_")[1])[0].name),
+                          1
+                          /* TEXT */
+                        )
+                      ])) : (openBlock(), createElementBlock(
+                        "div",
+                        _hoisted_3,
+                        toDisplayString(item.customizeLabel),
+                        1
+                        /* TEXT */
+                      ))
+                    ])
+                  ],
+                  2112
+                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                )) : (openBlock(), createElementBlock(
+                  "span",
+                  _hoisted_4,
+                  toDisplayString($setup.TABLE_KEY[item.key]),
                   1
                   /* TEXT */
                 ))
-              ])) : (openBlock(), createElementBlock(
-                "span",
-                _hoisted_4,
-                toDisplayString($setup.wrapText($setup.TABLE_KEY[item.key])),
-                1
-                /* TEXT */
-              ))
-            ]),
-            default: withCtx((scope) => [
-              createCommentVNode(" \u81EA\u5B9A\u4E49\u63D2\u69FD\uFF1A\u76F4\u63A5\u5728 HtTable \u5904\u7406\uFF0C\u4E0D\u7ECF\u8FC7 ColumnDeal "),
-              item.dealType === "customSlot" ? renderSlot(_ctx.$slots, item.slot, {
-                key: 0,
-                text: $setup.convertKey(scope.row, item.key),
-                row: scope.row
-              }) : item.dealType === "other" ? (openBlock(), createElementBlock(
-                Fragment,
-                { key: 1 },
-                [
-                  createCommentVNode(" \u5176\u4ED6\u7C7B\u578B\uFF1A\u901A\u8FC7 ColumnDeal \u5904\u7406 "),
-                  createVNode($setup["ColumnDeal"], {
-                    dealType: scope.row.dealType,
-                    text: $setup.convertKey(scope.row, item.key)
-                  }, null, 8, ["dealType", "text"])
-                ],
-                2112
-                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-              )) : (openBlock(), createBlock($setup["ColumnDeal"], {
-                key: 2,
-                dealType: item.dealType,
-                text: $setup.convertKey(scope.row, item.key),
-                row: scope.row,
-                "deal-function": item.dealFunction
-              }, null, 8, ["dealType", "text", "row", "deal-function"]))
-            ]),
-            _: 2
-            /* DYNAMIC */
-          }, 1032, ["prop", "width"]);
-        }),
-        128
-        /* KEYED_FRAGMENT */
-      ))
+              ]),
+              default: withCtx((scope) => [
+                createElementVNode(
+                  "span",
+                  {
+                    class: normalizeClass({ "ht-table-cell-copy": item.copyable })
+                  },
+                  [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: normalizeClass({ "ht-table-cell-text": item.copyable })
+                      },
+                      [
+                        item.key === "index" ? (openBlock(), createElementBlock(
+                          "span",
+                          _hoisted_5,
+                          toDisplayString($setup.getRowIndex(scope.$index)),
+                          1
+                          /* TEXT */
+                        )) : item.dealType === "customSlot" ? renderSlot(_ctx.$slots, item.slot, {
+                          key: 1,
+                          text: item.dataKey ? scope.row[item.dataKey] : scope.row[item.key],
+                          row: scope.row
+                        }) : item.dealType === "other" ? (openBlock(), createBlock($setup["ColumnDeal"], {
+                          key: 2,
+                          dealType: scope.row.dealType,
+                          text: item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key)
+                        }, null, 8, ["dealType", "text"])) : (openBlock(), createBlock($setup["ColumnDeal"], {
+                          key: 3,
+                          dealType: item.dealType || "notProcessed",
+                          text: item.dataKey ? scope.row[item.dataKey] : $setup.convertKey(scope.row, item.key),
+                          row: scope.row,
+                          "deal-function": item.dealFunction
+                        }, null, 8, ["dealType", "text", "row", "deal-function"]))
+                      ],
+                      2
+                      /* CLASS */
+                    ),
+                    item.copyable ? (openBlock(), createBlock(
+                      $setup["ElTooltip"],
+                      {
+                        key: 0,
+                        content: "\u590D\u5236",
+                        placement: "top",
+                        "show-after": 300
+                      },
+                      {
+                        default: withCtx(() => [
+                          createVNode($setup["ElIcon"], {
+                            class: "ht-copy-icon",
+                            onClick: withModifiers(($event) => $setup.handleCopy(item.dataKey ? scope.row[item.dataKey] : scope.row[item.key]), ["stop"]),
+                            onMouseenter: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, {
+                            default: withCtx(() => [
+                              createVNode($setup["CopyDocument"])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["onClick"])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      },
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["prop", "column-key", "width", "sortable", "filters", "header-align"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["data", "row-key", "header-cell-style", "onSelectionChange"])), [
+      [$setup["vLoading"], $setup.props.loading]
     ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["data", "header-cell-style"])), [
-    [$setup["vLoading"], $setup.props.loading]
+    createCommentVNode(" \u5206\u9875\u5668 "),
+    $setup.props.pagination ? (openBlock(), createElementBlock("div", _hoisted_9, [
+      createVNode($setup["ElPagination"], {
+        background: "",
+        "current-page": $setup.currentPage,
+        "page-size": $setup.pageSize,
+        "page-sizes": $setup.props.pagination.pageSizes || [10, 20, 30, 50, 100],
+        layout: $setup.props.pagination.layout || "total, prev, pager, next, sizes, jumper",
+        total: $setup.total,
+        onCurrentChange: $setup.handleCurrentChange,
+        onSizeChange: $setup.handleSizeChange
+      }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total"])
+    ])) : createCommentVNode("v-if", true)
   ]);
 }
 var elTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/htTable/src/htTable.vue"]]);

package/es/components/htTable/src/htTable.vue2.mjs

@@ -1,11 +1,16 @@
-import { defineComponent, ref, onMounted } from 'vue';
-import { ElTable, ElTableColumn, vLoading } from 'element-plus';
-import { TABLE_KEY, convertKey } from '../../../constants/table.mjs';
-import { TARGET_HEAD_KEY, TARGET_END_KEY } from '../../../constants/target.mjs';
+import { defineComponent, ref } from 'vue';
+import { vLoading, ElTooltip, ElIcon, ElPagination, ElTableColumn, ElTable } from 'element-plus';
+import { CopyDocument } from '@element-plus/icons-vue';
+import { TABLE_KEY } from '../../../constants/table.mjs';
+import { TARGET_END_KEY } from '../../../constants/target.mjs';
 import '../../../constants/chartConfig.mjs';
-import cloneDeep from 'lodash.clonedeep';
+import EmptySimple from '../../../icons/svg/empty-simple.svg.mjs';
+import { getTargetHeadWithYears, convertKey } from '../../../utils/table.mjs';
 import ColumnDeal from './columnDeal.vue.mjs';
 import { elTableProps } from './htTable.mjs';
+import { useSelection } from './composables/use-selection.mjs';
+import { usePagination } from './composables/use-pagination.mjs';
+import { useCopy } from './composables/use-copy.mjs';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -13,38 +18,63 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "htTable",
   props: elTableProps,
-  setup(__props, { expose: __expose }) {
+  emits: ["sort-change", "filter-change", "selection-change", "page-change", "size-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
-    const targetHead = ref(cloneDeep(TARGET_HEAD_KEY));
-    onMounted(() => {
-      let startYear = 2018;
-      const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
-      while (startYear <= nowYear) {
-        targetHead.value.push({
-          name: `${startYear}`,
-          key: `${startYear}`
-        });
-        startYear++;
-      }
-    });
+    const emit = __emit;
     const props = __props;
-    const wrapText = (text, charsPerLine = 6) => {
-      if (!text) return "";
-      const regex = new RegExp(`.{1,${charsPerLine}}`, "g");
-      return text.match(regex)?.join("\n") || text;
+    const tableRef = ref();
+    const handleSortChange = ({ prop, order }) => {
+      emit("sort-change", { field: prop, order });
+    };
+    const handleFilterChange = (filters) => {
+      emit("filter-change", filters);
     };
-    const __returned__ = { targetHead, props, wrapText, get ElTable() {
+    const targetHead = getTargetHeadWithYears();
+    const {
+      currentPage,
+      pageSize,
+      total,
+      getRowIndex,
+      handleCurrentChange: onCurrentChange,
+      handleSizeChange: onSizeChange
+    } = usePagination({
+      pagination: () => props.pagination
+    });
+    const { handleSelectionChange } = useSelection(
+      {
+        tableRef,
+        dataSource: () => props.dataSource,
+        selectedRows: () => props.selectedRows,
+        rowKey: () => props.rowKey
+      },
+      (rows) => emit("selection-change", rows)
+    );
+    const handleCurrentChange = (page) => onCurrentChange(page, emit);
+    const handleSizeChange = (size) => onSizeChange(size, emit);
+    const { handleCopy } = useCopy();
+    const __returned__ = { emit, props, tableRef, handleSortChange, handleFilterChange, targetHead, currentPage, pageSize, total, getRowIndex, onCurrentChange, onSizeChange, handleSelectionChange, handleCurrentChange, handleSizeChange, handleCopy, get ElTable() {
       return ElTable;
     }, get ElTableColumn() {
       return ElTableColumn;
+    }, get ElPagination() {
+      return ElPagination;
+    }, get ElIcon() {
+      return ElIcon;
+    }, get ElTooltip() {
+      return ElTooltip;
     }, get vLoading() {
       return vLoading;
+    }, get CopyDocument() {
+      return CopyDocument;
     }, get TABLE_KEY() {
       return TABLE_KEY;
-    }, get convertKey() {
-      return convertKey;
     }, get TARGET_END_KEY() {
       return TARGET_END_KEY;
+    }, get EmptySimple() {
+      return EmptySimple;
+    }, get convertKey() {
+      return convertKey;
     }, ColumnDeal };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;

package/es/components/htTarget/index.mjs

@@ -1,5 +1,6 @@
 import htTarget from './src/htTarget.vue.mjs';
 import { withInstall } from '../../utils/common.mjs';
+import '../../constants/chartConfig.mjs';
 
 const HtTarget = withInstall(htTarget);
 

package/es/components/htTarget/src/htTarget.vue.mjs

@@ -1,5 +1,5 @@
 import _sfc_main from './htTarget.vue2.mjs';
-import { openBlock, createElementBlock, createVNode, withCtx, createElementVNode, createTextVNode, createBlock, createCommentVNode, Fragment, renderList, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, createVNode, withCtx, createBlock, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString, createElementVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
 const _hoisted_1 = {
@@ -12,43 +12,17 @@ const _hoisted_3 = {
   style: { "width": "100%" }
 };
 const _hoisted_4 = { class: "factor-content" };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = /* @__PURE__ */ createElementVNode(
-  "svg",
-  {
-    t: "1736836637226",
-    class: "icon",
-    viewBox: "0 0 1024 1024",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "8732",
-    width: "15",
-    height: "15"
-  },
-  [
-    /* @__PURE__ */ createElementVNode("path", {
-      d: "M912.064 187.984L583.968 516.064l316.768 316.8-67.872 67.872-316.768-316.8-328.112 328.128-67.888-67.888 328.112-328.112L108.784 176.672l67.888-67.888 339.424 339.392L844.16 120.096l67.888 67.888z",
-      fill: "#bfbfbf",
-      "p-id": "8733"
-    })
-  ],
-  -1
-  /* HOISTED */
-);
-const _hoisted_7 = [
-  _hoisted_6
-];
-const _hoisted_8 = { class: "dialog-footer" };
+const _hoisted_5 = { class: "dialog-footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [
     createVNode($setup["ElDialog"], {
       modelValue: $setup.dialogShow,
-      "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $setup.dialogShow = $event),
+      "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $setup.dialogShow = $event),
       class: "dialog",
-      onClose: _cache[5] || (_cache[5] = ($event) => $setup.emit("choiceCancel"))
+      onClose: _cache[6] || (_cache[6] = ($event) => $setup.emit("choiceCancel"))
     }, {
       footer: withCtx(() => [
-        createElementVNode("div", _hoisted_8, [
+        createElementVNode("div", _hoisted_5, [
           createVNode($setup["ElButton"], {
             onClick: $setup.confirmTarge,
             type: "primary"
@@ -138,7 +112,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                                 }, [
                                   createVNode($setup["ElCheckbox"], {
                                     onChange: ($event) => $setup.selectedTarget(item.key, $setup.selectedHead, "target"),
-                                    disabled: $setup.checkList.includes(item.key),
+                                    disabled: $setup.checkListSet.has(item.key),
                                     label: item.name,
                                     value: item.key
                                   }, null, 8, ["onChange", "disabled", "label", "value"])
@@ -162,14 +136,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                             (openBlock(true), createElementBlock(
                               Fragment,
                               null,
-                              renderList($setup.BASIC_KEY.filter((v) => v.type === _ctx.fundType), (item) => {
+                              renderList($setup.filteredBasicKey, (item) => {
                                 return openBlock(), createElementBlock("div", {
                                   class: "factor_item",
                                   key: item.key
                                 }, [
                                   createVNode($setup["ElCheckbox"], {
                                     onChange: ($event) => $setup.selectedTarget(item.key, $setup.selectedHead, "basic"),
-                                    disabled: $setup.checkList.includes(item.key),
+                                    disabled: $setup.checkListSet.has(item.key),
                                     label: item.name,
                                     value: item.key
                                   }, null, 8, ["onChange", "disabled", "label", "value"])
@@ -197,30 +171,51 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "flow-col"
             }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList($setup.selectedList, (item) => {
-                    return openBlock(), createElementBlock("div", {
-                      key: item.key,
-                      class: "check_item"
-                    }, [
-                      createElementVNode(
-                        "span",
-                        null,
-                        toDisplayString(item.name),
-                        1
-                        /* TEXT */
-                      ),
-                      createElementVNode("span", {
-                        class: "flex-alignCnter",
-                        onClick: ($event) => $setup.deleteItem(item.key)
-                      }, [..._hoisted_7], 8, _hoisted_5)
-                    ]);
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
+                createVNode($setup["VueDraggable"], {
+                  modelValue: $setup.selectedList,
+                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $setup.selectedList = $event),
+                  animation: 150,
+                  "force-fallback": true,
+                  "ghost-class": "ghost",
+                  class: "drag-list"
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList($setup.selectedList, (item) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: item.key,
+                          class: "check_item"
+                        }, [
+                          createElementVNode(
+                            "span",
+                            null,
+                            toDisplayString(item.name),
+                            1
+                            /* TEXT */
+                          ),
+                          createVNode($setup["ElIcon"], {
+                            size: 15,
+                            color: "#bfbfbf",
+                            class: "close-icon",
+                            onClick: ($event) => $setup.deleteItem(item.key)
+                          }, {
+                            default: withCtx(() => [
+                              createVNode($setup["Close"])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["onClick"])
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["modelValue"])
               ]),
               _: 1
               /* STABLE */