增加组织机构功能
This commit is contained in:
jacky
parent
5ea1499f49
commit
e477f62031
|
|
@ -12,7 +12,7 @@ export const getCategoryTree = () => {
|
||||||
|
|
||||||
// @Summary 新增分类
|
// @Summary 新增分类
|
||||||
// @Produce application/json
|
// @Produce application/json
|
||||||
// @Param menu Object
|
// @Param Object
|
||||||
// @Router /category/add [post]
|
// @Router /category/add [post]
|
||||||
export const addCategory = (data) => {
|
export const addCategory = (data) => {
|
||||||
return service({
|
return service({
|
||||||
|
|
@ -36,7 +36,7 @@ export const deleteCategory = (data) => {
|
||||||
|
|
||||||
// @Summary 修改分类
|
// @Summary 修改分类
|
||||||
// @Produce application/json
|
// @Produce application/json
|
||||||
// @Param menu Object
|
// @Param Object
|
||||||
// @Router /category/update [put]
|
// @Router /category/update [put]
|
||||||
export const updateCategory = (data) => {
|
export const updateCategory = (data) => {
|
||||||
return service({
|
return service({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import service from '@/utils/request'
|
||||||
|
|
||||||
|
// @Summary 获取部门树
|
||||||
|
// @Produce application/json
|
||||||
|
// @Router /organize/getTree [get]
|
||||||
|
export const getOrganizeTree = () => {
|
||||||
|
return service({
|
||||||
|
url: '/organize/getTree',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// @Tags 部门
|
||||||
|
// @Summary 根据id获取部门
|
||||||
|
// @Security ApiKeyAuth
|
||||||
|
// @accept application/json
|
||||||
|
// @Produce application/json
|
||||||
|
// @Param id int true "根据id获取"
|
||||||
|
// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
|
||||||
|
// @Router /organize/get [get]
|
||||||
|
export const getOrganizeById = (params) => {
|
||||||
|
return service({
|
||||||
|
url: '/organize/get',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// @Summary 新增部门
|
||||||
|
// @Produce application/json
|
||||||
|
// @Param Object
|
||||||
|
// @Router /organize/add [post]
|
||||||
|
export const addOrganize = (data) => {
|
||||||
|
return service({
|
||||||
|
url: '/organize/add',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// @Summary 删除部门
|
||||||
|
// @Produce application/json
|
||||||
|
// @Param ID int
|
||||||
|
// @Router /organize/delete [delete]
|
||||||
|
export const deleteOrganize = (data) => {
|
||||||
|
return service({
|
||||||
|
url: '/organize/delete',
|
||||||
|
method: 'delete',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// @Summary 修改部门
|
||||||
|
// @Produce application/json
|
||||||
|
// @Param Object
|
||||||
|
// @Router /organize/update [put]
|
||||||
|
export const updateOrganize = (data) => {
|
||||||
|
return service({
|
||||||
|
url: '/organize/update',
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -28,7 +28,7 @@ export const captcha = () => {
|
||||||
// @Router /base/resige [post]
|
// @Router /base/resige [post]
|
||||||
export const register = (data) => {
|
export const register = (data) => {
|
||||||
return service({
|
return service({
|
||||||
url: '/user/admin_register',
|
url: '/user/adminRegister',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle" style="max-width: 400px;">
|
<el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle" style="max-width: 400px;">
|
||||||
<el-form v-if="dialogFormVisible" ref="categoryForm" :inline="true" :model="form" :rules="rules"
|
<el-form v-if="dialogFormVisible" ref="categoryForm" :inline="true" :model="form" :rules="rules"
|
||||||
label-position="top" label-width="85px">
|
label-position="top" label-width="85px">
|
||||||
<el-form-item label="分类名称" prop="path" style="width:90%">
|
<el-form-item label="分类名称" prop="title" style="width:90%">
|
||||||
<el-input v-model="form.title" autocomplete="off" />
|
<el-input v-model="form.title" autocomplete="off" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="父节点ID" style="width:90%">
|
<el-form-item label="父节点ID" style="width:90%">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle" style="max-width: 400px;">
|
||||||
|
<el-form v-if="dialogFormVisible" ref="elFormRef" :inline="true" :model="form" :rules="rules" label-position="top"
|
||||||
|
label-width="85px">
|
||||||
|
<el-form-item label="部门名称" prop="name" style="width:90%">
|
||||||
|
<el-input v-model="form.name" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="父节点ID" style="width:90%">
|
||||||
|
<el-cascader v-model="form.parentId" style="width:100%" :disabled="true" :options="props.organizeOptions"
|
||||||
|
:props="{ checkStrictly: true, label: 'name', value: 'ID', disabled: 'disabled', emitPath: false }"
|
||||||
|
:show-all-levels="false" filterable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" prop="sort" style="width:90%">
|
||||||
|
<el-input-number v-model.number="form.sort" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="handleClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import {
|
||||||
|
addOrganize,
|
||||||
|
updateOrganize,
|
||||||
|
getOrganizeById,
|
||||||
|
} from '@/api/organize'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'OrganizeEdit',
|
||||||
|
})
|
||||||
|
const props = defineProps({
|
||||||
|
organizeOptions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['on-save', 'on-close'])
|
||||||
|
// ------ form 相关 ------
|
||||||
|
const dialogTitle = ref('')
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const dialogFormVisible = ref(false)
|
||||||
|
const rules = reactive({
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入部门名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
})
|
||||||
|
const elFormRef = ref(null)
|
||||||
|
const form = ref({
|
||||||
|
ID: 0,
|
||||||
|
parentId: '',
|
||||||
|
name: '',
|
||||||
|
sort: '',
|
||||||
|
})
|
||||||
|
const initForm = () => {
|
||||||
|
elFormRef.value.resetFields()
|
||||||
|
form.value = {
|
||||||
|
ID: 0,
|
||||||
|
parentId: '',
|
||||||
|
name: '',
|
||||||
|
sort: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
const handleClose = () => {
|
||||||
|
initForm()
|
||||||
|
dialogFormVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认弹窗
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
elFormRef.value.validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
let res
|
||||||
|
if (isEdit.value) {
|
||||||
|
res = await updateOrganize(form.value)
|
||||||
|
} else {
|
||||||
|
res = await addOrganize(form.value)
|
||||||
|
}
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: isEdit.value ? '编辑成功' : '添加成功!'
|
||||||
|
})
|
||||||
|
emit('on-save')
|
||||||
|
}
|
||||||
|
initForm()
|
||||||
|
dialogFormVisible.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = async (row) => {
|
||||||
|
console.log(row)
|
||||||
|
if (row !== null && row.name && row.name !== '') {
|
||||||
|
isEdit.value = true
|
||||||
|
dialogTitle.value = '修改-' + row.name
|
||||||
|
const res = await getOrganizeById({ ID: row.ID })
|
||||||
|
form.value = res.data.organize
|
||||||
|
} else {
|
||||||
|
isEdit.value = false
|
||||||
|
dialogTitle.value = '新增'
|
||||||
|
form.value = {
|
||||||
|
parentId: row.organizeId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialogFormVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ openEdit })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="addUserDialog" title="用户" :show-close="false" :close-on-press-escape="false"
|
||||||
|
:close-on-click-modal="false">
|
||||||
|
<el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
|
||||||
|
<el-form-item label="账号" prop="userName">
|
||||||
|
<el-input v-model="userInfo.userName" :disabled="dialogFlag !== 'add'" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="dialogFlag === 'add'" label="密码" prop="password">
|
||||||
|
<el-input v-model="userInfo.password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="姓名" prop="nickName">
|
||||||
|
<el-input v-model="userInfo.nickName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号" prop="phone">
|
||||||
|
<el-input v-model="userInfo.phone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input v-model="userInfo.email" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门" prop="organizeId">
|
||||||
|
<el-cascader v-model="userInfo.organizeId" style="width:100%" :options="props.organizeOptions" show-all-levels
|
||||||
|
:props="{ multiple: false, checkStrictly: true, label: 'name', value: 'ID', disabled: 'disabled', emitPath: false }"
|
||||||
|
:clearable="false" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色" prop="authorityId">
|
||||||
|
<el-cascader v-model="userInfo.authorityIds" style="width:100%" :options="props.authOptions"
|
||||||
|
:show-all-levels="false"
|
||||||
|
:props="{ multiple: true, checkStrictly: true, label: 'authorityName', value: 'authorityId', disabled: 'disabled', emitPath: false }"
|
||||||
|
:clearable="false" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="启用" prop="disabled">
|
||||||
|
<el-switch v-model="userInfo.enable" inline-prompt :active-value="1" :inactive-value="2" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="closeAddUserDialog">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="enterAddUserDialog">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
register,
|
||||||
|
setUserInfo
|
||||||
|
} from '@/api/user'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
authOptions: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
organizeOptions: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['on-save', 'on-close'])
|
||||||
|
|
||||||
|
// 弹窗相关
|
||||||
|
const userInfo = ref({
|
||||||
|
organizeId: 0,
|
||||||
|
userName: '',
|
||||||
|
password: '',
|
||||||
|
nickName: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
authorityId: '',
|
||||||
|
authorityIds: [],
|
||||||
|
enable: 1,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = ref({
|
||||||
|
userName: [
|
||||||
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
|
{ min: 5, message: '最低5位字符', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{ required: true, message: '请输入用户密码', trigger: 'blur' },
|
||||||
|
{ min: 6, message: '最低6位字符', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
nickName: [
|
||||||
|
{ required: true, message: '请输入用户昵称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
authorityId: [
|
||||||
|
{ required: true, message: '请选择用户角色', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const userForm = ref(null)
|
||||||
|
const enterAddUserDialog = async () => {
|
||||||
|
userInfo.value.authorityId = userInfo.value.authorityIds[0]
|
||||||
|
userForm.value.validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
const req = {
|
||||||
|
...userInfo.value
|
||||||
|
}
|
||||||
|
if (dialogFlag.value === 'add') {
|
||||||
|
const res = await register(req)
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({ type: 'success', message: '创建成功' })
|
||||||
|
closeAddUserDialog()
|
||||||
|
emit('on-save')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (dialogFlag.value === 'edit') {
|
||||||
|
const res = await setUserInfo(req)
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({ type: 'success', message: '编辑成功' })
|
||||||
|
closeAddUserDialog()
|
||||||
|
emit('on-save')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addUserDialog = ref(false)
|
||||||
|
const closeAddUserDialog = () => {
|
||||||
|
userForm.value.resetFields()
|
||||||
|
userInfo.value.headerImg = ''
|
||||||
|
userInfo.value.authorityIds = []
|
||||||
|
addUserDialog.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogFlag = ref('add')
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
console.log(row)
|
||||||
|
if (row !== null && row.userName && row.userName !== '') {
|
||||||
|
dialogFlag.value = 'edit'
|
||||||
|
userInfo.value = JSON.parse(JSON.stringify(row))
|
||||||
|
} else {
|
||||||
|
dialogFlag.value = 'add'
|
||||||
|
userInfo.value = {
|
||||||
|
organizeId: row.organizeId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
addUserDialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ openEdit })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,290 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="selectedOrganize">
|
||||||
|
<div class="gva-btn-list" style="margin-bottom: 15px;">
|
||||||
|
<div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
|
||||||
|
<div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
|
||||||
|
<div v-else class="gvaIcon gvaIcon-arrow-double-left" />
|
||||||
|
</div>
|
||||||
|
<el-text size="large" tag="b">用户管理，当前选中：{{ selectedOrganize.name }}（共{{ total }}人）</el-text>
|
||||||
|
</div>
|
||||||
|
<div class="gva-btn-list">
|
||||||
|
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" row-key="ID">
|
||||||
|
<el-table-column align="left" label="账户" min-width="120" prop="userName" />
|
||||||
|
<el-table-column align="left" label="姓名" min-width="120" prop="nickName" />
|
||||||
|
<el-table-column align="left" label="部门" min-width="200">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-cascader v-model="scope.row.organizeId" :options="props.organizeOptions" :show-all-levels="false"
|
||||||
|
:props="{ multiple: false, checkStrictly: true, label: 'name', value: 'ID', disabled: 'disabled', emitPath: false }"
|
||||||
|
:clearable="false" @visible-change="(flag) => { changeOrganize(flag, scope.row) }" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="角色" min-width="200">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-cascader v-model="scope.row.authorityIds" :options="authOptions" :show-all-levels="false" collapse-tags
|
||||||
|
:props="{ multiple: true, checkStrictly: true, label: 'authorityName', value: 'authorityId', disabled: 'disabled', emitPath: false }"
|
||||||
|
:clearable="false" @visible-change="(flag) => { changeAuthority(scope.row, flag, 0) }"
|
||||||
|
@remove-tag="(removeAuth) => { changeAuthority(scope.row, false, removeAuth) }" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="手机号" min-width="120" prop="phone" />
|
||||||
|
<el-table-column align="left" label="邮箱" min-width="220" prop="email" />
|
||||||
|
<el-table-column align="left" label="启用" min-width="80">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-switch v-model="scope.row.enable" inline-prompt :active-value="1" :inactive-value="2"
|
||||||
|
@change="() => { switchEnable(scope.row) }" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" min-width="120" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)" />
|
||||||
|
<el-button type="primary" link icon="edit" @click="openEdit(scope.row)" />
|
||||||
|
<el-button type="primary" link icon="Tools" @click="resetPasswordFunc(scope.row)" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="gva-pagination">
|
||||||
|
<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" @current-change="handleChangePage"
|
||||||
|
@size-change="handleChangePageSize" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-text size="large" tag="b">请选择部门</el-text>
|
||||||
|
</div>
|
||||||
|
<UserEdit ref="elUserEditRef" :authOptions="authOptions" :organizeOptions="props.organizeOptions"
|
||||||
|
@on-save="handleSaveUser" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import {
|
||||||
|
getUserList,
|
||||||
|
setUserAuthorities,
|
||||||
|
setUserInfo,
|
||||||
|
deleteUser,
|
||||||
|
resetPassword
|
||||||
|
} from '@/api/user'
|
||||||
|
import { getAuthorityList } from '@/api/authority'
|
||||||
|
import { nextTick, ref, watch } from 'vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { equalArr } from '@/utils/arr'
|
||||||
|
import UserEdit from '@/view/organize/components/userEdit.vue'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'User',
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
organizeOptions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['collapse'])
|
||||||
|
|
||||||
|
const isCollapse = ref(false)
|
||||||
|
const totalCollapse = () => {
|
||||||
|
isCollapse.value = !isCollapse.value
|
||||||
|
emit('collapse', isCollapse.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = ref(1)
|
||||||
|
const total = ref(0)
|
||||||
|
const pageSize = ref(10)
|
||||||
|
const tableData = ref([])
|
||||||
|
const selectedOrganize = ref(null)
|
||||||
|
// 分页
|
||||||
|
const handleChangePageSize = (val) => {
|
||||||
|
pageSize.value = val
|
||||||
|
getTableData()
|
||||||
|
}
|
||||||
|
const handleChangePage = (val) => {
|
||||||
|
page.value = val
|
||||||
|
getTableData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const getTableData = async () => {
|
||||||
|
const table = await getUserList({ page: page.value, pageSize: pageSize.value, organizeId: selectedOrganize.value.ID })
|
||||||
|
if (table.code === 0) {
|
||||||
|
tableData.value = table.data.list
|
||||||
|
total.value = table.data.total
|
||||||
|
page.value = table.data.page
|
||||||
|
pageSize.value = table.data.pageSize
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化相关
|
||||||
|
const authOptions = ref([])
|
||||||
|
const setAuthorityOptions = (AuthorityData, optionsData) => {
|
||||||
|
AuthorityData &&
|
||||||
|
AuthorityData.forEach(item => {
|
||||||
|
if (item.children && item.children.length) {
|
||||||
|
const option = {
|
||||||
|
authorityId: item.authorityId,
|
||||||
|
authorityName: item.authorityName,
|
||||||
|
children: []
|
||||||
|
}
|
||||||
|
setAuthorityOptions(item.children, option.children)
|
||||||
|
optionsData.push(option)
|
||||||
|
} else {
|
||||||
|
const option = {
|
||||||
|
authorityId: item.authorityId,
|
||||||
|
authorityName: item.authorityName
|
||||||
|
}
|
||||||
|
optionsData.push(option)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const setOptions = (authData) => {
|
||||||
|
authOptions.value = []
|
||||||
|
setAuthorityOptions(authData, authOptions.value)
|
||||||
|
}
|
||||||
|
const initPage = async () => {
|
||||||
|
const res = await getAuthorityList({ page: 1, pageSize: 999 })
|
||||||
|
setOptions(res.data.list)
|
||||||
|
}
|
||||||
|
initPage()
|
||||||
|
|
||||||
|
watch(() => tableData.value, () => {
|
||||||
|
setAuthorityIds()
|
||||||
|
})
|
||||||
|
|
||||||
|
const openList = async (row) => {
|
||||||
|
selectedOrganize.value = row
|
||||||
|
getTableData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetPasswordFunc = (row) => {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'是否将此用户密码重置为123456?',
|
||||||
|
'警告',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
).then(async () => {
|
||||||
|
const res = await resetPassword({
|
||||||
|
ID: row.ID,
|
||||||
|
})
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: res.msg,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: res.msg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const setAuthorityIds = () => {
|
||||||
|
tableData.value && tableData.value.forEach((user) => {
|
||||||
|
user.authorityIds = user.authorities && user.authorities.map(i => {
|
||||||
|
return i.authorityId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteUserFunc = async (row) => {
|
||||||
|
ElMessageBox.confirm('确定要删除吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
const res = await deleteUser({ id: row.ID })
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
await getTableData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const elUserEditRef = ref(null)
|
||||||
|
const addUser = () => {
|
||||||
|
elUserEditRef.value.openEdit({ organizeId: selectedOrganize.value.ID })
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (user) => {
|
||||||
|
elUserEditRef.value.openEdit(user)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSaveUser = () => {
|
||||||
|
getTableData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const tempAuth = {}
|
||||||
|
const changeAuthority = async (row, flag, removeAuth) => {
|
||||||
|
if (flag) {
|
||||||
|
if (!removeAuth) {
|
||||||
|
tempAuth[row.ID] = [...row.authorityIds]
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (equalArr(tempAuth[row.ID], row.authorityIds)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await nextTick()
|
||||||
|
const res = await setUserAuthorities({
|
||||||
|
ID: row.ID,
|
||||||
|
authorityIds: row.authorityIds
|
||||||
|
})
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({ type: 'success', message: '角色设置成功' })
|
||||||
|
} else {
|
||||||
|
if (!removeAuth) {
|
||||||
|
row.authorityIds = [...tempAuth[row.ID]]
|
||||||
|
delete tempAuth[row.ID]
|
||||||
|
} else {
|
||||||
|
row.authorityIds = [removeAuth, ...row.authorityIds]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let oldOrganizeId = -1
|
||||||
|
const changeOrganize = async (flag, row) => {
|
||||||
|
if (flag) {
|
||||||
|
// 展开时，临时存储信息
|
||||||
|
oldOrganizeId = row.organizeId
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭时，判断是否有变化
|
||||||
|
if (oldOrganizeId === row.organizeId) {
|
||||||
|
// 无变化
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const res = await setUserInfo(row)
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({ type: 'success', message: '部门设置成功' })
|
||||||
|
getTableData()
|
||||||
|
} else {
|
||||||
|
row.organizeId = oldOrganizeId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const switchEnable = async (row) => {
|
||||||
|
await nextTick()
|
||||||
|
const req = {
|
||||||
|
...row
|
||||||
|
}
|
||||||
|
const res = await setUserInfo(req)
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage({ type: 'success', message: `${req.enable === 2 ? '禁用' : '启用'}成功` })
|
||||||
|
await getTableData()
|
||||||
|
userInfo.value.headerImg = ''
|
||||||
|
userInfo.value.authorityIds = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ openList })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-aside v-if="!isCollapse">
|
||||||
|
<div class="gva-table-box">
|
||||||
|
<div class="gva-btn-list">
|
||||||
|
<el-text size="large" tag="b">部门管理</el-text>
|
||||||
|
</div>
|
||||||
|
<!-- 由于此处分类跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
|
||||||
|
<el-tree ref="elOrganizeTreeRef" :data="dataSource" node-key="ID" default-expand-all highlight-current
|
||||||
|
:expand-on-click-node="false" @current-change="handleNodeClick">
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<span>{{ data.name }}</span>
|
||||||
|
<span>
|
||||||
|
<el-button v-if="data.ID > 0" type="success" link size="small" @click="handleNodeEdit(data)">
|
||||||
|
<el-icon>
|
||||||
|
<EditPen />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="data.ID > 0" type="danger" link size="small" @click="handleNodeRemove(data)">
|
||||||
|
<el-icon>
|
||||||
|
<Delete />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" link size="small" @click="handleNodeAdd(data)">
|
||||||
|
<el-icon>
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
<OrganizeEdit ref="elOrganizeEditRef" :organizeOptions="dataSource" @on-save="handleSaveSuccess" />
|
||||||
|
</div>
|
||||||
|
</el-aside>
|
||||||
|
<el-main :style="!isCollapse ? 'padding:0; margin-left: 15px;' : 'padding:0;'">
|
||||||
|
<div class="gva-table-box">
|
||||||
|
<UserList ref="elUserListRef" :organizeOptions="dataSource" @collapse="handleCollapse" />
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import UserList from '@/view/organize/components/userList.vue'
|
||||||
|
import OrganizeEdit from '@/view/organize/components/organizeEdit.vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import {
|
||||||
|
getOrganizeTree,
|
||||||
|
getOrganizeById,
|
||||||
|
addOrganize,
|
||||||
|
deleteOrganize,
|
||||||
|
updateOrganize,
|
||||||
|
} from '@/api/organize'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
name: 'Organize',
|
||||||
|
})
|
||||||
|
const isCollapse = ref(false)
|
||||||
|
const handleCollapse = (flag) => {
|
||||||
|
isCollapse.value = flag
|
||||||
|
}
|
||||||
|
const dataSource = ref([
|
||||||
|
{
|
||||||
|
ID: 0,
|
||||||
|
name: "中科智库",
|
||||||
|
children: []
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const elOrganizeTreeRef = ref(null)
|
||||||
|
watch(() => dataSource.value, () => {
|
||||||
|
// elOrganizeTreeRef.setCurrentKey(0, true)
|
||||||
|
})
|
||||||
|
|
||||||
|
const getTreeData = async () => {
|
||||||
|
const res = await getOrganizeTree()
|
||||||
|
const root = [{
|
||||||
|
ID: 0,
|
||||||
|
name: "中科智库",
|
||||||
|
children: [],
|
||||||
|
}]
|
||||||
|
dataSource.value = root
|
||||||
|
if (res.code === 0) {
|
||||||
|
if (res.data.organizeTree) {
|
||||||
|
dataSource.value[0].children = res.data.organizeTree
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getTreeData()
|
||||||
|
|
||||||
|
const elOrganizeEditRef = ref(null)
|
||||||
|
const handleNodeClick = (data) => {
|
||||||
|
elUserListRef.value.openList(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNodeAdd = (data) => {
|
||||||
|
elOrganizeEditRef.value.openEdit({ parentId: data.ID })
|
||||||
|
}
|
||||||
|
const handleNodeEdit = async (data) => {
|
||||||
|
elOrganizeEditRef.value.openEdit(data)
|
||||||
|
}
|
||||||
|
const handleNodeRemove = (data) => {
|
||||||
|
console.log(data)
|
||||||
|
ElMessageBox.confirm('确定要删除吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
const res = await deleteOrganize({ ID: data.ID })
|
||||||
|
if (res.code === 0) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
await getTreeData()
|
||||||
|
elUserListRef.value.openList(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const elUserListRef = ref(null)
|
||||||
|
|
||||||
|
const handleSaveSuccess = () => {
|
||||||
|
getTreeData()
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-node {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue