<template>
|
<div v-if="billDataList.length" ref="container" :print-name="printName" class="print-list-container">
|
<!-- 循环单据数据 -->
|
<template v-for="(billDataInfo, index) in billDataList">
|
<!-- 循环每个单据明细分页 -->
|
<template v-for="pageIndex of pageCount(billDataInfo)">
|
<div :id="(billDataInfo.mainInfo?billDataInfo.mainInfo.wayBillCode:index)" :key="index + '_' + pageIndex" :style="canvasStyle" class="canvas-container page-next">
|
<div class="canvas-content">
|
<draggable v-model="vueData.fields" :options="{group:'people', ghostClass: 'ghost', filter:'.detail-table'}" class="drag-list">
|
<template v-for="(element, index2) in vueData.fields">
|
<DraggableResizable :key="index2" :style="'z-index:' + element.options.z" :resizable="false" :draggable="false" v-bind.sync="element.options" class="resable-item">
|
<template v-if="element.type=='table'">
|
<!-- 显示为文本 -->
|
<div v-if="element.onlyOnline">
|
<span v-for="(detailRow, index3) in billDataInfo[element.tableView].rows" :key="'tr'+index3">
|
<span v-for="(field, thIndex) in element.fields" :key="thIndex" :style="{'border-color':element.borderColor}">
|
<span :style="{'font-size':field.body.fontSize+'mm', 'line-height':field.body.lineHeight+'mm', 'text-align':field.body.textAlign}" class="cell">{{ detailRow[common.caseStyle(field.prop)] }}</span>
|
<template v-if="thIndex < element.fields.length-1">
|
<span :style="{'font-size':field.body.fontSize+'mm', 'line-height':field.body.lineHeight+'mm', 'text-align':field.body.textAlign}" class="cell"> * </span>
|
</template>
|
</span>
|
<template v-if="index3 < billDataInfo[element.tableView].rows.length-1">；</template>
|
</span>
|
</div>
|
<!-- 显示为表格 -->
|
<table v-else class="detail-table">
|
<thead v-if="element.showHeader">
|
<draggable v-model="element.fields" :class="{'drag-th':true}" :options="{group:'detail', ghostClass: 'ghost', animation:300, chosenClass:'chosen-item'}" tag="tr">
|
<th v-for="(th, thIndex) in element.fields" :key="thIndex" :style="{'border-color':element.borderColor}">
|
<div :style="getHeaderDivStyle(th)" class="cell">{{ th.label }}</div>
|
</th>
|
</draggable>
|
</thead>
|
<tbody>
|
<template v-if="!billDataInfo[element.tableView] || !billDataInfo[element.tableView].rows || !billDataInfo[element.tableView].rows.length">
|
<tr>
|
<td :colspan="element.fields.length" :style="{'border-color':element.borderColor}" class="no-detail-row">
|
<div class="cell">没有明细数据</div>
|
</td>
|
</tr>
|
</template>
|
<template v-else>
|
<tr v-for="(detailRow, index3) in currentPageData(billDataInfo[element.tableView].rows, pageIndex)" :key="'tr'+index3">
|
<td v-for="(field, thIndex) in element.fields" :key="thIndex" :style="{'border-color':element.borderColor}">
|
<div :style="getBodyDivStyle(field)" class="cell">{{ getDetailData(detailRow, field, index3) }}</div>
|
</td>
|
</tr>
|
</template>
|
</tbody>
|
</table>
|
<!-- <div style="text-align:right;margin-top: 20px;">
|
{{ pageIndex }} / {{ pageCount(billDataInfo) }}
|
</div> -->
|
</template>
|
<template v-else-if="element.type=='field'">
|
<div :style="element.styles" class="text-box">
|
<div :style="element.label.styles" class="label">{{ element.label.title }}
|
<template v-if="element.label.showColon">：</template>
|
</div>
|
<div :style="element.text.styles" class="text">{{ getMainData(billDataInfo, vueData, element.text.prop, element) }}</div>
|
</div>
|
</template>
|
<!--一维码-->
|
<template v-else-if="element.type=='barcode'">
|
<div :style="element.styles" class="text-box">
|
<vue-barcode :value="getMainData(billDataInfo, vueData, element.barcode.value, element)" :options="element.barcode.options" />
|
</div>
|
</template>
|
<!--二维码-->
|
<template v-else-if="element.type=='qrcode'">
|
<div :style="element.styles" class="text-box">
|
<vue-qrcode :value="getMainData(billDataInfo, vueData, element.qrOptions.value, element)" :options="element.qrOptions" />
|
</div>
|
</template>
|
<template v-else-if="element.type=='image'">
|
<div :style="element.styles" class="text-box">
|
<img v-if="element.image.imageUrl" :src="element.image.imageUrl" :style="{width:element.image.width+'mm', height:element.image.height+'mm'}" class="img">
|
</div>
|
</template>
|
<template v-else-if="['line-horizontal', 'line-vertical'].indexOf(element.type)>=0">
|
<div :style="element.styles" class="text-box" />
|
</template>
|
<template v-else-if="['pagination'].indexOf(element.type)>=0">
|
<div :style="element.styles" class="pagination-box">
|
<div v-if="element.layout==='第1/5页'" class="label">第{{ pageIndex }}/{{ pageCount(billDataInfo) }}页</div>
|
<div v-else-if="element.layout==='第1页/共5页'" class="label">第{{ pageIndex }}页/共{{ pageCount(billDataInfo) }}页</div>
|
<div v-else class="label">{{ pageIndex }}/{{ pageCount(billDataInfo) }}</div>
|
</div>
|
<div :style="element.styles" class="text-box" />
|
</template>
|
<template v-else>
|
<div :style="element.styles" class="text-box">
|
<div :style="element.label.styles" class="label">{{ element.label.title }}</div>
|
</div>
|
</template>
|
</DraggableResizable>
|
</template>
|
</draggable>
|
</div>
|
</div>
|
</template>
|
</template>
|
<el-form class="padding-20 no-print">
|
<el-form-item>
|
<el-button v-if="!onlyLodop" type="primary" @click="printBill">打印</el-button>
|
<el-button type="primary" @click="lodopPrint()">LODOP直接打印</el-button>
|
<el-button type="primary" @click="lodopPrint('preview')">LODOP打印预览</el-button>
|
<el-button v-if="!onlyLodop" type="primary" @click="exportPDF">导出JPG图片</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import Draggable from 'vuedraggable'
|
import DraggableResizable from '@/components/base/draggable-resizable'
|
import VueBarcode from '@xkeshi/vue-barcode'
|
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
import { getLodop } from '@/utils/LodopFuncs'
|
// import html2canvas from "html2canvas";
|
// import JsPDF from "jspdf";
|
import $ from 'jquery'
|
var moment = require('moment')
|
|
export default {
|
name: 'PrintBase',
|
components: {
|
Draggable,
|
DraggableResizable,
|
VueBarcode,
|
VueQrcode
|
},
|
props: {
|
// 打印模板ID
|
menuId: {
|
type: String,
|
required: false,
|
default: ''
|
},
|
// 打印单据ID List
|
ids: {
|
type: String,
|
required: false,
|
default: ''
|
},
|
// 打印机名称
|
printName: {
|
type: String,
|
required: false,
|
default: ''
|
},
|
// 自动打印
|
isAutoPrint: {
|
type: Boolean,
|
default: false
|
},
|
// 自动加载数据
|
isAutoLoad: {
|
type: Boolean,
|
default: true
|
},
|
// 仅显示lodop按钮
|
onlyLodop: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
// 打印布局数据结构
|
vueData: {},
|
// 打印参数
|
printInfo: {},
|
// 单据数据列表
|
billDataList: [],
|
BASE_API: process.env.BASE_API
|
}
|
},
|
computed: {
|
// 画布样式设置
|
canvasStyle: function() {
|
var opts = this.vueData.dataOptions
|
if (!opts) return {}
|
|
return {
|
width: opts.width + 'mm',
|
height: opts.height + 'mm',
|
'padding-top': opts.paddingTop + 'mm',
|
'padding-bottom': opts.paddingBottom + 'mm',
|
'padding-left': opts.paddingLeft + 'mm',
|
'padding-right': opts.paddingRight + 'mm'
|
}
|
},
|
// 获得分页数
|
pageCount: function() {
|
return function(billDataInfo) {
|
const subTableInfo = this.vueData.fields.find(item => item.type === 'table') // 明细表参数
|
if (!subTableInfo) {
|
return 1
|
}
|
|
const subTableData = billDataInfo[subTableInfo.tableView]
|
if (!subTableData) {
|
return 1
|
}
|
const pageSize = subTableInfo.pageSize || 10
|
const count = Math.ceil(1.0 * subTableData.rows.length / pageSize)
|
return count
|
}
|
},
|
// 获得明细分页当前页数据
|
currentPageData: function() {
|
return function(rows, pageIndex) {
|
const subTableInfo = this.vueData.fields.find(item => item.type === 'table') // 明细表参数
|
if (!subTableInfo) {
|
return []
|
}
|
|
const pageSize = subTableInfo.pageSize || 10
|
var offset = (pageIndex - 1) * pageSize
|
return offset + pageSize >= rows.length ? rows.slice(offset, rows.length) : rows.slice(offset, offset + pageSize)
|
}
|
}
|
},
|
watch: {},
|
created() {
|
if (this.isAutoLoad) {
|
this.loadModuleData()
|
}
|
},
|
methods: {
|
// 加载模板信息
|
loadModuleData() {
|
debugger
|
var userInfo = this.common.getUserInfo()
|
this.billDataList.length = 0
|
var tid = this.menuId || this.$route.params.tid
|
var menu_id = this.menuId || this.$route.params.menu_id
|
var where = {
|
printTemplate_Id: tid,
|
userProduct_Id: userInfo.userProduct_Id
|
}
|
var url = '/api/common/loadEditData'
|
var params = {
|
folder: 'sys/print',
|
projectName: 'Rattan.Sys',
|
tableView: 'Base_PrintTemplate',
|
idField: 'printTemplate_Id',
|
where: where,
|
menu_Id: menu_id
|
}
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
var data = res.data
|
if (!data) {
|
this.$message.error('没有加载到打印配置信息！')
|
return
|
}
|
this.printInfo = data
|
this.vueData = JSON.parse(this.printInfo.vueData)
|
// 从标准通用接口里面获取数据
|
if (url === this.vueData.dataOptions.router) {
|
this.loadStandardBillData()
|
} else {
|
// 从自定义接口获取数据
|
this.loadCustomBillData()
|
}
|
} else {
|
this.$message.error(res.msg)
|
}
|
},
|
true
|
)
|
},
|
// 加载标准通用单据数据
|
loadStandardBillData() {
|
var ids = this.$route.params.ids
|
if (!ids) ids = '0'
|
var idList = ids.split(',')
|
idList.forEach(item => {
|
// var menu_id = this.$route.params.menu_id;
|
var url = this.vueData.dataOptions.router
|
var where = {}
|
const idField = this.common.caseStyle(this.vueData.dataOptions.idField)
|
where[idField] = item
|
// var params = {
|
// folder: this.vueData.dataOptions.folder,
|
// projectName: this.vueData.dataOptions.projectName,
|
// tableView: this.vueData.dataOptions.tableView,
|
// idField: this.vueData.dataOptions.idField,
|
// where: where,
|
// menu_Id: menu_id
|
// };
|
debugger
|
var key = this.$route.query.key
|
var keyValue = sessionStorage[key]
|
if (!keyValue) {
|
this.$message.error('打印数据不存在，关闭窗口，重新打印')
|
return
|
}
|
var params = JSON.parse(keyValue)
|
params.loadProductExpandFields = true
|
params.where = where
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
// console.log("标准模板", this.billDataList);
|
var data = res.data
|
if (!data) {
|
this.$message.error('没有加载到打印配置信息！')
|
return
|
}
|
// 将前端带过来的数据合并到主表中
|
data = Object.assign(res.data, params)
|
this.billDataList.push(data)
|
// 自动打印
|
if (this.isAutoPrint) {
|
this.$nextTick(() => {
|
this.lodopPrint()
|
})
|
}
|
} else {
|
this.$message.error(res.msg)
|
}
|
},
|
true
|
)
|
})
|
},
|
// 加载单据数据
|
loadCustomBillData() {
|
var ids = this.ids || this.$route.params.ids
|
var url = this.vueData.dataOptions.router
|
var params = {
|
ids: ids.split(','),
|
menu_Id: this.vueData.dataOptions.menu_Id,
|
loadProductExpandFields: true
|
}
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
this.billDataList = this.billDataList.concat(res.data)
|
// if (this.billDataList.length > 1) {
|
// console.log("存在两条以上", this.billDataList);
|
// }
|
// 自动打印
|
if (this.isAutoPrint) {
|
this.$nextTick(() => {
|
this.lodopPrint()
|
})
|
}
|
} else {
|
this.$message.error(res.msg)
|
}
|
},
|
true
|
)
|
},
|
// 打印单据
|
printBill() {
|
window.print()
|
},
|
// lodop打印
|
lodopPrint(type) {
|
const LODOP = getLodop()
|
LODOP.SET_LICENSES('达令心潮(北京)商贸有限公司', 'B95259F540E2C256132EC7CE6AB55737', '', '')
|
LODOP.PRINT_INITA(0, 0, '10cm', '15px', '面单打印')
|
LODOP.SET_PRINT_PAGESIZE(1, '10cm', '15cm', '面单打印')
|
|
var the = this
|
if ($("div[print-name='" + this.printName + "'].print-list-container .canvas-container").length === 0) {
|
this.$message.error('没有可打印的内容！！！！')
|
}
|
$("div[print-name='" + this.printName + "'].print-list-container .canvas-container").each(function(i) {
|
LODOP.NEWPAGE()
|
var content = '<style>' + _style + '</style>' + this.outerHTML
|
LODOP.ADD_PRINT_HTM('0mm', '0mm', '10cm', '15cm', content)
|
|
var billInfo = the.billDataList[i]
|
if (!the.vueData.fields) return true
|
|
the.vueData.fields.forEach(item => {
|
if (item.type === 'barcode') {
|
const prop = the.common.caseStyle(item.barcode.value)
|
const val = the.getMainData(billInfo, the.vueData, prop)
|
const lodopBarcode = item.barcode.options.lodopBarcode || '128A'
|
LODOP.ADD_PRINT_BARCODE(
|
item.options.y + item.barcode.options.textMargin + 10,
|
item.options.x,
|
item.options.w - item.barcode.options.textMargin - 10,
|
item.barcode.options.height + 10,
|
lodopBarcode,
|
val
|
)
|
} else if (item.type === 'qrcode') {
|
const prop = the.common.caseStyle(item.qrOptions.value)
|
let val = the.getMainData(billInfo, the.vueData, prop)
|
if (!val) {
|
val = item.qrOptions.value
|
}
|
LODOP.ADD_PRINT_BARCODE(
|
item.options.y + item.qrOptions.margin,
|
item.options.x + item.qrOptions.margin,
|
item.qrOptions.width,
|
item.qrOptions.width,
|
'QRCode',
|
val
|
)
|
}
|
})
|
})
|
// 导出PDF
|
if (type === 'pdf') {
|
LODOP.SET_PRINTER_INDEXA('Microsoft print to PDF')
|
LODOP.PRINT()
|
} else {
|
// 指定打印机
|
if (this.printName) {
|
LODOP.SET_PRINTER_INDEXA(this.printName)
|
}
|
if (type === 'preview') {
|
LODOP.PREVIEW()
|
} else {
|
LODOP.PRINT()
|
}
|
}
|
},
|
// 导出PDF
|
exportPDF() {
|
const LODOP = getLodop()
|
const exist = LODOP.SET_PRINTER_INDEXA('Microsoft print to PDF')
|
if (!exist) {
|
window.alert('未安装PDF镜像打印机，请按照弹出窗口安装PDF镜像打印机')
|
window.open('https://jingyan.baidu.com/article/59a015e373b154f795886555.html')
|
return
|
}
|
this.lodopPrint('pdf')
|
},
|
// 获得主表数据，先从主表获得，如果没有从otherData中获取
|
getMainData(billDataInfo, vueData, prop, element) {
|
prop = this.common.caseStyle(prop)
|
let masterData = billDataInfo[vueData.dataOptions.tableView]
|
if (!masterData) masterData = billDataInfo
|
masterData.date = moment(new Date()).format('YYYY-MM-DD') // 打印日期
|
masterData.dateTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss') // 打印日期时间
|
|
var data = masterData[prop]
|
if (!data && billDataInfo['otherData']) {
|
data = billDataInfo['otherData'][prop]
|
}
|
if (element.text && ['datetime', 'date'].indexOf(element.text.dataType) >= 0) {
|
const formatter = element.text.formatter || 'YYYY-MM-DD HH:mm:ss'
|
data = this.common.formatDate(data, formatter)
|
}
|
if (Array.isArray(data)) data = data.join(',')
|
return data
|
},
|
// label获得混编数据
|
getLabelValue(billDataInfo, vueData, element) {
|
let title = element.label.title
|
// 主表数据
|
const mainData = billDataInfo
|
Object.keys(mainData).forEach(key => {
|
const data = mainData[key]
|
title = title.replace('{' + key + '}', data)
|
})
|
if (billDataInfo['otherData']) {
|
const otherData = billDataInfo['otherData']
|
Object.keys(otherData).forEach(key => {
|
const data = otherData[key]
|
title = title.replace('{' + key + '}', data)
|
})
|
}
|
return title
|
},
|
// 获得明细数据
|
getDetailData(detailRow, field, index) {
|
const prop = this.common.caseStyle(field.prop)
|
let data = detailRow[prop]
|
if (prop === 'index') {
|
data = index + 1
|
} else if (field.body && ['datetime', 'date'].indexOf(field.body.dataType) >= 0) {
|
const formatter = field.body.formatter || 'YYYY-MM-DD HH:mm:ss'
|
data = this.common.formatDate(data, formatter)
|
} else if (field.body && ['byte', 'int16', 'int32', 'int64', 'decimal', 'double', 'single'].indexOf(field.body.dataType) >= 0) {
|
const formatter = field.body.formatter || '#.##'
|
data = this.common.formatNumber(data, formatter)
|
}
|
if (field.body && field.body.maxLength && field.body.maxLength > 0) {
|
if (data) {
|
const _data = data.toString()
|
if (_data.length > field.body.maxLength) {
|
data = _data.substr(0, field.body.maxLength) + '...'
|
}
|
}
|
}
|
// 0值不显示
|
if (field.body && field.body.zeroHide && (data === '0' || !data)) {
|
data = ''
|
}
|
return data
|
},
|
// 表格头部div样式
|
getHeaderDivStyle(th) {
|
const data = { 'font-size': th.header.fontSize + 'mm', 'line-height': th.header.lineHeight + 'mm', 'text-align': th.header.textAlign }
|
if (th.width) {
|
data.width = th.width + 'px'
|
}
|
return data
|
},
|
// 表格body div样式
|
getBodyDivStyle(field) {
|
const data = { 'font-size': field.body.fontSize + 'mm', 'line-height': field.body.lineHeight + 'mm', 'text-align': field.body.textAlign }
|
if (field.width) {
|
data.width = field.width + 'px'
|
}
|
return data
|
}
|
}
|
}
|
|
var _style = `
|
.vdr {
|
position: absolute;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
.handle {
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
display: none;
|
position: absolute;
|
width: 10px;
|
height: 10px;
|
font-size: 1px;
|
background: #eee;
|
border: 1px solid #333;
|
z-index: 999;
|
}
|
.handle-tl {
|
top: -5px;
|
left: -5px;
|
cursor: nw-resize;
|
}
|
.handle-tm {
|
top: -5px;
|
left: 50%;
|
margin-left: -5px;
|
cursor: n-resize;
|
}
|
.handle-tr {
|
top: -5px;
|
right: -5px;
|
cursor: ne-resize;
|
}
|
.handle-ml {
|
top: 50%;
|
margin-top: -5px;
|
left: -5px;
|
cursor: w-resize;
|
}
|
.handle-mr {
|
top: 50%;
|
margin-top: -5px;
|
right: -5px;
|
cursor: e-resize;
|
}
|
.handle-bl {
|
bottom: -5px;
|
left: -5px;
|
cursor: sw-resize;
|
}
|
.handle-bm {
|
bottom: -5px;
|
left: 50%;
|
margin-left: -5px;
|
cursor: s-resize;
|
}
|
.handle-br {
|
bottom: -5px;
|
right: -5px;
|
cursor: se-resize;
|
}
|
@media only screen and (max-width: 768px) {
|
/* For mobile phones: */
|
[class*="handle-"]:before {
|
content: "";
|
left: -10px;
|
right: -10px;
|
bottom: -10px;
|
top: -10px;
|
position: absolute;
|
}
|
}
|
|
.print-list-container{
|
padding:0px;
|
margin:0px;
|
}
|
.canvas-container {
|
background-color: white;
|
margin: 0px;
|
}
|
.canvas-container .canvas-content {
|
height: 100%;
|
padding-bottom: 0px;
|
border: 1px none #000000;
|
}
|
.canvas-container .canvas-content .drag-list {
|
height: 100%;
|
position: relative;
|
}
|
.canvas-container .canvas-content .tool {
|
display: none;
|
position: absolute;
|
right: 0;
|
bottom: -30px;
|
}
|
.canvas-container .canvas-content .text-box {
|
overflow: hidden;
|
/*white-space: nowrap;*/
|
line-height:25px;
|
}
|
.canvas-container .canvas-content .text-box .label {
|
width: 120px;
|
display: inline-block;
|
text-align: right;
|
}
|
.canvas-container .canvas-content .text-box .text {
|
display: inline-block;
|
}
|
.canvas-container .ghost {
|
background: #fff;
|
border: 1px dashed #409eff;
|
}
|
.canvas-container .ghost::after {
|
background: #fff;
|
}
|
.canvas-container li.ghost {
|
height: 30px;
|
list-style: none;
|
font-size: 0;
|
}
|
.canvas-container .detail-table {
|
border-collapse: collapse;
|
border: 1px solid #dcdfe6;
|
background-color: white;
|
width: 100%;
|
}
|
.canvas-container .detail-table th,
|
.canvas-container .detail-table td {
|
font-weight: normal;
|
position: relative;
|
border-collapse: collapse;
|
border: 1px solid #dcdfe6;
|
padding: 3px 10px;
|
}
|
.canvas-container .detail-table th .cell,
|
.canvas-container .detail-table td .cell {
|
min-height: 20px;
|
}
|
.canvas-container .detail-table th.drag-active,
|
.canvas-container .detail-table td.drag-active {
|
background-color: #d5eaff;
|
}
|
.canvas-container .detail-table th.drag-active .tool,
|
.canvas-container .detail-table td.drag-active .tool {
|
display: block;
|
}
|
.canvas-container .detail-table .no-detail-row {
|
text-align: center;
|
color: #888;
|
padding: 20px;
|
}
|
@media print {
|
.canvas-container {
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
margin: 0px;
|
}
|
.canvas-container .canvas-content {
|
border: 0px dotted #000000;
|
}
|
.no-print {
|
display: none;
|
}
|
.page-next {
|
page-break-after: always;
|
}
|
}
|
`
|
</script>
|
|
<style lang="scss" scoped>
|
.canvas-container {
|
background-color: white;
|
-moz-box-shadow: 0px 0px 10px #3d3d3d;
|
-webkit-box-shadow: 0px 0px 10px #3d3d3d;
|
box-shadow: 0px 0px 10px #3d3d3d;
|
margin: 20px;
|
.canvas-content {
|
.drag-list {
|
height: 100%;
|
position: relative;
|
}
|
height: 100%;
|
padding-bottom: 0px;
|
border: 1px none #000000;
|
|
// .resable-item {
|
// &.active {
|
// border: 1px dashed #888;
|
// }
|
// }
|
.tool {
|
display: none;
|
position: absolute;
|
right: 0;
|
bottom: -30px;
|
}
|
// .active {
|
// background-color: rgb(213, 234, 255);
|
// > .tool {
|
// display: block;
|
// }
|
// }
|
.text-box {
|
overflow: hidden;
|
white-space: nowrap;
|
.label {
|
width: 120px;
|
display: inline-block;
|
text-align: right;
|
}
|
.text {
|
display: inline-block;
|
}
|
}
|
}
|
|
.ghost {
|
background: #fff;
|
border: 1px dashed #409eff;
|
|
&::after {
|
background: #fff;
|
}
|
}
|
|
li.ghost {
|
height: 30px;
|
list-style: none;
|
font-size: 0;
|
}
|
|
.detail-table {
|
border-collapse: collapse;
|
border: 1px solid #dcdfe6;
|
background-color: white;
|
width: 100%;
|
th,
|
td {
|
font-weight: normal;
|
position: relative;
|
border-collapse: collapse;
|
border: 1px solid #dcdfe6;
|
padding: 3px 2px;
|
.cell {
|
min-height: 20px;
|
word-break: break-all;
|
word-wrap: break-word;
|
}
|
&.drag-active {
|
background-color: rgb(213, 234, 255);
|
.tool {
|
display: block;
|
}
|
}
|
}
|
.no-detail-row {
|
text-align: center;
|
color: #888;
|
padding: 20px;
|
}
|
}
|
}
|
|
@media print {
|
.canvas-container {
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
margin: 0px;
|
.canvas-content {
|
border: 0px dotted #000000;
|
}
|
}
|
.no-print {
|
display: none;
|
}
|
.page-next {
|
page-break-after: always;
|
}
|
}
|
</style>
|
