leadal-auth 0.0.1

package/src/package/auth-manage/index.vue

@@ -0,0 +1,461 @@
+<template>
+  <div class="organ-manage f_between">
+    <div class="organ-manage-tree">
+      <organ-tree @load-user-data="f_userData" :key="organTreeKey" />
+    </div>
+    <div class="organ-manage-main">
+      <user-table
+        ref="user-table"
+        :organ="drawerInfo.organ"
+        @drawer="h_setUserId"
+        @refreshTree="f_refreshTree"
+      />
+    </div>
+    <user-drawer
+      v-if="visible"
+      :auth-collect="authCollect"
+      :drawer-info="drawerInfo"
+      @closed="h_setVisible"
+      @refresh="f_userData"
+    >
+      <template #face>
+        <slot name="face"> </slot>
+      </template>
+      <template #finger>
+        <slot name="finger"> </slot>
+      </template>
+      <template #idCard>
+        <slot name="idCard"> </slot>
+      </template>
+    </user-drawer>
+  </div>
+</template>
+
+<script>
+import OrganTree from "@/components/organ-tree.vue";
+import UserTable from "@/components/user-table.vue";
+import UserDrawer from "@/components/user-drawer.vue";
+import dayjs from "dayjs";
+import WebSocketClient from "@/utils/websocket";
+
+export default {
+  name: "auth-manage",
+  props: {
+    authCollect: {
+      required: false,
+      type: Array,
+      default: () => ["face", "finger", "idCard"],
+    },
+  },
+  components: {
+    OrganTree,
+    UserTable,
+    UserDrawer,
+  },
+  // components: {
+  //   OrganTree: () => import('@/components/organ-tree.vue'),
+  //   UserTable: () => import('@/components/user-table.vue'),
+  //   UserDrawer: () => import('@/components/user-drawer.vue')
+  // },
+  data() {
+    return {
+      visible: false,
+      drawerInfo: {},
+      organTreeKey: "1",
+      websocket: null,
+      cardReader: null, // 当前读卡器设备名称
+      fingerprintDeviceCount: 0, // 指纹设备数量
+    };
+  },
+  mounted() {
+    // console.log("process.env.VERSION", process.env.VERSION);
+    console.log(
+      "LD-AUTH打包时间为",
+      dayjs(process.env.VERSION).format("YYYY-MM-DD HH:mm:ss")
+    );
+    this.$authEventBus.$on("startCollection", this.handleStartCollection);
+    // 初始化WebSocket连接
+    this.initWebSocket();
+  },
+  // 组件销毁时清理WebSocket连接
+  beforeDestroy() {
+    if (this.websocket) {
+      console.log("🔌 组件销毁，关闭WebSocket连接");
+      this.websocket.close();
+      this.websocket = null;
+    }
+    this.$authEventBus.$off("startCollection", this.handleStartCollection);
+  },
+  methods: {
+    handleStartCollection() {
+      if (this.$store.getters.getFingerprintDeviceSN) {
+        const message = {
+          action: 1001,
+        };
+        this.websocket.send(message);
+      }
+    },
+
+    // 初始化WebSocket连接
+    initWebSocket() {
+      try {
+        // 创建WebSocket实例
+        this.websocket = new WebSocketClient(`ws://10.1.22.32:38280`, {
+          reconnectInterval: 5000, // 重连间隔5秒
+          maxReconnectAttempts: 10, // 最大重连10次
+          heartbeatInterval: 120000, // 心跳间隔2分钟
+        });
+
+        // 监听连接成功事件
+        this.websocket.on("open", () => {
+          // 连接成功后先检查读卡器连接状态
+          this.checkCardReaderConnection();
+          // 获取指纹设备SN码
+          this.getFingerprintDeviceSN();
+        });
+
+        // 监听消息接收事件
+        this.websocket.on("message", (data) => {
+          console.log("📨 收到WebSocket消息:", data);
+          this.handleWebSocketMessage(data);
+        });
+
+        // 监听连接错误事件
+        this.websocket.on("error", (error) => {
+          console.error("❌ WebSocket连接错误:", error);
+          this.$message?.error?.("WebSocket连接错误");
+        });
+
+        // 监听连接关闭事件
+        this.websocket.on("close", (event) => {
+          console.log("🔌 WebSocket连接已关闭:", event.code, event.reason);
+          if (event.code !== 1000) {
+            // this.$message?.warning?.("WebSocket连接已断开，正在尝试重连...");
+          }
+        });
+
+        // 监听重连失败事件
+        this.websocket.on("reconnectFailed", () => {
+          console.error("💥 WebSocket重连失败，已达最大重连次数");
+          this.$message?.error?.("WebSocket连接失败，请检查网络或联系管理员");
+        });
+
+        // 开始连接
+        this.websocket.connect();
+      } catch (error) {
+        console.error("WebSocket初始化失败:", error);
+        this.$message?.error?.("WebSocket初始化失败");
+      }
+    },
+
+    // 处理WebSocket消息
+    handleWebSocketMessage(data) {
+      // 根据action处理读卡器相关消息
+      if (data.action) {
+        switch (data.action) {
+          case 1009:
+            // 获取指纹设备SN响应
+            this.handleFingerprintDeviceSNResponse(data);
+            break;
+          case 2001:
+            // 检查读卡器连接状态响应
+            this.handleCheckCardReaderResponse(data);
+            break;
+          case 2002:
+            // 获取读卡器列表响应
+            this.handleCardReaderListResponse(data);
+            break;
+          case 2003:
+            // 打开读卡器响应
+            this.handleOpenCardReaderResponse(data);
+            break;
+          case 2004:
+            // 读卡器状态更新
+            this.$authEventBus.$emit("card", data);
+            break;
+          case 1001:
+            // 开始采集指纹
+            this.$authEventBus.$emit("startCollectionMessage", data);
+            break;
+          default:
+            console.log("未知action类型:", data);
+        }
+        return;
+      }
+
+      // 根据消息类型处理不同的业务逻辑
+      switch (data.type) {
+        case "user_update":
+          // 用户信息更新
+          console.log("用户信息更新:", data.payload);
+          this.f_userData(); // 刷新用户数据
+          break;
+        case "organ_update":
+          // 组织架构更新
+          console.log("组织架构更新:", data.payload);
+          this.f_refreshTree(); // 刷新组织树
+          break;
+        case "auth_status":
+          // 认证状态更新
+          console.log("认证状态更新:", data.payload);
+          this.$message?.info?.(data.payload.message || "认证状态已更新");
+          break;
+        case "notification":
+          // 系统通知
+          console.log("系统通知:", data.payload);
+          this.$message?.info?.(data.payload.message || "收到系统通知");
+          break;
+        default:
+          console.log("未知消息类型:", data);
+      }
+    },
+
+    // 发送WebSocket消息
+    sendWebSocketMessage(type, payload = {}) {
+      if (this.websocket && this.websocket.isOpen()) {
+        const message = {
+          type,
+          payload,
+          timestamp: Date.now(),
+        };
+        this.websocket.send(message);
+        console.log("📤 发送WebSocket消息:", message);
+      }
+    },
+
+    // ===================指纹设备相关方法===================
+
+    // 获取指纹设备SN码
+    getFingerprintDeviceSN() {
+      console.log("🔢 获取指纹设备SN码...");
+      const message = {
+        action: 1009,
+      };
+      this.websocket.send(message);
+      console.log("📤 发送获取指纹设备SN码消息:", message);
+    },
+
+    // 处理指纹设备SN响应
+    handleFingerprintDeviceSNResponse(data) {
+      console.log("📊 收到指纹设备SN响应:", data);
+
+      if (data.status === 200 || data.result === 0) {
+        // 获取成功
+        const deviceSN = data.data?.sn || "";
+
+        if (deviceSN) {
+          console.log("✅ 获取到指纹设备SN:", deviceSN);
+          // 存储到Vuex
+          this.$store.dispatch("updateFingerprintDeviceSN", deviceSN);
+        } else {
+          console.warn("⚠️ 指纹设备SN为空");
+          this.$store.dispatch("updateFingerprintDeviceSN", "");
+        }
+      } else {
+        // 获取失败
+        console.error("❌ 获取指纹设备SN失败:", data.msg || "未知错误");
+        // this.$store.dispatch("updateFingerprintDeviceSN", "");
+        this.$message?.error?.("获取指纹设备SN失败,请检查指纹设备连接");
+      }
+    },
+
+    // 获取指纹设备状态
+    getFingerprintDeviceStatus() {
+      return {
+        deviceCount: this.fingerprintDeviceCount,
+        hasDevice: this.fingerprintDeviceCount > 0,
+        deviceSN: this.$store.getters.getFingerprintDeviceSN,
+      };
+    },
+
+    // 刷新指纹设备数量
+    refreshFingerprintDeviceCount() {
+      if (this.websocket && this.websocket.isOpen()) {
+        this.getFingerprintDeviceCount();
+      } else {
+        console.warn("WebSocket未连接，无法获取指纹设备数量");
+      }
+    },
+
+    // 刷新指纹设备SN
+    refreshFingerprintDeviceSN() {
+      if (this.websocket && this.websocket.isOpen()) {
+        this.getFingerprintDeviceSN();
+      } else {
+        console.warn("WebSocket未连接，无法获取指纹设备SN");
+      }
+    },
+
+    // 刷新所有指纹设备信息
+    refreshAllFingerprintInfo() {
+      if (this.websocket && this.websocket.isOpen()) {
+        this.getFingerprintDeviceCount();
+        this.getFingerprintDeviceSN();
+      } else {
+        console.warn("WebSocket未连接，无法获取指纹设备信息");
+      }
+    },
+
+    // ===================读卡器相关方法===================
+
+    // 检查读卡器连接状态
+    checkCardReaderConnection() {
+      console.log("🔍 检查读卡器连接状态...");
+      const message = {
+        action: 2001,
+      };
+      this.websocket.send(message);
+      console.log("📤 发送检查读卡器连接状态消息:", message);
+    },
+
+    // 处理检查读卡器连接状态响应
+    handleCheckCardReaderResponse(data) {
+      console.log("📊 收到读卡器连接状态响应:", data);
+
+      if (data.status === 200 || data.result === 0) {
+        // 检查成功
+        if (data.data && data.data.isOpen) {
+          // 读卡器已经打开
+          this.cardReader = data.data.devName || "读卡器";
+          console.log("✅ 读卡器已连接:", this.cardReader);
+        } else {
+          // 读卡器未打开，需要获取并打开读卡器
+          console.log("⚠️ 读卡器未连接，开始获取读卡器列表...");
+          this.getCardReaderList();
+        }
+      } else {
+        // 检查失败
+        console.error("❌ 检查读卡器状态失败:", data.msg || "未知错误");
+        this.$message?.error?.(`检查读卡器状态失败: ${data.msg || "未知错误"}`);
+        // 即使检查失败，也尝试获取读卡器列表
+        this.getCardReaderList();
+      }
+    },
+
+    // 获取读卡器列表
+    getCardReaderList() {
+      console.log("📡 请求获取读卡器列表...");
+      const message = {
+        action: 2002,
+      };
+      this.websocket.send(message);
+      console.log("📤 发送获取读卡器列表消息:", message);
+    },
+
+    // 处理读卡器列表响应
+    handleCardReaderListResponse(data) {
+      console.log("📋 收到读卡器列表响应:", data);
+
+      if (data.data && Array.isArray(data.data) && data.data.length > 0) {
+        // 有读卡器数据，取第一个作为默认读卡器
+        const cardReaderName = data.data[0];
+        console.log("🎯 找到读卡器:", cardReaderName);
+        this.$message?.success?.(`发现读卡器: ${cardReaderName}`);
+
+        // 自动打开第一个读卡器
+        this.openCardReader(cardReaderName);
+      } else {
+        console.warn("⚠️ 未找到可用的读卡器");
+        this.$message?.warning?.("未找到可用的读卡器");
+      }
+    },
+
+    // 打开读卡器
+    openCardReader(devName) {
+      const message = {
+        action: 2003,
+        devName: devName,
+      };
+      this.websocket.send(message);
+    },
+
+    // 处理打开读卡器响应
+    handleOpenCardReaderResponse(data) {
+      if (data.result === 0 || data.status === 200) {
+        // 打开成功
+        this.cardReader = data.devName || "读卡器";
+      } else {
+        // 打开失败
+        this.$message?.error?.(
+          `读卡器打开失败: ${data.message || data.error || "未知错误"}`
+        );
+      }
+    },
+
+    // 获取当前读卡器状态
+    getCardReaderStatus() {
+      return {
+        isConnected: !!this.cardReader,
+        deviceName: this.cardReader,
+      };
+    },
+
+    // 重新初始化读卡器
+    reinitCardReader() {
+      this.cardReader = null;
+      if (this.websocket && this.websocket.isOpen()) {
+        // 重新初始化时先检查连接状态
+        this.checkCardReaderConnection();
+      } else {
+        this.$message?.warning?.("WebSocket未连接，无法初始化读卡器");
+      }
+    },
+
+    // ===================设备管理通用方法===================
+
+    // 获取所有设备状态
+    getAllDeviceStatus() {
+      return {
+        fingerprint: this.getFingerprintDeviceStatus(),
+        cardReader: this.getCardReaderStatus(),
+      };
+    },
+
+    // 刷新所有设备状态
+    refreshAllDevices() {
+      if (this.websocket && this.websocket.isOpen()) {
+        this.refreshAllFingerprintInfo();
+        this.checkCardReaderConnection();
+      } else {
+        this.$message?.warning?.("WebSocket未连接，无法刷新设备状态");
+      }
+    },
+
+    f_refreshTree() {
+      this.organTreeKey = this.organTreeKey + 1;
+    },
+    f_userData(val) {
+      if (val) {
+        this.$set(this.drawerInfo, "organ", val);
+      }
+      this.$refs["user-table"].f_init(this.drawerInfo.organ);
+    },
+    h_setVisible() {
+      this.visible = false;
+    },
+    h_setUserId(val, row) {
+      this.$set(this.drawerInfo, "userId", val);
+      this.$set(this.drawerInfo, "row", row);
+      this.visible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.organ-manage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .organ-manage-tree {
+    width: 300px;
+    height: 100%;
+  }
+
+  .organ-manage-main {
+    width: calc(100% - 320px);
+    height: 100%;
+  }
+}
+</style>

package/src/package/index.js

@@ -0,0 +1,22 @@
+import authManage from "./auth-manage/index.vue"; // 引入封装好的组件
+import store from "../store/index";
+import "../styles/index.scss"; // 引入样式文件
+import eventBus from "../utils/event-bus";
+
+const install = function (Vue, opt = {}) {
+  if (install.installed) return;
+  Vue.component(authManage.name, authManage);
+  // 挂载 eventBus 到 Vue 原型上，确保组件内部可以使用
+  Vue.prototype.$authEventBus = eventBus;
+  if (opt.baseUrl) {
+    store.commit("SET_BASE_URL", opt.baseUrl);
+  }
+  if (opt.authUrl) {
+    store.commit("SET_AUTH_URL", opt.authUrl);
+  }
+};
+
+export default {
+  install,
+  authManage,
+}; // 这个方法以后再使用的时候就可以被use调用

package/src/store/index.js

@@ -0,0 +1,39 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    baseUrl: "http://dftdm.netiler.com",
+    authUrl: "http://10.1.24.63:8080",
+    websocketUrl: "ws://127.0.0.1:38280",
+    fingerprintDeviceSN: "", // 指纹设备SN码
+  },
+  getters: {
+    // 获取指纹设备SN码
+    getFingerprintDeviceSN: (state) => state.fingerprintDeviceSN,
+  },
+  mutations: {
+    SET_BASE_URL(state, data) {
+      state.baseUrl = data;
+    },
+    SET_AUTH_URL(state, data) {
+      state.authUrl = data;
+    },
+    // 设置指纹设备SN码
+    SET_FINGERPRINT_DEVICE_SN(state, sn) {
+      state.fingerprintDeviceSN = sn;
+    },
+  },
+  actions: {
+    // 更新指纹设备SN码
+    updateFingerprintDeviceSN({ commit }, sn) {
+      commit("SET_FINGERPRINT_DEVICE_SN", sn);
+    },
+    updateAuthUrl({ commit }, url) {
+      commit("SET_AUTH_URL", url);
+    },
+  },
+  modules: {},
+});

package/src/styles/common.scss

@@ -0,0 +1,183 @@
+$pixel: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 30, 32, 36, 42, 48;
+$position: top, right, bottom, left;
+$position-class: "t", "r", "b", "l";
+
+@each $item in $pixel {
+  @each $p in $position {
+    $index: index($position, $p);
+    $class: nth($position-class, $index);
+
+    .m#{$class}-#{$item} {
+      margin-#{$p}: $item + px;
+    }
+
+    .p#{$class}-#{$item} {
+      padding-#{$p}: $item + px;
+    }
+
+    .p-#{$item} {
+      padding: $item + px;
+    }
+
+    .m-#{$item} {
+      margin: $item + px;
+    }
+
+    .fs-#{$item} {
+      font-size: $item + px;
+    }
+
+    .w-#{$item} {
+      width: $item + px;
+    }
+
+    .h-#{$item} {
+      height: $item + px;
+    }
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.cur-p {
+  cursor: pointer;
+}
+
+.no-wrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap {
+  flex-wrap: nowrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.fw-500 {
+  font-weight: 500;
+}
+
+.fw-bold {
+  font-weight: bold;
+}
+
+.ui-button {
+  border: 0 !important;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.loading-text {
+  color: white;
+  font-size: 18px;
+}
+
+.ld-c__empty {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+.w100 {
+  width: 100%;
+}
+
+.h100 {
+  height: 100%;
+}
+
+.b-wt {
+  background: white;
+}
+
+.c-wt {
+  color: white;
+}
+
+.viewer-container {
+  z-index: 9999 !important;
+}
+
+.el-form-item__label {
+  color: #333 !important;
+}
+.el-input__inner {
+  color: #333 !important;
+}
+.el-input.is-disabled .el-input__inner {
+  color: #9a9a9a !important;
+  border-color: #e0e0e0 !important;
+}
+.el-textarea__inner {
+  color: #333 !important;
+}
+
+.el-textarea.is-disabled .el-textarea__inner {
+  color: #9a9a9a !important;
+  border-color: #e0e0e0 !important;
+}
+
+.dright-form {
+  width: 410px;
+  border-left: 1px solid #e0e0e0;
+  padding: 12px;
+  height: 100%;
+}
+
+.delete-btn {
+  background: #ff5656;
+  font-size: 14px;
+  padding: 0px;
+  color: white;
+  border-radius: 50%;
+  height: 22px;
+  width: 22px;
+  line-height: -2px;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #ff5656;
+  }
+}
+
+.send-footer {
+  height: auto !important;
+}
+
+.x-hidden {
+  overflow-x: hidden !important;
+}
+
+.op-05 {
+  opacity: 0.5;
+}