Skip to content

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

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

parent 94742559
Hide 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';
enum Api {
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 { 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[] = [
{
title: '部门名称',
dataIndex: 'deptName',
width: 160,
width: 200,
align: 'left',
},
{
title: '排序',
dataIndex: 'orderNo',
dataIndex: 'orderNum',
width: 50,
},
{
title: '状态',
dataIndex: 'status',
width: 80,
dataIndex: 'flag',
width: 120,
customRender: ({ record }) => {
const status = record.status;
const enable = ~~status === 0;
const color = enable ? 'green' : 'red';
const text = enable ? '启用' : '停用';
return h(Tag, { color: color }, () => text);
if (!Reflect.has(record, 'pendingStatus')) {
record.pendingStatus = false;
}
return h(Switch, {
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: '创建时间',
dataIndex: 'createTime',
width: 180,
title: '负责人',
dataIndex: 'leader',
width: 50,
},
{
title: '备注',
dataIndex: 'remark',
title: '联系电话',
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[] = [
{
field: 'deptName',
label: '部门名称',
component: 'Input',
colProps: { span: 8 },
colProps: { span: 7 },
},
{
field: 'status',
label: '状态',
field: 'flag',
label: '部门状态',
component: 'Select',
componentProps: {
options: [
{ label: '启用', value: '0' },
{ label: '停用', value: '1' },
{ label: '启用', value: '1' },
{ label: '停用', value: '0' },
],
},
colProps: { span: 8 },
......@@ -60,51 +102,56 @@ export const searchFormSchema: FormSchema[] = [
export const formSchema: FormSchema[] = [
{
field: 'deptName',
label: '部门名称',
component: 'Input',
required: true,
},
{
field: 'parentDept',
field: 'parentId',
label: '上级部门',
component: 'TreeSelect',
ifShow({ values }) {
const { deptName, parentDept } = values;
// Hide without a parentDept when editing
return parentDept || (!deptName && !parentDept);
},
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'deptName',
value: 'id',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
ifShow: ({ values }) => values.parentId !== 0,
},
{
field: 'orderNo',
label: '排序',
field: 'deptName',
label: '部门名称',
component: 'Input',
required: true,
},
{
field: 'orderNum',
label: '部门排序',
component: 'InputNumber',
required: true,
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: '0',
field: 'leader',
label: '负责人',
component: 'Input',
},
{
field: 'phone',
label: '联系电话',
component: 'Input',
},
{
field: 'email',
label: '邮箱',
component: 'Input',
},
{
field: 'flag',
label: '部门状态',
component: 'RadioGroup',
componentProps: {
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>
<div>
<BasicTable @register="registerTable">
<BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
<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 #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>
<!-- <DeptModal @register="registerModal" @success="handleSuccess" />-->
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getDeptList } from '@/api/demo/system';
import { useModal } from '@/components/Modal';
import DeptModal from './DeptModal.vue';
import { useDrawer } from '@/components/Drawer';
import MenuDrawer from './MenuDrawer.vue';
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' });
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '部门列表',
api: getDeptList,
defineOptions({ name: 'MenuManagement' });
const filterStore = useFilterStore();
const route = useRoute();
const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
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,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
isTreeTable: true,
pagination: false,
striped: false,
useSearchForm: true,
showTableSetting: true,
// showTableSetting: true,
bordered: true,
showIndexColumn: false,
canResize: false,
actionColumn: {
width: 80,
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
......@@ -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() {
openModal(true, {
openDrawer(true, {
isUpdate: false,
});
}
/**在列表里新增菜单*/
function handleAdd(record: Recordable) {
openDrawer(true, {
isAdd: true,
isUpdate: false,
record,
});
}
/**编辑*/
function handleEdit(record: Recordable) {
openModal(true, {
openDrawer(true, {
record,
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() {
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>
src/views/system/user/account.data.ts
View file @ 12bbe151
......@@ -191,8 +191,8 @@ export const accountFormSchema: any[] = [
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: '启用', value: 1 },
{ label: '停用', value: 0 },
{ label: '启用', value: '1' },
{ label: '停用', value: '0' },
],
},
required: true,
......
src/views/system/user/index.vue
View file @ 12bbe151
......@@ -12,19 +12,19 @@
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
tooltip: '编辑',
// icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
tooltip: '重置密码',
// icon: 'clarity:note-edit-line',
label: '重置密码',
onClick: handleResetPassword.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
// icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除',
label: '删除',
popConfirm: {
title: '是否确认删除',
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