feat: 优化

ldq1220 · Dec 4, 2024 · d39f4d9 · d39f4d9
1 parent 06879f0
commit d39f4d9
Show file tree

Hide file tree

Showing 12 changed files with 660 additions and 314 deletions.
diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/package.json b/packages/plugins/@gemel/plugin-inquiry-record-detail/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@gemel/plugin-inquiry-record-detail",
-  "version": "1.4.0-alpha",
+  "version": "1.4.11-alpha",
   "main": "dist/server/index.js",
   "displayName": "Inquiry Record Details",
   "displayName.zh-CN": "询料记录详情",
   "description": "View the details of the inquiry record. And custom interaction processing",
-  "description.zh-CN": "查看询料记录详情。并进行自定义交互处理。",
+  "description.zh-CN": "查看询料记录详情，并进行一键回复。",
   "dependencies": {},
   "peerDependencies": {
     "@nocobase/client": "1.x",

diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/css/chatMessage.css b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/css/chatMessage.css
@@ -21,12 +21,12 @@
   border-radius: 8px;
   word-break: break-all;
   line-height: 1.5;
-  background-color: #f0f0f0;
+  background-color: #e6f7ff;
 }
 
 .messageContentSender {
   margin: 0 12px 0 0;
-  background-color: #e6f7ff;
+  background-color: #f0f0f0;
 }
 
 .avatar {

diff --git a/...gins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.svg b/...gins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.svg
diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.tsx
@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+
+const ChatMessagesIcon = () => {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
+      <path
+        d="M1023.402667 53.76A54.570667 54.570667 0 0 0 961.408 7.765333h-390.016a53.290667 53.290667 0 0 0-15.530667 0 54.698667 54.698667 0 0 0-46.592 61.824v186.624h182.528a101.504 101.504 0 0 1 27.050667 0 100.778667 100.778667 0 0 1 66.773333 39.338667 100.736 100.736 0 0 1 19.370667 75.050667v36.906666l73.984 49.92a20.394667 20.394667 0 0 0 11.434667 3.498667 20.650667 20.650667 0 0 0 20.736-20.608l-7.381334-62.933333h59.733334c40.746667 0 59.733333-19.328 59.733333-60.672V69.546667a55.125333 55.125333 0 0 0 0.170667-15.786667z m-376.490667 168.661333a29.866667 29.866667 0 0 1-29.866667-29.866666 29.866667 29.866667 0 0 1 29.866667-29.866667 29.866667 29.866667 0 0 1 29.866667 29.866667 29.866667 29.866667 0 0 1-29.909334 29.866666z m119.466667 0a29.866667 29.866667 0 0 1-29.866667-29.866666 29.866667 29.866667 0 0 1 29.866667-29.866667 29.866667 29.866667 0 0 1 29.866666 29.866667 29.866667 29.866667 0 0 1-29.909333 29.866666z m119.466666 0a29.866667 29.866667 0 0 1-29.866666-29.866666 29.866667 29.866667 0 0 1 29.866666-29.866667 29.866667 29.866667 0 0 1 29.866667 29.866667 29.866667 29.866667 0 0 1-29.909333 29.866666z"
+        fill="#BCABEE"
+      ></path>
+      <path
+        d="M679.722667 293.333333H138.922667a75.690667 75.690667 0 0 0-85.930667 64 76.8 76.8 0 0 0 0 21.845334v342.698666c0 57.301333 26.453333 84.138667 82.901333 84.138667h82.901334l-10.197334 87.253333a28.672 28.672 0 0 0 28.757334 28.586667 28.288 28.288 0 0 0 15.829333-4.821333l164.522667-110.933334h265.216c57.301333 0 82.901333-26.965333 82.901333-84.138666V379.264a75.861333 75.861333 0 0 0-64.554667-85.717333 75.904 75.904 0 0 0-21.546666-0.213334zM243.754667 590.976a41.344 41.344 0 0 1-41.344-41.344 41.344 41.344 0 0 1 41.344-41.344 41.344 41.344 0 0 1 41.344 41.344 41.344 41.344 0 0 1-41.344 41.344z m165.504 0a41.386667 41.386667 0 0 1-41.130667-41.557333 41.344 41.344 0 0 1 41.557333-41.130667 41.344 41.344 0 0 1 41.130667 41.386667 41.429333 41.429333 0 0 1-41.557333 41.301333z m165.76 0a41.386667 41.386667 0 0 1-41.130667-41.557333 41.344 41.344 0 0 1 41.557333-41.130667 41.344 41.344 0 0 1 41.130667 41.386667 41.386667 41.386667 0 0 1-41.557333 41.301333z"
+        fill="#BCABEE"
+      ></path>
+    </svg>
+  );
+};
+
+export default ChatMessagesIcon;
diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ChatMessage.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ChatMessage.tsx
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { Avatar } from 'antd';
-import styles from '../assets/css/chatMessage.css';
+import '../assets/css/chatMessage.css';
 import classNames from 'classnames';
 
 interface ChatMessage {
@@ -30,22 +30,22 @@ const ChatMessages: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => {
   };
 
   return (
-    <div className={styles.chatContainer}>
+    <div className="chatContainer">
       {messages.map((message, index) => {
-        const isHuman = message.speakerRole === 'human';
+        const isAi = message.speakerRole === 'ai';
 
         return (
-          <div key={index} className={classNames(styles.messageItem, isHuman && styles.messageItemSender)}>
+          <div key={index} className={classNames('messageItem', isAi && 'messageItemSender')}>
             <Avatar
-              className={styles.avatar}
+              className="avatar"
               size="small"
               style={{
-                backgroundColor: isHuman ? '#1890ff' : '#87d068',
+                backgroundColor: isAi ? '#1890ff' : '#87d068',
               }}
             >
-              {isHuman ? 'AI' : 'U'}
+              {isAi ? 'AI' : 'U'}
             </Avatar>
-            <div className={classNames(styles.messageContent, isHuman && styles.messageContentSender)}>
+            <div className={classNames('messageContent', isAi && 'messageContentSender')}>
               {formatContent(message.content)}
             </div>
           </div>

diff --git a/.../plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordDetail.tsx b/.../plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordDetail.tsx
@@ -14,6 +14,7 @@ import { InquiryRecordProvider, useInquiryRecord } from '../context/InquiryRecor
 import { Spin, Divider } from 'antd';
 import InquiryRecordView from './InquiryRecordView';
 import MaterialInquiryView from './MaterialInquiryView';
+import ReplyCustomer from './ReplyCustomer';
 
 export interface InquiryRecordDetailProps {
   InquiryRecordId?: number | string;
@@ -33,19 +34,17 @@ export const InquiryRecordDetail: FC<InquiryRecordDetailProps> = observer(
   { displayName: FieldComponentName },
 );
 
-// 创建一个子组件来使用共享的数据
 const InquiryRecordContent: FC = () => {
   const { loading } = useInquiryRecord();
-
-  if (loading) {
-    return <Spin spinning={loading} />;
-  }
+  if (loading) return <Spin spinning={loading} />;
 
   return (
-    <div>
+    <>
       <InquiryRecordView />
       <Divider>物料询价记录</Divider>
       <MaterialInquiryView />
-    </div>
+      <Divider>回复客户</Divider>
+      <ReplyCustomer />
+    </>
   );
 };
diff --git a/...es/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx b/...es/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { FC } from 'react';
-import { Descriptions, Tag } from 'antd';
+import { Descriptions, Tag, Collapse, Space } from 'antd';
 import { useInquiryRecord } from '../context/InquiryRecordContext';
 import { inquiryRecordMap } from '../utils';
 import dayjs from 'dayjs';
@@ -18,26 +18,53 @@ const InquiryRecordView: FC = () => {
 
   return (
     <>
-      <Descriptions
-        bordered
-        column={{ xxl: 4, xl: 4, lg: 4, md: 2, sm: 1, xs: 1 }}
-        labelStyle={{ width: '140px' }}
-        size="middle"
-      >
-        <Descriptions.Item label="原始询料文案" span={24}>
-          {inquiryRecordData?.origin_inquiry_text}
-        </Descriptions.Item>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Collapse
+          collapsible="header"
+          defaultActiveKey={['1']}
+          items={[
+            {
+              key: '1',
+              label: '询料记录',
+              children: (
+                <Descriptions
+                  bordered
+                  column={{ xxl: 4, xl: 4, lg: 4, md: 2, sm: 1, xs: 1 }}
+                  labelStyle={{ width: '128px', padding: '12px' }}
+                  size="middle"
+                >
+                  <Descriptions.Item label="原始询料文案" span={24}>
+                    {inquiryRecordData?.origin_inquiry_text}
+                  </Descriptions.Item>
 
-        <Descriptions.Item label="询料时间">
-          {inquiryRecordData?.createdAt && dayjs(inquiryRecordData.createdAt).format('YYYY-MM-DD HH:mm:ss')}
-        </Descriptions.Item>
+                  <Descriptions.Item label="询料时间">
+                    {inquiryRecordData?.createdAt && dayjs(inquiryRecordData.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+                  </Descriptions.Item>
 
-        <Descriptions.Item label="询料状态">
-          <Tag color={inquiryRecordMap(inquiryRecordData?.inquiry_status).color}>
-            {inquiryRecordMap(inquiryRecordData?.inquiry_status).label}
-          </Tag>
-        </Descriptions.Item>
-      </Descriptions>
+                  <Descriptions.Item label="询料状态">
+                    <Tag color={inquiryRecordMap(inquiryRecordData?.inquiry_status)?.color}>
+                      {inquiryRecordMap(inquiryRecordData?.inquiry_status)?.label}
+                    </Tag>
+                  </Descriptions.Item>
+
+                  <Descriptions.Item label="IM客户(群)名称">{inquiryRecordData?.imName}</Descriptions.Item>
+                  <Descriptions.Item label="IM平台">
+                    <Tag color="volcano">{inquiryRecordData?.imPlatform}</Tag>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="群/好友标识">
+                    <Tag color="volcano">{inquiryRecordData?.imIsGroup}</Tag>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="机器人ID">{inquiryRecordData?.imBotUserId}</Descriptions.Item>
+                  <Descriptions.Item label="IM客户(群)ID">{inquiryRecordData?.imUserId}</Descriptions.Item>
+                  <Descriptions.Item label="IM客户(群)头像">{inquiryRecordData?.imAvatarUrl}</Descriptions.Item>
+                  <Descriptions.Item label="IM客户(群)备注">{inquiryRecordData?.imRemark}</Descriptions.Item>
+                </Descriptions>
+              ),
+            },
+          ]}
+          style={{ color: 'red' }}
+        />
+      </Space>
     </>
   );
 };

diff --git a/.../plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx b/.../plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx
@@ -10,19 +10,41 @@
 import React, { FC } from 'react';
 import { useInquiryRecord } from '../context/InquiryRecordContext';
 import SupplierInquiryRecordTable from './SupplierInquiryRecordTable';
-import { Tabs } from 'antd';
+import { Tabs, Tag, Space, Typography } from 'antd';
+import { inquiryRecordMaterialMap } from '../utils/inquiryRecordSatatus';
 
 const MaterialInquiryView: FC = () => {
   const { inquiryMaterialsData } = useInquiryRecord();
-  console.log('inquiryMaterialsData', inquiryMaterialsData);
-
   if (!inquiryMaterialsData) return null;
 
   return (
     <div style={{ marginTop: 16 }}>
       <Tabs type="card">
-        {inquiryMaterialsData.map((material, index) => (
+        {inquiryMaterialsData.map((material: any) => (
           <Tabs.TabPane key={material.material_code} tab={material.material_code}>
+            <Space size={28} wrap style={{ padding: '0 20px' }}>
+              <Space>
+                <Typography.Text type="secondary">状态:</Typography.Text>
+                <Tag color={inquiryRecordMaterialMap(material.inquiry_material_status)?.color}>
+                  {inquiryRecordMaterialMap(material.inquiry_material_status)?.label}
+                </Tag>
+              </Space>
+              {material.gather_error && (
+                <Space>
+                  <Typography.Text type="secondary">采集失败原因:</Typography.Text>
+                  <Typography.Text>{material.gather_error}</Typography.Text>
+                </Space>
+              )}
+              <Space>
+                <Typography.Text type="secondary">需求数量:</Typography.Text>
+                <Typography.Text>{material.quantity}</Typography.Text>
+              </Space>
+              <Space>
+                <Typography.Text type="secondary">需求品牌:</Typography.Text>
+                <Typography.Text>{material.manufacturer}</Typography.Text>
+              </Space>
+            </Space>
+
             <SupplierInquiryRecordTable
               dataSource={material.supplier_inquiry_records}
               tabKey={material.material_code}

diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx
@@ -24,9 +24,7 @@ const ReplyCustomer: FC = () => {
     if (inquiryMaterialsData && !initialized.current) {
       inquiryMaterialsData.forEach((material) => {
         material.supplier_inquiry_records?.forEach((record) => {
-          if (record.has_adopt == '1') {
-            setSelectedRecord(String(material.material_code), record);
-          }
+          if (record.has_adopt == '1') setSelectedRecord(String(material.material_code), record);
         });
       });
       initialized.current = true;
@@ -47,6 +45,8 @@ const ReplyCustomer: FC = () => {
   };
 
   const handleReply = () => {
+    if (replyContent.trim() === '') return messageApi.error('回复内容不能为空');
+
     Modal.confirm({
       title: '确认回复',
       content: '确定要发送这条回复吗？',

diff --git a/...s/@gemel/plugin-inquiry-record-detail/src/client/component/SupplierInquiryRecordTable.tsx b/...s/@gemel/plugin-inquiry-record-detail/src/client/component/SupplierInquiryRecordTable.tsx
@@ -9,12 +9,11 @@
 
 import React, { FC } from 'react';
 import { useInquiryRecord } from '../context/InquiryRecordContext';
-import { Table, Tag, Divider, Popover } from 'antd';
+import { Table, Tag, Popover } from 'antd';
 import { supplierInquiryRecordStatusMap } from '../utils';
 import type { TableProps } from 'antd';
-import ReplyCustomer from './ReplyCustomer';
 import ChatMessages from './ChatMessage';
-import chatMessagesIcon from '../assets/svg/chatMessages.svg';
+import ChatMessagesIcon from '../assets/svg/chatMessages';
 
 const SupplierInquiryRecordTable: FC<{ dataSource: any[]; tabKey: string }> = ({ dataSource, tabKey }) => {
   const { loading, selectedRecords, setSelectedRecord } = useInquiryRecord();
@@ -31,15 +30,17 @@ const SupplierInquiryRecordTable: FC<{ dataSource: any[]; tabKey: string }> = ({
   const columns: any = [
     {
       title: '供应商',
+      align: 'center',
       render: (_, record) => {
         return <span>{record.supplier.company_name}</span>;
       },
     },
     {
       title: '询问状态',
+      align: 'center',
       render: (_, record) => {
         const tag = supplierInquiryRecordStatusMap(record.inquiry_status);
-        return <Tag color={tag.color}>{tag.label}</Tag>;
+        return <Tag color={tag?.color}>{tag?.label}</Tag>;
       },
     },
     {
@@ -49,21 +50,36 @@ const SupplierInquiryRecordTable: FC<{ dataSource: any[]; tabKey: string }> = ({
         return <span>{record.price}</span>;
       },
     },
+    {
+      title: '是否含税',
+      align: 'center',
+      render: (_, record) => {
+        return <span>{record.has_tax_included === 'true' ? '含税' : '未税'}</span>;
+      },
+    },
     {
       title: '库存状况',
       align: 'center',
       render: (_, record) => {
         return <span>{record.store_status}</span>;
       },
     },
+    {
+      title: '备注',
+      align: 'center',
+      render: (_, record) => {
+        return <span>{record.remark}</span>;
+      },
+    },
     {
       title: '聊天记录',
       align: 'center',
       render: (_, record) => {
         return (
           <Popover content={<ChatMessages messages={record.chat_messages || []} />} trigger="hover" placement="left">
-            {/* <a>查看聊天记录</a> */}
-            <img src={chatMessagesIcon} alt="查看聊天记录" style={{ cursor: 'pointer' }} />
+            <span style={{ cursor: 'pointer' }}>
+              <ChatMessagesIcon />
+            </span>
           </Popover>
         );
       },
@@ -83,8 +99,6 @@ const SupplierInquiryRecordTable: FC<{ dataSource: any[]; tabKey: string }> = ({
         loading={loading}
         scroll={{ y: 275 }}
       />
-      <Divider>回复客户</Divider>
-      <ReplyCustomer />
     </div>
   );
 };