|
|
@ -1,21 +1,26 @@ |
|
|
<template> |
|
|
<template> |
|
|
<!-- :style="{ height: tableHeight }" --> |
|
|
<!-- :style="{ height: tableHeight }" --> |
|
|
<div class='flex el-card'> |
|
|
<div class='flex'> |
|
|
<div class="left_menu flex flex-y" v-if="!sheetTotal"> |
|
|
<div class="left_menu flex flex-y" v-if="!sheetTotal"> |
|
|
<el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button> |
|
|
<el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button> |
|
|
<section > |
|
|
<section > |
|
|
<div :class="{ 'menu_item': true, 'active': menuActive === index }" v-for="(item, index) in menuList" :key="index" |
|
|
<h3>{{menuList[0].taskTitle}}</h3> |
|
|
@click="handleClickMenu(index,item)"> |
|
|
<p>{{menuList[0].agencyName}}</p> |
|
|
<span>{{ item.name }}</span> |
|
|
</section> |
|
|
<i class="el-icon-arrow-right"></i> |
|
|
<section> |
|
|
</div> |
|
|
<div :class="{ 'menu_item': true, 'active': menuActive === index }" v-for="(item, index) in menuList" |
|
|
|
|
|
:key="index" @click="handleClickMenu(index, item)"> |
|
|
|
|
|
<span>第{{ item.taskNum }}个周期提交</span> |
|
|
|
|
|
<i class="el-icon-arrow-right"></i> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
<div :class="['flex', 'flex-y', 'flex1', sheetTotal ? 'luckysheet-wrap' : 'luckysheet-wrap-all']"> |
|
|
<div :class="['flex', 'flex-y', 'flex1', sheetTotal ? 'luckysheet-wrap' : 'luckysheet-wrap-all']"> |
|
|
<div class="top_btn flex flex-end"> |
|
|
<div class="top_btn flex flex-end"> |
|
|
<div> |
|
|
<div> |
|
|
<el-button type="warning" v-if="pageType === 'add'" @click="handleClickInspect"> 自动检查</el-button> |
|
|
<el-button type="warning" v-if="pageType === 'add'" @click="handleClickInspect"> 自动检查</el-button> |
|
|
<el-button type="text" round @click="handelClickBack" v-if="pageType !== 'add' || sheetTotal" icon="el-icon-back">返回</el-button> |
|
|
<el-button type="text" round @click="handelClickBack" v-if="pageType !== 'add' || sheetTotal" |
|
|
|
|
|
icon="el-icon-back">返回</el-button> |
|
|
<el-button type="success" @click="onClickUplond()" v-if="pageType !== 'add'"> 智能填表</el-button> |
|
|
<el-button type="success" @click="onClickUplond()" v-if="pageType !== 'add'"> 智能填表</el-button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
@ -26,8 +31,10 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div id="luckysheet"></div> |
|
|
<div id="luckysheet"></div> |
|
|
</div> |
|
|
</div> |
|
|
<el-dialog title="上传共享数据" v-if="showUploadData" :visible.sync="showUploadData" width="60%" :close-on-click-modal="false"> |
|
|
<el-dialog title="上传共享数据" v-if="showUploadData" :visible.sync="showUploadData" width="60%" |
|
|
<excelUploadData @handelUploadData="handelUploadData" :currentTable="currentTable" @saveUploadForm="saveUploadForm"> |
|
|
:close-on-click-modal="false"> |
|
|
|
|
|
<excelUploadData @handelUploadData="handelUploadData" :currentTable="currentTable" |
|
|
|
|
|
@saveUploadForm="saveUploadForm"> |
|
|
</excelUploadData> |
|
|
</excelUploadData> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
</div> |
|
|
</div> |
|
|
@ -43,31 +50,31 @@ import { requestPost, requestGet } from "@/js/dai/request"; |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
showUploadData:false, |
|
|
showUploadData: false, |
|
|
menuList: [ |
|
|
menuList: [ |
|
|
{ |
|
|
// { |
|
|
name: '2024年11月第三周（已提交）', |
|
|
// name: '2024年11月第三周（已提交）', |
|
|
workbookId:'1876569275607785473' |
|
|
// workbookId:'1876569275607785473' |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
name: '2024年11月第三周（已提交）', |
|
|
// name: '2024年11月第三周（已提交）', |
|
|
workbookId:'1876571135966158850' |
|
|
// workbookId:'1876571135966158850' |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
name: '2024年11月第三周（已提交）', |
|
|
// name: '2024年11月第三周（已提交）', |
|
|
workbookId:'1879063358107648002' |
|
|
// workbookId:'1879063358107648002' |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
name: '2024年11月第三周（已提交）' |
|
|
// name: '2024年11月第三周（已提交）' |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
name: '2024年11月第三周（已提交）' |
|
|
// name: '2024年11月第三周（已提交）' |
|
|
} |
|
|
// } |
|
|
], |
|
|
], |
|
|
menuActive: 0, |
|
|
menuActive: 0, |
|
|
socket: null, |
|
|
socket: null, |
|
|
currentTable:null, |
|
|
currentTable: null, |
|
|
currentId:'' |
|
|
currentId: '' |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
props: { |
|
|
props: { |
|
|
@ -75,13 +82,13 @@ export default { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '' |
|
|
default: '' |
|
|
}, |
|
|
}, |
|
|
pageType:{ |
|
|
pageType: { |
|
|
type:String, |
|
|
type: String, |
|
|
default:'' |
|
|
default: '' |
|
|
}, |
|
|
}, |
|
|
sheetTotal:{ |
|
|
sheetTotal: { |
|
|
type:Boolean, |
|
|
type: Boolean, |
|
|
default:false |
|
|
default: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@ -94,71 +101,85 @@ export default { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
watch: {}, |
|
|
watch: {}, |
|
|
mounted() { |
|
|
async mounted() { |
|
|
this.$nextTick(() => { |
|
|
if (this.sheetTotal) { |
|
|
if(this.sheetTotal){ |
|
|
this.currentId = this.workbookId; |
|
|
this.currentId = '1879063358107648002' |
|
|
|
|
|
}else{ |
|
|
|
|
|
this.currentId = '1879729047646941185' |
|
|
|
|
|
} |
|
|
|
|
|
this.loadWorkBook() |
|
|
this.loadWorkBook() |
|
|
}) |
|
|
} else { |
|
|
|
|
|
this.getTaskList() |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
async saveUploadForm(val){ |
|
|
async getTaskList() { |
|
|
|
|
|
let parm = { |
|
|
|
|
|
taskId: this.workbookId,//注：此处实际为任务Id只是没必要再声明另外一个参数了 |
|
|
|
|
|
pageNo: 1, |
|
|
|
|
|
pageSize: 1000 |
|
|
|
|
|
} |
|
|
|
|
|
let { data, code, msg } = await requestGet('/actual/base/communityOneTablePeriodPublish/myPageList', parm) |
|
|
|
|
|
if (code === 0) { |
|
|
|
|
|
this.menuList = data.list; |
|
|
|
|
|
this.currentId = this.menuList[0].subWorkBookId |
|
|
|
|
|
this.loadWorkBook() |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
async saveUploadForm(val) { |
|
|
const url = '/actual/base/residentBaseInfo/exportOneSheet' |
|
|
const url = '/actual/base/residentBaseInfo/exportOneSheet' |
|
|
const {data,code,msg} = await requestPost(url,val) |
|
|
const { data, code, msg } = await requestPost(url, val) |
|
|
if(code === 0){ |
|
|
if (code === 0) { |
|
|
this.showUploadData = false |
|
|
this.showUploadData = false |
|
|
this.updataSheet(data) |
|
|
this.updataSheet(data) |
|
|
}else{ |
|
|
} else { |
|
|
console.log(msg); |
|
|
console.log(msg); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
//自动检查 |
|
|
//自动检查 |
|
|
handleClickInspect(){ |
|
|
handleClickInspect() { |
|
|
//流程：发送当前cellData到后台，后台处理返回有问题的行跟列后遍历更改其背景色 |
|
|
//流程：发送当前cellData到后台，后台处理返回有问题的行跟列后遍历更改其背景色 |
|
|
let list = luckysheet.getAllSheets()[0].celldata.map(item=>({r:item.r,c:item.c,v:item.v.v ||''})) |
|
|
let list = luckysheet.getAllSheets()[0].celldata.map(item => ({ r: item.r, c: item.c, v: item.v.v || '' })) |
|
|
console.log(JSON.stringify(list));//接口入参 |
|
|
console.log(JSON.stringify(list));//接口入参 |
|
|
// 返参示例 |
|
|
// 返参示例 |
|
|
let arr = [ |
|
|
let arr = [ |
|
|
{r:3, |
|
|
{ |
|
|
c:3 |
|
|
r: 3, |
|
|
|
|
|
c: 3 |
|
|
}, |
|
|
}, |
|
|
{r:4, |
|
|
{ |
|
|
c:4, |
|
|
r: 4, |
|
|
|
|
|
c: 4, |
|
|
}, |
|
|
}, |
|
|
{r:5, |
|
|
{ |
|
|
c:5, |
|
|
r: 5, |
|
|
|
|
|
c: 5, |
|
|
}, |
|
|
}, |
|
|
] |
|
|
] |
|
|
for(let i in arr){ |
|
|
for (let i in arr) { |
|
|
luckysheet.setCellFormat(arr[i].r,arr[i].c,'bg','#f5504a') |
|
|
luckysheet.setCellFormat(arr[i].r, arr[i].c, 'bg', '#f5504a') |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onClickUplond(){ |
|
|
onClickUplond() { |
|
|
this.showUploadData = true; |
|
|
this.showUploadData = true; |
|
|
let list = luckysheet.getAllSheets() |
|
|
let list = luckysheet.getAllSheets() |
|
|
this.currentTable = list.filter(item => item.status == '1') |
|
|
this.currentTable = list.filter(item => item.status == '1') |
|
|
const findLastNonNullIndex = (arr) => { |
|
|
const findLastNonNullIndex = (arr) => { |
|
|
for (let i = arr.length - 1; i >= 0; i--) { |
|
|
for (let i = arr.length - 1; i >= 0; i--) { |
|
|
const subArray = arr[i]; |
|
|
const subArray = arr[i]; |
|
|
// 判断：是数组，且至少有一个不为 null 的元素 |
|
|
// 判断：是数组，且至少有一个不为 null 的元素 |
|
|
if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null&& item.v !== '')) { |
|
|
if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null && item.v !== '')) { |
|
|
return i; // 返回下标 |
|
|
return i; // 返回下标 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
return -1; // 如果没有符合条件的，返回 -1 |
|
|
return -1; // 如果没有符合条件的，返回 -1 |
|
|
}; |
|
|
}; |
|
|
this.sheetR = findLastNonNullIndex(this.currentTable[0].data) |
|
|
this.sheetR = findLastNonNullIndex(this.currentTable[0].data) |
|
|
if(this.sheetR != -1){ |
|
|
if (this.sheetR != -1) { |
|
|
luckysheet.insertRow(this.currentTable[0].data.length,5) |
|
|
luckysheet.insertRow(this.currentTable[0].data.length, 5) |
|
|
// this.updataSheet() |
|
|
// this.updataSheet() |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
handelUploadData(){ |
|
|
handelUploadData() { |
|
|
this.showUploadData=false |
|
|
this.showUploadData = false |
|
|
}, |
|
|
}, |
|
|
loadWorkBook() { |
|
|
loadWorkBook() { |
|
|
window.luckysheet.destroy(); |
|
|
window.luckysheet.destroy(); |
|
|
@ -180,49 +201,12 @@ export default { |
|
|
handleSheetCreateAfter(e) { |
|
|
handleSheetCreateAfter(e) { |
|
|
console.log('setsheet', e); |
|
|
console.log('setsheet', e); |
|
|
}, |
|
|
}, |
|
|
handleClickMenu(i,val) { |
|
|
handleClickMenu(i, val) { |
|
|
this.menuActive = i; |
|
|
this.menuActive = i; |
|
|
this.currentId = val.workbookId; |
|
|
this.currentId = val.subWorkBookId; |
|
|
this.loadWorkBook() |
|
|
this.loadWorkBook() |
|
|
}, |
|
|
}, |
|
|
loadExcel() { |
|
|
|
|
|
var url = 'http://localhost:9001/epmet-work-pc/test.xlsx' |
|
|
|
|
|
|
|
|
|
|
|
var that = this |
|
|
|
|
|
fetch(url).then(response => response.blob()) // 将响应转换为Blob |
|
|
|
|
|
.then(blob => { |
|
|
|
|
|
const fileName = 'test.xlsx'; |
|
|
|
|
|
const file = new File([blob], fileName, { type: 'excel/xlsx' }); |
|
|
|
|
|
var files = []; |
|
|
|
|
|
files.push(file); |
|
|
|
|
|
that.uploadExcel(files); |
|
|
|
|
|
}).catch(error => console.error('Error fetching file:', error)); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uploadExcel(files) { |
|
|
|
|
|
if (files == null || files.length == 0) return alert('没有文件等待导入'); |
|
|
|
|
|
let name = files[0].name; |
|
|
|
|
|
let suffixArr = name.split('.'), |
|
|
|
|
|
suffix = suffixArr[suffixArr.length - 1]; |
|
|
|
|
|
if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件'); |
|
|
|
|
|
LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) { |
|
|
|
|
|
console.log(exportJson.sheets); |
|
|
|
|
|
if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!'); |
|
|
|
|
|
window.luckysheet.destroy(); |
|
|
|
|
|
window.luckysheet.create({ |
|
|
|
|
|
...options, |
|
|
|
|
|
data: exportJson.sheets[0], |
|
|
|
|
|
title: exportJson.info.name, |
|
|
|
|
|
hook: { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
handleTabClick(tab, event) { |
|
|
|
|
|
console.log(tab, event); |
|
|
|
|
|
}, |
|
|
|
|
|
handelClickBack() { |
|
|
handelClickBack() { |
|
|
this.$emit('close') |
|
|
this.$emit('close') |
|
|
}, |
|
|
}, |
|
|
@ -269,17 +253,17 @@ export default { |
|
|
// } |
|
|
// } |
|
|
] |
|
|
] |
|
|
list.forEach((item, index) => { |
|
|
list.forEach((item, index) => { |
|
|
luckysheet.insertRow(this.currentTable[0].data.length,1) |
|
|
luckysheet.insertRow(this.currentTable[0].data.length, 1) |
|
|
for (let k in item) { |
|
|
for (let k in item) { |
|
|
luckysheet.setCellValue(index+this.sheetR + 1, k - 1, item[k]) |
|
|
luckysheet.setCellValue(index + this.sheetR + 1, k - 1, item[k]) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
components:{ |
|
|
components: { |
|
|
excelUploadData |
|
|
excelUploadData |
|
|
}, |
|
|
}, |
|
|
components:{ |
|
|
components: { |
|
|
excelUploadData |
|
|
excelUploadData |
|
|
}, |
|
|
}, |
|
|
beforeDestroy() { |
|
|
beforeDestroy() { |
|
|
@ -306,6 +290,7 @@ export default { |
|
|
width: calc(100vw - 400px); |
|
|
width: calc(100vw - 400px); |
|
|
height: calc(100vh - 250px); |
|
|
height: calc(100vh - 250px); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.luckysheet-wrap-all { |
|
|
.luckysheet-wrap-all { |
|
|
margin: 10px; |
|
|
margin: 10px; |
|
|
padding: 0px; |
|
|
padding: 0px; |
|
|
@ -313,6 +298,7 @@ export default { |
|
|
width: calc(100vw - 100px); |
|
|
width: calc(100vw - 100px); |
|
|
height: calc(100vh - 250px); |
|
|
height: calc(100vh - 250px); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#luckysheet { |
|
|
#luckysheet { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
padding: 0px; |
|
|
padding: 0px; |
|
|
|
