Browse Source

部门文档存储空间和公共文档存储空间模块完成

yxc 2 years ago
parent
commit
8af6a689fd

+ 8 - 0
src/router/index.js

@@ -147,6 +147,14 @@ export const constantRoutes = [{
         {
           path: 'GroupSpace/space/:groupId(\\d+)',
           component: () => import('@/views1/Personal/Storages/GroupSpace.vue'),
+        },
+        {
+          path: 'Partspace',
+          component: () => import('@/views1/Personal/Partspace/PartspaceView.vue'),
+        },
+        {
+          path: 'Publispace',
+          component: () => import('@/views1/Personal/Publispace/PublispaceView.vue'),
         }
       ]
       },

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

@@ -536,7 +536,7 @@ export default {
     },
   },
   methods: {
-    //选择标签关闭
+    //选择标签关闭
     handleClose(tag) {
       this.form.tagList.map((i, index) => {
         if (tag == i.tagName) {
@@ -565,6 +565,9 @@ export default {
         tagId: tag.tagId,
         tagName: tag.tagName,
       });
+      if(this.dynamicTags.length>3){
+        alert(111)
+      };
     },
     //自定义标签
     handleInputConfirm() {

+ 11 - 5
src/views1/HomeView.vue

@@ -71,18 +71,24 @@
                 <!-- <img src="../assets/img/nav-person1.png"> --> </span
               >个人设置
             </template>
-            <el-menu-item index="/home/personal/classify"
-              >个人文档分类</el-menu-item
+            <el-menu-item index="/home/personal/Partspace"
+              >部门存储空间</el-menu-item
+            >
+            <el-menu-item index="/home/personal/Publispace"
+              >公共存储空间</el-menu-item
+            >
+            <el-menu-item index="/home/personal/Storages"
+              >分组存储空间</el-menu-item
             >
             <el-menu-item index="/home/personal/space"
               >个人存储空间</el-menu-item
             >
+            <el-menu-item index="/home/personal/classify"
+              >个人文档分类</el-menu-item
+            >
             <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">

+ 577 - 0
src/views1/Personal/Partspace/PartspaceView.vue

@@ -0,0 +1,577 @@
+<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-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="['dept.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="['dept.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="['dept.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="['dept.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>
+      <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,
+    deptList
+  } from "@/api/doc/dir";
+
+  import {
+    getDeptSpace
+  } 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: "DeptSpace",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+        // 遮罩层
+        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() {
+      this.getList();
+      // this.spaceInfo();
+    },
+    methods: {
+      /** 查询个人空间相关信息 */
+      spaceInfo() {
+        this.loading = true;
+        getDeptSpace().then(response => {
+          this.spaceData = response.data;
+          this.loading = false;
+        });
+      },
+      /** 查询目录信息列表 */
+      getList() {
+        this.loading = true;
+        deptList().then(response => {
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+          getDeptSpace().then(response => {
+            this.spaceData = response.data;
+            this.loading = false;
+            return this.percentage =(this.spaceData.usedCap/this.spaceData.spaceCap)*100;
+          });
+        });
+      },
+      /** 转换目录信息数据结构 */
+      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 = "添加目录信息";
+        deptList().then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 扩容申请 */
+      handleExpand(row) {
+        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 = "扩容申请";
+        deptList().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 {
+      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 * (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: #002A5CFF !important;
+    width: calc(100vw * (370 / 1920));
+}
+::v-deep .vue-treeselect__option:hover {
+    background: #01D1FF3B;
+}
+::v-deep .vue-treeselect__option.vue-treeselect__option--highlight {
+    background: #01D1FF3B;
+}
+//返回按钮
+::v-deep .el-button--warning.is-plain {
+  background-color: #002a5cff;
+  border: none;
+  color: #1890ff;
+}
+//重置按钮
+::v-deep .el-input--medium .el-input__inner {
+    width: calc(100vw * (250 / 1920));
+}
+  </style>
+    
+  
+  
+  

+ 513 - 0
src/views1/Personal/Publispace/PublispaceView.vue

@@ -0,0 +1,513 @@
+<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-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="['dept.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="['dept.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="['dept.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="['dept.manager']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+        </div>
+      </div>
+
+        <!-- 添加或修改目录信息对话框 -->
+    <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>
+    </div>
+  </template>
+    
+    <script>
+  import "@/styles1/element-ui1.scss";
+  
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    deptList
+  } from "@/api/doc/dir";
+
+  import {
+    getDeptSpace
+  } 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: "DeptSpace",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+        // 遮罩层
+        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() {
+      this.getList();
+      // this.spaceInfo();
+    },
+    methods: {
+      /** 查询个人空间相关信息 */
+      spaceInfo() {
+        this.loading = true;
+        getDeptSpace().then(response => {
+          this.spaceData = response.data;
+          this.loading = false;
+        });
+      },
+      /** 查询目录信息列表 */
+      getList() {
+        this.loading = true;
+        deptList().then(response => {
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+          getDeptSpace().then(response => {
+            this.spaceData = response.data;
+            this.loading = false;
+            return this.percentage =(this.spaceData.usedCap/this.spaceData.spaceCap)*100;
+          });
+        });
+      },
+      /** 转换目录信息数据结构 */
+      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 = "添加目录信息";
+        deptList().then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 扩容申请 */
+      handleExpand(row) {
+        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 = "扩容申请";
+        deptList().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 {
+      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 * (27 / 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 * (745 / 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;
+      }
+    }
+  }
+  ::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: #002A5CFF !important;
+    width: calc(100vw * (370 / 1920));
+}
+::v-deep .vue-treeselect__option:hover {
+    background: #01D1FF3B;
+}
+::v-deep .vue-treeselect__option.vue-treeselect__option--highlight {
+    background: #01D1FF3B;
+}
+//返回按钮
+::v-deep .el-button--warning.is-plain {
+  background-color: #002a5cff;
+  border: none;
+  color: #1890ff;
+}
+//重置按钮
+::v-deep .el-input--medium .el-input__inner {
+    width: calc(100vw * (250 / 1920));
+}
+  </style>
+    
+  
+  
+  

+ 40 - 15
src/views1/Personal/Storages/GroupSpace.vue

@@ -39,6 +39,9 @@
                 >展开/折叠</el-button
               >
             </el-col>
+            <el-col :span="1.5">
+              <el-button type="warning" plain size="mini" @click="handleClose">返回</el-button>
+            </el-col>
             <right-toolbar
               :showSearch.sync="showSearch"
               @queryTable="getList"
@@ -283,7 +286,7 @@ export default {
           },
         ],
       },
-      percentage:1
+      percentage:0
     };
   },
   created() {
@@ -292,24 +295,31 @@ export default {
       this.queryParams.groupId = groupId;
       this.getList();
     }
-    this.spaceInfo();
+   
   },
   methods: {
+     // 返回按钮
+     handleClose() {
+          const obj = {
+            path: "/home/personal/Storages"
+          };
+          this.$tab.closeOpenPage(obj);
+        },
     /** 查询个人空间相关信息 */
     spaceInfo() {
       this.loading = true;
       getGroupSpace(this.queryParams.groupId).then((response) => {
         this.spaceData = response.data;
         this.loading = false;
+        return this.percentage =(this.spaceData.usedCap/this.spaceData.spaceCap)*100;
       });
-      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.spaceInfo();
         this.loading = false;
       });
     },
@@ -378,13 +388,13 @@ export default {
     },
     /** 扩容申请 */
     handleExpand(row) {
-      // if(this.spaceData.isApply=="1"){
-      //   this.$modal.alertWarning("扩容申请已经存在了") 
-      //   this.flag=false
-      // }
-      // if(this.spaceData.isApply=="0"){
-      //   this.flag=true
-      // }
+      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;
@@ -665,10 +675,25 @@ export default {
     color: white;
     margin-left: 10px;
 }
-//弹窗样式
+//弹窗下拉菜单样式
 ::v-deep .vue-treeselect__menu {
-    // background: salmon !important;
-    // color: red !important;
-    // display: block;
+    background: #002A5CFF !important;
+    width: calc(100vw * (370 / 1920));
+}
+::v-deep .vue-treeselect__option:hover {
+    background: #01D1FF3B;
+}
+::v-deep .vue-treeselect__option.vue-treeselect__option--highlight {
+    background: #01D1FF3B;
+}
+//返回按钮
+::v-deep .el-button--warning.is-plain {
+  background-color: #002a5cff;
+  border: none;
+  color: #1890ff;
+}
+//重置按钮
+::v-deep .el-button + .el-button {
+    color: #1890ff;
 }
 </style>

+ 4 - 0
src/views1/Personal/Storages/StoragesView.vue

@@ -95,6 +95,10 @@
         this.loading = true;
         selectGroup(this.queryParams).then(response => {
           this.groupList = response.rows;
+          if( this.groupList.length==1){
+          const groupId = this.groupList[0].groupId;
+          this.$router.push("/home/personal/GroupSpace/space/" + groupId);
+          }
           this.total = response.total;
           this.loading = false;
         });