增加 DiyModal 组件 用于 一站式1.0页面的 自定义弹窗

FormInsertDiy/ExportComponent/ActiveMenuComponent.js

@@ -18,6 +18,7 @@ import ApplyMerge from './ApplyMerge'; // merge
 import AuditMerge from './AuditMerge';
 import CheckRecordMerge from './CheckRecordMerge';
 import CreateC from './ContextCreate';
+import DiyModal from './DiyModal/index';
 
 window.iframeParentComponent = {
 	Modal,
@@ -55,7 +56,9 @@ function ActiveMenuComponent({ routerConfig, ...otherProps }) {
 
 	switch (component) {
 		case 'CheckRecord': // 查询类应用
-			Res = <CheckRecord workId={appId} />;
+			Res = <>
+        <CheckRecord workId={appId} />
+      </>;
 			break;
     case 'CheckRecordMerge': // 查询类应用聚合
       Res = <CheckRecordMerge routerConfig={routerConfig}/>;

FormInsertDiy/ExportComponent/DiyModal/ProgressDiy.js

+/**
+ * 解决黔南医保 批量审核时 数据量过大的问题.
+ * */
+import React, { useEffect, useState } from 'react';
+import SpinPercent from './SpinPercent';
+
+export default function ProgressDiy(props) {
+	const { componentProps } = props;
+	const [data, setData] = useState(componentProps.data || {});
+	const changeData = (newV) => {
+	  setData({
+      ...newV,
+    });
+  };
+
+	useEffect(() => {
+		if (componentProps) {
+			componentProps.changeData = changeData;
+		}
+	}, []);
+
+	useEffect(() => {
+	  if(data){
+      componentProps.data = data;
+    }
+  }, [data]);
+
+	console.log(data);
+	return (
+		<div>
+			<SpinPercent {...data} />
+		</div>
+	);
+}

FormInsertDiy/ExportComponent/DiyModal/SpinPercent.js

+/**
+ * 钟是志
+ * 2022年8月15日
+ * 百分比进度条组件 只负责渲染
+ * */
+import React, { useEffect, useState, useRef } from 'react';
+import { Spin, Progress } from 'antd';
+import styles from './styles.less';
+
+export default function SpinPercent(props) {
+  const {
+    loadingPercent = false,
+    percent,
+    status,
+    total,
+    speed,
+    message,
+  } = props;
+  if(loadingPercent){
+    return (
+      <div className={styles.juzhongSpin}>
+        <div style={{textAlign: 'center'}}>
+          <Progress type='circle'
+                    strokeColor={{
+                      '0%': '#108ee9',
+                      '100%': '#87d068',
+                    }}
+                    percent={percent}
+                    status={status}
+                    format={percent => `${speed}/${total}`}
+          />
+          <div className={styles.textCenter}>
+            {message}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return null;
+}

FormInsertDiy/ExportComponent/DiyModal/index.js

+import React, { useState, useEffect } from 'react';
+import { Modal, Progress, Button } from 'antd';
+import ProgressDiy from './ProgressDiy';
+
+const componentList = {
+  ProgressDiy,
+};
+
+export default function DiyModal(props) {
+  const [show, setShow] = useState(false);
+  const changeShow = (s) => {
+    setShow(s);
+  };
+  useEffect(() => {
+    console.log(112233);
+    window.showDiyModalInfo = {
+      // 对外暴露的接口.
+      open: () => {
+        changeShow(true);
+      },
+      close: () => {
+        changeShow(false);
+      },
+      ModalProps: {
+        title: '自定义弹框',
+        width: 1200,
+        bodyStyle: {
+          minHeight: '50vh',
+          overflowY: 'auto',
+        },
+        maskClosable: false,
+        onCancel: () => {
+          changeShow(false);
+        },
+        onOk: () => {
+          console.log('点击了确定按钮');
+        },
+      },
+      component: 'ProgressDiy',
+      componentProps: {},
+    };
+  }, []);
+
+  const Component = window.showDiyModalInfo && !!window.showDiyModalInfo.component
+    ? componentList[window.showDiyModalInfo.component]
+    : ProgressDiy;
+  return (
+    <div>
+      {
+        show &&
+        <Modal {...window.showDiyModalInfo?.ModalProps} visible={show}>
+          <Component componentProps={window.showDiyModalInfo.componentProps} />
+        </Modal>
+      }
+    </div>
+  );
+}

FormInsertDiy/ExportComponent/DiyModal/styles.less

+@color1: #d43d52;
+@color2: #2196F3;
+.basicTitle{
+  background: #fff;
+  padding: 5px;
+}
+.man{
+  color: @color2;
+}
+.woman{
+  color: @color1;
+}
+
+.bg-green{
+  background: #4daf61;
+  padding: 5px 10px;
+  color: white;
+}
+
+.header{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000;
+  background-color: #F0F0F0;
+  .activeH{
+    color: #FFFFFF;
+    background-color: #6066BA;
+  }
+  .normal{
+
+  }
+}
+.footer{
+  padding: 10px 0 0 0;
+  text-align: center;
+}
+
+.juzhongSpin{
+  min-height: 300px;
+  width: 100%;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.textCenter{
+  text-align: center;
+}

one_stop_public/libs/TableList.js

@@ -51,7 +51,7 @@ export default class TableList extends React.Component {
 
 	componentDidUpdate(prevProps, prevState) {
 		if (prevState?.columns !== this.state.columns) {
-		  console.log(prevState.columns, this.state.columns);
+		  // console.log(prevState.columns, this.state.columns);
 			this.setState(
 				{
 					showNo: true,

one_stop_public/libs/formList/index.js

@@ -293,7 +293,7 @@ class FormList extends React.Component {
 			if (Number(objCode) === 1) {
 				this.initColumn();
 			} else {
-			  console.log('componentDidMount-296');
+			  // console.log('componentDidMount-296');
 				dispatch({
 					type: 'DataObj/findByCode',
 					payload: { objCode: this.props.objCode },