zfire-newmall-admin/src/views/auxiliaryFittings/salesManagement/auxiliarySalesOrder/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">
			<auxiliarySalesOrderDetail :id="id" @back="backList" :formType="formDialogType" :title="'辅材销售订单' + formDialogTitles[formDialogType]"></auxiliarySalesOrderDetail>
		</div>
		<print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList"  />
	</div>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import auxiliarySalesOrderDetail from '../components/auxiliarySalesOrderDetail.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, auxiliarySalesOrderDetail, 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": 'M' },{'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
	  console.log(len,pagingData)
	  // 使用 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) {
		console.log(html)
	  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;">
		  	<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>