Merge pull request '1' (#362) from projects/mesxc-zjl into projects/mesxc-test

Reviewed-on: #362

src/views/report/Product/monthly.vue

@@ -7,24 +7,47 @@
 -->
 <template>
 	<div class="weekly">
-    <el-form :inline="true" :model="listQuery" class="blueTip">
+		<el-form
-      <el-form-item label="月" prop="reportTime">
+			:inline="true"
-        <el-date-picker v-model="listQuery.time" value-format="yyyy-MM-dd HH:mm:ss" type="month" size="small" placeholder="选择月">
+			:model="listQuery"
-        </el-date-picker>
+			class="blueTip">
+			<el-form-item
+				label="月"
+				prop="reportTime">
+				<el-date-picker
+					v-model="listQuery.time"
+					value-format="yyyy-MM-dd HH:mm:ss"
+					type="month"
+					size="small"
+					placeholder="选择月"></el-date-picker>
 			</el-form-item>
-      <el-button v-if="this.$auth.hasPermi('base:report-auto-production:query')" type="primary" size="small" @click="getList">
+			<el-button
+				v-if="this.$auth.hasPermi('base:report-auto-production:query')"
+				type="primary"
+				size="small"
+				@click="getList">
 				查询
 			</el-button>
-      <el-button v-if="this.$auth.hasPermiAnd(['base:report-auto-original-glass:export', 'base:report-auto-production:export'])" type="primary" size="small" plain
+			<el-button
-        @click="handleExport">导出</el-button>
+				v-if="
+					this.$auth.hasPermiAnd([
+						'base:report-auto-original-glass:export',
+						'base:report-auto-production:export',
+					])
+				"
+				type="primary"
+				size="small"
+				plain
+				@click="handleExport">
+				导出
+			</el-button>
 		</el-form>
 		<base-table
 			:table-props="tableProps"
 			:table-data="tableData"
-      :span-method="mergeColumnHandler"
+			:span-method="objectSpanMethod1"
 			@emitFun="handleEmitFun"
-			:max-height="tableH"
+			:max-height="tableH" />
-		/>
 		<!-- <monthWeek v-if="glassWeekShow" ref="monthWeek" :product="false" :params="listQuery" />
     <proMonth v-if="proWeekShow" ref="proMonth" :product="false" :params="listQuery" /> -->
 	</div>
@@ -34,9 +57,9 @@
 // import monthWeek from '../glass/month.vue'
 // import proMonth from '../productionMonthReport/index.vue'
 import { productionMonthY } from '@/api/report/glass';
-import { parseTime } from '../../core/mixins/code-filter'
+import { parseTime } from '../../core/mixins/code-filter';
-import FileSaver from 'file-saver'
+import FileSaver from 'file-saver';
-import * as XLSX from 'xlsx/xlsx.mjs'
+import * as XLSX from 'xlsx/xlsx.mjs';
 import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 
 export default {
@@ -46,7 +69,7 @@ export default {
 		return {
 			heightNum: 240,
 			listQuery: {
-				time: parseTime(new Date())
+				time: parseTime(new Date()),
 			},
 			// startTimeStamp: '',
 			// endTimeStamp: '',
@@ -57,15 +80,16 @@ export default {
 			tableProps: [
 				{
 					prop: 'lineName',
-          label: ''
+					label: '',
 				},
 				{
 					prop: 'paramsName',
-          label: ''
+					label: '',
-        }
+				},
 			],
-      resData: []
+			resData: [],
-    }
+			span1: [], //表格1的合并规则
+		};
 	},
 	created() {
 		// this.getCurrentMonthFirst()
@@ -73,93 +97,111 @@ export default {
 		// this.proWeekShow = true
 	},
 	mounted() {
-    this.getList()
+		this.getList();
 	},
 	methods: {
-    /** 合并table列的规则 */
-		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
-			// if (columnIndex == 0 || columnIndex == 1) {
-			// 	if (this.spanInfo[rowIndex]) {
-			// 		return [
-			// 			this.spanInfo[rowIndex], // row span
-			// 			1, // col span
-			// 		];
-			// 	} else {
-			// 		return [0, 0];
-			// 	}
-			// }
-		},
 		async getList() {
-      this.tableData = []
+			this.tableData = [];
 			this.tableProps = [
 				{
 					prop: 'lineName',
-          label: ''
+					label: '',
+					fixed: true,
 				},
 				{
 					prop: 'paramsName',
-          label: ''
+					label: '',
-        }
+					fixed: true,
-      ]
+				},
-      await productionMonthY(this.listQuery).then(res => {
+			];
-        this.resData = res.data
+			await productionMonthY(this.listQuery).then((res) => {
+				this.resData = res.data;
 				// 设置表头
-        Object.keys(this.resData).forEach(item => {
+				Object.keys(this.resData).forEach((item) => {
 					this.tableProps.push({
 						prop: item,
 						label: item,
-            'show-overflow-tooltip': true
+						'show-overflow-tooltip': true,
-          })
+					});
-        })
+				});
-        this.buildTableData()
+				this.buildTableData(this.resData);
-      })
+			});
 		},
 		// 设置表格数据
-    buildTableData() {
+		buildTableData(data) {
-      const temp = Object.values(this.resData)
+			let keys = Object.keys(data);
-      console.log('temp', temp)
+			let tempData = [];
-      const dataArray = []
+			let subKeys = Object.keys(data[keys[0]]);
-      // Object.entries(this.resData).forEach(en => {
+			let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
-      //   console.log('你好', en)
+			for (let i = 0; i < keys.length; i++) {
-        // const date = en[0]
+				if (i === 0) {
-        // let valueArray = []
+					for (let j = 0; j < subKeys.length; j++) {
-        // Object.entries(en[1]).forEach((values, sequence) => {
+						for (let k = 0; k < sub2Keys.length; k++) {
-        //   let yValue = {}
+							let obj = {};
-        //   yValue['line'] = values[0]
+							obj.lineName = subKeys[j];
-        //   Object.entries(values[1]).forEach((lastV, index) => {
+							obj.paramsName = sub2Keys[k];
-        //     console.log(lastV)
+							obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
-        //     const tempValue = {}
+							tempData.push(obj);
-        //     if (values[0] === yValue['line']) {
+						}
-        //       tempValue[values[0]] = lastV[1]
+					}
-        //     }
+				} else {
-        //     valueArray.push(tempValue)
+					for (let j = 0; j < subKeys.length; j++) {
-        //   })
+						for (let k = 0; k < sub2Keys.length; k++) {
-        //   yValue[date+'-'+sequence] = valueArray
+							for (let v = 0; v < tempData.length; v++) {
-        //   dataArray.push(yValue)
+								if (
-        // })
+									tempData[v].lineName === subKeys[j] &&
-      // })
+									tempData[v].paramsName === sub2Keys[k]
-      // for (let key in temp) {
+								) {
-      //   console.log('你好', temp[key])
+									tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
-      // }
+								}
-      // 产线
+							}
-      Object.keys(temp[0]).forEach(item => {
+						}
-        // 规格循环
+					}
-        Object.keys(Object.values(temp[0])[0]).forEach(it => {
+				}
-          const row = {
+			}
-            lineName: item,
+			this.tableData = tempData;
-            paramsName: it
+			this.getSpanArr(this.tableData);
+		},
+		// 获取合并行
+		getSpanArr(data) {
+			this.span1 = [];
+			for (var i = 0; i < data.length; i++) {
+				if (i === 0) {
+					this.span1.push(1);
+					this.index = 0;
+				} else {
+					if (data[i].lineName === data[i - 1].lineName) {
+						this.span1[this.index] += 1;
+						this.span1.push(0);
+					} else {
+						this.span1.push(1);
+						this.index = i;
+					}
+				}
+			}
+		},
+		objectSpanMethod1({ rowIndex, columnIndex }) {
+			if (columnIndex === 0) {
+				const _row = this.span1[rowIndex];
+				return {
+					rowspan: _row,
+					colspan: 1,
+				};
 			}
-          this.tableData.push(row)
-        })
-      })
 		},
 		handleExport() {
-      const xlsxParam = { raw: true }
+			const xlsxParam = { raw: true };
-      let workbook = XLSX.utils.book_new()
+			let workbook = XLSX.utils.book_new();
-      var ws = XLSX.utils.table_to_sheet( document.querySelector('#exportTable'), xlsxParam)
+			var ws = XLSX.utils.table_to_sheet(
-      XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩月原片生产汇总')
+				document.querySelector('#exportTable'),
-      var prows = XLSX.utils.table_to_sheet( document.querySelector('#exportproductionTable'), xlsxParam)
+				xlsxParam
-      XLSX.utils.book_append_sheet(workbook, prows, '许昌安彩月成品生产汇总')
+			);
+			XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩月原片生产汇总');
+			var prows = XLSX.utils.table_to_sheet(
+				document.querySelector('#exportproductionTable'),
+				xlsxParam
+			);
+			XLSX.utils.book_append_sheet(workbook, prows, '许昌安彩月成品生产汇总');
 			let fileName = '生产数据汇总表-月报.xlsx';
 			var wbout = XLSX.write(workbook, {
 				bookType: 'xlsx',
@@ -179,23 +221,23 @@ export default {
 		},
 		handleEmitFun(payload) {
 			console.log('payload', payload);
-		}
+		},
-  }
+	},
-}
+};
 </script>
 
 <style scoped>
 .weekly {
 	padding: 16px;
 }
-.blueTip::before{
+.blueTip::before {
 	display: inline-block;
 	content: '';
 	width: 4px;
 	height: 18px;
-  background: #0B58FF;
+	background: #0b58ff;
 	border-radius: 1px;
-  margin-right: 8PX;
+	margin-right: 8px;
 	margin-top: 8px;
 	margin-left: 16px;
 }