update 云坐席弹窗WebSocket

2024-07-01 14:46:01 +08:00
parent 80745c9d8c
commit 8551369cfb
12 changed files with 286 additions and 22 deletions
@@ -0,0 +1,107 @@
+<!--云坐席弹窗-->
+<template>
+    <Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <div class="police-con" :class="[themeType]">
+                <div class="sub-text"> 有一个员工刚刚发起应急求助,请马上处理！</div>
+                <div class="con-item">
+                    <span>姓名：</span>
+                    <span>{{ userInfo?.realName }}</span>
+                </div>
+                <div class="con-item">
+                    <span>年龄：</span>
+                    <span>{{ userInfo?.age || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>单位：</span>
+                    <span>{{ userInfo?.departName || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>部门：</span>
+                    <span>{{ userInfo?.orgName || '未知' }}</span>
+                </div>
+                <div class="con-item">
+                    <span>电话：</span>
+                    <span>{{ userInfo?.phone || '未知' }}</span>
+                </div>
+            </div>
+            <div class="btn-box">
+                <a-button type="primary" @click="confirmHelp">确认</a-button>
+            </div>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import { watch, ref, Ref } from 'vue';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+
+    const props = defineProps({
+        record: Object,
+    });
+    const emit = defineEmits(['confirmHelp']);
+    const { themeType } = useTheme();
+
+    interface UserInfo {
+        realName?: string;
+        age?: string;
+        departName?: string;
+        orgName?: string;
+        phone?: string;
+    }
+
+    const userInfo: Ref<UserInfo> = ref({});
+    watch(
+        () => props.record,
+        (nVal: UserInfo) => {
+            userInfo.value = nVal;
+        }
+    );
+    const { visible, title, closeDialog, openDialog } = useDialog({ title: '应急求助' });
+
+    defineExpose({
+        openDialog,
+    });
+
+    //确认帮助
+    function confirmHelp() {
+        closeDialog();
+        emit('confirmHelp', userInfo.value);
+    }
+</script>
+<style scoped lang="less">
+    .police-con {
+        padding: 2% 0 2% 5%;
+
+        .sub-text {
+            font-weight: bold;
+            margin-left: 8px;
+            font-size: 16px;
+        }
+
+        .con-item {
+            padding: 1.3% 0;
+            display: flex;
+
+            span:nth-child(1) {
+                font-weight: bold;
+                text-align: right;
+                display: inline-flex;
+                justify-content: flex-end;
+                width: 80px;
+            }
+
+            span:nth-child(2) {
+                flex: 1;
+                padding-left: 2%;
+                padding-right: 2%;
+            }
+        }
+    }
+
+    .btn-box {
+        text-align: center;
+        margin-top: 2%;
+    }
+</style>