|
|
|
|
<template>
|
|
|
|
|
<!-- 确认模板 -->
|
|
|
|
|
<div class=''>
|
|
|
|
|
<el-dialog title="模板确认" :visible.sync="showTemplate" width="50%" >
|
|
|
|
|
<div id="luckysheet"></div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showTemplate = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="showTemplate = false">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import LuckyExcel from 'luckyexcel';
|
|
|
|
|
import options from "@/utils/luckysheetConfig.js";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {};
|
|
|
|
|
},
|
|
|
|
|
created() { },
|
|
|
|
|
methods: {
|
|
|
|
|
handleCellEditBefore(e) {
|
|
|
|
|
this.drawer = true;
|
|
|
|
|
let column = parseInt(e[0].column[0]) + 1, row = parseInt(e[0].row[0]) + 1;
|
|
|
|
|
this.selectedCell = "第" + row + "行" + "第" + column + "列";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log(this.fileUrl, 'fileUrl===');
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
window.luckysheet.destroy();
|
|
|
|
|
options.title = '模板确认'
|
|
|
|
|
options.data = [
|
|
|
|
|
{
|
|
|
|
|
"name": "Cell", //工作表名称
|
|
|
|
|
"color": "", //工作表颜色
|
|
|
|
|
"index": 0, //工作表索引
|
|
|
|
|
"status": 1, //激活状态
|
|
|
|
|
"order": 0, //工作表的下标
|
|
|
|
|
"hide": 0,//是否隐藏
|
|
|
|
|
"row": 36, //行数
|
|
|
|
|
"column": 18, //列数
|
|
|
|
|
"defaultRowHeight": 19, //自定义行高其
|
|
|
|
|
"defaultColWidth": 73, //自定义列宽
|
|
|
|
|
"celldata": [{ r: 0, c: 0, v: { m: "1", v: 'value', bg: "#00FF00", ct: { fa: 'General', t: 'g' } } }], //初始化使用的单元格数据
|
|
|
|
|
"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": {} //数据验证配置
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
window.luckysheet.create({
|
|
|
|
|
...options,
|
|
|
|
|
hook: {
|
|
|
|
|
cellEditBefore: this.handleCellEditBefore,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
showTemplate: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
},
|
|
|
|
|
fileUrl: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {},
|
|
|
|
|
computed: {},
|
|
|
|
|
watch: {},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
#luckysheet{
|
|
|
|
|
height: 500px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
