hy-dispatch-ui-v3 0.2.66 → 0.2.68

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

@@ -7,7 +7,6 @@
     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));
@@ -29,34 +28,22 @@
         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);
-  
+          /* 纵向线 */
+          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%
-        );
+        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;
@@ -66,14 +53,10 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: radial-gradient(
-                circle at 50% 50%,
-                rgba(0, 229, 255, 0.05) 0%,
-                transparent 70%
-        );
+        background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
       }
     }
-  
+
     .hy-el-upload {
       width: 100%;
       height: 100%;
@@ -84,17 +67,21 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        border: none;
+        border: 1px dashed rgba(var(--hy-auxiliary));
         &:hover {
-          border-color: var(--theme);
           .type-icon-box {
             transform: translateY(-10px);
           }
         }
+        &.is-dragover {
+          border: 1px solid rgba(var(--hy-theme)) !important;
+          box-shadow: 0px 0px 6px 0px rgba(var(--hy-theme));
+          background-color: var(--hy-el-fill-color-blank) !important;
+        }
       }
     }
   }
-  
+
   .hy-batch-table-form-step-box {
     width: 100%;
     height: 260px;
@@ -103,6 +90,7 @@
     padding-top: 24px;
     border-radius: 8px;
     background-color: rgba(var(--hy-background-2), 0.5);
+    box-sizing: border-box;
     .hy-el-step {
       .hy-el-step__description {
         padding-left: 0px !important;
@@ -122,6 +110,7 @@
     border: 1px dashed rgba(var(--hy-auxiliary), 0.5);
     border-radius: 4px;
     background: rgba(var(--hy-background-2), 0.5);
+    box-sizing: border-box;
   }
 
   .hy-batch-table-form-upload-bg {
@@ -141,13 +130,9 @@
       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);
+        /* 纵向线 */
+        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;
@@ -159,16 +144,8 @@
       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%
-      );
+      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;
@@ -178,12 +155,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: radial-gradient(
-              circle at 50% 50%,
-              rgba(0, 229, 255, 0.05) 0%,
-              transparent 70%
-      );
+      background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
     }
   }
 }
-

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

@@ -19,6 +19,7 @@
     border-radius: 4px;
     padding: 2px;
     font-size: 0.75rem;
+    box-sizing: border-box;
     .hy-table-form-tab-button {
       display: flex;
       align-items: center;
@@ -28,15 +29,15 @@
       border-radius: 2px;
       cursor: pointer;
       transition: all 0.3s linear;
+      box-sizing: border-box;
       &:hover {
         color: rgba(var(--hy-main));
       }
       &.is-select {
         color: rgba(var(--hy-main));
-        background: linear-gradient(180deg, rgba(var(--hy-theme)) 0%, #2A4968 100%);
+        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,8 +1,10 @@
-import { defineComponent, onMounted, watch, useTemplateRef, ref, computed, nextTick, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, createBlock, unref, withCtx, createTextVNode, Fragment, renderList, normalizeClass, createVNode, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { defineComponent, useTemplateRef, ref, computed, nextTick, provide, onMounted, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, createBlock, unref, withCtx, createTextVNode, Fragment, renderList, normalizeClass, createVNode, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, withDirectives, vShow } from 'vue';
 import '../index.mjs';
 import '../../utils/index.mjs';
+import '../../hooks/index.mjs';
 import { doValidate } from './js/index.mjs';
 import { useAppTable } from '../hyTable/js/useAppTable.mjs';
+import { useResizeObserver } from '../../hooks/useResizeObserver.mjs';
 import { resetAppFormValue } from '../hyForm/js/useAppForm.mjs';
 import { isArray, isObject } from '../../utils/is.mjs';
 import { cloneDeep } from '../../utils/handler.mjs';
@@ -71,16 +73,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    onMounted(() => {
-      watch(
-        () => dataSource.value,
-        () => {
-          emits("tableDataChange", dataSource.value);
-        },
-        { deep: true, immediate: true }
-      );
-    });
     const tableRef = useTemplateRef("tableRef");
+    const formContainerRef = useTemplateRef("formContainerRef");
     const formRef = useTemplateRef("formRef");
     const dataSource = ref([]);
     const tabList = ref([
@@ -106,7 +100,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         }
       ]
     });
-    const isExpandValidate = ref(false);
+    const statistics = ref({
+      success: 0,
+      failed: 0,
+      total: dataSource.value.length
+    });
     const tableFormColumns = computed(() => {
       if (!props.tableColumns) return [];
       return [...props.tableColumns, ...operatorColumn.value];
@@ -114,25 +112,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     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) {
+      if (row.errorMsg && row.errorMsg.message) {
         return "hy-el-table-v2__row-error";
       }
     }
@@ -143,21 +128,40 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         setData(dataSource.value);
       } else {
         const data = dataSource.value.filter((data2) => {
-          return !!data2.errorMsg;
+          return data2.errorMsg && data2.errorMsg.message;
         });
         setData(data);
       }
     }
-    async function onExpandRowChange(row) {
+    let formClientHeight, removeResize, tableScrollTop, expanding;
+    async function onExpandRowChange2(row, isExpanded) {
       if (props.onExpandRowChange) {
         props.onExpandRowChange(row);
       }
       await nextTick();
-      if (!formRef.value) return;
+      if (!formRef.value || !isExpanded) {
+        removeResize && removeResize();
+        return;
+      }
+      const instance = useResizeObserver(formContainerRef.value, async () => {
+        if (!formContainerRef.value) return;
+        const [key] = tableRef.value.getRowExpansion();
+        if (formClientHeight === formContainerRef.value.clientHeight) return;
+        if (!key) return;
+        removeResize && removeResize();
+        expanding = true;
+        tableRef.value.toggleRowExpansion(key, false);
+        await nextTick();
+        tableRef.value.toggleRowExpansion(key, true);
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        tableRef.value.scrollToTop(tableScrollTop);
+        expanding = false;
+      });
+      formClientHeight = formContainerRef.value.clientHeight;
+      removeResize = instance.removeResize;
       const valid = await initValidateHandler([row]);
       if (valid) return;
-      formRef.value.validate();
-      isExpandValidate.value = true;
+      triggerValidate();
     }
     function onDeleteRowHandler(params) {
       const { $index } = params;
@@ -181,6 +185,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         ...statistics.value
       });
     }
+    function onScrollHandler(params) {
+      if (expanding) return;
+      tableScrollTop = params.scrollTop;
+    }
+    const validateTriggerId = ref(0);
+    function triggerValidate() {
+      validateTriggerId.value++;
+    }
     async function initValidateHandler(dataSource2) {
       let promiseList = [];
       for (const data of dataSource2) {
@@ -188,7 +200,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           new Promise(async (resolve, reject) => {
             try {
               await doValidate(data, props.formColumns, props.rules);
-              data.errorMsg = data.errorMsg && !data.errorMsg.prop ? data.errorMsg : null;
+              if (!data.errorMsg) {
+                data.errorMsg = { prop: "", message: "" };
+              } else if (!data.errorMsg.prop) {
+                data.errorMsg.prop = data.errorMsg.prop;
+                data.errorMsg.message = data.errorMsg.message;
+              }
               data.errorMap = /* @__PURE__ */ new Map();
               resolve();
             } catch (error) {
@@ -198,8 +215,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   prop: item.field,
                   message: item.message || `${item.field} is required`
                 };
-                if (!data.errorMsg) {
+                if (data && !data.errorMsg) {
                   data.errorMsg = errData;
+                } else if (data && !data.errorMsg.prop && !data.errorMsg.message) {
+                  data.errorMsg.prop = errData.errorMsg.prop;
+                  data.errorMsg.message = errData.errorMsg.message;
                 }
                 errorMap.set(errData.prop, errData.message);
               });
@@ -219,7 +239,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
       try {
         await doValidate(row, props.formColumns, props.rules);
-        row.errorMsg = null;
+        if (!row.errorMsg) {
+          row.errorMsg = { prop: "", message: "" };
+        } else {
+          row.errorMsg.prop = "";
+          row.errorMsg.message = "";
+        }
         row.errorMap = /* @__PURE__ */ new Map();
       } catch (error) {
         let errMsg = null;
@@ -235,8 +260,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           errorMap2.set(errData.prop, errData.message);
         });
         row.errorMap = errorMap2;
-        row.errorMsg = errMsg;
+        if (!row.errorMsg) {
+          row.errorMsg = { prop: "", message: "" };
+        } else {
+          row.errorMsg.prop = errMsg.prop;
+          row.errorMsg.message = errMsg.message;
+        }
       }
+      await nextTick();
       const { onlyId, errorMsg, errorMap, children, ...data } = row;
       emits("validate", {
         row: data,
@@ -246,6 +277,30 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         ...statistics.value
       });
     }
+    provide("validateTriggerId", validateTriggerId);
+    onMounted(() => {
+      watch(
+        () => dataSource.value,
+        () => {
+          emits("tableDataChange", dataSource.value);
+          const { success, failed } = dataSource.value.reduce(
+            ({ success: success2, failed: failed2 }, data) => {
+              if (data.errorMsg && data.errorMsg.message) {
+                failed2++;
+              } else {
+                success2++;
+              }
+              return { success: success2, failed: failed2 };
+            },
+            { success: 0, failed: 0 }
+          );
+          statistics.value.success = success;
+          statistics.value.failed = failed;
+          statistics.value.total = dataSource.value.length;
+        },
+        { deep: true, immediate: true }
+      );
+    });
     __expose({
       setData(data) {
         dataSource.value = cloneDeep(data, true);
@@ -266,7 +321,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           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];
@@ -293,6 +347,26 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           ...statistics.value,
           dataSource: dataSource.value
         };
+      },
+      async getOptions() {
+        if (formRef.value) {
+          await formRef.value.getOptions();
+        }
+      },
+      async getOptionsFields(keys) {
+        if (formRef.value) {
+          await formRef.value.getOptionsFields(keys);
+        }
+      },
+      async getOptionsError() {
+        if (formRef.value) {
+          await formRef.value.getOptionsError();
+        }
+      },
+      getOptionsByField(key) {
+        if (formRef.value) {
+          return formRef.value.getOptionsByField(key);
+        }
       }
     });
     return (_ctx, _cache) => {
@@ -391,19 +465,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             showOperate: false,
             showPagination: false,
             expandMode: "accordion",
-            onExpandChange: onExpandRowChange
+            onExpandChange: onExpandRowChange2,
+            onScroll: onScrollHandler
           }), createSlots({
             validateStatus: withCtx(({ row }) => [
               createElementVNode(
                 "div",
                 {
-                  class: normalizeClass(["flex items-center gap-1.5", [row.errorMsg ? "text-danger-2" : "text-success"]])
+                  class: normalizeClass(["flex items-center gap-1.5", [row.errorMsg && row.errorMsg.message ? "text-danger-2" : "text-success"]])
                 },
                 [
                   createElementVNode(
                     "div",
                     {
-                      class: normalizeClass(["w-1.5 h-1.5 rounded-full", [row.errorMsg ? "bg-danger-2" : "bg-success"]])
+                      class: normalizeClass(["w-1.5 h-1.5 rounded-full", [row.errorMsg && row.errorMsg.message ? "bg-danger-2" : "bg-success"]])
                     },
                     null,
                     2
@@ -412,7 +487,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   createElementVNode(
                     "div",
                     { class: "text-sm" },
-                    toDisplayString(!row.errorMsg ? "\u51C6\u5907\u5C31\u7EEA" : row.errorMsg.prop ? "\u5185\u5BB9\u6709\u8BEF" : "\u6821\u9A8C\u5931\u8D25"),
+                    toDisplayString(row.errorMsg && row.errorMsg.message ? row.errorMsg.prop ? "\u5185\u5BB9\u6709\u8BEF" : "\u6821\u9A8C\u5931\u8D25" : "\u51C6\u5907\u5C31\u7EEA"),
                     1
                     /* TEXT */
                   )
@@ -437,53 +512,68 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               fn: withCtx(({ row }) => [
                 createElementVNode("div", { class: "w-full pl-[52px] pr-[62px] pb-2" }, [
                   createElementVNode("div", { class: "h-[32px]" }, [
-                    createElementVNode(
+                    withDirectives(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"]])
+                        class: normalizeClass(["flex items-center gap-1.5 text-danger-2 transition-all duration-300 overflow-hidden", [row.errorMsg && row.errorMsg.message ? "h-full" : "h-0"]])
                       },
                       [
-                        row.errorMsg ? (openBlock(), createBlock(unref(HyIcon), {
-                          key: 0,
+                        createVNode(unref(HyIcon), {
                           "svg-name": "dispatch-share1-prompt",
                           class: "!w-3 !h-3"
-                        })) : createCommentVNode("v-if", true),
+                        }),
                         createElementVNode(
                           "span",
                           null,
-                          toDisplayString(row.errorMsg ? row.errorMsg.message : ""),
+                          toDisplayString(row.errorMsg && row.errorMsg.message ? row.errorMsg.message : ""),
                           1
                           /* TEXT */
                         )
                       ],
                       2
                       /* CLASS */
-                    )
+                    ), [
+                      [vShow, row.errorMsg && row.errorMsg.message]
+                    ])
                   ]),
-                  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"])
+                  createElementVNode(
+                    "div",
+                    {
+                      ref_key: "formContainerRef",
+                      ref: formContainerRef,
+                      class: "w-full"
+                    },
+                    [
+                      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,
+                        isTableForm: "",
+                        onValidate: (prop, isValid, message) => onValidateHandler(row, { prop, isValid, message }),
+                        onOptionsStatus: _ctx.$attrs.onOptionsStatus
+                      }, 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", "onOptionsStatus"])
+                    ],
+                    512
+                    /* NEED_PATCH */
+                  )
                 ])
               ]),
               key: "0"

package/es/components/hyTimePicker/timePicker.vue.mjs

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { ElTimePicker } from 'element-plus';
 import '../../utils/index.mjs';
 import '../../hooks/index.mjs';
-import { useLocale } from '../../hooks/useLocale.mjs';
+import { $t } from '../../hooks/useLocale.mjs';
 import { isArray } from '../../utils/is.mjs';
 
 import "./style/timePicker.scss";
@@ -41,7 +41,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale();
     const appTimePicker = useTemplateRef("appTimePicker");
     const timeValue = useModel(__props, "modelValue");
     const startValue = useModel(__props, "start");
@@ -50,13 +49,13 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       if (props.startPlaceholder) {
         return props.startPlaceholder;
       }
-      return t("timePicker.startTime");
+      return $t("timePicker.startTime");
     });
     const endPlaceholder = computed(() => {
       if (props.endPlaceholder) {
         return props.endPlaceholder;
       }
-      return t("timePicker.endTime");
+      return $t("timePicker.endTime");
     });
     const disabledSecondsHandler = computed(() => {
       return (hour, minute, role, comparingDate) => {
@@ -145,7 +144,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         valueFormat: timeFormHandler(__props.valueFormat),
         disabledSeconds: disabledSecondsHandler.value,
         "start-placeholder": startPlaceholder.value,
-        "range-separator": unref(t)("timePicker.to"),
+        "range-separator": unref($t)("timePicker.to"),
         "end-placeholder": endPlaceholder.value,
         onChange: onChangeHandler
       }), createSlots({