Skip to content

S
shop-vite-main
提交 3c903113 作者: 郁骅焌
操作

部门管理

上级 552b13b7
正在显示 包含 395 行增加 和 7 行删除
library/build/unplugin/components.d.ts
......@@ -33,6 +33,7 @@ declare module 'vue' {
DataScreenRight3: typeof import('./../../../src/views/index/vabAutoComponents/DataScreenRight3.vue')['default']
DefaultTableEdit: typeof import('./../../../src/views/vab/table/vabAutoComponents/DefaultTableEdit.vue')['default']
DepartmentManagementEdit: typeof import('./../../../src/views/setting/departmentManagement/vabAutoComponents/DepartmentManagementEdit.vue')['default']
DepartmentManagementEdit2: typeof import('./../../../src/views/system/departmentManagement/vabAutoComponents/DepartmentManagementEdit2.vue')['default']
Develop: typeof import('./../../../src/views/index/vabAutoComponents/Develop.vue')['default']
DictionaryManagementEdit: typeof import('./../../../src/views/setting/dictionaryManagement/vabAutoComponents/DictionaryManagementEdit.vue')['default']
DictTag: typeof import('./../../components/DictTag/index.vue')['default']
......
src/api/departmentManagement.ts
import request from '/@/utils/request'
// 查询部门列表
export function listDept(params?: any) {
return request({
url: '/system/dept/list',
method: 'get',
params,
})
}
export function getList(params?: any) {
return request({
url: '/departmentManagement/getList',
......@@ -8,22 +17,48 @@ export function getList(params?: any) {
})
}
export const doEdit = (data: any) => {
/** 新增部门 */
export const doAdd = (data: any) => {
return request({
url: '/departmentManagement/doEdit',
url: '/system/dept',
method: 'post',
data,
})
}
export const doDelete = (data: any) => {
/** 修改部门 */
export const doEdit = (data: any) => {
return request({
url: '/departmentManagement/doDelete',
method: 'post',
url: '/system/dept',
method: 'put',
data,
})
}
/** 删除部门 */
export const doDelete = (deptId: any) => {
return request({
url: `/system/dept/${deptId}`,
method: 'delete',
})
}
// 查询部门详细
export function getDept(deptId: any) {
return request({
url: `/system/dept/${deptId}`,
method: 'get',
})
}
// 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId: any) {
return request({
url: `/system/dept/list/exclude/${deptId}`,
method: 'get',
})
}
// 查询部门下拉树结构
export function deptTreeSelect() {
return request({
......
src/views/system/departmentManagement/index.vue 0 → 100755
<template>
<div class="department-management-container auto-height-container" :class="{ 'fullscreen-container': isFullscreen }">
<vab-query-form>
<vab-query-form-top-panel>
<el-form ref="queryRef" inline label-width="70px" :model="queryForm" @submit.prevent>
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="queryForm.deptName" clearable placeholder="请输入部门名称" style="width: 200px" @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item v-show="!fold" label="状态" prop="status">
<el-select v-model="queryForm.status" clearable placeholder="部门状态" style="width: 200px">
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="Search" :loading="listLoading" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button class="hidden-xs-only" text type="primary" @click="handleFold">
<span v-if="fold">展开</span>
<span v-else>合并</span>
<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
</el-button>
</el-form-item>
</el-form>
</vab-query-form-top-panel>
<vab-query-form-left-panel>
<el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
<el-button icon="Sort" plain type="info" @click="toggleExpandAll">展开/折叠</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel>
<div class="custom-table-right-tools">
<el-button @click="handleQuery">
<vab-icon icon="refresh-line" />
</el-button>
<el-button @click="clickFullScreen">
<vab-icon :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
</el-button>
</div>
</vab-query-form-right-panel>
</vab-query-form>
<el-table
v-if="refreshTable"
ref="tableRef"
v-loading="listLoading"
border
:data="list"
:default-expand-all="isExpandAll"
row-key="deptId"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="部门名称" prop="deptName" width="260" />
<el-table-column label="排序" prop="orderNum" width="200" />
<el-table-column label="状态" prop="status" width="100">
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime" width="200" />
<el-table-column align="center" fixed="right" label="操作" min-width="180">
<template #default="scope">
<el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
<el-button icon="Plus" link type="primary" @click="handleAdd(scope.row)">新增</el-button>
<el-button v-if="scope.row.parentId != 0" icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<template #empty>
<el-empty class="vab-data-empty" description="暂无数据" />
</template>
</el-table>
<department-management-edit2 ref="editRef" @fetch-data="fetchData" />
</div>
</template>
<script lang="ts" setup>
import type { TableInstance } from 'element-plus'
import { doDelete, listDept } from '/@/api/departmentManagement'
defineOptions({
label: 'DepartmentManagement',
})
const { proxy } = getCurrentInstance() as any
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const { exit, enter, isFullscreen: _isFullscreen } = useFullscreen()
const isFullscreen = ref<boolean>(false)
const isExpandAll = ref(true)
const refreshTable = ref(true)
const fold = ref<boolean>(true)
const tableRef = ref<TableInstance>()
const editRef = ref<any>(null)
const list = ref<any>([])
const listLoading = ref<boolean>(true)
const queryForm = reactive<any>({
deptName: undefined,
status: undefined,
})
watch(
_isFullscreen,
() => {
if (_isFullscreen.value) isFullscreen.value = true
else isFullscreen.value = false
},
{ immediate: true }
)
onActivated(() => {
tableRef.value?.doLayout()
})
onBeforeMount(() => {
fetchData()
})
/** 点击全屏 */
const clickFullScreen = () => {
isFullscreen.value = !isFullscreen.value
isFullscreen.value ? enter() : exit()
}
/** 搜索条件折叠 */
const handleFold = () => {
fold.value = !fold.value
}
/** 展开/折叠操作 */
function toggleExpandAll() {
refreshTable.value = false
isExpandAll.value = !isExpandAll.value
nextTick(() => {
refreshTable.value = true
})
}
/** 查询菜单列表 */
const fetchData = async () => {
listLoading.value = true
const pp = Object.assign({}, queryForm)
const { data } = (await listDept(pp)) as any
list.value = proxy.handleTree(data, 'deptId')
listLoading.value = false
}
/** 搜索按钮操作 */
function handleQuery() {
fetchData()
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm('queryRef')
handleQuery()
}
/** 新增按钮操作 */
const handleAdd = (row: any = {}) => {
editRef.value.showAdd(row)
}
/** 修改按钮操作 */
const handleUpdate = (row: any = {}) => {
editRef.value.showEdit(row)
}
/** 删除按钮操作 */
const handleDelete = (row: any = {}) => {
if (row.deptId) {
$baseConfirm(`是否确认删除名称为"${row.deptName}"的数据项?`, null, async () => {
const { msg }: any = await doDelete(row.deptId)
$baseMessage(msg, 'success', 'hey')
await fetchData()
})
}
}
</script>
src/views/system/departmentManagement/vabAutoComponents/DepartmentManagementEdit2.vue 0 → 100755
<template>
<vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="600px" @close="close">
<el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
<el-row>
<el-col v-if="form.parentId !== 0" :span="24">
<el-form-item label="上级部门" prop="parentId">
<el-tree-select
v-model="form.parentId"
check-strictly
:data="deptOptions"
placeholder="选择上级部门"
:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
value-key="deptId"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" maxlength="20" placeholder="请输入负责人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" maxlength="11" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" placeholder="请输入邮箱" />
</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" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { doAdd, doEdit, getDept, listDept, listDeptExcludeChild } from '/@/api/departmentManagement'
defineOptions({
name: 'DepartmentManagementEdit2',
})
const { proxy } = getCurrentInstance() as any
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const emit = defineEmits(['fetch-data'])
const deptOptions = ref<any>([])
const formRef = ref<FormInstance>()
const form = ref<any>({
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
status: '0',
})
const rules = reactive<any>({
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
})
const title = ref<string>('')
const dialogFormVisible = ref<boolean>(false)
const showAdd = (row?: any) => {
reset()
listDept().then((response) => {
deptOptions.value = proxy.handleTree(response.data, 'deptId')
})
title.value = '添加'
dialogFormVisible.value = true
nextTick(() => {
if (row !== undefined) {
form.value.parentId = row.deptId
}
})
}
const showEdit = (row: any) => {
reset()
title.value = '编辑'
listDeptExcludeChild(row.deptId).then((response) => {
deptOptions.value = proxy.handleTree(response.data, 'deptId')
})
dialogFormVisible.value = true
nextTick(() => {
getDept(row.deptId).then((response: any) => {
form.value = response.data
})
})
}
/** 表单重置 */
function reset() {
form.value = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
status: '0',
}
proxy.resetForm('deptRef')
}
const close = () => {
formRef.value?.clearValidate()
formRef.value?.resetFields()
emit('fetch-data')
}
const cancel = () => {
close()
dialogFormVisible.value = false
}
const save = () => {
formRef.value?.validate(async (valid: any) => {
if (valid) {
if (form.value.deptId) {
await doEdit(form.value)
await $baseMessage('修改成功', 'success', 'hey')
} else {
await doAdd(form.value)
await $baseMessage('添加成功', 'success', 'hey')
}
cancel()
}
})
}
defineExpose({
showAdd,
showEdit,
})
</script>
<style lang="scss" scoped>
:deep() {
.el-select {
width: 100%;
}
}
</style>
src/views/system/menuManagement/index.vue
......@@ -58,7 +58,7 @@
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime" width="160" />
<el-table-column align="center" fixed="right" label="操作" min-width="150">
<el-table-column align="center" fixed="right" label="操作" min-width="180">
<template #default="scope">
<el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
<el-button icon="Plus" link type="primary" @click="handleAdd(scope.row)">新增</el-button>
......@@ -90,8 +90,8 @@ const isFullscreen = ref<boolean>(false)
const isExpandAll = ref(false)
const refreshTable = ref(true)
const tableRef = ref<TableInstance>()
const fold = ref<boolean>(true)
const tableRef = ref<TableInstance>()
const editRef = ref<any>(null)
const list = ref<any>([])
const listLoading = ref<boolean>(true)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论