feat(@vben/web-antd): 优化部门模块
This commit is contained in:
parent
8a5777c6bb
commit
51d63fc7c2
@ -5,9 +5,10 @@ import { h } from 'vue';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $te } from '@vben/locales';
|
||||
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
|
||||
import { isFunction, isString } from '@vben/utils';
|
||||
import { get, isFunction, isString } from '@vben/utils';
|
||||
|
||||
import { Button, Image, Popconfirm, Switch } from 'ant-design-vue';
|
||||
import { objectOmit } from '@vueuse/core';
|
||||
import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
|
||||
@ -51,6 +52,25 @@ setupVbenVxeTable({
|
||||
},
|
||||
});
|
||||
|
||||
vxeUI.renderer.add('CellTag', {
|
||||
renderTableDefault({ options, props }, { column, row }) {
|
||||
const value = get(row, column.field);
|
||||
const tagOptions = options ?? [
|
||||
{ color: 'success', label: $t('common.enabled'), value: true },
|
||||
{ color: 'error', label: $t('common.disabled'), value: false },
|
||||
];
|
||||
const tagItem = tagOptions.find((item) => item.value === value);
|
||||
return h(
|
||||
Tag,
|
||||
{
|
||||
...props,
|
||||
...objectOmit(tagItem ?? {}, ['label']),
|
||||
},
|
||||
{ default: () => tagItem?.label ?? value },
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// 表格配置项可以用 cellRender: { name: 'CellLink' },
|
||||
vxeUI.renderer.add('CellLink', {
|
||||
renderTableDefault(renderOpts) {
|
||||
|
||||
@ -21,34 +21,34 @@ export namespace DeptApi {
|
||||
}
|
||||
}
|
||||
|
||||
// 添加区域
|
||||
// 添加部门
|
||||
export function createDept(data: DeptApi.Dept) {
|
||||
return requestClient.post(`/api/rest/dept`, data);
|
||||
return requestClient.post(`/rest/dept`, data);
|
||||
}
|
||||
|
||||
// 更新区域信息
|
||||
export function updateDept(data: DeptApi.DeptRecord) {
|
||||
return requestClient.patch(`/api/rest/dept/${data.id}`, data);
|
||||
// 更新部门信息
|
||||
export function updateDept(id: string, data: DeptApi.DeptRecord) {
|
||||
return requestClient.patch(`/rest/dept/${id}`, data);
|
||||
}
|
||||
|
||||
// 删除区域
|
||||
// 删除部门
|
||||
export function removeDept(id: string) {
|
||||
return requestClient.delete(`/api/rest/dept/${id}`);
|
||||
return requestClient.delete(`/rest/dept/${id}`);
|
||||
}
|
||||
|
||||
// 模糊查询获取区域列表
|
||||
// 模糊查询获取部门列表
|
||||
export function queryDeptList(data: DeptApi.DeptRecord) {
|
||||
return requestClient.get('/api/rest/dept', { data });
|
||||
return requestClient.get('/rest/dept', { data });
|
||||
}
|
||||
|
||||
// 获取区域列表
|
||||
// 获取部门列表
|
||||
export function deptList() {
|
||||
return requestClient.get(`/api/rest/dept`);
|
||||
return requestClient.get(`/rest/dept`);
|
||||
}
|
||||
|
||||
// 启用状态
|
||||
export function enabledDept(id: string) {
|
||||
return requestClient.patch(`/api/rest/dept/toggle/${id}`, id);
|
||||
return requestClient.patch(`/rest/dept/toggle/${id}`, id);
|
||||
}
|
||||
|
||||
export function getAllDeptTree(id?: number | string) {
|
||||
@ -56,7 +56,7 @@ export function getAllDeptTree(id?: number | string) {
|
||||
}
|
||||
|
||||
// export function getDeptTree(params?: Partial<DeptRecord>) {
|
||||
// return axios.get<DeptRecord[]>(`/api/dept/trees`, {
|
||||
// return axios.get<DeptRecord[]>(`/dept/trees`, {
|
||||
// params,
|
||||
// paramsSerializer: (obj) => {
|
||||
// return qs.stringify(obj);
|
||||
@ -64,7 +64,7 @@ export function getAllDeptTree(id?: number | string) {
|
||||
// });
|
||||
// }
|
||||
// export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
|
||||
// return axios.get<DeptRecord[]>(`/api/dept`, {
|
||||
// return axios.get<DeptRecord[]>(`/dept`, {
|
||||
// params,
|
||||
// paramsSerializer: (obj) => {
|
||||
// return qs.stringify(obj);
|
||||
@ -72,5 +72,5 @@ export function getAllDeptTree(id?: number | string) {
|
||||
// });
|
||||
// }
|
||||
// export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
|
||||
// return queryList(`/api/dept`, params);
|
||||
// return queryList(`/dept`, params);
|
||||
// }
|
||||
|
||||
@ -37,13 +37,13 @@ export function useSchema(): VbenFormSchema[] {
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: $t('common.enabled'), value: 1 },
|
||||
{ label: $t('common.disabled'), value: 0 },
|
||||
{ label: $t('common.enabled'), value: true },
|
||||
{ label: $t('common.disabled'), value: false },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 1,
|
||||
fieldName: 'status',
|
||||
defaultValue: true,
|
||||
fieldName: 'enabled',
|
||||
label: '状态',
|
||||
},
|
||||
{
|
||||
@ -78,8 +78,10 @@ export function useColumns(
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: { name: 'CellTag' },
|
||||
field: 'enable',
|
||||
cellRender: {
|
||||
name: 'CellTag',
|
||||
},
|
||||
field: 'enabled',
|
||||
title: '状态',
|
||||
width: 100,
|
||||
},
|
||||
@ -88,6 +90,10 @@ export function useColumns(
|
||||
title: '创建时间',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
cellRender: {
|
||||
|
||||
@ -100,7 +100,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async (_params) => {
|
||||
return await getAllDeptTree(1);
|
||||
const res = await getAllDeptTree(1);
|
||||
return {
|
||||
items: res,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { getAllDeptTree, queryUserList } from '#/api';
|
||||
|
||||
import UserTableView from './user-table-view.vue';
|
||||
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
createdTime: [],
|
||||
enableState: '',
|
||||
deptId: '',
|
||||
page: 1,
|
||||
current: 1,
|
||||
size: 10,
|
||||
};
|
||||
};
|
||||
const treeData = ref([]);
|
||||
|
||||
const renderData = ref([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
// const deptOptions = ref([]);
|
||||
|
||||
const getDeptData = async () => {
|
||||
try {
|
||||
treeData.value = await getAllDeptTree(0);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const getUserTableData = async (params: any) => {
|
||||
try {
|
||||
const res = await queryUserList(params);
|
||||
renderData.value = res.records;
|
||||
} catch {}
|
||||
};
|
||||
|
||||
// 查询
|
||||
const search = () => {
|
||||
getUserTableData({
|
||||
// ...pagination,
|
||||
...formModel.value,
|
||||
});
|
||||
};
|
||||
|
||||
// const handleSelectDept = (id: any[]) => {
|
||||
// const [deptId] = id;
|
||||
// formModel.value.deptId = deptId;
|
||||
// search();
|
||||
// };
|
||||
|
||||
const handleSelectUser = (data: any) => {
|
||||
formModel.value = data;
|
||||
search();
|
||||
};
|
||||
|
||||
getUserTableData({ page: 1, size: 10, current: 1 });
|
||||
getDeptData();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-1">
|
||||
<div class="mt-5 flex flex-col lg:flex-row">
|
||||
<!-- <div class="mr-4 w-full lg:w-1/4">-->
|
||||
<!-- <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
|
||||
<!-- </div>-->
|
||||
<div class="w-full">
|
||||
<UserTableView :render-data="renderData" @change="handleSelectUser" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user