Blame view

src/pages/Invoice/InvoiceRecord/components/BankChooseModal.tsx 8.4 KB
zhongnanhuang authored
1
import EllipsisDiv from '@/components/Div/EllipsisDiv';
zhongnanhuang authored
2
import { RESPONSE_CODE } from '@/constants/enum';
zhongnanhuang authored
3
4
5
6
7
import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceBankStatementQueryBankStatement,
  postServiceInvoiceInvoiceWriteOff,
} from '@/services';
zhongnanhuang authored
8
import { FloatAdd, FloatSub, enumValueToLabel, formatDateTime } from '@/utils';
zhongnanhuang authored
9
import { formatDate } from '@/utils/time';
zhongnanhuang authored
10
11

import { ActionType, ProCard, ProTable } from '@ant-design/pro-components';
zhongnanhuang authored
12
import { Button, Divider, Flex, Modal, Tag, message } from 'antd';
zhongnanhuang authored
13
import { useRef, useState } from 'react';
14
import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../../constant';
zhongnanhuang authored
15
import '../index.less';
曾国涛 authored
16
17

export default ({ loadInvoiceData, invoiceId, setVisible, onClose }) => {
zhongnanhuang authored
18
  const [selectedStatement, setSelectedStatement] = useState([]);
zhongnanhuang authored
19
20
21
  const [selectedStatementIdSet, setSelectedStatementIdSet] = useState(
    new Set(),
  );
zhongnanhuang authored
22
  const [totalAmount, setTotalAmount] = useState(0);
zhongnanhuang authored
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

  // 添加元素到Set
  const addElement = (element) => {
    setSelectedStatementIdSet((prevSet) => new Set([...prevSet, element]));
  };

  // 从Set中删除元素
  const removeElement = (element) => {
    setSelectedStatementIdSet((prevSet) => {
      const newSet = new Set(prevSet);
      newSet.delete(element);
      return newSet;
    });
  };
zhongnanhuang authored
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
  const [btnLoading, setBtnLoading] = useState(false);

  const actionRef = useRef<ActionType>();
  const getTableCellText = (target: any) => {
    if (!target) {
      return '';
    }

    if (target.props) {
      return target.props.text;
    }

    return target;
  };

  /**
曾国涛 authored
54
   * 加载列表表格的各个列格式
zhongnanhuang authored
55
56
57
58
59
60
61
   */
  const bankStatementColumnsInit = () => {
    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
      let newItem = { ...item };
      let dataIndex = item.dataIndex;
      let dataType = item.valueType;
zhongnanhuang authored
62
63
64
65
      if (item.dataIndex === 'status') {
        newItem.hideInSearch = true;
      }
zhongnanhuang authored
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
      newItem.render = (text, record) => {
        let textValue = record[dataIndex];

        if (dataType === 'date') {
          textValue = formatDate(textValue);
        }

        if (dataType === 'dateTime') {
          textValue = formatDateTime(textValue);
        }

        if (dataType === 'money') {
          textValue = '¥' + textValue;
        }

        switch (dataIndex) {
          case 'invoiceStatus':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOCING_STATUS,
                )}
              />
            );
zhongnanhuang authored
92
93
          case 'status': {
            //这里状态不显示在筛选条件中,只能筛异常的流水
zhongnanhuang authored
94
95
96
97
98
99
100
101
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOICE_STATUS,
                )}
              />
            );
zhongnanhuang authored
102
          }
zhongnanhuang authored
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
          case 'payee':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  PAYEE_OPTIONS,
                )}
              />
            );

          default:
            return <EllipsisDiv text={getTableCellText(textValue)} />;
        }
      };

      return newItem;
    });

    columns.push({
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 70,
      render: (text, record) => [
        <Button
          className="p-0"
          key="choose"
          type="link"
          onClick={() => {
zhongnanhuang authored
133
134
            let amount = record.loanAmount || record.transactionAmount || 0;
zhongnanhuang authored
135
136
137
138
139
140
141
142
            //已经选中,取消选中
            if (selectedStatementIdSet.has(record.id)) {
              setSelectedStatement(
                selectedStatement.filter((item) => {
                  return item.id !== record.id;
                }),
              );
              removeElement(record.id);
zhongnanhuang authored
143
              setTotalAmount(parseFloat(FloatSub(totalAmount, amount)));
zhongnanhuang authored
144
145
146
147
148
149
            } else {
              //添加到已选中区域中
              let newSelectedStatement = [...selectedStatement];
              newSelectedStatement.push(record);
              setSelectedStatement(newSelectedStatement);
              addElement(record.id);
zhongnanhuang authored
150
              setTotalAmount(FloatAdd(totalAmount, amount));
zhongnanhuang authored
151
            }
zhongnanhuang authored
152
153
          }}
        >
zhongnanhuang authored
154
          {selectedStatementIdSet.has(record.id) ? '取消选中' : '选中'}
zhongnanhuang authored
155
156
157
158
159
160
161
        </Button>,
      ],
    });

    return columns;
  };
zhongnanhuang authored
162
163
164
165
  /**
   * 删除已选中
   * @param record
   */
zhongnanhuang authored
166
  const removeSelectedStatement = (record: any) => {
zhongnanhuang authored
167
168
169
170
171
172
    setSelectedStatement(
      selectedStatement.filter((item) => {
        return item.id !== record.id;
      }),
    );
    removeElement(record.id);
zhongnanhuang authored
173
174
175
176
177
178
  };

  const showSelectedStatement = () => {
    let i = 0;

    let tags = selectedStatement.map((item) => {
zhongnanhuang authored
179
180
181
182
183
184
185
186
187
188
189
190
191
192
      let tagText = item.id;

      if (item.payeePayerName) {
        tagText += ' ' + item.payeePayerName + ' ';
      }

      if (item.loanAmount) {
        tagText += item.loanAmount + ' ';
      }

      if (item.transactionAmount) {
        tagText += item.transactionAmount;
      }
zhongnanhuang authored
193
194
195
196
197
      return (
        <Tag
          key={i++}
          closable={true}
          style={{ userSelect: 'none' }}
zhongnanhuang authored
198
          color="blue"
zhongnanhuang authored
199
200
201
202
203
          onClose={(e) => {
            e.preventDefault(); //需要加上这句代码,不然删除tag时,当前tag的下一个tag会被设置ant-tag-hidden
            removeSelectedStatement(item);
          }}
        >
zhongnanhuang authored
204
          <span>{tagText}</span>
zhongnanhuang authored
205
206
207
208
209
210
211
212
213
214
215
216
        </Tag>
      );
    });

    return tags;
  };

  return (
    <>
      <Modal
        open
        width="80%"
zhongnanhuang authored
217
        title="添加银行流水"
zhongnanhuang authored
218
        className="bank-statement-choose"
zhongnanhuang authored
219
220
221
222
223
224
225
226
227
228
229
        onOk={async () => {
          setBtnLoading(true);
          let bankStatementIds = selectedStatement?.map((item) => {
            return item.id;
          });
          let res = await postServiceInvoiceInvoiceWriteOff({
            data: {
              invoiceId: invoiceId,
              bankStatementIds: bankStatementIds,
            },
          });
曾国涛 authored
230
231
232
          setTimeout(() => {
            loadInvoiceData();
          }, 500);
zhongnanhuang authored
233
          if (res.result === RESPONSE_CODE.SUCCESS) {
zhongnanhuang authored
234
235
236
237
238
239
            if (res.data?.length > 0) {
              message.info(res.data);
            } else {
              message.success(res.message);
            }
zhongnanhuang authored
240
241
242
243
244
245
246
247
248
249
250
251
            onClose();
          }
          setBtnLoading(false);
        }}
        okButtonProps={{
          loading: btnLoading,
        }}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <Divider orientation="left" plain>
zhongnanhuang authored
252
          已选中(合计:¥{totalAmount})
zhongnanhuang authored
253
254
        </Divider>
        <ProCard className="mb-[16px]" bordered style={{}}>
zhongnanhuang authored
255
256
          <Flex wrap="wrap" gap="small">
            {showSelectedStatement()}
zhongnanhuang authored
257
258
259
          </Flex>
        </ProCard>
zhongnanhuang authored
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
        <ProTable
          columns={bankStatementColumnsInit()}
          actionRef={actionRef}
          cardBordered
          pagination={{
            pageSize: 10,
          }}
          editable={{
            type: 'multiple',
            onSave: async (rowKey, data) => {
              console.log(rowKey, data);
            },
            actionRender: (row, config, defaultDom) => [
              defaultDom.save,
              defaultDom.cancel,
            ],
          }}
          request={async (params) => {
            const res = await postServiceBankStatementQueryBankStatement({
zhongnanhuang authored
279
              data: { ...params, status: 'ABNORMAL' },
zhongnanhuang authored
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
            });
            if (res) {
              return {
                data: res?.data?.data || [],
                total: res?.data?.total || 0,
              };
            }
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
            defaultValue: {
              option: { fixed: 'right', disable: true },
            },
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          form={{}}
          dateFormatter="string"
          headerTitle="银行流水列表"
          scroll={{ x: 1400, y: 360 }}
          toolBarRender={() => []}
        />
zhongnanhuang authored
313
314
315
316
      </Modal>
    </>
  );
};