我的客户详情页 添加新增/修改联系人弹窗

src/views/myCustomer/components/SchoolFormDialog/index.vue

@@ -2,7 +2,7 @@
      <FormDialog width="640px" title="编辑学校" 
         :visible="editFormDialogVisible" 
         :submitLoading="editFormDialogSubmitLoading"
-        :defaultFormData="defaultFormData"
+        :defaultFormData="{...defaultFormData}"
         :formItemList="formItemList"
         @close="CloseFormDialog"
         @confirm="HandleConfirmFormDialog">

src/views/myCustomer/myCustomerDetail/components/ConcactPeopleFormDialog/formDialog.ts

@@ -0,0 +1,47 @@
+import { ref } from "vue";
+
+export const formItemList = ref([
+  {
+    key: 'name',
+    label: '姓名',
+    type: 'input',
+    placeholder: '请输入姓名',
+    style: { }
+  },
+  {
+    key: 'position',
+    label: '职务',
+    type: 'radio',
+    selectList: [
+      { label: '校长', value: 'principal' },
+      { label: '副校长', value: 'vice_principal' },
+      { label: '教务主任', value: 'teaching_director' },
+      { label: '信息中心主任', value: 'info_center_director' },
+      { label: '年级组长', value: 'grade_leader' },
+      { label: '其他', value: 'other' }
+    ],
+    style: {  }
+  },
+  {
+    key: 'mobilePhone',
+    label: '手机号',
+    type: 'input',
+    placeholder: '请输入手机号',
+    style: {}
+  },
+  {
+    key: 'officePhone',
+    label: '办公电话',
+    type: 'input',
+    placeholder: '请输入办公电话',
+    style: {}
+  },
+  {
+    key: 'remark',
+    label: '备注',
+    type: 'textarea',
+    placeholder: '请输入联系人备注',
+    rows: 4,
+    style: {}
+  }
+]);

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

@@ -0,0 +1,43 @@
+<template>
+     <FormDialog width="640px" :title="title" 
+        :visible="editFormDialogVisible" 
+        :submitLoading="editFormDialogSubmitLoading"
+        :defaultFormData="{...defaultFormData}"
+        :formItemList="formItemList"
+        @close="CloseFormDialog"
+        @confirm="HandleConfirmFormDialog">
+    </FormDialog>
+</template>
+
+
+<script setup lang="ts">
+import {  ref } from 'vue';
+
+import FormDialog from '@/baseComponents/FormDialog.vue';
+import {formItemList} from './formDialog'
+
+const props = defineProps({
+    defaultFormData:{
+        type:Object,
+        required:true
+    },
+    title:{
+        type:String,
+        default:'标题'
+    }
+})
+const editFormDialogVisible = defineModel('visible')
+const editFormDialogSubmitLoading = ref(false)
+
+const CloseFormDialog = ()=>{
+    editFormDialogVisible.value = false
+}
+const HandleConfirmFormDialog = ()=>{
+    CloseFormDialog()
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+</style>

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

@@ -15,12 +15,21 @@
             <template #operation="{row}">
                 <div class="table_row_option">
                     <span class="option_button_editor">写跟进</span>
-                    <span class="option_button_editor">编辑</span>
+                    <span class="option_button_editor" @click="OpenCactPeopleFormDialog(row)">编辑</span>
                     <span class="el_button_delete">删除</span>
                 </div>
             </template>
         </Table>
     </div>
+
+
+    <!-- 修改联系人弹窗 -->
+    <ConcactPeopleFormDialog 
+        title="修改联系人"
+        v-model:visible="concactPeopleVisible" 
+        :defaultFormData="defaultConcactPeopleFormData">
+    </ConcactPeopleFormDialog>
+
 </template>
 
 
@@ -35,6 +44,8 @@ import Table from '@/baseComponents/Table.vue';
 import {tableColumns} from './table'
 
 
+import ConcactPeopleFormDialog from '../components/ConcactPeopleFormDialog/index.vue'
+
 
 const currentPage = ref(1)
 const pageSize = ref(20)
@@ -45,7 +56,8 @@ const tableData = ref([
   {
     id: '1',
     name: '严谨',
-    jobTitle: '校长',
+    position:'principal',
+    positionName: '校长',
     mobilePhone: '172****9908',
     officePhone: '17287889908',
     remark: '备注文案',
@@ -56,7 +68,8 @@ const tableData = ref([
   {
     id: '2',
     name: '王诗雅',
-    jobTitle: '校长',
+    position:'principal',
+    positionName: '校长',
     mobilePhone: '172****9908',
     officePhone: '-', // 图片中显示为横杠
     remark: '备注文案',
@@ -67,7 +80,8 @@ const tableData = ref([
   {
     id: '3',
     name: '赵子涵',
-    jobTitle: '教学校长',
+    position:'principal',
+    positionName: '教学校长',
     mobilePhone: '172****9908',
     officePhone: '172****9908', // 图片中该号码也进行了脱敏处理
     remark: '备注文案',
@@ -76,6 +90,17 @@ const tableData = ref([
     createTime: '26-08-19 17:00'
   }
 ]);
+
+
+/** 修改联系人弹窗 有关数据及操作 */
+const concactPeopleVisible = ref(false)
+const defaultConcactPeopleFormData = ref({})
+const OpenCactPeopleFormDialog = (row)=>{
+    concactPeopleVisible.value = true
+    defaultConcactPeopleFormData.value = row
+}
+
+
 </script>
 
 

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

@@ -18,7 +18,7 @@ export const tableColumns = ref([
     hidden: false
   },
   {
-    name: 'jobTitle',
+    name: 'positionName',
     label: '职务',
     width: '120',
     align: 'center',

src/views/myCustomer/myCustomerDetail/index.vue

@@ -19,7 +19,7 @@
                 </div>
                 <div class="action">
                     <el-button class="button_background"><img :src="peopleEditIcon" alt=""> 写跟进</el-button>
-                    <el-button class="button_border"><img :src="addIcon" alt=""> 新增联系人</el-button>
+                    <el-button class="button_border" @click="OpenConcactPeoplelFormDialog"><img :src="addIcon" alt=""> 新增联系人</el-button>
                     <el-button class="button_refresh" @click="OpenSchoolFormDialog"><img :src="editIcon" alt="" > 编辑</el-button>
                     <el-button class="button_refresh"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
                     <el-button class="button_refresh" @click="OpenTransferFormDialog"><img :src="exchangeIcon" alt="" > 转让</el-button>
@@ -79,6 +79,11 @@
         :defaultFormData="schoolDefaultFormData">
     </SchoolFormDialog>
 
+    <!-- 新增联系人弹窗 -->
+     <ConcactPeopleFormDialog v-model:visible="concactPeopleVisible" 
+        title="新增联系人"
+        :default-form-data="concactPeopleDefaultFormData">
+    </ConcactPeopleFormDialog>
 
 </template>
 
@@ -105,6 +110,8 @@ import FollowCard from '@/components/FollowCard.vue';
 import Pagination from '@/baseComponents/Pagination.vue';
 
 import SchoolFormDialog from '../components/SchoolFormDialog/index.vue'
+import ConcactPeopleFormDialog from './components/ConcactPeopleFormDialog/index.vue'
+
 
 const customerBaseMsg = ref({
   schoolName: '北京市第一零九中学',
@@ -273,6 +280,13 @@ const OpenSchoolFormDialog = ()=>{
 }
 
 
+/** 新增联系人有关数据  及操作 */
+const concactPeopleVisible = ref(false)
+const concactPeopleDefaultFormData = ref({})
+const OpenConcactPeoplelFormDialog = ()=>{
+    concactPeopleVisible.value = true
+    concactPeopleDefaultFormData.value = {}
+}
 
 </script>