feat: 流程分类

This commit is contained in:
dap 2024-10-30 14:56:43 +08:00
parent d04c0c4e6c
commit 0c7a8f1eb0
5 changed files with 470 additions and 4 deletions

View File

@ -0,0 +1,50 @@
import type { CategoryForm, CategoryQuery, CategoryVO } from './model';
import type { ID, IDS } from '#/api/common';
import { requestClient } from '#/api/request';
/**
*
* @param params
* @returns
*/
export function categoryList(params?: CategoryQuery) {
return requestClient.get<CategoryVO[]>(`/workflow/category/list`, { params });
}
/**
*
* @param id id
* @returns
*/
export function categoryInfo(id: ID) {
return requestClient.get<CategoryVO>(`/workflow/category/${id}`);
}
/**
*
* @param data
* @returns void
*/
export function categoryAdd(data: CategoryForm) {
return requestClient.postWithMsg<void>('/workflow/category', data);
}
/**
*
* @param data
* @returns void
*/
export function categoryUpdate(data: CategoryForm) {
return requestClient.putWithMsg<void>('/workflow/category', data);
}
/**
*
* @param id id
* @returns void
*/
export function categoryRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/workflow/category/${id}`);
}

View File

@ -0,0 +1,87 @@
import type { BaseEntity } from '#/api/common';
export interface CategoryVO {
/**
*
*/
id: number | string;
/**
*
*/
categoryName: string;
/**
*
*/
categoryCode: string;
/**
* id
*/
parentId: number | string;
/**
*
*/
sortNum: number;
/**
*
*/
children: CategoryVO[];
}
export interface CategoryForm extends BaseEntity {
/**
*
*/
id?: number | string;
/**
*
*/
categoryName?: string;
/**
*
*/
categoryCode?: string;
/**
* id
*/
parentId?: number | string;
/**
*
*/
sortNum?: number;
}
export interface CategoryQuery {
/**
*
*/
categoryName?: string;
/**
*
*/
categoryCode?: string;
/**
* id
*/
parentId?: number | string;
/**
*
*/
sortNum?: number;
/**
*
*/
params?: any;
}

View File

@ -0,0 +1,119 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep, listToTree } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import {
categoryAdd,
categoryInfo,
categoryList,
categoryUpdate,
} from '#/api/workflow/category';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
//
formItemClass: 'col-span-2',
// label px
labelWidth: 80,
//
componentProps: {
class: 'w-full',
},
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
async function setupCategorySelect() {
const listData = await categoryList();
let treeData = listToTree(listData, {
id: 'id',
pid: 'parentId',
});
treeData = [
{
categoryName: '根目录',
id: 0,
children: treeData,
},
];
formApi.updateSchema([
{
fieldName: 'parentId',
componentProps: {
treeData,
treeLine: { showLeafIcon: false },
fieldNames: { label: 'categoryName', value: 'id' },
treeDefaultExpandAll: true,
},
},
]);
}
const [BasicModal, modalApi] = useVbenModal({
fullscreenButton: false,
onCancel: handleCancel,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await categoryInfo(id);
await formApi.setValues(record);
}
await setupCategorySelect();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.modalLoading(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValuesreadonly
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? categoryUpdate(data) : categoryAdd(data));
emit('reload');
await handleCancel();
} catch (error) {
console.error(error);
} finally {
modalApi.modalLoading(false);
}
}
async function handleCancel() {
modalApi.close();
await formApi.resetForm();
}
</script>
<template>
<BasicModal :close-on-click-modal="false" :title="title">
<BasicForm />
</BasicModal>
</template>

View File

@ -0,0 +1,75 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [
{
fieldName: 'categoryName',
label: '分类名称',
component: 'Input',
},
{
fieldName: 'categoryCode',
label: '分类编码',
component: 'Input',
},
];
export const columns: VxeGridProps['columns'] = [
{
field: 'categoryName',
title: '分类名称',
treeNode: true,
},
{
field: 'categoryCode',
title: '分类编码',
},
{
field: 'sortNum',
title: '排序',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: 'id',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
fieldName: 'parentId',
label: '父级分类',
rules: 'required',
defaultValue: 0,
component: 'TreeSelect',
},
{
fieldName: 'categoryName',
label: '分类名称',
component: 'Input',
rules: 'required',
},
{
fieldName: 'categoryCode',
label: '分类编码',
component: 'Input',
rules: 'required',
},
{
fieldName: 'sortNum',
label: '排序',
component: 'InputNumber',
rules: 'required',
},
];

View File

@ -1,9 +1,144 @@
<script setup lang="ts">
import CommonSkeleton from '#/views/common';
import type { Recordable } from '@vben/types';
import { nextTick } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer, listToTree } from '@vben/utils';
import { Popconfirm, Space } from 'ant-design-vue';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { categoryList, categoryRemove } from '#/api/workflow/category';
import categoryModal from './category-modal.vue';
import { columns, querySchema } from './data';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
const gridOptions: VxeGridProps = {
columns,
height: 'auto',
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async (_, formValues = {}) => {
const resp = await categoryList({
...formValues,
});
const treeData = listToTree(resp, {
id: 'id',
pid: 'parentId',
children: 'children',
});
return { rows: treeData };
},
//
querySuccess: () => {
nextTick(() => {
expandAll();
});
},
},
},
rowConfig: {
keyField: 'id',
},
treeConfig: {
parentField: 'parentId',
rowField: 'id',
transform: false,
},
//
id: 'workflow-category-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
const [CategoryModal, modalApi] = useVbenModal({
connectedComponent: categoryModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Recordable<any>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Recordable<any>) {
await categoryRemove(row.id);
await tableApi.query();
}
function expandAll() {
tableApi.grid?.setAllTreeExpand(true);
}
function collapseAll() {
tableApi.grid?.setAllTreeExpand(false);
}
</script>
<template>
<div>
<CommonSkeleton />
</div>
<Page :auto-content-height="true">
<BasicTable table-title="流程分类列表">
<template #toolbar-tools>
<Space>
<a-button @click="collapseAll">
{{ $t('pages.common.collapse') }}
</a-button>
<a-button @click="expandAll">
{{ $t('pages.common.expand') }}
</a-button>
<a-button
type="primary"
v-access:code="['workflow:category:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['workflow:category:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['workflow:category:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<CategoryModal @reload="tableApi.query()" />
</Page>
</template>