fix: 拉去最新的antv/chars、以及typescript解决antd部分组件报错的问题

package.json

@@ -117,7 +117,7 @@
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "^16.9.0",
+    "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/zxcvbn": "^4.4.0",
@@ -158,7 +158,7 @@
     "mini-css-extract-plugin": "0.9.0",
     "mobx-react-devtools": "^6.1.1",
     "node-sass": "^4.14.1",
-    "npm": "^6.14.9",
+    "npm": "^7.6.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -168,7 +168,7 @@
     "postcss-safe-parser": "4.0.1",
     "prettier": "^2.2.1",
     "react-app-polyfill": "^1.0.6",
-    "react-dev-utils": "^10.2.1",
+    "react-dev-utils": "^11.0.3",
     "resolve": "1.15.0",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "8.0.2",
@@ -183,7 +183,7 @@
     "svg-sprite-loader": "^5.0.0",
     "terser-webpack-plugin": "2.3.8",
     "ts-pnp": "1.1.6",
-    "typescript": "~3.7.2",
+    "typescript": "^4.2.3",
     "url-loader": "2.3.0",
     "webpack": "4.42.0",
     "webpack-dev-server": "3.11.0",
@@ -191,9 +191,9 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "dependencies": {
-    "@ant-design/charts": "^1.0.14",
-    "@ant-design/icons": "^4.2.2",
-    "antd": "^4.6.4",
+    "@ant-design/charts": "^1.0.19",
+    "@ant-design/icons": "^4.5.0",
+    "antd": "^4.13.0",
     "axios": "^0.21.1",
     "dayjs": "^1.9.6",
     "mobx": "^5.15.4",

src/components/AuditContent/index.tsx

@@ -436,10 +436,10 @@ const AuditContent: React.FC<iAuditContentProps> = props => {
         <tr>
           {!status &&  uid === userStore.userInfo.id? (
             <>
-              <td width="30%">
+              <td style={{ width: "30%" }}>
                 <table className="table table-bordered">{renderLeftAuditors(status)}</table>
               </td>
-              <td width="70%">
+              <td style={{ width: "70%" }}>
                 <div className="pi-justify-end">
                   <Popover
                     title={<Input.Search size="small" placeholder="姓名/手机 检索" onSearch={search} onChange={e => change(e)} />}

src/components/OssUpload/index.tsx

@@ -7,14 +7,14 @@ import { Button, message, Modal, Upload } from 'antd'
 import { ModalProps } from 'antd/lib/modal'
 import { UploadChangeParam } from 'antd/lib/upload'
 import { UploadFile } from 'antd/lib/upload/interface'
-import React, { useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 const { Dragger } = Upload
 
 interface iUploadModalProps extends ModalProps {
   onCreate: (files: iFile[]) => void
   onShow: (visible: boolean) => void
 }
-const UploadModal:React.FC<iUploadModalProps> = (props) => {
+const UploadModal: React.FC<iUploadModalProps> = (props) => {
   const { onCreate, onShow, ...otherProps } = props
   const [ files, setFiles ] = useState<iFile[]>([])
   const [ fileList, setFileList ] = useState<Array<UploadFile>>([])
@@ -36,23 +36,18 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
   }, [ props.visible ])
   // 上传文件改变时的状态
   const onChange = (info: UploadChangeParam) => {
-    // console.log(info)
+
+    console.log(info)
 
     const { status } = info.file
-    // if (status !== 'uploading') {
-    // }
     if (status === 'done') {
-      // console.log(fileList)
 
-      // const newFileList = [ ...fileList, info.file ]
-      // console.log(fileList)
-      // newFileList.push(info.file)
-      setFileList(info.fileList.map(item => ({ ...item, url: consts.OSS_PATH.REVIEW + item.url })))
-      // const newFiles = [ ...files, { createTime: new Date(), filepath: info.file.url,filename: info.file.name } ]
-      setFiles(info.fileList.map(item => ({ createTime: new Date(), filepath: item.url,filename: item.name })))
+      setFiles(info.fileList.map(item => ({ createTime: new Date(), filepath: item.url, filename: item.name })))
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败`)
     }
+    setFileList(info.fileList)
+
   }
   // 初始化、获取签名
   const initOssData = async () => {
@@ -79,29 +74,27 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
     }
   }
 
-  const transformFile = (file: any) => {
-    file.url = OSSData.dir + file.name
-    return file
-  }
   // 上传前的回调
-  const beforeUpload = (file: any) => {
+  const beforeUpload = async (file: any) => {
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
     if (!isLt30M) {
       message.error("上传附件大小限制在30MB")
-      return false
+      return Promise.reject()
     }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
-      return false
+      return Promise.reject()
     }
 
     const reg = new RegExp(consts.UPLOAD_WHITE)
     if (!reg.test(file.name)) {
-      return false
+      return Promise.reject()
     }
-    return true
+
+    file.url = OSSData.dir + file.name
+    return Promise.resolve(file)
   }
 
   // 移除文件
@@ -112,6 +105,12 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
     setFileList(newFileList)
     setFiles(newFiles)
   }
+
+  // const customRenderItem = (originNode: ReactElement, file: UploadFile, fileList?: object[]): React.ReactNode => {
+  //   console.log(originNode)
+
+  //   return originNode
+  // }
   return (
     <Modal
       {...otherProps}
@@ -122,7 +121,7 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
           <ZhCloseButton onClick={() => onShow(false)} size="small" className="pi-mg-right-5">关闭</ZhCloseButton>
           <Button type="primary" size="small" onClick={() => onCreate(files)}>确认</Button>
         </div>}
-      >
+    >
       <Dragger
         name="file"
         fileList={fileList}
@@ -131,12 +130,12 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
         onChange={onChange}
         beforeUpload={beforeUpload}
         data={getExtraData}
-        transformFile={transformFile}
+        // itemRender={customRenderItem}
         // accept={consts.UPLOAD_WHITE}
         onRemove={onRemove}
-        >
+      >
         <p className="ant-upload-drag-icon">
-        <InboxOutlined />
+          <InboxOutlined />
         </p>
         <p className="ant-upload-text">把文件拖入指定区域，完成上传，同样支持点击上传。</p>
         <p className="ant-upload-hint">

src/pages/Contract/Content/Income/components/Tabs/Detail/index.tsx

@@ -27,10 +27,10 @@ const Detail:React.FC<DetailProps> = (props) => {
         <tr><th>合同金额</th><td>{formatMoney(contract.price)}</td><th>创建时间</th><td>{contract.createTime}</td></tr>
         <tr><th>{type_name}金额</th><td>{formatMoney(type === ContractType.INCOME ? contract.returned : contract.paid)}</td><th>未{type_name}金额</th><td>{formatMoney(progress.unReturnedMoney)}</td></tr>
           <tr><th>{type_name}进度</th><td className={styles.progressContainer} colSpan={3}><div className={styles.progressContent}>
-            <Tooltip title={`已支付：￥ ${formatMoney(type === ContractType.INCOME ? contract.returned : contract.paid)}`}>
+            <Tooltip title={`已${type_name}：￥ ${formatMoney(type === ContractType.INCOME ? contract.returned : contract.paid)}`}>
               <div className={[ styles.progressBar, 'pi-bg-success' ].join(' ')} style={{ width: progress.returned }}>{progress.returned}</div>
             </Tooltip>
-            <Tooltip title={`未支付：￥ ${formatMoney(progress.unReturnedMoney)}`}>
+            <Tooltip title={`未${type_name}：￥ ${formatMoney(progress.unReturnedMoney)}`}>
               <div className={[ styles.progressBar, 'pi-bg-gray' ].join(' ')} style={{ width: progress.unReturned }}>{progress.unReturned}</div>
             </Tooltip>
           </div></td></tr>

src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -8,10 +8,10 @@ import consts from '@/utils/consts'
 import { dayjsFormat, formatMoney } from '@/utils/util'
 import { DisconnectOutlined } from '@ant-design/icons'
 import { Form, Input, Popconfirm, Table } from 'antd'
-import locale from 'antd/es/date-picker/locale/zh_CN'
+// import locale from 'antd/es/date-picker/locale/zh_CN'
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { apiDelReturn, apiGetReturns, apiUpdateReturn } from './api'
 
 
@@ -28,13 +28,9 @@ const EditableCell: React.FC<iEditableCellProps> = ({
 
   const cellNode = cellType === 'text' ? <Input size="small" allowClear autoComplete="off"/> : <DatePicker size="small" allowClear />
 
-if(editing && dataIndex === 'price') {
-  console.log(record[dataIndex])
-
-}
-  const isDate = useMemo(() => {
-    return dataIndex === 'createTime' || dataIndex === 'time'
-  }, [ dataIndex ])
+  // const isDate = useMemo(() => {
+  //   return dataIndex === 'createTime' || dataIndex === 'time'
+  // }, [ dataIndex ])
 
 
   return (

src/pages/Contract/Content/Income/index.tsx

@@ -117,9 +117,7 @@ const Income: React.FC<RouteComponentProps> = (props) => {
       setModalObj({ ...modalObj, visible: true, type })
     }, 300)
   }
-  const showCBtn = () => {
-    return !row.children && !row.contractCode && row.id
-  }
+  const isShowCBtn = !row.children && !row.contractCode && row.id
 
   return (
     <div className="wrap-contaniner">
@@ -187,7 +185,7 @@ const Income: React.FC<RouteComponentProps> = (props) => {
         <Slot position="right">
           <Button type="ghost" size="small" icon={<SvgIcon type="xxh-cog" />} className="pi-mg-right-3" style={{ color: '#007bff' }} onClick={() => setRuleModal({ ...ruleModal, visible: true })}>设置</Button>
           {
-            showCBtn ?
+            isShowCBtn ?
               <Authorization type="contract" auth="add">
                 <Button type="primary" size="small" onClick={() => setModalObj({ ...modalObj, type: 'create', visible: true })}>新建收入合同</Button>
               </Authorization>

src/pages/Contract/Content/Spending/index.tsx

@@ -114,9 +114,7 @@ const Expenditure: React.FC<RouteComponentProps> = ({ history }) => {
       setModalObj({ ...modalObj, visible: true, type })
     }, 300)
   }
-  const showCBtn = () => {
-    return !row.children && !row.contractCode && row.id
-  }
+  const isShowCBtn = !row.children && !row.contractCode && row.id
 
   return (
     <div className="wrap-contaniner">
@@ -184,7 +182,7 @@ const Expenditure: React.FC<RouteComponentProps> = ({ history }) => {
         <Slot position="right">
           <Button type="ghost" size="small" icon={<SvgIcon type="xxh-cog" />} className="pi-mg-right-3" style={{ color: '#007bff' }} onClick={() => setRuleModal({ ...ruleModal, visible: true })}>设置</Button>
           {
-            showCBtn ?
+            isShowCBtn ?
               <Authorization type="contract" auth="add">
                 <Button type="primary" size="small" onClick={() => setModalObj({ ...modalObj, type: 'create', visible: true })}>新建支出合同</Button>
               </Authorization>

src/pages/Contract/Content/Summary/components/Content/index.tsx

@@ -66,7 +66,7 @@ const Content: React.FC<iContentProps> = ({ data, type }) => {
     padding: 'auto',
     xField: 'month',
     yField: [ 'value', 'count' ],
-    slider: true,
+    slider: {},
     xAxis: {
       label: {
         formatter: (val) => dayjsFormat(val, 'YYYY年M月')

src/pages/Quality/Content/Info/Detail/api.ts

@@ -22,7 +22,7 @@ export async function apiGetQualityDetail(id: string) {
 export async function apiResfulQualityAudit(type: string, payload: object) {
   if (type === 'delete') {
     // 删除巡检记录
-    const { data } = await request.del('/api/quality', payload)
+    const { data } = await request.del('/api/quality/delete', payload)
     return data
   } else {
     const { data } = await request.post(`/api/quality_audit/${type}`, payload)

src/pages/Quality/Content/Info/Summary/columnChart.tsx

@@ -19,6 +19,7 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
         formatter: (val) => dayjsFormat(val, 'YYYY年M月')
       }
     },
+    slider: {},
     yAxis: {
       percentage: {
         label: {
@@ -26,7 +27,6 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
         }
       }
     },
-    slider: true,
     tooltip: {
       formatter: datum => {
         const obj = { name: '', value: '' }

src/pages/Safe/Content/Info/Detail/api.ts

@@ -22,7 +22,7 @@ export async function apiGetSafeDetail(id: string) {
 export async function apiResfulSafeAudit(type: string, payload: object) {
   if (type === 'delete') {
     // 删除巡检记录
-    const { data } = await request.del('/api/safe', payload)
+    const { data } = await request.del('/api/safe/delete', payload)
     return data
   } else {
     const { data } = await request.post(`/api/safe_audit/${type}`, payload)

src/pages/Safe/Content/Info/Summary/columnChart.tsx

@@ -9,6 +9,7 @@ interface iColumnChartProps {
   lineData: SafeLineChartType[]
 }
 const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
+
   const config: DualAxesConfig = {
     data: [ props.data.columnData, props.data.lineData ],
     xField: 'month',
@@ -18,6 +19,7 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
         formatter: (val) => dayjsFormat(val, 'YYYY年M月')
       }
     },
+    slider: {},
     yAxis: {
       percentage: {
         label: {
@@ -25,9 +27,6 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
         }
       }
     },
-    // xAxis: { label: { autoRotate: false } },
-    // scrollbar: { type: 'vertical' },
-    slider: true,
     tooltip: {
       formatter: datum => {
         const obj = { name: '', value: '' }

src/pages/Safe/Content/Info/Summary/pieChart.tsx

@@ -12,6 +12,7 @@ type iPieChartProps = {
   value: number
 }[]
 const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {
+
   const config:PieConfig = {
     appendPadding: 10,
     data,

src/utils/common/request.ts

@@ -90,7 +90,7 @@ service.interceptors.response.use(
       // 利用promise处理请求间隔
       const backoff = new Promise(resolve => {
         setTimeout(() => {
-          resolve()
+          resolve('')
         }, RETRY_DELAY | 1)
       })
       // 重新发起请求

src/utils/util.ts

@@ -214,10 +214,10 @@ const formatMoney = (num: string | number | undefined) => {
   }
   let newNum = ''
   if (typeof num === 'string') {
-    newNum = parseFloat(num).toFixed(2)
+    newNum = parseFloat(num).toFixed()
   } else {
     // number类型
-    newNum = num.toFixed(2)
+    newNum = num.toFixed()
   }
   return newNum.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
 }