separate-gold-web/src/components/home/ExecuteCraft/index.vue

<script setup lang="ts">
import { startCraft } from 'apis/crafts'
import { getOreList } from 'apis/ore'
import { FtMessage } from 'libs/message'
import { useHomeStore } from 'stores/homeStore'
import { useSystemStore } from 'stores/systemStore'
import { computed, onMounted, ref } from 'vue'

const emits = defineEmits(['ok', 'cancel'])

const homeStore = useHomeStore()

const systemStore = useSystemStore()

onMounted(() => {
  getOres()
})

const form = ref<{
  columns?: number[]
  craftId?: number
  heatId?: number
}>({})
const formRef = ref()

const validateHandle = (rule: any, value: any, callback: any) => {
  if (!value?.length) {
    callback(new Error('请选择试管'))
  }
  else {
    callback()
  }
}

const rules = {
  columns: [
    { required: true, message: '请选择试管', trigger: 'change', validator: validateHandle },
  ],
  craftId: [
    { required: true, message: '请选择预设', trigger: 'change' },
  ],
}

const okHandle = async () => {
  try {
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }
    await startCraft({
      heatId: useHomeStore().heatAreaList.find(item => item.selected)?.value,
      ...form.value,
    })
    FtMessage.success('工艺已开始')
    emits('ok')
  }
  catch (error) {
    console.log(error)
  }
}

const cancel = () => {
  emits('cancel')
}

//
const tubes = computed(() => {
  return systemStore.systemStatus.trays?.find(item => item.heatModuleCode === homeStore.heatAreaList.find(item => item.selected)?.value)?.tubes
})

const selectedColumns = ref(Array.from({ length: 5 }).fill(false))

const mousedownHandle = async (index: number) => {
  if (!tubes.value?.find(item => item.columnNum === index)?.exists) {
    FtMessage.error('该列没有试管')
    return
  }
  selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
  form.value.columns = selectedColumns.value.map((item, index) => {
    return item ? index + 1 : false
  }).filter(item => item !== false)
  formRef.value.validateField('columns')
}

const oreList = ref<Ore.OreItem[]>([])

const getOres = async () => {
  const res = await getOreList()
  oreList.value = res.list
}

const selectVisible = ref(false)
const checkChange = () => {
  selectedColumns.value = Array.from({ length: 5 }).fill(selectVisible.value)
  form.value.columns = selectedColumns.value.map((item, index) => index + 1).filter(item => selectedColumns.value[item - 1])
  formRef.value.validateField('columns')
}
</script>

<template>
  <FtDialog visible title="执行预设" width="40%" :ok-handle="okHandle" @cancel="cancel">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item v-if=" homeStore.heatAreaList.filter(item => item.selected).length" label="加热区">
        <el-tag v-for="item in homeStore.heatAreaList.filter(item => item.selected)" :key="item.value" class="mask-tag">
          {{ item.label }}
        </el-tag>
      </el-form-item>
      <el-form-item label="选择试管" prop="columns">
        <el-checkbox v-model="selectVisible" style="margin-right: 10px" @change="checkChange">
          全选
        </el-checkbox>
        <div class="tube-item">
          <div
            v-for="item in 5"
            :key="item"
            class="tube-line"
            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': homeStore.heatAreaList.filter(item => item.selected).length && !tubes?.find(tu => tu.columnNum === item)?.exists }"

            @click.prevent="() => mousedownHandle(item)"
            @touch.prevent="() => mousedownHandle(item)"
          >
            <span v-for="i in 8" :key="i" class="tube-line-inner" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="工艺" prop="craftId">
        <el-select v-model="form.craftId" placeholder="请选择工艺">
          <el-option-group
            v-for="group in oreList"
            :key="group.id"
            :label="group.oresName"
          >
            <el-option
              v-for="item in group.craftsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
    </el-form>
  </FtDialog>
</template>

<style scoped lang="scss">
.el-tag {
  margin-right: 5px;
}
.el-row {
  height: 450px;
  .el-col {
    height: 100%;
    overflow: auto;
    :deep(.el-tag) {
      width: 100%;
      margin-bottom: 5px;
      .el-tag__content {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    }
  }
}
.tube-item {
  padding: 5px;
  background: #384D5D;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 5px;
  position: relative;
  .tube-line {
    display: flex;
    flex-direction: column;
    .tube-line-inner {
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      margin: 2px;
      transition: background 0.5s;
    }
  }
  .tube-line-disable {
    .tube-line-inner {
      background: #C6C6C6;
    }
  }
  .tube-line-active {
    .tube-line-inner {
      background: #26D574;
    }
  }

}
</style>