MingJinWave_vue/src/view/ware/store.vue

<template>
	<div id='store'>
		<el-row>
			<el-col :span="10">
				<el-select v-model="query.wareId" size="small" style="margin-left: 5px; width: 200px" clearable placeholder="请选择库房" @change="change">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="query.areaId" size="small" style="margin-left: 5px; width: 100px" clearable placeholder="请选择区域" @change="changeArea">
					<el-option v-for="item in optionsArea" :key="item.id" :label="item.name" :value="item.code">
					</el-option>
				</el-select>
				<el-input v-model="query.stackId" size="small" placeholder="垛位" style="margin-left: 5px; width: 100px;"></el-input>
				<el-button type="info" @click="search" size="small">查询</el-button>
				<el-checkbox :v-model="showStoreLayer" size="small" @change="changeShowLayout">显示库图</el-checkbox>
			</el-col>
			 <el-col :span="10">
				<el-button size="small" type="primary"  @click="handleImport">导入</el-button>
				<el-button size="small" type="primary" @click="handleDownload">下载模板</el-button>
				<el-button size="small" type="success" @click="showIn">入库</el-button>
				<el-button size="small" type="danger" @click="handleInBack" :disabled="backAble">取消入库</el-button>
				<el-button type="primary" size="small" @click="showDistribution">配货</el-button>
				<el-button type="primary" size="small" @click="showOut">出库</el-button>
			</el-col>
			<el-col :span="2">
				<el-row style=" margin:10px;">
				</el-row>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="showStoreLayerSpanA">
				<div id="wareLayout" style=" margin:10px;width:700px; height: 550px;background-color: #DCDCDC;  float:left;"></div>
				<el-table :data="tableData" v-loading="tableDataLoading" border ref="multipleTable" @select="handleTableSelect"
				 :row-class-name="tableRowClassName" @select-all = "selectAll">
					<!-- //@selection-change="handleTableSelectionChange" -->
					<el-table-column type="selection" width="40" header-align="center" align="center"></el-table-column>
					<el-table-column prop="layer" label="层数" width="60" show-overflow-tooltip header-align="center" align="center">
					</el-table-column>
					<el-table-column prop="stack.name" label="垛位" width="60" show-overflow-tooltip header-align="center" align="center">
					</el-table-column>
					<el-table-column prop="material.name" label="货物品名" width="100" show-overflow-tooltip header-align="center" align="center">
					</el-table-column>
					<el-table-column prop="ordNo" label="订单号" width="180" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="contractNo" label="合约号" width="180" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="material.standard" label="材质" width="100" show-overflow-tooltip header-align="center" align="center">
					</el-table-column>
					<el-table-column prop="plateNo" label="钢板号" width="200" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="model" label="规格型号" width="160" show-overflow-tooltip header-align="center" align="center">
					</el-table-column>
					<el-table-column prop="count" label="数量" width="120" show-overflow-tooltip align="right" header-align="center">
					</el-table-column>
					<el-table-column prop="weight" label="重量" width="120" show-overflow-tooltip align="right" header-align="center">
					</el-table-column>
					<el-table-column prop="customer.name" label="订单客户" width="300" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="receiveAddress" label="收货地址" width="300" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="fkComponyId" label="客户名称" width="300" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="carNo" label="车号" width="150" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="productionPlace" label="产地" width="250" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="remark1" label="垛位备注" width="250" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="tallyPeople" label="吊装工" width="250" show-overflow-tooltip header-align="center">
				    </el-table-column>
					<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="addTime" label="入库时间" width="200" show-overflow-tooltip header-align="center">
					</el-table-column>
					<el-table-column prop="lockFlag" label="锁定" v-if="false" width="200" show-overflow-tooltip header-align="center">
					</el-table-column>

				</el-table>
			</el-col>
			<el-col :span="showStoreLayerSpanB">
				<div id="storeLayer" :style="'width:'+storeLayerWidth+'px;height:'+ storeLayerHeight +'px;margin:10px;background-color: #DCDCDC; float:left;position:relative;'"></div>
			</el-col>
			<el-col :span="4">
				<el-row style=" margin:10px;">
					<el-button type="primary" size="small" @click="handleSelect">选中</el-button>
				</el-row>
				<el-row style=" margin:10px;" v-if="isLayerShow">
					<el-button type="primary" size="small" @click="handleTop">置顶</el-button>
				</el-row>
				<el-row style=" margin:10px;" v-if="isLayerShow">

					<el-input v-model="upStep" size="small" style="float: left;width: 50px;" >上移</el-input>
					<el-button size="small" style="float: left;" type="primary" @click="handleUp">上移</el-button>

				</el-row>
				<el-row style=" margin:10px;" v-if="isLayerShow">
					<el-input v-model="downStep" size="small" style="float: left;width: 50px;" >上移</el-input>
					<el-button size="small" style="float: left;" type="primary" @click="handleDown">下移</el-button>
				</el-row>
				<el-row style=" margin:10px;">
					<el-button type="primary" size="small" @click="handleMove">转移</el-button>
				</el-row>
				<el-row style=" margin:10px;">
					<el-button type="primary" size="small" @click="handleSplit">拆分</el-button>
				</el-row>
				<el-row style=" margin:10px;">
					<el-button type="primary" size="small" @click="handleCombine">合并</el-button>
				</el-row>
				<el-row style=" margin:10px;">
					<el-button type="primary" size="small" @click="showDeficit">盘亏</el-button>
				</el-row>
			</el-col>
		</el-row>

		<el-dialog title="客户明细" :visible.sync="splitDialogVisible" width="500px">
			<el-form :model="split" label-width="100px">
				<el-form-item label="原始数量">
					<el-input v-model="split.originalCount" disabled></el-input>
				</el-form-item>
				<el-form-item label="原始重量">
					<el-input v-model="split.originalWeight" disabled></el-input>
				</el-form-item>

				<el-form-item label="拆分数量">
					<el-input v-model="split.count"></el-input>
				</el-form-item>
				<el-form-item label="拆分重量">
					<el-input v-model="split.weight"></el-input>
				</el-form-item>
				<el-form-item label="剩余数量">
					<el-input v-model="splitCount" disabled></el-input>
				</el-form-item>
				<el-form-item label="剩余重量">
					<el-input v-model="splitWeight" disabled></el-input>
				</el-form-item>
				<el-button type="success" @click="handleSplitSave">保存</el-button>
				<el-button @click="handleSplitCancelSave">取消</el-button>
			</el-form>

		</el-dialog>

		<el-dialog title="库房明细" :visible.sync="importDialogVisible" width="1000px">

			<el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
			 ref="upload" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
			 :auto-upload="false" >
				<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
				<el-button size="small" type="success" @click="inImport" :disabled="imptAble">保存</el-button>
			</el-upload>

			<el-table :data="imTableData" border>
				<el-table-column prop="产品编号" label="产品编号" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="仓库" label="仓库" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="垛位" label="垛位" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="品名" label="品名" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="材质" label="材质" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="规格" label="规格" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="数量" label="数量" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="重量" label="重量" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="入库车号" label="入库车号" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="货主" label="货主" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="收货地址" label="收货地址" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="产地" label="产地" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="计重方式" label="计重方式" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="备注" label="备注" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="订单号" label="订单号" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="合约号" label="合约号" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="垛位备注" label="垛位备注" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
			</el-table>

		</el-dialog>

		<el-dialog title="选择行" :visible.sync="selectDialogVisible" width="500px">
			<el-form>
				<el-form-item label="">
					<el-input v-model="startRow" style="width: 100px;"></el-input>
					~
					<el-input v-model="endRow" style="width: 100px;"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="success" @click="handleSelectComfirm">选中</el-button>
					<el-button @click="handleSelectCancel">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

		<el-dialog title="盘亏原因" :visible.sync="deficitDialogVisible" width="500px">
			<el-form>
				<el-form-item label="原因">
					<el-input v-model="deficitReason" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label=" ">
					<el-button type="success" @click="handleDeficitSave">保存</el-button>
					<el-button type="danger" @click="handleDeficitCancelSave">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

		<popup-stack-with-select-ware :wares="options" :fromStack="moveFromStack" ref="PopupStackWithSelectWare"
		 @receviceFromChild="receviceFromWareStack"></popup-stack-with-select-ware>
		<popup-stack :wareName="store.wareName" ref="PopupStack" @receviceFromChild="receviceFromStack"></popup-stack>

		<popup-distribution ref="PopupDistribution" @receviceFromChild="receviceFromDistreibution" :selectRows="selectRows"></popup-distribution>
		<popup-out ref="PopupOut" @receviceFromChild="receviceFromOut"></popup-out>
		<popup-in ref="PopupIn" @receviceFromChild="receviceFromIn" :wares="options" :wareId="query.wareId" :stack="moveFromStack"></popup-in>

	</div>
</template>

<script>
	import axios from '@/axios'
	import zrender from 'zrender'
	import PopupStackWithSelectWare from '@/components/PopupStackWithSelectWare.vue'
	import PopupStack from '@/components/PopupStack.vue'
	import PopupDistribution from '@/components/PopupDistribution.vue'
	import PopupOut from '@/components/PopupOut.vue'
	import PopupIn from '@/components/PopupIn.vue'

	import {
		mapState
	} from 'vuex'
	export default {

		components: {
			PopupStackWithSelectWare,
			PopupStack,
			PopupDistribution,
			PopupOut,
			PopupIn,
		},
		computed: {
			splitCount: function() {
				let result = Number(this.split.originalCount) - Number(this.split.count)
				return result
			},
			splitWeight: function() {
				let result = Number(this.split.originalWeight) - Number(this.split.weight)
				return result
			},
			...mapState({
				serverName: state => state.app.serverName,
				wareBackgroundColor: state => state.color.wareBackgroundColor,
				stackColor: state => state.color.stackColor,
				stackSelectedColor: state => state.color.stackSelectedColor,
				lockColor: state => state.color.lockColor,
			})
		},

		data() {
			return {
				upStep: 1,
				downStep: 1,
				showStoreLayer: false,
				showStoreLayerSpanA: 20,
				showStoreLayerSpanB: 0,
				storeLayerWidth: 600,
				storeLayerHeight: 300,
				imTableData: [],
				deficitDialogVisible: false,
				splitDialogVisible: false,
				importDialogVisible: false,
				disDialogVisible: false,
				selectDialogVisible: false,
				startRow: 0,
				endRow: 0,
				isLayerShow: true,
				showLayout: true,
				options: [],
				optionsArea: [],
				query: {
					wareId: '',
					areaId:'',
					stackId: ''
				},
				tableData: [],
				tableDataLoading: false,
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200],
				pageSize: 50,

				selectRows: [],
				moveStack: {},
				moveStore: {},
				isLayer: "0",
				wareStack: [], //当前选中库房的所有垛位
				moveFromStack: {}, //移除垛位
				moveToStack: {}, //移入垛位
				split: {
					originalCount: 0,
					originalWeight: 0,
					count: 0,
					weight: 0,
					remainCount: 0,
					remainWeight: 0,
				},
				store: {
					id: '',
					wareName: '',
					stackName: '',
					layer: 0,
					materialName: '',
					materialNo: '',
					standard: '',
					model: '',
					customerName: '',
					customerNo: '',
					count: '',
					weight: '',
					remark: '',
					plateNo: '',
					receiveAddress: ''
				},
				optionsWare: [],
				optionsStack: [],

				layerDisable: false,
				fileTemp: [],
				deficitReason: '',
				backAble:false,
				inAble:false,
				imptAble:false,
			}

		},
		mounted() {
			this.getWare()
		},
		methods: {
			getWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.options = response.data.data
					//console.log("getWare() :" + JSON.stringify(this.options))
					if (response.data.data.length == 1) {
						this.query.wareId = response.data.data[0].id
						this.getAllStackByWareId(this.query.wareId)
						this.getArea()
					}
				});
			},
			getArea() {
				var url = 'MaintArea/queryAll.do'
      			var param = {
          			wareId: this.query.wareId
        		}
      			axios.get(url, param).then(response => {
      				this.optionsArea = response.data.data
				});
			},
			change(val) {
				this.query.areaId = ""
				if (val != '') {
					this.getAllStackByWareId(val)
				}
				this.getArea()
			},
			changeArea(val) {
				if (val != '') {
					this.getAllStackByWareId(val)
				}
			},
			getAllStackByWareId() {
				var url = 'MaintStack/queryByWareId.do'
				var param = {
					wareId: this.query.wareId,
					areaId: this.query.areaId
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.wareStack = response.data.data
						this.drawWareLayout(response.data.data)
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			drawWareLayout(data) {
				this.moveStack = zrender.init(document.getElementById('wareLayout'));
				for (let i = 0; i < data.length; i++) {
					if(data[i].onStackAmt == 0 ){
						var rect = new zrender.Rect({
							shape: {
								x: data[i].stackX, // * 600 / data[i].ware.width,
								y: data[i].stackY, // * 300 / data[i].ware.height,
								width: data[i].width, // * 600 / data[i].ware.width,
								height: data[i].height, // * 300 / data[i].ware.height,
							},
							style: {
								text: data[i].name,
								textAlign: 'center',
								textVerticalAlign: 'middle',
								fill: this.stackColor,
								stroke: '#000000',

							}
						})
					}else{
						var rect = new zrender.Rect({
							shape: {
								x: data[i].stackX, // * 600 / data[i].ware.width,
								y: data[i].stackY, // * 300 / data[i].ware.height,
								width: data[i].width, // * 600 / data[i].ware.width,
								height: data[i].height, // * 300 / data[i].ware.height,
							},
							style: {
								text: data[i].name,
								textAlign: 'center',
								textVerticalAlign: 'middle',
								fill: '#97FFFF',
								stroke: '#000000',

							}
						})
					}
					rect.on('click', () => {
						this.moveFromStack = data[i]
						this.query.stackId = data[i].name
						this.isLayer = data[i].isLayer
						this.getStoreByStackId()


						this.setStackColor()
						this.setMoveButton()
					});
					this.moveStack.add(rect);
				}

			},


			getStoreByStackId(moveSelect) {
				this.tableDataLoading = true
				var url = 'WareStore/queryByWareIdStackId.do'
				var param = {
					wareId: this.query.wareId,
					stackId: this.moveFromStack.id
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data
						this.selectRows = []
						if (this.isLayer == '0') {
							this.drawStoreNoLayer(response.data.data)
						} else if (this.isLayer == '1') {    //1是A开头的，2是B开头的，3是C开头的。
							this.drawStoreAutoLayer(response.data.data)
						} else if (this.isLayer == '2') {
							this.drawStoreManulLayer(response.data.data)
						}
						if (moveSelect) {
							this.$refs.multipleTable.clearSelection();
							for (let i = 0; i < this.tableData.length; i++) {
								for (let j = 0; j < moveSelect.length; j++) {
									if (moveSelect[j].layer === this.tableData[i].layer) {
										this.selectRows.push(this.tableData[i])
									}
								}
							}
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})

						}
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
					this.tableDataLoading = false
				});
			},
			drawStoreAutoLayer(data) {
				var height = 0;
				var plateLength = 0
				var plateWidth = 0
				var plateHeight = 0
				var firstStarIndex = 0
				var secondStarindex = 0
				var totalheight = 0

				height = (data.length + 1) * 20
				if (height < 300) {
					height = 300
				}

				this.storeLayerWidth = 600
				this.storeLayerHeight = height
				this.moveStore = zrender.init(document.getElementById('storeLayer'), {
					'width': this.storeLayerWidth,
					'height': this.storeLayerHeight
				});
				for (let i = 0; i < data.length; i++) {
					firstStarIndex = data[i].model.substring(0, data[i].model.lastIndexOf("*")).lastIndexOf("*")
					secondStarindex = data[i].model.lastIndexOf("*")
					plateLength = data[i].model.substring(0, firstStarIndex)
					plateWidth = data[i].model.substring(firstStarIndex + 1, secondStarindex)
					plateHeight = data[i].model.substring(secondStarindex + 1, data[i].model.length)
					plateHeight = 15
					totalheight = totalheight * 1 + plateHeight * 1 + 5

					var color = ''
					if (data[i].lockFlag == '1') {
						color = this.lockColor
					} else {
						color = this.stackColor
					}


					var rect = new zrender.Rect({
						shape: {
							x: (600 - plateWidth/8) / 2, // data[i].ware.width,
							y: totalheight, // i * 30, // data[i].ware.height,
							width: plateWidth/8 , //* 600 / data[i].ware.width,
							height: plateHeight //* 300 / data[i].ware.height,
						},
						style: {
							text: data[i].material.name + '   ' + data[i].plateNo + '   ' + data[i].model,
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: color,
							stroke: '#000000',
						},
					}).on('click', (e) => {
						if (e.target.style.fill != this.stackSelectedColor) {
							if (this.tableData[i].lockFlag == '1') {
								this.$message({
									type: 'error',
									message: '该行已被配货锁定',
								});
							} else {
								this.selectRows.push(this.tableData[i])
								this.$nextTick(() => {
									this.toggleSelection(this.selectRows, true)
									this.setLayerColor()
								})
							}

						} else {
							for (var j = 0; j < this.selectRows.length; j++) {
								if (this.selectRows[j] === this.tableData[i]) {
									this.selectRows.splice(j, 1);
								}
							}
							this.$nextTick(() => {
								this.toggleSelection([this.tableData[i]], false)
								this.setLayerColor()
							})
						}
					});

					this.moveStore.add(rect);
				}
			},
			drawStoreManulLayer(data) {
				var totalLayer = 0
				var curLayer = -1;
				for (let i = 0; i < data.length; i++) {
					if (curLayer != data[i].layer) {
						curLayer = data[i].layer
						totalLayer += 1
					}
				}
				var height = totalLayer * 65
				if (height < 300) {
					height = 300
				}
				this.storeLayerWidth = 600
				this.storeLayerHeight = height
				this.moveStore = zrender.init(document.getElementById('storeLayer'), {
					'width': this.storeLayerWidth,
					'height': this.storeLayerHeight
				});
				var curRow = 0
				var curCol = 0
				curLayer = -1
				for (let i = 0; i < data.length; i++) {
					if (curLayer != data[i].layer) {
						curLayer = data[i].layer
						curRow += 1
						curCol = 1
					} else {
						curCol += 1
					}
					var color = ''
					if (data[i].lockFlag == '1') {
						color = this.lockColor
					} else {
						color = this.stackColor
					}
					var rect = new zrender.Rect({
						shape: {
							x: 60 * (curCol - 1), // data[i].ware.width,
							y: 60 * (curRow - 1) + 5 * curRow, // data[i].ware.height,
							width: 60, //* 600 / data[i].ware.width,
							height: 60 //* 300 / data[i].ware.height,
						},
						style: {
							text: data[i].materialName + ' \n' + data[i].weight + '吨\n' + data[i].count + '件',
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: color,
							stroke: '#000000',

						},

					})
					rect.on('click', (e) => {
						if (e.target.style.fill == this.stackColor) {
							this.selectRows.push(this.tableData[i])
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})
						} else {
							for (var j = 0; j < this.selectRows.length; j++) {
								if (this.selectRows[j] === this.tableData[i]) {
									this.selectRows.splice(j, 1);
								}
							}
							this.$nextTick(() => {
								this.toggleSelection([this.tableData[i]], false)
								this.setLayerColor()
							})
						}
					});
					this.moveStore.add(rect);
				}

			},
			drawStoreNoLayer(data) {

				this.storeLayerWidth = 600
				this.storeLayerHeight = (data.length / 10 + 1) * 60
				this.moveStore = zrender.init(document.getElementById('storeLayer'), {
					'width': this.storeLayerWidth,
					'height': this.storeLayerHeight
				});
				for (let i = 0; i < data.length; i++) {
					var currentRow = parseInt(i / 10)
					var currentCol = Math.floor(i % 10)
					var color = ''
					if (data[i].lockFlag == '1') {
						color = this.lockColor
					} else {
						color = this.stackColor
					}
					var rect = new zrender.Rect({

						shape: {
							x: 60 * currentCol, // data[i].ware.width,
							y: 60 * currentRow, // data[i].ware.height,
							width: 60, //* 600 / data[i].ware.width,
							height: 60 //* 300 / data[i].ware.height,
						},
						style: {
							text: data[i].materialName + ' \n' + data[i].weight + '吨\n' + data[i].count + '件',
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: color,
							stroke: '#000000',

						},

					})
					rect.on('click', (e) => {
						if (e.target.style.fill == this.stackColor) {
							this.selectRows.push(this.tableData[i])
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})
						} else {
							for (var j = 0; j < this.selectRows.length; j++) {
								if (this.selectRows[j] === this.tableData[i]) {
									this.selectRows.splice(j, 1);
								}
							}
							this.$nextTick(() => {
								this.toggleSelection([this.tableData[i]], false)
								this.setLayerColor()
							})
						}
					});
					this.moveStore.add(rect);
				}

			},

			changeShowLayout() {
				this.showStoreLayout = !this.showStoreLayout
				if (this.showStoreLayout) {
					this.showStoreLayerSpanA = 10
					this.showStoreLayerSpanB = 10
				} else {
					this.showStoreLayerSpanA = 20
					this.showStoreLayerSpanB = 0
				}
			},
			search() {
				//this.currentPage = 1
				//this.getTableData()
			},
			handleTableSelectionChange(val) {
				this.selectRows = val
				this.setLayerColor()
			},
			toggleSelection(rows, selected) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, selected);
					});
				}
			},
			setLayerColor() {
				if (this.selectRows.length == 0) {
					for (let i = 0; i < this.moveStore.storage._roots.length; i++) {
						if (this.tableData[i].lockFlag == '1') {
							this.moveStore.storage._roots[i].attr('style', {
								fill: this.lockColor,
							})
						} else {
							this.moveStore.storage._roots[i].attr('style', {
								fill: this.stackColor,
							})
						}
					}
				} else {
					for (let i = 0; i < this.moveStore.storage._roots.length; i++) {
						for (let j = 0; j < this.selectRows.length; j++) {
							if (this.tableData[i] === this.selectRows[j]) {
								this.moveStore.storage._roots[i].attr('style', {
									fill: this.stackSelectedColor,
								})
								break;
							} else {
								if (this.tableData[i].lockFlag == '1') {
									this.moveStore.storage._roots[i].attr('style', {
										fill: this.lockColor,
									})
								} else {
									this.moveStore.storage._roots[i].attr('style', {
										fill: this.stackColor,
									})
								}
							}
						}

					}
				}
			},
			handleTop() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/top.do'
					var param = {
						json: JSON.stringify(this.selectRows),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							//this.getTableData()
							this.getStoreByStackId(response.data.data)

						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},
			handleUp() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/up.do'
					var param = {
						json: JSON.stringify(this.selectRows),
						step:this.upStep
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							//this.getTableData()
							this.getStoreByStackId(response.data.data)
						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},
			handleDown() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				}
				if (this.downStep == '') {
					this.$message({
						type: 'error',
						message: '请输入下移层数！',
					});
					return
				}

				var url = 'WareMove/down.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					step:this.downStep,
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getStoreByStackId(response.data.data)
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});

			},

			handleMove() {

				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/moveCheck.do'
					var param = {
						json: JSON.stringify(this.selectRows),
						from: JSON.stringify(this.moveFromStack),
						to: JSON.stringify(this.moveToStack),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							this.$refs.PopupStackWithSelectWare.show()
							//this.getStoreByStackId(response.data.data)

						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},
			receviceFromWareStack(stack, layer) {
				//console.log(layer)
				this.moveToStack = stack
				var url = 'WareMove/move.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					from: JSON.stringify(this.moveFromStack),
					to: JSON.stringify(this.moveToStack),
					layer: layer
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getStoreByStackId([])
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});

			},
			handleTableSelect(selection, row) {
				if (row.lockFlag == '1') { //如果已经被配货，，但是仍应该能做移动等操作。指示不能拆分，合并等。
					// this.$message({
					// 	type: 'error',
					// 	message: '该行已被配货锁定',
					// });
					// this.toggleSelection([row], false)
					// for(let i = 0;i<selection.length;i++){
					//  if(selection[i]==row){
					// 	 selection.splice(i,1)
					//  }
					// }
					this.selectRows = selection
				} else {
					this.selectRows = selection
					this.setLayerColor()
				}
			},
			setStackColor() {
				// alert("ll")
				for (let i = 0; i < this.moveStack.storage._roots.length; i++) {
					// alert(JSON.stringify(this.moveStack.storage._roots[i]))
					if (this.wareStack[i] === this.moveFromStack ) {
						this.moveStack.storage._roots[i].attr('style', {
							fill: this.stackSelectedColor,
						})
					} else if(this.wareStack[i].onStackAmt > 0) {
						this.moveStack.storage._roots[i].attr('style', {
							fill: '#97FFFF',
						})
					}else{
						this.moveStack.storage._roots[i].attr('style', {
							fill: this.stackColor,
						})
					}
				}
			},
			setMoveButton() {
				if (this.moveFromStack.isLayer == '1') {
					this.isLayerShow = true
				} else {
					this.isLayerShow = false
				}
			},
			handleSplit() {
				var isLock = false;
				if (this.selectRows.length != 1) {
					this.$message({
						type: 'error',
						message: '选择一条数据拆分！',
					});
					return
				}
				for(var i = 0 ;i < this.selectRows.length;i++){
					if(this.selectRows[i].lockFlag == "1"){
						isLock = true
					}
				}
				if(isLock){
					this.$message({
						type: 'error',
						message: '该行已被配货锁定,不能拆分',
					});
					return
				}
				// if(this.selectRows[0].count == 1){
				// 	this.$message({
				// 		type: 'error',
				// 		message: '数量为1，不允许拆分！',
				// 	});
				// 	return
				// }
				this.splitDialogVisible = true
				this.split.originalCount = this.selectRows[0].count
				this.split.originalWeight = this.selectRows[0].weight

			},
			handleSplitSave() {

				var url = 'WareSplit/split.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					splitCount: this.split.count,
					splitWeight: this.split.weight,
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.splitDialogVisible = false
						this.getStoreByStackId(null)
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});
			},
			handleSplitCancelSave() {
				this.splitDialogVisible = false
			},

			// handleOut() {
			// 	if (this.selectRows.length < 1) {
			// 		this.$message({
			// 			type: 'error',
			// 			message: '至少选择一条数据！',
			// 		});
			// 		return
			// 	} else {
			// 		var url = 'WareOut/out.do'
			// 		var param = {
			// 			json: JSON.stringify(this.selectRows),
			// 		}
			// 		axios.post(url, param).then(response => {
			// 			if (response.data.code == 0) {
			// 				this.getStoreByStackId(response.data.data)
			// 			} else {
			// 				this.$message({
			// 					type: 'error',
			// 					message: '操作失败；' + response.data.msg,
			// 				});
			// 			}
			// 		});
			// 	}
			// },
			handleImport() {
				this.importDialogVisible = true
			},
			handleDownload() {
				window.open(this.serverName.substr(0, this.serverName.lastIndexOf('/', this.serverName.lastIndexOf('/') - 1)) +
					'/thware_mj/import.xls')
			},


			handleInBack() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					this.backAble = true;
					var url = 'WareIn/back.do'
					var param = {
						json: JSON.stringify(this.selectRows),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.getStoreByStackId(response.data.data)
						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
						this.backAble = false;
					});
				}
			},


			showStack() {
				this.$refs.PopupStack.show()
			},
			receviceFromStack(stack) {
				//console.log("receviceFromStack")
				this.store.stackName = stack.name
				if (stack.isLayer == '1') {
					this.getLayer()
					this.layerDisable = false
				} else {
					this.store.layer = 0
					this.layerDisable = true
				}
			},
			showIn() {
				if (this.query.wareId == '') {
					this.$message({
						type: 'error',
						message: '请选择入库库房'
					});
					return
				}
				if (this.query.stackId == '') {
					this.$message({
						type: 'error',
						message: '请选择入库垛位'
					});
					return
				}
				this.$refs.PopupIn.show()
			},
			receviceFromIn() {
				this.getStoreByStackId()
			},

			showOut() {
				this.$refs.PopupOut.show()
			},
			receviceFromOut(customer) {
				this.getStoreByStackId()
			},

			handleExceed(file, fileList) {},
			handleChange(file, fileList) {
				this.fileTemp = file.raw
				if (this.fileTemp) {
					if ((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type ==
							'application/vnd.ms-excel')) {
						this.importfxx(this.fileTemp)
					} else {
						this.$message({
							type: 'warning',
							message: '附件格式错误，请删除后重新上传！'
						})
					}
				} else {
					this.$message({
						type: 'warning',
						message: '请上传附件！'
					})
				}

			},

			handleRemove(file, fileList) {
				this.fileTemp = null;
				this.imTableData = [];
			},

			importfxx(obj) {
				let _this = this;
				// 通过DOM取文件数据
				this.file = obj
				var rABS = false; //是否将文件读取为二进制字符串
				var f = this.file;
				var reader = new FileReader();
				//if (!FileReader.prototype.readAsBinaryString) {
				FileReader.prototype.readAsBinaryString = function(f) {
					var binary = "";
					var rABS = false; //是否将文件读取为二进制字符串
					var pt = this;
					var wb; //读取完成的数据
					var outdata;
					var reader = new FileReader();
					reader.onload = function(e) {
						var bytes = new Uint8Array(reader.result);
						var length = bytes.byteLength;
						for (var i = 0; i < length; i++) {
							binary += String.fromCharCode(bytes[i]);
						}
						var XLSX = require('xlsx');
						if (rABS) {
							wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
								type: 'base64'
							});
						} else {
							wb = XLSX.read(binary, {
								type: 'binary'
							});
						}
						outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
						// console.log(JSON.stringify(outdata))
						_this.imTableData = outdata


						// this.da = [...outdata]
						// let arr = []
						// this.da.map(v => {
						// 	let obj = {}
						// 	obj.code = v['设备ID']
						// 	obj.type = v['设备型号']
						// 	arr.push(obj)
						// })
						// return arr
					}
					reader.readAsArrayBuffer(f);
				}

				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			},


			inImport() {
				var url = 'WareIn/inImport.do'
				var json = JSON.stringify(this.imTableData)
				var param = {
					json: json
				}
				this.imptAble = true;
				// console.log(json)
				axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						this.$message({
							type: 'success',
							message: '入库成功!',
						});
						this.importDialogVisible = false
						this.imTableData = []
						this.fileTemp = null
					} else {
						this.$message({
							type: 'error',
							message: '入库失败!' + response.data.msg
						});

					}
					this.imptAble = false;
				});
			},


			handleCombine() {
				var isLock = false;
				if (this.selectRows.length < 2) {
					this.$message({
						type: 'error',
						message: '至少选择两条数据拆合并！',
					});
					return
				}
				// if (this.moveFromStack.isLayer == '1') {
				// 	this.$message({
				// 		type: 'error',
				// 		message: '分层垛位不允许合并！',
				// 	});
				// 	return
				// }
				for(var i = 0 ;i < this.selectRows.length;i++){
					if(this.selectRows[i].lockFlag == "1"){
						isLock = true
					}
				}
				if(isLock){
					this.$message({
						type: 'error',
						message: '选中行存在配货锁定,不能合并',
					});
					return
				}
				var url = 'WareCombine/combine.do'
				var param = {
					json: JSON.stringify(this.selectRows),
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.splitDialogVisible = false
						this.getStoreByStackId(null)
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});

			},
			showDeficit() {
				var isLock = false;
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				}
				for(var i = 0 ;i < this.selectRows.length;i++){
					if(this.selectRows[i].lockFlag == "1"){
						isLock = true
					}
				}
				if(isLock){
					this.$message({
						type: 'error',
						message: '该行已被配货锁定,不能盘亏',
					});
					return
				}
				this.deficitDialogVisible = true
			},
			handleDeficitSave() {
				var url = 'WareDeficit/deficit.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					reason: this.deficitReason,
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getStoreByStackId(null)
						this.deficitDialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});
			},
			handleDeficitCancelSave() {
				this.deficitDialogVisible = false
			},

			showDistribution() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'warning',
						message: '至少选择一条数据！',
					});
					return;
				}
				var isLock = false;
				for(var i = 0 ;i < this.selectRows.length;i++){
					if(this.selectRows[i].lockFlag == "1"){
						isLock = true
					}
				}
				if(isLock){
					this.$message({
						type: 'error',
						message: '选中记录中存在已配货产品,不能配车',
					});
					return
				}
				//console.log(this.selectRows.length)

				this.$refs.PopupDistribution.show()

			},
			receviceFromDistreibution() {
				this.getStoreByStackId(null)
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.lockFlag == '1') {

					return 'warning-row';
				}
				return '';
			},
			handleSelect() {
				if (this.query.stackId == '') {
					this.$message({
						type: 'error',
						message: '请选择垛位！',
					});
					return
				}
				this.selectDialogVisible = true
			},
			handleSelectComfirm() {
				if (this.endRow > this.tableData.length) {
					this.$message({
						type: 'error',
						message: '超出最大层数！',
					});
					return
				}
				if (this.endRow < this.startRow) {
					this.$message({
						type: 'error',
						message: '开始层数不得大于结束层数！',
					});
					return
				}

				for (let i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].layer >= this.startRow && this.tableData[i].layer <= this.endRow && this.tableData[i].lockFlag !=
						'1') {
						this.selectRows.push(this.tableData[i])
					}
				}
				this.toggleSelection(this.selectRows, true)
				this.setLayerColor()
				this.selectDialogVisible = false
			},

			handleSelectCancel() {
				this.selectDialogVisible = false
			},
			selectAll(selection){
				this.selectRows = selection;
			}
		}
	}
	//测试用备注信息
</script>

<style>
	.el-table .warning-row {
		background: #F08080;
	}

	.el-select-dropdown .el-scrollbar .el-scrollbar__wrap
    {
        overflow: scroll!important;
    }
	.el-upload-list__item-name{
		background-color: #9f9;
	}
	/*#store{
		zoom:1;
	}*/
</style>