提交

1

src/constant/index.js

@@ -478,3 +478,12 @@ export const catgGoupType = {
   PARENT_MEETING:'家长会',
   TRAINING:'训练营'
 }
+
+export const catRole = {
+  '指导老师':'指导老师',
+  '乐队指导':'乐队指导',
+  '乐团主管':'乐团主管',
+  '运营主管':'运营主管',
+  '衔接老师':'衔接老师',
+  '学员':''
+}

src/store/modules/permission.js

@@ -1038,6 +1038,19 @@ function setDetailRoute(accessedRoutes) {
             activeMenu: "/littleArtistCamp",
             id: "xx19"
           }
+        },
+        {
+          name: "群聊详情",
+          path: "chatDetail",
+          component: () => import("@/views/groupChatManager/chatDetail"),
+          hidden: true,
+          meta: {
+            noCache: "1",
+            title: "群聊详情",
+            belongTopMenu: "/operateManager",
+            activeMenu: "/groupChatManager",
+            id: "xx19"
+          }
         }
       ]);
     }

src/utils/searchArray.js

@@ -23,7 +23,8 @@ import {
   feedbackType,
   feedbackTypeDesc,
   campState,
-  catgGoupType
+  catgGoupType,
+  catRole
 } from '../constant'
 // 课程类型
 let tenantConfig = sessionStorage.getItem('tenantConfig')
@@ -812,6 +813,7 @@ export const feedbackTypeList = getValueForKey(feedbackType)
 export const feedbackTypeDescList = getValueForKey(feedbackTypeDesc)
 export const campStateList = getValueForKey(campState)
 export const catgGoupTypeList =  getValueForKey(catgGoupType)
+export const catRoleList = getValueForKey(catRole)
 //downListType
 function getValueForKey(obj) {
   let arr = []

src/utils/vueFilter.js

@@ -820,6 +820,9 @@ Vue.filter("couponTypeFilter", value => {
   return constant.couponType[value];
 });
 // couponType
+Vue.filter("catRoleFilter", value => {
+  return constant.couponType[value];
+});
 
 Vue.filter("tenantStatus", value => {
   return constant.tenantStatus[value];

src/views/groupChatManager/api.js

@@ -101,3 +101,25 @@ export function updateImGroup(data) {
     data
   })
 }
+
+// 获取群聊成员
+export function getGroupMemberList(data) {
+  return request({
+    url: api + '/imGroup/queryGroupMemberList',
+    method: 'get',
+    params: data,
+    data
+  })
+}
+
+// 获取群聊详情
+export function getGroupDetail(data) {
+  return request({
+    url: api + '/imGroup/queryGroupDetail',
+    method: 'get',
+    params: data,
+    data
+  })
+}
+
+

src/views/groupChatManager/chatDetail.vue

@@ -0,0 +1,344 @@
+
+<!--  -->
+<template>
+  <div class="m-container">
+    <h2>
+      <el-page-header @back="onCancel" :content="detail.name"></el-page-header>
+    </h2>
+    <div class="m-core">
+      <descriptions :column="3" class="desc">
+        <descriptions-item label="群里聊名称：">
+          <div class="flexBox">
+            {{ detail.name || "--" }}
+            <i class="el-icon-edit" @click="reseDetail('name')"></i>
+          </div>
+        </descriptions-item>
+        <descriptions-item label="所属乐团：">
+          {{ detail.musicGroupName || "--" }}
+        </descriptions-item>
+        <descriptions-item label="所属班级：">
+          {{ detail.className || "--" }}
+        </descriptions-item>
+        <descriptions-item label="群聊类型：">
+          <div class="flexBox">
+            {{ detail.groupType | catgGoupType }}
+            <i class="el-icon-edit" @click="reseDetail('type')"></i>
+          </div>
+        </descriptions-item>
+      </descriptions>
+      <save-form
+        :inline="true"
+        :model="searchForm"
+        @submit="search"
+        @reset="onReSet"
+        ref="searchForm"
+      >
+        <el-form-item prop="search">
+          <el-input
+            v-model="searchForm.search"
+            placeholder="成员姓名/手机号"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="groupType">
+          <el-select
+            v-model.trim="searchForm.groupType"
+            filterable
+            clearable
+            placeholder="角色"
+          >
+            <el-option
+              v-for="(item, index) in catRoleList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></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>
+        </el-form-item>
+      </save-form>
+      <div class="bWrap">
+        <el-button type="primary" @click="addMembers">添加成员</el-button>
+        <el-button type="danger">删除成员</el-button>
+      </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="user.username"
+            label="姓名"
+          ></el-table-column>
+
+          <el-table-column
+            align="center"
+            prop="user.phone"
+            label="手机号"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="roleType"
+            label="角色"
+          ></el-table-column>
+          <el-table-column align="center" prop="roleType" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <auth
+                  auths="imSendGroupMessage/update"
+                  v-if="!scope.row.sendFlag"
+                >
+                  <el-button type="text" @click="resetGroup(scope.row)"
+                    >修改角色</el-button
+                  >
+                </auth>
+                <auth
+                  auths="imSendGroupMessage/delete"
+                  v-if="!scope.row.sendFlag"
+                >
+                  <el-button type="text" @click="deleteStudent(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>
+      <eidtCatInfo ref="eidtCatInfo" @getList="getList" />
+      <addMember ref="addMember" @getList="getList" />
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import load from "@/utils/loading";
+import { getGroupMemberList, getGroupDetail } from "./api";
+import { getSubject } from "@/api/buildTeam";
+import countTo from "vue-count-to";
+import { catRoleList } from "@/utils/searchArray";
+import eidtCatInfo from "./model/eidtCatInfo";
+import addMember from './model/addMember'
+// catRoleFilter
+export default {
+  components: { pagination, "count-to": countTo ,eidtCatInfo,addMember},
+  data() {
+    return {
+      catRoleList,
+      searchForm: {
+        search: null,
+        groupType: null,
+      },
+      detail: {
+        groupType: "",
+        id: "",
+        img: "",
+        introduce: "",
+        memberNum: 0,
+        memo: "",
+        name: "",
+        tags: "",
+        tenantId: 0,
+        type: "",
+      },
+      chatName: "",
+      tableList: [{}],
+      soundList: [],
+      cooperationList: [],
+      musicList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      multipleSelection: [],
+      chioseIdList: [],
+      isNewPage: false,
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 获取分部
+    this.imGroupId = this.$route.query.imGroupId;
+    this.$store.dispatch("setBranchs");
+    this.init();
+  },
+  methods: {
+    init() {
+      getSubject({}).then((res) => {
+        if (res.code == 200) {
+          this.soundList = res.data;
+        }
+      });
+      this.getDetail();
+      this.getList();
+    },
+    async getDetail() {
+      try {
+        const res = await getGroupDetail({ imGroupId: this.imGroupId });
+        this.detail = { ...res.data };
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async getList() {
+      try {
+        const res = await getGroupMemberList({
+          page: this.rules.page,
+          rows: this.rules.limit,
+          ...this.searchForm,
+          imGroupId: this.$route.query.imGroupId,
+        });
+        this.tableList = res.data;
+        // 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();
+    },
+    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();
+        }
+      }
+    },
+    onReSet() {
+      this.rules = {
+        ...this.rules,
+        page: 1,
+      };
+      this.$refs.searchForm.resetFields();
+      this.search();
+    },
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push({
+        path: "/childrensDay",
+      });
+    },
+    deleteStudent(row) {},
+    reseDetail(type){
+        this.$refs.eidtCatInfo.openResetDioag(this.detail,type);
+    },
+    addMembers(){
+      this.$refs.addMember
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+.bWrap {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+}
+.statistic {
+  .statistic-content > span {
+    font-size: 20px !important;
+    &:first-child {
+      font-size: 24px !important;
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: bold;
+    }
+  }
+}
+.desc {
+  margin-bottom: 20px;
+}
+.flexBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  i {
+    font-size: 18px;
+    cursor: pointer;
+  }
+}
+</style>

src/views/groupChatManager/component/chatList.vue

@@ -75,10 +75,15 @@
         <el-table-column align="center" prop="memberNum" label="操作">
           <template slot-scope="scope">
             <div>
-              <auth auths="imGroup/updateImGroup">
+              <!-- <auth auths="imGroup/updateImGroup">
                 <el-button type="text" @click="resetCat(scope.row)"
                   >修改</el-button
                 >
+              </auth> -->
+              <auth auths="imGroup/updateImGroup">
+                <el-button type="text" @click="gotoCatDetail(scope.row)"
+                  >成员管理</el-button
+                >
               </auth>
             </div>
           </template>
@@ -94,7 +99,7 @@
       />
     </div>
     <eidtPostMsg ref="eidtPostMsg" @clear="clearCom" />
-    <eidtCatInfo ref="eidtCatInfo" @getList='getList' />
+    <eidtCatInfo ref="eidtCatInfo" @getList="getList" />
   </div>
 </template>
 <script>
@@ -108,7 +113,7 @@ import { catgGoupTypeList } from "@/utils/searchArray";
 import eidtPostMsg from "../model/eidtPostMsg";
 import eidtCatInfo from "../model/eidtCatInfo";
 export default {
-  components: { pagination, eidtPostMsg ,eidtCatInfo},
+  components: { pagination, eidtPostMsg, eidtCatInfo },
   data() {
     return {
       searchForm: {
@@ -239,8 +244,12 @@ export default {
         }
       }
     },
-    resetCat(row){
-      this.$refs.eidtCatInfo.openResetDioag(row)
+    resetCat(row) {
+      this.$refs.eidtCatInfo.openResetDioag(row);
+    },
+    gotoCatDetail(row){
+      this.$router.push({path:'/operateManager/chatDetail',query:{imGroupId:row.id,name:row.name}})
+      console.log(row)
     }
   },
 };

src/views/groupChatManager/model/addMember.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <el-dialog
+      width="1000px"
+      title="添加成员"
+      :visible.sync="lookVisible"
+      :before-close="onClose"
+      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-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>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getGroupList, addGroupMessageList } from "../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 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("添加");
+      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 addGroupMessageList({
+          groupIds: idList,
+          imSendGroupMessageId: this.activeRow.id,
+        });
+        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;
+      console.log(row);
+      this.getList();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w100 {
+  width: 100%;
+}
+.btnWrap {
+  justify-content: flex-start;
+}
+</style>

src/views/groupChatManager/model/eidtCatInfo.vue

@@ -2,12 +2,13 @@
   <div>
     <el-dialog
       width="500px"
-      title="修改群聊"
+      :title="title"
       :visible.sync="lookVisible"
       :before-close="onClose"
     >
       <el-form :model="formes" label-width="120px" ref="eidtPostMsg">
         <el-form-item
+          v-if="type == 'name'"
           label="群聊名称"
           :rules="[{ required: true, message: '请输入群聊名称' }]"
           prop="name"
@@ -15,12 +16,13 @@
           <el-input class="w100" v-model="formes.name"></el-input>
         </el-form-item>
         <el-form-item
+          v-if="type == 'type'"
           label="群聊类型"
           :rules="[{ required: true, message: '请选择群聊类型' }]"
           prop="groupType"
         >
           <el-select
-          class="w100"
+            class="w100"
             v-model.trim="formes.groupType"
             clearable
             filterable
@@ -58,6 +60,8 @@ export default {
       lookVisible: false,
       chioseIdList: null,
       activeRow: null,
+      type: "",
+      title:''
     };
   },
 
@@ -70,10 +74,15 @@ export default {
       this.chioseIdList = chioseIdList;
       this.lookVisible = true;
     },
-    openResetDioag(row) {
-
+    openResetDioag(row, type) {
+      this.type = type;
+      if(type == 'name'){
+        this.title = '修改群聊名称'
+      }else{
+         this.title = '修改群聊类型'
+      }
       // this.activeRow = row;
-      this.formes = { ...row};
+      this.formes = { ...row };
       this.lookVisible = true;
     },
     onClose() {
@@ -89,10 +98,10 @@ export default {
       this.$refs.eidtPostMsg.validate(async (flag) => {
         if (flag) {
           try {
-            const res = await updateImGroup({...this.formes})
-            this.$message.success('修改成功')
-            this.$emit('getList')
-            this.onClose()
+            const res = await updateImGroup({ ...this.formes });
+            this.$message.success("修改成功");
+            this.$emit("getList");
+            this.onClose();
           } catch (e) {
             console.log(e);
           }
@@ -116,6 +125,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .w100 {
-  width: 100%!important;
+  width: 100% !important;
 }
 </style>