|
|
@@ -71,7 +71,7 @@
|
|
|
<!-- <div id="x-spreadsheet-demo"
|
|
|
class="excel-designer" /> -->
|
|
|
<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"
|
|
|
ref="qrCodeDiv" />
|
|
|
<img id="barCode">
|
|
|
@@ -152,7 +152,7 @@
|
|
|
<el-table ref="multipleTable"
|
|
|
:data="dataSetData"
|
|
|
tooltip-effect="dark"
|
|
|
- style="width: 100%"
|
|
|
+ style="width: 100%;height: 60vh;overflow-y: scroll;"
|
|
|
@selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection"
|
|
|
width="55" />
|
|
|
@@ -230,13 +230,11 @@ import { addReportExcel, editReportExcel } from '@/api/report'
|
|
|
import ColorPicker from '../../bigscreen/designer/form/colorPicker.vue'
|
|
|
// import QRCode from 'qrcodejs2'
|
|
|
// import JsBarcode from 'jsbarcode'
|
|
|
-import LuckySheet from 'luckysheet'
|
|
|
export default {
|
|
|
name: 'Excels',
|
|
|
components: {
|
|
|
draggable,
|
|
|
ColorPicker,
|
|
|
- LuckySheet
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -329,82 +327,141 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
+ $(function () {
|
|
|
|
|
|
- this.options = [
|
|
|
- { 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
|
|
|
- title: 'Luckysheet Demo', // 设定表格名称
|
|
|
- lang: 'zh', // 设定表格语言
|
|
|
- plugins: ['chart'],
|
|
|
- data: [{
|
|
|
- 'name': 'Cell', // 工作表名称
|
|
|
- 'color': '', // 工作表颜色
|
|
|
- 'index': 0, // 工作表索引
|
|
|
- 'status': 1, // 激活状态
|
|
|
- 'order': 0, // 工作表的下标
|
|
|
- 'hide': 0, // 是否隐藏
|
|
|
- 'row': 36, // 行数
|
|
|
- 'column': 18, // 列数
|
|
|
- 'defaultRowHeight': 19, // 自定义行高
|
|
|
- 'defaultColWidth': 73, // 自定义列宽
|
|
|
- 'celldata': [], // 初始化使用的单元格数据
|
|
|
- 'config': {
|
|
|
- 'merge': {}, // 合并单元格
|
|
|
- 'rowlen': {}, // 表格行高
|
|
|
- 'columnlen': {}, // 表格列宽
|
|
|
- 'rowhidden': {}, // 隐藏行
|
|
|
- 'colhidden': {}, // 隐藏列
|
|
|
- 'borderInfo': {}, // 边框
|
|
|
- 'authority': {}, // 工作表保护
|
|
|
+ luckysheet.create({
|
|
|
+ container: 'luckysheet', // 设定DOM容器的id
|
|
|
+ title: 'Luckysheet Demo', // 设定表格名称
|
|
|
+ lang: 'zh', // 设定表格语言
|
|
|
+ plugins:['chart'],
|
|
|
+ hook:{
|
|
|
+ cellDragStop: function (cell, postion, sheetFile, ctx, event) {
|
|
|
+ // console.info(cell, postion, sheetFile, ctx, event);
|
|
|
+ },
|
|
|
+ rowTitleCellRenderBefore:function(rowNum,postion,ctx){
|
|
|
+ // console.log(rowNum);
|
|
|
+ },
|
|
|
+ rowTitleCellRenderAfter:function(rowNum,postion,ctx){
|
|
|
+ // console.log(ctx);
|
|
|
+ },
|
|
|
+ columnTitleCellRenderBefore:function(columnAbc,postion,ctx){
|
|
|
+ // console.log(columnAbc);
|
|
|
+ },
|
|
|
+ columnTitleCellRenderAfter:function(columnAbc,postion,ctx){
|
|
|
+ // console.log(postion);
|
|
|
+ },
|
|
|
+ cellRenderBefore:function(cell,postion,sheetFile,ctx){
|
|
|
+ // console.log(cell,postion,sheetFile,ctx);
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ cellAllRenderBefore:function(data,sheetFile,ctx){
|
|
|
+ // console.info(data,sheetFile,ctx)
|
|
|
+ },
|
|
|
+ updated:function(operate){
|
|
|
+ // console.info(operate)
|
|
|
+ },
|
|
|
+ cellUpdateBefore:function(r,c,value,isRefresh){
|
|
|
+ // console.info('cellUpdateBefore',r,c,value,isRefresh)
|
|
|
+ },
|
|
|
+ cellUpdated:function(r,c,oldValue, newValue, isRefresh){
|
|
|
+ // 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
|
|
|
+ },
|
|
|
},
|
|
|
- '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': {} // 数据验证配置
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': 'Sheet2',
|
|
|
- 'color': '',
|
|
|
- 'index': 1,
|
|
|
- 'status': 0,
|
|
|
- 'order': 1,
|
|
|
- 'celldata': [],
|
|
|
- 'config': {}
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': 'Sheet3',
|
|
|
- 'color': '',
|
|
|
- 'index': 2,
|
|
|
- 'status': 0,
|
|
|
- 'order': 2,
|
|
|
- 'celldata': [],
|
|
|
- 'config': {},
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
+ data:[
|
|
|
+ {
|
|
|
+ "name": "report", //工作表名称
|
|
|
+ "color": "", //工作表颜色
|
|
|
+ "index": 0, //工作表索引
|
|
|
+ "status": 1, //激活状态
|
|
|
+ "order": 0, //工作表的下标
|
|
|
+ "hide": 0,//是否隐藏
|
|
|
+ "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()
|
|
|
},
|
|
|
@@ -524,6 +581,7 @@ export default {
|
|
|
},
|
|
|
onStart (setCode) {
|
|
|
this.setCode = setCode
|
|
|
+ console.log(setCode)
|
|
|
},
|
|
|
onEnd (evt) {
|
|
|
// 获取结束坐标和列名
|
|
|
@@ -532,11 +590,24 @@ export default {
|
|
|
var fieldLabel = evt.item.innerText // 列名称
|
|
|
var excelToolbarHeight = 40 // excel工具栏
|
|
|
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)
|
|
|
- this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
|
|
|
+ // const { ri, ci } = this.sheet.datas[0].getCellRectByXY(x - leftLayout, y - excelToolbarHeight)
|
|
|
+ // this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
|
|
|
// 设定值
|
|
|
- this.sheet.reRender()
|
|
|
+ // this.sheet.reRender()
|
|
|
},
|
|
|
del (val) {
|
|
|
for (let i = 0; i < this.dataSet.length; i++) {
|
Raod