elink-star
/
epmet-work-pc
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

删掉多余log，重复打开luckysheet会有缓存v-if解决不了

luckysheet_xiaowang
mk 10 months ago
parent
f410f709b0
commit
c726e4a5da
3 changed files with 145 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      src/utils/luckysheetConfig.js
  2. 171
      src/views/modules/base/smartExcel/cpts/export-view.vue
  3. 2
      src/views/modules/base/smartExcel/report.vue

20
src/utils/luckysheetConfig.js
View File

@ -85,18 +85,18 @@ const options = {
* {Boolean}[isRefresh]:是否刷新整个表格
*/
cellUpdateBefore: (r, c, value, isRefresh) => {
console.log("更新这个单元格值之前触发:cellUpdateBefore");
console.log(
`单元格所在行:${r};单元格所在列:${c};是否刷新整个表格:${isRefresh};要修改的单元格内容: `,
value
);
// console.log("更新这个单元格值之前触发:cellUpdateBefore");
// console.log(
// `单元格所在行:${r};单元格所在列:${c};是否刷新整个表格:${isRefresh};要修改的单元格内容: `,
// value
// );
},
/** 更新这个单元格后触发 */
cellUpdated: (r, c, oldValue, newValue, isRefresh) => {
console.log("cellUpdated:", r, c, oldValue, newValue);
// 获取单元格的值
const value = luckysheet.getCellValue(r, c, { type: "v" });
console.log("更新后的值:", value, "对值进行数据验证");
// console.log("cellUpdated:", r, c, oldValue, newValue);
// // 获取单元格的值
// const value = luckysheet.getCellValue(r, c, { type: "v" });
// console.log("更新后的值:", value, "对值进行数据验证");
},
/**单元格渲染前触发 return false 则不渲染该单元格
* 参数：
@ -261,7 +261,7 @@ const options = {
workbookDestroyAfter: (book) => { },
/** 协同编辑中的每次操作后执行的方法，监听表格内容变化，即客户端每执行一次表格操作，Luckysheet将这次操作存到历史记录中后触发，撤销重做时因为也算一次操作，也会触发此钩子函数 参数：{Object}[operate]:本次操作的历史记录信息，根据不同的操作，会有不同的历史记录 */
updated: (operate) => {
console.log("luckysheetUpdatedHook", operate);
// console.log("luckysheetUpdatedHook", operate);
// 监听更新，并在3s后自动保存
// if (autoSave) {
// console.log(autoSave, "autoSave");

171
src/views/modules/base/smartExcel/cpts/export-view.vue
View File

@ -4,16 +4,16 @@
<div class="top_btn flex flex-end">
<div>
<el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
<el-button type="warning" @click="handleClickInspect" v-if="pageType !=='info'">上传统计模板
<el-button type="warning" @click="handleClickInspect" v-if="pageType !== 'info'">上传统计模板
</el-button>
<el-button type="success" @click="onClickUplond()"v-if="pageType !=='info'"> 数据列表导出</el-button>
<el-button type="success" @click="onClickShowCondition()"v-if="pageType ==='info'"> 数据统计条件</el-button>
<el-button type="success" @click="onClickUplond()" v-if="pageType !== 'info'"> 数据列表导出</el-button>
<el-button type="success" @click="onClickShowCondition()" v-if="pageType === 'info'"> 数据统计条件</el-button>
</div>
<div>
<el-button type="primary" @click="handleClickCurrencyEvent('submit')"> 导出</el-button>
</div>
</div>
<div id="luckysheet"></div>
<div id="luckysheet-export"></div>
</div>
<el-dialog title="数据列表导出" v-if="showUploadData" :visible.sync="showUploadData" width="60%"
:close-on-click-modal="false">
@ -25,7 +25,29 @@
:close-on-click-modal="false">
<resi-search ref="resi_form" :infoObj="infoObj.searchForm"></resi-search>
</el-dialog>
<el-dialog title="上传统计模板" v-if="showTemplate" :visible.sync="showTemplate" width="60%"
:close-on-click-modal="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm"
:label-width="'120px'">
<el-form-item label="报表名称" prop="reportName">
<el-input v-model.trim="dataForm.reportName" placeholder="报表名称"></el-input>
</el-form-item>
<el-form-item label="上传模板">
<el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr"
v-if="!dataForm.moduleUrl" :limit="1" :accept="'.xlsx'" :with-credentials="true" :show-file-list="false"
:auto-upload="true" :on-success="handleExcelSuccess" :before-upload="beforeExcelUpload">
<template #trigger>
<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading">上传报表模板</el-button>
</template>
</el-upload>
<section v-else class="upload">
<img :src="require(`@/assets/images/index/Excel.png`)" alt="">
<span>{{ fileName }}</span>
<el-button type="text" @click="removeFile(file)" style="margin-left: 16px;"> 删除</el-button>
</section>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
@ -41,6 +63,9 @@ import resiSearch from "./export-search.vue";
export default {
data() {
return {
uploadUlr: window.SITE_CONFIG["apiURL"] +
"/oss/file/upload",
fullscreenLoading: false,
showUploadData: false,
menuList: [],
menuActive: 0,
@ -49,8 +74,18 @@ export default {
currentId: '',
btnLoading: false,
workBookId: '',
infoObj:{},
showCondition:false
infoObj: {},
showCondition: false,
showTemplate: false,
dataForm: {
reportType: 1,//报表类型。0：数据列表，1：统计数据
reportName: '',//报表名称
workbookId: '',
},
dataRule: {
reportName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
},
exportJson:null,
};
},
props: {
@ -70,38 +105,101 @@ export default {
...mapGetters(['clientHeight', 'resolution']),
},
created() {
},
watch: {},
async mounted() {
await this.loadWorkBook()
this.$nextTick( async ()=>{
this.$nextTick(async () => {
if (this.pageType === 'info') {
await this.getSheetList()
let heading = this.infoObj.columnsJson[0].children.map(item=>({label:item.label}))
for(let i in heading){
luckysheet.setCellValue(0,i,heading[i].label)
}
let list = await this.getListData(this.infoIds.id);
let newArrar = luckysheet.getAllSheets();
this.currentTable = newArrar.filter(item => item.status == '1');
luckysheet.insertRow(this.currentTable[0].data.length, 1)
luckysheet.insertRow(this.currentTable[0].data.length, { number: list.length });
await nextTick(500)
let newArray = list.map(obj => {
return Object.keys(obj).map(key => {
return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] };
await this.getSheetList()
let heading = this.infoObj.columnsJson[0].children.map(item => ({ label: item.label }))
for (let i in heading) {
luckysheet.setCellValue(0, i, heading[i].label)
}
let list = await this.getListData(this.infoIds.id);
let newArrar = luckysheet.getAllSheets();
this.currentTable = newArrar.filter(item => item.status == '1');
luckysheet.insertRow(this.currentTable[0].data.length, 1)
luckysheet.insertRow(this.currentTable[0].data.length, { number: list.length });
await nextTick(500)
let newArray = list.map(obj => {
return Object.keys(obj).map(key => {
return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] };
});
});
});
let bottomRightCorner = this.numberToLetter(Object.keys(list[0]).length)//选区右下角数字
luckysheet.setRangeValue(newArray, {
range: `A2:${bottomRightCorner}${2 + list.length}`,
})
}
let bottomRightCorner = this.numberToLetter(Object.keys(list[0]).length)//选区右下角数字
luckysheet.setRangeValue(newArray, {
range: `A2:${bottomRightCorner}${2 + list.length}`,
})
}
})
},
methods: {
onClickShowCondition(){
handleExcelSuccess(e) {
if (e.code === 0) {
// this.moduleUrl = e.data.url;
// this.urlToFile(e.data.url)
this.showTemplate = false;
this.urlToFile('http://localhost:9001/epmet-work-pc/test1.xlsx')
this.fullscreenLoading = false;
}
},
async urlToFile(url, fileName = 'file') {
try {
// 使用 fetch 获取文件数据
const response = await fetch(url);
// 检查请求是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 转换为 Blob 对象
const blob = await response.blob();
// 根据 Blob 创建 File 对象
const file = new File([blob], fileName, { type: 'excel/xlsx' });
this.uploadExcel(file)
} catch (error) {
console.error('Error fetching or converting file:', error);
throw error;
}
},
uploadExcel(files) {
if (!files) return alert('没有文件等待导入');
let that = this
LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
console.log(exportJson, '获取到导入的JSON');
that.exportJson = exportJson
if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
window.luckysheet.destroy();
options.container = 'luckysheet-export'
options.loadUrl = ''
window.luckysheet.create({
...options,
data: exportJson.sheets,//暂时支持上传一个sheet页，因为插件bug有点多
title: exportJson.info.name,
hook: {},
});
});
this.saveLuckysheet()
},
beforeExcelUpload(file) {
this.fullscreenLoading = true;
const isType = file.type === "application/vnd.ms-excel";
const isTypeComputer =
file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
const fileType = isType || isTypeComputer;
const isLt1M = file.size / 1024 / 1024 < 10;
if (!fileType) {
this.$message.error("上传文件只能是xls/xlsx格式！");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 10MB!");
}
this.fileName = file.name
return fileType && isLt1M;
},
onClickShowCondition() {
this.showCondition = true
},
async getSheetList() {
@ -115,9 +213,9 @@ export default {
},
// 上传模板
async handleClickInspect() {
this.showTemplate = true;
},
onClickUplond() {
this.showUploadData = true;
let list = luckysheet.getAllSheets()
@ -139,7 +237,7 @@ export default {
luckysheet.setRangeValue(newArray, {
range: `A2:${bottomRightCorner}${2 + listData.length}`,
})
},
async saveLuckysheet(head) {
if (this.currentTable[0].data[0].every(item => !item) && head) {
@ -174,9 +272,7 @@ export default {
return letter;
},
loadWorkBook() {
window.luckysheet.destroy();
options.allowUpdate = true;
options.container = 'luckysheet'
options.container = 'luckysheet-export'
options.gridKey = this.pageType === 'info' ? this.infoIds.workbookId : null;
options.loadUrl = null
window.luckysheet.create({
@ -184,6 +280,7 @@ export default {
});
},
handelClickBack() {
this.state = false;
this.$emit('close')
},
},
@ -224,7 +321,7 @@ export default {
height: calc(100vh - 250px);
}
#luckysheet {
#luckysheet-export{
width: 100%;
padding: 0px;
z-index: 2;

2
src/views/modules/base/smartExcel/report.vue
View File

@ -69,7 +69,7 @@
</div>
</div>
<div class="m-search" v-if="pageType == 'add' || pageType == 'info'">
<exportlView @close="close" :pageType="pageType" :infoIds="infoIds" v-if="pageType == 'add' || pageType == 'info'"></exportlView>
<exportlView @close="close" :pageType="pageType" :infoIds="infoIds" ></exportlView>
</div>
<div v-if="showRecord">
<el-dialog title="导出记录" :visible.sync="showRecord" width="50%" :close-on-click-modal="false">

Write Preview
Loading…
Cancel
Save