bonus
/
sh_real_name_system_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户管理

This commit is contained in:
cwchen 2025-08-16 19:01:53 +08:00
parent ac17d121b8
commit 70c4287051
9 changed files with 1875 additions and 1270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -15,7 +15,7 @@ export default {
name: 'App',
components: { ThemePicker },
created() {
// get()
get()
},
metaInfo() {
return {

37
src/api/system/user.js
View File

@ -154,9 +154,10 @@ export function checkPasswordStatus(data) {
})
}
export function confirmPassword(password) {
export function confirmPassword(password,userId) {
const data = {
password
password,
userId
}
return request({
url: '/system/user/confirmPassword',
@ -165,5 +166,37 @@ export function confirmPassword(password) {
})
}
// 工程下拉选
export function getProsList(data) {
return request({
url: '/bmw/pmProject/listAll',
method: 'get'
})
}
// 分公司下拉选
export function getCompanyList(data) {
return request({
url: '/bmw/subCompany/listAll',
method: 'get'
})
}
// 分包商下拉选
export function getSubList(data) {
return request({
url: '/bmw/pmSub/listAll',
method: 'get'
})
}
// 角色下拉选
export function getRoleList(data) {
return request({
url: '/system/user/getRoleList',
method: 'POST',
data:data
})
}

8
src/utils/validate.js
View File

@ -122,18 +122,18 @@ export function validateNewPassword(rule, value, callback) {
return
}
// 3. 检查是否包含弱密码
for (const weakPwd of systemConfig.passwordConfig.weakPasswords) {
/* for (const weakPwd of systemConfig.passwordConfig.weakPasswords) {
// 将密码和弱密码都转换为小写进行比较
if (value.toLowerCase().includes(weakPwd.toLowerCase())) {
callback(new Error(`密码包含常见的弱密码片段: ${weakPwd}`))
return
}
}
} */
// 4. 检查是否包含超过规定数量的连续字符
if (systemConfig.passwordConfig.restrictConsecutiveChars && containsConsecutiveCharacters(value, systemConfig.passwordConfig.maxConsecutiveChars)) {
/* if (systemConfig.passwordConfig.restrictConsecutiveChars && containsConsecutiveCharacters(value, systemConfig.passwordConfig.maxConsecutiveChars)) {
callback(new Error(`密码不能包含超过${systemConfig.passwordConfig.maxConsecutiveChars}位连续字符！`))
return
}
} */
callback() // 验证成功
}

296
src/views/system/role/index.vue
View File

@ -2,49 +2,29 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="queryParams.roleName"
placeholder="请输入角色名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<el-input
v-model="queryParams.roleKey"
placeholder="请输入权限字符"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
<el-form-item label="角色级别" prop="roleLevel">
<el-select v-model="queryParams.roleLevel" placeholder="请选择角色级别" clearable style="width: 240px">
<el-option v-for="dict in dict.type.role_level" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<!-- <el-form-item label="权限字符" prop="roleKey">
<el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="角色状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -53,125 +33,89 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:role:add']"
>新增
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:role:add']">新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:role:edit']"
>修改
<!-- <el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
v-hasPermi="['system:role:edit']">修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除
</el-col> -->
<!-- <el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
v-hasPermi="['system:role:remove']">删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:role:export']"
>导出
</el-col> -->
<!-- <el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['system:role:export']">导出
</el-button>
</el-col>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" :selectable="checkSelectable" :row-class-name="getRowClassName">
<el-table-column type="selection" min-width="55" align="center"/>
<el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/>
<el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150"/>
<el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150"/>
<el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100"/>
<el-table-column label="状态" align="center" min-width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
:row-class-name="getRowClassName">
<!-- <el-table-column type="selection" min-width="55" align="center"/> -->
<el-table-column label="序号" align="center" width="80" type="index">
<template scope="scope">
<span>{{ (queryParams.pageNum - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="角色编号" prop="roleId" min-width="120" align="center"/> -->
<el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" min-width="150" />
<el-table-column label="角色级别" align="center" prop="roleLevelName" :show-overflow-tooltip="true" min-width="150" />
<el-table-column label="权限字符" align="center" prop="roleKey" :show-overflow-tooltip="true" min-width="150" />
<el-table-column label="显示顺序" align="center" prop="roleSort" min-width="100" />
<!-- <el-table-column label="状态" align="center" min-width="100">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column> -->
<el-table-column prop="status" align="center" label="状态" min-width="60">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="remark" :show-overflow-tooltip="true" min-width="150" />
<el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']">修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']"
>删除
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']">删除
</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:role:edit']"
>
<!-- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:role:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
v-hasPermi="['system:role:edit']"
>数据权限
v-hasPermi="['system:role:edit']">数据权限
</el-dropdown-item>
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
v-hasPermi="['system:role:edit']"
>分配用户
<el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">分配用户
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称"/>
<el-input v-model="form.roleName" placeholder="请输入角色名称" maxlength="50" />
</el-form-item>
<el-form-item prop="roleKey">
<span slot="label">
@ -180,18 +124,23 @@
</el-tooltip>
权限字符
</span>
<el-input v-model="form.roleKey" placeholder="请输入权限字符"/>
<el-input v-model="form.roleKey" placeholder="请输入权限字符" maxlength="50" />
</el-form-item>
<el-form-item label="角色级别" prop="roleLevelObj">
<el-radio @change="(val) => handleRoleLevelChange(val, dict)" v-model="form.roleLevelObj"
v-for="dict in dict.type.role_level" :key="dict.value" :label="dict">{{
dict.label }}</el-radio>
<template>
<span style="color: #f40;display: block;">{{ roleLevelTips }}</span>
</template>
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0"/>
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
}}
</el-radio>
</el-radio-group>
</el-form-item>
@ -201,19 +150,11 @@
</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
</el-checkbox>
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
:check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<el-form-item label="角色描述">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="150"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -226,19 +167,15 @@
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true"/>
<el-input v-model="form.roleName" :disabled="true" />
</el-form-item>
<el-form-item label="权限字符">
<el-input v-model="form.roleKey" :disabled="true"/>
<el-input v-model="form.roleKey" :disabled="true" />
</el-form-item>
<el-form-item label="权限范围">
<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
<el-option
v-for="item in dataScopeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope == 2">
@ -247,17 +184,8 @@
</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动
</el-checkbox>
<el-tree
class="tree-border"
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
<el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id"
:check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -283,7 +211,7 @@ import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/m
export default {
name: 'Role',
dicts: ['sys_normal_disable'],
dicts: ['sys_normal_disable', 'role_level'],
data() {
return {
// 遮罩层
@ -312,6 +240,7 @@ export default {
deptNodeAll: false,
// 日期范围
dateRange: [],
roleLevelTips: '',
// 数据范围选项
dataScopeOptions: [
{
@ -344,6 +273,7 @@ export default {
pageNum: 1,
pageSize: 10,
roleName: undefined,
roleLevel:undefined,
roleKey: undefined,
status: undefined
},
@ -361,6 +291,9 @@ export default {
roleKey: [
{ required: true, message: '权限字符不能为空', trigger: 'blur' }
],
roleLevelObj: [
{ required: true, message: '角色级别不能为空', trigger: 'blur' }
],
roleSort: [
{ required: true, message: '角色顺序不能为空', trigger: 'blur' }
]
@ -371,14 +304,17 @@ export default {
this.getList()
},
methods: {
handleRoleLevelChange(value, dict) {
this.roleLevelTips = dict.raw.remark;
},
/** 查询角色列表 */
getList() {
this.loading = true
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.roleList = response.rows
this.total = response.total
this.loading = false
}
this.roleList = response.rows
this.total = response.total
this.loading = false
}
)
},
/** 查询菜单树结构 */
@ -422,11 +358,11 @@ export default {
// 角色状态修改
handleStatusChange(row) {
let text = row.status === '0' ? '启用' : '停用'
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function () {
return changeRoleStatus(row.roleId, row.status)
}).then(() => {
this.$modal.msgSuccess(text + '成功')
}).catch(function() {
}).catch(function () {
row.status = row.status === '0' ? '1' : '0'
})
},
@ -484,7 +420,7 @@ export default {
// 更新单选和多选状态
this.single = validSelection.length !== 1;
this.multiple = !validSelection.length;
},
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
@ -541,7 +477,14 @@ export default {
const roleId = row.roleId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId)
getRole(roleId).then(response => {
this.form = response.data
this.form = response.data;
this.roleLevelTips = response.data.roleLevelTips;
const matchedDict = this.dict.type.role_level.find(
item => item.value === response.data.roleLevel
);
if (matchedDict) {
this.form.roleLevelObj = matchedDict;
}
this.open = true
this.$nextTick(() => {
roleMenu.then(res => {
@ -578,14 +521,18 @@ export default {
})
},
/** 分配用户操作 */
handleAuthUser: function(row) {
handleAuthUser: function (row) {
const roleId = row.roleId
this.$router.push('/system/role-auth/user/' + roleId)
},
/** 提交按钮 */
submitForm: function() {
submitForm: function () {
this.$refs['form'].validate(valid => {
if (valid) {
this.form.roleLevel = this.form.roleLevelObj.value;
this.form.roleLevelName = this.form.roleLevelObj.label;
this.form.roleLevelTips = this.roleLevelTips;
delete this.form.roleLevelObj;
if (this.form.roleId != undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys()
updateRole(this.form).then(response => {
@ -605,7 +552,7 @@ export default {
})
},
/** 提交按钮（数据权限） */
submitDataScope: function() {
submitDataScope: function () {
if (this.form.roleId != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
dataScope(this.form).then(response => {
@ -618,7 +565,8 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.roleId || this.ids
this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
const roleName = row.roleName;
this.$modal.confirm('是否确认删除角色名称为"' + roleName + '"的数据项？').then(function () {
return delRole(roleIds)
}).then(() => {
this.getList()

1216
src/views/system/user/index.vue
View File

File diff suppressed because it is too large Load Diff

1187
src/views/system/user/index2222.vue Normal file
View File

File diff suppressed because it is too large Load Diff

10
src/views/system/user/profile/index.vue
View File

@ -12,21 +12,21 @@
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<svg-icon icon-class="user" />登录账号
<div class="pull-right">{{ user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ user.phonenumber }}</div>
<svg-icon icon-class="phone" />姓名
<div class="pull-right">{{ user.nickName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<!-- <li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
</li>
</li> -->
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ roleGroup }}</div>

20
src/views/system/user/profile/userInfo.vue
View File

@ -1,18 +1,18 @@
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-form-item label="姓名" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<!-- <el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
</el-form-item> -->
<!-- <el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" />
</el-form-item>
</el-form-item> -->
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
<el-radio label="0">女</el-radio>
<el-radio label="1">男</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
@ -37,9 +37,9 @@ export default {
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
email: [
/* email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
@ -54,7 +54,7 @@ export default {
message: "请输入正确的手机号码",
trigger: "blur"
}
]
] */
}
};
},

369
src/views/system/user/prop/userForm.vue Normal file
View File

@ -0,0 +1,369 @@
<template>
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
<div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
<el-form-item label="登录账号" prop="userName">
<el-input class="form-item" v-model="form.userName" placeholder="请输入登录账号" maxlength="32"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="nickName">
<el-input class="form-item" v-model="form.nickName" placeholder="请输入姓名" maxlength="32"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio v-model="form.sex" v-for="item in dict.type.sys_user_sex" :key="item.value" :label="item.value">{{
item.label }}</el-radio>
</el-form-item>
<el-form-item label="角色" prop="role">
<el-select style="width: 80%;" value-key="value" v-model="form.role" @change="handleRoleChange" clearable placeholder="请选择角色">
<el-option class="select-style" v-for="item in roleArr" :key="item.value" :label="item.name" :value="item">
<template>
<span>{{ item.name }}</span>
<span>{{ item.level }}</span>
</template>
</el-option>
</el-select>
<span style="margin-left: 10px; color: #f56c6c;">{{ selectedLevel }}</span>
</el-form-item>
<!-- 分公司 -->
<el-form-item label="分公司" prop="bandObj" v-if="permissionType === '2'">
<el-select class="form-item" value-key="value" clearable v-model="form.bandObj">
<el-option class="form-item" v-for="item in compamyArr" :key="item.value" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<!-- 项目部 -->
<el-form-item label="项目部" prop="bandObj" v-if="permissionType === '3'">
<treeselect v-model="form.bandObj" value-format="object" :options="departArr" :disable-branch-nodes="true"
placeholder="请选择项目部" value-key="id"/>
</el-form-item>
<!-- 分包商 -->
<el-form-item label="分包商" prop="bandObj" v-if="permissionType === '4'">
<el-select class="form-item" v-model="form.bandObj" value-key="value" clearable placeholder="请选择角色">
<el-option class="form-item" v-for="item in subArr" :key="item.value" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<!-- 工程 -->
<el-form-item label="工程" prop="bandObj" v-if="permissionType === '5'">
<el-select class="form-item" v-model="form.bandObj" value-key="value" clearable filterable placeholder="请选择工程">
<el-option class="form-item" v-for="item in proArr" :key="item.value" :label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio v-model="form.status" v-for="item in dict.type.sys_normal_disable" :key="item.value"
:label="item.value">{{
item.label
}}</el-radio>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
<el-button type="primary" class="search-btn" :disabled="disabled" @click="submitForm('ruleForm')">确认</el-button>
</span>
</el-dialog>
</template>
<script>
import { getUser, addUser, updateUser, getProsList, getCompanyList, getSubList, getRoleList } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "UserForm",
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
components: { Treeselect },
dicts: ['sys_normal_disable', 'sys_user_sex'],
data() {
return {
roleArr: [],
proArr: [], // 工程
compamyArr: [], // 分公司
departArr: [], // 项目部
subArr: [], // 分包商
roles: [],
lDialog: this.width > 500 ? "w700" : "w500",
dialogVisible: true,
isDisabled: true,
selectedLevel: "",
permissionType: '',
form: {
userName: null,
nickName: null,
sex: '1',
status: '0',
role: null,
bandObj: null,
},
rules: {
userName: [
{ required: true, message: "登录账号不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
nickName: [
{ required: true, message: '姓名不能为空', trigger: 'blur' }
],
role: [
{ required: true, message: '角色不能为空', trigger: 'blur' }
],
bandObj: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
};
},
created() {
},
async mounted() {
await this.initRoles();
await this.initPros();
await this.initCompanys();
await this.initSubs();
if (this.isAdd === 'add') { // 新增
} else if (this.isAdd === 'edit') { // 修改
await this.queryDetail();
}
},
methods: {
/* 角色change事件 */
handleRoleChange(selectedValue) {
this.permissionType = '';
const selectedRole = this.roleArr.find(item => item.value === selectedValue.value);
this.selectedLevel = selectedRole ? selectedRole.level : "";
this.permissionType = selectedRole ? selectedRole.levelType : "";
delete this.form.bandObj;
if(selectedValue.levelType === '1'){
this.form.bandObj = {name:'公司',value:'0'};
}
},
findItemById(tree, id) {
for (const item of tree) {
if (item.id === id) return item
if (item.children && item.children.length) {
const found = this.findItemById(item.children, id)
if (found) return found
}
}
return null
},
// 加载角色数据
async initRoles() {
await getRoleList({ roleId: this.rowData.roleId }).then(res => {
const list = res.data;
this.roleArr = list;
}).catch(error => {
})
},
/* 加载工程数据 */
async initPros() {
await getProsList().then(res => {
const list = res.rows;
const options = list.map(item => ({
name: item.proName,
value: item.id
}));
this.proArr = options;
}).catch(error => {
})
},
/* 加载分包商数据 */
async initSubs() {
await getSubList().then(res => {
let originalData = res.rows;
const options = originalData.map(item => ({
name: item.subName,
value: item.id
}));
this.subArr = options;
}).catch(error => {
})
},
/* 加载分公司、项目部数据 */
async initCompanys() {
await getCompanyList().then(res => {
let originalData = res.rows;
// 转换为树形结构
const treeData = originalData
.map(branch => ({
// 第一级：分公司
id: branch.id,
label: branch.subCompanyName,
value: `branch_${branch.id}`,
isEnable: branch.isEnable,
// 第二级：项目部
children: branch.pmOrgList?.map(org => ({
id: org.id,
label: org.orgName,
value: `org_${org.id}`,
isEnable: org.isEnable
})) || []
})).filter(branch => branch.children.length > 0);
// 项目部
this.departArr = treeData;
const companys = originalData.map(branch => ({
name: branch.subCompanyName,
value: branch.id
}));
// 分公司数据
this.compamyArr = companys;
}).catch(error => {
})
},
/**详情*/
async queryDetail() {
await getUser(this.rowData.userId).then(res => {
const obj = res.data;
this.form = {
userName: obj.userName,
nickName: obj.nickName,
sex: obj.sex,
status: obj.status,
}
const permissionType = obj.permissionType;
this.selectedLevel = obj.roleLevel;
const selectedRole = this.roleArr.find(item => item.value === obj.roleId);
this.form.role = selectedRole;
let selectObj = null;
if (permissionType === '2') {
selectObj = this.compamyArr.find(item => item.value === obj.bandId);
} else if (permissionType === '3') {
selectObj = this.findItemById(this.departArr, obj.bandId)
} else if (permissionType === '4') {
selectObj = this.subArr.find(item => item.value === obj.bandId);
} else if (permissionType === '5') {
selectObj = this.proArr.find(item => item.value === obj.bandId);
}else{
selectObj = {name:'公司',value:'0'}
}
this.form.bandObj = selectObj;
this.permissionType = permissionType;
}).catch(error => {
})
},
/*关闭弹窗 */
handleClose() {
this.dialogVisible = false;
this.$emit("closeDialog");
setTimeout(() => {
this.dialogVisible = true;
});
},
/**确认弹窗 */
sureBtnClick() {
this.dialogVisible = false;
this.$emit("closeDialog");
setTimeout(() => {
this.dialogVisible = true;
});
},
/**重置表单*/
reset() {
this.form = {
loginName: null,
userName: null,
sex: '1',
status: '0',
role: null,
bandObj: null
};
this.resetForm("ruleForm");
},
handleReuslt(res) {
this.$modal.msgSuccess(res.msg);
this.reset();
this.$emit('handleQuery');
this.handleClose();
},
/**验证 */
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
let loading = this.$loading({
lock: true,
text: "数据提交中，请稍候...",
background: 'rgba(0,0,0,0.2)',
target: this.$el.querySelector('.el-dialog') || document.body
})
let params = _.cloneDeep(this.form);
params.bandId = params.bandObj.id || params.bandObj.value;
params.permissionRange = params.bandObj.name || params.bandObj.label;
params.roleId = params.role.value || '';
params.roleName = params.role.name || '';
params.roleLevel = this.selectedLevel || '';
params.permissionType = this.permissionType || '';
delete params.bandObj;
delete params.role;
if (this.isAdd === 'add') {
addUser(params).then(res => {
loading.close();
if (res.code === 200) {
this.handleReuslt(res);
} else {
this.$modal.msgError(res.msg);
}
}).catch(error => {
loading.close();
});
} else {
params.userId = this.rowData.userId;
updateUser(params).then(res => {
loading.close();
if (res.code === 200) {
this.handleReuslt(res);
} else {
this.$modal.msgError(res.msg);
}
}).catch(error => {
loading.close();
});
}
}
});
}
}
};
</script>
<style lang="scss">
.w700 .el-dialog {
width: 700px;
}
.w500 .el-dialog {
width: 500px;
}
.w500 .el-dialog__header,
.w700 .el-dialog__header {
background: #eeeeee;
.el-dialog__title {
font-size: 16px;
}
}
.yxq .el-range-separator {
margin-right: 7px !important;
}
.el-date-editor--daterange.el-input__inner {
width: 260px;
}
.form-item {
width: 100%;
}
.select-style {
display: flex;
justify-content: space-between;
}
</style>