front-end/admin-update/src/views/order/components/sel-order.vue

<template>
	<div class="sel-order">
		<!-- 抽屉 -->
		<el-drawer
			title="发货管理"
			:visible.sync="showShipManage"
			size="440px"
			:before-close="closeFn"
			custom-class="ship-draw-wrap"
		>
			<div class="ship-manage-wrap">
				<!-- 订单详情 -->
				<div class="order-info-wrap">
					<div class="order-info-left">
						<div class="info-list">
							<div class="label">订单号</div>
							<div class="val">{{ orderData.orderSn }}</div>
						</div>
						<div class="info-list">
							<div class="label">下单客户</div>
							<div class="val">{{ orderData.bookName }}</div>
						</div>
						<div class="info-list">
							<div class="label">下单时间</div>
							<div class="val">{{ orderData.addTime | formatTime }}</div>
						</div>
						<div class="info-list" v-if="!$util.isEmpty(orderData.goodsInfoList)">
							<div class="label">商品名称</div>
							<div class="val">{{ orderData.goodsInfoList[0].title }}</div>
						</div>
						<div class="info-list">
							<div class="label">金额</div>
							<div class="val">{{ orderData.actPrice }}</div>
						</div>
					</div>
					<div class="order-info-right" v-if="!$util.isEmpty(orderData.goodsInfoList)">
						<img :src="orderData.goodsInfoList[0].smallCoverUrl" alt="商品图" />
					</div>
				</div>
				<!-- 时间线 -->
				<el-timeline>
					<!-- :timestamp="activity.timestamp" -->
					<el-timeline-item v-for="(item, index) in shipData" :key="index">
						<!-- title -->
						<div class="title-wrap">
							<div class="title">{{ item.actionName }}</div>
							<div class="time" v-if="item.finishTime != 0">
								{{ item.finishTime | formatTime }}
							</div>
						</div>
						<!-- content -->
						<div class="content-wrap">
							<!-- 打单 -->
							<template v-if="item.actionName == '打单'">
								<div v-if="$util.isEmpty(item.receive) && index == 0">
									<el-button type="primary" @click="printOrderFn(index)"
										>有配送单</el-button
									>
									<el-button type="primary" @click="fillFormFn">填单</el-button>
								</div>
								<div v-else>
									<!-- <span>配送用户信息</span> -->
									<card-name
										v-if="!$util.isEmpty(item.receive)"
										:info="item.receive"
									/>
									<span v-else>配送信息未登记</span>
									<div style="margin-top: 10px" v-if="!$util.isEmpty(item.receive)">
										<el-button size="mini" @click="printOrderFn(index)">{{
											index == 0 ? '打印' : '重打'
										}}</el-button>
									</div>
								</div>
							</template>
							<!-- 发货 -->
							<template v-if="item.actionName == '发货'">
								<div v-if="item.finishTime == 0">
									<el-button type="primary" @click="sendShipFn"
										>确认发货</el-button
									>
								</div>
								<div v-else>
									<template v-if="!$util.isEmpty(item.sendInfo)">
										<div class="label-list">
											配送方：{{ item.sendInfo.sendSideName }}
										</div>
										<div class="label-list">
											距离：{{ item.sendInfo.sendDistance }}km
										</div>
										<div class="label-list">
											运费：¥{{ item.sendInfo.sendCost }}
										</div>
										<div class="label-list">
											小费：¥{{ item.sendInfo.sendTip }}
										</div>
									</template>
									<template v-else>
										<div class="label-list">
											<span class="label">配送方：</span>
											<span class="value">自己送</span>
										</div>
									</template>
								</div>
							</template>
							<!-- 送达 -->
							<template v-if="item.actionName == '送达'">
								<div v-if="item.finishTime == 0">

<el-popover
  placement="top"
  width="160"
  v-model="confirmSendVisit">
  <p>确认已送达？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="confirmSendVisit = false">取消</el-button>
    <el-button type="primary" size="mini" @click="orderReachFn">确定</el-button>
  </div>
  <el-button slot="reference" class="el-button el-button--primary" >确认送达</el-button>
</el-popover>

									<div class="prompt-text">确认后会自动通知客户已送达~</div>
								</div>
							</template>
							<!-- 订单分类 -->
							<template v-if="item.actionName == '完成'">
								<div v-if="!$util.isEmpty(item.classify)">
									<div class="label-list">
										订单分类：{{ item.classify.category }}
									</div>
									<div class="label-list">用途：{{ item.classify.usage }}</div>
								</div>
								<div v-else>
									<el-button type="primary" @click="orderClassFn"
										>订单分类</el-button
									>
								</div>
							</template>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>
		</el-drawer>
		<!-- 填单 -->
		<el-dialog
			title="填单"
			:visible.sync="orderDialog"
			:close-on-click-modal="false"
			width="1000px"
		>
			<div class="order-modal-content">
				<el-form
					:model="orderForm"
					:rules="ruleForm"
					ref="orderForm"
					label-width="100px"
					class="demo-form"
				>
					<div class="form-wrap">
						<!-- 左侧 -->
						<div class="form-left-wrap">
							<el-form-item label="收花人姓名" prop="receiveUserName">
								<el-input
									v-model="orderForm.receiveUserName"
									placeholder="请输入姓名"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="收花人电话" prop="receiveMobile">
								<el-input
									v-model="orderForm.receiveMobile"
									placeholder="请输入电话"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="收花人城市" prop="receiveProvince">
								<el-cascader
									v-model="addressArr"
									:options="addressOptions"
									:props="addressProps"
									size="small"
									@change="handleChange"
									style="width: 100%"
								></el-cascader>
							</el-form-item>
							<el-form-item label="详细地址" prop="receiveFullAddress">
								<el-autocomplete
									v-model="orderForm.receiveFullAddress"
									:fetch-suggestions="querySearchAsync"
									placeholder="请输入内容"
									@select="addressFn"
									size="small"
									style="width: 100%"
								></el-autocomplete>
								<!-- <el-input
									type="textarea"
									v-model="orderForm.receiveFullAddress"
									placeholder="小区、大厦或街道名称"
									size="small"
								></el-input> -->
							</el-form-item>
							<el-form-item label="门牌号" prop="receiveFloor">
								<el-input
									v-model="orderForm.receiveFloor"
									placeholder="楼号门牌号（选填）"
									size="small"
								></el-input>
							</el-form-item>
							<!-- <el-form-item label="商品名称" prop="adminName">
								<el-input
									v-model="orderForm.adminName"
									placeholder="填了名称看打印单就知道商品"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="商品图片" prop="adminName">
								<cl-upload v-model="orderForm.adImg"></cl-upload>
								<i class="prompt-text">有商品图看打印单就知道商品的花材和包装纸</i>
							</el-form-item> -->
						</div>
						<!-- 右侧 -->
						<div class="form-left-wrap">
							<el-form-item label="订花人电话" prop="bookMobile">
								<el-input
									v-model="orderForm.bookMobile"
									placeholder="请输入电话（选填）"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="送达时间" prop="reachTime">
								<el-date-picker
									type="date"
									placeholder="选择开始日期"
									v-model="orderForm.reachTime"
									value-format="yyyy-MM-dd"
									style="width: 100%;"
									size="small"
								></el-date-picker>
								<el-radio-group v-model="orderForm.reachPeriod">
									<el-radio label="0">上午</el-radio>
									<el-radio label="1">下午</el-radio>
									<el-radio label="2">晚上</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="带贺卡"
								><el-switch
									v-model="orderForm.needCard"
									active-value="1"
									inactive-value="0"
								></el-switch>
								<template v-if="orderForm.needCard == '1'">
									<el-input
										v-model="orderForm.cardInfo"
										placeholder="输入贺卡内容，留空将寄出空白贺卡"
										size="small"
									></el-input>
								</template>
							</el-form-item>
							<el-form-item label="其它备注" prop="remark">
								<el-input
									v-model="orderForm.remark"
									placeholder="选填"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="匿名派送"
								><el-switch
									v-model="orderForm.anonymity"
									active-value="1"
									inactive-value="0"
								></el-switch>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitOrderFn">确认</el-button>
			</div>
		</el-dialog>
		<!-- 发货弹窗 -->
		<el-dialog
			title="确认发货？"
			:visible.sync="shipDialog"
			:close-on-click-modal="false"
			width="400px"
		>
			<div class="ship-modal-content">
				<el-form
					:model="shipForm"
					:rules="shipRuleForm"
					ref="shipForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="快递代送"
						><el-switch
							v-model="shipForm.sendType"
							active-value="1"
							inactive-value="0"
						></el-switch>
					</el-form-item>
					<template v-if="shipForm.sendType == 1">
						<el-form-item label="送花时间" prop="sendTime">
							<el-time-select
								v-model="shipForm.sendTime"
								:picker-options="{
									start: '08:00',
									step: '00:10',
									end: '24:00'
								}"
								placeholder="选择时间"
								size="samll"
								style="width: 100%"
							>
							</el-time-select>
						</el-form-item>
						<el-form-item label="配送方" prop="sendSide">
							<el-select
								v-model="shipForm.sendSide"
								placeholder="请选择"
								size="samll"
								style="width: 100%"
							>
								<el-option
									v-for="item in sendSideOpt"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitShipFn">确认</el-button>
			</div>
		</el-dialog>
		<!-- 订单分类 -->
		<el-dialog
			title="订单分类"
			:visible.sync="categoryDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="category-dialog-wrap">
				<el-form
					:model="categoryForm"
					:rules="categoryRule"
					ref="categoryForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="选择分类" prop="categoryId">
						<el-radio-group v-model="categoryForm.categoryId">
							<el-radio
								border
								v-for="(item, index) in categoryData"
								:label="item.id"
								:key="index"
								size="small"
								>{{ item.categoryName }}</el-radio
							>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="选择用途" prop="usageId">
						<el-radio-group v-model="categoryForm.usageId">
							<el-radio
								border
								v-for="(item, index) in usageData"
								:label="item.id"
								:key="index"
								size="small"
								>{{ item.usageName }}</el-radio
							>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="orderClassConfirmFn">确认</el-button>
			</div>
		</el-dialog>

		<!-- 配送单 -->
		<div class="print-html">
			<table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
				<tr>
					<td style="padding: 10px;width: 100px;">配送时间：</td>
					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.reachDate }}</td>
					<td style="padding-left: 10px;width: 100px;">订单号：</td>
					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.orderSn }}</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">收花人姓名：</td>
					<td style="padding-left: 10px;width: 130px;">
						{{ deliver.data.receiveUserName }}
					</td>
					<td style="padding-left: 10px;width: 100px;">收花人电话：</td>
					<td style="padding-left: 10px;width: 130px;">
						{{ deliver.data.receiveMobile }}
					</td>
					<td style="padding-left: 10px;" colspan="2" rowspan="4">
						<div style="text-align: center;padding-top: 1px">
							<p>情人节</p>
							<img
								style="width: 100px;height: 100px;margin-bottom: 20px"
								class="cover"
								:src="deliver.data.img"
								alt=""
							/>
						</div>
					</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">收花人地址：</td>
					<td style="padding-left: 10px" colspan="3">
						{{ deliver.data.receiveFullAddress }}
					</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">祝福语：</td>
					<td style="padding-left: 10px" colspan="3">{{ deliver.data.cardInfo }}</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">订花人姓名：</td>
					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookName }}</td>
					<td style="padding-left: 10px;width: 100px;">订花人电话：</td>
					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookMobile }}</td>
				</tr>
				<tr>
					<td style="padding: 10px;width: 100px;">备注说明：</td>
					<td style="padding-left: 10px" colspan="5">{{ deliver.data.remark }}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import cardName from './card-name';

import { getLodop } from '@/utils/lodop';

export default {
	name: 'sel-order',
	components: {
		cardName
	},
	props: {
		orderData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			// draw
			showShipManage: false,
			shipData: [],
			// dialog
			// 打单信息
			relateData: {},
			confirmSendVisit:false,
			orderDialog: false,
			orderForm: {
				receiveUserName: '', // 收花人姓名；到店自提的姓名
				receiveMobile: '', // 收花人手机；到店自提的电话；
				receiveProvince: '', // 收花人省份
				receiveCity: '', // 收花人城市
				receiveAddress: '', // 收花人地址
				receiveFloor: '', // 收花人门楼号和牌号
				receiveFullAddress: '', // 收花人完整地址，从腾讯地图接口获取
				// bookName: '', // 订花人姓名
				bookMobile: '', // 订花人手机号
				reachTime: '', // 配送时间
				reachPeriod: '0', // 配送时段，0上午1下午2晚上
				needCard: '1', // 是否要贺卡 0不要 1要
				cardInfo: '', // 贺卡信息
				remark: '', // 备注
				anonymity: '0', // 是否匿名 0不 1要
				latitude: 0,
				longitude: 0
			},
			addressArr: [],
			ruleForm: {},
			addressOptions: [],
			addressProps: {
				label: 'name',
				value: 'name',
				children: 'children'
			},
			// 发货弹窗
			shipDialog: false,
			shipForm: {
				sendType: '0',
				sendTime: '',
				sendSide: ''
			},
			shipRuleForm: {},
			sendSideOpt: [
				{
					label: '达达配送',
					value: 1
				}
			],
			// 订单分类
			categoryDialog: false,
			categoryForm: {
				categoryId: '',
				usageId: ''
			},
			categoryRule: {},
			deliver: {
				visible: false,
				data: {}
			}
		};
	},
	computed: {
		...mapGetters({ categoryData: 'category' }),
		...mapGetters({ usageData: 'usage', shopInfo: 'shopInfo' })
	},
	methods: {
		init() {
			this.getDet();
			this.$service.order.orderRelate().then(res => {
				this.relateData = res;
				let region = res.region;
				let newRegion = [];
				if (region.length > 0) {
					for (let i in region) {
						newRegion.push({
							id: region[i].id,
							name: region[i].name,
							children: []
						});
						if (region[i].children && region[i].children.length > 0) {
							for (let j in region[i].children) {
								newRegion[i].children.push({
									id: region[i].children[j].id,
									name: region[i].children[j].name
								});
							}
						}
					}
				}

				this.addressOptions = newRegion;

				let shopProvince = res.shop.province || '';
				let shopCity = res.shop.city || '';
				this.addressArr = [shopProvince, shopCity];
				this.orderForm.receiveProvince = shopProvince;
				this.orderForm.receiveCity = shopCity;
				this.orderForm.receiveAddress = shopProvince + shopCity;
				this.orderForm.latitude = res.shop.shopLat || 0;
				this.orderForm.longitude = res.shop.shopLong || 0;
			});
		},
		getDet() {
			this.$service.single.orderSendDet({ id: this.orderData.id }).then(res => {
				this.shipData = res;
				this.showShipManage = true;
			});
		},
		// dialog
		querySearchAsync(queryString, cb) {
			if (!this.orderForm.receiveCity) {
				this.$message.error('请先选择收花人地址');
				cb([]);
				return false;
			}
			if (!queryString) {
				cb([]);
				return false;
			}
			this.$service.single
				.mapSuggestion({ region: this.orderForm.receiveCity, keyword: queryString })
				.then(res => {
					let newArr = res.data;
					newArr = newArr.map(e => {
						e.value = e.address;
						return e;
					});
					cb(newArr);
				});
		},
		addressFn(item) {
			this.orderForm.latitude = item.location.lat;
			this.orderForm.longitude = item.location.lng;
			this.orderForm.receiveAddress = item.title;
		},
		submitOrderFn() {
			this.$service.order
				.orderSheet({
					id: this.orderData.id,
					...this.orderForm
				})
				.then(res => {
					this.getDet();
					this.resetForm();
				});
		},
		handleChange(value) {
			console.log('value', value);
			this.orderForm.receiveProvince = value[0];
			this.orderForm.receiveCity = value[1];
			this.orderForm.receiveAddress = value[0] + value[1];
		},
		resetForm() {
			try {
				this.$refs['orderForm'].resetFields();
			} catch (e) {}
			try {
				this.$refs['shipForm'].resetFields();
			} catch (e) {}
			try {
				this.$refs['categoryForm'].resetFields();
			} catch (e) {}
			this.shipDialog = false;
			this.categoryDialog = false;
			this.orderDialog = false;
		},
		// draw
		closeFn() {
			this.showShipManage = false;
		},
		// =========================
		// 打单
		async printOrderFn(index) {
			if (index == '0') {
				await this.$service.single.printOrder({ id: this.orderData.id, option: 1 });
			}

			//this.$message.success('打单成功！');
			this.getDet();

			this.$service.order.deliver({ id: this.orderData.id }).then(res => {
				this.deliver.data = res;
				//this.printOrder();
			});
		},
		// 填单
		fillFormFn() {
			this.orderDialog = true;
		},
		// 发货
		sendShipFn() {
			this.shipDialog = true;
		},
		// 确认发货
		submitShipFn() {
			this.$service.single
				.orderDeliver({ id: this.orderData.id, option: 1, ...this.shipForm })
				.then(res => {
					this.getDet();
					// this.shipDialog = false;
					this.resetForm();
				});
		},
		// 确认送达
		orderReachFn() {
			this.$service.single.orderReach({ id: this.orderData.id, option: 1 }).then(res => {
				this.$message.success('已确认！');
				this.getDet();
				this.confirmSendVisit=false;
			    //操作栏置空
				this.$set(this.orderData, 'status', '5');
				this.$set(this.orderData, 'currentFlow', this.orderData.totalFlow);
			});
		},
		// 订单分类
		orderClassFn() {
			this.categoryDialog = true;
		},
		// 确认订单分类
		orderClassConfirmFn() {
			if (!this.categoryForm.categoryId || !this.categoryForm.usageId) {
				this.$message.error('请先选择分类或者用途！');
				return false;
			}
			this.$service.single
				.orderClass({ id: this.orderData.id, ...this.categoryForm })
				.then(res => {
					this.$message.success('订单分类成功！');
					this.getDet();
					// this.categoryDialog = false;
					this.resetForm();
				});
		},
		// 打印配置
		printOrder() {
			this.deliver.visible = true;

			this.$nextTick(() => {
				let LODOP = getLodop();
				LODOP.PRINT_INIT('配送单');
				LODOP.SET_PRINT_STYLE('FontSize', 12);
				LODOP.ADD_PRINT_TEXT(470, 10, 350, 200, `店铺地址：${this.shopInfo.address}`);
				LODOP.ADD_PRINT_TEXT(470, 400, 350, 600, `电话：${this.deliver.data.telephone}`);
				LODOP.ADD_PRINT_TEXT(
					470,
					590,
					470,
					600,
					`制单时间：${this.deliver.data.printTime}`
				);
				LODOP.SET_PRINT_STYLE('FontSize', 20);
				LODOP.SET_PRINT_STYLE('Bold', 1);
				LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `${this.shopInfo.merchantName}配送单`);
				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
				LODOP.SET_PRINT_STYLE('FontSize', 12);
				LODOP.ADD_PRINT_TEXT(160, 500, 100, 20, `No ${this.deliver.data.sendNum}`);
				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);

				LODOP.ADD_PRINT_HTM(
					200,
					10,
					790,
					600,
					document.querySelector('.print-html').innerHTML
				);
				LODOP.PREVIEW();
				// LODOP.PRINT();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sel-order {
	.ship-manage-wrap {
		padding: 20px;
		border-top: 1px solid $borderColor;
	}
	.order-info-wrap {
		font-size: 14px;
		margin-bottom: 34px;
		padding: 4px;
		background-color: #f5f7fa;
		@include disFlex(center, space-between);
		.order-info-left {
			.info-list {
				@include disFlex(center, flex-start);
				margin: 4px 0;
				.label {
					width: 70px;
					color: #999;
				}
			}
		}
		.order-info-right {
			width: 88px;
			height: 88px;
		}
	}
	// ==================
	.title-wrap {
		@include disFlex(center, flex-start);
		.title {
			font-size: 16px;
			font-weight: bold;
			margin-right: 10px;
		}
		.time {
			font-size: 14px;
			color: #666;
		}
	}
	.content-wrap {
		margin-top: 10px;
	}
	.prompt-text {
		font-size: 12px;
		margin-top: 6px;
	}
	.label-list {
		font-size: 12px;
		margin: 4px 0;
	}
	// dialog
	.category-dialog-wrap {
		.el-radio {
			margin-bottom: 6px;
		}
	}

	.order-modal-content {
		.form-wrap {
			@include disFlex(flex-start, space-between);
			& > div {
				width: 49%;
			}
		}
		.prompt-text {
			font-size: 12px;
		}
	}
}
</style>

<style lang="scss">
.ship-draw-wrap {
	.el-drawer__header {
		margin-bottom: 20px;
		span{
		    outline:none;
		}
	}
}

.print-html {
	position: absolute;
	left: 0;
	top: -5000px;
}
</style>