mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-08-08 15:11:52 +08:00
feat: 客户详情 + review 修改
This commit is contained in:
Wanwan
18
src/views/crm/customer/detail/CustomerBasicInfo.vue
Normal file
18
src/views/crm/customer/detail/CustomerBasicInfo.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<el-col> 客户 </el-col>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<span class="text-xl font-bold">{{ customer.name }}</span>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col class="mt-10px">
|
||||
<Icon icon="ant-design:tag-filled" />
|
||||
<!-- TODO 标签 -->
|
||||
</el-col>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
|
||||
const { customer } = defineProps<{ customer: CustomerApi.CustomerVO }>()
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
91
src/views/crm/customer/detail/CustomerDetails.vue
Normal file
91
src/views/crm/customer/detail/CustomerDetails.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="basicInfo">
|
||||
<template #title>
|
||||
<span class="text-base font-bold">基本信息</span>
|
||||
</template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="客户名称">
|
||||
{{ customer.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行业">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户来源">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户等级">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="手机">
|
||||
{{ customer.mobile }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电话">
|
||||
{{ customer.telephone }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱">
|
||||
{{ customer.email }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="QQ">
|
||||
{{ customer.qq }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="微信">
|
||||
{{ customer.wechat }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网址">
|
||||
{{ customer.website }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所在地">
|
||||
{{ customer.areaName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="详细地址">
|
||||
{{ customer.detailAddress }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="下次联系时间">
|
||||
{{ customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1">
|
||||
<el-descriptions-item label="客户描述">
|
||||
{{ customer.description }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
{{ customer.remark }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="systemInfo">
|
||||
<template #title>
|
||||
<span class="text-base font-bold">系统信息</span>
|
||||
</template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="负责人">
|
||||
{{ customer.ownerUserName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人">
|
||||
{{ customer.creatorName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ customer.createTime ? formatDate(customer.createTime) : '空' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">
|
||||
{{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最后跟进时间">
|
||||
{{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
const { customer } = defineProps<{ customer: CustomerApi.CustomerVO }>()
|
||||
|
||||
// 展示的折叠面板
|
||||
const activeNames = ref(['basicInfo', 'systemInfo'])
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
154
src/views/crm/customer/detail/index.vue
Normal file
154
src/views/crm/customer/detail/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<!-- 左上：客户基本信息 -->
|
||||
<CustomerBasicInfo :customer="customer" />
|
||||
</div>
|
||||
<div>
|
||||
<!-- 右上：按钮 -->
|
||||
<el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button>更改成交状态</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="客户级别">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="成交状态">
|
||||
{{ customer.dealStatus ? '已成交' : '未成交' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负责人">
|
||||
{{ customer.ownerUserName }}
|
||||
</el-descriptions-item>
|
||||
<!-- TODO wanwan 首要联系人? -->
|
||||
<el-descriptions-item label="首要联系人" />
|
||||
<!-- TODO wanwan 首要联系人电话? -->
|
||||
<el-descriptions-item label="首要联系人电话">
|
||||
{{ customer.mobile }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</ContentWrap>
|
||||
<el-col :span="18">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="详细资料">
|
||||
<CustomerDetails class="ml-2" :customer="customer" />
|
||||
</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>
|
||||
<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>
|
||||
<el-tab-pane label="团队成员" lazy>
|
||||
<template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
|
||||
团队成员
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="商机" lazy> 商机</el-tab-pane>
|
||||
<el-tab-pane label="合同" lazy>
|
||||
<template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
|
||||
合同
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="回款" lazy>
|
||||
<template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
|
||||
回款
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="回访" lazy> 回访</el-tab-pane>
|
||||
<el-tab-pane label="发票" lazy> 发票</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<CustomerForm ref="formRef" @success="getCustomerData(id)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
|
||||
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
|
||||
|
||||
defineOptions({ name: 'CustomerDetail' })
|
||||
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const route = useRoute()
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
const id = Number(route.params.id)
|
||||
const loading = ref(true) // 加载中
|
||||
|
||||
// 客户详情
|
||||
const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO)
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
const getCustomerData = async (id: number) => {
|
||||
loading.value = true
|
||||
try {
|
||||
customer.value = await CustomerApi.getCustomer(id)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (!id) {
|
||||
ElMessage.warning('参数错误，客户不能为空！')
|
||||
delView(unref(currentRoute))
|
||||
return
|
||||
}
|
||||
getCustomerData(id)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user