是小王呀\24601
1 year ago
5 changed files with 510 additions and 87 deletions
@ -0,0 +1,375 @@ |
|||
<template> |
|||
<div class='flex'> |
|||
<div :class="['flex', 'flex-y', 'flex1', sheetTotal ? 'luckysheet-wrap' : 'luckysheet-wrap-all']"> |
|||
<div class="top_btn flex flex-end"> |
|||
<div> |
|||
<el-button type="text" round @click="handelClickBack" |
|||
icon="el-icon-back">返回</el-button> |
|||
</div> |
|||
<div> |
|||
<el-button type="primary" |
|||
@click="handleClickCurrencyEvent('submit')">下载</el-button> |
|||
</div> |
|||
</div> |
|||
<div id="luckysheet"></div> |
|||
</div> |
|||
|
|||
<el-dialog title="数据列表导出" v-if="showUploadData" :visible.sync="showUploadData" width="60%" |
|||
:close-on-click-modal="false"> |
|||
<excelUploadData @handleUploadDataHide="handleUploadDataHide" :currentTable="currentTable" |
|||
:btnLoading="btnLoading"> |
|||
</excelUploadData> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import excelUploadData from './excel-upload-data.vue'; |
|||
import LuckyExcel from 'luckyexcel'; |
|||
import options from "@/utils/luckysheetConfig.js"; |
|||
import { mapGetters } from 'vuex' |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import {exportSheetExcel} from "@/utils/export"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
showUploadData: false, |
|||
menuList: [], |
|||
menuActive: 0, |
|||
socket: null, |
|||
currentTable: null, |
|||
currentId: '', |
|||
btnLoading: false, |
|||
}; |
|||
}, |
|||
props: { |
|||
fileUrl: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
workbookId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
sheetTotal: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
infoObj: { |
|||
type: Object, |
|||
default: () => { } |
|||
}, |
|||
mergeObj: { |
|||
type: Object, |
|||
default: () => { } |
|||
}, |
|||
userId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
taskStateName: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
}, |
|||
computed: { |
|||
tableHeight() { |
|||
return (this.clientHeight - 140) + 'px' |
|||
}, |
|||
...mapGetters(['clientHeight', 'resolution']), |
|||
}, |
|||
async created() { |
|||
|
|||
}, |
|||
watch: {}, |
|||
async mounted() { |
|||
console.log(this.infoObj,"sdljkdsfj"); |
|||
const newUrl = this.infoObj.url.replace( |
|||
/^https:\/\/elink-esua-epdc\.oss-cn-qingdao\.aliyuncs\.com/, |
|||
`${location.origin}` |
|||
); |
|||
console.log(newUrl); |
|||
// this.urlToFile('http://localhost:9001/epmet-work-pc/test1.xlsx',this.infoObj.name) |
|||
|
|||
this.urlToFile(newUrl, this.fileName) |
|||
// console.log(this.workbookId, "dskjlfsdklf"); |
|||
// this.currentId = this.workbookId; |
|||
// this.loadWorkBook() |
|||
}, |
|||
methods: { |
|||
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' }); |
|||
console.log(file,"sdlkfdslk;"); |
|||
|
|||
this.uploadExcel(file) |
|||
} catch (error) { |
|||
console.error('Error fetching or converting file:', error); |
|||
throw error; |
|||
} |
|||
}, |
|||
uploadExcel(files) { |
|||
console.log(files,"afkljlafisd"); |
|||
let that = this |
|||
// console.log(exportJson,'获取到导入的JSON'); |
|||
LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) { |
|||
console.log(exportJson,'获取到导入的JSON'); |
|||
that.exportJson = exportJson |
|||
console.log( that.exportJson,'获取到导入的JSON'); |
|||
if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!'); |
|||
window.luckysheet.destroy(); |
|||
options.container = 'luckysheet' |
|||
options.loadUrl = '' |
|||
window.luckysheet.create({ |
|||
...options, |
|||
data: exportJson.sheets,//暂时支持上传一个sheet页，因为插件bug有点多 |
|||
title: exportJson.info.name, |
|||
hook: {}, |
|||
}); |
|||
}); |
|||
}, |
|||
handleClickCurrencyEvent(){ |
|||
console.log(this.infoObj,"this.infoObj.taskTitle"); |
|||
let parms={ |
|||
workbookId:this.workbookId, |
|||
taskId:this.infoObj.id |
|||
} |
|||
let { code, msg } = requestPost('/actual/base/communityOneTableDownloadRecord/save', parms); |
|||
console.log(code,"dsfkjkldsf"); |
|||
|
|||
exportSheetExcel(luckysheet.getAllSheets(),this.infoObj.taskTitle) |
|||
}, |
|||
async handleClickInspect() { |
|||
const list = luckysheet.getAllSheets()[0].celldata.map(item => ({ |
|||
r: item.r, |
|||
c: item.c, |
|||
v: item.v.v || '' |
|||
})); |
|||
// 发送请求获取异常数据 |
|||
let { data, code, msg } = await requestPost('/actual/base/intelligentImportData/checkData', list); |
|||
if (code === 0) { |
|||
if (data && data.length > 0) { |
|||
for (const { r, c } of data) { |
|||
luckysheet.setCellFormat(r, c, 'bg', '#f5504a'); |
|||
} |
|||
const findArr = this.findUniqueElements(luckysheet.getAllSheets()[0].celldata, data); |
|||
findArr.forEach(({ r, c, v }) => { |
|||
if (v.bg === "#f5504a") { |
|||
luckysheet.setCellFormat(r, c, 'bg', '#ffffff'); |
|||
} |
|||
}); |
|||
} else { |
|||
this.$message.success('没有找到异常'); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
findUniqueElements(A, B) { |
|||
// 创建B中r和c组合的键集合 |
|||
const bCombinations = new Set(B.map(item => `${item.r},${item.c}`)); |
|||
// 过滤A中不存在于B的组合 |
|||
return A.filter(item => !bCombinations.has(`${item.r},${item.c}`)); |
|||
}, |
|||
|
|||
onClickUplond() { |
|||
this.showUploadData = true; |
|||
let list = luckysheet.getAllSheets() |
|||
this.currentTable = list.filter(item => item.status == '1') |
|||
|
|||
}, |
|||
async handleUploadDataHide(val) { |
|||
this.showUploadData = false; |
|||
luckysheet.insertRow(this.currentTable[0].data.length, 1) |
|||
const findLastNonNullIndex = (arr) => { |
|||
for (let i = arr.length - 1; i >= 0; i--) { |
|||
const subArray = arr[i]; |
|||
// 判断：是数组，且至少有一个不为 null 的元素 |
|||
if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null && item.v !== '')) { |
|||
return i; // 返回下标 |
|||
} |
|||
} |
|||
return -1; // 如果没有符合条件的，返回 -1 |
|||
}; |
|||
this.sheetR = findLastNonNullIndex(this.currentTable[0].data) |
|||
console.log(this.currentTable[0].data.length, val.length); |
|||
luckysheet.insertRow(this.currentTable[0].data.length, { number: val.length }); |
|||
await nextTick(2000) |
|||
let newArray = val.map(obj => { |
|||
return Object.keys(obj).map(key => { |
|||
return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] }; |
|||
}); |
|||
}); |
|||
console.log(newArray, '处理后数据'); |
|||
let bottomRightCorner = this.numberToLetter(Object.keys(val[0]).length)//选区右下角数字 |
|||
luckysheet.setRangeValue(newArray, { |
|||
range: `A${this.sheetR + 2}:${bottomRightCorner}${this.sheetR + val.length}`, |
|||
}) |
|||
}, |
|||
// 数字转换对应顺序英文 |
|||
numberToLetter(num) { |
|||
let letter = ''; |
|||
while (num > 0) { |
|||
num -= 1; // 调整为从 0 开始（即 1 -> 'A'，2 -> 'B'，...） |
|||
letter = String.fromCharCode(num % 26 + 65) + letter; // 65 是 'A' 的 Unicode 编码 |
|||
num = Math.floor(num / 26); |
|||
} |
|||
return letter; |
|||
}, |
|||
handleCellEditBefore(){ |
|||
console.log("sdfk;s.dkf"); |
|||
|
|||
}, |
|||
|
|||
loadWorkBook() { |
|||
console.log(); |
|||
|
|||
window.luckysheet.destroy(); |
|||
if (this.infoObj.createByName===this.$store.state.user.realName) { |
|||
options.allowEdit=true |
|||
}else{ |
|||
options.allowEdit=false |
|||
} |
|||
const { id } = this.$store.state.user; |
|||
options.gridKey = this.currentId; |
|||
options.allowUpdate = true; |
|||
options.container = 'luckysheet' |
|||
options.loadUrl = `${process.env.VUE_APP_API_SERVER}/actual/base/luckySheet/workbook/load?workbookId=${this.currentId}` |
|||
options.updateUrl = `${process.env.VUE_APP_SOCKET_SERVER}/actual/base/ws/luckysheet/${this.currentId}/${id}` |
|||
options.loadSheetUrl = `${process.env.VUE_APP_API_SERVER}/actual/base/luckySheet/workbook/loadSheets` |
|||
window.luckysheet.create({ |
|||
...options, |
|||
hook: { |
|||
cellEditBefore: this.handleCellEditBefore, |
|||
sheetCreateAfter: this.handleSheetCreateAfter, |
|||
}, |
|||
}); |
|||
}, |
|||
handleSheetCreateAfter(e) { |
|||
console.log('setsheet', e); |
|||
}, |
|||
handelClickBack() { |
|||
window.luckysheet.destroy(); |
|||
this.$emit('handleShowPage') |
|||
}, |
|||
|
|||
}, |
|||
components: { |
|||
excelUploadData |
|||
}, |
|||
beforeDestroy() { |
|||
this.$store.state.sidebarFold = false; |
|||
if (this.socket) { |
|||
this.socket.close(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-card { |
|||
margin: 10px auto; |
|||
padding: 0 16px; |
|||
box-sizing: border-box; |
|||
width: calc(100% - 40px); |
|||
border: none; |
|||
} |
|||
|
|||
.luckysheet-wrap { |
|||
margin: 10px; |
|||
padding: 0px; |
|||
z-index: 2; |
|||
width: calc(100vw - 400px); |
|||
height: calc(100vh - 250px); |
|||
} |
|||
|
|||
.luckysheet-wrap-all { |
|||
margin: 10px; |
|||
padding: 0px; |
|||
z-index: 2; |
|||
width: calc(100vw - 100px); |
|||
height: calc(100vh - 250px); |
|||
} |
|||
|
|||
#luckysheet { |
|||
width: 100%; |
|||
padding: 0px; |
|||
z-index: 2; |
|||
height: calc(100% - 80px); |
|||
margin: 10px; |
|||
} |
|||
|
|||
.top_btn { |
|||
height: 60px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.upload-demo { |
|||
position: absolute; |
|||
z-index: 999999; |
|||
margin: 20px 0 0 22px; |
|||
} |
|||
|
|||
.right-slider { |
|||
position: absolute; |
|||
z-index: 999999; |
|||
border: 1px solid #eeeeee; |
|||
box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.2); |
|||
background: #ffffff; |
|||
margin: 10px 0 0 22px; |
|||
right: 10px; |
|||
width: 36%; |
|||
height: calc(100% - 20px); |
|||
} |
|||
|
|||
.el-header, |
|||
.el-footer { |
|||
text-align: left; |
|||
line-height: 40px; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.el-main { |
|||
text-align: left; |
|||
line-height: 40px; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.el-container { |
|||
display: flex; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.left_menu { |
|||
width: 240px; |
|||
|
|||
.menu_item { |
|||
cursor: pointer; |
|||
padding: 10px 16px; |
|||
box-sizing: border-box; |
|||
margin-bottom: 5px; |
|||
background-color: #f2f8fd; |
|||
border-radius: 5px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.active { |
|||
color: #3989eb; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue