扩容申请中的扩容状态操作的显示隐藏功能的实现

src/assets/styles/element-ui.scss

@@ -23,6 +23,9 @@
   gap: 65px;
 }
 
+
+
+
 .cell {
   .el-tag {
     margin-right: 0px;

src/router/index.js

@@ -195,6 +195,19 @@ export const constantRoutes = [{
       {
         path: "/home/system/journal/register",
         component: () => import('@/views1/System/Journal/Register/RegisterView.vue')
+      },
+      {
+        path: "/home/group",
+        component: () => import('@/views1/Group/GroupView.vue')
+      },
+      {
+        path: "/home/group/groups",
+        component: () => import('@/views1/Group/Groups/GroupsView.vue')
+      }
+      ,
+      {
+        path: "/home/group/subgroup",
+        component: () => import('@/views1/Group/Subgroup/SubgroupView.vue')
       }
     ],
   },

src/styles1/element-ui1.scss

@@ -0,0 +1,138 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+ // this.confirm删除确认框修改确定取消按钮顺序
+.el-message-box__btns {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  align-items: center;
+  gap: 65px;
+  padding: 0;
+}
+
+//警告提示信息
+.el-message-box {
+  width: calc(100vw * (480 / 1920));
+  height: calc(100vh * (280 / 1080));
+  background: url(../assets/img/Group-585.png);
+  background-size: calc(100vw * (480 / 1920)) calc(100vh * (280 / 1080));
+  padding-top: calc(100vh * (20 / 1080));
+  padding-left: calc(100vw * (20 / 1920));
+  padding-right: calc(100vw * (20 / 1920));
+  border: none;
+}
+.el-button{
+  color: #ffffff;
+}
+.el-message-box__title{
+  color: white;
+}
+.el-message-box__headerbtn{
+  border: 1px solid #02C2E3FF;
+  border-radius: 50%;
+}
+.el-message-box__headerbtn .el-message-box__close{
+  color: #02C2E3FF;
+}
+.el-message-box__headerbtn .el-message-box__close:hover{
+  color: #02C2E3FF;
+}
+.el-message-box__message p {
+  color: white;
+}
+//前面的感叹号处理
+.el-message-box__status.el-icon-warning{
+  color: transparent;
+}
+//下面按钮
+.el-button--small{
+  background-color: #1E5095FF !important;
+  border-color: #02C2E3FF !important;
+}
+.el-button--small:hover{
+  color: #ffffff;
+}
+
+
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

src/views1/File/Demand/DemandView.vue

@@ -12,81 +12,123 @@
     <div class="main">
       <h3>扩容申请</h3>
       <div class="main-main">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="空间名称" prop="spaceName">
-        <el-input
-          v-model="queryParams.spaceName"
-          placeholder="请输入空间名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="当前容量" prop="currentCap">
-        <el-input
-          v-model="queryParams.currentCap"
-          placeholder="请输入当前容量"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="扩充容量" prop="expandCap">
-        <el-input
-          v-model="queryParams.expandCap"
-          placeholder="请输入扩充容量"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="扩容状态" prop="expandStatus">
-        <el-select v-model="queryParams.expandStatus" placeholder="请选择扩容状态" clearable>
-          <el-option
-            v-for="dict in dict.type.expand_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </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">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
+          <el-form-item label="空间名称" prop="spaceName">
+            <el-input
+              v-model="queryParams.spaceName"
+              placeholder="请输入空间名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="扩容状态" prop="expandStatus">
+            <el-select
+              v-model="queryParams.expandStatus"
+              placeholder="请选择扩容状态"
+              clearable
+              :popper-append-to-body="false"
+            >
+              <el-option
+                v-for="dict in dict.type.expand_status"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </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"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
 
-    <el-table v-loading="loading" :data="expandList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <!-- <el-table-column label="容量信息ID" align="center" prop="expandId" /> -->
-      <el-table-column label="空间名称" align="center" prop="spaceName" />
-      <el-table-column label="当前容量" align="center" prop="currentCap" />
-      <el-table-column label="扩充容量" align="center" prop="expandCap" />
-      <el-table-column label="申请理由" align="center" prop="remark" />
-      <el-table-column label="扩容状态" align="center" prop="expandStatus">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.expand_status" :value="scope.row.expandStatus" />
-        </template>
-      </el-table-column>
-      <el-table-column label="申请人" align="center" prop="createBy" />
-      <el-table-column label="申请时间" align="center" prop="createTime" width="150">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="申请理由" align="center" prop="remark" width="150"/>
-      <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-check" @click="handleYes(scope.row)"
-            v-hasPermi="['doc:expand:edit']">同意扩容</el-button>
-          <el-button size="mini" type="text" icon="el-icon-close" @click="handleNo(scope.row)"
-            v-hasPermi="['doc:expand:edit']">拒绝扩容</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table
+          v-loading="loading"
+          :data="expandList"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <!-- <el-table-column label="容量信息ID" align="center" prop="expandId" /> -->
+          <el-table-column label="空间名称" align="center" prop="spaceName" />
+          <el-table-column label="当前容量" align="center" prop="currentCap" />
+          <el-table-column label="扩充容量" align="center" prop="expandCap" />
+          <el-table-column label="申请理由" align="center" prop="remark" />
+          <el-table-column label="扩容状态" align="center" prop="expandStatus">
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.expand_status"
+                :value="scope.row.expandStatus"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="申请人" align="center" prop="createBy" />
+          <el-table-column
+            label="申请时间"
+            align="center"
+            prop="createTime"
+            width="150"
+          >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="申请理由"
+            align="center"
+            prop="remark"
+            width="150"
+          />
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" v-if="operat">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-check"
+                @click="handleYes(scope.row)"
+                v-hasPermi="['doc:expand:edit']"
+                >同意扩容</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-close"
+                @click="handleNo(scope.row)"
+                v-hasPermi="['doc:expand:edit']"
+                >拒绝扩容</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
 
-    <!-- 添加或修改扩容申请对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+        <!-- 添加或修改扩容申请对话框 -->
+        <!-- <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="空间ID" prop="spaceId">
           <el-input v-model="form.spaceId" placeholder="请输入空间ID" />
@@ -117,205 +159,232 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
-      
-    
+    </el-dialog> -->
       </div>
     </div>
   </div>
 </template>
     
 <script>
- import {
-    listExpand,
-    getExpand,
-    delExpand,
-    addExpand,
-    yesExpand,
-    noExpand,
-    updateExpand
-  } from "@/api/doc/expand";
+import {
+  listExpand,
+  getExpand,
+  delExpand,
+  addExpand,
+  yesExpand,
+  noExpand,
+  updateExpand,
+} from "@/api/doc/expand";
+import { createLogger } from "vuex";
 
-  export default {
-    name: "Expand",
-    dicts: ['expand_status'],
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 扩容申请表格数据
-        expandList: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          spaceName: null,
-          currentCap: null,
-          expandCap: null,
-          expandStatus: null,
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          spaceName: [{
+export default {
+  name: "Expand",
+  dicts: ["expand_status"],
+  data() {
+    return {
+      //判断是否为申请状态
+      operat: true,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 扩容申请表格数据
+      expandList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        spaceName: null,
+        currentCap: null,
+        expandCap: null,
+        expandStatus: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        spaceName: [
+          {
             required: true,
             message: "空间名称不能为空",
-            trigger: "blur"
-          }],
-          expandCap: [{
+            trigger: "blur",
+          },
+        ],
+        expandCap: [
+          {
             required: true,
             message: "扩充容量不能为空",
-            trigger: "blur"
-          }],
-          remark: [{
+            trigger: "blur",
+          },
+        ],
+        remark: [
+          {
             required: true,
             message: "备注不能为空",
-            trigger: "blur"
-          }],
-        }
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.queryParams.expandStatus = "1";
+    this.getList();
+  },
+  methods: {
+    /** 查询扩容申请列表 */
+    getList() {
+      this.loading = true;
+      listExpand(this.queryParams).then((response) => {
+        this.expandList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        expandId: null,
+        spaceId: null,
+        spaceName: null,
+        currentCap: null,
+        expandCap: null,
+        expandStatus: 1,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        isDel: null,
       };
+      this.resetForm("form");
     },
-    created() {
-      // console.log(dict.type.expand_status);
-      this.queryParams.expandStatus = "1";
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
       this.getList();
+      if (this.queryParams.expandStatus !== "1") {
+        this.operat = false;
+      } else {
+        this.operat = true;
+      }
     },
-    methods: {
-      /** 查询扩容申请列表 */
-      getList() {
-        this.loading = true;
-        listExpand(this.queryParams).then(response => {
-          this.expandList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          expandId: null,
-          spaceId: null,
-          spaceName: null,
-          currentCap: null,
-          expandCap: null,
-          expandStatus: 1,
-          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.expandId)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.expandId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加扩容申请";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const expandId = row.expandId || this.ids;
+      getExpand(expandId).then((response) => {
+        this.form = response.data;
         this.open = true;
-        this.title = "添加扩容申请";
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const expandId = row.expandId || this.ids
-        getExpand(expandId).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改扩容申请";
-        });
-      },
-      /** 同意按钮操作 */
-      handleYes(row) {
-        this.$modal.confirm('确认同意 ' + row.spaceName + ' 扩容申请"？').then(function() {
+        this.title = "修改扩容申请";
+      });
+    },
+    /** 同意按钮操作 */
+    handleYes(row) {
+      this.$modal
+        .confirm("确认同意 " + row.spaceName + ' 扩容申请"？')
+        .then(function () {
           return yesExpand(row.expandId);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("同意扩容成功！");
-        }).catch(() => {});
-      },
-      /** 拒绝按钮操作 */
-      handleNo(row) {
-        this.$modal.confirm('确认拒绝 ' + row.spaceName + ' 扩容申请"？').then(function() {
+        })
+        .catch(() => {});
+    },
+    /** 拒绝按钮操作 */
+    handleNo(row) {
+      this.$modal
+        .confirm("确认拒绝 " + row.spaceName + ' 扩容申请"？')
+        .then(function () {
           return noExpand(row.expandId);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("拒绝扩容成功！");
-        }).catch(() => {});
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.expandId != null) {
-              updateExpand(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              addExpand(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
-            }
+        })
+        .catch(() => {});
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.expandId != null) {
+            updateExpand(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addExpand(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const expandIds = row.expandId || this.ids;
-        this.$modal.confirm('是否确认删除扩容申请编号为"' + expandIds + '"的数据项？').then(function() {
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const expandIds = row.expandId || this.ids;
+      this.$modal
+        .confirm('是否确认删除扩容申请编号为"' + expandIds + '"的数据项？')
+        .then(function () {
           return delExpand(expandIds);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download('doc/expand/export', {
-          ...this.queryParams
-        }, `expand_${new Date().getTime()}.xlsx`)
-      }
-    }
-  };
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "doc/expand/export",
+        {
+          ...this.queryParams,
+        },
+        `expand_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
 </script>
     
 <style scoped lang='scss'>
@@ -371,7 +440,7 @@
       height: calc(100vh * (800 / 1080));
       margin-left: calc(100vw * (25 / 1920));
       margin-top: calc(100vh * (20 / 1080));
-        // background: seagreen;
+      // background: seagreen;
       .el-table {
         width: calc(100vw * (1822 / 1920));
         height: calc(100vh * (650 / 1080));
@@ -401,8 +470,8 @@
   height: calc(100vh * (50 / 1080));
   background: transparent;
 }
-::v-deep .pagination-container .el-pagination{
-    top: -10px;
+::v-deep .pagination-container .el-pagination {
+  top: -10px;
 }
 //table样式
 ::v-deep .el-table th {
@@ -421,13 +490,13 @@
 ::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-form-item__label {
+  color: #2e8aecff;
 }
-::v-deep .el-input__inner  {
+::v-deep .el-input__inner {
   background: transparent;
-  border: 1px solid #01D1FFFF;
-  color: #006C9AFF;
+  border: 1px solid #01d1ffff;
+  color: #006c9aff;
 }
 
 //table底下白线消失处理
@@ -439,11 +508,46 @@
 }
 //按钮样式
 ::v-deep .el-button {
-  background-color: #002A5CFF; 
-    color: #1890ff;
-    border: none;
+  background-color: #002a5cff;
+  color: #1890ff;
+  border: none;
 }
-</style>
+//下拉选项样式
+::v-deep .el-select-dropdown__list {
+   background: #0F1540FF;
+}
+::v-deep .el-select-dropdown {
+   border: none;
+}
+::v-deep .el-select-dropdown__item.hover {
+   background: #0F1540FF;
+}
+::v-deep li{
+  color: #006C9AFF;
+}
+::v-deep .el-select-dropdown__item.selected{
+  color: #006C9AFF;
+  font-weight: 500;
+}
+::v-deep .el-select-dropdown__item.selected:hover{
+   color: #FFFFFFFF;
+}
+::v-deep li:hover {
+   background: #1E497CFF !important;
+   color: #FFFFFFFF;
+}
+
+// 同意扩容样式
+// ::v-deep .el-message-box{
+//   width: calc(100vw * (100 / 1920)) !important;
+//   height: calc(100vh * (200 / 1080)) !important;
+//   // background: url(../../../assets/img/Group-585.png);
+//   // background-size: calc(100vw * (480 / 1920)) calc(100vh * (230 / 1080));
+//   // padding-top: calc(100vh * (20 / 1080));
+//   // padding-left: calc(100vw * (20 / 1920));
+//   // padding-right: calc(100vw * (20 / 1920));
+//   // border: none; 
+// }
 </style>
  
   

src/views1/Group/GroupView.vue

@@ -0,0 +1,11 @@
+<template>
+<router-view></router-view>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

src/views1/Group/Groups/GroupsView.vue

@@ -0,0 +1,11 @@
+<template>
+<h1>分组</h1>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

src/views1/Group/Subgroup/SubgroupView.vue

@@ -0,0 +1,11 @@
+<template>
+<h1>分组成员</h1>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

src/views1/HomeView.vue

@@ -114,6 +114,20 @@
               >
             </el-submenu>
           </el-submenu>
+          <el-submenu index="5">
+            <template slot="title">
+              <span class="nav1">
+                <img :src="
+                srcIndex=='5'
+                ?icoUrl[5]['group1']
+                :icoUrl[5]['group2']
+                " />
+               </span
+              >分组管理
+            </template>
+            <el-menu-item index="/home/group/groups">分组</el-menu-item>
+            <el-menu-item index="/home/group/subgroup">分组成员</el-menu-item>
+          </el-submenu>
         </el-menu>
         <div class="right">
           <span class="right_1">
@@ -168,6 +182,10 @@ export default {
         {
           search1: require('../assets/img/nav-setting1.png'),
           search2: require('../assets/img/nav-setting.png'),
+        },
+        {
+          group1: require('../assets/img/nav-group1.png'),
+          group2: require('../assets/img/nav-group.png'),
         }
       ],
       

src/views1/Personal/Space/SpaceView.vue

@@ -88,15 +88,7 @@
         </div>
       </div>
     </div>
-    <div class="footer">
-      <!-- 部门存储空间：<el-progress
-          :percentage="60"
-          :stroke-width="15"
-          :show-text="false"
-        ></el-progress>
-        60G可用（共100G） -->
-      <!-- 个人空间相关信息 -->
-      
+    <div class="footer">   
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5" class="mb8-col">
           个人存储空间：
@@ -153,6 +145,7 @@
         :visible.sync="openSpace"
         width="500px"
         append-to-body
+        v-if="flag"
       >
         <el-form
           ref="formSpace"
@@ -186,6 +179,8 @@
 </template>
   
   <script>
+import "@/styles1/element-ui1.scss";
+
 import {
   listDir,
   getDir,
@@ -215,6 +210,8 @@ export default {
   },
   data() {
     return {
+      //判断是否弹出扩容界面
+      flag:true,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -284,7 +281,11 @@ export default {
     this.getList();
     this.spaceInfo();
   },
-
+//   mounted(){
+//       if(this.spaceData.searchValue=="1"){
+//        alert('已存在扩容申请')
+//       }  
+// },
   methods: {
     /** 查询个人空间相关信息 */
     spaceInfo() {
@@ -292,10 +293,13 @@ export default {
       getPersonalSpace().then((response) => {
         this.spaceData = response.data;
         this.loading = false;
+        // console.log(this.spaceData);
+        // console.log(this.spaceData.searchValue);
         return this.percentage =(this.spaceData.usedCap
-        /this.spaceData.spaceCap)*100
+        /this.spaceData.spaceCap)*100;
       });
     },
+    
     /** 查询目录信息列表 */
     getList() {
       this.loading = true;
@@ -370,6 +374,13 @@ export default {
     
     /** 扩容申请 */
     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;