|
|
|
@ -71,7 +71,7 @@
|
|
|
|
<!-- <div id="x-spreadsheet-demo"
|
|
|
|
<!-- <div id="x-spreadsheet-demo"
|
|
|
|
class="excel-designer" /> -->
|
|
|
|
class="excel-designer" /> -->
|
|
|
|
<div id="luckysheet"
|
|
|
|
<div id="luckysheet"
|
|
|
|
style="margin:0px;padding:0px;position:absolute;width:100%;height:800px;left: 0px;top: 30px;bottom:0px;" />
|
|
|
|
style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;" />
|
|
|
|
<div id="qrCode"
|
|
|
|
<div id="qrCode"
|
|
|
|
ref="qrCodeDiv" />
|
|
|
|
ref="qrCodeDiv" />
|
|
|
|
<img id="barCode">
|
|
|
|
<img id="barCode">
|
|
|
|
@ -152,7 +152,7 @@
|
|
|
|
<el-table ref="multipleTable"
|
|
|
|
<el-table ref="multipleTable"
|
|
|
|
:data="dataSetData"
|
|
|
|
:data="dataSetData"
|
|
|
|
tooltip-effect="dark"
|
|
|
|
tooltip-effect="dark"
|
|
|
|
style="width: 100%"
|
|
|
|
style="width: 100%;height: 60vh;overflow-y: scroll;"
|
|
|
|
@selection-change="handleSelectionChange">
|
|
|
|
@selection-change="handleSelectionChange">
|
|
|
|
<el-table-column type="selection"
|
|
|
|
<el-table-column type="selection"
|
|
|
|
width="55" />
|
|
|
|
width="55" />
|
|
|
|
@ -230,13 +230,11 @@ import { addReportExcel, editReportExcel } from '@/api/report'
|
|
|
|
import ColorPicker from '../../bigscreen/designer/form/colorPicker.vue'
|
|
|
|
import ColorPicker from '../../bigscreen/designer/form/colorPicker.vue'
|
|
|
|
// import QRCode from 'qrcodejs2'
|
|
|
|
// import QRCode from 'qrcodejs2'
|
|
|
|
// import JsBarcode from 'jsbarcode'
|
|
|
|
// import JsBarcode from 'jsbarcode'
|
|
|
|
import LuckySheet from 'luckysheet'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'Excels',
|
|
|
|
name: 'Excels',
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
draggable,
|
|
|
|
draggable,
|
|
|
|
ColorPicker,
|
|
|
|
ColorPicker,
|
|
|
|
LuckySheet
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -329,82 +327,141 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
mounted () {
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
|
|
|
|
|
|
this.options = [
|
|
|
|
luckysheet.create({
|
|
|
|
{ text: 'Money Manager.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Activity costs tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'House cleaning checklist.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Student assignment planner.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Credit card tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Blue timesheet.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Student calendar (Mon).xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx' },
|
|
|
|
|
|
|
|
{ text: 'Blue mileage and expense report.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx' },
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
LuckySheet.create({
|
|
|
|
|
|
|
|
container: 'luckysheet', // 设定DOM容器的id
|
|
|
|
container: 'luckysheet', // 设定DOM容器的id
|
|
|
|
title: 'Luckysheet Demo', // 设定表格名称
|
|
|
|
title: 'Luckysheet Demo', // 设定表格名称
|
|
|
|
lang: 'zh', // 设定表格语言
|
|
|
|
lang: 'zh', // 设定表格语言
|
|
|
|
plugins:['chart'],
|
|
|
|
plugins:['chart'],
|
|
|
|
data: [{
|
|
|
|
hook:{
|
|
|
|
'name': 'Cell', // 工作表名称
|
|
|
|
cellDragStop: function (cell, postion, sheetFile, ctx, event) {
|
|
|
|
'color': '', // 工作表颜色
|
|
|
|
// console.info(cell, postion, sheetFile, ctx, event);
|
|
|
|
'index': 0, // 工作表索引
|
|
|
|
},
|
|
|
|
'status': 1, // 激活状态
|
|
|
|
rowTitleCellRenderBefore:function(rowNum,postion,ctx){
|
|
|
|
'order': 0, // 工作表的下标
|
|
|
|
// console.log(rowNum);
|
|
|
|
'hide': 0, // 是否隐藏
|
|
|
|
},
|
|
|
|
'row': 36, // 行数
|
|
|
|
rowTitleCellRenderAfter:function(rowNum,postion,ctx){
|
|
|
|
'column': 18, // 列数
|
|
|
|
// console.log(ctx);
|
|
|
|
'defaultRowHeight': 19, // 自定义行高
|
|
|
|
},
|
|
|
|
'defaultColWidth': 73, // 自定义列宽
|
|
|
|
columnTitleCellRenderBefore:function(columnAbc,postion,ctx){
|
|
|
|
'celldata': [], // 初始化使用的单元格数据
|
|
|
|
// console.log(columnAbc);
|
|
|
|
'config': {
|
|
|
|
},
|
|
|
|
'merge': {}, // 合并单元格
|
|
|
|
columnTitleCellRenderAfter:function(columnAbc,postion,ctx){
|
|
|
|
'rowlen': {}, // 表格行高
|
|
|
|
// console.log(postion);
|
|
|
|
'columnlen': {}, // 表格列宽
|
|
|
|
},
|
|
|
|
'rowhidden': {}, // 隐藏行
|
|
|
|
cellRenderBefore:function(cell,postion,sheetFile,ctx){
|
|
|
|
'colhidden': {}, // 隐藏列
|
|
|
|
// console.log(cell,postion,sheetFile,ctx);
|
|
|
|
'borderInfo': {}, // 边框
|
|
|
|
},
|
|
|
|
'authority': {}, // 工作表保护
|
|
|
|
cellRenderAfter:function(cell,postion,sheetFile,ctx){
|
|
|
|
|
|
|
|
// console.log(postion);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
cellMousedownBefore:function(cell,postion,sheetFile,ctx){
|
|
|
|
|
|
|
|
// console.log("cellMousedownBefore", postion);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
cellMousedown:function(cell,postion,sheetFile,ctx){
|
|
|
|
|
|
|
|
// console.log("cellMousedown",sheetFile);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
sheetMousemove:function(cell,postion,sheetFile,moveState,ctx){
|
|
|
|
|
|
|
|
// console.log("sheetMousemove",cell,postion,sheetFile,moveState,ctx);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
sheetMouseup:function(cell,postion,sheetFile,moveState,ctx){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("sheetMouseup",cell,postion,sheetFile,moveState,ctx);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
'scrollLeft': 0, // 左右滚动条位置
|
|
|
|
cellAllRenderBefore:function(data,sheetFile,ctx){
|
|
|
|
'scrollTop': 315, // 上下滚动条位置
|
|
|
|
// console.info(data,sheetFile,ctx)
|
|
|
|
'luckysheet_select_save': [], // 选中的区域
|
|
|
|
|
|
|
|
'calcChain': [], // 公式链
|
|
|
|
|
|
|
|
'isPivotTable': false, // 是否数据透视表
|
|
|
|
|
|
|
|
'pivotTable': {}, // 数据透视表设置
|
|
|
|
|
|
|
|
'filter_select': {}, // 筛选范围
|
|
|
|
|
|
|
|
'filter': null, // 筛选配置
|
|
|
|
|
|
|
|
'luckysheet_alternateformat_save': [], // 交替颜色
|
|
|
|
|
|
|
|
'luckysheet_alternateformat_save_modelCustom': [], // 自定义交替颜色
|
|
|
|
|
|
|
|
'luckysheet_conditionformat_save': {}, // 条件格式
|
|
|
|
|
|
|
|
'frozen': {}, // 冻结行列配置
|
|
|
|
|
|
|
|
'chart': [], // 图表配置
|
|
|
|
|
|
|
|
'zoomRatio': 1, // 缩放比例
|
|
|
|
|
|
|
|
'image': [], // 图片
|
|
|
|
|
|
|
|
'showGridLines': 1, // 是否显示网格线
|
|
|
|
|
|
|
|
'dataVerification': {} // 数据验证配置
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
updated:function(operate){
|
|
|
|
'name': 'Sheet2',
|
|
|
|
// console.info(operate)
|
|
|
|
'color': '',
|
|
|
|
},
|
|
|
|
'index': 1,
|
|
|
|
cellUpdateBefore:function(r,c,value,isRefresh){
|
|
|
|
'status': 0,
|
|
|
|
// console.info('cellUpdateBefore',r,c,value,isRefresh)
|
|
|
|
'order': 1,
|
|
|
|
},
|
|
|
|
'celldata': [],
|
|
|
|
cellUpdated:function(r,c,oldValue, newValue, isRefresh){
|
|
|
|
'config': {}
|
|
|
|
// console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
sheetActivate:function(index, isPivotInitial, isNewSheet){
|
|
|
|
|
|
|
|
// console.info(index, isPivotInitial, isNewSheet)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
rangeSelect:function(index, sheet){
|
|
|
|
|
|
|
|
// console.info(index, sheet)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
commentInsertBefore:function(r, c){
|
|
|
|
|
|
|
|
// console.info(r, c)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
commentInsertAfter:function(r, c, cell){
|
|
|
|
|
|
|
|
// console.info(r, c, cell)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
commentDeleteBefore:function(r, c, cell){
|
|
|
|
|
|
|
|
// console.info(r, c, cell)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
commentDeleteAfter:function(r, c, cell){
|
|
|
|
|
|
|
|
// console.info(r, c, cell)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
commentUpdateBefore:function(r, c, value){
|
|
|
|
|
|
|
|
// console.info(r, c, value)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
commentUpdateAfter:function(r, c, oldCell, newCell ){
|
|
|
|
|
|
|
|
// console.info(r, c, oldCell, newCell)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
cellEditBefore:function(range ){
|
|
|
|
|
|
|
|
// console.info(range)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
workbookCreateAfter:function(json){
|
|
|
|
|
|
|
|
// console.info(json)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
rangePasteBefore:function(range,data){
|
|
|
|
|
|
|
|
// console.info('rangePasteBefore',range,data)
|
|
|
|
|
|
|
|
// return false; //Can intercept paste
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data:[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
'name': 'Sheet3',
|
|
|
|
"name": "report", //工作表名称
|
|
|
|
'color': '',
|
|
|
|
"color": "", //工作表颜色
|
|
|
|
'index': 2,
|
|
|
|
"index": 0, //工作表索引
|
|
|
|
'status': 0,
|
|
|
|
"status": 1, //激活状态
|
|
|
|
'order': 2,
|
|
|
|
"order": 0, //工作表的下标
|
|
|
|
'celldata': [],
|
|
|
|
"hide": 0,//是否隐藏
|
|
|
|
'config': {},
|
|
|
|
"row": 36, //行数
|
|
|
|
|
|
|
|
"column": 18, //列数
|
|
|
|
|
|
|
|
"defaultRowHeight": 19, //自定义行高
|
|
|
|
|
|
|
|
"defaultColWidth": 73, //自定义列宽
|
|
|
|
|
|
|
|
"celldata": [], //初始化使用的单元格数据
|
|
|
|
|
|
|
|
"config": {
|
|
|
|
|
|
|
|
"merge":{}, //合并单元格
|
|
|
|
|
|
|
|
"rowlen":{}, //表格行高
|
|
|
|
|
|
|
|
"columnlen":{}, //表格列宽
|
|
|
|
|
|
|
|
"rowhidden":{}, //隐藏行
|
|
|
|
|
|
|
|
"colhidden":{}, //隐藏列
|
|
|
|
|
|
|
|
"borderInfo":{}, //边框
|
|
|
|
|
|
|
|
"authority":{}, //工作表保护
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
"scrollLeft": 0, //左右滚动条位置
|
|
|
|
|
|
|
|
"scrollTop": 315, //上下滚动条位置
|
|
|
|
|
|
|
|
"luckysheet_select_save": [], //选中的区域
|
|
|
|
|
|
|
|
"calcChain": [],//公式链
|
|
|
|
|
|
|
|
"isPivotTable":false,//是否数据透视表
|
|
|
|
|
|
|
|
"pivotTable":{},//数据透视表设置
|
|
|
|
|
|
|
|
"filter_select": {},//筛选范围
|
|
|
|
|
|
|
|
"filter": null,//筛选配置
|
|
|
|
|
|
|
|
"luckysheet_alternateformat_save": [], //交替颜色
|
|
|
|
|
|
|
|
"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
|
|
|
|
|
|
|
|
"luckysheet_conditionformat_save": {},//条件格式
|
|
|
|
|
|
|
|
"frozen": {}, //冻结行列配置
|
|
|
|
|
|
|
|
"chart": [], //图表配置
|
|
|
|
|
|
|
|
"zoomRatio":1, // 缩放比例
|
|
|
|
|
|
|
|
"image":[], //图片
|
|
|
|
|
|
|
|
"showGridLines": 1, //是否显示网格线
|
|
|
|
|
|
|
|
"dataVerification":{} //数据验证配置
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.load()
|
|
|
|
// this.load()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -524,6 +581,7 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onStart (setCode) {
|
|
|
|
onStart (setCode) {
|
|
|
|
this.setCode = setCode
|
|
|
|
this.setCode = setCode
|
|
|
|
|
|
|
|
console.log(setCode)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onEnd (evt) {
|
|
|
|
onEnd (evt) {
|
|
|
|
// 获取结束坐标和列名
|
|
|
|
// 获取结束坐标和列名
|
|
|
|
@ -532,11 +590,24 @@ export default {
|
|
|
|
var fieldLabel = evt.item.innerText // 列名称
|
|
|
|
var fieldLabel = evt.item.innerText // 列名称
|
|
|
|
var excelToolbarHeight = 40 // excel工具栏
|
|
|
|
var excelToolbarHeight = 40 // excel工具栏
|
|
|
|
var leftLayout = document.getElementsByClassName('layout-left')[0].clientWidth // 左侧宽度
|
|
|
|
var leftLayout = document.getElementsByClassName('layout-left')[0].clientWidth // 左侧宽度
|
|
|
|
|
|
|
|
console.log(luckysheet)
|
|
|
|
|
|
|
|
console.log("x:",x)
|
|
|
|
|
|
|
|
console.log("y:",y)
|
|
|
|
|
|
|
|
console.log("leftLayout左侧宽度:",leftLayout)
|
|
|
|
|
|
|
|
// const aaa = luckysheet.sheetMouseup()
|
|
|
|
|
|
|
|
luckysheet.setCellValue(0,0,"哈哈哈")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const a = luckysheet.getCellValue(0,0)
|
|
|
|
|
|
|
|
// debugger
|
|
|
|
|
|
|
|
console.log("滚动","aaa");
|
|
|
|
|
|
|
|
// console.log(a);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 计算行列
|
|
|
|
// 计算行列
|
|
|
|
const { ri, ci } = this.sheet.datas[0].getCellRectByXY(x - leftLayout, y - excelToolbarHeight)
|
|
|
|
// const { ri, ci } = this.sheet.datas[0].getCellRectByXY(x - leftLayout, y - excelToolbarHeight)
|
|
|
|
this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
|
|
|
|
// this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
|
|
|
|
// 设定值
|
|
|
|
// 设定值
|
|
|
|
this.sheet.reRender()
|
|
|
|
// this.sheet.reRender()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
del (val) {
|
|
|
|
del (val) {
|
|
|
|
for (let i = 0; i < this.dataSet.length; i++) {
|
|
|
|
for (let i = 0; i < this.dataSet.length; i++) {
|
|
|
|
|
Raod
3 years ago