wang_yp
/
ball_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(staff)

This commit is contained in:
wang_yp 2025-03-21 17:01:20 +08:00
parent 7fb88159b8
commit 1262776376
18 changed files with 575 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/layout/layout.tsx
View File

@ -3,12 +3,21 @@ import "./layout.less";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import { useEffect, useState } from "react";
import { Avatar, Breadcrumb, Layout, Menu, MenuProps, theme } from "antd";
import {
Avatar,
Breadcrumb,
Layout,
Menu,
MenuProps,
theme,
Image,
} from "antd";
import { UserOutlined } from "@ant-design/icons";
import Sider from "antd/es/layout/Sider";
import { items } from "./layout_config";
import { Dropdown } from "antd/lib";
import { Outlet, useNavigate } from "react-router";
import logo from "@/static/favicon.png";
const LayOut = (props: Store) => {
const { usrStore } = props;
const [collapsed, setCollapsed] = useState(false);
@ -45,7 +54,9 @@ const LayOut = (props: Store) => {
return (
<Layout>
<Header style={headStyle}>
<div style={logoStyle}>logo</div>
<div style={logoStyle}>
{/* <Image src={logo} /> */}
</div>
<Dropdown menu={{ items }}>
<Avatar icon={<UserOutlined />} />
</Dropdown>

1
src/components/layout/layout_config.tsx
View File

@ -34,6 +34,7 @@ export const items: ItemType<MenuItemType>[] = [
{ key: "/sku/cat", label: `商品分类` },
{ key: "/sku/spec", label: `商品规格` },
{ key: "/sku/brand", label: `商品品牌` },
{ key: "/sku/tag", label: `标签管理` },
],
},
{

40
src/pages/sku/cat/config.tsx Normal file
View File

@ -0,0 +1,40 @@
import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
export const formConfig = [
{
type: FormType.input,
label: "商品分类名称",
name: "name",
value: "",
rules: [{ required: true, message: "商品分类名称不能为空!" }],
},
{
type: FormType.input,
label: "描述",
name: "remark",
value: "",
},
{
type: FormType.inputNumber,
label: "排序",
name: "sort",
value: "1",
},
];
export const columns: ColumnsType<UserDataType> = [
{
title: "商品分类名称",
dataIndex: "name",
fixed: "left",
},
{
title: "描述",
dataIndex: "remark",
},
{
title: "排序",
dataIndex: "sort",
},
];

75
src/pages/sku/cat/index.tsx
View File

@ -1,9 +1,76 @@
const Cat = () => {
import React from "react";
import { Button, Space, Modal, FormInstance } from "antd";
import { Store } from "antd/lib/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { columns, formConfig } from "./config";
import BTable from "@/components/b_table";
import SimpleForm from "@/components/form/simple_form";
const SkuCat = (props: Store) => {
const { skuCatStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
// 获取列表数据
useEffect(() => {
skuCatStore.getlist();
}, [skuCatStore]);
return (
<div>
cat
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加
</Button>
<BTable
store={skuCatStore}
scroll={{ x: "max-content" }}
columns={columns}
dataSource={skuCatStore.list}
deleteCallback={(record) => {
skuCatStore.deleteItem(record);
}}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
title={!userId ? "添加" : "编辑"}
width={800}
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
onOk={() => formRef.current?.submit()}
okText="确定"
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
>
<SimpleForm
formName={"tag_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
skuCatStore.add(formRef.current?.getFieldsValue())
setIsModalOpen(false);
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={formConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);
};
export default Cat;
export default inject("skuCatStore")(observer(SkuCat));

58
src/pages/sku/sku/config.tsx Normal file
View File

@ -0,0 +1,58 @@
import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
export const formConfig = [
{
type: FormType.input,
label: "商品名称",
name: "tag_name",
value: "",
rules: [{ required: true, message: "标签名称不能为空!" }],
},
{
type: FormType.input,
label: "标签描述",
name: "tag_desc",
value: "",
rules: [{ required: true, message: "城市编码不能为空" }],
},
{
type: FormType.input,
label: "标签排序",
name: "tag_sort",
value: "1",
rules: [{ required: true, message: "标签排序不能为空" }],
},
];
export const columns: ColumnsType<UserDataType> = [
{
title: "商品名称",
dataIndex: "sku_name",
fixed: "left",
},
{
title: "库存",
dataIndex: "sku_stock",
},
{
title: "商品分类",
dataIndex: "sku_cat_identity",
},
{
title: "品牌",
dataIndex: "sku_brand_identity",
},
{
title: "缩略图",
dataIndex: "sku_thumb",
},
{
title: "商品介绍",
dataIndex: "sku_desc",
},
{
title: "所属城市",
dataIndex: "city_identity",
},
];

76
src/pages/sku/sku/index.tsx Normal file
View File

@ -0,0 +1,76 @@
import React from "react";
import { Button, Space, Modal, FormInstance } from "antd";
import { Store } from "antd/lib/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { columns, formConfig } from "./config";
import BTable from "@/components/b_table";
import SimpleForm from "@/components/form/simple_form";
const Sku = (props: Store) => {
const { skuStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
// 获取列表数据
useEffect(() => {
skuStore.getlist();
}, [skuStore]);
return (
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加
</Button>
<BTable
store={skuStore}
scroll={{ x: "max-content" }}
columns={columns}
dataSource={skuStore.list}
deleteCallback={(record) => {
skuStore.deleteItem(record);
}}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
title={!userId ? "添加" : "编辑"}
width={800}
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
onOk={() => formRef.current?.submit()}
okText="确定"
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
>
<SimpleForm
formName={"tag_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
skuStore.add(formRef.current?.getFieldsValue())
setIsModalOpen(false);
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={formConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);
};
export default inject("skuStore")(observer(Sku));

40
src/pages/sku/spec/config.tsx Normal file
View File

@ -0,0 +1,40 @@
import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
export const formConfig = [
{
type: FormType.input,
label: "规格名称",
name: "spec_name",
value: "",
rules: [{ required: true, message: "规格名称不能为空!" }],
},
{
type: FormType.input,
label: "规格描述",
name: "spec_remark",
value: "",
},
{
type: FormType.inputNumber,
label: "规格排序",
name: "spec_sort",
value: "1",
},
];
export const columns: ColumnsType<UserDataType> = [
{
title: "规格名称",
dataIndex: "spec_name",
fixed: "left",
},
{
title: "规格描述",
dataIndex: "spec_remark",
},
{
title: "规格排序",
dataIndex: "spec_sort",
},
];

75
src/pages/sku/spec/index.tsx
View File

@ -1,9 +1,76 @@
const Spec = () => {
import React from "react";
import { Button, Space, Modal, FormInstance } from "antd";
import { Store } from "antd/lib/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { columns, formConfig } from "./config";
import BTable from "@/components/b_table";
import SimpleForm from "@/components/form/simple_form";
const SkuSpec = (props: Store) => {
const { skuSpecStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
// 获取列表数据
useEffect(() => {
skuSpecStore.getlist();
}, [skuSpecStore]);
return (
<div>
cat
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加
</Button>
<BTable
store={skuSpecStore}
scroll={{ x: "max-content" }}
columns={columns}
dataSource={skuSpecStore.list}
deleteCallback={(record) => {
skuSpecStore.deleteItem(record);
}}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
title={!userId ? "添加" : "编辑"}
width={800}
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
onOk={() => formRef.current?.submit()}
okText="确定"
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
>
<SimpleForm
formName={"tag_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
skuSpecStore.add(formRef.current?.getFieldsValue())
setIsModalOpen(false);
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={formConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);
};
export default Spec;
export default inject("skuSpecStore")(observer(SkuSpec));

42
src/pages/sku/tag/config.tsx Normal file
View File

@ -0,0 +1,42 @@
import { FormType } from "@/components/form/interface";
import { UserDataType } from "@/model/userModel";
import { ColumnsType } from "antd/lib/table";
export const formConfig = [
{
type: FormType.input,
label: "标签名称",
name: "tag_name",
value: "",
rules: [{ required: true, message: "标签名称不能为空!" }],
},
{
type: FormType.input,
label: "标签描述",
name: "tag_desc",
value: "",
rules: [{ required: true, message: "城市编码不能为空" }],
},
{
type: FormType.input,
label: "标签排序",
name: "tag_sort",
value: "1",
rules: [{ required: true, message: "标签排序不能为空" }],
},
];
export const columns: ColumnsType<UserDataType> = [
{
title: "标签名称",
dataIndex: "tag_name",
fixed: "left",
},
{
title: "标签描述",
dataIndex: "tag_desc",
},
{
title: "标签排序",
dataIndex: "tag_sort",
},
];

76
src/pages/sku/tag/index.tsx Normal file
View File

@ -0,0 +1,76 @@
import React from "react";
import { Button, Space, Modal, FormInstance } from "antd";
import { Store } from "antd/lib/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { columns, formConfig } from "./config";
import BTable from "@/components/b_table";
import SimpleForm from "@/components/form/simple_form";
const Tag = (props: Store) => {
const { tagStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [userId, setId] = useState<Number | null>(null);
const [record, setRecord] = useState<any>(null);
// 获取列表数据
useEffect(() => {
tagStore.getlist();
}, [tagStore]);
return (
<div className="contentBox">
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
<Button type="default" onClick={() => setIsModalOpen(true)}>
添加
</Button>
<BTable
store={tagStore}
scroll={{ x: "max-content" }}
columns={columns}
dataSource={tagStore.list}
deleteCallback={(record) => {
tagStore.deleteItem(record);
}}
editCallback={(record) => {
setIsModalOpen(true);
formRef.current?.setFieldsValue(record);
setRecord(record);
setId(record.id);
}}
/>
<Modal
title={!userId ? "添加" : "编辑"}
width={800}
open={isModalOpen}
afterClose={() => formRef.current?.resetFields()}
onOk={() => formRef.current?.submit()}
okText="确定"
cancelText="取消"
onCancel={() => {
setId(null);
setRecord(null);
setIsModalOpen(false);
}}
>
<SimpleForm
formName={"tag_form"}
formRef={formRef}
colProps={25}
onFinish={() => {
tagStore.add(formRef.current?.getFieldsValue())
setIsModalOpen(false);
}}
createCallback={() => {
formRef.current?.setFieldsValue(record);
}}
formDatas={formConfig as any}
></SimpleForm>
</Modal>
</Space>
</div>
);
};
export default inject("tagStore")(observer(Tag));

12
src/router/routers/sku_router.tsx
View File

@ -1,4 +1,3 @@
import Menu from "@/pages/rbac/menu";
export const sku = [
{
path: "/sku",
@ -9,7 +8,9 @@ export const sku = [
{
path: "/sku/list",
index: true,
element: <Menu />,
lazy: async () => ({
Component: (await import("@/pages/sku/sku")).default,
}),
},
{
path: "/sku/cat",
@ -32,6 +33,13 @@ export const sku = [
Component: (await import("@/pages/sku/brand")).default,
}),
},
{
path: "/sku/tag",
index: true,
lazy: async () => ({
Component: (await import("@/pages/sku/tag")).default,
}),
},
],
},
];

19
src/service/config.ts
View File

@ -15,14 +15,14 @@ class CityConfig {
}
class Skuconfig {
class SkuConfig {
static ADD: string = "/sku";
static EDIT: string = "/sku";
static LIST: string = "/sku/list";
static DELETE: string = "/sku";
}
class SkuCatconfig {
class SkuCatConfig {
static ADD: string = "/skuCat";
static EDIT: string = "/skuCat";
static LIST: string = "/skuCat/list";
@ -36,4 +36,17 @@ class Orderconfig {
static DELETE: string = "/order";
}
export { UserConfig, CityConfig, SkuCatconfig, Skuconfig, Orderconfig };
class TagConfig {
static ADD: string = "/tag";
static EDIT: string = "/tag";
static LIST: string = "/tag/list";
static DELETE: string = "/tag";
}
class SpecConfig {
static ADD: string = "/skuSpec";
static EDIT: string = "/skuSpec";
static LIST: string = "/skuSpec/list";
static DELETE: string = "/skuSpec";
}
export { UserConfig, CityConfig, SkuCatConfig, SkuConfig, Orderconfig, TagConfig, SpecConfig };

BIN
src/static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

10
src/store/index.ts
View File

@ -1,11 +1,19 @@
import usrStore from '@/store/user'
import cityStore from '@/store/city'
import orderStore from './order';
import tagStore from './tag';
import skuStore from './sku';
import skuCatStore from './skuCat';
import skuSpecStore from './skuSpec';
const store = {
usrStore,
cityStore,
orderStore
orderStore,
tagStore,
skuStore,
skuCatStore,
skuSpecStore
};
export default store;

13
src/store/sku.ts Normal file
View File

@ -0,0 +1,13 @@
import { makeObservable } from "mobx";
import BaseStore from "./baseStore";
import { UserDataType } from "@/model/userModel";
import { SkuConfig } from "@/service/config";
class SkuStore extends BaseStore<UserDataType> {
constructor() {
super(SkuConfig)
makeObservable(this, {})
}
}
const skuStore = new SkuStore();
export default skuStore;

13
src/store/skuCat.ts Normal file
View File

@ -0,0 +1,13 @@
import { makeObservable } from "mobx";
import BaseStore from "./baseStore";
import { UserDataType } from "@/model/userModel";
import { SkuCatConfig } from "@/service/config";
class SkuCatStore extends BaseStore<UserDataType> {
constructor() {
super(SkuCatConfig)
makeObservable(this, {})
}
}
const skuCatStore = new SkuCatStore();
export default skuCatStore;

13
src/store/skuSpec.ts Normal file
View File

@ -0,0 +1,13 @@
import { makeObservable } from "mobx";
import BaseStore from "./baseStore";
import { UserDataType } from "@/model/userModel";
import { SpecConfig } from "@/service/config";
class SkuSpecStore extends BaseStore<UserDataType> {
constructor() {
super(SpecConfig)
makeObservable(this, {})
}
}
const skuSpecStore = new SkuSpecStore();
export default skuSpecStore;

13
src/store/tag.ts Normal file
View File

@ -0,0 +1,13 @@
import { makeObservable } from "mobx";
import BaseStore from "./baseStore";
import { UserDataType } from "@/model/userModel";
import { TagConfig } from "@/service/config";
class TagStore extends BaseStore<UserDataType> {
constructor() {
super(TagConfig)
makeObservable(this, {})
}
}
const tagStore = new TagStore();
export default tagStore;