feat: 安全巡检各组件优化

.eslintrc

@@ -25,6 +25,7 @@
     "array-bracket-spacing": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "react-hooks/rules-of-hooks": "error"
+    // "react-hooks/exhaustive-deps": "warn"
   },
   "settings": {
     "react": {

src/components/AuditContent/index.tsx

@@ -53,15 +53,17 @@ export const GroupItem: React.FC<iGroupItem> = props => {
 interface iAuditContentProps {
   onSelect: (type: string, item: iUserInfo) => void
   onDelete: (id: string, progress: string) => void
-  latest: iLatestAuditorState
-  auditors: iAuditor[]
-  auditHistory: iAuditHistoryState[][]
-  status: number
-  uName: string
+  data : {
+    uid: string
+    auditors: iAuditor[]
+    auditHistory: iAuditHistoryState[][]
+    status: number
+    uName: string
+  }
 }
 
 const Index: React.FC<iAuditContentProps> = props => {
-  const { onSelect, auditors, onDelete, status, auditHistory } = props
+  const { onSelect, onDelete, data: { auditors, status, auditHistory, uid } } = props
   const [ visible, setVisible ] = useState({
     check: false,
     reCheck: false
@@ -420,6 +422,9 @@ const Index: React.FC<iAuditContentProps> = props => {
       </>
     )
   }
+  console.log(uid)
+  console.log(userStore.userInfo.id)
+
   return (
     <table className="pi-table pi-bordered mt-3">
       <thead>
@@ -431,7 +436,7 @@ const Index: React.FC<iAuditContentProps> = props => {
       </thead>
       <tbody>
         <tr>
-          {!status ? (
+          {!status &&  uid === userStore.userInfo.id? (
             <>
               <td width="30%">
                 <table className="table table-bordered">{renderLeftAuditors(status)}</table>

src/components/Navigation/index.tsx

@@ -117,7 +117,7 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
                     noCache ?
                         <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component> :
                         (
-                            <KeepAlive id={path}>
+                            <KeepAlive>
                                 <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}></targetRoute.component>
                             </KeepAlive>
                         )

src/pages/Management/Tender/Member/index.tsx

@@ -196,6 +196,8 @@ const Member: React.FC<RouteComponentProps> = props => {
   }
 
   const change = (e: ChangeEvent) => {
+    console.log(1)
+
     e.persist()
     const target = e.target as HTMLTextAreaElement
     if (!target.value) {

src/pages/Quality/Content/Info/Detail/components/Modal/index.tsx

@@ -49,7 +49,10 @@ const textObj = {
 
 const AuditModal: React.FC<iAuditModalProps> = props => {
   const [ form ] = Form.useForm()
-  const { modalObj: { visible, type, loading },onCancel, onCreate, auditors, curAuditor } = props
+  const { modalObj: { visible, type, loading }, onCancel, onCreate, auditors, curAuditor } = props
+  console.log(loading)
+
+
   const [ modal, setModal ] = useState<iModalObjState>({
     searchValue: '',
     visible: false,
@@ -328,4 +331,4 @@ const AuditModal: React.FC<iAuditModalProps> = props => {
   )
 }
 
-export default memo(AuditModal)
+export default AuditModal

src/pages/Quality/Content/Info/Detail/index.tsx

@@ -17,7 +17,7 @@ import { dayjsFormat } from '@/utils/util'
 import { Button, Input, message, Pagination, Tooltip } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
 import dayjs from 'dayjs'
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState, useMemo, useCallback } from 'react'
 import { RouteComponentProps } from 'react-router'
 import { apiGetQualityDetail, apiResfulQualityAudit } from './api'
 import AuditModal from './components/Modal'
@@ -158,7 +158,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
     }
   }
 
-  const delAuditor = (id: string, progress: string) => {
+  const delAuditor = useCallback((id: string, progress: string) => {
     const newAuditors = detail.auditors.filter(item => item.progress !== progress)
     const auditor = detail.auditors.find(item => item.progress === progress && item.audit_id !== id)
 
@@ -166,13 +166,12 @@ const Detail: React.FC<RouteComponentProps> = props => {
       newAuditors.push(auditor)
     }
     setDetail({ ...detail, auditors: newAuditors })
-  }
+  }, [])
 
   const btnClick = (type: string) => {
     setModalObj({ ...modalObj, auditType: type, auditModal: true })
   }
-  const onModalConfirm = (values?: object) => {
-    setModalObj({ ...modalObj, loading: true })
+  const onModalConfirm = async (values?: object) => {
     let payload: any = { quality_id: detail.id, bidsection_id: detail.bidsectionId, ...values }
     if (modalObj.auditType === 'start') {
       payload.inspection = detail.inspection
@@ -208,6 +207,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
     apiResful(modalObj.auditType, payload)
   }
   const apiResful = async (type: string, payload: any) => {
+    setModalObj({ ...modalObj, loading: true })
     const { code } = await apiResfulQualityAudit(type, payload)
     if (code === consts.RET_CODE.SUCCESS) {
       setModalObj({ ...modalObj, auditModal: false, loading: false })
@@ -262,9 +262,14 @@ const Detail: React.FC<RouteComponentProps> = props => {
     }
   }
 
-  const modalProps = useMemo(() => {
-    return { visible: modalObj.auditModal, loading: modalObj.loading, type: modalObj.auditType }
-  }, [ modalObj.auditType ])
+  const modalProps = { visible: modalObj.auditModal, loading: modalObj.loading, type: modalObj.auditType }
+
+  const auditData = { auditors: detail.auditors, auditHistory: detail.auditHistory, status: detail.status, uName: detail.auditName, uid: detail.uid }
+
+  const hideAuditModal = () => {
+    setModalObj({ ...modalObj, auditModal: false })
+  }
+
   return (
     <div className="wrap-contaniner">
       <Header title="质量巡检">
@@ -436,7 +441,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
                       {file.filename}
                     </a>
                   </td>
-                  <td className="pi-text-center">{file.accountName}</td>
+                  <td className="pi-text-center pi-width-100">{file.accountName}</td>
                   <td className="pi-text-center">{dayjsFormat(file.createTime)}</td>
                   <td className="pi-text-center pi-width-90">
                     <Tooltip title="移除">
@@ -460,23 +465,11 @@ const Detail: React.FC<RouteComponentProps> = props => {
               ) : null}
             </tbody>
           </table>
-          <AuditContent
-            auditors={detail.auditors}
-            onSelect={addAuditor}
-            onDelete={delAuditor}
-            latest={detail.latestAuditor}
-            auditHistory={detail.auditHistory}
-            status={detail.status}
-            uName={detail.auditName}></AuditContent>
+          <AuditContent data={auditData} onSelect={addAuditor} onDelete={delAuditor}></AuditContent>
         </div>
       </div>
       <OssUploadModal visible={modalObj.ossModal} onCancel={() => setModalObj({ ...modalObj, ossModal: false })} onCreate={onCreate} onShow={onOssModalShow}></OssUploadModal>
-      <AuditModal
-        modalObj = {modalProps}
-        onCancel={() => setModalObj({ ...modalObj, auditModal: false })}
-        onCreate={onModalConfirm}
-        auditors={detail.auditors}
-        curAuditor={detail.latestAuditor}></AuditModal>
+      <AuditModal modalObj={modalProps} onCancel={hideAuditModal} onCreate={onModalConfirm} auditors={detail.auditors} curAuditor={detail.latestAuditor}></AuditModal>
     </div>
   )
 }

src/pages/Safe/Content/Info/Detail/components/Modal/index.tsx

@@ -1,328 +0,0 @@
-import { GroupItem } from '@/components/AuditContent'
-import { ZhAuditBackButton, ZhButton, ZhCloseButton, ZhSubmitButton } from '@/components/Button'
-import { userStore } from '@/store/mobx'
-import { iAuditor, iLatestAuditorState } from '@/types/safe'
-import { iAccountGroupItem, iUserInfo } from '@/types/setting'
-import { getUserGroup } from '@/utils/common/user'
-import { Button, Form, Input, message, Modal, Popover } from 'antd'
-import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'
-interface iAuditModalProps {
-  visible: boolean
-  onCancel: () => void
-  type: string
-  auditors: iAuditor[]
-  onCreate: (values?: any) => void
-  curAuditor: iLatestAuditorState
-}
-const textObj = {
-  start: {
-    title: '提交审批',
-    okText: '确认提交'
-  },
-  delete: {
-    title: '删除巡检',
-    okText: '确认删除'
-  },
-  close: {
-    title: '审批关闭',
-    okText: '确认关闭'
-  },
-  back: {
-    title: '审批退回',
-    okText: '确认退回'
-  },
-  pass: {
-    title: '审批通过',
-    okText: '确认通过'
-  }
-}
-
-interface iModalObjState {
-  searchValue: string
-  visible: boolean
-  auditType: string
-}
-const AuditModal: React.FC<iAuditModalProps> = props => {
-  const [ form ] = Form.useForm()
-  const { visible, type, onCancel, onCreate, auditors, curAuditor } = props
-  const [ modal, setModal ] = useState<iModalObjState>({
-    searchValue: '',
-    visible: false,
-    auditType: ''
-  })
-  // 是否是审批组的最后一个审核人
-  const isLastAuditor = useMemo(() => {
-    const len = auditors.filter(item => item.progress === '0').length
-    if (len && auditors.filter(item => item.progress === '0')[len - 1].audit_id === userStore.userInfo.id) {
-      return true
-    }
-    return false
-  }, [ auditors ])
-  const [ groups, setGroups ] = useState<Array<iAccountGroupItem>>([])
-  const [ user, setUser ] = useState<iUserInfo>({
-    account: '',
-    accountGroup: 0,
-    company: '',
-    csrf: '',
-    enable: 0,
-    id: '',
-    isAdmin: 0,
-    mobile: '',
-    name: '',
-    password: '',
-    position: '',
-    projectId: '',
-    role: '',
-    telephone: ''
-  })
-  const comfirmBtnClick = () => {
-    form.validateFields().then(values => {
-      form.resetFields()
-      if (user.id) {
-        values.audit_id = user.id
-      }
-
-      if (type === 'pass' && isLastAuditor && curAuditor.progress === '0' && !user.id) {
-        return message.error('请指定整改人!')
-      }
-      onCreate(values)
-    })
-  }
-
-  useEffect(() => {
-    if (visible && isLastAuditor && type === 'pass') {
-      initGroupList()
-    }
-    if (visible && type === 'back') {
-      if (curAuditor.progress === '1') {
-        const len = auditors.filter(item => item.progress === '0').length
-        const lastChecker = auditors.filter(item => item.progress === '0')[len - 1]
-        setUser({ ...user, id: lastChecker.id, name: lastChecker.name })
-      } else {
-        const newGroup = initAuditBackGroup()
-        setGroups(newGroup)
-      }
-    }
-  }, [ visible ])
-  const initGroupList = async (serach?: string) => {
-    const data = await getUserGroup({ name: serach })
-    setGroups(data)
-  }
-
-  // 初始化审批退回下拉选择框
-  const initAuditBackGroup = () => {
-    console.log(auditors)
-
-    const newGroup: iAccountGroupItem[] = []
-    for (let index = 0; index < 3; index++) {
-      if (index === 0) {
-        const newAuditors = auditors
-          .filter(item => item.progress === '')
-          .map(item => {
-            return mapUser(item.name, '', item.position, item.company, item.mobile)
-          })
-        newGroup.push({  value: '检查人', children: newAuditors })
-      }
-      if (index === 1) {
-        const newAuditors = auditors
-          .filter(item => item.progress === '0')
-          .map(item => {
-            return mapUser(item.name, item.id, item.position, item.company, item.mobile)
-          })
-        newGroup.push({  value: '审批', children: newAuditors })
-      }
-      if (index === 2) {
-        const newAuditors = auditors
-          .filter(item => item.progress === '1')
-          .map(item => {
-            return mapUser(item.name, item.id, item.position, item.company, item.mobile)
-          })
-        newGroup.push({ value: '整改', children: newAuditors })
-      }
-
-    }
-    function mapUser(name: string, id: string, position: string, company: string, mobile: string) {
-      return {
-        account: '',
-        accountGroup: 0,
-        company,
-        csrf: '',
-        enable: 0,
-        id,
-        isAdmin: 0,
-        mobile,
-        name,
-        password: '',
-        position,
-        projectId: '',
-        role: '',
-        telephone: ''
-      }
-    }
-    return newGroup
-  }
-
-  const renderOkBtn = (type: string) => {
-    if (type === 'start' || type === 'pass') {
-      return (
-        <ZhSubmitButton size="small" onClick={comfirmBtnClick}>
-          {textObj[type]?.okText}
-        </ZhSubmitButton>
-      )
-    } else if (type === 'delete' || type === 'close') {
-      return (
-        <Button danger size="small" onClick={comfirmBtnClick}>
-          {textObj[type]?.okText}
-        </Button>
-      )
-    } else if (type === 'back') {
-      return (
-        <ZhAuditBackButton size="small" onClick={comfirmBtnClick}>
-          {textObj[type]?.okText}
-        </ZhAuditBackButton>
-      )
-    }
-  }
-
-  const search = (value: string) => {
-    if (value != modal.searchValue) {
-      setModal({ ...modal, searchValue: value })
-      initGroupList(value)
-    }
-  }
-
-  const change = (e: ChangeEvent) => {
-    e.persist()
-    const target = e.target as HTMLTextAreaElement
-    if (!target.value) {
-      initGroupList()
-    }
-  }
-
-  const itemSelectHandler = (item: iUserInfo, type: string = '') => {
-    setUser({ ...user, ...item })
-
-    setModal({ ...modal, visible: false, auditType: type })
-  }
-
-  const handleVisibleChange = (visible: boolean) => {
-    setModal({ ...modal, visible })
-  }
-
-  const showPopover = () => {
-    setModal({ ...modal, visible: true })
-  }
-
-  return (
-    <Modal
-      visible={visible}
-      title={textObj[type]?.title}
-      onCancel={onCancel}
-      getContainer={false}
-      footer={
-        <div className="pi-justify-end">
-          <ZhCloseButton size="small" onClick={onCancel} className="pi-mg-right-5">
-            关闭
-          </ZhCloseButton>
-          {renderOkBtn(type)}
-        </div>
-      }>
-      <Form form={form} layout="vertical">
-        {type === 'back' ? (
-          <>
-            <Form.Item name="opinion" label="审批意见">
-              <Input.TextArea rows={5}></Input.TextArea>
-            </Form.Item>
-            {curAuditor.progress !== '1' ? (
-              <Popover
-                content={groups.map(item => (
-                  <GroupItem {...item} key={item.value} onSelect={(item: iUserInfo, type?: string) => itemSelectHandler(item, type)}></GroupItem>
-                ))}
-                overlayClassName="popover-card"
-                trigger="click"
-                visible={modal.visible}
-                onVisibleChange={visible => handleVisibleChange(visible)}
-                placement="bottomLeft">
-                <ZhButton size="small" onClick={showPopover}>
-                  选择退回流程
-                </ZhButton>
-              </Popover>
-            ) : null}
-
-            {user.name ? (
-              <div className="pi-bordered pi-warning">
-                <span>已选择退回流程: </span>
-                <span>{user.name}</span>
-              </div>
-            ) : null}
-          </>
-        ) : null}
-        {type === 'delete' ? (
-          <>
-            <p className="mb-2">删除后，数据无法恢复，请谨慎操作。</p>
-            <p className="mb-2">
-              请在下方文本框输入文本「<span className="pi-red">确认删除本次巡检</span>」，以此确认删除操作。
-            </p>
-            <Form.Item
-              name="warningText"
-              rules={[
-                () => ({
-                  validator(rule, value) {
-                    if (!value || value !== '确认删除本次巡检') {
-                      return Promise.reject('请按照提示信息进行删除操作!')
-                    }
-                    return Promise.resolve()
-                  }
-                })
-              ]}>
-              <Input placeholder="输入文本, 确认删除"></Input>
-            </Form.Item>
-          </>
-        ) : null}
-        {type === 'start' ? <p>请确认审批流程及信息无误。</p> : null}
-        {type === 'close' ? (
-          <>
-            <Form.Item name="opinion" label="审批意见">
-              <Input.TextArea rows={5}></Input.TextArea>
-            </Form.Item>
-            <p className="pi-warning">审批关闭，将直接停止该巡检流程。</p>
-          </>
-        ) : null}
-        {type === 'pass' ? (
-          <>
-            <Form.Item name="opinion" label="审批意见">
-              <Input.TextArea rows={5}></Input.TextArea>
-            </Form.Item>
-            {isLastAuditor && curAuditor.progress === '0' ? (
-              <Popover
-                title={<Input.Search size="small" placeholder="姓名/手机 检索" onSearch={search} onChange={e => change(e)}></Input.Search>}
-                content={groups.map(item => (
-                  <GroupItem {...item} key={item.value} onSelect={(item: iUserInfo, type?: string) => itemSelectHandler(item, type)}></GroupItem>
-                ))}
-                overlayClassName="popover-card"
-                trigger="click"
-                visible={modal.visible}
-                onVisibleChange={visible => handleVisibleChange(visible)}
-                placement="bottomLeft">
-                <ZhButton size="small" onClick={showPopover}>
-                  指派整改人
-                </ZhButton>
-              </Popover>
-            ) : null}
-
-            {user.id ? (
-              <p className="pi-bordered pi-pd-8 pi-mg-top-5">
-                <span>已指派整改人: </span>
-                <span>
-                  {user.name}-{user.position}-{user.company}
-                </span>
-              </p>
-            ) : null}
-          </>
-        ) : null}
-      </Form>
-    </Modal>
-  )
-}
-
-export default AuditModal

src/pages/Safe/Content/Info/Detail/index.tsx

@@ -17,10 +17,10 @@ import { dayjsFormat } from '@/utils/util'
 import { Button, Input, message, Pagination, Tooltip } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
 import dayjs from 'dayjs'
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState, useMemo, useCallback } from 'react'
 import { RouteComponentProps } from 'react-router'
 import { apiGetSafeDetail, apiResfulSafeAudit } from './api'
-import AuditModal from './components/Modal'
+import AuditModal from '@/pages/Quality/Content/Info/Detail/components/Modal'
 import styles from './index.module.scss'
 const { TextArea } = Input
 interface iModalObj {
@@ -28,13 +28,15 @@ interface iModalObj {
   auditModal: boolean
   auditType: string
   curPage: number
+  loading: boolean
 }
 const Detail: React.FC<RouteComponentProps> = props => {
   const { saveId = '' } = props.location.state as any
-  const [ visible, setVisible ] = useState<iModalObj>({
+  const [ modalObj, setModalObj ] = useState<iModalObj>({
     ossModal: false,
     auditModal: false,
     auditType: '',
+    loading: false,
     curPage: 1
   })
   const [ detail, setDetail ] = useState<iDetailState>({
@@ -96,14 +98,14 @@ const Detail: React.FC<RouteComponentProps> = props => {
         })
       )
       setDetail({ ...detail, file: { ...detail.file, total: newFiles.length } })
-      await fileListChange(visible.curPage)
+      await fileListChange(modalObj.curPage)
     }
   }
-  const onOssModalShow = (show: boolean) => setVisible({ ...visible, ossModal: show })
+  const onOssModalShow = (show: boolean) => setModalObj({ ...modalObj, ossModal: show })
   const fileListChange = async (pageNo: number = 1, pageSize: number = 10) => {
     const { code = -1, data, total } = await apiGetFileList(consts.DATA_TYPE.SAFE, detail.id, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
-      setVisible({ ...visible, curPage: pageNo, ossModal: false })
+      setModalObj({ ...modalObj, curPage: pageNo, ossModal: false })
       setDetail({ ...detail, file: { ...detail.file, fileList: data, total } })
     }
   }
@@ -111,9 +113,8 @@ const Detail: React.FC<RouteComponentProps> = props => {
   const delFile = async (id: string, isLast: boolean) => {
     const { code = -1 } = await apiDelFile(id)
     if (code === consts.RET_CODE.SUCCESS) {
-      console.log(visible.curPage - 1)
-      await fileListChange(isLast ? visible.curPage - 1 : visible.curPage)
-      isLast && (setVisible({ ...visible, curPage: visible.curPage - 1 }))
+      await fileListChange(isLast ? modalObj.curPage - 1 : modalObj.curPage)
+      isLast && (setModalObj({ ...modalObj, curPage: modalObj.curPage - 1 }))
     }
   }
 
@@ -121,15 +122,37 @@ const Detail: React.FC<RouteComponentProps> = props => {
     if (detail.auditors.find(item => item.progress === (type === 'check' ? '0' : '2') && item.audit_id === user.id)) {
       return message.error('该审批组下已存在该审批人，请勿重复添加!')
     }
-    if (type === "check") {
+    if (type === 'check') {
       const newAuditors = detail.auditors
-      const len = detail.auditors.filter((item: iAuditor) => item.progress === "0").length
-      newAuditors.push({ id: '', mobile:'', audit_id: user.id, audit_order: len + 1,position: user.position, progress: "0", name: user.name,accountGroup: user.accountGroup, company: user.company, status: 0 })
+      const len = detail.auditors.filter((item: iAuditor) => item.progress === '0').length
+      newAuditors.push({
+        id: '',
+        mobile: '',
+        audit_id: user.id,
+        audit_order: len + 1,
+        position: user.position,
+        progress: '0',
+        name: user.name,
+        accountGroup: user.accountGroup,
+        company: user.company,
+        status: 0
+      })
       setDetail({ ...detail, auditors: newAuditors })
     } else {
       const newAuditors = detail.auditors
-      const len = detail.auditors.filter((item: iAuditor) => item.progress === "2").length
-      newAuditors.push({ id: '', audit_id: user.id, mobile:'', audit_order: len + 1,position: user.position, progress: "2",  name: user.name, accountGroup: user.accountGroup, company: user.company, status: 0 })
+      const len = detail.auditors.filter((item: iAuditor) => item.progress === '2').length
+      newAuditors.push({
+        id: '',
+        audit_id: user.id,
+        mobile: '',
+        audit_order: len + 1,
+        position: user.position,
+        progress: '2',
+        name: user.name,
+        accountGroup: user.accountGroup,
+        company: user.company,
+        status: 0
+      })
       setDetail({ ...detail, auditors: newAuditors })
     }
   }
@@ -145,11 +168,11 @@ const Detail: React.FC<RouteComponentProps> = props => {
   }
 
   const btnClick = (type: string) => {
-    setVisible({ ...visible, auditType: type, auditModal: true })
+    setModalObj({ ...modalObj, auditType: type, auditModal: true })
   }
   const onModalConfirm = (values?: object) => {
     let payload: any = { safe_id: detail.id, bidsection_id: detail.bidsectionId, ...values }
-    if (visible.auditType === 'start') {
+    if (modalObj.auditType === 'start') {
       payload.inspection = detail.inspection
       payload.inspectionDetail = detail.inspectionDetail
       payload.demand = detail.demand
@@ -162,11 +185,11 @@ const Detail: React.FC<RouteComponentProps> = props => {
       }
     }
 
-    if (visible.auditType === 'delete') {
+    if (modalObj.auditType === 'delete') {
       payload = { id: detail.id }
     }
 
-    if (visible.auditType === 'pass' || visible.auditType === 'back') {
+    if (modalObj.auditType === 'pass' || modalObj.auditType === 'back') {
       payload.id = detail.latestAuditor.id
       if (detail.latestAuditor.progress === '1') {
         if (!detail.checkOrder.opinion) {
@@ -177,20 +200,23 @@ const Detail: React.FC<RouteComponentProps> = props => {
       }
     }
 
-    if (visible.auditType === 'close') {
+    if (modalObj.auditType === 'close') {
       payload.id = detail.latestAuditor.id
     }
-    apiResful(visible.auditType, payload)
+    apiResful(modalObj.auditType, payload)
   }
   const apiResful = async (type: string, payload: any) => {
+    setModalObj({ ...modalObj, loading: true })
     const { code } = await apiResfulSafeAudit(type, payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      setVisible({ ...visible, auditModal: false })
+      setModalObj({ ...modalObj, auditModal: false, loading: false })
       if (type === 'delete') {
         props.history.goBack()
       } else {
         initData()
       }
+    } else {
+      setModalObj({ ...modalObj, loading: false })
     }
   }
   const renderHeaderBtn = (status: number) => {
@@ -222,6 +248,10 @@ const Detail: React.FC<RouteComponentProps> = props => {
     }
   }
 
+  const modalProps = { visible: modalObj.auditModal, loading: modalObj.loading, type: modalObj.auditType }
+
+  const auditData = { auditors: detail.auditors, auditHistory: detail.auditHistory, status: detail.status, uName: detail.auditName, uid: detail.uid }
+
   return (
     <div className="wrap-contaniner">
       <Header title="安全巡检">
@@ -362,7 +392,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
             <tbody>
               <tr>
                 <td colSpan={5}>
-                  <ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload" />} onClick={() => setVisible({ ...visible, ossModal: true })}>
+                  <ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload" />} onClick={() => setModalObj({ ...modalObj, ossModal: true })}>
                     上传附件
                   </ZhUploadButton>
                 </td>
@@ -376,7 +406,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
                     {file.filename}
                   </a>
                 </td>
-                <td className="pi-text-center">{file.accountName}</td>
+                <td className="pi-text-center pi-width-100">{file.accountName}</td>
                 <td className="pi-text-center">{dayjsFormat(file.createTime)}</td>
                 <td className="pi-text-center pi-width-90">
                   <Tooltip title="移除">
@@ -389,7 +419,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
                 <tr>
                   <td colSpan={5} className="pi-text-right">
                     <Pagination
-                      current={visible.curPage}
+                      current={modalObj.curPage}
                       size="small"
                       pageSize={consts.PAGE_SIZE}
                       hideOnSinglePage={true}
@@ -400,31 +430,21 @@ const Detail: React.FC<RouteComponentProps> = props => {
               ) : null}
             </tbody>
           </table>
-          <AuditContent
-            auditors={detail.auditors}
-            onSelect={addAuditor}
-            onDelete={delAuditor}
-            latest={detail.latestAuditor}
-            auditHistory={detail.auditHistory}
-            status={detail.status}
-            uName={detail.auditName}
-            ></AuditContent>
+          <AuditContent data={auditData} onSelect={addAuditor} onDelete={delAuditor}></AuditContent>
         </div>
       </div>
       <OssUploadModal
-        visible={visible.ossModal}
-        onCancel={() => setVisible({ ...visible, ossModal: false })}
+        visible={modalObj.ossModal}
+        onCancel={() => setModalObj({ ...modalObj, ossModal: false })}
         onCreate={onCreate}
         onShow={onOssModalShow}>
       </OssUploadModal>
       <AuditModal
-        type={visible.auditType}
-        visible={visible.auditModal}
-        onCancel={() => setVisible({ ...visible, auditModal: false })}
+        modalObj={modalProps}
+        onCancel={() => setModalObj({ ...modalObj, auditModal: false })}
         onCreate={onModalConfirm}
         auditors={detail.auditors}
-        curAuditor={detail.latestAuditor}
-        ></AuditModal>
+        curAuditor={detail.latestAuditor}></AuditModal>
     </div>
   )
 }

src/pages/Safe/Content/Info/index.tsx

@@ -2,16 +2,14 @@ import Guards from '@/components/Navigation'
 import { NavigationGuardsProps } from '@/types/router'
 import React from 'react'
 import { Switch } from 'react-router-dom'
-const Content:React.FC<NavigationGuardsProps> = props => {
+const Content: React.FC<NavigationGuardsProps> = props => {
   const { routeConfig, match, location } = props
   return (
-    <>
-      <div className="panel-content">
-        <Switch>
-          <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
-        </Switch>
-      </div>
-    </>
+    <div className="panel-content">
+      <Switch>
+        <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
+      </Switch>
+    </div>
   )
 }
 

src/pages/Safe/List/index.tsx

@@ -6,7 +6,7 @@ import { tenderStore } from '@/store/mobx'
 import { ContractTree } from '@/types/contract'
 import consts from '@/utils/consts'
 import { CaretDownOutlined } from '@ant-design/icons'
-import { Button, Dropdown, Menu, message, Table } from 'antd'
+import { Button, Dropdown, Menu, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
 import { useAliveController } from 'react-activation'