leadal-auth 0.0.1

package/src/components/organ-tree.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="organ-tree">
+    <div class="organ-tree-header f_between">
+      <h3>机构列表</h3>
+      <i
+        class="el-icon-circle-plus-outline"
+        style="font-size: 20px; cursor: pointer"
+        @click="h_showOrgConfig(null)"
+      ></i>
+    </div>
+    <div class="organ-tree-content">
+      <el-scrollbar style="height: 100%; padding: 14px; box-sizing: border-box">
+        <el-tree
+          ref="tree"
+          node-key="id"
+          :highlight-current="true"
+          :expand-on-click-node="false"
+          :props="props"
+          :load="f_loadNode"
+          lazy
+          @node-click="h_nodeClick"
+        >
+          <span class="custom-tree-node" slot-scope="{ data }">
+            <span class="node-text" :title="data.caption">{{
+              data.caption
+            }}</span>
+            <span class="action-buttons" style="width: 40px">
+              <i
+                class="el-icon-edit"
+                style="font-size: 16px"
+                @click="h_showOrgConfig(data)"
+              ></i>
+              <i
+                class="el-icon-delete"
+                @click="h_delOrg(data)"
+                style="margin-left: 10px; font-size: 16px"
+              ></i>
+            </span>
+          </span>
+        </el-tree>
+      </el-scrollbar>
+    </div>
+    <edit-user-dialog
+      v-if="visible"
+      @closed="visible = false"
+      :edit="edit"
+      @refresh="refreshTree"
+    />
+  </div>
+</template>
+
+<script>
+import { apiOrganTree, apiDelOrg } from "@/api";
+import EditUserDialog from "@/components/edit-user-dialog.vue";
+
+export default {
+  name: "organ-tree",
+  components: {
+    EditUserDialog,
+  },
+  data() {
+    return {
+      props: {
+        label: "caption",
+        // isLeaf: (data) => {
+        //   return data.hasChild === false
+        // }
+      },
+      form: {
+        sequence: 1,
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "机构名称不能为空",
+          },
+        ],
+      },
+      edit: null,
+      visible: false,
+    };
+  },
+  methods: {
+    async refreshTree(type, parentId, data) {
+      if (type === "current") {
+        this.$refs.tree.updateKeyChildren(parentId, data);
+      } else {
+        this.$refs.tree.store.setData(data || []);
+      }
+    },
+    async f_loadNode(node, resolve) {
+      if (node.level === 0) {
+        const res = await apiOrganTree();
+        resolve(res.data || []);
+      } else {
+        const res = await apiOrganTree({ parentId: node.data.id });
+        res.data.forEach((item) => {
+          item.parentId = node.data.id;
+          item.parentName = node.data.caption;
+        });
+        resolve(res.data || []);
+      }
+    },
+    h_showOrgConfig(val) {
+      this.edit = val;
+      this.visible = true;
+    },
+    h_delOrg(val) {
+      this.$confirm("确认删除该项？", "提示", "warning")
+        .then(async (res) => {
+          if (res) {
+            await apiDelOrg({ ids: val.id });
+            this.$refs.tree.remove(val);
+            this.$message.success(`删除成功!`);
+          }
+        })
+        .catch((err) => {
+          console.error("用户状态 err", err);
+        });
+    },
+    h_nodeClick(val) {
+      this.$emit("load-user-data", val);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.organ-tree {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #cedded;
+
+  .organ-tree-header {
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+    background: #f9fbfd;
+    box-sizing: border-box;
+
+    h3 {
+      font-size: 16px;
+      color: #525252;
+      margin: 0;
+      padding: 0;
+    }
+
+    span {
+      color: #4e91ea;
+      cursor: pointer;
+    }
+  }
+
+  ::v-deep .custom-tree-node {
+    width: calc(100% - 34px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .node-text {
+      max-width: calc(100% - 60px);
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .action-buttons {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s ease, visibility 0.2s ease;
+
+      i {
+        margin-left: 4px;
+        cursor: pointer;
+        color: #606266;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+
+    &:hover .action-buttons {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 10px;
+
+    .el-dialog__headerbtn {
+      top: 14px;
+    }
+  }
+
+  .organ-tree-content {
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+}
+
+::v-deep .el-tree-node__content {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px 8px;
+}
+</style>

package/src/components/tree-select.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="tree-select" @click.stop>
+    <!-- 输入框部分 -->
+    <el-input
+        v-model="selectedLabel"
+        :placeholder="placeholder"
+        @click.native="toggleTree"
+    >
+    </el-input>
+    <!-- 树形下拉区域 -->
+    <div v-show="showTree" class="tree-container">
+      <el-scrollbar style="max-height: 300px;">
+        <el-tree
+            ref="tree"
+            :lazy="true"
+            :load="load"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+            node-key="id"
+        ></el-tree>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tree-select",
+  props: {
+    value: [String, Number, Array], // 选中的值（单选）
+    placeholder: { type: String, default: '请选择' },
+    defaultLabel: {
+      type: String,
+      default: ''
+    },
+    load: {
+      type: Function,
+      default: () => { }
+    },
+    defaultProps: {
+      type: Object,
+      default: () => ({ })
+    }
+  },
+  data() {
+    return {
+      showTree: false,
+      selectedLabel: ''
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        // 根据 value 回显 label
+        if (val) {
+          this.updateLabel(val)
+        } else {
+          this.selectedLabel = '根目录'
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // 监听点击其他空白区域事件
+    document.addEventListener('click', this.handleOutsideClick);
+  },
+  beforeDestroy() {
+    // 移除点击其他空白区域事件监听
+    document.removeEventListener('click', this.handleOutsideClick);
+  },
+  methods: {
+    toggleTree() {
+      this.showTree = !this.showTree;
+      console.log('this.showTree', this.showTree)
+    },
+    handleNodeClick(node) {
+      // 手动勾选当前节点
+      this.$nextTick(() => {
+        this.$refs.tree.setChecked(node, true, false);
+        this.handleSingleSelect(node);
+        this.showTree = false
+      });
+    },
+    handleSingleSelect(node) {
+      // 取消所有其他节点的勾选状态
+      const allNodes = this.$refs.tree.getCheckedNodes(false, true);
+      allNodes.forEach(n => {
+        if (n.id!== node.id) {
+          this.$refs.tree.setChecked(n, false, false);
+        }
+      });
+      this.$emit('input', node.id);
+      this.$emit('setNode', node)
+      this.selectedLabel = node[this.defaultProps.label];
+    },
+    updateLabel() {
+      this.selectedLabel = this.defaultLabel || '根目录'
+    },
+    handleOutsideClick() {
+      // 点击其他空白区域隐藏树形菜单
+      this.showTree = false;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.tree-select {
+  position: relative;
+}
+
+.tree-container {
+  position: absolute;
+  width: 100%;
+  border: 1px solid #e4e7ed;
+  z-index: 999;
+  background: white;
+  top: 34px;
+  max-height: 300px;
+}
+
+.el-icon-arrow-down.is-reverse {
+  transform: rotate(180deg);
+}
+
+::v-deep .el-scrollbar__wrap {
+  max-height: 300px;
+}
+
+</style>

package/src/components/user-drawer.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-drawer
+    size="100%"
+    :visible="visible"
+    :with-header="false"
+    @closed="closed"
+  >
+    <div class="user-drawer">
+      <div class="user-drawer-header f_between">
+        <div class="icon-back" @click="h_back">
+          <i class="el-icon-arrow-left" style="font-weight: 600"></i>
+          <span>返回</span>
+        </div>
+        <el-button type="primary" @click="f_save" :loading="loading"
+          >保存</el-button
+        >
+      </div>
+      <div class="user-drawer-content f_center">
+        <div class="user-auth">
+          <auth-com v-if="drawerInfo.userId" ref="auth-com" :auth-collect="authCollect" :drawerInfo="drawerInfo">
+            <template #face>
+              <slot name="face"> </slot>
+            </template>
+            <template #finger>
+              <slot name="finger"> </slot>
+            </template>
+            <template #idCard>
+              <slot name="idCard"> </slot>
+            </template>
+          </auth-com>
+          <empty-view v-else />
+        </div>
+        <div class="user-info">
+          <user-info ref="user-info" :drawer-info="drawerInfo" />
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { apiUserSave } from "@/api";
+
+import UserInfo from "@/components/user-info.vue";
+import AuthCom from "@/components/auth-com.vue";
+import EmptyView from "@/components/empty.vue";
+
+export default {
+  name: "user-drawer",
+  components: {
+    UserInfo,
+    AuthCom,
+    EmptyView,
+  },
+  props: {
+    authCollect: {
+      required: false,
+      type: Array,
+      default: () => ["face", "finger", "idCard"],
+    },
+    drawerInfo: {
+      type: Object,
+    },
+  },
+  data() {
+
+    return {
+      visible: false,
+      loading: false,
+    };
+  },
+  mounted() {
+    this.visible = true;
+  },
+  methods: {
+    closed() {
+      this.$emit("closed");
+    },
+    h_back() {
+      this.visible = false;
+    },
+    async f_save() {
+      try {
+        this.loading = true;
+        const data = this.$refs["user-info"].h_getFormData();
+        await apiUserSave({ ...data, organId: this.drawerInfo.organ.id });
+        this.$emit("refresh");
+        this.visible = false;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-drawer {
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  padding: 0 2px;
+
+  .user-drawer-header {
+    height: 50px;
+    padding: 0 0 0 12px;
+    border-bottom: 1px solid #ecebeb;
+
+    // span {
+    //   cursor: pointer;
+    //   color: #3391ff;
+    // }
+  }
+  .user-drawer-content {
+    width: 100%;
+    height: calc(100% - 50px);
+
+    .user-auth {
+      width: calc(100% - 460px);
+      height: 100%;
+    }
+
+    .user-info {
+      width: 460px;
+      height: 100%;
+      border-left: 1px solid #ecebeb;
+    }
+  }
+}
+
+.icon-back {
+  cursor: pointer;
+  display: flex;
+  color: #5a5a5a;
+  font-weight: 500;
+  font-size: 16px;
+  width: 53px;
+  height: 44px;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    color: #5a5a5a;
+    font-weight: 500;
+    font-size: 16px;
+  }
+}
+</style>