Commit d01b6db0 authored by xiangjiaojunxp's avatar xiangjiaojunxp

页面大小和遮罩层

parent b2c19a5f
......@@ -5,9 +5,9 @@
"author": "若依",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
"build:prod": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
"build:stage": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src"
},
......@@ -36,16 +36,21 @@
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"@riophae/vue-treeselect": "0.4.0",
"af-table-column": "^1.0.3",
"axios": "0.21.0",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"clipboard": "2.0.6",
"connect": "3.6.6",
"core-js": "3.8.1",
"echarts": "4.9.0",
"element-ui": "2.15.0",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"fuse.js": "6.4.3",
......@@ -54,45 +59,44 @@
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"lint-staged": "10.5.3",
"luckyexcel": "^1.0.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"screenfull": "5.0.2",
"script-ext-html-webpack-plugin": "2.1.5",
"scriptjs": "^2.5.9",
"sortablejs": "1.10.2",
"svg-sprite-loader": "5.1.1",
"uuid": "^9.0.0",
"vue": "2.6.12",
"vue-append": "^2.2.0",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-router": "3.4.9",
"vue-template-compiler": "2.6.12",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"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"
"xlsx": "^0.17.5"
},
"devDependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"@riophae/vue-treeselect": "0.4.0",
"af-table-column": "^1.0.3",
"axios": "0.21.0",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"clipboard": "2.0.6",
"connect": "3.6.6",
"core-js": "3.8.1",
"echarts": "4.9.0",
"element-ui": "2.15.0",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"fuse.js": "6.4.3",
......@@ -101,33 +105,27 @@
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"lint-staged": "10.5.3",
"luckyexcel": "^1.0.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"runjs": "4.4.2",
"sass": "1.32.0",
"sass-loader": "10.1.0",
"screenfull": "5.0.2",
"script-ext-html-webpack-plugin": "2.1.5",
"scriptjs": "^2.5.9",
"sortablejs": "1.10.2",
"sortablejs": "^1.10.2",
"svg-sprite-loader": "5.1.1",
"vue": "2.6.12",
"vue-append": "^2.2.0",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-router": "3.4.9",
"vue-template-compiler": "2.6.12",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"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"
"xlsx": "^0.17.5"
},
"engines": {
"node": ">=8.9",
......
<template>
<div class="app-container">
<el-form ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="模板" prop="name" >
<el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" filterable placeholder="请选择您要查看的模板">
<!-- <el-option label="自设的模板名" value="使用空白模板"></el-option>-->
<el-option
v-for="item in depss" :key="item.id" :label="item.templateName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="规则" prop="rule">
<el-select v-model="selectedRule" ref="mySelect" size="mini" @change="handleRuleChange" filterable placeholder="请选择您要查看的规则" >
<el-option
v-for="iem in luckyrule" :key="iem.id" :label="iem.roleName" :value="iem.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-form ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="模板" prop="name" >
<el-select v-model="selectedOption" ref="mySelect" size="mini" @change="handleOptionChange" filterable placeholder="请选择您要查看的模板">
<!-- <el-option label="自设的模板名" value="使用空白模板"></el-option>-->
<el-option
v-for="item in depss" :key="item.id" :label="item.templateName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="规则" prop="rule">
<el-select v-model="selectedRule" ref="mySelect" size="mini" @change="handleRuleChange" filterable placeholder="请选择您要查看的规则" >
<el-option
v-for="iem in luckyrule" :key="iem.id" :label="iem.roleName" :value="iem.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</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容器 -->
<div
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 v-if="showMask" class="mask">
<div class="loading-spinner"></div>
</div>
</div>
</template>
......@@ -77,6 +81,7 @@ export default {
name: "Mymodule",
data() {
return {
showMask:false,
uuid:'',
//弹出页面的表名
from_name : "",
......@@ -245,7 +250,7 @@ export default {
/** 导入事件*/
async handleFileChange(evt) {
let exx;
this.showMask = true;
const cons = new Promise((resolve, reject) => {
LuckyExcel.transformExcelToLucky(evt, exportJson => {
exx = exportJson;
......@@ -257,7 +262,10 @@ export default {
const exportJson = await cons;
await this.summary(exportJson);
console.log('summary 执行完毕');
// 导入完成后关闭遮罩层
this.showMask = false;
this.submit(exportJson);
} catch (Error) {
this.$message({
message: Error.message,
......@@ -1056,4 +1064,34 @@ function generateUUID() {
return array.join("-");
}
</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 @@
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-s-opportunity
" size="mini" @click="addToMap">生成</el-button>
<el-button icon="el-icon-s-opportunity" size="mini" @click="addToMap">生成</el-button>
</el-col>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="right-float">重置</el-button>
</el-row>
<!-- luckysheet容器 -->
<div
id="luckysheet"
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 1000px; z-index: 0"
>
</div>
style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 105px; height: 75vh; z-index: 0"
></div>
</div>
</template>
......@@ -352,99 +349,96 @@ export default {
let cell=(c1<=c2)?c1:c2;
let array=[];
let r=this.row-1;
for(let i=r;i<row;i++) {
for (let j = 0; j <cell; j++) {
//第一个表的单元格为null直接跳出
if(d1[i][j]==null ){
continue
}
//第二个表的单元格为null直接跳出
if(d2[i][j]==null ){
continue
}
//第一个表内数据为0 且 第二个表只有样式内部为空
if(d2[i][j].v==0 && d1[i][j].v==undefined ){
continue
}
//第一个表内数据为0 且 第二个表只有样式内部为空
if( d1[i][j].v==0 && d2[i][j].v==undefined ){
continue
}
// 第一个表内数据为string型 且 第二个表只有样式内部为空
/*if((typeof(d1[i][j].v)=="string" && d2[i][j].v==undefined)){
continue
}*/
//第一个表为合并单元格 且第二个内没有值
if(d1[i][j].mc!=undefined &&d2[i][j].v==undefined){
continue
}
//第二个表为合并单元格 且第一个内没有值
if(d2[i][j].mc!=undefined &&d1[i][j].v==undefined){
continue
}
if((isNaN(d1[i][j].v) && d2[i][j].v==undefined)){
for(let i=r;i<row;i++) {
for (let j = 0; j <cell; j++) {
//第一个表的单元格为null直接跳出
if(d1[i][j]==null ){
continue
}
//第二个表的单元格为null直接跳出
if(d2[i][j]==null ){
continue
}
//第一个表内数据为0 且 第二个表只有样式内部为空
if(d2[i][j].v==0 && d1[i][j].v==undefined ){
continue
}
//第一个表内数据为0 且 第二个表只有样式内部为空
if( d1[i][j].v==0 && d2[i][j].v==undefined ){
continue
}
// 第一个表内数据为string型 且 第二个表只有样式内部为空
/*if((typeof(d1[i][j].v)=="string" && d2[i][j].v==undefined)){
continue
}*/
//第一个表为合并单元格 且第二个内没有值
if(d1[i][j].mc!=undefined &&d2[i][j].v==undefined){
continue
}
//第二个表为合并单元格 且第一个内没有值
if(d2[i][j].mc!=undefined &&d1[i][j].v==undefined){
continue
}
if((isNaN(d1[i][j].v) && d2[i][j].v==undefined)){
}
// 第二个表内数据为string型 且 第一个表只有样式内部为空
if(isNaN(d2[i][j].v)&& d1[i][j].v==undefined){
}
// 第二个表内数据为string型 且 第一个表只有样式内部为空
if(isNaN(d2[i][j].v)&& d1[i][j].v==undefined){
}
// 没有选只比较数值 且 第一个表内数据为string型 且 第二个表内数据位string型
if(this.numm!=false &&(isNaN(d1[i][j].v)&&isNaN(d2[i][j].v))){
continue;
}
// 两个表的值都是0
if(d1[i][j].v==0 && d2[i][j].v==0 ){
continue
}
// 两个表都是只有样式没有数据
if(d1[i][j].v==undefined && d2[i][j].v==undefined ){
}
// 没有选只比较数值 且 第一个表内数据为string型 且 第二个表内数据位string型
if(this.numm!=false &&(isNaN(d1[i][j].v)&&isNaN(d2[i][j].v))){
continue;
}
// 两个表的值都是0
if(d1[i][j].v==0 && d2[i][j].v==0 ){
continue
}
// 两个表都是只有样式没有数据
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, {
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]);
}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){
this.$message({
message: "导入完成,本次导入共发现"+as+"条不同数据",
type: "warning"});
}else{
this.$message({
message: "导入完成,本次导入未发现不同数据",
type: "success"});
}
}
map.set(name1,array);
if(as>0){
this.$message({
message: "导入完成,本次导入共发现"+as+"条不同数据",
type: "warning"});
}else{
this.$message({
message: "导入完成,本次导入未发现不同数据",
type: "success"});
}
}
)
})
},
/** 导出设置 */
handleExport: debounce(function() {
......
......@@ -53,7 +53,7 @@
<!-- luckysheet容器 -->
<div
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>
......
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