修改分类展示代码

This commit is contained in:
Cain 2025-03-12 11:18:23 +08:00
parent 9a54be5cb7
commit fa71031f00
5 changed files with 93 additions and 94 deletions

View File

@ -526,7 +526,6 @@ const local: App.I18n.Schema = {
},
addDictionary: '新增字典',
editDictionary: '编辑字典'
},
namespace: {
title: '命名空间',

54
src/typings/app.d.ts vendored
View File

@ -670,23 +670,6 @@ declare namespace App {
};
};
};
category: {
title: string;
form: {
name: string;
categoryName: string;
categoryStatus: string;
categoryParentName: string;
categoryType: string;
createTime: string;
},
type: {
website: string;
literature: string;
},
addCategory: string;
editCategory: string;
},
pods: {
title: string;
nodeType: string;
@ -705,6 +688,43 @@ declare namespace App {
server: string;
};
};
category: {
title: string;
form: {
name: string;
categoryName: string;
categoryStatus: string;
categoryParentName: string;
categoryType: string;
createTime: string;
},
type: {
website: string;
literature: string;
},
addCategory: string;
editCategory: string;
},
dictionary: {
title: string;
dictionId: string;
dictionaryName: string;
dictionaryType: string;
dictionaryStatus: string;
remark: string;
createTime: string;
form:{
dictionaryNamePlaceHolder: string;
dictionaryName: string;
dictionaryTypePlaceHolder: string;
dictionaryType: string;
dictionaryStatusPlaceHolder: string;
dictionaryStatus: string;
createTime: string;
},
addDictionary: string;
editDictionary: string;
},
namespace: {
title: string;
name: string;

View File

@ -1,33 +1,26 @@
<script setup lang="tsx">
import { ref, reactive, onMounted } from 'vue';
import { $t } from '@/locales';
import { ref, onMounted } from 'vue';
import { NButton, NPopconfirm, DataTableColumns } from 'naive-ui';
import { fetchGetCategoryList, fetchDeleteCategory } from '@/service/api';
import { useFormOperate } from './modules/table';
import CategorySearch from './modules/category.vue';
import CategoryOperateDrawer from './modules/category-operate-drawer.vue';
import CategoryHeaderOperation from "./modules/category-header-operation.vue";
import { NButton, NPopconfirm, DataTableColumns } from 'naive-ui';
onMounted(async () => {
try {
const {data} = await fetchGetCategoryList();
tableData.value = data as RowData[];
getData();
} catch (error) {
console.error('Failed to fetch category list:', error);
window.$message?.success($t('common.loadFail'));
}
});
type RowData = Api.Category.Category & {
children?: RowData[];
};
let loading = ref(false)
//
let tableData = ref<RowData[]>([]);
let tableData = ref<Api.Category.RowData[]>([]);
//
const columns2 = (): DataTableColumns<RowData> => [
const columns = (): DataTableColumns<Api.Category.RowData> => [
{
title: $t('page.category.form.categoryName'),
key: 'categoryName',
@ -76,60 +69,45 @@ const columns2 = (): DataTableColumns<RowData> => [
)
}
]
const rowKey = (row: RowData) => row.id
const rowKey = (row: Api.Category.RowData) => row.id
const getData = async () => {
console.log("666")
loading.value = true;
//
const {data} = await fetchGetCategoryList();
tableData.value = data as RowData[];
const { data } = await fetchGetCategoryList();
tableData.value = data as Api.Category.RowData[];
loading.value = false;
//
};
const saveData = async (data: RowData) => {
//
console.log('保存表单数据', data);
};
const {
drawerVisible, //
drawerVisible,
operateType,
editingData,
handleAdd, //
handleEdit, //
handleAdd,
handleEdit,
onDeleted
} = useFormOperate({
getData, //
saveData
getData
});
//
const headAdd = () => {
handleAdd(0);
}
const refresh = () => {
console.log("你点击了刷新按钮")
getData()
}
//
const Add = (item: RowData) => {
const Add = (item: Api.Category.RowData) => {
handleAdd(item.id);
console.log("你点击了添加", item.id)
}
//
const Edit = (item: RowData) => {
const Edit = (item: Api.Category.RowData) => {
handleEdit(item);
console.log("你点击了编辑", item.id)
}
//
const Delete = async (id: number) => {
const res = await fetchDeleteCategory(id);
if (res.error) return;
getData()
window.$message?.success($t('common.deleteSuccess'));
onDeleted();
}
//
const update = (res: RowData[]) => {
console.log("你点击了刷新按钮")
const update = (res: Api.Category.RowData[]) => {
tableData.value = res;
}
</script>
@ -153,14 +131,14 @@ const update = (res: RowData[]) => {
:loading="loading"
:show-delete="false"
@add="headAdd"
@refresh="refresh"
@refresh="getData"
/>
</template>
<!-- 表格内容 -->
<n-data-table
virtual-scroll
:max-height="490"
:columns="columns2()"
:columns="columns()"
:data="tableData"
:row-key="rowKey"
default-expand-all

View File

@ -5,12 +5,10 @@ import { $t } from '@/locales';
export function useFormOperate<T extends Record<string, any>>(config: {
getData: () => Promise<void>;
saveData: (data: T) => Promise<void>;
}) {
const { getData, saveData } = config;
const { getData } = config;
const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
const operateType: Ref<NaiveUI.TableOperateType> = ref('add');
const editingData: Ref<Api.Category.Category | null> = ref(null);
@ -35,6 +33,11 @@ export function useFormOperate<T extends Record<string, any>>(config: {
openDrawer();
}
async function onDeleted() {
window.$message?.success($t('common.deleteSuccess'));
await getData();
}
return {
drawerVisible, // 抽屉是否可见
operateType, // 操作类型
@ -43,5 +46,6 @@ export function useFormOperate<T extends Record<string, any>>(config: {
closeDrawer, // 关闭抽屉
handleAdd, // 添加操作
handleEdit, // 编辑操作
onDeleted
};
}

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive, ref, watch, onMounted } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import { useClipboard } from '@vueuse/core';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
@ -7,12 +7,37 @@ import { translateOptions, translateOptions2 } from '@/utils/common';
import {
groupConfigIdModeOptions,
groupConfigStatusOptions,
groupConfigTypeOptions,
groupConfigYesOrNoOptions
} from '@/constants/business';
import { fetchAddGroupConfig, fetchEditGroupConfig, fetchGetPartitionTableList } from '@/service/api/group';
import { fetchGetCategoryList } from '@/service/api';
import { ElCascader } from 'element-plus';
import type { CascaderOption } from 'element-plus';
let options = ref<CascaderOption[]>([]);
//
function transformData(data: any[]): CascaderOption[] {
return data.map(item => {
const transformedItem: CascaderOption = {
label: item.categoryName,
value: item.categoryName,
children: item.children ? transformData(item.children) : undefined
};
return transformedItem;
});
}
//
async function fetchCategoryList() {
try {
const { data } = await fetchGetCategoryList();
options.value = transformData(data);
} catch (error) {
window.$message?.error($t('common.loadFail'));
}
}
defineOptions({
name: 'GroupOperateDrawer'
});
@ -171,8 +196,9 @@ const getAllPartitions = async () => {
partitionList.value = data!.map(p => String(p));
};
watch(visible, () => {
watch(visible, async () => {
if (visible.value) {
await fetchCategoryList();
getAllPartitions(); // drawerkeepaliveonMounteddrawer
handleUpdateModelWhenEdit();
restoreValidation();
@ -192,30 +218,6 @@ async function handleCopy(source: string) {
await copy(source);
window.$message?.success('复制成功');
}
import { ElCascader } from 'element-plus';
import type { CascaderOption } from 'element-plus';
let options: CascaderOption[] = [];
//
function transformData(data: any[]): CascaderOption[] {
return data.map(item => {
const transformedItem: CascaderOption = {
label: item.categoryName,
value: item.categoryName,
children: item.children ? transformData(item.children) : undefined
};
return transformedItem;
});
}
onMounted(async () => {
try {
const { data } = await fetchGetCategoryList();
options = transformData(data);
} catch (error) {
window.$message?.error($t('common.loadFail'));
}
});
</script>
<template>
@ -228,10 +230,6 @@ onMounted(async () => {
:placeholder="$t('page.groupConfig.form.groupName')" :disabled="props.operateType === 'edit'" />
</NFormItem>
<!-- 网站类别 -->
<!-- <NFormItem :label="$t('page.groupConfig.type')" path="idGeneratorMode">
<NSelect v-model:value="model.type" :placeholder="$t('page.groupConfig.form.type')"
:options="translateOptions(groupConfigTypeOptions)" />
</NFormItem> -->
<NFormItem :label="$t('page.groupConfig.type')" path="idGeneratorMode">
<el-cascader
v-model:value="model.type"