浏览代码

分组文档的操作完成,预览的跳转初步搭建

yxc 2 年之前
父节点
当前提交
2cbf628789

+ 8 - 0
src/router/index.js

@@ -112,6 +112,14 @@ export const constantRoutes = [{
           path: 'Storage',
           component: () => import('@/views1/File/Storage/StorageView.vue'),
         },
+        {
+          path: 'Sto/doc/:groupId(\\d+)',
+          component: () => import('@/views1/File/Storage/StoView.vue'),
+        },
+        {
+          path: 'individual/pre/user/:docId(\\d+)',
+          component: () => import('@/views1/File/Individual/Pre/PreView.vue'),
+        },
       ]
       },
       {

+ 3 - 1
src/views1/File/Individual/IndividualView.vue

@@ -191,6 +191,7 @@
                 prop="createYear"
                 width="90"
               />
+              <el-table-column label="文件类型" align="center" prop="docType" />
               <el-table-column
                 label="标签"
                 align="center"
@@ -650,9 +651,10 @@ export default {
       row.isEdit = false;
       this.$tab.openPage(
         "文件[" + row.docName + "]预览",
-        "/doc/oo-edit/index/" + row.docId,
+        "/home/file/individual/Pre/user/" + row.docId,
         row
       );
+      // console.log(this.form.docType);
     },
     //在线编辑
     handleEdit(row) {

+ 109 - 0
src/views1/File/Individual/Pre/PreView.vue

@@ -0,0 +1,109 @@
+<template>
+<div class="containe">
+  <div v-if='show' class='qualityManual-container-office'>
+    <vab-only-office :option='option' />
+  </div>
+  <el-button type="primary" plain icon="el-icon-arrow-left" size="mini" @click="handleClose" class="fh">返回</el-button>
+</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: {
+        // 返回按钮
+        handleClose() {
+        const obj = {
+          path: "/home/file/individual"
+        };
+        this.$tab.closeOpenPage(obj);
+      },
+
+      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';
+  }
+  .fh{
+    position: absolute;
+    right: 1%;
+    top: 8%;
+    background: #2E8AECFF !important;
+    color: #fff !important;
+    border: none;
+  }
+</style>

+ 864 - 0
src/views1/File/Storage/StoView.vue

@@ -0,0 +1,864 @@
+<template>
+    <div class="containe">
+      <div class="header">
+        <span>文档管理</span>
+        <img src="../../../assets/img/chevron-down.png" alt="" />
+        <img src="../../../assets/img/slash.png" alt="" />
+        <span>分组文档</span>
+        <img src="../../../assets/img/chevron-down.png" alt="" />
+        <img src="../../../assets/img/slash.png" alt="" />
+        <span class="top1">子分组文档</span>
+        <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
+        <img src="../../../assets/img/slash.png" alt="" />
+      </div>
+      <div class="title">分组文档</div>
+      <div class="main">
+        <div class="app-container">
+          <el-row :gutter="20">
+            <!--部门数据-->
+            <el-col :span="4" :xs="24" class="main-left">
+              <div class="head-top">部门结构</div>
+              <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>
+            <!--用户数据-->
+            <el-col :span="20" :xs="24" class="main-right"> 
+              <p>文档列表</p>
+              <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px" class="main-right-form">
+          <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="createYear">
+            <el-input v-model="queryParams.createYear" placeholder="请输入文件创建年份" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="标签" prop="params">
+                <el-select
+                  v-model="queryParams.params.tagId"
+                  placeholder="请输入标签名称"
+                  @change="handleQuery"
+                  style="width: 180px"
+                >
+                  <el-option
+                    v-for="item in tags"
+                    :key="item.tagId"
+                    :label="item.tagName"
+                    :value="item.tagId"
+                  />
+                </el-select>
+              </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" class="cz">重置</el-button>
+          </el-form-item>
+        </el-form>
+    
+                <el-row
+                  :gutter="10"
+                  class="mb8"
+                  style="
+                    margin-left: calc(100vw * (20 / 1920));
+                    padding-right: calc(100vw * (20 / 1920));
+                  "
+                >
+                  <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasRole="['group.manager']">上传</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" class="main-right-table"
+                >
+                <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="文件名称" align="center" prop="docName" />
+          <el-table-column label="文件大小" align="center" prop="docSize" :formatter="fileSizeData" />
+          <el-table-column label="修改时间" align="center" prop="updateTime" />
+          <el-table-column label="文件年份" align="center" prop="createYear" />
+          <el-table-column label="文件类型" align="center" prop="docType" />
+          <el-table-column label="标签" align="center" prop="tagName" />
+          <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-dropdown size="mini">
+                    <el-button
+                      size="mini"
+                      type="text"
+                      icon="el-icon-d-arrow-right"
+                      >更多</el-button
+                    >
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item
+                        icon="el-icon-download"
+                        @click.native="handleDownload(scope.row)"
+                        >下载</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-view"
+                        @click.native="handleEdit(scope.row)"
+                        v-hasRole="['group.manager']"
+                        >在线编辑</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-edit"
+                        @click.native="handleUpdate(scope.row)"
+                        v-hasRole="['group.manager']"
+                        >修改</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-delete"
+                        @click.native="handleDelete(scope.row)"
+                        v-hasRole="['group.manager']"
+                        >删除</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </el-dropdown>
+            </template>
+          </el-table-column>
+                </el-table>
+    
+                <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 custom-class="el-dialog5">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <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="dirId">
+          <treeselect v-model="form.dirId" :options="dirList" :normalizer="normalizer" placeholder="请选择文件目录" />
+        </el-form-item>
+        <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="选择标签(最多5个)" prop="tagName" color="red">
+              <el-tag
+                :key="tag"
+                v-for="tag in dynamicTags"
+                closable
+                :disable-transitions="false"
+                @close="handleClose(tag)"
+              >
+                {{ tag }}
+              </el-tag>
+              <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+                maxlength="5"
+                placeholder="最多输入五个字"
+              >
+              </el-input>
+              <el-button
+                v-else
+                class="button-new-tag"
+                size="small"
+                @click="showInput"
+                >添加标签</el-button
+              >
+            </el-form-item>
+            <el-form-item label="文件标签" color="red">
+              <el-tag
+                v-for="tag in tags"
+                :key="tag.tagName"
+                :type="tag.type"
+                @click="handleInputConfirm1(tag)"
+              >
+                {{ tag.tagName }}
+              </el-tag>
+            </el-form-item>
+            <el-form-item label="文件描述">
+              <el-input
+                v-model="form.docDesc"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+        </div>
+      </div>
+    </div>
+  </template>
+    
+    <script>
+import "@/styles1/element-ui1.scss";
+import { listTag } from "@/api/doc/tag.js";
+
+ import {
+    listInfo,
+    getInfo,
+    delInfo,
+    addInfo,
+    updateInfo
+  } from "@/api/doc/info";
+  import {
+    groupList
+  } from "@/api/doc/dir";
+  import {
+    listLevel
+  } from "@/api/doc/level";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "Info",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+              //标签列表
+      tags: [
+        // { name: '十四大', id: 0 },
+        // { name: '领导讲话', id: 1 },
+        // { name: '会议精神', id: 2 },
+        // { name: '党章', id: 3 },
+        // { name: '212专案', id: 4 }
+      ],
+
+      //选择标签
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: "",
+
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 文件基本信息表格数据
+        infoList: [],
+        //目录ID
+        dirId: undefined,
+        //目录数据
+        dirList: undefined,
+        //文件等级数据
+        levelOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        groupId: undefined,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          docName: null,
+          docLevel: null,
+          createYear: null,
+          params: {
+          tagId: null,
+        },
+        },
+        // 表单参数
+        form: {},
+        defaultProps: {
+          children: "children",
+          label: "dirName",
+          id: "dirId"
+        },
+        // 表单校验
+        rules: {
+          docName: [{
+            required: true,
+            message: "文件名称不能为空",
+            trigger: "blur"
+          }],
+          dirId: [{
+            required: true,
+            message: "文件目录不能为空",
+            trigger: "blur"
+          }],
+          docLevel: [{
+            required: true,
+            message: "文件级别不能为空",
+            trigger: "blur"
+          }],
+        }
+      }
+    },
+    created() {
+      const groupId = this.$route.params && this.$route.params.groupId;
+      if (groupId) {
+        this.groupId = groupId;
+        this.dirTree();
+      }
+    },
+    watch: {
+      "form.docPath": function(path, old) {
+        if (path && path.lastIndexOf("/") > -1) {
+          let name = path.slice(path.lastIndexOf("/") + 1);
+          this.form.docName = name.split("_")[0];
+        }
+      }
+    },
+    methods: {
+         //选择标签关闭
+    handleClose(tag) {
+      this.form.tagList.map((i, index) => {
+        if (tag == i.tagName) {
+          this.form.tagList.splice(index, 1);
+        }
+      });
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+
+    showInput() {
+      if(this.dynamicTags.length>=5){
+        this.inputVisible = false;
+        alert("标签数不允许超过五个")
+      }else{
+        this.inputVisible = true;
+        this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+      }
+
+    },
+    //固定的标签
+    handleInputConfirm1(tag) {
+      if(this.dynamicTags.indexOf(tag.tagName)==-1){
+        this.dynamicTags.push(
+        tag.tagName
+      );
+      this.form.tagList.push({
+        tagId: tag.tagId,
+        tagName: tag.tagName,
+      });
+      }
+
+      if(this.dynamicTags.length>5){
+        alert("标签数不允许超过五个")
+        this.dynamicTags.pop()
+      };
+    
+    },
+    //自定义标签
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      // if (inputValue) {
+      //   this.dynamicTags.push(inputValue);
+      // }
+      // this.inputVisible = false;
+      // this.inputValue = "";
+      // this.form.tagList.push({
+      //   tagName:inputValue,
+      // });
+      //查询输入的标签在固定标签里是否存在
+      var Newtags = this.tags.find((value) => value.tagName == inputValue);
+      // console.log(a);
+    if(this.dynamicTags.indexOf(inputValue)!=-1){
+      this.dynamicTags.pop()
+      this.form.tagList.pop()
+    }
+
+
+
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+      if (Newtags) {
+        this.form.tagList.push({
+          tagId: Newtags.tagId,
+          tagName: Newtags.tagName,
+        });
+      } else {
+        this.form.tagList.push({
+          tagName: inputValue,
+        });
+      }
+      // console.log(this.form);
+      if(this.dynamicTags.length>5){
+        alert("标签数不允许超过五个")
+        this.dynamicTags.pop()
+      };
+    },
+
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children
+        };
+      },
+      // 节点单击事件
+      handleNodeClick(data) {
+        this.dirId = data.dirId;
+        this.queryParams.dirId = this.dirId;
+        this.queryParams.searchValue = this.spaceId;
+        this.handleQuery();
+      },
+      //分享
+      handleShare(row) {
+        this.$router.push("/doc/share-user/user/" + row.docId);
+      },
+      /**下载按钮操作*/
+      handleDownload(row) {
+        location.href = row.docPath;
+      },
+      //预览
+      handlePreview(row) {
+        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);
+      },
+      //先获取左边目录树,拿到目录ID和spaceId才能查询
+      dirTree() {
+        this.loading = true;
+        groupList(this.groupId).then(response => {
+          this.dirId = response.data[0].dirId;
+          this.spaceId = response.data[0].spaceId;
+          this.dirList = this.handleTree(response.data, "dirId");
+
+          this.queryParams.dirId = this.dirId;
+          this.queryParams.searchValue = this.spaceId;
+          this.getList();
+          //获取文件级别数据
+          listLevel().then(response => {
+            this.levelOptions = response.rows;
+          });
+          this.loading = false;
+
+             //标签数据
+         listTag().then((res) => {
+          this.tags = res.rows;
+        });
+        });    
+      },
+      /** 查询文件基本信息列表 */
+      getList() {
+        this.loading = true;
+        listInfo(this.queryParams).then(response => {
+          this.infoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          docId: null,
+          dirId: this.dirId,
+          docName: null,
+          docType: null,
+          docSize: null,
+          classifyId: null,
+          docDesc: null,
+          docPath: null,
+          docLevel: null,
+          allowEdit: null,
+          docOf: null,
+          owner: null,
+          createYear: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null,
+          searchValue: this.spaceId,
+          tagList: [],
+        };
+        this.resetForm("form");
+        this.dynamicTags=[]
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.queryParams.dirId = this.dirId;
+        this.queryParams.searchValue = this.spaceId;
+        this.queryParams.params.tagId = null;
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.docId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加文件基本信息";
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const docId = row.docId || this.ids
+        getInfo(docId, row.createYear).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改文件基本信息";
+          this.dynamicTags = this.form.tagList.map(item=>item.tagName);
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.docId != null) {
+              updateInfo(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addInfo(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const docIds = row.docId || this.ids;
+        this.$modal.confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项?').then(function() {
+          return delInfo(docIds);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('doc/info/export', {
+          ...this.queryParams
+        }, `info_${new Date().getTime()}.xlsx`)
+      },
+      /**格式化文件大小数据*/
+      fileSizeData(row, col, value) {
+        const KB = 1;
+        const MB = KB * 1024;
+        const GB = MB * 1024;
+        if (value < MB) {
+          return `${(value / KB).toFixed(2)} KB`;
+        } else if (value < GB) {
+          return `${(value / MB).toFixed(2)} MB`;
+        } else {
+          return `${(value / GB).toFixed(2)} GB`;
+        }
+      },
+      /**处理文档级别数据*/
+      fileLevelData(row, col, value) {
+        try {
+          const obj = this.levelOptions.find(item => item.levelId == value);
+          return obj.levelName;
+        } catch (e) {}
+      },
+      /**根据文件级别,设置是否显示*/
+      checkLevel(row, role) {
+        try {
+          const obj = this.levelOptions.find(item => item.levelId == row.docLevel);
+          if (obj.levelRole.indexOf(role) != -1) {
+            return true;
+          } else {
+            return false;
+          }
+        } catch (e) {}
+      }
+    }
+  };
+  </script>
+    
+    <style scoped lang='scss'>
+  .containe {
+    color: #7ea4c8;
+    font-size: 0.14rem;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    padding-left: calc(100vw * (20 / 1920));
+    .header {
+    //   width: calc(100vw * (300 / 1920));
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      display: flex;
+      align-items: center;
+      img {
+        width: calc(100vw * (16 / 1920));
+        height: calc(100vh * (16 / 1080));
+        border: 1px dashed grey;
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+      .top1 {
+        color: #2e8aecff;
+      }
+    }
+    .title {
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      color: #ffffffff;
+      font-size: 0.16rem;
+      font-weight: bold;
+      line-height: calc(100vh * (22 / 1080));
+    }
+    .main {
+      width: calc(100vw * (1876 / 1920));
+      height: calc(100vh * (880 / 1080));
+      .app-container {
+        width: calc(100vw * (1876 / 1920));
+        height: calc(100vh * (880 / 1080));
+        padding: 0;
+      }
+      .main-left {
+        width: calc(100vw * (260 / 1920));
+        height: calc(100vh * (880 / 1080));
+        margin-right: calc(100vw * (20 / 1920));
+        margin-left: calc(100vw * (10 / 1920));
+        background: url(../../../assets/img/Group-609.png);
+        background-size: calc(100vw * (260 / 1920)) calc(100vh * (880 / 1080));
+        .head-top {
+          color: #ffffffff;
+          font-size: 0.2rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (15 / 1080));
+        }
+      }
+      .el-breadcrumb{
+          width: calc(100vw * (1600 / 1920));
+          height: calc(100vh * (44 / 1080));
+          margin-left: calc(100vw * (290 / 1920));
+          margin-top: calc(100vh * (10 / 1080));
+          margin-bottom: calc(100vh * (20 / 1080));
+          background: #0F143CFF;
+          display: flex;
+          align-items: center;
+          padding-left: calc(100vw * (20 / 1920));
+  
+      }
+      .main-right {
+        width: calc(100vw * (1600 / 1920));
+        height: calc(100vh * (880 / 1080));
+        background: url(../../../assets/img/Group-610.png);
+        background-size: calc(100vw * (1600 / 1920)) calc(100vh * (880 / 1080));
+        p {
+          color: #ffffffff;
+          font-size: 0.16rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (20 / 1080));
+          padding-bottom: calc(100vh * (20 / 1080));
+        }
+        //重置按钮
+        .cz{
+            color: #2e8aecff;
+        }
+        .main-right-form {
+          width: calc(100vw * (1540 / 1920));
+          height: calc(100vh * (80 / 1080));
+          margin-top: calc(100vh * (20 / 1080));
+          margin-left: calc(100vw * (20 / 1920));
+        }
+        .main-right-table {
+          width: calc(100vw * (1540 / 1920));
+          height: calc(100vh * (580 / 1080));
+          margin-left: calc(100vw * (20 / 1920));
+          background: transparent;
+        }
+       //表格底部
+      .pagination-container {
+        width: calc(100vw * (1540 / 1920));
+        height: calc(100vh * (50 / 1080));
+        background: transparent;
+        padding: 0 !important;
+        margin: 0;
+        margin-left: calc(100vw * (20 / 1920));
+        margin-top: calc(100vh * (10 / 1080));
+      }
+      }
+    }
+  }
+ //左边下拉菜单样式
+::v-deep .el-tree {
+  width: calc(100vw * (200 / 1920));
+  margin-top: calc(100vh * (30 / 1080));
+  background: transparent;
+  color: #7ea4c8ff;
+}
+ //左边下拉菜单点击样式
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background: #293667FF;
+}
+::v-deep .el-tree-node {
+  width: calc(100vw * (232 / 1920));
+}
+//悬停时的样式
+::v-deep .el-tree-node__content:hover {
+  background: #293667ff;
+}
+//右边顶部字体样式
+::v-deep .el-form-item__label {
+  color: #2e8aecff;
+}
+//右边顶部搜索框样式
+::v-deep .el-input__inner {
+  background-color: transparent;
+  border: 1px solid #01d1ffff;
+  color: #ffffffcc;
+}
+::v-deep .el-form-item--small .el-form-item__content {
+  width: calc(100vw * (220 / 1920));
+}
+//右边顶部标签搜索
+::v-deep .el-select > .el-input {
+    width: calc(100vw * (180 / 1920));
+}
+//右边表格线条隐藏
+::v-deep .el-table::before {
+  height: 0;
+}
+//table样式
+::v-deep .el-table th {
+  background: #016c9aa6;
+  color: #2e8aec;
+}
+::v-deep .el-table tr {
+  background: transparent;
+  color: #7EA4C8FF;
+}
+::v-deep .el-table tbody tr:hover > td {
+  background-color: #016c9a78 !important;
+}
+::v-deep .el-table td.el-table__cell {
+  border-bottom: 1px solid #006c9aff;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid #006c9aff;
+}
+//搜索刷新按钮颜色
+::v-deep .el-button.is-circle {
+  background: #006c9aff;
+  color: white;
+}
+//按钮的样式
+::v-deep .el-button--primary.is-plain {
+  background-color: #002a5cff;
+  border: none;
+  color: #2e8aec;
+}
+//新增/修改弹窗顶部样式
+::v-deep .el-dialog__title {
+  color: white;
+}
+//上传弹窗位置高度
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 1vh !important;
+}
+//弹窗关闭按钮
+::v-deep .el-dialog__headerbtn {
+  top: calc(100vh * (45 / 1080));
+  right: calc(100vw * (20 / 1920));
+  font-size: 20px;
+}
+//建议框样式
+::v-deep .el-textarea__inner {
+  background: transparent;
+  resize: none;
+}
+//弹窗底部按钮的位置
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+//弹窗样式
+::v-deep .el-dialog5 {
+  width: calc(100vw * (800 / 1920)) !important;
+  height: calc(100vh * (1050 / 1080)) !important;
+  background: url(../../../assets/img/Group-585.png);
+  background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
+  //弹窗中间内容
+  .el-dialog__body {
+    // width: calc(100vw * (620 / 1920)) ;
+    height: calc(100vh * (780 / 1080));
+    margin-top: calc(100vh * (50 / 1080));
+    margin-bottom: calc(100vh * (20 / 1080));
+    padding-right: 50px;
+    overflow: auto;
+    // background: salmon;
+  }
+  .el-dialog__header {
+    padding-bottom: 0;
+  }
+  .el-upload__tip {
+    font-size: 12px;
+    color: #006c9aff;
+    margin-top: 0px;
+  }
+  .el-upload-list__item {
+    margin: 0;
+  }
+
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+}
+//重置按钮
+// ::v-deep .el-button + .el-button {
+//     color: #1890ff;
+// }
+  </style>
+    

+ 275 - 6
src/views1/File/Storage/StorageView.vue

@@ -1,11 +1,280 @@
 <template>
-<h1>分组文档</h1>
-</template>
+    <div class="containe">
+      <div class="header">
+        <span>文档管理</span>
+        <img src="../../../assets/img/chevron-down.png" alt="" />
+        <img src="../../../assets/img/slash.png" alt="" />
+        <span class="top1">分组文档</span>
+        <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
+        <img src="../../../assets/img/slash.png" alt="" />
+      </div>
+      <div class="title">分组文档</div>
+      <div class="main">
+        <h3>分组文档</h3>
+        <div class="main-main">
+    <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="groupName">
+        <el-input v-model="queryParams.groupName" 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>
 
-<script>
+    <el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="分组名称" align="center" prop="groupName" />
+      <el-table-column label="分组管理员" align="center" prop="groupManagerName" />
+      <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-user" @click="handleGroupDoc(scope.row)">分组文档</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-</script>
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
-<style scoped lang='scss'>
+  </div>
+         
+  
+          
+  
+        </div>
+      </div>
+    </div>
+  </template>
+      
+  <script>
+  import {
+    listGroup,
+    selectGroupDoc,
+    getGroup,
+    delGroup,
+    addGroup,
+    updateGroup
+  } from "@/api/doc/group";
 
-</style>
+  export default {
+    name: "GroupDocSelect",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 分组表格数据
+        groupList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          groupName: null,
+          groupManager: null,
+          groupManagerName: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {}
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询分组列表 */
+      getList() {
+        this.loading = true;
+        selectGroupDoc(this.queryParams).then(response => {
+          this.groupList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          groupId: null,
+          groupName: null,
+          groupManager: null,
+          groupManagerName: null,
+          creater: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.groupId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 分组空间按钮操作 */
+      handleGroupDoc(row) {
+        const groupId = row.groupId;
+        this.$router.push("/home/file/Sto/doc/" + groupId);
+      }
+    }
+  };
+ 
+  </script>
+      
+  <style scoped lang='scss'>
+  .containe {
+    color: #7ea4c8;
+    font-size: 0.14rem;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    padding-left: calc(100vw * (20 / 1920));
+    //顶部信息
+    .header {
+      width: calc(100vw * (300 / 1920));
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      display: flex;
+      align-items: center;
+      img {
+        width: calc(100vw * (16 / 1920));
+        height: calc(100vh * (16 / 1080));
+        border: 1px dashed grey;
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+      .top1 {
+        color: #2e8aecff;
+      }
+    }
+    //中间目录列表
+    .title {
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      color: #ffffffff;
+      font-size: 0.16rem;
+      font-weight: bold;
+      line-height: calc(100vh * (22 / 1080));
+    }
+    .main {
+      width: calc(100vw * (1876 / 1920));
+      height: calc(100vh * (880 / 1080));
+      background: url(../../../assets/img/Group-610.png);
+      background-size: calc(100vw * (1876 / 1920)) calc(100vh * (880 / 1080));
+      h3 {
+        font-size: 0.2rem;
+        color: #ffffffff;
+        padding-top: calc(100vh * (25 / 1080));
+        padding-bottom: calc(100vh * (10 / 1080));
+        padding-left: calc(100vw * (30 / 1920));
+      }
+      .main-main {
+        width: calc(100vw * (1822 / 1920));
+        height: calc(100vh * (790 / 1080));
+        margin-left: calc(100vw * (25 / 1920));
+        margin-top: calc(100vh * (15 / 1080));
+        // background: seagreen;
+      .app-container{
+        width: calc(100vw * (1822 / 1920));
+        height: calc(100vh * (790 / 1080));
+        padding: 0;
+        // background: seagreen;
+        .el-table {
+          width: calc(100vw * (1822 / 1920));
+          height: calc(100vh * (650 / 1080));
+          background: transparent;
+          overflow: auto;
+        }
+        
+      }
+      }
+    }
+  }
+  
+  //底部跳转
+  ::v-deep .pagination-container {
+    height: calc(100vh * (50 / 1080));
+    background: transparent;
+  }
+  ::v-deep .pagination-container .el-pagination {
+    bottom: 10px;
+  }
+  //table样式
+  ::v-deep .el-table th {
+    background: #016c9aa6;
+    color: #2e8aec;
+  }
+  ::v-deep .el-table tr {
+    background: transparent;
+  }
+  ::v-deep .el-table tbody tr:hover > td {
+    background-color: #016c9a78 !important;
+  }
+  ::v-deep .el-table td.el-table__cell {
+    border-bottom: 1px solid #006c9aff;
+  }
+  ::v-deep .el-table th.el-table__cell.is-leaf {
+    border-bottom: 1px solid #006c9aff;
+  }
+  ::v-deep .el-form-item__label {
+    color: #2e8aecff;
+  }
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: 1px solid #01d1ffff;
+    color: #006c9aff;
+  }
+  
+  //table底下白线消失处理
+  ::v-deep .el-table {
+    color: #ffffffff;
+  }
+  ::v-deep .el-table::before {
+    width: 0;
+  }
+  //重置按钮的样式
+  ::v-deep .el-button + .el-button {
+    color: #1890ff;
+}
+  </style>
+   
+    
+    
+  
+  
+  
+