Skip to content

I
intelligent_qp_manager
Commit 12bbe151 authored by 张伯涛's avatar 张伯涛
Browse files
Options

部门管理模块，用户管理模块修改

parent 94742559
Show whitespace changes
Inline Side-by-side
Showing with 414 additions and 156 deletions
src/api/system/dept/dept.ts
View file @ 12bbe151
...@@ -15,6 +15,39 @@ import { defHttp } from '@/utils/http/axios'; ...@@ -15,6 +15,39 @@ import { defHttp } from '@/utils/http/axios';
enum Api { enum Api {
DeptList = '/system/dept/listAll', DeptList = '/system/dept/listAll',
statusChangeApi = '/system/dept/statusChange/',
deleteByIdApi = '/system/dept/deleteLogical/',
addDeptApi = '/system/dept/add',
updateDeptApi = '/system/dept/update/',
getDeptDetailsApi = '/system/dept/detail/',
listDeptExcludeChildApi = '/system/dept/list/exclude/',
} }
export const getDeptList = (params?: DeptListItem) => /** 列表查询*/
defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params }); export const getDeptList = () =>
defHttp.get<any>({ url: Api.DeptList });
/** 部门状态修改*/
export const statusChange = (params: any) =>
defHttp.put({ url: Api.statusChangeApi+params.businessId,params });
export const deleteById = (params?: any) =>
defHttp.delete<any>({ url: Api.deleteByIdApi +params.id });
/** 部门新增*/
export const addDept = (params: any) =>
defHttp.post({
url: Api.addDeptApi,
params: params,
});
/** 部门编辑*/
export const updateDept = (params: any) =>
defHttp.put({
url: Api.updateDeptApi + params.businessId,
params: params,
});
/** 部门详情*/
export const getDeptDetails = (params:any) =>
defHttp.get<any>({ url: Api.getDeptDetailsApi + params.id });
/** 查询部门列表（排除节点）*/
export const listDeptExcludeChild = (params:any) =>
defHttp.get<any>({ url: Api.listDeptExcludeChildApi + params.id });
src/views/system/dept/DeptModal.vue deleted 100644 → 0
View file @ 94742559
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './dept.data';
import { getDeptList } from '@/api/demo/system';
defineOptions({ name: 'DeptModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: formSchema,
showActionButtonGroup: false,
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
setFieldsValue({
...data.record,
});
}
const treeData = await getDeptList();
updateSchema({
field: 'parentDept',
componentProps: { treeData },
});
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
console.log(values);
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
src/views/system/dept/MenuDrawer.vue 0 → 100644
View file @ 12bbe151
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
showFooter
:title="getTitle"
width="50%"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './dept.data';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { menuDetailApi,menuUpdataApi,getMenuList,addMenuApi } from "@/api/system/menu/menu";
import {useMessage} from "@/hooks/web/useMessage";
import {getDeptList, addDept,getDeptDetails,listDeptExcludeChild,updateDept} from "@/api/system/dept/dept";
defineOptions({ name: 'MenuDrawer' });
const emit = defineEmits(['success', 'register']);
const deptId = ref('');
const isUpdate = ref(true);
const isAdd = ref(true);
const { createMessage } = useMessage();
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { lg: 12, md: 24 },
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
resetFields();
setDrawerProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isAdd.value = !!data?.isAdd;
if (unref(isUpdate)) {
// 获取行数据的菜单id
deptId.value = data.record.businessId;
// 通过id获取菜单详情信息
const params = {
id: deptId.value
}
getDeptDetails(params).then(res => {
const form = res.data
// 塞值
setFieldsValue({
...form,
});
})
// 获取上级部门下拉树
const paramsTwo = {
id: deptId.value
}
const res = await listDeptExcludeChild(paramsTwo);
const treeData = handleTree(res.data, 'businessId',undefined,undefined,undefined)
await updateSchema({
field: 'parentId',
componentProps: {treeData},
});
}else {
// 获取上级部门下拉树
const res = await getDeptList();
const treeData = handleTree(res.data, 'businessId',undefined,undefined,undefined)
await updateSchema({
field: 'parentId',
componentProps: {treeData},
});
}
// 这是操作栏内的新增
if (unref(isAdd)){
// 通过id获取菜单详情信息
const id = data.record.businessId
const params = {
parentId: id,
}
console.log('params:',params)
// 塞值
setFieldsValue({
...params,
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
async function handleSubmit() {
try {
const formData = await validate();
console.log('formData:',formData)
setDrawerProps({ confirmLoading: true });
// 编辑
if(unref(isUpdate)) {
formData.businessId = deptId.value
updateDept(formData).then(res => {
if(res.code === 200){
createMessage.success('编辑成功');
closeDrawer();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: deptId.value } });
}
})
} else {
//新增
addDept(formData).then(res => {
if(res.code === 200){
createMessage.success('新增成功');
closeDrawer();
emit('success');
}
})
}
} finally {
setDrawerProps({ confirmLoading: false });
}
}
/**结构转换方法*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
src/views/system/dept/dept.data.ts
View file @ 12bbe151
import { BasicColumn, FormSchema } from '@/components/Table'; import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue'; import { h } from 'vue';
import { Tag } from 'ant-design-vue'; import {Switch, Tag} from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import {useMessage} from "@/hooks/web/useMessage";
import {statusChange} from "@/api/system/dept/dept";
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '部门名称', title: '部门名称',
dataIndex: 'deptName', dataIndex: 'deptName',
width: 160, width: 200,
align: 'left', align: 'left',
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'orderNo', dataIndex: 'orderNum',
width: 50, width: 50,
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'flag',
width: 80, width: 120,
customRender: ({ record }) => { customRender: ({ record }) => {
const status = record.status; if (!Reflect.has(record, 'pendingStatus')) {
const enable = ~~status === 0; record.pendingStatus = false;
const color = enable ? 'green' : 'red'; }
const text = enable ? '启用' : '停用'; return h(Switch, {
return h(Tag, { color: color }, () => text); checked: record.flag === '1',
loading: record.pendingStatus,
onChange(checked: CheckedType) {
record.pendingStatus = true;
const newStatus = checked ? '1' : '0';
const { createMessage } = useMessage();
const params = {
businessId: record.businessId,
flag: newStatus,
parentId: record.parentId,
deptName: record.deptName,
orderNum: record.orderNum,
leader: record.leader,
phone: record.phone,
email: record.email,
}
statusChange(params)
.then(() => {
record.flag = newStatus;
const text = record.flag === '1' ? '启用' : '停用'
createMessage.success( text + `成功`);
})
.catch(() => {
// createMessage.error('操作失败');
})
.finally(() => {
record.pendingStatus = false;
});
},
});
}, },
}, },
{ {
title: '创建时间', title: '负责人',
dataIndex: 'createTime', dataIndex: 'leader',
width: 180, width: 50,
}, },
{ {
title: '备注', title: '联系电话',
dataIndex: 'remark', dataIndex: 'phone',
width: 50,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 180,
}, },
]; ];
const isDir = (menuType: string) => menuType === 'M';
const isMenu = (menuType: string) => menuType === 'C';
const isButton = (menuType: string) => menuType === 'F';
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{ {
field: 'deptName', field: 'deptName',
label: '部门名称', label: '部门名称',
component: 'Input', component: 'Input',
colProps: { span: 8 }, colProps: { span: 7 },
}, },
{ {
field: 'status', field: 'flag',
label: '状态', label: '部门状态',
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: [ options: [
{ label: '启用', value: '0' }, { label: '启用', value: '1' },
{ label: '停用', value: '1' }, { label: '停用', value: '0' },
], ],
}, },
colProps: { span: 8 }, colProps: { span: 8 },
...@@ -60,51 +102,56 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -60,51 +102,56 @@ export const searchFormSchema: FormSchema[] = [
export const formSchema: FormSchema[] = [ export const formSchema: FormSchema[] = [
{ {
field: 'deptName', field: 'parentId',
label: '部门名称',
component: 'Input',
required: true,
},
{
field: 'parentDept',
label: '上级部门', label: '上级部门',
component: 'TreeSelect', component: 'TreeSelect',
ifShow({ values }) { colProps: { lg: 24, md: 24 },
const { deptName, parentDept } = values;
// Hide without a parentDept when editing
return parentDept || (!deptName && !parentDept);
},
componentProps: { componentProps: {
fieldNames: { fieldNames: {
label: 'deptName', label: 'deptName',
value: 'id', value: 'businessId',
}, },
getPopupContainer: () => document.body, getPopupContainer: () => document.body,
}, },
required: true, required: true,
ifShow: ({ values }) => values.parentId !== 0,
}, },
{ {
field: 'orderNo', field: 'deptName',
label: '排序', label: '部门名称',
component: 'Input',
required: true,
},
{
field: 'orderNum',
label: '部门排序',
component: 'InputNumber', component: 'InputNumber',
required: true, required: true,
}, },
{ {
field: 'status', field: 'leader',
label: '状态', label: '负责人',
component: 'RadioButtonGroup', component: 'Input',
defaultValue: '0', },
{
field: 'phone',
label: '联系电话',
component: 'Input',
},
{
field: 'email',
label: '邮箱',
component: 'Input',
},
{
field: 'flag',
label: '部门状态',
component: 'RadioGroup',
componentProps: { componentProps: {
options: [ options: [
{ label: '启用', value: '0' }, { label: '启用', value: '1' },
{ label: '停用', value: '1' }, { label: '停用', value: '0' },
], ],
}, },
required: true,
},
{
label: '备注',
field: 'remark',
component: 'InputTextArea',
}, },
]; ];
src/views/system/dept/index.vue
View file @ 12bbe151
<template> <template>
<div> <div>
<BasicTable @register="registerTable"> <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增部门 </a-button> <a-button type="primary" @click="handleCreate"> 新增 </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label:'新增',
onClick: handleAdd.bind(null, record),
},
{
// icon: 'clarity:note-edit-line',
label:'修改',
onClick: handleEdit.bind(null, record),
},
{
// icon: 'ant-design:delete-outlined',
label:'删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
<!-- <template #bodyCell="{ column, record }">-->
<!-- <template v-if="column.key === 'action'">-->
<!-- <TableAction-->
<!-- :actions="[-->
<!-- {-->
<!-- icon: 'clarity:note-edit-line',-->
<!-- onClick: handleEdit.bind(null, record),-->
<!-- },-->
<!-- {-->
<!-- icon: 'ant-design:delete-outlined',-->
<!-- color: 'error',-->
<!-- popConfirm: {-->
<!-- title: '是否确认删除',-->
<!-- placement: 'left',-->
<!-- confirm: handleDelete.bind(null, record),-->
<!-- },-->
<!-- },-->
<!-- ]"-->
<!-- />-->
<!-- </template>-->
<!-- </template>-->
</BasicTable> </BasicTable>
<!-- <DeptModal @register="registerModal" @success="handleSuccess" />--> <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getDeptList } from '@/api/demo/system'; import { useDrawer } from '@/components/Drawer';
import MenuDrawer from './MenuDrawer.vue';
import { useModal } from '@/components/Modal';
import DeptModal from './DeptModal.vue';
import { columns, searchFormSchema } from './dept.data'; import { columns, searchFormSchema } from './dept.data';
import { getDeptList,deleteById } from "@/api/system/dept/dept";
import { useMessage } from "@/hooks/web/useMessage";
import { ref,reactive,unref,onDeactivated,onMounted,nextTick } from 'vue';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { useUserStore } from "@/store/modules/user";
defineOptions({ name: 'DeptManagement' }); defineOptions({ name: 'MenuManagement' });
const filterStore = useFilterStore();
const [registerModal, { openModal }] = useModal(); const route = useRoute();
const [registerTable, { reload }] = useTable({ const { createMessage } = useMessage();
title: '部门列表', const [registerDrawer, { openDrawer }] = useDrawer();
api: getDeptList, const treeData = ref();
const [registerTable, { reload, expandAll,getForm }] = useTable({
title: '部门管理列表',
api: async (params) => {
const response = await getDeptList(params);
//进行处理数据
const transformedData = transformData(response.data); // 定义一个函数transformData来做你需要的数据转换
return { ...response, data: transformedData };
},
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
}, },
isTreeTable: true,
pagination: false, pagination: false,
striped: false, striped: false,
useSearchForm: true, useSearchForm: true,
showTableSetting: true, // showTableSetting: true,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
canResize: false, canResize: false,
actionColumn: { actionColumn: {
width: 80, width: 200,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
...@@ -65,24 +83,101 @@ ...@@ -65,24 +83,101 @@
}, },
}); });
/**改变列表结构 列表->树*/
function transformData(data) {
console.log('data',data)
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
return treeData.value
}
/**结构转换方法*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
/**新增*/
function handleCreate() { function handleCreate() {
openModal(true, { openDrawer(true, {
isUpdate: false, isUpdate: false,
}); });
} }
/**在列表里新增菜单*/
function handleAdd(record: Recordable) {
openDrawer(true, {
isAdd: true,
isUpdate: false,
record,
});
}
/**编辑*/
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {
openModal(true, { openDrawer(true, {
record, record,
isUpdate: true, isUpdate: true,
}); });
} }
function handleDelete(record: Recordable) { /**删除*/
console.log(record); async function handleDelete(record: Recordable) {
await deleteById({id: record.businessId});
createMessage.success('删除成功!');
await reload();
} }
function handleSuccess() { function handleSuccess() {
reload(); reload();
} }
function onFetchSuccess() {
// 演示默认展开所有表项
nextTick(expandAll);
}
/**进入页面的初始化方法*/
onMounted(() => {
const path = route.path
if(filterStore.getSearchParams[path]) {
if(JSON.parse(filterStore.getSearchParams[path] !== {})){
const params = JSON.parse(filterStore.getSearchParams[path])
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
menuName: params.menuName,
flag: params.flag,
})
}
}
});
/**离开路由前调用的钩子函数*/
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({},getForm().getFieldsValue());
filterStore.setSearchParams(
{
path: from.path,
param: {
...params
}
}
)
next(); // 允许导航
});
</script> </script>
src/views/system/user/account.data.ts
View file @ 12bbe151
...@@ -191,8 +191,8 @@ export const accountFormSchema: any[] = [ ...@@ -191,8 +191,8 @@ export const accountFormSchema: any[] = [
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
componentProps: { componentProps: {
options: [ options: [
{ label: '启用', value: 1 }, { label: '启用', value: '1' },
{ label: '停用', value: 0 }, { label: '停用', value: '0' },
], ],
}, },
required: true, required: true,
......
src/views/system/user/index.vue
View file @ 12bbe151
...@@ -12,19 +12,19 @@ ...@@ -12,19 +12,19 @@
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon: 'clarity:note-edit-line', // icon: 'clarity:note-edit-line',
tooltip: '编辑', label: '编辑',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record),
}, },
{ {
icon: 'clarity:note-edit-line', // icon: 'clarity:note-edit-line',
tooltip: '重置密码', label: '重置密码',
onClick: handleResetPassword.bind(null, record), onClick: handleResetPassword.bind(null, record),
}, },
{ {
icon: 'ant-design:delete-outlined', // icon: 'ant-design:delete-outlined',
color: 'error', color: 'error',
tooltip: '删除', label: '删除',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
placement: 'left', placement: 'left',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment