联系人商机功能

src/views/crm/contact/detail/ContactBasicInfo.vue

@@ -1,24 +0,0 @@
-<!--
- * @Author: zyna
- * @Date: 2023-11-11 14:50:11
- * @LastEditTime: 2023-11-11 14:52:47
- * @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactBasicInfo.vue
- * @Description:
--->
-<template>
-  <el-col>
-    <el-row>
-      <span class="text-xl font-bold">{{ contact.name }}</span>
-    </el-row>
-  </el-col>
-  <el-col class="mt-10px">
-    <!-- TODO 标签 -->
-    <!--    <Icon icon="ant-design:tag-filled" />-->
-  </el-col>
-</template>
-<script setup lang="ts">
-// TODO 芋艿：后面在 review 么？
-import * as ContactApi from '@/api/crm/contact'
-
-const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
-</script>

src/views/crm/contact/detail/ContactDetailsHeader.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: zyna
+ * @Date: 2023-12-02 13:08:57
+ * @LastEditTime: 2023-12-03 13:47:16
+ * @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactDetailsHeader.vue
+ * @Description: 
+-->
+<template>
+  <div v-loading="loading">
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ contact.name }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button @click="openForm('update', contact.id)" v-hasPermi="['crm:contact:update']">
+          编辑
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户">
+        {{ contact.customerName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="职务">
+        {{ contact.post }}
+      </el-descriptions-item>
+      <el-descriptions-item label="手机">
+        {{ contact.mobile }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ contact.createTime ? formatDate(contact.createTime) : '空' }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <ContactForm ref="formRef" @success="emit('refresh')" />
+</template>
+<script setup lang="ts">
+import * as ContactApi from '@/api/crm/contact'
+import ContactForm from '@/views/crm/contact/ContactForm.vue'
+import { formatDate } from '@/utils/formatTime'
+
+//操作修改
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
+const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
+</script>

src/views/crm/contact/detail/index.vue

@@ -1,99 +1,32 @@
 <template>
-  <!-- TODO 芋艿：要不要把 3 到 62 合并成一个组件 -->
-  <div v-loading="loading">
-    <div class="flex items-start justify-between">
-      <div>
-        <!-- 左上：客户基本信息 -->
-        <ContactBasicInfo :contact="contact" />
-      </div>
-      <div>
-        <!-- 右上：按钮 -->
-        <el-button @click="openForm('update', contact.id)" v-hasPermi="['crm:contact:update']">
-          编辑
-        </el-button>
-      </div>
-    </div>
-    <el-row class="mt-10px">
-      <el-button>
-        <Icon icon="ph:calendar-fill" class="mr-5px" />
-        创建任务
-      </el-button>
-      <el-button>
-        <Icon icon="carbon:email" class="mr-5px" />
-        发送邮件
-      </el-button>
-      <el-button>
-        <Icon icon="system-uicons:contacts" class="mr-5px" />
-        创建联系人
-      </el-button>
-      <el-button>
-        <Icon icon="ep:opportunity" class="mr-5px" />
-        创建商机
-      </el-button>
-      <el-button>
-        <Icon icon="clarity:contract-line" class="mr-5px" />
-        创建合同
-      </el-button>
-      <el-button>
-        <Icon icon="icon-park:income-one" class="mr-5px" />
-        创建回款
-      </el-button>
-      <el-button>
-        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
-        添加团队成员
-      </el-button>
-    </el-row>
-  </div>
-  <ContentWrap class="mt-10px">
-    <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="客户">
-        {{ contact.customerName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="职务">
-        {{ contact.post }}
-      </el-descriptions-item>
-      <el-descriptions-item label="手机">
-        {{ contact.mobile }}
-      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">
-        {{ contact.createTime ? formatDate(contact.createTime) : '空' }}
-      </el-descriptions-item>
-    </el-descriptions>
-  </ContentWrap>
-  <!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
-  <el-col :span="18">
+  <ContactDetailsHeader :contact="contact" :loading="loading" @refresh="getContactData(id)" />
+  <el-col>
     <el-tabs>
-      <el-tab-pane label="基本信息">
-        <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
-        <ContactDetails class="ml-2" :contact="contact" />
+      <el-tab-pane label="详细资料">
+        <ContactDetailsInfo :contact="contact" />
       </el-tab-pane>
-      <el-tab-pane label="跟进记录" lazy> 跟进记录</el-tab-pane>
-      <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
-      <el-tab-pane label="附件" lazy> 附件</el-tab-pane>
-      <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
-      <el-tab-pane label="操作记录" lazy>
-        <template #label> 操作记录<el-badge :value="12" class="item" type="primary" /> </template>
-        操作记录
+      <el-tab-pane label="操作日志" lazy>TODO 待开发</el-tab-pane>
+      <el-tab-pane label="团队成员" lazy>
+        <PermissionList :biz-id="contact.id!" :biz-type="BizTypeEnum.CRM_CONTACT" />
+      </el-tab-pane>
+      <el-tab-pane label="商机" lazy>
+        <BusinessList :biz-id="contact.id!" :biz-type="BizTypeEnum.CRM_CONTACT"/>
       </el-tab-pane>
     </el-tabs>
   </el-col>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <ContactForm ref="formRef" @success="getContactData(id)" />
 </template>
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ContactApi from '@/api/crm/contact'
-import ContactBasicInfo from '@/views/crm/contact/detail/ContactBasicInfo.vue'
-import ContactDetails from '@/views/crm/contact/detail/ContactDetails.vue'
-import ContactForm from '@/views/crm/contact/ContactForm.vue'
-import { formatDate } from '@/utils/formatTime'
-// TODO 芋艿：后面在 review 么？
+import ContactDetailsHeader from '@/views/crm/contact/detail/ContactDetailsHeader.vue'
+import ContactDetailsInfo from '@/views/crm/contact/detail/ContactDetailsInfo.vue'
+import BusinessList from '@/views/crm/contactBusinessLink/components/BusinessListByContact.vue' // 商机列表
+import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
+import { BizTypeEnum } from '@/api/crm/permission'
 
 defineOptions({ name: 'CrmContactDetail' })
-
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const { currentRoute } = useRouter() // 路由
@@ -114,12 +47,6 @@ const getContactData = async (id: number) => {
     loading.value = false
   }
 }
-
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
 /**
  * 初始化
  */