修改分类展示代码
This commit is contained in:
parent
9a54be5cb7
commit
fa71031f00
@ -526,7 +526,6 @@ const local: App.I18n.Schema = {
|
||||
},
|
||||
addDictionary: '新增字典',
|
||||
editDictionary: '编辑字典'
|
||||
|
||||
},
|
||||
namespace: {
|
||||
title: '命名空间',
|
||||
|
54
src/typings/app.d.ts
vendored
54
src/typings/app.d.ts
vendored
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
};
|
||||
}
|
@ -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(); // 因为drawer会keepalive,onMounted不能报账每次打开drawer会调用刷新
|
||||
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"
|
||||
|
Loading…
Reference in New Issue
Block a user