表格拖拽增删改查显示隐藏

包括表格的行列自由拖拽，行和列的curd 列 的展示隐藏，表格的上传导出，分页等功能

<!--
 * @Company: wwww.glaway.com
 * @Copyright: (c) 2020. All Rights Reserved
 * @Author: zq
 * @Date: 2020-10-15 09:38:48
 * @Description: 
 * @LastEditors: zq
 * @LastEditTime: 2020-11-20 15:58:26
-->
<template>
    <div id="container">
        <!-- 宽300px -->
        <positiontree @click="hiddencontrols = false"></positiontree>
        <div class="mainbox">
            <div class="top" @click="hiddencontrols = false">
                <div class="select">
                    <p>上报单位</p>
                    <el-input v-model="value" placeholder="请输入内容" style="line-height:30px"></el-input>
                </div>
                <div class="history">
                    <p @click="history">历史上报记录</p>
                </div>
            </div>
            <div class="center" @click="hiddencontrols = false">
                <div class="reportname">
                    <p>报表名称 <span style="color:red">*</span></p>
                    <input type="text" v-model="reportname" style="boder:1px solid block" />
                </div>
                <div class="ps">
                    <p>备注</p>
                    <input type="text" v-model="ps" />
                </div>
                <div class="btns">
                    <p @click="savereportform('已保存')">保存</p>
                    <p @click="exportDataEvent('已导出')">保存并导出</p>
                </div>
            </div>
            <div class="control">
                <div class="filterbox">
                    <!-- <span>搜索查询：</span>
                    <div class="inputbox">
                        <input type="text" />
                        <i class="el-icon-search"></i>
                    </div> -->
                </div>
                <p>
                    <i class="el-icon-menu" @click.stop="controlwindowshow = !controlwindowshow"> </i>
                </p>
                <!-- 定位一个控制展示的窗口 -->
                <div class="controlwindow" v-if="controlwindowshow" @click.stop="controlwindowshow = true">
                    <div class="allchose">
                        <input type="checkbox" :checked="showcol.length == allshowcol.length && showcol.indexOf('') == -1" @click="ifallchose" />
                        <span @click="ifallchose">全选</span>
                    </div>
                    <ul>
                        <li v-for="(item, index) in allshowcol" :key="index" :title="item.label" @click="checkboxevt(item, index)">
                            <input type="checkbox" :checked="showcol.indexOf(item) !== -1" />
                            <span>{{ item }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="table-container">
                <table border="1" cellspacing="0" class="table-parent">
                    <thead>
                        <tr class="trtr">
                            <th v-for="(item, index) in col" :key="index" @contextmenu.prevent="colevent($event, item, index)">{{ item.label }}</th>
                        </tr>
                        <tr>
                            <th v-for="(item, index) in filtercontext" :key="index"><input type="text" v-model="filtercontext[index]" @keydown.enter="filterevent" /></th>
                        </tr>
                    </thead>
                    <!-- <div class="body" v-show="tableData && tableData.length > 0"> -->
                    <tbody class="bodybody" v-show="tableData && tableData.length > 0">
                        <tr v-for="(item, index) in tableData" :key="index" @contextmenu.prevent="rowevent($event, item, index)">
                            <td>
                                <i class="el-icon-menu drag-btn"></i>
                            </td>

                            <td v-for="(m, i) in dropCol" :key="i"><input type="text" @blur="changeipt($event, index, m.prop)" v-model="item[m.prop]" /></td>
                        </tr>
                    </tbody>
                    <!-- </div> -->
                    <div v-show="!tableData || tableData.length == 0" class="None">
                        暂无数据
                    </div>
                </table>

                <table border="1" cellspacing="0" class="table-parent" id="table-parent" v-show="false">
                    <thead>
                        <tr class="trtr">
                            <th v-for="(item, index) in col" :key="index">{{ item.label }}</th>
                        </tr>
                    </thead>
                    <div class="body" v-show="foreverData && foreverData.length > 0">
                        <tbody class="bodybody">
                            <tr v-for="(item, index) in foreverData" :key="index">
                                <td v-for="(m, i) in dropCol" :key="i">{{ item[m.prop] }}</td>
                            </tr>
                        </tbody>
                    </div>
                </table>
            </div>
            <!-- 分页 -->
            <div class="fenye">
                <div class="block">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagenum"
                        :page-sizes="[10, 20, 30]"
                        :page-size="pageleng"
                        prev-text="< 上一页 "
                        next-text=" 下一页 >"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="foreverData.length"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <div class="loading" v-if="loading">
            <h1>Loading...</h1>
        </div>

        <Historydata
            :drawer="drawer"
            @closedrawer="closedrawer"
            ref="historypage"
            :havesave="havesave"
            :haveout="haveout"
            :upstatus="upstatus"
            :selectdata="selectdata"
            :historyData="historyData"
            :currentPage="currentPage"
            :pagesize="pagesize"
            :total="total"
        ></Historydata>
        <Lookquote :drawer="detaildrawer" @closedrawer="closedetaildrawer" :tableData="historydetaildata" :detailid="detailId"></Lookquote>
        <!-- 列菜单 -->
        <ul class="colmenu" :style="{ top: colmenuTop, left: colmenuLeft }" v-if="colmenushow">
            <li @click="addcol">增加列</li>
            <li @click="delcol">删除列</li>
            <li @click="editcol">编辑列</li>
        </ul>
        <!-- 行菜单 -->
        <ul class="rowmenu" :style="{ top: rowmenuTop, left: rowmenuLeft }" v-if="rowmenushow">
            <li @click="addrow">增加行</li>
            <li @click="delrow">删除行</li>
            <li>编辑行</li>
        </ul>
        <el-dialog title="修改列名" :visible="dialogVisible" width="30%" :before-close="handleClose">
            <input type="text" v-model="editcontext" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmedit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getDataByPartNum, saveDataManage, getDataById, deleteHistoryData, getHistoryByUserName, getLrreplaceInfo } from "../../../api/index"
import Positiontree from "../../../components/NEWPOSITION"
import Historydata from "../../../components/historydata"
import Lookquote from "../../../components/lookquote"
import Sortable from "sortablejs"
import FileSaver from "file-saver"
import XLSX from "xlsx"
export default {
    components: {
        Positiontree,
        Historydata,
        Lookquote
    },
    methods: {
        havesaveevt() {
            if (!this.havesave && !this.haveout) {
                this.havesave = true
                this.upstatus = "已保存"
            } else {
                if (this.havesave) {
                    this.havesave = false
                    this.upstatus = ""
                } else {
                    this.haveout = false
                    this.havesave = true
                    this.upstatus = "已保存"
                }
            }
            this.currentPage = 1
            this.pagesize = 10
            this.gethistorydata(this.upstatus, this.selectdata, this.currentPage, this.pagesize)
        },
        haveoutevt() {
            if (!this.havesave && !this.haveout) {
                this.haveout = true
                this.upstatus = "已导出"
            } else {
                if (this.haveout) {
                    this.haveout = false
                    this.upstatus = ""
                } else {
                    this.havesave = false
                    this.haveout = true
                    this.upstatus = "已导出"
                }
            }
            this.currentPage = 1
            this.pagesize = 10
            this.gethistorydata(this.upstatus, this.selectdata, this.currentPage, this.pagesize)
        },
        changelang(val) {
            this.pagesize = val
            this.gethistorydata(this.upstatus, this.selectdata, this.currentPage, this.pagesize)
        },
        changepage(val) {
            this.currentPage = val
            this.gethistorydata(this.upstatus, this.selectdata, this.currentPage, this.pagesize)
        },
        handleDelete(index, row) {
            deleteHistoryData(row.ID).then(res => {
                this.gethistorydata(this.upstatus, this.selectdata, this.currentPage, this.pagesize)
            })
        },
        // 封装一个获取历史数据的方法
        gethistorydata(upstatus, query, page, rows) {
            getHistoryByUserName(upstatus, query, page, rows).then(res => {
                console.log(res)
                if (res.data.obj) {
                    this.historyData = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },
        updatehistory() {
            this.gethistorydata(this.upstatus, this.selectdata, 1, 10)
        },
        // 单选
        checkboxevt(item, index) {
            console.log(index)
            // 判断数组中有没有这个item 如果有去掉 ，没有加上
            if (this.showcol.indexOf(item) == -1) {
                // 没有加上
                this.showcol.splice(index, 1, item)

                // // 。。。。。。。
                console.log(this.showcol)
                let newArray = []
                for (let i = 0; i < this.showcol.length; i++) {
                    if (this.showcol[i] !== "") {
                        newArray.push({ label: this.showcol[i], prop: this.showcol[i] })
                    }
                }
                console.log(newArray)
                this.col = newArray
                this.dropCol = JSON.parse(JSON.stringify(newArray))
                this.initfilter()
                // 现在通过showcol数组对col进行重新赋值
            } else {
                // 有就去掉
                this.showcol.splice(index, 1, "")
                // 去掉之后tableData也要去掉这列
                // 开始对tableData进行操作，将它的每一项去掉
                console.log("去掉这列", item)
                for (let i = 0; i < this.col.length; i++) {
                    if (this.col[i].label == item) {
                        this.$delete(this.col, i)
                        this.$delete(this.dropCol, i)
                        this.$delete(this.filtercontext, i)
                    }
                }
            }
        },
        // 全选
        ifallchose() {
            this.loading = true
            if (this.showcol.indexOf("") !== -1) {
                this.showcol = JSON.parse(JSON.stringify(this.allshowcol))
                console.log(111)
                console.log(this.showcol)
                let newArray = []
                for (let i = 0; i < this.showcol.length; i++) {
                    if (this.showcol[i] !== "") {
                        newArray.push({ label: this.showcol[i], prop: this.showcol[i] })
                    }
                }
                console.log(newArray)
                this.col = newArray
                this.dropCol = JSON.parse(JSON.stringify(newArray))
                this.tableData = this.foreverData.slice((this.pagenum - 1) * this.pageleng, this.pageleng * this.pagenum)
                this.initfilter()
                this.loading = false
            } else {
                for (let i = 0; i < this.showcol.length; i++) {
                    this.showcol[i] = ""
                }
                console.log(this.showcol)
                let newArray = []
                for (let i = 0; i < this.showcol.length; i++) {
                    if (this.showcol[i] !== "") {
                        newArray.push({ label: this.showcol[i], prop: this.showcol[i] })
                    }
                }
                console.log(newArray)
                this.col = newArray
                this.dropCol = JSON.parse(JSON.stringify(newArray))
                this.filtercontext = []

                // 全不选之后tableData等于空的了
                this.tableData = []
                this.loading = false
            }
        },

        // 历史上传记录
        history() {
            this.status = ""
            this.drawer = true
            this.gethistorydata("", "", 1, 10)

            this.selectdata = ""
            this.currentPage = 1
            this.pagesize = 10

            this.havesave = false
            this.haveout = false
        },
        // 关闭历史记录
        closedrawer() {
            this.drawer = false
        },
        // 历史详情
        getdetaildrawer(id) {
            this.detailId = id
            this.detaildrawer = true

            getDataById(this.detailId).then(res => {
                if (res.data.obj) {
                    this.historydetaildata = JSON.parse(res.data.obj)
                }
            })
        },
        // 封装几个改变havesave的方法
        changehavesave() {
            this.havesave = !this.havesave
        },
        changehavesavefalse() {
            this.havesave = false
        },
        changehaveout() {
            this.haveout = !this.haveout
        },
        changehaveoutfalse() {
            this.haveout = false
        },
        // 关闭历史数据详情
        closedetaildrawer() {
            this.detaildrawer = false
        },

        // 保存按钮
        savereportform(status) {
            // 报表名称必须填写
            // if (!this.reportname) {
            //     this.$message({
            //         message: "报表名称不能为空！",
            //         type: "warning"
            //     })
            //     return
            // }
            // 传给后台一个所有列名
            saveDataManage(JSON.stringify(this.tableData), this.allshowcol, this.value, this.reportname, this.ps, status).then(() => {
                if (status == "已保存") {
                    this.$message({
                        message: "数据报表保存成功",
                        type: "success"
                    })
                } else {
                    this.$message({
                        message: "数据报表保存导出成功",
                        type: "success"
                    })
                }
            })
            this.cleaript()
            this.cleartable()
        },
        // 保存成功后只显示暂无数据
        cleartable() {
            this.tableData = []
            this.col = []
            this.dropCol = []
            this.filtercontext = []
        },
        // 清空上报单位名称，报表名称和备注
        cleaript() {
            this.value = ""
            this.reportname = ""
            this.ps = ""
        },
        // 导出
        exportDataEvent(status) {
            // 保存
            // this.savereportform(status)
            // 导出tableData
            this.$nextTick(function() {
                console.log(document.getElementById("table-parent"))
                let et = XLSX.utils.table_to_book(document.getElementById("table-parent"))
                console.log(et)
                //console.log(this.TableData)

                let etout = XLSX.write(et, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                })
                try {
                    FileSaver.saveAs(
                        new Blob([etout], {
                            type: "application/octet-stream"
                        }),
                        "元器件对比详情.xls"
                    )
                } catch (e) {
                    //console.log(e, etout)
                }
                return etout
            })
        },
        // 在列上右击显示菜单，可以插入列,删除列，更改列名
        colevent(e, item, index) {
            console.log(index)
            // 在列名上面右击 让列菜单展示
            // 点列菜单让行菜单消失
            this.rowmenushow = false
            this.colmenushow = false
            this.colmenushow = true
            this.colmenuLeft = e.pageX + "px"
            this.colmenuTop = e.pageY + "px"

            // 将点击的列位置和列名保存
            this.colspot = index
            this.colspotname = item.label
            console.log(index)
        },
        addcol() {
            if (!this.newcolname) {
                this.newcolname = "自定义列"
            } else {
                this.newcolname = +this.newcolname.slice(4) + 1
                this.newcolname = "自定义列" + this.newcolname
            }

            for (let i = 0; i < this.tableData.length; i++) {
                this.$set(this.tableData[i], this.newcolname, "")
            }
            for (let i = 0; i < this.foreverData.length; i++) {
                this.$set(this.foreverData[i], this.newcolname, "")
            }
            this.allshowcol.splice(this.colspot + 1, 0, this.newcolname)
            this.showcol.splice(this.colspot + 1, 0, this.newcolname)

            this.col.splice(this.colspot + 1, 0, {
                label: this.newcolname,
                prop: this.newcolname
            })
            this.dropCol.splice(this.colspot + 1, 0, {
                label: this.newcolname,
                prop: this.newcolname
            })
            this.filtercontext.splice(this.colspot + 1, 0, "")
        },
        delcol() {
            for (let i = 0; i < this.tableData.length; i++) {
                this.$delete(this.tableData[i], this.colspotname)
            }
            for (let i = 0; i < this.foreverData.length; i++) {
                this.$delete(this.foreverData[i], this.colspotname)
            }
            this.allshowcol.splice(this.colspot, 1)
            this.showcol.splice(this.colspot, 1)

            this.col.splice(this.colspot, 1)
            this.dropCol.splice(this.colspot, 1)
            this.filtercontext.splice(this.colspot, 1)
        },
        editcol() {
            this.editcontext = this.colspotname
            this.dialogVisible = true
        },
        confirmedit() {
            this.dialogVisible = false
            for (let i = 0; i < this.tableData.length; i++) {
                let newvalue = JSON.parse(JSON.stringify(this.tableData[i][this.colspotname]))
                this.$set(this.tableData[i], this.editcontext, newvalue)
                this.$delete(this.tableData[i], this.colspotname)
            }
            this.col.splice(this.colspot, 1, {
                label: this.editcontext,
                prop: this.editcontext
            })
            this.dropCol.splice(this.colspot, 1, {
                label: this.editcontext,
                prop: this.editcontext
            })
        },
        handleClose(done) {
            this.dialogVisible = false
        },
        // 增加一行
        addrow() {
            let newcol = JSON.parse(JSON.stringify(this.tableData[0]))
            for (let i in newcol) {
                newcol[i] = ""
            }
            newcol.id = Math.random() * Math.pow(10, 18) + ""
            let changeid = this.tableData[this.rowspot].id
            // this.tableData.splice(this.rowspot, 0, newcol)
            console.log(newcol)
            // tableData的数据变更了，让foreverData对应的数据也变更

            for (let i = 0; i < this.foreverData.length; i++) {
                if (this.foreverData[i].id == changeid) {
                    this.$nextTick(function() {
                        this.foreverData.splice(i, 0, newcol)
                        this.tableData = this.foreverData.slice(0, 10)
                    })
                }
            }

            console.log(this.foreverData)
        },
        delrow() {
            let changeid = this.tableData[this.rowspot].id
            // this.tableData.splice(this.rowspot, 1)
            for (let i = 0; i < this.foreverData.length; i++) {
                if (this.foreverData[i].id == changeid) {
                    this.$nextTick(function() {
                        this.foreverData.splice(i, 1)
                        this.tableData = this.foreverData.slice(0, 10)
                    })
                }
            }
        },
        rowevent(e, item, index) {
            // 在行名上面右击 让列菜单展示、
            // 点行菜单让行菜单消失
            this.colmenushow = false
            this.rowmenushow = false
            this.rowmenushow = true
            this.rowmenuLeft = e.pageX + "px"
            this.rowmenuTop = e.pageY + "px"
            // 将点击的行位置和列名保存
            this.rowspot = index
            console.log(this.rowspot)
        },
        // 数据筛选
        filterevent() {
            // 对tableData进行筛选
            this.tableData = JSON.parse(JSON.stringify(this.foreverData))
            for (let i = this.tableData.length - 1; i >= 0; i--) {
                for (let j = this.filtercontext.length - 1; j >= 0; j--) {
                    if (this.tableData[i][this.col[j].label].indexOf(this.filtercontext[j]) == -1) {
                        this.$nextTick(function() {
                            this.$delete(this.tableData, i)
                        })
                    }
                }
            }

            // 清空搜索条件
            this.initfilter()
        },
        // 对数据进行编辑更改
        changeipt(e, index, attriname) {
            // 更改之后的数据：e.target.value
            // 需要知道是tableData的第几条数据的哪个属性的值发生了变化，然后将这条数据换成更改后的数据就可以更新tableData了
            // console.log(e.target.value, "更改数据了")
            // console.log(index, "索引为" + index + "的数据发生了改变")
            // console.log(attriname, "这个属性的属性值发生的变化")
            this.$set(this.tableData[index], attriname, e.target.value)
            let changeid = this.tableData[index].id
            // tableData的数据变更了，让foreverData对应的数据也变更
            for (let i = 0; i < this.foreverData.length; i++) {
                if (this.foreverData[i].id == changeid) {
                    this.$set(this.foreverData, i, JSON.parse(JSON.stringify(this.tableData[index])))
                }
            }
        },
        // 列拖动
        columnDrop() {
            const wrapperTr = document.getElementsByClassName("trtr")[0]
            this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: ({ newIndex, oldIndex }) => {
                    const oldItem = this.dropCol[oldIndex]
                    this.dropCol.splice(oldIndex, 1)
                    this.dropCol.splice(newIndex, 0, oldItem)
                    var newArray = this.dropCol.slice(0)
                    this.col = []
                    this.$nextTick(function() {
                        this.col = newArray
                        console.log(this.col)
                    })

                    // 列拖动之后筛选条件的位置也要发生变化
                    const oldfilter = this.filtercontext[oldIndex]
                    this.filtercontext.splice(oldIndex, 1)
                    this.filtercontext.splice(newIndex, 0, oldfilter)
                }
            })
        },
        // 行拖动
        rowDrop() {
            this.$nextTick(() => {
                this.sortable = Sortable.create(document.getElementsByClassName("bodybody")[0], {
                    handle: ".drag-btn",
                    onEnd: ({ newIndex, oldIndex }) => {
                        this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0])
                        var newArray = this.tableData.slice(0)
                        this.tableData = []
                        this.$nextTick(function() {
                            this.tableData = newArray
                            console.log(this.tableData)
                        })
                    }
                })
            })
        },
        // 分页
        handleSizeChange(val) {
            console.log(val, "每页显示条数")
            this.pageleng = val
            this.tableData = this.foreverData.slice((this.pagenum - 1) * this.pageleng, this.pageleng * this.pagenum)
        },
        handleCurrentChange(val) {
            console.log(val, "第几页")
            this.pagenum = val
            this.tableData = this.foreverData.slice((this.pagenum - 1) * this.pageleng, this.pageleng * this.pagenum)
        },
        //更新数据
        updatepage(params) {
            this.stairFigure = params.stairFigure
            this.stairFigureVersions = params.stairFigureVersions
            this.pagenum = 1
            this.pageleng = 10
            this.loading = true
            getDataByPartNum(this.stairFigure, this.stairFigureVersions, "").then(res => {
                // 重置一下
                this.tableData = []
                this.foreverData = []
                this.col = []
                this.dropCol = []
                this.$nextTick(function() {
                    this.foreverData = res.data.obj
                    this.tableData = JSON.parse(JSON.stringify(this.foreverData.slice(0, 10)))
                    // this.foreverData = res.data.obj
                    // this.tableData = res.data.obj

                    let newArray = []
                    for (let i in this.tableData[0]) {
                        if (i !== "id") {
                            newArray.push({ label: i, prop: i })
                            this.allshowcol.push(i)
                            this.showcol.push(i)
                        }
                    }
                    this.col = newArray
                    this.dropCol = JSON.parse(JSON.stringify(newArray))
                    this.initfilter()
                    this.loading = false
                })
            })
        },
        // 初始化筛选条件
        initfilter() {
            for (let i = 0; i < this.col.length; i++) {
                this.$set(this.filtercontext, i, "")
            }
        }
    },
    data() {
        return {
            loading: false,
            // 分页
            pageleng: 10,
            pagenum: 1,
            // 点击菜单之后获取的全局参数图号和版本号
            stairFigure: "",
            stairFigureVersions: "",
            // 三个输入框
            value: "",
            reportname: "",
            ps: "",
            // 第二层弹窗
            detaildrawer: false,
            historydetaildata: [],
            detailId: "",
            // 历史数据
            drawer: false,
            havesave: false,
            haveout: false,
            upstatus: "",
            currentPage: 1,
            pagesize: 10,
            total: 0,
            historyData: [],
            selectdata: "",
            // 快捷菜单
            // 列
            colmenuTop: 0,
            colmenuLeft: 0,
            colmenushow: false,
            // 编辑列的弹窗
            dialogVisible: false,
            editcontext: "",
            // 保存点击列时的位置
            colspot: null,
            colspotname: null,
            newcolname: null,
            // 行
            rowTop: 0,
            rowLeft: 0,
            rowmenushow: false,
            // 保存点击列时的位置
            rowspot: null,
            // 表格数据
            tableData: [
                // {
                //     id: "1111",
                //     三化: "三化",
                //     三维: "三维",
                //     三哥: "三哥"
                // },
                // {
                //     id: "2222",
                //     三化: "45da",
                //     三维: "8888",
                //     三哥: "9999"
                // },
                // {
                //     id: "3333",
                //     三化: "456d46",
                //     三维: "8da8",
                //     三哥: "9999"
                // }
            ],
            foreverData: [],
            col: [
                // {
                //     label: "三化",
                //     prop: "三化"
                // },
                // {
                //     label: "三维",
                //     prop: "三维"
                // },
                // {
                //     label: "三哥",
                //     prop: "三哥"
                // }
            ],
            dropCol: [
                // {
                //     label: "三化",
                //     prop: "三化"
                // },
                // {
                //     label: "三维",
                //     prop: "三维"
                // },
                // {
                //     label: "三哥",
                //     prop: "三哥"
                // }
            ],
            // 自定义查询参数
            controlwindowshow: false,
            // 参数控制展示列
            allshowcol: [],
            showcol: [],
            // 筛选参数
            filtercontext: []
        }
    },
    mounted() {
        // 重置页面上的输入框
        this.cleaript()
        this.columnDrop()
        this.rowDrop()
        this.foreverData = JSON.parse(JSON.stringify(this.tableData))
        // 给筛选条件赋初始值
        this.initfilter()
        // 点击事件让弹窗关闭
        window.addEventListener("click", () => {
            this.colmenushow = false
            this.rowmenushow = false
            this.controlwindowshow = false
        })
    }
}
</script>
<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100%;
    display: flex;
    background: #fff;
    position: relative;
    .loading {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.85);
        width: 100%;
        height: 100%;
        h1 {
            margin-top: 20%;
        }
    }
    .colmenu {
        position: fixed;
        width: 150px;
        height: 90px;
        border: 1px solid #ccc;
        background-color: #fff;
        li {
            height: 30px;
            line-height: 30px;
        }
        li:hover {
            background-color: #108ee9;
            color: #fff;
            cursor: pointer;
        }
    }
    .rowmenu {
        position: fixed;
        width: 150px;
        height: 90px;
        border: 1px solid #ccc;
        background-color: #fff;
        li {
            height: 30px;
            line-height: 30px;
        }
        li:hover {
            background-color: #108ee9;
            color: #fff;
            cursor: pointer;
        }
    }
    .mainbox {
        width: calc(100% - 300px);
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
            height: 50px;
            width: 100%;
            overflow: hidden;
            .select {
                float: left;
                height: 50px;
                line-height: 50px;
                margin-left: 20px;
                display: flex;
                p {
                    text-align: left;
                    font: 400 16px/50px "";
                    margin-right: 10px;
                    width: 100px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                /deep/ .el-input {
                    width: 300px;
                    height: 30px;
                    .el-input__inner {
                        outline: none;
                        border: 1px solid black !important;
                        border-radius: 0;
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        margin-top: 10px;
                        outline: none;
                        width: 300px;
                        box-sizing: border-box;
                        padding: 0 15px;
                        // border: 1px solid block;
                    }
                }
            }
            .history {
                float: right;
                height: 50px;
                line-height: 50px;
                margin-right: 20px;
                p {
                    font: 600 16px/50px "";
                    color: #0c60aa;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p:hover {
                    color: #108ee9;
                }
            }
        }
        .center {
            height: 50px;
            width: 100%;
            overflow: hidden;
            .reportname {
                float: left;
                overflow: hidden;
                margin-right: 3%;
                width: 37%;
                text-overflow: ellipsis;
                white-space: nowrap;
                p {
                    text-align: left;
                    float: left;
                    width: 100px;
                    margin-left: 20px;
                    height: 50px;
                    line-height: 50px;
                    margin-right: 10px;
                    font: 400 16px/50px "";
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                input {
                    float: left;
                    height: 30px;
                    margin-top: 10px;
                    outline: none;
                    width: 300px;
                    box-sizing: border-box;
                    padding: 0 15px;
                    border: 1px solid block;
                }
            }
            .ps {
                float: left;
                display: flex;
                width: 30%;
                p {
                    width: 50px;
                    text-align: left;
                    height: 50px;
                    line-height: 50px;
                    margin-right: 10px;
                    font: 400 16px/50px "";
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                input {
                    float: left;
                    height: 30px;
                    margin-top: 10px;
                    outline: none;
                    width: 300px;
                    box-sizing: border-box;
                    padding: 0 15px;
                    border: 1px solid block;
                }
            }
            .btns {
                float: left;
                width: 30%;
                height: 50px;
                overflow: hidden;
                p {
                    float: right;
                    color: #fff;
                    background-color: #0c60aa;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 30px;
                    width: 100px;
                    margin-top: 15px;
                    margin-right: 80px;
                    line-height: 30px;
                }
                p:nth-child(2) {
                    margin-right: 40px;
                }
                p:hover {
                    background-color: #108ee9;
                }
            }
        }
        .control {
            height: 50px;
            width: 95%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            .filterbox {
                float: left;
                margin-left: 20px;
                width: 410px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .inputbox {
                    width: 300px;
                    height: 30px;
                    border: 1px solid #999999;
                    input {
                        float: left;
                        width: 260px;
                        height: 25px;
                        margin-top: 2px;
                        border: none;
                        outline: none;
                    }
                    i {
                        float: right;
                        margin-top: 7px;
                        margin-right: 5px;
                    }
                }
            }
            p {
                width: 50px;
                height: 50px;
                float: right;
                // line-height: 50px;
                i {
                    cursor: pointer;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .controlwindow {
                width: 200px;
                max-height: 300px;
                border: 1px solid #ccc;
                position: absolute;
                top: 50px;
                right: 0;
                background-color: #eee;
                z-index: 1;
                .allchose {
                    height: 30px;
                    width: 100%;
                    text-align: right;
                    padding-right: 20px;
                    box-sizing: border-box;
                }
                ul {
                    width: 100%;
                    max-height: 250px;
                    overflow-y: auto;
                    overflow-x: hidden;
                    li {
                        height: 30px;
                        width: 100%;
                        text-align: left;
                        box-sizing: border-box;
                        padding-left: 10px;
                        padding-right: 10px;
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    li:hover {
                        background-color: #108ee9;
                    }
                }
                ::-webkit-scrollbar {
                    width: 0px;
                }
            }
        }
        .table-container {
            width: 95%;
            height: 700px;
            border: 1px solid #ccc;
            overflow-x: auto;
            overflow-y: hidden;
            .table-parent {
                height: 700px;
                max-width: 95%;
                min-width: 100%;
                box-sizing: border-box;
                thead {
                    height: 100px;
                    display: block;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    tr {
                        background-color: #eee;
                        display: flex;
                        height: 50px;
                        float: left;
                        padding-left: 54px;
                        box-sizing: border-box;
                        width: 100%;
                        th {
                            background-color: #eee;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 200px;
                            border: 1px solid #ccc;
                        }
                    }
                    tr:nth-child(2) {
                        background-color: #fff;
                        th {
                            background-color: #fff;
                            input {
                                outline: none;
                                border: none;
                                text-align: center;
                            }
                        }
                    }
                }
                // .body {
                //     height: 100%;
                //     overflow-y: auto;
                tbody {
                    height: 600px;
                    display: block;
                    overflow: auto;
                    tr {
                        display: flex;
                        td {
                            text-align: center;
                            display: block;
                            border: 1px solid #ccc;
                            width: 200px;
                            height: 50px;
                            line-height: 50px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            input {
                                width: 100%;
                                height: 100%;
                                border: none;
                                outline: none;
                                text-align: center;
                            }
                        }
                        td:nth-child(1) {
                            width: 50px;
                        }
                    }
                }
                // }
                // ::-webkit-scrollbar {
                //   width: 0px;
                // }
            }
            .None {
                margin: 200px auto;
            }
        }
        .total {
            margin-top: 10px;
            text-align: left;
        }
        .fenye {
            height: 36px;
            width: 100%;
            text-align: left;
            background-color: #fff;
            border-top: 1px solid #ccc;
        }
    }
    .el-dialog__wrapper {
        .el-dialog {
            .el-dialog__header {
                text-align: left;
            }
            .el-dialog__body {
                input {
                    border: 1px solid #ccc;
                    height: 30px;
                    width: 50%;
                    outline: none;
                }
            }
        }
    }
}
</style>

来吧，展示！