是小王呀\24601
6 months ago
3 changed files with 363 additions and 51 deletions
@ -0,0 +1,329 @@ |
|||
<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> |
|||
<el-button type="warning" @click="handleClickInspect">上传统计模板 |
|||
</el-button> |
|||
<el-button type="success" @click="onClickUplond()"> 数据列表导出</el-button> |
|||
</div> |
|||
<div> |
|||
<el-button type="danger" |
|||
@click="handleClickCurrencyEvent('rejected')"> 取消</el-button> |
|||
<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"; |
|||
|
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
showUploadData: false, |
|||
menuList: [], |
|||
menuActive: 0, |
|||
socket: null, |
|||
currentTable: null, |
|||
currentId: '', |
|||
btnLoading: false, |
|||
}; |
|||
}, |
|||
props: { |
|||
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( "dskjlfsdklf"); |
|||
// if (this.sheetTotal) { |
|||
// this.currentId = this.workbookId; |
|||
// this.loadWorkBook() |
|||
// } else { |
|||
// this.getTaskList() |
|||
// } |
|||
this.loadWorkBook() |
|||
}, |
|||
methods: { |
|||
handleClickCurrencyEvent(){ |
|||
var objsheet = luckysheet.getAllSheets()[0] // 得到表的数据 |
|||
console.log(objsheet,"打算离开房间四点零分"); |
|||
|
|||
// this.options = objsheet // 将表的数据保存本地 |
|||
// this.postsheet() |
|||
}, |
|||
// async postsheet() { |
|||
// var strsheet = await JSON.stringify(this.options)// 对象转化为字符串 |
|||
// const sheetinfo = { id: 1, filename: strsheet }// 拼接成对象 |
|||
// // await updata(sheetinfo)// 传递对象后台 |
|||
// }, |
|||
|
|||
async handleClickInspect() { |
|||
// 获取celldata并转换为list |
|||
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() { |
|||
window.luckysheet.destroy(); |
|||
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() { |
|||
this.$emit('close') |
|||
}, |
|||
|
|||
}, |
|||
components: { |
|||
excelUploadData |
|||
}, |
|||
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