hy-dispatch-ui-v3 0.1.5 → 0.2.0

package/lib/components/appMenu/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appMenu = require('./appMenu.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppMenu = handler.withInstall(appMenu.default);
+
+exports.AppMenu = AppMenu;
+exports.default = AppMenu;

package/lib/components/appMenu/style/appMenu.scss

@@ -0,0 +1,145 @@
+/* 二级导航栏 */
+.operator-menu-box {
+  width: 57px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: rgba(var(--hy-main));
+  overflow: auto;
+  padding-top: 4px;
+  transition: all 0.3s linear;
+  background:
+    linear-gradient(180deg, rgba(33, 58, 84, 0.3) 0.08%, #213a54 100%),
+    radial-gradient(
+      21% 31% at 150% 40%,
+      rgba(61, 98, 134, 0.5) 0%,
+      rgba(61, 98, 134, 0) 100%
+    );
+  border-right: 1px solid rgba(var(--hy-border));
+
+  .operator-menu-list {
+    width: 100%;
+    height: 0;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &.operator-menu-box-expand {
+    width: 240px;
+
+    .operator-menu-item {
+      width: 100%;
+      height: 58px;
+      padding: 0 16px;
+      font-size: 16px;
+      position: relative;
+      cursor: pointer;
+
+      .operator-label {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &.operator-menu-item-active {
+        &::after {
+          content: '';
+          display: block;
+          width: 2px;
+          height: 16px;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          background-color: rgba(var(--hy-theme));
+        }
+        .operator-label {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .operator-menu-item-active,
+    .operator-menu-item:hover {
+      &::before {
+        content: '';
+        display: block;
+        width: calc(100% - 4px);
+        height: calc(100% - 6px);
+        position: absolute;
+        left: 0;
+        top: 3px;
+        background: linear-gradient(
+          90deg,
+          rgba(var(--hy-theme), 0) 2%,
+          rgba(var(--hy-theme), 0.4) 100%
+        );
+        border-radius: 0px 4px 4px 0px;
+      }
+    }
+  }
+
+  &:not(.operator-menu-box-expand) {
+    .operator-menu-item {
+      width: 100%;
+      height: 68px;
+      font-size: 12px;
+      position: relative;
+      cursor: pointer;
+      margin-top: 2px;
+
+      &:first-child {
+        margin-top: 0px;
+      }
+
+      .operator-label {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        grid: 4px;
+        color: rgb(var(--hy-main));
+      }
+
+      &.operator-menu-item-active {
+        &::after {
+          content: '';
+          display: block;
+          width: 2px;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          background-color: rgba(var(--hy-theme));
+        }
+        .operator-label {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .operator-menu-item-active,
+    .operator-menu-item:hover {
+      &::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: linear-gradient(
+          90deg,
+          rgba(var(--hy-theme), 0) 2%,
+          rgba(var(--hy-theme), 0.4) 100%
+        );
+        border-radius: 0px 4px 4px 0px;
+      }
+    }
+  }
+}

package/lib/components/appOrgCascader/appOrgCascader.vue.js

@@ -27,7 +27,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
     },
     placeholder: {
-      type: String
+      type: String,
+      default: () => {
+        const { t } = useLocale.useLocale();
+        return t("cascader.pleaseSelectDepartment");
+      }
     },
     /*
      * false 直接显示输入框
@@ -81,7 +85,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale.useLocale();
     const { api } = useApi.useApi();
     const modelValue = vue.useModel(__props, "modelValue");
     const cascaderRef = vue.useTemplateRef("cascaderRef");
@@ -91,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     const cascaderValueMap = vue.ref(/* @__PURE__ */ new Map());
     const currentCompanyName = vue.computed(() => {
       const target = cascaderValueMap.value.get(modelValue.value);
-      return target == null ? void 0 : target.companyName;
+      return target?.companyName;
     });
     function getCascaderData() {
       vue.unref(api).post("organization/orgTreeSimple").then((res) => {
@@ -100,8 +103,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     }
     function handlerData(data) {
       const cascaderMap = /* @__PURE__ */ new Map();
-      const handler = (list, parentIdsList = []) => {
-        list.forEach((item) => {
+      const handler = (list = [], parentIdsList = []) => {
+        (list || []).forEach((item) => {
           item.label = item.companyName;
           item.value = item.id;
           item.parentIdsList = [...parentIdsList, item.id];
@@ -131,7 +134,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     function onChangeHanlder(value) {
       cascaderRef.value.dropDownVisible = false;
       onVisibleChangeHandler(false);
-      modelValue.value = value == null ? void 0 : value[value.length - 1];
+      modelValue.value = value?.[value.length - 1];
       if (props.changeLastLayer) {
         emits("change", modelValue.value);
       } else {
@@ -147,8 +150,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     vue.watch(
       () => props.options,
       () => {
-        var _a;
-        if ((_a = props.options) == null ? void 0 : _a.length) {
+        if (props.options?.length) {
           handlerData(props.options);
         }
       },
@@ -188,9 +190,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                 disabled: __props.disabled,
                 props: { checkStrictly: true },
                 clearable: __props.clearable,
-                placeholder: __props.placeholder || vue.unref(t)("cascader.pleaseSelectDepartment"),
+                placeholder: __props.placeholder,
                 filterable: "",
                 "show-all-levels": false,
+                "virtual-scroll": "",
                 onChange: onChangeHanlder,
                 onVisibleChange: ($event) => onVisibleChangeHandler($event)
               }, null, 8, ["modelValue", "onUpdate:modelValue", "size", "options", "disabled", "clearable", "placeholder", "onVisibleChange"])
@@ -227,9 +230,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           props: { checkStrictly: true },
           clearable: __props.clearable,
           disabled: __props.disabled,
-          placeholder: __props.placeholder || vue.unref(t)("cascader.pleaseSelectDepartment"),
+          placeholder: __props.placeholder,
           filterable: "",
           "show-all-levels": false,
+          "virtual-scroll": "",
           onChange: onChangeHanlder
         }, null, 8, ["modelValue", "onUpdate:modelValue", "class", "size", "options", "clearable", "disabled", "placeholder"]))
       ]);

package/lib/components/appSearch/appSearch.vue.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var elementPlus = require('element-plus');
 var iconsVue = require('@element-plus/icons-vue');
-var index$1 = require('../appDatePicker/index.js');
-var index$2 = require('../appOrgCascader/index.js');
+var appSearchItem = require('./cpns/appSearchItem.vue.js');
 var index = require('./js/index.js');
 var useAppSearch = require('./js/useAppSearch.js');
 var useLocale = require('../../hooks/useLocale.js');
@@ -50,10 +49,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     const emits = __emit;
     const { t } = useLocale.useLocale();
     const formItemWrapper = vue.useTemplateRef("formItemWrapper");
-    const { isExpand, containerHeight, switchShrink, shrinkDestroy } = index.useShrink(
-      props,
-      formItemWrapper
-    );
+    const { showShrink, isExpand, containerHeight, switchShrink, shrinkDestroy } = index.useShrink(props, formItemWrapper);
     const formColumnMap = vue.computed(() => {
       return (props.columns || []).reduce((map, column) => {
         if (is.isArray(column.field)) {
@@ -66,17 +62,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     });
     const filterCount = vue.computed(() => {
       const defaultValue = useAppSearch.resetAppSearchValue(props.columns);
-      const keys = Object.keys(defaultValue);
-      if (!(keys == null ? void 0 : keys.length)) return 0;
-      const keySet = keys.reduce((keySet2, key) => {
-        if (index.isEmptyValue(defaultValue[key]) ? !index.isEmptyValue(props.model[key]) : defaultValue[key] !== props.model[key]) {
-          if (vue.unref(formColumnMap).has(key)) {
-            keySet2.add(vue.unref(formColumnMap).get(key).key);
-          }
-        }
-        return keySet2;
-      }, /* @__PURE__ */ new Set());
-      return keySet.size;
+      return getFilterCount(props.model, defaultValue);
     });
     const appClass = vue.computed(() => {
       return [props.class, { "app-search-hidden": props.hidden }].filter(Boolean);
@@ -93,16 +79,37 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     vue.onUnmounted(() => {
       shrinkDestroy();
     });
-    function onChangeHandler(value, column) {
-      emits("search");
+    function getFilterCount(model, defaultValue, prop) {
+      let count = 0;
+      const keys = Object.keys(defaultValue);
+      if (!keys?.length) return count;
+      const keySet = keys.reduce((keySet2, key) => {
+        const newVal = model[key];
+        const oldVal = defaultValue[key];
+        const targetProp = prop ? `${prop}.${key}` : key;
+        if (is.isObject(oldVal)) {
+          count += getFilterCount(newVal, oldVal, targetProp);
+        } else if (is.isArray(oldVal)) {
+          if (oldVal.length > 0 && !oldVal.every((t2, i) => t2 === newVal[i])) {
+            keySet2.add(vue.unref(formColumnMap).get(key).key);
+          }
+        } else if (index.isEmptyValue(oldVal) ? !index.isEmptyValue(newVal) : oldVal !== newVal) {
+          const column = vue.unref(formColumnMap).get(targetProp);
+          if (column) {
+            keySet2.add(column.key);
+          }
+        }
+        return keySet2;
+      }, /* @__PURE__ */ new Set());
+      return count + keySet.size;
     }
-    function onKeydownEnterHander(e) {
+    function onSearchHandler() {
       emits("search");
     }
     function resetFields(fields) {
       let columns = props.columns || [];
-      if (fields && (fields == null ? void 0 : fields.length)) {
-        columns = fields.map((key) => formColumnMap.get(key)).filter(Boolean);
+      if (fields && fields?.length) {
+        columns = fields.map((key) => formColumnMap.value.get(key)).filter(Boolean);
       }
       useAppSearch.resetAppSearchValue(columns, props.model);
     }
@@ -110,17 +117,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       resetFields();
       emits("search");
     }
-    function onTimeRangeClickHandler(column, options) {
-      const { field } = column;
-      const dateValue = index.timeRangeHandler(column, options);
-      if (is.isArray(field)) {
-        props.model[field[0]] = dateValue[0];
-        props.model[field[1]] = dateValue[1];
-      } else {
-        props.model[field] = dateValue;
-      }
-      emits("search");
-    }
     __expose({
       resetFields
     });
@@ -178,7 +174,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   /* STABLE_FRAGMENT */
                 )) : vue.createCommentVNode("v-if", true)
               ]),
-              vue.createElementVNode("div", {
+              vue.withDirectives(vue.createElementVNode("div", {
                 class: "ml-auto flex items-center gap-4 cursor-pointer select-none",
                 onClick: vue.unref(switchShrink)
               }, [
@@ -200,7 +196,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   _: 1
                   /* STABLE */
                 }, 8, ["style"])
-              ], 8, ["onClick"])
+              ], 8, ["onClick"]), [
+                [vue.vShow, vue.unref(showShrink)]
+              ])
             ],
             2
             /* CLASS */
@@ -225,178 +223,24 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                     vue.Fragment,
                     null,
                     vue.renderList(__props.columns, (column) => {
-                      return vue.openBlock(), vue.createElementBlock(
-                        vue.Fragment,
-                        {
-                          key: column.key
-                        },
-                        [
-                          vue.unref(index.columnShowHandler)(props, column) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), {
-                            key: 0,
-                            prop: vue.unref(is.isArray)(column.field) ? column.field[0] : column.field
-                          }, {
-                            default: vue.withCtx(() => {
-                              var _a, _b, _c;
-                              return [
-                                vue.createElementVNode("div", { class: "flex bg-background-2 rounded" }, [
-                                  vue.createElementVNode(
-                                    "div",
-                                    {
-                                      class: "flex",
-                                      style: vue.normalizeStyle(vue.unref(index.columnItemStyle)(props, column))
-                                    },
-                                    [
-                                      vue.createCommentVNode(" \u8868\u5355label "),
-                                      vue.createElementVNode("div", { class: "flex items-center text-auxiliary text-xs px-3 whitespace-nowrap border-r border-border" }, [
-                                        column.labelSlot && _ctx.$slots[column.labelSlot] ? vue.renderSlot(_ctx.$slots, column.labelSlot, {
-                                          key: 0,
-                                          column
-                                        }) : (vue.openBlock(), vue.createElementBlock(
-                                          "span",
-                                          { key: 1 },
-                                          vue.toDisplayString(column.label),
-                                          1
-                                          /* TEXT */
-                                        ))
-                                      ]),
-                                      vue.createCommentVNode(" \u8868\u5355\u7EC4\u4EF6 "),
-                                      vue.createElementVNode(
-                                        "div",
-                                        {
-                                          style: vue.normalizeStyle(vue.unref(index.columnItemInputStyle)(props, column))
-                                        },
-                                        [
-                                          vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u5177\u540D\u63D2\u69FD "),
-                                          column.slot ? vue.renderSlot(_ctx.$slots, column.slot, {
-                                            key: 0,
-                                            column
-                                          }) : column.type === "input" ? (vue.openBlock(), vue.createElementBlock(
-                                            vue.Fragment,
-                                            { key: 1 },
-                                            [
-                                              vue.createCommentVNode(" \u8F93\u5165\u6846 "),
-                                              vue.createVNode(vue.unref(elementPlus.ElInput), vue.mergeProps({
-                                                modelValue: __props.model[column.field],
-                                                "onUpdate:modelValue": ($event) => __props.model[column.field] = $event
-                                              }, { ref_for: true }, column.attrs, {
-                                                disabled: vue.unref(index.isDisabled)(props, column),
-                                                onKeydown: vue.withKeys(($event) => onKeydownEnterHander(), ["enter"]),
-                                                onChange: ($event) => onChangeHandler()
-                                              }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onKeydown", "onChange"])
-                                            ],
-                                            2112
-                                            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                                          )) : column.type === "select" ? (vue.openBlock(), vue.createElementBlock(
-                                            vue.Fragment,
-                                            { key: 2 },
-                                            [
-                                              vue.createCommentVNode(" \u9009\u62E9\u6846 "),
-                                              vue.createVNode(vue.unref(elementPlus.ElSelect), vue.mergeProps({
-                                                modelValue: __props.model[column.field],
-                                                "onUpdate:modelValue": ($event) => __props.model[column.field] = $event
-                                              }, { ref_for: true }, column.attrs, {
-                                                disabled: vue.unref(index.isDisabled)(props, column),
-                                                onChange: ($event) => onChangeHandler()
-                                              }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onChange"])
-                                            ],
-                                            2112
-                                            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                                          )) : column.type === "date-picker" ? (vue.openBlock(), vue.createElementBlock(
-                                            vue.Fragment,
-                                            { key: 3 },
-                                            [
-                                              vue.createCommentVNode(" \u65E5\u671F\u9009\u62E9\u6846 "),
-                                              [
-                                                "datetimerange",
-                                                "daterange",
-                                                "monthrange",
-                                                "yearrange"
-                                              ].includes((_a = column.attrs) == null ? void 0 : _a.type) && vue.unref(is.isArray)(column.field) ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.AppDatePicker), vue.mergeProps({
-                                                key: 0,
-                                                start: __props.model[column.field[0]],
-                                                "onUpdate:start": ($event) => __props.model[column.field[0]] = $event,
-                                                end: __props.model[column.field[1]],
-                                                "onUpdate:end": ($event) => __props.model[column.field[1]] = $event,
-                                                "is-range": true,
-                                                style: { "width": "100%" }
-                                              }, { ref_for: true }, column.attrs, {
-                                                disabled: vue.unref(index.isDisabled)(props, column),
-                                                timeRangeFill: column.timeRangeFill,
-                                                onChange: ($event) => onChangeHandler()
-                                              }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled", "timeRangeFill", "onChange"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.AppDatePicker), vue.mergeProps({
-                                                key: 1,
-                                                modelValue: __props.model[column.field],
-                                                "onUpdate:modelValue": ($event) => __props.model[column.field] = $event,
-                                                "is-range": false,
-                                                style: { "width": "100%" }
-                                              }, { ref_for: true }, column.attrs, {
-                                                disabled: vue.unref(index.isDisabled)(props, column),
-                                                timeRangeFill: column.timeRangeFill,
-                                                onChange: ($event) => onChangeHandler()
-                                              }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "timeRangeFill", "onChange"]))
-                                            ],
-                                            64
-                                            /* STABLE_FRAGMENT */
-                                          )) : column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
-                                            vue.Fragment,
-                                            { key: 4 },
-                                            [
-                                              vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
-                                              vue.createVNode(vue.unref(index$2.AppOrgCascader), vue.mergeProps({
-                                                modelValue: __props.model[column.field],
-                                                "onUpdate:modelValue": ($event) => __props.model[column.field] = $event,
-                                                disabled: vue.unref(index.isDisabled)(props, column)
-                                              }, { ref_for: true }, column.attrs), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
-                                            ],
-                                            2112
-                                            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                                          )) : vue.createCommentVNode("v-if", true)
-                                        ],
-                                        4
-                                        /* STYLE */
-                                      )
-                                    ],
-                                    4
-                                    /* STYLE */
-                                  ),
-                                  column.type === "date-picker" && ["daterange", "datetimerange"].includes((_b = column.attrs) == null ? void 0 : _b.type) && ((_c = column.timeRangeOptions) == null ? void 0 : _c.length) ? (vue.openBlock(), vue.createElementBlock("div", {
-                                    key: 0,
-                                    class: "flex text-main"
-                                  }, [
-                                    (vue.openBlock(true), vue.createElementBlock(
-                                      vue.Fragment,
-                                      null,
-                                      vue.renderList(column.timeRangeOptions, (item, index$1) => {
-                                        return vue.openBlock(), vue.createElementBlock("div", {
-                                          key: index$1,
-                                          class: vue.normalizeClass(["border-l border-border px-[10px] cursor-pointer", {
-                                            "bg-[rgba(var(--hy-theme),0.2)] text-theme font-bold": vue.unref(index.isSelectedTimeRange)(column, item, __props.model)
-                                          }]),
-                                          onClick: ($event) => onTimeRangeClickHandler(column, item)
-                                        }, [
-                                          vue.createElementVNode(
-                                            "span",
-                                            null,
-                                            vue.toDisplayString(item.label),
-                                            1
-                                            /* TEXT */
-                                          )
-                                        ], 10, ["onClick"]);
-                                      }),
-                                      128
-                                      /* KEYED_FRAGMENT */
-                                    ))
-                                  ])) : vue.createCommentVNode("v-if", true)
-                                ])
-                              ];
-                            }),
-                            _: 2
-                            /* DYNAMIC */
-                          }, 1032, ["prop"])) : vue.createCommentVNode("v-if", true)
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
-                      );
+                      return vue.openBlock(), vue.createBlock(appSearchItem.default, {
+                        key: column.key,
+                        model: __props.model,
+                        column,
+                        onSearch: onSearchHandler
+                      }, vue.createSlots({
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        vue.renderList(_ctx.$slots, (_, slotName) => {
+                          return {
+                            name: slotName,
+                            fn: vue.withCtx((scope) => [
+                              vue.renderSlot(_ctx.$slots, slotName, vue.mergeProps({ ref_for: true }, scope))
+                            ])
+                          };
+                        })
+                      ]), 1032, ["model", "column"]);
                     }),
                     128
                     /* KEYED_FRAGMENT */