root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

crm：增加合同 List 组件

Browse Source 
(cherry picked from commit 31a42fc3f7)
This commit is contained in:
YunaiV 2023-11-30 19:12:57 +08:00 committed by shizhong
parent 993cb4f216
commit affd0c52f2
11 changed files with 171 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/crm/contract/index.ts
View File

@ -22,32 +22,37 @@ export interface ContractVO {
remark: string
}
// 查询合同列表
// 查询 CRM 合同列表
export const getContractPage = async (params) => {
return await request.get({ url: `/crm/contract/page`, params })
}
// 查询合同详情
// 查询 CRM 联系人列表，基于指定客户
export const getContractPageByCustomer = async (params: any) => {
return await request.get({ url: `/crm/contract/page-by-customer`, params })
}
// 查询 CRM 合同详情
export const getContract = async (id: number) => {
return await request.get({ url: `/crm/contract/get?id=` + id })
}
// 新增合同
// 新增 CRM 合同
export const createContract = async (data: ContractVO) => {
return await request.post({ url: `/crm/contract/create`, data })
}
// 修改合同
// 修改 CRM 合同
export const updateContract = async (data: ContractVO) => {
return await request.put({ url: `/crm/contract/update`, data })
}
// 删除合同
// 删除 CRM 合同
export const deleteContract = async (id: number) => {
return await request.delete({ url: `/crm/contract/delete?id=` + id })
}
// 导出合同 Excel
// 导出 CRM 合同 Excel
export const exportContract = async (params) => {
return await request.download({ url: `/crm/contract/export-excel`, params })
}

2
src/api/crm/permission/index.ts
View File

@ -20,7 +20,7 @@ export interface PermissionVO {
export enum BizTypeEnum {
CRM_LEADS = 1, // 线索
CRM_CUSTOMER = 2, // 客户
CRM_CONTACTS = 3, // 联系人
CRM_CONTACT = 3, // 联系人
CRM_BUSINESS = 5, // 商机
CRM_CONTRACT = 6 // 合同
}

6
src/utils/dict.ts
View File

@ -190,14 +190,12 @@ export enum DICT_TYPE {
PROMOTION_BANNER_POSITION = 'promotion_banner_position', // banner 定位
// ========== CRM - 客户管理模块 ==========
CRM_RECEIVABLE_CHECK_STATUS = 'crm_receivable_check_status',
CRM_AUDIT_STATUS = 'crm_audit_status', // CRM 审批状态
CRM_BIZ_TYPE = 'crm_biz_type', // CRM 业务类型
CRM_RETURN_TYPE = 'crm_return_type',
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
CRM_CUSTOMER_LEVEL = 'crm_customer_level',
CRM_CUSTOMER_SOURCE = 'crm_customer_source',
CRM_PRODUCT_STATUS = 'crm_product_status',
// ========== CRM - 数据权限模块 ==========
CRM_BIZ_TYPE = 'crm_biz_type', // CRM 业务类型
CRM_PERMISSION_LEVEL = 'crm_permission_level' // CRM 数据权限的级别
}

48
src/views/crm/contact/components/ContactList.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 操作栏 -->
<el-row justify="end">
<el-button>
<el-button @click="openForm">
<Icon class="mr-5px" icon="system-uicons:contacts" />
创建联系人
</el-button>
@ -25,26 +25,6 @@
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template #default="scope">
<el-button
plain
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['crm:contact:update']"
>
编辑
</el-button>
<el-button
plain
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['crm:contact:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
@ -55,7 +35,7 @@
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<!-- 表单弹窗：添加 -->
<ContactForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
@ -70,9 +50,6 @@ const props = defineProps<{
bizId: number // 业务编号
}>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
@ -111,26 +88,13 @@ const handleQuery = () => {
getList()
}
/** 添加/修改操作 */
/** 添加操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
const openForm = () => {
formRef.value.open('create')
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ContactApi.deleteContact(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 打开客户详情 */
/** 打开联系人详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmContactDetail', params: { id } })

132
src/views/crm/contract/components/ContractList.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<!-- 操作栏 -->
<el-row justify="end">
<el-button @click="openForm">
<Icon class="mr-5px" icon="clarity:contract-line" />
创建合同
</el-button>
</el-row>
<!-- 列表 -->
<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="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="no" />
<el-table-column label="客户名称" align="center" prop="customerName" />
<el-table-column
label="合同金额（元）"
align="center"
prop="price"
:formatter="fenToYuanFormat"
/>
<el-table-column
label="开始时间"
align="center"
prop="startTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column
label="结束时间"
align="center"
prop="endTime"
:formatter="dateFormatter"
width="180px"
/>
<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>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加 -->
<ContractForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import * as ContractApi from '@/api/crm/contract'
import ContractForm from './../ContractForm.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import { fenToYuanFormat } from '@/utils/formatter'
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
defineOptions({ name: 'CrmContractList' })
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,
customerId: 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 ContractApi.getContractPageByCustomer(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 { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmContractDetail', params: { id } })
}
/** 监听打开的 bizId + bizType，从而加载最新的列表 */
watch(
() => [props.bizId, props.bizType],
() => {
handleQuery()
},
{ immediate: true, deep: true }
)
</script>

228
src/views/crm/contract/contract.data.ts
View File

@ -1,228 +0,0 @@
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { dateFormatter } from '@/utils/formatTime'
// 表单校验
export const rules = reactive({
name: [required]
})
// TODO @dbh52：不使用 crud 模式哈，使用标准的 ep 代码哈；主要后续 crud schema 可能会改
// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
const crudSchemas = reactive<CrudSchema[]>([
{
label: '合同编号',
field: 'id',
isForm: false
},
{
label: '合同名称',
field: 'name',
isSearch: true
},
{
label: '客户编号',
field: 'customerId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '商机编号',
field: 'businessId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '工作流编号',
field: 'processInstanceId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '下单日期',
field: 'orderDate',
formatter: dateFormatter,
isSearch: true,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
form: {
component: 'DatePicker',
componentProps: {
type: 'datetime',
valueFormat: 'x'
}
}
},
{
label: '负责人的用户编号',
field: 'ownerUserId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '创建时间',
field: 'createTime',
formatter: dateFormatter,
isSearch: true,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
isForm: false
},
{
label: '合同编号',
field: 'no',
isSearch: true
},
{
label: '开始时间',
field: 'startTime',
formatter: dateFormatter,
isSearch: true,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
form: {
component: 'DatePicker',
componentProps: {
type: 'datetime',
valueFormat: 'x'
}
}
},
{
label: '结束时间',
field: 'endTime',
formatter: dateFormatter,
isSearch: true,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
form: {
component: 'DatePicker',
componentProps: {
type: 'datetime',
valueFormat: 'x'
}
}
},
{
label: '合同金额',
field: 'price',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '整单折扣',
field: 'discountPercent',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '产品总金额',
field: 'productPrice',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '只读权限的用户编号数组',
field: 'roUserIds',
isSearch: true
},
{
label: '读写权限的用户编号数组',
field: 'rwUserIds',
isSearch: true
},
{
label: '联系人编号',
field: 'contactId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '备注',
field: 'remark',
isSearch: true
},
{
label: '公司签约人',
field: 'signUserId',
isSearch: true,
form: {
component: 'InputNumber',
value: 0
}
},
{
label: '最后跟进时间',
field: 'contactLastTime',
formatter: dateFormatter,
isSearch: true,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
form: {
component: 'DatePicker',
componentProps: {
type: 'datetime',
valueFormat: 'x'
}
}
},
{
label: '操作',
field: 'action',
isForm: false
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)

50
src/views/crm/contract/index.vue
View File

@ -8,44 +8,6 @@
:inline="true"
label-width="68px"
>
<el-form-item label="合同名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入合同名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="客户编号" prop="customerId">
<el-input
v-model="queryParams.customerId"
placeholder="请输入客户编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="商机编号" prop="businessId">
<el-input
v-model="queryParams.businessId"
placeholder="请输入商机编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="下单日期" prop="orderDate">
<el-date-picker
v-model="queryParams.orderDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="合同编号" prop="no">
<el-input
v-model="queryParams.no"
@ -55,6 +17,15 @@
class="!w-240px"
/>
</el-form-item>
<el-form-item label="合同名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入合同名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@ -75,6 +46,7 @@
</ContentWrap>
<!-- 列表 -->
<!-- TODO 芋艿：各种字段要调整 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="合同编号" align="center" prop="id" />
@ -125,7 +97,6 @@
width="180px"
/>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" width="120px">
<template #default="scope">
<el-button
@ -159,7 +130,6 @@
<!-- 表单弹窗：添加/修改 -->
<ContractForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'

5
src/views/crm/customer/detail/CustomerDetailsHeader.vue
View File

@ -20,13 +20,8 @@
<!-- TODO 芋艿： -->
<el-row class="mt-10px">
<el-button> <Icon class="mr-5px" icon="ph:calendar-fill" /> 创建任务 </el-button>
<el-button> <Icon class="mr-5px" icon="carbon:email" /> 发送邮件 </el-button>
<el-button> <Icon class="mr-5px" icon="ep:opportunity" /> 创建商机 </el-button>
<el-button> <Icon class="mr-5px" icon="clarity:contract-line" />创建合同 </el-button>
<el-button> <Icon class="mr-5px" icon="icon-park:income-one" />创建回款 </el-button>
<el-button>
<Icon class="mr-5px" icon="fluent:people-team-add-20-filled" /> 添加团队成员
</el-button>
</el-row>
</div>
<ContentWrap class="mt-10px">

7
src/views/crm/customer/detail/index.vue
View File

@ -13,7 +13,9 @@
<PermissionList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</el-tab-pane>
<el-tab-pane label="商机" lazy> 商机</el-tab-pane>
<el-tab-pane label="合同" lazy>TODO 待开发</el-tab-pane>
<el-tab-pane label="合同" lazy>
<ContractList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</el-tab-pane>
<el-tab-pane label="回款" lazy>TODO 待开发</el-tab-pane>
<el-tab-pane label="回访" lazy>TODO 待开发</el-tab-pane>
<el-tab-pane label="发票" lazy>TODO 待开发</el-tab-pane>
@ -26,7 +28,8 @@ import * as CustomerApi from '@/api/crm/customer'
import CustomerDetailsInfo from './CustomerDetailsInfo.vue' // 客户明细 - 详细信息
import CustomerDetailsHeader from './CustomerDetailsHeader.vue' // 客户明细 - 头部
import ContactList from '@/views/crm/contact/components/ContactList.vue' // 联系人列表
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 权限列表
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
import ContractList from '@/views/crm/contract/components/ContractList.vue' // 合同列表
import { BizTypeEnum } from '@/api/crm/permission'
defineOptions({ name: 'CrmCustomerDetail' })

4
src/views/crm/receivable/index.vue
View File

@ -52,7 +52,7 @@
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_AUDIT_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -194,7 +194,7 @@
<el-table-column label="合同" align="center" prop="contractId" />
<el-table-column label="审批状态" align="center" prop="checkStatus" width="130px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS" :value="scope.row.checkStatus" />
<dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.checkStatus" />
</template>
</el-table-column>
<!-- <el-table-column label="工作流编号" align="center" prop="processInstanceId" />-->

4
src/views/crm/receivablePlan/index.vue
View File

@ -49,7 +49,7 @@
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS)"
v-for="dict in getStrDictOptions(DICT_TYPE.CRM_AUDIT_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -171,7 +171,7 @@
</el-table-column>
<el-table-column label="审批状态" align="center" prop="checkStatus" width="130px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS" :value="scope.row.checkStatus" />
<dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.checkStatus" />
</template>
</el-table-column>
<!--<el-table-column label="工作流编号" align="center" prop="processInstanceId" />-->