feat: 转移会话对接

src/store/modules/chat/chat.js

@@ -10,6 +10,23 @@ const state = () => ({
     currentSession: null,
     messageList: [],
     messageType: ['', 'text'],
+    customerServiceList: [],
+    opts: {
+        customerServiceType: [
+            {
+                label: '售前',
+                value: 1,
+            },
+            {
+                label: '售后',
+                value: 2,
+            },
+            {
+                label: '发货',
+                value: 3,
+            },
+        ],
+    },
 });
 const getters = {
     parseTime: () => {
@@ -38,6 +55,7 @@ const mutations = {
     setCurrentSession: (state, data) => (state.currentSession = data),
     setSessionData: (state, data) => (state.sessionData = data),
     setMessageList: (state, data) => (state.messageList = data),
+    setCustomerServiceList: (state, data) => (state.customerServiceList = data),
 };
 const actions = {
     /**
@@ -127,6 +145,9 @@ const actions = {
             }
         }
     },
+    /**
+     * 处理数据
+     */
     handle: ({ state, commit, dispatch }, { code, traceType, content, session }) => {
         if (code === 200) {
             switch (traceType) {
@@ -146,6 +167,10 @@ const actions = {
                 case 28:
                     commit('setMessageList', content);
                     break;
+                // 客服列表
+                case 29:
+                    commit('setCustomerServiceList', content);
+                    break;
                 default:
                     break;
             }
@@ -169,6 +194,24 @@ const actions = {
             content: { sessionId: state.currentSession, size: 100, topMessageId: null },
         });
     },
+    /**
+     * 查询可转移客服列表
+     */
+    queryCustomerService: ({ dispatch }) => {
+        dispatch('invoke', {
+            traceType: 29,
+            content: { storeId: 1 },
+        });
+    },
+    /**
+     * 提交转移会话
+     */
+    submitTransferSession: ({ dispatch }, data) => {
+        dispatch('invoke', {
+            traceType: 30,
+            content: { storeId: 1, ...data },
+        });
+    },
 };
 export default {
     state,

src/views/chat/index.vue

@@ -61,7 +61,7 @@
                             <el-icon name="clipboard" />
                             个人订单
                         </el-button>
-                        <el-button>
+                        <el-button @click="handleTransferSession">
                             <el-icon name="chat-forward" />
                             转移会话
                         </el-button>
@@ -109,20 +109,30 @@
                     <el-input v-model="state.message" placeholder="请输入要发送的内容" type="textarea" />
                 </div>
                 <div class="send">
-                    <el-button type="primary" @click="handleSendMessage">发送</el-button>
+                    <el-button type="primary" @click="handleSendMessage()">发送</el-button>
                 </div>
             </div>
             <div v-else class="content empty">请点击左侧会话列表与买家进行聊天</div>
         </div>
+        <el-dialog v-model="transferVisible" title="转移会话">
+            <table-list
+                code="TransferCustomerService"
+                :config="transferConfig"
+                :data="customerServiceList"
+                :operation="[]"
+            />
+        </el-dialog>
     </div>
 </template>
 
-<script setup>
+<script setup lang="jsx">
     import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
+    import { ElButton } from 'element-plus/es';
     import MessageItem from './message.vue';
     const { proxy } = getCurrentInstance();
     const store = useStore();
     store.dispatch('chat/querySession');
+    const opts = computed(() => store.state.chat.opts);
 
     // 统计
     const summaryVisible = ref(true);
@@ -148,6 +158,62 @@
         store.dispatch('chat/querySessionMessage');
     };
 
+    // 转移会话
+    const transferVisible = ref(false);
+    const transferConfig = ref({
+        page: false,
+        columns: [
+            {
+                label: '账号',
+                prop: 'account',
+                width: 160,
+            },
+            {
+                label: '客户昵称',
+                prop: 'waiterNickname',
+                minWidth: 160,
+            },
+            {
+                label: '类型',
+                prop: 'type',
+                width: 160,
+                slots: {
+                    default: ({ row }) => proxy.$dict(unref(opts).customerServiceType, row.type),
+                },
+            },
+            {
+                label: '操作',
+                prop: 'waiterNickname',
+                width: 100,
+                slots: {
+                    default: ({ row }) => (
+                        <ElButton type="text" onClick={() => handleConfirmTransfer(row)}>
+                            转移
+                        </ElButton>
+                    ),
+                },
+            },
+        ],
+    });
+    const customerServiceList = computed(() => store.state.chat.customerServiceList);
+    const handleTransferSession = () => {
+        store.dispatch('chat/queryCustomerService');
+        transferVisible.value = true;
+    };
+    const handleConfirmTransfer = async (row) => {
+        try {
+            let res = await proxy.$prompt('请输入转移原因', '转移会话', {
+                confirmButtonText: '确定',
+            });
+            if (res.action === 'confirm') {
+                store.dispatch('chat/submitTransferSession', { waiterId: row.waiterId, reason: res.value });
+                transferVisible.value = false;
+            }
+        } catch (e) {
+            console.info('取消转移会话', e);
+        }
+    };
+
     // 表情
     const emojiVisible = ref(false);
     const emojiList = computed(() => emojiData.map((item) => item.list).flat());
@@ -197,21 +263,12 @@
     // 发送消息
     const refsMessageList = ref(null);
     const handleSendMessage = (data) => {
-        const message = data || {
-            type: 'text',
-            content: state.message,
-        };
-        if (message.content) {
-            Object.assign(message, {
-                time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
-                from: 'employee',
-                avatar: 'https://placem.at/people',
-                name: '小爱',
+        if (!data) {
+            store.dispatch('chat/send', {
+                traceType: 20,
+                content: { payload: { 'text ': state.message }, storeId: 2, type: 1 },
             });
-            sessionMessageList.push(message);
-            if (!data) {
-                state.message = '';
-            }
+            state.message = '';
             nextTick(() => {
                 refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
             });