spfm-market-front/src/pages/main/onlineExcelMarket/index.vue

<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container">
        <div class="main-box container-box">
            <input type="hidden" id="excelId"/>
            <div class="inner-left" style="overflow: hidden">
                <!--                <div class="button-list">-->
                <!--                    <el-button type="primary" @click="showExcel = true" plain>excel</el-button>-->
                <!--                    <el-button type="primary" @click="showExcel = false" plain>不excel</el-button>-->
                <!--                </div>-->
                <div style="margin: 10px 0">
                    <el-input placeholder="请输入内容" v-model="filterText" class="input-with-select" clearable
                              @change="() => {if (!filterText) {searchMenu();}}">
                        <el-button slot="append" @click="searchMenu" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div v-loading="loading" style="height: calc(100% - 100px);overflow-y: scroll;overflow-x: scroll">
                    <el-tree ref="tree" class="tree-line" :expand-on-click-node="false" :auto-expand-parent="true"
                             :default-expand-all="true" :default-checked-keys="checkedMenu" :data="menuList"
                             @check="checkChange"
                             @node-click="nodeClick" :filter-node-method="filterNode" node-key="functionCode" style="width: 300px">
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <span>
                                <span v-if="node.data.type == 4"
                                      style="color: #009cff" class="iconfont icon-wenjianjia"></span>
                                <span v-else style="color: #fdb441" class="iconfont icon-wenjian"></span>
                                <span
                                    :style="node.data.hasOwnProperty('parent')? 'font-size:14px;padding-left:5px':'font-size:12px;padding-left:5px'">{{
                                        node.data.functionName
                                    }}</span>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="tree-action"></div>
            </div>
            <div class="inner-right">
                <div style="overflow: hidden;" v-if="showExcel == false">
                    <toolList @iconCli='iconCli' :tooltit='tooltit' style="margin: 10px"></toolList>
                    <div style="margin-top: 20px;float: left;" class="bigbtns">
                        <el-button style="margin-left: 20px;" class="btn-check" size="medium" type="primary"
                                   @click="addNewStatus = true">新建
                        </el-button>
                    </div>
                    <div style="margin-top: 20px;float: right;margin-right: 20px" class="bigbtns"
                         v-if="selectionSize != 0">
                        <el-button style="margin-left: 5px;" class="btn-check" size="small" type="primary"
                                   @click="delExcel()">删除
                        </el-button>
                        <el-button style="margin-left: 5px;" class="btn-check" size="small" type="primary"
                                   @click="cancelSelection()">取消
                        </el-button>
                        <el-button style="margin-left: 5px;" class="btn-check" size="small" type="primary"
                                   @click="moveStatus = true">移动到
                        </el-button>
                    </div>
                </div>
                <div class="tabbox" v-if="showExcel == false">
                    <div id="selectionList" style="height: 30px">
                        <span v-if="selectionSize != 0">已选{{ selectionSize }}项</span>
                    </div>
                    <el-table height="calc(100% - 60px)" class="com-table" ref="multipleTable" :data="tableData"
                              tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading"
                              @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="45"></el-table-column>
                        <el-table-column prop="fileName" label="名称">
                        </el-table-column>
                        <el-table-column prop="opTime" label="创建时间">
                        </el-table-column>
                        <el-table-column prop="addUserDept" label="创建科室">
                        </el-table-column>
                        <el-table-column prop="addUserName" label="创建人">
                        </el-table-column>
                        <el-table-column prop="shareEditStatus" label="权限状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.editStatus == 0">开</span>
                                <span v-if="scope.row.editStatus == 1">关</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="moveToEdit(scope.row)"
                                           :disabled="scope.row.shareEditStatus==1">编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                                   :total="total">
                    </el-pagination>
                </div>
                <div class="container" id="container" v-else>
                    <iframe id="excelIframe" height="100%" width="100%" src="/marketfront/static/views/onlineShareExcelMarket.html"
                            frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <el-dialog :title="'新建'" :visible.sync="addNewStatus" width="300px" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="false">
            <div>
<!--                <el-button type="primary" @click="addExcel()" plain class="iconfont icon-wenjian">在线文档</el-button>-->
<!--                <el-button type="primary" @click="addFolderStatus = true" plain class="iconfont icon-wenjianjia">文件夹</el-button>-->
                <div style="padding-bottom: 30px">
                    <div style="width: 85px;display: inline-block;cursor: pointer" @click="addExcel()">
                        <span class="iconfont icon-wenjian" style="font-size: 80px;color: dodgerblue"></span>
                        <p style="margin-left: 20px;margin-top: 10px">在线文档</p>
                    </div>
                    <div style="width: 85px;display: inline-block;margin-left: 70px;cursor: pointer" @click="addFolderStatus = true">
                        <span class="iconfont icon-wenjianjia" style="font-size: 80px;color: dodgerblue"></span>
                        <p style="margin-left: 20px;margin-top: 10px">文件夹</p>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog :title="'新增文件夹'" :visible.sync="addFolderStatus" width="50%" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="false">
            <div v-loading="loading">
                <el-form :model="infolist" ref="infolist">
                    <div class="online">
                        <el-form-item prop="name">
                            <span>文件夹名称</span>
                            <el-input v-model="infolist.name" placeholder="文件夹名称" :disabled="disableStatus"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer myfooter">
                    <el-button type="primary" @click="addNewFolder()">确 定</el-button>
                    <el-button @click="addFolderStatus = false">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog :title="'分享选项'" :visible.sync="shareStatus" width="550px" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="false">
            <div style="margin-left: 30px;padding-bottom: 20px" v-loading = 'shareLoading'>
                <el-button type="primary" @click="processExcelShare(1)" plain>仅我可编辑</el-button>
                <el-button type="primary" @click="openOADialog(2)" plain>部门内所有人可编辑</el-button>
                <el-button type="primary" @click="checkexa = true" plain>指定人可编辑</el-button>
            </div>
        </el-dialog>
        <el-dialog title="选择填报人" :visible.sync="checkexa" width="50%" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="false">
            <div>
                <el-form :model="exaList" ref="addInfoList">
                    <el-form-item prop="processUserId" class="info-line online">
                        <span style="width: 80px;margin-right: 20px">审批人员</span>
                        <deptTreeUserNew class="tree" @treeCheck="treeCheckonly" :defaultList="defaultList"
                                         :type="depttype" :closeList="closeList"></deptTreeUserNew>
                        <div class="tree treeUser">
                            <p v-for="(item,index) in treeList" :key="index">{{ item.receiveName }}
                                <i @click="deletes(item,index)" class="el-icon-error"></i>
                            </p>
                        </div>
                    </el-form-item>
                </el-form>

                <div slot="footer" style="text-align: right;padding-bottom: 20px">
                    <el-button type="primary" @click="checkProcessUser(3)">确 定</el-button>
                    <el-button @click="checkexa = false">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="移动到" :visible.sync="moveStatus" width="500px" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="false">
            <div>
                <el-tree ref="tree" class="tree-line" :expand-on-click-node="false" :auto-expand-parent="true"
                         :default-expand-all="true" :default-checked-keys="checkedMenu" :data="moveMenuList"
                         @check="checkChange"
                         @node-click="folderNodeClick" node-key="functionCode" @expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <span>
                                <span v-if="node.data.type == 4"
                                      style="color: #009cff" class="iconfont icon-wenjianjia"></span>
                                <span v-else style="color: #fdb441" class="iconfont icon-wenjian"></span>
                                <span
                                    :style="node.data.hasOwnProperty('parent')? 'font-size:14px;padding-left:5px':'font-size:12px;padding-left:5px'">{{
                                        node.data.functionName
                                    }}</span>
                            </span>
                        </span>
                </el-tree>
                <div slot="footer" style="text-align: right;padding-bottom: 20px">
                    <el-button type="primary" @click="addFolderStatus = true" style="margin-right: 150px">+新建文件夹
                    </el-button>
                    <el-button type="primary" @click="moveExcel()">确 定</el-button>
                    <el-button @click="moveStatus = false">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <myMessage :messTit='messTit' @closeMessage="processDel" :centerDialogVisible="delVisible"
                   v-if="delVisible"></myMessage>
        <myMessageNew :messTit='oaTitle' @closeMessage="processOa" :centerDialogVisible="oaVisible"
                   v-if="oaVisible" yesBtnName="是" noBtnName="否"></myMessageNew>
    </div>
    </fullscreen>
</template>

<script>
import pForm from "../../../components/p-form";
import toolList from "../../../components/toolList";
import myMessage from "../../../components/myMessage.vue";
import myMessageNew from "../../../components/myMessageNew.vue";
import deptTreeUserNew from "../../../components/deptTreeUserNew.vue"

export default {
    components: {
        pForm,
        toolList,
        myMessage,
        myMessageNew,
        deptTreeUserNew,
    },
    data() {
        return {
            fullscreen: false,
            filterText: "", // tree搜索value
            actionName: "", // 当前选择节点名称
            menuList: [], // tree数据源
            checkedMenu: [], // 选中节点的functionCode
            checkedNodes: [], // 选中节点的node值
            roleData: "", // 某一条数据
            showExcel: false,
            tableData: [],
            loading: false,
            total: 0,
            pageSize: 1,
            addNewStatus: false,
            tooltit: '在线文档-文件管理',
            addFolderStatus: false,
            addExcelStatus: false,
            infolist: {},
            disableStatus: false,
            nowFolder: {},
            selectionList: [],
            selectionSize: 0,
            delVisible: false,
            messTit: '',
            shareStatus: false,
            excelJson: '',
            editFrom: '',
            editTo: '',
            editStatus: '',
            excelName: '',
            excelId: '',
            checkexa: false,
            exaList: {},
            //审批人用到的
            treeListonly: {},
            defaultList: [],
            treeList: [],
            closeList: false,
            depttype: 0,
            shareType: '',
            oaVisible: false,
            oaTitle: '',
            oaType: '',
            moveStatus: false,
            //移动文件夹tree相关
            nowMoveFolder: {},
            shareLoading : false,
            woNo: '',
            moveMenuList: [],
        }
    },
    methods: {
        processWoNo() {
            console.log(this.woNo);
            var _this = this;
            this.$http({
                url: '/market/cOnlineExcelMarket/processWoNo',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    id: _this.woNo,
                },
            }).then((res) => {
                if (res.data.result === 1) {
                    if (res.data.result != 'WONOEMPTY') {
                        _this.$message({
                            message: res.data.desc,
                            type: 'error'
                        });
                    }
                } else {
                    _this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    var id = res.data.desc;
                    //放入id，切换到excel模式
                    document.getElementById('excelId').setAttribute("value", id);
                    _this.showExcel = true;
                }
            });
        },
        moveExcel() {
            var _this = this;
            var folderId = "";
            if (this.nowFolder.type == '4') {
                folderId = this.nowFolder.functionCode;
            }
            var arr = [];
            this.selectionList.map((o) => {
                arr.push(o.id);
            });
            this.$http({
                url: '/market/cOnlineExcelMarket/moveExcel',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    moveIds: arr,
                    moveFolderId: folderId
                },
            }).then((res) => {
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: 'error'
                    });
                } else {
                    _this.$message({
                        message: res.data.desc,
                        type: 'success'
                    });
                    _this.moveStatus = false;
                    _this.tooltit = '在线文档-' + _this.nowFolder.functionName;
                    _this.getList({}, this.pageSize);
                }
            });
        },
        // 点击树节点事件
        folderNodeClick(a, b, c, d) {
            this.nowFolder = a;
        },
        //检查是否选了填报人
        checkProcessUser(v) {
            let _this = this;
            if (_this.treeList.length == 0) {
                _this.$message({
                    message: '请选择填报人',
                    type: 'error'
                });
            } else {
                _this.openOADialog(v);
            }
        },
        //判断是否提交oa待办
        processOa(v) {
            if (v == 1) {
                this.oaType = 1;
            } else {
                this.oaType = 0;
            }
            this.oaVisible = false;
            this.processExcelShare(this.shareType);
        },
        //打开oa待办选项框
        openOADialog(shareType) {
            this.shareType = shareType;
            this.oaTitle = '是否要推送OA待办？';
            this.oaVisible = true;
        },
        //提交分享
        processExcelShare(shareType) {
            var deptList = [];
            var _this = this;
            _this.shareLoading = true;
            if (shareType == 3) {
                this.treeList.map((o) => {
                    deptList.push(o.receiveNo);
                });
            }
            if (shareType == 1) {
                _this.shareType = 1;
            }
            console.log(deptList);
            console.log('oa:' + this.oaType);
            console.log('share:' + shareType);
            //提交
            this.$http({
                url: '/market/cOnlineExcelMarket/saveExcelShare',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    data: _this.excelJson,
                    id: _this.excelId,
                    editConStart: _this.editFrom,
                    editConEnd: _this.editTo,
                    excelName: _this.excelName,
                    editStatus: _this.editStatus,
                    deptIds: deptList,
                    oaType: _this.oaType,
                    shareType: _this.shareType
                },
            }).then((res) => {
                _this.shareLoading = false;
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: 'error'
                    });
                } else {
                    _this.$message({
                        message: '分享成功',
                        type: 'success'
                    });
                    _this.oaVisible = false;
                    _this.checkexa = false;
                    _this.shareStatus = false;
                    _this.showExcel = false;
                    _this.getList({}, this.pageSize);
                }
            });
        },
        //删除填报人
        deletes(val, index) {
            this.treeList.splice(index, 1);
            this.closeList = this.treeList;
        },
        treeCheckonly(v) {
            this.treeList = v;
        },
        //从excel页面调用来打开分享框
        shareExcel(excelJson, editFrom, editTo, editStatus, excelName, excelId) {
            console.log(excelJson, editFrom, editTo, editStatus, excelName, excelId);
            this.excelJson = excelJson;
            this.editFrom = editFrom;
            this.editTo = editTo;
            this.editStatus = editStatus;
            this.excelName = excelName;
            this.excelId = excelId;
            this.shareStatus = true;
        },
        //从excel页面调用来关闭excel
        closeExcel() {
            this.showExcel = false;
            this.getList({}, this.pageSize);
        },
        //打开excel
        moveToEdit(row) {
            //放入id，切换到excel模式
            document.getElementById('excelId').setAttribute("value", row.id);
            this.showExcel = true;
        },
        //新建excel
        addExcel() {
            var _this = this;
            var folderId = "";
            if (this.nowFolder.type == '4') {
                folderId = this.nowFolder.functionCode;
            }
            this.$http({
                url: '/market/cOnlineExcelMarket/addExcel',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    folderId: folderId,
                },
            }).then((res) => {
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: 'error'
                    });
                } else {
                    _this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    var id = res.data.desc;
                    _this.addNewStatus = false;
                    //放入id，切换到excel模式
                    document.getElementById('excelId').setAttribute("value", id);
                    _this.showExcel = true;
                }
            });
        },
        //处理删除
        processDel(v) {
            this.delVisible = false;
            if (v === 1) {
                console.log(this.selectionList);
                var arr = [];
                this.selectionList.map((o) => {
                    arr.push(o.id);
                });
                let _this = this;
                //整理list并且执行删除
                this.$http({
                    url: "/market/cOnlineExcelMarket/delExcel",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        delIds: arr
                    },
                }).then((res) => {
                    if (res.data.result === 1) {
                        _this.$message({
                            message: res.data.desc,
                            type: 'error'
                        });
                    } else {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.getList({}, this.pageSize);
                    }
                });
            }
        },
        //删除确认框
        delExcel() {
            this.delVisible = true;
            this.messTit = '该文件删除后将无法找回，确认删除吗?';
        },
        handleSelectionChange(val) {
            this.selectionList = val;
            this.selectionSize = val.length;
            console.log(this.selectionSize);
        },
        cancelSelection() {
            this.selectionList = [];
            this.selectionSize = 0;
            this.$refs.multipleTable.clearSelection();
        },
        getList(v, n) {
            var queryListType = "1";
            var queryFolderId = "";
            if (this.nowFolder.type) {
                queryListType = this.nowFolder.type;
                queryFolderId = this.nowFolder.functionCode;
            }
            this.pageSize = n;
            this.loading = true;
            this.tableData = [];
            let _this = this;
            this.$http({
                url: "/market/cOnlineExcelMarket/getExcelList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: {
                    queryListType: queryListType,
                    queryFolderId: queryFolderId
                },
            }).then((res) => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        addNewFolder() {
            console.log(this.nowFolder);
            var _this = this;
            if (!_this.infolist.name) {
                _this.$message({
                    message: '文件夹名称不能为空',
                    type: 'error'
                });
                return;
            }
            var upFolderId = '';
            if (this.nowFolder.type == "4") {
                upFolderId = this.nowFolder.functionCode;
            }
            this.$http({
                url: '/market/cOnlineExcelMarket/addNewFolder',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    name: _this.infolist.name,
                    upFolderId: upFolderId
                },
            }).then((res) => {
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: 'error'
                    });
                } else {
                    _this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    _this.getTreeData();
                    _this.addFolderStatus = false;
                    _this.addNewStatus = false;
                    _this.infolist = {};
                }
            });
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen
            }
        },
        testExcel() {
            document.getElementById("excelIframe").src = "";
        },

        // 搜索按钮事件
        searchMenu() {
            this.$refs.tree.filter(this.filterText);
        },
        // 树形图 复选框监听事件
        checkChange(a, b, c, d) {
            this.checkedNodes = b.checkedNodes;
        },
        // 点击树节点事件
        nodeClick(a, b, c, d) {
            console.log(a);
            this.showExcel = false;
            this.nowFolder = a;
            this.tooltit = '在线文档-' + a.functionName;
            this.getList({}, 1);
        },
        // tree过滤方法
        filterNode(value, data) {
            if (!value) return true;
            return data.functionName.indexOf(value) !== -1;
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList({}, this.pageSize);
        },
        getTreeData(data) {
            this.loading = true;
            this.$http({
                url: "/market/cOnlineExcelMarket/getFolderList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: data,
            }).then((res) => {
                this.formatterData(res.data);
            });
        },
        // 格式化树形图数据
        formatterData(data) {
            var arr = [];
            var _this = this;
            data.map((o) => {
                var obj1 = {};
                if (o.systemflag !== "1") {
                    if (o.parentCode) {
                        var cvTag = o.parentCode == "Top";
                    } else {
                        cvTag = false;
                    }
                    if (cvTag) {
                        //判断是否是第一层
                        obj1 = o;
                        obj1.icon = o.icon || "layui-icon layui-icon-ok-circle";
                        obj1.target = "_self";
                        obj1.checked = o.checked;
                        obj1.parent = "1";
                        obj1.children = menuSon(o.functionCode);
                        arr.push(obj1);
                    }
                }
            });

            function menuSon(id) {
                var arr1 = [];
                data.map((o) => {
                    var obj1 = {};
                    var myId = o.functionCode;
                    if (o.parentCode == id) {
                        //找到是父亲的儿子数据
                        obj1 = o;
                        obj1.target = "_self";
                        var tag = sonIs(myId); //判断是否有儿子
                        if (tag) {
                            //有儿子
                            obj1.children = menuSon(myId); //调用孙生成节点函数
                        } else {
                            obj1.children = "";
                        }
                        arr1.push(obj1);
                    }
                });
                return arr1;
            }

            function sonIs(id) {
                //查找是否有儿子
                var tag = false;
                data.map((o) => {
                    if (o.parentCode == id) {
                        tag = true;
                    }
                });
                return tag;
            }

            this.menuList = arr;
            //复制一份给移动文件夹用
            this.moveMenuList = [];
            arr.map((o) =>{
                if (o.type == '4') {
                    this.moveMenuList.push(o);
                }
            })
            this.menuStatus = true;
            this.loading = false;
        },
        getUrlKey(name) {
            return (
                decodeURIComponent(
                    (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
                        location.href
                    ) || [, ""])[1].replace(/\+/g, "%20")
                ) || null
            );
        },
    },
    mounted() {
        this.woNo = this.getUrlKey("id")//获取地址栏参数
        console.log(this.woNo);
        if (this.woNo != null) {
            this.processWoNo();
        }
        // this.woNo = this.$route.query.woNo
        // if (this.woNo != null) {
        //     this.processWoNo();
        // } else {
        //
        // }
        this.getList({}, 1);
        this.getTreeData();
    },
    created() {
        window['backToExcelList'] = (rp) => {
            this.closeExcel(rp);
        }
        window['shareExcel'] = (a, b, c, d, e, f) => {
            this.shareExcel(a, b, c, d, e, f);
        }
    },
    name: "index"
}
</script>

<style lang="scss" scoped>
.container {
    background-color: #f0f2f5;

    .el-col {
        background-color: white;
        padding: 0 20px;
    }

    .container-box {
        padding: 0;
        margin-top: 0;
        height: 100%;
    }

    .main-box {
        overflow: hidden;
        display: flex;

        > div {
            background-color: white;
        }

        .inner-left {
            width: 20%;
            padding: 0 20px;

            .canel-style {
                color: #1890ff;
                cursor: pointer;
                padding-left: 10px;
            }
        }

        .inner-right {
            width: 80%;
            margin-left: 1%;
        }
    }
}

.el-button + .el-button {
    margin-left: 20px;
}

.button-list {
    padding: 30px 0 10px 0;
}

.choice-style {
    background: rgb(255, 255, 255);
}

.tree-action {
    bottom: 0;
    width: 100%;
    // border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
}

.tree-line {
    .el-tree-node__content {
        padding-left: 0 !important;
    }

    .el-tree-node__expand-icon.is-leaf {
        display: none !important;
    }

    .el-tree-node {
        position: relative;
        padding-left: 16px; // 缩进量
    }

    .el-tree-node__children {
        padding-left: 16px; // 缩进量
    }

    // 竖线
    .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -17px;
        border-width: 1px;
        border-left: 1px dashed #52627c;
    }

    // 当前层最后一个节点的竖线高度固定
    .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
    }

    // 横线
    .el-tree-node::after {
        content: "";
        width: 24px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 20px;
        border-width: 1px;
        border-top: 1px dashed #52627c;
    }

    // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
    & > .el-tree-node::after {
        border-top: none;
    }

    & > .el-tree-node::before {
        border-left: none;
    }

    // 展开关闭的icon
    .el-tree-node__expand-icon {
        font-size: 16px;

        // 叶子节点（无子节点）
        &.is-leaf {
            color: transparent;
            // display: none; // 也可以去掉
        }
    }
}

.ant-alert-info {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
}

.ant-alert {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    padding: 8px 15px 8px 37px;
    word-wrap: break-word;
    border-radius: 4px;
}

.containerr {
    background: #fff;
    height: calc(100vh);
    width: calc(100vw);
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}

.tabbox {
    margin: 15px;
}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }

    .tree {
        width: calc(50% - 60px);
        display: inline-block;
        margin-right: 20px;
        height: 300px;
        overflow-y: scroll;

        .el-icon-error {
            float: right;
            font-size: 20px;
            margin-top: 9px;
            cursor: pointer;
        }
    }

    .treeUser {
        margin: 0;
        border: 1px solid #ddd;

        p {
            background: #f4f4f4;
            padding: 0 20px;
            margin-bottom: 5px;
        }
    }

    .treeUserb {
        width: calc(100% - 100px);
        border: 1px solid #ddd;
        background: #f4f4f4;
        border-radius: 3px;
        height: auto;
        overflow: hidden;

        p {
            display: inline-block;
            padding: 0 20px;
            margin-bottom: 5px;
        }
    }
}
</style>