优化

admin-update/src/service/order/index.js

@@ -33,6 +33,14 @@ export class OrderService extends BaseService {
 			params: data
 		});
 	}
+
+	// 打印
+	deliver(params) {
+		return this.request({
+			url: '/deliver',
+			params
+		});
+	}
 }
 
 export default new OrderService();

admin-update/src/utils/lodop.js

@@ -0,0 +1,159 @@
+//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==
+
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
+
+//==判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop() {
+	try {
+		var ua = navigator.userAgent;
+		if (ua.match(/Windows\sPhone/i)) return true;
+		if (ua.match(/iPhone|iPod|iPad/i)) return true;
+		if (ua.match(/Android/i)) return true;
+		if (ua.match(/Edge\D?\d+/i)) return true;
+
+		var verTrident = ua.match(/Trident\D?\d+/i);
+		var verIE = ua.match(/MSIE\D?\d+/i);
+		var verOPR = ua.match(/OPR\D?\d+/i);
+		var verFF = ua.match(/Firefox\D?\d+/i);
+		var x64 = ua.match(/x64/i);
+		if (!verTrident && !verIE && x64) return true;
+		else if (verFF) {
+			verFF = verFF[0].match(/\d+/);
+			if (verFF[0] >= 41 || x64) return true;
+		} else if (verOPR) {
+			verOPR = verOPR[0].match(/\d+/);
+			if (verOPR[0] >= 32) return true;
+		} else if (!verTrident && !verIE) {
+			var verChrome = ua.match(/Chrome\D?\d+/i);
+			if (verChrome) {
+				verChrome = verChrome[0].match(/\d+/);
+				if (verChrome[0] >= 41) return true;
+			}
+		}
+		return false;
+	} catch (err) {
+		return true;
+	}
+}
+
+//==引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
+if (needCLodop()) {
+	var head =
+		document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+
+	var JS1 = document.createElement('script');
+	JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1';
+	head.insertBefore(JS1, head.firstChild);
+
+	var JS2 = document.createElement('script');
+	JS2.src = 'http://localhost:18000/CLodopfuncs.js?priority=0';
+	head.insertBefore(JS2, head.firstChild);
+
+	CLodopIsLocal = !!(JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i);
+
+	if (JS1.attachEvent) {
+		CLodopJsState = 'loading';
+		var onChange = function() {
+			if (window.event.srcElement.readyState == 'loaded') CLodopJsState = 'complete';
+		};
+		JS1.attachEvent('onreadystatechange', onChange);
+		JS2.attachEvent('onreadystatechange', onChange);
+	}
+}
+
+//==获取LODOP对象主过程,判断是否安装、需否升级:==
+function getLodop(oOBJECT, oEMBED) {
+	var strHtmInstall =
+		"<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+	var strHtmUpdate =
+		"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+	var strHtm64_Install =
+		"<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+	var strHtm64_Update =
+		"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+	var strHtmFireFox =
+		"<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
+	var strHtmChrome =
+		"<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
+	var strCLodopInstall_1 =
+		"<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
+	var strCLodopInstall_2 =
+		"<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
+	var strCLodopInstall_3 = '，成功后请刷新本页面。</font>';
+	var strCLodopUpdate =
+		"<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
+	var LODOP;
+	try {
+		var ua = navigator.userAgent;
+		var isIE = !!ua.match(/MSIE/i) || !!ua.match(/Trident/i);
+		if (needCLodop()) {
+			try {
+				LODOP = getCLodop();
+			} catch (err) {}
+			if (
+				!LODOP &&
+				(document.readyState !== 'complete' || (isIE && CLodopJsState == 'loading'))
+			) {
+				alert('网页还没下载完毕，请稍等一下再操作.');
+				return;
+			}
+			if (!LODOP) {
+				document.body.innerHTML =
+					strCLodopInstall_1 +
+					(CLodopIsLocal ? strCLodopInstall_2 : '') +
+					strCLodopInstall_3 +
+					document.body.innerHTML;
+				return;
+			} else {
+				if (CLODOP.CVERSION < '3.0.9.3') {
+					document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
+				}
+				if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
+				if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
+			}
+		} else {
+			var is64IE = isIE && !!ua.match(/x64/i);
+			//==如果页面有Lodop就直接使用,否则新建:==
+			if (oOBJECT || oEMBED) {
+				if (isIE) LODOP = oOBJECT;
+				else LODOP = oEMBED;
+			} else if (!CreatedOKLodopObject) {
+				LODOP = document.createElement('object');
+				LODOP.setAttribute('width', 0);
+				LODOP.setAttribute('height', 0);
+				LODOP.setAttribute(
+					'style',
+					'position:absolute;left:0px;top:-100px;width:0px;height:0px;'
+				);
+				if (isIE)
+					LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA');
+				else LODOP.setAttribute('type', 'application/x-print-lodop');
+				document.documentElement.appendChild(LODOP);
+				CreatedOKLodopObject = LODOP;
+			} else LODOP = CreatedOKLodopObject;
+			//==Lodop插件未安装时提示下载地址:==
+			if (!LODOP || !LODOP.VERSION) {
+				if (ua.indexOf('Chrome') >= 0)
+					document.body.innerHTML = strHtmChrome + document.body.innerHTML;
+				if (ua.indexOf('Firefox') >= 0)
+					document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
+				document.body.innerHTML =
+					(is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
+				return LODOP;
+			}
+		}
+		if (LODOP.VERSION < '6.2.2.6') {
+			if (!needCLodop())
+				document.body.innerHTML =
+					(is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
+		}
+		//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
+
+		//=======================================================
+		return LODOP;
+	} catch (err) {
+		alert('getLodop出错:' + err);
+	}
+}
+
+export { needCLodop, getLodop };

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

@@ -49,7 +49,7 @@
 							<!-- 打单 -->
 							<template v-if="item.actionName == '打单'">
 								<div v-if="$util.isEmpty(item.receive) && index == 0">
-									<el-button type="primary" @click="printOrderFn"
+									<el-button type="primary" @click="printOrderFn(index)"
 										>有配送单</el-button
 									>
 									<el-button type="primary" @click="fillFormFn"
@@ -64,7 +64,7 @@
 									/>
 									<span v-else>暂无配送用户信息</span>
 									<div style="margin-top: 10px">
-										<el-button size="mini" @click="printOrderFn">{{
+										<el-button size="mini" @click="printOrderFn(index)">{{
 											index == 0 ? '打印' : '重打'
 										}}</el-button>
 									</div>
@@ -373,12 +373,54 @@
 				<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>配送时间：</td>
+					<td colspan="2">{{ deliver.data.reachDate }}</td>
+					<td>订单号：</td>
+					<td colspan="2">{{ deliver.data.orderSn }}</td>
+				</tr>
+				<tr>
+					<td>收花人姓名：</td>
+					<td>{{ deliver.data.receiveUserName }}</td>
+					<td>收花人电话：</td>
+					<td>{{ deliver.data.receiveMobile }}</td>
+					<td colspan="2" rowspan="4">
+						<img class="cover" src="" alt="" />
+					</td>
+				</tr>
+				<tr>
+					<td>收花人地址：</td>
+					<td colspan="3">{{ deliver.data.receiveFullAddress }}</td>
+				</tr>
+				<tr>
+					<td>祝福语：</td>
+					<td colspan="3">{{ deliver.data.cardInfo }}</td>
+				</tr>
+				<tr>
+					<td>订花人姓名：</td>
+					<td>{{ deliver.data.bookName }}</td>
+					<td>订花人电话：</td>
+					<td>{{ deliver.data.bookMobile }}</td>
+				</tr>
+				<tr>
+					<td>备注说明：</td>
+					<td 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: {
@@ -446,12 +488,16 @@ export default {
 				categoryId: '',
 				usageId: ''
 			},
-			categoryRule: {}
+			categoryRule: {},
+			deliver: {
+				visible: false,
+				data: {}
+			}
 		};
 	},
 	computed: {
 		...mapGetters({ categoryData: 'category' }),
-		...mapGetters({ usageData: 'usage' })
+		...mapGetters({ usageData: 'usage', shopInfo: 'shopInfo' })
 	},
 	methods: {
 		init() {
@@ -560,10 +606,17 @@ export default {
 		},
 		// =========================
 		// 打单
-		printOrderFn() {
-			this.$service.single.printOrder({ id: this.orderData.id, option: 1 }).then(res => {
-				this.$message.success('打单成功！');
-				this.getDet();
+		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();
 			});
 		},
 		// 去填单
@@ -609,6 +662,36 @@ export default {
 					// 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(350, 10, 350, 200, `店铺地址：${this.shopInfo.address}`);
+				LODOP.ADD_PRINT_TEXT(350, 400, 350, 600, `电话：13255022022`);
+				LODOP.ADD_PRINT_TEXT(350, 580, 350, 600, `制单时间：2019-10-31 21:12`);
+				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, 460, 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();
+			});
 		}
 	}
 };
@@ -692,4 +775,28 @@ export default {
 		margin-bottom: 20px;
 	}
 }
+
+.print-html {
+	position: absolute;
+	left: 5000px;
+	top: 0;
+
+	td {
+		height: 40px;
+		width: 130px;
+		padding: 0 10px;
+		box-sizing: border-box;
+	}
+
+	.h2 {
+		height: 80px;
+	}
+
+	.cover {
+		display: block;
+		height: 90%;
+		width: 100%;
+		background-color: #eee;
+	}
+}
 </style>