库存管理-用料分析新增切换展示

src/utils/request.js

@@ -14,9 +14,9 @@ if (DoMainString) {
 var reg =  /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/;
 var browserUrl = window.location.hostname
 console.log("========url===",reg.test(browserUrl))
-if (reg.test(browserUrl)){
-  URL = window.location.protocol +"//"+ browserUrl + ":80/"
-}
+// if (reg.test(browserUrl)){
+//   URL = window.location.protocol +"//"+ browserUrl + ":80/"
+// }
 
 Cookies.set('url',URL)
 console.log(process.env.VUE_APP_BASE_API,'===========URL1111')

src/views/statisticalAnalysis/inventoryManagement/pasture/index.vue

@@ -74,7 +74,10 @@
           </el-select>
           <el-button class="successBorder" @click="form_search('second')">查询</el-button>
           <el-button class="export" style="float: right;margin-right: 5px;margin-top:10px;" icon="el-icon-upload2" @click="handleExport('tab2')">导出</el-button>
-        </div>
+          <el-button class="export" style="float: right;margin-right: 5px;margin-top:10px;" icon="el-icon-upload2" @click="handlesWitch()">切换展示</el-button>
+        </div>
+
+        <div v-if="isTable1">
         <div v-if="tab2.table.tableConfig.length > 8">
           <u-table v-if="isDispayTable2" ref="plTable2" v-loading="tab2.table.listLoading" :row-style="rowStyle" :cell-style="cellStyle" :max-height="myHeight2" use-virtual :row-height="rowHeight" border class="elTable table-fixed plTable2">
             <!-- 第一个表头 -->
@@ -117,6 +120,13 @@
         </div>
 
         <span v-if="tab2.table.listLoading == false && tab2.table.list.length>0" style="margin-right: 30px;margin-top: 10px;font-size: 14px;">共{{ tab2.table.total }}条</span>
+        </div>
+        <div v-else>
+           <el-table :data="tableData" :span-method="objectSpanMethod" v-loading="tab2.table.listLoading" :row-style="rowStyle" :cell-style="cellStyle" :max-height="myHeight2" use-virtual :row-height="rowHeight" border>
+              <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop" :label="column.label" align="center">
+              </el-table-column>
+            </el-table>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="价格分析" name="third">
         <div class="search">
@@ -307,6 +317,9 @@ export default {
       statisticalTypeList2: [{ id: '1', name: '牲畜类别' }, { id: '2', name: '栏舍名称' }, { id: '3', name: '日期' }, { id: '4', name: 'TMR设备编号' }, { id: '5', name: 'TMR班次' }, { id: '6', name: '车次' }],
       statisticalTypeList3: [{ id: '1', name: '牲畜类别' }, { id: '2', name: '栏舍名称' }, { id: '3', name: '日期' }, { id: '4', name: 'TMR设备编号' }],
       frequencyList: [], // 班次
+      isTable1:true,
+      spanObj: {},
+      mergekeys: ['A', 'B'],
     }
   },
   created() {
@@ -810,6 +823,73 @@ export default {
     },
     changeChecked(item) {
       this.form_search('second')
+    },
+    handlesWitch(item){
+      console.log(item)
+      this.isTable1 = !this.isTable1
+      if(!this.isTable1){
+        let data = {
+            "columns": [
+              { prop: 'A', label: '饲料编码' },
+              { prop: 'B', label: '饲料名称' },
+              { prop: "C", label: "牲畜类别" },
+              { prop: "D", label: "3-4月龄" }
+            ],
+            "data":  [
+              { A: "111", B: "饲料1", C: "理论", D: "6666" },
+              { A: "111", B: "饲料1", C: "实际",D: "6666" },
+              { A: "222", B: "饲料2", C: "理论", D: "6666" },
+              { A: "222", B: "饲料2", C: "理论", D: "6666" }
+          ]
+        }
+        this.tableColumns = data.columns;
+        this.tableData = data.data;
+        this.handleSpan()
+      }else{
+        this.getTab2List()
+      }
+    },
+    handleSpan() {
+      this.mergekeys.forEach(key => {
+        this.spanObj[key] = []
+        let position = 0
+        this.tableData.forEach((item, index) => {
+          if (index === 0) {
+            this.spanObj[key].push(1)
+            position = 0
+          } else {
+            if (key == 'B') {
+              if (this.tableData[index][key] === this.tableData[index - 1][key] && this.tableData[index]['A'] === this.tableData[index - 1]['A']) {
+                this.spanObj[key][position] += 1
+                this.spanObj[key].push(0)
+              } else {
+                this.spanObj[key].push(1)
+                position = index
+              }
+            } else {
+              if (this.tableData[index][key] === this.tableData[index - 1][key]) {
+                this.spanObj[key][position] += 1
+                this.spanObj[key].push(0)
+              } else {
+                this.spanObj[key].push(1)
+                position = index
+              }
+            }
+          }
+        })
+      })
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      for (let i = 0; i < this.mergekeys.length; i++) {
+        if (column.property === this.mergekeys[i]) {
+          const _row = this.spanObj[this.mergekeys[i]][rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      }
     },
     handleExport(item) {
       if (item == 'tab1') {
@@ -835,100 +915,121 @@ export default {
             excel.export_json_to_excel({ multiHeader, multiHeader2, data, filename: '库存统计', merges })
           })
         })
-      } else if (item == 'tab2') {
-        console.log('用料分析导出数据', this.tab2.table.list)
-        console.log('用料分析导出表头', this.tab2.table.tableConfig)
-        console.log(this.tab2.table.getdataListParm.checked, 'checked')
-        console.log(this.tab2.table.getdataListParm)
-        var startTime = this.tab2.table.getdataListParm.parammaps.startTime
-        var stopTime = this.tab2.table.getdataListParm.parammaps.stopTime
+      } else if (item == 'tab2') {
+        if(this.isTable1){
+          console.log('用料分析导出数据', this.tab2.table.list)
+          console.log('用料分析导出表头', this.tab2.table.tableConfig)
+          console.log(this.tab2.table.getdataListParm.checked, 'checked')
+          console.log(this.tab2.table.getdataListParm)
+          var startTime = this.tab2.table.getdataListParm.parammaps.startTime
+          var stopTime = this.tab2.table.getdataListParm.parammaps.stopTime
 
-        var exportData = []
-        var exportTitle1 = [] // 一级标题
-        var exportTitle2 = [] // 二级标题
-        var exportTitle3 = [] // 一级标题
-        var filterValArr = []
-        for (let i = 0; i < this.tab2.table.tableConfig.length; i++) {
-          exportTitle1.push(this.tab2.table.tableConfig[i].label)
-          for (let j = 0; j < this.tab2.table.tableConfig[i].children.length; j++) {
-            exportTitle2.push(this.tab2.table.tableConfig[i].children[j].label)
-            for(let a = 0;a<this.tab2.table.tableConfig[i].children[j].children.length;a++){
-              exportTitle3.push(this.tab2.table.tableConfig[i].children[j].children[a].label)
-              filterValArr.push(this.tab2.table.tableConfig[i].children[j].children[a].prop)
-            }
-            // filterValArr.push(this.tab2.table.tableConfig[i].children[j].prop)
-          }
-        }
-        console.log('一级标题exportTitle1', exportTitle1)
-        console.log('二级标题exportTitle2', exportTitle2)
-        console.log('三级标题exportTitle3', exportTitle3)
-        console.log('对应字段filterValArr', filterValArr)
-        var headerArr = []// 处理一级标题
-        var headerArr2 = []// 处理一级标题
-        if (this.tab2.table.getdataListParm.checked == 1) {
-          for (let i = 0; i < exportTitle1.length; i++) {
-            if (i > 0) {
-              headerArr.push(exportTitle1[i], '', '', '')
-            } else {
-              headerArr.push(exportTitle1[i])
-            }
-            if (i > 0) {
-              headerArr2.push(exportTitle2[i], '', '', '')
-            } else {
-              headerArr2.push(exportTitle2[i])
+          var exportData = []
+          var exportTitle1 = [] // 一级标题
+          var exportTitle2 = [] // 二级标题
+          var exportTitle3 = [] // 一级标题
+          var filterValArr = []
+          for (let i = 0; i < this.tab2.table.tableConfig.length; i++) {
+            exportTitle1.push(this.tab2.table.tableConfig[i].label)
+            for (let j = 0; j < this.tab2.table.tableConfig[i].children.length; j++) {
+              exportTitle2.push(this.tab2.table.tableConfig[i].children[j].label)
+              for(let a = 0;a<this.tab2.table.tableConfig[i].children[j].children.length;a++){
+                exportTitle3.push(this.tab2.table.tableConfig[i].children[j].children[a].label)
+                filterValArr.push(this.tab2.table.tableConfig[i].children[j].children[a].prop)
+              }
+              // filterValArr.push(this.tab2.table.tableConfig[i].children[j].prop)
             }
           }
-        } else {
-          if(this.tab2.table.getdataListParm.parammaps.typea == ''){
+          console.log('一级标题exportTitle1', exportTitle1)
+          console.log('二级标题exportTitle2', exportTitle2)
+          console.log('三级标题exportTitle3', exportTitle3)
+          console.log('对应字段filterValArr', filterValArr)
+          var headerArr = []// 处理一级标题
+          var headerArr2 = []// 处理一级标题
+          if (this.tab2.table.getdataListParm.checked == 1) {
             for (let i = 0; i < exportTitle1.length; i++) {
               if (i > 0) {
-                headerArr.push(exportTitle1[i], '')
+                headerArr.push(exportTitle1[i], '', '', '')
               } else {
                 headerArr.push(exportTitle1[i])
               }
               if (i > 0) {
-                headerArr2.push(exportTitle2[i], '')
+                headerArr2.push(exportTitle2[i], '', '', '')
               } else {
                 headerArr2.push(exportTitle2[i])
               }
             }
-          }else{
-            headerArr = exportTitle1
-            headerArr2 = exportTitle2
+          } else {
+            if(this.tab2.table.getdataListParm.parammaps.typea == ''){
+              for (let i = 0; i < exportTitle1.length; i++) {
+                if (i > 0) {
+                  headerArr.push(exportTitle1[i], '')
+                } else {
+                  headerArr.push(exportTitle1[i])
+                }
+                if (i > 0) {
+                  headerArr2.push(exportTitle2[i], '')
+                } else {
+                  headerArr2.push(exportTitle2[i])
+                }
+              }
+            }else{
+              headerArr = exportTitle1
+              headerArr2 = exportTitle2
+            }
           }
-        }
-        console.log('headerArr', headerArr)
-        console.log('exportTitle2', exportTitle2)
-        console.log('filterValArr', filterValArr)
-        if (headerArr.length > 0) {
-          import('@/vendor/Export3Excel').then((excel) => {
-            const multiHeader = [
-              headerArr
-            ]
-            const multiHeader2 = [
-              headerArr2
-            ]
-            const tHeader = exportTitle3
-            const filterVal = filterValArr
-            const data = this.tab2.table.list.map(v => filterVal.map(j => v[j]))
-            // const data = []
-            const merges = ['A1:A1']
-            excel.export_json_to_excel({ multiHeader, multiHeader2, header: tHeader, data, filename: '用料分析-'+startTime+'-' +stopTime , merges })
-          })
-        }else{
-          import('@/vendor/Export3Excel').then((excel) => {
-            const multiHeader = [
-              headerArr
-            ]
-            const multiHeader2 = []
-            const tHeader = exportTitle2
-            const filterVal = filterValArr
-            const data = this.tab2.table.list.map(v => filterVal.map(j => v[j]))
-            // const data = []
-            // const merges = ['A1:A1']
-            const merges = []
-            excel.export_json_to_excel({ multiHeader, multiHeader2, header: tHeader, data, filename: '用料分析', merges })
-          })
+          console.log('headerArr', headerArr)
+          console.log('exportTitle2', exportTitle2)
+          console.log('filterValArr', filterValArr)
+          if (headerArr.length > 0) {
+            import('@/vendor/Export3Excel').then((excel) => {
+              const multiHeader = [
+                headerArr
+              ]
+              const multiHeader2 = [
+                headerArr2
+              ]
+              const tHeader = exportTitle3
+              const filterVal = filterValArr
+              const data = this.tab2.table.list.map(v => filterVal.map(j => v[j]))
+              // const data = []
+              const merges = ['A1:A1']
+              excel.export_json_to_excel({ multiHeader, multiHeader2, header: tHeader, data, filename: '用料分析-'+startTime+'-' +stopTime , merges })
+            })
+          }else{
+            import('@/vendor/Export3Excel').then((excel) => {
+              const multiHeader = [
+                headerArr
+              ]
+              const multiHeader2 = []
+              const tHeader = exportTitle2
+              const filterVal = filterValArr
+              const data = this.tab2.table.list.map(v => filterVal.map(j => v[j]))
+              // const data = []
+              // const merges = ['A1:A1']
+              const merges = []
+              excel.export_json_to_excel({ multiHeader, multiHeader2, header: tHeader, data, filename: '用料分析', merges })
+            })
+          }
+        }else{
+          var startTime = this.tab2.table.getdataListParm.parammaps.startTime
+          var stopTime = this.tab2.table.getdataListParm.parammaps.stopTime
+          var title = '用料分析-'+startTime+'-' +stopTime
+          var tHeader = []
+          var filterVal = []
+          for (let i = 0; i < this.tableColumns.length; i++) {
+            tHeader.push(this.tableColumns[i].label)
+            filterVal.push(this.tableColumns[i].prop)
+          }
+          var excelDatas = [
+            {
+              tHeader: tHeader,
+              filterVal: filterVal,
+              tableDatas: this.tableData,
+              sheetName: 'Sheet'
+            }
+          ]
+          json2excel(excelDatas, title, true, 'xlsx')
         }
       } else if (item == 'tab3') {
         console.log('价格分析导出')