fix: 执行工艺添加试管选择

src/components/home/SelectCraft/index.vue

@@ -3,7 +3,8 @@ import { startCraft } from 'apis/crafts'
 import { getOreList } from 'apis/ore'
 import { FtMessage } from 'libs/message'
 import { useHomeStore } from 'stores/homeStore'
-import { onMounted, ref } from 'vue'
+import { useSystemStore } from 'stores/systemStore'
+import { computed, onMounted, ref } from 'vue'
 
 const emits = defineEmits(['ok', 'cancel'])
 
@@ -13,13 +14,16 @@ onMounted(() => {
   getOres()
 })
 
-const form = ref<{ craftId?: number }>({})
+const form = ref<{ craftId?: number, tubes?: number[] }>({})
 const formRef = ref()
 
 const rules = {
   craftId: [
     { required: true, message: '请选择工艺', trigger: 'change' },
   ],
+  tubes: [
+    { required: true, message: '请选择试管', trigger: 'change' },
+  ],
 }
 
 const okHandle = async () => {
@@ -30,7 +34,7 @@ const okHandle = async () => {
     }
     await startCraft({
       heatId: useHomeStore().heatAreaList.find(item => item.selected)?.value,
-      craftId: form.value.craftId,
+      ...form.value,
     })
     FtMessage.success('工艺已开始')
     emits('ok')
@@ -49,6 +53,35 @@ const getOres = async () => {
   const res = await getOreList()
   oreList.value = res.list
 }
+
+const mousedownHandle = async (e: Event) => {
+  let event
+  if ('touches' in e) {
+    event = (e.touches as TouchList)[0]
+  }
+  else {
+    event = e
+  }
+  if (event.target!.classList!.contains('tube-inner') && !event.target!.classList.contains('tube-inner-disable')) {
+    const num = event.target!.getAttribute('index')
+    activeTube.value[Number(num) - 1] = !activeTube.value[Number(num) - 1]
+    form.value.tubes = activeTube.value.map((item, index) => index + 1).filter(item => activeTube.value[item - 1])
+    console.log(form.value.tubes)
+  }
+}
+
+const activeTube = ref(Array.from({ length: 16 }).fill(false))
+
+const tubes = computed(() => {
+  return useSystemStore().systemStatus.tray?.find(item => item.heatModuleId === homeStore.heatAreaList.find(item => item.selected)?.value)?.tubes
+})
+
+const selectVisible = ref(false)
+const checkChange = () => {
+  activeTube.value = Array.from({ length: 16 }).fill(selectVisible.value)
+  form.value.tubes = activeTube.value.map((item, index) => index + 1).filter(item => activeTube.value[item - 1])
+  formRef.value.validateField('tubes')
+}
 </script>
 
 <template>
@@ -59,6 +92,14 @@ const getOres = async () => {
           {{ item.label }}
         </el-tag>
       </el-form-item>
+      <el-form-item label="选择试管" prop="tubes">
+        <el-checkbox v-model="selectVisible" style="margin-right: 10px" @change="checkChange">
+          全选
+        </el-checkbox>
+        <div class="tube-item" @click.prevent="mousedownHandle" @touch.prevent="mousedownHandle">
+          <span v-for="item in 16" :key="item" class="tube-inner" :class="{ 'tube-inner-active': activeTube[item - 1], 'tube-inner-disable': homeStore.heatAreaList.filter(item => item.selected).length && !tubes?.find(t => t.tubeNum === item)?.exists }" :index="item" />
+        </div>
+      </el-form-item>
       <el-form-item label="工艺" prop="craftId">
         <el-select v-model="form.craftId" placeholder="请选择工艺">
           <el-option-group
@@ -83,4 +124,39 @@ const getOres = async () => {
 .el-tag {
   margin-right: 5px;
 }
+
+.tube-item {
+  padding: 5px;
+  background: #384D5D;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-gap: 5px;
+  position: relative;
+  .tube-disable {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(255,255,255,0.9);
+    border-radius: 9px;
+  }
+  .tube-inner {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #fff;
+    margin: 2px;
+    transition: background 0.5s;
+  }
+  .tube-inner-active {
+    background: #26D574;
+  }
+  .tube-inner-disable {
+    background: #C6C6C6;
+  }
+}
 </style>