chore: 调整分类树

This commit is contained in:
dap 2024-12-18 08:16:03 +08:00
parent e09e95c3f5
commit b641b0eb15
5 changed files with 38 additions and 31 deletions

View File

@ -1,9 +1,22 @@
import type { CategoryForm, CategoryQuery, CategoryVO } from './model';
import type {
CategoryForm,
CategoryQuery,
CategoryTree,
CategoryVO,
} from './model';
import type { ID, IDS } from '#/api/common';
import { requestClient } from '#/api/request';
/**
*
* @returns tree
*/
export function categoryTree() {
return requestClient.get<CategoryTree[]>('/workflow/category/categoryTree');
}
/**
*
* @param params

View File

@ -86,3 +86,12 @@ export interface CategoryQuery {
*/
params?: any;
}
export interface CategoryTree {
id: number;
parentId: number;
label: string;
weight: number;
children: CategoryTree[];
key: string;
}

View File

@ -1,14 +1,12 @@
<script setup lang="ts">
import type { CategoryVO } from '#/api/workflow/category/model';
import type { CategoryTree } from '#/api/workflow/category/model';
import { onMounted, type PropType, ref } from 'vue';
import { listToTree } from '@vben/utils';
import { SyncOutlined } from '@ant-design/icons-vue';
import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
import { categoryList } from '#/api/workflow/category';
import { categoryTree } from '#/api/workflow/category';
defineOptions({ inheritAttrs: false });
@ -33,7 +31,7 @@ const searchValue = defineModel('searchValue', {
default: '',
});
const categoryTreeArray = ref<CategoryVO[]>([]);
const categoryTreeArray = ref<CategoryTree[]>([]);
/** 骨架屏加载 */
const showTreeSkeleton = ref<boolean>(true);
@ -42,11 +40,7 @@ async function loadTree() {
searchValue.value = '';
selectCode.value = [];
const ret = await categoryList();
const treeData = listToTree(ret, {
id: 'categoryId',
pid: 'parentId',
});
const treeData = await categoryTree();
categoryTreeArray.value = treeData;
showTreeSkeleton.value = false;
@ -91,14 +85,14 @@ onMounted(loadTree);
v-if="categoryTreeArray.length > 0"
v-model:selected-keys="selectCode"
:class="$attrs.class"
:field-names="{ title: 'categoryName', key: 'categoryId' }"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }"
:tree-data="categoryTreeArray"
:virtual="false"
default-expand-all
@select="$emit('select')"
>
<template #title="{ categoryName: label }">
<template #title="{ label }">
<span v-if="label.indexOf(searchValue) > -1">
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>

View File

@ -70,9 +70,9 @@ const gridOptions: VxeGridProps = {
query: async ({ page }, formValues = {}) => {
//
if (selectedCode.value.length === 1) {
formValues.categoryCode = selectedCode.value[0];
formValues.category = selectedCode.value[0];
} else {
Reflect.deleteProperty(formValues, 'categoryCode');
Reflect.deleteProperty(formValues, 'category');
}
return await workflowDefinitionList({

View File

@ -3,15 +3,10 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import {
addFullName,
cloneDeep,
getPopupContainer,
listToTree,
} from '@vben/utils';
import { addFullName, cloneDeep, getPopupContainer } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { categoryList } from '#/api/workflow/category';
import { categoryTree } from '#/api/workflow/category';
import {
workflowDefinitionAdd,
workflowDefinitionInfo,
@ -42,19 +37,15 @@ const [BasicForm, formApi] = useVbenForm({
async function setupCategorySelect() {
// menu
const resp = await categoryList();
const tree = listToTree(resp, {
id: 'categoryId',
pid: 'parentId',
});
addFullName(tree, 'categoryName', ' / ');
const tree = await categoryTree();
addFullName(tree, 'label', ' / ');
formApi.updateSchema([
{
componentProps: {
fieldNames: {
label: 'categoryName',
value: 'categoryId',
label: 'label',
value: 'id',
},
getPopupContainer,
// 256
@ -66,7 +57,7 @@ async function setupCategorySelect() {
treeDefaultExpandedKeys: [0],
treeLine: { showLeafIcon: false },
//
treeNodeFilterProp: 'categoryName',
treeNodeFilterProp: 'label',
treeNodeLabelProp: 'fullName',
},
fieldName: 'category',