wms_client_bojinsi_wuxi/src/layout/stock.vue

<template>
  <div style="margin-bottom: 10px">
      <el-config-provider :locale="zhCn">
          <el-row>
            <!-- <el-input v-model="queryKey" v-if="dataType == 1" style="width: 256px; margin-right: 10px;"
                placeholder="物料号/机型/序列号" :suffix-icon="Search" /> -->
            <el-input v-model="queryKey" style="width: 256px; margin-right: 10px;" placeholder="物料号/序列号" />
            <el-input v-model="vehicleNoQuery" style="width: 256px; margin-right: 10px;" placeholder="母托号" />
              <el-input v-if="dataType == 2" v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;"
                  placeholder="零件号" :suffix-icon="Search" />
              <el-button type="primary" @click="search()">搜索</el-button>
              <el-button type="warning" @click="reset()">重置</el-button>
              <el-button type="success" @click="exportExcel()">导出表格</el-button>
              <el-button type="primary" @click="goodsList()">多料查询</el-button>
              <!-- <el-select-v2 v-if="selStock == null" v-model="dataType" style="width: 156px; margin-right: 10px;"
                  placeholder="请选择库存显示类型" :options="dataTypeOptions" @change="search()"></el-select-v2> -->
          </el-row>
          <br />
          <el-table id="stock-table" :data="displayStocks" stripe border v-loading="loading" class="table-class"
              max-height="650px" highlight-current-row @row-click="getCurrentRow" :row-style="rowStyle"
              :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
              <el-table-column width="65px" fixed="left">
                  <template v-slot="scope">
                      <el-radio :label="scope.row.stockId" v-model="stockId">&nbsp;</el-radio>
                  </template>
              </el-table-column>
              <!-- <el-table-column prop="stockId" label="库存ID" min-width="120px" show-overflow-tooltip/> -->
              <el-table-column prop="goodsId" label="序列号/物料号" min-width="120px" />
              <el-table-column prop="batchNo" v-if="dataType == 1" label="类型" min-width="120px" />
              <el-table-column prop="goodsName" label="机型" min-width="120px" />
              <!-- <el-table-column prop="availableNum" v-if="dataType == 1" label="可用数量" min-width="120px" /> -->
              <!-- <el-table-column prop="remainNum" v-if="dataType == 1" label="剩余数量" min-width="120px" /> -->
              <el-table-column prop="realNum" label="实际数量" min-width="120px" />
              <el-table-column prop="vehicleId" v-if="dataType == 1" label="母托号" fixed="left" min-width="120px" />
              <!-- <el-table-column prop="providerId" v-if="dataType == 1" label="供应商编号" min-width="130px" /> -->
              <el-table-column prop="providerName" v-if="dataType == 1" label="托盘大小" min-width="130px" />
              <!-- <el-table-column prop="shelfLife" v-if="dataType == 1" label="保质期" min-width="120px" />
              <el-table-column prop="expirationDate" v-if="dataType == 1" label="有效日期" :formatter="dateFormat" min-width="140px" /> -->
              <el-table-column prop="locationId" v-if="dataType == 1" label="库位" :formatter="locationFormat" min-width="160px" />
              <el-table-column prop="productionDate" v-if="dataType == 1" label="收货日期" min-width="120px" />
              <!-- <el-table-column prop="currentLocation" v-if="dataType == 1" label="当前位置" min-width="120px" />
              <el-table-column prop="isInventory" v-if="dataType == 1" label="是否盘点" min-width="120px" /> -->
              <el-table-column prop="createTime" v-if="dataType == 1" label="上架时间" :formatter="timeFormat" min-width="140px" />
              <!-- <el-table-column prop="goodsStatus" v-if="dataType == 1" label="物料状态" :formatter="goodsStatusFormat" min-width="120px" /> -->
              <el-table-column prop="stockStatus" v-if="dataType == 1" label="库存状态" :formatter="stockStatusFormat" fixed="right"
                  min-width="120px" />
              <el-table-column fixed="right" label="操作" width="135px" v-if="selStock == null">
                  <template v-slot="scope">
                      <el-button size="small" plain type="primary" @click="editCurrentRowStock(scope.row)">编辑</el-button>
                      <!--<el-button size="small" plain type="warning" @click="outRowStock(scope.row)">出库</el-button>-->
                  </template>
              </el-table-column>
              <!-- <el-table-column prop="areaCode" label="库区代码" fixed="right" sortable min-width="120px" /> -->
          </el-table>
          <br />
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
              :small="false" :disabled="false" :background="false" :default-page-size="10" @size-change="search"
              @current-change="search" layout="total, sizes, prev, pager, next, jumper" :total="total" />
          <el-dialog v-model="dialogVisible" title="物料信息" width="40%" draggable :show-close="false">
              <el-form ref="stockFormRef" :model="stockFormEntity" :label-position="labelPosition" label-width="100px"
                  style="max-width: 100%" :rules="rules" status-icon>
                  <el-row :gutter="16">
                      <!-- <el-col :span="12" :offset="0">
                          <el-form-item label="物料号" prop="goodsId">
                              <el-input v-model="stockFormEntity.goodsId" readonly />
                          </el-form-item>
                      </el-col> -->
                      <el-col :span="12" :offset="0">
                        <el-form-item label="实际数量" prop="availableNum">
                            <el-input-number v-model.number="stockFormEntity.availableNum" clearable
                                controls-position="right" :min="0" />
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <!-- <el-row :gutter="16">
                      <el-col :span="12">
                          <el-form-item label="母托号" prop="vehicleId">
                              <el-input v-model="stockFormEntity.vehicleId" clearable readonly />
                          </el-form-item>
                      </el-col>
                      <el-col :span="12" :offset="0">
                        <el-form-item label="库存状态" prop="stockStatus">
                            <el-select-v2 v-model="stockFormEntity.stockStatus" placeholder="请选择库存状态"
                                :options="stockStatusOptions"></el-select-v2>
                        </el-form-item>
                    </el-col> -->
                  <!-- </el-row> -->
              </el-form>
              <template #footer>
                  <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="submitStockInfo(stockFormEntity)">
                          确定
                      </el-button>
                  </span>
              </template>
          </el-dialog>
          <!-- 多料查询弹窗 -->
          <el-dialog v-model="multiQueryDialogVisible" title="多料查询" width="40%" draggable :show-close="false">
            <div style="margin-bottom: 10px;">
              <el-input v-model="newMultiQueryEntry.goodsId" style="width: 256px; margin-right: 10px;" placeholder="物料号" />
              <el-button type="primary" @click="addMultiQueryEntry">添加物料号</el-button>
              <el-button type="warning" @click="deleteAllMoreSelect">重置数据</el-button>
            </div>
            <el-table :data="multiQueryEntries" stripe border class="table-class" max-height="300px">
              <el-table-column prop="goodsId" label="物料号" min-width="120px">
                <template v-slot="scope">
                  <el-input v-model="scope.row.goodsId" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="135px">
                <template v-slot="scope">
                  <el-button size="small" plain type="danger" @click="removeMultiQueryEntry(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="multiQueryDialogVisible = false">取消</el-button>
                <el-button type="success" @click="submitMultiQueryEntries">
                  查询
                </el-button>
              </span>
            </template>
          </el-dialog>
      </el-config-provider>
  </div>
</template>

<script setup>
import { getAllStocks, updateStockInfo, getAllStocksByGoodsId, getAllStocksByMultiple } from '@/api/stock.js'
import { downloadStockExcel } from '@/api/excel.js'
import { dateFormatter, locationFormatter, timeFormatter } from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { Search } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
//import { ElMessage } from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import apiOrderOut from '@/api/order.out'
// import FileSaver from 'file-saver';
// import * as XLSX from 'xlsx';
</script>
<script>
export default {
  name: 'stock',
  props: ['selStock'],
  emits: ['update:selStock'],
  data() {
      return {
          stockEntries: [],//存储多条库存数据
          multiQueryEntries: [],
          newMultiQueryEntry: {
            goodsId: ''
          }, // 存储多条查询数据
          pageInfo: {},
          displayStocks: [],
          currentPage: 1,
          pageSize: 10,
          vehicleNoQuery: '',
          total: 0,
          queryKey: '',
          loading: true,
          stockId: '',
          stockFormRef: ref(),
          stockFormEntity: reactive({}),
          rules: reactive({}),
          labelPosition: 'top',
          dialogVisible: false,
          multiQueryDialogVisible: false,
          goodsStatusOptions: [
              {
                  value: 0,
                  label: '合格'
              },
              {
                  value: 1,
                  label: '不合格'
              },
              {
                  value: 2,
                  label: '延期'
              },
              {
                  value: 3,
                  label: '过期'
              },
              {
                  value: 5,
                  label: '长时间未使用'
              }
          ],
          stockStatusOptions: [
              {
                  value: 0,
                  label: '库存正常'
              },
              {
                  value: 1,
                  label: '准备出库'
              },
              {
                  value: 2,
                  label: '正在出库'
              },
              {
                  value: 3,
                  label: '出库完成，环线运输中'
              },
              {
                  value: 4,
                  label: '站台拣货中'
              },
              {
                  value: 5,
                  label: '站台盘点中'
              },
              {
                  value: 6,
                  label: '正在回库'
              },
              {
                  value: 9,
                  label: '库存锁定'
              }
          ],
          dataType: 1,
          dataTypeOptions: [
              {
                  value: 1,
                  label: '按料箱分类'
              },
              {
                  value: 2,
                  label: '按零件分类'
              }
          ],
          goodsIdQuery: ''
      }
  },
  activated() {
      this.search();
  },
  mounted() {
      this.refresh()
  },
  methods: {
    goodsList() {
        this.multiQueryDialogVisible = true;
    },
      // 其他方法...
    submitMultiQueryEntries() {
        if (this.multiQueryEntries.length === 0) {
        ElMessage.error('未添加任何物料号');
        return;
        }
        // 假设有一个 API 可以接收多条物料号
        getAllStocksByMultiple(this.multiQueryEntries.map(entry => entry.goodsId)).then(res => {
        if (res.data.code === 0) {
            ElMessage({
            message: '查询成功',
            type: 'success'
            });
            this.displayStocks = res.data.rows;
            this.total = res.data.total;
            this.multiQueryDialogVisible = false;
        } else {
            ElMessage.error(res.data.message);
        }
        }).catch(err => {
        ElMessage({
            message: '查询失败: ' + err,
            type: 'error',
            showClose: true
        });
        });
    },
    deleteAllMoreSelect(){
        this.multiQueryEntries = [];
    },
        // 其他方法...
        addMultiQueryEntry() {
    if (this.newMultiQueryEntry.goodsId.trim() === '') {
        ElMessage.error('物料号不能为空');
        return;
    }

    // 按空格拆分物料号
    const goodsIds = this.newMultiQueryEntry.goodsId.trim().split(/\s+/);

    goodsIds.forEach(goodsId => {
        // 检查是否已经存在相同的 goodsId
        const isDuplicate = this.multiQueryEntries.some(entry => entry.goodsId === goodsId);
        if (isDuplicate) {
            ElMessage.error(`物料号 ${goodsId} 已存在`);
            return;
        }
        this.multiQueryEntries.push({ goodsId });
    });

    // 清空输入框
    this.newMultiQueryEntry.goodsId = '';
},
    removeMultiQueryEntry(index) {
        this.multiQueryEntries.splice(index, 1);
    },

      locationFormat: (row, column, cellValue, index) => {
          return locationFormatter(cellValue)
      },
      dateFormat: (row, column, cellValue, index) => {
          return dateFormatter(cellValue)
      },
      timeFormat: (row, column, cellValue, index) => {
          return timeFormatter(cellValue)
      },
      goodsStatusFormat: (row, column, cellValue, index) => {
          if (cellValue === 0) {
              return '合格'
          } else if (cellValue === 1) {
              return '不合格'
          } else if (cellValue === 2) {
              return '延期'
          } else if (cellValue === 3) {
              return '过期'
          } else if (cellValue === 5) {
              return '长时间未使用'
          }
      },
      stockStatusFormat: (row, column, cellValue, index) => {
          switch (cellValue) {
              case 0:
                  return '库存正常'
              case 1:
                  return '准备出库'
              case 2:
                  return '正在出库'
              case 3:
                  return '出库完成，环线运输中'
              case 4:
                  return '站台拣货中'
              case 5:
                  return '站台盘点中'
              case 6:
                  return '正在回库'
              case 7:
                  return '到达拣选站台'
              case 9:
                  return '库存锁定'
              default:
                  return '异常'
          }
      },
      rowStyle: ({ row, rowIndex }) => {
          if (row.goodsStatus == 3) {
              return { "color": "red" }
          }
          if (row.goodsStatus == 5) {
              return { "color": "yellow" }
          }
      },
      search() {
          this.loading = true
          this.pageInfo.pageNum = this.currentPage
          this.pageInfo.pageSize = this.pageSize
          if (this.dataType == 1) {
              const tableRequest = {
                  page: this.pageInfo,
                  param: this.queryKey.trim(),
                  param2: this.vehicleNoQuery.trim(),
              }
              console.log(tableRequest)
              getAllStocks(tableRequest).then(res => {
                  const tableResponse = res.data
                  if (tableResponse.code != 0) {
                      ElMessage.error(tableResponse.message)
                  }
                  this.displayStocks = tableResponse.rows
                  this.total = tableResponse.total
              }).catch(err => {
                  console.log(err)
                  ElMessage.error('查询库存错误')
              })
          } else if (this.dataType == 2) {
              const tableRequest = {
                  page: this.pageInfo,
                  param: this.goodsIdQuery.trim(),
              }
              getAllStocksByGoodsId(tableRequest).then(res => {
                  const tableResponse = res.data
                  if (tableResponse.code != 0) {
                      ElMessage.error(tableResponse.message)
                  }
                  this.displayStocks = tableResponse.rows
                  this.total = tableResponse.total
              }).catch(err => {
                  console.log(err)
                  ElMessage.error('查询库存错误')
              })
          }

          this.loading = false
      },
      reset() {
          this.queryKey = ''
          this.goodsIdQuery = ''
          this.vehicleNoQuery = ''
          this.search()
      },
      refresh() {
          this.search()
      },
      getCurrentRow(row) {
          this.stockId = row.stockId
          this.$emit('update:selStock', row)
      },
      exportExcel() {
          downloadStockExcel().then(res => {
              const link = document.createElement('a');//创建a标签
              try {
                  // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
                  let blob = res.data    //如果后台返回的直接是blob对象类型，直接获取数据
                  // let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
                  let _fileName = "库存报表" + dateFormatter(new Date) + ".xlsx"
                  link.style.display = 'none'//隐藏

                  // 兼容不同浏览器的URL对象
                  const url = window.URL || window.webkitURL || window.moxURL
                  link.href = url.createObjectURL(blob)
                  link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link)
                  url.revokeObjectURL(link.href)//移除url对象
              } catch (e) {
                  ElMessage({
                      message: '下载文件失败：: ' + e,
                      type: 'error',
                      showClose: true
                  })
              }
          }).catch(err => {
              ElMessage({
                  message: '导出失败：: ' + err,
                  type: 'error',
                  showClose: true
              })
          })
      },
      editCurrentRowStock(row) {
          this.stockFormEntity = row
          this.dialogVisible = true
      },

      outRowStock(row) {
          const stockId = row.stockId;
          ElMessageBox.confirm(`是否执行 ${stockId} 的出库?`, '提示')
        .then(() => {
          apiOrderOut.outRowStock(stockId).then(res => {
            const responseData = res.data;
            if (responseData.code === 0) {
              // 正确请求
              ElMessage({
                message: '执行成功',
                type: 'success',
              });
              this.queryGoodsOrderOut();
            } else {
              // 服务报错
              ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
                type: 'warning',
                confirmButtonText: '确定',
                showClose: false
              })
            }
          }).catch(err => {
            // 通讯报错
            ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
              type: 'warning',
              confirmButtonText: '确定'
            })
          })
        })
        .catch(() => {
        })


      },
      submitStockInfo(stockFormEntity) {
          console.log(stockFormEntity)
          updateStockInfo(stockFormEntity).then(res => {
              if (res.data.code == 0) {
                  this.dialogVisible = false
                  ElMessage({
                      message: '更新库存成功',
                      type: 'success'
                  })
                  this.search()
              } else {
                  ElMessage.error(res.data.message)
              }
          }).catch(err => {
              ElMessage({
                  message: '更新料箱信息失败: ' + err,
                  type: 'error',
                  showClose: true
              })
          })
      }
  },
}
</script>

<style scoped>
.el-pagination {
  padding-left: 5px;
}

.el-row .el-button {
  width: 72px;
  margin-left: 0px;
  margin-right: 5px;
}

.table-class {
  width: 100%;
}

.el-row .el-form-item .el-select-v2 {
  width: 100% !important;
}

.el-row .el-form-item .el-input-number {
  width: 100% !important;
}
</style>