mdm-client 1.0.0

package/src/components/other/appointDialog.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="appoint-dialog" :style="position">
+    <div class="appoint-dialog-title">{{ title }}</div>
+    <div class="member-list">
+      <div
+        :class="['member-item', { 'member-item-checked': tempHostList?.ownerId === item.identity }]"
+        v-for="(item, index) of memberList"
+        :key="'p' + index"
+        @click="setToHost(item)"
+      >
+        <div class="member-item-avatar"></div>
+        <span class="member-item-name">{{ item.name }}</span>
+        <div class="member-item-check"></div>
+      </div>
+    </div>
+    <div class="appoint-dialog-foot">
+      <div class="foot-btn" v-throttle-click:500="appoint">指定并离开</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "@/utils/index";
+
+export default {
+  name: "AppointDialog",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          right: "127px",
+          bottom: "84px",
+        };
+      },
+    },
+    title: {
+      type: String,
+      default: "指定主持人",
+    },
+    participants: {
+      type: Array
+    },
+    meetingHost: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      showMessage: null,
+      memberList: [],
+      tempHostList: null,
+    };
+  },
+  computed: {
+    participantNum() {
+      return this.participants.length;
+    }
+  },
+  watch: {
+    participantNum: {
+      handler() {
+        this.updateMemberList();
+      },
+      immediate: true
+    },
+    participants: {
+      handler() {
+        this.updateMemberList();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+  },
+  mounted() {
+    this.tempHostList = this.meetingHost;
+  },
+  methods: {
+    judgeParticipantIsHost(identity) {
+      return this.meetingHost?.ownerId === identity;
+    },
+    
+    appoint() {
+      if (this.judgeParticipantIsHost(this.tempHostList.ownerId)) {
+        this.showMessage.message("info", "当前与会者为已存在的会议主持人，无法更改");
+        return;
+      }
+      this.$emit("appointHost", this.tempHostList);
+      this.$emit("closeDialog");
+    },
+    
+    setToHost(member) {
+      this.tempHostList = {
+        ownerId: member.identity,
+        ownerName: member.name,
+      };
+    },
+    
+    updateMemberList() {
+      if (this.participantNum > 0) {
+        // 直接根据 props.participants 重新构建 memberList
+        this.memberList = this.participants.filter(participant => {
+          // 过滤掉非pc端和app端与会者，因为pc端和app端可以设置主持人
+          return participant.metadata.platformID == 0 || participant.metadata.platformID == 1;
+        }).map((participant) => {
+          return {
+            identity: participant.identity,
+            name: participant.name,
+            metadata: participant.metadata
+          };
+        });
+      } else {
+        this.memberList = [];
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.appoint-dialog {
+  width: 220px;
+  position: absolute;
+  z-index: 100;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border-radius: 8px;
+  border: 1px solid var(--dialog-border-color);
+  font-weight: 500;
+  color: var(--theme-font-color);
+  padding: 0 12px 12px;
+  &-title {
+    width: 100%;
+    line-height: 40px;
+    padding-left: 12px;
+    white-space: nowrap;
+    font-size: 16px;
+    font-weight: 500;
+    border-bottom: 1px solid var(--dialog-border-color);
+  }
+  .member-list {
+    width: 100%;
+    height: 121px;
+    overflow-y: auto;
+    padding: 10px 12px;
+    .member-item {
+      width: 100%;
+      height: 32px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      padding-left: 8px;
+      &:not(:last-child) {
+        margin-bottom: 12px;
+      }
+      &-avatar {
+        flex-shrink: 0;
+        width: 18px;
+        height: 18px;
+        margin-right: 9px;
+        background: url("../../assets/image/common/default_avatar.png") no-repeat center / 100% 100%;
+      }
+      &-name {
+        display: inline-block;
+        flex-shrink: 0;
+        white-space: nowrap;
+        width: calc(100% - 45px);
+        max-width: calc(100% - 45px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &-checked {
+        // background: #1f63fb;
+        // border-radius: 8px;
+        .member-item-check {
+          background: var(--dialog-item-checked-icon) no-repeat center / 100% 100%;
+        }
+      }
+      &:hover {
+        background: var(--dialog-item-hover);
+      }
+      &-check {
+        flex-shrink: 0;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+  &-foot {
+    width: 100%;
+    .foot-btn {
+      background: var(--btn-primary-bg);
+      box-shadow: 0px 2px 12px 0px rgba(42, 104, 246, 0.15);
+      border-radius: 8px;
+      cursor: pointer;
+      line-height: 40px;
+      text-align: center;
+      font-weight: 500;
+      font-size: 16px;
+    }
+  }
+}
+</style>

package/src/components/other/callBoard.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="call-board">
+    <div class="call-board-title">
+      <span>拨号盘</span>
+      <div class="title-close-icon" @click="$emit('closeCallBoard')"></div>
+    </div>
+    <div class="input-box">
+      <el-input v-model="callNum" type="mobile" placeholder="请输入号码" clearable autofocus>
+        <div slot="suffix" class="del-icon" @click="delCallNum"></div>
+      </el-input>
+    </div>
+    <div class="call-board-list">
+      <div class="call-board-list-item" v-for="item of '123456789*0#'" @click="inputCallNum(item)">
+        {{ item }}
+      </div>
+    </div>
+    <div class="call-board-foot">
+      <div class="call-board-foot-btn call-btn" v-throttle-click:500="call">
+        <div class="btn-icon"></div>
+      </div>
+      <div class="call-board-foot-btn mini-btn" v-throttle-click:500="miniCall">
+        <div class="btn-icon"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "@/utils/index";
+
+export default {
+  name: "CallBoard",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          right: "127px",
+          bottom: "84px",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      showMessage: null,
+      callNum: "",
+    };
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+  },
+  methods: {
+    verifyMobile(num) {
+      const reg = /^[\d#*]+$/;
+      return reg.test(num);
+    },
+    
+    inputCallNum(item) {
+      // if(this.verifyMobile(item)) {
+      //   this.callNum += item
+      // } else {
+      //   this.showMessage.message("error", "请输入合法的字符")
+      // }
+      this.callNum += item;
+    },
+    
+    delCallNum() {
+      if(this.callNum.length > 0) {
+        this.callNum = this.callNum.substring(0, this.callNum.length - 1);
+      }
+    },
+    
+    call() {
+      if (!this.callNum) {
+        this.showMessage.message("error", "联系方式不能为空");
+      } else {
+        if (this.verifyMobile(this.callNum)) {
+          this.$emit("phoneCall", this.callNum);
+        } else {
+          this.showMessage.message("error", "手机号中包含不合法字符");
+        }
+      }
+    },
+    
+    miniCall() {
+      if (!this.callNum) {
+        this.showMessage.message("error", "联系方式不能为空");
+      } else {
+        this.$emit("miniCall", this.callNum);
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.call-board {
+  position: absolute;
+  width: 270px;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border-radius: 8px;
+  border: 1px solid var(--dialog-border-color);
+  padding: 0 12px;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--theme-font-color);
+  z-index: 20000;
+  bottom: 40px;
+  left: -135px;
+  &-title {
+    width: 100%;
+    height: 43px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--dialog-border-color);
+    margin-bottom: 12px;
+    .title-close-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+    }
+  }
+  .input-box {
+    margin-bottom: 12px;
+    :deep(.el-input) {
+      width: 100%;
+      height: 42px;
+      @include elInput;
+    }
+  }
+  &-list {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px 12px;
+    margin-bottom: 10px;
+    &-item {
+      cursor: pointer;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      font-weight: 500;
+      font-size: 24px;
+      background: var(--call-border-item-bg);
+      border-radius: 6px 6px 6px 6px;
+    }
+  }
+  &-foot {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    &-btn {
+      width: 117px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--call-border-item-bg);
+      border-radius: 6px 6px 6px 6px;
+      .btn-icon {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+    .call-btn {
+      .btn-icon {
+        background: url("../../assets/image/screenBlue/call_video_icon.png") no-repeat center / 100% 100%;
+      }
+    }
+    .mini-btn {
+      .btn-icon {
+        background: url("../../assets/image/screenBlue/call_mini_icon.png") no-repeat center / 100% 100%;
+      }
+    }
+  }
+  .del-icon {
+    width: 17px;
+    height: 17px;
+    cursor: pointer;
+    background: var(--call-border-del-icon) no-repeat center / 100% 100%;
+  }
+}
+</style>