9/29

<template>
    <div id="work-order">
      <!-- 筛选栏 -->
      <el-row :gutter="20" class="filter-row">
        <el-col :span="6">
          <el-input placeholder="请输入工单名称" v-model="filters.name"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="filters.status" placeholder="选择状态">
            <el-option label="待生产" value="pending"></el-option>
            <el-option label="生产中" value="in_production"></el-option>
            <el-option label="完成" value="completed"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchOrders">筛选</el-button>
        </el-col>
      </el-row>
  
      <!-- 添加按钮 -->
      <el-button type="primary" @click="openAddOrderDialog">添加工单</el-button>
  
      <!-- 工单列表 -->
      <el-table :data="workOrders" style="width: 100%; margin-top: 20px;">
        <el-table-column prop="id" label="工单号" width="120"></el-table-column>
        <el-table-column prop="name" label="工单名称" width="200"></el-table-column>
        <el-table-column prop="source" label="工单来源" width="200"></el-table-column>
        <el-table-column prop="product" label="产品名称" width="200"></el-table-column>
        <el-table-column prop="quantity" label="工单数量" width="150"></el-table-column>
        <el-table-column prop="status" label="单据状态" width="150">
          <template slot-scope="scope">
            <el-tag :type="statusTags[scope.row.status]">{{ scope.row.statusLabel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="startProduction(scope.row)">投产</el-button>
            <el-button type="text" size="small" @click="deleteOrder(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加工单的弹出窗口 -->
      <el-dialog title="添加生产工单" :visible.sync="addOrderDialogVisible">
        <el-form :model="newOrder" label-width="120px">
          <el-form-item label="工单名称">
            <el-input v-model="newOrder.name"></el-input>
          </el-form-item>
          <el-form-item label="工单来源">
            <el-input v-model="newOrder.source"></el-input>
          </el-form-item>
          <el-form-item label="工单数量">
            <el-input type="number" v-model="newOrder.quantity"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addOrderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrder">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        filters: {
          name: '',
          status: ''
        },
        workOrders: [
          // 示例数据
          { id: 1, name: '工单1', source: '系统A', product: '产品A', quantity: 100, status: 'pending', statusLabel: '待生产' },
          { id: 2, name: '工单2', source: '系统B', product: '产品B', quantity: 200, status: 'in_production', statusLabel: '生产中' },
        ],
        newOrder: {
          name: '',
          source: '',
          quantity: null
        },
        addOrderDialogVisible: false,
        nextOrderId: 3, // 下一个工单号
        statusTags: {
          pending: 'info',
          in_production: 'warning',
          completed: 'success'
        }
      };
    },
    methods: {
      searchOrders() {
        // 模拟筛选功能
        console.log('筛选条件', this.filters);
      },
      openAddOrderDialog() {
        this.newOrder = { name: '', source: '', quantity: null };
        this.addOrderDialogVisible = true;
      },
      async addOrder() {
        if (this.newOrder.name && this.newOrder.source && this.newOrder.quantity) {
          // 发送数据到后端
          try {
            const response = await axios.post('/api/orders', {
              name: this.newOrder.name,
              source: this.newOrder.source,
              quantity: this.newOrder.quantity
            });
            // 成功后添加到本地工单列表
            const newWorkOrder = {
              id: this.nextOrderId++,
              name: this.newOrder.name,
              source: this.newOrder.source,
              product: '产品X', // 产品名称固定为示例，后期可扩展
              quantity: this.newOrder.quantity,
              status: 'pending',
              statusLabel: '待生产'
            };
            this.workOrders.push(newWorkOrder);
            this.addOrderDialogVisible = false;
            this.$message.success('工单添加成功');
          } catch (error) {
            console.error('添加工单失败:', error);
            this.$message.error('工单添加失败');
          }
        } else {
          this.$message.error('请填写完整的工单信息');
        }
      },
      startProduction(order) {
        order.status = 'in_production';
        order.statusLabel = '生产中';
        this.$message.success(`工单${order.name}已投产`);
      },
      deleteOrder(id) {
        this.workOrders = this.workOrders.filter(order => order.id !== id);
        this.$message.success('工单已删除');
      }
    }
  };
  </script>
  
  <style>
  .filter-row {
    margin-bottom: 20px;
  }
  </style>