feat: 弹窗

components.d.ts

@@ -35,5 +35,6 @@ declare module 'vue' {
         GlobalIcon: (typeof import('./src/components/global-icon/index.vue'))['default']
         RangePickey: (typeof import('./src/components/range-pickey/index.vue'))['default']
         GlobalAvatar: (typeof import('./src/components/global-avatar/index.vue'))['default']
+        GlobalModel: (typeof import('./src/components/global-model/index.vue'))['default']
     }
 }

package-lock.json

@@ -16,6 +16,7 @@
         "exceljs": "^4.4.0",
         "gsap": "^3.12.5",
         "less": "^4.2.0",
+        "lodash": "^4.17.21",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
         "qs": "^6.12.1",
@@ -28,6 +29,7 @@
       "devDependencies": {
         "@arco-design/web-vue": "^2.54.5",
         "@arco-plugins/vite-vue": "^1.4.5",
+        "@types/lodash": "^4.17.0",
         "@types/node": "^20.11.20",
         "@types/qs": "^6.9.15",
         "@vitejs/plugin-vue": "^5.0.4",
@@ -1287,6 +1289,12 @@
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz",
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.11.20",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.11.20.tgz",
@@ -4800,6 +4808,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "exceljs": "^4.4.0",
     "gsap": "^3.12.5",
     "less": "^4.2.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "qs": "^6.12.1",
@@ -29,6 +30,7 @@
   "devDependencies": {
     "@arco-design/web-vue": "^2.54.5",
     "@arco-plugins/vite-vue": "^1.4.5",
+    "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.20",
     "@types/qs": "^6.9.15",
     "@vitejs/plugin-vue": "^5.0.4",

src/components/global-model/index.vue

+<template>
+    <a-modal v-bind="$attrs">
+        <template #title>
+            <slot name="title"></slot>
+        </template>
+        <slot></slot>
+        <template #footer>
+            <slot name="footer"></slot>
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/store/contacts/index.ts

 import { defineStore } from 'pinia'
-import { ContactsState } from './types'
+import { ContactsState, UserItemDto } from './types'
 const CallState = {
     callIn: 'callIn',
     callOut: 'callout',
@@ -9,24 +9,34 @@ const CallState = {
 const useContactsStore = defineStore('contacts', {
     state: (): ContactsState => {
         return {
-            showWait: false,
-            chooseUser: undefined
+            showWait: false, //是否等待接通
+            chooseUser: undefined, //当前选中的联系人
+            userList: [] //所有联系人
         }
     },
 
-    getters: {},
+    getters: {
+        //获取通话用户
+    },
 
     actions: {
         //设置当前选中联系人
-        setChooseUser(info: ContactsState['chooseUser']) {
+        setChooseUser(info: UserItemDto | undefined) {
             this.chooseUser = info
         },
+        //修改通话状态
         changeWait(val: boolean) {
             this.showWait = val
+        },
+        //获取全部联系人
+        setUserList(info: UserItemDto[]) {
+            this.userList = info
         }
     },
 
-    persist: true
+    persist: {
+        storage: sessionStorage // 存储的类型，默认localStorage
+    }
 })
 
 export default useContactsStore

src/store/contacts/types.ts

@@ -3,8 +3,10 @@ export interface UserItemDto {
     nickname: string
     remark: string
     videoGroup: 0 | 1
+    choose?: boolean
 }
 export interface ContactsState {
-    showWait: boolean //是否等待接通
-    chooseUser?: UserItemDto //当前选中的联系人
+    showWait: boolean
+    chooseUser?: UserItemDto
+    userList: UserItemDto[]
 }

src/store/user/index.ts

@@ -51,7 +51,9 @@ const useContactsStore = defineStore('user', {
         }
     },
 
-    persist: true
+    persist: {
+        storage: sessionStorage // 存储的类型，默认localStorage
+    }
 })
 
 export default useContactsStore

src/views/layout/gHeader.vue

@@ -17,9 +17,8 @@
                 <div class="flex items-center cursor-pointer">
                     <global-avatar :avatar-size="32" :icon-size="16"></global-avatar>
                     <div class="mx-2">
-                        <span class="mb-1 inline-block text-theme-text1">张三</span>
-                        <br />
-                        <span class="text-theme-text3">专家</span>
+                        <p class="mb-1 inline-block text-theme-text1">{{ userStore.user_info.username }}</p>
+                        <p class="text-theme-text3">{{ userStore.user_info.videoGroup == 0 ? '专家' : '维修人' }}</p>
                     </div>
                     <global-icon :icon="idDown ? 'up-circle' : 'down-circle'" :size="14"></global-icon>
                 </div>

src/views/remote/contacts/contactsInfo.vue

@@ -8,7 +8,7 @@
             <a-tab-pane title="默认列表">
                 <div class="px-4">
                     <a-input-search placeholder="搜索" v-model="searchParams.groupName"></a-input-search>
-                    <a-button class="rounded-full my-4" type="primary" long style="min-height: 32px">
+                    <a-button class="rounded-full my-4" type="primary" long @click="multiCall">
                         <template #icon>
                             <global-icon icon="plus-circle" :size="14" color="var(--color-bg-white)" />
                         </template>
@@ -26,12 +26,15 @@
             </a-tab-pane>
         </a-tabs>
     </a-spin>
+    <multi-call-model ref="multiCallRef"></multi-call-model>
 </template>
 
 <script setup lang="ts">
 import contactsList from './contactsList.vue'
+import multiCallModel from './multiCallModel.vue'
 import { alova } from '@/api/alova-instance'
 import type { UserItemDto } from '@/store/contacts/types'
+import useContactsStore from '@/store/contacts/index'
 import { useRequest } from 'alova'
 
 interface Props {
@@ -49,7 +52,11 @@ const videoGroup: { [key in UserItemDto['videoGroup']]: string } = {
     0: '专家',
     1: '维修人'
 }
-const { loading, data: userList } = useRequest(
+const {
+    loading,
+    data: userList,
+    onSuccess
+} = useRequest(
     () =>
         alova.Post<UserItemDto[]>('/admin/getUserListVideo', {
             pageIndex: 1,
@@ -59,6 +66,10 @@ const { loading, data: userList } = useRequest(
         immediate: true
     }
 )
+const { setUserList } = useContactsStore()
+onSuccess(({ data }) => {
+    setUserList(data)
+})
 const searchParams = reactive({
     groupName: ''
 })
@@ -77,6 +88,11 @@ const getUserListGroup = computed(() => {
             return result
         }, {})
 })
+//多人呼叫
+const multiCallRef = ref()
+const multiCall = () => {
+    multiCallRef.value!.open()
+}
 </script>
 <style lang="less" scoped>
 @import './styles/contactsInfo.less';

src/views/remote/contacts/contactsList.vue

@@ -16,14 +16,9 @@
 
 <script setup lang="ts">
 import useContactsStore from '@/store/contacts/index'
+import { UserItemDto } from '@/store/contacts/types'
 import { storeToRefs } from 'pinia'
 
-interface UserItemDto {
-    id: string
-    nickname: string
-    remark: string
-    videoGroup: 0 | 1
-}
 interface Props {
     data?: Array<UserItemDto>
 }

src/views/remote/contacts/contactsListChoose.vue

+<template>
+    <a-checkbox-group v-model="checkbox" @change="handleChange">
+        <template v-for="(item, index) in data" :key="item.id">
+            <div class="item flex items-center px-4 py-3 rounded cursor-pointer">
+                <global-avatar></global-avatar>
+                <div class="ml-[9px] inline-block">{{ item.nickname }}</div>
+                <div class="flex-auto text-right">
+                    <a-checkbox :value="item.id"></a-checkbox>
+                </div>
+            </div>
+        </template>
+    </a-checkbox-group>
+</template>
+
+<script setup lang="ts">
+import { UserItemDto } from '@/store/contacts/types'
+
+interface Props {
+    data?: Array<UserItemDto>
+}
+const ps = withDefaults(defineProps<Props>(), {
+    data: () => []
+})
+//选择联系人
+const checkbox = ref([])
+const handleChange = () => {
+    console.log(checkbox.value)
+}
+</script>
+<style lang="less" scoped>
+.item.active,
+.item:hover {
+    background-color: var(--color-fill-1);
+}
+</style>

src/views/remote/contacts/eventList.vue

@@ -81,7 +81,10 @@ const {
         debounce: [800],
         abortLast: true,
         total: (res) => res.data.total,
-        data: (res) => res.data.list
+        data: (res) => res.data.list,
+        sendable: () => {
+            return chooseUser?.value?.id ? true : false
+        }
     }
 )
 </script>

src/views/remote/contacts/multiCallModel.vue

+<template>
+    <global-model v-model:visible="showModel" title="选择通话用户" :width="320">
+        <div class="h-80 overflow-y-auto">
+            <a-collapse :bordered="false">
+                <a-collapse-item :header="key + '列表'" :key="index" v-for="(value, key, index) in getUserListGroup">
+                    <contacts-list-choose :data="value"></contacts-list-choose>
+                </a-collapse-item>
+            </a-collapse>
+        </div>
+        <template #footer>
+            <a-button size="large" type="primary" @click="showModel = false" disabled>呼叫0人</a-button>
+            <a-button size="large" @click="showModel = false">取消</a-button>
+        </template>
+    </global-model>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import useContactsStore from '@/store/contacts/index'
+import { UserItemDto } from '@/store/contacts/types'
+import contactsListChoose from './contactsListChoose.vue'
+import { cloneDeep } from 'lodash'
+
+const showModel = ref(false)
+const open = () => {
+    showModel.value = true
+}
+//联系人列表
+const videoGroup: { [key in UserItemDto['videoGroup']]: string } = {
+    0: '专家',
+    1: '维修人'
+}
+//当前联系人
+const { userList } = storeToRefs(useContactsStore())
+//获取联系人分组
+const getUserListGroup = computed(() => {
+    return cloneDeep(userList.value)
+        ?.sort((a, b) => a.videoGroup - b.videoGroup)
+        .reduce((result: any, item) => {
+            const groupName = videoGroup[item.videoGroup]
+            if (!result[groupName]) {
+                result[groupName] = []
+            }
+            result[groupName].push(item)
+            return result
+        }, {})
+})
+defineExpose({
+    open
+})
+</script>
+<style lang="less" scoped>
+:deep(.arco-collapse-item-content) {
+    padding: 0;
+    .arco-collapse-item-content-box {
+        padding: 0;
+    }
+}
+</style>