前端部分更新

2026-06-26 17:39:57 +08:00
parent 628a63a250
commit d38cbdbf07
165 changed files with 35393 additions and 284 deletions
@@ -0,0 +1,189 @@
+<template>
+  <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="username" label="用户名">
+        <el-input v-model="dataForm.username" placeholder="用户名"></el-input>
+      </el-form-item>
+      <el-form-item prop="deptName" label="所属部门">
+        <sys-dept-tree v-model="dataForm.deptId" placeholder="选择部门" v-model:deptName="dataForm.deptName"></sys-dept-tree>
+      </el-form-item>
+      <el-form-item prop="password" label="密码" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPassword" label="确认密码" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
+      </el-form-item>
+      <el-form-item prop="realName" label="真实姓名">
+        <el-input v-model="dataForm.realName" placeholder="真实姓名"></el-input>
+      </el-form-item>
+      <el-form-item prop="gender" label="性别">
+        <sys-radio-group v-model="dataForm.gender" dict-type="gender"></sys-radio-group>
+      </el-form-item>
+      <el-form-item prop="email" label="邮箱">
+        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="手机号">
+        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+      </el-form-item>
+      <el-form-item prop="roleIdList" label="角色配置" class="role-list">
+        <el-select v-model="dataForm.roleIdList" multiple placeholder="角色配置">
+          <el-option v-for="role in roleList" :key="role.id" :label="role.name" :value="role.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="status" label="状态">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="0">停用</el-radio>
+          <el-radio :label="1">正常</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import baseService from "@/service/baseService";
+import { isAlphanumeric, isEmail, isMobile } from "@/utils/utils";
+import { IObject } from "@/types/interface";
+import { ElMessage } from "element-plus";
+const emit = defineEmits(["refreshDataList"]);
+
+const visible = ref(false);
+const roleList = ref<any[]>([]);
+const dataFormRef = ref();
+
+const dataForm = reactive({
+  id: "",
+  username: "",
+  deptId: "",
+  deptName: "",
+  password: "",
+  confirmPassword: "",
+  realName: "",
+  gender: 0,
+  email: "",
+  mobile: "",
+  roleIdList: [] as IObject[],
+  highRoleIdList: [] as IObject[],
+  status: 1
+});
+
+const validateUsername = (rule: any, value: string, callback: (e?: Error) => any): any => {
+  if (value && !isAlphanumeric(value)) {
+    return callback(new Error("用户名只能为英文或数字组合"));
+  }
+  callback();
+};
+const validatePassword = (rule: any, value: string, callback: (e?: Error) => any): any => {
+  if (!dataForm.id && !/\S/.test(value)) {
+    return callback(new Error("必填项不能为空"));
+  }
+  callback();
+};
+const validateConfirmPassword = (rule: any, value: string, callback: (e?: Error) => any): any => {
+  if (!dataForm.id && !/\S/.test(value)) {
+    return callback(new Error("必填项不能为空"));
+  }
+  if (dataForm.password !== value) {
+    return callback(new Error("确认密码与密码输入不一致"));
+  }
+  callback();
+};
+const validateEmail = (rule: any, value: string, callback: (e?: Error) => any): any => {
+  if (value && !isEmail(value)) {
+    return callback(new Error("邮箱格式错误"));
+  }
+  callback();
+};
+const validateMobile = (rule: any, value: string, callback: (e?: Error) => any): any => {
+  if (value && !isMobile(value)) {
+    return callback(new Error("手机格式错误"));
+  }
+  callback();
+};
+const rules = ref({
+  username: [
+    { required: true, message: "必填项不能为空", trigger: "blur" },
+    { validator: validateUsername, trigger: "blur" }
+  ],
+  deptName: [{ required: true, message: "必填项不能为空", trigger: "change" }],
+  password: [{ validator: validatePassword, trigger: "blur" }],
+  confirmPassword: [{ validator: validateConfirmPassword, trigger: "blur" }],
+  realName: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
+  email: [{ validator: validateEmail, trigger: "blur" }],
+  mobile: [{ validator: validateMobile, trigger: "blur" }]
+});
+
+const init = (id?: number) => {
+  visible.value = true;
+  dataForm.id = "";
+  dataForm.deptId = "";
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+  }
+
+  Promise.all([getRoleList()]).then(() => {
+    if (id) {
+      getInfo(id);
+    }
+  });
+};
+
+// 获取角色列表
+const getRoleList = () => {
+  return baseService.get("/sys/role/list").then((res) => {
+    roleList.value = res.data;
+  });
+};
+
+// 获取信息
+const getInfo = (id: number) => {
+  baseService.get(`/sys/user/${id}`).then((res) => {
+    Object.assign(dataForm, res.data);
+    dataForm.highRoleIdList = dataForm.roleIdList.filter((id) => !roleList.value.some((role) => role.id === id));
+    dataForm.roleIdList = dataForm.roleIdList.filter((id) => !dataForm.highRoleIdList.includes(id));
+  });
+};
+
+// 表单提交
+const dataFormSubmitHandle = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false;
+    }
+    (!dataForm.id ? baseService.post : baseService.put)("/sys/user", {
+      ...dataForm,
+      roleIdList: [...dataForm.roleIdList, ...dataForm.highRoleIdList]
+    }).then((res) => {
+      ElMessage.success({
+        message: "成功",
+        duration: 500,
+        onClose: () => {
+          visible.value = false;
+          emit("refreshDataList");
+        }
+      });
+    });
+  });
+};
+
+defineExpose({
+  init
+});
+</script>
+
+<style lang="less" scoped>
+.mod-sys__user {
+  .role-list {
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+</style>