leadal-auth 0.0.1

package/src/components/user-info.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="user-info-main">
+    <el-scrollbar style="height: 100%; padding: 16px; box-sizing: border-box">
+      <el-form
+        :model="form"
+        :rules="rules"
+        label-width="100%"
+        label-position="left"
+      >
+        <el-collapse v-model="active">
+          <el-collapse-item name="base">
+            <template slot="title">
+              <span class="collapse-title"
+                ><span class="title-bar" />基础信息</span
+              >
+            </template>
+            <div class="form-item">
+              <el-form-item label="姓名" prop="name">
+                <el-input
+                  v-model="form.name"
+                  placeholder="请输入姓名"
+                  @input="handleNameChange"
+                />
+              </el-form-item>
+              <el-form-item label="拼音" prop="spelling">
+                <el-input v-model="form.spelling" placeholder="请输入拼音" />
+              </el-form-item>
+              <el-form-item label="所属单位" prop="organName">
+                <el-input v-model="form.organName" disabled />
+              </el-form-item>
+              <el-form-item label="密级" prop="secretLevel">
+                <el-select
+                  placeholder="请选择密级"
+                  style="width: 100%"
+                  v-model="form.secretLevel"
+                >
+                  <el-option
+                    v-for="item in secretList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item placeholder="请选择性别" label="性别" prop="gender">
+                <el-select style="width: 100%" v-model="form.gender">
+                  <el-option
+                    v-for="item in genderList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item name="account">
+            <template slot="title">
+              <span class="collapse-title"
+                ><span class="title-bar" />账号信息</span
+              >
+            </template>
+            <div class="form-item">
+              <el-form-item label="状态" prop="enabled">
+                <div class="form-status">
+                  <el-radio-group
+                    placeholder="请选择状态"
+                    v-model="form.enabled"
+                  >
+                    <el-radio :label="true">启用</el-radio>
+                    <el-radio :label="false">禁用</el-radio>
+                  </el-radio-group>
+                </div>
+              </el-form-item>
+              <el-form-item label="中文账号" prop="cnAccount">
+                <el-input
+                  placeholder="请输入中文账号"
+                  v-model="form.cnAccount"
+                />
+              </el-form-item>
+              <el-form-item label="英文账号" prop="enAccount">
+                <el-input
+                  placeholder="请输入英文账号"
+                  v-model="form.enAccount"
+                />
+              </el-form-item>
+              <el-form-item label="邮箱" prop="email">
+                <el-input placeholder="请输入邮箱" v-model="form.email" />
+              </el-form-item>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { apiOrganTree, apiUserLoad } from "@/api";
+import { GENDER, SECRET_LEVEL_LIST, dictToArray } from "@/utils/dict";
+import pinyin from "pinyin";
+
+export default {
+  name: "user-info",
+  props: {
+    drawerInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      secretList: SECRET_LEVEL_LIST,
+      active: ["base", "account"],
+      lastAutoSpelling: "", // 记录最后一次自动转换的拼音
+      form: {
+        enabled: true,
+        spelling: "",
+        name: "",
+      },
+      rules: {
+        enabled: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "姓名不能为空!", trigger: "blur" }],
+        spelling: [
+          {
+            required: true,
+            message: "拼音不能为空!",
+            trigger: ["blur", "change"],
+          },
+        ],
+        organName: [
+          { required: true, message: "所属单位不能为空!", trigger: ["change"] },
+        ],
+        secretLevel: [
+          { required: true, message: "密级不能为空!", trigger: ["change"] },
+        ],
+        gender: [
+          { required: true, message: "性别不能为空!", trigger: ["change"] },
+        ],
+        cnAccount: [
+          {
+            required: true,
+            message: "中文账号不能为空!",
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    genderList() {
+      return dictToArray(GENDER);
+    },
+  },
+  mounted() {
+    this.f_init();
+  },
+
+  methods: {
+    async f_init() {
+      console.log("drawerInfo1241241", this.drawerInfo);
+      if (this.drawerInfo?.userId) {
+        const res = await apiUserLoad({ id: this.drawerInfo?.userId });
+        this.form = {
+          ...res.data,
+          organName: res.data.organNamePath,
+        };
+      } else {
+        this.$set(this.form, "organId", this.drawerInfo.organ.id);
+        this.$set(this.form, "organName", this.drawerInfo.organ.caption);
+      }
+    },
+    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_getFormData() {
+      return this.form;
+    },
+    handleNameChange(value) {
+      // 只有当拼音字段为空或者与之前的转换结果一致时才自动更新
+      if (value) {
+        const pinyinArray = pinyin(value, {
+          style: pinyin.STYLE_NORMAL, // 不带声调的拼音
+          heteronym: false, // 不启用多音字
+          segment: true, // 启用分词
+        });
+        // 将拼音数组扁平化并连接成字符串
+        const spellingResult = pinyinArray.flat().join("");
+        this.form.spelling = spellingResult;
+      } else {
+        this.form.spelling = "";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-info-main {
+  width: 100%;
+  height: 100%;
+
+  .collapse-title {
+    display: flex;
+    color: rgba(16, 16, 16, 100);
+    font-size: 16px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    align-items: center;
+
+    .title-bar {
+      display: inline-block;
+      margin-right: 10px;
+      width: 4px;
+      height: 16px;
+      font-size: 16px;
+      background: #3391ff;
+    }
+  }
+
+  .form-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: calc(100% - 28px);
+    padding: 0 14px;
+
+    .form-status {
+      padding: 4px 6px;
+      background: #f7f9fe;
+    }
+  }
+
+  ::v-deep {
+    .el-collapse {
+      border: 0;
+    }
+
+    .el-collapse-item__wrap {
+      border-bottom: 0;
+    }
+
+    .el-collapse-item__header {
+      border-bottom: 0;
+    }
+
+    .el-form-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: calc(100% - 28px);
+      padding: 10px 14px 0 14px;
+      margin-bottom: 4px;
+    }
+
+    .el-form-item__content {
+      width: 100%;
+      margin-left: 0 !important;
+    }
+  }
+}
+</style>

package/src/components/user-table.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="user-table" v-loading="loading">
+    <div class="user-opt f_between">
+      <div>
+        <el-button
+          :disabled="!organId"
+          type="primary"
+          @click="h_addUser"
+          icon="el-icon-circle-plus-outline"
+          >新增</el-button
+        >
+        <el-button
+          :disabled="!organId"
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          @click="h_removeUser"
+          >删除</el-button
+        >
+        <el-button
+          :disabled="!organId"
+          type="warning"
+          plain
+          icon="el-icon-refresh"
+          @click="h_changeOrg"
+          >调换</el-button
+        >
+        <el-button
+          :disabled="!organId"
+          plain
+          icon="el-icon-circle-check"
+          @click="h_statusChange(true)"
+          >启用</el-button
+        >
+        <el-button
+          :disabled="!organId"
+          plain
+          icon="el-icon-circle-close"
+          @click="h_statusChange(false)"
+          >禁用</el-button
+        >
+        <el-button
+          :disabled="!organId"
+          plain
+          icon="el-icon-refresh"
+          @click="h_resetPwd"
+          >密码重置</el-button
+        >
+      </div>
+      <!-- <el-input
+        v-model="search"
+        placeholder="请输入用户名称"
+        style="width: 240px"
+      >
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+      </el-input> -->
+      <el-input
+        size="small"
+        placeholder="请输入用户名称"
+        v-model="keyWord"
+        class="input-with-select"
+        @keyup.native.enter="handleSearch"
+        style="width: 240px"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-search"
+          @click="handleSearch"
+        ></el-button>
+      </el-input>
+    </div>
+    <div class="user-table-main">
+      <div class="user-table-content">
+        <el-table
+          ref="table"
+          :data="table.data"
+          stripe
+          height="100%"
+          :header-cell-style="{ background: '#f7f8fa' }"
+          @selection-change="h_selectionChange"
+          @row-click="h_rowClick"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column label="序号" type="index" width="50">
+          </el-table-column>
+          <el-table-column prop="name" label="用户名称" />
+          <el-table-column prop="spelling" label="拼音" />
+          <el-table-column prop="secretLevelLabel" label="密级" />
+          <el-table-column prop="enabledLabel" label="状态" />
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="center"
+            width="80"
+          >
+            <template #default="{ row }">
+              <span class="row-opt" @click="h_rowOpt(row)">编辑</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="user-table-pagination f_end">
+        <el-pagination
+          class="pagination"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="table.pagination.current"
+          :page-size="table.pagination.size"
+          :total="table.pagination.total"
+          @size-change="h_sizeChange"
+          @current-change="h_currentChange"
+        />
+      </div>
+    </div>
+    <el-dialog
+      v-if="visible"
+      :visible="visible"
+      title="调换机构"
+      width="540px"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      :before-close="h_close"
+      :append-to-body="true"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="120px"
+        size="small"
+      >
+        <el-form-item label="所属机构" prop="id">
+          <tree-select
+            :value.sync="form.id"
+            :defaultLabel="form.caption"
+            :defaultProps="{
+              label: 'caption',
+              value: 'id',
+              children: 'children',
+              isLeaf: (data) => {
+                return data.hasChild === false;
+              },
+            }"
+            :load="f_loadNode"
+            @setNode="h_setNode"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer f_center">
+        <el-button size="mini" @click="h_close"> 取消 </el-button>
+        <el-button type="primary" size="mini" @click="h_submit">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  apiDelUser,
+  apiUserPage,
+  apiUpdateStatus,
+  apiResetPwd,
+  apiOrganTree,
+  apiUserMove,
+} from "@/api/index";
+
+import TreeSelect from "@/components/tree-select.vue";
+
+import { SECRET_LEVEL } from "@/utils/dict";
+
+export default {
+  name: "user-table",
+  props: {
+    organ: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {
+    TreeSelect,
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      selection: [],
+      form: {},
+      rules: {
+        id: [
+          {
+            required: true,
+            message: "所属机构不能为空!",
+          },
+        ],
+      },
+      node: {},
+      row: {},
+      search: "",
+      keyWord: "",
+      table: {
+        data: [],
+        pagination: {
+          current: 1,
+          size: 10,
+          total: 0,
+        },
+      },
+    };
+  },
+  computed: {
+    organId() {
+      return !!this.organ?.id;
+    },
+  },
+  watch: {
+    search() {
+      this.f_loadData(true);
+    },
+  },
+  methods: {
+    handleSearch() {
+      this.search = this.keyWord;
+    },
+    f_init(val) {
+      this.node = val;
+      this.f_loadData();
+    },
+    async f_loadData(init = false) {
+      this.loading = true;
+      try {
+        if (init) this.$set(this.table.pagination, "current", 1);
+        const params = {
+          keyword: this.search || undefined,
+          organId: this.node.id,
+          page: this.table.pagination.current,
+          size: this.table.pagination.size,
+        };
+        const res = await apiUserPage(params);
+        res.data.data.forEach((item) => {
+          item.enabledLabel = item.enabled ? "启用" : "禁用";
+          item.secretLevelLabel = SECRET_LEVEL[item.secretLevel];
+        });
+        this.$set(this.table, "data", res.data.data || []);
+        this.table.pagination.total = res.data.total;
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+    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_addUser() {
+      this.$emit("drawer");
+    },
+    h_selectionChange(val) {
+      this.selection = val;
+    },
+    h_rowClick(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    h_rowOpt(row) {
+      this.$emit("drawer", row.id, row);
+    },
+    h_changeOrg() {
+      this.form = {...this.node};
+      if (!this.selection?.length)
+        return this.$message.warning("请至少选择一条操作项!");
+      this.visible = true;
+    },
+    h_resetPwd() {
+      if (!this.selection?.length)
+        return this.$message.warning("请至少选择一条操作项!");
+      this.$confirm("确认重置选中的用户密码？", "提示", "warning")
+        .then(async (res) => {
+          if (res) {
+            const ids = this.selection.map((item) => item.id);
+            await apiResetPwd({ ids });
+            this.f_loadData();
+            this.$message.success(`重置密码成功!`);
+          }
+        })
+        .catch((err) => {
+          console.error("用户状态 err", err);
+        });
+    },
+    async h_statusChange(val) {
+      if (!this.selection?.length)
+        return this.$message.warning("请至少选择一条操作项!");
+      this.$confirm("确认修改选中的用户状态？", "提示", "warning")
+        .then(async (res) => {
+          if (res) {
+            const ids = this.selection.map((item) => item.id);
+            await apiUpdateStatus({ ids, status: val });
+            this.f_loadData();
+            this.$message.success(`${val ? "启用" : "禁用"}成功!`);
+          }
+        })
+        .catch((err) => {
+          console.error("用户状态 err", err);
+        });
+    },
+    h_removeUser() {
+      if (!this.selection?.length)
+        return this.$message.warning("请至少选择一条操作项!");
+      this.$confirm("确认删除选中的用户？", "提示", "warning")
+        .then(async (res) => {
+          if (res) {
+            const ids = this.selection.map((item) => item.id);
+            await apiDelUser({ ids: ids.join(",") });
+            this.f_loadData(true);
+            this.$message.success("删除成功!");
+          }
+        })
+        .catch((err) => {
+          console.error("删除用户 err", err);
+        });
+    },
+    h_currentChange(current) {
+      this.table.pagination.current = current;
+      this.f_loadData();
+    },
+    h_sizeChange(size) {
+      this.table.pagination.size = size;
+      this.f_loadData();
+    },
+    async h_submit() {
+      const ids = this.selection.map((item) => item.id);
+      try {
+        await apiUserMove({ entityIds: ids, targetId: this.form.id });
+        this.f_loadData(true);
+        this.h_close();
+        this.$message.success("调换机构成功!");
+        this.$emit("refreshTree");
+      } catch (err) {
+        console.error("调换机构 err", err);
+      }
+    },
+    h_setNode(val) {
+      this.$set(this.form, "id", val.id);
+      this.$set(this.form, "caption", val.caption);
+    },
+    h_close() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-table {
+  width: 100%;
+  height: 100%;
+  padding: 14px;
+  border: 1px solid #cedded;
+  box-sizing: border-box;
+
+  .user-opt {
+    width: 100%;
+    height: 50px;
+    padding-bottom: 10px;
+
+    ::v-deep {
+      .el-button {
+        padding: 7px 20px;
+      }
+    }
+  }
+
+  .user-table-main {
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+
+  .user-table-content {
+    width: 100%;
+    height: calc(100% - 40px);
+
+    .row-opt {
+      cursor: pointer;
+      color: #3391ff;
+    }
+  }
+
+  .user-table-pagination {
+    width: 100%;
+    height: 40px;
+  }
+}
+
+::v-deep .el-button {
+  border-radius: 8px;
+}
+</style>

package/src/main.js

@@ -0,0 +1,26 @@
+import Vue from "vue";
+import App from "./App.vue";
+import LdAuth from "@/package/index.js";
+// import LdAuth from './package/index.js'
+import store from "./store";
+
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+import "./styles/index.scss";
+
+Vue.use(LdAuth, {
+  baseUrl: "http://dftdm.netiler.com",
+  authUrl: "http://dftdm.netiler.com",
+  websocketUrl: "ws://10.1.22.32:38280",
+});
+Vue.use(ElementUI, {
+  size: "medium",
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+  store,
+  render: (h) => h(App),
+}).$mount("#app");