|
@@ -1,6 +1,207 @@
|
|
|
+import { BetaSchemaForm, PageContainer, ProFormInstance, useToken } from "@ant-design/pro-components"
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
+import { useModel } from "@umijs/max"
|
|
|
+import { JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal, useEffect, useMemo, useRef, useState } from "react"
|
|
|
+import { appRechargeTemplateList, appRechargeTemplateSave, appRechargeTemplateSwitch, appRechargeTemplateRemove, appRechargeTemplateUpdate, appRechargeTemplateInfo } from "@/services/miniApp/moduleConfig"
|
|
|
+import { Button, Card, Col, Empty, message, Modal, Row, Space } from "antd"
|
|
|
+import { DeleteOutlined, EditOutlined, ExclamationCircleFilled, PlusOutlined } from "@ant-design/icons"
|
|
|
+import formConfig from "./formConfig"
|
|
|
+import { Template } from "./template"
|
|
|
+import { createStyles } from "antd-style";
|
|
|
+const useStyles = createStyles(({ token }) => {
|
|
|
+ return {
|
|
|
+ active: {
|
|
|
+ position: 'relative',
|
|
|
+ "&::after": {
|
|
|
+ content: '""', // 修正了这里的拼写错误
|
|
|
+ display: "block",
|
|
|
+ opacity: 1,
|
|
|
+ border: '15px solid #1890ff',
|
|
|
+ borderBlockEnd: '15px solid transparent',
|
|
|
+ borderInlineStart: '15px solid transparent', // 修正了多余的分号
|
|
|
+ borderStartEndRadius: '6px',
|
|
|
+ position: 'absolute',
|
|
|
+ top: 0,
|
|
|
+ right: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+type DataItem = {
|
|
|
+ name: string;
|
|
|
+ state: string;
|
|
|
+};
|
|
|
+const Page: React.FC = () => {
|
|
|
+ let { token } = useToken()
|
|
|
+ let { initialState } = useModel("@@initialState")
|
|
|
+ let [open, setOpen] = useState<any>(null)
|
|
|
+ let [editValues, setEditValues] = useState<any>({})
|
|
|
+ let [activeT, setActiveT] = useState<any>()
|
|
|
+ let { styles } = useStyles()
|
|
|
+ let getList = useAjax((params) => appRechargeTemplateList(params))//获取模板列表
|
|
|
+ let add = useAjax((params) => appRechargeTemplateSave(params))//新增模板
|
|
|
+ let switchT = useAjax((params) => appRechargeTemplateSwitch(params))//切换模板
|
|
|
+ let editT = useAjax((params) => appRechargeTemplateUpdate(params))//编辑模板
|
|
|
+ let delT = useAjax((params) => appRechargeTemplateRemove(params))//删除模板
|
|
|
+ let infoT = useAjax((id) => appRechargeTemplateInfo(id))//模板详情
|
|
|
+ const formRef = useRef<ProFormInstance>();
|
|
|
+ let publicData = useMemo(() => {
|
|
|
+ return {
|
|
|
+ miniappId: initialState?.selectApp?.id || "",
|
|
|
+ distributorId: initialState?.currentUser?.distributorId,
|
|
|
+ appType: initialState?.selectApp?.appType || ""
|
|
|
+ }
|
|
|
+ }, [initialState?.selectApp, initialState?.currentUser?.distributorId])
|
|
|
+ // 获取表单数据
|
|
|
+ useEffect(() => {
|
|
|
+ getList.run(publicData).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ let activeObj = res?.data?.find((item: { activateTemplate: any }) => item.activateTemplate)
|
|
|
+ activeObj && setActiveT(activeObj.id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, [publicData])
|
|
|
+ // 提交表单
|
|
|
+ const submit = async (values: any) => {
|
|
|
+ let api = editValues?.id ? editT : add
|
|
|
+ if (!values.activateTemplate) {
|
|
|
+ values.activateTemplate = false
|
|
|
+ }
|
|
|
+ if (editValues?.id) {
|
|
|
+ values.id = editValues?.id
|
|
|
+ }
|
|
|
+ api.run({ ...values, ...publicData }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ getList.refresh()
|
|
|
+ message.success(values.id ? "编辑模板成功" : "新建模板成功!")
|
|
|
+ closeForm(false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 关闭表单弹窗和重置表单内容
|
|
|
+ const closeForm = (b: boolean, values?: any) => {
|
|
|
+ if (!b) {
|
|
|
+ setEditValues({})
|
|
|
+ formRef?.current?.resetFields?.()
|
|
|
+ setOpen(b)
|
|
|
+ } else {
|
|
|
+ setOpen(b)
|
|
|
+ if (values) {
|
|
|
+ infoT.run(values.id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ let data = { ...res.data, templateType: values.templateType + "" }
|
|
|
+ setEditValues(data)
|
|
|
+ formRef?.current?.setFieldsValue(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 模板切换
|
|
|
+ const switchTemplate = (id: any) => {
|
|
|
+ let params = { ...publicData, id }
|
|
|
+ Modal.confirm({
|
|
|
+ title: '切换充值模板',
|
|
|
+ content: '是否要切换为当前充值模板?',
|
|
|
+ icon: <ExclamationCircleFilled />,
|
|
|
+ okText: "切换",
|
|
|
+ onOk: () => {
|
|
|
+ switchT.run(params).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ setActiveT(id)
|
|
|
+ getList.refresh()
|
|
|
+ message.success("切换成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 模板删除
|
|
|
+ const delTemplate = (id: any) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '删除充值模板',
|
|
|
+ content: '是否要删除当前充值模板?',
|
|
|
+ icon: <ExclamationCircleFilled />,
|
|
|
+ okType: 'danger',
|
|
|
+ okText: "删除",
|
|
|
+ onOk: () => {
|
|
|
+ delT.run(id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ getList.refresh()
|
|
|
+ message.success("删除成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 获取模板详情
|
|
|
+ const getTemplateInfo = (id: any) => {
|
|
|
|
|
|
+ }
|
|
|
+ // 模板编辑
|
|
|
+ const editTemplate = (values: any) => {
|
|
|
+ console.log(values)
|
|
|
+
|
|
|
+ // Modal.confirm({
|
|
|
+ // title: '切换充值模板',
|
|
|
+ // content: '是否要切换为当前充值模板?',
|
|
|
+ // icon: <ExclamationCircleFilled />,
|
|
|
+ // onOk: () => {
|
|
|
+ // delT.run(id).then(res => {
|
|
|
+ // if (res.code === 200) {
|
|
|
+ // getList.refresh()
|
|
|
+ // message.success("删除成功")
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+ return <PageContainer
|
|
|
+ extra={getList?.data?.data?.length > 0 && <Button type="primary" onClick={() => { closeForm(true) }}><PlusOutlined />新增模板</Button>}
|
|
|
+ >
|
|
|
+ {/* 模板列表 */}
|
|
|
+ <Row gutter={[20, 20]}>
|
|
|
+ {
|
|
|
+ getList?.data?.data?.map((item: { id: Key | null | undefined; templateName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; rechargeConfigList: any[]; templateType: any; templateDescription: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined }) => {
|
|
|
+ return <Col key={item.id} style={{ cursor: 'pointer' }} onClick={() => { switchTemplate(item.id) }}>
|
|
|
+ <Card className={activeT === item.id ? styles.active : ""} style={{ background: activeT === item.id ? token.colorPrimaryBgHover : token.colorFillAlter }} hoverable>
|
|
|
+ <h3 style={{ fontSize: 16, fontWeight: 500, color: token.colorText, fontFamily: 'PingFang SC' }}>{item.templateName}</h3>
|
|
|
+ <Template list={item.rechargeConfigList} isVip={!!item.templateType} />
|
|
|
+ <p style={{ marginTop: 20, color: token.colorTextSecondary, fontSize: 12 }}>{item.templateDescription}</p>
|
|
|
+ <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}>
|
|
|
+ <Space>
|
|
|
+ <Button size='small' type='primary' onClick={(e) => { e.stopPropagation(); closeForm(true, item) }}><EditOutlined /></Button>
|
|
|
+ <Button size='small' type="primary" danger onClick={(e) => { e.stopPropagation(); delTemplate(item.id) }}><DeleteOutlined /></Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {
|
|
|
+ getList?.data?.data?.length === 0 && <div style={{ width: "100%", height: "100%", marginTop: "10%" }}><Empty description={<Space direction='vertical'><div>暂无模板数据</div><Button type="primary" onClick={() => { closeForm(true) }}><PlusOutlined />新增模板</Button></Space>} /></div>
|
|
|
+ }
|
|
|
+ </Row>
|
|
|
+ {/* 模板弹窗 */}
|
|
|
+ <BetaSchemaForm<DataItem>
|
|
|
+ title={editValues?.id ? "编辑模板" : '新建模板'}
|
|
|
+ formRef={formRef}
|
|
|
+ open={open}
|
|
|
+ onOpenChange={(b) => { !b && closeForm(b) }}
|
|
|
+ layoutType={"ModalForm"}
|
|
|
+ rowProps={{
|
|
|
+ gutter: [16, 16],
|
|
|
+ }}
|
|
|
+ colProps={{
|
|
|
+ span: 12,
|
|
|
+ }}
|
|
|
+ grid={true}
|
|
|
+ onFinish={submit}
|
|
|
+ columns={formConfig()}
|
|
|
+ loading={add?.loading}
|
|
|
+ />
|
|
|
+ </PageContainer>
|
|
|
|
|
|
-const Page:React.FC=()=>{
|
|
|
- return <>模块管理</>
|
|
|
}
|
|
|
export default Page
|