群聊消息

1

src/App.vue

@@ -449,11 +449,7 @@ input[type="number"] {
   overflow: hidden;
   flex-wrap: nowrap!important;
 }
-.select-all {
-  .el-select__tags {
-    flex-wrap: nowrap!important;
-  }
-}
+
 .el-select__tags {
 
   .el-tag.el-tag--info.el-tag--small.el-tag--light {

src/components/select-all/index.vue

@@ -11,13 +11,15 @@
       <div class="showDev"></div>
     </el-tooltip>
 
-    <div class="select-all">
+    <div class="select-all" ref="selectWrapBox">
+      <!--   collapse-tags   -->
       <el-select
         multiple
         clearable
         filterable
-        collapse-tags
+        :collapse-tags="isCollapseTags"
         class="select"
+        :class="isCollapseTags ? '' : 'selectWrap'"
         v-bind="{ ...$attrs, ...$props }"
         v-on:input="(value) => $emit('input', value)"
         @change="onChange"
@@ -25,7 +27,13 @@
       >
         <slot />
       </el-select>
-      <el-button @click="selectAll" class="btn" v-bind="{ ...$attrs, ...$props  }">
+      <!--      -->
+      <el-button
+        @click="selectAll"
+        class="btn"
+        :style="{ height: this.btnheight + 'px' }"
+        v-bind="{ ...$attrs, ...$props }"
+      >
         全选
       </el-button>
     </div>
@@ -34,10 +42,17 @@
 <script>
 export default {
   name: "select-all",
+  props: {
+    isCollapseTags: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return {
       isShow: false,
       labelStr: null,
+      btnheight: 36,
     };
   },
   mounted() {
@@ -46,15 +61,6 @@ export default {
         (this.$refs?.select?.disabled || false) && this.labelStr?.length > 0;
     });
   },
-  // computed: {
-  //   labelStr() {
-  //     const { selected } = this.$refs.select;
-  //     let labelStr = selected
-  //       .map((item) => (item.label ? item.label : item.value))
-  //       .join(",");
-  //     return labelStr;
-  //   },
-  // },
   watch: {
     "$attrs.value": {
       immediate: true,
@@ -65,7 +71,6 @@ export default {
 
           let labelStr = "";
           if (newVal && newVal.length > 0 && selected) {
-
             labelStr = selected
               .map((item) => (item.label ? item.label : item.value))
               .join(",");
@@ -73,13 +78,14 @@ export default {
             this.isShow =
               (this.$refs?.select?.disabled || false) &&
               this.labelStr?.length > 0;
-                 console.log(this.isShow)
+            // console.log(this.isShow);
           } else {
             this.labelStr = "";
             this.isShow =
               (this.$refs?.select?.disabled || false) &&
               this.labelStr?.length > 0;
           }
+           this.setHeight()
         });
       },
     },
@@ -92,9 +98,16 @@ export default {
         .map((item) => item.value);
       this.$emit("input", values);
       this.$emit("change", values);
+       this.setHeight()
     },
     onChange(val) {
       this.$emit("change", val);
+      this.setHeight()
+    },
+    setHeight() {
+      setTimeout(() => {
+        this.btnheight = this.$refs?.select.$el.offsetHeight;
+      }, 200);
     },
   },
 };
@@ -137,4 +150,14 @@ export default {
     width: 100%;
   }
 }
+.select-all {
+  /deep/.el-select__tags {
+    flex-wrap: nowrap !important;
+  }
+}
+.selectWrap {
+  /deep/.el-select__tags {
+    flex-wrap: wrap !important;
+  }
+}
 </style>

src/views/groupChatManager/api.js

@@ -105,8 +105,8 @@ export function updateImGroup(data) {
 // 获取群聊成员
 export function getGroupMemberList(data) {
   return request({
-    url: api + '/imGroup/queryGroupMemberList',
-    method: 'get',
+    url: api + '/imGroupMember/queryGroupMemberPage',
+    method: 'POST',
     params: data,
     data
   })
@@ -122,4 +122,44 @@ export function getGroupDetail(data) {
   })
 }
 
+// 获取群聊学生
+export function getStudentBasicInfo(data) {
+  return request({
+    url: api + '/studentManage/queryStudentBasicInfo',
+    method: 'get',
+    params: data,
+    data
+  })
+}
+
+// 获取群聊老师
+export function getTeacherBasicInfo(data) {
+  return request({
+    url: api + '/teacher/queryTeacherBasicInfo',
+    method: 'get',
+    params: data,
+    data
+  })
+}
+// 获取群聊员工
+export function getEmployeeBasicInfo(data) {
+  return request({
+    url: api + '/employee/queryEmployeeBasicInfo',
+    method: 'get',
+    params: data,
+    data
+  })
+}
+
+
+// 添加群成员
+export function addGroupMember(data) {
+  return request({
+    url: api + '/imGroupMember/addGroupMember',
+    method: 'post',
+    params: data,
+    data: qs.stringify(data)
+  })
+}
+
 

src/views/groupChatManager/chatDetail.vue

@@ -14,11 +14,9 @@
           </div>
         </descriptions-item>
         <descriptions-item label="所属乐团：">
-          {{ detail.musicGroupName || "--" }}
-        </descriptions-item>
-        <descriptions-item label="所属班级：">
-          {{ detail.className || "--" }}
+          {{ detail.tags || "--" }}
         </descriptions-item>
+
         <descriptions-item label="群聊类型：">
           <div class="flexBox">
             {{ detail.groupType | catgGoupType }}
@@ -40,9 +38,9 @@
           ></el-input>
         </el-form-item>
 
-        <el-form-item prop="groupType">
+        <el-form-item prop="roleType">
           <el-select
-            v-model.trim="searchForm.groupType"
+            v-model.trim="searchForm.roleType"
             filterable
             clearable
             placeholder="角色"
@@ -218,9 +216,9 @@ export default {
           ...this.searchForm,
           imGroupId: this.$route.query.imGroupId,
         });
-        this.tableList = res.data;
-        // this.tableList = res.data.rows;
-        // this.rules.total = res.data.total;
+        // this.tableList = res.data;
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
         let idList = this.chioseIdList.map((group) => {
           return group.id;
         });
@@ -307,7 +305,7 @@ export default {
         this.$refs.eidtCatInfo.openResetDioag(this.detail,type);
     },
     addMembers(){
-      this.$refs.addMember
+      this.$refs.addMember.openDioag()
     }
   },
 };

src/views/groupChatManager/index.vue

@@ -17,7 +17,7 @@
           <chatList v-if="activeIndex === '1'&& permission('/chatList')" />
 
         </el-tab-pane>
-        <el-tab-pane label="定时消息" lazy name="2">
+        <el-tab-pane label="群聊消息" lazy name="2">
           <timingMsgList v-if="activeIndex === '2'&& permission('/timingMsgList')"/>
 
         </el-tab-pane>

src/views/groupChatManager/model/addMember.vue

@@ -8,61 +8,62 @@
       append-to-body
     >
       <div>
-        <el-radio-group v-model="chioseType">
-          <el-radio label="student">学生</el-radio>
-          <el-radio label="teacher">老师</el-radio>
-          <el-radio label="role">员工</el-radio>
-        </el-radio-group>
-        <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-form :model="memberForm" ref="memberForm">
+          <el-form-item
+            label="成员类型"
+            prop="chioseType"
+            :rules="[{ required: true, message: '选择成员类型' }]"
+          >
+            <el-radio-group
+              v-model="memberForm.chioseType"
+              @change="
+                () => {
+                  memberForm.roleType = '';
+                }
+              "
             >
-              <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="name"
-                label="群组名称"
-              ></el-table-column>
-              <el-table-column
-                align="center"
-                prop="memberNum"
-                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>
+              <el-radio label="student">学生</el-radio>
+              <el-radio label="teacher">老师</el-radio>
+              <el-radio label="role">员工</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            label="成员角色"
+            prop="chioseType"
+            v-if="memberForm.chioseType == 'teacher'"
+            :rules="[{ required: true, message: '选择成员角色' }]"
+          >
+            <el-radio-group v-model="memberForm.roleType">
+              <el-radio label="指导老师">指导老师</el-radio>
+              <el-radio label="乐队指导">乐队指导</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            label="成员角色"
+            prop="roleType"
+            v-if="memberForm.chioseType == 'role'"
+            :rules="[{ required: true, message: '选择成员角色' }]"
+          >
+            <el-radio-group v-model="memberForm.roleType">
+              <el-radio label="乐团主管">乐团主管</el-radio>
+              <el-radio label="运营主管">运营主管</el-radio>
+              <el-radio label="衔接老师">衔接老师</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <div>
+          <employeeList
+            ref="employeeList"
+            v-if="memberForm.chioseType == 'role'"
+          />
+          <studentList
+            ref="studentList"
+            v-if="memberForm.chioseType == 'student'"
+          />
+          <teacherList
+            ref="teacherList"
+            v-if="memberForm.chioseType == 'teacher'"
+          />
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -72,16 +73,23 @@
   </div>
 </template>
 <script>
-import { getGroupList, addGroupMessageList } from "../api";
+import { addGroupMember } from "../api";
 import pagination from "@/components/Pagination/index";
+import employeeList from "./employeeList";
+import studentList from "./studentList";
+import teacherList from "./teacherList";
 export default {
   name: "eidtPostMsg",
-  components: { pagination },
+  components: { pagination, employeeList, studentList, teacherList },
   data() {
     return {
       searchForm: {
         search: "",
       },
+      memberForm: {
+        chioseType: "student",
+        roleType: "",
+      },
       tableList: [],
       organList: [],
       rules: {
@@ -102,63 +110,47 @@ export default {
 
   mounted() {},
   methods: {
-    async getList() {
-      try {
-        const res = await getGroupList({
-          ...this.searchForm,
-          page: this.rules.page,
-          rows: this.rules.limit,
-          imSendGroupMessageId: this.activeRow.id,
-        });
-        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() {
-      console.log("添加");
+      let str = "";
+      if (this.memberForm.chioseType == "role") {
+        this.chioseIdList = this.$refs.employeeList.chioseIdList;
+        str = "员工";
+      }
+      if (this.memberForm.chioseType == "student") {
+        this.chioseIdList = this.$refs.studentList.chioseIdList;
+        str = "学员";
+      }
+      if (this.memberForm.chioseType == "teacher") {
+        this.chioseIdList = this.$refs.teacherList.chioseIdList;
+        str = "老师";
+      }
       if (!this.chioseIdList || this.chioseIdList.length <= 0) {
-        this.$message.error("请至少选择一个成员");
+        this.$message.error(`请至少选择一位${str}`);
         return;
       }
-      try {
-        let idList = this.chioseIdList
-          .map((group) => {
-            return group.id;
-          })
-          .join(",");
-        const res = await addGroupMessageList({
-          groupIds: idList,
-          imSendGroupMessageId: this.activeRow.id,
-        });
-        this.$message.success("添加成功");
-        this.$emit("getList");
-        this.onClose();
-      } catch (e) {
-        console.log(e);
-      }
+
+      this.$refs.memberForm.validate(async (flag) => {
+        if (flag) {
+          try {
+            let idList = this.chioseIdList
+              .map((group) => {
+                return group.userId;
+              })
+              .join(",");
+            const res = await addGroupMember({
+              userId: idList,
+              imGroupId: this.$route.query.imGroupId,
+              roleType: this.memberForm.roleType,
+              // imSendGroupMessageId: this.activeRow.id,
+            });
+            this.$message.success("添加成功");
+            this.$emit("getList");
+            this.onClose();
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      });
 
       // 开始  addGroupMessageList
       /**
@@ -201,7 +193,19 @@ export default {
     },
     clearCom() {
       this.chioseIdList = [];
-      this.$refs.multipleSelection.clearSelection();
+      if (this.memberForm.chioseType == "role") {
+         this.$refs.employeeList.chioseIdList = []
+
+      }
+      if (this.memberForm.chioseType == "student") {
+        this.$refs.studentList.chioseIdList = [];
+
+      }
+      if (this.memberForm.chioseType == "teacher") {
+        this.$refs.teacherList.chioseIdList = [];
+
+      }
+      // this.$refs.multipleSelection.clearSelection();
     },
     onTableSelect(rows, row) {
       let idList = this.chioseIdList.map((group) => {
@@ -215,14 +219,17 @@ export default {
       }
     },
     onClose() {
-      this.clearCom();
+      (this.memberForm = {
+        chioseType: "student",
+        roleType: "",
+      }),
+        this.clearCom();
       this.lookVisible = false;
     },
     openDioag(row) {
       this.activeRow = row;
       this.lookVisible = true;
-      console.log(row);
-      this.getList();
+      // this.getList();
     },
   },
 };

src/views/groupChatManager/model/employeeList.vue

@@ -0,0 +1,225 @@
+<template>
+  <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 prop="organId">
+        <el-select
+          class="multiple"
+          v-model.trim="searchForm.organId"
+          filterable
+          clearable
+          collapse-tags
+          placeholder="请选择分部"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </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="userId"
+          label="编号"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="username"
+          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-column
+          align="center"
+          prop="phone"
+          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>
+</template>
+<script>
+import { getEmployeeBasicInfo } from "../api";
+import pagination from "@/components/Pagination/index";
+export default {
+  name: "eidtPostMsg",
+  props:['imGroupId'],
+  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 },
+      chioseType: "",
+    };
+  },
+
+  mounted() {
+        this.$store.dispatch("setBranchs");
+        this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await getEmployeeBasicInfo({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          imGroupId: this.$route.query.imGroupId,
+        });
+        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();
+    },
+
+    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();
+        }
+      }
+    },
+    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/groupChatManager/model/studentList.vue

@@ -0,0 +1,259 @@
+<template>
+  <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 prop="subjectId">
+        <el-select clearable v-model="searchForm.subjectId" placeholder="声部">
+          <el-option
+            v-for="item in selects.subjects"
+            :value="item.id"
+            :label="item.name"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="organId">
+        <el-select
+          class="multiple"
+          v-model.trim="searchForm.organId"
+          filterable
+          clearable
+          collapse-tags
+          placeholder="请选择分部"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="musicGroupId">
+        <el-select
+          class="multiple"
+          v-model.trim="searchForm.musicGroupId"
+          filterable
+          clearable
+          placeholder="请选择乐团"
+        >
+          <el-option
+            v-for="(item, index) in musicGroupList"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </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="userId"
+          label="编号"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="username"
+          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-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>
+</template>
+<script>
+import { getStudentBasicInfo } from "../api";
+import pagination from "@/components/Pagination/index";
+import { getTeamList } from "@/api/teamServer";
+export default {
+  name: "eidtPostMsg",
+  props: ["imGroupId"],
+  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 },
+      chioseType: "",
+      musicGroupList: [],
+    };
+  },
+
+  async mounted() {
+    this.$store.dispatch("setBranchs");
+    this.$store.dispatch("setSubjects");
+    this.getList();
+    await getTeamList({ musicGroupStatus: "PROGRESS", rows: 9999 }).then(
+      (res) => {
+        if (res.code == 200) {
+          this.musicGroupList = res.data.rows;
+        }
+      }
+    );
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await getStudentBasicInfo({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          imGroupId: this.$route.query.imGroupId,
+        });
+        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.searchForm.musicGroupId = "";
+      this.searchForm.organId = "";
+      this.searchForm.subjectId = "";
+      this.clearCom();
+      this.search();
+    },
+
+    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();
+        }
+      }
+    },
+    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/groupChatManager/model/teacherList.vue

@@ -0,0 +1,259 @@
+<template>
+  <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 prop="subjectId">
+        <el-select clearable v-model="searchForm.subjectId" placeholder="声部">
+          <el-option
+            v-for="item in selects.subjects"
+            :value="item.id"
+            :label="item.name"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="organId">
+        <el-select
+          class="multiple"
+          v-model.trim="searchForm.organId"
+          filterable
+          clearable
+          collapse-tags
+          placeholder="请选择分部"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item prop="musicGroupId">
+        <el-select
+          class="multiple"
+          v-model.trim="searchForm.musicGroupId"
+          filterable
+          clearable
+          placeholder="请选择乐团"
+        >
+          <el-option
+            v-for="(item, index) in musicGroupList"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </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="userId"
+          label="编号"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="username"
+          label="老师姓名"
+        ></el-table-column>
+        <!-- <el-table-column
+          align="center"
+          prop="organName"
+          label="分部"
+        ></el-table-column> -->
+
+        <el-table-column
+          align="center"
+          prop="phone"
+          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>
+</template>
+<script>
+import { getTeacherBasicInfo } from "../api";
+import pagination from "@/components/Pagination/index";
+import { getTeamList } from "@/api/teamServer";
+export default {
+  name: "eidtPostMsg",
+  props: ["imGroupId"],
+  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 },
+      chioseType: "",
+      musicGroupList: [],
+    };
+  },
+
+  async mounted() {
+    this.$store.dispatch("setBranchs");
+    this.$store.dispatch("setSubjects");
+    this.getList();
+    // await getTeamList({ musicGroupStatus: "PROGRESS", rows: 9999 }).then(
+    //   (res) => {
+    //     if (res.code == 200) {
+    //       this.musicGroupList = res.data.rows;
+    //     }
+    //   }
+    // );
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await getTeacherBasicInfo({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+          imGroupId: this.$route.query.imGroupId,
+        });
+        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.searchForm.musicGroupId = "";
+      this.searchForm.organId = "";
+      this.searchForm.subjectId = "";
+      this.clearCom();
+      this.search();
+    },
+
+    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();
+        }
+      }
+    },
+    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/modals/addStudentList.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="m-container">
+    <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 prop="organIdList">
+          <select-all
+            class="multiple"
+            clearable
+            filterable
+            collapse-tags
+            multiple
+            v-model.trim="searchForm.organIdList"
+            placeholder="请选择分部"
+          >
+            <el-option
+              v-for="(item, index) in selects.branchs"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </select-all>
+        </el-form-item>
+        <el-form-item prop="subjectId">
+          <el-select
+            v-model="searchForm.subjectId"
+            clearable
+            filterable
+            placeholder="请选择声部"
+          >
+            <el-option
+              v-for="item in selects.subjects"
+              :value="item.id"
+              :label="item.name"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+        </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/add">
+          <el-button
+            @click="addBlack"
+            type="primary"
+            style="margin-bottom: 10px"
+            >导入学员</el-button
+          >
+        </auth>
+        <auth auths="imLiveRoomBlack/delete">
+          <el-button @click="removes" type="danger" 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="organName"
+            label="分部"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="subjectName"
+            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: "liveAddStudentList",
+  // setBlack
+  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() {
+    this.$store.dispatch("setSubjects");
+    this.$store.dispatch("setBranchs");
+    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();
+        this.clearCom();
+      } catch (e) {
+        console.log(e);
+      }
+
+      // 开始  addGroupMessageList
+      /**
+       *
+
+       */
+    },
+    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();
+            this.clearCom();
+          } 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();
+            this.clearCom();
+          } catch (e) {
+            console.log(e);
+          }
+        })
+        .catch();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%;
+}
+.btnWrap {
+  justify-content: flex-start;
+}
+</style>

src/views/liveClassManager/newLiveClass.vue

@@ -176,6 +176,8 @@
               <el-radio label="ORGAN">分部</el-radio>
               <el-radio label="SCHOOL">合作单位</el-radio>
               <el-radio label="TEAM">乐团</el-radio>
+              <el-radio label="CAT">群聊</el-radio>
+              <el-radio label="STUDENT">学生</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-row>
@@ -194,6 +196,7 @@
               v-model.trim="form.organIds"
               filterable
               clearable
+              :isCollapseTags ="false"
               placeholder="请选择分部"
               @change="changeSection"
             >
@@ -219,7 +222,7 @@
               filterable
               clearable
               multiple
-              @change="changeSchool"
+
             >
               <el-option
                 v-for="(item, index) in cooperationList"
@@ -253,6 +256,9 @@
             </select-all>
           </el-form-item>
         </el-row>
+        <el-row>
+
+        </el-row>
         <el-alert
           title="直播间信息"
           type="info"
@@ -354,8 +360,9 @@ import { getToken, getTenantId } from "@/utils/auth";
 import { createLiveBroadcast, resetLiveBroadcastRoomList } from "./api";
 import { queryByOrganId } from "@/api/systemManage";
 import { getTeamList } from "@/api/teamServer";
+import addStudentList from './modals/addStudentList'
 export default {
-  components: { preview },
+  components: { preview,addStudentList },
   data() {
     return {
       name: "新建直播课",
@@ -364,6 +371,8 @@ export default {
         organIds: [],
         schoolIds: [],
         teamIds: [],
+        catIds: [],
+        studentIds: [],
         roomTitle: "",
         speakerId: "",
         liveStartTime: "",
@@ -392,7 +401,14 @@ export default {
     if (this.$route.query.id) {
       this.name = "修改直播间";
       // console.log()
-      this.form = { ...this.$route.query, organIds: [], schoolIds: [],teamIds:[] };
+      this.form = {
+        ...this.$route.query,
+        organIds: [],
+        schoolIds: [],
+        teamIds: [],
+        catIds: [],
+        studentIds: [],
+      };
       this.form.roomConfig = JSON.parse(this.$route.query.roomConfig);
       if (this.$route.query.popularizeOrgIds) {
         this.form.organIds = this.$route.query.popularizeOrgIds
@@ -413,7 +429,6 @@ export default {
       if (this.$route.query.popularizeTeamIds) {
         let arr = this.$route.query.popularizeTeamIds.split(",");
         this.$set(this.form, "teamIds", arr);
-        console.log(this.form.teamIds);
       }
 
       // this.form.popularizeType = "SCHOOL";
@@ -553,7 +568,7 @@ export default {
         this.form.schoolIds = [];
         this.form.teamIds = [];
       }
-      if (this.form.popularizeType == "SCHOOL" || (val && val.length > 0)) {
+      if (this.form.popularizeType == "SCHOOL" && (val && val.length > 0)) {
         let organId = val.join(",");
         try {
           await queryByOrganId({ organId }).then((res) => {
@@ -565,7 +580,7 @@ export default {
           console.log(e);
         }
       }
-      if (this.form.popularizeType == "TEAM" || (val && val.length > 0)) {
+      if (this.form.popularizeType == "TEAM" && (val && val.length > 0)) {
         let organId = val.join(",");
         try {
           await getTeamList({ organId, page: 1, rows: 9999 }).then((res) => {