<!-- 仓库-其他出库单 编辑 -->
<template>
	<div class="main-container order-mc-bg">
		<div class="sale-container">
			<!-- 打印摸版组件-->
			<prtMoled
				:printData="{
					tableData: multipleSelection,
					orderName: '其他出库单',
				}"
				:theadDate="theadDate"
				v-show="false"
			>
			</prtMoled>
			<!-- 顶部按钮组 -->
			<toolBtn :btnType="btnType" @actionhandel="actionhandel"></toolBtn>
			<!-- 列表 -->
			<div class="sale-page-body">
				<!-- 表头 -->
				<div class="sale-page-table-header" ref="getSaleTableHeader">
					<el-form :inline="true">
						<el-row class="form-row1">
							<el-col :span="20">
								<el-row :gutter="2">
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="单据编号"
										>
											<el-input
												class="f-12"
												placeholder="请输入单据编号"
												v-model.trim="search.billNo"
											></el-input>
											<div
												:data-clipboard-text="
													search.billNo
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="单据状态">
											<el-select
												clearable
												placeholder="请选择"
												v-model="search.documentStatus"
											>
												<el-option
													:key="key + index"
													:label="value"
													:value="key"
													class="f-12"
													v-for="(
														value, key, index
													) in documentStatuslist"
												></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="仓库">
											<el-select
												filterable
												placeholder="请选择"
												v-model="search.stockId"
											>
												<el-option
													:key="item.id"
													:label="item.name"
													:value="item.id"
													v-for="item in warehouseList"
												>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item
											class="Iisshow"
											label="产品"
										>
											<el-input
												class="f-12"
												placeholder="请输入物料名称/编码/SKU"
												v-model.trim="search.productKey"
											></el-input>
											<div
												:data-clipboard-text="
													search.productKey
												"
												@click="saleOrderCopy"
												class="copyBtn"
											>
												<i
													class="el-icon-document-copy"
												/>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<el-form-item label="下单日期">
											<el-date-picker
												@change="time1Chang"
												class="f-12"
												end-placeholder="结束时间"
												start-placeholder="开始时间"
												type="daterange"
												v-model="Time1"
												value-format="YYYY-MM-DD"
											></el-date-picker>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="4" class="form-row-lastcol">
								<el-row :gutter="2">
									<el-col :span="24">
										<el-form-item class="form-group1">
											<el-button
												@click="resetSearch"
												size="small"
												>重置</el-button
											>
											<el-button
												@click="searchData"
												size="small"
												type="primary"
												>搜索</el-button
											>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- 列表 -->
				<div class="sale-page-table-body">
					<el-table
						:data="tableData"
						:header-cell-class-name="headerRigthMethod"
						:header-cell-style="headerBg"
						:max-height="heightNum"
						@row-dblclick="openDetailsDB"
						@selection-change="handleSelectionChange"
						border
						class="table-box"
						element-loading-spinner="el-icon-loading"
						element-loading-text="加载中，请稍后..."
						ref="tableInfoRef"
						style="width: 100%; font-size: 12px"
						v-loading="isLoading"
					>
						<el-table-column
							align="center"
							fixed
							type="selection"
							width="40"
						/>
						<el-table-column
							align="left"
							fixed
							label="其他出库单"
							prop="billNo"
							width="189"
						>
							<template #default="scope">
								<span
									@click="jump(scope.row)"
									style="color: #4178d5"
									>{{ scope.row.billNo }}</span
								>
							</template>
						</el-table-column>
						<el-table-column
							align="left"
							label="日期"
							prop="date"
							width="100"
						/>
						<el-table-column
							align="center"
							label="单据状态"
							prop="documentStatus"
							width="96"
						/>
						<el-table-column
							align="center"
							label="单据类型"
							prop="billTypeId"
							width="100"
						/>
						<el-table-column
							align="left"
							label="物料编码"
							prop="materialNumber"
							width="180"
						/>
						<el-table-column
							align="left"
							label="规格型号(SKU)"
							prop="specification"
							width="280"
						/>
						<el-table-column
							align="left"
							label="物料名称"
							prop="materialName"
							width="150"
						/>
						<el-table-column
							align="center"
							label="单位"
							prop="unitName"
							width="100"
						/>
						<el-table-column
							align="right"
							label="实发数量"
							prop="qty"
							width="100"
						/>
						<el-table-column
							align="left"
							label="发货仓库"
							prop="stockName"
							width="140"
						/>
						<el-table-column
							align="left"
							label="客户"
							prop="customerName"
							width="170"
						/>
						<el-table-column
							align="left"
							label="客户仓库"
							prop="customerStockName"
							width="150"
						/>
					</el-table>
				</div>
			</div>
			<!-- 底部 -->
			<div class="sale-page-footer">
				<div class="footer-right">
					<el-pagination
						:currentPage="search.pageNo"
						:page-size="search.pageSize"
						:page-sizes="[50, 100, 150]"
						:total="orderTotal"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
						layout="slot,sizes, total,prev,pager, next,stockerNameer"
						popper-class="每页显示"
					>
						<span class="total-select-item">
							共选中
							<text
								style="
									text-align: center;
									color: #4178d5;
									padding: 0 1px;
								"
								>{{
									multipleSelection
										? multipleSelection.length
										: 0
								}}</text
							>行
						</span>
					</el-pagination>
				</div>
				<div class="footer-pagination-total-page">
					<span
						>共{{ Math.ceil(orderTotal / search.pageSize) }}页</span
					>
				</div>
			</div>
		</div>
		<!-- 操作结果 -->
		<el-dialog title="操作结果" v-model="dialogVisible" width="40%">
			<div class="sale-page-table-body">
				<el-table
					:data="tableInfo"
					:header-cell-class-name="headerRigthMethod"
					border
					class="table-box"
					height="300"
					id="tableInfo-table"
				>
					<el-table-column label="序号" prop="date" width="50">
						<template #default="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="单据订单号"
						prop="orderNo"
						width="200"
					></el-table-column>
					<el-table-column label="指令" prop="a" width="110">
						<template #default>
							<span>{{
								actionType === 'submit'
									? '提交'
									: actionType === 'revoke'
									? '撤销'
									: actionType === 'audit'
									? '审核'
									: actionType === 'de-approval'
									? '反审'
									: actionType === 'delet'
									? '删除'
									: actionType === 'finish'
									? '完工'
									: actionType === 'close-case'
									? '结案'
									: actionType === 'de-excute-start'
									? '反执行至开工'
									: actionType === 'de-approval'
									? '反审'
									: actionType === 'delet'
									? '删除'
									: actionType === 'finish'
									? '完工'
									: actionType === 'close-case'
									? '结案'
									: actionType === 'de-excute-finish'
									? '反执行至完工'
									: ''
							}}</span>
						</template>
					</el-table-column>
					<el-table-column label="结果" width="80">
						<template #default="scope">
							<span :style="{ 'txt-Red': scope.row.isSuccess }">{{
								scope.row.isSuccess ? '成功' : '失败'
							}}</span>
						</template>
					</el-table-column>
					<el-table-column label="信息" prop="msg">
						<template #default="scope">
							<span class="txt-Red">{{ scope.row.msg }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<span
						class="f-12 ext-black-light"
						style="margin-right: 25px"
						>共{{
							tableInfo && tableInfo.length > 0
								? tableInfo.length
								: 0
						}}条</span
					>
					<el-button
						@click="
							handelhtmlToExcel('tableInfo-table', '操作结果');
							dialogVisible = false;
						"
						size="small"
						>导 出
					</el-button>
					<el-button
						@click="dialogVisible = false"
						size="small"
						type="primary"
						>关 闭</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
// import examineTop from '@/components/examineTop/index.vue';
import { mapState } from 'vuex';
import { orderCopy } from '@/utils/takeMethods';
import {
	transformTimestamp,
	exporthandel,
	htmlToExcel,
	newprintPreview,
	dateData,
} from '@/utils/pubulic.js';
import { outSheetOrderPrint } from '@/utils/printPagekey.js';
export default {
	name: 'OtherOutSheetOrder',
	// components: {
	// 	examineTop,
	// },
	data() {
		return {
			theadDate: JSON.parse(JSON.stringify(outSheetOrderPrint)), // 打印要的字段表
			orderTotal: 0,
			actionType: '', //判断点击的顶部那个按钮
			tableInfo: [], //操作结果
			isLoading: false, //表格加载数据
			documentStatuslist: [], // 单据状态
			multipleSelection: [], // 列表选中集合
			btnType: [
				'print-aterial-list',
				'save',
				'copy',
				'de-excute-finish',
				'de-excute-start',
				'close-case',
				'split-order',
				'finish',
				'push-down',
				'close',
				'de-close',
				'query',
			], // 不需要显示的顶部按钮类型
			Time1: [],
			warehouseList: [], // 仓库数据
			dialogVisible: false, // 操作弹框显示
			// 搜索条件
			search: {
				orgId: '',
				billNo: '', // 订单编号
				documentStatus: '', //单据状态
				productKey: '', //产品 物料名称/编码/SKU
				stockId: '', // 仓库
				beginDate: '', // 下单开始日期
				endDate: '', //下单结束日期
				pageNo: 1, // 页码
				pageSize: 50, // 页数
			},
			tableData: [],
			selectItem: 0,
			rowShow: false,
			heightNum: 0,
			windowHeight: 0,
			isDown: true,
		};
	},
	computed: {
		...mapState({
			orgId: (state) =>
				state && state.org && state.org.orgId ? state.org.orgId : null,
		}),
		transformTime: function () {
			return function (value) {
				return transformTimestamp(value);
			};
		},
	},
	created() {
		this.windowHeight = document.documentElement.clientHeight;
		this.heightNum =
			this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16);
		this.search.orgId = this.orgId;
		this.Init();
	},
	activated() {
		// 键盘监听事件
		document.addEventListener('keyup', this.keyupFn, false);
	},
	deactivated() {
		document.removeEventListener('keyup', this.keyupFn, false);
	},
	watch: {
		orgId(value) {
			if (value) {
				this.search.orgId = value;
				this.search.pageNo = 1;
				// 监听组织切换 ，数据初始化
				this.getwarehouse();
				this.getIoutSheetOrder();
			}
		},
	},
	methods: {
		keyupFn(e) {
			if (e.keyCode === 13) {
				// enter见搜索
				this.searchData();
			}
		},
		keyupFn(e) {
			if (e.keyCode === 13) {
				// enter见搜索
				this.searchData();
			}
		},
		// 初始化
		Init() {
			this.getwarehouse();
			this.getIoutSheetOrder();
			this.getStatus();
		},
		// 订单号 复制按钮
		saleOrderCopy() {
			orderCopy();
		},
		// 操作弹框导出
		handelhtmlToExcel(domid, title) {
			htmlToExcel(domid, title);
		},
		resetSearch() {
			this.search = {
				orgId: this.orgId,
				billNo: '', // 订单编号
				documentStatus: '', //单据状态
				productKey: '', //产品 物料名称/编码/SKU
				stockId: '', // 仓库
				beginDate: '', // 下单开始日期
				endDate: '', //下单结束日期
				pageNo: 1, // 页码
				pageSize: 50, // 页数
			};
			this.getIoutSheetOrder();
		},
		// 双击计入
		openDetailsDB(row, column) {
			let typeStr1 =
				row.documentStatus === '重新审核' ||
				row.documentStatus === '创建'
					? 'edit'
					: 'see';
			this.$router.push({
				name: 'AddOutSheetSet',
				query: { type: typeStr1, productId: row.id },
			});
		},
		// 点击生产订单查看或者是编辑
		jump(item) {
			// 只有创建和重新审核的单据才能做修改，其余都是查看
			let typeStr =
				item.documentStatus === '重新审核' ||
				item.documentStatus === '创建'
					? 'edit'
					: 'see';
			this.$router.push({
				name: 'AddOutSheetSet',
				query: { type: typeStr, productId: item.id },
			});
		},
		// 获取仓库
		getwarehouse() {
			// 获取仓库
			this.warehouseList = [];
			this.$http
				.get('SysConfig/GetWarehouseByOrg/' + this.orgId)
				.then((req) => {
					if (req.status === 200) {
						this.warehouseList = req.data;
					}
				});
		},
		// 获取需要状态列表---[单据状态，领料状态，业务状态]
		getStatus() {
			this.$http.get('Misdelivery/status/get').then((r) => {
				if (r.status === 200) {
					this.documentStatuslist = r.data.documentStatus;
				}
			});
		},
		// 获取盘点单数据
		getIoutSheetOrder() {
			this.isLoading = true;
			this.$http.post('Misdelivery/list', this.search).then((res) => {
				if (res.status === 200) {
					this.isLoading = false;
					this.tableData = res.data;
					this.orderTotal = res.totalCount;
				}
			});
		},
		// 顶部公共按钮操作
		actionhandel(type) {
			this.actionType = type;
			// 点击新增
			if (type === 'add') {
				this.$router.push({
					name: 'AddOutSheetSet',
					query: { type: 'add', id: '', sjtag: Math.random() * 36 },
				});
			}
			if (this.multipleSelection && this.multipleSelection.length > 0) {
				let nweArysize = 0;
				// 单据id集合 （有去重）
				let newArry = [
					...new Set(
						this.multipleSelection.map((item) => {
							return item.id;
						})
					),
				];
				// 取单据订单号
				let orderNoArry = [
					...new Set(
						this.multipleSelection.map((item) => {
							return item.billNo;
						})
					),
				];
				// 明细id集合 （有去重）
				let detailsIds = [
					...new Set(
						this.multipleSelection.map((item) => {
							return item.detailId;
						})
					),
				];
				// 单据id 集合的size
				nweArysize = new Set(
					this.multipleSelection.map((item) => {
						return item.id;
					})
				).size;
				// 点击提交
				if (type === 'submit') {
					this.toolarFn('Misdelivery/submit/status', newArry);
				}
				// 点击撤销
				if (type === 'revoke') {
					this.toolarFn('Misdelivery/revoke', newArry);
				}
				// 点击审核
				if (type === 'audit') {
					this.toolarFn('Misdelivery/check', newArry);
				}
				// 点击反审核
				if (type === 'de-approval') {
					this.toolarFn('Misdelivery/recheck', newArry);
				}
				// 点击删除
				if (type === 'delet') {
					this.toolarFn('Misdelivery/delete', newArry);
				}
				//点击打印
				if (type === 'print-brower') {
					if (orderNoArry.length > 1) {
						this.$message.error({
							message: '一次仅能选择一个出库单号进行打印',
							showClose: true,
						});
						return;
					}
					if (
						this.multipleSelection.filter((it) => {
							return it.documentStatus !== '已审核';
						}).length > 0
					) {
						this.$message.error({
							message: '仅可打印已审核的单据',
							showClose: true,
						});
					} else {
						this.multipleSelection = this.multipleSelection.sort(
							dateData('date', false)
						);
						setTimeout(() => {
							newprintPreview('其他出库单');
						}, 200);
					}
				}
			} else {
				//按列表字段导出,点击全部导出
				if (
					type !== 'add' &&
					type !== 'refresh' &&
					type !== 'list-export' &&
					type !== 'all-export'
				) {
					this.$message.error({
						message: '请先勾选',
						showClose: true,
					});
				}
			}
			if (type === 'list-export' || type === 'all-export') {
				exporthandel(
					type === 'list-export'
						? 'Misdelivery/Export'
						: 'Misdelivery/ExportAll',
					this.search
				);
			}
			// 点击刷新
			if (type === 'refresh') {
				this.getIoutSheetOrder();
			}
		},
		// 顶部操作方法-公共部分封装下
		toolarFn(path, newArry, detailsIds) {
			let formdata = detailsIds
				? {
						ids: newArry,
						detailsIds: detailsIds,
				  }
				: { ids: newArry };
			this.$http.post(path, formdata).then((res) => {
				if (res.status === 200) {
					this.dialogVisible = true;
					this.tableInfo = res.data;
					this.search.pageNo = 1;
					this.getIoutSheetOrder();
				}
			});
		},
		// 下单日期改变
		time1Chang(value) {
			if (value && value.length > 0) {
				this.search.beginDate = value[0];
				this.search.endDate = value[1];
			} else {
				this.search.beginDate = '';
				this.search.endDate = '';
			}
		},
		// 搜索事件
		searchData() {
			this.search.pageNo = 1;
			this.getIoutSheetOrder();
		},
		//控制表头颜色
		headerBg({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 17 || columnIndex === 18) {
				return `text-align:right!important;`;
			}
		},
		headerRigthMethod({ row, column, rowIndex, columnIndex }) {
			return 'headerRight';
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleSizeChange(val) {
			this.search.pageNo = 1;
			this.search.pageSize = val;
			this.Init();
		},
		handleCurrentChange(val) {
			this.search.pageNo = val;
			this.Init();
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>
