Skip to content

Q
qr-consistency-vue3
Commit f994bdcc authored by lwy's avatar lwy
Browse files
Options

机构管理，用户管理

parent 58203947
Show whitespace changes
Inline Side-by-side
Showing with 457 additions and 402 deletions
src/views/system/dept/index.vue
View file @ f994bdcc
......@@ -6,16 +6,16 @@
:model="queryParams"
:inline="true"
>
<el-form-item label="部门名称" prop="deptName">
<el-form-item label="" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
placeholder="请输入搜索关键词"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<!-- <el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
......@@ -29,7 +29,7 @@
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>搜索</el-button
......@@ -38,7 +38,7 @@
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['system:dept:add']"
......@@ -58,7 +58,7 @@
v-model:show-search="showSearch"
@query-table="getList"
></right-toolbar>
</el-row>
</el-row>-->
<el-table
v-if="refreshTable"
......@@ -70,20 +70,35 @@
>
<el-table-column
prop="deptName"
label="部门名称"
width="260"
label="机构名称"
width="570"
></el-table-column>
<el-table-column
<!-- <el-table-column
prop="orderNum"
label="排序"
width="200"
></el-table-column>
<el-table-column prop="status" label="状态" width="100">
></el-table-column>-->
<!-- <el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table-column>-->
<el-table-column
prop="type"
label="机构类型"
width="500"
></el-table-column>
<el-table-column
label="同步时间"
align="center"
prop="updateTime"
width="500"
>
<template #default="scope">
<span>{{ parseTime(scope.row.updateTime) }}</span>
</template>
</el-table-column>
<!-- <el-table-column
label="创建时间"
align="center"
prop="createTime"
......@@ -92,8 +107,8 @@
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
</el-table-column>-->
<!-- <el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
......@@ -125,9 +140,16 @@
>删除</el-button
>
</template>
</el-table-column>
</el-table-column>-->
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<!-- 添加或修改部门对话框 -->
<el-dialog v-model="open" :title="title" width="600px" append-to-body>
<el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
......@@ -231,6 +253,7 @@ const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const title = ref('')
const total = ref(0)
const deptOptions = ref([])
const isExpandAll = ref(true)
const refreshTable = ref(true)
......@@ -238,6 +261,8 @@ const refreshTable = ref(true)
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
deptName: undefined,
status: undefined,
},
......@@ -275,6 +300,7 @@ function getList() {
loading.value = true
listDept(queryParams.value).then((response) => {
deptList.value = proxy.handleTree(response.data, 'deptId')
total.value = response.total
loading.value = false
})
}
......@@ -383,3 +409,14 @@ function handleDelete(row) {
getList()
</script>
<style scoped>
/* 自定义样式优化布局 */
.el-table {
width: 100%; /* 确保表格宽度占满容器 */
}
.el-table-column {
box-sizing: border-box; /* 避免因边框影响实际宽度 */
}
</style>
src/views/system/user/index.vue
View file @ f994bdcc
<template>
<div class="app-container">
<el-row :gutter="20">
<splitpanes
:horizontal="appStore.device === 'mobile'"
class="default-theme"
>
<!--部门数据-->
<pane size="16">
<el-col>
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
prefix-icon="Search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
ref="deptTreeRef"
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col>
</pane>
<!--用户数据-->
<pane size="84">
<el-col>
<el-form
v-show="showSearch"
......@@ -42,25 +8,68 @@
:inline="true"
label-width="68px"
>
<el-form-item label="用户名称" prop="userName">
<el-form-item label="" prop="userType">
<el-select
v-model="queryParams.userType"
placeholder="用户类型"
clearable
style="width: 240px"
>
<el-option
v-for="dict in sys_user_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="deptName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
v-model="queryParams.deptName"
placeholder="所在机构"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-form-item label="" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="姓名"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<!-- 事业部出来再改 -->
<el-form-item label="" prop="divsion">
<el-input
v-model="queryParams.divsion"
placeholder="事业部"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="factoryName">
<el-input
v-model="queryParams.factoryName"
placeholder="制造工厂"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
placeholder="联系电话"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-form-item label="" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
......@@ -68,22 +77,21 @@
style="width: 240px"
>
<el-option
v-for="dict in sys_normal_disable"
v-for="dict in sys_user_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="width: 308px">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<el-form-item label="" prop="roleNames">
<el-input
v-model="queryParams.roleNames"
placeholder="系统角色"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
......@@ -93,83 +101,49 @@
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['system:user:add']"
style="float: right;margin: 12px 0"
type="primary"
plain
icon="Plus"
@click="handleAdd"
>新增</el-button
>新建管理员</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:user:edit']"
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:user:remove']"
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:user:import']"
type="info"
plain
icon="Upload"
@click="handleImport"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:user:export']"
type="warning"
plain
icon="Download"
@click="handleExport"
>导出</el-button
>
</el-col>
<right-toolbar
v-model:show-search="showSearch"
:columns="columns"
@query-table="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<!-- <el-table-column type="selection" width="50" align="center" />-->
<el-table-column
v-if="columns[0].visible"
key="userId"
label="用户编号"
label="序号"
align="center"
prop="userId"
/>
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<dict-tag :options="sys_user_type" :value="scope.row.userType" />
</template>
</el-table-column>
<el-table-column
v-if="columns[3].visible"
key="deptName"
label="所在机构"
align="center"
prop="dept.deptName"
:show-overflow-tooltip="true"
/>
<el-table-column
v-if="columns[1].visible"
key="userName"
label="用户名称"
label="用户名"
align="center"
prop="userName"
:show-overflow-tooltip="true"
......@@ -177,51 +151,62 @@
<el-table-column
v-if="columns[2].visible"
key="nickName"
label="用户昵称"
label="姓名"
align="center"
prop="nickName"
:show-overflow-tooltip="true"
/>
<el-table-column label="性别" align="center" prop="sex">
<template #default="scope">
<dict-tag :options="sys_user_sex" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column
v-if="columns[2].visible"
key="divsion"
label="事业部权限"
align="center"
prop="divsion"
:show-overflow-tooltip="true"
/>
<el-table-column
v-if="columns[3].visible"
key="deptName"
label="部门"
v-if="columns[2].visible"
key="factoryName"
label="制造工厂权限"
align="center"
prop="dept.deptName"
prop="factoryName"
:show-overflow-tooltip="true"
/>
<el-table-column
v-if="columns[4].visible"
key="phonenumber"
label="手机号码"
label="手机号"
align="center"
prop="phonenumber"
width="120"
/>
<el-table-column
v-if="columns[5].visible"
key="status"
label="状态"
align="center"
>
<el-table-column label="用户状态" align="center" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
<dict-tag :options="sys_user_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
v-if="columns[6].visible"
label="创建时间"
key="roleNames"
label="系统角色"
align="center"
prop="roleNames"
width="120"
/>
<el-table-column
v-if="columns[7].visible"
label="同步时间"
align="center"
prop="createTime"
prop="updateTime"
width="160"
>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<span>{{ parseTime(scope.row.updateTime) }}</span>
</template>
</el-table-column>
<el-table-column
......@@ -231,58 +216,33 @@
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-tooltip
v-if="scope.row.userId !== 1"
content="修改"
placement="top"
>
<el-button
v-hasPermi="['system:user:edit']"
link
v-if="scope.row.userId === 1"
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.userId !== 1"
content="删除"
placement="top"
>
>修改</el-button>
<el-button
v-hasPermi="['system:user:remove']"
v-hasPermi="['system:user:edit']"
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.userId !== 1"
content="重置密码"
placement="top"
>
type="primary"
@click="handleAuthRole(scope.row)"
>分配角色</el-button>
<el-button
v-hasPermi="['system:user:resetPwd']"
link
type="primary"
icon="Key"
@click="handleResetPwd(scope.row)"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.userId !== 1"
content="分配角色"
placement="top"
>
type="primary"
@click="divsionDialog = true"
>配置事业部</el-button> <!--v-hasPermi="['system:user:edit']"-->
<el-button
v-hasPermi="['system:user:edit']"
link
v-if="scope.row.userId !== 1"
type="primary"
icon="CircleCheck"
@click="handleAuthRole(scope.row)"
></el-button>
</el-tooltip>
@click="dialogFactory = true"
>配置制造工厂</el-button>
</template>
</el-table-column>
</el-table>
......@@ -294,58 +254,89 @@
@pagination="getList"
/>
</el-col>
</pane>
</splitpanes>
</el-row>
<!--事业部 出来再改-->
<el-dialog v-model="divsionDialog" title="配置事业部" width="600px" append-to-body>
<el-form ref="userRef" :model="form" label-width="80px">
<el-form-item>
<el-checkbox-group v-model="selecteDivsions">
<div style="display: flex; flex-wrap: wrap;">
<div v-for="(divsion, index) in allDivsions" :key="index" style="width: 33%; margin-bottom: 10px;">
<el-checkbox :label="divsion">{{ divsion }}</el-checkbox>
</div>
</div>
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">保 存</el-button>
</span>
</template>
</el-dialog>
<!-- 配置制造工厂 -->
<el-dialog v-model="dialogFactory" title="配置制造工厂" width="600px" append-to-body>
<el-form ref="userRef" :model="form" label-width="80px">
<el-form-item label="制造工厂" prop="factoryName">
<el-checkbox-group v-model="selectedFactories">
<div style="display: flex; flex-wrap: wrap;">
<div v-for="(factory, index) in allFactories" :key="index" style="width: 33%; margin-bottom: 10px;">
<el-checkbox :label="factory">{{ factory }}</el-checkbox>
</div>
</div>
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">保 存</el-button>
</span>
</template>
</el-dialog>
<!-- 添加或修改用户配置对话框 -->
<el-dialog v-model="open" :title="title" width="600px" append-to-body>
<el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-form-item label="用户类型">
<el-select v-model="form.userType" placeholder="请选择" disabled>
<el-option
v-for="dict in sys_user_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input
v-model="form.nickName"
placeholder="请输入用户昵称"
v-model="form.userName"
placeholder="请输入用户名"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<el-tree-select
v-model="form.deptId"
:data="enabledDeptOptions"
:props="{ value: 'id', label: 'label', children: 'children' }"
value-key="id"
placeholder="请选择归属部门"
check-strictly
<el-form-item label="用户姓名" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户姓名"
maxlength="30"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<!--事业部数据出来后修改-->
<el-form-item label="所属事业部" prop="divsion">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
v-model="form.divsion"
placeholder="请输入事业部"
maxlength="30"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-form-item label="联系电话" prop="phonenumber">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
v-model="form.phonenumber"
placeholder="请输入联系电话"
maxlength="11"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户名称"
......@@ -357,10 +348,7 @@
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
......@@ -372,64 +360,24 @@
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option
v-for="dict in sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
<el-form-item label="系统角色" prop="roleNames">
<el-input
disabled
v-model="form.roleNames"
placeholder="请输入系统角色"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in sys_normal_disable"
v-for="dict in sys_user_status"
:key="dict.value"
:value="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
......@@ -437,8 +385,6 @@
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
......@@ -516,11 +462,18 @@ import 'splitpanes/dist/splitpanes.css'
const router = useRouter()
const appStore = useAppStore()
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex } = proxy.useDict(
const { sys_normal_disable, sys_user_sex, sys_user_status, sys_user_type } = proxy.useDict(
'sys_normal_disable',
'sys_user_sex',
'sys_user_status',
'sys_user_type'
)
const dialogFactory = ref(false)
const divsionDialog = ref(false)
// 选中的工厂列表
const selectedFactories = ref([]);
// 选中的事业部
const selecteDivsions = ref([]);
const userList = ref([])
const open = ref(false)
const loading = ref(true)
......@@ -537,6 +490,7 @@ const enabledDeptOptions = ref(undefined)
const initPassword = ref(undefined)
const postOptions = ref([])
const roleOptions = ref([])
/*** 用户导入参数 */
const upload = reactive({
// 是否显示弹出层（用户导入）
......@@ -560,7 +514,8 @@ const columns = ref([
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
{ key: 6, label: `系统角色`, visible: true },
{ key: 7, label: `创建时间`, visible: true },
])
const data = reactive({
......@@ -619,6 +574,10 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data)
const isEditMode = computed(() => {
return title.value === "编辑";
});
/** 通过条件过滤节点 */
const filterNode = (value, data) => {
if (!value) return true
......@@ -630,6 +589,54 @@ watch(deptName, (val) => {
proxy.$refs['deptTreeRef'].filter(val)
})
// 所有可选的事业部
const allDivsions = ref([
'奇瑞', '星途', '智界', '捷途', 'iCAR'
]);
watch(() => form.value.divsion, (newVal) => {
try {
const divsionObj = JSON.parse(newVal || '{}');
selecteDivsions.value = Object.values(factoryObj);
} catch (e) {
selecteDivsions.value = [];
}
}, { immediate: true });
// 监听选中的工厂变化，更新表单数据
watch(selecteDivsions, (newVal) => {
const divsionObj = {};
newVal.forEach((item, index) => {
divsionObj[index] = item;
});
form.value.divsion = JSON.stringify(divsionObj);
}, { deep: true });
// 所有可选的工厂列表
const allFactories = ref([
'整车二工厂', '整车三工厂', '整车四工厂',
'智造一工厂', '智造二工厂', '大连工厂',
'青岛工厂', '鄂尔多斯工厂', '开封工厂',
'城南工厂', '城北工厂', '齐河工厂',
'石家庄工厂'
]);
watch(() => form.value.factoryName, (newVal) => {
try {
const factoryObj = JSON.parse(newVal || '{}');
selectedFactories.value = Object.values(factoryObj);
} catch (e) {
selectedFactories.value = [];
}
}, { immediate: true });
// 监听选中的工厂变化，更新表单数据
watch(selectedFactories, (newVal) => {
const factoryObj = {};
newVal.forEach((item, index) => {
factoryObj[index] = item;
});
form.value.factoryName = JSON.stringify(factoryObj);
}, { deep: true });
/** 查询用户列表 */
function getList() {
loading.value = true
......@@ -681,8 +688,9 @@ function handleQuery() {
function resetQuery() {
dateRange.value = []
proxy.resetForm('queryRef')
queryParams.value.status = undefined; // 显式清除状态字段
queryParams.value.deptId = undefined
proxy.$refs.deptTreeRef.setCurrentKey(null)
// proxy.$refs.deptTreeRef.setCurrentKey(null)
handleQuery()
}
......@@ -829,7 +837,9 @@ function reset() {
phonenumber: undefined,
email: undefined,
sex: undefined,
roleNames: '超级管理员',
status: '0',
userType: '00',
remark: undefined,
postIds: [],
roleIds: [],
......@@ -839,6 +849,8 @@ function reset() {
/** 取消按钮 */
function cancel() {
dialogFactory.value = false
divsionDialog.value = false
open.value = false
reset()
}
......@@ -865,6 +877,12 @@ function handleUpdate(row) {
roleOptions.value = response.roles
form.value.postIds = response.postIds
form.value.roleIds = response.roleIds
// 根据 roleIds 生成 roleNames
const roleNames = roleOptions.value
.filter(role => form.value.roleIds.includes(role.roleId))
.map(role => role.roleName)
.join(', ');
form.value.roleNames = roleNames; // 赋值到表单
open.value = true
title.value = '修改用户'
form.password = ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment