CRM:完善回款集成客户详情和合同详情

This commit is contained in:
puhui999 2024-02-25 02:10:21 +08:00
parent d9e1ffd522
commit 174724da98
7 changed files with 226 additions and 121 deletions

View File

@ -19,8 +19,18 @@
<el-tab-pane label="产品">
<ContractProductList :contract="contract" />
</el-tab-pane>
<!-- TODO @puhui999回款信息 -->
<el-tab-pane label="回款"> 123 </el-tab-pane>
<el-tab-pane label="回款">
<ReceivablePlanList
:contract-id="contract.id!"
:customer-id="contract.customerId"
@crate-receivable="crateReceivable"
/>
<ReceivableList
ref="receivableListRef"
:contract-id="contract.id!"
:customer-id="contract.customerId"
/>
</el-tab-pane>
<el-tab-pane label="团队成员">
<PermissionList
ref="permissionListRef"
@ -53,6 +63,8 @@ import ContractForm from '@/views/crm/contract/ContractForm.vue'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import PermissionList from '@/views/crm/permission/components/PermissionList.vue'
import FollowUpList from '@/views/crm/followup/index.vue'
import ReceivableList from '@/views/crm/receivable/components/ReceivableList.vue'
import ReceivablePlanList from '@/views/crm/receivable/plan/components/ReceivablePlanList.vue'
defineOptions({ name: 'CrmContractDetail' })
const props = defineProps<{ id?: number }>()
@ -94,8 +106,14 @@ const getOperateLog = async (contractId: number) => {
logList.value = data.list
}
/** 从回款计划创建回款 */
const receivableListRef = ref<InstanceType<typeof ReceivableList>>() // Ref
const crateReceivable = (planData: any) => {
receivableListRef.value?.crateReceivable(planData)
}
/** 转移 */
// TODO @puhui999 title api
// TODO @puhui999 title api
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // ref
const transferContract = () => {
transferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transferContract)

View File

@ -26,7 +26,7 @@
>
锁定
</el-button>
<el-button v-if="!customer.ownerUserId" type="primary" @click="handleReceive"> 领取 </el-button>
<el-button v-if="!customer.ownerUserId" type="primary" @click="handleReceive"> 领取</el-button>
<el-button v-if="!customer.ownerUserId" type="primary" @click="handleDistributeForm">
分配
</el-button>
@ -64,8 +64,8 @@
<ContractList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</el-tab-pane>
<el-tab-pane label="回款" lazy>
<ReceivablePlanList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
<ReceivableList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
<ReceivablePlanList :customer-id="customer.id!" @crate-receivable="crateReceivable" />
<ReceivableList ref="receivableListRef" :customer-id="customer.id!" />
</el-tab-pane>
<el-tab-pane label="操作日志">
<OperateLogV2 :log-list="logList" />
@ -197,6 +197,12 @@ const getOperateLog = async () => {
logList.value = data.list
}
/** 从回款计划创建回款 */
const receivableListRef = ref<InstanceType<typeof ReceivableList>>() // Ref
const crateReceivable = (planData: any) => {
receivableListRef.value?.crateReceivable(planData)
}
const close = () => {
delView(unref(currentRoute))
push({ name: 'CrmCustomer' })

View File

@ -150,9 +150,8 @@ const formRef = ref() // 表单 Ref
const customerList = ref<CustomerApi.CustomerVO[]>([]) //
const contractList = ref<ContractApi.ContractVO[]>([]) //
const receivablePlanList = ref<ReceivablePlanApi.ReceivablePlanVO[]>([]) //
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
const open = async (type: string, id?: number, planData?: ReceivablePlanApi.ReceivablePlanVO) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
@ -174,6 +173,12 @@ const open = async (type: string, id?: number) => {
if (formType.value === 'create') {
formData.value.ownerUserId = useUserStore().getUser.id
}
//
if (planData) {
formData.value.customerId = planData.customerId
formData.value.contractId = planData.contractId
formData.value.planId = planData.id
}
}
defineExpose({ open }) // open
@ -249,9 +254,12 @@ watch(
return
}
const receivablePlan = receivablePlanList.value.find((item) => item.id === newVal)
if (!receivablePlan) {
return
}
//
if (!formData.value.price || formData.value.price === 0) {
formData.value.price = receivablePlan!.price
formData.value.price = receivablePlan.price
}
}
)

View File

@ -9,40 +9,51 @@
<!-- 列表 -->
<ContentWrap class="mt-10px">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="回款编号" fixed="left" align="center" prop="no">
<template #default="scope">
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
{{ scope.row.no }}
</el-link>
</template>
</el-table-column>
<el-table-column label="合同编号" align="center" prop="contractNo" />
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="回款编号" prop="no" />
<el-table-column align="center" label="客户" prop="customerName" />
<el-table-column align="center" label="合同" prop="contractName" />
<el-table-column
label="回款金额(元)"
:formatter="dateFormatter2"
align="center"
prop="price"
:formatter="fenToYuanFormat"
/>
<el-table-column label="负责人" align="center" prop="ownerUserName" />
<el-table-column align="center" label="状态" prop="auditStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
</template>
</el-table-column>
<el-table-column
label="回款日期"
align="center"
prop="returnTime"
:formatter="dateFormatter"
width="180px"
width="150px"
/>
<el-table-column align="center" label="回款方式" prop="returnType" width="130px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE" :value="scope.row.returnType" />
</template>
</el-table-column>
<el-table-column align="center" label="回款金额(元)" prop="price" />
<el-table-column align="center" label="负责人" prop="ownerUserName" />
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column align="center" fixed="right" label="操作" width="130px">
<template #default="scope">
<el-button
v-hasPermi="['crm:receivable:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['crm:receivable:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
@ -50,45 +61,43 @@
<!-- 表单弹窗添加 -->
<ReceivableForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
import * as ReceivableApi from '@/api/crm/receivable'
import ReceivableForm from './../ReceivableForm.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import { dateFormatter } from '@/utils/formatTime'
import { fenToYuanFormat } from '@/utils/formatter'
import { dateFormatter2 } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
defineOptions({ name: 'CrmReceivableList' })
const props = defineProps<{
bizType: number //
bizId: number //
customerId?: number //
contractId?: number //
}>()
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const total = ref(0) //
const list = ref([]) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
customerId: undefined as unknown // undefined + number
customerId: undefined as unknown, // undefined + number
contractId: undefined as unknown // undefined + number
})
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
//
queryParams.customerId = undefined
//
let data = { list: [], total: 0 }
switch (props.bizType) {
case BizTypeEnum.CRM_CUSTOMER:
queryParams.customerId = props.bizId
data = await ReceivableApi.getReceivablePageByCustomer(queryParams)
break
default:
return
if (props.customerId && !props.contractId) {
queryParams.customerId = props.customerId
} else if (props.customerId && props.contractId) {
//
queryParams.customerId = props.customerId
queryParams.contractId = props.contractId
}
const data = await ReceivableApi.getReceivablePageByCustomer(queryParams)
list.value = data.list
total.value = data.total
} finally {
@ -99,25 +108,45 @@ const getList = async () => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
//
queryParams.customerId = undefined
queryParams.contractId = undefined
getList()
}
/** 添加 */
/** 添加/修改操作 */
const formRef = ref()
const openForm = () => {
formRef.value.open('create')
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 打开合同详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmReceivableDetail', params: { id } })
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await ReceivableApi.deleteReceivable(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
/** 监听打开的 bizId + bizType从而加载最新的列表 */
/** 从回款计划创建回款 */
const crateReceivable = (planData: any) => {
const data = planData as unknown as ReceivablePlanApi.ReceivablePlanVO
formRef.value.open('create', undefined, data)
}
defineExpose({ crateReceivable })
/** 监听打开的 customerId + contractId从而加载最新的列表 */
watch(
() => [props.bizId, props.bizType],
() => {
() => [props.customerId, props.contractId],
(newVal) => {
//
if (!newVal[0]) {
return
}
handleQuery()
},
{ immediate: true, deep: true }

View File

@ -83,7 +83,7 @@
</template>
</el-table-column>
<el-table-column align="center" label="回款金额(元)" prop="price" />
<el-table-column align="center" label="负责人" prop="ownerUserId" />
<el-table-column align="center" label="负责人" prop="ownerUserName" />
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column align="center" fixed="right" label="回款状态" prop="auditStatus" width="120">
<template #default="scope">

View File

@ -9,43 +9,73 @@
<!-- 列表 -->
<ContentWrap class="mt-10px">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="期数" fixed="left" align="center" prop="no">
<template #default="scope">
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
{{ scope.row.period }}
</el-link>
</template>
</el-table-column>
<el-table-column label="客户名称" align="center" prop="customerName" />
<el-table-column label="合同编号" align="center" prop="contractNo" />
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="客户名称" prop="customerName" width="150px" />
<el-table-column align="center" label="合同编号" prop="contractNo" width="200px" />
<el-table-column align="center" label="期数" prop="period" />
<el-table-column align="center" label="计划回款(元)" prop="price" width="120" />
<el-table-column
label="计划还款金额(元)"
align="center"
prop="price"
:formatter="fenToYuanFormat"
/>
<el-table-column
label="计划还款日期"
:formatter="dateFormatter2"
align="center"
label="计划回款日期"
prop="returnTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column align="center" label="计划还款方式" prop="auditStatus">
<el-table-column align="center" label="提前几天提醒" prop="remindDays" width="150" />
<el-table-column
:formatter="dateFormatter2"
align="center"
label="提醒日期"
prop="remindTime"
width="180px"
/>
<el-table-column label="负责人" prop="ownerUserName" width="120" />
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column
align="center"
fixed="right"
label="完成状态"
prop="finishStatus"
width="130px"
>
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE" :value="scope.row.returnType" />
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.finishStatus" />
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="200px">
<template #default="scope">
<el-button
v-hasPermi="['crm:receivable:create']"
link
type="primary"
@click="crateReceivable(scope.row)"
>
创建回款
</el-button>
<el-button
v-hasPermi="['crm:receivable-plan:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['crm:receivable-plan:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
<el-table-column label="提前几日提醒" align="center" prop="remindDays" />
<el-table-column label="备注" align="center" prop="remark" />
<!-- TODO 芋艿新建回款编辑删除 -->
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
@ -53,45 +83,42 @@
<!-- 表单弹窗添加 -->
<ReceivableForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
import ReceivableForm from './../ReceivablePlanForm.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import { dateFormatter } from '@/utils/formatTime'
import { fenToYuanFormat } from '@/utils/formatter'
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter2 } from '@/utils/formatTime'
defineOptions({ name: 'CrmReceivablePlanList' })
const props = defineProps<{
bizType: number //
bizId: number //
customerId?: number //
contractId?: number //
}>()
const message = useMessage() //
const { t } = useI18n() //
const loading = ref(true) //
const total = ref(0) //
const list = ref([]) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
customerId: undefined as unknown // undefined + number
customerId: undefined as unknown, // undefined + number
contractId: undefined as unknown // undefined + number
})
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
//
queryParams.customerId = undefined
//
let data = { list: [], total: 0 }
switch (props.bizType) {
case BizTypeEnum.CRM_CUSTOMER:
queryParams.customerId = props.bizId
data = await ReceivablePlanApi.getReceivablePlanPageByCustomer(queryParams)
break
default:
return
if (props.customerId && !props.contractId) {
queryParams.customerId = props.customerId
} else if (props.customerId && props.contractId) {
//
queryParams.customerId = props.customerId
queryParams.contractId = props.contractId
}
const data = await ReceivablePlanApi.getReceivablePlanPageByCustomer(queryParams)
list.value = data.list
total.value = data.total
} finally {
@ -102,25 +129,46 @@ const getList = async () => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
//
queryParams.customerId = undefined
queryParams.contractId = undefined
getList()
}
/** 添加 */
/** 添加/修改操作 */
const formRef = ref()
const openForm = () => {
formRef.value.open('create')
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 打开合同详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmReceivablePlanDetail', params: { id } })
const emits = defineEmits<{
(e: 'crateReceivable', v: ReceivablePlanApi.ReceivablePlanVO)
}>()
/** 创建回款 */
const crateReceivable = (row: ReceivablePlanApi.ReceivablePlanVO) => {
emits('crateReceivable', row)
}
/** 监听打开的 bizId + bizType从而加载最新的列表 */
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await ReceivablePlanApi.deleteReceivablePlan(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
/** 监听打开的 customerId + contractId从而加载最新的列表 */
watch(
() => [props.bizId, props.bizType],
() => {
() => [props.customerId, props.contractId],
(newVal) => {
//
if (!newVal[0]) {
return
}
handleQuery()
},
{ immediate: true, deep: true }

View File

@ -86,11 +86,7 @@
prop="remindTime"
width="180px"
/>
<el-table-column label="负责人" prop="ownerUserId" width="120">
<template #default="scope">
{{ userList.find((user) => user.id === scope.row.ownerUserId)?.nickname }}
</template>
</el-table-column>
<el-table-column label="负责人" prop="ownerUserName" width="120" />
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column
align="center"