vue练习生

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {getScjhService, getWorkerService, getProcessService, addWorkInfoService} from "@/api/fprw.js";
//响应式数据--生产计划
const scjh = ref({
  generalOrder: '',
  divisionOrder: '',
  subordinateOrder: '',
  productName: '',
  batch: '',
  liucheng: '',
  quantity: '',
  nextTeam: '',
  startTime: '',
  endTime: ''
})
const scjhs = ref([
  {
    generalOrder: '',
    divisionOrder: '',
    subordinateOrder: '',
    productName: '',
    batch: '',
    liucheng: '',
    quantity: '',
    nextTeam: '',
    startTime: '',
    endTime: ''
  }
])

/*获取生产计划*/
const getScjh = async () => {
  let result = await getScjhService()
  scjhs.value = result.data
}
getScjh()

//获取工人信息
//scjh.value.nextTeam
const workers = ref([])
const getWorker = async () => {
  let result = await getWorkerService()
  workers.value = result.data
}
//分布任务小页面是否开启的标志
const fprwDialogVisible = ref(false)
//工序步骤
const processSteps = ref([])
//为工序选择的人
const selectedWorkerForProcess = ref({})
//工作数量
const workerQuantities = ref({})
const getProcess = async () => {
  let result = await getProcessService(scjh.value.nextTeam)
  //这里将工序获得，并根据,分隔开存储到processSteps
  processSteps.value = result.data.split(',')
  processSteps.value.forEach(step => {
    selectedWorkerForProcess.value[step] = null
    workerQuantities.value[step] = 0
  })
}

//根据你的选择，将信息加入到后端数据库中
const addWorkInfo = async () => {
  for (let step of processSteps.value) {
    const selectedWorker = selectedWorkerForProcess.value[step]
    const assignedQuantity = workerQuantities.value[step]

    if (selectedWorker && assignedQuantity > 0) {
      workInfo.value = {
        generalOrder: scjh.value.generalOrder,
        divisionOrder: scjh.value.divisionOrder,
        subordinateOrder: scjh.value.subordinateOrder,
        productName: scjh.value.productName,
        batch: scjh.value.batch,
        liucheng: scjh.value.liucheng,
        process: step,
        startTime: scjh.value.startTime,
        endTime: scjh.value.endTime,
        id: selectedWorker.id,
        name: selectedWorker.name,
        quantity: assignedQuantity,
        status: step
      }
      await addWorkInfoService(workInfo.value)
    }
  }
  fprwDialogVisible.value = false
}

const fetchProcess = async (teamName) => {
  try {
    const result = await getProcessService(teamName);
    if (result && result.data) {
      // 分割工序数据，并去除空白项
      processSteps.value = result.data.split(',').filter((step) => step.trim() !== "");
    }
  } catch (error) {
    console.error("获取工序失败：", error);
  }
};
// 假设 teamName 从其他地方传递，可以通过 props 传入
onMounted(() => {
  fetchProcess("射蜡班组"); // 替换为实际的班组名称
  getWorker()
  getProcess()
});
</script>

<template>
    <h2>班组工序</h2>
    <el-table v-if="processSteps.length" :data="processSteps" border style="width: 100%">
      <!-- 工序列 -->
      <el-table-column prop="step" label="工序" width="180">
        <template #default="{ row }">
          {{ row }}
        </template>
      </el-table-column>
      <!-- 选择员工列 -->
      <el-table-column label="选择员工" width="250">
        <template #default="{ row }">
          <el-select v-model="selectedWorkerForProcess[row]" placeholder="选择员工">
            <el-option
                v-for="worker in workers"
                :key="worker.id"
                :label="worker.name"
                :value="worker"
            />
          </el-select>
        </template>
      </el-table-column>
      <!-- 任务数量列 -->
      <el-table-column label="任务数量" width="200">
        <template #default="{ row }">
          <el-input-number
              v-model="workerQuantities[row]"
              :min="0"
              :max="scjh.quantity"
              controls-position="right"
          />
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="addWorkInfo">分配任务</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 当没有工序时，展示暂无工序的提示 -->
    <el-empty v-else description="该班组暂无工序" />
</template>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>