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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
H0nGzA1
2023-07-28 18:12:06 +08:00
parent 4e5f9ce946 e790882ab6
commit eea5cdadfe
6 changed files with 725 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/views/system/dept/api.ts
View File

@@ -1,5 +1,5 @@
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud'; import { UserPageQuery, AddReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/dept/'; export const apiPrefix = '/api/system/dept/';

173
web/src/views/system/dept/components/DeptFormCom.vue
View File

@@ -1,40 +1,29 @@
<template> <template>
<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right" <el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right" class="dept-form-com">
class="dept-form-com"> <el-form-item label="父级部门" prop="parent">
<el-form-item label="部门ID" prop="id"> <el-select v-model="deptFormData.parent" style="width: 100%">
<el-input v-model="deptFormData.id" disabled /> <el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" />
</el-form-item> </el-select>
<el-form-item label="父级部门" prop="parent"> </el-form-item>
<el-select v-model="deptFormData.parent" style="width: 100%"> <el-form-item required label="部门名称" prop="name">
<el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" /> <el-input v-model="deptFormData.name" />
</el-select> </el-form-item>
</el-form-item> <el-form-item required label="部门标识" prop="key">
<el-form-item required label="部门名称" prop="name"> <el-input v-model="deptFormData.key" />
<el-input v-model="deptFormData.name" /> </el-form-item>
</el-form-item> <el-form-item label="负责人" prop="owner">
<el-form-item required label="部门标识" prop="key"> <el-input v-model="deptFormData.owner" />
<el-input v-model="deptFormData.key" /> </el-form-item>
</el-form-item> <el-form-item label="备注" prop="remark">
<el-form-item label="负责人" prop="owner"> <el-input v-model="deptFormData.remark" maxlength="200" show-word-limit type="textarea" />
<el-input v-model="deptFormData.owner" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item label="联系电话" prop="phone"> <el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading">
<el-input v-model="deptFormData.phone" /> {{ deptFormData.id ? '保存' : '新增' }}
</el-form-item> </el-button>
<el-form-item label="邮箱" prop="email"> <el-button @click="handleClose">取消 </el-button>
<el-input v-model="deptFormData.email" /> </el-form-item>
</el-form-item> </el-form>
<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" type="primary" :disabled="deptBtnLoading">
{{ deptFormData.id ? '保存' : '新增' }}
</el-button>
<el-button @click="handleClose">取消
</el-button>
</el-form-item>
</el-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -45,90 +34,84 @@ import { successNotification } from '../../../../utils/message';
import { DeptFormDataType, TreeItemType, DeptListType } from '../types'; import { DeptFormDataType, TreeItemType, DeptListType } from '../types';
interface IProps { interface IProps {
initFormData: TreeItemType | null; initFormData: TreeItemType | null;
} }
const formRef = ref<InstanceType<typeof ElForm>>(); const formRef = ref<InstanceType<typeof ElForm>>();
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
name: [{ required: true, message: '部门名称必填', trigger: 'blur' }], name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
key: [{ required: true, message: '部门标识必填', trigger: 'blur' }], key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
}); });
const props = withDefaults(defineProps<IProps>(), { const props = withDefaults(defineProps<IProps>(), {
initFormData: () => null, initFormData: () => null,
}) });
const emit = defineEmits(['drawerClose']) const emit = defineEmits(['drawerClose']);
let deptAllList = ref<DeptListType[]>([]); let deptAllList = ref<DeptListType[]>([]);
let deptFormData = reactive<DeptFormDataType>({ let deptFormData = reactive<DeptFormDataType>({
id: '', key: '',
key: '', parent: '',
parent: '', name: '',
name: '', owner: '',
owner: '', remark: '',
phone: '', is_catalog: true,
email: '', });
sort: 0, let deptBtnLoading = ref(false);
is_catalog: true,
})
let deptBtnLoading = ref(false)
const getData = async () => { const getData = async () => {
const res = await getAllDeptList(); const res = await getAllDeptList();
if (res?.code === 2000) { if (res?.code === 2000) {
deptAllList.value = res.data deptAllList.value = res.data;
} }
} };
const setDeptFormData = () => { const setDeptFormData = () => {
if (props.initFormData?.id) { if (props.initFormData?.id) {
deptFormData.id = props.initFormData?.id; deptFormData.id = props.initFormData?.id;
deptFormData.key = props.initFormData.key || ''; deptFormData.key = props.initFormData.key || '';
deptFormData.parent = props.initFormData.parent || ''; deptFormData.parent = props.initFormData.parent || '';
deptFormData.name = props.initFormData.name || ''; deptFormData.name = props.initFormData.name || '';
deptFormData.owner = props.initFormData.owner || ''; deptFormData.owner = props.initFormData.owner || '';
deptFormData.phone = props.initFormData.phone || ''; }
deptFormData.email = props.initFormData.email || ''; };
deptFormData.sort = props.initFormData.sort || 0;
}
}
const handleUpdateMenu = () => { const handleUpdateMenu = () => {
formRef.value?.validate(async (valid) => { formRef.value?.validate(async (valid) => {
if (!valid) return if (!valid) return;
try { try {
let res; let res;
deptBtnLoading.value = true deptBtnLoading.value = true;
if (deptFormData.id) { if (deptFormData.id) {
res = await UpdateObj(deptFormData); res = await UpdateObj(deptFormData);
} else { } else {
res = await AddObj(deptFormData) res = await AddObj(deptFormData);
} }
if (res?.code === 2000) { if (res?.code === 2000) {
successNotification(res.msg as string); successNotification(res.msg as string);
handleClose('submit'); handleClose('submit');
} }
} finally { } finally {
deptBtnLoading.value = false deptBtnLoading.value = false;
} }
}) });
}; };
const handleClose = (type: string = '') => { const handleClose = (type: string = '') => {
emit('drawerClose', type) emit('drawerClose', type);
formRef.value?.resetFields(); formRef.value?.resetFields();
}; };
onMounted(async () => { onMounted(async () => {
await getData() await getData();
setDeptFormData() setDeptFormData();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dept-form-com { .dept-form-com {
height: 100%; height: 100%;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>

342
web/src/views/system/dept/components/TreeCom.vue
View File

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

6
web/src/views/system/dept/types.ts
View File

@@ -40,14 +40,12 @@ export interface TreeItemType {
} }
export interface DeptFormDataType { export interface DeptFormDataType {
id: string | number; id?: string | number;
key: string; key: string;
parent: string | number; parent: string | number;
name: string; name: string;
owner: string; owner: string;
phone: string; remark: string;
email: string;
sort: number;
is_catalog?: boolean; is_catalog?: boolean;
} }

12
web/src/views/system/menu/components/menuButton/crud.tsx
View File

@@ -1,12 +1,4 @@
import { import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps, UserPageQuery } from '@fast-crud/fast-crud';
AddReq,
DelReq,
EditReq,
dict,
CreateCrudOptionsRet,
CreateCrudOptionsProps,
UserPageQuery,
} from '@fast-crud/fast-crud';
import * as api from './api'; import * as api from './api';
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
@@ -185,7 +177,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
}, },
}), }),
column: { column: {
minWidth: 200, minWidth: 250,
sortable: true, sortable: true,
}, },
form: { form: {

879
web/src/views/system/menu/index.vue
View File

File diff suppressed because it is too large Load Diff