kd-aiot-frontend-mes/src/views/batchRecord/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- <print /> -->
      <ele-split-layout
        width="500px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="left-box">
          <div class="left-item">
            <div class="title">产品</div>

            <el-popover placement="right" width="400" trigger="click">
              <div>
                <el-form
                  ref="productFormRef"
                  :model="productBody"
                  label-width="80px"
                  class="productForm"
                >
                  <el-form-item label="关键字:">
                    <el-input
                      v-model="productBody.param"
                      placeholder="产品编码、产品名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="查询范围:">
                    <el-date-picker
                      style="width: 100%"
                      v-model="productBody.createTimeStart"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :picker-options="{
                        disabledDate: (date) => {
                          const end = productBody.createTimeEnd
                            ? new Date(productBody.createTimeEnd)
                            : new Date();
                          const start = new Date(end);
                          start.setMonth(start.getMonth() - 3);
                          return (
                            date.getTime() < start.getTime() ||
                            date.getTime() > end.getTime()
                          );
                        }
                      }"
                    >
                    </el-date-picker>
                    <div style="margin-top: 10px">
                      <el-date-picker
                        style="width: 100%"
                        v-model="productBody.createTimeEnd"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="createTimeEndDateChange"
                        :picker-options="{
                          disabledDate: (date) => {
                            const now = new Date();
                            const start = new Date(now);
                            start.setMonth(start.getMonth() - 3);
                            return (
                              date.getTime() < start.getTime() ||
                              date.getTime() > now.getTime()
                            );
                          }
                        }"
                      >
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="getAllProductInWorkOrder"
                      icon="el-icon-search"
                      :loading="productButLoading"
                      >查询</el-button
                    >
                    <el-button
                      type="primary"
                      @click="resetSubmit"
                      icon="el-icon-refresh-left"
                      :loading="productButLoading"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <el-button slot="reference" type="primary" style="width: 100%">
                搜索
              </el-button>
            </el-popover>

            <div class="list-box" style="padding-bottom: 80px">
              <div
                class="list-item"
                v-for="i in productList"
                :key="i.productName + i.productCode"
                :class="{ active: i.productCode == tableQuery.productCode }"
                @click="changeProductName(i)"
              >
                <!-- <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="`产品编码：${i.productCode},产品名称：${i.productName}`"
                >
                  <template slot="reference">
                    <div class="ele-elip" style="width: 100%">{{
                      i.productCode
                    }}</div>
                    <div class="ele-elip" style="width: 100%">{{
                      i.productName
                    }}</div>
                  </template>
                </el-popover> -->
                <div class="ele-elip" style="width: 100%">
                  {{ i.productCode }}
                </div>
                <div class="ele-elip" style="width: 100%">
                  {{ i.productName }}
                </div>
              </div>
            </div>

            <div class="footer-box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="productBody.pageNum"
                :page-size="productBody.size"
                layout="sizes,pager"
                :total="total"
                :pager-count="5"
                small
              >
              </el-pagination>
            </div>
          </div>
          <div class="left-item">
            <div class="title">批次号</div>
            <div v-if="batchNos.length > 0" class="list-box">
              <div
                class="list-item"
                v-for="i in batchNos"
                :key="i"
                :class="{ active: i == tableQuery.batchNo }"
                @click="changeBatchNo(i)"
              >
                <div> {{ i ? i : '暂无批次号' }}</div>
              </div>
            </div>
            <div v-else class="list-box">
              <div class="list-item" style="text-align: center; color: #888">
                请先选择产品
              </div>
            </div>
          </div>
          <div class="left-item">
            <div class="title">批记录类型</div>
            <div class="list-box">
              <div
                class="list-item"
                v-for="i in types"
                :key="i.name"
                :class="{ active: activeType == i.name }"
                @click="changeActiveType(i)"
              >
                {{ i.name }}
              </div>
            </div>
          </div>
        </div>

        <template v-slot:content>
          <div class="table-box">
            <component
              :is="activeComponentName"
              ref="tableRef"
              :tableQuery="tableQuery"
            ></component>
          </div>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import seekPage from '@/components/common/seekPage.vue';
  import { getAllProductInWorkOrder } from '@/api/produce/workOrder';
  import workOrderTable from './components/tables/workOrderTable.vue';
  import materialTable from './components/tables/materialTable.vue';
  import materialReturnTable from './components/tables/materialReturnTable.vue';
  import workReportTable from './components/tables/workReportTable.vue';
  import qualityWorkOrderTable from './components/tables/qualityWorkOrderTable.vue';
  import wmsOutInt from './components/tables/wmsOutInt.vue';
  import batchRecordTable from './components/tables/batchRecordTable.vue';
  import deviceBatchRecordTable from './components/tables/deviceBatchRecordTable.vue';
  import craftFilesTable from './components/tables/craftFilesTable.vue';
  import qualityInspection from './components/tables/qualityInspection.vue';
  import certificate from './components/tables/certificate.vue';
  import qualityReportApproval from './components/tables/qualityReportApproval.vue';
  import print from './print/index.vue';

  export default {
    components: {
      seekPage,
      workOrderTable,
      materialTable,
      materialReturnTable,
      workReportTable,
      qualityWorkOrderTable,
      wmsOutInt,
      batchRecordTable,
      deviceBatchRecordTable,
      craftFilesTable,
      qualityInspection,
      certificate,
      qualityReportApproval,
      print
    },
    name: 'batchRecord',
    mixins: [dictMixins, tableColumnsMixin],
    data() {
      return {
        types: [
          {
            name: '生产工单',
            componentName: 'workOrderTable'
          },
          {
            name: '领料单',
            componentName: 'materialTable'
          },
          {
            name: '退料单',
            componentName: 'materialReturnTable'
          },
          {
            name: '报工',
            componentName: 'workReportTable'
          },
          {
            name: '质检工单',
            componentName: 'qualityWorkOrderTable'
          },
          {
            name: '入库单',
            componentName: 'wmsOutInt'
          },
          {
            name: '生产记录',
            componentName: 'batchRecordTable'
          },
          {
            name: '设备工单',
            componentName: 'deviceBatchRecordTable'
          },
          {
            name: '工艺文件',
            componentName: 'craftFilesTable'
          },
          {
            name: '首件两检',
            componentName: 'qualityInspection'
          },
          {
            name: '质检报告',
            componentName: 'qualityReportApproval'
          },
          {
            name: '合格证',
            componentName: 'certificate'
          }
        ],
        activeType: '生产工单',
        activeComponentName: 'workOrderTable',
        // 产品搜索条件
        productBody: {
          param: '',
          pageNum: 1,
          size: 10,
          // 创建开始时间和结束时间
          createTimeStart: '',
          createTimeEnd: ''
        },
        productButLoading: false,
        total: 0,
        // 批次号
        batchNos: [],
        // 产品列表
        productList: [],
        tableQuery: {
          productCode: '',
          batchNo: ''
        },
        // 扫码枪缓冲
        scanBuffer: '',
        scanLastTime: 0,
        /** keep-alive 下避免与 created 重复请求；第二次 activated 再复位 */
        _pageHasActivated: false
      };
    },
    computed: {},
    mounted() {
      window.addEventListener('keydown', this.handleScanKey, true);
    },
    beforeDestroy() {
      window.removeEventListener('keydown', this.handleScanKey, true);
    },
    activated() {
      if (this._pageHasActivated) {
        this.initPage();
      }
      this._pageHasActivated = true;
    },
    created() {
      this.initPage();
    },
    methods: {
      // 初始化页面：复位筛选条件并拉取产品列表
      initPage() {
        // 时间范围复位为最近一个月（含今天）
        const endDate = new Date();
        const startDate = new Date();
        startDate.setMonth(startDate.getMonth() - 1);
        startDate.setHours(0, 0, 0, 0);
        this.productBody.param = '';
        this.productBody.pageNum = 1;
        this.productBody.size = 10;
        this.productBody.createTimeStart = this.$util.toDateString(
          startDate,
          'yyyy-MM-dd HH:mm:ss'
        );
        this.productBody.createTimeEnd = this.$util.toDateString(
          endDate,
          'yyyy-MM-dd HH:mm:ss'
        );

        // 复位选中状态
        this.tableQuery.productCode = '';
        this.tableQuery.batchNo = '';
        this.batchNos = [];
        this.activeType = '生产工单';
        this.activeComponentName = 'workOrderTable';

        this.getAllProductInWorkOrder();
      },
      // 刷新表格数据
      reload() {
        this.$refs.tableRef?.reload();
      },
      // 获取产品和批次号
      async getAllProductInWorkOrder() {
        try {
          this.productButLoading = true;
          const { list, count } = await getAllProductInWorkOrder(
            this.productBody
          );
          this.productList = list;
          console.log('this.productList', this.productList);
          this.productButLoading = false;
          this.total = count;
        } catch (error) {
          this.productButLoading = false;
        }
      },
      // 选择产品
      changeProductName(i) {
        this.tableQuery.productCode = i.productCode;
        // 设置批次号
        this.batchNos = i.batchNos;
        this.tableQuery.batchNo = '';
        // 刷新表格
        this.reload();
      },
      // 选择批次号
      changeBatchNo(i) {
        this.tableQuery.batchNo = i;
        this.reload();
      },
      // 选择批记录类型
      changeActiveType(i) {
        this.activeType = i.name;
        this.activeComponentName = i.componentName;
        this.reload();
      },
      resetSubmit() {
        this.productBody.param = '';
        this.productBody.createTimeStart = null;
        this.productBody.createTimeEnd = null;
        this.getAllProductInWorkOrder();
      },
      handleSizeChange(size) {
        this.productBody.size = size;
        this.getAllProductInWorkOrder();
      },
      handleCurrentChange(pageNum) {
        this.productBody.pageNum = pageNum;
        this.getAllProductInWorkOrder();
      },
      createTimeEndDateChange() {
        // 格式化 productBody.createTimeEnd 的时间为 23:59:59
        if (this.productBody.createTimeEnd) {
          const date = new Date(this.productBody.createTimeEnd);
          date.setHours(23, 59, 59);
          this.productBody.createTimeEnd = this.$util.toDateString(
            date,
            'yyyy-MM-dd HH:mm:ss'
          );
        }
      },
      // 扫码枪监听：根据按键间隔判断是否为扫码输入
      handleScanKey(e) {
        const now = Date.now();
        const interval = now - this.scanLastTime;
        this.scanLastTime = now;

        if (e.key === 'Enter') {
          if (this.scanBuffer.length >= 3 && interval < 100) {
            e.preventDefault();
            e.stopPropagation();
            const code = this.scanBuffer;
            const target = e.target;
            this.scanBuffer = '';
            // 清掉首字符泄漏到输入框中的内容
            if (
              target &&
              (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') &&
              typeof target.value === 'string' &&
              code.endsWith(target.value) === false &&
              target.value.length > 0 &&
              code.startsWith(target.value)
            ) {
              target.value = '';
              target.dispatchEvent(new Event('input', { bubbles: true }));
            }
            this.processScanResult(code);
          } else {
            this.scanBuffer = '';
          }
          return;
        }

        if (e.key.length !== 1) return;

        // 间隔过长视为人工输入，重置缓冲
        if (interval > 50) {
          this.scanBuffer = e.key;
          return;
        }

        // 已检测到扫码连续输入，阻止字符进入输入框
        e.preventDefault();
        e.stopPropagation();
        this.scanBuffer += e.key;
      },
      // 处理扫码结果：产品编码-批次号（按第一个 - 拆分，批次号可能包含 -）
      async processScanResult(code) {
        const idx = code.indexOf('-');
        if (idx <= 0 || idx === code.length - 1) {
          this.$message.warning(`扫码结果格式不正确：${code}`);
          return;
        }
        const productCode = code.substring(0, idx);
        const batchNo = code.substring(idx + 1);

        let product = this.productList.find(
          (p) => p.productCode === productCode
        );
        // 当前列表未找到则按产品编码搜索一次
        if (!product) {
          this.productBody.param = productCode;
          this.productBody.pageNum = 1;
          await this.getAllProductInWorkOrder();
          product = this.productList.find(
            (p) => p.productCode === productCode
          );
        }
        if (!product) {
          this.$message.warning(`未找到产品：${productCode}`);
          return;
        }

        // 选中产品
        this.tableQuery.productCode = product.productCode;

        // 选中批次号：扫码命中时仅展示该批次号，未命中则展示该产品全部批次号
        const allBatchNos = product.batchNos || [];
        if (allBatchNos.includes(batchNo)) {
          this.batchNos = [batchNo];
          this.tableQuery.batchNo = batchNo;
          this.$message.success(`扫码成功：${productCode} / ${batchNo}`);
        } else {
          this.batchNos = allBatchNos;
          this.tableQuery.batchNo = '';
          this.$message.warning(
            `产品 ${productCode} 下未找到批次号：${batchNo}`
          );
        }
        this.reload();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .left-box {
    height: 100%;
    display: flex;

    .left-item {
      flex: 1;
      border-right: 1px solid #ededed;
      padding: 0 5px;
      width: 33.3%;
      position: relative;
      box-sizing: border-box;

      .title {
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #ededed;
        margin-bottom: 15px;
      }

      .list-box {
        margin-top: 10px;
        max-height: 78vh;
        overflow-y: auto;
        box-sizing: border-box;

        .list-item {
          padding: 10px 10px;
          border-bottom: 1px solid #ededed;
          font-size: 14px;
          cursor: pointer;
          word-break: break-all;
        }

        .active {
          background: #1890ff;
          color: #fff;
        }
      }

      .footer-box {
        width: 100%;
        height: 70px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        background: #fff;
        padding: 10px 0;

        :deep(.el-pagination__sizes) {
          display: block;
          margin-bottom: 10px;
        }
      }
    }
  }

  .productForm {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .table-box {
    height: 85vh;
    overflow-y: auto;
  }
</style>