fix: 修改附件组件

boyang
1 parent 0a62353d
Showing 8 changed files with 311 additions and 56 deletions
src/pages/Client/Client/Components/ClientInformationModal.tsx
src/pages/Client/Client/Components/ClientModal.tsx
src/pages/Client/Client/Components/InformationHistoryModal.tsx
src/pages/Client/Client/index.tsx
src/pages/Client/FollowRecord/Components/ClientModal.tsx
src/pages/Client/FollowRecord/Components/ClientModal2.tsx
src/pages/Client/FollowRecord/Components/CommunicationHistoryModal.tsx
src/pages/Client/FollowRecord/index.tsx
 import { RESPONSE_CODE } from '@/constants/enum';
+import UploadC from '@/pages/Invoice/waitProcessRecord/components/UploadSingleImg';
 import {
   postAdminClientAddOrModifyClientComunicationInfo,
   postAdminClientQueryClientPage,
@@ -16,7 +17,7 @@ import {
   ProFormTextArea,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
+import { Button, Col, Form, Row, message } from 'antd';
 import { RcFile } from 'antd/es/upload';
 import './style.css';
 export default ({ data, type, reloadTable }) => {
@@ -342,7 +343,7 @@ export default ({ data, type, reloadTable }) =&gt; {
         initialValue={data?.ticketsDetail ? data?.ticketsDetail + '' : null}
         readonly={optType[type].readOnly}
       ></ProFormTextArea>
-      <ProFormUploadDragger
+      {/* <ProFormUploadDragger
         label="工单附件"
         name="ticketsAttachment"
         action="upload.do"
@@ -369,7 +370,41 @@ export default ({ data, type, reloadTable }) =&gt; {
           uploadFile(info);
         }}
         max={1}
-      />
+      /> */}
+      <Row>
+        <Col span={4}>上传发票:</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const urls = []; // 创建一个数组来存储所有的 URL
+
+                for (const file of newFileList) {
+                  const formData = new FormData();
+                  formData.append('file', file.originFileObj as RcFile);
+
+                  const res = await postOrderErpOrderStagesUpload({
+                    data: formData,
+                    headers: {
+                      'Content-Type':
+                        'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                    },
+                  });
+
+                  const url = res.data; // 获取响应中的 URL
+                  urls.push(url); // 将每个 URL 追加到数组中
+                }
+
+                // 将所有 URL 使用 ',' 进行拼接
+                const combinedUrl = urls.join(',');
+                form.setFieldValue('ticketsAttachments', combinedUrl); // 设置表单字段值为拼接后的 URL
+              } else {
+                form.setFieldValue('ticketsAttachments', null); // 如果没有文件，则清空 URL
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row>
       <a hidden={!optType[type].readOnly} href={data?.orderAttachment} download>
         下载附件
       </a>
 import { RESPONSE_CODE } from '@/constants/enum';
+import UploadC from '@/pages/Invoice/waitProcessRecord/components/UploadSingleImg';
 import {
   postAdminClientAddOrModifyClientComunicationInfo,
   postAdminClientQueryClientPage,
@@ -16,7 +17,7 @@ import {
   ProFormTextArea,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
+import { Button, Col, Form, Row, message } from 'antd';
 import { RcFile } from 'antd/es/upload';
 import './style.css';
 export default ({ data, type, reloadTable }) => {
@@ -291,7 +292,41 @@ export default ({ data, type, reloadTable }) =&gt; {
         initialValue={data?.detailText ? data?.detailText + '' : null}
         readonly={optType[type].readOnly}
       ></ProFormTextArea>
-      <ProFormUploadDragger
+      <Row>
+        <Col span={4}>上传发票:</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const urls = []; // 创建一个数组来存储所有的 URL
+
+                for (const file of newFileList) {
+                  const formData = new FormData();
+                  formData.append('file', file.originFileObj as RcFile);
+
+                  const res = await postOrderErpOrderStagesUpload({
+                    data: formData,
+                    headers: {
+                      'Content-Type':
+                        'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                    },
+                  });
+
+                  const url = res.data; // 获取响应中的 URL
+                  urls.push(url); // 将每个 URL 追加到数组中
+                }
+
+                // 将所有 URL 使用 ',' 进行拼接
+                const combinedUrl = urls.join(',');
+                form.setFieldValue('ticketsAttachments', combinedUrl); // 设置表单字段值为拼接后的 URL
+              } else {
+                form.setFieldValue('ticketsAttachments', null); // 如果没有文件，则清空 URL
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row>
+      {/* <ProFormUploadDragger
         label="工单附件"
         name="ticketsAttachment"
         action="upload.do"
@@ -318,7 +353,7 @@ export default ({ data, type, reloadTable }) =&gt; {
           uploadFile(info);
         }}
         max={1}
-      />
+      /> */}
       <a hidden={!optType[type].readOnly} href={data?.orderAttachment} download>
         下载附件
       </a>
@@ -2,7 +2,6 @@
 import ClientInformationModal from '@/pages/Client/Client/Components/ClientInformationModal';
 import {
-  getOrderErpTicketsGetTicketsByClientId,
   postAdminClientQueryClientComunicationInfo,
   postAdminClientRemoveClientComunicationInfo,
 } from '@/services/request';
@@ -31,6 +30,7 @@ export default ({ data, reloadTable }) =&gt; {
   const [ticketsDetail, setTicketsDetail] = useState(''); // 附件名称
   const [ticketsAttachment, setTicketsAttachment] = useState(''); // 附件名称
   const [assignPeople, setAssignPeople] = useState(''); // 附件名称
+  const [comment, setComment] = useState(''); // 客户评价
   useEffect(() => {
     const request = async () => {
@@ -39,18 +39,9 @@ export default ({ data, reloadTable }) =&gt; {
           id: data.id,
         },
       });
-      const resTicket = await getOrderErpTicketsGetTicketsByClientId({
-        query: {
-          id: data.id,
-        },
-      });
       const dataSearch = res.data.data[0];
       if (dataSearch) {
-        data.type = resTicket.data.type;
-        data.detailText = resTicket.data.detailText;
-        data.annexUrl = resTicket.data.annexUrl;
-        data.assignPeople = resTicket.data.assignPeople;
         if (dataSearch.attachments) {
           const url = dataSearch.attachments;
           const match = url.match(/aliyuncs\.com\/(.*?)\?/);
@@ -63,11 +54,11 @@ export default ({ data, reloadTable }) =&gt; {
             setAttachmentsName(decodedStr); // 设置跟进日期
           }
         }
-
+        setComment(dataSearch.comment);
         setTicketsType(dataSearch.ticketsTypeText);
-        setTicketsDetail(resTicket.data.detailText);
-        setTicketsAttachment(resTicket.data.annexUrl);
-        setAssignPeople(resTicket.data.assignPeople);
+        setTicketsDetail(dataSearch.ticketsDetail);
+        setTicketsAttachment(dataSearch.ticketsAttachments);
+        setAssignPeople(dataSearch.assignPeople);
         setDatetime(dataSearch.datetime); // 设置跟进日期
         // setDateRange(data.dateRange || []); // 设置跟进时间范围
         setCreateByName(dataSearch.createByName); // 设置跟进人员
@@ -141,6 +132,11 @@ export default ({ data, reloadTable }) =&gt; {
       label: '指派人员',
       children: assignPeople, // 跟进状态
     },
+    {
+      key: '11',
+      label: '客户评价',
+      children: comment, // 跟进状态
+    },
   ];
   const handleDelete = async () => {
     // 调用删除接口
@@ -250,10 +246,10 @@ export default ({ data, reloadTable }) =&gt; {
             工单附件：{ticketsAttachment}
           </a>
         )} */}
-        {ticketsAttachment && (
+        {/* {ticketsAttachment && (
           <div>
             {ticketsAttachment.includes('jpg') ||
-            ticketsAttachment.includes('png') ? (
+              ticketsAttachment.includes('png') ? (
               <>
                 <img
                   src={ticketsAttachment}
@@ -271,6 +267,28 @@ export default ({ data, reloadTable }) =&gt; {
               </a>
             )}
           </div>
+        )} */}
+        {ticketsAttachment && (
+          <div>
+            {ticketsAttachment.split(',').map((ticketsAttachment, index) => (
+              <div key={index}>
+                {ticketsAttachment.includes('jpg') ||
+                ticketsAttachment.includes('png') ? (
+                  <>
+                    <img
+                      src={ticketsAttachment}
+                      alt={`附件 ${index + 1}`}
+                      style={{ maxWidth: '300px', height: 'auto' }}
+                    />
+                    <div></div>
+                  </>
+                ) : null}
+                <a href={ticketsAttachment} download>
+                  工单附件：{ticketsAttachment}
+                </a>
+              </div>
+            ))}
+          </div>
         )}
       </ModalForm>
     </Space>
@@ -166,6 +166,13 @@ const columns = [
   //     return enumToSelect(res.data);
   //   },
   // },
+  // {
+  //   title: '创建人',
+  //   width: 150,
+  //   ellipsis: true,
+  //   dataIndex: 'createByName',
+  //   hideInSearch: true,
+  // },
   {
     title: '客户等级',
     width: 150,
 import { RESPONSE_CODE } from '@/constants/enum';
+import UploadC from '@/pages/Invoice/waitProcessRecord/components/UploadSingleImg';
 import {
   postAdminClientAddOrModifyClientComunicationInfo,
   postAdminClientQueryClientPage,
@@ -16,7 +17,7 @@ import {
   ProFormTextArea,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
+import { Button, Col, Form, Row, message } from 'antd';
 import { RcFile } from 'antd/es/upload';
 import './style.css';
 export default ({ data, type, reloadTable }) => {
@@ -341,7 +342,7 @@ export default ({ data, type, reloadTable }) =&gt; {
         initialValue={data?.ticketsDetail ? data?.ticketsDetail + '' : null}
         readonly={optType[type].readOnly}
       ></ProFormTextArea>
-      <ProFormUploadDragger
+      {/* <ProFormUploadDragger
         label="工单附件"
         name="ticketsAttachment"
         action="upload.do"
@@ -368,7 +369,41 @@ export default ({ data, type, reloadTable }) =&gt; {
           uploadFile(info);
         }}
         max={1}
-      />
+      /> */}
+      <Row>
+        <Col span={4}>上传发票:</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const urls = []; // 创建一个数组来存储所有的 URL
+
+                for (const file of newFileList) {
+                  const formData = new FormData();
+                  formData.append('file', file.originFileObj as RcFile);
+
+                  const res = await postOrderErpOrderStagesUpload({
+                    data: formData,
+                    headers: {
+                      'Content-Type':
+                        'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                    },
+                  });
+
+                  const url = res.data; // 获取响应中的 URL
+                  urls.push(url); // 将每个 URL 追加到数组中
+                }
+
+                // 将所有 URL 使用 ',' 进行拼接
+                const combinedUrl = urls.join(',');
+                form.setFieldValue('ticketsAttachments', combinedUrl); // 设置表单字段值为拼接后的 URL
+              } else {
+                form.setFieldValue('ticketsAttachments', null); // 如果没有文件，则清空 URL
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row>
       <a hidden={!optType[type].readOnly} href={data?.orderAttachment} download>
         {/* <a href={data?.annexUrl} download> */}
         下载附件
 import { RESPONSE_CODE } from '@/constants/enum';
+import UploadC from '@/pages/Invoice/waitProcessRecord/components/UploadSingleImg';
 import {
   postAdminClientAddOrModifyClientComunicationInfo,
   postAdminClientQueryClientPage,
@@ -16,7 +17,7 @@ import {
   ProFormTextArea,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
+import { Button, Col, Form, Row, message } from 'antd';
 import { RcFile } from 'antd/es/upload';
 import './style.css';
 export default ({ data, type, reloadTable }) => {
@@ -72,6 +73,10 @@ export default ({ data, type, reloadTable }) =&gt; {
           form.getFieldValue('ticketsAttachments') !== undefined
             ? form.getFieldValue('ticketsAttachments')
             : data?.ticketsAttachments,
+        url:
+          form.getFieldValue('url') !== undefined
+            ? form.getFieldValue('url')
+            : data?.url,
         // ticketsAttachments: data?.annexUrl,
       },
     });
@@ -341,7 +346,7 @@ export default ({ data, type, reloadTable }) =&gt; {
         initialValue={data?.ticketsDetail ? data?.ticketsDetail + '' : null}
         readonly={optType[type].readOnly}
       ></ProFormTextArea>
-      <ProFormUploadDragger
+      {/* <ProFormUploadDragger
         label="工单附件"
         name="ticketsAttachment"
         action="upload.do"
@@ -368,7 +373,41 @@ export default ({ data, type, reloadTable }) =&gt; {
           uploadFile(info);
         }}
         max={1}
-      />
+      /> */}
+      <Row>
+        <Col span={4}>上传发票:</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const urls = []; // 创建一个数组来存储所有的 URL
+
+                for (const file of newFileList) {
+                  const formData = new FormData();
+                  formData.append('file', file.originFileObj as RcFile);
+
+                  const res = await postOrderErpOrderStagesUpload({
+                    data: formData,
+                    headers: {
+                      'Content-Type':
+                        'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                    },
+                  });
+
+                  const url = res.data; // 获取响应中的 URL
+                  urls.push(url); // 将每个 URL 追加到数组中
+                }
+
+                // 将所有 URL 使用 ',' 进行拼接
+                const combinedUrl = urls.join(',');
+                form.setFieldValue('ticketsAttachments', combinedUrl); // 设置表单字段值为拼接后的 URL
+              } else {
+                form.setFieldValue('ticketsAttachments', null); // 如果没有文件，则清空 URL
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row>
       <a hidden={!optType[type].readOnly} href={data?.orderAttachment} download>
         {/* <a href={data?.annexUrl} download> */}
         下载附件
@@ -397,6 +436,40 @@ export default ({ data, type, reloadTable }) =&gt; {
           return userOptions;
         }}
       ></ProFormSelect>
+      {/* <Row>
+        <Col span={4}>上传发票:</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const urls = []; // 创建一个数组来存储所有的 URL
+
+                for (const file of newFileList) {
+                  const formData = new FormData();
+                  formData.append('file', file.originFileObj as RcFile);
+
+                  const res = await postOrderErpOrderStagesUpload({
+                    data: formData,
+                    headers: {
+                      'Content-Type':
+                        'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                    },
+                  });
+
+                  const url = res.data; // 获取响应中的 URL
+                  urls.push(url); // 将每个 URL 追加到数组中
+                }
+
+                // 将所有 URL 使用 ',' 进行拼接
+                const combinedUrl = urls.join(',');
+                form.setFieldValue('url', combinedUrl); // 设置表单字段值为拼接后的 URL
+              } else {
+                form.setFieldValue('url', null); // 如果没有文件，则清空 URL
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row> */}
     </ModalForm>
   );
 };
 import ClientModal from '@/pages/Client/FollowRecord/Components/ClientModal';
 import {
-  getOrderErpTicketsGetTicketsByClientId,
   postAdminClientQueryClientComunicationInfo,
   postAdminClientRemoveClientComunicationInfo,
 } from '@/services/request';
@@ -28,8 +27,9 @@ export default ({ data, reloadTable }) =&gt; {
   const [attachmentsName, setAttachmentsName] = useState(''); // 附件名称
   const [ticketsType, setTicketsType] = useState(''); // 附件名称
   const [ticketsDetail, setTicketsDetail] = useState(''); // 附件名称
-  const [ticketsAttachment, setTicketsAttachment] = useState(''); // 附件名称
+  const [ticketsAttachment, setTicketsAttachment] = useState(); // 附件名称
   // const [ticketsAttachmentName, setTicketsAttachmentName] = useState(''); // 附件名称
+  const [comment, setComment] = useState(''); // 客户评价
   const [assignPeople, setAssignPeople] = useState(''); // 附件名称
   useEffect(() => {
     const request = async () => {
@@ -38,22 +38,23 @@ export default ({ data, reloadTable }) =&gt; {
           id: data.id,
         },
       });
-      const resTicket = await getOrderErpTicketsGetTicketsByClientId({
-        query: {
-          id: data.id,
-        },
-      });
+      // const resTicket = await getOrderErpTicketsGetTicketsByClientId({
+      //   query: {
+      //     id: data.id,
+      //   },
+      // });
       // data.type = resTicket.data.type;
       // data.detailText = resTicket.data.detailText;
       // data.annexUrl = resTicket.data.annexUrl;
       // data.assignPeople = resTicket.data.assignPeople;
       // console.log(resTicket, '5656resTicket');
       const dataSearch = res.data.data[0];
+      console.log(dataSearch, '5656dataSearch');
       if (dataSearch) {
-        data.type = resTicket.data.type;
-        data.detailText = resTicket.data.detailText;
-        data.annexUrl = resTicket.data.annexUrl;
-        data.assignPeople = resTicket.data.assignPeople;
+        // data.type = resTicket.data.type;
+        // data.detailText = resTicket.data.detailText;
+        // data.annexUrl = resTicket.data.annexUrl;
+        // data.assignPeople = resTicket.data.assignPeople;
         if (dataSearch.attachments) {
           const url = dataSearch.attachments;
           const match = url.match(/aliyuncs\.com\/(.*?)\?/);
@@ -78,10 +79,12 @@ export default ({ data, reloadTable }) =&gt; {
         //     setTicketsAttachmentName(decodedStr); // 设置跟进日期
         //   }
         // }
+        setComment(dataSearch.comment);
         setTicketsType(dataSearch.ticketsTypeText);
-        setTicketsDetail(resTicket.data.detailText);
-        setTicketsAttachment(resTicket.data.annexUrl);
-        setAssignPeople(resTicket.data.assignPeople);
+        setTicketsDetail(dataSearch.ticketsDetail);
+        setTicketsAttachment(dataSearch.ticketsAttachments);
+        setAssignPeople(dataSearch.assignPeople);
+        setComment(dataSearch.comment);
         setDatetime(dataSearch.datetime); // 设置跟进日期
         // setDateRange(data.dateRange || []); // 设置跟进时间范围
         setCreateByName(dataSearch.createByName); // 设置跟进人员
@@ -146,7 +149,7 @@ export default ({ data, reloadTable }) =&gt; {
       children: ticketsDetail, // 跟进状态
     },
     // {
-    //   key: '10',
+    //   key: '12',
     //   label: '工单附件',
     //   children: ticketsAttachment, // 跟进状态
     // },
@@ -155,6 +158,11 @@ export default ({ data, reloadTable }) =&gt; {
       label: '指派人员',
       children: assignPeople, // 跟进状态
     },
+    {
+      key: '11',
+      label: '客户评价',
+      children: comment, // 跟进状态
+    },
   ];
   const handleDelete = async () => {
     // 调用删除接口
@@ -192,11 +200,7 @@ export default ({ data, reloadTable }) =&gt; {
                   key={'modify'}
                   // data={data} // 将表单数据传递给 ClientModal
                   data={{
-                    ...data,
-                    type: data.type,
-                    detailText: data.detailText,
-                    annexUrl: data.annexUrl,
-                    assignPeople: data.assignPeople,
+                    data,
                   }} // 传递修改后的 data
                   reloadTable={() => {
                     actionRef?.current?.reload(); // 重新加载表格数据
@@ -277,10 +281,10 @@ export default ({ data, reloadTable }) =&gt; {
             工单附件：{ticketsAttachment}
           </a>
         )} */}
-        {ticketsAttachment && (
+        {/* {ticketsAttachment && (
           <div>
             {ticketsAttachment.includes('jpg') ||
-            ticketsAttachment.includes('png') ? (
+              ticketsAttachment.includes('png') ? (
               <>
                 <img
                   src={ticketsAttachment}
@@ -298,6 +302,28 @@ export default ({ data, reloadTable }) =&gt; {
               </a>
             )}
           </div>
+        )} */}
+        {ticketsAttachment && (
+          <div>
+            {ticketsAttachment.split(',').map((ticketsAttachment, index) => (
+              <div key={index}>
+                {ticketsAttachment.includes('jpg') ||
+                ticketsAttachment.includes('png') ? (
+                  <>
+                    <img
+                      src={ticketsAttachment}
+                      alt={`附件 ${index + 1}`}
+                      style={{ maxWidth: '300px', height: 'auto' }}
+                    />
+                    <div></div>
+                  </>
+                ) : null}
+                <a href={ticketsAttachment} download>
+                  工单附件：{ticketsAttachment}
+                </a>
+              </div>
+            ))}
+          </div>
         )}
       </ModalForm>
     </Space>
@@ -10,7 +10,7 @@ import {
 import { enumToSelect } from '@/utils';
 import type { ActionType } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
+import { Button, Popconfirm, Space, message } from 'antd';
 import { useRef, useState } from 'react';
 import ClientModal2 from './Components/ClientModal2';
@@ -264,7 +264,7 @@ export default () =&gt; {
             style={{ marginRight: '10px' }}
           />,
           <>
-            <Button
+            {/* <Button
               key={'delete'}
               onClick={() => {
                 handleDelete();
@@ -276,13 +276,39 @@ export default () =&gt; {
               type="primary"
               size="middle"
               danger
-              // 使用 danger 属性来将按钮颜色设置为红色
-              // onFinish={() => {
-              //   actionRef.current.reload();
-              // }}
+            // 使用 danger 属性来将按钮颜色设置为红色
+            // onFinish={() => {
+            //   actionRef.current.reload();
+            // }}
             >
               删除
             </Button>
+            <ButtonConfirm
+              key={'delete'}
+              className="p-0"
+              title={'是否确认删除'}
+              text="删除"
+              type="primary"
+              size="middle"
+              danger
+              onConfirm={async () => {
+                handleDelete();
+                actionRef.current.reload();
+              }}
+            /> */}
+            <Popconfirm
+              title={'是否确认删除'}
+              onConfirm={async () => {
+                handleDelete();
+                actionRef.current.reload();
+              }}
+              okText="确认"
+              cancelText="取消"
+            >
+              <Button key={'delete'} type="primary" size="middle" danger>
+                删除
+              </Button>
+            </Popconfirm>
           </>,
         ];
       },