辅材配件销售订单增加打印

package.json

@@ -51,6 +51,7 @@
     "vue": "2.6.10",
     "vue-demi": "^0.14.5",
     "vue-ls": "^4.0.0",
+    "vue-plugin-hiprint": "0.0.56",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",

src/views/auxiliaryFittings/salesManagement/attachmentSalesOrder/index.vue

@@ -19,6 +19,7 @@
 		<div class="detail" v-if="formDialog">
 			<attachmentSalesOrderDetail :id="id" @back="backList" :formType="formDialogType" :title="'配件销售订单' + formDialogTitles[formDialogType]"></attachmentSalesOrderDetail>
 		</div>
+		<print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList"  />
 	</div>
 </template>
 
@@ -30,8 +31,13 @@ import ImageUpload from '@/components/file-upload'
 import { downloadFiles } from '@/utils/util'
 import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
 import { listPageV2,pageExport, getDetail, add, edit, submit } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
+import { getWebsit } from "@/api/customerManagement";
+import printPreview from '../components/preview.vue'
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
+
+disAutoConnect()
 export default {
-  components: { TemplatePage, ImageUpload, attachmentSalesOrderDetail },
+  components: { TemplatePage, ImageUpload, attachmentSalesOrderDetail, printPreview },
   mixins: [import_mixin],
   data() {
     return {
@@ -62,7 +68,8 @@ export default {
       formDialogTitles: ["新增","编辑", "详情"],
       formDialog: false,
 	  id: '',
-	  flag: ''
+	  flag: '',
+	  websitList:[]
     }
   },
   computed: {
@@ -126,6 +133,9 @@ export default {
 				this.formDialogType = row.flag == 'SAVE'?1:2
 				this.openForm()
 			}}>确认提货</el-button>:null}
+			<el-button type="text" onClick={() => this.toPrint(row, 2)}>
+			  打印
+			</el-button>
         </div>
       )
     },
@@ -136,6 +146,170 @@ export default {
     openForm() {
       this.formDialog = true;
     },
+	getWebsit(){
+		getWebsit({type: 'C'}).then(res => {
+			this.websitList = res.data
+		})
+	},
+	// 点击打印
+	async toPrint(row, type) {
+		this.getWebsit()
+	  // 初始化模板，否则生成的模板叠加
+	  hiprint.init()
+	  this.hiprintTemplate = new hiprint.PrintTemplate()
+	  // 兼容批量打印
+	  let params = !type ? this.recordSelected : [row.salesId]
+	  let len = params.length
+	  let loadingLen = len
+	  // 使用 i-- 提升for效率
+	  this.$startLoading()
+	  for (let i = len; i > 0; i--) {
+	    try {
+	      const { data } = await getDetail({
+	        salesId: params[i - 1].salesId || params[i - 1]
+	      })
+		  let websitHtml = ''
+		  let html = ''
+		  let num = 0
+		  let totalAmount = 0
+		  data.items.forEach(item=>{
+			totalAmount = (Number(item.saleAmount)*100 + totalAmount*100)/100
+			num += Number(item.salesQty)
+		  	html += `
+		  		<tr align="center">
+		  		  <td>${item.goodsName || ''}</td>
+		  		  <td>${item.goodsSpecification || ''}</td>
+		  		  <td>${item.goodsSalesUnit || ''}</td>
+		  		  <td>${item.salesQty || ''}</td>
+		  		  <td>${item.price || ''}</td>
+		  		  <td>${item.saleAmount || ''}</td>
+		  		  <td></td>
+		  		  <td></td>
+		  		</tr>
+		  	`
+		  })
+		  this.websitList.forEach(item=>{
+			  websitHtml += `
+				<div style="display: flex;font-size: 16px;margin: 10px;">
+					<div style="margin-right: 10px;">${item.name}</div>
+					<div style="margin-right: 10px;">${item.websitPhone}</div>
+					<div>地址: ${item.address}</div>
+				</div>
+			  `
+		  })
+	      // 模板基础配置
+	      this.panel = this.hiprintTemplate.addPrintPanel({
+	        height: 140,
+	        width: 241,
+	        fontFamily: '黑体',
+	        fontSize: 13,
+	        paperFooter: 340,
+	        paperHeader: 10,
+	        paperNumberDisabled: true
+	      })
+	
+	      // 获取收款单模板和基础配置
+	      this.panel.addPrintHtml({
+	        options: {
+	          width: 633,
+	          top: 30,
+	          left: 20,
+	          fontFamily: '黑体',
+	          fontSize: 13,
+	          content: this.setTableDom(data,html,websitHtml,totalAmount,num)
+	        }
+	      })
+	
+	      loadingLen--
+	    } catch (error) {
+	      console.log(999)
+	      this.$endLoading()
+	      return
+	    }
+	  }
+	  if (loadingLen === 0) {
+	    this.$endLoading()
+	  }
+	  console.log(333)
+	  // 预览打印内容
+	  this.$refs.preView.show(this.hiprintTemplate, this.panel)
+	},
+	// 打印模板
+	setTableDom(data,html,websitHtml,totalAmount,num) {
+		console.log(html)
+	  return `
+	   <div style="font-family:'黑体';font-size: 16px;">
+	      <h1 style="text-align:center;margin: 10px 0;">${data.websitName}销售单</h1>
+		  <div style="display: flex;justify-content: space-between;">
+			<div style="width: 28%;"></div>
+			<div>单据日期: ${data.createTime}</div>
+			<div>单据编号: ${data.salesId}</div>
+		  </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
+		  	<div>客户: ${data.workerName}</div>
+		  	<div>摘要: ${data.payType == 'CASH'?'现金':'微信'}</div>
+		  </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin-bottom: 10px;">
+		  	<div>联系电话: ${data.workerMobile}</div>
+		  	<div>收货地址: </div>
+			<div style="width: 28%;"></div>
+		  </div>
+	      <div >
+	        <table border=".5" cellspacing="0" width="856"
+	         style="border-color: rgb(0,0,0);
+	          border-collapse: collapse;
+	          border-style: none;
+	          border: 1px solid rgb(0,0,0);
+	          font-weight: normal;
+	          
+	          text-decoration: none;
+	          vertical-align: middle;
+	          box-sizing: border-box;
+	          word-wrap: break-word;
+	          word-break: break-all;">
+				<tr align="center">
+					<td>商品名称</td>
+					<td>规格</td>
+					<td>单位</td>
+					<td>数量</td>
+					<td>单价</td>
+					<td>金额</td>
+					<td>仓库</td>
+					<td>备注</td>
+				</tr>
+	            ${html}
+				<tr align="center" align="center">
+				  <td>小计: </td>
+				  <td colspan="2"></td>
+				  <td>${num}</td>
+				  <td></td>
+				  <td>${totalAmount}</td>
+				  <td colspan="2">金额总计: ${totalAmount}</td>
+				</tr>
+	        </table>
+	      </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px;">
+		  	<div>制单人: ${data.createBy}</div>
+		  	<div>审核人: ${data.confirmBy}</div>
+			<div>业务员: </div>
+			<div>签收人: </div>
+		  </div>
+		  ${websitHtml}
+	      <div style="margin:100px 0 0 0">
+	        <div></div>
+	      </div>
+	   </div>
+	  `
+	},
+	handleRefreshList() {
+	  this.recordSelected = []
+	  this.$refs.pageRef.refreshList()
+	},
+	handleInitPrint() {
+	  this.$nextTick(() => {
+	    this.initPrint()
+	  })
+	},
 	// 下载导入模版
 	handleDownload() {
 	  // downloadFiles('charging/standard/download');

src/views/auxiliaryFittings/salesManagement/auxiliarySalesOrder/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="110"
+		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="140"
 		  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
 		  :operation="operation" :exportList="exportList">
 		  
@@ -19,6 +19,7 @@
 		<div class="detail" v-if="formDialog">
 			<auxiliarySalesOrderDetail :id="id" @back="backList" :formType="formDialogType" :title="'辅材销售订单' + formDialogTitles[formDialogType]"></auxiliarySalesOrderDetail>
 		</div>
+		<print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList"  />
 	</div>
 </template>
 
@@ -30,8 +31,13 @@ import ImageUpload from '@/components/file-upload'
 import { downloadFiles } from '@/utils/util'
 import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
 import { listPageV2,pageExport, getDetail, add, edit, submit } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
+import { getWebsit } from "@/api/customerManagement";
+import printPreview from '../components/preview.vue'
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
+
+disAutoConnect()
 export default {
-  components: { TemplatePage, ImageUpload, auxiliarySalesOrderDetail },
+  components: { TemplatePage, ImageUpload, auxiliarySalesOrderDetail, printPreview },
   mixins: [import_mixin],
   data() {
     return {
@@ -62,8 +68,9 @@ export default {
       formDialogTitles: ["新增","编辑", "详情"],
       formDialog: false,
 		id: '',
-		flag: ''
-    }
+		flag: '',
+		websitList:[]
+	}
   },
   computed: {
     // 更多参数
@@ -126,6 +133,9 @@ export default {
 				this.formDialogType = row.flag == 'SAVE'?1:2
 				this.openForm()
 			}}>确认提货</el-button>:null}
+			<el-button type="text" onClick={() => this.toPrint(row, 2)}>
+			  打印
+			</el-button>
         </div>
       )
     },
@@ -136,9 +146,173 @@ export default {
     openForm() {
       this.formDialog = true;
     },
+	getWebsit(){
+		getWebsit({type: 'C'}).then(res => {
+			this.websitList = res.data
+		})
+	},
+	// 点击打印
+	async toPrint(row, type) {
+		this.getWebsit()
+	  // 初始化模板，否则生成的模板叠加
+	  hiprint.init()
+	  this.hiprintTemplate = new hiprint.PrintTemplate()
+	  // 兼容批量打印
+	  let params = !type ? this.recordSelected : [row.salesId]
+	  let len = params.length
+	  let loadingLen = len
+	  // 使用 i-- 提升for效率
+	  this.$startLoading()
+	  for (let i = len; i > 0; i--) {
+	    try {
+	      const { data } = await getDetail({
+	        salesId: params[i - 1].salesId || params[i - 1]
+	      })
+		  let websitHtml = ''
+		  let html = ''
+		  let num = 0
+		  let totalAmount = 0
+		  data.items.forEach(item=>{
+			totalAmount = (Number(item.saleAmount)*100 + totalAmount*100)/100
+			num += Number(item.salesQty)
+		  	html += `
+		  		<tr align="center">
+		  		  <td>${item.goodsName}</td>
+		  		  <td>${item.goodsSpecification}</td>
+		  		  <td>${item.goodsSalesUnit}</td>
+		  		  <td>${item.salesQty}</td>
+		  		  <td>${item.price}</td>
+		  		  <td>${item.saleAmount}</td>
+		  		  <td></td>
+		  		  <td></td>
+		  		</tr>
+		  	`
+		  })
+		  this.websitList.forEach(item=>{
+			  websitHtml += `
+				<div style="display: flex;font-size: 16px;margin: 10px;">
+					<div style="margin-right: 10px;">${item.name}</div>
+					<div style="margin-right: 10px;">${item.websitPhone}</div>
+					<div>地址: ${item.address}</div>
+				</div>
+			  `
+		  })
+	      // 模板基础配置
+	      this.panel = this.hiprintTemplate.addPrintPanel({
+	        height: 140,
+	        width: 241,
+	        fontFamily: '黑体',
+	        fontSize: 13,
+	        paperFooter: 340,
+	        paperHeader: 10,
+	        paperNumberDisabled: true
+	      })
+	
+	      // 获取收款单模板和基础配置
+	      this.panel.addPrintHtml({
+	        options: {
+	          width: 633,
+	          top: 30,
+	          left: 20,
+	          fontFamily: '黑体',
+	          fontSize: 13,
+	          content: this.setTableDom(data,html,websitHtml,totalAmount,num)
+	        }
+	      })
+	
+	      loadingLen--
+	    } catch (error) {
+	      console.log(999)
+	      this.$endLoading()
+	      return
+	    }
+	  }
+	  if (loadingLen === 0) {
+	    this.$endLoading()
+	  }
+	  console.log(333)
+	  // 预览打印内容
+	  this.$refs.preView.show(this.hiprintTemplate, this.panel)
+	},
+	// 打印模板
+	setTableDom(data,html,websitHtml,totalAmount,num) {
+		console.log(html)
+	  return `
+	   <div style="font-family:'黑体';font-size: 16px;">
+	      <h1 style="text-align:center;margin: 10px 0;">${data.websitName}销售单</h1>
+		  <div style="display: flex;justify-content: space-between;">
+			<div style="width: 28%;"></div>
+			<div>单据日期: ${data.createTime}</div>
+			<div>单据编号: ${data.salesId}</div>
+		  </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
+		  	<div>客户: ${data.workerName}</div>
+		  	<div>摘要: ${data.payType == 'CASH'?'现金':'微信'}</div>
+		  </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin-bottom: 10px;">
+		  	<div>联系电话: ${data.workerMobile}</div>
+		  	<div>收货地址: </div>
+			<div style="width: 28%;"></div>
+		  </div>
+	      <div >
+	        <table border=".5" cellspacing="0" width="856"
+	         style="border-color: rgb(0,0,0);
+	          border-collapse: collapse;
+	          border-style: none;
+	          border: 1px solid rgb(0,0,0);
+	          font-weight: normal;
+	          
+	          text-decoration: none;
+	          vertical-align: middle;
+	          box-sizing: border-box;
+	          word-wrap: break-word;
+	          word-break: break-all;">
+				<tr align="center">
+					<td>商品名称</td>
+					<td>规格</td>
+					<td>单位</td>
+					<td>数量</td>
+					<td>单价</td>
+					<td>金额</td>
+					<td>仓库</td>
+					<td>备注</td>
+				</tr>
+	            ${html}
+				<tr align="center" align="center">
+				  <td>小计: </td>
+				  <td colspan="2"></td>
+				  <td>${num}</td>
+				  <td></td>
+				  <td>${totalAmount}</td>
+				  <td colspan="2">金额总计: ${totalAmount}</td>
+				</tr>
+	        </table>
+	      </div>
+		  <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px;">
+		  	<div>制单人: ${data.createBy}</div>
+		  	<div>审核人: ${data.confirmBy}</div>
+			<div>业务员: </div>
+			<div>签收人: </div>
+		  </div>
+		  ${websitHtml}
+	      <div style="margin:100px 0 0 0">
+	        <div></div>
+	      </div>
+	   </div>
+	  `
+	},
+	handleRefreshList() {
+	  this.recordSelected = []
+	  this.$refs.pageRef.refreshList()
+	},
+	handleInitPrint() {
+	  this.$nextTick(() => {
+	    this.initPrint()
+	  })
+	},
 	// 下载导入模版
 	handleDownload() {
-	  // downloadFiles('charging/standard/download');
+		// downloadFiles('charging/standard/download');
 	},
   }
 }

src/views/auxiliaryFittings/salesManagement/components/attachmentSalesOrderDetail.vue

@@ -24,7 +24,7 @@
 								<el-input type="text" :value="companyName" disabled></el-input>
 							</el-form-item>
 						</el-col>
-						<el-col :span="12">
+						<el-col :span="8">
 							<el-form-item label="网点名称" prop="websitId" :required="true">
 								<el-select v-model="formData.websit" :disabled="formType == 2" value-key="websitId" @change="changeWebsit" placeholder="请选择" style="width: 100%;">
 								    <el-option
@@ -37,29 +37,55 @@
 							</el-form-item>
 						</el-col>
 						<el-col :span="8">
-							<el-form-item label="师傅姓名" prop="worker" :required="true">
-								<el-select v-model="formData.worker" :disabled="formType == 2" value-key="nickName" @focus="()=>{
-									if(!this.formData.websitId){return this.$message.warning('请先选择网点名称！');}
-								}" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
+							<el-form-item label="购买方" :required="true" >
+								<el-select v-model="formData.buyPeople" :disabled="formData.flag != 'SAVE' && formType!=0" placeholder="请选择" style="width: 100%;">
 								    <el-option
-								      v-for="item in workerList"
+									  v-for="item in [{name: '客户',id: 'CUSTOMER'},{name: '内部师傅',id: 'WORKER'}]"
 								      :key="item.id"
-								      :label="item.nickName"
-								      :value="item">
+								      :label="item.name"
+								      :value="item.id">
 								    </el-option>
 								  </el-select>
 							</el-form-item>
 						</el-col>
-						<el-col :span="8">
-							<el-form-item label="师傅身份证" prop="identity" :required="true">
-								<el-input type="text" v-model="formData.identity" :disabled="formType == 2" placeholder="请输入"></el-input>
-							</el-form-item>
-						</el-col>
-						<el-col :span="8">
-							<el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
-								<el-input type="text" v-model="formData.workerMobile" :disabled="formType == 2" placeholder="请输入"></el-input>
-							</el-form-item>
-						</el-col>
+						<template v-if="formData.buyPeople == 'CUSTOMER'">
+							<el-col :span="8">
+								<el-form-item label="客户姓名" prop="workerName" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerName" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="客户联系电话" prop="workerMobile" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+						</template>
+						<template v-else>
+							<el-col :span="8">
+								<el-form-item label="师傅姓名" prop="worker" :required="true">
+									<el-select v-model="formData.worker" :disabled="formType == 2" value-key="nickName" @focus="()=>{
+										if(!this.formData.websitId){return this.$message.warning('请先选择网点名称！');}
+									}" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
+									    <el-option
+									      v-for="item in workerList"
+									      :key="item.id"
+									      :label="item.nickName"
+									      :value="item">
+									    </el-option>
+									  </el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="师傅身份证" prop="identity" :required="true">
+									<el-input type="text" v-model="formData.identity" :disabled="formType == 2" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
+									<el-input type="text" v-model="formData.workerMobile" :disabled="formType == 2" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+						</template>
 						<el-col :span="6" v-if="id">
 							<el-form-item label="单据金额">
 								<el-input type="text" :value="formData.totalAmount" disabled></el-input>
@@ -223,7 +249,8 @@
 					source: 'SELF',
 					payType: '',
 					totalAmount: '',
-					remark: ''
+					remark: '',
+					buyPeople: 'WORKER'
 				},
 				isEdit: 0,
 				timer: '',
@@ -246,9 +273,12 @@
 						{ pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
 					],
 					workerMobile: [
-						{ required: true, message: '请输入师傅联系电话', trigger: 'blur' },
+						{ required: true, message: '请输入联系电话', trigger: 'blur' },
 						{ pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
 					],
+					workerName: [
+						{ required: true, message: '请输入客户姓名', trigger: 'blur' }
+					],
 				}
 			};
 		},
@@ -446,6 +476,7 @@
 								workerId: this.formData.workerId,
 								identity: this.formData.identity,
 								workerMobile: this.formData.workerMobile,
+								buyPeople: this.formData.buyPeople,
 								items: this.dataList
 							}).then(res => {
 								if(res.code == 200){
@@ -466,6 +497,7 @@
 								workerId: this.formData.workerId,
 								identity: this.formData.identity,
 								workerMobile: this.formData.workerMobile,
+								buyPeople: this.formData.buyPeople,
 								items: this.dataList
 							}).then(res => {
 								if(res.code == 200){

src/views/auxiliaryFittings/salesManagement/components/auxiliarySalesOrderDetail.vue

@@ -24,7 +24,7 @@
 								<el-input type="text" :value="companyName" disabled></el-input>
 							</el-form-item>
 						</el-col>
-						<el-col :span="12">
+						<el-col :span="8">
 							<el-form-item label="网点名称" prop="websitId" :required="true">
 								<el-select v-model="formData.websit" :disabled="formData.flag != 'SAVE' && formType!=0" value-key="websitId" @change="changeWebsit" placeholder="请选择" style="width: 100%;">
 								    <el-option
@@ -37,30 +37,56 @@
 							</el-form-item>
 						</el-col>
 						<el-col :span="8">
-							<el-form-item label="师傅姓名" prop="worker" :required="true">
-								<el-select v-model="formData.worker" :disabled="formData.flag != 'SAVE' && formType!=0" value-key="nickName" @focus="()=>{
-									if(!this.formData.websitId){return this.$message.warning('请先选择网点名称！');}
-								}" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
+							<el-form-item label="购买方" :required="true" >
+								<el-select v-model="formData.buyPeople" :disabled="formData.flag != 'SAVE' && formType!=0" placeholder="请选择" style="width: 100%;">
 								    <el-option
-								      v-for="item in workerList"
+									  v-for="item in [{name: '客户',id: 'CUSTOMER'},{name: '内部师傅',id: 'WORKER'}]"
 								      :key="item.id"
-								      :label="item.nickName"
-								      :value="item">
+								      :label="item.name"
+								      :value="item.id">
 								    </el-option>
 								  </el-select>
 							</el-form-item>
 						</el-col>
-						<el-col :span="8">
-							<el-form-item label="师傅身份证" prop="identity" :required="true">
-								<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.identity" placeholder="请输入"></el-input>
-							</el-form-item>
-						</el-col>
-						<el-col :span="8">
-							<el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
-								<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
-							</el-form-item>
-						</el-col>
-						<el-col :span="6" v-if="id">
+						<template v-if="formData.buyPeople == 'CUSTOMER'">
+							<el-col :span="8">
+								<el-form-item label="客户姓名" prop="workerName" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerName" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="客户联系电话" prop="workerMobile" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+						</template>
+						<template v-else>
+							<el-col :span="8">
+								<el-form-item label="师傅姓名" prop="worker" :required="true">
+									<el-select v-model="formData.worker" :disabled="formData.flag != 'SAVE' && formType!=0" value-key="nickName" @focus="()=>{
+										if(!this.formData.websitId){return this.$message.warning('请先选择网点名称！');}
+									}" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
+									    <el-option
+									      v-for="item in workerList"
+									      :key="item.id"
+									      :label="item.nickName"
+									      :value="item">
+									    </el-option>
+									  </el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="师傅身份证" prop="identity" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.identity" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="8">
+								<el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
+									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
+								</el-form-item>
+							</el-col>
+						</template>
+						<el-col :span="8" v-if="id">
 							<el-form-item label="单据金额">
 								<el-input type="text" :value="formData.totalAmount" disabled></el-input>
 							</el-form-item>
@@ -248,7 +274,8 @@
 					source: 'SELF',
 					payType: '',
 					remark: '',
-					totalAmount: ''
+					totalAmount: '',
+					buyPeople: 'WORKER'
 				},
 				isEdit: 0,
 				is_submit: true,
@@ -272,9 +299,12 @@
 						{ pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
 					],
 					workerMobile: [
-						{ required: true, message: '请输入师傅联系电话', trigger: 'blur' },
+						{ required: true, message: `请输入联系电话`, trigger: 'blur' },
 						{ pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
 					],
+					workerName: [
+						{ required: true, message: '请输入客户姓名', trigger: 'blur' }
+					],
 				}
 			};
 		},
@@ -521,6 +551,7 @@
 								workerId: this.formData.workerId,
 								identity: this.formData.identity,
 								workerMobile: this.formData.workerMobile,
+								buyPeople: this.formData.buyPeople,
 								items: this.dataList
 							}).then(res => {
 								if(res.code == 200){
@@ -541,6 +572,7 @@
 								workerId: this.formData.workerId,
 								identity: this.formData.identity,
 								workerMobile: this.formData.workerMobile,
+								buyPeople: this.formData.buyPeople,
 								items: this.dataList
 							}).then(res => {
 								if(res.code == 200){

src/views/auxiliaryFittings/salesManagement/components/preview.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :show-close="false"
+    :maskClosable="false"
+    :close-on-click-modal="false"
+    @cancel="hideModal"
+    :width="350 + 'mm'"
+  >
+    <div v-loading="spinning" style="min-height: 100px">
+      <div id="preview_content" ref="printDom"></div>
+    </div>
+    <template slot="title">
+      <div>
+        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
+      </div>
+    </template>
+    <template slot="footer">
+      <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'PrintPreview',
+  props: {
+    addPrint: {
+      type: Function,
+      default: null
+    },
+  },
+ 
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    hideModal() {
+      this.visible = false
+      this.waitShowPrinter = false
+      // console.log(this.$parent);
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.hiprintTemplate.print()
+      setTimeout(() => {
+        this.hideModal()
+        this.$emit('refreshList')
+      }, 2000)
+
+    }
+    // toPdf() {
+    //   downloadPDF(this.$refs.printDom);
+    //   this.hiprintTemplate.toPdf({}, '打印预览');
+    // },
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+
+::v-deep tr {
+  height: 40px !important;
+}
+
+::v-deep .hiprint-printPaper {
+  margin: 0 auto;
+}
+
+/* ::v-deep tr td {
+  border: 0 !important;
+
+} */
+
+::v-deep .hiprint-paperNumber {
+  display: none;
+}
+
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>