canrd-main / canrd-erp-front · Commits

Commit d5cb3ed2eb1e38f5af0d148ef69450bcf8a43502

Authored by PurelzMgnead
1 parent cc61036e
build: skipped

feat: update分期账单

Inline Side-by-side
Showing 10 changed files with 1952 additions and 1998 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 10 of 13 files are displayed.

.umirc.ts
  View file @d5cb3ed
... ... @@ -63,7 +63,7 @@ export default defineConfig({
63 63 path: '/instalment',
64 64 component: './Instalment',
65 65 icon: 'BookOutlined',
66   - access: 'canReadAdminAndFinance',
  66 + access: 'canReadLinda',
67 67 },
68 68 {
69 69 name: '打印',
... ...
src/access.ts
  View file @d5cb3ed
1 1 export default (initialState: API.UserInfo) => {
2 2 // 在这里按照初始化数据定义项目中的权限，统一管理
3 3 // 参考文档 https://umijs.org/docs/max/access
4   - const { roleSmallVO } = initialState;
  4 + const { roleSmallVO, username } = initialState;
5 5  
6 6 return {
7 7 canReadAdmin: roleSmallVO?.code === 'admin',
  8 + canReadLinda: username === 'Linda' || '吴量',
8 9 canReadProcure: roleSmallVO?.code === 'procure',
9 10 canReadAdminAndFinance:
10 11 roleSmallVO?.code === 'admin' || roleSmallVO?.code === 'finance',
... ...
src/pages/Instalment/components/comfire/comfire.tsx
  View file @d5cb3ed
1   -import { PlusOutlined } from '@ant-design/icons';
2   -import {
3   - ModalForm,
4   - ProForm,
5   - ProFormDateRangePicker,
6   - ProFormSelect,
7   - ProFormText,
8   -} from '@ant-design/pro-components';
9   -import { Button, Form, message } from 'antd';
  1 +import { ModalForm } from '@ant-design/pro-components';
  2 +import { Form, message } from 'antd';
10 3 import { useState } from 'react';
11 4  
12 5 const waitTime = (time: number = 100) => {
... ... @@ -17,14 +10,13 @@ const waitTime = (time: number = 100) => {
17 10 });
18 11 };
19 12  
20   -export default ({currtDid,sureDelete}) => {
  13 +export default ({ currtDid, sureDelete }) => {
21 14 const [form] = Form.useForm<{ name: string; company: string }>();
22   - const [ids,setIds]=useState([]);
  15 + const [ids, setIds] = useState([]);
23 16  
24   - function getIds(){
25   - // console.log(currtDid);
26   - setIds([])
27   - setIds(currtDid)
  17 + function getIds() {
  18 + setIds([]);
  19 + setIds(currtDid);
28 20 }
29 21 return (
30 22 <ModalForm<{
... ... @@ -32,7 +24,11 @@ export default ({currtDid,sureDelete}) =&gt; {
32 24 company: string;
33 25 }>
34 26 trigger={
35   - <a onClick={()=>{getIds()}}>
  27 + <a
  28 + onClick={() => {
  29 + getIds();
  30 + }}
  31 + >
36 32 删除
37 33 </a>
38 34 }
... ... @@ -41,18 +37,16 @@ export default ({currtDid,sureDelete}) =&gt; {
41 37 width={190}
42 38 modalProps={{
43 39 destroyOnClose: true,
44   - // onCancel: () => console.log('run'),
45 40 }}
46   - onFinish={async (values) => {
  41 + onFinish={async () => {
47 42 await waitTime(100);
48 43 sureDelete([ids]);
49   - // console.log(values.name);
50 44 message.success('提交成功');
51 45 return true;
52 46 }}
53 47 >
54   - <br/>
  48 + <br />
55 49 <h2>确定删除吗</h2>
56 50 </ModalForm>
57 51 );
58   -};
59 52 \ No newline at end of file
  53 +};
... ...
src/pages/Instalment/components/detail/detail.tsx
  View file @d5cb3ed
  1 +import {
  2 + postOrderErpOrderStagesAdd,
  3 + postOrderErpOrderStagesPayWaySaveOrUpdate,
  4 + postOrderErpOrderStagesSearch,
  5 + postOrderErpOrderStagesUpload,
  6 +} from '@/services';
1 7 import { PlusOutlined } from '@ant-design/icons';
2 8 import {
3   - ModalForm,
4   - ProCard,
5   - ProForm,
6   - ProFormDatePicker,
7   - ProFormText,
8   - ProFormTextArea,
9   - ProFormUploadButton,
  9 + ModalForm,
  10 + ProCard,
  11 + ProForm,
  12 + ProFormDatePicker,
  13 + ProFormText,
  14 + ProFormTextArea,
  15 + ProFormUploadButton,
10 16 } from '@ant-design/pro-components';
11   -import ProductDetail from '../productDetail/productDetail';
12   -import PayWayDetail from '../payWayDetail/payWayDetail';
13   -import { Button, Form,message } from 'antd';
14   -import { useEffect,useState } from 'react';
15   -import { postOrderErpOrderStagesAdd, postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload } from '@/services';
  17 +import { Button, Form, message } from 'antd';
16 18 import { RcFile } from 'antd/es/upload';
  19 +import { useEffect, useState } from 'react';
  20 +import PayWayDetail from '../payWayDetail/payWayDetail';
  21 +import ProductDetail from '../productDetail/productDetail';
17 22  
18 23 const waitTime = (time: number = 100) => {
19   - return new Promise((resolve) => {
20   - setTimeout(() => {
21   - resolve(true);
22   - }, time);
23   - });
  24 + return new Promise((resolve) => {
  25 + setTimeout(() => {
  26 + resolve(true);
  27 + }, time);
  28 + });
24 29 };
25 30  
26   -export default ({ toReload}) => {
27   - const [form] = Form.useForm<{ name: string; company: string }>();
28   - const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
29   - id:undefined,
30   - contract:undefined,
31   - dateRange:undefined,
32   - terminal:undefined,
33   - orderStagesDeviceVoList:[],
34   - totalPrice:undefined,
35   - payWay:"30/30/30/10",
36   - annex:undefined,
37   - remark:undefined
38   - });
39   - const [editProductBody, setEditProductBody] = useState([]);
40   - const [total, setTotal] = useState(0);
41   - const [payWayBody, setPayWayBody] = useState([])
42   - const [otherBody, setOtherBody] = useState([])
43   - const [isDis,setIsDis]=useState(true)
  31 +export default ({ toReload }) => {
  32 + const [form] = Form.useForm<{ name: string; company: string }>();
  33 + const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
  34 + id: undefined,
  35 + contract: undefined,
  36 + dateRange: undefined,
  37 + terminal: undefined,
  38 + orderStagesDeviceVoList: [],
  39 + totalPrice: undefined,
  40 + payWay: '30/30/30/10',
  41 + annex: undefined,
  42 + remark: undefined,
  43 + });
  44 + const [editProductBody, setEditProductBody] = useState([]);
  45 + const [total, setTotal] = useState(0);
  46 + const [payWayBody, setPayWayBody] = useState([]);
  47 + const [otherBody, setOtherBody] = useState([]);
  48 + const [isDis] = useState(true);
44 49  
45   - type OrderStagesWithListItem = {
46   - //文件编号
47   - id?: number;
48   - //合同编号
49   - contract?: string;
50   - //供应商名称
51   - vendor?: string;
52   - //签合同日期
53   - dateRange?: Date;
54   - //终端名称
55   - terminal?: string;
56   - orderStagesDeviceVoList: orderStagesDevice[]
57   - //合同总金额
58   - totalPrice?: number;
59   - //付款方式
60   - payWay?: string;
61   - //附件
62   - annex?: string;
63   - //备注
64   - remark?: string;
65   - };
  50 + type OrderStagesWithListItem = {
  51 + //文件编号
  52 + id?: number;
  53 + //合同编号
  54 + contract?: string;
  55 + //供应商名称
  56 + vendor?: string;
  57 + //签合同日期
  58 + dateRange?: Date;
  59 + //终端名称
  60 + terminal?: string;
  61 + orderStagesDeviceVoList: orderStagesDevice[];
  62 + //合同总金额
  63 + totalPrice?: number;
  64 + //付款方式
  65 + payWay?: string;
  66 + //附件
  67 + annex?: string;
  68 + //备注
  69 + remark?: string;
  70 + };
66 71  
67   - type orderStagesDevice = {
68   - //设备id
69   - dId: number;
70   - //设备名称
71   - deviceName: string;
72   - //设备型号
73   - deviceModel: string;
74   - //数量
75   - count: number;
76   - //单价
77   - unitPrice: number;
78   - //总价
79   - price: number;
80   - }
  72 + type orderStagesDevice = {
  73 + //设备id
  74 + dId: number;
  75 + //设备名称
  76 + deviceName: string;
  77 + //设备型号
  78 + deviceModel: string;
  79 + //数量
  80 + count: number;
  81 + //单价
  82 + unitPrice: number;
  83 + //总价
  84 + price: number;
  85 + };
  86 +
  87 + function setSave(value) {
  88 + setOtherBody(value);
  89 + }
81 90  
82   - function getEditProductBody(value) {
83   - // console.log(value);
  91 + useEffect(() => {
  92 + setContextBody({ ...contextBody, totalPrice: total });
  93 + form.setFieldValue('totalPrice', total);
  94 + }, [total]);
84 95  
85   - setEditProductBody(value)
86   - let price = 0;
87   - value.map(obj => (
88   - price += (obj.count * obj.unitPrice)
89   - ));
90   - setTotal(price);
91   - setContextBody({ ...contextBody, orderStagesDeviceVoList: value })
92   - if (contextBody.payWay==="") {
93   - handleInputChange("30/30/30/10", 0, price)
94   - }else{
95   - handleInputChange(contextBody.payWay, 0, price)
  96 + const handleInputChange = (value: string, no: number, priceNow?: number) => {
  97 + if (value === '') {
  98 + message.info('请输入比例!');
  99 + } else {
  100 + let totalPay = 0;
  101 + const payValue: string[] = value.split('/');
  102 + let body:
  103 + | ((prevState: never[]) => never[])
  104 + | { proportion: string; payPrice: number }[] = [];
  105 + if (no === 1) {
  106 + if (payValue.length !== 4) {
  107 + message.warning('比例个数总和不为4个!');
  108 + } else {
  109 + payValue.forEach((item) => {
  110 + totalPay += Number(item);
  111 + });
96 112 }
  113 + if (totalPay !== 100) {
  114 + message.warning('比例总和不为100!');
  115 + } else {
  116 + message.success('输入有效!');
  117 + payValue.forEach((item) => {
  118 + body.push({
  119 + proportion: item + '%',
  120 + payPrice: (Number(item) * total) / 100,
  121 + });
  122 + });
  123 + setPayWayBody(body);
  124 + }
  125 + } else {
  126 + payValue.forEach((item) => {
  127 + totalPay += Number(item);
  128 + });
  129 + payValue.forEach((item) => {
  130 + body.push({
  131 + proportion: item + '%',
  132 + payPrice: (Number(item) * priceNow) / 100,
  133 + });
  134 + });
  135 + setPayWayBody(body);
  136 + }
97 137 }
98   - []
99   - function setSave(value) {
100   - // console.log(value);
101   - setOtherBody(value)
  138 + };
  139 +
  140 + function getEditProductBody(value) {
  141 + setEditProductBody(value);
  142 + let price = 0;
  143 + value.map((obj) => (price += obj.count * obj.unitPrice));
  144 + setTotal(price);
  145 + setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
  146 + if (contextBody.payWay === '') {
  147 + handleInputChange('30/30/30/10', 0, price);
  148 + } else {
  149 + handleInputChange(contextBody.payWay, 0, price);
102 150 }
  151 + }
103 152  
104   - useEffect(() => {
105   - setContextBody({ ...contextBody, totalPrice: total })
106   - form.setFieldValue('totalPrice', total);
107   - }, [total])
  153 + function refresh() {
  154 + setContextBody({
  155 + id: undefined,
  156 + contract: undefined,
  157 + dateRange: undefined,
  158 + terminal: undefined,
  159 + orderStagesDeviceVoList: [],
  160 + totalPrice: undefined,
  161 + payWay: '30/30/30/10',
  162 + annex: undefined,
  163 + remark: undefined,
  164 + });
  165 + handleInputChange('30/30/30/10', 0, 0);
  166 + }
108 167  
109   - const handleInputChange = (value: string, no: number, priceNow?: number) => {
110   - if (value==="") {
111   - message.info("请输入比例!")
112   - }else{
113   - let totalPay = 0;
114   - const payValue: string[] = value.split("/")
115   - let body: ((prevState: never[]) => never[]) | { proportion: string; payPrice: number; }[] = [];
116   - if (no === 1) {
117   - if (payValue.length !== 4) {
118   - message.warning('比例个数总和不为4个!');
119   - } else {
120   - payValue.forEach((item, index) => {
121   - totalPay += Number(item)
122   - })
123   - }
124   - if (totalPay != 100) {
125   - message.warning('比例总和不为100!');
126   - } else {
127   - message.success('输入有效!');
128   - payValue.forEach((item, index) => {
129   - body.push({ proportion: item + "%", payPrice: Number(item) * total / 100 })
130   - })
131   - setPayWayBody(body)
132   - }
133   - } else {
134   - payValue.forEach((item, index) => {
135   - totalPay += Number(item)
136   - })
137   - payValue.forEach((item, index) => {
138   - body.push({ proportion: item + "%", payPrice: Number(item) * priceNow / 100 })
139   - })
140   - setPayWayBody(body)
141   - }
  168 + return (
  169 + <ModalForm<OrderStagesWithListItem>
  170 + title="新建"
  171 + trigger={
  172 + <Button
  173 + key="button"
  174 + icon={<PlusOutlined />}
  175 + type="primary"
  176 + onClick={() => refresh()}
  177 + >
  178 + 新增
  179 + </Button>
  180 + }
  181 + form={form}
  182 + autoFocusFirstInput
  183 + modalProps={{
  184 + destroyOnClose: true,
  185 + }}
  186 + submitTimeout={2000}
  187 + onFinish={async (values) => {
  188 + if (editProductBody.length === 0) {
  189 + message.error('请填写产品数据');
  190 + return false;
142 191 }
143   - };
  192 + let remakeValue = [];
144 193  
145   - function refresh(){
146   - setContextBody({
147   - id:undefined,
148   - contract:undefined,
149   - dateRange:undefined,
150   - terminal:undefined,
151   - orderStagesDeviceVoList:[],
152   - totalPrice:undefined,
153   - payWay:"30/30/30/10",
154   - annex:undefined,
155   - remark:undefined
156   - })
157   - handleInputChange("30/30/30/10",0,0)
158   - }
  194 + const formData = new FormData();
  195 + let toSendEdit = {
  196 + id: values.id || contextBody.id,
  197 + contract: values.contract || contextBody.contract,
  198 + vendor: values.vendor || contextBody.vendor,
  199 + dateRange: values.dateRange || contextBody.dateRange,
  200 + terminal: values.terminal || contextBody.terminal,
  201 + orderStagesDeviceDoList:
  202 + values.orderStagesDeviceVoList ||
  203 + contextBody.orderStagesDeviceVoList,
  204 + totalPrice: values.totalPrice || contextBody.totalPrice,
  205 + payWay: values.payWay || contextBody.payWay,
  206 + annex: contextBody.annex,
  207 + remark: values.remark || contextBody.remark,
  208 + };
  209 + if (values.annex) {
  210 + formData.append('file', values.annex[0].originFileObj as RcFile);
  211 + const res = await postOrderErpOrderStagesUpload({
  212 + data: formData,
  213 + headers: {
  214 + 'Content-Type':
  215 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  216 + },
  217 + });
  218 + if (res.data) {
  219 + toSendEdit.annex = res.data;
  220 + }
  221 + }
  222 + const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
  223 + data: { ...toSendEdit },
  224 + });
159 225  
160   - return (
161   - <ModalForm<OrderStagesWithListItem>
162   - title="新建"
163   - trigger={
164   - <Button
165   - key="button"
166   - icon={<PlusOutlined />}
167   - type="primary"
168   - onClick={()=>refresh()}
169   - >
170   - 新增
171   - </Button>
172   - }
173   - form={form}
174   - autoFocusFirstInput
175   - modalProps={{
176   - destroyOnClose: true,
177   - // onCancel: () => console.log('run'),
178   - }}
179   - // onChange={(e) => {
180   - // console.log(e);
181   -
182   - // console.log(e.target.value);
183   - // }}
184   - submitTimeout={2000}
185   - onFinish={async (values) => {
186   - if (editProductBody.length==0) {
187   - message.error("请填写产品数据")
188   - return false;
189   - }
190   - // console.log(values);
191   - // console.log(otherBody);
192   - let remakeValue = [];
193   - let remakeItem = {}
194   -
195   - const formData = new FormData();
196   - // let toSendEdit={...values,orderStagesDeviceVoList:contextBody.orderStagesDeviceVoList};
197   - let toSendEdit = {
198   - id: values.id || contextBody.id,
199   - contract: values.contract || contextBody.contract,
200   - vendor: values.vendor || contextBody.vendor,
201   - dateRange: values.dateRange || contextBody.dateRange,
202   - terminal: values.terminal || contextBody.terminal,
203   - orderStagesDeviceDoList: values.orderStagesDeviceVoList || contextBody.orderStagesDeviceVoList,
204   - totalPrice: values.totalPrice || contextBody.totalPrice,
205   - payWay: values.payWay || contextBody.payWay,
206   - annex: contextBody.annex,
207   - remark: values.remark || contextBody.remark,
208   - };
209   - if (values.annex) {
210   - formData.append('file', values.annex[0].originFileObj as RcFile);
211   - const res = await postOrderErpOrderStagesUpload({
212   - data: formData,
213   - headers: {
214   - 'Content-Type':
215   - 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
216   - }
217   - });
218   - if (res.data) {
219   - // console.log(values)
220   - // console.log(contextBody);
221   - toSendEdit.annex = res.data
222   - }
223   - }
224   - const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
225   - data: { ...toSendEdit }
226   - })
227   -
228   - if (isSaveOrUpdate) {
229   - // 创建一个用于存储所有异步操作的Promise数组
230   - const promises = [];
  226 + if (isSaveOrUpdate) {
  227 + const promises = [];
231 228  
232   - otherBody.forEach(item => {
233   - let remakeItem = { ossId: item.ossId, number: item.id, dataRange: item.payDate, fileName: item.fileName };
234   - if (typeof item.fileUrl === 'object' && item.fileUrl instanceof File) {
235   - const formData = new FormData();
236   - formData.append('file', item.fileUrl as RcFile);
237   - const uploadPromise = async () => {
238   - const res = await postOrderErpOrderStagesUpload({
239   - data: formData,
240   - headers: {
241   - 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
242   - }
243   - });
244   - if (res.data) {
245   - remakeItem.fileUrl = res.data;
246   - }
247   - };
248   - promises.push(uploadPromise());
249   - }
250   - remakeValue.push(remakeItem);
  229 + otherBody.forEach((item) => {
  230 + let remakeItem = {
  231 + ossId: item.ossId,
  232 + number: item.id,
  233 + dataRange: item.payDate,
  234 + fileName: item.fileName,
  235 + };
  236 + if (
  237 + typeof item.fileUrl === 'object' &&
  238 + item.fileUrl instanceof File
  239 + ) {
  240 + const formData = new FormData();
  241 + formData.append('file', item.fileUrl as RcFile);
  242 + const uploadPromise = async () => {
  243 + const res = await postOrderErpOrderStagesUpload({
  244 + data: formData,
  245 + headers: {
  246 + 'Content-Type':
  247 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  248 + },
251 249 });
252   -
253   - let makeEnd=[]
254   - const getRetrunIDPromise=async()=>{
255   - let returnOssID=await postOrderErpOrderStagesSearch({
256   - data:{contract: values.contract || contextBody.contract,},
257   - })
258   - console.log(returnOssID.data);
259   -
260   - if (returnOssID) {
261   - makeEnd = remakeValue.map(item => {
262   - return { ...item, ossId: returnOssID.data[0].id };
263   - });
264   -
265   - // console.log(makeEnd);
266   - }
  250 + if (res.data) {
  251 + remakeItem.fileUrl = res.data;
267 252 }
  253 + };
  254 + promises.push(uploadPromise());
  255 + }
  256 + remakeValue.push(remakeItem);
  257 + });
268 258  
269   - promises.push(getRetrunIDPromise());
  259 + let makeEnd = [];
  260 + const getRetrunIDPromise = async () => {
  261 + let returnOssID = await postOrderErpOrderStagesSearch({
  262 + data: { contract: values.contract || contextBody.contract },
  263 + });
  264 + console.log(returnOssID.data);
270 265  
271   - // 使用Promise.all等待所有异步操作完成后再执行保存操作
272   - Promise.all(promises).then(
273   - async () => {
274   - // console.log(makeEnd);
275   - await postOrderErpOrderStagesPayWaySaveOrUpdate({
276   - data: makeEnd
277   - });
278   - });
279   - // console.log(isSaveOrUpdate);
280   - toReload()
281   - }
282   - await waitTime(2000);
283   - message.success('提交成功');
284   - return true;
285   - }}
286   - >
287   - <ProCard
288   - title="基本信息"
289   - headerBordered
290   - bordered
291   - >
292   - <ProForm.Group>
293   - <ProFormText
294   - width="md"
295   - name="vendor"
296   - rules={[{ required: true, message: '此项为必填项' }]}
297   - label="供应商名称"
298   - placeholder="请输入"
299   - initialValue={contextBody.vendor}
300   - />
  266 + if (returnOssID) {
  267 + makeEnd = remakeValue.map((item) => {
  268 + return { ...item, ossId: returnOssID.data[0].id };
  269 + });
  270 + }
  271 + };
  272 +
  273 + promises.push(getRetrunIDPromise());
  274 + Promise.all(promises).then(async () => {
  275 + await postOrderErpOrderStagesPayWaySaveOrUpdate({
  276 + data: makeEnd,
  277 + });
  278 + });
  279 + toReload();
  280 + }
  281 + await waitTime(2000);
  282 + message.success('提交成功');
  283 + return true;
  284 + }}
  285 + >
  286 + <ProCard title="基本信息" headerBordered bordered>
  287 + <ProForm.Group>
  288 + <ProFormText
  289 + width="md"
  290 + name="vendor"
  291 + rules={[{ required: true, message: '此项为必填项' }]}
  292 + label="供应商名称"
  293 + placeholder="请输入"
  294 + initialValue={contextBody.vendor}
  295 + />
301 296  
302   - <ProFormText
303   - width="md"
304   - name="terminal"
305   - rules={[{ required: true, message: '此项为必填项' }]}
306   - label="终端名称"
307   - placeholder="请输入"
308   - initialValue={contextBody.terminal}
309   - />
  297 + <ProFormText
  298 + width="md"
  299 + name="terminal"
  300 + rules={[{ required: true, message: '此项为必填项' }]}
  301 + label="终端名称"
  302 + placeholder="请输入"
  303 + initialValue={contextBody.terminal}
  304 + />
310 305  
311   - <ProFormDatePicker
312   - name="dateRange"
313   - width="md"
314   - label="签合同日期"
315   - placeholder="请选择日期"
316   - fieldProps={{
317   - format: (value) => value.format('YYYY-MM-DD'),
318   - }}
319   - initialValue={contextBody.dateRange}
320   - />
  306 + <ProFormDatePicker
  307 + name="dateRange"
  308 + width="md"
  309 + label="签合同日期"
  310 + placeholder="请选择日期"
  311 + fieldProps={{
  312 + format: (value) => value.format('YYYY-MM-DD'),
  313 + }}
  314 + initialValue={contextBody.dateRange}
  315 + />
321 316  
322   - <ProFormText
323   - width="md"
324   - name="payWay"
325   - rules={[{ required: true, message: '此项为必填项' }]}
326   - label="付款比例"
327   - placeholder="请输入"
328   - initialValue={contextBody.payWay}
329   - disabled={!isDis}
330   - onBlur={(e) => {
331   - setContextBody({...contextBody,payWay:e.target.value})
332   - handleInputChange(e.target.value, 1);
333   - }}
334   - />
  317 + <ProFormText
  318 + width="md"
  319 + name="payWay"
  320 + rules={[{ required: true, message: '此项为必填项' }]}
  321 + label="付款比例"
  322 + placeholder="请输入"
  323 + initialValue={contextBody.payWay}
  324 + disabled={!isDis}
  325 + onBlur={(e) => {
  326 + setContextBody({ ...contextBody, payWay: e.target.value });
  327 + handleInputChange(e.target.value, 1);
  328 + }}
  329 + />
335 330  
336   - <ProFormText
337   - width="md"
338   - name="contract"
339   - rules={[{ required: true, message: '此项为必填项' }]}
340   - label="合同编号"
341   - placeholder="请输入"
342   - initialValue={contextBody.contract}
343   - />
  331 + <ProFormText
  332 + width="md"
  333 + name="contract"
  334 + rules={[{ required: true, message: '此项为必填项' }]}
  335 + label="合同编号"
  336 + placeholder="请输入"
  337 + initialValue={contextBody.contract}
  338 + />
344 339  
345   - <ProFormUploadButton width="md"
346   - name="annex"
347   - max={1}
348   - onChange={(value) => {
349   - // console.log(value);
350   - }}
351   - label="合同附件" />
  340 + <ProFormUploadButton
  341 + width="md"
  342 + name="annex"
  343 + max={1}
  344 + label="合同附件"
  345 + />
352 346  
353   - <ProFormText
354   - width="md"
355   - name="totalPrice"
356   - label="合同金额"
357   - placeholder="请输入"
358   - // rules={[{ required: true, message: '此项为必填项' }]}
359   - // value={contextBody.totalPrice}
360   - // onBlur={(e) => {
361   - // if (e.target.value !== '0') {
362   - // setIsDis(false);
363   - // setTotal(e.target.value);
364   - // } else {
365   - // setIsDis(true);
366   - // }
367   - // }}
368   - disabled={isDis}
369   - initialValue={"0"}
370   - />
371   - </ProForm.Group>
372   - </ProCard>
373   - <ProCard
374   - title={<><span style={{ color: 'red' }}>*</span>产品明细</>}
375   - style={{ marginTop: 10 }}
376   - headerBordered
377   - bordered
378   - >
379   - <ProductDetail productBody={[]} EditProductBody={getEditProductBody}></ProductDetail>
380   - </ProCard>
  347 + <ProFormText
  348 + width="md"
  349 + name="totalPrice"
  350 + label="合同金额"
  351 + placeholder="请输入"
  352 + disabled={isDis}
  353 + initialValue={'0'}
  354 + />
  355 + </ProForm.Group>
  356 + </ProCard>
  357 + <ProCard
  358 + title={
  359 + <>
  360 + <span style={{ color: 'red' }}>*</span>产品明细
  361 + </>
  362 + }
  363 + style={{ marginTop: 10 }}
  364 + headerBordered
  365 + bordered
  366 + >
  367 + <ProductDetail
  368 + productBody={[]}
  369 + EditProductBody={getEditProductBody}
  370 + ></ProductDetail>
  371 + </ProCard>
381 372  
382   - <ProCard
383   - title="付款信息"
384   - style={{ marginTop: 10 }}
385   - headerBordered
386   - bordered
387   - >
388   - <PayWayDetail payBody={payWayBody} thisId={null} currtSave={setSave}></PayWayDetail>
389   - </ProCard>
  373 + <ProCard
  374 + title="付款信息"
  375 + style={{ marginTop: 10 }}
  376 + headerBordered
  377 + bordered
  378 + >
  379 + <PayWayDetail
  380 + payBody={payWayBody}
  381 + thisId={null}
  382 + currtSave={setSave}
  383 + ></PayWayDetail>
  384 + </ProCard>
390 385  
391   - <ProCard
392   - style={{ marginTop: 10 }}
393   - headerBordered
394   - bordered
395   - >
396   - <ProFormTextArea label="备注" name="remark" initialValue={contextBody.remark} />
397   - </ProCard>
398   - </ModalForm>
399   - );
400   -};
401 386 \ No newline at end of file
  387 + <ProCard style={{ marginTop: 10 }} headerBordered bordered>
  388 + <ProFormTextArea
  389 + label="备注"
  390 + name="remark"
  391 + initialValue={contextBody.remark}
  392 + />
  393 + </ProCard>
  394 + </ModalForm>
  395 + );
  396 +};
... ...
src/pages/Instalment/components/edit/edit.tsx
  View file @d5cb3ed
1   -import { PlusOutlined } from '@ant-design/icons';
2 1 import {
3   - ModalForm,
4   - ProCard,
5   - ProForm,
6   - ProFormDatePicker,
7   - ProFormDateRangePicker,
8   - ProFormDependency,
9   - ProFormSelect,
10   - ProFormText,
11   - ProFormTextArea,
12   - ProFormUploadButton,
  2 + postOrderErpOrderStagesPayWaySaveOrUpdate,
  3 + postOrderErpOrderStagesSaveOrUpdate,
  4 + postOrderErpOrderStagesSearch,
  5 + postOrderErpOrderStagesUpload,
  6 +} from '@/services';
  7 +import {
  8 + ModalForm,
  9 + ProCard,
  10 + ProForm,
  11 + ProFormDatePicker,
  12 + ProFormText,
  13 + ProFormTextArea,
  14 + ProFormUploadButton,
13 15 } from '@ant-design/pro-components';
14   -import ProductDetail from '../productDetail/productDetail';
15   -import PayWayDetail from '../payWayDetail/payWayDetail';
16   -import { Button, Form, UploadProps, message } from 'antd';
17   -import Item from 'antd/es/list/Item';
18   -import { useEffect, useRef, useState } from 'react';
19   -import { postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesPayWayUploadForPayWay, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload, postServiceOrderFileProcess } from '@/services';
20   -import { context } from '@/.umi/core/helmetContext';
  16 +import { Form, message } from 'antd';
21 17 import { RcFile } from 'antd/es/upload';
  18 +import { useEffect, useState } from 'react';
  19 +import PayWayDetail from '../payWayDetail/payWayDetail';
  20 +import ProductDetail from '../productDetail/productDetail';
22 21  
23 22 const waitTime = (time: number = 100) => {
24   - return new Promise((resolve) => {
25   - setTimeout(() => {
26   - resolve(true);
27   - }, time);
28   - });
  23 + return new Promise((resolve) => {
  24 + setTimeout(() => {
  25 + resolve(true);
  26 + }, time);
  27 + });
29 28 };
30 29  
31 30 export default ({ currentContract, toReload }) => {
32   - const [form] = Form.useForm<{ name: string; company: string }>();
33   - const [contextBody, setContextBody] = useState({});
34   - const [editProductBody, setEditProductBody] = useState([]);
35   - const [total, setTotal] = useState(0);
36   - const [payWayBody, setPayWayBody] = useState([])
37   - const [otherBody, setOtherBody] = useState([])
  31 + const [form] = Form.useForm<{ name: string; company: string }>();
  32 + const [contextBody, setContextBody] = useState({});
  33 + const [total, setTotal] = useState(0);
  34 + const [payWayBody, setPayWayBody] = useState([]);
  35 + const [otherBody, setOtherBody] = useState([]);
38 36  
39   - type OrderStagesWithListItem = {
40   - //文件编号
41   - id: number;
42   - //合同编号
43   - contract: string;
44   - //供应商名称
45   - vendor: string;
46   - //签合同日期
47   - dateRange: Date;
48   - //终端名称
49   - terminal: string;
50   - orderStagesDeviceVoList: orderStagesDevice[]
51   - //合同总金额
52   - totalPrice: number;
53   - //付款方式
54   - payWay: string;
55   - //附件
56   - annex: string;
57   - //备注
58   - remark: string;
59   - };
  37 + type OrderStagesWithListItem = {
  38 + //文件编号
  39 + id: number;
  40 + //合同编号
  41 + contract: string;
  42 + //供应商名称
  43 + vendor: string;
  44 + //签合同日期
  45 + dateRange: Date;
  46 + //终端名称
  47 + terminal: string;
  48 + orderStagesDeviceVoList: orderStagesDevice[];
  49 + //合同总金额
  50 + totalPrice: number;
  51 + //付款方式
  52 + payWay: string;
  53 + //附件
  54 + annex: string;
  55 + //备注
  56 + remark: string;
  57 + };
60 58  
61   - type orderStagesDevice = {
62   - //设备id
63   - dId: number;
64   - //设备名称
65   - deviceName: string;
66   - //设备型号
67   - deviceModel: string;
68   - //数量
69   - count: number;
70   - //单价
71   - unitPrice: number;
72   - //总价
73   - price: number;
74   - }
  59 + type orderStagesDevice = {
  60 + //设备id
  61 + dId: number;
  62 + //设备名称
  63 + deviceName: string;
  64 + //设备型号
  65 + deviceModel: string;
  66 + //数量
  67 + count: number;
  68 + //单价
  69 + unitPrice: number;
  70 + //总价
  71 + price: number;
  72 + };
75 73  
76   - async function getBody() {
77   - const res = await postOrderErpOrderStagesSearch({
78   - data: { contract: currentContract },
79   - });
80   - const context = res.data[0];
81   - // console.log(context);
  74 + async function refresh() {
  75 + const res = await postOrderErpOrderStagesSearch({
  76 + data: { contract: currentContract },
  77 + });
  78 + const context = res.data[0];
82 79  
83   - if (context.contract != null) {
84   - setContextBody(context);
85   - setTotal(context.totalPrice)
86   - form.setFieldValue('totalPrice', context.totalPrice);
87   - }
88   - handleInputChange(context.payWay, 0, context.totalPrice)
  80 + if (context.contract !== null) {
  81 + setContextBody(context);
  82 + setTotal(context.totalPrice);
  83 + form.setFieldValue('totalPrice', context.totalPrice);
89 84 }
  85 + }
90 86  
91   - async function refresh() {
92   - const res = await postOrderErpOrderStagesSearch({
93   - data: { contract: currentContract },
94   - });
95   - const context = res.data[0];
96   - // console.log(context);
97   -
98   - if (context.contract != null) {
99   - setContextBody(context);
100   - setTotal(context.totalPrice)
101   - form.setFieldValue('totalPrice', context.totalPrice);
102   - }
103   - }
  87 + function setSave(value) {
  88 + setOtherBody(value);
  89 + }
104 90  
105   - function getEditProductBody(value) {
106   - // console.log(value);
  91 + useEffect(() => {
  92 + setContextBody({ ...contextBody, totalPrice: total });
  93 + form.setFieldValue('totalPrice', total);
  94 + }, [total]);
107 95  
108   - setEditProductBody(value)
109   - let price = 0;
110   - value.map(obj => (
111   - price += (obj.count * obj.unitPrice)
112   - ));
113   - setTotal(price);
114   - setContextBody({ ...contextBody, orderStagesDeviceVoList: value })
115   - handleInputChange(contextBody.payWay, 0, price)
  96 + const handleInputChange = (value: string, no: number, priceNow?: number) => {
  97 + let totalPay = 0;
  98 + const payValue: string[] = value.split('/');
  99 + let body:
  100 + | ((prevState: never[]) => never[])
  101 + | { proportion: string; payPrice: number }[] = [];
  102 + if (no === 1) {
  103 + if (payValue.length !== 4) {
  104 + message.warning('比例个数总和不为4个!');
  105 + } else {
  106 + payValue.forEach((item) => {
  107 + totalPay += Number(item);
  108 + });
  109 + }
  110 + if (totalPay !== 100) {
  111 + message.warning('比例总和不为100!');
  112 + } else {
  113 + message.success('输入有效!');
  114 + const price = total;
  115 + payValue.forEach((item) => {
  116 + body.push({
  117 + proportion: item + '%',
  118 + payPrice: (Number(item) * price) / 100,
  119 + });
  120 + });
  121 + setPayWayBody(body);
  122 + }
  123 + } else {
  124 + payValue.forEach((item) => {
  125 + totalPay += Number(item);
  126 + });
  127 + payValue.forEach((item) => {
  128 + body.push({
  129 + proportion: item + '%',
  130 + payPrice: (Number(item) * priceNow) / 100,
  131 + });
  132 + });
  133 + setPayWayBody(body);
116 134 }
  135 + };
  136 +
  137 + async function getBody() {
  138 + const res = await postOrderErpOrderStagesSearch({
  139 + data: { contract: currentContract },
  140 + });
  141 + const context = res.data[0];
117 142  
118   - function setSave(value) {
119   - // console.log(value);
120   - setOtherBody(value)
  143 + if (context.contract !== null) {
  144 + setContextBody(context);
  145 + setTotal(context.totalPrice);
  146 + form.setFieldValue('totalPrice', context.totalPrice);
121 147 }
  148 + handleInputChange(context.payWay, 0, context.totalPrice);
  149 + }
122 150  
123   - useEffect(() => {
124   - setContextBody({ ...contextBody, totalPrice: total })
125   - form.setFieldValue('totalPrice', total);
126   - }, [total])
  151 + function getEditProductBody(value) {
  152 + let price = 0;
  153 + value.map((obj) => (price += obj.count * obj.unitPrice));
  154 + setTotal(price);
  155 + setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
  156 + handleInputChange(contextBody.payWay, 0, price);
  157 + }
127 158  
128   - useEffect(() => {
129   - getBody()
130   - }, [])
  159 + useEffect(() => {
  160 + getBody();
  161 + }, []);
131 162  
132   - const handleInputChange = (value: string, no: number, priceNow?: number) => {
133   - let totalPay = 0;
134   - const payValue: string[] = value.split("/")
135   - let body: ((prevState: never[]) => never[]) | { proportion: string; payPrice: number; }[] = [];
136   - if (no === 1) {
137   - if (payValue.length !== 4) {
138   - message.warning('比例个数总和不为4个!');
139   - } else {
140   - payValue.forEach((item, index) => {
141   - totalPay += Number(item)
142   - })
143   - }
144   - if (totalPay != 100) {
145   - message.warning('比例总和不为100!');
146   - } else {
147   - message.success('输入有效!');
148   - const price = total
149   - payValue.forEach((item, index) => {
150   - body.push({ proportion: item + "%", payPrice: Number(item) * price / 100 })
151   - })
152   - setPayWayBody(body)
153   - }
154   - } else {
155   - payValue.forEach((item, index) => {
156   - totalPay += Number(item)
157   - })
158   - payValue.forEach((item, index) => {
159   - body.push({ proportion: item + "%", payPrice: Number(item) * priceNow / 100 })
160   - })
161   - setPayWayBody(body)
  163 + return (
  164 + <ModalForm<OrderStagesWithListItem>
  165 + title="新建"
  166 + trigger={<a onClick={refresh}>编辑</a>}
  167 + form={form}
  168 + autoFocusFirstInput
  169 + modalProps={{
  170 + destroyOnClose: true,
  171 + }}
  172 + submitTimeout={2000}
  173 + onFinish={async (values) => {
  174 + if (contextBody.orderStagesDeviceVoList.length === 0) {
  175 + message.error('请填写产品数据');
  176 + return false;
162 177 }
163   - };
164   -
165   - return (
166   - <ModalForm<OrderStagesWithListItem>
167   - title="新建"
168   - trigger={
169   - <a onClick={refresh}>编辑</a>
170   - }
171   - form={form}
172   - autoFocusFirstInput
173   - modalProps={{
174   - destroyOnClose: true,
175   - // onCancel: () => console.log('run'),
176   - }}
177   - submitTimeout={2000}
178   - onFinish={async (values) => {
179   - if (contextBody.orderStagesDeviceVoList.length == 0) {
180   - message.error("请填写产品数据")
181   - return false;
182   - }
183   -
184   - // console.log(values);
185   - // console.log(otherBody);
186   - let remakeValue = [];
187   - let remakeItem = {}
188   - // 创建一个用于存储所有异步操作的Promise数组
189   - const promises = [];
  178 + let remakeValue = [];
  179 + const promises = [];
190 180  
191   - otherBody.forEach(item => {
192   - let remakeItem = { ossId: contextBody.id, number: item.id, dateRange: item.payDate, fileName: item.fileName };
193   - if (typeof item.fileUrl === 'object' && item.fileUrl instanceof File) {
194   - const formData = new FormData();
195   - formData.append('file', item.fileUrl as RcFile);
196   - const uploadPromise = async () => {
197   - const res = await postOrderErpOrderStagesUpload({
198   - data: formData,
199   - headers: {
200   - 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
201   - }
202   - });
203   - if (res.data) {
204   - remakeItem.fileUrl = res.data;
205   - }
206   - };
207   - promises.push(uploadPromise());
208   - }
209   - remakeValue.push(remakeItem);
210   - });
  181 + otherBody.forEach((item) => {
  182 + let remakeItem = {
  183 + ossId: contextBody.id,
  184 + number: item.id,
  185 + dateRange: item.payDate,
  186 + fileName: item.fileName,
  187 + };
  188 + if (
  189 + typeof item.fileUrl === 'object' &&
  190 + item.fileUrl instanceof File
  191 + ) {
  192 + const formData = new FormData();
  193 + formData.append('file', item.fileUrl as RcFile);
  194 + const uploadPromise = async () => {
  195 + const res = await postOrderErpOrderStagesUpload({
  196 + data: formData,
  197 + headers: {
  198 + 'Content-Type':
  199 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  200 + },
  201 + });
  202 + if (res.data) {
  203 + remakeItem.fileUrl = res.data;
  204 + }
  205 + };
  206 + promises.push(uploadPromise());
  207 + }
  208 + remakeValue.push(remakeItem);
  209 + });
  210 + Promise.all(promises).then(async () => {
  211 + await postOrderErpOrderStagesPayWaySaveOrUpdate({
  212 + data: remakeValue,
  213 + });
  214 + });
  215 + const formData = new FormData();
  216 + let toSendEdit = {
  217 + id: values.id || contextBody.id,
  218 + contract: values.contract || contextBody.contract,
  219 + vendor: values.vendor || contextBody.vendor,
  220 + dateRange: values.dateRange || contextBody.dateRange,
  221 + terminal: values.terminal || contextBody.terminal,
  222 + orderStagesDeviceDoList:
  223 + values.orderStagesDeviceVoList ||
  224 + contextBody.orderStagesDeviceVoList,
  225 + totalPrice: values.totalPrice || contextBody.totalPrice,
  226 + payWay: values.payWay || contextBody.payWay,
  227 + annex: contextBody.annex,
  228 + remark: values.remark || contextBody.remark,
  229 + };
  230 + if (values.annex) {
  231 + formData.append('file', values.annex[0].originFileObj as RcFile);
  232 + const res = await postOrderErpOrderStagesUpload({
  233 + data: formData,
  234 + headers: {
  235 + 'Content-Type':
  236 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  237 + },
  238 + });
  239 + if (res.data) {
  240 + toSendEdit.annex = res.data;
  241 + }
  242 + }
  243 + const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({
  244 + data: { ...toSendEdit },
  245 + });
  246 + if (isSaveOrUpdate) {
  247 + getBody();
  248 + toReload();
  249 + }
  250 + await waitTime(2000);
  251 + message.success('提交成功');
  252 + return true;
  253 + }}
  254 + >
  255 + <ProCard title="基本信息" headerBordered bordered>
  256 + <ProForm.Group>
  257 + <ProFormText
  258 + width="md"
  259 + name="vendor"
  260 + rules={[{ required: true, message: '此项为必填项' }]}
  261 + label="供应商名称"
  262 + placeholder="请输入"
  263 + initialValue={contextBody.vendor}
  264 + />
211 265  
212   - // 使用Promise.all等待所有异步操作完成后再执行保存操作
213   - Promise.all(promises).then(async () => {
214   - // console.log(remakeValue);
  266 + <ProFormText
  267 + width="md"
  268 + name="terminal"
  269 + rules={[{ required: true, message: '此项为必填项' }]}
  270 + label="终端名称"
  271 + placeholder="请输入"
  272 + initialValue={contextBody.terminal}
  273 + />
215 274  
216   - const resp = await postOrderErpOrderStagesPayWaySaveOrUpdate({
217   - data: remakeValue
218   - });
219   - });
220   - const formData = new FormData();
221   - // let toSendEdit={...values,orderStagesDeviceVoList:contextBody.orderStagesDeviceVoList};
222   - let toSendEdit = {
223   - id: values.id || contextBody.id,
224   - contract: values.contract || contextBody.contract,
225   - vendor: values.vendor || contextBody.vendor,
226   - dateRange: values.dateRange || contextBody.dateRange,
227   - terminal: values.terminal || contextBody.terminal,
228   - orderStagesDeviceDoList: values.orderStagesDeviceVoList || contextBody.orderStagesDeviceVoList,
229   - totalPrice: values.totalPrice || contextBody.totalPrice,
230   - payWay: values.payWay || contextBody.payWay,
231   - annex: contextBody.annex,
232   - remark: values.remark || contextBody.remark,
233   - };
234   - if (values.annex) {
235   - formData.append('file', values.annex[0].originFileObj as RcFile);
236   - const res = await postOrderErpOrderStagesUpload({
237   - data: formData,
238   - headers: {
239   - 'Content-Type':
240   - 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
241   - }
242   - });
243   - if (res.data) {
244   - // console.log(values)
245   - // console.log(contextBody);
246   - toSendEdit.annex = res.data
247   - }
248   - }
249   - const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({
250   - data: { ...toSendEdit }
251   - })
252   - if (isSaveOrUpdate) {
253   - // console.log(isSaveOrUpdate);
254   - getBody()
255   - toReload()
256   - }
257   - await waitTime(2000);
258   - message.success('提交成功');
259   - return true;
  275 + <ProFormDatePicker
  276 + name="dateRange"
  277 + width="md"
  278 + label="签合同日期"
  279 + placeholder="请选择日期"
  280 + fieldProps={{
  281 + format: (value) => value.format('YYYY-MM-DD'),
260 282 }}
261   - >
262   - <ProCard
263   - title="基本信息"
264   - headerBordered
265   - bordered
266   - >
267   - <ProForm.Group>
268   - <ProFormText
269   - width="md"
270   - name="vendor"
271   - rules={[{ required: true, message: '此项为必填项' }]}
272   - label="供应商名称"
273   - placeholder="请输入"
274   - initialValue={contextBody.vendor}
275   - />
276   -
277   - <ProFormText
278   - width="md"
279   - name="terminal"
280   - rules={[{ required: true, message: '此项为必填项' }]}
281   - label="终端名称"
282   - placeholder="请输入"
283   - initialValue={contextBody.terminal}
284   - />
  283 + initialValue={contextBody.dateRange}
  284 + />
285 285  
286   - <ProFormDatePicker
287   - name="dateRange"
288   - width="md"
289   - label="签合同日期"
290   - placeholder="请选择日期"
291   - fieldProps={{
292   - format: (value) => value.format('YYYY-MM-DD'),
293   - }}
294   - initialValue={contextBody.dateRange}
295   - />
  286 + <ProFormText
  287 + width="md"
  288 + name="payWay"
  289 + rules={[{ required: true, message: '此项为必填项' }]}
  290 + label="付款比例"
  291 + placeholder="请输入"
  292 + initialValue={contextBody.payWay}
  293 + onBlur={(e) => {
  294 + handleInputChange(e.target.value, 1);
  295 + }}
  296 + />
296 297  
297   - <ProFormText
298   - width="md"
299   - name="payWay"
300   - rules={[{ required: true, message: '此项为必填项' }]}
301   - label="付款比例"
302   - placeholder="请输入"
303   - initialValue={contextBody.payWay}
304   - onBlur={(e) => {
305   - handleInputChange(e.target.value, 1);
306   - }}
307   - />
  298 + <ProFormText
  299 + width="md"
  300 + name="contract"
  301 + rules={[{ required: true, message: '此项为必填项' }]}
  302 + label="合同编号"
  303 + placeholder="请输入"
  304 + initialValue={contextBody.contract}
  305 + />
308 306  
309   - <ProFormText
310   - width="md"
311   - name="contract"
312   - rules={[{ required: true, message: '此项为必填项' }]}
313   - label="合同编号"
314   - placeholder="请输入"
315   - initialValue={contextBody.contract}
316   - />
  307 + <ProFormUploadButton
  308 + width="md"
  309 + name="annex"
  310 + max={1}
  311 + label="合同附件"
  312 + />
317 313  
318   - <ProFormUploadButton width="md"
319   - name="annex"
320   - max={1}
321   - onChange={(value) => {
322   - // console.log(value);
323   - }}
324   - label="合同附件" />
  314 + <ProFormText
  315 + width="md"
  316 + name="totalPrice"
  317 + label="合同金额"
  318 + placeholder="请输入"
  319 + disabled
  320 + initialValue={contextBody.totalPrice}
  321 + />
  322 + </ProForm.Group>
  323 + </ProCard>
325 324  
326   - <ProFormText
327   - width="md"
328   - name="totalPrice"
329   - label="合同金额"
330   - placeholder="请输入"
331   - disabled
332   - // rules={[{ required: true, message: '此项为必填项' }]}
333   - // value={contextBody.totalPrice}
334   - initialValue={contextBody.totalPrice}
335   - />
336   - </ProForm.Group>
337   - </ProCard>
338   -
339   - <ProCard
340   - title={<><span style={{ color: 'red' }}>*</span>产品明细</>}
341   - style={{ marginTop: 10 }}
342   - headerBordered
343   - bordered
344   - >
345   - <ProductDetail productBody={contextBody.orderStagesDeviceVoList} EditProductBody={getEditProductBody}></ProductDetail>
346   - </ProCard>
347   -
  325 + <ProCard
  326 + title={
  327 + <>
  328 + <span style={{ color: 'red' }}>*</span>产品明细
  329 + </>
  330 + }
  331 + style={{ marginTop: 10 }}
  332 + headerBordered
  333 + bordered
  334 + >
  335 + <ProductDetail
  336 + productBody={contextBody.orderStagesDeviceVoList}
  337 + EditProductBody={getEditProductBody}
  338 + ></ProductDetail>
  339 + </ProCard>
348 340  
349   - <ProCard
350   - title="付款信息"
351   - style={{ marginTop: 10 }}
352   - headerBordered
353   - bordered
354   - >
355   - <PayWayDetail payBody={payWayBody} thisId={contextBody.id} currtSave={setSave}></PayWayDetail>
356   - </ProCard>
  341 + <ProCard
  342 + title="付款信息"
  343 + style={{ marginTop: 10 }}
  344 + headerBordered
  345 + bordered
  346 + >
  347 + <PayWayDetail
  348 + payBody={payWayBody}
  349 + thisId={contextBody.id}
  350 + currtSave={setSave}
  351 + ></PayWayDetail>
  352 + </ProCard>
357 353  
358   - <ProCard
359   - style={{ marginTop: 10 }}
360   - headerBordered
361   - bordered
362   - >
363   - <ProFormTextArea label="备注" name="remark" initialValue={contextBody.remark} />
364   - </ProCard>
365   - </ModalForm>
366   - );
367   -};
368 354 \ No newline at end of file
  355 + <ProCard style={{ marginTop: 10 }} headerBordered bordered>
  356 + <ProFormTextArea
  357 + label="备注"
  358 + name="remark"
  359 + initialValue={contextBody.remark}
  360 + />
  361 + </ProCard>
  362 + </ModalForm>
  363 + );
  364 +};
... ...
src/pages/Instalment/components/payWayDetail/payWayDetail.tsx
  View file @d5cb3ed
  1 +import { postOrderErpOrderStagesPayWaySelect } from '@/services';
1 2 import type { ProColumns } from '@ant-design/pro-components';
2 3 import {
3   - EditableProTable,
4   - ProCard,
5   - ProFormDatePicker,
6   - ProFormDateTimePicker,
7   - ProFormField,
8   - ProFormRadio,
9   - ProFormTimePicker,
10   - ProFormUploadButton,
  4 + EditableProTable,
  5 + ProFormDatePicker,
  6 + ProFormRadio,
  7 + ProFormUploadButton,
11 8 } from '@ant-design/pro-components';
12   -import React, { useEffect, useState } from 'react';
13   -import './payWayDetail.less'
14   -import { getOrderErpOrderStagesPayWaySelectOssId, postOrderErpOrderStagesPayWaySelect } from '@/services';
15 9 import { message } from 'antd';
  10 +import React, { useEffect, useState } from 'react';
  11 +import './payWayDetail.less';
16 12  
17 13 const waitTime = (time: number = 100) => {
18   - return new Promise((resolve) => {
19   - setTimeout(() => {
20   - resolve(true);
21   - }, time);
22   - });
  14 + return new Promise((resolve) => {
  15 + setTimeout(() => {
  16 + resolve(true);
  17 + }, time);
  18 + });
23 19 };
24 20  
25 21 type DataSourceType = {
26   - id: number;
27   - payStep?: string;
28   - proportion?: string;
29   - ossId?: number,
30   - payPrice?: number;
31   - payDate?: Date;
32   - fileName?: string;
33   - fileUrl?: string;
  22 + id: number;
  23 + payStep?: string;
  24 + proportion?: string;
  25 + ossId?: number;
  26 + payPrice?: number;
  27 + payDate?: Date;
  28 + fileName?: string;
  29 + fileUrl?: string;
34 30 };
35 31  
36 32 export default ({ payBody, thisId, currtSave }) => {
37   - const defaultData: DataSourceType[] = [
38   - {
39   - id: 1,
40   - payStep: '预付款',
41   - proportion: undefined,
42   - payPrice: undefined,
43   - ossId: undefined,
44   - payDate: undefined,
45   - fileName: undefined,
46   - fileUrl: undefined
47   - },
48   - {
49   - id: 2,
50   - payStep: '发贷款',
51   - proportion: undefined,
52   - payPrice: undefined,
53   - ossId: undefined,
54   - payDate: undefined,
55   - fileName: undefined,
56   - fileUrl: undefined
57   - },
58   - {
59   - id: 3,
60   - payStep: '验收款',
61   - proportion: undefined,
62   - payPrice: undefined,
63   - ossId: undefined,
64   - payDate: undefined,
65   - fileName: undefined,
66   - fileUrl: undefined
67   - },
68   - {
69   - id: 4,
70   - payStep: '质保金',
71   - proportion: undefined,
72   - payPrice: undefined,
73   - ossId: undefined,
74   - payDate: undefined,
75   - fileName: undefined,
76   - fileUrl: undefined
77   - }
78   - ];
  33 + const defaultData: DataSourceType[] = [
  34 + {
  35 + id: 1,
  36 + payStep: '预付款',
  37 + proportion: undefined,
  38 + payPrice: undefined,
  39 + ossId: undefined,
  40 + payDate: undefined,
  41 + fileName: undefined,
  42 + fileUrl: undefined,
  43 + },
  44 + {
  45 + id: 2,
  46 + payStep: '发贷款',
  47 + proportion: undefined,
  48 + payPrice: undefined,
  49 + ossId: undefined,
  50 + payDate: undefined,
  51 + fileName: undefined,
  52 + fileUrl: undefined,
  53 + },
  54 + {
  55 + id: 3,
  56 + payStep: '验收款',
  57 + proportion: undefined,
  58 + payPrice: undefined,
  59 + ossId: undefined,
  60 + payDate: undefined,
  61 + fileName: undefined,
  62 + fileUrl: undefined,
  63 + },
  64 + {
  65 + id: 4,
  66 + payStep: '质保金',
  67 + proportion: undefined,
  68 + payPrice: undefined,
  69 + ossId: undefined,
  70 + payDate: undefined,
  71 + fileName: undefined,
  72 + fileUrl: undefined,
  73 + },
  74 + ];
79 75  
80   - const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
81   - const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
82   - const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>('hidden',);
83   - const [payWayDetailBody, setPayWayDetailBody] = useState<readonly DataSourceType[]>([...defaultData])
84   - const [body, setBody] = useState([])
85   - const [isAccept, setIsAccept] = useState(null)
86   - const [isCurrtSave, setIsCurrtSave] = useState(false);
  76 + const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  77 + const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
  78 + 'hidden',
  79 + );
  80 + const [payWayDetailBody, setPayWayDetailBody] = useState<
  81 + readonly DataSourceType[]
  82 + >([...defaultData]);
  83 + // const [body, setBody] = useState([])
  84 + const [isAccept, setIsAccept] = useState(null);
  85 + // const [isCurrtSave, setIsCurrtSave] = useState(false);
87 86  
88   - async function getOther(value, arr) {
89   - const res = await postOrderErpOrderStagesPayWaySelect({
90   - data: { ossId: value }
  87 + async function getOther(value, arr) {
  88 + const res = await postOrderErpOrderStagesPayWaySelect({
  89 + data: { ossId: value },
  90 + });
  91 + if (res.data) {
  92 + const context = res.data;
  93 + const remake = arr.map((obj) => {
  94 + let currt = obj;
  95 + context.forEach((object) => {
  96 + if (object.number === obj.id) {
  97 + currt = {
  98 + ...obj,
  99 + ossId: value,
  100 + payDate: object.dateRange,
  101 + fileName: object.fileName,
  102 + fileUrl: object.fileUrl,
  103 + };
  104 + return currt;
  105 + }
91 106 });
92   - if (res.data) {
93   - const context = res.data;
94   - const remake = arr.map(obj => {
95   - let currt = obj;
96   - context.forEach(object => {
97   - if (object.number == obj.id) {
98   - currt = {
99   - ...obj,
100   - ossId: value,
101   - payDate: object.dateRange,
102   - fileName: object.fileName,
103   - fileUrl: object.fileUrl
104   - };
105   - return currt;
106   - }
107   - });
108   - // console.log(currt);
109   - return currt;
110   - });
111   - // console.log(context);
112   - setPayWayDetailBody(remake);
113   - }
  107 + return currt;
  108 + });
  109 + setPayWayDetailBody(remake);
114 110 }
  111 + }
115 112  
116   - function setPayWay(value) {
117   - const remakeData = payWayDetailBody.map(obj => {
118   - return { ...obj, proportion: value[obj.id - 1]?.proportion, payPrice: value[obj.id - 1]?.payPrice }
119   - })
120   - // console.log(remakeData);
121   -
122   - setPayWayDetailBody(remakeData)
123   - // console.log(thisId);
124   -
125   - if (thisId!=null) {
126   - getOther(thisId, remakeData)
127   - }
128   - }
129   - // useEffect(() => {
130   - // getOther(thisId)
131   - // }, [thisId])
  113 + function setPayWay(value) {
  114 + const remakeData = payWayDetailBody.map((obj) => {
  115 + return {
  116 + ...obj,
  117 + proportion: value[obj.id - 1]?.proportion,
  118 + payPrice: value[obj.id - 1]?.payPrice,
  119 + };
  120 + });
  121 + // console.log(remakeData);
132 122  
133   - useEffect(() => {
134   - setPayWay(payBody)
135   - }, [payBody])
  123 + setPayWayDetailBody(remakeData);
  124 + // console.log(thisId);
136 125  
137   - function setCurrtSave(value) {
138   - // console.log(value);
139   - setIsCurrtSave(payWayDetailBody)
  126 + if (thisId !== null) {
  127 + getOther(thisId, remakeData);
140 128 }
  129 + }
  130 + // useEffect(() => {
  131 + // getOther(thisId)
  132 + // }, [thisId])
141 133  
  134 + useEffect(() => {
  135 + setPayWay(payBody);
  136 + }, [payBody]);
142 137  
143   - const columns: ProColumns<DataSourceType>[] = [
144   - {
145   - title: '编号',
146   - dataIndex: 'id',
147   - hideInTable: true,
148   - editable: false
149   - },
150   - {
151   - title: '付款信息',
152   - dataIndex: 'payStep',
153   - editable: false
154   - },
155   - {
156   - title: '付款比例',
157   - dataIndex: 'proportion',
158   - editable: false
159   - },
160   - {
161   - title: '付款金额',
162   - dataIndex: 'payPrice',
163   - editable: false
164   - },
165   - {
166   - title: '对应的订单',
167   - dataIndex: 'ossId',
168   - editable: false,
169   - hideInTable: true,
170   - },
171   - {
172   - title: '付款时间',
173   - dataIndex: 'payDate',
174   - editable: false,
175   - render: (text, record, _, action) => {
176   - const handleChange = (value) => {
177   - const updatedDataSource = payWayDetailBody.map(item => {
178   - if (item.id === record.id) {
179   - return {
180   - ...item,
181   - payDate: value
182   - };
183   - }
184   - return item;
185   - });
186   - // console.log(updatedDataSource);
187   -
188   - setPayWayDetailBody(updatedDataSource);
189   - currtSave(updatedDataSource)
190   - };
  138 + // function setCurrtSave(value) {
  139 + // // console.log(value);
  140 + // setIsCurrtSave(payWayDetailBody)
  141 + // }
191 142  
192   - return (
193   - <ProFormDatePicker
194   - className='dataChoose'
195   - initialValue={record.payDate}
196   - value={record.payDate}
197   - placeholder={"请填写时间"}
198   - fieldProps={{
199   - format: (value) => value.format('YYYY-MM-DD'),
200   - onChange: handleChange,
201   - }}
202   - />
203   - );
  143 + const columns: ProColumns<DataSourceType>[] = [
  144 + {
  145 + title: '编号',
  146 + dataIndex: 'id',
  147 + hideInTable: true,
  148 + editable: false,
  149 + },
  150 + {
  151 + title: '付款信息',
  152 + dataIndex: 'payStep',
  153 + editable: false,
  154 + },
  155 + {
  156 + title: '付款比例',
  157 + dataIndex: 'proportion',
  158 + editable: false,
  159 + },
  160 + {
  161 + title: '付款金额',
  162 + dataIndex: 'payPrice',
  163 + editable: false,
  164 + },
  165 + {
  166 + title: '对应的订单',
  167 + dataIndex: 'ossId',
  168 + editable: false,
  169 + hideInTable: true,
  170 + },
  171 + {
  172 + title: '付款时间',
  173 + dataIndex: 'payDate',
  174 + editable: false,
  175 + render: (text, record) => {
  176 + const handleChange = (value) => {
  177 + const updatedDataSource = payWayDetailBody.map((item) => {
  178 + if (item.id === record.id) {
  179 + return {
  180 + ...item,
  181 + payDate: value,
  182 + };
204 183 }
205   - },
206   - {
207   - title: '付款单回执',
208   - dataIndex: 'fileName',
209   - render: (text, record, _, action) => {
210   - if (isAccept !== record.id) {
211   - if (typeof record.fileUrl === 'object' && record.fileUrl instanceof File) {
212   - return (<a onClick={() => message.error("请先保存")}>{record.fileName}</a>)
213   - } else {
214   - return (<a href={record.fileUrl}>{record.fileName}</a>)
215   - }
216   - } else {
217   - return (
218   - <ProFormUploadButton
219   - name={record.id}
220   - onChange={(value) => {
221   - // console.log(value);
222   - // console.log(payWayDetailBody);
223   - let remakeBody = [];
224   - let remakeBodyItem = {};
225   - payWayDetailBody.forEach(item => {
226   - if (item.id === record.id) {
227   - remakeBodyItem = { ...item, fileUrl: value.file.originFileObj, fileName: value.file.name }
228   - } else {
229   - remakeBodyItem = { ...item }
230   - }
231   - // if (value.fileList.length == 0) {
232   - // remakeBodyItem = { ...item, fileUrl: undefined, fileName: undefined }
233   - // }
234   - remakeBody.push(remakeBodyItem)
235   - })
236   - setPayWayDetailBody(remakeBody)
237   - currtSave(remakeBody)
238   - }}
239   - width="md"
240   - max={1} />
241   - )
242   - }
243   - },
244   - },
245   - {
246   - title: '操作',
247   - valueType: 'option',
248   - width: 200,
249   - render: (text, record, _, action) => [
250   - <a
251   - key="editable"
252   - onClick={() => {
253   - if (isAccept !== record.id) {
254   - setIsAccept(record.id)
255   - } else {
256   - setIsAccept(null)
257   - }
  184 + return item;
  185 + });
  186 + // console.log(updatedDataSource);
258 187  
259   - }}
260   - >
261   - {(record.fileName !== undefined && record.fileName !== "" && record.fileName !== null) ? '重新上传' : '上传回执'}
262   - </a>
263   - ],
264   - },
265   - ];
  188 + setPayWayDetailBody(updatedDataSource);
  189 + currtSave(updatedDataSource);
  190 + };
266 191  
267   - return (
268   - <>
269   - <EditableProTable<DataSourceType>
270   - rowKey="id"
271   - className='payway-detail-index'
272   - toolbar={{ style: { display: 'none' } }}
273   - ghost={true}
274   - scroll={{
275   - x: 960,
276   - }}
277   - recordCreatorProps={
278   - position !== 'hidden'
279   - ? {
280   - position: position as 'top',
281   - record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
282   - }
283   - : false
284   - }
285   - loading={false}
286   - toolBarRender={() => [
287   - <ProFormRadio.Group
288   - key="render"
289   - fieldProps={{
290   - value: position,
291   - onChange: (e) => setPosition(e.target.value),
292   - }}
293   - />,
294   - ]}
295   - columns={columns}
296   - request={payWayDetailBody}
297   - value={payWayDetailBody}
298   - onChange={() => {
299   - setPayWayDetailBody;
300   - setCurrtSave(payWayDetailBody)
301   - }}
302   - editable={{
303   - type: 'multiple',
304   - editableKeys,
305   - onSave: async (rowKey, data, row) => {
306   - // console.log(rowKey, data, row);
307   - await waitTime(2000);
308   - },
309   - onChange: setEditableRowKeys,
310   - }}
  192 + return (
  193 + <ProFormDatePicker
  194 + className="dataChoose"
  195 + initialValue={record.payDate}
  196 + value={record.payDate}
  197 + placeholder={'请填写时间'}
  198 + fieldProps={{
  199 + format: (value) => value.format('YYYY-MM-DD'),
  200 + onChange: handleChange,
  201 + }}
  202 + />
  203 + );
  204 + },
  205 + },
  206 + {
  207 + title: '付款单回执',
  208 + dataIndex: 'fileName',
  209 + render: (text, record) => {
  210 + if (isAccept !== record.id) {
  211 + if (
  212 + typeof record.fileUrl === 'object' &&
  213 + record.fileUrl instanceof File
  214 + ) {
  215 + return (
  216 + <a onClick={() => message.error('请先保存')}>{record.fileName}</a>
  217 + );
  218 + } else {
  219 + return <a href={record.fileUrl}>{record.fileName}</a>;
  220 + }
  221 + } else {
  222 + return (
  223 + <ProFormUploadButton
  224 + name={record.id}
  225 + onChange={(value) => {
  226 + // console.log(value);
  227 + // console.log(payWayDetailBody);
  228 + let remakeBody = [];
  229 + let remakeBodyItem = {};
  230 + payWayDetailBody.forEach((item) => {
  231 + if (item.id === record.id) {
  232 + remakeBodyItem = {
  233 + ...item,
  234 + fileUrl: value.file.originFileObj,
  235 + fileName: value.file.name,
  236 + };
  237 + } else {
  238 + remakeBodyItem = { ...item };
  239 + }
  240 + // if (value.fileList.length == 0) {
  241 + // remakeBodyItem = { ...item, fileUrl: undefined, fileName: undefined }
  242 + // }
  243 + remakeBody.push(remakeBodyItem);
  244 + });
  245 + setPayWayDetailBody(remakeBody);
  246 + currtSave(remakeBody);
  247 + }}
  248 + width="md"
  249 + max={1}
311 250 />
312   - </>
313   - );
314   -};
315 251 \ No newline at end of file
  252 + );
  253 + }
  254 + },
  255 + },
  256 + {
  257 + title: '操作',
  258 + valueType: 'option',
  259 + width: 200,
  260 + render: (text, record) => [
  261 + <a
  262 + key="editable"
  263 + onClick={() => {
  264 + if (isAccept !== record.id) {
  265 + setIsAccept(record.id);
  266 + } else {
  267 + setIsAccept(null);
  268 + }
  269 + }}
  270 + >
  271 + {record.fileName !== undefined &&
  272 + record.fileName !== '' &&
  273 + record.fileName !== null
  274 + ? '重新上传'
  275 + : '上传回执'}
  276 + </a>,
  277 + ],
  278 + },
  279 + ];
  280 +
  281 + return (
  282 + <>
  283 + <EditableProTable<DataSourceType>
  284 + rowKey="id"
  285 + className="payway-detail-index"
  286 + toolbar={{ style: { display: 'none' } }}
  287 + ghost={true}
  288 + scroll={{
  289 + x: 960,
  290 + }}
  291 + recordCreatorProps={
  292 + position !== 'hidden'
  293 + ? {
  294 + position: position as 'top',
  295 + record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
  296 + }
  297 + : false
  298 + }
  299 + loading={false}
  300 + toolBarRender={() => [
  301 + <ProFormRadio.Group
  302 + key="render"
  303 + fieldProps={{
  304 + value: position,
  305 + onChange: (e) => setPosition(e.target.value),
  306 + }}
  307 + />,
  308 + ]}
  309 + columns={columns}
  310 + request={payWayDetailBody}
  311 + value={payWayDetailBody}
  312 + onChange={(value) => {
  313 + setPayWayDetailBody(value);
  314 + // setCurrtSave(payWayDetailBody)
  315 + }}
  316 + editable={{
  317 + type: 'multiple',
  318 + editableKeys,
  319 + onSave: async () => {
  320 + // console.log(rowKey, data, row);
  321 + await waitTime(2000);
  322 + },
  323 + onChange: setEditableRowKeys,
  324 + }}
  325 + />
  326 + </>
  327 + );
  328 +};
... ...
src/pages/Instalment/components/productDetail/productDetail.tsx
  View file @d5cb3ed
1 1 import type { ProColumns } from '@ant-design/pro-components';
2   -import {
3   - EditableProTable,
4   - ProCard,
5   - ProFormField,
6   - ProFormRadio,
7   -} from '@ant-design/pro-components';
  2 +import { EditableProTable, ProFormRadio } from '@ant-design/pro-components';
8 3 import React, { useEffect, useState } from 'react';
9   -import './productDetail.less'
10   -import { countBy } from 'lodash';
11   -import { Form } from 'antd';
  4 +import './productDetail.less';
12 5  
13 6 const waitTime = (time: number = 100) => {
14   - return new Promise((resolve) => {
15   - setTimeout(() => {
16   - resolve(true);
17   - }, time);
18   - });
19   -};
20   -
21   -type DataSourceType = {
22   - count?: number;
23   - id: React.Key;
24   - deviceModel?: string;
25   - deviceName?: string;
26   - price?: number;
27   - unitPrice?: number;
  7 + return new Promise((resolve) => {
  8 + setTimeout(() => {
  9 + resolve(true);
  10 + }, time);
  11 + });
28 12 };
29 13  
30   -const defaultData: DataSourceType[] = [
31   - // {
32   - // id:1,
33   - // deviceName: '高低温试验箱',
34   - // deviceModel: 'CAN-TES36-0049ST',
35   - // count: 1,
36   - // unitPrice: 24500,
37   - // price: 24500,
38   - // }
39   -];
  14 +// type DataSourceType = {
  15 +// count?: number;
  16 +// id: React.Key;
  17 +// deviceModel?: string;
  18 +// deviceName?: string;
  19 +// price?: number;
  20 +// unitPrice?: number;
  21 +// };
40 22  
41 23 export default ({ productBody, EditProductBody }) => {
42   - const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
43   - const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
44   - const [form] = Form.useForm<{ name: string; company: string }>();
45   - const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
46   - 'bottom',
47   - );
48   - function getDataSourece() {
49   - if (productBody.length != 0) {
50   - setDataSource(productBody)
51   - }
  24 + const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  25 + const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  26 + // const [form] = Form.useForm<{ name: string; company: string }>();
  27 + const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
  28 + 'bottom',
  29 + );
  30 + function getDataSourece() {
  31 + if (productBody.length !== 0) {
  32 + setDataSource(productBody);
52 33 }
53   - function setEditProductBody(value) {
54   - // console.log(value);
55   - // console.log(dataSource);
56   -
57   - const modifiedArray = value.map(obj => {
58   - if (obj.dId && Number(obj.dId) <= 1000) {
59   - return {
60   - ...obj,
61   - count: obj.count,
62   - dId: null,
63   - deviceModel: obj.deviceModel,
64   - deviceName: obj.deviceName,
65   - price: Number(obj.unitPrice)*Number(obj.count),
66   - unitPrice: obj.unitPrice
67   - };
68   - } else {
69   - return {...obj,price: Number(obj.unitPrice)*Number(obj.count)};
70   - }
71   - });
72   - // console.log(modifiedArray);
  34 + }
  35 + function setEditProductBody(value) {
  36 + // console.log(value);
  37 + // console.log(dataSource);
73 38  
74   - EditProductBody(modifiedArray)
75   - setDataSource(value)
76   - }
  39 + const modifiedArray = value.map((obj) => {
  40 + if (obj.dId && Number(obj.dId) <= 1000) {
  41 + return {
  42 + ...obj,
  43 + count: obj.count,
  44 + dId: null,
  45 + deviceModel: obj.deviceModel,
  46 + deviceName: obj.deviceName,
  47 + price: Number(obj.unitPrice) * Number(obj.count),
  48 + unitPrice: obj.unitPrice,
  49 + };
  50 + } else {
  51 + return { ...obj, price: Number(obj.unitPrice) * Number(obj.count) };
  52 + }
  53 + });
  54 + // console.log(modifiedArray);
77 55  
78   - useEffect(() => {
79   - getDataSourece()
80   - }, [productBody])
  56 + EditProductBody(modifiedArray);
  57 + setDataSource(value);
  58 + }
81 59  
82   - type DataSourceType = {
83   - id: React.Key,
84   - count: number,
85   - dId?: number,
86   - deviceModel: string,
87   - deviceName: string,
88   - price: number
89   - unitPrice: number
90   - }
  60 + useEffect(() => {
  61 + getDataSourece();
  62 + }, [productBody]);
91 63  
  64 + type DataSourceType = {
  65 + id: React.Key;
  66 + count: number;
  67 + dId?: number;
  68 + deviceModel: string;
  69 + deviceName: string;
  70 + price: number;
  71 + unitPrice: number;
  72 + };
92 73  
93   - const columns: ProColumns<DataSourceType>[] = [
94   - {
95   - title: '设备编号',
96   - dataIndex: 'dId',
97   - hideInTable: true,
98   - },
99   - {
100   - title: '设备名称',
101   - dataIndex: 'deviceName',
102   - formItemProps: (form, { rowIndex }) => {
103   - return {
104   - rules:
105   - [{ required: true, message: '此项为必填项' }]
106   - };
107   - }
108   - },
109   - {
110   - title: '设备型号',
111   - dataIndex: 'deviceModel',
112   - width: '15%',
113   - formItemProps: (form, { rowIndex }) => {
114   - return {
115   - rules:
116   - [{ required: true, message: '此项为必填项' }]
117   - };
  74 + const columns: ProColumns<DataSourceType>[] = [
  75 + {
  76 + title: '设备编号',
  77 + dataIndex: 'dId',
  78 + hideInTable: true,
  79 + },
  80 + {
  81 + title: '设备名称',
  82 + dataIndex: 'deviceName',
  83 + formItemProps: () => {
  84 + return {
  85 + rules: [{ required: true, message: '此项为必填项' }],
  86 + };
  87 + },
  88 + },
  89 + {
  90 + title: '设备型号',
  91 + dataIndex: 'deviceModel',
  92 + width: '15%',
  93 + formItemProps: () => {
  94 + return {
  95 + rules: [{ required: true, message: '此项为必填项' }],
  96 + };
  97 + },
  98 + },
  99 + {
  100 + title: '数量',
  101 + dataIndex: 'count',
  102 + formItemProps: () => {
  103 + return {
  104 + rules: [{ required: true, message: '此项为必填项' }],
  105 + };
  106 + },
  107 + },
  108 + {
  109 + title: '单价',
  110 + dataIndex: 'unitPrice',
  111 + formItemProps: () => {
  112 + return {
  113 + rules: [{ required: true, message: '此项为必填项' }],
  114 + };
  115 + },
  116 + },
  117 + {
  118 + title: '总价',
  119 + dataIndex: 'price',
  120 + hideInSetting: true,
  121 + disable: true,
  122 + editable: false,
  123 + render: (_text, record) => [
  124 + <span key={record.dId}>{record.count * record.unitPrice}</span>,
  125 + ],
  126 + },
  127 + {
  128 + title: '操作',
  129 + valueType: 'option',
  130 + width: 200,
  131 + render: (_text, record, _, action) => [
  132 + <a
  133 + key="editable"
  134 + onClick={() => {
  135 + if (record.dId) {
  136 + action?.startEditable?.(record.dId);
118 137 }
119   - },
120   - {
121   - title: '数量',
122   - dataIndex: 'count',
123   - formItemProps: (form, { rowIndex }) => {
124   - return {
125   - rules:
126   - [{ required: true, message: '此项为必填项' }]
127   - };
128   - }
129   - },
130   - {
131   - title: '单价',
132   - dataIndex: 'unitPrice',
133   - formItemProps: (form, { rowIndex }) => {
134   - return {
135   - rules:
136   - [{ required: true, message: '此项为必填项' }]
137   - };
138   - }
139   - },
140   - {
141   - title: '总价',
142   - dataIndex: 'price',
143   - hideInSetting:true,
144   - disable:true,
145   - editable:false,
146   - render: (text, record, _, action) => [
147   - <span>
148   - {record.count*record.unitPrice}
149   - </span>
150   - ],
151   - },
152   - {
153   - title: '操作',
154   - valueType: 'option',
155   - width: 200,
156   - render: (text, record, _, action) => [
157   - <a
158   - key="editable"
159   - onClick={() => {
160   - if (record.dId) {
161   - // EditProductBody(dataSource.filter((item) => item.dId !== record.dId));
162   - // console.log(record);
163   -
164   - action?.startEditable?.(record.dId);
165   - }
166   - }}
167   - >
168   - 编辑
169   - </a>,
170   - <a
171   - key="delete"
172   - onClick={() => {
173   - EditProductBody(dataSource.filter((item) => item.dId !== record.dId));
174   - setDataSource(dataSource.filter((item) => item.dId !== record.dId));
175   - }}
176   - >
177   - 删除
178   - </a>,
179   - ],
180   - },
181   - ];
  138 + }}
  139 + >
  140 + 编辑
  141 + </a>,
  142 + <a
  143 + key="delete"
  144 + onClick={() => {
  145 + EditProductBody(
  146 + dataSource.filter((item) => item.dId !== record.dId),
  147 + );
  148 + setDataSource(dataSource.filter((item) => item.dId !== record.dId));
  149 + }}
  150 + >
  151 + 删除
  152 + </a>,
  153 + ],
  154 + },
  155 + ];
182 156  
183   - return (
184   - <>
185   - <EditableProTable<DataSourceType>
186   - className='product-detail-index'
187   - rowKey="dId"
188   - toolbar={{ style: { display: 'none' } }}
189   - ghost={true}
190   - scroll={{
191   - x: 960,
192   - }}
193   - recordCreatorProps={
194   - position !== 'hidden'
195   - ? {
196   - position: position as 'top',
197   - record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
198   - }
199   - : false
200   - }
201   - loading={false}
202   - toolBarRender={() => [
203   - <ProFormRadio.Group
204   - key="render"
205   - fieldProps={{
206   - value: position,
207   - onChange: (e) => setPosition(e.target.value),
208   - }}
209   - />,
210   - ]}
211   - columns={columns}
212   - request={dataSource}
213   - value={dataSource}
214   - onChange={setEditProductBody}
215   - editable={{
216   - type: 'multiple',
217   - editableKeys,
218   - onSave: async (rowKey, data, row) => {
219   - // console.log(data);
220   - await waitTime(500);
221   - },
222   - onChange: setEditableRowKeys,
223   - }}
224   - />
225   - </>
226   - );
227   -};
228 157 \ No newline at end of file
  158 + return (
  159 + <>
  160 + <EditableProTable<DataSourceType>
  161 + className="product-detail-index"
  162 + rowKey="dId"
  163 + toolbar={{ style: { display: 'none' } }}
  164 + ghost={true}
  165 + scroll={{
  166 + x: 960,
  167 + }}
  168 + recordCreatorProps={
  169 + position !== 'hidden'
  170 + ? {
  171 + position: position as 'top',
  172 + record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
  173 + }
  174 + : false
  175 + }
  176 + loading={false}
  177 + toolBarRender={() => [
  178 + <ProFormRadio.Group
  179 + key="render"
  180 + fieldProps={{
  181 + value: position,
  182 + onChange: (e) => setPosition(e.target.value),
  183 + }}
  184 + />,
  185 + ]}
  186 + columns={columns}
  187 + request={dataSource}
  188 + value={dataSource}
  189 + onChange={setEditProductBody}
  190 + editable={{
  191 + type: 'multiple',
  192 + editableKeys,
  193 + onSave: async () => {
  194 + await waitTime(500);
  195 + },
  196 + onChange: setEditableRowKeys,
  197 + }}
  198 + />
  199 + </>
  200 + );
  201 +};
... ...
src/pages/Instalment/components/read/read.tsx
  View file @d5cb3ed
1   -import { PlusOutlined } from '@ant-design/icons';
2 1 import {
3   - ModalForm,
4   - ProCard,
5   - ProForm,
6   - ProFormDatePicker,
7   - ProFormDateRangePicker,
8   - ProFormDependency,
9   - ProFormSelect,
10   - ProFormText,
11   - ProFormTextArea,
12   - ProFormUploadButton,
  2 + postOrderErpOrderStagesPayWaySaveOrUpdate,
  3 + postOrderErpOrderStagesSaveOrUpdate,
  4 + postOrderErpOrderStagesSearch,
  5 + postOrderErpOrderStagesUpload,
  6 +} from '@/services';
  7 +import {
  8 + ModalForm,
  9 + ProCard,
  10 + ProForm,
  11 + ProFormDatePicker,
  12 + ProFormText,
  13 + ProFormTextArea,
13 14 } from '@ant-design/pro-components';
14   -import ProductDetail from './readProduct';
15   -import PayWayDetail from './readPayWay'
16   -import { Button, Form, UploadProps, message } from 'antd';
17   -import Item from 'antd/es/list/Item';
18   -import { useEffect, useRef, useState } from 'react';
19   -import { postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesPayWayUploadForPayWay, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload, postServiceOrderFileProcess } from '@/services';
20   -import { context } from '@/.umi/core/helmetContext';
  15 +import { Form, message } from 'antd';
21 16 import { RcFile } from 'antd/es/upload';
  17 +import { useEffect, useState } from 'react';
  18 +import PayWayDetail from './readPayWay';
  19 +import ProductDetail from './readProduct';
22 20  
23 21 const waitTime = (time: number = 100) => {
24   - return new Promise((resolve) => {
25   - setTimeout(() => {
26   - resolve(true);
27   - }, time);
28   - });
  22 + return new Promise((resolve) => {
  23 + setTimeout(() => {
  24 + resolve(true);
  25 + }, time);
  26 + });
29 27 };
30 28  
31 29 export default ({ currentContract }) => {
32   - const [form] = Form.useForm<{ name: string; company: string }>();
33   - const [contextBody, setContextBody] = useState({});
34   - const [editProductBody, setEditProductBody] = useState([]);
35   - const [total, setTotal] = useState(0);
36   - const [payWayBody, setPayWayBody] = useState([])
37   - const [otherBody, setOtherBody] = useState([])
38   - const [isOnlyRead, setisOnlyRead] = useState()
  30 + const [form] = Form.useForm<{ name: string; company: string }>();
  31 + const [contextBody, setContextBody] = useState({});
  32 + const [, setEditProductBody] = useState([]);
  33 + const [total, setTotal] = useState(0);
  34 + const [payWayBody, setPayWayBody] = useState([]);
  35 + const [otherBody, setOtherBody] = useState([]);
39 36  
40   - type OrderStagesWithListItem = {
41   - //文件编号
42   - id: number;
43   - //合同编号
44   - contract: string;
45   - //供应商名称
46   - vendor: string;
47   - //签合同日期
48   - dateRange: Date;
49   - //终端名称
50   - terminal: string;
51   - orderStagesDeviceVoList: orderStagesDevice[]
52   - //合同总金额
53   - totalPrice: number;
54   - //付款方式
55   - payWay: string;
56   - //附件
57   - annex: string;
58   - //备注
59   - remark: string;
60   - };
  37 + type OrderStagesWithListItem = {
  38 + //文件编号
  39 + id: number;
  40 + //合同编号
  41 + contract: string;
  42 + //供应商名称
  43 + vendor: string;
  44 + //签合同日期
  45 + dateRange: Date;
  46 + //终端名称
  47 + terminal: string;
  48 + orderStagesDeviceVoList: orderStagesDevice[];
  49 + //合同总金额
  50 + totalPrice: number;
  51 + //付款方式
  52 + payWay: string;
  53 + //附件
  54 + annex: string;
  55 + //备注
  56 + remark: string;
  57 + };
61 58  
62   - type orderStagesDevice = {
63   - //设备id
64   - dId: number;
65   - //设备名称
66   - deviceName: string;
67   - //设备型号
68   - deviceModel: string;
69   - //数量
70   - count: number;
71   - //单价
72   - unitPrice: number;
73   - //总价
74   - price: number;
75   - }
  59 + type orderStagesDevice = {
  60 + //设备id
  61 + dId: number;
  62 + //设备名称
  63 + deviceName: string;
  64 + //设备型号
  65 + deviceModel: string;
  66 + //数量
  67 + count: number;
  68 + //单价
  69 + unitPrice: number;
  70 + //总价
  71 + price: number;
  72 + };
76 73  
77   - async function getBody() {
78   - const res = await postOrderErpOrderStagesSearch({
79   - data: { contract: currentContract },
80   - });
81   - const context = res.data[0];
82   - // console.log(context);
  74 + async function refresh() {
  75 + const res = await postOrderErpOrderStagesSearch({
  76 + data: { contract: currentContract },
  77 + });
  78 + const context = res.data[0];
  79 + // console.log(context);
83 80  
84   - if (context.contract != null) {
85   - setContextBody(context);
86   - setTotal(context.totalPrice)
87   - form.setFieldValue('totalPrice', context.totalPrice);
88   - }
89   - handleInputChange(context.payWay, 0, context.totalPrice)
  81 + if (context.contract !== null) {
  82 + setContextBody(context);
  83 + setTotal(context.totalPrice);
  84 + form.setFieldValue('totalPrice', context.totalPrice);
90 85 }
  86 + }
91 87  
92   - async function refresh() {
93   - const res = await postOrderErpOrderStagesSearch({
94   - data: { contract: currentContract },
95   - });
96   - const context = res.data[0];
97   - // console.log(context);
  88 + function setSave(value) {
  89 + // console.log(value);
  90 + setOtherBody(value);
  91 + }
98 92  
99   - if (context.contract != null) {
100   - setContextBody(context);
101   - setTotal(context.totalPrice)
102   - form.setFieldValue('totalPrice', context.totalPrice);
103   - }
  93 + useEffect(() => {
  94 + setContextBody({ ...contextBody, totalPrice: total });
  95 + form.setFieldValue('totalPrice', total);
  96 + }, [total]);
  97 +
  98 + const handleInputChange = (value: string, no: number, priceNow?: number) => {
  99 + let totalPay = 0;
  100 + const payValue: string[] = value.split('/');
  101 + let body:
  102 + | ((prevState: never[]) => never[])
  103 + | { proportion: string; payPrice: number }[] = [];
  104 + if (no === 1) {
  105 + if (payValue.length !== 4) {
  106 + message.warning('比例个数总和不为4个!');
  107 + } else {
  108 + payValue.forEach((item) => {
  109 + totalPay += Number(item);
  110 + });
  111 + }
  112 + if (totalPay !== 100) {
  113 + message.warning('比例总和不为100!');
  114 + } else {
  115 + message.success('输入有效!');
  116 + const price = total;
  117 + payValue.forEach((item) => {
  118 + body.push({
  119 + proportion: item + '%',
  120 + payPrice: (Number(item) * price) / 100,
  121 + });
  122 + });
  123 + setPayWayBody(body);
  124 + }
  125 + } else {
  126 + payValue.forEach((item) => {
  127 + totalPay += Number(item);
  128 + });
  129 + payValue.forEach((item) => {
  130 + body.push({
  131 + proportion: item + '%',
  132 + payPrice: (Number(item) * priceNow) / 100,
  133 + });
  134 + });
  135 + setPayWayBody(body);
104 136 }
  137 + };
105 138  
106   - function getEditProductBody(value) {
107   - // console.log(value);
  139 + async function getBody() {
  140 + const res = await postOrderErpOrderStagesSearch({
  141 + data: { contract: currentContract },
  142 + });
  143 + const context = res.data[0];
  144 + // console.log(context);
108 145  
109   - setEditProductBody(value)
110   - let price = 0;
111   - value.map(obj => (
112   - price += (obj.count * obj.unitPrice)
113   - ));
114   - setTotal(price);
115   - setContextBody({ ...contextBody, orderStagesDeviceVoList: value })
116   - handleInputChange(contextBody.payWay, 0, price)
117   - }
118   - []
119   - function setSave(value) {
120   - // console.log(value);
121   - setOtherBody(value)
  146 + if (context.contract !== null) {
  147 + setContextBody(context);
  148 + setTotal(context.totalPrice);
  149 + form.setFieldValue('totalPrice', context.totalPrice);
122 150 }
  151 + handleInputChange(context.payWay, 0, context.totalPrice);
  152 + }
123 153  
124   - useEffect(() => {
125   - setContextBody({ ...contextBody, totalPrice: total })
126   - form.setFieldValue('totalPrice', total);
127   - }, [total])
  154 + useEffect(() => {
  155 + getBody();
  156 + }, []);
128 157  
129   - useEffect(() => {
130   - getBody()
131   - }, [])
  158 + function getEditProductBody(value) {
  159 + // console.log(value);
132 160  
133   - const handleInputChange = (value: string, no: number, priceNow?: number) => {
134   - let totalPay = 0;
135   - const payValue: string[] = value.split("/")
136   - let body: ((prevState: never[]) => never[]) | { proportion: string; payPrice: number; }[] = [];
137   - if (no === 1) {
138   - if (payValue.length !== 4) {
139   - message.warning('比例个数总和不为4个!');
140   - } else {
141   - payValue.forEach((item, index) => {
142   - totalPay += Number(item)
143   - })
144   - }
145   - if (totalPay != 100) {
146   - message.warning('比例总和不为100!');
147   - } else {
148   - message.success('输入有效!');
149   - const price = total
150   - payValue.forEach((item, index) => {
151   - body.push({ proportion: item + "%", payPrice: Number(item) * price / 100 })
152   - })
153   - setPayWayBody(body)
154   - }
155   - } else {
156   - payValue.forEach((item, index) => {
157   - totalPay += Number(item)
158   - })
159   - payValue.forEach((item, index) => {
160   - body.push({ proportion: item + "%", payPrice: Number(item) * priceNow / 100 })
161   - })
162   - setPayWayBody(body)
163   - }
164   - };
  161 + setEditProductBody(value);
  162 + let price = 0;
  163 + value.map((obj) => (price += obj.count * obj.unitPrice));
  164 + setTotal(price);
  165 + setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
  166 + handleInputChange(contextBody.payWay, 0, price);
  167 + }
165 168  
166   - return (
167   - <ModalForm<OrderStagesWithListItem>
168   - title="新建"
169   - trigger={
170   - <a onClick={refresh}>查看</a>
171   - }
172   - form={form}
173   - autoFocusFirstInput
174   - modalProps={{
175   - destroyOnClose: true,
176   - // onCancel: () => console.log('run'),
177   - }}
178   - submitTimeout={2000}
179   - onFinish={async (values) => {
180   - // console.log(values);
181   - // console.log(otherBody);
182   - let remakeValue = [];
183   - let remakeItem = {}
184   - // 创建一个用于存储所有异步操作的Promise数组
185   - const promises = [];
  169 + return (
  170 + <ModalForm<OrderStagesWithListItem>
  171 + title="新建"
  172 + trigger={<a onClick={refresh}>查看</a>}
  173 + form={form}
  174 + autoFocusFirstInput
  175 + modalProps={{
  176 + destroyOnClose: true,
  177 + // onCancel: () => console.log('run'),
  178 + }}
  179 + submitTimeout={2000}
  180 + onFinish={async (values) => {
  181 + // console.log(values);
  182 + // console.log(otherBody);
  183 + let remakeValue = [];
  184 + // 创建一个用于存储所有异步操作的Promise数组
  185 + const promises = [];
186 186  
187   - otherBody.forEach(item => {
188   - let remakeItem = { ossId: item.ossId, number: item.id, dataRange: item.payDate, fileName: item.fileName };
189   - if (typeof item.fileUrl === 'object' && item.fileUrl instanceof File) {
190   - const formData = new FormData();
191   - formData.append('file', item.fileUrl as RcFile);
192   - const uploadPromise = async () => {
193   - const res = await postOrderErpOrderStagesUpload({
194   - data: formData,
195   - headers: {
196   - 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
197   - }
198   - });
199   - if (res.data) {
200   - remakeItem.fileUrl = res.data;
201   - }
202   - };
203   - promises.push(uploadPromise());
204   - }
205   - remakeValue.push(remakeItem);
206   - });
  187 + otherBody.forEach((item) => {
  188 + let remakeItem = {
  189 + ossId: item.ossId,
  190 + number: item.id,
  191 + dataRange: item.payDate,
  192 + fileName: item.fileName,
  193 + };
  194 + if (
  195 + typeof item.fileUrl === 'object' &&
  196 + item.fileUrl instanceof File
  197 + ) {
  198 + const formData = new FormData();
  199 + formData.append('file', item.fileUrl as RcFile);
  200 + const uploadPromise = async () => {
  201 + const res = await postOrderErpOrderStagesUpload({
  202 + data: formData,
  203 + headers: {
  204 + 'Content-Type':
  205 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  206 + },
  207 + });
  208 + if (res.data) {
  209 + remakeItem.fileUrl = res.data;
  210 + }
  211 + };
  212 + promises.push(uploadPromise());
  213 + }
  214 + remakeValue.push(remakeItem);
  215 + });
207 216  
208   - // 使用Promise.all等待所有异步操作完成后再执行保存操作
209   - Promise.all(promises).then(async () => {
210   - const resp = await postOrderErpOrderStagesPayWaySaveOrUpdate({
211   - data: remakeValue
212   - });
213   - });
214   - const formData = new FormData();
215   - // let toSendEdit={...values,orderStagesDeviceVoList:contextBody.orderStagesDeviceVoList};
216   - let toSendEdit = {
217   - id: values.id || contextBody.id,
218   - contract: values.contract || contextBody.contract,
219   - vendor: values.vendor || contextBody.vendor,
220   - dateRange: values.dateRange || contextBody.dateRange,
221   - terminal: values.terminal || contextBody.terminal,
222   - orderStagesDeviceDoList: values.orderStagesDeviceVoList || contextBody.orderStagesDeviceVoList,
223   - totalPrice: values.totalPrice || contextBody.totalPrice,
224   - payWay: values.payWay || contextBody.payWay,
225   - annex: contextBody.annex,
226   - remark: values.remark || contextBody.remark,
227   - };
228   - if (values.annex) {
229   - formData.append('file', values.annex[0].originFileObj as RcFile);
230   - const res = await postOrderErpOrderStagesUpload({
231   - data: formData,
232   - headers: {
233   - 'Content-Type':
234   - 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
235   - }
236   - });
237   - if (res.data) {
238   - // console.log(values)
239   - // console.log(contextBody);
240   - toSendEdit.annex = res.data
241   - }
242   - }
243   - const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({
244   - data: { ...toSendEdit }
245   - })
246   - if (isSaveOrUpdate) {
247   - // console.log(isSaveOrUpdate);
248   - getBody()
249   - }
250   - await waitTime(2000);
251   - message.success('提交成功');
252   - return true;
253   - }}
254   - >
255   - <ProCard
256   - title="基本信息"
257   - headerBordered
258   - bordered
259   - >
260   - <ProForm.Group>
261   - <ProFormText
262   - width="md"
263   - name="vendor"
264   - label="供应商名称"
265   - placeholder="请输入"
266   - initialValue={contextBody.vendor}
267   - readonly
268   - />
  217 + // 使用Promise.all等待所有异步操作完成后再执行保存操作
  218 + Promise.all(promises).then(async () => {
  219 + await postOrderErpOrderStagesPayWaySaveOrUpdate({
  220 + data: remakeValue,
  221 + });
  222 + });
  223 + const formData = new FormData();
  224 + // let toSendEdit={...values,orderStagesDeviceVoList:contextBody.orderStagesDeviceVoList};
  225 + let toSendEdit = {
  226 + id: values.id || contextBody.id,
  227 + contract: values.contract || contextBody.contract,
  228 + vendor: values.vendor || contextBody.vendor,
  229 + dateRange: values.dateRange || contextBody.dateRange,
  230 + terminal: values.terminal || contextBody.terminal,
  231 + orderStagesDeviceDoList:
  232 + values.orderStagesDeviceVoList ||
  233 + contextBody.orderStagesDeviceVoList,
  234 + totalPrice: values.totalPrice || contextBody.totalPrice,
  235 + payWay: values.payWay || contextBody.payWay,
  236 + annex: contextBody.annex,
  237 + remark: values.remark || contextBody.remark,
  238 + };
  239 + if (values.annex) {
  240 + formData.append('file', values.annex[0].originFileObj as RcFile);
  241 + const res = await postOrderErpOrderStagesUpload({
  242 + data: formData,
  243 + headers: {
  244 + 'Content-Type':
  245 + 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
  246 + },
  247 + });
  248 + if (res.data) {
  249 + // console.log(values)
  250 + // console.log(contextBody);
  251 + toSendEdit.annex = res.data;
  252 + }
  253 + }
  254 + const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({
  255 + data: { ...toSendEdit },
  256 + });
  257 + if (isSaveOrUpdate) {
  258 + // console.log(isSaveOrUpdate);
  259 + getBody();
  260 + }
  261 + await waitTime(2000);
  262 + message.success('提交成功');
  263 + return true;
  264 + }}
  265 + >
  266 + <ProCard title="基本信息" headerBordered bordered>
  267 + <ProForm.Group>
  268 + <ProFormText
  269 + width="md"
  270 + name="vendor"
  271 + label="供应商名称"
  272 + placeholder="请输入"
  273 + initialValue={contextBody.vendor}
  274 + readonly
  275 + />
269 276  
270   - <ProFormText
271   - width="md"
272   - name="terminal"
273   - label="终端名称"
274   - placeholder="请输入"
275   - initialValue={contextBody.terminal}
276   - readonly
277   - />
  277 + <ProFormText
  278 + width="md"
  279 + name="terminal"
  280 + label="终端名称"
  281 + placeholder="请输入"
  282 + initialValue={contextBody.terminal}
  283 + readonly
  284 + />
278 285  
279   - <ProFormDatePicker
280   - name="dateRange"
281   - width="md"
282   - label="签合同日期"
283   - placeholder="请选择日期"
284   - fieldProps={{
285   - format: (value) => value.format('YYYY-MM-DD'),
286   - }}
287   - initialValue={contextBody.dateRange}
288   - readonly
289   - />
  286 + <ProFormDatePicker
  287 + name="dateRange"
  288 + width="md"
  289 + label="签合同日期"
  290 + placeholder="请选择日期"
  291 + fieldProps={{
  292 + format: (value) => value.format('YYYY-MM-DD'),
  293 + }}
  294 + initialValue={contextBody.dateRange}
  295 + readonly
  296 + />
290 297  
291   - <ProFormText
292   - width="md"
293   - name="payWay"
294   - label="付款比例"
295   - placeholder="请输入"
296   - initialValue={contextBody.payWay}
297   - readonly
298   - onBlur={(e) => {
299   - handleInputChange(e.target.value, 1);
300   - }}
301   - />
  298 + <ProFormText
  299 + width="md"
  300 + name="payWay"
  301 + label="付款比例"
  302 + placeholder="请输入"
  303 + initialValue={contextBody.payWay}
  304 + readonly
  305 + onBlur={(e) => {
  306 + handleInputChange(e.target.value, 1);
  307 + }}
  308 + />
302 309  
303   - <ProFormText
304   - width="md"
305   - name="contract"
306   - label="合同编号"
307   - placeholder="请输入"
308   - initialValue={contextBody.contract}
309   - readonly
310   - />
  310 + <ProFormText
  311 + width="md"
  312 + name="contract"
  313 + label="合同编号"
  314 + placeholder="请输入"
  315 + initialValue={contextBody.contract}
  316 + readonly
  317 + />
311 318  
312   - {/* <ProFormText
  319 + {/* <ProFormText
313 320 width="md"
314 321 name="annex"
315 322 label="合同附件"
... ... @@ -318,45 +325,52 @@ export default ({ currentContract }) =&gt; {
318 325 readonly
319 326 /> */}
320 327  
  328 + <ProFormText
  329 + width="md"
  330 + name="totalPrice"
  331 + label="合同金额"
  332 + placeholder="请输入"
  333 + disabled
  334 + readonly
  335 + // rules={[{ required: true, message: '此项为必填项' }]}
  336 + // value={contextBody.totalPrice}
  337 + initialValue={contextBody.totalPrice}
  338 + />
  339 + </ProForm.Group>
  340 + </ProCard>
  341 + <ProCard
  342 + title="产品明细"
  343 + style={{ marginTop: 10 }}
  344 + headerBordered
  345 + bordered
  346 + >
  347 + <ProductDetail
  348 + productBody={contextBody.orderStagesDeviceVoList}
  349 + EditProductBody={getEditProductBody}
  350 + ></ProductDetail>
  351 + </ProCard>
321 352  
322   - <ProFormText
323   - width="md"
324   - name="totalPrice"
325   - label="合同金额"
326   - placeholder="请输入"
327   - disabled
328   - readonly
329   - // rules={[{ required: true, message: '此项为必填项' }]}
330   - // value={contextBody.totalPrice}
331   - initialValue={contextBody.totalPrice}
332   - />
333   - </ProForm.Group>
334   - </ProCard>
335   - <ProCard
336   - title="产品明细"
337   - style={{ marginTop: 10 }}
338   - headerBordered
339   - bordered
340   - >
341   - <ProductDetail productBody={contextBody.orderStagesDeviceVoList} EditProductBody={getEditProductBody}></ProductDetail>
342   - </ProCard>
  353 + <ProCard
  354 + title="付款信息"
  355 + style={{ marginTop: 10 }}
  356 + headerBordered
  357 + bordered
  358 + >
  359 + <PayWayDetail
  360 + payBody={payWayBody}
  361 + thisId={contextBody.id}
  362 + currtSave={setSave}
  363 + ></PayWayDetail>
  364 + </ProCard>
343 365  
344   - <ProCard
345   - title="付款信息"
346   - style={{ marginTop: 10 }}
347   - headerBordered
348   - bordered
349   - >
350   - <PayWayDetail payBody={payWayBody} thisId={contextBody.id} currtSave={setSave}></PayWayDetail>
351   - </ProCard>
352   -
353   - <ProCard
354   - style={{ marginTop: 10 }}
355   - headerBordered
356   - bordered
357   - >
358   - <ProFormTextArea label="备注" name="remark" initialValue={contextBody.remark} readonly />
359   - </ProCard>
360   - </ModalForm>
361   - );
362   -};
363 366 \ No newline at end of file
  367 + <ProCard style={{ marginTop: 10 }} headerBordered bordered>
  368 + <ProFormTextArea
  369 + label="备注"
  370 + name="remark"
  371 + initialValue={contextBody.remark}
  372 + readonly
  373 + />
  374 + </ProCard>
  375 + </ModalForm>
  376 + );
  377 +};
... ...
src/pages/Instalment/components/read/readPayWay.tsx
  View file @d5cb3ed
  1 +import { postOrderErpOrderStagesPayWaySelect } from '@/services';
1 2 import type { ProColumns } from '@ant-design/pro-components';
2 3 import {
3   - EditableProTable,
4   - ProCard,
5   - ProFormDatePicker,
6   - ProFormDateTimePicker,
7   - ProFormField,
8   - ProFormRadio,
9   - ProFormTimePicker,
10   - ProFormUploadButton,
  4 + EditableProTable,
  5 + ProFormRadio,
  6 + ProFormUploadButton,
11 7 } from '@ant-design/pro-components';
12   -import React, { useEffect, useState } from 'react';
13   -import { postOrderErpOrderStagesPayWaySelect } from '@/services';
14 8 import { message } from 'antd';
  9 +import React, { useEffect, useState } from 'react';
15 10  
16 11 const waitTime = (time: number = 100) => {
17   - return new Promise((resolve) => {
18   - setTimeout(() => {
19   - resolve(true);
20   - }, time);
21   - });
  12 + return new Promise((resolve) => {
  13 + setTimeout(() => {
  14 + resolve(true);
  15 + }, time);
  16 + });
22 17 };
23 18  
24 19 type DataSourceType = {
25   - id: number;
26   - payStep?: string;
27   - proportion?: string;
28   - ossId?: number,
29   - payPrice?: number;
30   - payDate?: Date;
31   - fileName?: string;
32   - fileUrl?: string;
  20 + id: number;
  21 + payStep?: string;
  22 + proportion?: string;
  23 + ossId?: number;
  24 + payPrice?: number;
  25 + payDate?: Date;
  26 + fileName?: string;
  27 + fileUrl?: string;
33 28 };
34 29  
35 30 export default ({ payBody, thisId, currtSave }) => {
36   - const defaultData: DataSourceType[] = [
37   - {
38   - id: 1,
39   - payStep: '预付款',
40   - proportion: undefined,
41   - payPrice: undefined,
42   - ossId: undefined,
43   - payDate: undefined,
44   - fileName: undefined,
45   - fileUrl: undefined
46   - },
47   - {
48   - id: 2,
49   - payStep: '发贷款',
50   - proportion: undefined,
51   - payPrice: undefined,
52   - ossId: undefined,
53   - payDate: undefined,
54   - fileName: undefined,
55   - fileUrl: undefined
56   - },
57   - {
58   - id: 3,
59   - payStep: '验收款',
60   - proportion: undefined,
61   - payPrice: undefined,
62   - ossId: undefined,
63   - payDate: undefined,
64   - fileName: undefined,
65   - fileUrl: undefined
66   - },
67   - {
68   - id: 4,
69   - payStep: '质保金',
70   - proportion: undefined,
71   - payPrice: undefined,
72   - ossId: undefined,
73   - payDate: undefined,
74   - fileName: undefined,
75   - fileUrl: undefined
76   - }
77   - ];
  31 + const defaultData: DataSourceType[] = [
  32 + {
  33 + id: 1,
  34 + payStep: '预付款',
  35 + proportion: undefined,
  36 + payPrice: undefined,
  37 + ossId: undefined,
  38 + payDate: undefined,
  39 + fileName: undefined,
  40 + fileUrl: undefined,
  41 + },
  42 + {
  43 + id: 2,
  44 + payStep: '发贷款',
  45 + proportion: undefined,
  46 + payPrice: undefined,
  47 + ossId: undefined,
  48 + payDate: undefined,
  49 + fileName: undefined,
  50 + fileUrl: undefined,
  51 + },
  52 + {
  53 + id: 3,
  54 + payStep: '验收款',
  55 + proportion: undefined,
  56 + payPrice: undefined,
  57 + ossId: undefined,
  58 + payDate: undefined,
  59 + fileName: undefined,
  60 + fileUrl: undefined,
  61 + },
  62 + {
  63 + id: 4,
  64 + payStep: '质保金',
  65 + proportion: undefined,
  66 + payPrice: undefined,
  67 + ossId: undefined,
  68 + payDate: undefined,
  69 + fileName: undefined,
  70 + fileUrl: undefined,
  71 + },
  72 + ];
78 73  
79   - const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
80   - const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
81   - const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>('hidden');
82   - const [payWayDetailBody, setPayWayDetailBody] = useState<readonly DataSourceType[]>([...defaultData])
83   - const [body, setBody] = useState([])
84   - const [isAccept, setIsAccept] = useState(null)
85   - const [isCurrtSave, setIsCurrtSave] = useState(false);
  74 + const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  75 + const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
  76 + 'hidden',
  77 + );
  78 + const [payWayDetailBody, setPayWayDetailBody] = useState<
  79 + readonly DataSourceType[]
  80 + >([...defaultData]);
  81 + const [isAccept] = useState(null);
  82 + // const [isCurrtSave, setIsCurrtSave] = useState(false);
86 83  
87   - async function getOther(value, arr) {
88   - const res = await postOrderErpOrderStagesPayWaySelect({
89   - data: { ossId: value }
  84 + async function getOther(value, arr) {
  85 + const res = await postOrderErpOrderStagesPayWaySelect({
  86 + data: { ossId: value },
  87 + });
  88 + if (res.data) {
  89 + const context = res.data;
  90 + const remake = arr.map((obj) => {
  91 + let currt = obj;
  92 + context.forEach((object) => {
  93 + if (object.number === obj.id) {
  94 + currt = {
  95 + ...obj,
  96 + ossId: value,
  97 + payDate: object.dateRange,
  98 + fileName: object.fileName,
  99 + fileUrl: object.fileUrl,
  100 + };
  101 + return currt;
  102 + }
90 103 });
91   - if (res.data) {
92   - const context = res.data;
93   - const remake = arr.map(obj => {
94   - let currt = obj;
95   - context.forEach(object => {
96   - if (object.number == obj.id) {
97   - currt = {
98   - ...obj,
99   - ossId: value,
100   - payDate: object.dateRange,
101   - fileName: object.fileName,
102   - fileUrl: object.fileUrl
103   - };
104   - return currt;
105   - }
106   - });
107   - // console.log(currt);
108   - return currt;
109   - });
110   - // console.log(context);
111   - setPayWayDetailBody(remake);
112   - }
  104 + return currt;
  105 + });
  106 + setPayWayDetailBody(remake);
113 107 }
  108 + }
114 109  
115   - function setPayWay(value) {
116   - const remakeData = payWayDetailBody.map(obj => {
117   - return { ...obj, proportion: value[obj.id - 1]?.proportion, payPrice: value[obj.id - 1]?.payPrice }
118   - })
119   - // console.log(remakeData);
120   -
121   - setPayWayDetailBody(remakeData)
122   - // console.log(thisId);
123   -
124   - if (thisId!=null) {
125   - getOther(thisId, remakeData)
126   - }
127   - }
128   - // useEffect(() => {
129   - // getOther(thisId)
130   - // }, [thisId])
  110 + function setPayWay(value) {
  111 + const remakeData = payWayDetailBody.map((obj) => {
  112 + return {
  113 + ...obj,
  114 + proportion: value[obj.id - 1]?.proportion,
  115 + payPrice: value[obj.id - 1]?.payPrice,
  116 + };
  117 + });
131 118  
132   - useEffect(() => {
133   - setPayWay(payBody)
134   - }, [payBody])
  119 + setPayWayDetailBody(remakeData);
135 120  
136   - function setCurrtSave(value) {
137   - // console.log(value);
138   - setIsCurrtSave(payWayDetailBody)
  121 + if (thisId !== null) {
  122 + getOther(thisId, remakeData);
139 123 }
  124 + }
  125 + // useEffect(() => {
  126 + // getOther(thisId)
  127 + // }, [thisId])
140 128  
  129 + useEffect(() => {
  130 + setPayWay(payBody);
  131 + }, [payBody]);
141 132  
142   - const columns: ProColumns<DataSourceType>[] = [
143   - {
144   - title: '编号',
145   - dataIndex: 'id',
146   - hideInTable: true,
147   - editable: false
148   - },
149   - {
150   - title: '付款信息',
151   - dataIndex: 'payStep',
152   - editable: false
153   - },
154   - {
155   - title: '付款比例',
156   - dataIndex: 'proportion',
157   - editable: false
158   - },
159   - {
160   - title: '付款金额',
161   - dataIndex: 'payPrice',
162   - editable: false
163   - },
164   - {
165   - title: '对应的订单',
166   - dataIndex: 'ossId',
167   - editable: false,
168   - hideInTable: true,
169   - },
170   - {
171   - title: '付款时间',
172   - dataIndex: 'payDate',
173   - editable: false,
174   - render: (text, record, _, action) => {
175   - const handleChange = (value) => {
176   - const updatedDataSource = payWayDetailBody.map(item => {
177   - if (item.id === record.id) {
178   - return {
179   - ...item,
180   - payDate: value
181   - };
182   - }
183   - return item;
184   - });
185   - // console.log(updatedDataSource);
  133 + // function setCurrtSave(_value) {
  134 + // setIsCurrtSave(payWayDetailBody)
  135 + // }
186 136  
187   - setPayWayDetailBody(updatedDataSource);
188   - currtSave(updatedDataSource)
189   - };
190   -
191   - return (
192   - <span>{new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }).format(record.payDate)}</span>
193   - // <ProFormDatePicker
194   - // className='dataChoose'
195   - // initialValue={record.payDate}
196   - // value={record.payDate}
197   - // placeholder={"请填写时间"}
198   - // fieldProps={{
199   - // format: (value) => value.format('YYYY-MM-DD'),
200   - // onChange: handleChange,
201   - // }}
202   - // />
203   - );
204   - }
205   - },
206   - {
207   - title: '付款单回执',
208   - dataIndex: 'fileName',
209   - render: (text, record, _, action) => {
210   - if (isAccept !== record.id) {
211   - if (typeof record.fileUrl === 'object' && record.fileUrl instanceof File) {
212   - return (<a onClick={() => message.error("请先保存")}>{record.fileName}</a>)
213   - } else {
214   - return (<a href={record.fileUrl}>{record.fileName}</a>)
215   - }
216   - } else {
217   - return (
218   - <ProFormUploadButton
219   - name={record.id}
220   - onChange={(value) => {
221   - // console.log(value);
222   - // console.log(payWayDetailBody);
223   - let remakeBody = [];
224   - let remakeBodyItem = {};
225   - payWayDetailBody.forEach(item => {
226   - if (item.id === record.id) {
227   - remakeBodyItem = { ...item, fileUrl: value.file.originFileObj, fileName: value.file.name }
228   - } else {
229   - remakeBodyItem = { ...item }
230   - } if (value.fileList.length == 0) {
231   - remakeBodyItem = { ...item, fileUrl: undefined, fileName: undefined }
232   - }
233   - remakeBody.push(remakeBodyItem)
234   - })
235   - setPayWayDetailBody(remakeBody)
236   - currtSave(remakeBody)
237   - }}
238   - width="md"
239   - max={1} />
240   - )
241   - }
242   - },
  137 + const columns: ProColumns<DataSourceType>[] = [
  138 + {
  139 + title: '编号',
  140 + dataIndex: 'id',
  141 + hideInTable: true,
  142 + editable: false,
  143 + },
  144 + {
  145 + title: '付款信息',
  146 + dataIndex: 'payStep',
  147 + editable: false,
  148 + },
  149 + {
  150 + title: '付款比例',
  151 + dataIndex: 'proportion',
  152 + editable: false,
  153 + },
  154 + {
  155 + title: '付款金额',
  156 + dataIndex: 'payPrice',
  157 + editable: false,
  158 + },
  159 + {
  160 + title: '对应的订单',
  161 + dataIndex: 'ossId',
  162 + editable: false,
  163 + hideInTable: true,
  164 + },
  165 + {
  166 + title: '付款时间',
  167 + dataIndex: 'payDate',
  168 + editable: false,
  169 + render: (_text, record) => {
  170 + return (
  171 + <span>
  172 + {new Intl.DateTimeFormat('zh-CN', {
  173 + year: 'numeric',
  174 + month: 'long',
  175 + day: 'numeric',
  176 + }).format(record.payDate)}
  177 + </span>
  178 + // <ProFormDatePicker
  179 + // className='dataChoose'
  180 + // initialValue={record.payDate}
  181 + // value={record.payDate}
  182 + // placeholder={"请填写时间"}
  183 + // fieldProps={{
  184 + // format: (value) => value.format('YYYY-MM-DD'),
  185 + // onChange: handleChange,
  186 + // }}
  187 + // />
  188 + );
  189 + },
  190 + },
  191 + {
  192 + title: '付款单回执',
  193 + dataIndex: 'fileName',
  194 + render: (_text, record) => {
  195 + if (isAccept !== record.id) {
  196 + if (
  197 + typeof record.fileUrl === 'object' &&
  198 + record.fileUrl instanceof File
  199 + ) {
  200 + return (
  201 + <a onClick={() => message.error('请先保存')}>{record.fileName}</a>
  202 + );
  203 + } else {
  204 + return <a href={record.fileUrl}>{record.fileName}</a>;
  205 + }
  206 + } else {
  207 + return (
  208 + <ProFormUploadButton
  209 + name={record.id}
  210 + onChange={(value) => {
  211 + let remakeBody = [];
  212 + let remakeBodyItem = {};
  213 + payWayDetailBody.forEach((item) => {
  214 + if (item.id === record.id) {
  215 + remakeBodyItem = {
  216 + ...item,
  217 + fileUrl: value.file.originFileObj,
  218 + fileName: value.file.name,
  219 + };
  220 + } else {
  221 + remakeBodyItem = { ...item };
  222 + }
  223 + if (value.fileList.length === 0) {
  224 + remakeBodyItem = {
  225 + ...item,
  226 + fileUrl: undefined,
  227 + fileName: undefined,
  228 + };
  229 + }
  230 + remakeBody.push(remakeBodyItem);
  231 + });
  232 + setPayWayDetailBody(remakeBody);
  233 + currtSave(remakeBody);
  234 + }}
  235 + width="md"
  236 + max={1}
  237 + />
  238 + );
243 239 }
244   - ];
  240 + },
  241 + },
  242 + ];
245 243  
246   - return (
247   - <>
248   - <EditableProTable<DataSourceType>
249   - rowKey="id"
250   - className='payway-detail-index'
251   - toolbar={{ style: { display: 'none' } }}
252   - ghost={true}
253   - scroll={{
254   - x: 960,
255   - }}
256   - recordCreatorProps={
257   - position !== 'hidden'
258   - ? {
259   - position: position as 'top',
260   - record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
261   - }
262   - : false
263   - }
264   - loading={false}
265   - toolBarRender={() => [
266   - <ProFormRadio.Group
267   - key="render"
268   - fieldProps={{
269   - value: position,
270   - onChange: (e) => setPosition(e.target.value),
271   - }}
272   - />,
273   - ]}
274   - columns={columns}
275   - request={payWayDetailBody}
276   - value={payWayDetailBody}
277   - onChange={() => {
278   - setPayWayDetailBody;
279   - setCurrtSave(payWayDetailBody)
280   - }}
281   - editable={{
282   - type: 'multiple',
283   - editableKeys,
284   - onSave: async (rowKey, data, row) => {
285   - // console.log(rowKey, data, row);
286   - await waitTime(2000);
287   - },
288   - onChange: setEditableRowKeys,
289   - }}
290   - />
291   - </>
292   - );
293   -};
294 244 \ No newline at end of file
  245 + return (
  246 + <>
  247 + <EditableProTable<DataSourceType>
  248 + rowKey="id"
  249 + className="payway-detail-index"
  250 + toolbar={{ style: { display: 'none' } }}
  251 + ghost={true}
  252 + scroll={{
  253 + x: 960,
  254 + }}
  255 + recordCreatorProps={
  256 + position !== 'hidden'
  257 + ? {
  258 + position: position as 'top',
  259 + record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
  260 + }
  261 + : false
  262 + }
  263 + loading={false}
  264 + toolBarRender={() => [
  265 + <ProFormRadio.Group
  266 + key="render"
  267 + fieldProps={{
  268 + value: position,
  269 + onChange: (e) => setPosition(e.target.value),
  270 + }}
  271 + />,
  272 + ]}
  273 + columns={columns}
  274 + request={payWayDetailBody}
  275 + value={payWayDetailBody}
  276 + onChange={(value) => {
  277 + setPayWayDetailBody(value);
  278 + // setCurrtSave(payWayDetailBody)
  279 + }}
  280 + editable={{
  281 + type: 'multiple',
  282 + editableKeys,
  283 + onSave: async () => {
  284 + await waitTime(2000);
  285 + },
  286 + onChange: setEditableRowKeys,
  287 + }}
  288 + />
  289 + </>
  290 + );
  291 +};
... ...
src/pages/Instalment/components/read/readProduct.tsx
  View file @d5cb3ed
1 1 import type { ProColumns } from '@ant-design/pro-components';
2   -import {
3   - EditableProTable,
4   - ProCard,
5   - ProFormField,
6   - ProFormRadio,
7   -} from '@ant-design/pro-components';
8   -import React, { useEffect, useState } from 'react';
9   -import { countBy } from 'lodash';
  2 +import { EditableProTable, ProFormRadio } from '@ant-design/pro-components';
10 3 import { Form } from 'antd';
  4 +import React, { useEffect, useState } from 'react';
11 5  
12 6 const waitTime = (time: number = 100) => {
13   - return new Promise((resolve) => {
14   - setTimeout(() => {
15   - resolve(true);
16   - }, time);
17   - });
18   -};
19   -
20   -type DataSourceType = {
21   - count?: number;
22   - id: React.Key;
23   - deviceModel?: string;
24   - deviceName?: string;
25   - price?: number;
26   - unitPrice?: number;
  7 + return new Promise((resolve) => {
  8 + setTimeout(() => {
  9 + resolve(true);
  10 + }, time);
  11 + });
27 12 };
28 13  
29   -const defaultData: DataSourceType[] = [
30   - // {
31   - // id:1,
32   - // deviceName: '高低温试验箱',
33   - // deviceModel: 'CAN-TES36-0049ST',
34   - // count: 1,
35   - // unitPrice: 24500,
36   - // price: 24500,
37   - // }
38   -];
  14 +// type DataSourceType = {
  15 +// count?: number;
  16 +// id: React.Key;
  17 +// deviceModel?: string;
  18 +// deviceName?: string;
  19 +// price?: number;
  20 +// unitPrice?: number;
  21 +// };
39 22  
40 23 export default ({ productBody, EditProductBody }) => {
41   - const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
42   - const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
43   - const [form] = Form.useForm<{ name: string; company: string }>();
44   - const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
45   - 'hidden',
46   - );
47   - function getDataSourece() {
48   - if (productBody.length != 0) {
49   - setDataSource(productBody)
50   - }
  24 + const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  25 + const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  26 + const [form] = Form.useForm<{ name: string; company: string }>();
  27 + const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
  28 + 'hidden',
  29 + );
  30 + function getDataSourece() {
  31 + if (productBody.length !== 0) {
  32 + setDataSource(productBody);
51 33 }
52   - function setEditProductBody(value) {
53   - // console.log(value);
54   - // console.log(dataSource);
55   -
56   - const modifiedArray = value.map(obj => {
57   - if (obj.dId && Number(obj.dId) <= 1000) {
58   - return {
59   - ...obj,
60   - count: obj.count,
61   - dId: null,
62   - deviceModel: obj.deviceModel,
63   - deviceName: obj.deviceName,
64   - price: obj.price,
65   - unitPrice: obj.unitPrice
66   - };
67   - } else {
68   - return obj;
69   - }
70   - });
71   - // console.log(modifiedArray);
  34 + }
  35 + function setEditProductBody(value) {
  36 + const modifiedArray = value.map((obj) => {
  37 + if (obj.dId && Number(obj.dId) <= 1000) {
  38 + return {
  39 + ...obj,
  40 + count: obj.count,
  41 + dId: null,
  42 + deviceModel: obj.deviceModel,
  43 + deviceName: obj.deviceName,
  44 + price: obj.price,
  45 + unitPrice: obj.unitPrice,
  46 + };
  47 + } else {
  48 + return obj;
  49 + }
  50 + });
72 51  
73   - EditProductBody(modifiedArray)
74   - setDataSource(value)
75   - }
  52 + EditProductBody(modifiedArray);
  53 + setDataSource(value);
  54 + }
76 55  
77   - useEffect(() => {
78   - getDataSourece()
79   - }, [productBody])
  56 + useEffect(() => {
  57 + getDataSourece();
  58 + }, [productBody]);
80 59  
81   - type DataSourceType = {
82   - id: React.Key,
83   - count: number,
84   - dId?: number,
85   - deviceModel: string,
86   - deviceName: string,
87   - price: number
88   - unitPrice: number,
89   - // logicDelete:1
90   - }
  60 + type DataSourceType = {
  61 + id: React.Key;
  62 + count: number;
  63 + dId?: number;
  64 + deviceModel: string;
  65 + deviceName: string;
  66 + price: number;
  67 + unitPrice: number;
  68 + };
91 69  
  70 + const columns: ProColumns<DataSourceType>[] = [
  71 + {
  72 + title: '设备编号',
  73 + dataIndex: 'dId',
  74 + hideInTable: true,
  75 + },
  76 + {
  77 + title: '设备名称',
  78 + dataIndex: 'deviceName',
  79 + formItemProps: () => {
  80 + return {
  81 + rules: [{ required: true, message: '此项为必填项' }],
  82 + };
  83 + },
  84 + },
  85 + {
  86 + title: '设备型号',
  87 + dataIndex: 'deviceModel',
  88 + width: '15%',
  89 + formItemProps: () => {
  90 + return {
  91 + rules: [{ required: true, message: '此项为必填项' }],
  92 + };
  93 + },
  94 + },
  95 + {
  96 + title: '数量',
  97 + dataIndex: 'count',
  98 + onChange: (e) => {
  99 + const unitPrice = form.getFieldValue(`data[${rowIndex}].unitPrice`);
  100 + form.setFieldsValue({
  101 + [`data[${rowIndex}].price`]: e * unitPrice,
  102 + });
  103 + },
  104 + formItemProps: () => {
  105 + return {
  106 + rules: [{ required: true, message: '此项为必填项' }],
  107 + };
  108 + },
  109 + },
  110 + {
  111 + title: '单价',
  112 + dataIndex: 'unitPrice',
  113 + formItemProps: () => {
  114 + return {
  115 + rules: [{ required: true, message: '此项为必填项' }],
  116 + };
  117 + },
  118 + },
  119 + {
  120 + title: '总价',
  121 + dataIndex: 'price',
  122 + formItemProps: () => {
  123 + return {
  124 + rules: [{ required: true, message: '此项为必填项' }],
  125 + };
  126 + },
  127 + },
  128 + ];
92 129  
93   - const columns: ProColumns<DataSourceType>[] = [
94   - {
95   - title: '设备编号',
96   - dataIndex: 'dId',
97   - hideInTable: true,
98   - },
99   - {
100   - title: '设备名称',
101   - dataIndex: 'deviceName',
102   - formItemProps: (form, { rowIndex }) => {
103   - return {
104   - rules:
105   - [{ required: true, message: '此项为必填项' }]
106   - };
107   - }
108   - },
109   - {
110   - title: '设备型号',
111   - dataIndex: 'deviceModel',
112   - width: '15%',
113   - formItemProps: (form, { rowIndex }) => {
114   - return {
115   - rules:
116   - [{ required: true, message: '此项为必填项' }]
117   - };
118   - }
119   - },
120   - {
121   - title: '数量',
122   - dataIndex: 'count',
123   - onChange: (e) => {
124   - // console.log(e);
125   - const unitPrice = form.getFieldValue(`data[${rowIndex}].unitPrice`);
126   - form.setFieldsValue({
127   - [`data[${rowIndex}].price`]: e * unitPrice
128   - });
129   - },
130   - formItemProps: (form, { rowIndex }) => {
131   - return {
132   - rules:
133   - [{ required: true, message: '此项为必填项' }]
134   - };
135   - }
136   - },
137   - {
138   - title: '单价',
139   - dataIndex: 'unitPrice',
140   - formItemProps: (form, { rowIndex }) => {
141   - return {
142   - rules:
143   - [{ required: true, message: '此项为必填项' }]
144   - };
145   - }
146   - },
147   - {
148   - title: '总价',
149   - dataIndex: 'price',
150   - formItemProps: (form, { rowIndex }) => {
151   - return {
152   - rules:
153   - [{ required: true, message: '此项为必填项' }]
154   - };
155   - }
  130 + return (
  131 + <>
  132 + <EditableProTable<DataSourceType>
  133 + className="product-detail-index"
  134 + rowKey="dId"
  135 + toolbar={{ style: { display: 'none' } }}
  136 + ghost={true}
  137 + scroll={{
  138 + x: 960,
  139 + }}
  140 + recordCreatorProps={
  141 + position !== 'hidden'
  142 + ? {
  143 + position: position as 'top',
  144 + record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
  145 + }
  146 + : false
156 147 }
157   - ];
158   -
159   - return (
160   - <>
161   - <EditableProTable<DataSourceType>
162   - className='product-detail-index'
163   - rowKey="dId"
164   - toolbar={{ style: { display: 'none' } }}
165   - ghost={true}
166   - scroll={{
167   - x: 960,
168   - }}
169   - recordCreatorProps={
170   - position !== 'hidden'
171   - ? {
172   - position: position as 'top',
173   - record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
174   - }
175   - : false
176   - }
177   - loading={false}
178   - toolBarRender={() => [
179   - <ProFormRadio.Group
180   - key="render"
181   - fieldProps={{
182   - value: position,
183   - onChange: (e) => setPosition(e.target.value),
184   - }}
185   - />,
186   - ]}
187   - columns={columns}
188   - request={dataSource}
189   - value={dataSource}
190   - onChange={setEditProductBody}
191   - editable={{
192   - type: 'multiple',
193   - editableKeys,
194   - onSave: async (rowKey, data, row) => {
195   - await waitTime(500);
196   - },
197   - onChange: setEditableRowKeys,
198   - }}
199   - />
200   - </>
201   - );
202   -};
203 148 \ No newline at end of file
  149 + loading={false}
  150 + toolBarRender={() => [
  151 + <ProFormRadio.Group
  152 + key="render"
  153 + fieldProps={{
  154 + value: position,
  155 + onChange: (e) => setPosition(e.target.value),
  156 + }}
  157 + />,
  158 + ]}
  159 + columns={columns}
  160 + request={dataSource}
  161 + value={dataSource}
  162 + onChange={setEditProductBody}
  163 + editable={{
  164 + type: 'multiple',
  165 + editableKeys,
  166 + onSave: async () => {
  167 + await waitTime(500);
  168 + },
  169 + onChange: setEditableRowKeys,
  170 + }}
  171 + />
  172 + </>
  173 + );
  174 +};
... ...