From c44f99684b21b401b036a49f5a271b0709b1dcab Mon Sep 17 00:00:00 2001 From: wang_yp Date: Tue, 23 Apr 2024 17:58:53 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AA=A8=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BTable.tsx | 38 +++-- src/components/form/simple_form.tsx | 7 +- src/components/menu/app.tsx | 2 +- src/index.less | 9 +- src/pages/activeType/index.tsx | 61 ++++---- src/pages/app/app-config.tsx | 42 +++++ src/pages/app/app-list.tsx | 157 +++++++++++++++++++ src/pages/app/config/im-config.tsx | 20 +++ src/pages/app/config/pay-config.tsx | 110 +++++++++++++ src/pages/app/config/push-config.tsx | 222 +++++++++++++++++++++++++++ src/pages/app/index.tsx | 168 +------------------- src/pages/dymiticState/index.tsx | 5 +- src/router/routers/app.tsx | 31 +++- src/service/apiConfig/appConfig.ts | 10 +- src/store/appStore/index.ts | 12 +- src/store/baseStore.ts | 8 +- src/store/system/index.ts | 2 +- 17 files changed, 672 insertions(+), 232 deletions(-) create mode 100644 src/pages/app/app-config.tsx create mode 100644 src/pages/app/app-list.tsx create mode 100644 src/pages/app/config/im-config.tsx create mode 100644 src/pages/app/config/pay-config.tsx create mode 100644 src/pages/app/config/push-config.tsx diff --git a/src/components/BTable.tsx b/src/components/BTable.tsx index fa24886..cc31822 100644 --- a/src/components/BTable.tsx +++ b/src/components/BTable.tsx @@ -1,4 +1,4 @@ -import { PaginationProps, Table } from "antd"; +import { Pagination, PaginationProps, Table } from "antd"; import { useState } from "react"; const BTable = (props: any) => { const { store, dataSource } = props; @@ -24,21 +24,27 @@ const BTable = (props: any) => { }); }; return ( - + <> +
+
+ +
+ ); }; diff --git a/src/components/form/simple_form.tsx b/src/components/form/simple_form.tsx index 40c8143..be61fae 100644 --- a/src/components/form/simple_form.tsx +++ b/src/components/form/simple_form.tsx @@ -6,7 +6,6 @@ import AliUpload from "../aliUpload"; const { TextArea } = Input; const SimpleForm = (props: SimpleFormData) => { const [form] = Form.useForm(); - const { RangePicker } = DatePicker; const onFinish = (values: any) => { props.onFinish(values); }; @@ -21,9 +20,10 @@ const SimpleForm = (props: SimpleFormData) => { name={props.formName} ref={props.formRef} form={form} + labelCol={{ span: 4 }} + wrapperCol={{ span: 8 }} + layout="horizontal" initialValues={{ menubar: true }} - labelCol={{ span: props.colProps }} - wrapperCol={{ span: 16 }} onFinish={onFinish} autoComplete="on" > @@ -36,6 +36,7 @@ const SimpleForm = (props: SimpleFormData) => { label={v.label} name={v.name} rules={v.rules} + > diff --git a/src/components/menu/app.tsx b/src/components/menu/app.tsx index b793a63..3623338 100644 --- a/src/components/menu/app.tsx +++ b/src/components/menu/app.tsx @@ -8,7 +8,7 @@ const appMenu = { label: "app管理", children: [ { - key: "/app-list", + key: "/app/list", icon: , label: "app列表", }, diff --git a/src/index.less b/src/index.less index 06360bd..ba5b266 100644 --- a/src/index.less +++ b/src/index.less @@ -10,7 +10,14 @@ body { #root{ height: 100%; } - +.projectContent { + box-sizing: border-box; + margin: 10px; + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/src/pages/activeType/index.tsx b/src/pages/activeType/index.tsx index df3ac16..f960015 100644 --- a/src/pages/activeType/index.tsx +++ b/src/pages/activeType/index.tsx @@ -17,15 +17,8 @@ const ActiveType = (props: Store) => { const [record, setRecord] = useState(null); const [userId, setId] = useState(null); const columns: ColumnsType = [ - { - title: "类型名称", - dataIndex: "name", - }, - { - title: "类型描述", - dataIndex: "desc", - }, - + { title: "类型名称", dataIndex: "name" }, + { title: "类型描述", dataIndex: "desc" }, { title: "操作", dataIndex: "id", @@ -36,32 +29,41 @@ const ActiveType = (props: Store) => {
- - - + +
), }, ]; + const EditBtn = () => { + return ( + + ); + }; + const DeBtn = () => { + return ( + + ); + }; const edit = (record) => { record = { ...record, @@ -84,6 +86,7 @@ const ActiveType = (props: Store) => { } setIsModalOpen(false); }; + useEffect(() => { activityTypeStore.getlist(UserConfig.LIST); }, [activityTypeStore]); diff --git a/src/pages/app/app-config.tsx b/src/pages/app/app-config.tsx new file mode 100644 index 0000000..0b67150 --- /dev/null +++ b/src/pages/app/app-config.tsx @@ -0,0 +1,42 @@ +import { Space, Tabs, TabsProps } from "antd"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; +import { Store } from "antd/lib/form/interface"; +import PayConfig from "./config/pay-config"; +import PushConfig from "./config/push-config"; +import ImConfig from "./config/im-config"; +import React from "react"; +const AppManageConfig = (props: Store) => { + const { appStore } = props; + + useEffect(() => {}, []); + const items: TabsProps["items"] = [ + { + key: "1", + label: "支付配置", + children: + }, + { + key: "2", + label: "推送配置", + children: + }, + { + key: "3", + label: "im配置", + children: + }, + ]; + const onChange = (key: string) => { + console.log(key); + }; + return ( +
+ + + +
+ ); +}; + +export default inject("appStore")(observer(AppManageConfig)); diff --git a/src/pages/app/app-list.tsx b/src/pages/app/app-list.tsx new file mode 100644 index 0000000..792e96d --- /dev/null +++ b/src/pages/app/app-list.tsx @@ -0,0 +1,157 @@ +import { Space, Button, FormInstance } from "antd"; +import { inject, observer } from "mobx-react"; +import type { ColumnsType } from "antd/es/table"; +import BTable from "@/components/BTable"; +import { useEffect, useState } from "react"; +import UserConfig from "@/service/apiConfig/userConfig"; +import { UserDataType } from "@/model/userModel"; +import { Store } from "antd/lib/form/interface"; +import Modal from "antd/lib/modal/Modal"; +import SimpleForm from "@/components/form/simple_form"; +import React from "react"; +import { useNavigate } from "react-router"; +const AppManageList = (props: Store) => { + const { appStore } = props; + const navigate = useNavigate(); + const [id, setId] = useState(null); + const [projectConfig, setProjectConfig] = useState([]); + const [record, setRecord] = useState(null); + const formRef = React.useRef(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const columns: ColumnsType = [ + { title: "app名称", dataIndex: "appName" }, + { title: "图标", dataIndex: "appIcon" }, + { title: "预览图片", dataIndex: "activeIcon" }, + { + title: "操作", + dataIndex: "id", + ellipsis: { + showTitle: false, + }, + render: (any, record) => ( +
+ + + + + + + +
+ ), + }, + ]; + const edit = (record) => { + setProjectConfig(defaultConfig); + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }; + const defaultConfig = [ + { + type: "input", + label: "app名称", + name: "appName", + value: "", + rules: [{ required: true, message: "请输入卡片名称!" }], + }, + { + type: "upload", + label: "icon", + name: "appIcon", + value: [], + }, + { + type: "upload", + label: "图片", + name: "photosIds", + value: [], + }, + ]; + useEffect(() => { + appStore.getlist(UserConfig.LIST); + }, [appStore]); + const onFinish = (values: any) => { + let ids = values.photosIds.map((item) => { + return item.id; + }); + let appIcon = values.appIcon.map((item) => { + return item.id; + }); + console.log(values); + values = { + ...values, + photosIds: ids.join(","), + appIcon: appIcon.join(","), + }; + if (!id) { + appStore.add(values); + } else { + appStore.putItem(id, values); + } + setIsModalOpen(false); + }; + const onFinishFailed = () => {}; + return ( +
+ + setIsModalOpen(false)} + afterClose={() => formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + > + { + formRef.current?.setFieldsValue(record); + }} + formName="card_basic" + colProps={4} + subBtnName="提交" + formDatas={projectConfig} + onFinish={onFinish} + initialValues={true} + onFinishFailed={onFinishFailed} + /> + + + + +
+ ); +}; + +export default inject("appStore")(observer(AppManageList)); diff --git a/src/pages/app/config/im-config.tsx b/src/pages/app/config/im-config.tsx new file mode 100644 index 0000000..b634984 --- /dev/null +++ b/src/pages/app/config/im-config.tsx @@ -0,0 +1,20 @@ +import { Space } from "antd"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; +import { Store } from "antd/lib/form/interface"; +const ImConfig = (props: Store) => { + const { appStore } = props; + useEffect(() => { + console.log("im"); + }, []); + + return ( +
+ + im配置 + +
+ ); +}; + +export default inject("appStore")(observer(ImConfig)); diff --git a/src/pages/app/config/pay-config.tsx b/src/pages/app/config/pay-config.tsx new file mode 100644 index 0000000..0792a44 --- /dev/null +++ b/src/pages/app/config/pay-config.tsx @@ -0,0 +1,110 @@ +import { Space } from "antd"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; +import { Store } from "antd/lib/form/interface"; +import SimpleForm from "@/components/form/simple_form"; +const PayConfig = (props: Store) => { + const { appStore } = props; + useEffect(() => {}, []); + const onFinishFailed = () => {}; + const onFinish = (values: any) => { + let ids = values.photosIds.map((item) => { + return item.id; + }); + let appIcon = values.appIcon.map((item) => { + return item.id; + }); + console.log(values); + values = { + ...values, + photosIds: ids.join(","), + appIcon: appIcon.join(","), + }; + }; + return ( +
+ +
+

微信支付

+ +
+
+

支付宝支付

+ +
+ +
+ ); +}; + +export default inject("appStore")(observer(PayConfig)); diff --git a/src/pages/app/config/push-config.tsx b/src/pages/app/config/push-config.tsx new file mode 100644 index 0000000..258bb9a --- /dev/null +++ b/src/pages/app/config/push-config.tsx @@ -0,0 +1,222 @@ +import { Button, FormInstance, Space } from "antd"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; +import { Store } from "antd/lib/form/interface"; +import SimpleForm from "@/components/form/simple_form"; +import React from "react"; +import { useParams } from "react-router"; +const PushConfig = (props: Store) => { + const { appStore } = props; + const { id } = useParams(); + const hwformRef = React.useRef(null); + const iosformRef = React.useRef(null); + const opformRef = React.useRef(null); + const vivoformRef = React.useRef(null); + const xmformRef = React.useRef(null); + + useEffect(() => { + appStore.getIosConfig(id) + }, [appStore, id]); + + const onFinishFailed = () => {}; + + const iosOnFinish = (values: any) => { + console.log(values); + appStore.setIosConfig(id,values) + }; + const xmOnFinish = (values: any) => {}; + const hwOnFinish = (values: any) => {}; + const oppoOnFinish = (values: any) => {}; + const vivoOnFinish = (values: any) => {}; + return ( +
+ +
+
+

苹果推送

+ +
+ +
+
+
+

华为推送

+ +
+ +
+
+
+

oppo推送

+ +
+ + +
+
+
+

vivo推送

+ +
+ +
+
+
+

小米推送

+ +
+ +
+ +
+ ); +}; + +export default inject("appStore")(observer(PushConfig)); diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index 17f14c6..1d6d098 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -1,170 +1,10 @@ -import { Tooltip, Space, Button, FormInstance } from "antd"; -import { inject, observer } from "mobx-react"; -import type { ColumnsType } from "antd/es/table"; -import BTable from "@/components/BTable"; -import { useEffect, useState } from "react"; -import UserConfig from "@/service/apiConfig/userConfig"; -import { UserDataType } from "@/model/userModel"; -import { Store } from "antd/lib/form/interface"; -import Modal from "antd/lib/modal/Modal"; -import SimpleForm from "@/components/form/simple_form"; -import React from "react"; -const AppManage = (props: Store) => { - const { appStore } = props; - const [id, setId] = useState(null); - const [projectConfig, setProjectConfig] = useState([]); - const [record, setRecord] = useState(null); - const formRef = React.useRef(null); - const [isModalOpen, setIsModalOpen] = useState(false); - const columns: ColumnsType = [ - { - title: "app名称", - dataIndex: "appName", - }, - { - title: "图标", - dataIndex: "appIcon", - }, - { - title: "预览图片", - dataIndex: "activeIcon", - ellipsis: { - showTitle: false, - }, - render: (address) => ( - - {address} - - ), - }, - { - title: "操作", - dataIndex: "id", - ellipsis: { - showTitle: false, - }, - render: (any, record) => ( -
- - - - {/* */} - - - -
- ), - }, - ]; - const edit = (record) => { - setProjectConfig(defaultConfig); - setIsModalOpen(true); - formRef.current?.setFieldsValue(record); - setRecord(record); - setId(record.id); - }; - const defaultConfig = [ - { - type: "input", - label: "app名称", - name: "appName", - value: "", - rules: [{ required: true, message: "请输入卡片名称!" }], - }, - { - type: "upload", - label: "icon", - name: "appIcon", - value: [], - }, - { - type: "upload", - label: "图片", - name: "photosIds", - value: [], - }, - ]; - useEffect(() => { - appStore.getlist(UserConfig.LIST); - }, [appStore]); - const onFinish = (values: any) => { - let ids = values.photosIds.map((item) => { - return item.id; - }); - let appIcon = values.appIcon.map((item) => { - return item.id; - }); - console.log(values); - values = { - ...values, - photosIds: ids.join(","), - appIcon: appIcon.join(","), - }; - if (!id) { - appStore.add(values); - } else { - appStore.putItem(id, values); - } - setIsModalOpen(false); - }; - const onFinishFailed = () => {}; +import { Outlet } from "react-router"; +const AppManage = () => { return (
- - setIsModalOpen(false)} - afterClose={() => formRef.current?.resetFields()} - onOk={() => formRef.current?.submit()} - > - { - formRef.current?.setFieldsValue(record); - }} - formName="card_basic" - colProps={4} - subBtnName="提交" - formDatas={projectConfig} - onFinish={onFinish} - initialValues={true} - onFinishFailed={onFinishFailed} - /> - - - - +
); }; -export default inject("appStore")(observer(AppManage)); +export default AppManage; diff --git a/src/pages/dymiticState/index.tsx b/src/pages/dymiticState/index.tsx index f070a6b..8a5ab76 100644 --- a/src/pages/dymiticState/index.tsx +++ b/src/pages/dymiticState/index.tsx @@ -17,7 +17,7 @@ const DymiticState = (props: Store) => { { title: "操作", dataIndex: "id", render: (id: any) => render(id) }, ]; const render = (id) => ( -
+