hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/es/components/appTree/js/index.mjs

@@ -0,0 +1,531 @@
+import { ElMessage } from 'element-plus';
+import { getCurrentInstance, ref, watch, computed, h, render } from 'vue';
+
+const deviceStatus = {
+  7: "SOS",
+  8: "\u97F3\u9891\u4E2D...",
+  2: "\u76D1\u63A7\u4E2D",
+  3: "\u901A\u8BDD\u4E2D",
+  4: "\u5F55\u50CF\u4E2D",
+  5: "\u5F55\u97F3\u4E2D",
+  6: "\u5E7F\u64AD\u4E2D",
+  0: "\u79BB\u7EBF",
+  1: "\u5728\u7EBF"
+};
+const useAppTreeWrapper = (hy) => {
+  const { props, emits, slots, treeRef, VirtualTree } = hy;
+  const instance = getCurrentInstance();
+  const slotAppContext = instance ? {
+    ...instance.appContext,
+    // 用实例的 provides 链覆盖应用级 provides，才能拿到 ElConfigProvider 注入的 namespace
+    provides: instance.provides
+  } : null;
+  const permissionIdList = JSON.parse(
+    window.sessionStorage.getItem("permissionIdList") || "[]"
+  );
+  let virtualTree = null;
+  const filterValue = ref("");
+  const disableSelectionMap = ref(null);
+  const addDeviceDom = ref();
+  const selectedDataList = ref([]);
+  const selectFilterType = ref(null);
+  const selectFilterList = ref([]);
+  watch(
+    () => props.showCheckbox,
+    (newVal) => {
+      virtualTree?.setRowSelection({
+        type: props.showCheckbox ? "checkbox" : "radio"
+      });
+    }
+  );
+  function getData(dataList) {
+    return new Promise((resolve) => {
+      if (props.disableSelection?.length) {
+        setDisAbleSelectionMap();
+      }
+      if (!virtualTree) {
+        virtualTree = new VirtualTree({
+          // 指定容器
+          container: treeRef.value,
+          // 数据
+          data: dataList,
+          // 每一项的高度
+          itemHeight: 30,
+          // 可视区域外的缓冲项数量
+          bufferSize: 10,
+          // 可视区域外的缓冲项数量
+          indent: 16,
+          emptyText: "\u6682\u65E0\u6570\u636E",
+          business: props.treeType,
+          // 自定义整体的插槽
+          renderItem: props.treeType === "user" ? (data, node) => setUserSlot(data) : setSlot("treeParentSlot"),
+          // // 自定义状态右侧插槽
+          renderRight: (data) => {
+            let renderRight = setSlot("renderRight");
+            if (renderRight) return renderRight(data);
+            if (data.dataType === 1) {
+              let departmentRight = setSlot("departmentRight");
+              if (departmentRight) {
+                return departmentRight(data);
+              }
+            }
+            if (data.dataType === 3) {
+              let deviceOnlineRight = setSlot("deviceOnlineRight");
+              if (deviceOnlineRight) {
+                return deviceOnlineRight(data);
+              }
+            }
+            if ([11].includes(data.dataType)) {
+              let planGroupRight = setSlot("planGroupRight");
+              if (planGroupRight) {
+                return planGroupRight(data);
+              }
+            }
+            return true;
+          },
+          // // 自定义状态模块
+          renderStatus: props.treeType === "device" || props.treeType === "channel" ? (data) => setRenderStatus(data) : null,
+          renderEmpty: () => {
+            if (!props.showCustomEmpty || hy.filterValue.value) return true;
+            let renderEmpty = setSlot("renderEmpty");
+            if (renderEmpty) {
+              const target = renderEmpty();
+              return target.el;
+            }
+            return setEmpty();
+          },
+          props: {
+            showStatus: true,
+            disabled: (data) => {
+              if (data.dataType === 3 || data.dataType === 5) {
+                if (hy.disableSelectionMap.value) {
+                  return hy.disableSelectionMap.value.get(data.id);
+                }
+                return false;
+              }
+              return false;
+            }
+          },
+          rowSelection: {
+            type: props.showCheckbox ? "checkbox" : "radio",
+            highlight: props.highlight,
+            // 是否显示选项 showSinglebox 单选为true时部门不显示其他节点显示选择框
+            showSelect: (data) => {
+              if (data.dataType === 1) {
+                return props.showCheckbox;
+              }
+              return props.showCheckbox || props.showSinglebox;
+            },
+            // 单选时是否可以取消选择
+            cancelable: true,
+            // 选中回调
+            onCheckChange: (data, info, checked) => {
+              if (data.dataType === 3 && !checked) {
+                emits("on-click-delete", JSON.parse(JSON.stringify(data)));
+              } else if (data.dataType === 3) {
+                emits("on-click", data);
+              }
+              emits(
+                "on-check-tree",
+                JSON.parse(JSON.stringify(info.checkedBusinessNodes))
+              );
+            }
+          },
+          // 筛选方法
+          filterMethod: ({ filterValue: filterValue2 }, data) => {
+            let isFilter = true;
+            if (filterValue2) {
+              isFilter = isFilter && !!filterNodeMethod(data, filterValue2);
+            }
+            return isFilter;
+          },
+          businessConfig: {
+            // 是否开启按在线离线状态排序
+            sortByStatus: props.deviceOrderSort,
+            // 是否只显示在线设备
+            showOnlineState: props.showOnlineOnly,
+            // 是否清空没有业务项（设备、用户、采集器）的部门和群组
+            clearEmptyBusiness: props.clearEmptyBusiness,
+            // 是否显示通道节点的选择框
+            isShowChannelSelect: props.isShowChannelSelect
+          },
+          // 初始化时处理数据，想回显必须return值，若想要过滤，可不return
+          handleMethod: (data) => {
+            return data;
+          },
+          // 自定义点击事件
+          onNodeClick: (data, node, e) => {
+            if (data.children?.length && data.dataType === 1) {
+              emits("on-department-click", data);
+            } else {
+              emits("on-click-device", data);
+            }
+            document.body.click();
+          },
+          // 右击事件
+          onNodeContextmenu: (res, node, event) => {
+            emits("on-contextmenu", { event, res });
+          },
+          // 双击事件
+          onNodeDblClick: (data, node, event) => {
+            if (props.treeType !== "channel") {
+              emits("on-dblclick", [{ ...data }]);
+            } else {
+              if (data.channelId) {
+                emits("on-dblclick", [
+                  {
+                    ...node.parent.data,
+                    channelId: data.channelId,
+                    channelName: data.channelName
+                    // type: data.dataType
+                  }
+                ]);
+              } else {
+                const channelList = data.videoChannelList?.filter(
+                  (v) => v.onlineState === 1
+                );
+                if (channelList && channelList.length) {
+                  emits(
+                    "on-dblclick",
+                    channelList.map((v) => ({
+                      ...data,
+                      channelId: v.channelId,
+                      channelName: v.channelName
+                    }))
+                  );
+                } else {
+                  emits("on-dblclick", [data]);
+                }
+              }
+            }
+          },
+          // 节点展开回调
+          onNodeExpand: (data, node) => {
+            document.body.click();
+          },
+          // 节点收起回调
+          onNodeCollapse: (data, node) => {
+            document.body.click();
+          },
+          onLoad: () => {
+            if (props.showOnlineOnly && !virtualTree._flattenTree?.length && !hy.filterValue.value) {
+              ElMessage.warning("\u6682\u65E0\u8BBE\u5907\u5904\u4E8E\u5728\u7EBF\u72B6\u6001");
+            }
+            if (props.defaultSelectedOrgID && props.showCheckbox && props.treeType === "device") {
+              setSelectedOrg(dataList);
+            } else if (props.selectedByDefault?.length) {
+              setCheckedKeys(props.selectedByDefault);
+            }
+            if (hy.filterValue.value) {
+              getFilterValue();
+            }
+            resolve(200);
+          }
+        });
+      } else {
+        virtualTree.setData(
+          {
+            data: dataList,
+            businessConfig: {
+              sortByStatus: props.deviceOrderSort,
+              showOnlineState: props.showOnlineOnly,
+              clearEmptyBusiness: props.clearEmptyBusiness
+            }
+          },
+          () => {
+            if (props.showOnlineOnly && !virtualTree._flattenTree?.length && !hy.filterValue.value) {
+              ElMessage.success("\u6682\u65E0\u8BBE\u5907\u5904\u4E8E\u5728\u7EBF\u72B6\u6001");
+            }
+            if (hy.filterValue.value) {
+              getFilterValue();
+            }
+            resolve(200);
+          }
+        );
+      }
+    });
+  }
+  function setEmpty() {
+    let content = ``;
+    if (!props.showOnlineOnly) {
+      setTimeout(() => {
+        if (hy.addDeviceDom.value) {
+          hy.addDeviceDom.value.removeEventListener("click", addDevice);
+        }
+        hy.addDeviceDom.value = document.getElementById("dispatch-add-device");
+        if (hy.addDeviceDom.value) {
+          hy.addDeviceDom.value.addEventListener("click", addDevice);
+        }
+      });
+      content = `<div class="w-full h-full flex flex-col justify-center items-center">
+                  <svg data-v-19e5a669="" data-v-56505d40="" aria-hidden="true" svgName="map_service" class="svg-icon" style="width: 40px; height: 48px"><use data-v-19e5a669="" xlink:href="#icon-noData"></use></svg>
+                  <span class="text-auxiliary text-sm mt-2">\u60A8\u5C1A\u672A\u6DFB\u52A0\u4EFB\u52A1\u8BBE\u5907</span>
+                  ${permissionIdList.includes("operator_deviceManage") ? '<span id="dispatch-add-device" class="inline-block border-b border-theme text-theme text-sm mt-2 cursor-pointer">\u53BB\u6DFB\u52A0</span>' : ""}
+              </div>`;
+    } else {
+      content = `<div class="w-full h-full flex flex-col justify-center items-center">
+                  <svg data-v-19e5a669="" data-v-56505d40="" aria-hidden="true" svgName="map_service" class="svg-icon" style="width: 40px; height: 40px"><use data-v-19e5a669="" xlink:href="#icon-v3-card-device-offline"></use></svg>
+                  <span class="text-auxiliary text-sm mt-2">\u6682\u65E0\u8BBE\u5907\u5904\u4E8E\u5728\u7EBF\u72B6\u6001</span>
+                  <span class="text-auxiliary text-sm whitespace-nowrap">\u8BF7\u68C0\u67E5\u8BBE\u5907\u72B6\u6001\u6216\u7F51\u7EDC\u8FDE\u63A5</span>
+              </div>`;
+    }
+    return content;
+  }
+  function getFilterValue() {
+    virtualTree.filter({ filterValue: hy.filterValue.value }, false);
+  }
+  function setDisAbleSelectionMap() {
+    const map = /* @__PURE__ */ new Map();
+    props.disableSelection.forEach((v) => {
+      map.set(v.id, true);
+    });
+    hy.disableSelectionMap.value = map;
+  }
+  function refreshData() {
+    emits("on-refreshData");
+  }
+  function setRenderStatus(data) {
+    const slot = setSlot("renderStatus");
+    if (slot) {
+      return slot(data);
+    }
+    if (data.dataType === 3) {
+      return setDutyStatus(data);
+    }
+    return true;
+  }
+  function setDutyStatus(data) {
+    let container = document.createElement("div");
+    container.style.display = "flex";
+    container.style.width = "100%";
+    const dutyHtml = `<div class="flex treeDeviceBox">
+                  ${props.getDutyRoster === 1 && data.rosterContent ? `<span class="w-[22px] h-[22px] text-xs rounded border box-border text-main flex justify-center items-center mr-1"
+                          style="border-color: ${data.rosterContentColor};background-color: ${data.rosterContentColor}70;">
+                          ${data.rosterContentSimple}
+                         </span>` : ""}
+                  ${data.deviceStatus === 7 ? `<span class="deviceType-sos spanBox">SOS</span>` : data.deviceStatus === 1 ? `<span style="color: rgba(var(--hy-success), 1)" class="spanBox">${deviceStatus[data.deviceStatus]}</span>` : data.deviceStatus === 0 ? `<span style="color: rgba(var(--hy-info), 1)" class="spanBox whitespace-nowrap">${deviceStatus[data.deviceStatus]}</span>` : `<span class="deviceType spanBox">${deviceStatus[data.deviceStatus]}</span>`}
+              </div>`;
+    container.innerHTML = dutyHtml;
+    return {
+      el: container,
+      $destroy: () => {
+        container = null;
+      }
+    };
+  }
+  function setUserSlot(data) {
+    if (data.dataType === 1) {
+      const slot2 = setSlot("treeParentSlot");
+      if (slot2) {
+        return slot2(data);
+      }
+      return true;
+    }
+    const slot = setSlot("treeSelectedSlot");
+    if (slot) {
+      return slot(data);
+    }
+    return true;
+  }
+  function setSlot(slotName) {
+    if (!slotName || !slots[slotName]) return null;
+    return (data, node) => {
+      let container = document.createElement("div");
+      container.style.display = "flex";
+      container.style.width = "100%";
+      const vnode = h({
+        setup() {
+          return () => h(
+            "div",
+            {
+              style: {
+                width: "100%",
+                display: "flex"
+              }
+            },
+            [
+              slots[slotName]({
+                row: { ...data, childrenDeviceNum: node?.total }
+              })
+            ]
+          );
+        }
+      });
+      if (slotAppContext) {
+        vnode.appContext = slotAppContext;
+      }
+      render(vnode, container);
+      return {
+        el: container,
+        $destroy: () => {
+          render(null, container);
+          container = null;
+        }
+      };
+    };
+  }
+  function addDevice() {
+    emits("on-addDevice");
+  }
+  function singleRemovalFn(row) {
+    if (props.treeType === "user") {
+      virtualTree.setChecked(row.id, false, true);
+    } else {
+      virtualTree.setChecked(row.deviceId, false, true);
+    }
+  }
+  function setCheckedKeys(dataList) {
+    if (props.treeType === "user") {
+      virtualTree?.setCheckedKeys(
+        dataList.map((v) => v.id),
+        true
+      );
+    } else {
+      virtualTree?.setCheckedKeys(
+        dataList.map((v) => v.deviceId),
+        true
+      );
+    }
+    if (props.isBackDefaultSelected) {
+      setTimeout(() => {
+        const deviceList = virtualTree?.getCheckedBusinessNodes(true) || [];
+        emits("on-selectedDataList", deviceList);
+      });
+    }
+  }
+  function setChecked(data, type) {
+    if (props.treeType === "user") {
+      virtualTree?.setChecked(data.id, type, true);
+    } else {
+      virtualTree?.setChecked(data.deviceId, type, true);
+    }
+  }
+  function setSelectedOrg(deviceList) {
+    for (let i = 0; i < deviceList.length; i++) {
+      if (props.defaultSelectedOrgID === deviceList[i].id) {
+        if (deviceList[i].deviceList?.length) {
+          virtualTree.setCheckedNodes(deviceList[i].deviceList, true);
+          setSelectedDataList(deviceList[i].deviceList);
+        }
+        return true;
+      }
+      if (deviceList[i].children?.length) {
+        const org = setSelectedOrg(deviceList[i].children);
+        if (org) return true;
+      }
+    }
+  }
+  function setSelectedDataList(inSelectedDataList = [], notify = true) {
+    hy.selectedDataList.value = [...inSelectedDataList];
+    if (notify) {
+      emits("on-selectedDataList", hy.selectedDataList.value);
+    }
+  }
+  function setFilterListType(type) {
+    if (props.selectFilterList?.length) {
+      hy.selectFilterList.value = JSON.parse(
+        JSON.stringify(props.selectFilterList)
+      );
+      return;
+    }
+    if (props.treeType === "device") {
+      hy.selectFilterList.value = [
+        {
+          label: "\u5168\u90E8",
+          value: null,
+          placeholder: "\u8F93\u5165 \u90E8\u95E8\u540D\u79F0\u3001\u8BBE\u5907\u53F7|\u540D\u79F0|\u7F16\u7801\u3001\u7528\u6237\u540D\u79F0 \u8FDB\u884C\u7B5B\u9009"
+        },
+        {
+          label: "\u90E8\u95E8",
+          value: 1,
+          placeholder: "\u90E8\u95E8\u540D\u79F0\u8FDB\u884C\u7B5B\u9009"
+        },
+        {
+          label: "\u8BBE\u5907",
+          value: 3,
+          placeholder: "\u8BBE\u5907\u53F7\u3001\u8BBE\u5907\u540D\u79F0\u8FDB\u884C\u7B5B\u9009"
+        }
+      ];
+    } else if (props.treeType === "user") {
+      hy.selectFilterList.value = [
+        {
+          label: "\u5168\u90E8",
+          value: null,
+          placeholder: "\u8F93\u5165 \u90E8\u95E8\u540D\u79F0\u3001\u4EBA\u5458\u5DE5\u53F7|\u540D\u79F0|\u8D26\u53F7 \u8FDB\u884C\u7B5B\u9009"
+        },
+        {
+          label: "\u90E8\u95E8",
+          value: 1,
+          placeholder: "\u90E8\u95E8\u540D\u79F0\u8FDB\u884C\u7B5B\u9009"
+        },
+        {
+          label: "\u4EBA\u5458",
+          value: 5,
+          placeholder: "\u4EBA\u5458\u540D\u79F0\u8FDB\u884C\u7B5B\u9009"
+        }
+      ];
+    }
+  }
+  const getInputPlaceholder = computed(() => {
+    const item = hy.selectFilterList.value.find(
+      (v) => v.value === hy.selectFilterType.value
+    );
+    if (item && item.placeholder) {
+      return item.placeholder;
+    }
+    return "\u8BF7\u8F93\u5165\u5185\u5BB9\u8FDB\u884C\u641C\u7D22";
+  });
+  function onChange() {
+    if (hy.filterValue.value.length) {
+      refreshData();
+    }
+  }
+  return {
+    filterValue,
+    virtualTree,
+    permissionIdList,
+    disableSelectionMap,
+    addDeviceDom,
+    getData,
+    getFilterValue,
+    refreshData,
+    singleRemovalFn,
+    setCheckedKeys,
+    setChecked,
+    setFilterListType,
+    getInputPlaceholder,
+    onChange,
+    selectFilterList,
+    selectFilterType,
+    selectedDataList
+  };
+};
+function filterNodeMethod(data, value, selectFilterType) {
+  data.dataType;
+  const includesValue = (field) => {
+    return field && field.toString().includes(value.toString());
+  };
+  switch (data.dataType) {
+    case 7:
+      if (data.typeName === "workOrderList") {
+        return includesValue(data.workTimeName);
+      } else {
+        return includesValue(data.dailyCheckName);
+      }
+    case 6:
+      return includesValue(data.deviceUserName) || includesValue(data.item?.deviceId);
+    case 5:
+      return includesValue(data.jobNum) || includesValue(data.name) || includesValue(data.phone);
+    case 4:
+    case 11:
+      return includesValue(data.groupName);
+    case 8:
+      return includesValue(data.sname);
+    case 3:
+      return includesValue(data.deviceId) || includesValue(data.devName) || includesValue(data.name) || includesValue(data.deviceCode) || includesValue(data.imei);
+    default:
+      return includesValue(data.companyName) || includesValue(data.orgName);
+  }
+}
+
+export { useAppTreeWrapper };

package/es/components/appUserAvatar/appUserAvatar.vue.mjs

@@ -55,9 +55,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     const props = __props;
     const { t } = useLocale();
     const { userAvatarMap } = useUserAvatarMap();
+    const isGbDevice = computed(
+      () => props.device?.gbDevice === 1 && (props.device?.deviceType || props.device?.type) !== 13
+    );
     const headImg = computed(() => {
-      var _a;
-      return props.device && ((_a = unref(userAvatarMap)) == null ? void 0 : _a.get(props.device.deviceId));
+      return props.device && unref(userAvatarMap)?.get(props.device.deviceId);
     });
     function parseRem(res) {
       let px = res;
@@ -71,24 +73,23 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       return "";
     }
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e, _f;
       return openBlock(), createElementBlock(
         "div",
         {
           style: normalizeStyle({
             width: `${parseRem(__props.width)}rem`,
             height: `${parseRem(__props.height)}rem`,
-            "border-color": ((_a = __props.device) == null ? void 0 : _a.onlineState) === 1 ? __props.audioContextType ? "rgb(var(--hy-theme))" : ((_b = __props.device) == null ? void 0 : _b.gbDevice) === 1 ? "#FDE777" : "rgb(var(--hy-auxiliary))" : "rgb(var(--hy-info))"
+            "border-color": __props.device?.onlineState === 1 ? __props.audioContextType ? "rgb(var(--hy-theme))" : isGbDevice.value ? "#FDE777" : "rgb(var(--hy-auxiliary))" : "rgb(var(--hy-info))"
           }),
           class: "app-user-avatar"
         },
         [
-          ((_c = __props.device) == null ? void 0 : _c.gbDevice) === 1 ? (openBlock(), createElementBlock(
+          isGbDevice.value ? (openBlock(), createElementBlock(
             "div",
             {
               key: 0,
               style: normalizeStyle(
-                ((_d = __props.device) == null ? void 0 : _d.onlineState) === 1 ? "background:linear-gradient(180deg, #5A2120 0%, #C81F12 100%); color:#FDE777;" : "background: rgb(var(--hy-background-2)); color: rgb(var(--hy-auxiliary));"
+                __props.device?.onlineState === 1 ? "background:linear-gradient(180deg, #5A2120 0%, #C81F12 100%); color:#FDE777;" : "background: rgb(var(--hy-background-2)); color: rgb(var(--hy-auxiliary));"
               ),
               class: "user-avatar font-[600] text-base"
             },
@@ -103,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               key: 0,
               src: headImg.value,
               alt: unref(t)("userAvatar.userAvatar")
-            }, null, 8, ["src", "alt"])) : ((_e = __props.device) == null ? void 0 : _e.onlineState) === 1 ? (openBlock(), createBlock(unref(AppIcon), {
+            }, null, 8, ["src", "alt"])) : __props.device?.onlineState === 1 ? (openBlock(), createBlock(unref(AppIcon), {
               key: 1,
               "svg-name": __props.initSelectSvgName,
               className: "svgBox"
@@ -118,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             {
               key: 2,
               class: normalizeClass(
-                ((_f = __props.device) == null ? void 0 : _f.onlineState) === 1 ? "bg-success shadow-[0_0_4px_0] shadow-success" : "bg-info"
+                __props.device?.onlineState === 1 ? "bg-success shadow-[0_0_4px_0] shadow-success" : "bg-info"
               )
             },
             null,

package/es/components/appUserAvatar/style/appUserAvatar.scss

@@ -2,7 +2,6 @@
   background: rgb(var(--hy-background-2));
   position: relative;
   border: 1px solid rgb(var(--hy-main));
-  box-sizing: border-box;
   flex-shrink: 0;
   border-radius: 50%;
   .user-avatar {