zs_aucma-mes-ui/src/views/base/orderInfo/execution.vue

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="search-form">
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="执行状态" prop="executionStatus">
        <el-select v-model="queryParams.executionStatus" placeholder="请选择执行状态" clearable>
          <el-option label="待执行" value="PENDING" />
          <el-option label="运行中" value="RUNNING" />
          <el-option label="已完成" value="COMPLETED" />
          <el-option label="已暂停" value="PAUSED" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工单列表 -->
    <el-table v-loading="loading" :data="orderList" border>
      <el-table-column label="工单编号" prop="orderCode" width="150" />
      <el-table-column label="物料名称" prop="materialName" show-overflow-tooltip />
      <el-table-column label="计划数量" prop="orderAmount" width="100" align="center" />
      <el-table-column label="完工数量" prop="actualCompleteQty" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.actualCompleteQty || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="不良数量" prop="actualDefectQty" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.actualDefectQty || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行状态" prop="executionStatus" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.executionStatus)">
            {{ getStatusText(scope.row.executionStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作员" prop="executionOperator" width="100" align="center" />
      <el-table-column label="开始时间" prop="startTime" width="160" align="center" />
      <el-table-column label="操作" width="280" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.executionStatus || scope.row.executionStatus === 'PENDING'"
            size="mini"
            type="primary"
            @click="handleStart(scope.row)"
          >开始生产</el-button>
          <el-button
            v-if="scope.row.executionStatus === 'RUNNING'"
            size="mini"
            type="warning"
            @click="handleUpdateQty(scope.row)"
          >更新数量</el-button>
          <el-button
            v-if="scope.row.executionStatus === 'RUNNING'"
            size="mini"
            type="success"
            @click="handleComplete(scope.row)"
          >完工提报</el-button>
          <el-button
            size="mini"
            type="info"
            @click="handleDetail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 开始生产对话框 -->
    <el-dialog title="开始生产" :visible.sync="startDialogVisible" width="400px" append-to-body>
      <el-form :model="startForm" label-width="80px">
        <el-form-item label="工单编号">
          <el-input v-model="startForm.orderCode" disabled />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="startForm.materialName" disabled />
        </el-form-item>
        <el-form-item label="操作员">
          <el-input v-model="startForm.operator" placeholder="请输入操作员" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="startDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmStart">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 更新数量对话框 -->
    <el-dialog title="更新完工数量" :visible.sync="updateQtyDialogVisible" width="400px" append-to-body>
      <el-form :model="updateForm" label-width="80px">
        <el-form-item label="工单编号">
          <el-input v-model="updateForm.orderCode" disabled />
        </el-form-item>
        <el-form-item label="计划数量">
          <el-input v-model="updateForm.planQty" disabled />
        </el-form-item>
        <el-form-item label="完工数量">
          <el-input-number v-model="updateForm.completeQty" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="不良数量">
          <el-input-number v-model="updateForm.defectQty" :min="0" style="width: 100%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateQtyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateQty">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 完工提报对话框 -->
    <el-dialog title="完工提报" :visible.sync="completeDialogVisible" width="400px" append-to-body>
      <el-form :model="completeForm" label-width="80px">
        <el-form-item label="工单编号">
          <el-input v-model="completeForm.orderCode" disabled />
        </el-form-item>
        <el-form-item label="计划数量">
          <el-input v-model="completeForm.planQty" disabled />
        </el-form-item>
        <el-form-item label="完工数量">
          <el-input-number v-model="completeForm.completeQty" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="不良数量">
          <el-input-number v-model="completeForm.defectQty" :min="0" style="width: 100%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="completeDialogVisible = false">取 消</el-button>
        <el-button type="success" @click="confirmComplete">完工提报</el-button>
      </div>
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog title="工单详情" :visible.sync="detailDialogVisible" width="600px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="工单编号">{{ detailOrder.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="物料编码">{{ detailOrder.materialCode }}</el-descriptions-item>
        <el-descriptions-item label="物料名称" :span="2">{{ detailOrder.materialName }}</el-descriptions-item>
        <el-descriptions-item label="计划数量">{{ detailOrder.orderAmount }}</el-descriptions-item>
        <el-descriptions-item label="执行状态">
          <el-tag :type="getStatusType(detailOrder.executionStatus)">
            {{ getStatusText(detailOrder.executionStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="完工数量">{{ detailOrder.actualCompleteQty || 0 }}</el-descriptions-item>
        <el-descriptions-item label="不良数量">{{ detailOrder.actualDefectQty || 0 }}</el-descriptions-item>
        <el-descriptions-item label="操作员">{{ detailOrder.executionOperator || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ detailOrder.deviceCode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ detailOrder.startTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="完工时间">{{ detailOrder.finishTime || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOrderInfo, startProduction, completeProduction, updateQuantity } from "@/api/base/orderInfo";

export default {
  name: "OrderExecution",
  data() {
    return {
      loading: false,
      total: 0,
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: null,
        executionStatus: null
      },
      startDialogVisible: false,
      updateQtyDialogVisible: false,
      completeDialogVisible: false,
      detailDialogVisible: false,
      startForm: {
        orderCode: '',
        materialName: '',
        operator: ''
      },
      updateForm: {
        orderCode: '',
        planQty: 0,
        completeQty: 0,
        defectQty: 0
      },
      completeForm: {
        orderCode: '',
        planQty: 0,
        completeQty: 0,
        defectQty: 0
      },
      detailOrder: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listOrderInfo(this.queryParams)
        .then(response => {
          const data = response && response.data ? response.data : response;
          if (Array.isArray(data)) {
            this.orderList = data;
            this.total = data.length;
          } else {
            this.orderList = (data && data.rows) ? data.rows : [];
            this.total = (data && data.total) ? data.total : this.orderList.length;
          }
        })
        .catch(() => {
          this.orderList = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getStatusType(status) {
      const map = { 'RUNNING': 'warning', 'COMPLETED': 'success', 'PAUSED': 'info', 'PENDING': '' };
      return map[status] || '';
    },
    getStatusText(status) {
      const map = { 'RUNNING': '运行中', 'COMPLETED': '已完成', 'PAUSED': '已暂停', 'PENDING': '待执行' };
      return map[status] || '待执行';
    },
    handleStart(row) {
      this.startForm = {
        orderCode: row.orderCode,
        materialName: row.materialName,
        operator: this.$store.state.user.name || ''
      };
      this.startDialogVisible = true;
    },
    confirmStart() {
      if (!this.startForm.operator) {
        this.$modal.msgWarning("请输入操作员");
        return;
      }
      startProduction(this.startForm.orderCode, this.startForm.operator).then(response => {
        this.$modal.msgSuccess("开始生产成功");
        this.startDialogVisible = false;
        this.getList();
      });
    },
    handleUpdateQty(row) {
      this.updateForm = {
        orderCode: row.orderCode,
        planQty: row.orderAmount,
        completeQty: row.actualCompleteQty || 0,
        defectQty: row.actualDefectQty || 0
      };
      this.updateQtyDialogVisible = true;
    },
    confirmUpdateQty() {
      updateQuantity(this.updateForm.orderCode, this.updateForm.completeQty, this.updateForm.defectQty).then(response => {
        this.$modal.msgSuccess("更新数量成功");
        this.updateQtyDialogVisible = false;
        this.getList();
      });
    },
    handleComplete(row) {
      this.completeForm = {
        orderCode: row.orderCode,
        planQty: row.orderAmount,
        completeQty: row.actualCompleteQty || 0,
        defectQty: row.actualDefectQty || 0
      };
      this.completeDialogVisible = true;
    },
    confirmComplete() {
      this.$modal.confirm('确认完工提报？完工后工单状态将变为已完成').then(() => {
        completeProduction(this.completeForm.orderCode, this.completeForm.completeQty, this.completeForm.defectQty).then(response => {
          this.$modal.msgSuccess("完工提报成功");
          this.completeDialogVisible = false;
          this.getList();
        });
      });
    },
    handleDetail(row) {
      this.detailOrder = row;
      this.detailDialogVisible = true;
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 15px;
}
</style>