导入文件对比

ruoyi-ui/src/views/system/supplies/indexupload.vue

+<template>
+    <div class="app-container">
+        <el-form  ref="queryForm" size="small" :inline="true" >
+            <el-form-item label="行" prop="row">
+                <el-input
+                    v-model="row"
+                    placeholder="请输入开始行"
+                    clearable
+                    @keyup.enter.native="handleFileChange1"
+                    maxlength="8"
+                />
+            </el-form-item>
+            <el-form-item label="列" prop="cell"  label-width="80px">
+                <el-input
+                    v-model="cell"
+                    placeholder="请输入结束列"
+                    clearable
+                    @keyup.enter.native="handleFileChange1"
+                    maxlength="8"
+                />
+            </el-form-item>
+            <el-form-item label="单位" prop="dep" label-width="80px" >
+                <el-input
+                    v-model="dep"
+                    placeholder="请输入导入单位"
+                    clearable
+                    @keyup.enter.native="handleFileChange1"
+                    maxlength="8"
+                />
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-upload
+                    type="file"
+                    name="file"
+                    ref="upload"
+                    :before-upload="handleFileChange"
+                    action=''
+                    :limit="1"
+                    :file-list="fileList"
+                >
+                    <el-button  plain size="mini" icon="el-icon-download" type="primary"  >导入初始文件</el-button>
+                </el-upload>
+            </el-col>
+            <el-col :span="1.5">
+                <el-upload
+                    type="file"
+                    name="file"
+                    ref="upload"
+                    :before-upload="handleFileChange1"
+                    action=''
+                    :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-col :span="1.5">
+                <el-button
+                    type="warning"
+                    plain
+                    icon="el-icon-upload2"
+                    size="mini"
+                    @click="handleExport"
+                    v-hasPermi="['ruoyi-myexcel:myexcel:export']"
+                >导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button icon="el-icon-refresh" size="mini" @click="addToMap">生成</el-button>
+            </el-col><el-col :span="1.5">
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-col>
+        </el-row>
+
+        <!-- luckysheet容器 -->
+        <div
+            id="luckysheet"
+            style="margin: 0px; padding: 0px; position: absolute; width: 100%;left: 0px; top: 120px; height: 1000px; z-index: 0"
+        >
+        </div>
+
+    </div>
+</template>
+
+
+<script>
+
+/*import luckysheet from 'luckysheet'*/
+import LuckyExcel from 'luckyexcel'
+//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
+import { exportExcel } from '../../../../public/exportExcel';
+import {vueScript} from "@/utils/generator/html";
+
+
+var fileName="新建XLSX工作表"; //定义表名
+var data1;
+var map=new Map();
+export default {
+    name: "Mymodule",
+    data() {
+        return {
+            row:'',
+            cell:'',
+            dep:'',
+            //弹出页面的表名
+            // 是否显示弹出层
+            fileList:[],
+            disableNextButton: true,
+            // 查询参数
+            queryParams: {
+                status:0
+            },
+        };
+    },
+    created() {
+
+    },
+    mounted() {
+
+        this.init();
+        fileName="新建XLSX工作表";
+    },
+    methods:{
+
+        /** 回车事件和保存提交绑定 */
+        handleEnter(event) {
+            if (event.keyCode === 13) {
+                event.preventDefault(); // 阻止默认的回车事件
+                // 触发确定操作
+                this.submit_from();
+            }
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            //刷新下拉选框内容
+            fileName="新建XLSX工作表";
+            this.disableNextButton='';
+            this.row=this.cell=this.dep="";
+            //刷新luckysheet表格
+            this.init();
+            map.clear();
+        },
+        /** Luckyexcel文档 */
+        init() {
+            let options = {
+                container: 'luckysheet', //luckysheet为容器id
+                title:'',
+                lang:'zh',
+                showinfobar:false,
+                data:[
+                    {
+                        "name": "sheet1", //工作表名称
+                        "color": "", //工作表颜色
+                        "index": 0, //工作表索引
+                        "status": 1, //激活状态
+                        "order": 0, //工作表的下标
+                        "hide": 0,//是否隐藏
+                        "row": 50, //行数
+                        "column": 50, //列数
+                        "defaultRowHeight": 19, //自定义行高
+                        "defaultColWidth": 73, //自定义列宽
+                        "celldata": [
+
+
+                        ], //初始化使用的单元格数据
+                        "config": {
+                            "merge": {
+                            }, //合并单元格
+                            "rowlen":{}, //表格行高
+                            "columnlen":{}, //表格列宽
+                            "rowhidden":{}, //隐藏行
+                            "colhidden":{}, //隐藏列
+                            "borderInfo":{
+
+                            }, //边框
+                            "authority":{}, //工作表保护
+                        },
+                    },
+                    /*{
+                      "name": "Sheet2",
+                      "color": "",
+                      "index": 1,
+                      "status": 0,
+                      "order": 1,
+                      "celldata": [],
+                      "config": {}
+                    },
+                    {
+                      "name": "Sheet3",
+                      "color": "",
+                      "index": 2,
+                      "status": 0,
+                      "order": 2,
+                      "celldata": [],
+                      "config": {},
+                    }*/
+                ]
+
+            }
+            luckysheet.create(options);
+
+        },
+        /** 导入事件*/
+        handleFileChange(evt) {
+            this.disableNextButton=false;
+            let name = evt.name
+            let suffixArr = name.split('.'),
+                suffix = suffixArr[suffixArr.length - 1]
+            if (suffix !== 'xlsx') {
+                this.$message({
+                    message: "上传格式不正确，请上传xlsx格式文件",
+                    type: "warning"});
+                return
+            }
+            LuckyExcel.transformExcelToLucky(
+                evt,
+                (exportJson)=> {
+                    if (exportJson.sheets === null || exportJson.sheets.length === 0) {
+                        this.$message({
+                            message: "导入失败，请检查上传的文件是否正确",
+                            type: "warning"
+                        });
+                        return
+                    }
+                    luckysheet.destroy()
+                    luckysheet.create({
+                        container: 'luckysheet', //luckysheet is the container id
+                        title: exportJson.info.name,
+                        lang: 'zh', // 设定表格语言
+                        showinfobar: false,
+                        data: exportJson.sheets,
+                        userInfo: exportJson.info.name.creator
+                    })
+                    data1=exportJson.sheets;
+                    let suffixArr = exportJson.info.name.split('.');
+                    fileName = suffixArr[0];
+                    this.dep=this.row=this.cell='';
+                }
+            )
+        },
+        addToMap(){
+          console.log(map);
+            map.forEach((value,key)=>{
+                for(let i=0;i<value.length;i++){
+                    let row=value[i][0],cell=value[i][1];
+                    let sd=luckysheet.getCellValue(row,cell,{type:"ps"});
+                    if(sd===null){
+                        luckysheet.setCellValue(row, cell, {bg: "#FF0000"})
+                        luckysheet.setCellValue(row, cell, {
+                            ps: { //批注
+                                "left": 92, //批注框左边距
+                                "top": 10, //批注框上边距
+                                "width": 91, //批注框宽度
+                                "height": 48, //批注框高度
+                                "value": key+"表有误", //批准内容
+                                "isshow": false //批注框为显示状态
+                            }
+                        })
+                    }else{
+                        let sd=luckysheet.getCellValue(row,cell,{type:"ps"}).value;
+                        luckysheet.setCellValue(row, cell, {
+                            ps: { //批注
+                                "left": 92, //批注框左边距
+                                "top": 10, //批注框上边距
+                                "width": 91, //批注框宽度
+                                "height": 48, //批注框高度
+                                "value": sd+"，"+key+"表有误", //批准内容
+                                "isshow": false //批注框为显示状态
+                            }
+                        })
+                    }
+                }
+
+
+
+            })
+
+        },
+        handleFileChange1(evt) {
+            if (this.dep==="") {
+                this.$message({
+                    message: "请先输入您要导入的单位",
+                    type: "warning"});
+                return false
+            }
+            if (this.row==="") {
+                this.$message({
+                    message: "请先输入导入开始的行",
+                    type: "warning"});
+                return false
+            }
+            if (this.cell==="") {
+                this.$message({
+                    message: "请先输入导入结束的列",
+                    type: "warning"});
+                return false
+            }
+            let name = evt.name
+            let suffixArr = name.split('.'),
+                suffix = suffixArr[suffixArr.length - 1];
+            name=suffixArr[0]
+            if (suffix !== 'xlsx') {
+                this.$message({
+                    message: "上传格式不正确，请上传xlsx格式文件",
+                    type: "warning"});
+                return
+            }
+
+            LuckyExcel.transformExcelToLucky(
+                evt,
+                (exportJson) =>{
+                    if (exportJson.sheets === null || exportJson.sheets.length === 0) {
+                        this.$message({
+                            message: "导入失败，请检查上传的文件是否正确",
+                            type: "warning"
+                        });
+                        return
+                    }
+
+                        let ddd=data1;
+                        let as=0;
+                        for(let k=0;k<ddd.length;k++){
+                            let d1=window.luckysheet.transToData(ddd[k].celldata);
+                            let d2=window.luckysheet.transToData(exportJson.sheets[k].celldata);
+                            let array=[];
+                            for(let i = 0; i < this.cell-1; i++) {
+                                for (let j=this.row-1;j<d1[0].length;j++) {
+                                    if(d1[i][j]===null){
+                                        break;
+                                    }
+                                    if (d1[i][j].m!== d2[i][j].m) {
+                                        luckysheet.setCellValue(i, j, {bg: "#FF0000"})
+                                        //查看是否有标签
+                                        /*luckysheet.setCellValue(i, j, {
+                                                ps: { //批注
+                                                    "left": 92, //批注框左边距
+                                                    "top": 10, //批注框上边距
+                                                    "width": 91, //批注框宽度
+                                                    "height": 48, //批注框高度
+                                                    "value": this.dep+"表有误", //批准内容
+                                                    "isshow": false //批注框为显示状态
+                                                }
+                                            })*/
+                                        as++
+                                        array.push([i,j]);
+                                    }
+                                }
+                            }
+                            map.set(this.dep,array);
+                            console.log(map);
+                        }
+                        if(as>0){
+                            this.$message({
+                                message: "导入完成,本次导入共发现"+as+"条不同数据",
+                                type: "warning"});
+                        }else{
+                            this.$message({
+                                message: "导入完成,本次导入未发现不同数据",
+                                type: "success"});
+                        }
+
+                }
+            )
+        },
+        /** 导出设置 */
+        handleExport: debounce(function() {
+            // 处理点击事件
+            exportExcel(luckysheet.getAllSheets(),fileName)
+        }, 500), // 设置延迟时间，单位为毫秒
+    }
+// 配置项111
+};
+// debounce函数定义
+function debounce(func, delay) {
+    let timer;
+    return function () {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            func.apply(context, args);
+        }, delay);
+    };
+}
+</script>
+