up

src/pages/RequirementAudits/detail.tsx

@@ -0,0 +1,169 @@
+import {
+  approvalSignNUsingPost,
+  approvalSignYUsingGet,
+  getRecordByBusinessIdAdminUsingGet,
+} from '@/services/pop-b2b2c/pbcBusinessApprovalController';
+import { ModalForm, ProCard, ProFormTextArea } from '@ant-design/pro-components';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Access, useAccess, useParams } from '@umijs/max';
+import { Button, Descriptions, Image, message } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+const Detail: React.FC<any> = () => {
+  const params = useParams();
+  const access: any = useAccess();
+
+  const [info, setInfo] = useState<API.PbcBusinessApproval>({});
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const getInfo = () => {
+    if (params.id) {
+      getRecordByBusinessIdAdminUsingGet({ businessId: parseInt(params.id) }).then((res) => {
+        if (res.retcode && res.data) {
+          setInfo(res.data);
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    getInfo();
+  }, []);
+
+  return (
+    <PageContainer
+      header={{
+        title: '',
+      }}
+      footer={
+        info.pbcBusinessApprovalResult === 0
+          ? [
+              <Button
+                key="back"
+                onClick={() => {
+                  history.back();
+                }}
+              >
+                返回
+              </Button>,
+              <Access key="no" accessible={access.approvalSign}>
+                <Button
+                  type="primary"
+                  danger
+                  onClick={() => {
+                    setIsModalOpen(true);
+                  }}
+                >
+                  审核驳回
+                </Button>
+              </Access>,
+              <Access key="pass" accessible={access.approvalSign}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    if (params.id) {
+                      approvalSignYUsingGet({ pbcId: parseInt(params.id) }).then((res) => {
+                        if (res.retcode) {
+                          message.success('审核通过');
+                          getInfo();
+                        } else {
+                          message.error(res.retmsg);
+                        }
+                      });
+                    }
+                  }}
+                >
+                  审核通过
+                </Button>
+              </Access>,
+            ]
+          : [
+              <Button
+                key="back"
+                onClick={() => {
+                  history.back();
+                }}
+              >
+                返回
+              </Button>,
+            ]
+      }
+    >
+      <ProCard style={{ marginBottom: 12 }}>
+        <Descriptions bordered title="基本信息" column={2}>
+          <Descriptions.Item label="商户名称">{info.pbcBusinessName}</Descriptions.Item>
+          <Descriptions.Item label="商户类别">{info.pbcBusinessType}</Descriptions.Item>
+          <Descriptions.Item label="联系人">{info.pbcBusinessContact}</Descriptions.Item>
+          <Descriptions.Item label="手机号">{info.pbcBusinessContactMobile}</Descriptions.Item>
+          <Descriptions.Item label="负责人">{info.pbcBusinessHead}</Descriptions.Item>
+          <Descriptions.Item label="负责人身份证号">{info.pbcBusinessHeadUserNo}</Descriptions.Item>
+          <Descriptions.Item label="身份证人像面">
+            <Image width={200} src={info.pbcBusinessHeadUserNoBackUrl} />
+          </Descriptions.Item>
+          <Descriptions.Item label="身份证国徽面">
+            <Image width={200} src={info.pbcBusinessHeadUserNoFrontUrl} />
+          </Descriptions.Item>
+        </Descriptions>
+      </ProCard>
+      <ProCard style={{ marginBottom: 12 }}>
+        <Descriptions bordered title="工商信息">
+          <Descriptions.Item label="法人">{info.pbcBusinessHead}</Descriptions.Item>
+          <Descriptions.Item label="法人身份证号">{info.pbcBusinessHeadUserNo}</Descriptions.Item>
+          <Descriptions.Item label="公司成立时间">{info.pbcBusinessStartDate}</Descriptions.Item>
+          <Descriptions.Item label="开户行">{info.pbcBusinessBank}</Descriptions.Item>
+          <Descriptions.Item label="收款账号" span={2}>
+            {info.pbcBusinessAccount}
+          </Descriptions.Item>
+          <Descriptions.Item label="经营范围" span={3}>
+            {info.pbcBusinessMainCategory}
+          </Descriptions.Item>
+          <Descriptions.Item label="营业执照" span={3}>
+            <Image width={200} src={info.pbcBusinessLicenseUrl} />
+          </Descriptions.Item>
+        </Descriptions>
+      </ProCard>
+      <ModalForm
+        title="填写驳回理由"
+        open={isModalOpen}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => setIsModalOpen(false),
+        }}
+        requiredMark={false}
+        width={500}
+        onFinish={async (value: any) => {
+          console.log(value);
+          if (params.id) {
+            await approvalSignNUsingPost({
+              pbcId: parseInt(params.id),
+              pbcBusinessApprovalRefusedReason: value.pbcBusinessApprovalRefusedReason,
+            }).then((res) => {
+              if (res.retcode) {
+                message.success('成功驳回');
+                getInfo();
+                setIsModalOpen(false);
+              } else {
+                message.error(res.retmsg);
+              }
+            });
+          }
+        }}
+      >
+        <ProFormTextArea
+          placeholder={'请输入驳回理由'}
+          label="驳回理由"
+          rules={[
+            {
+              required: true,
+              message: '驳回理由为必填项',
+            },
+          ]}
+          width="lg"
+          name="pbcBusinessApprovalRefusedReason"
+        />
+      </ModalForm>
+    </PageContainer>
+  );
+};
+
+export default Detail;

src/pages/RequirementAudits/index.tsx

@@ -0,0 +1,130 @@
+import React, { useRef, useState } from 'react';
+import { Button } from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import { queryAllRoleUsingPost } from '@/services/pop-b2b2c/pbcRoleController';
+import Constants from '@/constants';
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { handlePageQuery } from '@/utils/utils';
+import { pbcBusinessApprovalPageUsingPost } from '@/services/pop-b2b2c/pbcBusinessApprovalController';
+import { Link } from '@umijs/max';
+
+/**
+ * 查询表格
+ * @param param0
+ */
+const fetchData = async (params: API.PageVO) => {
+  const msg = await pbcBusinessApprovalPageUsingPost(params);
+  return {
+    data: msg.data?.records,
+    total: msg.data?.total,
+    success: msg.retcode,
+  } as any;
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const TableList: React.FC<{}> = () => {
+  const actionRef = useRef<ActionType>();
+  const [tabActiveKey, setTabActiveKey] = useState<string>('0')
+
+  const columns: ProColumns<API.PbcBusinessApproval>[] = [
+    {
+      title: '商户名称',
+      dataIndex: 'pbcBusinessName',
+    },
+    {
+      title: '联系人',
+      dataIndex: 'pbcBusinessContact',
+    },
+    {
+      title: '商户手机号',
+      dataIndex: 'pbcBusinessContactMobile',
+    },
+    {
+      title: '商户类别',
+      dataIndex: 'pbcBusinessType',
+      valueType: 'select',
+      valueEnum: Constants.pbcBusinessType
+    },
+    {
+      title: '主营品类',
+      dataIndex: 'pbcBusinessMainCategory',
+      ellipsis: true,
+      search: false,
+    },
+    {
+      title: '注册日期',
+      dataIndex: 'pbcCreateAt',
+      valueType: 'dateTimeRange',
+      render: (text, record) => record.pbcCreateAt
+    },
+    {
+      title: '状态',
+      dataIndex: 'pbcBusinessApprovalResult',
+      valueEnum: Constants.pbcBusinessApprovalResult,
+      search: false
+    },
+    {
+      title: '操作',
+      fixed: 'right',
+      valueType: 'option',
+      render: (text, record) => (
+        <span>
+          <Link to={'/audits/detail/' + record.pbcId}>详情</Link>
+        </span>
+      ),
+    },
+  ];
+  return (
+    <PageContainer
+      header={{
+        title: '',
+        breadcrumb: {},
+      }}
+      tabActiveKey={tabActiveKey}
+      onTabChange={(key) => setTabActiveKey(key)}
+      tabList={[
+        {
+          tab: "待审核",
+          key: "0"
+        },
+        {
+          tab: "审核通过",
+          key: "1"
+        },
+        {
+          tab: "审核驳回",
+          key: "2"
+        },
+      ]}
+    >
+      <ProTable<API.PbcBusinessApproval>
+        columns={columns}
+        actionRef={actionRef}
+        request={(param: any) => {
+          const queryParam = handlePageQuery(param);
+          return fetchData(queryParam);
+        }}
+        rowKey="pbcId"
+        size="small"
+        bordered
+        search={{
+          labelWidth: 'auto',
+          span: 6
+        }}
+        params={{ pbcBusinessApprovalResult: tabActiveKey }}
+        pagination={{
+          defaultPageSize: 20,
+          showSizeChanger: true,
+        }}
+        scroll={{
+          y: 'calc(100vh - 320px)',
+        }}
+        dateFormatter="string"
+        options={false}
+        toolBarRender={() => []}
+      />
+    </PageContainer>
+  );
+};
+
+export default TableList;

src/pages/TrainingClasses/add.tsx

@@ -11,29 +11,20 @@ import {
 import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Col, message, Row } from 'antd';
 import Upload, { RcFile } from 'antd/es/upload';
-import React, { useRef, useState  } from 'react';
+import React, { useRef  } from 'react';
 import { history } from '@umijs/max';
 import { getClassesTypeListForAdminUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesTypeController';
-import { addOrUpdateClassUsingPost, classDetailForAdminUsingGet } from '@/services/pop-b2b2c/pbcTrainingClassesController';
+import { addOrUpdateClassUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesController';
 
 
 const Detail: React.FC<any> = () => {
 
   const formRef = useRef<ProFormInstance>();
-  const [info, setInfo] = useState<API.PbcTrainingClassesPageDTO>()
 
   const onSave = () => {
     formRef.current?.submit()
   }
 
-  const getInfo = (id: number) => {
-    classDetailForAdminUsingGet({ pbcId: id }).then((res) => {
-      if (res.retcode && res.data) {
-        setInfo(res.data);
-      }
-    });
-  };
-
   const onSubmit = async (values: any) => {
 
     let pbcImages = ""
@@ -55,10 +46,7 @@ const Detail: React.FC<any> = () => {
     const msg = await addOrUpdateClassUsingPost(params)
     if (msg.retcode && msg.data) {
       message.success("创建成功！")
-      history.back();
+      history.replace('/training-classes/detail/' + msg.data.pbcId + "?isEdit=1");
-      if (msg.data.pbcId) {
-        getInfo(msg.data.pbcId)
-      }
       return true
     } else {
       message.error(msg.retmsg)

src/pages/TrainingClasses/detail.tsx

@@ -1,182 +1,562 @@
 import {
-  changeProductStateForAdminUsingGet,
+  ModalForm,
-  productDetailForAdminUsingGet,
+  ProCard,
-} from '@/services/pop-b2b2c/pbcProductController';
+  ProColumns,
-import { CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
+  ProForm,
-import { ProCard } from '@ant-design/pro-components';
+  ProFormDateTimeRangePicker,
+  ProFormDigit,
+  ProFormInstance,
+  ProFormSelect,
+  ProFormText,
+  ProFormUploadButton,
+  ProTable,
+} from '@ant-design/pro-components';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Access, useAccess, useParams } from '@umijs/max';
+import { Button, Col, message, Popconfirm, Row, Space } from 'antd';
-import { Button, Col, Descriptions, Image, message, Row, Tag } from 'antd';
+import Upload, { RcFile } from 'antd/es/upload';
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useState  } from 'react';
+import { Access, history, useAccess, useParams, useSearchParams } from '@umijs/max';
+import { getClassesTypeListForAdminUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesTypeController';
+import { addOrUpdateClassUsingPost, classDetailForAdminUsingGet } from '@/services/pop-b2b2c/pbcTrainingClassesController';
+import { addOrUpdateChapterUsingPost, removeChapterUsingGet } from '@/services/pop-b2b2c/pbcTrainingClassesChapterController';
+import { addOrUpdateVideoUsingPost, removeVideoUsingGet } from '@/services/pop-b2b2c/pbcTrainingClassesVideoController';
+
+/**
+ * 删除节点
+ * @param id
+ */
+const handleRemove = async (id?: number) => {
+  const hide = message.loading('正在删除');
+  if (!id) return false;
+
+  try {
+    const msg = await removeChapterUsingGet({
+      pbcId: id,
+    });
+    hide();
+    if (msg.retcode) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(msg.retmsg ?? '删除失败，请重试');
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+/**
+ * 删除节点
+ * @param id
+ */
+const handleRemoveVideo = async (id?: number) => {
+  const hide = message.loading('正在删除');
+  if (!id) return false;
+
+  try {
+    const msg = await removeVideoUsingGet({
+      pbcId: id,
+    });
+    hide();
+    if (msg.retcode) {
+      message.success('删除成功，即将刷新');
+    } else {
+      message.error(msg.retmsg ?? '删除失败，请重试');
+    }
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
 
 const Detail: React.FC<any> = () => {
   const params = useParams();
+  const [searchParams] = useSearchParams();
+
+  const isEdit: boolean = searchParams.get('isEdit') === '1'
   const access: any = useAccess();
 
-  const [info, setInfo] = useState<API.PbcProductVO>({});
+  const formRef = useRef<ProFormInstance>();
-  const [images, setImages] = useState<string[]>([]);
+  const formRef1 = useRef<ProFormInstance>();
-  const [detailImages, setDetailImages] = useState<string[]>([]);
+  const [info, setInfo] = useState<API.PbcTrainingClassesPageDTO>()
 
   const getInfo = () => {
     if (params.id) {
-      productDetailForAdminUsingGet({ productId: parseInt(params.id) }).then((res) => {
+      classDetailForAdminUsingGet({ pbcId: parseInt(params.id) }).then((res) => {
         if (res.retcode && res.data) {
           setInfo(res.data);
-          if (res.data.pbcProductImages) {
-            const arr = res.data.pbcProductImages.split(',');
-            setImages(arr);
-          }
-          if (res.data.pbcProductDetailImages) {
-            const arr = res.data.pbcProductDetailImages.split(',');
-            setDetailImages(arr);
-          }
         }
       });
     }
   };
 
-  useEffect(() => {
+  const onSave = () => {
-    getInfo();
+    formRef.current?.submit()
-  }, []);
+  }
+
+  const onSubmit = async (values: any) => {
+
+    let pbcImages = ""
+    if (values.pbcImages && values.pbcImages.length > 0) {
+      if (values.pbcImages[0].uid === '-1') {
+        pbcImages = values.pbcImages[0].url || '';
+      }
+      if (
+        values.pbcImages[0].response &&
+        values.pbcImages[0].response.retcode
+      ) {
+        pbcImages = values.pbcImages[0].response.data;
+      }
+    }
+    
+    const params1: API.PbcTrainingClasses_ = {
+      ...info?.pbcTrainingClasses,
+      ...values,
+      pbcImages,
+      pbcTrainingStartDatetime: values.pbcTrainingStartDatetime[0],
+      pbcTrainingEndDatetime: values.pbcTrainingStartDatetime[1]
+    }
+    const msg = await addOrUpdateClassUsingPost(params1)
+    if (msg.retcode) {
+      message.success("保存成功！")
+      return true
+    } else {
+      message.error(msg.retmsg)
+      return false
+    }
+  }
+
+  const [stepFormValues, setStepFormValues] = useState<API.PbcTrainingClassesChapter_>({});
+  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
+  const [stepFormValues1, setStepFormValues1] = useState<API.PbcTrainingClassesVideo_>({});
+  const [updateModalVisible1, handleUpdateModalVisible1] = useState<boolean>(false);
+
+  const columns: ProColumns<API.PbcTrainingClassesChapter_>[] = [
+    {
+      title: '课程目录',
+      dataIndex: 'pbcChapterName',
+      search: false,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'pbcCreateAt',
+      search: false
+    },
+    {
+      title: '操作',
+      fixed: 'right',
+      valueType: 'option',
+      render: (text, record) => (
+        <Space>
+          <Access key="config" accessible={access.productCategorySave}>
+            <Button
+              size="small"
+              type="link"
+              onClick={() => {
+                handleUpdateModalVisible(true);
+                setStepFormValues(record);
+              }}
+            >
+              编辑
+            </Button>
+          </Access>
+          <Access key="add" accessible={access.productCategorySave}>
+            <Button
+              size="small"
+              type="link"
+              onClick={() => {
+                if (params.id) {
+                  handleUpdateModalVisible1(true);
+                  setStepFormValues1({
+                    pbcId: undefined,
+                    pbcClassesId: record.pbcClassesId,
+                    pbcChapterId: record.pbcId
+                  });
+                }
+              }}
+            >
+              添加视频
+            </Button>
+          </Access>
+          <Access key="remove" accessible={access.productCategoryDelete}>
+            <Popconfirm
+              title={`确定需要删除该章节?`}
+              onConfirm={async () => {
+                const success = await handleRemove(record.pbcId);
+                if (success) getInfo();
+              }}
+            >
+              <Button size="small" type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </Access>
+        </Space>
+      ),
+    },
+  ];
+
+  const expandedRowRender = (row: API.PbcTrainingClassesChapter_) => {
+    return (
+      <ProTable
+        size='small'
+        rowKey="pbcId"
+        columns={[
+          { title: '视频名称', dataIndex: 'pbcVideoName' },
+          { title: '视频地址', dataIndex: 'pbcVideoAddress' },
+          { title: '创建时间', dataIndex: 'pbcCreateAt' },
+          {
+            title: '操作',
+            fixed: 'right',
+            valueType: 'option',
+            render: (text, record) => (
+              <Space>
+                <Access key="config" accessible={access.productCategorySave}>
+                  <Button
+                    size="small"
+                    type="link"
+                    onClick={() => {
+                      handleUpdateModalVisible1(true);
+                      setStepFormValues1(record);
+                    }}
+                  >
+                    编辑
+                  </Button>
+                </Access>
+                <Access key="remove" accessible={access.productCategoryDelete}>
+                  <Popconfirm
+                    title={`确定需要删除该视频?`}
+                    onConfirm={async () => {
+                      const success = await handleRemoveVideo(record.pbcId);
+                      if (success) getInfo();
+                    }}
+                  >
+                    <Button size="small" type="link" danger>
+                      删除
+                    </Button>
+                  </Popconfirm>
+                </Access>
+              </Space>
+            ),
+          },
+        ]}
+        headerTitle={false}
+        search={false}
+        options={false}
+        dataSource={row.videoList}
+        pagination={false}
+      />
+    );
+  };
 
   return (
     <PageContainer
       header={{
         title: '',
       }}
-      footer={
+      footer={[
-        info.pbcState !== 3
+        <Button
-          ? [
+          key="back"
-              <Button
+          onClick={() => {
-                key="back"
+            history.back();
-                onClick={() => {
+          }}
-                  history.back();
+        >
+          返回
+        </Button>,
+        <Button type="primary" key="submit" onClick={onSave}>
+          保存
+        </Button>
+      ]}
+    >
+      <ProForm layout="horizontal" labelAlign="left" request={async () => {
+        if (params.id) {
+          const msg = await classDetailForAdminUsingGet({ pbcId: parseInt(params.id) })
+          if (msg.retcode && msg.data) {
+            setInfo(msg.data);
+            return {
+              pbcClassesTypeName: msg.data.pbcTrainingClasses?.pbcClassesTypeName,
+              pbcTitle: msg.data.pbcTrainingClasses?.pbcTitle,
+              pbcClassesTypeId: msg.data.pbcTrainingClasses?.pbcClassesTypeId,
+              pbcClassesSubCount: msg.data.pbcTrainingClasses?.pbcClassesSubCount,
+              pbcImages: msg.data.pbcTrainingClasses?.pbcImages ? [{
+                uid: '-1',
+                name: msg.data.pbcTrainingClasses?.pbcImages.substring(msg.data.pbcTrainingClasses?.pbcImages.lastIndexOf('/') + 1),
+                status: 'done',
+                url: msg.data.pbcTrainingClasses?.pbcImages,
+              }] : [],
+              pbcTeachMethod: msg.data.pbcTrainingClasses?.pbcTeachMethod,
+              pbcTrainingStartDatetime: msg.data.pbcTrainingClasses?.pbcTrainingStartDatetime && msg.data.pbcTrainingClasses?.pbcTrainingEndDatetime ? [msg.data.pbcTrainingClasses?.pbcTrainingStartDatetime, msg.data.pbcTrainingClasses?.pbcTrainingEndDatetime] : [],
+            }
+          } else {
+            return {}
+          }
+        } else {
+          return {}
+        }
+      }} requiredMark={false} formRef={formRef} onFinish={onSubmit} readonly={!isEdit} submitter={false}>
+        <ProFormText name="pbcClassesTypeName" hidden />
+        <ProCard title="基本信息" style={{ marginBottom: 12 }}>
+          <Row gutter={20}>
+            <Col span={12}>
+              <ProFormText label="课程名称" name="pbcTitle" rules={[
+                { required: true, message: '请输入课程名称' },
+              ]} />
+            </Col>
+            <Col span={12}>
+              <ProFormSelect
+                label="课程类型"
+                name="pbcClassesTypeId"
+                rules={[
+                  { required: true, message: '请选择课程类型' }
+                ]}
+                request={ async () => {
+                  const msg = await getClassesTypeListForAdminUsingPost();
+                  if (msg.retcode && msg.data) {
+                    return msg.data;
+                  }
+                  return [];
                 }}
-              >
+                fieldProps={{ 
-                返回
+                  onChange(value, option: any) {
-              </Button>,
+                    console.log(option)
-              <Access key="no" accessible={access.productUpdateState}>
+                    formRef.current?.setFieldsValue({
-                <Button
+                      pbcClassesTypeName: option.label
-                  type="primary"
+                    })
-                  onClick={() => {
+                  },
-                    changeProductStateForAdminUsingGet({
+                  showSearch: true,
-                      pcbId: info.pbcId || 0,
+                  fieldNames: { label: 'pbcType', value: 'pbcId' }
-                      state: info.pbcState === 1 ? 2 : 1,
-                    }).then((res) => {
-                      if (res.retcode) {
-                        message.success(info.pbcState === 1 ? '已下架' : '已上架');
-                        getInfo();
-                      } else {
-                        message.error(res.retmsg);
-                      }
-                    });
-                  }}
-                >
-                  {info.pbcState === 1 ? '下架' : '上架'}
-                </Button>
-              </Access>,
-            ]
-          : [
-              <Button
-                key="back"
-                onClick={() => {
-                  history.back();
                 }}
-              >
+              />
-                返回
+            </Col>
-              </Button>,
+          </Row>
-            ]
+          <Row gutter={20}>
-      }
+            <Col span={12}>
-    >
+              <ProFormDigit label="总课次" name="pbcClassesSubCount" min={0} fieldProps={{ precision: 0 }} rules={[
-      <ProCard style={{ marginBottom: 12 }}>
+                { required: true, message: '请输入总课次' },
-        <Descriptions
+              ]} />
+            </Col>
+            <Col span={12}>
+              <ProFormUploadButton
+                label="课程缩略图"
+                name="pbcImages"
+                max={1}
+                fieldProps={{
+                  name: 'file',
+                  accept: 'image/*',
+                  multiple: true,
+                  headers: {
+                    authorization: localStorage.getItem('token') ?? '',
+                  },
+                  onChange: (info: any) => {
+                    switch (info.file.status) {
+                      case 'done':
+                        if (info.file.response.retcode === 0) {
+                          message.error(info.file.response.retmsg);
+                          formRef.current?.setFieldValue('pbcImages', [])
+                        }
+                        break;
+                      default:
+                        break;
+                    }
+                  },
+                  action: process.env.BASE_URL + '/oss/imgUpload',
+                  beforeUpload(file: RcFile) {
+                    const isLt10M = file.size / 1024 / 1024 < 10;
+                    if (!isLt10M) {
+                      message.error('图片大小不能超过10MB!');
+                    }
+                    return isLt10M || Upload.LIST_IGNORE;
+                  },
+                  onPreview: async (file) => {
+                    if (file.uid === '-1') {
+                      window.open(file.url);
+                    }
+                    if (file.response && file.response.retcode) {
+                      window.open(file.response.data);
+                    }
+                  },
+                  listType: 'picture-card',
+                }}
+                rules={[
+                  { required: true, message: '请上传课程缩略图' }
+                ]}
+              />
+            </Col>
+          </Row>
+          <Row gutter={20}>
+            <Col span={12}>
+              <ProFormSelect label="教学方式" name="pbcTeachMethod" options={['线上', '线下']} rules={[
+                { required: true, message: '请选择教学方式' },
+              ]} />
+            </Col>
+            <Col span={8}>
+              <ProFormDateTimeRangePicker label="培训时间" name="pbcTrainingStartDatetime" rules={[
+                { required: true, message: '请选择培训时间' },
+              ]} />
+            </Col>
+          </Row>
+        </ProCard>
+      </ProForm>
+      <ProCard title="课程详情">
+        <Access key="add" accessible={access.trainingClassesSave && isEdit}>
+          <Button type="primary" onClick={() => {
+            if (params.id) {
+              handleUpdateModalVisible(true);
+              setStepFormValues({
+                pbcId: undefined,
+                pbcClassesId: parseInt(params.id)
+              });
+            }
+          }}>新增章节</Button>
+        </Access>
+        <ProTable
           bordered
-          title={
+          size='small'
-            <>
+          rowKey="pbcId"
-              <span style={{ marginRight: 20 }}>基本信息</span>
+          columns={columns}
-              {info.pbcState === 1 ? (
+          dataSource={info?.chapterList}
-                <Tag icon={<CheckCircleOutlined />} color="success">
+          expandable={{ expandedRowRender }}
-                  上架中
+          search={false}
-                </Tag>
+          options={false}
-              ) : (
+          toolBarRender={() => []}
-                <Tag icon={<InfoCircleOutlined />} color="default">
+          pagination={false}
-                  已下架
+        />
-                </Tag>
-              )}
-            </>
-          }
-          column={3}
-        >
-          <Descriptions.Item label="名称">{info.pbcProductTitle}</Descriptions.Item>
-          <Descriptions.Item label="商品类目">
-            {info.pbcProductTopCategoryName}/{info.pbcProductParentCategoryName}/
-            {info.pbcProductCategoryName}
-          </Descriptions.Item>
-          <Descriptions.Item label="价格">¥{info.pbcProductPrice}</Descriptions.Item>
-          <Descriptions.Item label="颜色" span={3}>
-            <div style={{ display: 'flex', flexWrap: 'wrap', width: 1000 }}>
-              {info.colorDataList?.map((e) => (
-                <Row
-                  key={e.pbcId}
-                  style={{ width: 200, marginBottom: 10, marginRight: 20, alignItems: 'center' }}
-                  justify="space-evenly"
-                >
-                  <Col span={8}>{e.pbcCommonDataSystem}</Col>
-                  <Col span={8}>
-                    <Image width={100} src={e.pbcColorImageUrl} />
-                  </Col>
-                </Row>
-              ))}
-            </div>
-          </Descriptions.Item>
-          <Descriptions.Item label="相册图片" span={3}>
-            <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap' }}>
-              <Image.PreviewGroup>
-              {images.map((e) => (
-                <div key={e} style={{ marginBottom: 10, marginRight: 20 }}>
-                  <Image width={100} src={e} />
-                </div>
-              ))}
-              </Image.PreviewGroup>
-            </div>
-          </Descriptions.Item>
-          <Descriptions.Item label="详情图" span={3}>
-            <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap' }}>
-              <Image.PreviewGroup>
-                {detailImages.map((e) => (
-                  <div key={e} style={{ marginBottom: 10, marginRight: 20 }}>
-                    <Image width={100} src={e} />
-                  </div>
-                ))}
-              </Image.PreviewGroup>
-            </div>
-          </Descriptions.Item>
-          <Descriptions.Item label="规格" span={3}>
-            {info.productCommonDataList?.map((e) => (
-              <Row
-                key={e.pbcId}
-                style={{ width: 150, marginBottom: 10, marginRight: 20, alignItems: 'center' }}
-                justify="space-evenly"
-              >
-                <Col style={{ color: 'rgb(170, 170, 170)' }} span={8}>
-                  {e.pbcSystemName}
-                </Col>
-                <Col span={8}>
-                  {e.pbcSystemInputType === 'select'
-                    ? e.pbcCommonDataSystemValue
-                    : e.pbcCommonDataSystem}
-                </Col>
-              </Row>
-            ))}
-          </Descriptions.Item>
-          <Descriptions.Item label="详情描述" span={3}>
-            {info.pbcProductDetail}
-          </Descriptions.Item>
-          <Descriptions.Item label="可见范围" span={3}>
-            {info.pbcProductVipLevels}
-          </Descriptions.Item>
-        </Descriptions>
       </ProCard>
+
+      <ModalForm
+        title={stepFormValues.pbcId ? '编辑章节' : '新增章节'}
+        open={updateModalVisible}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => handleUpdateModalVisible(false),
+        }}
+        requiredMark={false}
+        width={500}
+        initialValues={{
+          pbcChapterName: stepFormValues.pbcChapterName
+        }}
+        onFinish={async (value: any) => {
+          if (params.id) {
+            await addOrUpdateChapterUsingPost({
+              ...stepFormValues,
+              pbcChapterName: value.pbcChapterName,
+            }).then((res) => {
+              if (res.retcode) {
+                message.success('保存成功');
+                getInfo();
+                handleUpdateModalVisible(false);
+              } else {
+                message.error(res.retmsg);
+              }
+            });
+          }
+        }}
+      >
+        <ProFormText
+          placeholder={'请输入章节名称'}
+          label="章节名称"
+          rules={[
+            {
+              required: true,
+              message: '章节名称为必填项',
+            },
+          ]}
+          width="lg"
+          name="pbcChapterName"
+        />
+      </ModalForm>
+      <ModalForm
+        title={stepFormValues1.pbcId ? '编辑视频' : '新增视频'}
+        open={updateModalVisible1}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => handleUpdateModalVisible1(false),
+        }}
+        requiredMark={false}
+        width={500}
+        initialValues={{
+          pbcVideoName: stepFormValues1.pbcVideoName,
+        }}
+        formRef={formRef1}
+        onFinish={async (value: any) => {
+          if (params.id) {
+            await addOrUpdateVideoUsingPost({
+              ...stepFormValues1,
+              pbcVideoName: value.pbcVideoName,
+            }).then((res) => {
+              if (res.retcode) {
+                message.success('保存成功');
+                getInfo();
+                handleUpdateModalVisible1(false);
+              } else {
+                message.error(res.retmsg);
+              }
+            });
+          }
+        }}
+      >
+        <ProFormText
+          placeholder={'请输入视频名称'}
+          label="视频名称"
+          rules={[
+            {
+              required: true,
+              message: '视频名称为必填项',
+            },
+          ]}
+          width="lg"
+          name="pbcVideoName"
+        />
+        <ProFormUploadButton
+          label="上传视频"
+          name="pbcVideoAddress"
+          max={1}
+          fieldProps={{
+            name: 'file',
+            accept: 'video/mp4',
+            multiple: true,
+            headers: {
+              authorization: localStorage.getItem('token') ?? '',
+            },
+            onChange: (info: any) => {
+              switch (info.file.status) {
+                case 'done':
+                  if (info.file.response.retcode === 0) {
+                    message.error(info.file.response.retmsg);
+                    formRef1.current?.setFieldValue('pbcVideoAddress', [])
+                  }
+                  break;
+                default:
+                  break;
+              }
+            },
+            action: process.env.BASE_URL + '/b2b2c/pbcTrainingClassesVideo/uploadVideoAndGetInfo',
+            onPreview: async (file) => {
+              if (file.uid === '-1') {
+                window.open(file.url);
+              }
+              if (file.response && file.response.retcode) {
+                window.open(file.response.data);
+              }
+            },
+            progress: {
+              strokeColor: {
+                '0%': '#108ee9',
+                '100%': '#87d068',
+              },
+              strokeWidth: 3,
+              format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,
+            },
+          }}
+          rules={[
+            { required: true, message: '请上传视频' },
+          ]}
+        />
+      </ModalForm>
     </PageContainer>
   );
 };

src/pages/TrainingClasses/index.tsx

@@ -137,7 +137,7 @@ const TableList: React.FC<{}> = () => {
           ]
         }}
         scroll={{
-          y: 'calc(100vh - 320px)',
+          y: 'calc(100vh - 380px)',
         }}
         dateFormatter="string"
         options={false}