spfm-market-front/src/pages/main/onlineOfficeExcel/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">
                            <div class="custom-tree-node" slot-scope="{ node }">
                                <div style="display: flex;align-items: center;">
                                    <div v-if="node.data.type == 4" style="color: #009cff" class="iconfont icon-wenjianjia">
                                    </div>
                                    <div v-else style="color: #fdb441" class="iconfont icon-wenjian"></div>
                                    <div
                                        :style="node.data.hasOwnProperty('parent') ? 'font-size:14px;padding-left:5px' : 'font-size:12px;padding-left:5px'">
                                        {{
                                            node.data.functionName
                                        }}</div>
                                </div>
                            </div>
                        </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;display: flex;" class="bigbtns">
                            <el-button style="margin:0 20px 0 20px;" class="btn-check" size="medium" type="primary"
                                @click="addNewStatus = true" icon="el-icon-plus">新建
                            </el-button>
                            <div style="height: 100%;">
                                <myUpload style="" @uploadBack="uploadBack" :fileInfo="fileInfo"
                                    :fileList="fileInfo.fileList" :filenowFolder="nowFolder">
                                </myUpload>
                            </div>
                            <el-button v-if="nowFolder.type == '4'" style="margin:0 20px 0 20px;" type="danger"
                                icon="el-icon-delete" @click="remove()" size="medium">删除文件夹</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="名称">
                                <template slot-scope="scope">
                                    <svg v-if="scope.row.fileType == 'pptx' || scope.row.fileType == 'ppt'"
                                        t="1681371514824" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="3804"
                                        width="200" height="200">
                                        <path
                                            d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z"
                                            fill="#E34221" p-id="3805"></path>
                                        <path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z"
                                            fill="#DC3119" p-id="3806"></path>
                                        <path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF"
                                            opacity=".5" p-id="3807"></path>
                                        <path
                                            d="M304 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V686.4c0-9.6 8-17.6 17.6-17.6H304c38.4 0 59.2 25.6 59.2 57.6S340.8 784 304 784z m-3.2-94.4h-51.2v73.6h51.2c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8zM480 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 6.4-17.6 16-17.6H480c38.4 0 59.2 25.6 59.2 57.6S518.4 784 480 784z m-3.2-94.4h-49.6v73.6h49.6c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8z m225.6 0h-52.8v161.6c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V689.6h-51.2c-6.4 0-11.2-4.8-11.2-11.2 0-4.8 4.8-9.6 11.2-9.6h128c6.4 0 11.2 4.8 11.2 11.2 0 4.8-4.8 9.6-11.2 9.6z"
                                            fill="#FFFFFF" p-id="3808"></path>
                                    </svg>
                                    <svg v-if="scope.row.fileType == 'docx' || scope.row.fileType == 'doc'"
                                        t="1681371921638" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="4821"
                                        width="200" height="200">
                                        <path
                                            d="M594.944 0l335.12448 341.31968v563.2c0 65.9968-52.50048 119.48032-117.29408 119.48032H209.54624c-64.7936 0-117.2992-53.5296-117.2992-119.48032V119.48032C92.25216 53.48352 144.75776 0 209.55136 0H594.944z"
                                            fill="#5895FF" p-id="4822"></path>
                                        <path
                                            d="M930.06848 341.31968h-211.9168c-64.74752 0-123.20768-59.48928-123.20768-125.4912V0l335.12448 341.31968z"
                                            fill="#FFFFFF" fill-opacity=".4" p-id="4823"></path>
                                        <path
                                            d="M427.37664 725.31968V768H259.8144v-42.68032h167.56224zM594.944 640v42.68032H259.8144V640H594.944z m0-85.31968v42.63936H259.8144v-42.63936H594.944z m0-85.36064V512H259.8144v-42.68032H594.944z"
                                            fill="#FFFFFF" p-id="4824"></path>
                                    </svg>
                                    <svg v-if="scope.row.fileType == 'xlsx' || scope.row.fileType == 'xls'"
                                        t="1681372014830" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="5842"
                                        width="200" height="200">
                                        <path d="M745 184.3V1H93v1022.5h836V184.3z" fill="#72DCA2" p-id="5843"></path>
                                        <path d="M928.8 184h-184V0.8" fill="#A9FFCE" p-id="5844"></path>
                                        <path
                                            d="M500.8 476.2l76.6-131h67.7L532.5 537.9 445.7 686H378l122.8-209.8z m-0.7 70.3l-6.6-11-112.7-190.3h67.7L525 474.4l8.9 15.2L650.3 686h-67.7l-82.5-139.5z"
                                            fill="#FCFCFC" p-id="5845"></path>
                                    </svg>
                                    {{ scope.row.fileName }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="opTime" label="创建时间" align="center">
                            </el-table-column>
                            <el-table-column prop="addUserDept" label="创建科室" align="center">
                            </el-table-column>
                            <el-table-column prop="addUserName" label="创建人" align="center">
                            </el-table-column>
                            <el-table-column label="操作" width="200px" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" @click="moveToEdit(scope.row)"
                                        size="small" style="height: 50%;">编辑</el-button>
                                    <el-button type="primary" icon="el-icon-share" plain
                                        v-if="scope.row.addUserId == shareadmin" @click="shareBtn(scope.row)" size="small"
                                        style="height: 50%;">分享</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination ref="pagination" class="pageBox" @current-change="currchange"
                            layout="prev, pager, next" background :total="total">
                        </el-pagination>
                    </div>

                    <div class="container" id="container" v-else>
                        <fullscreen :fullscreen.sync="excelFullScreen" class="container">
                            <iframe id="excelIframe" height="100%" width="100%" src="/static/views/onlineShareExcels.html"
                                frameborder="0"></iframe>
                        </fullscreen>
                    </div>
                </div>
            </div>
            <el-dialog :title="'新建'" :visible.sync="addNewDiaStatus" width="50%" :destroy-on-close="true"
                :modal-append-to-body="false" :close-on-click-modal="false" v-if="addNewDiaStatus">
                <div v-loading="loading">
                    <el-form :model="form" ref="form">
                        <div class="online">
                            <el-form-item prop="fileName">
                                <span>文档名称</span>
                                <el-input v-model="form.fileName" placeholder="文档名称" :disabled="disableStatus"></el-input>
                            </el-form-item>
                            <el-form-item prop="docType">
                                <span>文档类型</span>
                                <el-select v-model="form.docType" placeholder="请选择文档类型" :disabled="disableStatus"
                                    style="width:100% ;">
                                    <el-option label="Word" value="word"></el-option>
                                    <el-option label="Excel" value="cell"></el-option>
                                    <el-option label="PPT" value="slide"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer myfooter">
                        <el-button type="primary" @click="addExcel()">确 定</el-button>
                        <el-button @click="addNewDiaStatus = false">取 消</el-button>
                    </div>
                </div>
            </el-dialog>

            <el-dialog :title="'新建'" :visible.sync="addNewStatus" width="450px" :destroy-on-close="true"
                :modal-append-to-body="false" :close-on-click-modal="false">
                <div>
                    <div style="padding-bottom: 30px;display:flex">
                        <div style="width: 85px;display: inline-block;cursor: pointer"
                            @click="addNewDiaStatus = true; form = {}">
                            <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">
                            <myUpload style="" @uploadBack=" uploadBack " :fileInfo=" fileInfo2 "
                                :fileList=" fileInfo2.fileList " :filenowFolder=" nowFolder ">
                            </myUpload>
                        </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="450px" :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="100%" :destroy-on-close=" true "
                :modal-append-to-body=" false " :close-on-click-modal=" false " v-loading=" shareLoading ">
                <div>
                    <el-form :model=" exaList " ref="addInfoList">
                        <el-form-item prop="processUserId" class="info-line online">
                            <!-- <span style="width: 80px;margin-right: 20px">审批人员</span> -->
                            <div style="max-height:500px ;">
                                <!-- <deptTreeUserNew class="tree" @treeCheck="treeCheckonly" :defaultList="defaultList"
                                :type="depttype" :closeList="closeList"></deptTreeUserNew> -->
                                <deptTreeOnly @treeCheck=" treeCheckonly " :defaultList=" defaultList " :type=" depttype "
                                    :closeList=" closeList ">
                                </deptTreeOnly>
                            </div>
                            <!-- <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: 100px"
                            icon="el-icon-plus">新建文件夹
                        </el-button>
                        <el-button type="primary" @click=" moveExcel() ">确 定</el-button>
                        <el-button @click=" moveStatus = false ">取 消</el-button>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :modal=" false " :title=" officetitle " :visible.sync=" officeStatus " style="height:100% ;"
                :fullscreen=" true " width="100%" height="100%" center>
                <div id="DocEditor" v-if=" officeStatus ">
                    <onlyoffice-editor editorId="DocEditor" :src=" src " :config=" config " @ready=" onReady " />
                </div>
            </el-dialog>
            <myMessage :messTit=' messTit ' @closeMessage=" processDel " :centerDialogVisible=" delVisible "
                v-if=" delVisible ">
            </myMessage>
            <myMessageRadio :messTit=' oaTitle ' @closeMessage=" processOa " :centerDialogVisible=" oaVisible "
                v-if=" oaVisible " yesBtnName="是" noBtnName="否" ok-btn-name="提交"></myMessageRadio>
        </div>
    </fullscreen>
</template>

<script>
import LuckyExcel from "luckyexcel";
import getConfig from '../../../config/dev'
import pForm from "../../../components/p-form";
import toolList from "../../../components/toolList";
import myMessage from "../../../components/myMessage.vue";
import myMessageNew from "../../../components/myMessageNew.vue";
import myMessageRadio from "../../../components/myMessageRadio.vue";
import deptTreeUserNew from "../../../components/deptTreeUserNew.vue"
import deptTreeOnly from "../../../components/newTree.vue";
import { ajaxJson } from '../../../../public/static/js/util'


import myUpload from '../../../components/uploadOnlineOffice'

export default {
    components: {
        myUpload,
        pForm,
        toolList,
        myMessage,
        myMessageNew,
        myMessageRadio,
        deptTreeUserNew,
        deptTreeOnly,
    },
    data() {
        return {
            form: {},
            shareadmin: '',
            officetitle: '',
            officeStatus: false,
            addNewDiaStatus: false,
            fileInfo: {
                limit: 1,
                type: 'btn',
                typename: '导入',
                urlType: 'onlineExcel',
                // url: getConfig().OFFICE_URL + '/office/restfile/upload',
                url: '/market/cOnlineSyncExcel/upload',
                fileList: [],
            },
            fileInfo2: {
                limit: 1,
                type: 'btn1',
                typename: '在线导入',
                urlType: 'onlineExcel',
                // url: getConfig().OFFICE_URL + '/office/restfile/upload',
                url: '/market/cOnlineSyncExcel/upload',
                fileList: [],

            },
            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: [],
            addShareType: 0,
            excelFullScreen: false,
        }
    },
    methods: {
        shareBtn(row) {
            this.shareStatus = true;
            this.excelId = row.id
            // this.addShareType = '2'
        },
        remove() {
            let _this = this
            console.log(this.nowFolder);
            if (this.tableData.length > 0) {
                this.$message({
                    message: "文件夹中有数据,禁止删除！",
                    type: "error",
                });
            } else {
                if (this.nowFolder.children == '') {
                    this.$confirm("即将删除文件夹, 是否删除?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            this.$http({
                                url: '/market/cOnlineSyncExcel/delFolder',
                                method: "post",
                                headers: {
                                    "Content-Type": "application/json",
                                },
                                data: {
                                    id: this.nowFolder.id,
                                },
                            }).then((res) => {
                                if (res.data.desc == 'success') {
                                    this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                    console.log(res);
                                    this.tooltit = '在线文档-文件管理'
                                    this.nowFolder = {}
                                    this.getTreeData();
                                    this.getList({}, 1);
                                } else {
                                    this.$message({
                                        message: red.data.desc,
                                        type: 'error'
                                    });
                                }

                            });
                        })
                        .catch(() => { });
                } else {
                    this.$message({
                        message: "文件夹中存在子文件夹,禁止删除！",
                        type: "error",
                    });
                }

            }
        },
        uploadBack(e) {
            this.form = {};
            this.getList({}, 1);
            this.addNewStatus = false
        },
        onReady(editor) {
            console.log('[ editor ] >', editor)
        },
        currentPage(e) {
            console.log(e);
            let list = e.filter((item, index) =>
                item.fileName.includes(this.searchData)
            )
            this.firstTable.data = list.filter((item, index) =>
                index < this.page * this.limit && index >= this.limit * (this.page - 1)
            )
        },
        changeNum(e) {
            this.page = e;
            this.currentPage(this.dataList)
        },
        processWoNo() {
            console.log(this.woNo);
            var _this = this;
            this.$http({
                url: '/market/cOnlineSyncExcel/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 {
                    // moveToEdit(e)
                    // _this.$message({
                    //     message: '请填写完毕后点击“保存”按钮',
                    //     type: 'success'
                    // });
                    // var id = res.data.desc;
                    // //放入id，切换到excel模式
                    // document.getElementById('excelId').setAttribute("value", id);
                    // _this.showExcel = true;
                    // console.log(_this.showExcel);
                }
            });
            this.$http({
                url: '/market/cOnlineSyncExcel/getExcleInfoByOaId',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    id: _this.woNo,
                },
            }).then((res) => {
                this.moveToEdit(res.data.body)
            });
        },
        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/cOnlineSyncExcel/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) {
            console.log(v);
            if (v == 1) {
                this.oaType = 1;
                this.processExcelShare(this.shareType);
            } else if (v == 2) {
                this.oaType = 0;
                this.processExcelShare(this.shareType);
            }
            this.oaVisible = false;
        },
        //打开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) => {
                    console.log(o);
                    deptList.push(o.key);
                });
            }
            if (shareType == 1) {
                _this.shareType = 1;
            }
            console.log(deptList);
            console.log('oa:' + this.oaType);
            console.log('share:' + shareType);

            _this.$http({
                url: '/market/cOnlineSyncExcel/reShare',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    id: _this.excelId,
                    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
        moveToEdit(e) {
            this.officetitle = e.fileName
            let _this = this;
            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/edit", {
                id: e.id,
                edit: true,
                userId: JSON.parse(window.sessionStorage.userInfo).loginNo,
                userName: JSON.parse(window.sessionStorage.userInfo).loginName
            }, function (res) {
                let { docType, fileType, id, fileName, downloadUrl, userId, userName, configCallback, api } = res.body
                _this.src = api;
                let config = {
                    documentType: docType,
                    height: '100%',
                    width: '100%',
                    document: {
                        fileType: fileType,
                        key: id,
                        title: _this.officetitle,
                        url: downloadUrl
                    },
                    editorConfig: {
                        user: {
                            id: userId,
                            name: userName
                        },
                        callbackUrl: decodeURIComponent(configCallback)

                    }
                }
                if (res.code == 0) {
                    _this.config = config;
                    _this.officeStatus = true;
                    console.log(this.config);
                }

            });
        },
        //新建excel
        addExcel() {
            var _this = this;
            _this.form.folderId = "";
            if (this.nowFolder.type == '4') {
                _this.form.folderId = this.nowFolder.functionCode;
            }
            this.$http({
                url: '/market/cOnlineSyncExcel/addExcel',
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: _this.form,
            }).then((res) => {
                console.log(res);
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: 'error'
                    });
                } else {
                    _this.page = 1;
                    _this.$message.success('新建成功')
                    // _this.excelId = res.data.desc
                    // _this.processExcelShare(1)
                    _this.form = {}
                    _this.getList({}, 1);
                    _this.addNewDiaStatus = false;
                    _this.addNewStatus = false;

                }
            });
        },
        //处理删除
        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/cOnlineSyncExcel/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/cOnlineSyncExcel/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.tableData.map((item) => {
                    item.fileType = item.id.split('.')[1]
                    // console.log(item.id.split('.')[1]);
                })
                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/cOnlineSyncExcel/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.pageSize = 1;
            this.$refs.pagination.internalCurrentPage = 1
            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/cOnlineSyncExcel/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
            );
        },
        processFullScreen() {
            this.excelFullScreen = !this.excelFullScreen;
        }
    },
    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();
        this.shareadmin = JSON.parse(window.sessionStorage.getItem('userInfo')).loginNoStr
    },
    created() {
        // window['fullScreen'] = (rp) => {
        //     this.processFullScreen(rp);
        // }
        // window['backToExcelList'] = (rp) => {
        //     this.closeExcel(rp);
        // }
        // //方法里写了字母含义
        // window['shareExcel'] = (a, b, c, d, e, f, g) => {
        //     this.shareExcel(a, b, c, d, e, f, g);
        // }
    },
    name: "index"
}
</script>

<style lang="scss" scoped>
::v-deep .treebox {
    height: 390px;
}

::v-deep .flex-transfer {
    height: 390px;
}

svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

#DocEditor {
    height: 100%;
}

::v-deep .el-dialog--center {
    height: 100%;
    margin-top: 10px !important;
}

::v-deep .el-dialog__body {
    height: 100%;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

#upload-file {
    position: absolute;
    width: 70px;
    height: 40px;
    opacity: 0;
}

.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;
}

.el-button {
    height: 36px;
}

.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>