fix

src/pages/MiniApp/BookManage/Short/formConfig.tsx

@@ -0,0 +1,91 @@
+import { convertEnumArr } from "@/utils";
+import { ProFormColumnsType } from "@ant-design/pro-components";
+
+function formConfig(props: { paragraphList?: any[], enumList?: { [key: string]: any }, paymentType: any[] }): ProFormColumnsType<{
+    name: string;
+    state: string;
+}>[] {
+    let { paragraphList, enumList, paymentType } = props
+    return [
+        {
+            title: '开始付费段落',
+            dataIndex: 'beginPayParagraphNo',
+            valueType: 'select',
+            valueEnum: { '0': "书币充值", '1': "vip充值" },
+            formItemProps: {
+                style: { marginBottom: 15 },
+                rules: [
+                    {
+                        required: true,
+                        message: '此项为必填项',
+                    },
+                ],
+            }
+        },
+        {
+            title: 'VIP阅读',
+            dataIndex: 'vipFree',
+            valueType: 'segmented',
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+            valueEnum: () => {
+                let arr = enumList?.VIP_FREE?.values
+                return arr ? new Map(arr?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: '付费方式',
+            dataIndex: 'paymentType',
+            valueType: 'checkbox',
+            fieldProps: {
+                onChange: (value) => {
+                    paymentType[1](value)
+                }
+            },
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+            valueEnum: () => {
+                let arr = enumList?.PAYMENT_TYPE?.values
+                let obj = {}
+                if (paymentType?.[0]?.includes('0')) {
+                    obj = { "1": { disabled: true }, '2': { disabled: true }, '3': { disabled: true } }
+                }
+                if (paymentType?.[0]?.join().match(/[123]/g)) {
+                    obj = { "0": { disabled: true } }
+                }
+                let enumObj = convertEnumArr(arr, obj)
+                return enumObj
+            }
+        },
+        {
+            title: '收费金额',
+            dataIndex: 'paymentAmount',
+            valueType: 'money',
+            hideInForm: !paymentType?.[0]?.includes('2'),
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        },
+        {
+            title: '收费书币',
+            dataIndex: 'paymentCoin',
+            valueType: 'digit',
+            hideInForm: !paymentType?.[0]?.join().match(/[13]/g),
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            valueType: 'textarea',
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        }
+    ]
+}
+
+export default formConfig

src/pages/MiniApp/BookManage/Short/index.tsx

@@ -1,11 +1,12 @@
-import { PageContainer, ProTable } from "@ant-design/pro-components"
+import { BetaSchemaForm, PageContainer, ProFormInstance, ProTable } from "@ant-design/pro-components"
 import { columns } from "./tableConfig"
 import { useAjax } from "@/Hook/useAjax"
 import { useModel } from "@umijs/max"
-import { shortBookInfoList, shortBookInfoParagraphList } from "@/services/miniApp/bookManage"
-import { useState } from "react"
+import { shortBookInfoList, shortBookInfoParagraphList, shortBookInfoBookConfig, shortBookInfoConfig, shortBookInfoParagraphAllList } from "@/services/miniApp/bookManage"
+import { useMemo, useRef, useState } from "react"
 import { Drawer } from "antd"
 import ReadText from "../components/readText"
+import formConfig from "./formConfig"
 const wordCountRanges: any = {
     "": { start: null, end: null }, // 全部
     "0-2": { start: 0, end: 2 * 10000 },
@@ -19,13 +20,31 @@ const wordCountRanges: any = {
     "200-300": { start: 200 * 10000, end: 300 * 10000 },
     "300-0": { start: 300 * 10000, end: null }, // 300万以上
 };
+type DataItem = {
+    name: string;
+    state: string;
+};
 const Page: React.FC = () => {
     let { initialState } = useModel("@@initialState")
     let { state } = useModel('global')
+    let [open, setOpen] = useState<any>(null)//付费配置
+    let [editValues, setEditValues] = useState<any>({})
+    let paymentType=useState([])
     const [openBook, setOpneBook] = useState<any>(null)//阅读小说
-    let getList = useAjax((params) => shortBookInfoList(params), { type: 'table' })
-    let getParagraphList = useAjax((params) => shortBookInfoParagraphList(params))
+    let getList = useAjax((params) => shortBookInfoList(params), { type: 'table' })//获取书列表
+    let getParagraphList = useAjax((params) => shortBookInfoParagraphList(params))//获取段落内容信息
+    let getParagraphAllList = useAjax((params) => shortBookInfoParagraphAllList(params))//获取全部段落
+    let add = useAjax((params) => shortBookInfoBookConfig(params))//新增配置
+    let configInfo = useAjax((params) => shortBookInfoConfig(params))//获取配置信息
+    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])
 
     // 看小说
     const lookBook = (params: any) => {
@@ -35,15 +54,53 @@ const Page: React.FC = () => {
             return res.data
         })
     }
+    // 提交表单
+    const submit = async (values: any) => {
+        if (!values.activateTemplate) {
+            values.activateTemplate = false
+        }
+        if (editValues?.id) {
+            values.id = editValues?.id
+        }
+        console.log(values)
+        // add.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 {
+            // 获取书全部段落
+            // getParagraphAllList.run(values.bookId).then(res => {
+            //     if (res.code === 200) {
+                    setOpen(b)//弹窗开启
+                    if (values) {
+                        // 获取书付费配置
+                        configInfo.run({ bookId: values.bookId, ...publicData }).then(res => {
+                            if (res.code === 200) {
+                                let data = { ...res.data }
+                                setEditValues(data)
+                                formRef?.current?.setFieldsValue(data)
+                            }
+                        })
+                    }
+                // }
+            // })
+        }
+    }
     return <PageContainer title={false}
         tabProps={{ type: 'card' }}
     >
         <ProTable<any, any>
-            params={{
-                miniappId: initialState?.selectApp?.id || "",
-                distributorId: initialState?.currentUser?.distributorId,
-                appType: initialState?.selectApp?.appType || ""
-            }}
+            params={publicData}
             headerTitle={"短篇小说列表"}
             rowKey={(r) => r.bookId}
             search={{
@@ -70,8 +127,22 @@ const Page: React.FC = () => {
             request={async (params) => {
                 return await getList.run(params)
             }}
-            columns={columns({ authList: state?.authList, enumList: state?.enumList,lookBook })}
-        // bordered
+            columns={columns({ authList: state?.authList, enumList: state?.enumList, lookBook, closeForm })}
+        />
+        {/* 付费配置 */}
+        <BetaSchemaForm<DataItem>
+            title={editValues?.id ? "编辑模板" : '新建模板'}
+            formRef={formRef}
+            open={open}
+            onOpenChange={(b) => { !b && closeForm(b) }}
+            layoutType={"ModalForm"}
+            labelCol={{span:6}}
+            wrapperCol={{span:14}}
+            // grid={true}
+            layout='horizontal'
+            onFinish={submit}
+            columns={formConfig({ enumList: state?.enumList,paymentType })}
+            loading={add?.loading}
         />
         {/* 阅读小说 */}
         <Drawer
@@ -84,7 +155,7 @@ const Page: React.FC = () => {
             // getContainer={false}
             bodyStyle={{ padding: 0 }}
             closeIcon={false}
-            title={<div style={{ fontSize: 20}}>{openBook?.bookName ? openBook?.bookName : ""}</div>}
+            title={<div style={{ fontSize: 20 }}>{openBook?.bookName ? openBook?.bookName : ""}</div>}
         >
             <ReadText data={openBook} next={lookBook} />
         </Drawer>

src/pages/MiniApp/BookManage/Short/tableConfig.tsx

@@ -21,8 +21,8 @@ const brightColors = [
     "#FF69B4", // 热粉红色
     "#FF1493"  // 深粉红色
 ];
-export const columns = (props: { authList?: any[], enumList?: { [key: string]: any }, lookBook: (data: any) => void }): ProColumns<any>[] => {
-    let { authList, enumList, lookBook } = props
+export const columns = (props: { authList?: any[], enumList?: { [key: string]: any }, lookBook: (data: any) => void ,closeForm:(b:boolean,d:any)=>void}): ProColumns<any>[] => {
+    let { authList, enumList, lookBook,closeForm } = props
     let { styles } = useStyles()
     return enumList?.BOOK_STATUS ? [
         {
@@ -190,7 +190,7 @@ export const columns = (props: { authList?: any[], enumList?: { [key: string]: a
             align: 'center',
             hideInSearch: true,
             render:(a:any,b:any)=>{
-                return <a>付费配置</a>
+                return <a onClick={()=>{ closeForm(true, b)}}>付费配置</a>
             }
         },
         // 搜索条件

src/utils/index.ts

@@ -10,4 +10,19 @@ export function getDescriptions(enumArr: any[], arr: any[]) {
     }, {});
     // 使用 arr2 中的 value 查找对应的 description
     return arr.map(value => valueToDescription[value]);
-}
+}
+/**传入数组枚举数组和key数组 找到在枚举数组中的description值
+ * @param {Array} enumArr 枚举数组
+ * @param {Array} customParams 要插入数据的目标可以不传  { 0: { disabled: true } } 第0个数据内插入disabled: true
+ * */ 
+export function convertEnumArr(enumArr: any, customParams:any = {}) {
+    let result:{[key:string]:{text:string,disabled?:boolean}} = {};
+    for (let item of enumArr) {
+        let newItem = { text: item.description };
+        if (customParams[item.value]) {
+            Object.assign(newItem, customParams[item.value]);
+        }
+        result[item.value] = newItem;
+    }
+    return result;
+}