hy-dispatch-ui-v3 0.2.31 → 0.2.33

package/lib/components/hyTableForm/tableForm.vue.js

@@ -3,6 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var index$3 = require('./js/index.js');
+var useAppTable = require('../hyTable/js/useAppTable.js');
+var handler = require('../../utils/handler.js');
+var index$1 = require('../hyTable/index.js');
+var index$2 = require('../hyForm/index.js');
+var useAppForm = require('../hyForm/js/useAppForm.js');
+var is = require('../../utils/is.js');
+var index = require('../hyButton/index.js');
 
 import "./style/tableForm.scss";
 
@@ -10,14 +20,449 @@ const __default__ = vue.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 = vue.useTemplateRef("tableRef");
+    const formRef = vue.useTemplateRef("formRef");
+    const dataSource = vue.ref([]);
+    const tabList = vue.ref([
+      { label: "\u5168\u90E8\u6570\u636E", value: "all" },
+      { label: "\u4EC5\u663E\u793A\u5F02\u5E38\u6570\u636E", value: "abnormal" }
+    ]);
+    const tabValue = vue.ref("all");
+    const { tableColumns: operatorColumn } = useAppTable.useAppTable({
+      columns: [
+        {
+          type: "operator",
+          // prop 改为 type
+          width: 64,
+          operator: [
+            {
+              label: "\u5220\u9664",
+              subLabel: "\u5220\u9664",
+              svgName: "ops-linear-delete",
+              className: "text-danger-2",
+              handler: onDeleteRowHandler
+            }
+          ]
+        }
+      ]
+    });
+    const isExpandValidate = vue.ref(false);
+    const tableFormColumns = vue.computed(() => {
+      if (!props.tableColumns) return [];
+      return [...props.tableColumns, ...operatorColumn.value];
+    });
+    const expandColumn = vue.computed(() => {
+      return props.tableColumns.find((item) => item.type === "expand");
+    });
+    const statistics = vue.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 vue.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 = useAppForm.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 index$3.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 = handler.cloneDeep(data, true);
+        dataSource.value.forEach((item) => {
+          item.onlyId = /* @__PURE__ */ Symbol("onlyId");
+        });
+        initValidateHandler(dataSource.value);
+        setData(dataSource.value);
+      },
+      deleteData(data) {
+        if (!is.isArray(data)) {
+          data = is.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 vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.createCommentVNode(" HyTableForm \u5185\u5BB9 ")
-      ]);
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref: "containerRef",
+          class: "hy-table-form"
+        },
+        [
+          vue.createElementVNode("div", { class: "flex items-center justify-between mb-3 text-sm" }, [
+            vue.createElementVNode("div", { class: "flex items-center gap-5" }, [
+              vue.createElementVNode("div", { class: "text-auxiliary" }, [
+                vue.createElementVNode("span", { class: "mr-1" }, "\u89E3\u6790\u603B\u6570"),
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  vue.toDisplayString(dataSource.value.length),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              statistics.value.success ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "flex items-center text-success"
+              }, [
+                vue.createElementVNode("div", { class: "w-1.5 h-1.5 mr-1.5 rounded-full bg-success" }),
+                vue.createElementVNode("span", null, "\u5C31\u7EEA"),
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  vue.toDisplayString(statistics.value.success),
+                  1
+                  /* TEXT */
+                )
+              ])) : vue.createCommentVNode("v-if", true),
+              statistics.value.failed ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "flex items-center text-danger-2"
+              }, [
+                vue.createElementVNode("div", { class: "w-1.5 h-1.5 mr-1.5 rounded-full bg-danger-2" }),
+                vue.createElementVNode("span", null, "\u5F02\u5E38"),
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  vue.toDisplayString(statistics.value.failed),
+                  1
+                  /* TEXT */
+                )
+              ])) : vue.createCommentVNode("v-if", true)
+            ]),
+            vue.createElementVNode("div", { class: "flex items-center gap-3" }, [
+              vue.createVNode(vue.unref(index.HyButton), {
+                type: "success",
+                size: "small",
+                "svg-name": "ops-button-add",
+                onClick: onAddRowHandler
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode("\u6DFB\u52A0\u6570\u636E")
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              vue.createElementVNode("div", { class: "hy-table-form-tabs" }, [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(tabList.value, (item) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: item.value,
+                      class: vue.normalizeClass(["hy-table-form-tab-button", { "is-select": item.value === tabValue.value }]),
+                      onClick: ($event) => onTabChange(item.value)
+                    }, vue.toDisplayString(item.label), 11, ["onClick"]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ])
+          ]),
+          vue.createVNode(vue.unref(index$1.HyTable), vue.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
+          }), vue.createSlots({
+            validateStatus: vue.withCtx(({ row }) => [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(["flex items-center gap-1.5", [row.errorMsg ? "text-danger-2" : "text-success"]])
+                },
+                [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(["w-1.5 h-1.5 rounded-full", [row.errorMsg ? "bg-danger-2" : "bg-success"]])
+                    },
+                    null,
+                    2
+                    /* CLASS */
+                  ),
+                  vue.createElementVNode(
+                    "div",
+                    { class: "text-sm" },
+                    vue.toDisplayString(!row.errorMsg ? "\u51C6\u5907\u5C31\u7EEA" : row.errorMsg.prop ? "\u5185\u5BB9\u6709\u8BEF" : "\u6821\u9A8C\u5931\u8D25"),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            vue.renderList(_ctx.$slots, (_, slotName) => {
+              return {
+                name: slotName,
+                fn: vue.withCtx((scope) => [
+                  vue.renderSlot(_ctx.$slots, slotName, vue.normalizeProps(vue.guardReactiveProps(scope)))
+                ])
+              };
+            }),
+            expandColumn.value && !_ctx.$slots[expandColumn.value.slot] && __props.formColumns ? {
+              name: expandColumn.value.slot,
+              fn: vue.withCtx(({ row }) => [
+                vue.createElementVNode("div", { class: "w-full pl-[52px] pr-[62px] pb-2" }, [
+                  vue.createElementVNode("div", { class: "h-[32px]" }, [
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        class: vue.normalizeClass(["flex items-center gap-1.5 text-danger-2 transition-all duration-300 overflow-hidden", [row.errorMsg ? "h-full" : "h-0"]])
+                      },
+                      [
+                        row.errorMsg ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), { key: 0 }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.Warning))
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })) : vue.createCommentVNode("v-if", true),
+                        vue.createElementVNode(
+                          "span",
+                          null,
+                          vue.toDisplayString(row.errorMsg ? row.errorMsg.message : ""),
+                          1
+                          /* TEXT */
+                        )
+                      ],
+                      2
+                      /* CLASS */
+                    )
+                  ]),
+                  vue.createVNode(vue.unref(index$2.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 })
+                  }, vue.createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    vue.renderList(_ctx.$slots, (_, slotName) => {
+                      return {
+                        name: slotName,
+                        fn: vue.withCtx((scope) => [
+                          vue.renderSlot(_ctx.$slots, slotName, vue.normalizeProps(vue.guardReactiveProps(scope)))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["model", "columns", "rules", "columnNum", "size", "onValidate"])
+                ])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["tableColumns", "emptyText", "fontSize", "rowClickExpand"])
+        ],
+        512
+        /* NEED_PATCH */
+      );
     };
   }
 });

package/lib/components/hyTooltip/tooltip.vue.js

@@ -38,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
     },
     content: {
-      type: String
+      type: [String, Number]
     }
   },
   setup(__props) {
@@ -70,7 +70,7 @@ 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 : vue.unref(is.isNumber)(__props.content) ? `${__props.content}` : __props.content
       }), vue.createSlots({
         default: vue.withCtx(() => [
           __props.isAlways ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, () => [

package/lib/components/hyVideoPlayer/cpns/mediaLoading.vue.js

@@ -23,7 +23,7 @@ const _sfc_main = {
       return vue.openBlock(), vue.createElementBlock(
         "div",
         {
-          class: "tech-loader",
+          class: "hy-tech-loader",
           style: vue.normalizeStyle({ width: __props.width + "px", height: __props.height + "px" })
         },
         [

package/lib/components/hyVideoPlayer/style/mediaLoading.scss

@@ -1,5 +1,5 @@
 /* 动效组件保持不变 */
-.tech-loader {
+.hy-tech-loader {
   position: relative;
   z-index: 2;
   &::before {
@@ -24,7 +24,7 @@
     border-top-color: #00ffff;
     border-right-color: #00ffff;
     box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
-    animation: spin 1s linear infinite;
+    animation: hy-tech-loader-spin 1s linear infinite;
   }
   .tech-center-dot {
     position: absolute;
@@ -36,11 +36,11 @@
     background-color: #00ffff;
     border-radius: 50%;
     box-shadow: 0 0 10px #00ffff;
-    animation: pulse 1.5s ease-in-out infinite;
+    animation: hy-tech-loader-pulse 1.5s ease-in-out infinite;
   }
 }
 
-@keyframes spin {
+@keyframes hy-tech-loader-spin {
   0% {
     transform: rotate(0deg);
   }
@@ -49,7 +49,7 @@
   }
 }
 
-@keyframes pulse {
+@keyframes hy-tech-loader-pulse {
   0%,
   100% {
     opacity: 0.5;

package/lib/components/hyVideoPlayer/style/videoPlayer.scss

@@ -1,4 +1,4 @@
-.video-player-content {
+.hy-video-player-content {
   width: 100%;
   height: 400px;
   border: 1px solid rgba(var(--hy-border));
@@ -12,11 +12,11 @@
   video {
     width: 100%;
   }
-  &.video-player-content-pick-up {
+  &.hy-video-player-content-pick-up {
     height: 60px !important;
   }
   // 全屏播放器样式
-  &.full-video-player-content {
+  &.hy-full-video-player-content {
     height: 100% !important;
     position: fixed;
     left: 0;
@@ -72,7 +72,7 @@
       }
     }
   }
-  &:not(.video-player-content-pick-up) {
+  &:not(.hy-video-player-content-pick-up) {
     video {
       height: 0;
       flex-grow: 1;
@@ -238,15 +238,16 @@
       rgba(28, 51, 74, 0) 100%
     );
   }
+
 }
 
-.popover-volume-slider {
+.hy-video-player-popover-volume-slider {
   min-width: auto !important;
   width: 40px !important;
   padding: 16px 0;
 }
 
-.popover-speed {
+.hy-video-player-popover-speed {
   min-width: auto !important;
   width: 62px !important;
   padding: 0px !important;

package/lib/components/hyVideoPlayer/videoPlayer.vue.js

@@ -204,9 +204,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         {
           ref_key: "videoWrapperRef",
           ref: videoWrapperRef,
-          class: vue.normalizeClass(["video-player-content", {
-            "video-player-content-pick-up": !vue.unref(isExpand) && !vue.unref(isFullScreen),
-            "full-video-player-content": vue.unref(isFullScreen)
+          class: vue.normalizeClass(["hy-video-player-content", {
+            "hy-video-player-content-pick-up": !vue.unref(isExpand) && !vue.unref(isFullScreen),
+            "hy-full-video-player-content": vue.unref(isFullScreen)
           }])
         },
         [
@@ -475,7 +475,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                     placement: "top",
                     trigger: "click",
                     appendToBody: false,
-                    "popper-class": "popover-speed"
+                    "popper-class": "hy-video-player-popover-speed"
                   }, {
                     reference: vue.withCtx(() => [
                       vue.createElementVNode(
@@ -513,7 +513,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                     placement: "top",
                     appendToBody: false,
                     trigger: "click",
-                    "popper-class": "popover-volume-slider"
+                    "popper-class": "hy-video-player-popover-volume-slider"
                   }, {
                     reference: vue.withCtx(() => [
                       vue.createElementVNode("div", { class: "flex items-center justify-center" }, [
@@ -534,7 +534,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                       ])
                     ]),
                     default: vue.withCtx(() => [
-                      vue.createElementVNode("div", { class: "flex items-center justify-center" }, [
+                      vue.createElementVNode("div", { class: "flex items-center justify-center pt-3" }, [
                         vue.createVNode(vue.unref(elementPlus.ElSlider), {
                           modelValue: vue.unref(volumeValue),
                           "onUpdate:modelValue": ($event) => vue.isRef(volumeValue) ? volumeValue.value = $event : null,