<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 :key="index + '_' + pageIndex" :style="canvasStyle" :id="(billDataInfo.mainInfo?billDataInfo.mainInfo.wayBillCode:index)" 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, index) in vueData.fields">
|
<DraggableResizable :key="index" :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, index) in billDataInfo[element.tableView].rows" :key="'tr'+index">
|
<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="index < 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, index) in currentPageData(billDataInfo[element.tableView].rows, pageIndex)" :key="'tr'+index">
|
<td v-for="(field, thIndex) in element.fields" :key="thIndex" :style="{'border-color':element.borderColor}">
|
<div :style="getBodyDivStyle(field)" class="cell">{{ getDetailData(detailRow, field) }}</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";
|
|
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() {
|
var userInfo = this.common.getUserInfo();
|
this.billDataList.length = 0;
|
var menu_id = this.menuId || this.$route.params.menu_id;
|
var where = {
|
menu_Id: menu_id,
|
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
|
// };
|
var key = this.$route.query.key;
|
var keyValue = sessionStorage[key];
|
if (!keyValue) {
|
this.$message.error("打印数据不存在，关闭窗口，重新打印");
|
return;
|
}
|
var params = JSON.parse(keyValue);
|
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;
|
}
|
this.billDataList.push(res.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
|
};
|
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;
|
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) {
|
const prop = this.common.caseStyle(field.prop);
|
let data = detailRow[prop];
|
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>
|
