|
|
@@ -10,42 +10,44 @@
|
|
|
custom-class="xl-dialog"
|
|
|
center
|
|
|
>
|
|
|
- <div class="scoped-info">
|
|
|
- <div class="si-row">
|
|
|
- <div class="si-col">成交楼盘：{{dtlObj.deal_item}}({{dtlObj.house_no}})</div>
|
|
|
- <div class="si-col">房屋类型：{{houseTypeObj[dtlObj.house_type]}}</div>
|
|
|
- <div class="si-col">成交店员：{{dtlObj.deal_clerk}}</div>
|
|
|
+ <div class="scoped-box" ref="cutScreen">
|
|
|
+ <div class="scoped-info">
|
|
|
+ <div class="si-row">
|
|
|
+ <div class="si-col">成交楼盘：{{dtlObj.deal_item}}({{dtlObj.house_no}})</div>
|
|
|
+ <div class="si-col">房屋类型：{{houseTypeObj[dtlObj.house_type]}}</div>
|
|
|
+ <div class="si-col">成交店员：{{dtlObj.deal_clerk}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="si-row">
|
|
|
+ <div class="si-col">成交类型：{{dealTypeObj[dtlObj.deal_type]}}</div>
|
|
|
+ <div class="si-col">成交日期：{{dtlObj.deal_at}}</div>
|
|
|
+ <div class="si-col">折扣体系：{{dtlObj.discount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="si-row">
|
|
|
+ <div class="si-col">客户姓名：{{dtlObj.customer_name}}</div>
|
|
|
+ <div class="si-col">客户电话：{{dtlObj.customer_phone}}</div>
|
|
|
+ <div class="si-col">成交备注：{{dtlObj.remark || '无'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="si-row">
|
|
|
+ <div class="si-col">成交面积：{{dtlObj.area}}㎡</div>
|
|
|
+ <div class="si-col">成交总价：{{dtlObj.price}}万元</div>
|
|
|
+ <div class="si-col">成交单价：{{(Number(dtlObj.price * 10000)/dtlObj.area).toFixed(2)}}元</div>
|
|
|
+ </div>
|
|
|
+ <div class="si-row">
|
|
|
+ <div class="si-col">报备渠道：{{dtlObj.report_dept}}</div>
|
|
|
+ <div class="si-col" @click="openBrokerageImgPopup">成交佣金：{{dtlObj.brokerage || '-'}}元 <span class="img">[图片凭证]</span></div>
|
|
|
+ <div class="si-col">成交返佣：{{dtlObj.rebate || '-'}}元</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="si-row">
|
|
|
- <div class="si-col">成交类型：{{dealTypeObj[dtlObj.deal_type]}}</div>
|
|
|
- <div class="si-col">成交日期：{{dtlObj.deal_at}}</div>
|
|
|
- <div class="si-col">折扣体系：{{dtlObj.discount}}</div>
|
|
|
+ <div class="scoped-table">
|
|
|
+ <table-list
|
|
|
+ :list-loading="listLoading"
|
|
|
+ :data="reportFlow"
|
|
|
+ :columns="listConfig"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="-1"
|
|
|
+ >
|
|
|
+ </table-list>
|
|
|
</div>
|
|
|
- <div class="si-row">
|
|
|
- <div class="si-col">客户姓名：{{dtlObj.customer_name}}</div>
|
|
|
- <div class="si-col">客户电话：{{dtlObj.customer_phone}}</div>
|
|
|
- <div class="si-col">成交备注：{{dtlObj.remark || '无'}}</div>
|
|
|
- </div>
|
|
|
- <div class="si-row">
|
|
|
- <div class="si-col">成交面积：{{dtlObj.area}}㎡</div>
|
|
|
- <div class="si-col">成交总价：{{dtlObj.price}}万元</div>
|
|
|
- <div class="si-col">成交单价：{{(Number(dtlObj.price * 10000)/dtlObj.area).toFixed(2)}}元</div>
|
|
|
- </div>
|
|
|
- <div class="si-row">
|
|
|
- <div class="si-col">报备渠道：{{dtlObj.report_dept}}</div>
|
|
|
- <div class="si-col" @click="openBrokerageImgPopup">成交佣金：{{dtlObj.brokerage || '-'}}元 <span class="img">[图片凭证]</span></div>
|
|
|
- <div class="si-col">成交返佣：{{dtlObj.rebate || '-'}}元</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="scoped-table">
|
|
|
- <table-list
|
|
|
- :list-loading="listLoading"
|
|
|
- :data="reportFlow"
|
|
|
- :columns="listConfig"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-size="-1"
|
|
|
- >
|
|
|
- </table-list>
|
|
|
</div>
|
|
|
<div class="xl-form" style="padding-top: 20px;">
|
|
|
<div class="xl-form-footer">
|
|
|
@@ -54,6 +56,7 @@
|
|
|
<!-- <el-button type="small" icon="el-icon-warning" class="xl-form-btn bgc4" @click="openStatePopup">修改状态</el-button> -->
|
|
|
</div>
|
|
|
<el-button class="xl-form-btn t2" @click="close">关闭弹窗</el-button>
|
|
|
+ <el-button class="xl-form-btn t3" @click="getScrean">下载</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -95,7 +98,7 @@ export default {
|
|
|
isStateShow: false,
|
|
|
houseTypeObj: {},
|
|
|
dealTypeObj: {},
|
|
|
- bigImgShow: {},
|
|
|
+ bigImgShow: false,
|
|
|
bigImgSrc: '',
|
|
|
}
|
|
|
},
|
|
|
@@ -140,6 +143,55 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ getScrean () {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ // 创建一个新的canvas
|
|
|
+ const _canvas = this.$refs.cutScreen
|
|
|
+ // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
|
|
|
+ const width = _canvas.offsetWidth
|
|
|
+ const height = _canvas.offsetHeight
|
|
|
+ const canvas2 = document.createElement('canvas')
|
|
|
+ const scale = 2
|
|
|
+ canvas2.width = width * scale
|
|
|
+ canvas2.height = height * scale
|
|
|
+ const context1 = canvas2.getContext('2d')
|
|
|
+ if(context1) {
|
|
|
+ // context1.scale(scale, scale)
|
|
|
+ context1.scale(1, 1)
|
|
|
+ }
|
|
|
+ const opts = {
|
|
|
+ scale,
|
|
|
+ canvas: canvas2,
|
|
|
+ // logging: true, //日志开关，便于查看html2canvas的内部执行流程
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ // 【重要】开启跨域配置
|
|
|
+ useCORS: true
|
|
|
+ }
|
|
|
+ html2canvas(_canvas,opts).then((canvas) => {
|
|
|
+ const context = canvas2.getContext('2d')
|
|
|
+ if(context) {
|
|
|
+ context.scale(2,2)
|
|
|
+ context.mozImageSmoothingEnabled = false
|
|
|
+ context.webkitImageSmoothingEnabled = false
|
|
|
+ context.imageSmoothingEnabled = false
|
|
|
+ }
|
|
|
+ this.screenUrl = canvas.toDataURL()
|
|
|
+ var a = document.createElement('a')
|
|
|
+ var event = new MouseEvent('click')
|
|
|
+ a.download = `${this.curObj.deal_item}(${this.dtlObj.house_no})的成交详情`
|
|
|
+ a.href = this.screenUrl
|
|
|
+ a.dispatchEvent(event)
|
|
|
+ loading.close()
|
|
|
+ })
|
|
|
+ },100)
|
|
|
+ },
|
|
|
openBrokerageImgPopup () {
|
|
|
this.bigImgShow = true
|
|
|
},
|
