hy-dispatch-ui-v3 0.2.32 → 0.2.34

package/es/components/hyTableForm/style/batchTableForm.scss

@@ -0,0 +1,127 @@
+.hy-batch-table-form {
+  position: relative;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  .hy-batch-table-form-upload-box {
+    height: 340px;
+    position: relative;
+    border-radius: 8px;
+    border: 1px dashed rgba(var(--hy-auxiliary));
+    box-sizing: border-box;
+    &:hover {
+      border-color: rgba(var(--hy-theme));
+    }
+    .upload-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      perspective: 800px;
+      pointer-events: none;
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        /* 绘制网格线：使用青色，透明度调低，让它融合在 #14273a 背景里 */
+        background-image:
+          /* 纵向线 */ linear-gradient(
+                90deg,
+                rgba(0, 229, 255, 0.1) 1px,
+                transparent 1px
+        ),
+          /* 横向线 */
+        linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px);
+  
+        /* 网格尺寸 40px */
+        background-size: 40px 40px;
+  
+        /* 3D 倒伏效果 */
+        transform: rotateX(60deg);
+  
+        /* 动效：无限流动 */
+        animation: grid-flow 20s linear infinite;
+  
+        /* 遮罩：四周渐隐，让网格不那么生硬 */
+        mask-image: radial-gradient(
+                circle at 50% 50%,
+                black 10%,
+                transparent 80%
+        );
+        -webkit-mask-image: radial-gradient(
+                circle at 50% 50%,
+                black 10%,
+                transparent 80%
+        );
+      }
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(
+                circle at 50% 50%,
+                rgba(0, 229, 255, 0.05) 0%,
+                transparent 70%
+        );
+      }
+    }
+  
+    .hy-el-upload {
+      width: 100%;
+      height: 100%;
+      .hy-el-upload-dragger {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        &:hover {
+          border-color: var(--theme);
+          .type-icon-box {
+            transform: translateY(-10px);
+          }
+        }
+      }
+    }
+  }
+  
+  .hy-batch-table-form-step-box {
+    width: 100%;
+    height: 260px;
+    font-size: 14px;
+    margin-top: 16px;
+    padding-top: 24px;
+    border-radius: 8px;
+    background-color: rgba(var(--hy-background-2), 0.5);
+    .hy-el-step {
+      .hy-el-step__description {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+      }
+    }
+  }
+
+  .hy-batch-table-form-template-box {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    padding: 0 16px 0 18px;
+    border: 1px dashed rgba(var(--hy-auxiliary), 0.5);
+    border-radius: 4px;
+    background: rgba(var(--hy-background-2), 0.5);
+  }
+}
+

package/es/components/hyTableForm/style/tableForm.scss

@@ -0,0 +1,42 @@
+.hy-table-form {
+  display: flex;
+  flex-direction: column;
+
+  .hy-el-table-v2__row.hy-el-table-v2__row-error,
+  .hy-el-table-v2__row.hy-el-table-v2__row-error:hover {
+    outline: 1px solid rgba(var(--hy-danger-2));
+    outline-offset: -1px;
+    box-shadow: inset 0px 0px 19px 0px rgba(var(--hy-danger-2), 0.5);
+  }
+
+  .hy-table-form-tabs {
+    height: 1.875rem;
+    display: flex;
+    gap: 2px;
+    font-size: 0.875rem;
+    color: rgba(var(--hy-auxiliary));
+    border: 1px solid rgba(var(--hy-border));
+    border-radius: 4px;
+    padding: 2px;
+    font-size: 0.75rem;
+    .hy-table-form-tab-button {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      padding: 0 0.75rem;
+      border: 1px solid transparent;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: all 0.3s linear;
+      &:hover {
+        color: rgba(var(--hy-main));
+      }
+      &.is-select {
+        color: rgba(var(--hy-main));
+        background: linear-gradient(180deg, rgba(var(--hy-theme)) 0%, #2A4968 100%);
+        border-image: linear-gradient(180deg, rgba(var(--hy-theme)) 80%, rgba(var(--hy-auxiliary))) 1 1;
+      }
+    }
+  }
+}
+

package/es/components/hyTableForm/tableForm.vue.mjs

@@ -1,4 +1,14 @@
-import { defineComponent, openBlock, createElementBlock, createCommentVNode } from 'vue';
+import { defineComponent, useTemplateRef, ref, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createTextVNode, Fragment, renderList, normalizeClass, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, createBlock, nextTick } from 'vue';
+import { ElIcon } from 'element-plus';
+import { Warning } from '@element-plus/icons-vue';
+import { doValidate } from './js/index.mjs';
+import { useAppTable } from '../hyTable/js/useAppTable.mjs';
+import { isArray, isObject } from '../../utils/is.mjs';
+import { cloneDeep } from '../../utils/handler.mjs';
+import { HyButton } from '../hyButton/index.mjs';
+import { HyTable } from '../hyTable/index.mjs';
+import { HyForm } from '../hyForm/index.mjs';
+import { resetAppFormValue } from '../hyForm/js/useAppForm.mjs';
 
 import "./style/tableForm.scss";
 
@@ -6,14 +16,449 @@ const __default__ = defineComponent({
   name: "HyTableForm"
 });
 const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  props: {},
-  emits: [],
+  props: {
+    // 表格配置项
+    tableColumns: {
+      // 表格的列
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    formColumns: {
+      type: Array,
+      default: () => []
+    },
+    rules: {
+      type: Object,
+      default: () => ({})
+    },
+    emptyText: {
+      // 空数据时显示的文本内容
+      type: String
+    },
+    fontSize: {
+      // 字体大小
+      type: Number,
+      default: 14
+    },
+    rowClickExpand: {
+      // 点击行展开
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 表单配置项
+    columnNum: {
+      type: Number,
+      default: 2
+    },
+    size: {
+      type: String,
+      default: "default"
+      // 'large' | 'default' | 'small'
+    }
+  },
+  emits: ["validate"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    __expose({});
+    const props = __props;
+    const emits = __emit;
+    const tableRef = useTemplateRef("tableRef");
+    const formRef = useTemplateRef("formRef");
+    const dataSource = ref([]);
+    const tabList = ref([
+      { label: "\u5168\u90E8\u6570\u636E", value: "all" },
+      { label: "\u4EC5\u663E\u793A\u5F02\u5E38\u6570\u636E", value: "abnormal" }
+    ]);
+    const tabValue = ref("all");
+    const { tableColumns: operatorColumn } = useAppTable({
+      columns: [
+        {
+          type: "operator",
+          // prop 改为 type
+          width: 64,
+          operator: [
+            {
+              label: "\u5220\u9664",
+              desc: "\u5220\u9664",
+              svgName: "ops-linear-delete",
+              className: "text-danger-2",
+              handler: onDeleteRowHandler
+            }
+          ]
+        }
+      ]
+    });
+    const isExpandValidate = ref(false);
+    const tableFormColumns = computed(() => {
+      if (!props.tableColumns) return [];
+      return [...props.tableColumns, ...operatorColumn.value];
+    });
+    const expandColumn = computed(() => {
+      return props.tableColumns.find((item) => item.type === "expand");
+    });
+    const statistics = computed(() => {
+      return dataSource.value.reduce(
+        ({ success, failed, total }, data) => {
+          if (!data.errorMsg) {
+            success++;
+          } else {
+            failed++;
+          }
+          return { success, failed, total };
+        },
+        { success: 0, failed: 0, total: dataSource.value.length }
+      );
+    });
+    function setData(dataSource2) {
+      if (!tableRef.value) return;
+      tableRef.value.setData(dataSource2);
+    }
+    function rowClassName({ row, rowIndex }) {
+      if (row.errorMsg) {
+        return "hy-el-table-v2__row-error";
+      }
+    }
+    function onTabChange(value) {
+      if (tabValue.value === value) return;
+      tabValue.value = value;
+      if (tabValue.value === "all") {
+        setData(dataSource.value);
+      } else {
+        const data = dataSource.value.filter((data2) => {
+          return !!data2.errorMsg;
+        });
+        setData(data);
+      }
+    }
+    async function onExpandRowChange(row) {
+      await nextTick();
+      if (!formRef.value) return;
+      const valid = await initValidateHandler([row]);
+      if (valid) return;
+      formRef.value.validate();
+      isExpandValidate.value = true;
+    }
+    function onDeleteRowHandler(params) {
+      const { $index } = params;
+      dataSource.value.splice($index, 1);
+    }
+    async function onAddRowHandler() {
+      const data = resetAppFormValue(props.formColumns, {
+        onlyId: /* @__PURE__ */ Symbol("onlyId")
+      });
+      await initValidateHandler([data]);
+      dataSource.value.push(data);
+    }
+    async function initValidateHandler(dataSource2) {
+      let promiseList = [];
+      for (const data of dataSource2) {
+        promiseList.push(
+          new Promise(async (resolve, reject) => {
+            try {
+              const res = await doValidate(data, props.formColumns, props.rules);
+              data.errorMsg = data.errorMsg && !data.errorMsg.prop ? data.errorMsg : null;
+              data.errorMap = /* @__PURE__ */ new Map();
+              resolve();
+            } catch (error) {
+              const errorMap = /* @__PURE__ */ new Map();
+              error.forEach((item, index) => {
+                const errData = {
+                  prop: item.field,
+                  message: item.message || `${item.field} is required`
+                };
+                if (!data.errorMsg) {
+                  data.errorMsg = errData;
+                }
+                errorMap.set(errData.prop, errData.message);
+              });
+              data.errorMap = errorMap;
+              reject();
+            }
+          })
+        );
+      }
+      if (!promiseList.length) return true;
+      const result = await Promise.allSettled(promiseList);
+      return result.every((res) => res.status === "fulfilled");
+    }
+    async function onValidateHandler(row, { prop, isValid, message }) {
+      if (!row.errorMap) {
+        row.errorMap = /* @__PURE__ */ new Map();
+      }
+      if (isValid) {
+        row.errorMap.delete(prop);
+        if (row.errorMsg && (row.errorMsg.prop === prop || !row.errorMap.has(prop))) {
+          if (row.errorMap.size) {
+            const [prop2, message2] = Array.from(row.errorMap.entries())[0];
+            row.errorMsg = { prop: prop2, message: message2 };
+          } else {
+            row.errorMsg = null;
+          }
+        }
+      } else {
+        row.errorMap.set(prop, message);
+        if (!row.errorMsg || !row.errorMsg.prop) {
+          row.errorMsg = {
+            prop,
+            message
+          };
+        }
+      }
+      const { onlyId, errorMsg, errorMap, children, ...data } = row;
+      emits("validate", {
+        row: data,
+        prop,
+        isValid,
+        message,
+        ...statistics.value
+      });
+      console.log("validate", row, { prop, isValid, message });
+    }
+    __expose({
+      setData(data) {
+        dataSource.value = cloneDeep(data, true);
+        dataSource.value.forEach((item) => {
+          item.onlyId = /* @__PURE__ */ Symbol("onlyId");
+        });
+        initValidateHandler(dataSource.value);
+        setData(dataSource.value);
+      },
+      deleteData(data) {
+        if (!isArray(data)) {
+          data = isObject(data) ? [data] : [];
+        }
+        const keySet = data.reduce((set, item) => {
+          if (item.onlyId) set.add(item.onlyId);
+          return set;
+        }, /* @__PURE__ */ new Set());
+        console.log("keySet", Array.from(keySet.values()));
+        if (!keySet.size) return;
+        for (let i = 0; i < dataSource.value.length; i++) {
+          const target = dataSource.value[i];
+          if (keySet.has(target.onlyId)) {
+            keySet.delete(target.onlyId);
+            onDeleteRowHandler({ $index: i });
+            i--;
+          }
+          if (keySet.size === 0) break;
+        }
+      },
+      getTableDataSource() {
+        return dataSource.value.reduce((list, item) => {
+          const { onlyId, errorMsg, errorMap, children, ...data } = item;
+          list.push(data);
+          return list;
+        }, []);
+      },
+      getStatistics() {
+        return { ...statistics.value };
+      },
+      validate() {
+        return {
+          ...statistics.value,
+          dataSource: dataSource.value
+        };
+      }
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createCommentVNode(" HyTableForm \u5185\u5BB9 ")
-      ]);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref: "containerRef",
+          class: "hy-table-form"
+        },
+        [
+          createElementVNode("div", { class: "flex items-center justify-between mb-3 text-sm" }, [
+            createElementVNode("div", { class: "flex items-center gap-5" }, [
+              createElementVNode("div", { class: "text-auxiliary" }, [
+                createElementVNode("span", { class: "mr-1" }, "\u89E3\u6790\u603B\u6570"),
+                createElementVNode(
+                  "span",
+                  null,
+                  toDisplayString(dataSource.value.length),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              statistics.value.success ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "flex items-center text-success"
+              }, [
+                createElementVNode("div", { class: "w-1.5 h-1.5 mr-1.5 rounded-full bg-success" }),
+                createElementVNode("span", null, "\u5C31\u7EEA"),
+                createElementVNode(
+                  "span",
+                  null,
+                  toDisplayString(statistics.value.success),
+                  1
+                  /* TEXT */
+                )
+              ])) : createCommentVNode("v-if", true),
+              statistics.value.failed ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: "flex items-center text-danger-2"
+              }, [
+                createElementVNode("div", { class: "w-1.5 h-1.5 mr-1.5 rounded-full bg-danger-2" }),
+                createElementVNode("span", null, "\u5F02\u5E38"),
+                createElementVNode(
+                  "span",
+                  null,
+                  toDisplayString(statistics.value.failed),
+                  1
+                  /* TEXT */
+                )
+              ])) : createCommentVNode("v-if", true)
+            ]),
+            createElementVNode("div", { class: "flex items-center gap-3" }, [
+              createVNode(unref(HyButton), {
+                type: "success",
+                size: "small",
+                "svg-name": "ops-button-add",
+                onClick: onAddRowHandler
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("\u6DFB\u52A0\u6570\u636E")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              createElementVNode("div", { class: "hy-table-form-tabs" }, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(tabList.value, (item) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: item.value,
+                      class: normalizeClass(["hy-table-form-tab-button", { "is-select": item.value === tabValue.value }]),
+                      onClick: ($event) => onTabChange(item.value)
+                    }, toDisplayString(item.label), 11, ["onClick"]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ])
+          ]),
+          createVNode(unref(HyTable), mergeProps({
+            ref_key: "tableRef",
+            ref: tableRef
+          }, _ctx.$attrs, {
+            type: "virtual",
+            "row-key": "onlyId",
+            tableColumns: tableFormColumns.value,
+            rowClassName,
+            showHeader: true,
+            emptyText: __props.emptyText,
+            fontSize: __props.fontSize,
+            rowClickExpand: __props.rowClickExpand,
+            showEditable: false,
+            showOperate: false,
+            showPagination: false,
+            expandMode: "accordion",
+            onExpandChange: onExpandRowChange
+          }), createSlots({
+            validateStatus: withCtx(({ row }) => [
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(["flex items-center gap-1.5", [row.errorMsg ? "text-danger-2" : "text-success"]])
+                },
+                [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(["w-1.5 h-1.5 rounded-full", [row.errorMsg ? "bg-danger-2" : "bg-success"]])
+                    },
+                    null,
+                    2
+                    /* CLASS */
+                  ),
+                  createElementVNode(
+                    "div",
+                    { class: "text-sm" },
+                    toDisplayString(!row.errorMsg ? "\u51C6\u5907\u5C31\u7EEA" : row.errorMsg.prop ? "\u5185\u5BB9\u6709\u8BEF" : "\u6821\u9A8C\u5931\u8D25"),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            renderList(_ctx.$slots, (_, slotName) => {
+              return {
+                name: slotName,
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(scope)))
+                ])
+              };
+            }),
+            expandColumn.value && !_ctx.$slots[expandColumn.value.slot] && __props.formColumns ? {
+              name: expandColumn.value.slot,
+              fn: withCtx(({ row }) => [
+                createElementVNode("div", { class: "w-full pl-[52px] pr-[62px] pb-2" }, [
+                  createElementVNode("div", { class: "h-[32px]" }, [
+                    createElementVNode(
+                      "div",
+                      {
+                        class: normalizeClass(["flex items-center gap-1.5 text-danger-2 transition-all duration-300 overflow-hidden", [row.errorMsg ? "h-full" : "h-0"]])
+                      },
+                      [
+                        row.errorMsg ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+                          default: withCtx(() => [
+                            createVNode(unref(Warning))
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })) : createCommentVNode("v-if", true),
+                        createElementVNode(
+                          "span",
+                          null,
+                          toDisplayString(row.errorMsg ? row.errorMsg.message : ""),
+                          1
+                          /* TEXT */
+                        )
+                      ],
+                      2
+                      /* CLASS */
+                    )
+                  ]),
+                  createVNode(unref(HyForm), {
+                    ref_key: "formRef",
+                    ref: formRef,
+                    model: row,
+                    columns: __props.formColumns,
+                    rules: __props.rules,
+                    "show-message": false,
+                    class: "px-0",
+                    columnNum: __props.columnNum,
+                    size: __props.size,
+                    onValidate: (prop, isValid, message) => onValidateHandler(row, { prop, isValid, message })
+                  }, createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    renderList(_ctx.$slots, (_, slotName) => {
+                      return {
+                        name: slotName,
+                        fn: withCtx((scope) => [
+                          renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(scope)))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["model", "columns", "rules", "columnNum", "size", "onValidate"])
+                ])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["tableColumns", "emptyText", "fontSize", "rowClickExpand"])
+        ],
+        512
+        /* NEED_PATCH */
+      );
     };
   }
 });

package/es/components/hyTooltip/tooltip.vue.mjs

@@ -1,7 +1,7 @@
 import { ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createElementBlock, normalizeClass, defineComponent } from 'vue';
 import { ElTooltip } from 'element-plus';
-import { useTooltipConfig } from '../../hooks/useTooltipConfig.mjs';
 import { isNumber, isBoolean, isOverflowing } from '../../utils/is.mjs';
+import { useTooltipConfig } from '../../hooks/useTooltipConfig.mjs';
 
 import "./style/tooltip.scss";
 
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       default: () => {
         const { tooltipConfig } = useTooltipConfig();
         const { isAlways } = tooltipConfig.value;
-        return isBoolean(isAlways) ? isAlways : false;
+        return isBoolean(isAlways) ? isAlways : true;
       }
     },
     disabled: {
@@ -34,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
     },
     content: {
-      type: String
+      type: [String, Number]
     }
   },
   setup(__props) {
@@ -66,16 +66,16 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         "popper-class": "max-w-[300px]"
       }, _ctx.$attrs, {
         disabled: isDisabled.value,
-        content: _ctx.$slots.content ? void 0 : __props.content
+        content: _ctx.$slots.content ? void 0 : unref(isNumber)(__props.content) ? `${__props.content}` : __props.content
       }), createSlots({
         default: withCtx(() => [
-          __props.isAlways ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+          __props.isAlways ? renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(
               toDisplayString(__props.content),
               1
               /* TEXT */
             )
-          ]) : (openBlock(), createElementBlock(
+          ], void 0, 0) : (openBlock(), createElementBlock(
             "span",
             {
               key: 1,

package/es/components/hyTree/style/index.css

@@ -0,0 +1 @@
+@import url('hy-virtual-tree/style');

package/es/components/hyTree/tree.vue.mjs

@@ -6,6 +6,8 @@ import { searchTypeConfig, treeTypeConfig } from './config/tree-config.mjs';
 import { useMixins } from '../../hooks/useMixins.mjs';
 import { HyIcon } from '../hyIcon/index.mjs';
 
+import "./style/index.css";
+
 const __default__ = defineComponent({
   name: "HyTree"
 });