diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 43cf849..581cb8e 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -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 (
-
logo
+
+ {/* */} +
} /> diff --git a/src/components/layout/layout_config.tsx b/src/components/layout/layout_config.tsx index baf51eb..059437a 100644 --- a/src/components/layout/layout_config.tsx +++ b/src/components/layout/layout_config.tsx @@ -34,6 +34,7 @@ export const items: ItemType[] = [ { key: "/sku/cat", label: `商品分类` }, { key: "/sku/spec", label: `商品规格` }, { key: "/sku/brand", label: `商品品牌` }, + { key: "/sku/tag", label: `标签管理` }, ], }, { diff --git a/src/pages/sku/cat/config.tsx b/src/pages/sku/cat/config.tsx new file mode 100644 index 0000000..75d2da9 --- /dev/null +++ b/src/pages/sku/cat/config.tsx @@ -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 = [ + { + title: "商品分类名称", + dataIndex: "name", + fixed: "left", + }, + { + title: "描述", + dataIndex: "remark", + }, + { + title: "排序", + dataIndex: "sort", + }, +]; diff --git a/src/pages/sku/cat/index.tsx b/src/pages/sku/cat/index.tsx index fc0a703..f1719df 100644 --- a/src/pages/sku/cat/index.tsx +++ b/src/pages/sku/cat/index.tsx @@ -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(false); + const formRef = React.useRef(null); + const [userId, setId] = useState(null); + const [record, setRecord] = useState(null); + + // 获取列表数据 + useEffect(() => { + skuCatStore.getlist(); + }, [skuCatStore]); + return ( -
- cat +
+ + + { + skuCatStore.deleteItem(record); + }} + editCallback={(record) => { + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }} + /> + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + okText="确定" + cancelText="取消" + onCancel={() => { + setId(null); + setRecord(null); + setIsModalOpen(false); + }} + > + { + skuCatStore.add(formRef.current?.getFieldsValue()) + setIsModalOpen(false); + }} + createCallback={() => { + formRef.current?.setFieldsValue(record); + }} + formDatas={formConfig as any} + > + +
); }; -export default Cat; +export default inject("skuCatStore")(observer(SkuCat)); diff --git a/src/pages/sku/sku/config.tsx b/src/pages/sku/sku/config.tsx new file mode 100644 index 0000000..688a374 --- /dev/null +++ b/src/pages/sku/sku/config.tsx @@ -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 = [ + { + 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", + }, +]; diff --git a/src/pages/sku/sku/index.tsx b/src/pages/sku/sku/index.tsx new file mode 100644 index 0000000..895cd0a --- /dev/null +++ b/src/pages/sku/sku/index.tsx @@ -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(false); + const formRef = React.useRef(null); + const [userId, setId] = useState(null); + const [record, setRecord] = useState(null); + + // 获取列表数据 + useEffect(() => { + skuStore.getlist(); + }, [skuStore]); + + return ( +
+ + + { + skuStore.deleteItem(record); + }} + editCallback={(record) => { + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }} + /> + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + okText="确定" + cancelText="取消" + onCancel={() => { + setId(null); + setRecord(null); + setIsModalOpen(false); + }} + > + { + skuStore.add(formRef.current?.getFieldsValue()) + setIsModalOpen(false); + }} + createCallback={() => { + formRef.current?.setFieldsValue(record); + }} + formDatas={formConfig as any} + > + + +
+ ); +}; + +export default inject("skuStore")(observer(Sku)); diff --git a/src/pages/sku/spec/config.tsx b/src/pages/sku/spec/config.tsx new file mode 100644 index 0000000..a57121a --- /dev/null +++ b/src/pages/sku/spec/config.tsx @@ -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 = [ + { + title: "规格名称", + dataIndex: "spec_name", + fixed: "left", + }, + { + title: "规格描述", + dataIndex: "spec_remark", + }, + { + title: "规格排序", + dataIndex: "spec_sort", + }, +]; diff --git a/src/pages/sku/spec/index.tsx b/src/pages/sku/spec/index.tsx index 1fb3d29..15c5ba8 100644 --- a/src/pages/sku/spec/index.tsx +++ b/src/pages/sku/spec/index.tsx @@ -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(false); + const formRef = React.useRef(null); + const [userId, setId] = useState(null); + const [record, setRecord] = useState(null); + + // 获取列表数据 + useEffect(() => { + skuSpecStore.getlist(); + }, [skuSpecStore]); + return ( -
- cat +
+ + + { + skuSpecStore.deleteItem(record); + }} + editCallback={(record) => { + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }} + /> + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + okText="确定" + cancelText="取消" + onCancel={() => { + setId(null); + setRecord(null); + setIsModalOpen(false); + }} + > + { + skuSpecStore.add(formRef.current?.getFieldsValue()) + setIsModalOpen(false); + }} + createCallback={() => { + formRef.current?.setFieldsValue(record); + }} + formDatas={formConfig as any} + > + +
); }; -export default Spec; +export default inject("skuSpecStore")(observer(SkuSpec)); diff --git a/src/pages/sku/tag/config.tsx b/src/pages/sku/tag/config.tsx new file mode 100644 index 0000000..ce08d20 --- /dev/null +++ b/src/pages/sku/tag/config.tsx @@ -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 = [ + { + title: "标签名称", + dataIndex: "tag_name", + fixed: "left", + }, + { + title: "标签描述", + dataIndex: "tag_desc", + }, + { + title: "标签排序", + dataIndex: "tag_sort", + }, +]; diff --git a/src/pages/sku/tag/index.tsx b/src/pages/sku/tag/index.tsx new file mode 100644 index 0000000..92bc067 --- /dev/null +++ b/src/pages/sku/tag/index.tsx @@ -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(false); + const formRef = React.useRef(null); + const [userId, setId] = useState(null); + const [record, setRecord] = useState(null); + + // 获取列表数据 + useEffect(() => { + tagStore.getlist(); + }, [tagStore]); + + return ( +
+ + + { + tagStore.deleteItem(record); + }} + editCallback={(record) => { + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }} + /> + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + okText="确定" + cancelText="取消" + onCancel={() => { + setId(null); + setRecord(null); + setIsModalOpen(false); + }} + > + { + tagStore.add(formRef.current?.getFieldsValue()) + setIsModalOpen(false); + }} + createCallback={() => { + formRef.current?.setFieldsValue(record); + }} + formDatas={formConfig as any} + > + + +
+ ); +}; + +export default inject("tagStore")(observer(Tag)); diff --git a/src/router/routers/sku_router.tsx b/src/router/routers/sku_router.tsx index 215bbf7..47ecf10 100644 --- a/src/router/routers/sku_router.tsx +++ b/src/router/routers/sku_router.tsx @@ -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: , + 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, + }), + }, ], }, ]; diff --git a/src/service/config.ts b/src/service/config.ts index eea0a70..9ab5805 100644 --- a/src/service/config.ts +++ b/src/service/config.ts @@ -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 }; \ No newline at end of file +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 }; \ No newline at end of file diff --git a/src/static/favicon.png b/src/static/favicon.png new file mode 100644 index 0000000..311a064 Binary files /dev/null and b/src/static/favicon.png differ diff --git a/src/store/index.ts b/src/store/index.ts index e8a5ed6..f2b3b4d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -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; \ No newline at end of file diff --git a/src/store/sku.ts b/src/store/sku.ts new file mode 100644 index 0000000..543270d --- /dev/null +++ b/src/store/sku.ts @@ -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 { + constructor() { + super(SkuConfig) + makeObservable(this, {}) + } +} +const skuStore = new SkuStore(); +export default skuStore; \ No newline at end of file diff --git a/src/store/skuCat.ts b/src/store/skuCat.ts new file mode 100644 index 0000000..ec37c5d --- /dev/null +++ b/src/store/skuCat.ts @@ -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 { + constructor() { + super(SkuCatConfig) + makeObservable(this, {}) + } +} +const skuCatStore = new SkuCatStore(); +export default skuCatStore; \ No newline at end of file diff --git a/src/store/skuSpec.ts b/src/store/skuSpec.ts new file mode 100644 index 0000000..e81bcc2 --- /dev/null +++ b/src/store/skuSpec.ts @@ -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 { + constructor() { + super(SpecConfig) + makeObservable(this, {}) + } +} +const skuSpecStore = new SkuSpecStore(); +export default skuSpecStore; \ No newline at end of file diff --git a/src/store/tag.ts b/src/store/tag.ts new file mode 100644 index 0000000..3e1d3d1 --- /dev/null +++ b/src/store/tag.ts @@ -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 { + constructor() { + super(TagConfig) + makeObservable(this, {}) + } +} +const tagStore = new TagStore(); +export default tagStore; \ No newline at end of file