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

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

            <el-input
              placeholder="搜索"
              :suffix-icon="productBody.param ? '' : 'el-icon-search'"
              v-model="productBody.param"
              @input="handleInput"
              clearable
            ></el-input>

            <div class="list-box">
              <div
                class="list-item"
                v-for="i in productList"
                :key="i.productName + i.productCode"
                :class="{ active: i.productName == tableQuery.param }"
                @click="changeProductName(i)"
              >
                {{ i.productName }}
              </div>
            </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">
                <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>
            <seek-page :seekList="seekList" @search="search"></seek-page>
            <ele-pro-table
              ref="table"
              row-key="workOrderId"
              :columns="columns"
              :datasource="datasource"
              cache-key="batch-record-list"
              autoAmendPage
            >
            </ele-pro-table>
          </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 { debounce } from '@/utils/util.js';
  import { batchRecordPage } from '@/api/workOrderList';

  export default {
    components: { seekPage },
    name: 'batchRecord',
    mixins: [dictMixins, tableColumnsMixin],
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'workOrderName',
            label: '单据名称'
          },
          {
            prop: '',
            label: '单据编码'
          },
          {
            prop: 'status',
            label: '单据状态'
          },
          {
            prop: 'approveStatus',
            label: '审核状态'
          }
        ],
        types: [
          {
            name: '生产工单'
          },
          {
            name: '领料单'
          },
          {
            name: '退票单'
          },
          {
            name: '报工'
          },
          {
            name: '质检工单'
          },
          {
            name: '入库单'
          },
          {
            name: '生产记录'
          },
          {
            name: '设备工单'
          },
          {
            name: '工艺文件'
          }
        ],
        activeType: '生产工单',
        // 产品搜索条件
        productBody: {
          param: '',
          pageNum: 1,
          size: 999
        },
        // 批次号
        batchNos: [],
        // 产品列表
        productList: [],
        tableQuery: {
          param: '',
          batchNo: '',
          type: ''
        }
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '单据编码：',
            value: 'workOrderCode',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '单据名称：',
            value: 'workOrderName',
            type: 'input',
            placeholder: '请输入'
          }
        ];
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return () => {
          const body = { ...where, ...order, page, limit, ...this.tableQuery };

          // 根据类型查询不同的api
          switch (this.activeType) {
            case '生产工单':
              return batchRecordPage(body);

            default:
              return [];
          }
        };
      }
    },
    created() {
      this.getAllProductInWorkOrder();
    },
    methods: {
      reload(where) {
        this.$refs.table.reload({
          where,
          ...this.tableQuery
        });
      },
      // 刷新表格数据
      search(where) {
        this.reload(where);
      },
      // 获取产品和批次号
      async getAllProductInWorkOrder() {
        const { list } = await getAllProductInWorkOrder(this.productBody);
        this.productList = list;
        console.log('this.productList', this.productList);
      },
      // 搜索产品
      handleInput: debounce(function (e) {
        this.getAllProductInWorkOrder();
      }, 500),
      // 选择产品
      changeProductName(i) {
        this.tableQuery.param = i.productName;
        // 设置批次号
        this.batchNos = i.batchNos;
        // 刷新表格
        this.reload();
      },
      // 选择批记录类型
      changeActiveType(i) {
        this.activeType = i.name;
        this.reload();
      }
    }
  };
</script>

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

    .left-item {
      flex: 1;
      border-right: 1px solid #ededed;
      min-height: 80vh;
      padding: 0 5px;

      .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: 80vh;
        overflow-y: auto;
        box-sizing: border-box;

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

        .active {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }
</style>