mdm-client 1.0.0

package/src/components/other/memberManage.vue

@@ -0,0 +1,502 @@
+<template>
+  <div class="member-manage">
+    <div class="member-manage-head">
+      <div class="member-manage-head-left">
+        <div class="logo"></div>
+        <div class="title">成员管理</div>
+        <div class="num" v-show="participantNum > 0">
+          （{{ participantNum }}）
+        </div>
+      </div>
+      <div class="close" @click="closeMemberManager"></div>
+    </div>
+    <el-tabs v-model="activeName" class="member-manage-contain" @tab-click="handleTabClick">
+      <el-tab-pane label="会议中" name="joined">
+        <div class="tab-content">
+          <el-input v-model="joinedSearchVal" placeholder="请输入名称查询">
+            <div slot="suffix" class="input-suffix-icon"></div>
+          </el-input>
+          <div :class="['member-list', {'member-list-expand': !judgeParticipantIsHost(localIdentity) && !judgeParticipantIsCoHost(localIdentity)}]">
+            <div class="member-list-item" v-for="item of joinedList" :key="item.identity">
+              <div class="member-list-item-group">
+                <img class="avatar" src="../../assets/image/common/default_avatar.png" alt="" />
+                <span class="name">{{ item.name }}</span>
+                <span class="host" v-if="item.metadata?.isOwner">主持人</span>
+                <span class="host-co" v-else-if="item.metadata?.isCoHost">联席主持人</span>
+              </div>
+              <div class="member-list-item-group">
+                <div
+                  :class="[
+                    'icon-btn',
+                    item.isMicrophoneEnabled ? 'icon-btn-mic-on' : 'icon-btn-mic-off',
+                  ]"
+                  @click="switchMemberMicrophoneStatus(item.identity, item.isMicrophoneEnabled)"
+                ></div>
+                <div
+                  :class="[
+                    'icon-btn',
+                    item.isCameraEnabled ? 'icon-btn-cam-on' : 'icon-btn-cam-off',
+                  ]"
+                  @click="switchMemberCameraStatus(item.identity, item.isCameraEnabled)"
+                ></div>
+                <div
+                  v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)"
+                  class="icon-btn icon-btn-option"
+                  @click="openMoreDialog(item.identity, $event)"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="tab-content-foot">
+            <div class="tab-content-foot-btn" @click="$emit('allMicrophoneClose')">
+              <span>全员静音</span>
+            </div>
+            <div class="tab-content-foot-btn" @click="$emit('allCameraClose')">
+              <span>全员关闭摄像头</span>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <template v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)">
+        <el-tab-pane label="未入会" name="unJoin">
+          <div class="tab-content">
+            <el-input v-model="unJoinSearchVal" placeholder="请输入名称查询">
+              <div slot="suffix" class="input-suffix-icon"></div>
+            </el-input>
+            <div :class="['member-list', {'member-list-expand': !judgeParticipantIsHost(localIdentity) && !judgeParticipantIsCoHost(localIdentity)}]">
+              <div class="member-list-item" v-for="item of unJoinList" :key="item.mobile">
+                <div class="member-list-item-group">
+                  <img class="avatar" src="../../assets/image/common/default_avatar.png" alt="" />
+                  <span class="name">{{ item.userName }}</span>
+                  <span class="host" v-if="item.metadata?.isOwner">主持人</span>
+                  <span class="host-co" v-else-if="item.metadata?.isCoHost">联席主持人</span>
+                </div>
+                <div class="member-list-item-group">
+                  <div class="text-btn text-btn-remove" @click="removeUnjoinItem(item)">移除</div>
+                  <div class="text-btn text-btn-invite" @click="inviteUnjoinItem(item)">邀请</div>
+                </div>
+              </div>
+            </div>
+            <div class="tab-content-foot" v-if="judgeParticipantIsHost(localIdentity) || judgeParticipantIsCoHost(localIdentity)">
+              <div class="tab-content-foot-btn" @click="$emit('allMicrophoneClose')">
+                <span>全员静音</span>
+              </div>
+              <div class="tab-content-foot-btn" @click="$emit('allCameraClose')">
+                <span>全员关闭摄像头</span>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MemberManage",
+  props: {
+    joinedList: {
+      type: Array,
+    },
+    participants: {
+      type: Array,
+    },
+    localIdentity: {
+      type: String,
+    },
+    meetingNum: {
+      type: String,
+    },
+    meetingName: {
+      type: String,
+    },
+    meetingHost: {
+      type: Object,
+    },
+    meetingCoHost: {
+      type: Array,
+    },
+    unJoinedList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      activeName: "joined",
+      joinedSearchVal: "",
+      unJoinSearchVal: "",
+      unJoinList: [],
+    };
+  },
+  computed: {
+    participantNum() {
+      return this.participants.length;
+    },
+    unJoinedNum() {
+      return this.unJoinedList.length;
+    }
+  },
+  watch: {
+    joinedSearchVal(newVal) {
+      this.$emit("filterJoinedList", newVal);
+    },
+    'meetingHost.ownerId'(newVal) {
+      this.$emit("filterJoinedList", this.joinedSearchVal);
+    },
+    participantNum(newVal) {
+      this.getUnJoinList(this.unJoinSearchVal);
+    },
+    unJoinedNum(newVal) {
+      this.getUnJoinList(this.unJoinSearchVal);
+    },
+    unJoinSearchVal(newVal) {
+      this.getUnJoinList(newVal);
+    }
+  },
+  mounted() {
+    this.getUnJoinList(this.unJoinSearchVal);
+    this.initGlobleEvent();
+  },
+  beforeDestroy() {
+    this.removeGlobleEvent();
+  },
+  methods: {
+    // 判断与会者是否为主持人
+    judgeParticipantIsHost(identity) {
+      return this.meetingHost.ownerId === identity;
+    },
+    
+    // 判断与会者是否为联席主持人
+    judgeParticipantIsCoHost(identity) {
+      if (this.meetingCoHost.length > 0) {
+        return this.meetingCoHost.some((item) => {
+          return item.coHostId === identity;
+        });
+      } else {
+        return false;
+      }
+    },
+    
+    switchMemberCameraStatus(identity, isMute) {
+      this.$emit("participantCameraSwitch", {
+        identity,
+        isMute,
+      });
+    },
+    
+    switchMemberMicrophoneStatus(identity, isMute) {
+      this.$emit("participantMicrophoneSwitch", {
+        identity,
+        isMute,
+      });
+    },
+    
+    openMoreDialog(identity, e) {
+      this.$emit("openMoreDialog", {
+        identity,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    },
+    
+    clickAwayDom(event) {
+      console.log("点击事件", event.target.className);
+      if (
+        !(
+          event.target.className.includes("icon-btn-option") ||
+          event.target.className.includes("more-icon")
+        )
+      ) {
+        this.$emit("closeMoreDialog");
+      }
+    },
+    
+    initGlobleEvent() {
+      window.addEventListener("click", this.clickAwayDom);
+    },
+    
+    removeGlobleEvent() {
+      window.removeEventListener("click", this.clickAwayDom);
+    },
+    
+    handleTabClick(tab, event) {
+      console.log("tab点击", tab, event);
+    },
+    
+    getUnJoinList(name) {
+      console.log("unJoinList", this.unJoinedList);
+      this.unJoinList = this.unJoinedList.filter((ele) => {
+        return ele.userName.includes(name);
+      });
+    },
+    
+    removeUnjoinItem(item) {
+      this.$emit("removeUnjoinItem", item);
+    },
+    
+    inviteUnjoinItem(item) {
+      this.$emit("appendMemberInvite", item);
+    },
+    
+    // 关闭成员管理
+    closeMemberManager() {
+      this.$emit("close");
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.member-manage {
+  width: 347px;
+  height: 100%;
+  padding: 20px;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border: 1px solid var(--dialog-border-color);
+  border-radius: 5px;
+  position: relative;
+  &-head {
+    width: 100%;
+    height: 42px;
+    border-bottom: 1px solid var(--dialog-border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 5px;
+    margin-bottom: 20px;
+    &-left {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      font-family: var(--title-font);
+      font-weight: 400;
+      font-size: 18px;
+      color: var(--theme-font-color);
+      .logo {
+        width: 24px;
+        height: 24px;
+        background: var(--meeting-member-icon) no-repeat center / 100% 100%;
+        margin-right: 14px;
+      }
+      .title {
+        white-space: nowrap;
+        margin-right: 4px;
+      }
+      .num {
+        white-space: nowrap;
+      }
+    }
+    .close {
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+    }
+  }
+  &-contain {
+    width: 100%;
+    height: calc(100% - 62px);
+    display: flex;
+    flex-direction: column;
+    .tab-content {
+      width: 100%;
+      height: 100%;
+      :deep(.el-input) {
+        width: 100%;
+        height: 42px;
+        margin-bottom: 20px;
+        @include elInput;
+        .input-suffix-icon {
+          width: 20px;
+          height: 20px;
+          background: url("../../assets/image/common/input_search_icon.png") no-repeat center / 100% 100%;
+        }
+      }
+      &-foot {
+        width: 100%;
+        padding: 10px 0;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        &-btn {
+          flex: 1;
+          height: 40px;
+          @include button;
+          @include btnPrimary;
+          span {
+            white-space: nowrap;
+          }
+          &:not(:last-child) {
+            margin-right: 10px;
+          }
+        }
+      }
+      .member-list {
+        width: 100%;
+        height: calc(100% - 132px);
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          width: 2px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 2px;
+          background-color: rgba(0, 0, 0, 0.25);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: none !important;
+          background: transparent !important;
+          border-radius: 5px;
+        }
+        &-item {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          &:not(:last-of-type) {
+            margin-bottom: 20px;
+          }
+          &-group {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            flex-shrink: 0;
+            .avatar {
+              width: 32px;
+              height: 32px;
+              margin-right: 12px;
+            }
+            .name {
+              display: inline-block;
+              font-weight: 400;
+              font-size: 16px;
+              color: var(--theme-font-color);
+              white-space: nowrap;
+              width: fit-content;
+              max-width: 148px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            .host {
+              background: rgba(255,120,0,0.15);
+              border-radius: 20px;
+              line-height: 22px;
+              padding: 0 10px;
+              color: #FF7800;
+              font-family: var(--main-font);
+              font-weight: 400;
+              font-size: 14px;
+              margin-left: 12px;
+              white-space: nowrap;
+              border: 1px solid #FF7800;
+              &-co {
+                background: rgba(12,254,61,0.15);
+                color: #0CFE3D;
+                border: 1px solid #0CFE3D;
+              }
+            }
+            .icon-btn {
+              width: 16px;
+              height: 16px;
+              cursor: pointer;
+              &:not(:last-of-type) {
+                margin-right: 12px;
+              }
+              &-option {
+                background: var(--manager-more-icon) no-repeat center / 100% 100%;
+              }
+              &-mic-on {
+                background: var(--manager-mic-on-icon) no-repeat center / 100% 100%;
+              }
+              &-mic-off {
+                background: url("../../assets/image/common/manager_mic_off_icon.png") no-repeat center / 100%
+                  100%;
+              }
+              &-cam-on {
+                background: var(--manager-cam-on-icon) no-repeat center / 100% 100%;
+              }
+              &-cam-off {
+                background: url("../../assets/image/common/manager_cam_off_icon.png") no-repeat center / 100%
+                  100%;
+              }
+            }
+            .text-btn {
+              width: 80px;
+              height: 32px;
+              line-height: 32px;
+              text-align: center;
+              border-radius: 8px;
+              cursor: pointer;
+              font-weight: 500;
+              font-size: 16px;
+              &:not(:last-of-type) {
+                margin-right: 16px;
+              }
+              &-remove {
+                border: 1px solid #ef5b56;
+                color: #ef5b56;
+              }
+              &-invite {
+                background: #1f63fb;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+        &-expand {
+          height: calc(100% - 70px);
+        }
+      }
+    }
+  }
+  :deep(.el-tabs__header) {
+    margin: 0 0 20px;
+    .el-tabs__nav-wrap {
+      &::after {
+        background-color: transparent;
+        bottom: 0;
+        content: "";
+        height: 2px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+      .el-tabs__nav {
+        width: 100%;
+        .el-tabs__active-bar {
+          display: none;
+        }
+      }
+      .el-tabs__item {
+        font-family: var(--main-font) !important;
+        font-weight: 500 !important;
+        font-size: 16px !important;
+        text-align: center;
+        color: var(--theme-font-color) !important;
+        width: 50%;
+        border: 1px solid var(--meeting-manager-tab-border-color);
+        padding: 0;
+        &:first-child {
+          border-radius: 6px 0 0 6px;
+        }
+        &:last-child {
+          border-radius: 0 6px 6px 0;
+        }
+        &.is-active {
+          background: var(--meeting-manager-tab-active-bg) !important;
+        }
+      }
+    }
+  }
+  :deep(.el-tabs__content) {
+    flex: 1 1;
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
+</style>