订单页，查看详情和创建运单增加高亮

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>