|
|
@ -61,7 +61,7 @@
|
|
|
|
<el-icon name="clipboard" />
|
|
|
|
<el-icon name="clipboard" />
|
|
|
|
个人订单
|
|
|
|
个人订单
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
<el-button>
|
|
|
|
<el-button @click="handleTransferSession">
|
|
|
|
<el-icon name="chat-forward" />
|
|
|
|
<el-icon name="chat-forward" />
|
|
|
|
转移会话
|
|
|
|
转移会话
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
@ -109,20 +109,30 @@
|
|
|
|
<el-input v-model="state.message" placeholder="请输入要发送的内容" type="textarea" />
|
|
|
|
<el-input v-model="state.message" placeholder="请输入要发送的内容" type="textarea" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="send">
|
|
|
|
<div class="send">
|
|
|
|
<el-button type="primary" @click="handleSendMessage">发送</el-button>
|
|
|
|
<el-button type="primary" @click="handleSendMessage()">发送</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-else class="content empty">请点击左侧会话列表与买家进行聊天</div>
|
|
|
|
<div v-else class="content empty">请点击左侧会话列表与买家进行聊天</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-dialog v-model="transferVisible" title="转移会话">
|
|
|
|
|
|
|
|
<table-list
|
|
|
|
|
|
|
|
code="TransferCustomerService"
|
|
|
|
|
|
|
|
:config="transferConfig"
|
|
|
|
|
|
|
|
:data="customerServiceList"
|
|
|
|
|
|
|
|
:operation="[]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup lang="jsx">
|
|
|
|
import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
|
|
|
|
import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
|
|
|
|
|
|
|
|
import { ElButton } from 'element-plus/es';
|
|
|
|
import MessageItem from './message.vue';
|
|
|
|
import MessageItem from './message.vue';
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const store = useStore();
|
|
|
|
const store = useStore();
|
|
|
|
store.dispatch('chat/querySession');
|
|
|
|
store.dispatch('chat/querySession');
|
|
|
|
|
|
|
|
const opts = computed(() => store.state.chat.opts);
|
|
|
|
|
|
|
|
|
|
|
|
// 统计
|
|
|
|
// 统计
|
|
|
|
const summaryVisible = ref(true);
|
|
|
|
const summaryVisible = ref(true);
|
|
|
@ -148,6 +158,62 @@
|
|
|
|
store.dispatch('chat/querySessionMessage');
|
|
|
|
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 emojiVisible = ref(false);
|
|
|
|
const emojiList = computed(() => emojiData.map((item) => item.list).flat());
|
|
|
|
const emojiList = computed(() => emojiData.map((item) => item.list).flat());
|
|
|
@ -197,21 +263,12 @@
|
|
|
|
// 发送消息
|
|
|
|
// 发送消息
|
|
|
|
const refsMessageList = ref(null);
|
|
|
|
const refsMessageList = ref(null);
|
|
|
|
const handleSendMessage = (data) => {
|
|
|
|
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: '小爱',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
sessionMessageList.push(message);
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
if (!data) {
|
|
|
|
|
|
|
|
store.dispatch('chat/send', {
|
|
|
|
|
|
|
|
traceType: 20,
|
|
|
|
|
|
|
|
content: { payload: { 'text ': state.message }, storeId: 2, type: 1 },
|
|
|
|
|
|
|
|
});
|
|
|
|
state.message = '';
|
|
|
|
state.message = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
|
|
|
|
refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
|
|
|
|
});
|
|
|
|
});
|
|
|
|