fix:添加溶液可以全选试管;ui调整

src/components/home/AddLiquid/index.vue

@@ -29,9 +29,9 @@ const receiveMessage = (data: Socket.cmdData) => {
 }
 
 const form = ref<{
-  tubeNum: string
-  solutionId: number
-  volume: number
+  tubeNum?: number[]
+  solutionId?: number
+  volume?: number
 }>({})
 const formRef = ref()
 
@@ -74,7 +74,7 @@ const addHandle = async () => {
       return
     }
     addList.value!.push({
-      tubeNum: form.value.tubeNum.toString(),
+      tubeNum: form.value.tubeNum?.toString(),
       solutionList: [{
         solutionId: form.value.solutionId,
         volume: form.value.volume,
@@ -131,14 +131,24 @@ const mousedownHandle = async (e: Event) => {
 }
 
 const activeTube = ref(Array.from({ length: 16 }).fill(false))
+
+const selectVisible = ref(false)
+const checkChange = () => {
+  activeTube.value = Array.from({ length: 16 }).fill(selectVisible.value)
+  form.value.tubeNum = activeTube.value.map((item, index) => index + 1).filter(item => activeTube.value[item - 1])
+  formRef.value.validateField('tubeNum')
+}
 </script>
 
 <template>
-  <FtDialog visible title="添加溶液" width="60%" :ok-handle="okHandle" @cancel="cancel">
+  <FtDialog visible title="添加溶液" width="70%" :ok-handle="okHandle" @cancel="cancel">
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
           <el-form-item label="选择试管" prop="tubeNum">
+            <el-checkbox v-model="selectVisible" style="margin-right: 10px" @change="checkChange">
+              全选
+            </el-checkbox>
             <!--            <el-select v-model="form.tubeNum" placeholder="请选择试管"> -->
             <!--              <el-option v-for="item in 16" :key="item" :label="`试管${item}`" :value="item" /> -->
             <!--            </el-select> -->
@@ -172,7 +182,7 @@ const activeTube = ref(Array.from({ length: 16 }).fill(false))
           <el-tag v-for="(item, key) in addList" :key>
             <div>
               <span>试管[</span>
-              <span>{{ item.tubeNum }}</span>
+              <span>{{ item.tubeNum. split(',').length === 16 ? '全部' : item.tubeNum }}</span>
               <span>]</span>
               <span>-</span>
               <span>{{ solsList.find(i => i.id === item.solutionList[0].solutionId)!.name }}</span>