28471 批量审核加一个进度条

FormInsertDiy/AuditButton/index.js

@@ -6,33 +6,46 @@
  * callback 提交完成后执行回调函数
  * form form表单控件
  */
-import React, { useState } from "react";
-import { Modal, message } from "antd";
-import { preHandle } from "@/webPublic/one_stop_public/utils/myutils";
-import { connect } from "dva";
-import Btn from "./pagesBtn";
-import styles from "./styles.less";
-import ModalDiy from "@/baseComponent/ModalDiy";
-import { callbackSubmitData } from "@/webPublic/one_stop_public/models/callbackExamineProcess";
-import { getToken } from "@/utils/authority";
-import { isJSON } from "@/webPublic/zyd_public/utils/utils";
-import { uaaRequest } from "@/webPublic/one_stop_public/utils/request";
+import React, { useState } from 'react';
+import { Modal, message } from 'antd';
+import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
+import { connect } from 'dva';
+import Btn from './pagesBtn';
+import styles from './styles.less';
+import ModalDiy from '@/baseComponent/ModalDiy';
+import { callbackSubmitData } from '@/webPublic/one_stop_public/models/callbackExamineProcess';
+import { getToken } from '@/utils/authority';
+import { isJSON } from '@/webPublic/zyd_public/utils/utils';
+import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
+import AuditProcessOneByOne
+  from '@/webPublic/FormInsertDiy/AuditButton/pagesBtn/AuditProcessOneByOne';
 
 function AuditButton(props) {
   const [visible, setVisible] = useState(false);
-  const [modalContent, setModalContent] = useState("");
+  const [modalContent, setModalContent] = useState('');
   const [isSubmitLoading, setSubmitLoading] = useState(false);
   const [affairOkParams, setAffairParams] = useState({});
+  const [showProcessModal, setShowProcessModal] = useState(false); // 增加进度条 1条数据1条数据的调用接口
+  const { callback } = props;
 
   function affairOk() {
     // 有taskIds属性时，是批量审核，
-    const { dispatch, callback, data, form, taskIds, selectRows } = props;
-    const { oldKey, btnValue } = affairOkParams;
-    if (window.stuSigningAuditXueShengChu && btnValue === "0") {
+    const {
+      dispatch,
+      data,
+      form,
+      taskIds,
+      selectRows
+    } = props;
+    const {
+      oldKey,
+      btnValue
+    } = affairOkParams;
+    if (window.stuSigningAuditXueShengChu && btnValue === '0') {
       // 黔南就业学生处批量审批签章 特殊处理 专门为黔南签章批量审核搞的函数
       // 应该是点击同意才执行这个全局函数.
       window.stuSigningAuditXueShengChu({
-        userNowInfo: (isJSON(localStorage.getItem("user")) && JSON.parse(localStorage.getItem("user"))) || {},
+        userNowInfo: (isJSON(localStorage.getItem('user')) && JSON.parse(localStorage.getItem('user'))) || {},
         buttonInfo: data?.btns && data?.btns.length ? data?.btns.find((x) => x.value === btnValue) : {},
         token: getToken(),
         selectRows,
@@ -51,14 +64,14 @@ function AuditButton(props) {
         setVisible,
         setSubmitLoading,
         remark: {
-          setVisible: "关闭弹窗的方法",
-          setSubmitLoading: "显示为加载中",
-          path: " 代码在学工的这里面 src/webPublic/FormInsertDiy/AuditButton/index.js",
-          message: "蚂蚁金服的message 用来展示进度条.  不懂问我",
-          Modal: "蚂蚁金服的Modal  用来提示审核已完成",
-          callback: "执行完了的回调函数",
-          else: "其他参数打印出来自己看看",
-          uaaRequest: "调一站式的接口的方法"
+          setVisible: '关闭弹窗的方法',
+          setSubmitLoading: '显示为加载中',
+          path: ' 代码在学工的这里面 src/webPublic/FormInsertDiy/AuditButton/index.js',
+          message: '蚂蚁金服的message 用来展示进度条.  不懂问我',
+          Modal: '蚂蚁金服的Modal  用来提示审核已完成',
+          callback: '执行完了的回调函数',
+          else: '其他参数打印出来自己看看',
+          uaaRequest: '调一站式的接口的方法'
         }
       });
       return true;
@@ -69,6 +82,7 @@ function AuditButton(props) {
       setSubmitLoading(true);
       preHandle(values);
       let payload = {
+        // 批量 和 单个审批 都用这段代码
         taskIds: taskIds || [data.taskId], // 接口里面的taskId 任务Id
         code: taskIds ? undefined : data.code,
         // 审核相关内容
@@ -81,13 +95,19 @@ function AuditButton(props) {
         apiData: data,
         taskFormKey: data?.taskFormKey,
         userNowInfo:
-          (isJSON(localStorage.getItem("user")) && JSON.parse(localStorage.getItem("user"))) || {},
+          (isJSON(localStorage.getItem('user')) && JSON.parse(localStorage.getItem('user'))) || {},
         buttonInfo,
         token: getToken()
       };
       payload = callbackSubmitData(payload);
+
+
+      console.log(payload);
+      setVisible(false);
+      setShowProcessModal(payload);
+      return false;
       dispatch({
-        type: "affair/getExamineProcess",
+        type: 'affair/getExamineProcess',
         payload,
         callback: (val) => {
           setSubmitLoading(false);
@@ -118,46 +138,55 @@ function AuditButton(props) {
    * 根据不同值,返回对应样式
    */
   function getStyle(key, value) {
-    if (key === "examine") {
+    if (key === 'examine') {
       switch (value) {
         case 1:
-          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(" ");
+          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
         case 2:
-          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(" ");
+          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
         case 0:
-          return "deafalut";
-        case "1":
-          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(" ");
-        case "2":
-          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(" ");
-        case "0":
-          return "deafalut";
+          return 'deafalut';
+        case '1':
+          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
+        case '2':
+          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
+        case '0':
+          return 'deafalut';
         default:
-          return "deafalut";
+          return 'deafalut';
       }
     } else {
-      return "deafalut";
+      return 'deafalut';
     }
   }
 
   function showModal(str, key, value) {
-    const { data, form } = props;
+    const {
+      data,
+      form
+    } = props;
     const buttonInfo = data?.btns && data?.btns.length ? data?.btns.find((x) => x.value === value) : {};
     const values = form.getFieldsValue();
-    if(buttonInfo?.documentation){
+    if (buttonInfo?.documentation) {
       let needAuditInfo = isJSON(buttonInfo.documentation) && JSON.parse(buttonInfo.documentation)?.needAuditInfo;
-      if(needAuditInfo && !values.reason){
+      if (needAuditInfo && !values.reason) {
         message.warning('请输入审批理由');
-        return ;
+        return;
       }
     }
     setModalContent(`确定${str}吗？`);
-    setAffairParams({ oldKey: key, btnValue: value });
+    setAffairParams({
+      oldKey: key,
+      btnValue: value
+    });
     setVisible(true);
   }
 
   const {
-    data: { isHandle, btns }
+    data: {
+      isHandle,
+      btns
+    }
   } = props;
   if (!isHandle || !Array.isArray(btns) || btns.length < 1) return null;
   return (
@@ -181,10 +210,23 @@ function AuditButton(props) {
         handleCancel={hideModal}
         handleOk={affairOk}
         confirmLoading={isSubmitLoading}>
-        <div style={{ fontSize: 16, textAlign: "center", height: 150, lineHeight: "150px" }}>
+        <div style={{
+          fontSize: 16,
+          textAlign: 'center',
+          height: 150,
+          lineHeight: '150px'
+        }}>
           {modalContent}
         </div>
       </ModalDiy>
+      {
+        showProcessModal &&
+        <AuditProcessOneByOne payloadData={showProcessModal}
+                              callBack={callback}
+                              setShowProcessModal={setShowProcessModal}
+        />
+      }
+
     </>
   );
 }

FormInsertDiy/AuditButton/pagesBtn/AuditProcessOneByOne.js

+import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Progress,message } from 'antd';
+import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
+import styles from './styles.less';
+
+export default function AuditProcessOneByOne({
+                                             payloadData = {},
+                                             callBack = () => {
+                                             },
+                                             setShowProcessModal,
+                                           }) {
+  if (!Array.isArray(payloadData?.taskIds) || !payloadData.taskIds.length) {
+    return null;
+  }
+  const [success, setS] = useState(0);
+  const [error, setE] = useState(0);
+  const resInfo = useRef();
+  const taskIds = payloadData.taskIds;
+  const total = taskIds.length;
+
+  async function getData(){
+    for (let g = 0; g < taskIds.length; g++) {
+      const res = await returnPromise({
+        ...payloadData,
+        taskIds: [taskIds[g]],
+      });
+      if (res) {
+        setS((v) => v + 1);
+      } else {
+        setE((v) => v + 1);
+      }
+      resInfo.current = res;
+    }
+  }
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  useEffect(() => {
+    if (success + error === total) {
+      callBack(resInfo.current);
+    }
+  }, [success, error]);
+
+
+  const percent = Math.floor(((success + error) / total) * 100);
+  return (
+    <Modal title={'批量审核'}
+           visible={true}
+           width={1200}
+           footer={null}
+           onCancel={() => {
+             if(success + error !== total){
+               message.warning('审核正在进行中,请勿关闭');
+             }else{
+               setShowProcessModal(false);
+             }
+           }}
+    >
+      <div className={styles.juzhong}>
+        <Progress percent={percent}
+                  type='circle'
+                  status={error === total ? 'exception' : success + error === total ? 'success ' : ''}
+                  strokeColor={{
+                    '0%': '#108ee9',
+                    '100%': '#87d068',
+                  }}
+        />
+
+        <div >
+          {
+            success + error === total ? `审核完成, 成功${success}条, 失败${error}条` : `正在进行审核 共${total}条数据, 成功${success}条, 失败${error}条`
+          }
+        </div>
+      </div>
+
+
+    </Modal>
+  );
+}
+
+let i = 0;
+
+function returnPromise(data) {
+  // return new Promise((resolve, reject) => {
+  //   i++;
+  //   if (i % 2 > 0) {
+  //     resolve(true);
+  //   } else {
+  //     resolve(false);
+  //   }
+  // });
+  return uaaRequest('/UnifiedAppFormApi/examineProcess', data);
+}

FormInsertDiy/AuditButton/pagesBtn/styles.less

@@ -21,3 +21,7 @@
         border:1px solid #FF9B00;
     }
 }
+.juzhong{
+  display: grid;
+  justify-items: center;
+}

FormInsertDiy/AuditPage/BatchAudit/AuditModal.js

@@ -14,13 +14,6 @@ function AuditModal({ form, selectRows, children, getPage, noNeedForm }) {
 		message.info(`提交${res ? '成功' : '失败'}！`);
 		setVisible(false);
 		getPage();
-		// 19684 优秀学生奖学金---班主任审核页面--弹框提醒优化处理 禅道bug
-		// ModalInfo(`提交${res ? '成功' : '失败'}！`, {
-		//   onOk: () => {
-		//     setVisible(false);
-		//     getPage();
-		//   },
-		// });
 	}
 
 	const [data, setData] = useState(null);
@@ -82,6 +75,7 @@ function AuditModal({ form, selectRows, children, getPage, noNeedForm }) {
 				width={900}
 				visible={visible}
 				title="批量审核"
+        maskClosable={false}
 				footer={footer}
 				onCancel={() => setVisible(false)}>
 				<Spin spinning={loading}>