部门管理模块增删改查完成
This commit is contained in:
parent
25bade7644
commit
bcd60063f4
|
|
@ -1,6 +1,6 @@
|
|||
import { defAxios as request } from '@/utils/http'
|
||||
/**
|
||||
* 获取部门分页数据接口
|
||||
* 获取部门管理数据接口
|
||||
* @returns 部门分页
|
||||
*/
|
||||
export function getDeptList(params) {
|
||||
|
|
|
|||
|
|
@ -14,75 +14,39 @@
|
|||
:on-positive-click="handleConfirm"
|
||||
:on-negative-click="handleClose"
|
||||
>
|
||||
<n-form-item
|
||||
label="头像:"
|
||||
path="avatar"
|
||||
>
|
||||
<uploadImage
|
||||
:options="{
|
||||
max:1,
|
||||
action: '/upload/uploadImage/demo',
|
||||
}"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="用户编号:" path="code">
|
||||
<n-form-item label="部门编号:" path="code">
|
||||
<n-input
|
||||
v-model:value="form.code"
|
||||
clearable
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户编号"
|
||||
placeholder="请输入部门编号"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="用户账号:" path="username">
|
||||
<n-form-item label="部门名称:" path="name">
|
||||
<n-input
|
||||
v-model:value="form.username"
|
||||
v-model:value="form.name"
|
||||
clearable
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户账号"
|
||||
placeholder="请输入部门名称"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="登录密码:"
|
||||
path="password"
|
||||
>
|
||||
<n-form-item label="部门全称:" path="fullname">
|
||||
<n-input
|
||||
v-model:value="form.password"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="用户姓名:" path="realname">
|
||||
<n-input
|
||||
v-model:value="form.realname"
|
||||
v-model:value="form.fullname"
|
||||
clearable
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户姓名"
|
||||
placeholder="请输入部门全称"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="所属部门:" path="deptId">
|
||||
<n-form-item label="所属部门:" path="pid">
|
||||
<n-select
|
||||
v-model:value="form.deptId"
|
||||
:options="deptOptions"
|
||||
v-model:value="form.pid"
|
||||
:options="getDeptList"
|
||||
placeholder="请选择所属部门"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="角色:" path="roleIds">
|
||||
<n-select
|
||||
v-model:value="form.roleIds"
|
||||
clearable
|
||||
:multiple="true"
|
||||
:options="rolesOptions"
|
||||
placeholder="请选择角色"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group
|
||||
v-model:value="form.status"
|
||||
>
|
||||
<n-radio :value="1">正常</n-radio>
|
||||
<n-radio :value="2">禁用</n-radio>
|
||||
</n-radio-group>
|
||||
<n-form-item label="排序号" path="sort">
|
||||
<n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="备注:"
|
||||
|
|
@ -101,16 +65,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
|
||||
import { defineComponent, computed, reactive, toRefs } from 'vue'
|
||||
import Modal from '@/components/Modal/index.vue'
|
||||
import uploadImage from '@/components/ImgUpload/index.vue'
|
||||
import { getDeptAll } from '@/api/system/dept/index'
|
||||
import { getRoleAll } from '@/api/system/role/index'
|
||||
import { addUser, editUser } from '@/api/system/user/index'
|
||||
import { dataToSelect } from '@/utils/handleData.js'
|
||||
import { addDept, editDept } from '@/api/system/dept/index'
|
||||
export default defineComponent({
|
||||
name: 'UserModal',
|
||||
components: { Modal, uploadImage },
|
||||
components: { Modal },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
|
|
@ -119,6 +79,10 @@ export default defineComponent({
|
|||
row: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
deptList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
|
|
@ -142,34 +106,38 @@ export default defineComponent({
|
|||
deptOptions: [],
|
||||
rolesOptions: [],
|
||||
rules: {
|
||||
avatar: [
|
||||
{ required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入编号', trigger: 'blur' }
|
||||
{ required: true, message: '请输入部门编号', trigger: 'blur' }
|
||||
],
|
||||
realname: [
|
||||
{ required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
|
||||
name: [
|
||||
{ required: true, message: '请输入部门名称', type: 'string', trigger: 'blur' }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
|
||||
],
|
||||
roleIds: [
|
||||
{ required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
|
||||
sort: [
|
||||
{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
})
|
||||
// 获取部门选项
|
||||
const getDeptList = computed(() => {
|
||||
const list = props.deptList.map((item) => {
|
||||
const menu = {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
return menu
|
||||
})
|
||||
return list
|
||||
})
|
||||
|
||||
const getModalOptions = computed(() => {
|
||||
const row = props.row
|
||||
if (props.row.pid === 0) {
|
||||
row.pid = null
|
||||
}
|
||||
return {
|
||||
title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
|
||||
title: props.row.name ? '编辑部门' : '添加部门',
|
||||
show: props.visible,
|
||||
form: Object.assign(data.form, props.row),
|
||||
form: Object.assign(data.form, row),
|
||||
negativeText: '取消',
|
||||
positiveText: '确认'
|
||||
}
|
||||
|
|
@ -180,44 +148,21 @@ export default defineComponent({
|
|||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 获取部门列表
|
||||
async function getDeptOptions() {
|
||||
const res = await getDeptAll()
|
||||
data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
|
||||
}
|
||||
|
||||
// 获取角色列表
|
||||
async function getRoleOptions() {
|
||||
const res = await getRoleAll()
|
||||
data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDeptOptions()
|
||||
getRoleOptions()
|
||||
})
|
||||
|
||||
// 上传文件
|
||||
const handleUpload = ({ file }) => {
|
||||
console.log(file)
|
||||
// data.form.avatar = file.url
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
getDeptList,
|
||||
getModalOptions,
|
||||
handleClose,
|
||||
handleUpload
|
||||
handleClose
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 表单提交
|
||||
handleConfirm() {
|
||||
const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
|
||||
const type = this.row.name ? 'edit' : 'add'
|
||||
this.$refs.formRef.validate((errors) => {
|
||||
if (!errors) {
|
||||
if (type === 'add') {
|
||||
addUser(this.form).then(res => {
|
||||
addDept(this.form).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.handleClose()
|
||||
this.$emit('done')
|
||||
|
|
@ -229,7 +174,7 @@ export default defineComponent({
|
|||
console.log(e)
|
||||
})
|
||||
} else if (type === 'edit') {
|
||||
editUser(this.form).then(res => {
|
||||
editDept(this.form).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.handleClose()
|
||||
this.$emit('done')
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<n-card>
|
||||
<headSearch :info="info" @search="handleSearch" />
|
||||
<data-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
:pagination="false"
|
||||
data-type="tree"
|
||||
size="large"
|
||||
scroll-x="1200"
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
v-if="modalShow"
|
||||
v-model:visible="modalShow"
|
||||
:row="rowData"
|
||||
:dept-list="deptList"
|
||||
@done="handleSearch"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -30,13 +31,13 @@
|
|||
import headSearch from '@/components/Search/index.vue'
|
||||
import dataTable from '@/components/DataTable/index.vue'
|
||||
import TableAction from '@/components/DataTable/tools/Action.vue'
|
||||
import { getDeptList, deleteDept } from '@/api/system/dept/index.js'
|
||||
import { h, unref, toRefs, ref, reactive } from 'vue'
|
||||
import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
|
||||
import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
|
||||
import DeptModal from './components/DeptModal.vue'
|
||||
import info from './info.js'
|
||||
export default {
|
||||
name: 'MenuPage',
|
||||
components: { dataTable, DeptModal, headSearch},
|
||||
components: { dataTable, DeptModal, headSearch },
|
||||
setup() {
|
||||
const data = reactive({
|
||||
columns: [
|
||||
|
|
@ -55,34 +56,22 @@ export default {
|
|||
key: 'fullname',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '部门类型',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'note',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 160
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
key: 'updateTime',
|
||||
align: 'center',
|
||||
width: 160
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
|
|
@ -97,18 +86,29 @@ export default {
|
|||
type: 'button',
|
||||
props: {
|
||||
type: 'primary',
|
||||
onClick: play.bind(null, row)
|
||||
onClick: add.bind(null, row)
|
||||
},
|
||||
auth: 'basic_list'
|
||||
},
|
||||
{
|
||||
label: '修改',
|
||||
type: 'button',
|
||||
props: {
|
||||
type: 'primary',
|
||||
onClick: play.bind(null, row)
|
||||
},
|
||||
auth: 'basic_list'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'popconfirm',
|
||||
auth: 'basic_list'
|
||||
auth: 'basic_list',
|
||||
tip: '确定删除这条数据吗?',
|
||||
props: {
|
||||
negativeText: '取消',
|
||||
positiveText: '确认',
|
||||
onPositiveClick: deleteSingle.bind(null, row.id)
|
||||
}
|
||||
}
|
||||
],
|
||||
align: 'center'
|
||||
|
|
@ -116,23 +116,24 @@ export default {
|
|||
}
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
info: ref(info),
|
||||
modalShow: false,
|
||||
rowData: {}
|
||||
rowData: {
|
||||
status: 1,
|
||||
type: 0,
|
||||
hide: 0
|
||||
},
|
||||
deptList: []
|
||||
})
|
||||
|
||||
// 新增
|
||||
function handleModal() {
|
||||
data.modalShow = true
|
||||
// 获取全部菜单信息
|
||||
async function getDept() {
|
||||
const list = await getDeptAll()
|
||||
data.deptList = list.data
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function play(row) {
|
||||
data.rowData = row
|
||||
data.modalShow = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDept()
|
||||
})
|
||||
/**
|
||||
* @description: 获取部门数据并做树形结构处理
|
||||
* @return {*}
|
||||
|
|
@ -156,7 +157,46 @@ export default {
|
|||
return await getDeptList(_params)
|
||||
}
|
||||
|
||||
return { ...toRefs(data), loadDataTable, handleSearch, handleModal }
|
||||
// 新增
|
||||
function handleModal() {
|
||||
data.modalShow = true
|
||||
data.rowData = {}
|
||||
}
|
||||
// 行内新增
|
||||
function add(row) {
|
||||
data.modalShow = true
|
||||
data.rowData = {}
|
||||
data.rowData.pid = row.id
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function play(row) {
|
||||
data.rowData = row
|
||||
data.modalShow = true
|
||||
}
|
||||
|
||||
// 单个删除数据
|
||||
function deleteSingle(id) {
|
||||
deleteData(id)
|
||||
}
|
||||
|
||||
// 删除方法
|
||||
function deleteData(id) {
|
||||
deleteDept(id)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
handleSearch({})
|
||||
$message.success(res.msg)
|
||||
} else {
|
||||
$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
|
||||
return { ...toRefs(data), tableRef, loadDataTable, handleSearch, handleModal, deleteSingle }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<n-form-item label="上级菜单" path="pid">
|
||||
<n-select
|
||||
v-model:value="form.pid"
|
||||
placeholder="请选择上级菜单"
|
||||
:options="getMenuList"
|
||||
placeholder="请选择上级菜单"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
|
|
@ -128,6 +128,7 @@ export default defineComponent({
|
|||
}],
|
||||
sort: [{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请输入排序号',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
|
|
@ -192,7 +193,7 @@ export default defineComponent({
|
|||
methods: {
|
||||
// 表单提交
|
||||
handleConfirm() {
|
||||
const type = this.data.title ? 'add' : 'edit'
|
||||
const type = this.data.title ? 'edit' : 'add'
|
||||
this.$refs.formRef.validate((errors) => {
|
||||
if (!errors) {
|
||||
if (type === 'add') {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:request="loadDataTable"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-button type="primary" @click="handlleRoleAdd"> 添加菜单 </n-button>
|
||||
<n-button type="primary" @click="handleModal"> 添加菜单 </n-button>
|
||||
</template>
|
||||
</data-table>
|
||||
</n-card>
|
||||
|
|
@ -217,7 +217,7 @@ export default {
|
|||
}
|
||||
|
||||
// 打开新增弹框
|
||||
function handlleRoleAdd() {
|
||||
function handleModal() {
|
||||
data.modalShow = true
|
||||
data.rowData = {}
|
||||
}
|
||||
|
|
@ -258,7 +258,7 @@ export default {
|
|||
tableRef,
|
||||
loadDataTable,
|
||||
handleSearch,
|
||||
handlleRoleAdd,
|
||||
handleModal,
|
||||
deleteSingle
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue