前端打包
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import type { ICategory } from '@/domain/iCategory';
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
|
||||
/** 首页轮播图 */
|
||||
@@ -7,8 +8,14 @@ export interface ICarousel {
|
||||
title: string;
|
||||
/** 轮播图图片信息(ISysFileInfo 对象) */
|
||||
image: ISysFileInfo | string;
|
||||
/** 跳转链接 */
|
||||
/** 跳转类型:0=链接,1=分类 */
|
||||
link_type?: number;
|
||||
/** 跳转链接(link_type=0 时生效) */
|
||||
link?: string;
|
||||
/** 分类ID(link_type=1 时生效) */
|
||||
category_id?: number;
|
||||
/** 所属分类(后端关联返回) */
|
||||
category?: ICategory;
|
||||
/** 状态:0=启用,1=禁用 */
|
||||
status: number;
|
||||
/** 排序 */
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
/** 首页分类 */
|
||||
export interface ICategory {
|
||||
id?: number;
|
||||
/** 分类名称 */
|
||||
name: string;
|
||||
/** 状态:0=启用,1=禁用 */
|
||||
status: number;
|
||||
/** 排序 */
|
||||
sort: number;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
|
||||
/** 首页分类项(字段与宫格导航一致) */
|
||||
export interface ICategoryItem {
|
||||
id?: number;
|
||||
/** 所属分类ID */
|
||||
category_id?: number;
|
||||
/** 导航标题 */
|
||||
title: string;
|
||||
/** 导航图标信息(ISysFileInfo 对象) */
|
||||
image: ISysFileInfo | string;
|
||||
/** 跳转链接 */
|
||||
link?: string;
|
||||
/** 状态:0=启用,1=禁用 */
|
||||
status: number;
|
||||
/** 排序 */
|
||||
sort: number;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { ICategory } from '@/domain/iCategory';
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
|
||||
/** 首页宫格导航 */
|
||||
@@ -7,8 +8,14 @@ export interface IGridNav {
|
||||
title: string;
|
||||
/** 导航图标信息(ISysFileInfo 对象) */
|
||||
image: ISysFileInfo | string;
|
||||
/** 跳转链接 */
|
||||
/** 跳转类型:0=链接,1=分类 */
|
||||
link_type?: number;
|
||||
/** 跳转链接(link_type=0 时生效) */
|
||||
link?: string;
|
||||
/** 分类ID(link_type=1 时生效) */
|
||||
category_id?: number;
|
||||
/** 所属分类(后端关联返回) */
|
||||
category?: ICategory;
|
||||
/** 状态:0=启用,1=禁用 */
|
||||
status: number;
|
||||
/** 排序 */
|
||||
|
||||
@@ -18,6 +18,7 @@ import systemRule from "./system/rule";
|
||||
import systemAi from "./system/ai";
|
||||
import systemCarousel from "./system/carousel";
|
||||
import systemGridNav from "./system/gridNav";
|
||||
import systemCategory from "./system/category";
|
||||
|
||||
import aiChat from "./ai/chat";
|
||||
import aiConversation from "./ai/conversation";
|
||||
@@ -50,6 +51,7 @@ export default {
|
||||
...systemAi,
|
||||
...systemCarousel,
|
||||
...systemGridNav,
|
||||
...systemCategory,
|
||||
...aiChat,
|
||||
...aiConversation,
|
||||
...aiAgent,
|
||||
|
||||
@@ -46,5 +46,6 @@ export default {
|
||||
"menu.system.ai": "AI",
|
||||
"menu.system.carousel": "Carousel",
|
||||
"menu.system.grid-nav": "Grid Navigation",
|
||||
"menu.system.category": "Categories",
|
||||
"menu.xin-admin": "XinAdmin",
|
||||
}
|
||||
|
||||
@@ -9,8 +9,14 @@ export default {
|
||||
"system.carousel.title.required": "Carousel title is required",
|
||||
"system.carousel.image": "Carousel Image",
|
||||
"system.carousel.image.required": "Carousel image is required",
|
||||
"system.carousel.linkType": "Link Type",
|
||||
"system.carousel.linkType.required": "Link type is required",
|
||||
"system.carousel.linkType.link": "Link",
|
||||
"system.carousel.linkType.category": "Category",
|
||||
"system.carousel.link": "Redirect Link",
|
||||
"system.carousel.link.placeholder": "Enter redirect link",
|
||||
"system.carousel.category": "Target Category",
|
||||
"system.carousel.category.placeholder": "Select a category",
|
||||
"system.carousel.status": "Status",
|
||||
"system.carousel.status.required": "Status is required",
|
||||
"system.carousel.status.normal": "Active",
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
export default {
|
||||
// Page Title
|
||||
"system.category.page.title": "Category Management",
|
||||
"system.category.page.description": "Manage homepage categories and category item links",
|
||||
|
||||
// Fields
|
||||
"system.category.id": "ID",
|
||||
"system.category.name": "Category Name",
|
||||
"system.category.name.required": "Category name is required",
|
||||
"system.category.status": "Status",
|
||||
"system.category.status.required": "Status is required",
|
||||
"system.category.status.normal": "Active",
|
||||
"system.category.status.disabled": "Disabled",
|
||||
"system.category.sort": "Sort",
|
||||
"system.category.createdAt": "Created At",
|
||||
"system.category.updatedAt": "Updated At",
|
||||
|
||||
// Category Items
|
||||
"system.category.manageItems": "Manage Items",
|
||||
"system.category.itemManagement": "Category Items",
|
||||
"system.category.backToList": "Back to Categories",
|
||||
"system.category.selectCategoryFirst": "Please select a category first",
|
||||
|
||||
"system.category.item.id": "ID",
|
||||
"system.category.item.title": "Item Title",
|
||||
"system.category.item.title.required": "Item title is required",
|
||||
"system.category.item.image": "Item Icon",
|
||||
"system.category.item.image.required": "Item icon is required",
|
||||
"system.category.item.link": "Redirect Link",
|
||||
"system.category.item.link.placeholder": "Enter redirect link",
|
||||
"system.category.item.status": "Status",
|
||||
"system.category.item.status.required": "Status is required",
|
||||
"system.category.item.status.normal": "Active",
|
||||
"system.category.item.status.disabled": "Disabled",
|
||||
"system.category.item.sort": "Sort",
|
||||
"system.category.item.createdAt": "Created At",
|
||||
"system.category.item.updatedAt": "Updated At",
|
||||
"system.category.item.createSuccess": "Category item created successfully",
|
||||
"system.category.item.updateSuccess": "Category item updated successfully",
|
||||
};
|
||||
@@ -9,8 +9,14 @@ export default {
|
||||
"system.gridNav.title.required": "Navigation title is required",
|
||||
"system.gridNav.image": "Navigation Icon",
|
||||
"system.gridNav.image.required": "Navigation icon is required",
|
||||
"system.gridNav.linkType": "Link Type",
|
||||
"system.gridNav.linkType.required": "Link type is required",
|
||||
"system.gridNav.linkType.link": "Link",
|
||||
"system.gridNav.linkType.category": "Category",
|
||||
"system.gridNav.link": "Redirect Link",
|
||||
"system.gridNav.link.placeholder": "Enter redirect link",
|
||||
"system.gridNav.category": "Target Category",
|
||||
"system.gridNav.category.placeholder": "Select a category",
|
||||
"system.gridNav.status": "Status",
|
||||
"system.gridNav.status.required": "Status is required",
|
||||
"system.gridNav.status.normal": "Active",
|
||||
|
||||
@@ -18,6 +18,7 @@ import systemRule from "./system/rule";
|
||||
import systemAi from "./system/ai";
|
||||
import systemCarousel from "./system/carousel";
|
||||
import systemGridNav from "./system/gridNav";
|
||||
import systemCategory from "./system/category";
|
||||
|
||||
import aiChat from "./ai/chat";
|
||||
import aiConversation from "./ai/conversation";
|
||||
@@ -50,6 +51,7 @@ export default {
|
||||
...systemAi,
|
||||
...systemCarousel,
|
||||
...systemGridNav,
|
||||
...systemCategory,
|
||||
...aiChat,
|
||||
...aiConversation,
|
||||
...aiAgent,
|
||||
|
||||
@@ -46,5 +46,6 @@ export default {
|
||||
"menu.system.ai": "AI 配置",
|
||||
"menu.system.carousel": "轮播图管理",
|
||||
"menu.system.grid-nav": "宫格导航管理",
|
||||
"menu.system.category": "分类管理",
|
||||
"menu.xin-admin": "XinAdmin",
|
||||
};
|
||||
|
||||
@@ -9,8 +9,14 @@ export default {
|
||||
"system.carousel.title.required": "轮播图标题不能为空",
|
||||
"system.carousel.image": "轮播图片",
|
||||
"system.carousel.image.required": "轮播图片不能为空",
|
||||
"system.carousel.linkType": "跳转类型",
|
||||
"system.carousel.linkType.required": "跳转类型不能为空",
|
||||
"system.carousel.linkType.link": "链接",
|
||||
"system.carousel.linkType.category": "分类",
|
||||
"system.carousel.link": "跳转链接",
|
||||
"system.carousel.link.placeholder": "请输入跳转链接",
|
||||
"system.carousel.category": "跳转分类",
|
||||
"system.carousel.category.placeholder": "请选择分类",
|
||||
"system.carousel.status": "状态",
|
||||
"system.carousel.status.required": "状态不能为空",
|
||||
"system.carousel.status.normal": "启用",
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
export default {
|
||||
// 页面标题
|
||||
"system.category.page.title": "首页分类管理",
|
||||
"system.category.page.description": "管理首页分类及分类项跳转链接",
|
||||
|
||||
// 字段
|
||||
"system.category.id": "ID",
|
||||
"system.category.name": "分类名称",
|
||||
"system.category.name.required": "分类名称不能为空",
|
||||
"system.category.status": "状态",
|
||||
"system.category.status.required": "状态不能为空",
|
||||
"system.category.status.normal": "启用",
|
||||
"system.category.status.disabled": "禁用",
|
||||
"system.category.sort": "排序",
|
||||
"system.category.createdAt": "创建时间",
|
||||
"system.category.updatedAt": "更新时间",
|
||||
|
||||
// 分类项
|
||||
"system.category.manageItems": "分类项管理",
|
||||
"system.category.itemManagement": "分类项管理",
|
||||
"system.category.backToList": "返回分类列表",
|
||||
"system.category.selectCategoryFirst": "请先选择分类",
|
||||
|
||||
"system.category.item.id": "ID",
|
||||
"system.category.item.title": "导航标题",
|
||||
"system.category.item.title.required": "导航标题不能为空",
|
||||
"system.category.item.image": "导航图标",
|
||||
"system.category.item.image.required": "导航图标不能为空",
|
||||
"system.category.item.link": "跳转链接",
|
||||
"system.category.item.link.placeholder": "请输入跳转链接",
|
||||
"system.category.item.status": "状态",
|
||||
"system.category.item.status.required": "状态不能为空",
|
||||
"system.category.item.status.normal": "启用",
|
||||
"system.category.item.status.disabled": "禁用",
|
||||
"system.category.item.sort": "排序",
|
||||
"system.category.item.createdAt": "创建时间",
|
||||
"system.category.item.updatedAt": "更新时间",
|
||||
"system.category.item.createSuccess": "分类项创建成功",
|
||||
"system.category.item.updateSuccess": "分类项更新成功",
|
||||
};
|
||||
@@ -9,8 +9,14 @@ export default {
|
||||
"system.gridNav.title.required": "导航标题不能为空",
|
||||
"system.gridNav.image": "导航图标",
|
||||
"system.gridNav.image.required": "导航图标不能为空",
|
||||
"system.gridNav.linkType": "跳转类型",
|
||||
"system.gridNav.linkType.required": "跳转类型不能为空",
|
||||
"system.gridNav.linkType.link": "链接",
|
||||
"system.gridNav.linkType.category": "分类",
|
||||
"system.gridNav.link": "跳转链接",
|
||||
"system.gridNav.link.placeholder": "请输入跳转链接",
|
||||
"system.gridNav.category": "跳转分类",
|
||||
"system.gridNav.category.placeholder": "请选择分类",
|
||||
"system.gridNav.status": "状态",
|
||||
"system.gridNav.status.required": "状态不能为空",
|
||||
"system.gridNav.status.normal": "启用",
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import XinTable from '@/components/XinTable';
|
||||
import { Badge, Image, Typography } from 'antd';
|
||||
import { Badge, Image, Tag, Typography } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ICarousel } from '@/domain/iCarousel';
|
||||
import type { ICategory } from '@/domain/iCategory';
|
||||
import type { XinTableColumn } from '@/components/XinTable/typings';
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
import { List } from '@/api/common/table';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -22,6 +25,20 @@ function getImageUrl(image: ISysFileInfo | string | null | undefined): string {
|
||||
export default function CarouselPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 分类下拉选项
|
||||
const [categoryOptions, setCategoryOptions] = useState<{ label: string; value: number }[]>([]);
|
||||
useEffect(() => {
|
||||
List<ICategory>('/system/category', { pageSize: 1000 }).then((res) => {
|
||||
const list = res.data?.data?.data ?? [];
|
||||
setCategoryOptions(list.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id as number,
|
||||
})));
|
||||
}).catch(() => {
|
||||
// 分类加载失败不影响页面使用
|
||||
});
|
||||
}, []);
|
||||
|
||||
const columns: XinTableColumn<ICarousel>[] = [
|
||||
{
|
||||
title: t('system.carousel.id'),
|
||||
@@ -64,6 +81,25 @@ export default function CarouselPage() {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.carousel.linkType'),
|
||||
dataIndex: 'link_type',
|
||||
valueType: 'select',
|
||||
colProps: { span: 12 },
|
||||
initialValue: 0,
|
||||
rules: [{ required: true, message: t('system.carousel.linkType.required') }],
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: t('system.carousel.linkType.link'), value: 0 },
|
||||
{ label: t('system.carousel.linkType.category'), value: 1 },
|
||||
],
|
||||
},
|
||||
render: (value: number) => {
|
||||
return value === 1
|
||||
? <Tag color="blue">{t('system.carousel.linkType.category')}</Tag>
|
||||
: <Tag>{t('system.carousel.linkType.link')}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.carousel.link'),
|
||||
dataIndex: 'link',
|
||||
@@ -73,6 +109,35 @@ export default function CarouselPage() {
|
||||
fieldProps: {
|
||||
placeholder: t('system.carousel.link.placeholder'),
|
||||
},
|
||||
render: (_, record) => {
|
||||
if(record.link_type === 1) {
|
||||
const name = record.category?.name;
|
||||
return name ? <Tag>{name}</Tag> : '-';
|
||||
}
|
||||
return record.link || '-'
|
||||
},
|
||||
dependency: {
|
||||
dependencies: ['link_type'],
|
||||
visible: (values) => values.link_type !== 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.carousel.category'),
|
||||
dataIndex: 'category_id',
|
||||
valueType: 'select',
|
||||
colProps: { span: 12 },
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: {
|
||||
options: categoryOptions,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
placeholder: t('system.carousel.category.placeholder'),
|
||||
},
|
||||
dependency: {
|
||||
dependencies: ['link_type'],
|
||||
visible: (values) => values.link_type === 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.carousel.status'),
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
import XinTable from '@/components/XinTable';
|
||||
import { Badge, Button, Tooltip, Typography } from 'antd';
|
||||
import { UnorderedListOutlined } from '@ant-design/icons';
|
||||
import type { ICategory } from '@/domain/iCategory';
|
||||
import type { XinTableColumn } from '@/components/XinTable/typings';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
/** 首页分类管理 */
|
||||
export default function CategoryPage() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const columns: XinTableColumn<ICategory>[] = [
|
||||
{
|
||||
title: t('system.category.id'),
|
||||
dataIndex: 'id',
|
||||
hideInForm: true,
|
||||
width: 80,
|
||||
sorter: true,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('system.category.name'),
|
||||
dataIndex: 'name',
|
||||
valueType: 'text',
|
||||
colProps: { span: 12 },
|
||||
rules: [{ required: true, message: t('system.category.name.required') }],
|
||||
},
|
||||
{
|
||||
title: t('system.category.status'),
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
filters: [
|
||||
{ text: t('system.category.status.normal'), value: 0 },
|
||||
{ text: t('system.category.status.disabled'), value: 1 },
|
||||
],
|
||||
colProps: { span: 12 },
|
||||
rules: [{ required: true, message: t('system.category.status.required') }],
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: t('system.category.status.normal'), value: 0 },
|
||||
{ label: t('system.category.status.disabled'), value: 1 },
|
||||
],
|
||||
},
|
||||
render: (value: number) => {
|
||||
return value === 0
|
||||
? <Badge status="success" text={t('system.category.status.normal')} />
|
||||
: <Badge status="error" text={t('system.category.status.disabled')} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.sort'),
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
colProps: { span: 12 },
|
||||
hideInSearch: true,
|
||||
initialValue: 0,
|
||||
fieldProps: {
|
||||
min: 0,
|
||||
style: { width: '100%' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.createdAt'),
|
||||
dataIndex: 'created_at',
|
||||
render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
hideInForm: true,
|
||||
hideInSearch: true,
|
||||
width: 160,
|
||||
},
|
||||
];
|
||||
|
||||
// 跳转到分类项管理页面
|
||||
const handleGoToItems = (record: ICategory) => {
|
||||
navigate(`/system/category/item?categoryId=${record.id}&categoryName=${encodeURIComponent(record.name || '')}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<Title level={3}>{t('system.category.page.title')}</Title>
|
||||
<Text type="secondary">{t('system.category.page.description')}</Text>
|
||||
</div>
|
||||
<XinTable<ICategory>
|
||||
api="/system/category"
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
accessName="system.category"
|
||||
formProps={{
|
||||
grid: true,
|
||||
colProps: { span: 12 },
|
||||
rowProps: { gutter: [30, 0] },
|
||||
layout: 'vertical',
|
||||
}}
|
||||
modalProps={{ width: 600 }}
|
||||
searchProps={false}
|
||||
operateProps={{
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
}}
|
||||
scroll={{ x: 1000 }}
|
||||
operateRender={(record, dom) => [
|
||||
<Tooltip title={t('system.category.manageItems')} key="items">
|
||||
<Button
|
||||
type="default"
|
||||
icon={<UnorderedListOutlined />}
|
||||
size="small"
|
||||
onClick={() => handleGoToItems(record)}
|
||||
/>
|
||||
</Tooltip>,
|
||||
dom.edit,
|
||||
dom.del,
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import XinTable from '@/components/XinTable';
|
||||
import { Badge, Button, Image, Space, Typography } from 'antd';
|
||||
import { LeftOutlined } from '@ant-design/icons';
|
||||
import type { ICategoryItem } from '@/domain/iCategoryItem';
|
||||
import type { XinTableColumn } from '@/components/XinTable/typings';
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate, useSearchParams } from 'react-router';
|
||||
import { Create, Update } from '@/api/common/table.ts';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
/**
|
||||
* 从 image 字段中提取预览 URL
|
||||
* image 字段可能是 ISysFileInfo 对象或 URL 字符串
|
||||
*/
|
||||
function getImageUrl(image: ISysFileInfo | string | null | undefined): string {
|
||||
if (!image) return '';
|
||||
if (typeof image === 'string') return image;
|
||||
return image.preview_url || image.file_url || '';
|
||||
}
|
||||
|
||||
/** 首页分类项管理 */
|
||||
export default function CategoryItemPage() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// 从 URL 参数获取分类信息
|
||||
const categoryId = searchParams.get('categoryId');
|
||||
const categoryName = searchParams.get('categoryName') || '';
|
||||
|
||||
const [currentCategory, setCurrentCategory] = useState({
|
||||
id: categoryId ? parseInt(categoryId) : 0,
|
||||
name: decodeURIComponent(categoryName),
|
||||
});
|
||||
|
||||
// 监听 URL 参数变化
|
||||
useEffect(() => {
|
||||
if (categoryId) {
|
||||
setCurrentCategory({
|
||||
id: parseInt(categoryId),
|
||||
name: decodeURIComponent(categoryName),
|
||||
});
|
||||
}
|
||||
}, [categoryId, categoryName]);
|
||||
|
||||
const columns: XinTableColumn<ICategoryItem>[] = [
|
||||
{
|
||||
title: t('system.category.item.id'),
|
||||
dataIndex: 'id',
|
||||
hideInForm: true,
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.title'),
|
||||
dataIndex: 'title',
|
||||
valueType: 'text',
|
||||
colProps: { span: 12 },
|
||||
rules: [{ required: true, message: t('system.category.item.title.required') }],
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.image'),
|
||||
dataIndex: 'image_id',
|
||||
valueType: 'image',
|
||||
colProps: { span: 24 },
|
||||
rules: [{ required: true, message: t('system.category.item.image.required') }],
|
||||
hideInSearch: true,
|
||||
fieldProps: {
|
||||
action: '/system/file/list/upload',
|
||||
mode: 'single',
|
||||
maxCount: 1,
|
||||
changeType: 'id',
|
||||
},
|
||||
render: (_value: ISysFileInfo | string, record: ICategoryItem) => {
|
||||
const url = getImageUrl(record.image);
|
||||
if (!url) return '-';
|
||||
return (
|
||||
<Image
|
||||
src={url}
|
||||
width={60}
|
||||
height={60}
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.link'),
|
||||
dataIndex: 'link',
|
||||
valueType: 'text',
|
||||
colProps: { span: 12 },
|
||||
hideInSearch: true,
|
||||
fieldProps: {
|
||||
placeholder: t('system.category.item.link.placeholder'),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.status'),
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
colProps: { span: 12 },
|
||||
initialValue: 0,
|
||||
rules: [{ required: true, message: t('system.category.item.status.required') }],
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: t('system.category.item.status.normal'), value: 0 },
|
||||
{ label: t('system.category.item.status.disabled'), value: 1 },
|
||||
],
|
||||
},
|
||||
render: (value: number) => {
|
||||
return value === 0
|
||||
? <Badge status="success" text={t('system.category.item.status.normal')} />
|
||||
: <Badge status="error" text={t('system.category.item.status.disabled')} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.sort'),
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
colProps: { span: 12 },
|
||||
hideInSearch: true,
|
||||
initialValue: 0,
|
||||
fieldProps: {
|
||||
min: 0,
|
||||
style: { width: '100%' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.category.item.createdAt'),
|
||||
dataIndex: 'created_at',
|
||||
render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
|
||||
hideInForm: true,
|
||||
hideInSearch: true,
|
||||
width: 160,
|
||||
},
|
||||
];
|
||||
|
||||
// 返回分类列表
|
||||
const handleGoBack = () => {
|
||||
navigate('/system/category');
|
||||
};
|
||||
|
||||
// 如果没有分类ID,显示提示
|
||||
if (!currentCategory.id) {
|
||||
return (
|
||||
<div style={{ padding: 50, textAlign: 'center' }}>
|
||||
<div style={{ marginTop: 50, color: '#999' }}>
|
||||
{t('system.category.selectCategoryFirst')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Space orientation={'vertical'} style={{ width: '100%' }}>
|
||||
<div>
|
||||
<Button type={'link'} onClick={handleGoBack} icon={<LeftOutlined />} classNames={{ root: 'p-0 mb-2' }}>
|
||||
{t('system.category.backToList')}
|
||||
</Button>
|
||||
<Title level={3}>
|
||||
<span className={'mr-2'}>{t('system.category.itemManagement')} - {currentCategory.name}</span>
|
||||
</Title>
|
||||
</div>
|
||||
<XinTable<ICategoryItem>
|
||||
api="/system/category/item"
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
accessName="system.category.item"
|
||||
formProps={{
|
||||
grid: true,
|
||||
colProps: { span: 12 },
|
||||
rowProps: { gutter: [30, 0] },
|
||||
layout: 'vertical',
|
||||
}}
|
||||
modalProps={{ width: 600 }}
|
||||
requestParams={(params) => {
|
||||
return {
|
||||
...params,
|
||||
category_id: currentCategory.id,
|
||||
};
|
||||
}}
|
||||
searchShow={false}
|
||||
handleFinish={async (values, mode, _form, defaultValue) => {
|
||||
if (mode === 'create') {
|
||||
await Create('/system/category/item', {
|
||||
...values,
|
||||
category_id: currentCategory.id,
|
||||
});
|
||||
window.$message?.success(t('system.category.item.createSuccess'));
|
||||
} else {
|
||||
await Update('/system/category/item/' + defaultValue?.id, {
|
||||
...values,
|
||||
category_id: currentCategory.id,
|
||||
});
|
||||
window.$message?.success(t('system.category.item.updateSuccess'));
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,11 @@
|
||||
import XinTable from '@/components/XinTable';
|
||||
import { Badge, Image, Typography } from 'antd';
|
||||
import { Badge, Image, Tag, Typography } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { IGridNav } from '@/domain/iGridNav';
|
||||
import type { ICategory } from '@/domain/iCategory';
|
||||
import type { XinTableColumn } from '@/components/XinTable/typings';
|
||||
import type { ISysFileInfo } from '@/domain/iSysFile';
|
||||
import { List } from '@/api/common/table';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -22,6 +25,20 @@ function getImageUrl(image: ISysFileInfo | string | null | undefined): string {
|
||||
export default function GridNavPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 分类下拉选项
|
||||
const [categoryOptions, setCategoryOptions] = useState<{ label: string; value: number }[]>([]);
|
||||
useEffect(() => {
|
||||
List<ICategory>('/system/category', { pageSize: 1000 }).then((res) => {
|
||||
const list = res.data?.data?.data ?? [];
|
||||
setCategoryOptions(list.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id as number,
|
||||
})));
|
||||
}).catch(() => {
|
||||
// 分类加载失败不影响页面使用
|
||||
});
|
||||
}, []);
|
||||
|
||||
const columns: XinTableColumn<IGridNav>[] = [
|
||||
{
|
||||
title: t('system.gridNav.id'),
|
||||
@@ -64,6 +81,25 @@ export default function GridNavPage() {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.gridNav.linkType'),
|
||||
dataIndex: 'link_type',
|
||||
valueType: 'select',
|
||||
colProps: { span: 12 },
|
||||
initialValue: 0,
|
||||
rules: [{ required: true, message: t('system.gridNav.linkType.required') }],
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: t('system.gridNav.linkType.link'), value: 0 },
|
||||
{ label: t('system.gridNav.linkType.category'), value: 1 },
|
||||
],
|
||||
},
|
||||
render: (value: number) => {
|
||||
return value === 1
|
||||
? <Tag color="blue">{t('system.gridNav.linkType.category')}</Tag>
|
||||
: <Tag>{t('system.gridNav.linkType.link')}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.gridNav.link'),
|
||||
dataIndex: 'link',
|
||||
@@ -73,6 +109,35 @@ export default function GridNavPage() {
|
||||
fieldProps: {
|
||||
placeholder: t('system.gridNav.link.placeholder'),
|
||||
},
|
||||
render: (_, record) => {
|
||||
if(record.link_type === 1) {
|
||||
const name = record.category?.name;
|
||||
return name ? <Tag>{name}</Tag> : '-';
|
||||
}
|
||||
return record.link || '-'
|
||||
},
|
||||
dependency: {
|
||||
dependencies: ['link_type'],
|
||||
visible: (values) => values.link_type !== 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.carousel.category'),
|
||||
dataIndex: 'category_id',
|
||||
valueType: 'select',
|
||||
colProps: { span: 12 },
|
||||
hideInSearch: true,
|
||||
hideInTable: true,
|
||||
fieldProps: {
|
||||
options: categoryOptions,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
placeholder: t('system.carousel.category.placeholder'),
|
||||
},
|
||||
dependency: {
|
||||
dependencies: ['link_type'],
|
||||
visible: (values) => values.link_type === 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('system.gridNav.status'),
|
||||
|
||||
Reference in New Issue
Block a user