From feb3b362058f735d142c475476eebfa2d3b057c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Fri, 25 Aug 2023 17:16:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=93=E5=AD=98=E6=B5=81=E6=B0=B4=E5=B8=90?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86=E6=A8=A1=E6=8B=9F=E6=8A=A5=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=87=92=E5=8A=A0=E8=BD=BD+=E6=A0=91?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/PC/package-lock.json                       |  26 +-
 fe/PC/package.json                            |   2 +-
 fe/PC/src/api/wms-api.js                      |   7 +-
 .../InventoryBookDetail_innerPage copy 3.vue  | 609 ++++++++++++++++++
 .../InventoryBookDetail_innerPage copy.vue    | 597 +++++++++++++++++
 .../InventoryBookDetail_innerPage.vue         | 311 +++------
 fe/PC/src/views/ceshi/ceshi.vue               |  78 +++
 7 files changed, 1382 insertions(+), 248 deletions(-)
 create mode 100644 fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy 3.vue
 create mode 100644 fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy.vue
 create mode 100644 fe/PC/src/views/ceshi/ceshi.vue

diff --git a/fe/PC/package-lock.json b/fe/PC/package-lock.json
index eaa1212a3..1d641ffcb 100644
--- a/fe/PC/package-lock.json
+++ b/fe/PC/package-lock.json
@@ -17,7 +17,7 @@
         "driver.js": "0.9.5",
         "dropzone": "5.5.1",
         "echarts": "4.2.1",
-        "element-ui": "^2.15.13",
+        "element-ui": "^2.15.14",
         "file-saver": "2.0.1",
         "fuse.js": "3.4.4",
         "js-cookie": "2.2.0",
@@ -8581,9 +8581,9 @@
       }
     },
     "node_modules/element-ui": {
-      "version": "2.15.13",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.13.tgz",
-      "integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
+      "version": "2.15.14",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
       "dependencies": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -13548,9 +13548,9 @@
       }
     },
     "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+      "version": "3.7.0",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
     "node_modules/js-base64": {
       "version": "2.6.4",
@@ -30467,9 +30467,9 @@
       }
     },
     "element-ui": {
-      "version": "2.15.13",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.13.tgz",
-      "integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
+      "version": "2.15.14",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -34308,9 +34308,9 @@
       }
     },
     "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+      "version": "3.7.0",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
     "js-base64": {
       "version": "2.6.4",
diff --git a/fe/PC/package.json b/fe/PC/package.json
index 518f34168..41d76de6e 100644
--- a/fe/PC/package.json
+++ b/fe/PC/package.json
@@ -23,7 +23,7 @@
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
-    "element-ui": "^2.15.13",
+    "element-ui": "^2.15.14",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
diff --git a/fe/PC/src/api/wms-api.js b/fe/PC/src/api/wms-api.js
index abe595ca1..05e69d6d9 100644
--- a/fe/PC/src/api/wms-api.js
+++ b/fe/PC/src/api/wms-api.js
@@ -584,13 +584,12 @@ export function getListPageSafety(data, url) {
   })
 }
 
-// 库存流水帐明细 报表页面
-export function getInventoryTransactionSerials(data,params) {
+// 库存流水帐明细 报表页面 post的params从url中传递：目的：影响返回速度
+export function getInventoryTransactionSerials(url,data) {
   return request({
-    url: baseURL + 'wms/inventory/inventory-transaction/item-serial-list',
+    url: baseURL + url,
     method: 'post',
     data:data,
-    params:params
   })
 }
 
diff --git a/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy 3.vue b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy 3.vue
new file mode 100644
index 000000000..30cf48ff4
--- /dev/null
+++ b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy 3.vue	
@@ -0,0 +1,609 @@
+<template>
+  <div class="InventoryBookDetail_innerPage" v-loading="loading">
+    <!-- 全部展示优化一半 -->
+    <!-- 搜索 -->
+    <el-form ref="searchForm" :inline="true" :rules="formRule" :model="searchForm" size="small" class="searchHeader">
+      <el-form-item label="ERP储位" prop="erpLocatioCode">
+        <el-input v-model="searchForm.erpLocatioCode" placeholder="请输入ERP储位"></el-input>
+      </el-form-item>
+      <el-form-item label="零件" prop="itemCode">
+        <el-input v-model="searchForm.itemCode" placeholder="请输入零件"></el-input>
+      </el-form-item>
+      <el-form-item label="账期" prop="interfaceCalendar">
+        <el-select 
+          :loading="calendarLoading"
+          @change="calendarChange" 
+          v-model="searchForm.interfaceCalendar" 
+          placeholder="请选择账期"
+        >
+          <el-option
+            v-for="item in calendarList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开始时间" prop="beginDate">
+        <el-date-picker
+          @change="timeChange" 
+          value-format="yyyy-MM-dd"
+          v-model="searchForm.beginDate"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endDate">
+        <el-date-picker
+          @change="timeChange" 
+          value-format="yyyy-MM-dd"
+          v-model="searchForm.endDate"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="searchHandle">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- table -->
+    <div class="tableContent" v-if="tableData">
+      <ul class="tableHeader">
+        <li>{{tableHeader.companyName}}</li>
+        <li><span class="tableName">库存流水帐 (料品)</span></li>
+        <li class="timeLi">
+          <div class="item">交易年月: {{ getYearMonth(tableHeader.beginDate) }} - {{ getYearMonth(tableHeader.endDate) }}</div>
+          <div class="item">制表日期：{{ getNow() }}</div>
+        </li>
+      </ul>
+        <!-- :span-method="verticalMergeCell" -->
+      <el-table
+        height="calc(100vh - 180px)"
+        :data="tableData"
+        class="tableEl"
+        :row-class-name="tableRowClass"
+      >
+        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
+        <!-- :show-overflow-tooltip="true" -->
+        <el-table-column
+          v-for="(item,key) in tableTh"
+          :prop="item.prop"
+          :label="item.label"
+          :align="item.prop.toLowerCase().indexOf('qty') >= 0 ? 'right' : 'left'"
+          :width="item.width"
+        >
+          <template slot-scope="scope">
+            <div v-if="scope.row.total_erp || scope.row.total_erp2 || scope.row.total_item">
+              <div v-if="scope.row.total_erp2">
+                <span v-if="totalProps[0] == item.prop" style="color: blue;font-weight:bold">库位小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp2[item.prop]}}</span>
+              </div>
+              <div v-if="scope.row.total_erp">
+                <span v-if="totalProps[0] == item.prop" style="color: #ff6000;font-weight:bold">储位小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp[item.prop]}}</span>
+              </div>
+              <div v-if="scope.row.total_item">
+                <span v-if="totalProps[0] == item.prop" style="color: #24b924;font-weight:bold">物料小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_item[item.prop]}}</span>
+              </div>
+            </div>
+            <div v-else>
+              <div v-if="item.prop == 'itemCode'">
+                <div>物料代码:<br/>【{{ scope.row.level1[item.prop] }}】</div>
+                <br/>
+                <div>物料名称:<br/>【{{ scope.row.level1.itemName }}】</div>
+                <br/>
+                <div>物料描述1:<br/>【{{ scope.row.level1.itemDesc1 }}】</div>
+                <br/>
+                <div v-if="scope.row.level1.configuration">配置码:<br/>【{{ scope.row.level1.configuration }}】</div>
+              </div>
+              <div v-else-if="item.prop == 'erpLocatioCode'">{{ scope.row.level2[item.prop] }}</div>
+              <div v-else>
+                <div v-if="scope.row.level4">
+                  <div v-if="item.prop == 'sumInQty'">{{ scope.row.level4.inQty }}</div>
+                  <div v-else-if="item.prop == 'sumOutQty'">{{ scope.row.level4.outQty }}</div>
+                  <div v-else-if="item.prop == 'createDateTime'">{{ formatTime(scope.row.level4.createDateTime) }}</div>
+                  <div v-else-if="item.prop == 'locationCode'">{{ scope.row.level4.locatioCode }}</div>
+                  <div v-else-if="item.prop == 'interFaceName'">{{getInterFaceName(scope.row.level4)}}</div>
+                  <div v-else-if="item.prop == 'enumTransType' || item.prop == 'enumTransSubType'">{{ scope.row.level4[item.prop] | trigger(item.option, "label") }}</div>
+                  <div v-else>{{ scope.row.level4[item.prop] }}</div>
+                </div>
+                <div v-else>{{ scope.row.level3[item.prop] }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getInventoryTransactionSerials,getInterfaceCalendar } from '@/api/wms-api'
+import {  formatTimeStampToNorm,formatTimeStrToStr } from '@/utils/formatTime'
+export default {
+  name:"InventoryBookDetail_innerPage",
+  data(){
+    return{
+      loading:false,//页面加载
+      calendarLoading:false,//账期下拉加载
+      tableData:null,//table数据
+      calendarList:[],//账期下拉列表
+      // 查询字段
+      searchForm:{
+        interfaceCalendar:null,
+        erpLocatioCode:null,
+        itemCode:null,//VW316C1A028A,UTT06PP5483
+        beginDate: '',//2021-10-01
+        endDate: '',//2023-11-28T23:59:59
+      },
+      // 查询必填项
+      formRule: {
+        beginDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }],
+        endDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }],
+        // itemCode: [{ required: true, trigger: "blur", message: "不可为空" }],
+      },
+      // table账单表头
+      tableHeader:{
+        beginDate: '',
+        endDate: '',
+        companyName:localStorage.getItem('companyName')
+      },
+      // table标头
+      tableTh:[
+        {label:'物料信息',prop:'itemCode',width:180},
+        {label:'ERP储位',prop:'erpLocatioCode',width:80},
+        {label:'库位代码',prop:'locationCode',width:90},
+        {label:'单号',prop:'number',width:170},
+        {label:'创建时间',prop:'createDateTime',width:160},
+        {label:'业务编号',prop:'docNumber',width:140},
+        {label:'业务主类型',prop:'enumTransType',type:'filter',option:'TransTypeBase'},
+        {label:'业务子类型',prop:'enumTransSubType',type:'filter',option:'transSubType'},
+        {label:'对应接口',prop:'interFaceName',width:220},
+        {label:'期初库存',prop:'firstQty'},
+        {label:'入库',prop:'sumInQty'},
+        {label:'出库',prop:'sumOutQty'},
+        {label:'结存',prop:'nowQty'},
+        {label:'期末库存',prop:'lastQty'},
+      ],
+      totalProps:['firstQty','lastQty','nowQty','sumInQty','sumOutQty'],// 小结显示的字段
+      indexArray_item: [], //itemCode 存储所有合并的行号
+      indexArray_erp: [], //erpLocatioCode 存储所有合并的行号
+      indexArray_erp2: [], //locationCode 存储所有合并的行号
+    }
+  },
+  mounted () {
+    this.getInterfaceCalendarList()
+  },
+  methods:{
+    // 格式化时间
+    formatTime(data){
+      // return data.slice(0,scope.row.level4.createDateTime.indexOf('T')
+      return formatTimeStrToStr(data)
+    },
+    // 获取账期下拉
+    getInterfaceCalendarList(){
+      this.calendarLoading = true
+      let _data = {
+          condition: {
+            filters: []
+          },
+          Sorting: "code DESC",
+          SkipCount: 0,
+          MaxResultCount: 1000
+      }
+      getInterfaceCalendar(_data).then(res => {
+        this.calendarList=res.items
+        this.calendarLoading = false
+      }).catch(err => {
+        this.calendarLoading = false
+      })
+    },
+    // 账期更改
+    calendarChange(id){
+      let _item = this.calendarList.filter(item=>{
+        return item.id == id
+      })[0]
+      this.searchForm.beginDate = _item.beginTime
+      this.searchForm.endDate = _item.endTime
+    },
+    // 时间更改
+    timeChange(data){
+      if(data){
+        this.searchForm.interfaceCalendar = ""
+      }
+    },
+    // 查询事件
+    searchHandle(){
+      this.$refs.searchForm.validate((valid) => {
+        if (valid) {
+          this.getTableData()
+        } else {
+          return false;
+        }
+      });
+    },
+    // 年月转义
+    getYearMonth(date){
+      return date.replaceAll('-',"").slice(0,8)
+    },
+    // 获取当前时间
+    getNow(){
+      return formatTimeStampToNorm(new Date(),'date')
+    },
+    // 表格数据转义
+    initTableData(res){
+      let _list = []
+      res.forEach(item1 => {
+        // item1.cellLength = 0
+        item1.reportErpLocationSerialDtos.forEach((item2,index2) => {
+          item2.reportLocationSerialDtos.forEach((item3,index3)=>{
+            // 如果有第四层
+            if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){
+              item3.reportTransactionSerialDtos.forEach((item4,index4)=>{
+                let _item = {
+                  level1:item1,
+                  level2:item2,
+                  level3:item3,
+                  level4:item4,
+                }
+                _list.push(_item)
+                // item1.cellLength ++
+                // 如果有第四层添加库位小计
+                if(index4 == item3.reportTransactionSerialDtos.length - 1){
+                  _list.push({
+                    level1:item1,
+                    level2:item2,
+                    level3:item3,
+                    level4:item4,
+                    total_erp2:item3
+                  })
+                  // item1.cellLength ++
+                }
+              })
+            }else{
+              let _item = {
+                level1:item1,
+                level2:item2,
+                level3:item3,
+              }
+              _list.push(_item)
+              item1.cellLength ++
+              // 如果没有第四层添加库位小计
+              // if(index3 == item2.reportLocationSerialDtos.length - 1){
+                _list.push({
+                  level1:item1,
+                  level2:item2,
+                  level3:item3,
+                  total_erp2:item3
+                })
+                item1.cellLength ++
+              // }
+            }
+            // 添加储位小计
+            if(index3 == item2.reportLocationSerialDtos.length - 1){
+              _list.push({
+                level1:item1,
+                level2:item2,
+                // level3:item3,
+                level3:{locationCode:null},
+                total_erp:item2,
+              })
+              // item1.cellLength ++
+            }
+          })
+          // 添加物料小计
+          if(index2 == item1.reportErpLocationSerialDtos.length - 1){
+            _list.push({
+              level1:item1,
+              // level2:item2,
+              // level3:{locationCode:null},
+              level2:{erpLocatioCode:null},
+              level3:{locationCode:null},//此处为了合并单元格做模拟locationCode处理
+              total_item:item1,
+            })
+            // item1.cellLength ++
+          }
+        })
+      });
+      return _list
+    },
+    // 格式化结束时间(格式：T23:59:59)
+    initEndTime(data){
+      let _time = ""
+      if(data.indexOf('T') >= 0){
+        _time = data.slice(0,data.indexOf('T')) + 'T23:59:59'
+      }else{
+        _time = data + 'T23:59:59'
+      }
+      return _time
+    },
+    // 获取表格数据
+    getTableData(){
+      this.loading = true
+      let _itemCodes = this.searchForm.itemCode ? this.searchForm.itemCode.split(',') : []
+
+      getInventoryTransactionSerials(
+        `wms/inventory/inventory-transaction/item-serial-list?startDateTime=${this.searchForm.beginDate}&endDateTime=${this.initEndTime(this.searchForm.endDate)}&erpLocationCode=${this.searchForm.erpLocatioCode}`,
+        _itemCodes
+      ).then(res => {
+        this.tableData = null
+        this.tableHeader.beginDate = this.searchForm.beginDate
+        this.tableHeader.endDate = this.searchForm.endDate
+        console.log(res)
+        this.$nextTick(() => {
+          this.tableData = this.initTableData(res)
+          // this.getIndexArr()
+          this.loading = false
+        })
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    // 样式class
+    tableRowClass(data){
+      if(data.row.total_erp2){
+        return "totalRow"
+      }
+      if(data.row.total_erp){
+        return "totalRow-red"
+      }
+      if(data.row.total_item){
+        return "totalRow-green"
+      }
+    },
+    // 获取合并单元格行
+    getIndexArr(){
+      // 合并 itemCode
+      let count_item = 0
+      // console.log(357,this.tableData)
+      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+        this.indexArray_item.push(rowIndex)
+        count_item = this.getRows(rowIndex, this.tableData[rowIndex].level1.itemCode,'itemCode','level1')
+        rowIndex += count_item
+      }
+      // console.log(362,this.indexArray_item)
+
+      // // 合并 erpLocatioCode
+      // let count_erp = 0
+      // for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+      //   this.indexArray_erp.push(rowIndex)
+      //   count_erp = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
+      //   rowIndex += count_erp
+      // }
+
+      // // 合并 locationCode
+      // let count_erp2 = 0
+      // for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+      //   this.indexArray_erp2.push(rowIndex)
+      //   count_erp2 = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
+      //   rowIndex += count_erp2
+      // }
+    },
+    // 获取合并单元格行数
+    getRows(rowIndex, name,prop,level) {
+      let count = 0
+      for (let i = rowIndex; i < this.tableData.length; i++) {
+        if (this.tableData[i][level][prop] == name) {
+          count++
+        } else {
+          break
+        }
+      }
+      return count
+    },
+    // 合并单元格
+    verticalMergeCell({ row, column, rowIndex, columnIndex }) {
+      // 合并 itemCode
+      if (columnIndex == 0) {
+        let rowCount = 0
+        if (this.indexArray_item.includes(rowIndex)) {
+        // console.log('length',rowIndex,this.tableData.length)
+          // rowCount = this.getRows(rowIndex, row.level1.itemCode, 'itemCode','level1')
+          rowCount = row.level1.cellLength
+          // console.log(390,rowCount)
+          return {
+            rowspan: rowCount,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+      // 合并 erpLocatioCode
+      // if (columnIndex == 1) {
+      //   let rowCount = 0
+      //   if (this.indexArray_erp.includes(rowIndex)) {
+      //     rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
+      //     return {
+      //       rowspan: rowCount,
+      //       colspan: 1
+      //     }
+      //   } else {
+      //     return {
+      //       rowspan: 0,
+      //       colspan: 0
+      //     }
+      //   }
+      // }
+      // // 合并 locationCode
+      // if (columnIndex == 2) {
+      //   let rowCount = 0
+      //   if (this.indexArray_erp2.includes(rowIndex)) {
+      //     rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
+      //     return {
+      //       rowspan: rowCount,
+      //       colspan: 1
+      //     }
+      //   } else {
+      //     return {
+      //       rowspan: 0,
+      //       colspan: 0
+      //     }
+      //   }
+      // }
+    },
+    // 转义【对应接口】
+    getInterFaceName(item){
+      let _str = ""
+      if (item.enumTransType == 11) {
+        _str = '【TYRP】-【采购单】'
+      } else if (item.enumTransType == 12) {
+        _str = '【TYRP】-【采购退货单】*【EOS】-【退货单】'
+      } else if (item.enumTransType == 14 && item.enumTransSubType == 4401) {
+        _str = '【TYRP】-【验收单】*【EOS】-【验收单】'
+      } else if (item.enumTransType == 14 && item.enumTransSubType == 4401) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 15 && item.enumTransSubType == 1505) {
+        _str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】'
+      } else if (item.enumTransType == 15 && item.enumTransSubType == 1501) {
+        _str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】'
+      } else if (item.enumTransType == 16) {
+        _str = '【TYRP】-【线边仓退料单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3102) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3104) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3105) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 21) {
+        _str = '【TYRP】-【缴库单】'
+      } else if (item.enumTransType == 23 && item.enumTransSubType == 2302) {
+        _str = '【TYRP】-【出货单】'
+      } else if (item.enumTransType == 23 && item.enumTransSubType == 2303) {
+        _str = '【TYRP】-【出货单】'
+      } else if (item.enumTransType == 23) {
+        _str = '【TYRP】-【非生产领料单】'
+      } else if (item.enumTransType == 33 && item.enumTransSubType == 0) {
+        _str = '【TYRP】-【非生产退料】'
+      } else if (item.enumTransType == 33 && item.enumTransSubType ==  3301) {
+        _str = '【TYRP】-【回收料入库单】'
+      } else if (item.enumTransType == 22) {
+        _str = '【TYRP】-【退拆单】'
+      } else if (item.enumTransType == 37 && item.enumTransSubType == 0) {
+        _str = '【TYRP】-【盘点调整单】'
+      } else if (item.enumTransType == 37 && item.enumTransSubType == 3701) {
+        _str = '【TYRP】-【线边仓调整单】'
+      } else if (item.enumTransType == 38 && item.enumTransSubType == 3302) {
+        _str = '【TYRP】-【回收料调整单】'
+      } else if (item.enumTransType == 36) {
+        _str = '【TYRP】-【报废单、线边仓报废单】'
+      } else {
+        _str = ''
+      }
+      return _str
+    },
+  }
+}
+</script>
+<style lang="scss">
+.InventoryBookDetail_innerPage{
+  background: #fff;
+  height: 100%;
+
+  .searchHeader{
+    background: #f1f1f1;
+    padding: 20px 30px 0; 
+    border-bottom: 1px solid #dbdbdb;
+
+    .el-form-item{
+      margin-right: 25px !important;
+    }
+    .el-button{
+      background: #205f78 !important;
+      border-color: #ddd;
+      border-radius: 2px;
+    }
+
+    .el-form-item__label{
+      font-weight: normal;
+    }
+
+    .el-input__inner{
+      border-radius: 0px !important;
+      background: #ddd !important;
+    }
+
+    .el-input__inner:focus,
+    .el-input__inner:hover{
+      border-color: #ddd;
+    }
+  }
+
+  .tableHeader{
+    list-style: none;
+    text-align: center;
+    height: 80px;
+    overflow: hidden;
+    margin: 10px 0;
+
+    .tableName{
+      letter-spacing: 10px;
+      border-bottom: #333 solid 1px;
+      padding: 0 15px;
+      font-size: 18px;
+    }
+
+    .timeLi{
+      display: flex;
+      justify-content: center;
+
+      .item{
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .tableEl{
+    width: 100%;
+    margin: 0px auto;
+    // background: transparent !important;
+
+    .el-table__cell{
+      vertical-align: initial !important;
+      padding: 5px 0 !important;
+      background: transparent !important;
+    }
+    
+    tr{
+      background: transparent !important;
+      border: none !important;
+    }
+
+    th.el-table__cell{
+      padding: 0 !important;
+      color: #000 !important;
+      border: none !important;
+      border-bottom: #333 solid 1px !important;
+      .cell{
+        vertical-align: bottom !important;
+      }
+    }
+
+    td{
+      border: none !important;
+      color: #000 !important;
+    }
+
+    .totalRow{
+      td{
+        border-top: blue dashed 1px !important;
+      }
+    }
+
+    .totalRow-red{
+      td{
+        border-top: #ff6000 solid 1px !important;
+      }
+    }
+    .totalRow-green{
+      td{
+        border-top: #24b924 solid 1px !important;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy.vue b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy.vue
new file mode 100644
index 000000000..d1593da39
--- /dev/null
+++ b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage copy.vue	
@@ -0,0 +1,597 @@
+<template>
+  <div class="InventoryBookDetail_innerPage" v-loading="loading">
+    <!-- 修改前 -->
+    <!-- 搜索 -->
+    <el-form ref="searchForm" :inline="true" :rules="formRule" :model="searchForm" size="small" class="searchHeader">
+      <el-form-item label="ERP储位" prop="erpLocatioCode">
+        <el-input v-model="searchForm.erpLocatioCode" placeholder="请输入ERP储位"></el-input>
+      </el-form-item>
+      <el-form-item label="零件" prop="itemCode">
+        <el-input v-model="searchForm.itemCode" placeholder="请输入零件"></el-input>
+      </el-form-item>
+      <el-form-item label="账期" prop="interfaceCalendar">
+        <el-select 
+          :loading="calendarLoading"
+          @change="calendarChange" 
+          v-model="searchForm.interfaceCalendar" 
+          placeholder="请选择账期"
+        >
+          <el-option
+            v-for="item in calendarList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开始时间" prop="beginDate">
+        <el-date-picker
+          @change="timeChange" 
+          value-format="yyyy-MM-dd"
+          v-model="searchForm.beginDate"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endDate">
+        <el-date-picker
+          @change="timeChange" 
+          value-format="yyyy-MM-dd"
+          v-model="searchForm.endDate"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="searchHandle">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- table -->
+    <div class="tableContent" v-if="tableData">
+      <ul class="tableHeader">
+        <li>{{tableHeader.companyName}}</li>
+        <li><span class="tableName">库存流水帐 (料品)</span></li>
+        <li class="timeLi">
+          <div class="item">交易年月: {{ getYearMonth(tableHeader.beginDate) }} - {{ getYearMonth(tableHeader.endDate) }}</div>
+          <div class="item">制表日期：{{ getNow() }}</div>
+        </li>
+      </ul>
+      <el-table
+        :data="tableData"
+        class="tableEl"
+        height="calc(100vh - 180px)"
+        :span-method="verticalMergeCell"
+        :row-class-name="tableRowClass"
+      >
+        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
+        <el-table-column
+          v-for="(item,key) in tableTh"
+          :prop="item.prop"
+          :label="item.label"
+          :align="item.prop.toLowerCase().indexOf('qty') >= 0 ? 'right' : 'left'"
+          :width="item.width"
+        >
+          <template slot-scope="scope">
+            <div v-if="scope.row.total_erp || scope.row.total_erp2 || scope.row.total_item">
+              <div v-if="scope.row.total_erp2">
+                <span v-if="totalProps[0] == item.prop" style="color: blue;font-weight:bold">库位小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp2[item.prop]}}</span>
+              </div>
+              <div v-if="scope.row.total_erp">
+                <span v-if="totalProps[0] == item.prop" style="color: #ff6000;font-weight:bold">储位小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp[item.prop]}}</span>
+              </div>
+              <div v-if="scope.row.total_item">
+                <span v-if="totalProps[0] == item.prop" style="color: #24b924;font-weight:bold">物料小计：</span>
+                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_item[item.prop]}}</span>
+              </div>
+            </div>
+            <div v-else>
+              <div v-if="item.prop == 'itemCode'">
+                <div>物料代码:<br/>【{{ scope.row.level1[item.prop] }}】</div>
+                <br/>
+                <div>物料名称:<br/>【{{ scope.row.level1.itemName }}】</div>
+                <br/>
+                <div>物料描述1:<br/>【{{ scope.row.level1.itemDesc1 }}】</div>
+                <br/>
+                <div v-if="scope.row.level1.configuration">配置码:<br/>【{{ scope.row.level1.configuration }}】</div>
+              </div>
+              <div v-else-if="item.prop == 'erpLocatioCode'">{{ scope.row.level2[item.prop] }}</div>
+              <div v-else>
+                <div v-if="scope.row.level4">
+                  <div v-if="item.prop == 'sumInQty'">{{ scope.row.level4.inQty }}</div>
+                  <div v-else-if="item.prop == 'sumOutQty'">{{ scope.row.level4.outQty }}</div>
+                  <div v-else-if="item.prop == 'createDateTime'">{{ formatTime(scope.row.level4.createDateTime) }}</div>
+                  <div v-else-if="item.prop == 'locationCode'">{{ scope.row.level4.locatioCode }}</div>
+                  <div v-else-if="item.prop == 'interFaceName'">{{getInterFaceName(scope.row.level4)}}</div>
+                  <div v-else-if="item.prop == 'enumTransType' || item.prop == 'enumTransSubType'">{{ scope.row.level4[item.prop] | trigger(item.option, "label") }}</div>
+                  <div v-else>{{ scope.row.level4[item.prop] }}</div>
+                </div>
+                <div v-else>{{ scope.row.level3[item.prop] }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getInventoryTransactionSerials,getInterfaceCalendar } from '@/api/wms-api'
+import {  formatTimeStampToNorm,formatTimeStrToStr } from '@/utils/formatTime'
+
+export default {
+  name:"InventoryBookDetail_innerPage",
+  data(){
+    return{
+      loading:false,//页面加载
+      calendarLoading:false,//账期下拉加载
+      tableData:null,//table数据
+      calendarList:[],//账期下拉列表
+      // 查询字段
+      searchForm:{
+        interfaceCalendar:null,
+        erpLocatioCode:null,
+        itemCode:null,//VW316C1A028A,UTT06PP5483
+        beginDate: '',//2021-10-01
+        endDate: '',//2023-11-28T23:59:59
+      },
+      // 查询必填项
+      formRule: {
+        beginDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }],
+        endDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }],
+        // itemCode: [{ required: true, trigger: "blur", message: "不可为空" }],
+      },
+      // table账单表头
+      tableHeader:{
+        beginDate: '',
+        endDate: '',
+        companyName:localStorage.getItem('companyName')
+      },
+      // table标头
+      tableTh:[
+        {label:'物料信息',prop:'itemCode',width:180},
+        {label:'ERP储位',prop:'erpLocatioCode',width:80},
+        {label:'库位代码',prop:'locationCode',width:90},
+        {label:'单号',prop:'number',width:170},
+        {label:'创建时间',prop:'createDateTime',width:160},
+        {label:'业务编号',prop:'docNumber',width:140},
+        {label:'业务主类型',prop:'enumTransType',type:'filter',option:'TransTypeBase'},
+        {label:'业务子类型',prop:'enumTransSubType',type:'filter',option:'transSubType'},
+        {label:'对应接口',prop:'interFaceName',width:220},
+        {label:'期初库存',prop:'firstQty'},
+        {label:'入库',prop:'sumInQty'},
+        {label:'出库',prop:'sumOutQty'},
+        {label:'结存',prop:'nowQty'},
+        {label:'期末库存',prop:'lastQty'},
+      ],
+      totalProps:['firstQty','lastQty','nowQty','sumInQty','sumOutQty'],// 小结显示的字段
+      indexArray_item: [], //itemCode 存储所有合并的行号
+      indexArray_erp: [], //erpLocatioCode 存储所有合并的行号
+      indexArray_erp2: [], //locationCode 存储所有合并的行号
+    }
+  },
+  mounted () {
+    this.getInterfaceCalendarList()
+  },
+  methods:{
+    // 格式化时间
+    formatTime(data){
+      // return data.slice(0,scope.row.level4.createDateTime.indexOf('T')
+      return formatTimeStrToStr(data)
+    },
+    // 获取账期下拉
+    getInterfaceCalendarList(){
+      this.calendarLoading = true
+      let _data = {
+          condition: {
+            filters: []
+          },
+          Sorting: "code DESC",
+          SkipCount: 0,
+          MaxResultCount: 1000
+      }
+      getInterfaceCalendar(_data).then(res => {
+        this.calendarList=res.items
+        this.calendarLoading = false
+      }).catch(err => {
+        this.calendarLoading = false
+      })
+    },
+    // 账期更改
+    calendarChange(id){
+      let _item = this.calendarList.filter(item=>{
+        return item.id == id
+      })[0]
+      this.searchForm.beginDate = _item.beginTime
+      this.searchForm.endDate = _item.endTime
+    },
+    // 时间更改
+    timeChange(data){
+      if(data){
+        this.searchForm.interfaceCalendar = ""
+      }
+    },
+    // 查询事件
+    searchHandle(){
+      this.$refs.searchForm.validate((valid) => {
+        if (valid) {
+          this.getTableData()
+        } else {
+          return false;
+        }
+      });
+    },
+    // 年月转义
+    getYearMonth(date){
+      return date.replaceAll('-',"").slice(0,8)
+    },
+    // 获取当前时间
+    getNow(){
+      return formatTimeStampToNorm(new Date(),'date')
+    },
+    // 表格数据转义
+    initTableData(res){
+      let _list = []
+      res.forEach(item1 => {
+        item1.reportErpLocationSerialDtos.forEach((item2,index2) => {
+          item2.reportLocationSerialDtos.forEach((item3,index3)=>{
+            // 如果有第四层
+            if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){
+              item3.reportTransactionSerialDtos.forEach((item4,index4)=>{
+                let _item = {
+                  level1:item1,
+                  level2:item2,
+                  level3:item3,
+                  level4:item4,
+                }
+                _list.push(_item)
+                // 如果有第四层添加库位小计
+                if(index4 == item3.reportTransactionSerialDtos.length - 1){
+                  _list.push({
+                    level1:item1,
+                    level2:item2,
+                    level3:item3,
+                    level4:item4,
+                    total_erp2:item3
+                  })
+                }
+              })
+            }else{
+              let _item = {
+                level1:item1,
+                level2:item2,
+                level3:item3,
+              }
+              _list.push(_item)
+              // 如果没有第四层添加库位小计
+              // if(index3 == item2.reportLocationSerialDtos.length - 1){
+                _list.push({
+                  level1:item1,
+                  level2:item2,
+                  level3:item3,
+                  total_erp2:item3
+                })
+              // }
+            }
+            // 添加储位小计
+            if(index3 == item2.reportLocationSerialDtos.length - 1){
+              _list.push({
+                level1:item1,
+                level2:item2,
+                // level3:item3,
+                level3:{locationCode:null},
+                total_erp:item2,
+              })
+            }
+          })
+          // 添加物料小计
+          if(index2 == item1.reportErpLocationSerialDtos.length - 1){
+            _list.push({
+              level1:item1,
+              // level2:item2,
+              // level3:{locationCode:null},
+              level2:{erpLocatioCode:null},
+              level3:{locationCode:null},//此处为了合并单元格做模拟locationCode处理
+              total_item:item1,
+            })
+          }
+        })
+      });
+      return _list
+    },
+    // 格式化结束时间(格式：T23:59:59)
+    initEndTime(data){
+      let _time = ""
+      if(data.indexOf('T') >= 0){
+        _time = data.slice(0,data.indexOf('T')) + 'T23:59:59'
+      }else{
+        _time = data + 'T23:59:59'
+      }
+      return _time
+    },
+    // 获取表格数据
+    getTableData(){
+      this.loading = true
+      let _itemCodes = this.searchForm.itemCode ? this.searchForm.itemCode.split(',') : []
+      getInventoryTransactionSerials(
+        _itemCodes,{
+        startDateTime:this.searchForm.beginDate,
+        endDateTime:this.initEndTime(this.searchForm.endDate),
+        erpLocatioCode:this.searchForm.erpLocatioCode,
+      }).then(res => {
+        this.tableData = null
+        this.tableHeader.beginDate = this.searchForm.beginDate
+        this.tableHeader.endDate = this.searchForm.endDate
+        this.$nextTick(() => {
+          this.tableData = this.initTableData(res)
+          this.getIndexArr()
+          this.loading = false
+        })
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    // 样式class
+    tableRowClass(data){
+      if(data.row.total_erp2){
+        return "totalRow"
+      }
+      if(data.row.total_erp){
+        return "totalRow-red"
+      }
+      if(data.row.total_item){
+        return "totalRow-green"
+      }
+    },
+    // 获取合并单元格行
+    getIndexArr(){
+      // 合并 itemCode
+      let count_item = 0
+      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+        this.indexArray_item.push(rowIndex)
+        count_item = this.getRows(rowIndex, this.tableData[rowIndex].level1.itemCode,'itemCode','level1')
+        rowIndex += count_item
+      }
+
+      // 合并 erpLocatioCode
+      let count_erp = 0
+      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+        this.indexArray_erp.push(rowIndex)
+        count_erp = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
+        rowIndex += count_erp
+      }
+
+      // 合并 locationCode
+      let count_erp2 = 0
+      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
+        this.indexArray_erp2.push(rowIndex)
+        count_erp2 = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
+        rowIndex += count_erp2
+      }
+    },
+    // 获取合并单元格行数
+    getRows(rowIndex, name,prop,level) {
+      let count = 0
+      for (let i = rowIndex; i < this.tableData.length; i++) {
+        if (this.tableData[i][level][prop] == name) {
+          count++
+        } else {
+          break
+        }
+      }
+      return count
+    },
+    // 合并单元格
+    verticalMergeCell({ row, column, rowIndex, columnIndex }) {
+      // 合并 itemCode
+      if (columnIndex == 0) {
+        let rowCount = 0
+        if (this.indexArray_item.includes(rowIndex)) {
+          rowCount = this.getRows(rowIndex, row.level1.itemCode, 'itemCode','level1')
+          return {
+            rowspan: rowCount,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+      // 合并 erpLocatioCode
+      if (columnIndex == 1) {
+        let rowCount = 0
+        if (this.indexArray_erp.includes(rowIndex)) {
+          rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
+          return {
+            rowspan: rowCount,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+      // 合并 locationCode
+      if (columnIndex == 2) {
+        let rowCount = 0
+        if (this.indexArray_erp2.includes(rowIndex)) {
+          rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
+          return {
+            rowspan: rowCount,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    },
+    // 转义【对应接口】
+    getInterFaceName(item){
+      let _str = ""
+      if (item.enumTransType == 11) {
+        _str = '【TYRP】-【采购单】'
+      } else if (item.enumTransType == 12) {
+        _str = '【TYRP】-【采购退货单】*【EOS】-【退货单】'
+      } else if (item.enumTransType == 14 && item.enumTransSubType == 4401) {
+        _str = '【TYRP】-【验收单】*【EOS】-【验收单】'
+      } else if (item.enumTransType == 14 && item.enumTransSubType == 4401) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 15 && item.enumTransSubType == 1505) {
+        _str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】'
+      } else if (item.enumTransType == 15 && item.enumTransSubType == 1501) {
+        _str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】'
+      } else if (item.enumTransType == 16) {
+        _str = '【TYRP】-【线边仓退料单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3102) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3104) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 31 && item.enumTransSubType == 3105) {
+        _str = '【TYRP】-【储位、线边仓调拨单 和  客户储位调拨单】'
+      } else if (item.enumTransType == 21) {
+        _str = '【TYRP】-【缴库单】'
+      } else if (item.enumTransType == 23 && item.enumTransSubType == 2302) {
+        _str = '【TYRP】-【出货单】'
+      } else if (item.enumTransType == 23 && item.enumTransSubType == 2303) {
+        _str = '【TYRP】-【出货单】'
+      } else if (item.enumTransType == 23) {
+        _str = '【TYRP】-【非生产领料单】'
+      } else if (item.enumTransType == 33 && item.enumTransSubType == 0) {
+        _str = '【TYRP】-【非生产退料】'
+      } else if (item.enumTransType == 33 && item.enumTransSubType ==  3301) {
+        _str = '【TYRP】-【回收料入库单】'
+      } else if (item.enumTransType == 22) {
+        _str = '【TYRP】-【退拆单】'
+      } else if (item.enumTransType == 37 && item.enumTransSubType == 0) {
+        _str = '【TYRP】-【盘点调整单】'
+      } else if (item.enumTransType == 37 && item.enumTransSubType == 3701) {
+        _str = '【TYRP】-【线边仓调整单】'
+      } else if (item.enumTransType == 38 && item.enumTransSubType == 3302) {
+        _str = '【TYRP】-【回收料调整单】'
+      } else if (item.enumTransType == 36) {
+        _str = '【TYRP】-【报废单、线边仓报废单】'
+      } else {
+        _str = ''
+      }
+      return _str
+    },
+  }
+}
+</script>
+<style lang="scss">
+.InventoryBookDetail_innerPage{
+  background: #fff;
+  height: 100%;
+
+  .searchHeader{
+    background: #f1f1f1;
+    padding: 20px 30px 0; 
+    border-bottom: 1px solid #dbdbdb;
+
+    .el-form-item{
+      margin-right: 25px !important;
+    }
+    .el-button{
+      background: #205f78 !important;
+      border-color: #ddd;
+      border-radius: 2px;
+    }
+
+    .el-form-item__label{
+      font-weight: normal;
+    }
+
+    .el-input__inner{
+      border-radius: 0px !important;
+      background: #ddd !important;
+    }
+
+    .el-input__inner:focus,
+    .el-input__inner:hover{
+      border-color: #ddd;
+    }
+  }
+
+  .tableHeader{
+    list-style: none;
+    text-align: center;
+    height: 80px;
+    overflow: hidden;
+    margin: 10px 0;
+
+    .tableName{
+      letter-spacing: 10px;
+      border-bottom: #333 solid 1px;
+      padding: 0 15px;
+      font-size: 18px;
+    }
+
+    .timeLi{
+      display: flex;
+      justify-content: center;
+
+      .item{
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .tableEl{
+    width: 100%;
+    margin: 0px auto;
+    // background: transparent !important;
+
+    .el-table__cell{
+      vertical-align: initial !important;
+      padding: 5px 0 !important;
+      background: transparent !important;
+    }
+    
+    tr{
+      background: transparent !important;
+      border: none !important;
+    }
+
+    th.el-table__cell{
+      padding: 0 !important;
+      color: #000 !important;
+      border: none !important;
+      border-bottom: #333 solid 1px !important;
+      .cell{
+        vertical-align: bottom !important;
+      }
+    }
+
+    td{
+      border: none !important;
+      color: #000 !important;
+    }
+
+    .totalRow{
+      td{
+        border-top: blue dashed 1px !important;
+      }
+    }
+
+    .totalRow-red{
+      td{
+        border-top: #ff6000 solid 1px !important;
+      }
+    }
+    .totalRow-green{
+      td{
+        border-top: #24b924 solid 1px !important;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage.vue b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage.vue
index f693c9f37..db7db6d95 100644
--- a/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage.vue
+++ b/fe/PC/src/views/activeReportManage/reportForm/InventoryBookDetail_innerPage.vue
@@ -56,60 +56,21 @@
         </li>
       </ul>
       <el-table
+        stripe
+        height="calc(100vh - 180px)"
         :data="tableData"
         class="tableEl"
-        height="calc(100vh - 180px)"
-        :span-method="verticalMergeCell"
-        :row-class-name="tableRowClass"
+        row-key="id"
+        :expand-row-keys="expandRows"
+        lazy
+        :load="load"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       >
-        <!-- <el-table-column type="index" label="序号"></el-table-column> -->
         <el-table-column
           v-for="(item,key) in tableTh"
           :prop="item.prop"
           :label="item.label"
-          :align="item.prop.toLowerCase().indexOf('qty') >= 0 ? 'right' : 'left'"
-          :width="item.width"
-        >
-          <template slot-scope="scope">
-            <div v-if="scope.row.total_erp || scope.row.total_erp2 || scope.row.total_item">
-              <div v-if="scope.row.total_erp2">
-                <span v-if="totalProps[0] == item.prop" style="color: blue;font-weight:bold">库位小计：</span>
-                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp2[item.prop]}}</span>
-              </div>
-              <div v-if="scope.row.total_erp">
-                <span v-if="totalProps[0] == item.prop" style="color: #ff6000;font-weight:bold">储位小计：</span>
-                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp[item.prop]}}</span>
-              </div>
-              <div v-if="scope.row.total_item">
-                <span v-if="totalProps[0] == item.prop" style="color: #24b924;font-weight:bold">物料小计：</span>
-                <span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_item[item.prop]}}</span>
-              </div>
-            </div>
-            <div v-else>
-              <div v-if="item.prop == 'itemCode'">
-                <div>物料代码:<br/>【{{ scope.row.level1[item.prop] }}】</div>
-                <br/>
-                <div>物料名称:<br/>【{{ scope.row.level1.itemName }}】</div>
-                <br/>
-                <div>物料描述1:<br/>【{{ scope.row.level1.itemDesc1 }}】</div>
-                <br/>
-                <div v-if="scope.row.level1.configuration">配置码:<br/>【{{ scope.row.level1.configuration }}】</div>
-              </div>
-              <div v-else-if="item.prop == 'erpLocatioCode'">{{ scope.row.level2[item.prop] }}</div>
-              <div v-else>
-                <div v-if="scope.row.level4">
-                  <div v-if="item.prop == 'sumInQty'">{{ scope.row.level4.inQty }}</div>
-                  <div v-else-if="item.prop == 'sumOutQty'">{{ scope.row.level4.outQty }}</div>
-                  <div v-else-if="item.prop == 'createDateTime'">{{ formatTime(scope.row.level4.createDateTime) }}</div>
-                  <div v-else-if="item.prop == 'locationCode'">{{ scope.row.level4.locatioCode }}</div>
-                  <div v-else-if="item.prop == 'interFaceName'">{{getInterFaceName(scope.row.level4)}}</div>
-                  <div v-else-if="item.prop == 'enumTransType' || item.prop == 'enumTransSubType'">{{ scope.row.level4[item.prop] | trigger(item.option, "label") }}</div>
-                  <div v-else>{{ scope.row.level4[item.prop] }}</div>
-                </div>
-                <div v-else>{{ scope.row.level3[item.prop] }}</div>
-              </div>
-            </div>
-          </template>
+          :width="item.width">
         </el-table-column>
       </el-table>
     </div>
@@ -118,11 +79,11 @@
 <script>
 import { getInventoryTransactionSerials,getInterfaceCalendar } from '@/api/wms-api'
 import {  formatTimeStampToNorm,formatTimeStrToStr } from '@/utils/formatTime'
-
 export default {
   name:"InventoryBookDetail_innerPage",
   data(){
     return{
+      expandRows:[],
       loading:false,//页面加载
       calendarLoading:false,//账期下拉加载
       tableData:null,//table数据
@@ -174,6 +135,35 @@ export default {
     this.getInterfaceCalendarList()
   },
   methods:{
+    load(tree, treeNode, resolve) {
+      // 点击第一层
+      if(tree.reportErpLocationSerialDtos && tree.reportErpLocationSerialDtos.length > 0){
+        tree.reportErpLocationSerialDtos.forEach((item,key)=>{
+          item.id='id2-'+Math.random().toString()+key
+          if(item.reportLocationSerialDtos && item.reportLocationSerialDtos.length > 0){
+            item.hasChildren = true
+          }
+        })
+        resolve(tree.reportErpLocationSerialDtos)
+      }
+      // 点击第二层
+      if(tree.reportLocationSerialDtos && tree.reportLocationSerialDtos.length > 0){
+        tree.reportLocationSerialDtos.forEach((item,key)=>{
+          item.id='id3-'+Math.random().toString()+key
+          if(item.reportTransactionSerialDtos && item.reportTransactionSerialDtos.length > 0){
+            item.hasChildren = true
+          }
+        })
+        resolve(tree.reportLocationSerialDtos)
+      }
+      // 点击第三层
+      if(tree.reportTransactionSerialDtos && tree.reportTransactionSerialDtos.length > 0){
+        tree.reportTransactionSerialDtos.forEach((item,key)=>{
+          item.id='id4-'+Math.random().toString()+key
+        })
+        resolve(tree.reportTransactionSerialDtos)
+      }
+    },
     // 格式化时间
     formatTime(data){
       // return data.slice(0,scope.row.level4.createDateTime.indexOf('T')
@@ -229,76 +219,6 @@ export default {
     getNow(){
       return formatTimeStampToNorm(new Date(),'date')
     },
-    // 表格数据转义
-    initTableData(res){
-      let _list = []
-      res.forEach(item1 => {
-        item1.reportErpLocationSerialDtos.forEach((item2,index2) => {
-          item2.reportLocationSerialDtos.forEach((item3,index3)=>{
-            // 如果有第四层
-            if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){
-              item3.reportTransactionSerialDtos.forEach((item4,index4)=>{
-                let _item = {
-                  level1:item1,
-                  level2:item2,
-                  level3:item3,
-                  level4:item4,
-                }
-                _list.push(_item)
-                // 如果有第四层添加库位小计
-                if(index4 == item3.reportTransactionSerialDtos.length - 1){
-                  _list.push({
-                    level1:item1,
-                    level2:item2,
-                    level3:item3,
-                    level4:item4,
-                    total_erp2:item3
-                  })
-                }
-              })
-            }else{
-              let _item = {
-                level1:item1,
-                level2:item2,
-                level3:item3,
-              }
-              _list.push(_item)
-              // 如果没有第四层添加库位小计
-              // if(index3 == item2.reportLocationSerialDtos.length - 1){
-                _list.push({
-                  level1:item1,
-                  level2:item2,
-                  level3:item3,
-                  total_erp2:item3
-                })
-              // }
-            }
-            // 添加储位小计
-            if(index3 == item2.reportLocationSerialDtos.length - 1){
-              _list.push({
-                level1:item1,
-                level2:item2,
-                // level3:item3,
-                level3:{locationCode:null},
-                total_erp:item2,
-              })
-            }
-          })
-          // 添加物料小计
-          if(index2 == item1.reportErpLocationSerialDtos.length - 1){
-            _list.push({
-              level1:item1,
-              // level2:item2,
-              // level3:{locationCode:null},
-              level2:{erpLocatioCode:null},
-              level3:{locationCode:null},//此处为了合并单元格做模拟locationCode处理
-              total_item:item1,
-            })
-          }
-        })
-      });
-      return _list
-    },
     // 格式化结束时间(格式：T23:59:59)
     initEndTime(data){
       let _time = ""
@@ -309,129 +229,57 @@ export default {
       }
       return _time
     },
+    // 表格数据转义
+    initTableData(res){
+      let _list = []
+      res.forEach((item1,key1) => {
+        let _item1 = JSON.parse(JSON.stringify(item1))
+        _item1.id='id1-'+key1+'-'+Math.random().toString()
+        this.expandRows.push(_item1.id)
+        if(item1.reportErpLocationSerialDtos && item1.reportErpLocationSerialDtos.length > 0){
+          // _item1.hasChildren = true
+          _item1.children = item1.reportErpLocationSerialDtos
+          _list.push(_item1)
+          item1.reportErpLocationSerialDtos.forEach((item2,key2)=>{
+            _list[key1].children[key2].id='id2-'+key2+'-'+Math.random().toString()
+            this.expandRows.push(_list[key1].children[key2].id)
+            if(item2.reportLocationSerialDtos && item2.reportLocationSerialDtos.length > 0){
+              _list[key1].children[key2].children=item2.reportLocationSerialDtos
+              item2.reportLocationSerialDtos.forEach((item3,key3)=>{
+                _list[key1].children[key2].children[key3].id='id3-'+key3+'-'+Math.random().toString()
+                if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){
+                  _list[key1].children[key2].children[key3].hasChildren = true
+                  // item3.reportTransactionSerialDtos.forEach((item4,key4)=>{
+                  //   _list[key1].children[key2].children[key3].children[key4].id='id4-'+key4+'-'+Math.random().toString()
+                  // })
+                  // _list[key1].children[key2].children[key3].children = item3.reportTransactionSerialDtos
+                }
+              })
+            }
+          })
+        }
+      });
+      this.tableData = _list
+    },
     // 获取表格数据
     getTableData(){
       this.loading = true
       let _itemCodes = this.searchForm.itemCode ? this.searchForm.itemCode.split(',') : []
       getInventoryTransactionSerials(
-        _itemCodes,{
-        startDateTime:this.searchForm.beginDate,
-        endDateTime:this.initEndTime(this.searchForm.endDate),
-        erpLocatioCode:this.searchForm.erpLocatioCode,
-      }).then(res => {
+        `wms/inventory/inventory-transaction/item-serial-list?startDateTime=${this.searchForm.beginDate}&endDateTime=${this.initEndTime(this.searchForm.endDate)}&erpLocationCode=${this.searchForm.erpLocatioCode}`,
+        _itemCodes
+      ).then(res => {
         this.tableData = null
         this.tableHeader.beginDate = this.searchForm.beginDate
         this.tableHeader.endDate = this.searchForm.endDate
-        this.$nextTick(() => {
-          this.tableData = this.initTableData(res)
-          this.getIndexArr()
+        this.initTableData(res)
+        setTimeout(()=>{
           this.loading = false
-        })
+        },0)
       }).catch(err => {
         this.loading = false
       })
     },
-    // 样式class
-    tableRowClass(data){
-      if(data.row.total_erp2){
-        return "totalRow"
-      }
-      if(data.row.total_erp){
-        return "totalRow-red"
-      }
-      if(data.row.total_item){
-        return "totalRow-green"
-      }
-    },
-    // 获取合并单元格行
-    getIndexArr(){
-      // 合并 itemCode
-      let count_item = 0
-      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
-        this.indexArray_item.push(rowIndex)
-        count_item = this.getRows(rowIndex, this.tableData[rowIndex].level1.itemCode,'itemCode','level1')
-        rowIndex += count_item
-      }
-
-      // 合并 erpLocatioCode
-      let count_erp = 0
-      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
-        this.indexArray_erp.push(rowIndex)
-        count_erp = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
-        rowIndex += count_erp
-      }
-
-      // 合并 locationCode
-      let count_erp2 = 0
-      for (let rowIndex = 0; rowIndex < this.tableData.length; ) {
-        this.indexArray_erp2.push(rowIndex)
-        count_erp2 = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
-        rowIndex += count_erp2
-      }
-    },
-    // 获取合并单元格行数
-    getRows(rowIndex, name,prop,level) {
-      let count = 0
-      for (let i = rowIndex; i < this.tableData.length; i++) {
-        if (this.tableData[i][level][prop] == name) {
-          count++
-        } else {
-          break
-        }
-      }
-      return count
-    },
-    // 合并单元格
-    verticalMergeCell({ row, column, rowIndex, columnIndex }) {
-      // 合并 itemCode
-      if (columnIndex == 0) {
-        let rowCount = 0
-        if (this.indexArray_item.includes(rowIndex)) {
-          rowCount = this.getRows(rowIndex, row.level1.itemCode, 'itemCode','level1')
-          return {
-            rowspan: rowCount,
-            colspan: 1
-          }
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          }
-        }
-      }
-      // 合并 erpLocatioCode
-      if (columnIndex == 1) {
-        let rowCount = 0
-        if (this.indexArray_erp.includes(rowIndex)) {
-          rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2')
-          return {
-            rowspan: rowCount,
-            colspan: 1
-          }
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          }
-        }
-      }
-      // 合并 locationCode
-      if (columnIndex == 2) {
-        let rowCount = 0
-        if (this.indexArray_erp2.includes(rowIndex)) {
-          rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3')
-          return {
-            rowspan: rowCount,
-            colspan: 1
-          }
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          }
-        }
-      }
-    },
     // 转义【对应接口】
     getInterFaceName(item){
       let _str = ""
@@ -551,11 +399,11 @@ export default {
     .el-table__cell{
       vertical-align: initial !important;
       padding: 5px 0 !important;
-      background: transparent !important;
+      // background: transparent !important;
     }
     
     tr{
-      background: transparent !important;
+      // background: transparent !important;
       border: none !important;
     }
 
@@ -591,6 +439,9 @@ export default {
       }
     }
   }
+  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+    background: #f2f2f2;
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/fe/PC/src/views/ceshi/ceshi.vue b/fe/PC/src/views/ceshi/ceshi.vue
new file mode 100644
index 000000000..5bc3484fb
--- /dev/null
+++ b/fe/PC/src/views/ceshi/ceshi.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <el-table
+            :data="tableData1"
+            style="width: 100%"
+            row-key="id"
+            border
+            lazy
+            :load="load"
+        >
+            <el-table-column
+            prop="date"
+            label="日期"
+            width="180">
+            </el-table-column>
+            <el-table-column
+            prop="name"
+            label="姓名"
+            width="180">
+            </el-table-column>
+            <el-table-column
+            prop="address"
+            label="地址">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:"ceshi",
+        data(){
+            return {
+                tableData1: [{
+                    id: 1,
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                    }, {
+                    id: 2,
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1517 弄'
+                    }, {
+                    id: 3,
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄',
+                    hasChildren: true
+                    }, {
+                    id: 4,
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄'
+                }]
+            }
+        },
+        methods: {
+            load(tree, treeNode, resolve) {
+                // setTimeout(() => {
+                // resolve([
+                //     {
+                //     id: 31,
+                //     date: '2016-05-01',
+                //     name: '王小虎',
+                //     address: '上海市普陀区金沙江路 1519 弄'
+                //     }, {
+                //     id: 32,
+                //     date: '2016-05-01',
+                //     name: '王小虎',
+                //     address: '上海市普陀区金沙江路 1519 弄'
+                //     }
+                // ])
+                // }, 1000)
+            }
+        }
+    }
+    </script>
\ No newline at end of file