zfire-newmall-admin/src/views/auxiliaryFittings/salesManagement/attachmentSalesOrder/index.vue

<template>
	<div class="page">
		<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">
		  
		  <div slot="moreSearch">
		    <el-radio-group v-model="flag" size="mini" @change="changeType">
		    	<el-radio-button label="">全部</el-radio-button>
		    	<el-radio-button label="SAVE">保存</el-radio-button>
		    	<el-radio-button label="SUBMIT">提交</el-radio-button>
		    	<el-radio-button label="PAY_NOT_TAKE">已支付未提货</el-radio-button>
		    	<el-radio-button label="PAY_TAKE">已支付已提货</el-radio-button>
		    	<el-radio-button label="CANCEL">取消订单</el-radio-button>
		    </el-radio-group>
		    <br><br>
		  </div>
		</template-page>
		<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>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import attachmentSalesOrderDetail from '../components/attachmentSalesOrderDetail.vue'
import import_mixin from '@/components/template/import_mixin.js'
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, printPreview },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
	  	[
	  		[
	  			{
	  				name: '新建',
	  				click: this.addData
	  			}
	  		]
	  	]
	  ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ["新增","编辑", "详情"],
      formDialog: false,
	  id: '',
	  flag: '',
	  websitList:[]
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {},
	filterArr(){
		return function (arr, size) {
		  //判断如果不是数组(就没有length)，或者size没有传值，size小于1，就返回空数组
		  if (!arr.length || !size || size < 1) return []
		  let [start, end, result] = [null, null, []]
		  for (let i = 0; i < Math.ceil(arr.length / size); i++) {
		    start = i * size
		    end = start + size
		    result.push(arr.slice(start, end))
		  }
		  return result
		}
	}
  },
  methods: {
	// 切换状态
	changeType(val) {
	  this.$refs.pageRef.refreshList()
	},
	backList() {
		this.id = ''
		this.formDialog = false;
		this.$refs.pageRef.refreshList()
	},
    // 列表请求函数
	getList(p,cb) {
	  try {
	    var pam = JSON.parse(JSON.stringify(p))
	    pam.params.push({ "param": "a.goods_type", "compare": "=", "value": 'P' },{'param': 'a.flag', "compare": "=", "value": this.flag})
		cb && cb(pam)
	    return listPageV2(pam)
	  } catch (error) {
	    console.log(error)
	  }
	},
    // 列表导出函数
    exportList: pageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
		if (item.jname === 'idCardImg') {
		        defaultData.render = (h, { row, index, column }) => {
		          return (
		            <div style="padding:0 6px;cursor: pointer;">
		              {row.idCardImg ? row.idCardImg.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />) : null}
		            </div>
		          )
		        }
		      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 表格操作列
    operation(h, { row, index, column }) {
      return (
        <div class='operation-btns'>
			<el-button type="text" onClick={() => {
				this.id = row.salesId
				this.formDialogType = row.flag == 'SAVE'?1:2
				this.openForm()
			}}>{row.flag == 'SAVE'?'编辑':"详情"}</el-button>
			{row.flag == 'PAY_NOT_TAKE'?<el-button type="text" onClick={() => {
				this.id = row.salesId
				this.formDialogType = row.flag == 'SAVE'?1:2
				this.openForm()
			}}>确认提货</el-button>:null}
			<el-button type="text" onClick={() => this.toPrint(row, 2)}>
			  打印
			</el-button>
        </div>
      )
    },
    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    openForm() {
      this.formDialog = true;
    },
	getWebsit(){
		getWebsit({type: 'C'}).then(res => {
			this.websitList = res.data
		})
	},
	// 点击打印
	async toPrint(row, type) {
		this.getWebsit()
		let pagingData = []
		const { data } = await getDetail({
		  salesId: row.salesId
		})
		pagingData = this.filterArr(data.items,4)
		// 初始化模板，否则生成的模板叠加
		hiprint.init()
		this.hiprintTemplate = new hiprint.PrintTemplate()
		// 兼容批量打印
		// let params = !type ? this.filterArr() : [row.salesId]
		let len = pagingData.length
		let loadingLen = len
		// 使用 i-- 提升for效率
		this.$startLoading()
		for (let i = 0; i < len; i++) {
			try {
			let websitHtml = ''
			let html = ''
			let num = 0
			let totalAmount = 0
			pagingData[i].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.slice(0,5).forEach(item=>{
				websitHtml += `
					<div style="display: flex;font-size: 14px;margin-bottom: 6px;">
						<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,len,i)
				}
			})
		
			loadingLen--
			} catch (error) {
			console.log(999,error)
			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,length,page) {
	  return `
	   <div style="font-family:'黑体';font-size: 16px;">
			<div style="display: flex;justify-content: space-between;align-items: center;">
				<div style="width: 28%;"></div>
				<h1 style="text-align:center;margin: 10px 0;">${data.websitName}销售单</h1>
				<div>共 ${length}页 第 ${page+1} 页</div>
			</div>
		  <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 0;">
		  	<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');
	},
  }
}
</script>

<style lang="scss" scoped>
	.page{
		height: 100%;
	}
	.tab{
		padding: 20px 20px 0 20px;
	}
</style>