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,7 +63,7 @@ export default defineConfig({
63 path: '/instalment', 63 path: '/instalment',
64 component: './Instalment', 64 component: './Instalment',
65 icon: 'BookOutlined', 65 icon: 'BookOutlined',
66 - access: 'canReadAdminAndFinance', 66 + access: 'canReadLinda',
67 }, 67 },
68 { 68 {
69 name: '打印', 69 name: '打印',
src/access.ts
  View file @d5cb3ed
1 export default (initialState: API.UserInfo) => { 1 export default (initialState: API.UserInfo) => {
2 // 在这里按照初始化数据定义项目中的权限，统一管理 2 // 在这里按照初始化数据定义项目中的权限，统一管理
3 // 参考文档 https://umijs.org/docs/max/access 3 // 参考文档 https://umijs.org/docs/max/access
4 - const { roleSmallVO } = initialState; 4 + const { roleSmallVO, username } = initialState;
5 5
6 return { 6 return {
7 canReadAdmin: roleSmallVO?.code === 'admin', 7 canReadAdmin: roleSmallVO?.code === 'admin',
  8 + canReadLinda: username === 'Linda' || '吴量',
8 canReadProcure: roleSmallVO?.code === 'procure', 9 canReadProcure: roleSmallVO?.code === 'procure',
9 canReadAdminAndFinance: 10 canReadAdminAndFinance:
10 roleSmallVO?.code === 'admin' || roleSmallVO?.code === 'finance', 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 import { useState } from 'react'; 3 import { useState } from 'react';
11 4
12 const waitTime = (time: number = 100) => { 5 const waitTime = (time: number = 100) => {
@@ -17,14 +10,13 @@ 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 const [form] = Form.useForm<{ name: string; company: string }>(); 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 return ( 21 return (
30 <ModalForm<{ 22 <ModalForm<{
@@ -32,7 +24,11 @@ export default ({currtDid,sureDelete}) =&gt; { @@ -32,7 +24,11 @@ export default ({currtDid,sureDelete}) =&gt; {
32 company: string; 24 company: string;
33 }> 25 }>
34 trigger={ 26 trigger={
35 - <a onClick={()=>{getIds()}}> 27 + <a
  28 + onClick={() => {
  29 + getIds();
  30 + }}
  31 + >
36 删除 32 删除
37 </a> 33 </a>
38 } 34 }
@@ -41,18 +37,16 @@ export default ({currtDid,sureDelete}) =&gt; { @@ -41,18 +37,16 @@ export default ({currtDid,sureDelete}) =&gt; {
41 width={190} 37 width={190}
42 modalProps={{ 38 modalProps={{
43 destroyOnClose: true, 39 destroyOnClose: true,
44 - // onCancel: () => console.log('run'),  
45 }} 40 }}
46 - onFinish={async (values) => { 41 + onFinish={async () => {
47 await waitTime(100); 42 await waitTime(100);
48 sureDelete([ids]); 43 sureDelete([ids]);
49 - // console.log(values.name);  
50 message.success('提交成功'); 44 message.success('提交成功');
51 return true; 45 return true;
52 }} 46 }}
53 > 47 >
54 - <br/> 48 + <br />
55 <h2>确定删除吗</h2> 49 <h2>确定删除吗</h2>
56 </ModalForm> 50 </ModalForm>
57 ); 51 );
58 -};  
59 \ No newline at end of file 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 import { PlusOutlined } from '@ant-design/icons'; 7 import { PlusOutlined } from '@ant-design/icons';
2 import { 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 } from '@ant-design/pro-components'; 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 import { RcFile } from 'antd/es/upload'; 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 const waitTime = (time: number = 100) => { 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 \ No newline at end of file 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 import { 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 } from '@ant-design/pro-components'; 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 import { RcFile } from 'antd/es/upload'; 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 const waitTime = (time: number = 100) => { 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 export default ({ currentContract, toReload }) => { 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 \ No newline at end of file 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 import type { ProColumns } from '@ant-design/pro-components'; 2 import type { ProColumns } from '@ant-design/pro-components';
2 import { 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 } from '@ant-design/pro-components'; 8 } from '@ant-design/pro-components';
12 -import React, { useEffect, useState } from 'react';  
13 -import './payWayDetail.less'  
14 -import { getOrderErpOrderStagesPayWaySelectOssId, postOrderErpOrderStagesPayWaySelect } from '@/services';  
15 import { message } from 'antd'; 9 import { message } from 'antd';
  10 +import React, { useEffect, useState } from 'react';
  11 +import './payWayDetail.less';
16 12
17 const waitTime = (time: number = 100) => { 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 type DataSourceType = { 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 export default ({ payBody, thisId, currtSave }) => { 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 \ No newline at end of file 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 import type { ProColumns } from '@ant-design/pro-components'; 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 import React, { useEffect, useState } from 'react'; 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 const waitTime = (time: number = 100) => { 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 export default ({ productBody, EditProductBody }) => { 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 \ No newline at end of file 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 import { 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 } from '@ant-design/pro-components'; 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 import { RcFile } from 'antd/es/upload'; 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 const waitTime = (time: number = 100) => { 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 export default ({ currentContract }) => { 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 width="md" 320 width="md"
314 name="annex" 321 name="annex"
315 label="合同附件" 322 label="合同附件"
@@ -318,45 +325,52 @@ export default ({ currentContract }) =&gt; { @@ -318,45 +325,52 @@ export default ({ currentContract }) =&gt; {
318 readonly 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 \ No newline at end of file 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 import type { ProColumns } from '@ant-design/pro-components'; 2 import type { ProColumns } from '@ant-design/pro-components';
2 import { 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 } from '@ant-design/pro-components'; 7 } from '@ant-design/pro-components';
12 -import React, { useEffect, useState } from 'react';  
13 -import { postOrderErpOrderStagesPayWaySelect } from '@/services';  
14 import { message } from 'antd'; 8 import { message } from 'antd';
  9 +import React, { useEffect, useState } from 'react';
15 10
16 const waitTime = (time: number = 100) => { 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 type DataSourceType = { 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 export default ({ payBody, thisId, currtSave }) => { 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 \ No newline at end of file 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 import type { ProColumns } from '@ant-design/pro-components'; 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 import { Form } from 'antd'; 3 import { Form } from 'antd';
  4 +import React, { useEffect, useState } from 'react';
11 5
12 const waitTime = (time: number = 100) => { 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 export default ({ productBody, EditProductBody }) => { 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 \ No newline at end of file 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 +};