是小王呀\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