10/1

<template>
  <div class="task-dispatch">
    <el-card>
      <h2>任务派发</h2>
      <el-table :data="tasks" style="width: 100%" border>
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="contractName" label="生产任务名称" width="180"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
        <el-table-column prop="productionQuantity" label="生产数量" width="120"></el-table-column>
        <el-table-column label="生产排产" width="120">
          <template slot-scope="scope">
            <el-button @click="openProcessDialog(scope.row)">排产</el-button>
          </template>
        </el-table-column>
        <el-table-column label="二维码" width="200">
          <template slot-scope="scope">
            <el-image v-if="scope.row.qrCode" :src="scope.row.qrCode" style="width: 100px; margin-top: 10px;"></el-image>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="生产排产" :visible.sync="isProcessDialogVisible">
        <el-form :model="currentTask" ref="processForm">
          <el-form-item label="射蜡件员工">
            <el-input v-model="currentTask.processData[0].worker"></el-input>
          </el-form-item>
          <el-form-item label="射蜡件设备">
            <el-input v-model="currentTask.processData[0].equipment"></el-input>
          </el-form-item>
          <el-form-item label="射蜡件物料">
            <el-input v-model="currentTask.processData[0].material"></el-input>
          </el-form-item>

          <el-form-item label="射水溶芯员工">
            <el-input v-model="currentTask.processData[1].worker"></el-input>
          </el-form-item>
          <el-form-item label="射水溶芯设备">
            <el-input v-model="currentTask.processData[1].equipment"></el-input>
          </el-form-item>
          <el-form-item label="射水溶芯物料">
            <el-input v-model="currentTask.processData[1].material"></el-input>
          </el-form-item>

          <el-form-item label="射尿素芯员工">
            <el-input v-model="currentTask.processData[2].worker"></el-input>
          </el-form-item>
          <el-form-item label="射尿素芯设备">
            <el-input v-model="currentTask.processData[2].equipment"></el-input>
          </el-form-item>
          <el-form-item label="射尿素芯物料">
            <el-input v-model="currentTask.processData[2].material"></el-input>
          </el-form-item>

          <el-form-item label="化芯员工">
            <el-input v-model="currentTask.processData[3].worker"></el-input>
          </el-form-item>
          <el-form-item label="化芯设备">
            <el-input v-model="currentTask.processData[3].equipment"></el-input>
          </el-form-item>
          <el-form-item label="化芯物料">
            <el-input v-model="currentTask.processData[3].material"></el-input>
          </el-form-item>

          <!-- 其他工序的输入项可以类似添加 -->

        </el-form>
        <div slot="footer">
          <el-button @click="isProcessDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dispatchTask">派发</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      tasks: [
        {
          contractName: '任务001',
          productName: '产品A',
          productionQuantity: 100,
          processData: [
            { worker: '张三', equipment: '设备A1', material: '物料A1' },
            { worker: '李四', equipment: '设备A2', material: '物料A2' },
            { worker: '王五', equipment: '设备A3', material: '物料A3' },
            { worker: '赵六', equipment: '设备A4', material: '物料A4' },
            // ...
          ],
          qrCode: ''
        },
        {
          contractName: '任务002',
          productName: '产品B',
          productionQuantity: 200,
          processData: [
            { worker: '张三', equipment: '设备B1', material: '物料B1' },
            { worker: '李四', equipment: '设备B2', material: '物料B2' },
            { worker: '王五', equipment: '设备B3', material: '物料B3' },
            { worker: '赵六', equipment: '设备B4', material: '物料B4' },
            // ...
          ],
          qrCode: ''
        }
      ],
      isProcessDialogVisible: false,
      currentTask: {
        contractName: '',
        productName: '',
        productionQuantity: 0,
        processData: Array(8).fill({ worker: '', equipment: '', material: '' }),
        qrCode: ''
      }
    };
  },
  methods: {
    openProcessDialog(task) {
      this.currentTask = {
        ...task,
        processData: JSON.parse(JSON.stringify(task.processData))
      };
      this.isProcessDialogVisible = true;
    },
    dispatchTask() {
      const qrData = `合同名称: ${this.currentTask.contractName}, 产品名称: ${this.currentTask.productName}, 生产数量: ${this.currentTask.productionQuantity}, 工序: ${this.currentTask.processData.map(p => `${p.worker}（设备: ${p.equipment}, 物料: ${p.material}）`).join(', ')}`;
      
      QRCode.toDataURL(qrData)
        .then(url => {
          this.currentTask.qrCode = url; // 直接更新当前任务的 qrCode 属性
          // 更新任务列表中的二维码
          const taskIndex = this.tasks.findIndex(task => task.contractName === this.currentTask.contractName);
          if (taskIndex !== -1) {
            this.tasks[taskIndex].qrCode = url;
          }
          this.isProcessDialogVisible = false; // 关闭对话框
        })
        .catch(err => {
          console.error('生成二维码失败:', err);
        });
    }
  }
};
</script>

<style scoped>
.task-dispatch {
  padding: 20px;
}
</style>