完善分类页面

This commit is contained in:
Cain 2025-03-13 14:22:54 +08:00
parent 7f805412d9
commit 3915bf0921
12 changed files with 97 additions and 70 deletions

View File

@ -2,5 +2,5 @@ VITE_BASE_URL=/
# backend service base url, test environment # backend service base url, test environment
# VITE_SERVICE_BASE_URL=http://localhost:8080/snail-job # VITE_SERVICE_BASE_URL=http://localhost:8080/snail-job
# VITE_SERVICE_BASE_URL=http://10.18.190.195:8080/snail-job VITE_SERVICE_BASE_URL=http://10.18.190.195:8080/snail-job
VITE_SERVICE_BASE_URL=http://10.21.21.29:8080/snail-job # VITE_SERVICE_BASE_URL=http://10.21.21.29:8080/snail-job

View File

@ -488,7 +488,7 @@ const local: App.I18n.Schema = {
name: 'Please enter category name', name: 'Please enter category name',
categoryName: 'Category Name', categoryName: 'Category Name',
categoryStatus: 'Please select category status', categoryStatus: 'Please select category status',
categoryParentName: 'Category ID', categoryParentName: 'Category Name',
categoryType: 'Category Type', categoryType: 'Category Type',
createTime: 'Create Time' createTime: 'Create Time'
}, },

View File

@ -498,7 +498,7 @@ const local: App.I18n.Schema = {
name: '请输入分类名称', name: '请输入分类名称',
categoryName: '分类名称', categoryName: '分类名称',
categoryStatus: '分类状态', categoryStatus: '分类状态',
categoryParentName: '父级ID', categoryParentName: '父级名称',
categoryType: '分类类型', categoryType: '分类类型',
createTime: '创建时间' createTime: '创建时间'
}, },

View File

@ -25,7 +25,7 @@ export function fetchAddCategory(data: Api.Category.Model) {
url: '/category', url: '/category',
method: 'post', method: 'post',
data:{ data:{
parentId: data.parent, parentId: data.id,
categoryName: data.name, categoryName: data.name,
categoryType: parseInt(data.type) categoryType: parseInt(data.type)
} }
@ -39,7 +39,7 @@ export function fetchEditCategory(data: Api.Category.Model) {
method: 'put', method: 'put',
data:{ data:{
id: data.id, id: data.id,
parentId: data.parent, parentId: data.parentId,
categoryName: data.name, categoryName: data.name,
categoryType: parseInt(data.type) categoryType: parseInt(data.type)
} }

View File

@ -18,18 +18,18 @@ export function fetchGetAllGroupNameList(params?: Api.GroupConfig.GroupConfigSea
} }
/** add groupConfig */ /** add groupConfig */
export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO) { export function fetchAddGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO, type: string) {
return request<boolean>({ return request<boolean>({
url: '/group', url: `/group?categoryId=${type}`,
method: 'post', method: 'post',
data data
}); });
} }
/** edit groupConfig */ /** edit groupConfig */
export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO) { export function fetchEditGroupConfig(data: Api.GroupConfig.GroupConfigRequestVO, type: string) {
return request<boolean>({ return request<boolean>({
url: '/group', url: `/group?categoryId=${type}`,
method: 'put', method: 'put',
data data
}); });

20
src/typings/api.d.ts vendored
View File

@ -1366,7 +1366,7 @@ declare namespace Api {
* backend api module: "Category" * backend api module: "Category"
*/ */
namespace Category { namespace Category {
type CategoryType = '1' | '2'; // type CategoryType = '1' | '2';
type CategorySearchParams = { type CategorySearchParams = {
categoryName?: string | null, categoryName?: string | null,
@ -1379,19 +1379,21 @@ declare namespace Api {
categoryName: string; categoryName: string;
level: string; level: string;
createTime: string; createTime: string;
categoryType: CategoryType; // categoryType: CategoryType;
categoryType: string;
}
type Model = {
id: number;
parentId: number;
name: string;
type: string;
parentName: string;
} }
type RowData = Category & { type RowData = Category & {
children?: RowData[]; children?: RowData[];
}; };
interface Model {
id: number;
name: string;
type: string;
parent: string;
}
} }
namespace Common { namespace Common {
type DateRangeParams = { type DateRangeParams = {

View File

@ -34,6 +34,21 @@ async function init() {
}; };
return dict; return dict;
} }
const dict = await init();
export default dict; function getDictLabel(dictData: indexAbleDictData[], dictValue: string) {
let label = '';
if (dictData && dictData.length > 0) {
dictData.forEach(item => {
if (item.value == dictValue) {
label = item.label;
}
});
}
return label;
}
const dict:indexAbleDict = await init();
export { dict, getDictLabel };

View File

@ -79,11 +79,19 @@ const {
// //
const headAdd = () => { const headAdd = () => {
handleAdd(0); let item: Api.Category.RowData = {
id: 0,
parentId: 0,
categoryName: "暂无父类",
level: "",
createTime: "",
categoryType: "1"
};
handleAdd(item);
} }
// //
const Add = (item: Api.Category.RowData) => { const Add = (item: Api.Category.RowData) => {
handleAdd(item.id); handleAdd(item);
} }
// //
const Edit = (item: Api.Category.RowData) => { const Edit = (item: Api.Category.RowData) => {

View File

@ -7,7 +7,7 @@ import { $t } from '@/locales';
import { useAuthStore } from '@/store/modules/auth'; import { useAuthStore } from '@/store/modules/auth';
import { fetchAddCategory, fetchEditCategory } from '@/service/api' import { fetchAddCategory, fetchEditCategory } from '@/service/api'
// import { categoryTypeOptions } from '@/constants/business'; // import { categoryTypeOptions } from '@/constants/business';
import dict from '@/utils/dict'; import { dict } from '@/utils/dict';
// //
defineOptions({ defineOptions({
@ -27,7 +27,7 @@ interface Emits {
(e: 'submitted'): void; (e: 'submitted'): void;
} }
let key = "字典类型"; let key = "web_category";
const categoryTypeOptions = ref([ const categoryTypeOptions = ref([
{ value: '1', label: '网站' }, { value: '1', label: '网站' },
@ -56,42 +56,40 @@ const title = computed(() => {
return titles[props.operateType]; return titles[props.operateType];
}); });
const model: Api.Category.Model = reactive(createDefaultModel()); const model: Api.Category.Model = reactive({
function updateModel(id: number, categoryName: string, categoryType: string, parentId: number) { id: 0,
model.id = id; parentId: 0,
model.name = categoryName; name: '',
model.type = categoryType; type: '1',
model.parent = parentId.toString(); // parentName: ''
} });
function createDefaultModel(): Api.Category.Model {
return {
id: 0,
name: '',
type: '',
parent: ''
};
}
// //
type RuleKey = Extract<keyof Api.Category.Model, App.Global.FormRule>; type RuleKey = Extract<keyof Api.Category.Model, App.Global.FormRule>;
const rules: Record<RuleKey, App.Global.FormRule> = { const rules: Record<RuleKey, App.Global.FormRule> = {
id: defaultRequiredRule,
parentId: defaultRequiredRule,
name: defaultRequiredRule, name: defaultRequiredRule,
type: defaultRequiredRule, type: defaultRequiredRule,
parent: defaultRequiredRule parentName: defaultRequiredRule
}; };
// //
function handleUpdateModelWhenEdit() { function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') { if (props.operateType === 'add' && props.rowData) {
const { id, parentId } = props.rowData!; model.parentId = props.rowData.id;
updateModel(id, '', '1', parentId); model.name = '';
model.type = '1';
model.parentName = props.rowData.categoryName;
console.log(model); console.log(model);
return; return;
} }
if (props.operateType === 'edit' && props.rowData) { if (props.operateType === 'edit' && props.rowData) {
const { id, categoryName, categoryType, parentId } = props.rowData; model.id = props.rowData.id;
updateModel(id, categoryName, categoryType.toString(), parentId); model.name = props.rowData.categoryName;
model.type = props.rowData.categoryType;
console.log(model); console.log(model);
} }
} }
@ -185,8 +183,8 @@ async function handleCopy(source: string) {
:options="translateOptions(categoryTypeOptions)" clearable /> :options="translateOptions(categoryTypeOptions)" clearable />
</NFormItem> --> </NFormItem> -->
<NFormItem :label="$t('page.category.form.categoryParentName')" path="parent"> <NFormItem :label="$t('page.category.form.categoryParentName')" path="parent" v-show="props.operateType === 'add'">
<NInput v-model:value="model.parent" :placeholder="$t('page.category.form.categoryType')" :disabled="true" /> <NInput v-model:value="model.parentName" :placeholder="$t('page.category.form.categoryParentName')" :disabled="true" />
</NFormItem> </NFormItem>
</NForm> </NForm>

View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { $t } from '@/locales'; import { $t } from '@/locales';
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { NCard, NForm, NFormItemGi, NGrid, NInput, NSelect, NButton, NSpace } from 'naive-ui'; import { NCard, NForm, NFormItemGi, NGrid, NInput, NSelect, NButton, NSpace } from 'naive-ui';
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { dict } from '@/utils/dict';
const appStore = useAppStore(); const appStore = useAppStore();
interface Model { interface Model {
@ -16,10 +17,10 @@ const model = defineModel<Model>('model', {
default: () => ({ categoryName: null, categoryType: null }) default: () => ({ categoryName: null, categoryType: null })
}); });
const categoryTypeOptions = [ // const categoryTypeOptions = ref([
{ value: '1', label: '网站' }, // { value: '1', label: '' },
{ value: '2', label: '文献' } // { value: '2', label: '' }
]; // ]);
const btnSpan = computed(() => appStore.isMobile ? '24' : '12'); const btnSpan = computed(() => appStore.isMobile ? '24' : '12');
@ -36,6 +37,8 @@ function reset() {
model.value.categoryType = null; model.value.categoryType = null;
emit('update'); emit('update');
} }
let key = "web_category";
</script> </script>
<template> <template>
@ -49,7 +52,7 @@ function reset() {
<!-- 下拉 --> <!-- 下拉 -->
<NFormItemGi span="24 s:12 m:6" :label="$t('page.category.form.categoryType')" path="categoryStatus" class="pr-24px"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.category.form.categoryType')" path="categoryStatus" class="pr-24px">
<NSelect v-model:value="model.categoryType" :placeholder="$t('page.category.form.categoryType')" <NSelect v-model:value="model.categoryType" :placeholder="$t('page.category.form.categoryType')"
:options="categoryTypeOptions" clearable /> :options="dict.type[key]" clearable />
</NFormItemGi> </NFormItemGi>
<!-- 按钮 --> <!-- 按钮 -->
<NFormItemGi :y-gap="8" :span="btnSpan" class="pr-24px lg:p-t-0 md:p-t-16px"> <NFormItemGi :y-gap="8" :span="btnSpan" class="pr-24px lg:p-t-0 md:p-t-16px">

View File

@ -1,6 +1,7 @@
import { ref, Ref } from 'vue'; import { ref, Ref } from 'vue';
import { useBoolean } from '@sa/hooks'; import { useBoolean } from '@sa/hooks';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { dict, getDictLabel } from '@/utils/dict';
type CategoryApiFn<T = any, R = Api.Category.CategorySearchParams> = ( type CategoryApiFn<T = any, R = Api.Category.CategorySearchParams> = (
params?: R params?: R
@ -19,8 +20,16 @@ export function useCategoryTable<T extends Api.Category.RowData[]>(apiFn: Catego
const getData = async () => { const getData = async () => {
loading.value = true; loading.value = true;
try { try {
const { data } = await apiFn(params.value); let { data } = await apiFn(params.value);
tableData.value = data as Api.Category.RowData[]; if (!data) {
window.$message?.error($t('common.error'));
}else {
data.forEach(item => {
item.categoryType = getDictLabel(dict.type['web_category'], item.categoryType)
})
tableData.value = data as Api.Category.RowData[];
console.log(tableData.value)
}
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
@ -47,17 +56,9 @@ export function useFormOperate<T extends Record<string, any>>(config: {
const operateType: Ref<NaiveUI.TableOperateType> = ref('add'); const operateType: Ref<NaiveUI.TableOperateType> = ref('add');
const editingData: Ref<Api.Category.Category | null> = ref(null); const editingData: Ref<Api.Category.Category | null> = ref(null);
// 打开添加表单 function handleAdd(data: Api.Category.Category) {
function handleAdd(id: number) {
operateType.value = 'add'; operateType.value = 'add';
editingData.value = { editingData.value = data;
id: id,
parentId: id,
categoryName: "",
level: "",
createTime: "",
categoryType: "1"
};
openDrawer(); openDrawer();
} }

View File

@ -144,7 +144,7 @@ async function handleSubmit() {
await validate(); await validate();
// request // request
if (props.operateType === 'add') { if (props.operateType === 'add') {
const { groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model; const { groupName, token, type, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
const { error } = await fetchAddGroupConfig({ const { error } = await fetchAddGroupConfig({
groupName, groupName,
token, token,
@ -153,11 +153,11 @@ async function handleSubmit() {
idGeneratorMode, idGeneratorMode,
initScene, initScene,
groupPartition groupPartition
}); }, type.toString());
if (error) return; if (error) return;
window.$message?.success($t('common.addSuccess')); window.$message?.success($t('common.addSuccess'));
} else { } else {
const { groupName, token, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model; const { groupName, token, type, groupStatus, description, idGeneratorMode, initScene, groupPartition } = model;
const { error } = await fetchEditGroupConfig({ const { error } = await fetchEditGroupConfig({
groupName, groupName,
token, token,
@ -166,7 +166,7 @@ async function handleSubmit() {
idGeneratorMode, idGeneratorMode,
initScene, initScene,
groupPartition groupPartition
}); }, type.toString());
if (error) return; if (error) return;
window.$message?.success($t('common.updateSuccess')); window.$message?.success($t('common.updateSuccess'));
} }