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 type { ID, IDS } from '#/api/common';
import { requestClient } from '#/api/request'; import { requestClient } from '#/api/request';
/**
*
* @returns tree
*/
export function categoryTree() {
return requestClient.get<CategoryTree[]>('/workflow/category/categoryTree');
}
/** /**
* *
* @param params * @param params

View File

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

View File

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

View File

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