cloud-web-corejs 1.0.54-dev.637 → 1.0.54-dev.638

package/src/layout/components/callCenter/default.vue

@@ -1,768 +0,0 @@
-<template>
-  <div class="call-center-float" :style="panelStyle">
-    <div class="call-center-float__header" @mousedown="onDragStart">
-      <div class="call-center-float__status-row">
-        <span class="call-center-float__label">座席状态:</span>
-        <span class="call-center-float__status" :class="statusClass">{{
-          agentStatusText
-        }}</span>
-        <span
-          class="call-center-float__label call-center-float__label--incoming"
-          >来电号码:</span
-        >
-        <span class="call-center-float__incoming">{{
-          incomingNumber || "—"
-        }}</span>
-      </div>
-      <button
-        type="button"
-        class="call-center-float__toggle"
-        :title="collapsed ? '展开' : '收起'"
-        @mousedown.stop
-        @click="collapsed = !collapsed"
-      >
-        {{ collapsed ? "▲" : "▼" }}
-      </button>
-    </div>
-
-    <div v-show="!collapsed" class="call-center-float__body">
-      <input
-        v-model.trim="dialNumber"
-        class="call-center-float__input"
-        type="text"
-        placeholder="请输入外呼号码"
-        :disabled="!isOnWork"
-        @keyup.enter="handleDial"
-      />
-      <button
-        type="button"
-        class="call-center-float__btn call-center-float__btn--dial"
-        :disabled="!canDial"
-        title="外呼"
-        @click="handleDial"
-      >
-        <i class="call-center-float__phone-icon" />
-      </button>
-      <button
-        v-for="btn in actionButtons"
-        :key="btn.key"
-        type="button"
-        class="call-center-float__btn call-center-float__btn--action"
-        :disabled="btn.disabled"
-        @click="btn.handler"
-      >
-        {{ btn.label }}
-      </button>
-    </div>
-
-    <audio id="webcam" autoplay style="display: none" />
-  </div>
-</template>
-
-<script>
-import {
-  getAgentStateMeta,
-  canAgentDial,
-  isRestAgentState,
-  resolveAgentStateFromPayload,
-} from "./agentState";
-
-const RING_MSG_TYPES = [
-  "PhoneStateUserRing",
-  "PhoneStateAgentRing",
-  "PhoneStateRing",
-  "StartService",
-];
-
-const CALL_ACTIVE_MSG_TYPES = [
-  "StartService",
-  "PhoneStateAgentRing",
-  "PhoneStateAgentConnected",
-  "PhoneStateUserConnected",
-  "PhoneStateUserRing",
-  "PhoneStateRing",
-  "PhoneStateConnected",
-];
-
-const CALL_END_MSG_TYPES = [
-  "StopService",
-  "AgentHangUp",
-  "PhoneStateDisConnected",
-];
-
-export default {
-  name: "CallCenterFloat",
-  props: {
-    option: Object,
-  },
-  data() {
-    return {
-      sdkReady: false,
-      configReady: false,
-      collapsed: false,
-      agentState: "-1",
-      incomingNumber: "",
-      dialNumber: "",
-      currentCall: null,
-      isOnWork: false,
-      position: { left: null, right: 24, bottom: 24 },
-      dragging: false,
-      dragOffset: { x: 0, y: 0 },
-      pendingAgentState: null,
-      pendingAgentStateTimer: null,
-    };
-  },
-  computed: {
-    agentStatusText() {
-      if (!this.configReady) {
-        return "未配置";
-      }
-      if (!this.sdkReady) {
-        return "未就绪";
-      }
-      return getAgentStateMeta(this.agentState).label;
-    },
-    statusClass() {
-      return getAgentStateMeta(this.agentState).className;
-    },
-    panelStyle() {
-      const style = {
-        bottom: `${this.position.bottom}px`,
-        zIndex: 10000,
-      };
-      if (this.position.left !== null) {
-        style.left = `${this.position.left}px`;
-        style.right = "auto";
-      } else {
-        style.right = `${this.position.right}px`;
-        style.left = "auto";
-      }
-      return style;
-    },
-    canDial() {
-      return (
-        this.isOnWork &&
-        !!this.dialNumber &&
-        canAgentDial(this.agentState)
-      );
-    },
-    actionButtons() {
-      return [
-        {
-          key: "hangup",
-          label: "挂机",
-          disabled: !this.currentCall,
-          handler: this.handleHangUp,
-        },
-        {
-          key: "onWork",
-          label: "上班",
-          disabled: this.isOnWork,
-          handler: this.handleOnWork,
-        },
-        {
-          key: "offWork",
-          label: "下班",
-          disabled: !this.isOnWork,
-          handler: this.handleOffWork,
-        },
-        {
-          key: "idle",
-          label: "空闲",
-          disabled: !this.isOnWork,
-          handler: () => this.handleUpdateState("1"),
-        },
-        {
-          key: "busy",
-          label: "忙碌",
-          disabled: !this.isOnWork,
-          handler: () => this.handleUpdateState("0"),
-        },
-        {
-          key: "rest",
-          label: "小休",
-          disabled: !this.isOnWork,
-          handler: () => this.handleUpdateState("114"),
-        },
-        {
-          key: "meal",
-          label: "用餐",
-          disabled: !this.isOnWork,
-          handler: () => this.handleUpdateState("118"),
-        },
-      ];
-    },
-  },
-  mounted() {
-    this.initCallCenter();
-    document.addEventListener("mousemove", this.onDragMove);
-    document.addEventListener("mouseup", this.onDragEnd);
-  },
-  beforeDestroy() {
-    document.removeEventListener("mousemove", this.onDragMove);
-    document.removeEventListener("mouseup", this.onDragEnd);
-    this.clearPendingAgentStateTimer();
-  },
-  methods: {
-    getServ() {
-      return window.zcVertoServ;
-    },
-    isConfigReady() {
-      const cfg = this.option;
-      return !!(
-        cfg.client_id &&
-        cfg.client_secret &&
-        cfg.companyId &&
-        cfg.agentId
-      );
-    },
-    initCallCenter() {
-      this.configReady = this.isConfigReady();
-      if (!this.configReady) {
-        return;
-      }
-      const serv = this.getServ();
-      if (!serv || typeof serv.ininServ !== "function") {
-        console.warn(
-          "[CallCenter] zcVertoServ 未加载，请检查 index.html 脚本引用"
-        );
-        return;
-      }
-
-      this.sdkReady = true;
-      const option = this.option;
-      const params = {
-        client_id: option.client_id,
-        client_secret: option.client_secret,
-        companyId: option.companyId,
-        appId: option.appId,
-
-        agentId: option.agentId,
-        groupId: option.groupId,
-        voipAccount: option.voipAccount,
-        callWay: option.callWay,
-      };
-
-      serv.ininServ(params, this.onSocketMessage, this.onSdkError);
-      serv.getToken((res) => {
-        if (!res || !res.access_token) {
-          this.notifyError("获取呼叫中心 Token 失败");
-          return;
-        }
-        serv.queryAgentState((rs) => {
-          if (rs && String(rs.retCode) === "000000" && rs.item) {
-            const state = resolveAgentStateFromPayload(rs.item);
-            if (state !== null) {
-              this.applyAgentState(state);
-            }
-            if (Number(rs.item.agentState) >= 0) {
-              this.isOnWork = true;
-              serv.reConnect();
-            }
-          }
-        });
-      });
-      /* serv.queryAgentState((rs) => {
-        debugger;
-        if (rs && rs.retCode === "000000" && rs.item) {
-          this.applyAgentState(rs.item.agentState);
-          if (Number(rs.item.agentState) >= 0) {
-            this.isOnWork = true;
-            serv.reConnect();
-          }
-        }
-      }); */
-    },
-    onSdkError(msg) {
-      this.notifyError(msg || "呼叫中心操作失败");
-    },
-    onSocketMessage(res) {
-      if (!res || !res.data) {
-        return;
-      }
-      let data;
-      try {
-        data = JSON.parse(res.data);
-      } catch (e) {
-        return;
-      }
-
-      if (!data.msgType) {
-        return;
-      }
-
-      let option = this.option;
-
-      switch (data.msgType) {
-        case "onLine":
-          break;
-        case "offLine":
-        case "repeat":
-          this.isOnWork = false;
-          this.applyAgentState("-1");
-          this.currentCall = null;
-          if (data.msgType === "repeat") {
-            this.notifyError("呼叫中心账号已在其他窗口登录");
-          }
-          break;
-        case "AgentStateIdle":
-          this.applyAgentState(
-            this.resolveAgentStateFromSocket(data) || "1"
-          );
-          break;
-        case "AgentStateBusy":
-          this.applyAgentStateFromBusyMessage(data);
-          break;
-        case "AgentStateAfterWorking":
-          this.applyAgentState(
-            this.resolveAgentStateFromSocket(data) || "115"
-          );
-          break;
-        case "AgentStateTalking":
-          this.applyCallActiveState(data);
-          break;
-        case "AgentStateLogOut":
-          this.isOnWork = false;
-          this.applyAgentState("-1");
-          this.currentCall = null;
-          break;
-        case "StopService":
-        case "AgentHangUp":
-          this.restoreAgentStateAfterCall(data);
-          break;
-        case "PhoneStateDisConnected":
-          if (this.currentCall) {
-            this.restoreAgentStateAfterCall(data);
-          }
-          break;
-        default:
-          if (CALL_ACTIVE_MSG_TYPES.includes(data.msgType)) {
-            this.applyCallActiveState(data);
-          }
-          break;
-      }
-
-      if (RING_MSG_TYPES.includes(data.msgType)) {
-        this.incomingNumber = this.resolveIncomingNumber(data);
-        if (
-          String(this.option.callWay) === "1" &&
-          data.direction === 1 &&
-          this.voipAccount
-        ) {
-          this.incomingNumber = this.voipAccount;
-        }
-      }
-
-      if (data.callId && !CALL_END_MSG_TYPES.includes(data.msgType)) {
-        this.currentCall = data;
-        if (!this.incomingNumber) {
-          this.incomingNumber = this.resolveIncomingNumber(data);
-        }
-        if (
-          data.msgType === "PhoneStateAgentRing" &&
-          String(this.option.callWay) === "1"
-        ) {
-          this.getServ().agentListen();
-        }
-      }
-    },
-    resolveIncomingNumber(data) {
-      const direction = Number(data.direction);
-      if (direction === 0) {
-        return data.caller || data.callee || "";
-      }
-      if (direction === 1) {
-        return data.callee || data.caller || "";
-      }
-      return data.caller || data.callee || "";
-    },
-    applyAgentState(state) {
-      this.agentState =
-        state === undefined || state === null ? "-1" : String(state);
-    },
-    resolveAgentStateFromSocket(data) {
-      return resolveAgentStateFromPayload(data);
-    },
-    applyCallActiveState(data) {
-      this.pendingAgentState = null;
-      this.clearPendingAgentStateTimer();
-      const socketState = data ? this.resolveAgentStateFromSocket(data) : null;
-      this.applyAgentState(socketState === "3" ? socketState : "3");
-    },
-    restoreAgentStateAfterCall(data) {
-      this.currentCall = null;
-      this.incomingNumber = "";
-      const socketState = data ? this.resolveAgentStateFromSocket(data) : null;
-      if (socketState !== null && socketState !== "3") {
-        this.applyAgentState(socketState);
-        return;
-      }
-      this.syncAgentStateAfterCall();
-    },
-    syncAgentStateAfterCall() {
-      const serv = this.getServ();
-      if (!serv || !this.isOnWork) {
-        return;
-      }
-      serv.queryAgentState((rs) => {
-        if (rs && String(rs.retCode) === "000000" && rs.item) {
-          const state = resolveAgentStateFromPayload(rs.item);
-          if (state !== null && state !== "3") {
-            this.applyAgentState(state);
-            return;
-          }
-        }
-        this.applyAgentState("1");
-      });
-    },
-    applyAgentStateFromBusyMessage(data) {
-      if (this.currentCall || String(this.agentState) === "3") {
-        const talkingState = this.resolveAgentStateFromSocket(data);
-        if (talkingState === "3") {
-          this.applyAgentState("3");
-        }
-        return;
-      }
-      let socketState = this.resolveAgentStateFromSocket(data);
-      if (socketState === "0") {
-        if (
-          this.pendingAgentState &&
-          isRestAgentState(this.pendingAgentState)
-        ) {
-          socketState = this.pendingAgentState;
-        } else if (isRestAgentState(this.agentState)) {
-          return;
-        }
-      }
-      if (socketState !== null) {
-        this.applyAgentState(socketState);
-        return;
-      }
-      if (isRestAgentState(this.agentState)) {
-        return;
-      }
-      this.applyAgentState("0");
-    },
-    setPendingAgentState(state) {
-      this.pendingAgentState = String(state);
-      this.clearPendingAgentStateTimer();
-      this.pendingAgentStateTimer = setTimeout(() => {
-        this.pendingAgentState = null;
-        this.pendingAgentStateTimer = null;
-      }, 4000);
-    },
-    clearPendingAgentStateTimer() {
-      if (this.pendingAgentStateTimer) {
-        clearTimeout(this.pendingAgentStateTimer);
-        this.pendingAgentStateTimer = null;
-      }
-    },
-    handleOnWork() {
-      const serv = this.getServ();
-      if (!serv || !this.sdkReady) {
-        return;
-      }
-      const option = this.option;
-      const payload = {
-        displayNumber: option.displayNumber || undefined,
-        isRecordStereo: false,
-        agentState: "1",
-      };
-      serv.agentLogin(payload, (res) => {
-        this.handleApiResult(res, "上班", () => {
-          this.isOnWork = true;
-          this.applyAgentState("1");
-        });
-      });
-    },
-    handleOffWork() {
-      const serv = this.getServ();
-      if (!serv) {
-        return;
-      }
-      serv.agentLoginout((res) =>
-        this.handleApiResult(res, "下班", () => {
-          this.isOnWork = false;
-          this.applyAgentState("-1");
-          this.currentCall = null;
-          this.incomingNumber = "";
-        })
-      );
-    },
-    handleDial() {
-      const serv = this.getServ();
-      if (!serv || !this.sdkReady) {
-        this.notifyError("呼叫中心未就绪");
-        return;
-      }
-      if (!this.isOnWork) {
-        this.notifyError("请先点击「上班」");
-        return;
-      }
-      if (!this.dialNumber) {
-        this.notifyError("请输入外呼号码");
-        return;
-      }
-      if (!canAgentDial(this.agentState)) {
-        this.notifyError("当前座席状态不可外呼");
-        return;
-      }
-      const option = this.option;
-      serv.agentCallOut(
-        {
-          displayNumber: option.displayNumber || undefined,
-          destinationNumber: this.dialNumber,
-          params: "",
-        },
-        (res) =>
-          this.handleApiResult(res, "外呼", () => {
-            if (res && res.callId) {
-              this.currentCall = { callId: res.callId, direction: 1 };
-              this.applyCallActiveState();
-            }
-          })
-      );
-    },
-    handleHangUp() {
-      const serv = this.getServ();
-      if (!serv || !this.currentCall || !this.currentCall.callId) {
-        return;
-      }
-      serv.agentHangUp({ callId: this.currentCall.callId }, (res) =>
-        this.handleApiResult(res, "挂机", () => {
-          this.restoreAgentStateAfterCall();
-        })
-      );
-    },
-    handleUpdateState(agentState) {
-      const serv = this.getServ();
-      if (!serv || !this.isOnWork) {
-        return;
-      }
-      const targetState = String(agentState);
-      this.setPendingAgentState(targetState);
-      serv.updateAgentState({ agentState: targetState }, (res) => {
-        if (!res || String(res.retCode) !== "000000") {
-          this.pendingAgentState = null;
-          this.clearPendingAgentStateTimer();
-        }
-        this.handleApiResult(res, "修改状态", () => {
-          this.applyAgentState(targetState);
-        });
-      });
-    },
-    handleApiResult(res, action, onSuccess) {
-      if (res && String(res.retCode) === "000000") {
-        if (typeof onSuccess === "function") {
-          onSuccess(res);
-        }
-        return;
-      }
-      const msg = (res && (res.retMsg || res.msg)) || `${action}失败`;
-      this.notifyError(msg);
-    },
-    notifyError(message) {
-      if (this.$message) {
-        this.$message.error(message);
-      } else {
-        console.error("[CallCenter]", message);
-      }
-    },
-    onDragStart(event) {
-      if (event.button !== 0) {
-        return;
-      }
-      const rect = this.$el.getBoundingClientRect();
-      this.dragging = true;
-      this.dragOffset = {
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
-      };
-      if (this.position.left === null) {
-        this.position.left = rect.left;
-        this.position.bottom = window.innerHeight - rect.bottom;
-      }
-    },
-    onDragMove(event) {
-      if (!this.dragging) {
-        return;
-      }
-      const panelWidth = this.$el ? this.$el.offsetWidth : 720;
-      const panelHeight = this.$el ? this.$el.offsetHeight : 80;
-      const edge = 8;
-      const maxLeft = Math.max(edge, window.innerWidth - panelWidth - edge);
-      const left = Math.min(
-        maxLeft,
-        Math.max(edge, event.clientX - this.dragOffset.x)
-      );
-      const maxTop = window.innerHeight - panelHeight - edge;
-      const top = Math.min(
-        maxTop,
-        Math.max(edge, event.clientY - this.dragOffset.y)
-      );
-      const bottom = window.innerHeight - top - panelHeight;
-      this.position.left = left;
-      this.position.bottom = bottom;
-    },
-    onDragEnd() {
-      this.dragging = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.call-center-float {
-  position: fixed;
-  min-width: 680px;
-  max-width: calc(100vw - 32px);
-  border-radius: 4px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
-  background: linear-gradient(90deg, #3d8fd8 0%, #2b6cb8 55%, #245da8 100%);
-  color: #fff;
-  font-size: 13px;
-  user-select: none;
-}
-
-.call-center-float__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px 4px;
-  cursor: move;
-}
-
-.call-center-float__status-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  flex: 1;
-  min-width: 0;
-}
-
-.call-center-float__label {
-  color: rgba(255, 255, 255, 0.92);
-  white-space: nowrap;
-
-  &--incoming {
-    margin-left: 8px;
-  }
-}
-
-.call-center-float__status {
-  font-weight: 600;
-  margin-right: 4px;
-
-  &.is-idle {
-    color: #b8f06a;
-  }
-
-  &.is-busy,
-  &.is-talking {
-    color: #ffd666;
-  }
-
-  &.is-rest {
-    color: #91d5ff;
-  }
-
-  &.is-offline {
-    color: #d9d9d9;
-  }
-}
-
-.call-center-float__incoming {
-  color: #fff;
-  font-weight: 600;
-  min-width: 80px;
-}
-
-.call-center-float__toggle {
-  border: none;
-  background: rgba(255, 255, 255, 0.2);
-  color: #fff;
-  width: 24px;
-  height: 24px;
-  line-height: 22px;
-  border-radius: 2px;
-  cursor: pointer;
-  flex-shrink: 0;
-  margin-left: 8px;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.35);
-  }
-}
-
-.call-center-float__body {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px 10px;
-  flex-wrap: wrap;
-}
-
-.call-center-float__input {
-  width: 140px;
-  height: 30px;
-  padding: 0 8px;
-  border: none;
-  border-radius: 2px;
-  outline: none;
-  font-size: 13px;
-  color: #333;
-
-  &:disabled {
-    background: #f0f0f0;
-    color: #999;
-  }
-}
-
-.call-center-float__btn {
-  height: 30px;
-  border: none;
-  border-radius: 2px;
-  cursor: pointer;
-  font-size: 13px;
-  color: #fff;
-  white-space: nowrap;
-  padding: 0 10px;
-  transition: opacity 0.15s;
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  &--dial {
-    width: 34px;
-    padding: 0;
-    background: #f5a623;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &:not(:disabled):hover {
-      background: #e69512;
-    }
-  }
-
-  &--action {
-    min-width: 52px;
-    background: #52a845;
-
-    &:not(:disabled):hover {
-      background: #46963b;
-    }
-  }
-}
-
-.call-center-float__phone-icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.3 21 3 13.7 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E")
-    center / contain no-repeat;
-}
-</style>