Commit d01b6db0 authored by xiangjiaojunxp's avatar xiangjiaojunxp

页面大小和遮罩层

parent b2c19a5f
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
"author": "若依", "author": "若依",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
"build:prod": "vue-cli-service build", "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging", "build:stage": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build --mode staging",
"preview": "node build/index.js --preview", "preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src" "lint": "eslint --ext .js,.vue src"
}, },
...@@ -36,16 +36,21 @@ ...@@ -36,16 +36,21 @@
"url": "https://gitee.com/y_project/RuoYi-Vue.git" "url": "https://gitee.com/y_project/RuoYi-Vue.git"
}, },
"dependencies": { "dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6", "@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6", "@vue/cli-service": "4.4.6",
"@riophae/vue-treeselect": "0.4.0",
"af-table-column": "^1.0.3", "af-table-column": "^1.0.3",
"axios": "0.21.0", "axios": "0.21.0",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"clipboard": "2.0.6", "clipboard": "2.0.6",
"connect": "3.6.6",
"core-js": "3.8.1", "core-js": "3.8.1",
"echarts": "4.9.0", "echarts": "4.9.0",
"element-ui": "2.15.0", "element-ui": "2.15.0",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"exceljs": "^4.3.0", "exceljs": "^4.3.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"fuse.js": "6.4.3", "fuse.js": "6.4.3",
...@@ -54,45 +59,44 @@ ...@@ -54,45 +59,44 @@
"js-beautify": "1.13.0", "js-beautify": "1.13.0",
"js-cookie": "2.2.1", "js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"lint-staged": "10.5.3",
"luckyexcel": "^1.0.1", "luckyexcel": "^1.0.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"quill": "1.3.7", "quill": "1.3.7",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"screenfull": "5.0.2", "screenfull": "5.0.2",
"script-ext-html-webpack-plugin": "2.1.5",
"scriptjs": "^2.5.9", "scriptjs": "^2.5.9",
"sortablejs": "1.10.2", "svg-sprite-loader": "5.1.1",
"uuid": "^9.0.0",
"vue": "2.6.12", "vue": "2.6.12",
"vue-append": "^2.2.0", "vue-append": "^2.2.0",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue-template-compiler": "2.6.12",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0", "vuex": "3.6.0",
"xlsx": "^0.17.5", "xlsx": "^0.17.5"
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12"
}, },
"devDependencies": { "devDependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6", "@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6", "@vue/cli-service": "4.4.6",
"@riophae/vue-treeselect": "0.4.0",
"af-table-column": "^1.0.3", "af-table-column": "^1.0.3",
"axios": "0.21.0", "axios": "0.21.0",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"clipboard": "2.0.6", "clipboard": "2.0.6",
"connect": "3.6.6",
"core-js": "3.8.1", "core-js": "3.8.1",
"echarts": "4.9.0", "echarts": "4.9.0",
"element-ui": "2.15.0", "element-ui": "2.15.0",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"exceljs": "^4.3.0", "exceljs": "^4.3.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"fuse.js": "6.4.3", "fuse.js": "6.4.3",
...@@ -101,33 +105,27 @@ ...@@ -101,33 +105,27 @@
"js-beautify": "1.13.0", "js-beautify": "1.13.0",
"js-cookie": "2.2.1", "js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"lint-staged": "10.5.3",
"luckyexcel": "^1.0.1", "luckyexcel": "^1.0.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"quill": "1.3.7", "quill": "1.3.7",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"screenfull": "5.0.2", "screenfull": "5.0.2",
"script-ext-html-webpack-plugin": "2.1.5",
"scriptjs": "^2.5.9", "scriptjs": "^2.5.9",
"sortablejs": "1.10.2", "sortablejs": "^1.10.2",
"svg-sprite-loader": "5.1.1",
"vue": "2.6.12", "vue": "2.6.12",
"vue-append": "^2.2.0", "vue-append": "^2.2.0",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue-template-compiler": "2.6.12",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0", "vuex": "3.6.0",
"xlsx": "^0.17.5", "xlsx": "^0.17.5"
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12"
}, },
"engines": { "engines": {
"node": ">=8.9", "node": ">=8.9",
......
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form ref="queryForm" size="small" :inline="true" label-width="68px"> <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="模板" prop="name" > <el-form-item label="模板" prop="name" >
<el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" filterable placeholder="请选择您要查看的模板"> <el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" filterable placeholder="请选择您要查看的模板">
<!-- <el-option label="自设的模板名" value="使用空白模板"></el-option>--> <!-- <el-option label="自设的模板名" value="使用空白模板"></el-option>-->
<el-option <el-option
v-for="item in depss" :key="item.id" :label="item.templateName" :value="item.id"> v-for="item in depss" :key="item.id" :label="item.templateName" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="规则" prop="rule"> <el-form-item label="规则" prop="rule">
<el-select v-model="selectedRule" ref="mySelect" size="mini" @change="handleRuleChange" filterable placeholder="请选择您要查看的规则" > <el-select v-model="selectedRule" ref="mySelect" size="mini" @change="handleRuleChange" filterable placeholder="请选择您要查看的规则" >
<el-option <el-option
v-for="iem in luckyrule" :key="iem.id" :label="iem.roleName" :value="iem.id"> v-for="iem in luckyrule" :key="iem.id" :label="iem.roleName" :value="iem.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-upload
type="file"
name="file"
ref="upload"
:before-upload="handleFileChange"
action=''
accept='.xlsx'
:limit="1"
:file-list="fileList"
:disabled="disableNextButton"
:show-file-list=false
>
<el-button plain size="mini" icon="el-icon-download" type="primary" :disabled="disableNextButton" >导入</el-button>
</el-upload>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-upload
type="file"
name="file"
ref="upload"
:before-upload="handleFileChange"
action=''
accept='.xlsx'
:limit="1"
:file-list="fileList"
:disabled="disableNextButton"
>
<el-button plain size="mini" icon="el-icon-download" type="primary" :disabled="disableNextButton" >导入</el-button>
</el-upload>
</el-col>
</el-row>
<!-- luckysheet容器 --> <!-- luckysheet容器 -->
<div <div
id="luckysheet" id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 110px; height: 1000px; z-index: 0" style="margin: 0px; padding: 0px; position: absolute; width: 100%; height:78vh; z-index: 0"
> >
</div> </div>
<div v-if="showMask" class="mask">
<div class="loading-spinner"></div>
</div>
</div> </div>
</template> </template>
...@@ -77,6 +81,7 @@ export default { ...@@ -77,6 +81,7 @@ export default {
name: "Mymodule", name: "Mymodule",
data() { data() {
return { return {
showMask:false,
uuid:'', uuid:'',
//弹出页面的表名 //弹出页面的表名
from_name : "", from_name : "",
...@@ -245,7 +250,7 @@ export default { ...@@ -245,7 +250,7 @@ export default {
/** 导入事件*/ /** 导入事件*/
async handleFileChange(evt) { async handleFileChange(evt) {
let exx; let exx;
this.showMask = true;
const cons = new Promise((resolve, reject) => { const cons = new Promise((resolve, reject) => {
LuckyExcel.transformExcelToLucky(evt, exportJson => { LuckyExcel.transformExcelToLucky(evt, exportJson => {
exx = exportJson; exx = exportJson;
...@@ -257,7 +262,10 @@ export default { ...@@ -257,7 +262,10 @@ export default {
const exportJson = await cons; const exportJson = await cons;
await this.summary(exportJson); await this.summary(exportJson);
console.log('summary 执行完毕'); console.log('summary 执行完毕');
// 导入完成后关闭遮罩层
this.showMask = false;
this.submit(exportJson); this.submit(exportJson);
} catch (Error) { } catch (Error) {
this.$message({ this.$message({
message: Error.message, message: Error.message,
...@@ -1056,4 +1064,34 @@ function generateUUID() { ...@@ -1056,4 +1064,34 @@ function generateUUID() {
return array.join("-"); return array.join("-");
} }
</script> </script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.loading-spinner {
/* 添加你的加载动画样式 */
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
...@@ -60,18 +60,15 @@ ...@@ -60,18 +60,15 @@
>导出</el-button> >导出</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button icon="el-icon-s-opportunity <el-button icon="el-icon-s-opportunity" size="mini" @click="addToMap">生成</el-button>
" size="mini" @click="addToMap">生成</el-button>
</el-col> </el-col>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="right-float">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="right-float">重置</el-button>
</el-row> </el-row>
<!-- luckysheet容器 --> <!-- luckysheet容器 -->
<div <div
id="luckysheet" id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 1000px; z-index: 0" style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 75vh; z-index: 0"
> ></div>
</div>
</div> </div>
</template> </template>
...@@ -352,99 +349,96 @@ export default { ...@@ -352,99 +349,96 @@ export default {
let cell=(c1<=c2)?c1:c2; let cell=(c1<=c2)?c1:c2;
let array=[]; let array=[];
let r=this.row-1; let r=this.row-1;
for(let i=r;i<row;i++) { for(let i=r;i<row;i++) {
for (let j = 0; j <cell; j++) { for (let j = 0; j <cell; j++) {
//第一个表的单元格为null直接跳出 //第一个表的单元格为null直接跳出
if(d1[i][j]==null ){ if(d1[i][j]==null ){
continue continue
} }
//第二个表的单元格为null直接跳出 //第二个表的单元格为null直接跳出
if(d2[i][j]==null ){ if(d2[i][j]==null ){
continue continue
} }
//第一个表内数据为0 且 第二个表只有样式内部为空 //第一个表内数据为0 且 第二个表只有样式内部为空
if(d2[i][j].v==0 && d1[i][j].v==undefined ){ if(d2[i][j].v==0 && d1[i][j].v==undefined ){
continue continue
} }
//第一个表内数据为0 且 第二个表只有样式内部为空 //第一个表内数据为0 且 第二个表只有样式内部为空
if( d1[i][j].v==0 && d2[i][j].v==undefined ){ if( d1[i][j].v==0 && d2[i][j].v==undefined ){
continue continue
} }
// 第一个表内数据为string型 且 第二个表只有样式内部为空 // 第一个表内数据为string型 且 第二个表只有样式内部为空
/*if((typeof(d1[i][j].v)=="string" && d2[i][j].v==undefined)){ /*if((typeof(d1[i][j].v)=="string" && d2[i][j].v==undefined)){
continue continue
}*/ }*/
//第一个表为合并单元格 且第二个内没有值 //第一个表为合并单元格 且第二个内没有值
if(d1[i][j].mc!=undefined &&d2[i][j].v==undefined){ if(d1[i][j].mc!=undefined &&d2[i][j].v==undefined){
continue continue
} }
//第二个表为合并单元格 且第一个内没有值 //第二个表为合并单元格 且第一个内没有值
if(d2[i][j].mc!=undefined &&d1[i][j].v==undefined){ if(d2[i][j].mc!=undefined &&d1[i][j].v==undefined){
continue continue
} }
if((isNaN(d1[i][j].v) && d2[i][j].v==undefined)){ if((isNaN(d1[i][j].v) && d2[i][j].v==undefined)){
} }
// 第二个表内数据为string型 且 第一个表只有样式内部为空 // 第二个表内数据为string型 且 第一个表只有样式内部为空
if(isNaN(d2[i][j].v)&& d1[i][j].v==undefined){ if(isNaN(d2[i][j].v)&& d1[i][j].v==undefined){
} }
// 没有选只比较数值 且 第一个表内数据为string型 且 第二个表内数据位string型 // 没有选只比较数值 且 第一个表内数据为string型 且 第二个表内数据位string型
if(this.numm!=false &&(isNaN(d1[i][j].v)&&isNaN(d2[i][j].v))){ if(this.numm!=false &&(isNaN(d1[i][j].v)&&isNaN(d2[i][j].v))){
continue; continue;
} }
// 两个表的值都是0 // 两个表的值都是0
if(d1[i][j].v==0 && d2[i][j].v==0 ){ if(d1[i][j].v==0 && d2[i][j].v==0 ){
continue continue
} }
// 两个表都是只有样式没有数据 // 两个表都是只有样式没有数据
if(d1[i][j].v==undefined && d2[i][j].v==undefined ){ if(d1[i][j].v==undefined && d2[i][j].v==undefined ){
}else if (d1[i][j].v==undefined || d2[i][j].v==undefined){ }else if (d1[i][j].v==undefined || d2[i][j].v==undefined){
luckysheet.setCellValue(i, j, {bg: "#e85f5f"})
as++
let s = this.numToString(j+1);
array.push([i+1,s]);
//array.push([i+1,j+1]);
}else {
if (d1[i][j].v!= d2[i][j].v) {
luckysheet.setCellValue(i, j, {bg: "#e85f5f"}) luckysheet.setCellValue(i, j, {bg: "#e85f5f"})
//查看是否有标签
/*luckysheet.setCellValue(i, j, {
ps: { //批注
"left": 92, //批注框左边距
"top": 10, //批注框上边距暖色
"width": 91, //批注框宽度
"height": 48, //批注框高度
"value": this.dep+"表有误", //批准内容
"isshow": false //批注框为显示状态
}
})*/
as++ as++
let s = this.numToString(j+1); let s = this.numToString(j+1);
array.push([i+1,s]); array.push([i+1,s]);
//array.push([i+1,j+1]); //array.push([i+1,j+1]);
}else {
if (d1[i][j].v!= d2[i][j].v) {
luckysheet.setCellValue(i, j, {bg: "#e85f5f"})
//查看是否有标签
/*luckysheet.setCellValue(i, j, {
ps: { //批注
"left": 92, //批注框左边距
"top": 10, //批注框上边距暖色
"width": 91, //批注框宽度
"height": 48, //批注框高度
"value": this.dep+"表有误", //批准内容
"isshow": false //批注框为显示状态
}
})*/
as++
let s = this.numToString(j+1);
array.push([i+1,s]);
//array.push([i+1,j+1]);
}
} }
} }
} }
map.set(name1,array); }
if(as>0){ map.set(name1,array);
this.$message({ if(as>0){
message: "导入完成,本次导入共发现"+as+"条不同数据", this.$message({
type: "warning"}); message: "导入完成,本次导入共发现"+as+"条不同数据",
}else{ type: "warning"});
this.$message({ }else{
message: "导入完成,本次导入未发现不同数据", this.$message({
type: "success"}); message: "导入完成,本次导入未发现不同数据",
} type: "success"});
}
} })
)
}, },
/** 导出设置 */ /** 导出设置 */
handleExport: debounce(function() { handleExport: debounce(function() {
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<!-- luckysheet容器 --> <!-- luckysheet容器 -->
<div <div
id="luckysheet" id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 60px; height: 1000px; z-index: 0" style="margin: 0px; padding: 0px; position: absolute; width: 100%;height: 78vh; z-index: 0"
> >
</div> </div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment