公海客户详情页基础信息渲染和编辑学校接口调用

src/api/parameterConfig.ts

@@ -62,6 +62,13 @@ export const provinceSortApi = (data:any)=>{
     })
 }
 
+// 查询开通的省市数据
+export const getOpenProvinceCityListApi = ()=>{
+     return request({
+        url: `${adminPrefix}/api/v1/region/queryProvinceAndCity`,
+        method: 'get',
+    })
+}
 
 
 

src/components/SchoolFormDialog/index.vue

@@ -14,20 +14,12 @@
 
 
 <script setup lang="ts">
-import {  ref,watch } from 'vue';
+import {  onMounted, ref,watch } from 'vue';
+import { useStore } from 'vuex';
 
 import FormDialog from '@/baseComponents/FormDialog.vue';
 import {formItemList} from './formDialog'
 
-// 动态变更的表单下拉配置
-interface DynamicFormItmOpt {
-    key:string;
-    selectList?:Array<{
-        label:string,
-        value:string
-    }>,
-    unionSelectList?:Array<DynamicFormItmOpt>
-}
 
 const props = defineProps({
     defaultFormData:{
@@ -38,16 +30,15 @@ const props = defineProps({
         type:String,
         default:'编辑学校'
     },
-    dynamicFormItmOpt:{
-        type:Array<DynamicFormItmOpt>,
-        default:()=>[]
-    }
 })
 
 const emit = defineEmits(['confirm'])
 
 const editFormDialogVisible = defineModel('visible')
-const editFormDialogSubmitLoading = defineModel('editFormDialogSubmitLoading')
+const editFormDialogSubmitLoading = defineModel('submitLoading')
+
+
+const store = useStore()
 
 
 const filterFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))
@@ -65,6 +56,26 @@ const HandleFormItemChange = (params)=>{
     }
 }
 
+onMounted( async()=>{
+    // 重置 学校弹窗的 学段 和 省份 地区 弹窗
+    await store.dispatch('updateSchoolStageList')
+    await store.dispatch('updateConfigedProvinceCityList')
+
+    filterFormItemList.value = filterFormItemList.value.map(item=>{
+        if(item.key == 'schoolStage'){
+            item.selectList = store.state.schoolStageList
+        }else if(item.key == 'provinceArea'){
+            let finalUnionSelectList = item.unionSelectList.map(unionItm=>{
+                if(unionItm.key == 'province'){
+                    unionItm.selectList =  store.state.configedProvinceCityList
+                }
+                return unionItm
+            })
+            item.unionSelectList = finalUnionSelectList
+        }
+        return item
+    })
+})
 
 
 // 切换省份 变更 地区下拉
@@ -72,7 +83,7 @@ watch(()=>props.defaultFormData?.provinceArea?.province,(newVal)=>{
     filterFormItemList.value = filterFormItemList.value.map(item=>{
         if(item.key == 'provinceArea'){
             let provinceSubSelectList = item.unionSelectList.find(unionItm=>unionItm.key == 'province')
-                                            ?.selectList.find(opt=>opt.value==newVal)?.subData || []
+                                            ?.selectList.find(opt=>opt.value==newVal)?.cityData || []
             item.unionSelectList.map(unionItm=>{
                 if(unionItm.key == 'district'){
                     unionItm.selectList = provinceSubSelectList
@@ -83,30 +94,7 @@ watch(()=>props.defaultFormData?.provinceArea?.province,(newVal)=>{
     })
 },{deep:true})
 
-// 动态变更表单下拉
-watch(()=>props.dynamicFormItmOpt,(newVal)=>{
-    filterFormItemList.value = filterFormItemList.value.map(item=>{
-        let result = newVal.find(dynamicItm=>{
-            return item.key == dynamicItm.key
-        })
-        if(result){
-            if(result.unionSelectList){
-                let dynamicUnionSelectList = result.unionSelectList
-                let finalUnionSelectList = item.unionSelectList.map(unionItm=>{
-                    let matchDynamic = dynamicUnionSelectList.find(dynItm=>dynItm.key == unionItm.key)
-                    if(matchDynamic){
-                        unionItm.selectList = matchDynamic.selectList
-                    }
-                    return unionItm
-                })
-                item.unionSelectList = finalUnionSelectList
-            }else{
-                item.selectList = result.selectList
-            }
-        }
-        return item
-    })
-},{deep:true})
+
 </script>
 
 

src/store/index.ts

@@ -2,7 +2,7 @@ import { createStore } from 'vuex'
 // import { ActionContext } from 'vuex'
 import type { App } from 'vue'
 
-import {getFieldListExcludeAreaApi} from '@/api/parameterConfig'
+import {getFieldListExcludeAreaApi,getOpenProvinceCityListApi} from '@/api/parameterConfig'
 
 // 定义 RootState 接口（可扩展）
 interface RootState {
@@ -12,6 +12,8 @@ interface RootState {
   positionList:any[],  //职位列表
   productList:any[],   //产品列表
   followUpStatus:any[],  //跟进状态 列表
+  schoolStageList:any[],  // 学段列表
+  configedProvinceCityList:any[],  //已经配置的省份城市列表
 }
 
 
@@ -58,6 +60,8 @@ const store = createStore<RootState>({
     positionList:JSON.parse(sessionStorage.getItem('positionList') || '[]'),
     productList:JSON.parse(sessionStorage.getItem('productList') || '[]'),
     followUpStatus:JSON.parse(sessionStorage.getItem('followUpStatus') || '[]'),
+    schoolStageList:JSON.parse(sessionStorage.getItem('schoolStageList') || '[]'),
+    configedProvinceCityList:JSON.parse(sessionStorage.getItem('configedProvinceCityList') || '[]'),
   }),
   mutations: {
     increment(state: RootState) {
@@ -75,6 +79,14 @@ const store = createStore<RootState>({
       sessionStorage.setItem('followUpStatus',JSON.stringify(data))
       state.followUpStatus = data
     },
+    updateSchoolStageList(state,data){
+      sessionStorage.setItem('schoolStageList',JSON.stringify(data))
+      state.schoolStageList = data
+    },
+    updateConfigedProvinceCityList(state,data){
+      sessionStorage.setItem('configedProvinceCityList',JSON.stringify(data))
+      state.configedProvinceCityList = data
+    },
   },
   actions: {
     increment({ commit }) {
@@ -155,6 +167,66 @@ const store = createStore<RootState>({
         }
       }
     },
+    async updateSchoolStageList({commit,state},data){
+      if(data){
+        commit('updateSchoolStageList')
+      }else{
+        if(state.schoolStageList?.length > 0){
+          return
+        }
+        let schoolStageOption = []
+        let res = await getFieldListExcludeAreaApi(0)
+        if(res?.code == 200){
+            schoolStageOption = res.data?.map(item=>{
+                return{
+                    label:item.title,
+                    value:JSON.stringify({
+                        label:item.title,
+                        value:item.id
+                    })
+                }
+            }) || []
+            commit('updateSchoolStageList',schoolStageOption)
+        }else{
+            commit('updateSchoolStageList',[])
+        }
+      }
+    },
+
+    async updateConfigedProvinceCityList({commit,state},data){
+      if(data){
+        commit('updateConfigedProvinceCityList')
+      }else{
+        if(state.configedProvinceCityList?.length > 0){
+          return
+        }
+        let configedProvinceCityList = []
+        let res = await getOpenProvinceCityListApi()
+        if(res?.code == 200){
+            configedProvinceCityList = res.data?.map(item=>{
+                return{
+                    label:item.name,
+                    value:JSON.stringify({
+                        label:item.name,
+                        value:item.id
+                    }),
+                    cityData:item.cityData?.map(city=>{
+                        return {
+                            label:city.name,
+                            value:JSON.stringify({
+                                label:city.name, 
+                                value:city.id
+                            }),
+                        }
+                    }) || [],
+                }
+            }) || []
+            commit('updateConfigedProvinceCityList',configedProvinceCityList)
+        }else{
+            commit('updateConfigedProvinceCityList',[])
+        }
+      }
+    },
   },
   getters: {
     count: (state: RootState) => state.count,

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/index.vue

@@ -46,7 +46,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';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
@@ -63,6 +63,11 @@ import {
 } from '@/api/highSeasCustomer'
 import Dialog from '@/baseComponents/Dialog.vue';
 
+const props = defineProps({
+    reloadFlag:{  //重新加载联系人数据标识
+        type:Number,
+    }
+})
 
 const store = useStore()
 const route  =  useRoute ()
@@ -190,6 +195,10 @@ const HandleDeleteConfirm = async ()=>{
     }
 }
 
+
+watch(()=>props.reloadFlag,async (newVal)=>{
+    await GetConcactPeopleList()
+})
 onMounted(async ()=>{
     await GetPositionList()
     await GetConcactPeopleList()

src/views/highSeasCustomer/highSeasCustomerDetail/index.vue

@@ -3,15 +3,15 @@
         <TopBackNav>
             <template #topRight>
                 <div class="header_content">
-                    <span>{{ customerBaseMsg.schoolName }}</span>
+                    <span>{{ customerBaseMsg.name }}</span>
                 </div>
                 <div class="desc">
-                    <span>学段：{{ customerBaseMsg.educationStage }}</span>
-                    <span>省份：{{ customerBaseMsg.province }}</span>
-                    <span>地区：{{ customerBaseMsg.district }}</span>
+                    <span>学段：{{ customerBaseMsg.stageName }}</span>
+                    <span>省份：{{ customerBaseMsg.provinceName }}</span>
+                    <span>地区：{{ customerBaseMsg.cityName }}</span>
                     <span>地址：{{ customerBaseMsg.address }}</span>
-                    <span>进入公海时间：{{ customerBaseMsg.enterTime }}</span>
-                    <span>闲置天数：{{ customerBaseMsg.unusedDays }}</span>
+                    <span>进入公海时间：{{ customerBaseMsg.resetDatetime }}</span>
+                    <span>闲置天数：{{ customerBaseMsg.unUsedDayCount }}</span>
                 </div>
                 <div class="action">
                     <el-button class="button_background" @click=""><img :src="peopleAuthenticationIcon" alt=""> 认领</el-button>
@@ -31,7 +31,7 @@
             <div class="page_jg_20" style="flex-shrink: 0 !important;"></div>
 
             <!-- 联系人详情 -->
-            <ContactDetail v-if="defaultShowTab === 'contactDetails'"/>
+            <ContactDetail :reloadFlag="reloadFlag" v-if="defaultShowTab === 'contactDetails'"/>
             <CustomerStatusOverview v-if="defaultShowTab === 'messageOverview'"/>
         </div>
 
@@ -57,9 +57,10 @@
 
         <!-- 编辑学校弹窗 -->
         <SchoolFormDialog 
-            v-if="schoolVisible"
             v-model:visible="schoolVisible"  
-            :defaultFormData="schoolDefaultFormData">
+            :defaultFormData="schoolDefaultFormData"
+            v-model:submitLoading="schoolSubmitLoading"
+            @confirm="HandleSchoolDialogConfirm">
         </SchoolFormDialog>
 
         <!-- 新增联系人弹窗 -->
@@ -110,15 +111,19 @@ import { ElMessage } from 'element-plus';
 
 const route = useRoute()
 
-const customerBaseMsg = ref({
-  schoolName: '北京市第一零九中学',
-  educationStage: '九年一贯',
-  province: '北京',
-  district: '东城区',
-  address: '北京市东城区葱店西街56号',
-  enterTime: '2024-09-20',
-  unusedDays: '1天'
-});
+interface CustomerBaseMsg {
+    name:string,  //学校名称
+    stageName:string,  //学段
+    stageId:string,
+    provinceName:string, //省份
+    provinceId:string,
+    cityName:string,  // 地区
+    cityId:string,
+    address:string,  //地址
+    resetDatetime:string,  //进入公海时间
+    unUsedDayCount:string,  //闲置天数
+}
+const customerBaseMsg = ref<CustomerBaseMsg>({});
 
 // 默认列表的tab切换
 const defaultShowTab = ref('messageOverview')
@@ -218,34 +223,12 @@ const GetOperationList = async ()=>{
 }
 
 
-/**  编辑学校 有关数据 及操作 */
-const schoolVisible = ref(false)
-const schoolDefaultFormData = ref({})
-const OpenSchoolFormDialog = ()=>{
-    schoolVisible.value = true
-    schoolDefaultFormData.value = {
-        id: 1,
-        schoolName: '流星花园学校',
-        schoolStage: 'middle',
-        province:'beijing',
-        provinceName: '北京市',
-        city:'dongcheng',
-        cityName: '东城区',
-        detailAddress:'通州北苑',
-        groupName: '小组',
-        enterTime: '2026-03-11',
-        provinceArea:{
-            province:'beijing',
-            district:'dongcheng',
-        }
-    }
-}
-
-
 /** 1. 新增联系人有关数据  及操作 */
 const concactPeopleVisible = ref(false)
 const concactPeopleDefaultFormData = ref({})
 const concactPeopleSubmitLoading = ref(false)
+const reloadFlag = ref(0)  //重新加载联系人数据标识
+
 const OpenConcactPeoplelFormDialog = ()=>{
     concactPeopleVisible.value = true
 }
@@ -273,11 +256,77 @@ const HandleAddPeoplelConfirm = async (params:any)=>{
     if(res?.code == 200){
         ElMessage.success(res?.msg)
         CloseConcactPeoplelFormDialog()
+        reloadFlag.value += 1
+    }
+}
+
+
+
+/** 2. 编辑学校 有关数据 及操作 */
+const schoolVisible = ref(false)
+const schoolSubmitLoading = ref(false)
+
+const schoolDefaultFormData = ref({})
+const CloseSchoolFormDialog = ()=>{
+    schoolVisible.value = false
+    schoolSubmitLoading.value = false
+    schoolDefaultFormData.value = {}
+}
+// 打开弹窗
+const OpenSchoolFormDialog = ()=>{
+    schoolVisible.value = true
+    schoolDefaultFormData.value = {
+        ...customerBaseMsg.value,
+        schoolStage:JSON.stringify({
+            label:customerBaseMsg.value?.stageName,
+            value:customerBaseMsg.value?.stageId,
+        }),
+        provinceArea:{
+            province:JSON.stringify({
+                label:customerBaseMsg.value?.provinceName,
+                value:customerBaseMsg.value?.provinceId,
+            }),
+            district:JSON.stringify({
+                label:customerBaseMsg.value?.cityName,
+                value:customerBaseMsg.value?.cityId,
+            }),
+        }
     }
 }
+// 编辑确认
+const HandleSchoolDialogConfirm = async (params)=>{
+    schoolSubmitLoading.value = true
+    const {formData,formRef} = params
 
+    let transferParams = {
+        id: formData.id,
+        name: formData.name,
+        stageId: JSON.parse(formData.schoolStage || '{}')?.value,
+        stageName: JSON.parse(formData.schoolStage || '{}')?.label,
+        provinceId: JSON.parse(formData.provinceArea.province || '{}')?.value,
+        provinceName: JSON.parse(formData.provinceArea.province || '{}')?.label,
+        cityId: JSON.parse(formData.provinceArea.district || '{}')?.value,
+        cityName: JSON.parse(formData.provinceArea.district || '{}')?.label,
+        address: formData.address,
+    }
+    let res = undefined
+    try{
+        // 修改
+        res = await updateHighSeasCustomerApi(transferParams) 
+    }catch{}
+
+    if(res?.code == 200){
+        CloseSchoolFormDialog()
+        // 待完善---- 
+        // 重新查询学校基础信息
+    }else{
+        schoolSubmitLoading.value = false
+    }
+}
 
 onMounted(async ()=>{
+    // 获取学校的基础信息
+    customerBaseMsg.value = JSON.parse(sessionStorage.getItem('customerMsg') || '{}')    
 })
 
 </script>

src/views/highSeasCustomer/index.vue

@@ -35,9 +35,8 @@
         <SchoolFormDialog 
             :schoolTitle="schoolTitle" 
             v-model:visible="schoolVisible" 
-            v-model:editFormDialogSubmitLoading="editFormDialogSubmitLoading"
+            v-model:submitLoading="editFormDialogSubmitLoading"
             :defaultFormData="schoolDefaultFormData"
-            :dynamicFormItmOpt="dynamicFormItmOpt"
             @confirm="HandleSchoolDialogConfirm">
         </SchoolFormDialog>
 
@@ -235,24 +234,6 @@ const schoolTitle = ref('')
 const schoolDefaultFormData = ref({})
 const editFormDialogSubmitLoading = ref(false)
 
-// 动态变更的表单下拉项
-const dynamicFormItmOpt = computed(()=>{
-    return [
-        {
-            key: 'schoolStage',
-            selectList:stageOptions.value,
-        },
-        {
-            key: 'provinceArea',
-            unionSelectList: [
-                {
-                    key: 'province',
-                    selectList:regionOptions.value,
-                },
-            ]
-        },
-    ]
-})
 const OpenSchoolFormDialog = (row?:any)=>{
     if(row){
         schoolTitle.value = '编辑学校'
@@ -417,6 +398,7 @@ const ClaimCustomer = async (row)=>{
 
 /** 7.跳转详情 */
 const GoToDetail = (row)=>{
+    sessionStorage.setItem('customerMsg',JSON.stringify(row))
     router.push(`highSeasCustomerDetail?id=${row.id}`)
 }