在线文档

src/pages/main/onlineExcel/index.vue

@@ -0,0 +1,916 @@
+<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;">
+                    <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">
+                        <span class="custom-tree-node" slot-scope="{ node }">
+                            <span>
+                                <span v-if="node.data.hasOwnProperty('children') &&node.data.children.length > 0"
+                                      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.shareEditStatus == 0">开</span>
+                                <span v-if="scope.row.shareEditStatus == 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="/static/views/onlineShareExcel.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="500px" :destroy-on-close="true"
+                   :modal-append-to-body="false" :close-on-click-modal="false">
+            <div style="margin-left: 30px;padding-bottom: 20px">
+                <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="menuList"
+                         @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.hasOwnProperty('children') &&node.data.children.length > 0"
+                                      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>
+        <myMessage :messTit='oaTitle' @closeMessage="processOa" :centerDialogVisible="oaVisible"
+                   v-if="oaVisible"></myMessage>
+    </div>
+    </fullscreen>
+</template>
+
+<script>
+import pForm from "../../../components/p-form";
+import toolList from "../../../components/toolList";
+import myMessage from "../../../components/myMessage.vue";
+import deptTreeUserNew from "../../../components/deptTreeUserNew.vue"
+
+export default {
+    components: {
+        pForm,
+        toolList,
+        myMessage,
+        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: {},
+        }
+    },
+    methods: {
+        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/cOnlineExcel/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 = [];
+            if (shareType == 3) {
+                this.treeList.map((o) => {
+                    deptList.push(o.receiveNo);
+                });
+            }
+            console.log(deptList);
+            console.log('oa:' + this.oaType);
+            console.log('share:' + shareType);
+            var _this = this;
+            //提交
+            this.$http({
+                url: '/market/cOnlineExcel/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) => {
+                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;
+        },
+        //打开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/cOnlineExcel/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/cOnlineExcel/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/cOnlineExcel/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/cOnlineExcel/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.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/cOnlineExcel/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.menuStatus = true;
+            this.loading = false;
+        },
+    },
+    mounted() {
+        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: 100%;
+            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>

src/router/index.js

@@ -1946,6 +1946,15 @@ const routes = [{
             name: 'apkTestMain',
             component: (resolve) => require( /* webpackChunkName: "system" */ ['../pages/main/apkTestMain/index'], resolve)
         },
+        {
+            meta: {
+                name: '在线文档',
+                keepAlive: false
+            },
+            path: '/onlineShareExcel',
+            name: 'onlineShareExcel',
+            component: (resolve) => require( /* webpackChunkName: "system" */ ['../pages/main/onlineExcel/index'], resolve)
+        },
     ]
 },
 {