修改驳回原因的问题

src/pages/settleManage/index.jsx

 import React, { useState, useRef } from 'react';
 import ProTable from '@ant-design/pro-table';
-import { Input, Button, Popconfirm, notification } from 'antd';
+import { Button, Popconfirm, notification } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { actionStatus, settleStatus } from './data';
 import style from './style.less';
 import { query, updateStatus, download, docQuery } from './service';
 import FileModal from './fileModal';
 import UploadModal from './uploadModal';
+import RemarkModal from './remarkModal';
 
-const { TextArea } = Input;
 export default () => {
   const protable = useRef();
-  const [refuse, setRefuse] = useState('');
+  const remarkRef = useRef();
   const [showViewFile, setShowViewFile] = useState(false);
   const [viewFileData, setViewFileData] = useState([]);
   const [showViewUpload, setShowViewUpload] = useState(false);
   const [settlementNoV, setSettlementNo] = useState('');
+  const [remarkShow, setRemarkShow] = useState(false);
+  const [rowInfo, setRowInfo] = useState({});
   const reload = () => {
     if (protable?.current?.reload) {
       protable.current.reload();
     }
   };
   const confirmText = '您是否已确认结算金额是否正确？确认后无法撤回';
-  const confirmAction = async (r, isRefuse) => {
+  const confirmAction = async (r, isRefuse, refuse) => {
     if (isRefuse && !refuse) {
       notification.error({ message: '请输入拒绝原因' });
       return;
@@ -37,9 +39,6 @@ export default () => {
       reload();
     }
   };
-  const refuseContent = ({ target: { value } }) => {
-    setRefuse(value);
-  };
   const uploadInvoice = ({ settlementNo }) => {
     setSettlementNo(settlementNo);
     setShowViewUpload(true);
@@ -48,15 +47,19 @@ export default () => {
     // type 1非财务 2财务
     download({ settlementNo, type: 1 });
   };
-  const clearRefuseContent = () => {
-    setRefuse('');
+  const clearRefuseContent = r => {
+    setRowInfo(r);
+    if (remarkRef.current.init) {
+      remarkRef.current.reset();
+    }
+    setRemarkShow(true);
   };
   const viewAccessory = async ({ settlementNo }) => {
     const data = await docQuery(settlementNo);
     setViewFileData(data);
     setShowViewFile(true);
   };
-  const refuseNode = () => <TextArea rows={4} onChange={refuseContent} value={refuse} />;
+
   const tableRenderBtn = r => (
     <div>
       <p>
@@ -66,28 +69,20 @@ export default () => {
           onConfirm={() => confirmAction(r)}
           okText="确认"
           cancelText="取消"
+          disabled={r.settlementStatus !== 2}
         >
-          <Button disabled={r.settlementStatus !== 2} type="primary" className="mr10">
+          <Button type="primary" className="mr10" disabled={r.settlementStatus !== 2}>
             确认
           </Button>
         </Popconfirm>
-        <Popconfirm
-          icon={null}
-          placement="topLeft"
-          title={refuseNode()}
-          onConfirm={() => confirmAction(r, true)}
-          okText="确认"
-          cancelText="取消"
+        <Button
+          type="primary"
+          onClick={() => clearRefuseContent(r)}
+          className="mr10"
+          disabled={r.settlementStatus !== 2}
         >
-          <Button
-            disabled={r.settlementStatus !== 2}
-            type="primary"
-            onClick={clearRefuseContent}
-            className="mr10"
-          >
-            拒绝
-          </Button>
-        </Popconfirm>
+          拒绝
+        </Button>
         <Button type="primary" onClick={() => uploadInvoice(r)} disabled={r.settlementStatus !== 6}>
           上传发票
         </Button>
@@ -192,6 +187,14 @@ export default () => {
           reload();
         }}
       />
+      <RemarkModal
+        visible={remarkShow}
+        submit={remark => {
+          confirmAction(rowInfo, true, remark);
+        }}
+        onCancel={() => setRemarkShow(false)}
+        ref={remarkRef}
+      />
     </PageHeaderWrapper>
   );
 };

src/pages/settleManage/remarkModal/index.jsx

+import { Modal, Input } from 'antd';
+import React, { Component } from 'react';
+
+const { TextArea } = Input;
+
+// eslint-disable-next-line react/prefer-stateless-function
+class fileModal extends Component {
+  state = {
+    remarks: '',
+  };
+
+  inputChange = ({ target: { value } }) => {
+    this.setState({ remarks: value });
+  };
+
+  reset = () => {
+    this.setState({ remarks: '' });
+  };
+
+  render() {
+    const { visible } = this.props;
+    return (
+      <Modal
+        title="驳回原因"
+        visible={visible}
+        onOk={() => {
+          this.props.submit(this.state.remarks);
+        }}
+        onCancel={this.props.onCancel}
+        width="500px"
+      >
+        <div>
+          <TextArea value={this.state.remarks} rows={4} onChange={this.inputChange} />
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default fileModal;