增加租户模式

2026-02-25 21:42:26 +08:00
parent 9669766eb3
commit 4cbb93b19a
9 changed files with 988 additions and 2 deletions
@@ -0,0 +1,409 @@
+<template>
+    <el-drawer v-model="visible" :title="dialogTitle" width="500px">
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+        <div class="form-title">账号信息</div>
+        <!-- 账号 -->
+        <el-form-item label="账号">
+          <el-input v-model="form.account" :disabled="!isAdd" placeholder="请输入账号" />
+        </el-form-item>
+  
+        <!-- 密码 -->
+        <el-form-item label="密码" prop="password" v-if="isAdd">
+          <el-input
+            v-model="form.password"
+            type="password"
+            autocomplete="new-password"
+            show-password
+            :placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'"
+          />
+        </el-form-item>
+  
+        <!-- 确认密码 -->
+        <el-form-item label="确认密码" prop="confirmPassword" v-if="isAdd">
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            autocomplete="new-password"
+            show-password
+            :placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'"
+          />
+        </el-form-item>
+  
+        <el-divider></el-divider>
+        <div class="form-title">个人信息</div>
+        <!-- 姓名 -->
+        <el-form-item label="姓名">
+          <el-input v-model="form.name" placeholder="请输入姓名" />
+        </el-form-item>
+  
+        <!-- 电话 -->
+        <el-form-item label="电话">
+          <el-input v-model="form.phone" placeholder="请输入电话" />
+        </el-form-item>
+  
+        <!-- 邮箱 -->
+        <el-form-item label="邮箱">
+          <el-input v-model="form.email" placeholder="请输入邮箱" />
+        </el-form-item>
+  
+        <!-- QQ -->
+        <el-form-item label="QQ">
+          <el-input v-model="form.qq" placeholder="请输入QQ" />
+        </el-form-item>
+  
+        <!-- 性别 -->
+        <el-form-item label="性别">
+          <el-radio-group v-model="form.sex" placeholder="请选择性别">
+            <el-radio-button label="男" :value="1" />
+            <el-radio-button label="女" :value="2" />
+          </el-radio-group>
+        </el-form-item>
+  
+        <!-- 状态 -->
+        <el-form-item label="状态">
+          <el-select
+            v-model="form.status"
+            placeholder="请选择状态"
+            style="width: 100%"
+          >
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+  
+      <!-- 对话框脚部 -->
+      <template #footer>
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">保存</el-button>
+      </template>
+    </el-drawer>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, watch } from "vue";
+  import { ElMessage } from "element-plus";
+  import { addUser, editUser, getUserInfo } from "@/api/user";
+  
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    statusDict: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const emit = defineEmits(["update:modelValue", "submit", "close"]);
+  
+  const visible = ref(false);
+  const formRef = ref<any>(null);
+  const isAdd = ref(false);
+  
+  const form = ref<any>({
+    id: null,
+    account: "",
+    name: "",
+    phone: "",
+    qq: "",
+    sex: 1,
+    password: "",
+    confirmPassword: "",
+    email: "",
+    status: 1,
+  });
+  
+  const dialogTitle = computed(() => {
+    return isAdd.value ? "添加用户" : "编辑用户";
+  });
+  
+  // 密码验证规则
+  const validatePassword = (rule: any, value: any, callback: any) => {
+    if (isAdd.value) {
+      // 新增用户时，密码必填
+      if (!value) {
+        callback(new Error("请输入密码"));
+        return;
+      }
+      if (value.length < 6) {
+        callback(new Error("密码长度不能少于6位"));
+        return;
+      }
+    } else {
+      // 编辑用户时，如果填写了密码，则必须符合规则
+      if (value && value.length < 6) {
+        callback(new Error("密码长度不能少于6位"));
+        return;
+      }
+    }
+    callback();
+  };
+  
+  // 确认密码验证规则
+  const validateConfirmPassword = (rule: any, value: any, callback: any) => {
+    if (isAdd.value) {
+      // 新增用户时，确认密码必填
+      if (!value) {
+        callback(new Error("请再次输入密码"));
+        return;
+      }
+      if (value !== form.value.password) {
+        callback(new Error("两次输入的密码不一致"));
+        return;
+      }
+    } else {
+      // 编辑用户时，如果填写了密码，则确认密码必须一致
+      if (form.value.password && value !== form.value.password) {
+        callback(new Error("两次输入的密码不一致"));
+        return;
+      }
+      // 如果填写了确认密码但没填密码，提示错误
+      if (value && !form.value.password) {
+        callback(new Error("请先输入密码"));
+        return;
+      }
+    }
+    callback();
+  };
+  
+  // 表单验证规则
+  const rules = {
+    account: [
+      { required: true, message: "请输入账号", trigger: "blur" },
+      { min: 3, max: 20, message: "账号长度在 3 到 20 个字符", trigger: "blur" },
+    ],
+    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+    password: [{ validator: validatePassword, trigger: "blur" }],
+    confirmPassword: [{ validator: validateConfirmPassword, trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
+  };
+  
+  // 监听 modelValue
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      visible.value = newVal;
+    }
+  );
+  
+  // 监听 visible 变化
+  watch(visible, (newVal) => {
+    if (!newVal) {
+      emit("update:modelValue", false);
+    }
+  });
+  
+  // 监听 statusDict 变化，用于调试
+  watch(
+    () => props.statusDict,
+    (newVal) => {},
+    { immediate: true, deep: true }
+  );
+  
+  const loadUserData = async (user: any) => {
+    try {
+      // 处理两种调用方式：传递用户对象或用户 ID
+      const userId = typeof user === "number" ? user : user?.id || user?.userId;
+      if (!userId) {
+        throw new Error("未提供有效的用户 ID");
+      }
+  
+      const res = await getUserInfo(userId);
+  
+      const data = res.data || res;
+  
+      // 确保 sex 和 status 都是数字类型
+      const sexValue =
+        data.sex !== undefined && data.sex !== null
+          ? Number(data.sex)
+          : 1;
+  
+      const statusValue =
+        data.status !== undefined && data.status !== null
+          ? Number(data.status)
+          : 1;
+  
+      form.value = {
+        id: data.id,
+        account: data.account,
+        name: data.name,
+        phone: data.phone,
+        qq: data.qq,
+        sex: sexValue,
+        password: "",
+        confirmPassword: "",
+        email: data.email,
+        status: statusValue,
+      };
+    } catch (e: any) {
+      console.error("Failed to load user data:", e);
+      const errorMsg = e?.response?.data?.message || e?.message || "加载用户失败";
+      ElMessage.error(errorMsg);
+      throw e;
+    }
+  };
+  
+  const handleCancel = () => {
+    visible.value = false;
+  };
+  
+  const handleSubmit = async () => {
+    // 表单验证
+    if (!formRef.value) {
+      return;
+    }
+  
+    try {
+      await formRef.value.validate();
+    } catch (error) {
+      ElMessage.warning("请检查表单填写是否正确");
+      return;
+    }
+  
+    // 验证密码一致性
+    if (isAdd.value) {
+      // 新增用户时，密码必填
+      if (!form.value.password) {
+        ElMessage.error("请输入密码");
+        return;
+      }
+      if (form.value.password !== form.value.confirmPassword) {
+        ElMessage.error("两次输入的密码不一致");
+        return;
+      }
+    } else {
+      // 编辑用户时，如果填写了密码，则必须填写确认密码且一致
+      if (form.value.password) {
+        if (form.value.password !== form.value.confirmPassword) {
+          ElMessage.error("两次输入的密码不一致");
+          return;
+        }
+      }
+    }
+  
+    try {
+      if (isAdd.value) {
+        // 新增用户
+        const submitData: any = {
+          account: form.value.account,
+          name: form.value.name,
+          phone: form.value.phone,
+          qq: form.value.qq,
+          sex: form.value.sex,
+          email: form.value.email,
+          status: form.value.status,
+          password: form.value.password,
+        };
+  
+        await addUser(submitData);
+        ElMessage.success("添加成功");
+      } else {
+        // 编辑用户
+        if (!form.value.id || form.value.id === 0) {
+          ElMessage.error("用户ID不能为空");
+          return;
+        }
+  
+        const submitData: any = {
+          id: form.value.id,
+          account: form.value.account,
+          name: form.value.name,
+          phone: form.value.phone,
+          qq: form.value.qq,
+          sex: form.value.sex,
+          email: form.value.email,
+          status: form.value.status,
+        };
+  
+        // 只有在填写了密码时才添加到提交数据中
+        if (form.value.password) {
+          submitData.password = form.value.password;
+        }
+  
+        await editUser(form.value.id, submitData);
+        ElMessage.success("更新成功");
+      }
+  
+      visible.value = false;
+      emit("submit");
+    } catch (e: any) {
+      const errorMsg = e?.response?.data?.message || e?.message || "操作失败";
+      ElMessage.error(errorMsg);
+    }
+  };
+  
+  // 暴露方法给父组件
+  defineExpose({
+    loadUserData,
+    openAdd: () => {
+      isAdd.value = true;
+      form.value = {
+        id: 0,
+        account: "",
+        name: "",
+        phone: "",
+        qq: "",
+        sex: 1,
+        password: "",
+        confirmPassword: "",
+        email: "",
+        status: 1,
+      };
+      visible.value = true;
+      // 清除表单验证
+      if (formRef.value) {
+        formRef.value.clearValidate();
+      }
+    },
+    openEdit: (user: any) => {
+      isAdd.value = false;
+      visible.value = true;
+      // 清除表单验证
+      if (formRef.value) {
+        formRef.value.clearValidate();
+      }
+      // 异步加载用户详细信息
+      loadUserData(user);
+    },
+    open: (user?: any) => {
+      if (user) {
+        isAdd.value = false;
+        loadUserData(user);
+      } else {
+        isAdd.value = true;
+        form.value = {
+          id: 0,
+          account: "",
+          name: "",
+          phone: "",
+          qq: "",
+          sex: 1,
+          password: "",
+          confirmPassword: "",
+          email: "",
+          status: 1,
+        };
+      }
+      visible.value = true;
+      // 清除表单验证
+      if (formRef.value) {
+        formRef.value.clearValidate();
+      }
+    },
+  });
+  </script>
+  
+  <style lang="less" scoped>
+  .form-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+  }
+  </style>
+  
@@ -0,0 +1,94 @@
+<template>
+    <div class="container-box">
+        <div class="header-bar">
+            <h2>用户管理</h2>
+            <div class="header-actions">
+                <el-button type="primary" @click="handleAddUser">
+                    <el-icon>
+                        <Plus />
+                    </el-icon>
+                    添加用户
+                </el-button>
+                <el-button @click="refresh">
+                    <el-icon>
+                        <Refresh />
+                    </el-icon>
+                    刷新
+                </el-button>
+            </div>
+        </div>
+
+        <el-divider></el-divider>
+
+        <!-- 用户列表表格 -->
+        <el-table :data="users" style="width: 100%" v-loading="loading">
+            <el-table-column prop="id" label="ID" align="center" fixed="left" />
+            <el-table-column prop="account" label="账号" align="center" />
+            <el-table-column prop="name" label="姓名" align="center">
+                <template #default="scope">
+                    <span class="name-link" @click="handlePreview(scope.row)">{{ scope.row.name }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="qq" label="隶属单位" align="center" />
+            <el-table-column prop="phone" label="部门" align="center" />
+            <el-table-column prop="phone" label="职位" align="center" />
+            <el-table-column prop="status" label="账号状态" width="80" align="center">
+                <template #default="scope">
+                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
+                        scope.row.status === 1 ? "启用" : "禁用"
+                        }}</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="240" align="center" fixed="right">
+                <template #default="scope">
+                    <el-button size="small" @click="handlePreview(scope.row)">查看</el-button>
+                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+                    <el-button size="small" type="warning" @click="handleChangePassword(scope.row)">
+                        修改密码
+                    </el-button>
+                    <el-button v-if="scope.row.username !== 'admin' && scope.row.id !== 1" size="small" type="danger"
+                        @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-bar">
+            <el-pagination :current-page="page" :page-size="pageSize" :total="total" @current-change="handlePageChange"
+                layout="total, prev, pager, next" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+        font-size: 1.4rem;
+        font-weight: 700;
+    }
+}
+
+:deep(.el-alert__title) {
+    color: #f56c6c !important;
+}
+
+.name-link {
+    color: #3973ff;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.3s;
+
+    &:hover {
+        color: #66b1ff;
+        text-decoration: underline;
+    }
+}
+</style>