个人文档模块的初步界面完成

.gitignore

@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+

src/router/index.js

@@ -206,7 +206,7 @@ export const constantRoutes = [{
       }
       ,
       {
-        path: "/home/group/subgroup",
+        path: "/home/group/subgroup/:groupId",
         component: () => import('@/views1/Group/Subgroup/SubgroupView.vue')
       }
     ],

src/styles1/element-ui1.scss

@@ -191,3 +191,19 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+
+//滚动条样式
+::-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;
+}

src/views1/Group/Groups/GroupsView.vue

@@ -115,30 +115,16 @@
             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-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['doc:group:edit']"
-                >修改</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['doc:group:remove']"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
+          <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-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['doc:group:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['doc:group:remove']">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-user" @click="handleGroupUser(scope.row)"
+            v-hasPermi="['doc:group:user']">分配成员</el-button>
+        </template>
+      </el-table-column>
         </el-table>
 
         <pagination
@@ -244,12 +230,6 @@ export default {
     select(){
       this.$refs.select.show();
     },
-    
-//接收子组件内传递过来的数据进行处理
-  // handleQuery (ids) {
-  //     this.queryParams.pageNum = 1;
-  //     this.getList();
-  // },
 
     /** 查询分组列表 */
     getList() {
@@ -299,7 +279,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.groupId);
+      this.ids = selection.map(item => item.groupId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
@@ -309,11 +289,16 @@ export default {
       this.open = true;
       this.title = "添加分组";
     },
+    /** 分组成员按钮操作 */
+       handleGroupUser(row) {
+        const groupId = row.groupId;
+        this.$router.push("/home/group/subgroup/" + groupId);
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const groupId = row.groupId || this.ids;
-      getGroup(groupId).then((response) => {
+      getGroup(groupId).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改分组";
@@ -429,20 +414,6 @@ export default {
       }
     
     }
-    //滚动条样式
-    //   ::-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;
-    //   }
   }
 }
 

src/views1/Group/Groups/selectUser.vue

@@ -520,7 +520,7 @@ export default {
   width: calc(100vw * (1000 / 1920)) !important;
   height: calc(100vh * (900 / 1080)) !important;
   background: url(../../../assets/img/Group-585.png);
-  background-size: calc(100vw * (1000 / 1920)) calc(100vh * (1000 / 1080));
+  background-size: calc(100vw * (1000 / 1920)) calc(100vh * (900 / 1080));
 
   .el-dialog__headerbtn {
     top: 3%;

src/views1/Group/Subgroup/SubgroupView.vue

@@ -1,11 +1,290 @@
 <template>
-<h1>分组成员</h1>
-</template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="用户ID" prop="userId">
+          <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="用户姓名" prop="userName">
+          <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+  
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+            v-hasPermi="['doc:groupUser:add']">分配成员</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain icon="el-icon-circle-close" size="mini" :disabled="multiple"
+            @click="cancelGroupUserAll" v-hasPermi="['doc:groupUser:remove']">删除成员</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"></right-toolbar>
+      </el-row>
+  
+      <el-table v-loading="loading" :data="groupUserList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+        <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <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-circle-close" @click="cancelGroupUser(scope.row)"
+              v-hasPermi="['doc:groupUser:remove']">删除成员</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+      <select-user ref="select" :groupId="queryParams.groupId" @ok="handleQuery" />
+    </div>
+  </template>
+  
+  <script>
+    import "@/styles1/element-ui1.scss";
 
-<script>
-
-</script>
+    import {
+      listGroupUser,
+      getGroupUser,
+      delGroupUser,
+      addGroupUser,
+      updateGroupUser,
+      groupUserCancelAll
+    } from "@/api/doc/groupUser";
+    import selectUser from "./selectUser";
+    export default {
+      name: "GroupUser",
+      dicts: ['sys_normal_disable'],
+      components: {
+        selectUser
+      },
+      data() {
+        return {
+          // 遮罩层
+          loading: true,
+          // 选中数组
+          ids: [],
+          // 非单个禁用
+          single: true,
+          // 非多个禁用
+          multiple: true,
+          // 显示搜索条件
+          showSearch: true,
+          // 总条数
+          total: 0,
+          // 分组成员表格数据
+          groupUserList: [],
+          // 弹出层标题
+          title: "",
+          // 是否显示弹出层
+          open: false,
+          // 查询参数
+          queryParams: {
+            pageNum: 1,
+            pageSize: 10,
+            userId: null,
+            userName: null
+          },
+          // 表单参数
+          form: {},
+          // 表单校验
+          rules: {}
+        };
+      },
+      created() {
+        const groupId = this.$route.params && this.$route.params.groupId;
+        if (groupId) {
+          this.queryParams.groupId = groupId;
+          this.getList();
+        }
+      },
+      methods: {
+        // 返回按钮
+        handleClose() {
+          const obj = {
+            path: "/home/group/groups"
+          };
+          this.$tab.closeOpenPage(obj);
+        },
+        /** 查询分组成员列表 */
+        getList() {
+          this.loading = true;
+          listGroupUser(this.queryParams).then(response => {
+            this.groupUserList = response.rows;
+            this.total = response.total;
+            this.loading = false;
+          });
+        },
+        // 取消按钮
+        cancel() {
+          this.open = false;
+          this.reset();
+        },
+        // 表单重置
+        reset() {
+          this.form = {
+            groupId: null,
+            userId: null,
+            userName: 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.userId)
+          this.single = selection.length !== 1
+          this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+          this.$refs.select.show();
+        },
+        /** 提交按钮 */
+        submitForm() {
+          this.$refs["form"].validate(valid => {
+            if (valid) {
+              if (this.form.groupId != null) {
+                updateGroupUser(this.form).then(response => {
+                  this.$modal.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                });
+              } else {
+                addGroupUser(this.form).then(response => {
+                  this.$modal.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                });
+              }
+            }
+          });
+        },
+        /** 删除按钮操作 */
+        cancelGroupUserAll(row) {
+          const groupId = this.queryParams.groupId;
+          const userIds = this.ids.join(",");
+          this.$modal.confirm('是否确认删除选中的分组成员？').then(function() {
+            return groupUserCancelAll({
+              groupId: groupId,
+              userIds: userIds
+            });
+          }).then(() => {
+            this.getList();
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        },
+        /** 删除按钮操作 */
+        cancelGroupUser(row) {
+          const groupId = this.queryParams.groupId;
+          const userIds = row.userId
+          this.$modal.confirm('是否确认删除分组成员"' + row.userName + '"的数据项？').then(function() {
+            return groupUserCancelAll({
+              groupId: groupId,
+              userIds: userIds
+            });
+          }).then(() => {
+            this.getList();
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        },
+      },
+    };
+  </script>
 
 <style scoped lang='scss'>
 
+.el-table {
+        width: calc(100vw * (1882 / 1920));
+        height: calc(100vh * (600 / 1080));
+        background: transparent;
+        color: #7EA4C8FF !important;
+        overflow: auto;
+      }
+
+//底部跳转
+::v-deep .pagination-container {
+  height: calc(100vh * (50 / 1080));
+  background: transparent;
+}
+::v-deep .pagination-container .el-pagination {
+  bottom: 10px;
+}
+//table样式
+::v-deep .el-table th {
+  background: #016c9aa6;
+  color: #2e8aec;
+}
+::v-deep .el-table tr {
+  background: transparent;
+}
+::v-deep .el-table tbody tr:hover > td {
+  background-color: #016c9a78 !important;
+}
+::v-deep .el-table td.el-table__cell {
+  border-bottom: 1px solid #006c9aff;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid #006c9aff;
+}
+::v-deep .el-form-item__label {
+  color: #2e8aecff;
+}
+::v-deep .el-input__inner {
+  background: transparent;
+  border: 1px solid #01d1ffff;
+  color: #006c9aff;
+}
+
+//table底下白线消失处理
+::v-deep .el-table {
+  color: #ffffffff;
+}
+::v-deep .el-table::before {
+  width: 0;
+}
+//按钮的样式
+::v-deep .el-button--primary.is-plain {
+  background-color: #002a5cff;
+  border: none;
+}
+::v-deep .el-button--success.is-plain.is-disabled,
+.el-button--danger.is-plain.is-disabled,
+.el-button{
+  background-color: #002a5cff;
+  color: #1890ff;
+  border: none;
+}
+//顶部样式
+::v-deep .el-form-item__label {
+  text-align: center;
+}
+//搜索刷新按钮颜色
+::v-deep .el-button.is-circle{
+    background: #006C9AFF;
+    color: white;
+}
+
 </style>

src/views1/Group/Subgroup/selectUser.vue

@@ -0,0 +1,207 @@
+<template>
+  <!-- 授权用户 -->
+  <el-dialog
+    title="选择用户"
+    :visible.sync="visible"
+    width="800px"
+    top="5vh"
+    append-to-body
+    custom-class="el-dialog3"
+  >
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phonenumber">
+        <el-input
+          v-model="queryParams.phonenumber"
+          placeholder="请输入手机号码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+        <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { unallocatedUserList, groupUserSelectAll } from "@/api/doc/groupUser";
+export default {
+  dicts: ["sys_normal_disable"],
+  props: {
+    // 角色编号
+    groupId: {
+      type: [String],
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      userIds: [],
+      // 总条数
+      total: 0,
+      // 未授权用户数据
+      userList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        groupId: undefined,
+        // userName: undefined,
+        // phonenumber: undefined
+      },
+    };
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.queryParams.groupId = parseInt(this.groupId);
+      this.getList();
+      this.visible = true;
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.userIds = selection.map((item) => item.userId);
+    },
+    // 查询表数据
+    getList() {
+      unallocatedUserList(this.queryParams).then((res) => {
+        this.userList = res.rows;
+        this.total = res.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 选择授权用户操作 */
+    handleSelectUser() {
+      const groupId = this.queryParams.groupId;
+      const userIds = this.userIds.join(",");
+      if (userIds == "") {
+        this.$modal.msgError("请选择要分配的用户");
+        return;
+      }
+      groupUserSelectAll({ groupId: groupId, userIds: userIds }).then((res) => {
+        this.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          this.visible = false;
+          this.$emit("ok");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+//弹窗样式
+::v-deep .el-dialog3 {
+  width: calc(100vw * (1050 / 1920)) !important;
+  height: calc(100vh * (900 / 1080)) !important;
+  background: url(../../../assets/img/Group-585.png);
+  background-size: calc(100vw * (1050 / 1920)) calc(100vh * (900 / 1080));
+  //标题
+  .el-dialog__title{
+    color: #ffffff;
+  }
+  .dialog-footer {
+      position: absolute;
+      right: 8%;
+      bottom: 5%;
+    }
+}
+::v-deep .el-dialog .el-input {
+  width: calc(100vw * (240 / 1920)) !important;
+}
+//表格
+::v-deep .el-table {
+  height: calc(100vh * (510 / 1080)) !important;
+  width: calc(100vw * (855 / 1920)) !important;
+  margin-left: calc(100vw * (20 / 1920)) !important;
+  background: transparent;
+  overflow: auto;
+    //滚动条样式
+::-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-button--primary,.el-button--mini{
+  background-color: #002a5cff;
+}
+//关闭按钮
+::v-deep .el-dialog__headerbtn{
+ font-size: 25px;
+ right: 3%;
+}
+//顶部和表格的距离
+::v-deep .el-dialog .el-form-item{
+ margin-top: calc(100vh * (30 / 1080)) !important;
+}
+//底部跳转
+::v-deep .pagination-container .el-pagination{
+  right: 10px;
+}
+</style>

src/views1/HomeView.vue

@@ -126,7 +126,6 @@
               >分组管理
             </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">