Blame view

src/pages/Instalment/components/detail/detail.tsx 11.1 KB
PurelzMgnead authored
1
2
3
4
5
6
import {
  postOrderErpOrderStagesAdd,
  postOrderErpOrderStagesPayWaySaveOrUpdate,
  postOrderErpOrderStagesSearch,
  postOrderErpOrderStagesUpload,
} from '@/services';
PurelzMgnead authored
7
8
import { PlusOutlined } from '@ant-design/icons';
import {
PurelzMgnead authored
9
10
11
12
13
14
15
  ModalForm,
  ProCard,
  ProForm,
  ProFormDatePicker,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
PurelzMgnead authored
16
} from '@ant-design/pro-components';
PurelzMgnead authored
17
import { Button, Form, message } from 'antd';
PurelzMgnead authored
18
import { RcFile } from 'antd/es/upload';
PurelzMgnead authored
19
20
21
import { useEffect, useState } from 'react';
import PayWayDetail from '../payWayDetail/payWayDetail';
import ProductDetail from '../productDetail/productDetail';
PurelzMgnead authored
22
23

const waitTime = (time: number = 100) => {
PurelzMgnead authored
24
25
26
27
28
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
PurelzMgnead authored
29
30
};
PurelzMgnead authored
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export default ({ toReload }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
    id: undefined,
    contract: undefined,
    dateRange: undefined,
    terminal: undefined,
    orderStagesDeviceVoList: [],
    totalPrice: undefined,
    payWay: '30/30/30/10',
    annex: undefined,
    remark: undefined,
  });
  const [editProductBody, setEditProductBody] = useState([]);
  const [total, setTotal] = useState(0);
  const [payWayBody, setPayWayBody] = useState([]);
  const [otherBody, setOtherBody] = useState([]);
  const [isDis] = useState(true);
PurelzMgnead authored
49
PurelzMgnead authored
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  type OrderStagesWithListItem = {
    //文件编号
    id?: number;
    //合同编号
    contract?: string;
    //供应商名称
    vendor?: string;
    //签合同日期
    dateRange?: Date;
    //终端名称
    terminal?: string;
    orderStagesDeviceVoList: orderStagesDevice[];
    //合同总金额
    totalPrice?: number;
    //付款方式
    payWay?: string;
    //附件
    annex?: string;
    //备注
    remark?: string;
  };
PurelzMgnead authored
71
PurelzMgnead authored
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
  type orderStagesDevice = {
    //设备id
    dId: number;
    //设备名称
    deviceName: string;
    //设备型号
    deviceModel: string;
    //数量
    count: number;
    //单价
    unitPrice: number;
    //总价
    price: number;
  };

  function setSave(value) {
    setOtherBody(value);
  }
PurelzMgnead authored
90
PurelzMgnead authored
91
92
93
94
  useEffect(() => {
    setContextBody({ ...contextBody, totalPrice: total });
    form.setFieldValue('totalPrice', total);
  }, [total]);
PurelzMgnead authored
95
PurelzMgnead authored
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
  const handleInputChange = (value: string, no: number, priceNow?: number) => {
    if (value === '') {
      message.info('请输入比例!');
    } else {
      let totalPay = 0;
      const payValue: string[] = value.split('/');
      let body:
        | ((prevState: never[]) => never[])
        | { proportion: string; payPrice: number }[] = [];
      if (no === 1) {
        if (payValue.length !== 4) {
          message.warning('比例个数总和不为4个!');
        } else {
          payValue.forEach((item) => {
            totalPay += Number(item);
          });
PurelzMgnead authored
112
        }
PurelzMgnead authored
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
        if (totalPay !== 100) {
          message.warning('比例总和不为100!');
        } else {
          message.success('输入有效!');
          payValue.forEach((item) => {
            body.push({
              proportion: item + '%',
              payPrice: (Number(item) * total) / 100,
            });
          });
          setPayWayBody(body);
        }
      } else {
        payValue.forEach((item) => {
          totalPay += Number(item);
        });
        payValue.forEach((item) => {
          body.push({
            proportion: item + '%',
            payPrice: (Number(item) * priceNow) / 100,
          });
        });
        setPayWayBody(body);
      }
PurelzMgnead authored
137
    }
PurelzMgnead authored
138
139
140
141
142
143
144
145
146
147
148
149
  };

  function getEditProductBody(value) {
    setEditProductBody(value);
    let price = 0;
    value.map((obj) => (price += obj.count * obj.unitPrice));
    setTotal(price);
    setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
    if (contextBody.payWay === '') {
      handleInputChange('30/30/30/10', 0, price);
    } else {
      handleInputChange(contextBody.payWay, 0, price);
PurelzMgnead authored
150
    }
PurelzMgnead authored
151
  }
PurelzMgnead authored
152
PurelzMgnead authored
153
  function refresh() {
PurelzMgnead authored
154
    setEditProductBody([]);
PurelzMgnead authored
155
156
157
158
159
160
161
162
163
164
165
166
167
    setContextBody({
      id: undefined,
      contract: undefined,
      dateRange: undefined,
      terminal: undefined,
      orderStagesDeviceVoList: [],
      totalPrice: undefined,
      payWay: '30/30/30/10',
      annex: undefined,
      remark: undefined,
    });
    handleInputChange('30/30/30/10', 0, 0);
  }
PurelzMgnead authored
168
PurelzMgnead authored
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
  return (
    <ModalForm<OrderStagesWithListItem>
      title="新建"
      trigger={
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => refresh()}
        >
          新增
        </Button>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        if (editProductBody.length === 0) {
          message.error('请填写产品数据');
          return false;
PurelzMgnead authored
192
        }
PurelzMgnead authored
193
        let remakeValue = [];
PurelzMgnead authored
194
PurelzMgnead authored
195
196
197
198
199
200
201
202
203
204
205
206
207
208
        const formData = new FormData();
        let toSendEdit = {
          id: values.id || contextBody.id,
          contract: values.contract || contextBody.contract,
          vendor: values.vendor || contextBody.vendor,
          dateRange: values.dateRange || contextBody.dateRange,
          terminal: values.terminal || contextBody.terminal,
          orderStagesDeviceDoList:
            values.orderStagesDeviceVoList ||
            contextBody.orderStagesDeviceVoList,
          totalPrice: values.totalPrice || contextBody.totalPrice,
          payWay: values.payWay || contextBody.payWay,
          annex: contextBody.annex,
          remark: values.remark || contextBody.remark,
PurelzMgnead authored
209
          createByName: null,
PurelzMgnead authored
210
211
212
213
214
215
216
217
218
219
220
221
222
223
        };
        if (values.annex) {
          formData.append('file', values.annex[0].originFileObj as RcFile);
          const res = await postOrderErpOrderStagesUpload({
            data: formData,
            headers: {
              'Content-Type':
                'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
            },
          });
          if (res.data) {
            toSendEdit.annex = res.data;
          }
        }
PurelzMgnead authored
224
225
226
        toSendEdit.createByName = JSON.parse(
          localStorage.getItem('userInfo'),
        ).username;
PurelzMgnead authored
227
228
229
        const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
          data: { ...toSendEdit },
        });
PurelzMgnead authored
230
PurelzMgnead authored
231
232
        if (isSaveOrUpdate) {
          const promises = [];
PurelzMgnead authored
233
PurelzMgnead authored
234
235
          otherBody.forEach((item) => {
            let remakeItem = {
PurelzMgnead authored
236
              ossId: contextBody.id,
PurelzMgnead authored
237
              number: item.id,
PurelzMgnead authored
238
              dateRange: item.payDate,
PurelzMgnead authored
239
              fileName: item.fileName,
PurelzMgnead authored
240
              fileUrl: item.fileUrl,
PurelzMgnead authored
241
            };
PurelzMgnead authored
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
            // if (
            //   typeof item.fileUrl === 'object' &&
            //   item.fileUrl instanceof File
            // ) {
            //   const formData = new FormData();
            //   formData.append('file', item.fileUrl as RcFile);
            //   const uploadPromise = async () => {
            //     const res = await postOrderErpOrderStagesUpload({
            //       data: formData,
            //       headers: {
            //         'Content-Type':
            //           'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
            //       },
            //     });
            //     if (res.data) {
            //       remakeItem.fileUrl = res.data;
            //     }
            //   };
            //   promises.push(uploadPromise());
            // }
PurelzMgnead authored
262
263
            remakeValue.push(remakeItem);
          });
PurelzMgnead authored
264
PurelzMgnead authored
265
266
267
268
269
270
271
          let makeEnd = [];
          const getRetrunIDPromise = async () => {
            let returnOssID = await postOrderErpOrderStagesSearch({
              data: { contract: values.contract || contextBody.contract },
            });
            if (returnOssID) {
              makeEnd = remakeValue.map((item) => {
PurelzMgnead authored
272
                return { ...item, ossId: returnOssID.data.data[0].id };
PurelzMgnead authored
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
              });
            }
          };

          promises.push(getRetrunIDPromise());
          Promise.all(promises).then(async () => {
            await postOrderErpOrderStagesPayWaySaveOrUpdate({
              data: makeEnd,
            });
          });
          toReload();
        }
        await waitTime(2000);
        message.success('提交成功');
        return true;
      }}
    >
      <ProCard title="基本信息" headerBordered bordered>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="vendor"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="供应商名称"
            placeholder="请输入"
            initialValue={contextBody.vendor}
          />
PurelzMgnead authored
300
PurelzMgnead authored
301
302
303
304
305
306
307
308
          <ProFormText
            width="md"
            name="terminal"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="终端名称"
            placeholder="请输入"
            initialValue={contextBody.terminal}
          />
PurelzMgnead authored
309
PurelzMgnead authored
310
311
312
313
314
315
316
317
318
319
          <ProFormDatePicker
            name="dateRange"
            width="md"
            label="签合同日期"
            placeholder="请选择日期"
            fieldProps={{
              format: (value) => value.format('YYYY-MM-DD'),
            }}
            initialValue={contextBody.dateRange}
          />
PurelzMgnead authored
320
PurelzMgnead authored
321
322
323
324
325
326
327
328
329
330
331
332
333
          <ProFormText
            width="md"
            name="payWay"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="付款比例"
            placeholder="请输入"
            initialValue={contextBody.payWay}
            disabled={!isDis}
            onBlur={(e) => {
              setContextBody({ ...contextBody, payWay: e.target.value });
              handleInputChange(e.target.value, 1);
            }}
          />
PurelzMgnead authored
334
PurelzMgnead authored
335
336
337
338
339
340
341
342
          <ProFormText
            width="md"
            name="contract"
            rules={[{ required: true, message: '此项为必填项' }]}
            label="合同编号"
            placeholder="请输入"
            initialValue={contextBody.contract}
          />
PurelzMgnead authored
343
PurelzMgnead authored
344
345
346
347
348
349
          <ProFormUploadButton
            width="md"
            name="annex"
            max={1}
            label="合同附件"
          />
PurelzMgnead authored
350
PurelzMgnead authored
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
          <ProFormText
            width="md"
            name="totalPrice"
            label="合同金额"
            placeholder="请输入"
            disabled={isDis}
            initialValue={'0'}
          />
        </ProForm.Group>
      </ProCard>
      <ProCard
        title={
          <>
            <span style={{ color: 'red' }}>*</span>产品明细
          </>
        }
        style={{ marginTop: 10 }}
        headerBordered
        bordered
      >
        <ProductDetail
          productBody={[]}
          EditProductBody={getEditProductBody}
        ></ProductDetail>
      </ProCard>
PurelzMgnead authored
376
PurelzMgnead authored
377
378
379
380
381
382
383
384
385
386
387
388
      <ProCard
        title="付款信息"
        style={{ marginTop: 10 }}
        headerBordered
        bordered
      >
        <PayWayDetail
          payBody={payWayBody}
          thisId={null}
          currtSave={setSave}
        ></PayWayDetail>
      </ProCard>
PurelzMgnead authored
389
PurelzMgnead authored
390
391
392
393
394
395
396
397
398
399
      <ProCard style={{ marginTop: 10 }} headerBordered bordered>
        <ProFormTextArea
          label="备注"
          name="remark"
          initialValue={contextBody.remark}
        />
      </ProCard>
    </ModalForm>
  );
};