wms-vue/src/views/modules/warehouse/labelQueryLocation.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top">
      <el-form-item label="入库状态">
        <el-select v-model="queryHeaderData.inStockFlag" placeholder="请选择" style="width: 120px;">
          <el-option label="全部" value=""></el-option>
          <el-option label="未入库" value="X"></el-option>
          <el-option label="已出库" value="N"></el-option>
          <el-option label="在库" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input style="width: 120px;" v-model="queryHeaderData.partNo" placeholder="请输入物料编号" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input style="width: 120px;" v-model="queryHeaderData.batchNo" placeholder="请输入批次号" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="库位">
        <el-input style="width: 120px;" v-model="queryHeaderData.locationId" placeholder="请输入库位" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="标签ID">
        <el-input style="width: 120px;" v-model="queryHeaderData.unitId" placeholder="请输入标签ID" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="物料描述">
        <el-input style="width: 120px;" v-model="queryHeaderData.partDesc" placeholder="请输入物料描述" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="所在栈板">
        <el-input style="width: 120px;" v-model="queryHeaderData.palletId" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item label="栈板所在区域">
        <el-input style="width: 120px;" v-model="queryHeaderData.stationArea" @keyup.enter.native="getDataList()"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="getDataList()" type="primary">查询</el-button>
        <!-- 导出按钮 - rqrq -->
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ '导出' }}
        </download-excel>
      </el-form-item>
    </el-form>

    <el-table
      id="labelQueryTable"
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading || printLoading"
      :element-loading-text="loadingText"
      style="width: 100%; margin-bottom: 15px;">

      <!-- 动态列配置 - rqrq -->
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="item.columnProp === 'reserveFlag'">
            {{ scope.row.reserveFlag === 'Y' ? '是' : '否' }}
          </span>
          <span v-else>{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


  </div>
</template>

<script>
import { getHandlingUnitLabelList, reprintLabel, deleteLabel, getHandlingUnitLabelAll } from '@/api/warehouse/labelQuery'
import { searchSysLanguagePackList, saveUserFavorite, searchUserFavorite } from '@/api/sysLanguage'
import { createOtherInboundHU, printLabel } from '@/api/warehouse/otherInbound'
import {getHandlingUnitLabelListLocation} from '../../../api/warehouse/labelQuery'

export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      dataListLoading: false,
      printLoading: false,
      loadingText: '加载中...',
      dataListSelections: [],
      favorite: false,
      height: 500,
      // 表格列配置 - rqrq
      columnList: [
        {columnProp: "unitId", headerAlign: "center", align: "center", columnLabel: "标签ID", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "partNo", headerAlign: "center", align: "center", columnLabel: "物料编号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "qty", headerAlign: "center", align: "right", columnLabel: "数量", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "palletId", headerAlign: "center", align: "center", columnLabel: "所在栈板", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "callingFlag", headerAlign: "center", align: "center", columnLabel: "是否调用", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "remark", headerAlign: "center", align: "left", columnLabel: "最近一次调用备注", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: ""},

        {columnProp: "position", headerAlign: "center", align: "center", columnLabel: "位置", columnWidth: 60, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "layer", headerAlign: "center", align: "center", columnLabel: "层数", columnWidth: 60, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "stationId", headerAlign: "center", align: "center", columnLabel: "站点", columnWidth: 60, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "stationArea", headerAlign: "center", align: "center", columnLabel: "区域", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "batchNo", headerAlign: "center", align: "center", columnLabel: "批次号", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "locationId", headerAlign: "center", align: "center", columnLabel: "库位", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "warehouseId", headerAlign: "center", align: "center", columnLabel: "仓库", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "partDesc", headerAlign: "center", align: "center", columnLabel: "物料描述", columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "height", headerAlign: "center", align: "right", columnLabel: "高度(mm)", columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "reserveFlag", headerAlign: "center", align: "center", columnLabel: "是否预留", columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "reserveOrderRef1", headerAlign: "center", align: "center", columnLabel: "预留单号1", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "reserveOrderRef2", headerAlign: "center", align: "center", columnLabel: "预留单号2", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: ""},
        {columnProp: "reserveOrderRef3", headerAlign: "center", align: "center", columnLabel: "预留单号3", columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: ""}
      ],
      queryHeaderData: {
        inStockFlag: '',
        partNo: '',
        batchNo: '',
        locationId: '',
        unitId: '',
        partDesc: '',
        stationArea:'',
        palletId:'',
      },
      // 导出相关 - rqrq
      exportData: [],
      exportName: '标签位置查询' + this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader: ["标签位置查询"],
      exportFooter: [],
      // 打印相关配置
      reportId: 'HU_LABEL', // 默认报表ID，可根据实际情况调整
      zplCode: '', // ZPL代码
      paperSize: 'A4',
      orientation: 'portrait',
      dpi: 203,
      // 其它入库标签打印相关
      otherInboundVisible: false,
      otherInboundLoading: false,
      otherInboundForm: {
        partNo: '',
        partDesc: '',
        batchNo: '',
        locationId: '',
        warehouseId: '',
        wdr: '*',
        qty: 1,
        umId: '个',
        packageCount: 1,
        manufactureDate: '',
        expiredDate: '',
        remark: ''
      },
      otherInboundRules: {
        partNo: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        partDesc: [
          { required: true, message: '物料描述不能为空', trigger: 'blur' }
        ],
        batchNo: [
          { required: true, message: '批次号不能为空', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '库位不能为空', trigger: 'blur' }
        ],
        warehouseId: [
          { required: true, message: '仓库不能为空', trigger: 'blur' }
        ],
        qty: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }
        ],
        umId: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        packageCount: [
          { required: true, message: '包装数不能为空', trigger: 'blur' },
          { type: 'number', min: 1, message: '包装数必须大于等于1', trigger: 'blur' }
        ]
      }
    }
  },
  activated() {
    this.getDataList()
    this.getHeight()
  },
  mounted() {
    this.getDataList()
    this.getHeight()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const params = {
        page: this.pageIndex,
        size: this.pageSize,
        site: localStorage.getItem('site'),
        ...this.queryHeaderData
      }

      getHandlingUnitLabelListLocation(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list || []
          this.totalPage = data.page.totalCount || 0
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.msg || '查询失败')
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataList = []
        this.totalPage = 0
        this.dataListLoading = false
      })
    },

    // 重置查询条件
    resetQuery() {
      this.queryHeaderData = {
        inStockFlag: '',
        partNo: '',
        batchNo: '',
        locationId: '',
        unitId: '',
        partDesc: ''
      }
      this.pageIndex = 1
      this.getDataList()
    },





    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      const seconds = String(d.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },


    // 获取表格高度
    getHeight() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 220
      })
    },
    // 导出相关方法 - rqrq
    async createExportData() {
      const queryParams = {
        site: localStorage.getItem('site'),
        ...this.queryHeaderData,
        page: 1,
        size: 999999  // 设置一个很大的数字来获取全部数据 - rqrq
      }
      const {data} = await getHandlingUnitLabelAll(queryParams)
      if (data && data.code === 0) {
        return (data.page.list || []).map(item => {
          return {
            ...item,
            reserveFlag: item.reserveFlag === 'Y' ? '是' : '否'
          }
        })
      }
      return []
    },
    startDownload() {
      // 开始导出 - rqrq
    },
    finishDownload() {
      // 导出完成 - rqrq
    },
    fields() {
      let json = "{"
      this.columnList.forEach((item, index) => {
        if (index == this.columnList.length - 1) {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
        } else {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
        }
      })
      json += "}"
      let s = eval("(" + json + ")")
      return s
    },

  }
}
</script>

<style>
.mod-config .el-form-item {
  margin-bottom: 15px;
}
.sl-svg {
  font-size: 20px;
  cursor: pointer;
  color: #409EFF;
}

/* 其它入库标签打印表单样式 */
.other-inbound-form .form-item-vertical {
  margin-bottom: 20px;
}

.other-inbound-form .form-item-vertical .el-form-item__label {
  display: block;
  text-align: left;
  padding: 0 0 8px 0;
  line-height: 1.5;
  font-weight: 500;
}

.other-inbound-form .form-item-vertical .el-form-item__content {
  margin-left: 0 !important;
}

.other-inbound-form .el-row {
  margin-bottom: 0;
}
</style>