<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="仓库编码" prop="warehouseCode">
				<el-input
					v-model="queryParams.warehouseCode"
					placeholder="请输入仓库编码"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="库区编码" prop="areaCode">
				<el-input
					v-model="queryParams.areaCode"
					placeholder="请输入库区编码"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="货位编码" prop="locationCode">
      	<el-input
      		v-model="queryParams.locationCode"
      		placeholder="请输入货位编码"
      		clearable
      		@keyup.enter.native="handleQuery"
      	/>
      </el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['wms:location:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['wms:location:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['wms:location:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['wms:location:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="locationList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<!-- 序号 -->
      <el-table-column
        type="index"
        width="90"
        align="center"
        :index="indexMethod"
        label="序号">
      </el-table-column>
			<el-table-column label="仓库编码" align="center" prop="warehouseCode" />
			<el-table-column label="库区编码" align="center" prop="areaCode" />
			<el-table-column label="货位编码" align="center" prop="locationCode" />
			<el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <el-table-column prop="activeFlag" label="是否启用" align="center">
        <template slot-scope="scope">
          {{ scope.row.activeFlag == 1 ? "是" : "否" }}
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['wms:location:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['wms:location:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改货位管理对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
						<el-form-item label="仓库编码" prop="warehouseCode">
					    <el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" style="width:300px"/>
				        </el-form-item>
					  <el-form-item label="库区编码" prop="areaCode">
							<el-input v-model="form.areaCode" placeholder="请输入库区编码" style="width:300px"/>
						</el-form-item>
						</el-col>
						 </el-row>
               <el-form-item label="货位编码" prop="locationCode">
							<el-input v-model="form.locationCode" placeholder="请输入货位编码" style="width:300px"/>
						</el-form-item>
					  <el-form-item label="是否启用" prop="activeFlag" >
              <el-select v-model="form.activeFlag" placeholder="请选择是否启用"  @change="$forceUpdate()" clearable style="width:300px">
                <el-option v-for="item in options" :key="item.activeFlag" :label="item.label" :value="item.activeFlag"></el-option>
              </el-select>
            </el-form-item>
				                        <!-- <el-form-item label="上架顺序" prop="shelfOrder">
                            <el-input v-model="form.shelfOrder" placeholder="请输入上架顺序" />
                        </el-form-item> -->
 			  	<!-- <el-row :gutter="10" class="mb8">
 			    	<el-col :span="12">
      					<el-form-item label="盘点顺序" prop="checkOrder">
      						<el-input v-model="form.checkOrder" placeholder="请输入盘点顺序" />
      					</el-form-item>
           			</el-col>
           			<el-col :span="12">
             			<el-form-item label="拣货顺序" prop="pickOrder">
             				<el-input v-model="form.pickOrder" placeholder="请输入拣货顺序" />
             			</el-form-item>
           			</el-col>
        		</el-row> -->
		 		<!-- <el-row :gutter="10" class="mb8">
			    	<el-col :span="12">
            			<el-form-item label="货位使用" prop="locationUse">
							<el-input v-model="form.locationUse" placeholder="请输入货位使用" />
						</el-form-item>
          			</el-col>
          			<el-col :span="12">
						<el-form-item label="是否允许拣货" prop="pickFlag">
							<el-input v-model="form.pickFlag" placeholder="请输入是否允许拣货" />
						</el-form-item>
         			</el-col>
        		</el-row>
 			 	<el-row :gutter="10" class="mb8">
 			    	<el-col :span="12">
						<el-form-item label="是否开启库内交接" prop="isOpenKnFlag">
							<el-input v-model="form.isOpenKnFlag" placeholder="请输入是否开启库内交接" />
						</el-form-item>
           			</el-col>
           			<el-col :span="12">
						<el-form-item label="是否开启库内交接" prop="isOpenKnFlag">
							<el-input v-model="form.isOpenKnFlag" placeholder="请输入是否开启库内交接" />
						</el-form-item>
           			</el-col>
         		</el-row> -->
				<!-- <el-form-item label="货位属性" prop="locationAttr">
					<el-input v-model="form.locationAttr" placeholder="请输入货位属性" />
				</el-form-item>
				<el-form-item label="周转需求" prop="turnDemand">
					<el-input v-model="form.turnDemand" placeholder="请输入周转需求" />
				</el-form-item>
				<el-form-item label="库存环境" prop="stockEnv">
					<el-input v-model="form.stockEnv" placeholder="请输入库存环境" />
				</el-form-item>
				<el-form-item label="仓库编码" prop="warehouseCode">
					<el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
				</el-form-item>
				<el-form-item label="区域编码" prop="regionCode">
					<el-input v-model="form.regionCode" placeholder="请输入区域编码" />
				</el-form-item>
				<el-form-item label="库区编码" prop="areaCode">
					<el-input v-model="form.areaCode" placeholder="请输入库区编码" />
				</el-form-item>
				<el-form-item label="校验码" prop="checkCode">
					<el-input v-model="form.checkCode" placeholder="请输入校验码" />
				</el-form-item>
				<el-form-item label="工作区" prop="workArea">
					<el-input v-model="form.workArea" placeholder="请输入工作区" />
				</el-form-item>
				<el-form-item label="端口1" prop="port1">
					<el-input v-model="form.port1" placeholder="请输入端口1" />
				</el-form-item>
				<el-form-item label="端口2" prop="port2">
					<el-input v-model="form.port2" placeholder="请输入端口2" />
				</el-form-item>
				<el-form-item label="端口3" prop="port3">
					<el-input v-model="form.port3" placeholder="请输入端口3" />
				</el-form-item>
				<el-form-item label="体积限制" prop="volumeLimit">
					<el-input v-model="form.volumeLimit" placeholder="请输入体积限制" />
				</el-form-item>
				<el-form-item label="重量限制" prop="weightLimit">
					<el-input v-model="form.weightLimit" placeholder="请输入重量限制" />
				</el-form-item>
				<el-form-item label="箱数限制*" prop="boxLimit">
					<el-input v-model="form.boxLimit" placeholder="请输入箱数限制*" />
				</el-form-item>
				<el-form-item label="数量限制" prop="qtyLimit">
					<el-input v-model="form.qtyLimit" placeholder="请输入数量限制" />
				</el-form-item>
				<el-form-item label="托盘限制*" prop="palletLimit">
					<el-input v-model="form.palletLimit" placeholder="请输入托盘限制*" />
				</el-form-item>
				<el-form-item label="长度" prop="length">
					<el-input v-model="form.length" placeholder="请输入长度" />
				</el-form-item>
				<el-form-item label="宽度" prop="width">
					<el-input v-model="form.width" placeholder="请输入宽度" />
				</el-form-item>
				<el-form-item label="高度" prop="height">
					<el-input v-model="form.height" placeholder="请输入高度" />
				</el-form-item>
				<el-form-item label="X坐标" prop="xCoordinate">
					<el-input v-model="form.xCoordinate" placeholder="请输入X坐标" />
				</el-form-item>
				<el-form-item label="Y坐标" prop="yCoordinate">
					<el-input v-model="form.yCoordinate" placeholder="请输入Y坐标" />
				</el-form-item>
				<el-form-item label="Z坐标" prop="zCoordinate">
					<el-input v-model="form.zCoordinate" placeholder="请输入Z坐标" />
				</el-form-item>
				<el-form-item label="X像素" prop="xPixels">
					<el-input v-model="form.xPixels" placeholder="请输入X像素" />
				</el-form-item>
				<el-form-item label="Y像素" prop="yPixels">
					<el-input v-model="form.yPixels" placeholder="请输入Y像素" />
				</el-form-item>
				<el-form-item label="Z像素" prop="zPixels">
					<el-input v-model="form.zPixels" placeholder="请输入Z像素" />
				</el-form-item>
				<el-form-item label="排" prop="locRow">
					<el-input v-model="form.locRow" placeholder="请输入排" />
				</el-form-item>
				<el-form-item label="层数" prop="layerNum">
					<el-input v-model="form.layerNum" placeholder="请输入层数" />
				</el-form-item>
				<el-form-item label="列" prop="locColumn">
					<el-input v-model="form.locColumn" placeholder="请输入列" />
				</el-form-item>
				<el-form-item label="巷道" prop="bord">
					<el-input v-model="form.bord" placeholder="请输入巷道" />
				</el-form-item>
				<el-form-item label="允许混放产品" prop="productMix">
					<el-input v-model="form.productMix" placeholder="请输入允许混放产品" />
				</el-form-item>
				<el-form-item label="允许混放批次" prop="batchMix">
					<el-input v-model="form.batchMix" placeholder="请输入允许混放批次" />
				</el-form-item>
				<el-form-item label="货位标志" prop="userDefined1">
					<el-input v-model="form.userDefined1" placeholder="请输入货位标志(0-普通货位 1-立体库货位)" />
				</el-form-item>
				<el-form-item label="工厂" prop="factoryCode">
					<el-input v-model="form.factoryCode" placeholder="请输入工厂" />
				</el-form-item>
			-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/wms/location";

export default {
	name: "Location",
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 货位管理表格数据
			locationList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				locationCode: null,
				shelfOrder: null,
				checkOrder: null,
				pickOrder: null,
				locationUse: null,
				pickFlag: null,
				isOpenKnFlag: null,
				locationType: null,
				locationScrapType: null,
				locationAttr: null,
				turnDemand: null,
				stockEnv: null,
				warehouseCode: null,
				regionCode: null,
				areaCode: null,
				checkCode: null,
				workArea: null,
				port1: null,
				port2: null,
				port3: null,
				volumeLimit: null,
				weightLimit: null,
				boxLimit: null,
				qtyLimit: null,
				palletLimit: null,
				length: null,
				width: null,
				height: null,
				xCoordinate: null,
				yCoordinate: null,
				zCoordinate: null,
				xPixels: null,
				yPixels: null,
				zPixels: null,
				locRow: null,
				layerNum: null,
				locColumn: null,
				bord: null,
				productMix: null,
				batchMix: null,
				ignoreId: null,
				activeFlag: null,
				userDefined1: null,
				userDefined2: null,
				userDefined3: null,
				factoryCode: null,
				syntozk: null
			},
				options: [{
          activeFlag: "1",
          label: '是'
        }, {
          activeFlag: "0",
          label: '否'
        }],
			// 表单参数
			form: {},
			// 表单校验
			rules: {
			  warehouseCode: [
      	  { required: true, message: "仓库编码不能为空", trigger: "blur" }
      	],
      	warehouseName: [
      		{ required: true, message: "仓库名称不能为空", trigger: "blur" }
      	],
			  areaCode: [
        	{ required: true, message: "库区编码不能为空", trigger: "blur" }
        ],
        areaDesc: [
        	{ required: true, message: "库区名称不能为空", trigger: "blur" }
        ],
				locationCode: [
					{ required: true, message: "货位编码不能为空", trigger: "blur" }
				],
				activeFlag: [
					{ required: true, message: "激活标记不能为空", trigger: "blur" }
				],
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
	  // 生成表头序号
    indexMethod(index) {
        return index + 1;
    },
		/** 查询货位管理列表 */
		getList() {
			this.loading = true;
			listLocation(this.queryParams).then(response => {
				this.locationList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				locationId: null,
				locationCode: null,
				shelfOrder: null,
				checkOrder: null,
				pickOrder: null,
				locationUse: null,
				pickFlag: null,
				isOpenKnFlag: null,
				locationType: null,
				locationScrapType: null,
				locationAttr: null,
				turnDemand: null,
				stockEnv: null,
				warehouseCode: null,
				regionCode: null,
				areaCode: null,
				checkCode: null,
				workArea: null,
				port1: null,
				port2: null,
				port3: null,
				volumeLimit: null,
				weightLimit: null,
				boxLimit: null,
				qtyLimit: null,
				palletLimit: null,
				length: null,
				width: null,
				height: null,
				xCoordinate: null,
				yCoordinate: null,
				zCoordinate: null,
				xPixels: null,
				yPixels: null,
				zPixels: null,
				locRow: null,
				layerNum: null,
				locColumn: null,
				bord: null,
				productMix: null,
				batchMix: null,
				ignoreId: null,
				activeFlag: null,
				userDefined1: null,
				userDefined2: null,
				userDefined3: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
				factoryCode: null,
				syntozk: null
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.locationId)
			this.single = selection.length!==1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加货位管理";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const locationId = row.locationId || this.ids
			getLocation(locationId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改货位管理";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.locationId != null) {
						updateLocation(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addLocation(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const locationIds = row.locationId || this.ids;
			this.$modal.confirm('是否确认删除货位管理编号为"' + locationIds + '"的数据项？').then(function() {
				return delLocation(locationIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('wms/location/export', {
				...this.queryParams
			}, `location_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
