处理文档基本信息，加入目录功能。

在线编辑弹出窗口处理。

src/components/FileUpload/index.vue

@@ -55,12 +55,12 @@ export default {
     // 大小限制(MB)
     fileSize: {
       type: Number,
-      default: 5,
+      default: 1024,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc","docx", "xls","xlsx", "ppt", "txt", "pdf"],
+      default: () => ["doc","docx", "xls","xlsx", "ppt", "txt", "pdf","gz"],
     },
     // 是否显示提示
     isShowTip: {
@@ -211,4 +211,4 @@ export default {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
-</style>
+</style>

src/router/index.js

@@ -29,17 +29,14 @@ import Layout from '@/layout'
  */
 
 // 公共路由
-export const constantRoutes = [
-  {
+export const constantRoutes = [{
     path: '/redirect',
     component: Layout,
     hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
+    children: [{
+      path: '/redirect/:path(.*)',
+      component: () => import('@/views/redirect')
+    }]
   },
   {
     path: '/login',
@@ -65,35 +62,37 @@ export const constantRoutes = [
     path: '',
     component: Layout,
     redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+    children: [{
+      path: 'index',
+      component: () => import('@/views/index'),
+      name: 'Index',
+      meta: {
+        title: '首页',
+        icon: 'dashboard',
+        affix: true
       }
-    ]
+    }]
   },
   {
     path: '/user',
     component: Layout,
     hidden: true,
     redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
+    children: [{
+      path: 'profile',
+      component: () => import('@/views/system/user/profile/index'),
+      name: 'Profile',
+      meta: {
+        title: '个人中心',
+        icon: 'user'
       }
-    ]
+    }]
   },
   {
     path: '/home',
     component: () => import('@/views1/HomeView.vue'),
     hidden: true,
-    children: [
-      {
+    children: [{
         path: "/home/page",
         component: () => import('@/views1/Page/PageView.vue')
       },
@@ -123,76 +122,95 @@ export const constantRoutes = [
 ]
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes = [
-  {
+export const dynamicRoutes = [{
     path: '/system/user-auth',
     component: Layout,
     hidden: true,
     permissions: ['system:user:edit'],
-    children: [
-      {
-        path: 'role/:userId(\\d+)',
-        component: () => import('@/views/system/user/authRole'),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
+    children: [{
+      path: 'role/:userId(\\d+)',
+      component: () => import('@/views/system/user/authRole'),
+      name: 'AuthRole',
+      meta: {
+        title: '分配角色',
+        activeMenu: '/system/user'
       }
-    ]
+    }]
   },
   {
     path: '/system/role-auth',
     component: Layout,
     hidden: true,
     permissions: ['system:role:edit'],
-    children: [
-      {
-        path: 'user/:roleId(\\d+)',
-        component: () => import('@/views/system/role/authUser'),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
+    children: [{
+      path: 'user/:roleId(\\d+)',
+      component: () => import('@/views/system/role/authUser'),
+      name: 'AuthUser',
+      meta: {
+        title: '分配用户',
+        activeMenu: '/system/role'
       }
-    ]
+    }]
   },
   {
     path: '/system/dict-data',
     component: Layout,
     hidden: true,
     permissions: ['system:dict:list'],
-    children: [
-      {
-        path: 'index/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
+    children: [{
+      path: 'index/:dictId(\\d+)',
+      component: () => import('@/views/system/dict/data'),
+      name: 'Data',
+      meta: {
+        title: '字典数据',
+        activeMenu: '/system/dict'
       }
-    ]
+    }]
   },
   {
     path: '/monitor/job-log',
     component: Layout,
     hidden: true,
     permissions: ['monitor:job:list'],
-    children: [
-      {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
+    children: [{
+      path: 'index/:jobId(\\d+)',
+      component: () => import('@/views/monitor/job/log'),
+      name: 'JobLog',
+      meta: {
+        title: '调度日志',
+        activeMenu: '/monitor/job'
       }
-    ]
+    }]
   },
   {
     path: '/tool/gen-edit',
     component: Layout,
     hidden: true,
     permissions: ['tool:gen:edit'],
-    children: [
-      {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+    children: [{
+      path: 'index/:tableId(\\d+)',
+      component: () => import('@/views/tool/gen/editTable'),
+      name: 'GenEdit',
+      meta: {
+        title: '修改生成配置',
+        activeMenu: '/tool/gen'
+      }
+    }]
+  },
+  {
+    path: '/doc/oo-edit',
+    component: Layout,
+    hidden: true,
+    permissions: ['tool:gen:edit'],
+    children: [{
+      path: 'index/:docId(\\d+)',
+      component: () => import('@/views/doc/oo/edit'),
+      name: 'OoEdit',
+      meta: {
+        title: '文件在线编辑',
+        activeMenu: '/doc/info'
       }
-    ]
+    }]
   }
 ]
 
@@ -204,6 +222,8 @@ Router.prototype.push = function push(location) {
 
 export default new Router({
   mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 }),
+  scrollBehavior: () => ({
+    y: 0
+  }),
   routes: constantRoutes
 })

src/views/doc/groupUser/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  import vabOnlyOffice from '@/views/tool/onlyoffice.vue'
+  import vabOnlyOffice from '@/views/doc/oo/onlyoffice.vue'
 
   export default {
     name: 'App',

src/views/doc/info/index.vue

@@ -1,80 +1,92 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="文档名称" prop="docName">
-        <el-input v-model="queryParams.docName" placeholder="请输入文档名称" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="文档级别" prop="docLevel">
-        <el-input v-model="queryParams.docLevel" placeholder="请输入文档级别" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="文档年份" prop="createYear">
-        <el-input v-model="queryParams.createYear" placeholder="请输入文档创建年份" clearable
-          @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          v-hasPermi="['doc:info:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-          v-hasPermi="['doc:info:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-          v-hasPermi="['doc:info:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-          v-hasPermi="['doc:info:export']">导出</el-button>
+    <el-row :gutter="20">
+      <!--目录数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-tree :data="dirList" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
+            default-expand-all highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <!--文档数据-->
+      <el-col :span="16" :xs=24>
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="文档名称" prop="docName">
+            <el-input v-model="queryParams.docName" placeholder="请输入文档名称" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="文档级别" prop="docLevel">
+            <el-input v-model="queryParams.docLevel" placeholder="请输入文档级别" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="文档年份" prop="createYear">
+            <el-input v-model="queryParams.createYear" placeholder="请输入文档创建年份" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['doc:info:add']">上传</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['doc:info:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['doc:info:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['doc:info:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="文档ID" align="center" prop="docId" />
-      <el-table-column label="文档名称" align="center" prop="docName" />
-      <el-table-column label="文档级别" align="center" prop="docLevel" />
-      <el-table-column label="文档年份" align="center" prop="createYear" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['doc:info:edit']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            v-hasPermi="['doc:info:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="文档ID" align="center" prop="docId" />
+          <el-table-column label="文档名称" align="center" prop="docName" />
+          <el-table-column label="文档级别" align="center" prop="docLevel" />
+          <el-table-column label="文档年份" align="center" prop="createYear" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleEdit(scope.row)">在线编辑</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['doc:info:edit']">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                v-hasPermi="['doc:info:remove']">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
 
+      </el-col>
+    </el-row>
     <!-- 添加或修改文档基本信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="文档名称" prop="docName">
-          <el-input v-model="form.docName" placeholder="请输入文档名称" />
-        </el-form-item>
-        <el-form-item label="文档描述">
-          <editor v-model="form.docDesc" :min-height="192" />
-        </el-form-item>
-        <el-form-item label="文档存储路径" prop="docPath">
+        <el-form-item label="" prop="docPath">
           <!-- <el-input v-model="form.docPath" placeholder="请输入文档路径" /> -->
           <file-upload v-model="form.docPath" />
         </el-form-item>
-        <el-form-item label="文档级别" prop="docLevel">
-          <el-input v-model="form.docLevel" placeholder="请输入文档级别" />
+        <el-form-item label="文件名称" prop="docName">
+          <el-input v-model="form.docName" placeholder="请输入文档名称" />
+        </el-form-item>
+        <el-form-item label="文件描述">
+          <el-input v-model="form.docDesc" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="文档年份" prop="createYear">
-          <el-input v-model="form.createYear" placeholder="请输入文档创建年份" />
+        <el-form-item label="文件级别" prop="docLevel">
+          <el-input v-model="form.docLevel" placeholder="请输入文档级别" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -82,9 +94,6 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <div v-if='show' class='qualityManual-container-office'>
-      <vab-only-office :option='option' />
-    </div>
   </div>
 </template>
 
@@ -96,14 +105,23 @@
     addInfo,
     updateInfo
   } from "@/api/doc/info";
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    personalList
+  } from "@/api/doc/dir";
 
-  import vabOnlyOffice from '@/views/tool/onlyoffice.vue';
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
   export default {
+    name: "Info",
     components: {
-      vabOnlyOffice
+      Treeselect
     },
-    name: "Info",
     data() {
       return {
         // 遮罩层
@@ -120,6 +138,8 @@
         total: 0,
         // 文档基本信息表格数据
         infoList: [],
+        dirId: undefined, //目录ID
+        dirList: undefined,
         // 弹出层标题
         title: "",
         // 是否显示弹出层
@@ -134,6 +154,11 @@
         },
         // 表单参数
         form: {},
+        defaultProps: {
+          children: "children",
+          label: "dirName",
+          id: "dirId"
+        },
         // 表单校验
         rules: {
           docName: [{
@@ -146,44 +171,37 @@
             message: "文档创建年份;文档创建年份，分表用不能为空",
             trigger: "blur"
           }],
-        },
-        option: {
-          key: '', //key 使用文档ID+年份
-          url: '', //在线文档地址
-          isEdit: '', //是否允许编辑
-          fileType: '', //文件扩展名
-          title: '', //文件标题
-          user: {
-            id: null, //用户ID
-            name: '' //用户姓名
-          },
-          editUrl: '' //回调地址
-        },
-        show: true //是否显示
+        }
       }
     },
     created() {
       this.getList();
+      this.dirTree();
     },
     methods: {
+      //目录树
+      dirTree() {
+        personalList().then(response => {
+          this.dirId = response.data[0].dirId;
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+        });
+      },
+      // 节点单击事件
+      handleNodeClick(data) {
+        this.queryParams.dirId = data.dirId;
+        this.dirId = data.dirId;
+        this.handleQuery();
+      },
+      //预览
       handlePreview(row) {
-        console.log(row);
-        //获取当前登录用户名：this.$store.state.user.name
-        //获取当前登录用户ID：this.$store.state.user.uid
-        //获取当前登录用户昵称：this.$store.state.user.uname
-        this.show = true;
-        // getAction('/file/selectById', { id: this.id }).then(res => {
-        this.option.isEdit = true;
-        this.option.url = row.docPath;
-        //'http://192.168.1.26:9300/statics/2023/04/03/产品研发会议纪要20230314_20230403170635A001.doc';
-        this.option.title = row.docName; //'测试word';
-        this.option.fileType = row.docType;
-
-        this.option.user = {
-          id: this.$store.state.user.uid,
-          name: this.$store.state.user.uname
-        };
-        this.option.editUrl = 'http://192.168.1.26:8080/doc/only-office/callback?id='+row.docId+"&year="+row.createYear
+        row.isEdit = false;
+        this.$tab.openPage("文件[" + row.docName + "]预览", '/doc/oo-edit/index/' + row.docId, row);
+      },
+      //在线编辑
+      handleEdit(row) {
+        row.isEdit = true;
+        this.$tab.openPage("文件[" + row.docName + "]在线编辑", '/doc/oo-edit/index/' + row.docId, row);
       },
       /** 查询文档基本信息列表 */
       getList() {
@@ -203,6 +221,7 @@
       reset() {
         this.form = {
           docId: null,
+          dirId: this.dirId,
           docName: null,
           docType: null,
           docSize: null,

src/views/doc/oo/edit.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if='show' class='qualityManual-container-office'>
+    <vab-only-office :option='option' />
+  </div>
+</template>
+
+<script>
+  import vabOnlyOffice from '@/views/doc/oo/onlyoffice.vue'
+
+  export default {
+    name: 'OoEdit',
+    components: {
+      vabOnlyOffice
+    },
+    data() {
+      return {
+        //参考vabOnlyOffice组件参数配置
+        option: {
+          key: '',
+          url: '', //在线文档地址
+          isEdit: '', //是否允许编辑
+          fileType: '', //文件扩展名
+          title: '', //文件标题
+          user: {
+            id: null, //用户ID
+            name: '' //用户姓名
+          },
+          editUrl: '' //回调地址
+        },
+        show: true //是否显示
+      }
+    },
+    created() {
+      this.getFile();
+    },
+    methods: {
+      getFile() {
+        //获取当前登录用户名：this.$store.state.user.name
+        //获取当前登录用户ID：this.$store.state.user.uid
+        //获取当前登录用户昵称：this.$store.state.user.uname
+        let row = this.$route.query;
+        let isEdit = row.isEdit == 'true';
+        this.show = true;
+        // getAction('/file/selectById', { id: this.id }).then(res => {
+        this.option.isEdit = isEdit;
+        this.option.url = row.docPath;
+        //'http://192.168.1.26:9300/statics/2023/04/03/产品研发会议纪要20230314_20230403170635A001.doc';
+        this.option.title = row.docName; //'测试word';
+        this.option.fileType = row.docType;
+
+        this.option.user = {
+          id: this.$store.state.user.uid,
+          name: this.$store.state.user.uname
+        };
+        this.option.editUrl = 'http://192.168.1.26:8080/doc/only-office/callback?id=' + row.docId +
+          "&year=" + row.createYear + "&name=" + this.$store.state.user.name;
+      },
+      close() {
+        this.show = false
+      }
+    }
+  }
+</script>
+
+<style>
+  html,
+  body {
+    height: '900px';
+  }
+
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    height: '900px';
+
+  }
+
+  .qualityManual-container {
+    padding: 0 !important;
+    height: '900px';
+  }
+
+  .qualityManual-container-office {
+    width: 100%;
+    height: '900px';
+  }
+</style>