新增页面

src/components/UserMan/memberGroup.vue

+<template>
+  <div class="memberGroup">
+    <div class="head-title">
+      用户分组
+      <el-button @click="EditGroup(null)" style="float: right; margin-top: -5px; margin-right: 10px" size="small"
+        type="primary">新增
+      </el-button>
+    </div>
+    <div class="content">
+      <div style="display: flex; align-items: center; flex-wrap: wrap">
+        <div class="searchInput" style="width: 150px">
+          <el-input @keyup.enter.native="(msg.pageIndex = 1), getList()" @clear="(msg.pageIndex = 1), getList()"
+            style="display: inline-block; width: 125px; height: 30px" placeholder="请输入昵称" v-model="msg.GroupName"
+            size="small" clearable>
+          </el-input>
+          <span @click="(msg.pageIndex = 1), getList()" class="el-icon-search"
+            style=" color: #979dad; font-size: 14px;  position: relative;  top: 1px; "></span>
+        </div>
+      </div>
+      <!--  @selection-change="handleSelectionChange"-->
+      <el-table :data="tableData" v-loading="loading" border style="width: 100%; margin: 20px 0">
+        <!--:selectable="checkSelectable"-->
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="GroupId" label="ID" width="100"> </el-table-column>
+        <el-table-column prop="GroupName" label="分组名称" width="100"> </el-table-column>
+        <el-table-column prop="LookGroupIds" label="可查看分组" width="100"> </el-table-column>
+        <el-table-column prop="CreateDate" width="150" label="加入时间"></el-table-column>
+
+        <el-table-column prop="address" width="140" label="操作" fixed="right">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+              <img @click="EditGroup(scope.row)" style="width: 32px; height: 32px"
+                src="../../assets/img/userman/edit.png" alt="" />
+            </el-tooltip>
+
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <img @click="showQRcode(scope.row)" style="width: 32px; height: 32px"
+                src="../../assets/img/userman/QRcode.png" alt="" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align: right" background @current-change="handleCurrentChange"
+        :page-size="msg.pageSize" :current-page.sync="msg.pageIndex" layout="total,prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+    <!-- 修改星星数 -->
+    <!-- <el-dialog title="修改星星数" :visible.sync="Egoods" width="600px" :close-on-click-modal="false">
+      <div>
+        <el-form :model="modifyobj" :rules="rules" ref="modifyobj" label-width="150px">
+          <el-form-item label="修改模式">
+            <el-radio v-model="modifyobj.IsAdd" :label="1">增加</el-radio>
+            <el-radio v-model="modifyobj.IsAdd" :label="2">减少</el-radio>
+          </el-form-item>
+          <el-form-item label="原始星星数">
+            <span>{{ PNum }}</span>
+          </el-form-item>
+          <el-form-item label="修改星星数">
+            <el-input v-model="modifyobj.PonitNum" style="width: 260px" size="small" :min="0" type="number"
+              placeholder="请输入星星数"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="Egoods = false">关 闭</el-button>
+        <el-button size="small" type="primary" @click="setUpdatePointNum()">修 改</el-button>
+      </span>
+    </el-dialog> -->
+    <!-- 充值积分 -->
+    <!-- <el-dialog title="二维码" :visible.sync="qrshow" width="600px">
+      <div style="display: flex; align-items: center; justify-content: center">
+        <el-image style="width: 200px; height: 200px" :src="qrcodeImg"></el-image>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="qrshow = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="查看详情" :visible.sync="detailShow" width="800px">
+      <detail :data="detailData" />
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="detailShow = false">关 闭</el-button>
+      </span>
+    </el-dialog> -->
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import detail from "./components/seeDetail";
+  export default {
+    components: {
+      ChooseImg,
+      detail,
+    },
+    data() {
+      return {
+        loading: false,
+        tableData: [],
+        total: 0,
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          GroupName: "",
+        },
+        addMsg: {
+          GroupId: 0,
+          GroupName: "", //分组名称
+          LookGroupIds: "",
+          IsSpecial: 0,
+        },
+      };
+    },
+    created() {
+      this.getgroupList();
+    },
+    methods: {
+      //新增修改用户分组
+      EditGroup(obj) {
+
+      },
+      //保存用户分组信息
+      SaveGroup() {
+        this.apipost("/api/User/SetMemberGroup", this.addMsg, res => {
+          console.log(res);
+
+        });
+      },
+      //获取用户分组信息
+      GetGroup(item) {
+        this.apipost("/api/User/GetMemberGroup", {
+          GroupId: item.GroupId
+        }, res => {
+          console.log(res);
+
+        });
+      },
+      //删除分组
+      DeleteGroup(item) {
+        this.apipost("/api/User/DeleteMemberGroup", {
+          GroupId: item.GroupId
+        }, res => {
+          console.log(res);
+
+        });
+      },
+      getList() {
+        this.loading = true;
+        this.apipost("/api/User/GetMemberGroupPage", this.msg, (res) => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.total = res.data.data.count;
+            let pageData = res.data.data.pageData;
+            this.tableData = pageData;
+          }
+        });
+      },
+      //分页改变
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      //获取分组下来列表
+      getgroupList() {
+        this.apipost("/api/User/GetMemberGroupList", {
+          GroupId: item.GroupId
+        }, res => {
+          console.log(res);
+
+        });
+      }
+    },
+    mounted() {
+      this.getList();
+    },
+  };
+
+</script>
+<style>
+  .memberGroup .remark_name {
+    color: #888888;
+    font-size: 12px;
+    margin-left: 10px;
+    float: right;
+  }
+
+  .memberGroup .app-image {
+    background-position: center center;
+    width: 50px;
+    height: 50px;
+    border-radius: 0%;
+    float: left;
+    margin-right: 8px;
+  }
+
+  .memberGroup .blue {
+    color: #409eff;
+  }
+
+  .memberGroup .content .searchInput {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .memberGroup .content .searchInput .el-input__inner {
+    border: none;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .memberGroup .content .searchInput {
+    line-height: normal;
+    display: inline-table;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 250px;
+    margin-right: 20px;
+    margin-bottom: 10px;
+  }
+
+  .memberGroup .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+</style>

src/router/index.js

@@ -919,7 +919,12 @@ export default new Router({
       name: 'studentListEdit',
       component: resolve => require(['@/components/UserMan/studentListEdit'], resolve),
     },
-
+    // 用户管理 相亲用户分组列表
+    {
+      path: '/memberGroup',
+      name: 'memberGroup',
+      component: resolve => require(['@/components/UserMan/memberGroup'], resolve),
+    },
     // 用户管理 相亲用户列表
     {
       path: '/blindDateUsersList',