ludu-admin-vue3/src/views/crm/contactBusinessLink/components/BusinessListByContact.vue
2023-12-06 19:26:39 +08:00

144 lines
4.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 操作栏 -->
<el-row justify="end">
<el-button @click="openForm">
<Icon class="mr-5px" icon="ep:opportunity" />
创建商机
</el-button>
<el-button @click="openBusinessLink"> 关联 </el-button>
<el-button @click="deleteBusinessLink"> 解除关联 </el-button>
</el-row>
<!-- 列表 -->
<ContentWrap class="mt-10px">
<el-table
v-loading="loading"
ref="businessRef"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
>
<el-table-column type="selection" width="55" />
<el-table-column label="商机名称" fixed="left" align="center" prop="name">
<template #default="scope">
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
</template>
</el-table-column>
<el-table-column label="商机金额" align="center" prop="price" :formatter="fenToYuanFormat" />
<el-table-column label="客户名称" align="center" prop="customerName" />
<el-table-column label="商机组" align="center" prop="statusTypeName" />
<el-table-column label="商机阶段" align="center" prop="statusName" />
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗:添加 -->
<BusinessForm ref="formRef" @success="getList" />
<!---->
<BusinessLink ref="businessLinkRef" @success="getList" />
</template>
<script setup lang="ts">
import * as ContactBusinessLinkApi from '@/api/crm/contactbusinesslink'
import BusinessForm from '../../business/BusinessForm.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import { fenToYuanFormat } from '@/utils/formatter'
import BusinessLink from './BusinessLinkContactList.vue'
const message = useMessage() // 消息弹窗
// TODO @zyna这个组件可以服用 BusinessList然后根据传入的编号类型做一些判断
defineOptions({ name: 'CrmBusinessContactList' })
const props = defineProps<{
bizType: number // 业务类型
bizId: number // 业务编号
}>()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
contactId: undefined as unknown // 允许 undefined + number
})
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
// 置空参数
queryParams.contactId = undefined
// 执行查询
let data = { list: [], total: 0 }
switch (props.bizType) {
case BizTypeEnum.CRM_CONTACT:
queryParams.contactId = props.bizId
data = await ContactBusinessLinkApi.getBusinessByContactPage(queryParams)
break
default:
return
}
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 添加操作 */
const formRef = ref()
const openForm = () => {
formRef.value.open('create')
}
/** 关联操作 */
const businessLinkRef = ref()
const openBusinessLink = () => {
businessLinkRef.value.open(props.bizId)
}
/**解除关联 */
const businessRef = ref()
const deleteBusinessLink = async () => {
if (businessRef.value.getSelectionRows().length === 0) {
message.success('未选择商机')
} else {
const postData = ref<ContactBusinessLinkApi.ContactBusinessLinkVO[]>([])
businessRef.value.getSelectionRows().forEach((element) => {
let data = {
id: undefined,
businessId: element.id,
contactId: props.bizId
}
postData.value.push(data)
})
await ContactBusinessLinkApi.deleteContactBusinessLink(postData.value)
handleQuery()
}
}
/** 打开联系人详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmBusinessDetail', params: { id } })
}
/** 监听打开的 bizId + bizType从而加载最新的列表 */
watch(
() => [props.bizId, props.bizType],
() => {
handleQuery()
},
{ immediate: true, deep: true }
)
</script>