feat: 列表接口对接

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@alova/mock": "^1.5.1",
+        "@alova/scene-vue": "^1.5.0",
         "@vueuse/core": "^10.9.0",
         "alova": "^2.17.0",
         "dayjs": "^1.11.10",
@@ -68,6 +69,11 @@
       "resolved": "https://registry.npmmirror.com/@alova/mock/-/mock-1.5.1.tgz",
       "integrity": "sha512-Ojt+hhn9ddexBWlWy2NeQn5SK+oOPPDJjvmJCV2Dg6W/NcBizdWur4pRjaUDskVB5CAhAewoZmGj4kStS5IkLw=="
     },
+    "node_modules/@alova/scene-vue": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@alova/scene-vue/-/scene-vue-1.5.0.tgz",
+      "integrity": "sha512-S/F/9I0psuscpan06H15CxkxwCDIb0FzpLqkykzsFjcHpfy44Cl4cDDP+pnSFHZrjWYl7Me7wjL3QJJYZaRj5A=="
+    },
     "node_modules/@antfu/utils": {
       "version": "0.7.7",
       "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.7.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@alova/mock": "^1.5.1",
+    "@alova/scene-vue": "^1.5.0",
     "@vueuse/core": "^10.9.0",
     "alova": "^2.17.0",
     "dayjs": "^1.11.10",

src/api/alova-instance.ts

@@ -48,15 +48,13 @@ export const alova = createAlova({
             }
             if (response.url.endsWith('/admin/getCaptcha')) {
                 return await response.blob()
+            }
+            const json = await response.json()
+            if (json.code === 200) {
+                return json['data']
             } else {
-                return await response.json()
+                return json
             }
-            // const json = await response.json()
-            // if (json.code === 200) {
-            //     return json['data']
-            // } else {
-            //     return json
-            // }
         },
         // 请求错误时将会进入该拦截器
         onError(error) {

src/components/range-pickey/index.vue

@@ -65,7 +65,7 @@ const ps = withDefaults(defineProps<Props>(), {
     placeholder: () => ['开始时间', '结束时间'],
     separator: '-',
     format: 'YYYY-MM-DD',
-    valueFormat: 'YYYYMMDD'
+    valueFormat: 'YYYY-MM-DD'
 })
 const modelStartDate = defineModel('startDate')
 const modelEndDate = defineModel('endDate')

src/store/contacts/index.ts

 import { defineStore } from 'pinia'
 import { ContactsState } from './types'
-export const CallState = {
+const CallState = {
     callIn: 'callIn',
     callOut: 'callout',
     calling: 'calling',
@@ -9,13 +9,18 @@ export const CallState = {
 const useContactsStore = defineStore('contacts', {
     state: (): ContactsState => {
         return {
-            showWait: false
+            showWait: false,
+            chooseUser: undefined
         }
     },
 
     getters: {},
 
     actions: {
+        //设置当前选中联系人
+        setChooseUser(info: ContactsState['chooseUser']) {
+            this.chooseUser = info
+        },
         changeWait(val: boolean) {
             this.showWait = val
         }

src/store/contacts/types.ts

+export interface UserItemDto {
+    id: string
+    nickname: string
+    remark: string
+    videoGroup: 0 | 1
+}
 export interface ContactsState {
-    showWait: boolean
+    showWait: boolean //是否等待接通
+    chooseUser?: UserItemDto //当前选中的联系人
 }

src/views/login/index.vue

@@ -66,15 +66,15 @@ const handleLogin = async () => {
 }
 loginSuccess((respond) => {
     const res = respond.data
-    if (res.code == 200) {
-        userStore.setUserInfo(res.data)
-        Notification.success({
-            content: '登录成功'
-        })
-    } else {
+    if (res.code == 500) {
         Notification.error({
             content: res.message
         })
+    } else {
+        userStore.setUserInfo(res)
+        Notification.success({
+            content: '登录成功'
+        })
     }
 })
 //获取验证码

src/views/remote/contacts/contactsInfo.vue

 <template>
-    <div class="g-block">
+    <a-spin class="g-block" :loading="loading" tip="加载中...">
         <div class="flex justify-between items-center h-10 px-4">
             <span class="text-base">联系人</span>
             <a-checkbox value="1">只显示在线人员</a-checkbox>
@@ -7,7 +7,7 @@
         <a-tabs class="h-full">
             <a-tab-pane title="默认列表">
                 <div class="px-4">
-                    <a-input-search placeholder="搜索"></a-input-search>
+                    <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">
                         <template #icon>
                             <global-icon icon="plus-circle" :size="14" color="var(--color-bg-white)" />
@@ -16,11 +16,8 @@
                     </a-button>
                 </div>
                 <a-collapse :bordered="false">
-                    <a-collapse-item header="维修员列表" :key="1">
-                        <contacts-list :data="list"></contacts-list>
-                    </a-collapse-item>
-                    <a-collapse-item header="专家列表" :key="2">
-                        <contacts-list :data="list"></contacts-list>
+                    <a-collapse-item :header="key + '列表'" :key="index" v-for="(value, key, index) in getUserListGroup">
+                        <contacts-list :data="value"></contacts-list>
                     </a-collapse-item>
                 </a-collapse>
             </a-tab-pane>
@@ -28,11 +25,14 @@
                 <div class="px-4">我是群组列表</div>
             </a-tab-pane>
         </a-tabs>
-    </div>
+    </a-spin>
 </template>
 
 <script setup lang="ts">
 import contactsList from './contactsList.vue'
+import { alova } from '@/api/alova-instance'
+import type { UserItemDto } from '@/store/contacts/types'
+import { useRequest } from 'alova'
 
 interface Props {
     showGroup?: boolean
@@ -40,26 +40,43 @@ interface Props {
 const ps = withDefaults(defineProps<Props>(), {
     showGroup: true
 })
-//联系人列表
-interface UserItemDto {
-    id: string
-    nickname: string
-    remark: string
-    videoGroup: 0 | 1
-}
-const list = ref([
-    { id: '1', name: '张三', phone: '13687222908', active: true },
-    { id: '1', name: '张三', phone: '13687222908' },
-    { id: '1', name: '张三', phone: '13687222908' },
-    { id: '1', name: '张三', phone: '13687222908' },
-    { id: '1', name: '张三', phone: '13687222908' },
-    { id: '1', name: '张三', phone: '13687222908' },
-    { id: '1', name: '张三', phone: '13687222908', disabled: true }
-])
 //是否显示群组列表
 const getShowGroup = computed(() => {
     return ps.showGroup ? 'block' : 'none'
 })
+//联系人列表
+const videoGroup: { [key in UserItemDto['videoGroup']]: string } = {
+    0: '专家',
+    1: '维修人'
+}
+const { loading, data: userList } = useRequest(
+    () =>
+        alova.Post<UserItemDto[]>('/admin/getUserListVideo', {
+            pageIndex: 1,
+            pageSize: 99999
+        }),
+    {
+        immediate: true
+    }
+)
+const searchParams = reactive({
+    groupName: ''
+})
+//获取联系人分组
+const getUserListGroup = computed(() => {
+    return userList.value
+        ?.sort((a, b) => a.videoGroup - b.videoGroup)
+        .reduce((result: any, item) => {
+            const groupName = videoGroup[item.videoGroup]
+            if (!result[groupName]) {
+                result[groupName] = []
+            }
+            if (item.nickname.indexOf(searchParams.groupName) != -1) {
+                result[groupName].push(item)
+            }
+            return result
+        }, {})
+})
 </script>
 <style lang="less" scoped>
 @import './styles/contactsInfo.less';

src/views/remote/contacts/contactsList.vue

 <template>
     <template v-for="(item, index) in data" :key="item.id">
-        <div class="item flex items-center px-4 py-3 rounded cursor-pointer" :class="{ active: item.active }">
+        <div class="item flex items-center px-4 py-3 rounded cursor-pointer" :class="{ active: chooseUser?.id == item.id }" @click="handleClick(item)">
             <global-avatar></global-avatar>
-            <div class="ml-[9px] inline-block">张三</div>
+            <div class="ml-[9px] inline-block">{{ item.nickname }}</div>
             <div class="flex items-center ml-6">
                 <global-icon icon="camera" :size="14" class="mr-2"></global-icon>
                 <global-icon icon="mic" :size="14"></global-icon>
             </div>
             <div class="flex-auto text-right">
-                <a-button type="primary" shape="circle" :disabled="item.disabled" @click.stop="handleCall"><global-icon icon="phone" :size="14" color="var(--color-bg-white)"></global-icon></a-button>
+                <a-button type="primary" shape="circle" @click.stop="handleCall"><global-icon icon="phone" :size="14" color="var(--color-bg-white)"></global-icon></a-button>
             </div>
         </div>
     </template>
@@ -16,18 +16,35 @@
 
 <script setup lang="ts">
 import useContactsStore from '@/store/contacts/index'
+import { storeToRefs } from 'pinia'
 
+interface UserItemDto {
+    id: string
+    nickname: string
+    remark: string
+    videoGroup: 0 | 1
+}
 interface Props {
-    data?: Array<any>
+    data?: Array<UserItemDto>
 }
 const ps = withDefaults(defineProps<Props>(), {
     data: () => []
 })
 //拨打视频
-const { changeWait } = useContactsStore()
+const { changeWait, setChooseUser } = useContactsStore()
 const handleCall = () => {
     changeWait(true)
 }
+//当前联系人
+const { chooseUser } = storeToRefs(useContactsStore())
+//点击联系人
+const handleClick = (item: UserItemDto) => {
+    setChooseUser(item)
+}
+onBeforeUnmount(() => {
+    //清空当前联系人
+    setChooseUser(undefined)
+})
 </script>
 <style lang="less" scoped>
 .item.active,

src/views/remote/contacts/eventList.vue

@@ -2,12 +2,12 @@
     <div class="g-block ml-4">
         <!-- 搜索条件 -->
         <div class="flex items-center justify-between mb-4 px-4">
-            <range-pickey v-model:start-date="searchParams.startDate" v-model:end-date="searchParams.endDate"></range-pickey>
+            <range-pickey v-model:start-date="beginTime" v-model:end-date="endTime"></range-pickey>
             <a-input-search placeholder="搜索" class="w-[240px]"></a-input-search>
         </div>
         <!-- table展示 -->
         <div class="flex-auto overflow-y-auto px-4">
-            <a-table :columns="columns" :data="tableData" :bordered="false">
+            <a-table :columns="columns" :data="tableData" :bordered="false" :loading="loading" @page-change="pageChange" @page-size-change="pageSizeChange">
                 <template #initiator="{ record }">
                     <div class="flex items-center">
                         <global-avatar :avatar-size="24" :icon-size="12"></global-avatar>
@@ -23,13 +23,69 @@
 </template>
 
 <script setup lang="ts">
-import { columns, tableData } from './constants/data.config'
+import { usePagination } from '@alova/scene-vue'
+import { columns } from './constants/data.config'
+import { alova } from '@/api/alova-instance'
+import useContactsStore from '@/store/contacts/index'
+import { storeToRefs } from 'pinia'
 
+const beginTime = ref('')
+const endTime = ref('')
+//当前联系人
+const { chooseUser } = storeToRefs(useContactsStore())
 //表格搜索
-const searchParams = reactive({
-    startDate: '',
-    endDate: ''
-})
+const getEventList = (pageIndex: number, pageSize: number) => {
+    const params = {
+        userId: chooseUser?.value?.id,
+        pageIndex,
+        pageSize,
+        uid: 2,
+        projectName: 'mu'
+    } as any
+    if (beginTime.value) {
+        params.beginTime = beginTime.value
+    }
+    if (endTime.value) {
+        params.endTime = endTime.value
+    }
+    return alova.Post<any>('/call/getEventList', params)
+}
+const {
+    // 加载状态
+    loading,
+    // 列表数据
+    data: tableData,
+    // 是否为最后一页
+    // 下拉加载时可通过此参数判断是否还需要加载
+    isLastPage,
+    // 当前页码，改变此页码将自动触发请求
+    page,
+    // 每页数据条数
+    pageSize,
+    // 分页页数
+    pageCount,
+    // 总数据量
+    total
+} = usePagination(
+    // Method实例获取函数，它将接收page和pageSize，并返回一个Method实例
+    (pageIndex: number, pageSize: number) => getEventList(pageIndex, pageSize),
+    {
+        watchingStates: [beginTime, endTime, () => chooseUser?.value?.id],
+        // 请求前的初始数据（接口返回的数据格式）
+        initialData: {
+            total: 0,
+            data: []
+        },
+        initialPage: 1, // 初始页码，默认为1
+        initialPageSize: 10, // 初始每页数据条数，默认为10
+        debounce: [800],
+        abortLast: true,
+        total: (res) => res.data.total,
+        data: (res) => res.data.list
+    }
+)
+const pageChange = () => {}
+const pageSizeChange = () => {}
 </script>
 <style lang="less" scoped>
 :deep(.arco-table-th) {