分组空间模块完成

src/router/index.js

@@ -137,8 +137,18 @@ export const constantRoutes = [{
         component: () => import('@/views1/File/Demand/DemandView.vue')
       },
       {
-        path: "/home/personal",
-        component: () => import('@/views1/Personal/PersonalView.vue')
+        path: "/home/personal/",
+        component: () => import('@/views1/Personal/PersonalView.vue'),
+        children: [
+          {
+          path: 'Storages',
+          component: () => import('@/views1/Personal/Storages/StoragesView.vue'),
+        },
+        {
+          path: 'GroupSpace/space/:groupId(\\d+)',
+          component: () => import('@/views1/Personal/Storages/GroupSpace.vue'),
+        }
+      ]
       },
       {
         path: "/home/personal/classify",

src/views1/File/Individual/IndividualView.vue

@@ -48,10 +48,18 @@
                 />
               </el-form-item>
               <el-form-item label="文件级别" prop="docLevel">
-                <el-select v-model="queryParams.docLevel" placeholder="请选择文件级别" @change="handleQuery">
-              <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
-                :value="item.levelId"></el-option>
-            </el-select>
+                <el-select
+                  v-model="queryParams.docLevel"
+                  placeholder="请选择文件级别"
+                  @change="handleQuery"
+                >
+                  <el-option
+                    v-for="item in levelOptions"
+                    :key="item.levelId"
+                    :label="item.levelName"
+                    :value="item.levelId"
+                  ></el-option>
+                </el-select>
               </el-form-item>
               <el-form-item label="文件年份" prop="createYear">
                 <el-input
@@ -62,19 +70,19 @@
                 />
               </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-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
@@ -154,7 +162,7 @@
               class="main-right-table"
               height="calc(100vh * (630 / 1080))"
               align="left"
-              :header-cell-style="{'text-align':'center'}"
+              :header-cell-style="{ 'text-align': 'center' }"
             >
               <el-table-column type="selection" width="55" align="center" />
               <el-table-column label="文件名称" align="left" prop="docName" />
@@ -183,14 +191,18 @@
                 prop="createYear"
                 width="90"
               />
-              <el-table-column label="标签" align="center" prop="tagName" width="250">
+              <el-table-column
+                label="标签"
+                align="center"
+                prop="tagName"
+                width="250"
+              >
                 <template slot-scope="scope">
-              <div v-if="scope.row.tagList!=[]">
-                <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
-                  {{item.tagName}}
-                </el-tag>
-              </div>
-               
+                  <div v-if="scope.row.tagList != []">
+                    <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
+                      {{ item.tagName }}
+                    </el-tag>
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column
@@ -205,18 +217,50 @@
                     icon="el-icon-view"
                     @click="handlePreview(scope.row)"
                     v-if="checkLevel(scope.row, 'view')"
-                    >预览</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-view" @click.native="handleShare(scope.row)" v-if="checkLevel(scope.row, 'share')">分享</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-view" @click.native="handleDownload(scope.row)" v-if="checkLevel(scope.row, 'download')">下载</el-dropdown-item>
-                  <el-dropdown-item   icon="el-icon-view" @click.native="handleEdit(scope.row)" v-if="checkLevel(scope.row, 'edit')">在线编辑</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-edit" @click.native="handleUpdate(scope.row)" v-hasPermi="['doc:info:edit']"
-                    v-if="checkLevel(scope.row, 'modify')">修改</el-dropdown-item>
-                  <el-dropdown-item   icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['doc:info:remove']" v-if="checkLevel(scope.row, 'del')">删除</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+                    >预览</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-view"
+                        @click.native="handleShare(scope.row)"
+                        v-if="checkLevel(scope.row, 'share')"
+                        >分享</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-view"
+                        @click.native="handleDownload(scope.row)"
+                        v-if="checkLevel(scope.row, 'download')"
+                        >下载</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-view"
+                        @click.native="handleEdit(scope.row)"
+                        v-if="checkLevel(scope.row, 'edit')"
+                        >在线编辑</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-edit"
+                        @click.native="handleUpdate(scope.row)"
+                        v-hasPermi="['doc:info:edit']"
+                        v-if="checkLevel(scope.row, 'modify')"
+                        >修改</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        icon="el-icon-delete"
+                        @click.native="handleDelete(scope.row)"
+                        v-hasPermi="['doc:info:remove']"
+                        v-if="checkLevel(scope.row, 'del')"
+                        >删除</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </el-dropdown>
                   <!-- <el-button
                     size="mini"
                     type="text"
@@ -233,7 +277,7 @@
                     v-if="checkLevel(scope.row, 'download')"
                     >下载</el-button
                   > -->
-                  
+
                   <!-- <el-button
                     size="mini"
                     type="text"
@@ -284,76 +328,77 @@
         >
           <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="文件级别" prop="docLevel">
-  <el-select v-model="form.docLevel" placeholder="请选择文件级别">
-    <el-option
-      v-for="item in levelOptions"
-      :key="item.levelId"
-      :label="item.levelName"
-      :value="item.levelId"
-    ></el-option>
-  </el-select>
-</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-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="文件级别" prop="docLevel">
+              <el-select v-model="form.docLevel" placeholder="请选择文件级别">
+                <el-option
+                  v-for="item in levelOptions"
+                  :key="item.levelId"
+                  :label="item.levelName"
+                  :value="item.levelId"
+                ></el-option>
+              </el-select>
+            </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>
@@ -368,7 +413,7 @@
 <script>
 import "@/styles1/element-ui1.scss";
 
-import {listTag} from"@/api/doc/tag.js"
+import { listTag } from "@/api/doc/tag.js";
 
 import {
   listInfo,
@@ -397,14 +442,14 @@ export default {
   },
   data() {
     return {
-    //标签列表
-    tags: [
-          // { name: '十四大', id: 0 },
-          // { name: '领导讲话', id: 1 },
-          // { name: '会议精神', id: 2 },
-          // { name: '党章', id: 3 },
-          // { name: '212专案', id: 4 }
-        ],
+      //标签列表
+      tags: [
+        // { name: '十四大', id: 0 },
+        // { name: '领导讲话', id: 1 },
+        // { name: '会议精神', id: 2 },
+        // { name: '党章', id: 3 },
+        // { name: '212专案', id: 4 }
+      ],
 
       //选择标签
       dynamicTags: [],
@@ -442,8 +487,8 @@ export default {
         docName: null,
         docLevel: null,
         createYear: null,
-        params:{
-          tagId:null
+        params: {
+          tagId: null,
         },
       },
       // 表单参数
@@ -491,16 +536,16 @@ export default {
     },
   },
   methods: {
-    //选择标签
+    //选择标签关闭时
     handleClose(tag) {
-      this.form.tagList.map((i,index)=>{
-       if(tag==i.tagName){
-        this.form.tagList.splice(index,1)
-       }   
-      })
+      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() {
       this.inputVisible = true;
       this.$nextTick((_) => {
@@ -510,16 +555,16 @@ export default {
     //固定的标签
     handleInputConfirm1(tag) {
       this.dynamicTags.push(
-      // {
-      //   tagId:tag.id,
-      //   tagName:tag.name,
-      tag.tagName
-      // }
-      );  
+        // {
+        //   tagId:tag.id,
+        //   tagName:tag.name,
+        tag.tagName
+        // }
+      );
       this.form.tagList.push({
-        tagId:tag.tagId,
-        tagName:tag.tagName,
-      });  
+        tagId: tag.tagId,
+        tagName: tag.tagName,
+      });
     },
     //自定义标签
     handleInputConfirm() {
@@ -531,31 +576,27 @@ export default {
       // this.inputValue = "";
       // this.form.tagList.push({
       //   tagName:inputValue,
-      // });  
+      // });
       //查询输入的标签是否存在
-    var Newtags=this.tags.find(value=>value.tagName==inputValue)
-    // console.log(a);
-    
+      var Newtags = this.tags.find((value) => value.tagName == inputValue);
+      // console.log(a);
+
       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 (Newtags) {
+        this.form.tagList.push({
+          tagId: Newtags.tagId,
+          tagName: Newtags.tagName,
+        });
+      } else {
+        this.form.tagList.push({
+          tagName: inputValue,
+        });
+      }
+      // console.log(this.form);
     },
 
     /** 转换目录信息数据结构 */
@@ -587,7 +628,11 @@ export default {
     //预览
     handlePreview(row) {
       row.isEdit = false;
-      this.$tab.openPage("文件[" + row.docName + "]预览", '/doc/oo-edit/index/' + row.docId, row);
+      this.$tab.openPage(
+        "文件[" + row.docName + "]预览",
+        "/doc/oo-edit/index/" + row.docId,
+        row
+      );
     },
     //在线编辑
     handleEdit(row) {
@@ -615,10 +660,10 @@ export default {
         });
         this.loading = false;
 
-       //标签数据
-       listTag().then((res)=>{
-       this.tags=res.rows
-     })
+        //标签数据
+        listTag().then((res) => {
+          this.tags = res.rows;
+        });
       });
     },
     /**处理文档级别数据*/
@@ -677,18 +722,18 @@ export default {
         remark: null,
         isDel: null,
         searchValue: this.spaceId,
-        tagList:[],
+        tagList: [],
       };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
       // const para = {
-      //   tagId: queryParams.params.tagId, 
+      //   tagId: queryParams.params.tagId,
       // }
       // this.queryParams.params = para;
       // console.log(this.queryParams);
-      
+
       this.queryParams.pageNum = 1;
       this.getList();
     },
@@ -716,7 +761,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const docId = row.docId || this.ids;
-      getInfo(docId, row.createYear).then(response => {
+      getInfo(docId, row.createYear).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改文件基本信息";
@@ -724,9 +769,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form);
-      // console.log(this.dynamicTags);
-      this.$refs["form"].validate((valid) => {
+        this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.docId != null) {
             updateInfo(this.form).then((response) => {
@@ -743,6 +786,11 @@ export default {
           }
         }
       });
+   
+      // console.log(this.dynamicTags.length);
+      // console.log(this.form);
+      // console.log(this.dynamicTags);
+     
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -862,7 +910,7 @@ export default {
         .reset1 {
           color: #2e8aecff;
           background: transparent;
-          border: 1px solid #2E8AECFF;
+          border: 1px solid #2e8aecff;
         }
       }
       .mb8 {
@@ -887,9 +935,9 @@ export default {
 }
 //标签按钮
 ::v-deep .el-tag {
-  color: #DF9439FF;
-  border: 1px solid #FF9839FF;
-  background: #BBA99240;
+  color: #df9439ff;
+  border: 1px solid #ff9839ff;
+  background: #bba99240;
   margin-left: 3px;
   margin-bottom: 3px;
   height: calc(100vh * (35 / 1080));
@@ -924,7 +972,7 @@ export default {
 }
 //右边顶部标签搜索
 ::v-deep .el-select > .el-input {
-    width: calc(100vw * (180 / 1920));
+  width: calc(100vw * (180 / 1920));
 }
 //右边表格线条隐藏
 ::v-deep .el-table::before {
@@ -932,7 +980,7 @@ export default {
 }
 //table样式
 ::v-deep .el-table {
-overflow: auto;
+  overflow: auto;
 }
 ::v-deep .el-table th {
   background: #016c9aa6;
@@ -990,7 +1038,7 @@ overflow: auto;
   margin-top: 1vh !important;
 }
 ::v-deep .el-form {
- height: calc(100vh * (800 / 1080));
+  height: calc(100vh * (800 / 1080));
 }
 //弹窗底部按钮的位置
 ::v-deep .el-dialog__footer {
@@ -1016,7 +1064,7 @@ overflow: auto;
     padding-right: 50px;
     overflow: auto;
     // background: salmon;
-}
+  }
   .el-dialog__header {
     padding-bottom: 0;
   }

src/views1/HomeView.vue

@@ -80,6 +80,9 @@
             <el-menu-item index="/home/personal/modify"
               >登录密码修改</el-menu-item
             >
+            <el-menu-item index="/home/personal/Storages"
+              >分组存储空间</el-menu-item
+            >
           </el-submenu>
           <el-submenu index="4">
             <template slot="title">
@@ -200,7 +203,7 @@ export default {
   //   system
   // },
   created(){
-    console.log(this.$cache.local.get('USERNAME')) // 输出'local value'
+    // console.log(this.$cache.local.get('USERNAME')) // 输出'local value'
   },
   methods: {
     handleSelect(key, keyPath) {

src/views1/Personal/Storages/GroupSpace.vue

@@ -0,0 +1,674 @@
+<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-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-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:dir:add']"
+                v-hasRole="['group.manager']"
+                >新增</el-button
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="info"
+                plain
+                icon="el-icon-sort"
+                size="mini"
+                @click="toggleExpandAll"
+                >展开/折叠</el-button
+              >
+            </el-col>
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+            ></right-toolbar>
+          </el-row>
+
+          <el-table
+            v-if="refreshTable"
+            v-loading="loading"
+            :data="dirList"
+            row-key="dirId"
+            :default-expand-all="isExpandAll"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          >
+            <el-table-column label="目录名称" align="left" prop="dirName" />
+            <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-plus"
+                  @click="handleAdd(scope.row)"
+                  v-hasPermi="['doc:dir:add']"
+                  v-hasRole="['group.manager']"
+                  >新增</el-button
+                >
+                <el-button
+                  v-if="scope.row.parentId != 0"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['doc:dir:edit']"
+                  v-hasRole="['group.manager']"
+                  >修改</el-button
+                >
+                <el-button
+                  v-if="scope.row.parentId != 0"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['doc:dir:remove']"
+                  v-hasRole="['group.manager']"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5" class="mb8-col">
+          分组空间：
+          <el-progress
+            :text-inside="true"
+            :stroke-width="15"
+            :percentage="percentage"
+          >
+          </el-progress>
+          {{ spaceData.avlCap }} G可用 （共{{ spaceData.spaceCap }}G）
+          <el-button
+            type="primary"
+            plain
+            size="mini"
+            @click="handleExpand"
+            class="capacity"
+            >扩容</el-button
+          >
+        </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="parentId">
+            <treeselect
+              v-model="form.parentId"
+              :options="dirOptions"
+              :normalizer="normalizer"
+              placeholder="请选择上级目录"
+            />
+          </el-form-item>
+          <el-form-item label="目录名称" prop="dirName">
+            <el-input v-model="form.dirName" placeholder="请输入目录名称" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="form.remark"
+              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>
+      <!-- 扩容申请对话框 -->
+      <el-dialog
+        :title="title"
+        :visible.sync="openSpace"
+        width="500px"
+        append-to-body
+        v-if="flag"
+      >
+        <el-form
+          ref="formSpace"
+          :model="formSpace"
+          :rules="rulesSpace"
+          label-width="80px"
+        >
+          <el-form-item label="扩充容量" prop="expandCap">
+            <el-input-number
+              v-model="formSpace.expandCap"
+              placeholder="扩充容量"
+            ></el-input-number
+            ><label>GB</label>
+          </el-form-item>
+          <el-form-item label="申请理由" prop="remark">
+            <el-input
+              v-model="formSpace.remark"
+              type="textarea"
+              rows="5"
+              placeholder="请输入申请理由"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitFormSpace">确 定</el-button>
+          <el-button @click="cancelSpace">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/styles1/element-ui1.scss";
+
+import {
+  listDir,
+  getDir,
+  delDir,
+  addDir,
+  updateDir,
+  groupList,
+} from "@/api/doc/dir";
+
+import { getGroupSpace } from "@/api/doc/space";
+
+import {
+  listExpand,
+  getExpand,
+  delExpand,
+  addExpand,
+  updateExpand,
+} from "@/api/doc/expand";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "GroupSpace",
+  components: {
+    Treeselect,
+  },
+  data() {
+    return {
+       //判断是否弹出扩容界面
+       flag:true,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 目录信息表格数据
+      dirList: [],
+      // 目录信息树选项
+      dirOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      openSpace: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        parentId: null,
+        dirName: null,
+      },
+      //个人空间数据
+      spaceData: {},
+      // 表单参数
+      form: {},
+      formSpace: {},
+      // 表单校验
+      rules: {
+        dirName: [
+          {
+            required: true,
+            message: "目录名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        parentId: [
+          {
+            required: true,
+            message: "上级目录不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      // 表单校验
+      rulesSpace: {
+        expandCap: [
+          {
+            required: true,
+            message: "扩容容量不能为空",
+            trigger: "blur",
+          },
+        ],
+        remark: [
+          {
+            required: true,
+            message: "申请理由不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      percentage:0
+    };
+  },
+  created() {
+    const groupId = this.$route.params && this.$route.params.groupId;
+    if (groupId) {
+      this.queryParams.groupId = groupId;
+      this.getList();
+    }
+    this.spaceInfo();
+  },
+  methods: {
+    /** 查询个人空间相关信息 */
+    spaceInfo() {
+      this.loading = true;
+      getGroupSpace(this.queryParams.groupId).then((response) => {
+        this.spaceData = response.data;
+        this.loading = false;
+      });
+      console.log(this.spaceData.spaceCap);
+      // return this.percentage =(this.spaceData.usedCap/this.spaceData.spaceCap)*100;
+    },
+    /** 查询目录信息列表 */
+    getList() {
+      this.loading = true;
+      groupList(this.queryParams.groupId).then((response) => {
+        this.dirList = this.handleTree(response.data, "dirId");
+        this.loading = false;
+      });
+    },
+    /** 转换目录信息数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.dirId,
+        label: node.dirName,
+        children: node.children,
+      };
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮
+    cancelSpace() {
+      this.openSpace = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dirId: null,
+        spaceId: null,
+        parentId: null,
+        dirName: null,
+        dirPath: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        isDel: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      // this.getTreeselect();
+      if (row != null && row.dirId) {
+        this.form.parentId = row.dirId;
+        // } else {
+        // 	this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加目录信息";
+      groupList(this.queryParams.groupId).then((response) => {
+        this.form.spaceId = response.data[0].spaceId;
+        this.dirOptions = this.handleTree(response.data, "dirId");
+      });
+    },
+    /** 扩容申请 */
+    handleExpand(row) {
+      // if(this.spaceData.isApply=="1"){
+      //   this.$modal.alertWarning("扩容申请已经存在了") 
+      //   this.flag=false
+      // }
+      // if(this.spaceData.isApply=="0"){
+      //   this.flag=true
+      // }
+      this.formSpace.currentCap = this.spaceData.spaceCap;
+      this.formSpace.spaceId = this.spaceData.spaceId;
+      this.formSpace.spaceName = this.spaceData.spaceName;
+      this.reset();
+      // this.getTreeselect();
+      if (row != null && row.dirId) {
+        this.form.parentId = row.dirId;
+        // } else {
+        // 	this.form.parentId = 0;
+      }
+      this.openSpace = true;
+      this.title = "扩容申请";
+      groupList(this.queryParams.groupId).then((response) => {
+        this.form.spaceId = response.data[0].spaceId;
+        this.dirOptions = this.handleTree(response.data, "dirId");
+      });
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      if (row != null) {
+        this.form.parentId = row.dirId;
+      }
+      getDir(row.dirId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改目录信息";
+      });
+      personalList().then((response) => {
+        this.dirOptions = this.handleTree(response.data, "dirId");
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.dirId != null) {
+            updateDir(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDir(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitFormSpace() {
+      // console.log(this.formSpace);
+      this.$refs["formSpace"].validate((valid) => {
+        if (valid) {
+          addExpand(this.formSpace).then((response) => {
+            this.$modal.msgSuccess("扩容申请提交成功");
+            this.openSpace = false;
+          });
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal
+        .confirm('是否确认删除目录信息编号为"' + row.dirId + '"的数据项？')
+        .then(function () {
+          return delDir(row.dirId);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
+};
+</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 {
+    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 * (774 / 1080));
+    background: url(../../../assets/img/Group-610.png);
+    background-size: calc(100vw * (1876 / 1920)) calc(100vh * (774 / 1080));
+    h3 {
+      font-size: 0.2rem;
+      color: #ffffffff;
+      padding-top: calc(100vh * (21 / 1080));
+      padding-left: calc(100vw * (30 / 1920));
+    }
+    .main-main {
+      width: calc(100vw * (1845 / 1920));
+      height: calc(100vh * (700 / 1080));
+      margin-left: calc(100vw * (16 / 1920));
+      margin-top: calc(100vh * (20 / 1080));
+      // background: seagreen;
+      .app-container {
+        width: calc(100vw * (1845 / 1920));
+        height: calc(100vh * (700 / 1080));
+        padding: 0;
+      }
+      .el-table {
+        width: calc(100vw * (1830 / 1920));
+        height: calc(100vh * (646 / 1080));
+        margin-left: calc(100vw * (8 / 1920));
+        border: 1px solid #006c9aff;
+        overflow: auto;
+        background: transparent;
+        color: #7ea4c8;
+      }
+    }
+    //滚动条样式
+    ::-webkit-scrollbar {
+      width: 3.5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #2e8aec;
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #2e8aec;
+    }
+  }
+  //底部
+  .footer {
+    width: calc(100vw * (1876 / 1920));
+    height: calc(100vh * (92 / 1080));
+    margin-top: calc(100vh * (20 / 1080));
+    background: url(../../../assets/img/Group-611.png);
+    background-size: calc(100vw * (1876 / 1920)) calc(100vh * (92 / 1080));
+    display: flex;
+    align-items: center;
+    padding-left: calc(100vw * (34 / 1920));
+    color: #ffffffff;
+    font-size: 0.16rem;
+    .el-progress {
+      width: calc(100vw * (270 / 1920));
+      margin-right: calc(100vw * (10 / 1920));
+    }
+     .mb8-col{
+      width: calc(100vw * (1800 / 1920));
+      display: flex;
+      align-items: center;
+      height: calc(100vh * (60 / 1080));
+      margin-top: calc(100vh * (15 / 1080));
+     }
+     .capacity{
+      background: #2E8AECFF;
+      color: white;
+      margin-left: calc(100vw * (10 / 1920));
+      text-align: center;
+     }
+  }
+}
+//表格样式
+::v-deep .el-table th {
+  background: linear-gradient(
+    90deg,
+    rgba(19, 37, 93, 0) 0%,
+    rgba(1, 108, 154, 0.65) 52%,
+    rgba(19, 37, 93, 0) 100%,
+    rgba(19, 37, 93, 0) 100%
+  );
+  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-button--primary.is-plain {
+  background-color: #002a5cff;
+  border: none;
+}
+::v-deep .el-button--info.is-plain {
+  background-color: #002a5cff;
+  border: none;
+  color: #1890ff;
+}
+::v-deep .el-table::before {
+  width: 0;
+}
+//搜索刷新按钮颜色
+::v-deep .el-button.is-circle {
+  background: #006c9aff;
+  color: white;
+}
+// //进度条样式
+::v-deep .el-progress-bar__outer{
+    background: transparent !important;
+    border: 1px solid #2E8AECFF;
+    border-radius: 0;
+}
+::v-deep .el-progress-bar__inner{
+    border-radius: 0;
+}
+::v-deep .el-progress-bar__innerText{
+    font-size: 0;
+}
+::v-deep .el-dialog__body{
+    padding-bottom: 0;
+}
+::v-deep .el-dialog__title{
+    color: white;
+}
+::v-deep .el-form-item__label{
+    color: #2E8AECFF;
+}
+::v-deep .el-textarea__inner{
+    background: transparent;
+}
+::v-deep .el-input--medium .el-input__inner{
+    background: transparent;
+}
+::v-deep .el-input-number--medium .el-input-number__decrease {
+    background: transparent;
+}
+::v-deep .el-input-number--medium .el-input-number__increase {
+    background: transparent;
+}
+::v-deep label {
+    color: white;
+    margin-left: 10px;
+}
+//弹窗样式
+::v-deep .vue-treeselect__menu {
+    // background: salmon !important;
+    // color: red !important;
+    // display: block;
+}
+</style>

src/views1/Personal/Storages/StoragesView.vue

@@ -0,0 +1,246 @@
+<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">
+        <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>
+
+    <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="handleGroupSpace(scope.row)">分组空间</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" />
+
+  </div>
+      </div>
+    </div>
+  </template>
+    
+  <script>
+ import {
+    listGroup,
+    selectGroup,
+    getGroup,
+    delGroup,
+    addGroup,
+    updateGroup
+  } from "@/api/doc/group";
+
+  export default {
+    name: "GroupSpaceSelect",
+    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;
+        selectGroup(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
+      },
+      /** 分组空间按钮操作 */
+      handleGroupSpace(row) {
+        const groupId = row.groupId;
+        this.$router.push("/home/personal/GroupSpace/space/" + 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-615.png);
+      background-size: calc(100vw * (1876 / 1920)) calc(100vh * (880 / 1080));
+      .app-container {
+        width: calc(100vw * (1876 / 1920));
+        height: calc(100vh * (880 / 1080));
+        // padding: 0;
+      }  
+        //表格底部
+        .pagination-container {
+        width: calc(100vw * (1830 / 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));
+      }    
+  }
+}
+//table样式
+::v-deep .el-table {
+  height: calc(100vh * (700 / 1080));
+  overflow: auto;
+  background: transparent;
+  color: #7EA4C8FF;
+}
+::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-table::before {
+  height: 0;
+}
+//顶部搜索框样式
+::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));
+// }
+
+  </style>
+    
+  
+  
+