我的客户详情页 添加写跟进 弹窗

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

@@ -0,0 +1,79 @@
+import { ref } from "vue";
+
+export const formItemList = ref([
+  {
+    key: 'school',
+    label: '跟进学校',
+    type: 'input',
+    disabled: true,
+    style: { }
+  },
+  {
+    key: 'product',
+    label: '跟进产品',
+    type: 'select',
+    placeholder: '请选择跟进产品',
+    selectList: [], 
+    style: { }
+  },
+  {
+    key: 'status',
+    label: '跟进状态',
+    type: 'radio',
+    selectList: [
+      { label: '线索建立', value: 'lead_established' },
+      { label: '方案演示', value: 'proposal_demo' },
+      { label: '试用测试', value: 'trial_test' },
+      { label: '赢单', value: 'won' },
+      { label: '输单', value: 'lost' }
+    ],
+    style: {  }
+  },
+  {
+    key: 'contact',
+    label: '联系人',
+    type: 'select',
+    placeholder: '请选择跟进的联系人',
+    selectList: [], 
+    style: {  }
+  },
+  {
+    key: 'position',
+    label: '职务',
+    type: 'select',
+    placeholder: '请选择职务',
+    disabled: true,
+    selectList: [], 
+    style: { width: '100%' }
+  },
+  {
+    key: 'content',
+    label: '跟进内容',
+    type: 'textarea',
+    placeholder: '请输入跟进内容',
+    rows: 4,
+    style: { }
+  },
+  {
+    key: 'appointmentType',
+    label: '预约待办',
+    type: 'radio',
+    selectList: [
+      { label: '预约', value: 'appointment' },
+      { label: '待办', value: 'todo' }
+    ],
+    style: { }
+  },
+  {
+    key: 'appointmentTime',
+    label: '预约时间',
+    type: 'dateTimePickerNoRange',
+    style: {  }
+  },
+  {
+    key: 'todoTime',
+    label: '待办时间',
+    type: 'dateTimePickerNoRange',
+    style: { }
+  }
+]);

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

@@ -0,0 +1,46 @@
+<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

@@ -14,7 +14,7 @@
             </template>
             <template #operation="{row}">
                 <div class="table_row_option">
-                    <span class="option_button_editor">写跟进</span>
+                    <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">写跟进</span>
                     <span class="option_button_editor" @click="OpenCactPeopleFormDialog(row)">编辑</span>
                     <span class="el_button_delete">删除</span>
                 </div>
@@ -30,6 +30,14 @@
         :defaultFormData="defaultConcactPeopleFormData">
     </ConcactPeopleFormDialog>
 
+
+    <!-- 写跟进弹窗 -->
+    <FollowFormDialog 
+        v-if="followVisible"
+        v-model:visible="followVisible"
+        :defaultFormData="followDefaultFormData">
+    </FollowFormDialog>
+
 </template>
 
 
@@ -45,6 +53,7 @@ import {tableColumns} from './table'
 
 
 import ConcactPeopleFormDialog from '../components/ConcactPeopleFormDialog/index.vue'
+import FollowFormDialog from '../components/FollowFormDialog/index.vue'
 
 
 const currentPage = ref(1)
@@ -101,6 +110,15 @@ const OpenCactPeopleFormDialog = (row)=>{
 }
 
 
+/** 写跟进 弹窗有关数据 及操作 */
+const followVisible = ref(false)
+const followDefaultFormData = ref({})
+const OpenFollowlFormDialog = (row)=>{
+    followVisible.value = true
+    followDefaultFormData.value = {
+        // school:customerBaseMsg.value.schoolName,
+    }
+}
 </script>
 
 

src/views/myCustomer/myCustomerDetail/index.vue

@@ -18,7 +18,7 @@
                     <span>上次跟进时间：{{ customerBaseMsg.lastFollowUpTime }}</span>
                 </div>
                 <div class="action">
-                    <el-button class="button_background"><img :src="peopleEditIcon" alt=""> 写跟进</el-button>
+                    <el-button class="button_background" @click="OpenFollowlFormDialog"><img :src="peopleEditIcon" 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>
@@ -53,6 +53,7 @@
 
     <!-- 操作记录 弹窗 -->
     <PreviewDialog 
+        v-if="operationRecordDialogVisible"
         class="operation_dialog"
         title="操作记录"
         :previewVisible="operationRecordDialogVisible"
@@ -75,16 +76,28 @@
     </PreviewDialog>
 
     <!-- 编辑学校弹窗 -->
-     <SchoolFormDialog v-model:visible="schoolVisible"  
+     <SchoolFormDialog 
+        v-if="schoolVisible"
+        v-model:visible="schoolVisible"  
         :defaultFormData="schoolDefaultFormData">
     </SchoolFormDialog>
 
     <!-- 新增联系人弹窗 -->
-     <ConcactPeopleFormDialog v-model:visible="concactPeopleVisible" 
+     <ConcactPeopleFormDialog 
+        v-if="concactPeopleVisible"
+        v-model:visible="concactPeopleVisible" 
         title="新增联系人"
         :default-form-data="concactPeopleDefaultFormData">
     </ConcactPeopleFormDialog>
 
+    <!-- 写跟进弹窗 -->
+    <FollowFormDialog 
+        v-if="followVisible"
+        v-model:visible="followVisible"
+        :defaultFormData="followDefaultFormData">
+    </FollowFormDialog>
+
+
 </template>
 
 <script setup lang="ts">
@@ -112,6 +125,7 @@ import Pagination from '@/baseComponents/Pagination.vue';
 import SchoolFormDialog from '../components/SchoolFormDialog/index.vue'
 import ConcactPeopleFormDialog from './components/ConcactPeopleFormDialog/index.vue'
 
+import FollowFormDialog from './components/FollowFormDialog/index.vue'
 
 const customerBaseMsg = ref({
   schoolName: '北京市第一零九中学',
@@ -288,6 +302,17 @@ const OpenConcactPeoplelFormDialog = ()=>{
     concactPeopleDefaultFormData.value = {}
 }
 
+
+/** 写跟进 弹窗有关数据 及操作 */
+const followVisible = ref(false)
+const followDefaultFormData = ref({})
+const OpenFollowlFormDialog = ()=>{
+    followVisible.value = true
+    followDefaultFormData.value = {
+        school:customerBaseMsg.value.schoolName,
+    }
+}
+
 </script>