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

<template>
    <div class="flex-count">
        <div class="flex-header-count">
            <el-popover placement="right-start" width="460" v-model="visible">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="文档名称">
                        <el-input v-model="form.fileName"></el-input>
                    </el-form-item>
                    <el-form-item label="文档类型">
                        <el-select v-model="form.docType" placeholder="请选择文档类型">
                            <el-option label="word" value="word"></el-option>
                            <el-option label="cell" value="cell"></el-option>
                            <el-option label="slide" value="slide"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div style="text-align: right; margin: 0">
                    <el-button type="primary" @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="clickNewSave">确定</el-button>
                </div>
                <el-button size="medium" slot="reference" icon="el-icon-circle-plus-outline">新建</el-button>
            </el-popover>
            <myUpload style="margin-left:20px ;" @uploadBack="uploadBack" :fileInfo="fileInfo"
                :fileList="fileInfo.fileList">
            </myUpload>
        </div>

        <fromList @changeNum="changeNum" :list="firstTable" @clickDemand="clickDemand" />
        <div>

            <el-dialog :modal="false" title="提示" :visible.sync="officeStatus" style="height:100% ;" width="100%"
                height="100%" center>
                <div id="DocEditor" v-if="officeStatus">
                    <onlyoffice-editor editorId="DocEditor" :src="src" :config="config" @ready="onReady" />
                </div>
            </el-dialog>


        </div>
    </div>
</template>

<script>
import fromList from '../../../../src/components/el-form.vue'
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import myUpload from '../../../components/upload'
import getConfig from '../../../config/dev'
export default {
    name: 'ExampleComponent',
    components: {
        DocumentEditor,
        myUpload,
        fromList
        // DocumentEditor

    },
    data() {
        return {
            dataList: [],
            page: 1,
            searchData: '',
            limit: 10,
            form: {},
            visible: false,
            saveStatus: false,
            officeStatus: false,
            src: '',
            config: {},
            fileInfo: {
                limit: 10,
                type: 'btn',
                typename: '导入',
                urlType: 'office',
                url: '/office/restfile/upload',
                fileList: []
            },
            firstTable: {
                height: '520',
                name: "first",
                titledata: [
                    {
                        label: "名称",
                        prop: "fileName",
                        width: 600,
                    },
                    {
                        label: "最后修改时间",
                        prop: "lastModifyTimeStr",
                        width: 400,
                    },
                    {
                        label: "文件大小",
                        prop: "fileSizeStr",
                        width: 400,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: (e, r, o) => {
                            }, // 自定义事件
                        },
                    ],
                },
            },
        }
    },
    mounted() {
        // this.getListEdit()
        this.getLists()
    },
    methods: {
        uploadBack(e) {
            this.form = {};
            this.getLists();
        },

        //新建在线编辑xxx
        clickNewSave() {
            let _this = this;
            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/create", { data: this.form }, function (res) {
                _this.page = 1;
                _this.$message.success('新建成功')
                _this.form = {}
                _this.getLists();
                _this.visible = false;


            });
            // this.saveStatus = true
            // this.$http({
            //     url: "/office/restfile/create",
            //     method: "post",
            //     type: 'office',
            //     headers: {
            //         "Content-Type": "application/json",
            //     },
            //     data: this.form
            // }).then((res) => {
            //     this.page = 1;
            //     this.$message.success('新建成功')
            //     this.form = {}
            //     this.getLists();
            //     this.visible = false;

            // });
        },
        //点击工单状态跳转需求流程显示页面
        clickDemand(e, res) {
            if (e == '名称') {
                this.getListEdit(res)
            }
        },

        async getListEdit(e) {
            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: fileName,
                        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);
                }


            });
            // await this.$http({
            //     url: "/office/restfile/edit",
            //     method: "post",
            //     type: 'office',
            //     headers: {
            //         "Content-Type": "application/json",
            //     },
            //     data: {
            //         id: e.id,
            //         edit: true,
            //         userId: JSON.parse(window.sessionStorage.userInfo).loginNo,
            //         userName: JSON.parse(window.sessionStorage.userInfo).loginName
            //     },
            // }).then((res) => {
            //     // console.log('[ res ] >', res)
                


            // });
        },
        getLists() {
            let _this = this;
            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/list", {}, function (res) {
                console.log(res);
                _this.dataList = res.body;
                _this.currentPage(res.body)
                _this.firstTable.pageData.total = res.body.length;


            });
            // this.$http({
            //     url: "/office/restfile/list",
            //     method: "post",
            //     type: 'office',
            //     headers: {
            //         "Content-Type": "application/json",
            //     },
            //     data: {

            //     },
            // }).then((res) => {
            //     this.dataList = res.data.body;
            //     this.currentPage(res.data.body)
            //     this.firstTable.pageData.total = res.data.body.length;


            // });
        },
        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)
        }
    },
};
</script>

<style lang="scss" scoped>
.flex-header-count {
    padding: 20px;
    display: flex;
}

.el-dropdown-link {
    margin: 20px;
    position: relative;
}

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

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

#DocEditor {
    height: 100%;
}

.flex-count {
    height: 100%;
    background: #fff;
}

::v-deep .el-pagination {
    background-color: #fff !important;
}
</style>