保存页面添加轨型选择

src/pages/MeasureSave.tsx

@@ -1,12 +1,18 @@
-import { NavBar } from 'antd-mobile';
+import { NavBar, Picker } from 'antd-mobile';
 import { useNavigate } from 'react-router';
 import icon_arr_r from '../assets/icon_arr_s_r.svg';
+import { railTypes } from '../utils/constant';
+import { useState } from 'react';
 
 export default function MeasureSave() {
   const navigate = useNavigate();
   const back = () => navigate(-1);
 
+  const [railPickerVisible, setRailPickerVisible] = useState(false);
+  const [railId, setRailId] = useState<(number | string | null)[]>([1]);
+
   return (
+    <>
       <div>
         <NavBar className="bg-white" onBack={back}>
           测量参数
@@ -21,14 +27,26 @@ export default function MeasureSave() {
                 className="border-0 outline-none self-stretch text-right flex-1 ml-4"
               />
             </div>
-          <div className="h-12 flex items-center ">
+            <div className="h-12 flex items-center " onClick={()=>setRailPickerVisible(true)}>
               <span>轨型</span>
-            <span className="ml-auto mr-4">60轨</span>
+              <span className="ml-auto mr-4">{railTypes.find(r => r.id === railId[0])?.name || ""}</span>
               <img src={icon_arr_r} alt="arr" />
             </div>
           </div>
           <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">确定</div>
         </div>
       </div>
+      <Picker
+        columns={[railTypes.map(t => ({ ...t, label: t.name, value: t.id }))]}
+        visible={railPickerVisible}
+        onClose={() => {
+          setRailPickerVisible(false);
+        }}
+        value={railId}
+        onConfirm={v => {
+          setRailId(v);
+        }}
+      />
+    </>
   );
 }