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

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <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';

  export default {
    components: {
      seekPage,
      workOrderTable,
      materialTable,
      materialReturnTable,
      workReportTable,
      qualityWorkOrderTable,
      wmsOutInt,
      batchRecordTable,
      deviceBatchRecordTable,
      craftFilesTable
    },
    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'
          }
        ],
        activeType: '生产工单',
        activeComponentName: 'workOrderTable',
        // 产品搜索条件
        productBody: {
          param: '',
          pageNum: 1,
          size: 10,
          // 创建开始时间和结束时间
          createTimeStart: '',
          createTimeEnd: ''
        },
        productButLoading: false,
        total: 0,
        // 批次号
        batchNos: [],
        // 产品列表
        productList: [],
        tableQuery: {
          productCode: '',
          batchNo: ''
        }
      };
    },
    computed: {},
    created() {
      // 设置 productBody.createTimeStart 和 productBody.createTimeEnd 为前一个月时间包含今天
      const endDate = new Date();
      const startDate = new Date();
      startDate.setMonth(startDate.getMonth() - 1);
      // 设置时间为 00:00:00
      startDate.setHours(0, 0, 0, 0);
      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.getAllProductInWorkOrder();
    },
    methods: {
      // 刷新表格数据
      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'
          );
        }
      }
    }
  };
</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>