client-wms-v5/src/stock/CurrentStock.vue

<template>
  <div class="container-fluid">
    <Navbar
      title="库存查询"
      :is-go-back="false"
    />
    
    <div
      class="flex-container"
      style="margin-top: 10px;"
    >
      <div class="flex-header">
        <div>
          <div
            class="form-inline"
            role="form"
          >
            <div class="form-group">
              SKU：
              <input
                v-model="queryNo"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="请输入要查询物料的SKU"
                aria-describedby="basic-addon"
                style="width:250px;"
                @keyup.enter="queryInventory"
              />
              物料名称：
              <input
                v-model="queryName"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="请输入要查询物料的名称"
                aria-describedby="basic-addon"
                style="width:250px;"
                @keyup.enter="queryInventory"
              />
              规格型号：
              <input
                v-model="queryType"
                autocomplete="off"
                type="text"
                class="form-control"
                placeholder="请输入要查询物料的规格型号"
                aria-describedby="basic-addon"
                style="width:250px;"
                @keyup.enter="queryInventory"
              />
              物料类型：
              <select
                v-model="selectType"
                class="form-control"
                @change="changeSelectType"
              >
                <option value="0">全部</option>
                <option value="001">成套工具箱</option>
                <option value="002">散件</option>
              </select>
            </div>
            <div class="form-group">
              <button
                class="btn btn-default"
                @click="queryInventory"
              >
                查询
              </button>
            </div>
            <div class="form-group">
              <button
                class="btn btn-success"
                @click="exportExcel"
              >
                导出
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="flex-content"
        style="margin-top: 10px;"
      >
        <table class="fixed-table table-striped table-bordered">
          <thead>
            <tr>
              <th style="width: 50px;">
                序号
              </th>
              <th style="width: 70px;">
                图片
              </th>
              <th style="width: 150px;">
                物料名称
              </th>
              <th style="width: 100px;">
                SKU
              </th>
              <th style="width: 150px;">
                规格型号
              </th>
              <th style="width: 80px;">
                入库总数量
              </th>
              <th style="width: 80px;">
                库存数量
              </th>
              <th style="width: 80px;">
                出库总数量
              </th>
              <th style="width: 80px;">
                RFID管理
              </th>
              <th style="width: 80px;">
                物料类型
              </th>
              <th style="width: 100px;">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="table1">
            <tr v-for="(inventoryInstance, index) in inventoryInstanceDatas" :key="inventoryInstance.id">
              <td>
                {{ index + 1 + (pagination.current_page-1) * pagination.per_page }}
              </td>
              <td>
                <img
                  :src="Common.getThumbnailImageSrc(className, inventoryInstance.imageName)"
                  class="image"
                  @click="$refs.imagePreview.preview(className, inventoryInstance.imageName)"
                />
              </td>
              <td>
                {{ inventoryInstance.inventoryName }}
              </td>
              <td>
                {{ inventoryInstance.inventoryNo }}
              </td>
              <td>
                {{ inventoryInstance.inventoryType }}
              </td>
              <td>
                {{ inventoryInstance.totalQuantity }}
              </td>
              <td>
                {{ inventoryInstance.stockQuantity }}
              </td>
              <td>
                {{ inventoryInstance.stockOutQuantity }}
              </td>
              <td>
                {{ inventoryInstance.rfidManagement == true ? '是':'否' }}
              </td>
              <td>
                {{ inventoryInstance.tagNo == '001' ? '成套工具箱':'散件' }}
              </td>
              <td>
                <button
                  type="button"
                  class="btn btn-link"
                  style="width: 100%"
                  @click="findByInventoryId(inventoryInstance)"
                >
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex-footer">
        <div>
          <div class="form-group">
            <div class="pull-left">
              共查询到<b>{{ pagination.total }}</b>条数据
            </div>
            <div class="pull-right">
              <VueBootstrapPagination
                v-if="pagination.last_page > 0"
                :pagination="pagination"
                :callback="queryInventory"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <Modal
      v-model:show="modal"
      small="true"
      :show-canel-button="true"
      :show-ok-button="false"
    >
      <template #header>
        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>库存详情</p>
      </template>
      <table class="fixed-table table-striped table-bordered">
        <thead>
          <tr>
            <th style="width: 100px;">
              序号
            </th>
            <th style="width: 150px;">
              物料编码
            </th>
            <th style="width: 150px;">
              物料名称
            </th>
            <th style="width: 150px;">
              状态
            </th>
            <th style="width: 100px;">
              货位
            </th>
            <th style="width: 100px;">
              项目事件
            </th>
            <th style="width: 100px;">
              齐套情况
            </th>
          </tr>
        </thead>
        <tbody class="table1">
          <tr v-for="(data, index) in inventoryInstanceCurrentStocks" :key="data.id">
            <td>
              {{ index+1 }}
            </td>
            <td>
              {{ data.no }}
            </td>
            <td>
              {{ data.name }}
            </td>
            <td>
              {{ (data.positionId == undefined || data.positionId == null)? '已出库':'在库' }}
            </td>
            <td>
              {{ data.positionBarCode }}
            </td>
            <td>
              {{ data.projectItem }}
            </td>
            <td>
              {{ data.finished == false ? '未补齐':'已补齐' }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="modal-footer">
        <slot name="footer" />
      </div>
    </Modal>

    <Modal
      v-model:show="modal2"
      small="true"
      :show-canel-button="true"
      :show-ok-button="false"
    >
      <template #header>
        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>库存详情</p>
      </template>
      <table class="fixed-table table-striped table-bordered">
        <thead>
          <tr>
            <th style="width: 100px;">
              序号
            </th>
            <th style="width: 150px;">
              所在成套工具箱
            </th>
            <th style="width: 150px;">
              数量
            </th>
            <th style="width: 150px;">
              货位
            </th>
            <th style="width: 150px;">
              项目事件
            </th>
          </tr>
        </thead>
        <tbody class="table1">
          <tr v-for="(data, index) in inventoryInstanceCurrentStocks2" :key="data.id">
            <td>
              {{ index+1 }}
            </td>
            <td>
              {{ data.no }}
            </td>
            <td>
              {{ data.quantity }}
            </td>
            <td>
              {{ data.positionBarCode }}
            </td>
            <td>
              {{ data.projectItem }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="modal-footer">
        <slot name="footer" />
      </div>
    </Modal>

    <Modal
      v-model:show="modal3"
      :full="true"
      :show-canel-button="true"
      :show-ok-button="false"
    >
      <template #header>
        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>出入库流水</p>
      </template>

      <div class="modal-body">
        <InAndOutFlow :display-data="displayData" />
      </div>

      <div class="modal-footer">
        <slot name="footer" />
      </div>
    </Modal>
    
    <Loading v-if="loading" />
    <ImagePreview ref="imagePreview" />
  </div>
</template>

<script>
import Common from '../common/Common.js';

import InventoryInstanceResource from '../api/common/InventoryInstanceResource.js';
import InventoryInstanceBindResource from '../api/wms/InventoryInstanceBindResource.js';
import CurrentStockResource from '../api/wms/CurrentStockResource.js';



import InAndOutFlow from './InAndOutFlow.vue';



export default {
  components: {
    
    InAndOutFlow,
    
    
    
    
    
  },
  data: function () {
    this.Common = Common;
    return {
      displayData: {},
      queryNo: '',
      queryName: '',
      queryType: '',
      inventoryInstanceDatas: [],
      inventoryInstanceCurrentStocks: [],
      inventoryInstanceCurrentStocks2: [],
      inventoryInstanceCurrentStocks3: [],
      recordIds: [],
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      isUpdatePage: true,
      className: 'com.leanwo.prodog.model.common.Inventory',
      allRepeatPack: [], //重复打印全部的id
      printType: 0,//类型 0:采购入库打印/1:扫描入库打印
      selectType: '0',
      loading: false,
      modal: false,
      modal2: false,
      modal3: false,
    };
  },

  mounted: function () {
    var _self = this;
    _self.queryInventory();
    $('.fixed-table').tableFixer({
      'left': 3,
      'head': true,
    });

    $('.fixed-table').colResizable({
      resizeMode: 'overflow',
      partialRefresh: true,
    });
  },

  methods: {
    /**
         * 导出excel
         */
    exportExcel: function () {
      var _self = this;
      var loginInfo = localStorage.getItem('#LoginInfo');
      var loginData = JSON.parse(loginInfo);
      var whereClause = ' totalInventory.clientId=' + loginData.loginClientId;
      if (_self.queryNo != null && _self.queryNo.length > 0) {
        whereClause = whereClause + ' AND totalInventory.no like ' + '\'%' + _self.queryNo + '%\'';
        if (_self.queryName != null && _self.queryName.length > 0) {
          whereClause = whereClause + ' OR totalInventory.name like ' + '\'%' + _self.queryName + '%\'';
        }
        if (_self.queryType != null && _self.queryType.length > 0) {
          whereClause = whereClause + ' OR totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
        }
      } else if (_self.queryName != null && _self.queryName.length > 0) {
        whereClause = whereClause + ' AND totalInventory.name like ' + '\'%' + _self.queryName + '%\'';
        if (_self.queryType != null && _self.queryType.length > 0) {
          whereClause = whereClause + ' OR totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
        }
      } else if (_self.queryType != null && _self.queryType.length > 0) {
        whereClause = whereClause + ' AND totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
      }
      whereClause = encodeURIComponent(whereClause);
      var url = '/ureport/preview?_u=dicfile-wms:stock.ureport.xml&whereClause=' + whereClause;
      window.open(url);
    },
    /**
         * 根据存货档案id进行查询
         */
    findByInventoryId: function (data) {
      var _self = this;
      if (data.totalQuantity == undefined || data.totalQuantity == null) {
        Notify.error('提示', '物料暂无入库记录', false);
        return;
      }
      var inventoryId = data.inventoryId;
      var tagNo = data.tagNo;
      var rfidManagement = data.rfidManagement;
      _self.displayData = data;
      if (rfidManagement == true) {
        if (tagNo == undefined || tagNo == null || tagNo == '002') {
          InventoryInstanceResource.findCurrentStockByInventoryId(inventoryId).then(successData => {
            if(successData.errorCode == 0) {
              if (successData.datas && successData.datas.length > 0) {
                _self.inventoryInstanceCurrentStocks2 = successData.datas;
                _self.modal2 = true;
              }
            } else {
              Notify.error('错误', successData.errorMessage, false);
              return;
            }
          }, errorData => {
            Common.processException(errorData);
          });
        } else {
          InventoryInstanceBindResource.findByInventoryId(inventoryId).then(successData => {
            if(successData.errorCode == 0) {
              if (successData.datas) {
                _self.inventoryInstanceCurrentStocks = successData.datas;
                _self.modal = true;
              }
            }
          }, errorData => {
            Common.processException(errorData);
          });
        }
      } else {
        _self.modal3 = true;
      }
    },
    changeSelectType: function () {
      var _self = this;
      _self.pagination.current_page = 1;
      _self.queryInventory();
    },
    /**
         * 根据物料名称或者编号查询数据
         */
    queryInventory: function () {
      var _self = this;
      if (_self.inventoryInstanceDatas == undefined) {
        _self.inventoryInstanceDatas = [];
      }
      var queryNo = $.trim(_self.queryNo);
      var queryName = $.trim(_self.queryName);
      var queryType = $.trim(_self.queryType);
      if ((queryNo.length > 0 || queryName.length > 0 || queryType.length > 0) && !_self.isUpdatePage) {
        _self.pagination.current_page = 1;
        _self.isUpdatePage = true;
      } else if (queryNo.length == 0 && queryName.length == 0 && queryType.length == 0) {
        _self.isUpdatePage = false;
      }
      _self.inventoryInstanceDatas.splice(0, _self.inventoryInstanceDatas.length);
      var inventoryQueryCondition = {
        'no': queryNo,
        'name': queryName,
        'type': queryType,
        'start': (_self.pagination.current_page - 1) * _self.pagination.per_page,
        'length': _self.pagination.per_page,
      };
      _self.loading=true;
      CurrentStockResource.findSiemensCurrentStock(inventoryQueryCondition, _self.selectType).then(successData => {
        _self.loading=false;
        if(successData.errorCode == 0) {
          if (successData.datas) {
            _self.inventoryInstanceDatas = successData.datas;
            _self.pagination.total = successData.total;
            _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
          }
          _self.fixedTableHeader();
        }
      }, errorData => {
        _self.loading=false;
        Common.processException(errorData);
      });
    },

    /**
         * 冻结表头
         */
    fixedTableHeader: function () {
      let _self = this;

      _self.$nextTick(function () {
        $('.fixed-table').tableFixer({
          'left': 3,
          'head': true,
        });
      });
    },
  },
};
</script>

<style scoped>
.flex-container {
    display: flex;
    /* 垂直*/
    flex-direction: column;
    width: 100%;
    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
    height: calc(100vh - 140px);
}

.flex-header {
    /*放大缩小比例为0 */
    flex: 0 0 35px;
}

.flex-footer {
    height: 45px;
    /*放大缩小比例为0 */
    flex: 0 0 45px;
}

.flex-content {
    flex: 1;
    overflow: scroll;
    width: 100%;
}

.fixed-table {
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-all;
}
</style>

<style scoped>
.fixed-table {
    table-layout: fixed;
    width: 800px !important;
    min-width: 800px !important;
}

table.fixed-table tr {
    height: 40px;
}

table.fixed-table th,
table.fixed-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.image {
    width: 40px;
    height: 40px;
}

.modal-img-box {
    width: 100%;
    text-align: center;
    overflow: auto;
}

.m-img {
    width: 100%;
}
</style>