client-wms-v5/src/customer/InventorySearchDetail.vue

<template>
  <div class="container-fluid">
    <div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header" style="margin-top: 10px; margin-bottom: 0px;">
            <AuthImage
              :auth-src="Common.getThumbnailImageSrc(inventoryClassName, showInventory.imageName)" class="image img-thumbnail"
              style="width: 78px; height: 78px;" @click="$refs.imagePreview.preview(inventoryClassName, showInventory.imageName)"
            />

            物料详细信息
          </h1>
        </div>
      </div>
      <div class="row" style="margin-top: 15px;">
        <div class="col-md-12 asset-detail">
          <div class="col-md-3">
            <div>
              <strong>存货编号:{{ showInventory.no }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>存货名称:{{ showInventory.name }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>所属公司:{{ showInventory.client }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>规格型号:{{ showInventory.type }}</strong>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 div-asset-info">
          <ul id="myTab" class="nav nav-tabs">
            <li class="active">
              <a href="#asset-content-1" data-toggle="tab">出入库流水</a>
            </li>
            <li>
              <a href="#asset-content-2" data-toggle="tab">库存情况</a>
            </li>
            <li>
              <a href="#asset-content-3" data-toggle="tab">库位信息</a>
            </li>
          </ul>
          <div class="tab-content div-asset-info">
            <div id="asset-content-1" class="tab-pane fade in active">
              <div class="form form-inline time-box">
                <InAndOutFlow ref="inAndOutFlow" />
                <!-- 								<div class="form-group">
									<label>开始时间</label>
									<DateTime v-model="startDate" class="form-control" name="datetime" />
								</div>
								<div class="form-group">
									<label>结束时间</label>
									<DateTime v-model="endDate" class="form-control" name="datetime />
								</div>
								<button type="button" class="btn btn-default" @click="getHistoryEvent2">确定</button> -->
              </div>
              <div class="row div-history-event">
                <div v-for="item in historyEvents2" :key="item.id" class="media col-md-12">
                  <div class="media-left">
                    <a href="javascript:void(0);">
                      <AuthImage :auth-src="getHistoryIconSrc(item.title)" class="media-object media-img img-thumbnail" />
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">{{ item.title }}</h4>
                    <p class="event-time">时间: {{ item.eventDate }}</p>
                    <p>{{ item.content }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div id="asset-content-2" class="tab-pane fade in">
              <table class="table table-striped table-bordered">
                <thead>
                  <tr height="40px">
                    <th>仓库名称</th>
                    <th>入库单号</th>
                    <th>存货名称</th>
                    <th>存货编码</th>
                    <th>批次</th>
                    <th>结存数量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="stockInfo in stockInfos" :key="stockInfo.id">
                    <td>{{ stockInfo.warehouseName }}</td>
                    <td>{{ stockInfo.documentNo }}</td>
                    <td>{{ stockInfo.inventoryName }}</td>
                    <td>{{ stockInfo.inventoryNo }}</td>
                    <td>{{ stockInfo.batchNo }}</td>
                    <td>{{ stockInfo.quantity }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="asset-content-3" class="tab-pane fade in">
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr height="40px">
                      <th>仓库名称</th>
                      <th>入库单号</th>
                      <th>存货名称</th>
                      <th>存货编号</th>
                      <th>库位名称</th>
                      <th>库位编号</th>
                      <th>数量</th>
                      <th>处理人</th>
                      <th>处理时间</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="positionInfo in positionInfos" :key="positionInfo.id">
                      <td>{{ positionInfo.warehouseName }}</td>
                      <td>{{ positionInfo.documentNo }}</td>
                      <td>{{ positionInfo.inventoryName }}</td>
                      <td>{{ positionInfo.inventoryNo }}</td>
                      <td>{{ positionInfo.positionName }}</td>
                      <td>{{ positionInfo.positionNo }}</td>
                      <td>{{ positionInfo.quantity }}</td>
                      <td>{{ positionInfo.handlerUser }}</td>
                      <td>{{ positionInfo.handlerDate }}</td>
                    </tr>
                  </tbody>
                </table>
                <VueBootstrapPagination :pagination="pagination2" :callback="callbackFun" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Modal v-model:show="modal" large="true" @cancel="modal = false">
      <template #header>
        历史图片
      </template>
      <div class="row">
        <div class="center-block" style="width:432px;">
          <img :src="imageUrl" class="m-image" />
        </div>
      </div>
    </Modal>
    <Loading v-if="loading" />
    <ImagePreview ref="imagePreview" />
  </div>
</template>

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






import InAndOutFlow from '../stock/InAndOutFlow.vue';

export default {

  components: {
    
    
    
    
    
    
    InAndOutFlow,
    
  },
  data: function() {
    this.Common = Common;
    return {
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 1, // required
      },
      //历史图片分页参数
      pagination2: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 1, // required
        from: 1,
        to: 1, // required
      },
      condition: '',
      showPager: false, // 是否显示分页
      assetInstances: [],
      inventorys: [],
      assetClassName: 'com.leanwo.prodog.asset.model.AssetInstance',
      inventoryClassName: 'com.leanwo.prodog.model.common.Inventory',
      showAssetInstance: '',
      showInventory: '',
      activeContent: 1,
      imageInfos: [],
      imageUrl: '',
      historyEvents: [],
      assetHistoryEvents: [],
      historyEvents2: [],
      stockInfos: [],
      positionInfos: [],
      results: [],
      startDate: '',
      endDate: '',
      firstSearch: true,
      loading: false,
      modal: false,
    };
  },

  computed: {},

  watch: {},

  mounted: function() {
    var _self = this;
    $('#right-container').css('background-color', '#ffffff');
    var inventoryresultId = _self.$route.query.inventoryresultId;
			
    var dataId = {};
    dataId.inventoryId = inventoryresultId;
    // console.log(dataId);
    _self.$refs.inAndOutFlow.findByInventoryId(dataId);
    _self.$refs.inAndOutFlow.fixedTableHeader();
			
    _self.findInventoryById(inventoryresultId);
    if (_self.firstSearch) {
      _self.condition = localStorage.getItem('##searchStr##');
      _self.firstSearch = false;
    }
  },

  beforeUnmount: function() {
    $('#right-container').css('background-color', '#f7f7f7');
  },

  methods: {
    findInventoryById: function(inventoryresultId) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('InventoryResource/findInventoryById'),
        type: 'post',
        data: inventoryresultId,
        contentType: 'application/json',
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          _self.showItem2(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },


    /**
			 * 显示存货详细信息
			 * @param {Object} inventoryresult
			 */
    showItem2: function(inventoryresult) {
      var _self = this;
      _self.showInventory = inventoryresult;
      // 查询生命周期数据
      _self.getHistoryEvent2();
      _self.getStockInfo();
    },

    callbackFun: function() {
      if (this.showAssetInstance == undefined || this.showAssetInstance == '') {
        return;
      }
      this.showItem(this.showAssetInstance);
    },
    showImage: function(imageName) {
      this.imageUrl = imageName;
      this.modal = true;
    },

    /**
			 * 查询存货的出入库记录
			 */
    getHistoryEvent2: function() {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('StockOutResource/getHistoryEventByInventory'),
        type: 'post',
        dataType: 'json',
        data: {
          inventoryId: _self.showInventory.id,
          startDate: _self.startDate,
          endDate: _self.endDate,
        },
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          console.log(data);
          _self.historyEvents2 = data;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
			 * 根据inventoryId获取库存信息
			 */
    getStockInfo: function() {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('StockOutResource/getStockInfoByInventory'),
        type: 'GET',
        dataType: 'json',
        data: {
          inventoryId: _self.showInventory.id,
        },
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          console.log(data);
          _self.stockInfos = data;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    // 获取图标
    getHistoryIconSrc: function(title) {
      var iconSrc = 'static/image/';
      switch (title) {
      case '资产盘点':
        iconSrc += 'inventory.png';
        break;
      case '资产归还':
        iconSrc += 'stockin.png';
        break;
      case '资产领用':
        iconSrc += 'stockout.png';
        break;
      case '资产报失':
        iconSrc += 'lost.png';
        break;
      case '资产报失找回':
        iconSrc += 'lostRetrieve.png';
        break;
      case '资产保养':
        iconSrc += 'maintain.png';
        break;
      case '资产维修':
        iconSrc += 'repair.png';
        break;
      case '资产报废':
        iconSrc += 'scrap.png';
        break;
      case '材料出库':
        iconSrc += 'stockout.png';
        break;
      case '材料入库':
        iconSrc += 'stockin.png';
        break;
      }
      return iconSrc;
    },
  },
};
</script>
<style scoped>
	.table-footer-left {
		float: left;
		margin: 0px;
	}

	.image {
		width: 100%;
	}

	.m-img {
		max-width: 100%;
	}

	.box {
		margin-bottom: 14px;
	}

	.box-title {
		margin-bottom: 6px;
	}

	.a-title {
		text-decoration: underline;
		font-size: 1.2em;
		color: #5b3bcd;
	}

	.p-tooltip {
		color: #999;
		font-size: 12px;
		line-height: 42px;
		margin: 0px;
	}

	.asset-detail div {
		word-wrap: break-word;
		padding: 0px;
	}

	.div-asset-info {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.m-image {
		height: 648px;
		width: 432px;
	}

	.modal-img-box {
		text-align: center;
	}

	.div-history-event ul {
		list-style-type: circle;
	}

	.div-history-event li {
		margin-bottom: 10px;
		font-size: 18px;
		border-bottom: 1px solid #dcd6d6;
	}

	.div-history-event p {
		margin: 3px 0px;
		font-size: 14px;
	}

	.event-title {
		font-weight: bold;
	}

	.event-time {
		color: #aaa;
		font-size: 0.9em;
	}

	.no-padding-left {
		padding-left: 0px;
	}

	.media-img {
		width: 45px;
		height: 45px;
	}

	.img-thumbnail {
		cursor: pointer;
	}

	.time-box {
		margin-bottom: 15px;
	}
</style>