添加我的客户-联系人详情有关接口调用

src/api/myCustomer.ts

@@ -11,7 +11,7 @@ export const getPrivateHeaderSearchParamsApi = () => {
 }
 
 
-// 分页查询私域客户信息接口
+// 分页查询客户信息接口
 export const getPrivateCustomerListApi = (data:any) => {
     return request({
         url: `${adminPrefix}/api/v1/private/customer/data/list`,

src/components/ConcactPeopleFormDialog/index.vue

@@ -38,7 +38,6 @@ const CloseFormDialog = ()=>{
 }
 const HandleConfirmFormDialog = (params:any)=>{
     emit('confirm',params)
-    // CloseFormDialog()
 }
 
 

src/views/myCustomer/myCustomerDetail/components/FollowFormDialog/index.vue

@@ -14,7 +14,7 @@
 
 
 <script setup lang="ts">
-import { onMounted, ref} from 'vue';
+import { onMounted, ref,watch} from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 
@@ -88,12 +88,6 @@ const HandleFormItemChange =(params)=>{
     switch(key){
         case 'contact':
             if(val){
-                finalFormItemList.value = finalFormItemList.value.map(item=>{
-                    if(item.key == 'position'){
-                        item.hidden = false
-                    }
-                    return item
-                })
                 let aimPosition  = JSON.stringify({
                     label:JSON.parse(val).positionName,
                     value:JSON.parse(val).positionId
@@ -102,12 +96,7 @@ const HandleFormItemChange =(params)=>{
                     return item.value = aimPosition
                 })?.value
             }else{
-                finalFormItemList.value = finalFormItemList.value.map(item=>{
-                    if(item.key == 'position'){
-                        item.hidden = true
-                    }
-                    return item
-                })
+                formData.position = null
             }
             break
         case 'appointmentType':
@@ -165,6 +154,25 @@ const GetContactList = async ()=>{
     }
 }
 
+// 监听表单的职务信息是否展示
+watch(()=>props?.defaultFormData?.contact,(newVal)=>{
+    if(newVal){
+        finalFormItemList.value = finalFormItemList.value.map(item=>{
+            if(item.key == 'position'){
+                item.hidden = false
+            }
+            return item
+        })
+    }else{
+        finalFormItemList.value = finalFormItemList.value.map(item=>{
+            if(item.key == 'position'){
+                item.hidden = true
+            }
+            return item
+        })
+    }
+},{deep:true,immediate:true})
+
 onMounted(async ()=>{
     await store.dispatch('updateProductList')
     await store.dispatch('updateFollowUpStatus')

src/views/myCustomer/myCustomerDetail/contactDetail/index.vue

@@ -1,22 +1,27 @@
 <template>
     <div class="end_item">
-        <SearchBlock :searchList="blockSearchList" class="search_block">
+        <SearchBlock :searchList="blockSearchList" 
+            class="search_block" 
+            @searchChange="HandleSearchChange">
             <template #position>
-                <FormSearchGroup  :searchList="formSearchList" />
+                <FormSearchGroup  :searchList="formSearchList"  
+                    @searchChange="HandleSearchChange"/>
             </template>
         </SearchBlock>
-        <Table :currentPage="currentPage" 
-            :pageSize="pageSize" :totalNum="totalNum" 
+        <Table :hidePagination="true" 
             :tableColumns="tableColumns" 
             :tableData="tableData">
             <template #num="{currentIndex}">
-                {{ (currentPage - 1) * pageSize + currentIndex }}
+                {{ currentIndex }}
+            </template>
+            <template #lastFollowDate="{row}">
+                {{ row.lastFollowDate ? row.lastFollowDate : '-' }}
             </template>
             <template #operation="{row}">
                 <div class="table_row_option">
                     <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">写跟进</span>
                     <span class="option_button_editor" @click="OpenCactPeopleFormDialog(row)">编辑</span>
-                    <span class="el_button_delete">删除</span>
+                    <span class="el_button_delete" @click="OpenDeleteDialog(row)">删除</span>
                 </div>
             </template>
         </Table>
@@ -25,9 +30,12 @@
 
     <!-- 修改联系人弹窗 -->
     <ConcactPeopleFormDialog 
+        v-if="concactPeopleVisible"
         title="修改联系人"
         v-model:visible="concactPeopleVisible" 
-        :defaultFormData="defaultConcactPeopleFormData">
+        v-model:submitLoading="concactPeopleSubmitLoading" 
+        :defaultFormData="defaultConcactPeopleFormData"
+        @confirm="HandleCactPeopleFormDialogConfirm">
     </ConcactPeopleFormDialog>
 
 
@@ -38,11 +46,21 @@
         :defaultFormData="followDefaultFormData">
     </FollowFormDialog>
 
+    <!-- 删除联系人弹窗 -->
+    <Dialog :visible="deleteDialogVisible" 
+        :submitLoading="deleteDialogSubmitLoading"
+        @close="CloseDeleteDialog"
+        @confirm="HandleDeleteDialogConfirm">
+    </Dialog>
+
 </template>
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref,watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
 
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import {blockSearchList} from'./searchBlock'
@@ -55,70 +73,166 @@ import {tableColumns} from './table'
 import ConcactPeopleFormDialog from '@/components/ConcactPeopleFormDialog/index.vue'
 import FollowFormDialog from '../components/FollowFormDialog/index.vue'
 
+import {getPrivateContactListApi, updatePrivateContactApi, deletePrivateContactApi} from '@/api/myCustomer'
+import Dialog from '@/baseComponents/Dialog.vue';
+
+
+const props = defineProps({
+    contactReloadFlag:{
+        type:Number,
+    }
+})
+const route = useRoute()
+const store = useStore()
+
+
+
+/**
+ * 1. 获取联系人信息有关变量及操作
+ */
+const tableData = ref([]);
+const searchParams = ref({
+    position: 'all',
+    queryStr: '',
+})
+const HandleSearchChange = (params, key)=>{
+    searchParams.value = {
+        ...searchParams.value,
+        ...params
+    }
+    GetContactPeopleList()
+}
+const GetContactPeopleList = async ()=>{
+    let params = {
+        customerId: route.query.id,
+        queryStr: searchParams.value.queryStr,
+        positionId: searchParams.value.position == 'all' ? '' : JSON.parse(searchParams.value.position).value
+    }
+    let res = await getPrivateContactListApi(params)
+    if(res?.code == 200){
+        tableData.value = res?.data || []
+    }
+}
 
-const currentPage = ref(1)
-const pageSize = ref(20)
-const totalNum = ref(0)
-
-
-const tableData = ref([
-  {
-    id: '1',
-    name: '严谨',
-    position:'principal',
-    positionName: '校长',
-    mobilePhone: '172****9908',
-    officePhone: '17287889908',
-    remark: '备注文案',
-    lastFollowUpTime: '26-08-19 19:00',
-    creator: '李四',
-    createTime: '26-08-19 17:00'
-  },
-  {
-    id: '2',
-    name: '王诗雅',
-    position:'principal',
-    positionName: '校长',
-    mobilePhone: '172****9908',
-    officePhone: '-', // 图片中显示为横杠
-    remark: '备注文案',
-    lastFollowUpTime: '26-08-19 19:00',
-    creator: '李四',
-    createTime: '26-08-19 17:00'
-  },
-  {
-    id: '3',
-    name: '赵子涵',
-    position:'principal',
-    positionName: '教学校长',
-    mobilePhone: '172****9908',
-    officePhone: '172****9908', // 图片中该号码也进行了脱敏处理
-    remark: '备注文案',
-    lastFollowUpTime: '26-08-19 19:00',
-    creator: '李四',
-    createTime: '26-08-19 17:00'
-  }
-]);
-
-
-/** 修改联系人弹窗 有关数据及操作 */
+/** 2. 修改联系人弹窗 有关数据及操作 */
 const concactPeopleVisible = ref(false)
+const concactPeopleSubmitLoading = ref(false)
 const defaultConcactPeopleFormData = ref({})
 const OpenCactPeopleFormDialog = (row)=>{
     concactPeopleVisible.value = true
-    defaultConcactPeopleFormData.value = row
+    defaultConcactPeopleFormData.value = {
+        ...row,
+        position:JSON.stringify({
+            label:row.positionName,
+            value:row.positionId
+        })
+    }
+}
+const CloseCactPeopleFormDialog = ()=>{
+    concactPeopleVisible.value = false
+    concactPeopleSubmitLoading.value = false
+    defaultConcactPeopleFormData.value = {}
+}
+// 修改确认
+const HandleCactPeopleFormDialogConfirm = async (params)=>{
+    concactPeopleSubmitLoading.value = true
+    const {formData} = params
+    console.log('表单参数',formData)
+    let res = undefined
+    let finalParams = {
+        customerId: route.query.id,
+        id:formData.id,
+        name: formData.name,
+        positionId: JSON.parse(formData.position).value,
+        positionName: JSON.parse(formData.position).label,  
+        phoneNo: formData.phoneNo,
+        officePhoneNo: formData.officePhoneNo,
+        remark: formData.remark,
+    }
+    console.log('传递的表单参数',finalParams)
+    try{
+        res = await updatePrivateContactApi(finalParams)
+    }catch{}
+    if(res?.code == 200){
+        CloseCactPeopleFormDialog()
+        GetContactPeopleList()
+    }else{
+        concactPeopleSubmitLoading.value = false
+    }
+}
+
+
+/**
+ * 3. 删除联系人弹窗 有关数据及操作
+ */
+const deleteDialogVisible = ref(false)
+const deleteDialogSubmitLoading = ref(false)
+const currentDeleteRow = ref()
+const OpenDeleteDialog = (row)=>{
+    deleteDialogVisible.value = true
+    currentDeleteRow.value = row
+}
+const CloseDeleteDialog = ()=>{
+    deleteDialogVisible.value = false
+    deleteDialogSubmitLoading.value = false
+}
+// 删除确认
+const HandleDeleteDialogConfirm = async ()=>{
+    deleteDialogSubmitLoading.value = true
+    let res = undefined
+    try{
+        res = await deletePrivateContactApi(currentDeleteRow.value.id)
+    }catch{}
+    if(res?.code == 200){
+        CloseDeleteDialog()
+        GetContactPeopleList()
+    }else{
+        deleteDialogSubmitLoading.value = false
+    }
 }
 
 
-/** 写跟进 弹窗有关数据 及操作 */
+/** 4. 写跟进 弹窗有关数据 及操作 */
+const customerBaseMsg = ref()  //学校的基础信息
 const followVisible = ref(false)
 const followDefaultFormData = ref({})
 const OpenFollowlFormDialog = (row)=>{
     followVisible.value = true
     followDefaultFormData.value = {
-        // school:customerBaseMsg.value.schoolName,
+        school:customerBaseMsg.value.name,
+        contact:JSON.stringify({
+            id:row.id,
+            positionId:row.positionId,
+            positionName:row.positionName
+        }),
+        position:JSON.stringify({
+            label:row.positionName,
+            value:row.positionId,
+        })
     }
 }
+
+watch(()=>props.contactReloadFlag,async (newVal)=>{
+    await GetContactPeopleList()
+})
+
+onMounted( async ()=>{
+    // 获取学校的基础信息
+    customerBaseMsg.value = JSON.parse(sessionStorage.getItem('customerMsg') || '{}')    
+
+    await store.dispatch('updatePositionList')
+    blockSearchList.value = blockSearchList.value.map(item=>{
+        if(item.key == 'position'){
+            item.options = [
+                {label:'全部', value:'all'},
+                ...store.state.positionList
+            ]
+        }
+        return item
+    })
+    await GetContactPeopleList()
+
+})
 </script>
 
 

src/views/myCustomer/myCustomerDetail/contactDetail/searchBlock.ts

@@ -5,13 +5,7 @@ export const blockSearchList = ref([
         label: '职务',
         key: 'position',
         type: 'single',
-        options: [
-            { label: '全部', value: 'all' },
-            { label: '校长', value: 'schoolMaster' },
-            { label: '教学校长', value: 'principalOfTheSchool' },
-            { label: '教务主任', value: 'deanOfStudies' },
-            { label: '信息主任', value: 'informationDirector' },
-        ],
+        options: [],
         defaultValue: 'all'
     }
 ])

src/views/myCustomer/myCustomerDetail/contactDetail/table.ts

@@ -26,7 +26,7 @@ export const tableColumns = ref([
     hidden: false
   },
   {
-    name: 'mobilePhone',
+    name: 'phoneNo',
     label: '手机号',
     width: '140',
     align: 'center',
@@ -34,7 +34,7 @@ export const tableColumns = ref([
     hidden: false
   },
   {
-    name: 'officePhone',
+    name: 'officePhoneNo',
     label: '办公电话',
     width: '140',
     align: 'center',
@@ -49,16 +49,17 @@ export const tableColumns = ref([
     custom: false,
     hidden: false
   },
+
   {
-    name: 'lastFollowUpTime',
+    name: 'lastFollowDate',
     label: '上次跟进时间',
     width: '180',
     align: 'center',
-    custom: false,
+    custom: true,
     hidden: false
   },
   {
-    name: 'creator',
+    name: 'createdBy',
     label: '创建人',
     width: '100',
     align: 'center',
@@ -66,7 +67,7 @@ export const tableColumns = ref([
     hidden: false
   },
   {
-    name: 'createTime',
+    name: 'createdAt',
     label: '创建时间',
     width: '180',
     align: 'center',