feat: cld2应收款截止申请时间未收款应收款金额相关

src/pages/Statistic/Product/InvoiceReceivables/index.jsx

@@ -7,6 +7,7 @@ import { Checkbox, DatePicker, Select, Space, Statistic, Table } from 'antd'
 import OptionSelect from '../../components/OptionSelect'
 import { disabledDate } from '@/utils/utils'
 import styles from './index.less'
+import classNames from 'classnames'
 
 export const collectedTypeEnum = {
   UNSTART: 0, // 未启动
@@ -16,6 +17,16 @@ const invoiceFormEnum = {
   0: { text: '纸质发票' },
   1: { text: '电子发票' }
 }
+const statusEnum = {
+  1: { text: '审批中' },
+  2: { text: '完成' },
+  3: { text: '撤回' },
+  4: { text: '结算' }
+}
+const invoiceTypeEnum = {
+  0: { text: '增值税普通发票' },
+  1: { text: '增值税专用发票' }
+}
 const { Option } = Select
 // const { RangePicker } = DatePicker
 
@@ -45,93 +56,178 @@ const InvoiceReceivables = () => {
     {
       dataIndex: 'userName',
       title: '申请人',
-      align: 'center'
+      align: 'center',
+      render: (userName, record) => (
+        <>{!record.isRed ? <span>{userName}</span> : <span className="text-red-500">{userName}</span>}</>
+      )
     },
     {
       dataIndex: 'invoiceSerial',
       title: '开票流水号',
-      align: 'center'
+      align: 'center',
+      render: (invoiceSerial, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{invoiceSerial}</span>
+          ) : (
+            <span className="text-red-500">{invoiceSerial}</span>
+          )}
+        </>
+      )
     },
     {
-      dataIndex: 'options',
+      dataIndex: 'status',
       title: '状态',
-      align: 'center'
+      align: 'center',
+      render: (status, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{statusEnum[status]?.text}</span>
+          ) : (
+            <span className="text-red-500">{statusEnum[status]?.text}</span>
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'invoiceCompany',
       title: '开票单位',
-      align: 'center'
+      align: 'center',
+      render: (invoiceCompany, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{invoiceCompany}</span>
+          ) : (
+            <span className="text-red-500">{invoiceCompany}</span>
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'invoiceForm',
       title: '发票形式',
       align: 'center',
-      render: (_, { invoiceForm }) => {
-        return invoiceFormEnum[invoiceForm]?.text
-      }
+      render: (invoiceForm, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{invoiceFormEnum[invoiceForm]?.text}</span>
+          ) : (
+            <span className="text-red-500">{invoiceFormEnum[invoiceForm]?.text}</span>
+          )}
+        </>
+      )
     },
     {
-      dataIndex: 'options',
+      dataIndex: 'invoiceType',
       title: '发票类型',
       align: 'center',
-      render: (_, record) => {
-        console.log(record.iid)
-      }
+      render: (invoiceType, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{invoiceTypeEnum[invoiceType]?.text}</span>
+          ) : (
+            <span className="text-red-500">{invoiceTypeEnum[invoiceType]?.text}</span>
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'invoicePrice',
       title: '开票金额',
-      align: 'right'
+      align: 'right',
+      render: (invoicePrice, record) => (
+        <>
+          {!record.isRed ? <span>{invoicePrice}</span> : <span className="text-red-500">{invoicePrice}</span>}
+        </>
+      )
     },
     {
       dataIndex: 'invoiceElement',
       title: '开票内容',
-      align: 'center'
+      align: 'center',
+      render: (invoiceElement, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{invoiceElement}</span>
+          ) : (
+            <span className="text-red-500">{invoiceElement}</span>
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'irid',
       title: '发票号',
-      align: 'center'
+      align: 'center',
+      render: (irid, record) => (
+        <>{!record.isRed ? <span>{irid}</span> : <span className="text-red-500">{irid}</span>}</>
+      )
     },
     {
       dataIndex: 'date',
       title: '发票申请时间',
-      align: 'center'
+      align: 'center',
+      render: (date, record) => (
+        <>{!record.isRed ? <span>{date}</span> : <span className="text-red-500">{date}</span>}</>
+      )
     },
     {
       dataIndex: 'receivablesSerial',
       title: '收款流水号',
-      align: 'center'
+      align: 'center',
+      render: (receivablesSerial, record) => (
+        <>
+          {!record.isRed ? (
+            <span>{receivablesSerial}</span>
+          ) : (
+            <span className="text-red-500">{receivablesSerial}</span>
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'bindPrice',
       title: '已收款金额',
-      align: 'right'
+      align: 'right',
+      render: (bindPrice, record) => (
+        <>{!record.isRed ? <span>{bindPrice}</span> : <span className="text-red-500">{bindPrice}</span>}</>
+      )
     },
     {
       dataIndex: 'receivables',
       title: '应收款金额',
       align: 'right',
-      render: (_, record) => {
-        return (
-          <Statistic
-            value={Number(record.invoicePrice - record.bindPrice)}
-            precision={2}
-            className={styles.statisticFontSize}
-          />
-        )
-      }
+      render: (_, record) => (
+        <>
+          {!record.isRed ? (
+            <Statistic
+              value={Number(record.invoicePrice - record.bindPrice)}
+              precision={2}
+              className={styles.statisticFontSize}
+            />
+          ) : (
+            <Statistic
+              value={Number(record.bindPrice)}
+              precision={2}
+              className={`${styles.statisticFontSize} ${styles.statisticFontColor}`}
+            />
+          )}
+        </>
+      )
     },
     {
       dataIndex: 'bindDate',
       title: '入账时间',
-      align: 'center'
+      align: 'center',
+      render: (bindDate, record) => (
+        <>{!record.isRed ? <span>{bindDate}</span> : <span className="text-red-500">{bindDate}</span>}</>
+      )
     }
   ]
   return (
     <div className="flex flex-col">
       <BasicTable
-        rowkey="iid"
+        rowkey="key"
         search={false}
         columns={columns}
         pagination={false}
@@ -140,7 +236,7 @@ const InvoiceReceivables = () => {
         toolbar={{
           title: <OptionSelect onChange={handleOptionChange} type="InvoiceReceivables" multiple={false} />,
           actions: [
-            <Space key="iid">
+            <Space key="key">
               <DatePicker.RangePicker
                 picker="month"
                 allowClear={false}
@@ -149,7 +245,14 @@ const InvoiceReceivables = () => {
                 value={state.params.startMonth}
                 onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
               />
-              <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>截止申请时间未收款</Checkbox>
+              <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>
+                <span
+                  className={classNames({
+                    'text-red-600': state.params.uncollected === 1
+                  })}>
+                  截止申请时间未收款
+                </span>
+              </Checkbox>
             </Space>
           ]
         }}
@@ -161,8 +264,8 @@ const InvoiceReceivables = () => {
           setState({ ...state, list, sum })
           return {
             data: list,
-            success: code === consts.RET_CODE.SUCCESS
-            // total: list?.length || 0
+            success: code === consts.RET_CODE.SUCCESS,
+            total: list?.length || 0
           }
         }}
         summary={data =>

src/pages/Statistic/Product/InvoiceReceivables/index.less

@@ -3,3 +3,8 @@
     font-size: 16px;
   }
 }
+.statisticFontColor {
+  :global(.ant-statistic-content) {
+    color: red;
+  }
+}