提交一下 黑名单

1

src/constant/index.js

@@ -464,3 +464,17 @@ export const campState = {
   'ING':'进行中',
   'END':'已结束'
 }
+
+export const catgGoupType = {
+  NORMAL:'声部班',
+  MIX:'合奏班',
+  HIGH:'基础技能班',
+  VIP:'VIP课',
+  DEMO:'试听课',
+  SNAP:'临时班',
+  COMM:'对外课程',
+  HIGH_ONLINE:'线上基础技能班',
+  MUSIC_NETWORK:'乐团网管课',
+  PARENT_MEETING:'家长会',
+  TRAINING:'训练营'
+}

src/store/modules/permission.js

@@ -594,6 +594,18 @@ function setDetailRoute(accessedRoutes) {
           }
         },
         {
+          name: "黑名单",
+          path: "liveBlackList",
+          component: () => import("@/views/liveClassManager/studentBlacklist"),
+          hidden: true,
+          meta: {
+            noCache: "1",
+            title: "黑名单",
+            belongTopMenu: "/business",
+            activeMenu: "/liveClassManager"
+          }
+        },
+        {
           name: "学员缴费设置",
           path: "studentPaySet",
           component: () =>

src/utils/searchArray.js

@@ -22,7 +22,8 @@ import {
   issue,
   feedbackType,
   feedbackTypeDesc,
-  campState
+  campState,
+  catgGoupType
 } from '../constant'
 // 课程类型
 let tenantConfig = sessionStorage.getItem('tenantConfig')
@@ -810,7 +811,7 @@ export const issueList = getValueForKey(issue)
 export const feedbackTypeList = getValueForKey(feedbackType)
 export const feedbackTypeDescList = getValueForKey(feedbackTypeDesc)
 export const campStateList = getValueForKey(campState)
-
+export const catgGoupTypeList =  getValueForKey(catgGoupType)
 //downListType
 function getValueForKey(obj) {
   let arr = []

src/utils/vueFilter.js

@@ -839,6 +839,12 @@ Vue.filter("cloudGroupActive", value => {
 Vue.filter("chargingStatus", value => {
   return constant.chargingStatus[value];
 });
+
+// 群消息类型
+Vue.filter("catgGoupType", value => {
+  return constant.catgGoupType[value];
+});
+
 Vue.filter("usageStatus", value => {
   let obj = {
     0: "未使用",

src/views/groupChatManager/api.js

@@ -91,3 +91,13 @@ export function addGroupMessageList(data) {
     data
   })
 }
+
+// 修改群聊
+export function updateImGroup(data) {
+  return request({
+    url: api + '/imGroup/updateImGroup',
+    method: 'POST',
+    // params: data,
+    data
+  })
+}

src/views/groupChatManager/component/chatList.vue

@@ -12,9 +12,24 @@
           v-model.trim="searchForm.search"
           clearable
           @keyup.enter.native="search"
-          placeholder="群组名称"
+          placeholder="群聊名称"
         ></el-input>
       </el-form-item>
+      <el-form-item prop="groupType">
+        <el-select
+          v-model.trim="searchForm.groupType"
+          clearable
+          filterable
+          placeholder="群聊类型"
+        >
+          <el-option
+            v-for="(item, index) in catgGoupTypeList"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          ></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button native-type="submit" type="primary">搜索</el-button>
         <el-button native-type="reset" type="danger">重置</el-button>
@@ -38,18 +53,36 @@
         <el-table-column
           align="center"
           prop="id"
-          label="群组"
+          label="群聊"
         ></el-table-column>
         <el-table-column
           align="center"
           prop="name"
-          label="群组名称"
+          label="群聊名称"
         ></el-table-column>
+        <el-table-column align="center" prop="groupType" label="群聊类型">
+          <template slot-scope="scope">
+            <div>
+              {{ scope.row.groupType | catgGoupType }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column
           align="center"
           prop="memberNum"
           label="人数"
         ></el-table-column>
+        <el-table-column align="center" prop="memberNum" label="操作">
+          <template slot-scope="scope">
+            <div>
+              <auth auths="imGroup/updateImGroup">
+                <el-button type="text" @click="resetCat(scope.row)"
+                  >修改</el-button
+                >
+              </auth>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination
         sync
@@ -60,7 +93,8 @@
         @pagination="getList"
       />
     </div>
-    <eidtPostMsg ref='eidtPostMsg' @clear="clearCom"/>
+    <eidtPostMsg ref="eidtPostMsg" @clear="clearCom" />
+    <eidtCatInfo ref="eidtCatInfo" @getList='getList' />
   </div>
 </template>
 <script>
@@ -70,15 +104,18 @@ import pagination from "@/components/Pagination/index";
 import load from "@/utils/loading";
 import { getTimes } from "@/utils";
 import { getGroupList } from "../api";
-import eidtPostMsg from '../model/eidtPostMsg'
+import { catgGoupTypeList } from "@/utils/searchArray";
+import eidtPostMsg from "../model/eidtPostMsg";
+import eidtCatInfo from "../model/eidtCatInfo";
 export default {
-  components: { pagination,eidtPostMsg },
+  components: { pagination, eidtPostMsg ,eidtCatInfo},
   data() {
     return {
       searchForm: {
         search: null,
+        groupType: "",
       },
-
+      catgGoupTypeList,
       tableList: [],
       organList: [],
       rules: {
@@ -129,7 +166,7 @@ export default {
         this.$nextTick(() => {
           this.tableList.forEach((course) => {
             if (idList.indexOf(course.id) != -1) {
-            this.$refs.multipleSelection.toggleRowSelection(course, true);
+              this.$refs.multipleSelection.toggleRowSelection(course, true);
             }
           });
           this.isNewPage = false;
@@ -143,20 +180,25 @@ export default {
       this.getList();
     },
     onReSet() {
-      this.searchForm.search =
-      this.clearCom()
+      this.searchForm.search = "";
+      this.searchForm.groupType = "";
+      this.rules.page = 1;
+      this.getList();
     },
     postMsg() {
       if (!this.chioseIdList || this.chioseIdList.length <= 0) {
-        this.$message.error("请至少选择一个群组");
+        this.$message.error("请至少选择一个群聊");
         return;
       }
-      this.$refs.eidtPostMsg.openDioag(this.chioseIdList)
+      this.$refs.eidtPostMsg.openDioag(this.chioseIdList);
     },
     handleSelectionChange(val) {
       if (val.length > 0) {
         this.chioseIdList = this.chioseIdList.concat(val);
-        this.chioseIdList = this.$helpers.lodash.uniqBy(this.chioseIdList, "id");
+        this.chioseIdList = this.$helpers.lodash.uniqBy(
+          this.chioseIdList,
+          "id"
+        );
       } else {
         if (this.isNewPage) return;
         let idList = this.chioseIdList.map((group) => {
@@ -197,6 +239,9 @@ export default {
         }
       }
     },
+    resetCat(row){
+      this.$refs.eidtCatInfo.openResetDioag(row)
+    }
   },
 };
 </script>

src/views/groupChatManager/index.vue

@@ -4,7 +4,7 @@
   <div class="m-container">
     <h2>
       <div class="squrt"></div>
-      群组管理
+      群聊管理
     </h2>
 
     <div class="m-core">

src/views/groupChatManager/model/eidtCatInfo.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-dialog
+      width="500px"
+      title="修改群聊"
+      :visible.sync="lookVisible"
+      :before-close="onClose"
+    >
+      <el-form :model="formes" label-width="120px" ref="eidtPostMsg">
+        <el-form-item
+          label="群聊名称"
+          :rules="[{ required: true, message: '请输入群聊名称' }]"
+          prop="name"
+        >
+          <el-input class="w100" v-model="formes.name"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="群聊类型"
+          :rules="[{ required: true, message: '请选择群聊类型' }]"
+          prop="groupType"
+        >
+          <el-select
+          class="w100"
+            v-model.trim="formes.groupType"
+            clearable
+            filterable
+            placeholder="群聊类型"
+          >
+            <el-option
+              v-for="(item, index) in catgGoupTypeList"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="onClose">取 消</el-button>
+        <el-button type="primary" @click="submitMsg">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { updateImGroup } from "../api";
+import { catgGoupTypeList } from "@/utils/searchArray";
+export default {
+  name: "eidtPostMsg",
+  data() {
+    return {
+      formes: {
+        id: "",
+        name: "",
+        groupType: "",
+      },
+      catgGoupTypeList,
+      lookVisible: false,
+      chioseIdList: null,
+      activeRow: null,
+    };
+  },
+
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {},
+    openDioag(chioseIdList) {
+      this.chioseIdList = chioseIdList;
+      this.lookVisible = true;
+    },
+    openResetDioag(row) {
+
+      // this.activeRow = row;
+      this.formes = { ...row};
+      this.lookVisible = true;
+    },
+    onClose() {
+      this.formes = {
+        id: "",
+        name: "",
+        groupType: "",
+      };
+      this.$refs["eidtPostMsg"].resetFields();
+      this.lookVisible = false;
+    },
+    submitMsg() {
+      this.$refs.eidtPostMsg.validate(async (flag) => {
+        if (flag) {
+          try {
+            const res = await updateImGroup({...this.formes})
+            this.$message.success('修改成功')
+            this.$emit('getList')
+            this.onClose()
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      });
+    },
+    getName(val) {
+      this.formes.fileName = val.data.name;
+    },
+    payDate() {
+      let self = this;
+      return {
+        firstDayOfWeek: 1,
+        disabledDate(time) {
+          return time.getTime() + 86400000 < new Date().getTime();
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%!important;
+}
+</style>

src/views/liveClassManager/api.js

@@ -150,3 +150,51 @@ export const updateLiveGoodsMapperStatus= data => {
     requestType: 'form',
   })
 }
+
+
+// 获取直播间预约人数
+export const getRoomUser= data => {
+  return request({
+    url: '/api-web/imLiveBroadcastRoom/query/roomUser',
+    method: 'post',
+    data,
+  })
+}
+
+// 获取直播间黑名单
+export const getBlackList= data => {
+  return request({
+    url: '/api-web/imLiveRoomBlack/queryBlackList',
+    method: 'post',
+    data,
+  })
+}
+
+// 获取待加入黑名单的学生名单
+export const getWaitBlackList= data => {
+  return request({
+    url: '/api-web/imLiveRoomBlack/queryStudentList',
+    method: 'post',
+    data,
+  })
+}
+
+
+// 添加黑名单
+export const addBlackList= data => {
+  return request({
+    url: '/api-web/imLiveRoomBlack/add',
+    method: 'post',
+    data,
+  })
+}
+
+
+// 删除黑名单
+export const deteleBlackList= data => {
+  return request({
+    url: '/api-web/imLiveRoomBlack/delete',
+    method: 'post',
+    data,
+  })
+}

src/views/liveClassManager/index.vue

@@ -121,6 +121,20 @@
             prop="createdByName"
             label="创建人"
           ></el-table-column>
+          <el-table-column align="center" prop="createdByName" label="预约人数">
+            <template slot-scope="scope">
+              <div>
+                <auth auths="imLiveBroadcastRoom/query/roomUser">
+                  <el-button
+                    type="text"
+                    @click="lookReservationDetail(scope.row)"
+                  >
+                    {{ scope.row.roomReservationNum }}</el-button
+                  >
+                </auth>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column align="center" prop="studentId" label="操作">
             <template slot-scope="scope">
               <div>
@@ -174,6 +188,13 @@
                     >删除</el-button
                   >
                 </auth>
+                <auth auths="/liveBlackList">
+                  <el-button
+                    type="text"
+                    @click="gotoBlacklist(scope.row)"
+                    >黑名单</el-button
+                  >
+                </auth>
               </div>
             </template>
           </el-table-column>
@@ -197,7 +218,8 @@
     >
       <shareDetail @close="shareVisible = false" :row="activeRow" />
     </el-dialog>
-    <popularizeRoom @getList="getList"  ref='popularizeRoom' />
+    <popularizeRoom @getList="getList" ref="popularizeRoom" />
+    <reservationDetail ref="reservationDetail" />
   </div>
 </template>
 
@@ -208,7 +230,8 @@ import { getTimes } from "@/utils";
 import pagination from "@/components/Pagination/index";
 import shareDetail from "./modals/shareDetail.vue";
 import load from "@/utils/loading";
-import popularizeRoom from './modals/popularizeRoom.vue'
+import popularizeRoom from "./modals/popularizeRoom.vue";
+import reservationDetail from "./modals/reservationDetail.vue";
 import {
   getLiveBroadcastList,
   delLiveBroadcast,
@@ -216,7 +239,7 @@ import {
   opsPopularize,
 } from "./api";
 export default {
-  components: { pagination, shareDetail,popularizeRoom },
+  components: { pagination, shareDetail, popularizeRoom, reservationDetail },
   data() {
     return {
       searchForm: {
@@ -358,7 +381,7 @@ export default {
       } else {
         popularize = 1;
         str = "推广";
-        this.$refs.popularizeRoom.openDioag(row)
+        this.$refs.popularizeRoom.openDioag(row);
       }
     },
     setShop(row) {
@@ -368,6 +391,15 @@ export default {
       });
       //
     },
+    lookReservationDetail(row) {
+      this.$refs.reservationDetail.openDioag(row);
+    },
+    gotoBlacklist(row){
+       this.$router.push({
+        path: "/business/liveBlackList",
+        query: { roomUid: row.roomUid, name:row.roomTitle},
+      });
+    }
   },
 };
 </script>

src/views/liveClassManager/modals/reservationDetail.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <el-dialog
+      width="1000px"
+      title="预约人员"
+      :visible.sync="lookVisible"
+      :before-close="onClose"
+      append-to-body
+    >
+      <div>
+        <el-form :inline="true" :model="searchForm">
+          <el-form-item>
+            <el-input
+              v-model.trim="searchForm.search"
+              clearable
+              @keyup.enter.native="search"
+              placeholder="学员编号/姓名/手机号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search" type="primary">搜索</el-button>
+            <el-button @click="onReSet" type="danger">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tableWrap">
+          <el-table
+            style="width: 100%"
+            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+            :data="tableList"
+            ref="multipleSelection"
+          >
+            <el-table-column
+              align="center"
+              prop="userId"
+              label="编号"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="username"
+              label="姓名"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="phone"
+              label="手机号"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="organName"
+              label="分部"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="subjectName"
+              label="声部"
+            ></el-table-column>
+          </el-table>
+          <pagination
+            sync
+            :total.sync="rules.total"
+            :page.sync="rules.page"
+            :limit.sync="rules.limit"
+            :page-sizes="rules.page_size"
+            @pagination="getList"
+          />
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onClose">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getRoomUser } from "../api";
+import { getLiveGoodsMapperList } from "@/views/liveShopManger/api";
+import pagination from "@/components/Pagination/index";
+export default {
+  name: "eidtPostMsg",
+  components: { pagination },
+  data() {
+    return {
+      searchForm: {
+        search: "",
+      },
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      addMuiscVisible: false,
+      multipleSelection: [],
+      chioseIdList: [],
+      isNewPage: false,
+      lookVisible: false,
+      activeRow: { sendFlag: false },
+    };
+  },
+
+  mounted() {},
+  methods: {
+    async getList() {
+      try {
+        const res = await getRoomUser({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          roomUid: this.activeRow.roomUid,
+        });
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.searchForm.search = "";
+      this.search();
+    },
+    onClose() {
+      this.lookVisible = false;
+    },
+    openDioag(row) {
+      this.activeRow = row;
+      this.lookVisible = true;
+
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%;
+}
+.btnWrap {
+  justify-content: flex-start;
+}
+</style>

src/views/liveClassManager/modals/setBlack.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <el-dialog
+      width="1000px"
+      title="添加黑名单"
+      :visible.sync="lookVisible"
+      :before-close="onClose"
+      append-to-body
+    >
+      <div>
+        <el-form :inline="true" :model="searchForm">
+          <el-form-item>
+            <el-input
+              v-model.trim="searchForm.search"
+              clearable
+              @keyup.enter.native="search"
+              placeholder="学员姓名/编号/手机号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search" type="primary">搜索</el-button>
+            <el-button @click="onReSet" type="danger">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tableWrap">
+          <el-table
+            style="width: 100%"
+            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+            :data="tableList"
+            @selection-change="handleSelectionChange"
+            @select="onTableSelect"
+            ref="multipleSelection"
+          >
+            <el-table-column type="selection" width="55"> </el-table-column>
+            <el-table-column
+              align="center"
+              prop="id"
+              label="学员编号"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="username"
+              label="学员姓名"
+            ></el-table-column>
+            <el-table-column align="center" prop="phone" label="手机号">
+            </el-table-column>
+          </el-table>
+          <pagination
+            sync
+            :total.sync="rules.total"
+            :page.sync="rules.page"
+            :limit.sync="rules.limit"
+            :page-sizes="rules.page_size"
+            @pagination="getList"
+          />
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addBlackList, getWaitBlackList } from "../api";
+import { getLiveGoodsMapperList } from "@/views/liveShopManger/api";
+import pagination from "@/components/Pagination/index";
+export default {
+  name: "eidtPostMsg",
+  components: { pagination },
+  data() {
+    return {
+      searchForm: {
+        search: "",
+      },
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      addMuiscVisible: false,
+      multipleSelection: [],
+      chioseIdList: [],
+      isNewPage: false,
+      lookVisible: false,
+      activeRow: { sendFlag: false },
+    };
+  },
+
+  mounted() {},
+  methods: {
+    async getList() {
+      try {
+        const res = await getWaitBlackList({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          roomUid: this.activeRow.roomUid,
+        });
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+        let idList = this.chioseIdList.map((group) => {
+          return group.id;
+        });
+        this.isNewPage = true;
+        this.$nextTick(() => {
+          this.tableList.forEach((course) => {
+            if (idList.indexOf(course.id) != -1) {
+              this.$refs.multipleSelection.toggleRowSelection(course, true);
+            }
+          });
+          this.isNewPage = false;
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.searchForm.search = "";
+      this.clearCom();
+      this.search();
+    },
+    async submit() {
+      if (!this.chioseIdList || this.chioseIdList.length <= 0) {
+        this.$message.error("请至少选择一名学生");
+        return;
+      }
+      try {
+        let idList = this.chioseIdList
+          .map((group) => {
+            return group.id;
+          })
+          .join(",");
+        const res = await addBlackList({
+          userIdList: idList,
+          roomUid: this.activeRow.roomUid,
+        });
+        this.$message.success("添加成功");
+        this.$emit("getList");
+        this.onClose();
+      } catch (e) {
+        console.log(e);
+      }
+
+      // 开始  addGroupMessageList
+      /**
+       *
+
+       */
+      console.log(this.chioseIdList);
+    },
+    handleSelectionChange(val) {
+      if (val.length > 0) {
+        this.chioseIdList = this.chioseIdList.concat(val);
+        this.chioseIdList = this.$helpers.lodash.uniqBy(
+          this.chioseIdList,
+          "id"
+        );
+      } else {
+        if (this.isNewPage) return;
+        let idList = this.chioseIdList.map((group) => {
+          return group.id;
+        });
+        this.$nextTick(() => {
+          let tableIdList = [];
+          this.tableList.forEach((group) => {
+            tableIdList.push(group.id);
+            if (idList.indexOf(group.id) != -1) {
+              this.$refs.multipleSelection.toggleRowSelection(group, false);
+            }
+          });
+          this.chioseIdList = this.$helpers.lodash.remove(
+            this.chioseIdList,
+            function (item) {
+              return tableIdList.indexOf(item.id) == -1;
+            }
+          );
+          if (this.chioseIdList.length <= 0) {
+            this.clearCom();
+          }
+        });
+      }
+    },
+    clearCom() {
+      this.chioseIdList = [];
+      this.$refs.multipleSelection.clearSelection();
+    },
+    onTableSelect(rows, row) {
+      let idList = this.chioseIdList.map((group) => {
+        return group.id;
+      });
+      if (idList.indexOf(row.id) != -1) {
+        this.chioseIdList.splice(idList.indexOf(row.id), 1);
+        if (this.chioseIdList.length <= 0) {
+          this.clearCom();
+        }
+      }
+    },
+    onClose() {
+      this.clearCom();
+      this.lookVisible = false;
+    },
+    openDioag(row) {
+      this.activeRow = row;
+      this.lookVisible = true;
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%;
+}
+.btnWrap {
+  justify-content: flex-start;
+}
+</style>

src/views/liveClassManager/studentBlacklist.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="m-container">
+    <h2>
+      <el-page-header
+        @back="onCancel"
+        :content="$route.query.name + '黑名单'"
+      ></el-page-header>
+    </h2>
+
+    <div class="m-core">
+      <el-form :inline="true" :model="searchForm">
+        <el-form-item>
+          <el-input
+            v-model.trim="searchForm.search"
+            clearable
+            @keyup.enter.native="search"
+            placeholder="学员名/编号/手机号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search" type="primary">搜索</el-button>
+          <el-button @click="onReSet" type="danger">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="btnWrap">
+        <auth auths="imLiveRoomBlack/add">
+          <el-button
+            @click="addBlack"
+            type="primary"
+            style="margin-bottom: 10px"
+            >添加黑名单</el-button
+          >
+        </auth>
+        <auth auths="imLiveRoomBlack/delete">
+          <el-button @click="removes" type="primary" style="margin-bottom: 10px"
+            >移除黑名单</el-button
+          >
+        </auth>
+      </div>
+
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+          @selection-change="handleSelectionChange"
+          @select="onTableSelect"
+          ref="multipleSelection"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column
+            align="center"
+            prop="userId"
+            label="学员编号"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="username"
+            label="学员姓名"
+          ></el-table-column>
+
+          <el-table-column
+            align="center"
+            prop="phone"
+            label="手机号"
+          ></el-table-column>
+          <el-table-column align="center" prop="studentId" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <auth auths="imLiveRoomBlack/delete">
+                  <el-button type="text" @click="deteleBlack(scope.row)"
+                    >删除</el-button
+                  >
+                </auth>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <setBlack @getList="getList" ref="setBlack" />
+  </div>
+</template>
+<script>
+import { addLiveGoodsMapper, getBlackList, deteleBlackList } from "./api";
+import { getLiveGoodsMapperList } from "@/views/liveShopManger/api";
+import pagination from "@/components/Pagination/index";
+import setBlack from "./modals/setBlack";
+export default {
+  name: "eidtPostMsg",
+  components: { pagination, setBlack },
+  data() {
+    return {
+      searchForm: {
+        search: "",
+      },
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      addMuiscVisible: false,
+      multipleSelection: [],
+      chioseIdList: [],
+      isNewPage: false,
+      lookVisible: false,
+      activeRow: { sendFlag: false },
+    };
+  },
+
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await getBlackList({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          roomUid: this.$route.query.roomUid,
+        });
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+        let idList = this.chioseIdList.map((group) => {
+          return group.userId;
+        });
+        this.isNewPage = true;
+        this.$nextTick(() => {
+          this.tableList.forEach((course) => {
+            if (idList.indexOf(course.userId) != -1) {
+              this.$refs.multipleSelection.toggleRowSelection(course, true);
+            }
+          });
+          this.isNewPage = false;
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.searchForm.search = "";
+      this.clearCom();
+      this.search();
+    },
+    async submit() {
+      if (!this.chioseIdList || this.chioseIdList.length <= 0) {
+        this.$message.error("请至少选择一名学员");
+        return;
+      }
+      try {
+        let idList = this.chioseIdList
+          .map((group) => {
+            return group.userId;
+          })
+          .join(",");
+        const res = await addLiveGoodsMapper({
+          liveGoodsIds: idList,
+          liveId: this.activeRow.roomUid,
+        });
+        this.$message.success("添加成功");
+        this.$emit("getList");
+        this.onClose();
+      } catch (e) {
+        console.log(e);
+      }
+
+      // 开始  addGroupMessageList
+      /**
+       *
+
+       */
+      console.log(this.chioseIdList);
+    },
+    handleSelectionChange(val) {
+      if (val.length > 0) {
+        this.chioseIdList = this.chioseIdList.concat(val);
+        this.chioseIdList = this.$helpers.lodash.uniqBy(
+          this.chioseIdList,
+          "userId"
+        );
+      } else {
+        if (this.isNewPage) return;
+        let idList = this.chioseIdList.map((group) => {
+          return group.userId;
+        });
+        this.$nextTick(() => {
+          let tableIdList = [];
+          this.tableList.forEach((group) => {
+            tableIdList.push(group.userId);
+            if (idList.indexOf(group.userId) != -1) {
+              this.$refs.multipleSelection.toggleRowSelection(group, false);
+            }
+          });
+          this.chioseIdList = this.$helpers.lodash.remove(
+            this.chioseIdList,
+            function (item) {
+              return tableIdList.indexOf(item.userId) == -1;
+            }
+          );
+          if (this.chioseIdList.length <= 0) {
+            this.clearCom();
+          }
+        });
+      }
+    },
+    clearCom() {
+      this.chioseIdList = [];
+      this.$refs.multipleSelection.clearSelection();
+    },
+    onTableSelect(rows, row) {
+      let idList = this.chioseIdList.map((group) => {
+        return group.userId;
+      });
+      if (idList.indexOf(row.userId) != -1) {
+        this.chioseIdList.splice(idList.indexOf(row.userId), 1);
+        if (this.chioseIdList.length <= 0) {
+          this.clearCom();
+        }
+      }
+    },
+    onCancel() {
+      this.$router.push("/liveClassManager");
+      this.$store.dispatch("delVisitedViews", this.$route);
+    },
+    async deteleBlack(row) {
+      this.$confirm(`你确定将${row.username}移除黑名单?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          try {
+            const res = await deteleBlackList({
+              roomUid: this.$route.query.roomUid,
+              userIdList: row.userId + "",
+            });
+            this.getList();
+          } catch (e) {
+            console.log(e);
+          }
+        })
+        .catch();
+    },
+    addBlack() {
+      this.$refs.setBlack.openDioag({ roomUid: this.$route.query.roomUid });
+    },
+    removes() {
+      if (!this.chioseIdList || this.chioseIdList.length <= 0) {
+        this.$message.error("请至少选择一名学员");
+        return;
+      }
+      let str = this.chioseIdList
+        .map((group) => {
+          return group.username;
+        })
+        .join(",");
+      this.$confirm(`你确定将${str}移除黑名单?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let idList = this.chioseIdList
+            .map((group) => {
+              return group.userId;
+            })
+            .join(",");
+          try {
+            const res = await deteleBlackList({
+              roomUid: this.$route.query.roomUid,
+              userIdList: idList,
+            });
+            this.$message.success("删除成功");
+            this.getList();
+          } catch (e) {
+            console.log(e);
+          }
+        })
+        .catch();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%;
+}
+.btnWrap {
+  justify-content: flex-start;
+}
+</style>