10/09

<template>
  <div id="process-flow">
    <!-- 筛选栏 -->
    <el-row :gutter="20" class="filter-row">
      <el-col :span="6">
        <el-input placeholder="请输入工单号" v-model="filters.workOrderId"></el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="filters.workshop" placeholder="选择工作车间">
          <el-option label="喷蜡车间" value="waxing"></el-option>
          <el-option label="制壳车间" value="shell"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="searchProcesses">筛选</el-button>
        <el-button type="success" @click="openAddDialog">添加</el-button>
      </el-col>
    </el-row>

    <!-- 生产工艺流程列表 -->
    <el-table :data="processData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="workOrderId" label="工单号" width="120"></el-table-column>
      <el-table-column prop="productSerial" label="产品序号" width="120"></el-table-column>
      <el-table-column prop="productName" label="产品名" width="200"></el-table-column>
      <el-table-column label="当前报工二维码" width="200">
        <template slot-scope="scope">
          <el-image :src="generateQRCode(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="workshop" label="工作车间" width="150"></el-table-column>
      <el-table-column prop="procedure" label="工作工序" width="150"></el-table-column>
      <el-table-column prop="workerId" label="当前加工员工" width="120"></el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openReportDialog(scope.row)">报工</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 报工弹出窗口 -->
    <el-dialog title="报工操作" :visible.sync="reportDialogVisible">
      <el-form :model="reportData" label-width="120px">
        <el-form-item label="工号">
          <el-input v-model="reportData.workerId"></el-input>
        </el-form-item>
        <el-form-item label="下一车间">
          <el-select v-model="reportData.nextWorkshop" placeholder="选择下一车间">
            <el-option label="喷蜡车间" value="waxing"></el-option>
            <el-option label="制壳车间" value="shell"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下一工序">
          <el-input v-model="reportData.nextProcedure"></el-input>
        </el-form-item>
        <el-form-item label="报工时间">
          <el-input v-model="reportData.reportTime" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reportDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReport">提交</el-button>
      </div>
    </el-dialog>

    <!-- 添加工单弹出窗口 -->
    <el-dialog title="添加工单" :visible.sync="addDialogVisible">
      <el-form :model="newProcessData" label-width="120px">
        <el-form-item label="工单号">
          <el-input v-model="newProcessData.workOrderId"></el-input>
        </el-form-item>
        <el-form-item label="产品名">
          <el-input v-model="newProcessData.productName"></el-input>
        </el-form-item>
        <el-form-item label="工作车间">
          <el-select v-model="newProcessData.workshop" placeholder="选择工作车间">
            <el-option label="喷蜡车间" value="waxing"></el-option>
            <el-option label="制壳车间" value="shell"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前加工员工">
          <el-input v-model="newProcessData.workerId"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="newProcessData.startTime"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addProcess">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
data() {
  return {
    filters: {
      workOrderId: '',
      workshop: ''
    },
    processData: [],
    reportDialogVisible: false,
    addDialogVisible: false,
    reportData: {
      workerId: '',
      nextWorkshop: '',
      nextProcedure: '',
      reportTime: ''
    },
    newProcessData: {
      workOrderId: '',
      productName: '',
      workshop: '',
      workerId: '',
      startTime: ''
    },
    currentProcess: null
  };
},
created() {
  this.generateMockData();
},
methods: {
  searchProcesses() {
    console.log('筛选条件', this.filters);
  },
  openReportDialog(process) {
    this.currentProcess = process;
    this.reportData = {
      workerId: '',
      nextWorkshop: '',
      nextProcedure: '',
      reportTime: new Date().toLocaleString()
    };
    this.reportDialogVisible = true;
  },
  openAddDialog() {
    this.addDialogVisible = true;
  },
  async addProcess() {
    try {
      await axios.post('/api/add-process', this.newProcessData);
      this.processData.push({ ...this.newProcessData });
      this.addDialogVisible = false;
      this.$message.success('工单添加成功');
    } catch (error) {
      console.error('添加工单失败:', error);
      this.$message.error('添加工单失败');
    }
  },
  async submitReport() {
    try {
      const response = await axios.post('/api/process-report', {
        workOrderId: this.currentProcess.workOrderId,
        productSerial: this.currentProcess.productSerial,
        workerId: this.reportData.workerId,
        nextWorkshop: this.reportData.nextWorkshop,
        nextProcedure: this.reportData.nextProcedure,
        reportTime: this.reportData.reportTime
      });
      this.currentProcess.workerId = this.reportData.workerId;
      this.currentProcess.procedure = this.reportData.nextProcedure;
      this.currentProcess.startTime = this.currentProcess.startTime || this.reportData.reportTime;
      this.currentProcess.endTime = this.reportData.reportTime;
      this.reportDialogVisible = false;
      this.$message.success('报工成功');
    } catch (error) {
      console.error('报工失败:', error);
      this.$message.error('报工失败');
    }
  },
  generateQRCode(process) {
    const qrCodeData = `工单号:${process.workOrderId}, 产品名:${process.productName}, 加工员工:${process.workerId}, 车间:${process.workshop}, 开始时间:${process.startTime}`;
    return `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrCodeData)}&size=100x100`;
  },
  generateMockData() {
    this.processData = [
      {
        workOrderId: 'WO001',
        productSerial: 1,
        productName: '产品A',
        workshop: '喷蜡车间',
        procedure: '磨砂',
        workerId: 'E001',
        startTime: '',
        endTime: ''
      },
      {
        workOrderId: 'WO002',
        productSerial: 2,
        productName: '产品B',
        workshop: '制壳车间',
        procedure: '抛光',
        workerId: 'E002',
        startTime: '',
        endTime: ''
      }
    ];
  }
}
};
</script>

<style>
.filter-row {
margin-bottom: 20px;
}
</style>