admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：部门管理重构

Browse Source
This commit is contained in:
sheng
2023-07-27 18:31:28 +08:00
committed by 李强
parent 941dbbc783
commit 2bad36c982
9 changed files with 651 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/views/system/dept/components/FormCom.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right"
class="dept-form-com">
<el-form-item label="部门ID" prop="id">
<el-input v-model="deptFormData.id" disabled />
</el-form-item>
<el-form-item label="父级部门ID" prop="parent">
<el-input v-model="deptFormData.parent" />
</el-form-item>
<el-form-item required label="部门名称" prop="name">
<el-input v-model="deptFormData.name" />
</el-form-item>
<el-form-item required label="部门标识" prop="key">
<el-input v-model="deptFormData.key" />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="deptFormData.owner" />
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="deptFormData.phone" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="deptFormData.email" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="deptFormData.sort" controls-position="right" />
</el-form-item>
<el-form-item>
<el-button @click="handleUpdateMenu('update')" type="primary" :disabled="deptBtnLoading">保存</el-button>
<el-button @click="handleClose">取消
</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { ElForm, FormRules } from 'element-plus';
import { DeptFormDataType, TreeItemType } from '../types';
interface IProps {
initFormData: TreeItemType | null;
}
const formRef = ref<InstanceType<typeof ElForm>>();
const rules = reactive<FormRules>({
name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
});
const props = withDefaults(defineProps<IProps>(), {
initFormData: () => null,
})
const emit = defineEmits(['drawerClose'])
let deptFormData = reactive<DeptFormDataType>({
id: '',
key: '',
parent: '',
name: '',
owner: '',
phone: '',
email: '',
sort: 0,
is_catalog: true,
})
let deptBtnLoading = ref(false)
const handleUpdateMenu = (type: string) => { };
const handleClose = () => {
emit('drawerClose')
formRef.value?.resetFields();
};
onMounted(() => {
console.log(props.initFormData?.id, '----');
})
</script>
<style lang="scss" scoped>
.dept-form-com {
height: 100%;
padding: 20px;
box-sizing: border-box;
}
</style>

251
web/src/views/system/dept/components/TreeCom.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入部门名称" />
<div class="tree-com">
<div class="tc-head">
<el-icon size="16" color="#606266" class="tc-head-icon">
<HomeFilled />
</el-icon>
<span class="tc-head-txt">部门架构</span>
<el-icon size="16" color="#606266" @click="() => showTotalNum = !showTotalNum" class="tc-head-icon">
<View v-show="!showTotalNum" />
<Hide v-show="showTotalNum" />
</el-icon>
</div>
<el-tree ref="treeRef" :data="treeData" :props="treeProps" :filter-node-method="handleFilterTreeNode"
:load="handleLoadNode" lazy :indent="38" @node-click="handleNodeClick" highlight-current default-expand-all>
<template #default="{ node, data }">
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
<span v-if="data.status" class="text-center font-black font-normal">
<SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
<span v-show="showTotalNum">（10人）</span>
</span>
<span v-else class="text-center font-black font-normal text-red-700">
<SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
</span>
</element-tree-line>
</template>
</el-tree>
<div class="tree-tags">
<el-tooltip effect="dark" content="新增">
<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
<Plus />
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="编辑">
<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
<Edit />
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="上移">
<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
<Top />
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="下移">
<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
<Bottom />
</el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="删除">
<el-icon size="16" @click="handleDeleteDept" class="mlt-icon">
<Delete />
</el-icon>
</el-tooltip>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, toRaw, h } from 'vue';
import { ElTree } from 'element-plus';
import { getElementLabelLine } from "element-tree-line";
import { Search } from '@element-plus/icons-vue';
import { lazyLoadDept } from '../api';
import { warningMessage } from '../../../../utils/message';
import { TreeItemType, APIResponseData } from '../types';
import type Node from 'element-plus/es/components/tree/src/model/node';
interface IProps {
treeData: TreeItemType[];
}
const ElementTreeLine = getElementLabelLine(h);
const treeProps = {
children: 'children',
label: 'name',
};
withDefaults(defineProps<IProps>(), {
treeData: () => [],
})
const emit = defineEmits(['setFormInitData', 'deleteDept', 'updateDept'])
let filterVal = ref('');
let showTotalNum = ref(false)
let treeSelectDept = ref<TreeItemType>({})
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterVal, (val) => {
treeRef.value!.filter(val);
});
const handleFilterTreeNode = (value: string, data: TreeItemType) => {
if (!value) return true;
return toRaw(data).name?.indexOf(value) !== -1;
};
const handleLoadNode = (node: Node, resolve: Function) => {
if (node.level !== 0) {
lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
resolve(res.data);
});
}
};
const handleNodeClick = (data: TreeItemType) => {
treeSelectDept.value = data
emit('setFormInitData', data)
};
/**
* 新增 or 编辑 操作
*/
const handleUpdateMenu = (type: string) => {
if (type === 'update') {
if (!treeSelectDept.value.id) {
warningMessage('请选择菜单！')
return
}
emit('updateDept', type, treeSelectDept.value)
} else {
emit('updateDept', type);
}
};
/**
* 删除部门
*/
const handleDeleteDept = () => {
if (!treeSelectDept.value.id) {
warningMessage('请选择菜单！')
return
}
emit('deleteDept', treeSelectDept.value.id, () => {
treeSelectDept.value = {}
})
};
/**
* 部门上下移动操作
*/
const handleSort = (type: string) => { }
</script>
<style lang="scss" scoped>
.tc-head {
display: flex;
align-items: center;
margin-left: -8px;
color: #606266;
font-weight: 600;
.tc-head-txt {
margin: 0 8px;
}
.tc-head-icon {
position: relative;
top: -1px;
cursor: pointer;
}
}
.tree-tags {
height: 40px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
.mlt-icon {
cursor: pointer;
color: var(--el-color-primary);
}
}
</style>
<style lang="scss">
.tree-com {
height: calc(100% - 60px);
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
.el-tree-node__content {
height: 32px !important;
}
.el-tree .el-tree-node__expand-icon svg {
display: none !important;
height: 0;
width: 0;
}
.el-tree-node__expand-icon {
font-size: 16px;
}
.el-tree-node__content>.el-tree-node__expand-icon {
padding: 0;
box-sizing: border-box;
margin-right: 5px;
margin-left: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-tree-node__expand-icon.is-leaf {
margin-left: 0
}
.el-tree .el-tree-node__expand-icon:before {
background: url("../../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
content: '';
display: block;
width: 24px;
height: 24px;
}
.el-tree .el-tree-node__expand-icon.expanded:before {
background: url("../../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
content: '';
display: block;
width: 24px;
height: 24px;
}
.el-tree .is-leaf.el-tree-node__expand-icon::before {
display: block;
background: none !important;
content: '';
width: 18px;
height: 18px;
border: none;
}
}
</style>