mdm-client 1.0.0

package/src/components/other/editGroupDialog.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="visible"
+      append-to-body
+      :show-close="false"
+      class="edit-group-dialog"
+    >
+      <template #title>
+        <div class="dialog-title">
+          编辑分组
+          <span class="close-icon" @click="close"></span>
+        </div>
+      </template>
+      <el-form ref="formRef" :model="form" :rules="rules" class="custom-form">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" maxlength="30" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="排序号" prop="sort">
+          <el-input v-model="form.sort" type="number" :min="0" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+      
+      <!-- 成员区域 -->
+      <div class="members-container">
+        <div class="members-title">成员</div>
+        <div class="members-content">
+          <div class="member-list" v-for="member in members" :key="member.id">
+            <div class="member-list-group">
+              <img class="user-icon" :src="member.avatar ? member.avatar : require('../../assets/image/common/default_avatar_mini.png')" alt="" />
+              <div class="user-name">{{ member.label }}</div>
+            </div>
+            <div class="remove-icon" @click="removeMember(member)"></div>
+          </div>
+        </div>
+      </div>
+      
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="btn btn-plain" @click="close">取消</div>
+          <div class="btn btn-primary" v-throttle-click:500="submit">确定</div>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ShowMessage, queryCommonGroupUserByGroupId, updateCommonGroupAndUser } from "@/utils/index";
+
+export default {
+  name: "EditGroupDialog",
+  props: {
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        id: "",
+        name: "",
+        sort: "",
+      },
+      members: [],
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
+      },
+      showMessage: new ShowMessage()
+    };
+  },
+  methods: {
+    open(group = null) {
+      if (group) {
+        // 填充表单数据
+        this.form.id = group.id;
+        this.form.name = group.label;
+        this.form.sort = group.order ? String(group.order) : "0";
+        queryCommonGroupUserByGroupId({
+          groupID: group.id,
+        }, {
+          baseUrl: this.baseUrl,
+          token: this.token,
+        }).then(res => {
+          if (res.data?.code == 200) {
+            this.members = res.data.data.map(item => {
+              return {
+                id: item.userID,
+                label: item.userName,
+                avatar: item?.avatar ?? "",
+                phone: item.phone,
+                loginCode: item?.loginCode ? item.loginCode : "",
+              }
+            });
+          }
+        })
+      } else {
+        // 重置表单
+        this.form.id = "";
+        this.form.name = "";
+        this.form.sort = "";
+        this.members = [];
+      }
+      this.visible = true;
+    },
+    removeMember(member) {
+      const index = this.members.findIndex(item => item.id === member.id);
+      if (index !== -1) {
+        this.members.splice(index, 1);
+      }
+    },
+    close() {
+      this.visible = false;
+      this.$emit("refreshCommonGroupTree");
+    },
+    submit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交逻辑
+          updateCommonGroupAndUser({
+            groupID: this.form.id,
+            groupName: this.form.name,
+            order: Number(this.form.sort),
+            user: this.members.map(item => {
+              return {
+                userID: item.id,
+                userName: item.label,
+                phone: item.phone,
+                loginCode: item?.loginCode ? item.loginCode : "",
+              }
+            })
+          }, {
+            baseUrl: this.baseUrl,
+            token: this.token,
+          }).then(res => {
+            if (res.data?.code == 200) {
+              this.close();
+            } else {
+              this.showMessage.error(res.data?.msg);
+            }
+          }).catch(err => {
+            this.showMessage.error(err.message);
+          })
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+
+:deep(.el-dialog) {
+  width: 510px !important;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  @include dialog;
+}
+
+:deep(.el-form) {
+  margin-top: 40px;
+  width: 100%;
+  padding: 0 20px;
+  .el-form-item {
+    margin-bottom: 20px;
+    display: flex;
+    width: 100%;
+    .el-form-item__label {
+      width: 80px;
+      padding-right: 20px;
+    }
+    .el-form-item__content {
+      flex: none;
+      width: calc(100% - 80px);
+    }
+    .el-input {
+      width: 100%;
+    }
+  }
+}
+
+.edit-group-dialog {
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+  
+  .members-container {
+    width: 100%;
+    padding: 0 20px;
+    
+    .members-title {
+      margin-bottom: 10px;
+      font-weight: 500;
+      font-size: 18px;
+      color: #FFFFFF;
+    }
+    
+    .members-content {
+      min-height: 238px;
+      overflow: auto;
+      max-height: 238px;
+      border: 1px solid var(--dialog-border-color);
+      border-radius: 6px;
+      padding: 20px 14px;
+      
+      .member-list {
+        width: 100%;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--theme-font-color);
+        
+        &-group {
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          
+          .user-icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 12px;
+          }
+          
+          .user-name {
+            width: fit-content;
+            max-width: 300px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        
+        .remove-icon {
+          width: 17px;
+          height: 17px;
+          background: url("../../assets/image/common/unchosen_icon.png") no-repeat center / 100% 100%;
+          cursor: pointer;
+        }
+        
+        &:not(:last-child) {
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+  
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    padding: 40px 0;
+    .btn {
+      width: 100px;
+      height: 36px;
+      @include button;
+      &.btn-primary {
+        @include btnPrimary;
+      }
+      &.btn-plain {
+        border: 1px solid var(--btn-primary-bg);
+        color: var(--btn-primary-bg);
+        background: transparent;
+      }
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>

package/src/components/other/inviteNonContactDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="visible"
+      append-to-body
+      :show-close="false"
+      class="invite-dialog"
+    >
+      <div slot="title" class="dialog-title">
+        邀请非通讯录人员
+        <span class="close-icon" @click="close"></span>
+      </div>
+      <el-form ref="formRef" :model="form" :rules="rules" class="invite-form">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="form.name" maxlength="30" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="form.phone" maxlength="11" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="btn btn-plain" @click="close">取消</div>
+          <div class="btn btn-primary" v-throttle-click:500="submit">确定</div>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { randomString, ShowMessage } from "@/utils/index";
+
+export default {
+  name: "InviteNonContactDialog",
+  props: {
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        name: "",
+        phone: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [{ required: true, validator: this.validatePhone, trigger: "blur" }],
+      },
+      showMessage: new ShowMessage()
+    };
+  },
+  methods: {
+    validatePhone(rule, value, callback) {
+      if (!value) {
+        callback(new Error("请输入电话号码"));
+      } else if (!/^1[3-9]\d{9}$/.test(value)) {
+        callback(new Error("请输入正确的手机号码"));
+      } else {
+        callback();
+      }
+    },
+    open() {
+      this.form.name = "";
+      this.form.phone = "";
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    submit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交逻辑
+          this.$emit("addOutterContactToChosenList", {
+            id: Number(randomString(16)),
+            label: this.form.name,
+            phone: this.form.phone,
+          });
+          this.close();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+
+:deep(.el-dialog) {
+  width: 510px !important;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  @include dialog;
+}
+
+:deep(.el-form) {
+  margin-top: 40px;
+  .el-form-item {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    .el-form-item__label {
+      width: 65px;
+      padding-right: 20px;
+    }
+    .el-form-item__content {
+      flex: none;
+      width: 281px;
+    }
+    .el-input {
+      width: 100%;
+    }
+  }
+}
+
+.invite-dialog {
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 40px;
+    .btn {
+      width: 100px;
+      height: 36px;
+      @include button;
+      &.btn-primary {
+        @include btnPrimary;
+      }
+      &.btn-plain {
+        border: 1px solid var(--btn-primary-bg);
+        color: var(--btn-primary-bg);
+        background: transparent;
+      }
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>

package/src/components/other/layoutSwitch.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="dialog" :style="position">
+    <div class="dialog-inner">
+      <div :class="['layout-list', currentLayout === layout ? ('layout-list-' + layout + '-active') : ('layout-list-' + layout)]" v-for="(layout, index) of layoutList" :key="layout" @click="setLayout(layout)">
+        <div class="icon"></div>
+        <div class="title">{{ layoutLabels[index] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "@/utils/index";
+
+export default {
+  name: "LayoutSwitch",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          right: "0px",
+          top: "0px",
+        };
+      },
+    },
+    currentLayout: {
+      type: String
+    },
+    layoutList: {
+      type: Array
+    },
+    layoutLabels: {
+      type: Array
+    },
+    currentRoomMode: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      showMessage: null,
+    };
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+  },
+  methods: {
+    setLayout(layout) {
+      if(this.currentRoomMode === "normal") {
+        // 仅当当前为会议模式时允许切换布局
+        this.$emit("setLayout", layout);
+      } else {
+        this.showMessage.message("info", "点调模式下无法切换布局，请切换到会议模式后重试");
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  position: absolute;
+  z-index: 100;
+  padding-top: 10px;
+  // background: transparent;
+  width: 175px;
+  height: auto;
+  &-inner {
+    background: var(--dialog-bg);
+    box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+    border-radius: 8px;
+    border: 1px solid var(--dialog-border-color);
+    width: 100%;
+    height: 92px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    .layout-list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .icon {
+        width: 50px;
+        height: 26px;
+        margin-bottom: 6px;
+      }
+      .title {
+        font-weight: 500;
+        font-size: 16px;
+        color: var(--theme-font-color);
+        line-height: 22px;
+        white-space: nowrap;
+      }
+      &-grid {
+        .icon {
+          background: url("../../assets/image/common/layout1.png") no-repeat center / 100% 100%;
+        }
+        &:hover {
+          .icon {
+            background: url("../../assets/image/common/layout-active1.png") no-repeat center / 100% 100% !important;
+          }
+          .title {
+            color: var(--btn-primary-bg);
+          }
+        }
+        &-active {
+          .icon {
+            background: url("../../assets/image/common/layout-active1.png") no-repeat center / 100% 100% !important;
+          }
+          .title {
+            color: var(--btn-primary-bg);
+          }
+        }
+      }
+      &-rightSide {
+        .icon {
+          background: url("../../assets/image/common/layout2.png") no-repeat center / 100% 100%;
+        }
+        &:hover {
+          .icon {
+            background: url("../../assets/image/common/layout-active2.png") no-repeat center / 100% 100% !important;
+          }
+          .title {
+            color: var(--btn-primary-bg);
+          }
+        }
+        &-active {
+          .icon {
+            background: url("../../assets/image/common/layout-active2.png") no-repeat center / 100% 100% !important;
+          }
+          .title {
+            color: var(--btn-primary-bg);
+          }
+        }
+      }
+      // &-ring {
+      //   .icon {
+      //     background: url('/assets/img/meeting/layout3.png') no-repeat center / 100% 100%;
+      //   }
+      //   &:hover {
+      //     .icon {
+      //       background: url('/assets/img/meeting/layout-active3.png') no-repeat center / 100% 100% !important;
+      //     }
+      //     .title {
+      //       color: #5FA7FD;
+      //     }
+      //   }
+      //   &-active {
+      //     .icon {
+      //       background: url('/assets/img/meeting/layout-active3.png') no-repeat center / 100% 100% !important;
+      //     }
+      //     .title {
+      //       color: #5FA7FD;
+      //     }
+      //   }
+      // }
+      // &-downLSide {
+      //   .icon {
+      //     background: url('/assets/img/meeting/layout4.png') no-repeat center / 100% 100%;
+      //   }
+      //   &:hover {
+      //     .icon {
+      //       background: url('/assets/img/meeting/layout-active4.png') no-repeat center / 100% 100% !important;
+      //     }
+      //     .title {
+      //       color: #5FA7FD;
+      //     }
+      //   }
+      //   &-active {
+      //     .icon {
+      //       background: url('/assets/img/meeting/layout-active4.png') no-repeat center / 100% 100% !important;
+      //     }
+      //     .title {
+      //       color: #5FA7FD;
+      //     }
+      //   }
+      // }
+    }
+  }
+}
+</style>

package/src/components/other/leaveOptionDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="check-dialog" :style="position">
+    <div class="check-dialog-inner">
+      <div class="control-list">
+        <div
+          :class="['control-list-item']"
+          v-for="item of otherOptionList"
+          :key="item.value"
+          @click="chooseOtherItem(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeaveOptionDialog",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          left: "0px",
+          bottom: "40px",
+        };
+      },
+    },
+    otherOptionList: {
+      type: Array,
+      default: () => {
+        return ["结束会议", "离开会议"];
+      },
+    },
+  },
+  methods: {
+    chooseOtherItem(item) {
+      switch (item) {
+        case "结束会议":
+          this.$emit("cancelMeeting");
+          break;
+        case "离开会议":
+          this.$emit("leaveMeeting");
+          break;
+        default:
+          break;
+      }
+      this.$emit("optionClose");
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.check-dialog {
+  width: 160px;
+  position: absolute;
+  z-index: 100;
+  &-inner {
+    width: 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);
+    padding: 20px 25px;
+    .control-list {
+      width: 100%;
+      font-weight: 500;
+      color: var(--theme-font-color);
+      &-item {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        cursor: pointer;
+        font-size: 16px;
+        text-align: center;
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+        &:hover {
+          background: var(--btn-danger-bg);
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
+</style>