feat：部门管理重构
This commit is contained in:
sheng
@@ -1,308 +1,231 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<splitpanes>
|
||||
<pane max-size="20">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<p class="font-mono font-black text-center text-xl pb-5">部门列表</p>
|
||||
<el-input v-model="filterText" :placeholder="placeholder"/>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
class="font-mono font-bold leading-6 text-7xl"
|
||||
:data="data"
|
||||
:props="treeProps"
|
||||
:filter-node-method="filterNode"
|
||||
:load="loadNode"
|
||||
@node-drop="nodeDrop"
|
||||
lazy
|
||||
icon="ArrowRightBold"
|
||||
:indent="12"
|
||||
draggable
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span v-if="data.status" class="text-center font-black font-normal"><SvgIcon
|
||||
:name="node.data.icon"/> {{ node.label }}</span>
|
||||
<span v-else class="text-center font-black font-normal text-red-700"><SvgIcon
|
||||
:name="node.data.icon"/> {{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</pane>
|
||||
<pane>
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="120px" label-position="right">
|
||||
<el-divider>
|
||||
<strong>部门配置</strong>
|
||||
</el-divider>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="部门ID" prop="id">
|
||||
<el-input v-model="form.id" disabled/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="父级部门ID" prop="parent">
|
||||
<el-input v-model="form.parent"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item required label="部门名称" prop="name">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item required label="部门标识" prop="key">
|
||||
<el-input v-model="form.key"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="form.owner"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="form.sort" controls-position="right"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<fs-page>
|
||||
<el-row class="dept-el-row">
|
||||
<el-col :span="6">
|
||||
<div class="dept-box dept-left">
|
||||
<TreeCom :treeData="treeData" @setFormInitData="setFormInitData" @updateDept="handleUpdateMenu"
|
||||
@deleteDept="handleDeleteMenu" />
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col class="center">
|
||||
<el-divider>
|
||||
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
||||
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建
|
||||
</el-button>
|
||||
<el-button @click="addChildMenu()" type="info" round :disabled="!form.id">添加子级
|
||||
</el-button>
|
||||
<el-button @click="addSameLevelMenu()" type="warning" round :disabled="!form.id">
|
||||
添加同级
|
||||
</el-button>
|
||||
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除部门
|
||||
</el-button>
|
||||
</el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</fs-page>
|
||||
<el-col :span="18">
|
||||
<div class="dept-box dept-form">
|
||||
<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="120px" label-position="right">
|
||||
<el-divider>
|
||||
<strong>部门配置</strong>
|
||||
</el-divider>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="部门ID" prop="id">
|
||||
<el-input v-model="deptFormData.id" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="父级部门ID" prop="parent">
|
||||
<el-input v-model="deptFormData.parent" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item required label="部门名称" prop="name">
|
||||
<el-input v-model="deptFormData.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item required label="部门标识" prop="key">
|
||||
<el-input v-model="deptFormData.key" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="deptFormData.owner" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="deptFormData.phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="deptFormData.email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="deptFormData.sort" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col class="center">
|
||||
<el-divider>
|
||||
<el-button @click="handleUpdateMenu('update')" type="primary" round
|
||||
:disabled="!deptFormData.id || deptBtnLoading">保存</el-button>
|
||||
<el-button @click="handleUpdateMenu('create')" type="primary" round :disabled="deptBtnLoading">新建
|
||||
</el-button>
|
||||
<el-button @click="handleDeleteMenu" type="primary" round>删除部门
|
||||
</el-button>
|
||||
</el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-drawer v-model="drawerVisible" title="部门配置" direction="rtl" size="500px" :close-on-click-modal="false"
|
||||
:before-close="handleDrawerClose">
|
||||
<FormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
|
||||
</el-drawer>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="dept">
|
||||
import {Splitpanes, Pane} from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
import * as api from './api';
|
||||
import {ElForm, ElMessageBox, ElTree, FormRules} from 'element-plus';
|
||||
import {ref, onMounted, reactive, toRaw, watch} from 'vue';
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import XEUtils from 'xe-utils';
|
||||
import {errorMessage, successMessage} from '../../../utils/message';
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
name: string;
|
||||
status: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
interface APIResponseData {
|
||||
code?: number;
|
||||
data: [];
|
||||
msg?: string;
|
||||
}
|
||||
|
||||
interface Form<T> {
|
||||
[key: string]: T;
|
||||
}
|
||||
|
||||
const placeholder = ref('请输入部门名称');
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
// isLeaf: (data: Tree[], node: Node) => {
|
||||
// // @ts-ignore
|
||||
// if (node.data.is_catalog) {
|
||||
// return false;
|
||||
// } else {
|
||||
// return true;
|
||||
// }
|
||||
// },
|
||||
};
|
||||
|
||||
const validateWebPath = (rule: string, value: string, callback: Function) => {
|
||||
let pattern = /^\/.*?/;
|
||||
if (!pattern.test(value)) {
|
||||
callback(new Error('请输入正确的地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
return toRaw(data).name.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
// 懒加载
|
||||
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
||||
// @ts-ignore
|
||||
if (node.level !== 0) {
|
||||
// @ts-ignore
|
||||
api.lazyLoadDept({parent: node.data.id}).then((res: APIResponseData) => {
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
|
||||
// @ts-ignore
|
||||
if (!dropNode.isLeaf) {
|
||||
// @ts-ignore
|
||||
api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let data = ref([]);
|
||||
|
||||
let isAddNewMenu = ref(false); // 判断当前是新增部门，还是更新保存当前部门
|
||||
|
||||
let form: Form<any> = reactive({
|
||||
id: '',
|
||||
parent: '',
|
||||
name: '',
|
||||
owner: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
sort: '',
|
||||
});
|
||||
import { ElForm, ElMessageBox, FormRules } from 'element-plus';
|
||||
import TreeCom from './components/TreeCom.vue'
|
||||
import FormCom from './components/FormCom.vue'
|
||||
import { GetList, AddObj, UpdateObj, DelObj } from './api';
|
||||
import { successMessage } from '../../../utils/message';
|
||||
import { APIResponseData, DeptFormDataType, TreeItemType } from './types';
|
||||
|
||||
let treeData = ref([]);
|
||||
let deptFormData = reactive<DeptFormDataType>({
|
||||
id: '',
|
||||
key: '',
|
||||
parent: '',
|
||||
name: '',
|
||||
owner: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
sort: 0,
|
||||
is_catalog: true,
|
||||
})
|
||||
let deptBtnLoading = ref(false)
|
||||
let drawerVisible = ref(false)
|
||||
let drawerFormData = ref<Partial<TreeItemType>>({})
|
||||
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
// @ts-ignore
|
||||
name: [{required: true, message: '部门名称必填', trigger: 'blur'}],
|
||||
key: [{required: true, message: '部门标识必填', trigger: 'blur'}],
|
||||
name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
|
||||
key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const getData = () => {
|
||||
api.GetList({}).then((ret: APIResponseData) => {
|
||||
const responseData = ret.data;
|
||||
const result = XEUtils.toArrayTree(responseData, {
|
||||
parentKey: 'parent',
|
||||
children: 'children',
|
||||
strict: true,
|
||||
});
|
||||
data.value = result;
|
||||
});
|
||||
const getData = async () => {
|
||||
let res: APIResponseData = await GetList({});
|
||||
|
||||
if (res?.code === 2000 && Array.isArray(res.data)) {
|
||||
const result = XEUtils.toArrayTree(res.data, {
|
||||
parentKey: 'parent',
|
||||
children: 'children',
|
||||
strict: true,
|
||||
});
|
||||
|
||||
treeData.value = result;
|
||||
}
|
||||
};
|
||||
|
||||
const saveMenu = () => {
|
||||
formRef.value?.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (!isAddNewMenu.value) {
|
||||
// 保存部门
|
||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||
api.UpdateObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
});
|
||||
} else {
|
||||
// 新增部门
|
||||
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||
api.AddObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
errorMessage('请填写检查表单');
|
||||
}
|
||||
});
|
||||
const setFormInitData = (data: DeptFormDataType) => {
|
||||
deptFormData.id = data.id;
|
||||
deptFormData.key = data.key;
|
||||
deptFormData.name = data.name;
|
||||
deptFormData.parent = data.parent;
|
||||
deptFormData.owner = data.owner;
|
||||
deptFormData.phone = data.phone;
|
||||
deptFormData.email = data.email;
|
||||
deptFormData.sort = data.sort;
|
||||
};
|
||||
|
||||
const newMenu = () => {
|
||||
formRef.value?.resetFields();
|
||||
isAddNewMenu.value = true;
|
||||
const handleDeleteMenu = (id: string, callback: Function) => {
|
||||
ElMessageBox.confirm(
|
||||
'您确认删除该部门吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
const res: APIResponseData = await DelObj(id)
|
||||
callback()
|
||||
if (res?.code === 2000) {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const addChildMenu = () => {
|
||||
let parentId = form.id;
|
||||
formRef.value?.resetFields();
|
||||
form.parent = parentId;
|
||||
isAddNewMenu.value = true;
|
||||
};
|
||||
|
||||
const addSameLevelMenu = () => {
|
||||
let parentId = form.parent;
|
||||
formRef.value?.resetFields();
|
||||
form.parent = parentId;
|
||||
isAddNewMenu.value = true;
|
||||
};
|
||||
|
||||
const deleteMenu = () => {
|
||||
ElMessageBox.confirm(
|
||||
'您确认删除该菜单项吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
api.DelObj(form).then((res: APIResponseData) => {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
});
|
||||
})
|
||||
const handleUpdateMenu = (type: string, record?: TreeItemType) => {
|
||||
if (type === 'update' && record) {
|
||||
drawerFormData.value = record
|
||||
}
|
||||
drawerVisible.value = true
|
||||
//form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
|
||||
/* formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
try {
|
||||
let res;
|
||||
deptBtnLoading.value = true
|
||||
if (type === 'update') {
|
||||
res = await UpdateObj(deptFormData);
|
||||
} else if (type === 'create') {
|
||||
res = await AddObj(deptFormData)
|
||||
}
|
||||
if (res?.code === 2000) {
|
||||
successMessage(res.msg as string);
|
||||
getData();
|
||||
}
|
||||
} finally {
|
||||
type === 'create' && formRef.value?.resetFields();
|
||||
deptBtnLoading.value = false
|
||||
}
|
||||
}); */
|
||||
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
drawerVisible.value = false
|
||||
drawerFormData.value = {}
|
||||
}
|
||||
|
||||
const handleNodeClick = (data: any, node: any, prop: any) => {
|
||||
Object.keys(toRaw(data)).forEach((key: string) => {
|
||||
form[key] = data[key];
|
||||
});
|
||||
delete form.component_name;
|
||||
form.id = data.id;
|
||||
isAddNewMenu.value = false;
|
||||
};
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-row {
|
||||
height: 100%;
|
||||
.dept-el-row {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.el-col {
|
||||
height: 100%;
|
||||
}
|
||||
.el-col {
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
height: 100%;
|
||||
.dept-box {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dept-left {
|
||||
position: relative;
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
.dl-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dept-form {
|
||||
border-radius: 8px 0 0 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user