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

crm：增加合同 List 组件

Browse Source
This commit is contained in:
YunaiV 2023-11-30 19:12:57 +08:00
parent 5f26c4afe9
commit 31a42fc3f7
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" />-->