src/pages/Order/List/index.tsx

@@ -1,3 +1,5 @@
+import styles from '../../../style/order-list.css';
+
 import InternationalPhoneInput from '@/components/InternationalPhoneInput';
 import { HistoryOrder } from '@/pages/Statistics/Order';
 import { ORDER_STATUS_ENUM } from '@/constants';
@@ -84,6 +86,7 @@ const ListPage: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const [activeKey, setActiveKey] = useState<string>('all');
   const [count, setCount] = useState<any[]>([]);
+  const [activeLine, setActiveLine] = useState<number>(-1);
   const tabs: TabsProps['items'] = useMemo(() => {
     const total = count.reduce((acc, cur) => acc + Number(cur.count), 0);
     const tabs = [
@@ -265,7 +268,7 @@ const ListPage: React.FC = () => {
               record.orderStatus,
             ) ? (
               <>
-                <Shipping id={record.id as number} tableRef={actionRef} />
+                <Shipping id={record.id as number} tableRef={actionRef} setActiveLine={setActiveLine}/>
                 <Divider type="vertical" />
               </>
             ) : (
@@ -276,6 +279,7 @@ const ListPage: React.FC = () => {
               record={record}
               tableRef={actionRef}
               orderId={record.id as number}
+              setActiveLine={setActiveLine}
             />
             <Divider type="vertical" />
             <Dropdown
@@ -393,6 +397,9 @@ const ListPage: React.FC = () => {
         scroll={{ x: 'max-content' }}
         actionRef={actionRef}
         rowKey="id"
+        rowClassName={(record) => {
+          return record.id === activeLine ? styles['selected-line-order-protable']: '';
+        }}
         toolBarRender={() => [
           <CreateOrder tableRef={actionRef} />,
           <SyncForm tableRef={actionRef} />,
@@ -480,7 +487,8 @@ const Detail: React.FC<{
   tableRef: React.MutableRefObject<ActionType | undefined>;
   orderId: number;
   record: API.Order;
-}> = ({ tableRef, orderId, record }) => {
+  setActiveLine: Function
+}> = ({ tableRef, orderId, record, setActiveLine }) => {
   const [visiable, setVisiable] = useState(false);
   const { message } = App.useApp();
   const ref = useRef<ActionType>();
@@ -510,7 +518,10 @@ const Detail: React.FC<{
 
   return (
     <>
-      <Button key="detail" type="primary" onClick={() => setVisiable(true)}>
+      <Button key="detail" type="primary" onClick={() => {
+        setVisiable(true);
+        setActiveLine(record.id);
+      }}>
         <FileDoneOutlined />
         详情
       </Button>
@@ -1049,7 +1060,8 @@ const Shipping: React.FC<{
   tableRef?: React.MutableRefObject<ActionType | undefined>;
   descRef?: React.MutableRefObject<ActionType | undefined>;
   reShipping?: boolean;
-}> = ({ id, tableRef, descRef, reShipping = false }) => {
+  setActiveLine: Function;
+}> = ({ id, tableRef, descRef, reShipping = false, setActiveLine }) => {
   const [options, setOptions] = useState<any[]>([]);
   const formRef = useRef<ProFormInstance>();
 
@@ -1071,7 +1083,11 @@ const Shipping: React.FC<{
         },
       }}
       trigger={
-        <Button type="primary">
+        <Button type="primary"
+          onClick={() => {
+            setActiveLine(id);
+          }}
+        >
           <CodeSandboxOutlined />
           创建运单
         </Button>
@@ -1843,7 +1859,6 @@ const SalesChange: React.FC<{
   detailRef?: React.MutableRefObject<ActionType | undefined>;
   reShipping?: boolean;
 }> = ({ id, detailRef }) => {
-  const [options, setOptions] = useState<any[]>([]);
   const formRef = useRef<ProFormInstance>();
 
 
@@ -1908,9 +1923,8 @@ const SalesChange: React.FC<{
       >
         <ProForm.Group>
           <ProFormSelect
-            params={{ options }}
+            params={{ }}
-            request={async ({ keyWords, options }) => {
+            request={async ({ keyWords }) => {
-              if (!keyWords || keyWords.length < 2) return options;
               try {
                 const { data } = await productcontrollerSearchproducts({
                   name: keyWords,
@@ -1921,10 +1935,10 @@ const SalesChange: React.FC<{
                       label: `${item.name} - ${item.nameCn}`,
                       value: item?.sku,
                     };
-                  }) || options
+                  })
                 );
               } catch (error) {
-                return options;
+                return [];
               }
             }}
             name="sku"

src/style/order-list.css

@@ -0,0 +1,3 @@
+.selected-line-order-protable {
+    background-color: #add8e6;
+}