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

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

@@ -0,0 +1,768 @@
+<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>