yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

pull/781/head
苑坤 2025-04-28 13:22:38 +08:00
parent 211a982241 9546839b34
commit c46164c1c2
16 changed files with 1478 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@ -4,7 +4,7 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://172.22.3.6:48080'
VITE_BASE_URL='http://localhost:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

39
src/api/crm/customer-complaints/index.ts Normal file
View File

@ -0,0 +1,39 @@
import request from '@/config/axios'
// 客户投诉 VO
export interface CustomerComplaintsVO {
id:number //ID
customerId: number // 客户ID
complaintLevel: number // 投诉级别
complaintMethod: number // 投诉方式
complaintUserId: number // 投诉人ID
accusedComplaintUserId: number // 被投诉人ID
processingEfficiency: number // 处理时效：天
feedbackProblem: string // 事件描述
suggestion: string // 投诉附件
startUserSelectAssignees:object //发起人自选审批人 ,示例：{taskKey1:[1, 2],taskKey2:[1,2]}
processInstanceId:string //流程编号
}
// 客户投诉 API
export const CustomerComplaintsApi = {
// 查询客户投诉分页
getCustomerComplaintsPage: async (params: any) => {
return await request.get({ url: `/crm/customer-complaints/page`, params })
},
// 查询客户投诉详情
getCustomerComplaints: async (id: number) => {
return await request.get({ url: `/crm/customer-complaints/get?id=` + id })
},
// 新增客户投诉
createCustomerComplaints: async (data: CustomerComplaintsVO) => {
return await request.post({ url: `/crm/customer-complaints/create`, data })
},
// 导出客户投诉 Excel
exportCustomerComplaints: async (params) => {
return await request.download({ url: `/crm/customer-complaints/export-excel`, params })
},
}

2
src/components/UserSelectForm/index.vue
View File

@ -124,7 +124,7 @@ const filterUserList = async (deptId?: number) => {
/** 提交选择 */
const submitForm = async () => {
try {
message.success(t('common.updateSuccess'))
// message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 从所有用户列表中筛选出已选择的用户
const emitUserList = userList.value.filter((user: any) =>

163
src/components/product/index.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<Dialog title="添加商品" v-model="dialogVisible" width="50%">
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="100px"
>
<el-form-item label="单位名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入单位名称"
clearable
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
<ContentWrap>
<el-table ref="multipleTableRef" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKey" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="序号" align="center" type="selection" :reserve-selection="true" />
<el-table-column label="产品名称" align="center" prop="name" />
<el-table-column label="产品类型" align="center" prop="category" width="160">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_CATEGORY" :value="scope.row.category" />
</template>
</el-table-column>
<el-table-column label="产品明细类型" align="center" prop="detailType" width="160">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_DETAIL_TYPE" :value="scope.row.detailType" />
</template>
</el-table-column>
<el-table-column label="产品单位" align="center" prop="unit">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as ProductApi from '@/api/crm/product'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { BillTemplateApi, BillTemplateVO } from '@/api/crm/billtemplate'
/** 票据模版 列表 */
defineOptions({ name: 'BillTemplate' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<BillTemplateVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const multipleSelection = ref([])
const dialogVisible = ref(false) // 弹窗的是否展示
const multipleTableRef = ref()
const selectedRowKeys = ref<number[]>([]);
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
status: 1,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 打开弹窗 */
const open = async (data: []) => {
dialogVisible.value = true
multipleSelection.value = data
await getList()
await setSelections()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
// 跨页唯一id
const getRowKey = (row) => {
return row.id
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductApi.getProductPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
const handleSelectionChange = (val: []) => {
multipleSelection.value = val
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
multipleTableRef.value.clearSelection()
handleQuery()
}
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 提交请求
dialogVisible.value = false
// 发送操作成功的事件
emit('success', multipleSelection.value)
}
const setSelections = async () => {
const selections = multipleSelection.value
if (selections && selections.length > 0) {
list.value.forEach((row: any) => {
if (selections.some(item => item.id === row.id)) {
multipleTableRef.value.toggleRowSelection(row, true); // 设置选择状态。
}
});
} else {
multipleTableRef.value.clearSelection(); // 如果没有保存的选择，则清空当前页的选择。
}
}
</script>

35
src/router/modules/remaining.ts
View File

@ -534,6 +534,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
},
component: () => import('@/views/crm/business/detail/index.vue')
},
{
path: 'business/add/:id',
name: 'CrmBusinessAdd',
meta: {
title: '商机新增',
noCache: true,
hidden: true,
activeMenu: '/crm/business'
},
component: () => import('@/views/crm/business/BusinessForm.vue')
},
{
path: 'contract/detail/:id',
name: 'CrmContractDetail',
@ -612,6 +623,30 @@ const remainingRouter: AppRouteRecordRaw[] = [
title: '新增客户建议',
activeMenu: '/crm/customer-suggestion'
}
},
{
path: 'customer-complaints/detail',
component: () => import('@/views/crm/customer-complaints/detail.vue'),
name: 'CustomerComplaintsDetail',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '客户投诉详情',
activeMenu: '/crm/customer-complaints'
}
},
{
path: 'customer-complaints/create',
component: () => import('@/views/crm/customer-complaints/create.vue'),
name: 'CustomerComplaintsCreate',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '新增客户投诉',
activeMenu: '/crm/customer-complaints'
}
}
]
},

3
src/utils/dict.ts
View File

@ -223,6 +223,9 @@ export enum DICT_TYPE {
CRM_COOPERATION_AREA = "crm_cooperation_area", //CRM 合作地区
CRM_CUSTOMER_STSTUS = "crm_customer_status", //CRM 客户状态
CRM_RETURN_VISIT_STSTUS = "crm_return_visit_type", //CRM 回访类型
CRM_COMPLAINT_METHOD = "crm_complaint_method", // 投诉方式
CRM_COMPLAINT_LEVEL = "crm_complaint_level", // 投诉级别
// ========== ERP - 企业资源计划模块 ==========
ERP_AUDIT_STATUS = 'erp_audit_status', // ERP 审批状态

166
src/views/crm/billtemplate/BillTemplateForm.vue
View File

@ -1,25 +1,43 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1280">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="formData.status" clearable placeholder="请选择模板状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="票据模版名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="status">
<el-select v-model="formData.status" clearable placeholder="请选择模板状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 子表的表单 -->
<ContentWrap>
<el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
<el-tab-pane label="产品清单" name="product">
<BusinessProductForm
ref="productFormRef"
:products="formData.products"
:disabled="disabled"
/>
</el-tab-pane>
</el-tabs>
</ContentWrap>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -28,11 +46,17 @@
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { BillTemplateApi, BillTemplateVO } from '@/api/crm/billtemplate'
/** 票据模版 表单 */
defineOptions({ name: 'BillTemplateForm' })
import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
import * as BusinessApi from '@/api/crm/business'
import * as BusinessStatusApi from '@/api/crm/business/status'
import * as CustomerApi from '@/api/crm/customer'
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
import { useUserStore } from '@/store/modules/user'
import { defaultProps, handleTree } from '@/utils/tree'
import BusinessProductForm from './components/index.vue'
import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
const deptTree = ref() // 部门树形结构
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -44,15 +68,62 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
status: undefined,
customerId: undefined,
followUpStatus: undefined,
contactLastTime: undefined,
contactNextTime: undefined,
ownerUserId: undefined,
deptId: undefined,
requestorUserId: undefined,
statusTypeId: undefined,
statusId: undefined,
endStatus: undefined,
dealTime: undefined,
onlinePrice: undefined,
offlinePrice: undefined,
totalProductPrice: undefined,
totalPrice: undefined,
saleStage: undefined,
paymentTerm: undefined,
creditMethod: undefined,
creditCalcCycle: undefined,
creditLimit: undefined,
techSupport: undefined
})
const formRules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '票据模版不能为空', trigger: 'blur' }],
customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
statusTypeId: [{ required: true, message: '商机状态组不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const statusTypeList = ref([]) // 商机状态类型列表
const customerList = ref([]) // 客户列表的数据
/** 子表的表单 */
const subTabsName = ref('product')
const productFormRef = ref()
/** 计算 discountPrice、totalPrice 价格 */
watch(
() => formData.value,
(val) => {
if (!val) {
return
}
const totalOnlinePrice = val.products.reduce((prev, curr) => prev + curr.onlinePrice, 0)
const totalOfflinePrice = val.products.reduce((prev, curr) => prev + curr.offlinePrice, 0)
// 赋值
formData.value.onlinePrice = totalOnlinePrice
formData.value.offlinePrice = totalOfflinePrice
formData.value.totalPrice = totalOnlinePrice + totalOfflinePrice
},
{ deep: true }
)
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
const open = async (type: string, id?: number, customerId?: number, contactId?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
@ -61,10 +132,31 @@ const open = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await BillTemplateApi.getBillTemplate(id)
formData.value = await BusinessApi.getBusiness(id)
} finally {
formLoading.value = false
}
} else {
if (customerId) {
formData.value.customerId = customerId
formData.value.customerDefault = true // 默认客户的选择，不允许变
}
// 自动关联 contactId 联系人编号
if (contactId) {
formData.value.contactId = contactId
}
}
// 获得客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
// 加载商机状态类型列表
statusTypeList.value = await BusinessStatusApi.getBusinessStatusTypeSimpleList()
// 获得用户列表
userOptions.value = await UserApi.getSimpleUserList()
// 获得部门树
deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
// 默认新建时选中自己
if (formType.value === 'create') {
formData.value.ownerUserId = useUserStore().getUser.id
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -73,16 +165,25 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// await productFormRef.value.validate()
// console.log(formData.value,444); // 检查 ref 的值
await nextTick(() => {
if (productFormRef.value) {
productFormRef.value.validate();
}
});
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as BillTemplateVO
const data = formData.value as unknown as BusinessApi.BusinessVO
if (formType.value === 'create') {
await BillTemplateApi.createBillTemplate(data)
await BusinessApi.createBusiness(data)
message.success(t('common.createSuccess'))
} else {
await BillTemplateApi.updateBillTemplate(data)
await BusinessApi.updateBusiness(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
@ -98,7 +199,14 @@ const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
status: undefined,
customerId: undefined,
ownerUserId: undefined,
statusTypeId: undefined,
dealTime: undefined,
totalPrice: undefined,
products: [],
contactId: undefined,
customerDefault: false
}
formRef.value?.resetFields()
}

210
src/views/crm/billtemplate/components/index.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
v-loading="formLoading"
label-width="0px"
:inline-message="true"
:disabled="disabled"
>
<el-table :data="formData" class="-mt-10px">
<el-table-column label="序号" type="index" align="center" width="60" />
<el-table-column label="产品名称" align="center" prop="name" />
<el-table-column label="产品类型" align="center" prop="category" width="160">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_CATEGORY" :value="scope.row.category" />
</template>
</el-table-column>
<el-table-column label="产品明细类型" align="center" prop="detailType" width="160">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_DETAIL_TYPE" :value="scope.row.detailType" />
</template>
</el-table-column>
<el-table-column label="产品单位" align="center" prop="unit">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
</template>
</el-table-column>
<el-table-column label="产品票据" fixed="right" min-width="140">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.productInvoice`" class="mb-0px!">
<el-select v-model="row.productInvoice" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_INVOICE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="产品开具项目" fixed="right" min-width="140">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.productInvoiceItems`" class="mb-0px!">
<el-select v-model="row.productInvoiceItems" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_INVOICE_ITEMS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="服务费票据" prop="serviceFeeInvoice" fixed="right" min-width="140">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.serviceFeeInvoice`" class="mb-0px!">
<el-select v-model="row.serviceFeeInvoice" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_SERVICE_FEE_INVOICE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="服务开具项目" prop="serviceFeeInvoiceItems" fixed="right" min-width="140">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.serviceFeeInvoiceItems`" class="mb-0px!">
<el-select v-model="row.serviceFeeInvoiceItems" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_SERVICE_FEE_INVOICE_ITEMS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="60">
<template #default="{ $index }">
<el-button @click="handleDelete($index)" link>—</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-row justify="center" class="mt-3" v-if="!disabled">
<el-button @click="handleAdd" round>+ 添加产品</el-button>
</el-row>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="productRef" @success="getList" />
</template>
<script setup lang="ts">
import * as ProductApi from '@/api/crm/product'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import ProductForm from '@/components/product/index.vue'
const props = defineProps<{
products: undefined
disabled: false
}>()
const formLoading = ref(false) // 表单的加载中
const formData = ref([])
const formRules = reactive({
productInvoice: [{ required: true, message: '产品票据不能为空', trigger: 'change' }],
getIntDictOptions: [{ required: true, message: '产品开具项目不能为空', trigger: 'change' }],
serviceFeeInvoice: [{ required: true, message: '服务费票据不能为空', trigger: 'change' }],
serviceFeeInvoiceItems: [{ required: true, message: '服务开具项目不能为空', trigger: 'change' }]
})
const formRef = ref([]) // 表单 Ref
const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
/** 初始化设置产品项 */
watch(
() => props.products,
async (val) => {
formData.value = val
},
{ immediate: true }
)
/** 监听合同产品变化，计算合同产品总价 */
watch(
() => formData.value,
(val) => {
if (!val || val.length === 0) {
return
}
// 循环处理
val.forEach((item) => {
if (item.offlinePrice != null && item.onlinePrice != null) {
item.totalPrice = item.offlinePrice + item.onlinePrice
} else {
item.totalPrice = 0
}
})
},
{ deep: true }
)
const getList = (val: []) => {
formData.value = val
}
// /** 新增按钮操作 */
// const handleAdd = () => {
// const row = {
// id: undefined,
// productId: undefined,
// productName: undefined,
// productCategoryId: undefined, //产品分类编号
// productUnit: undefined, // 产品单位
// productNo: undefined, // 产品条码
// productPrice: undefined, // 产品价格
// onlinePrice: undefined, // 产品价格
// offlinePrice: undefined, // 产品价格
// totalPrice: undefined,
// businessPrice: undefined,
// count: 1
// }
// formData.value.push(row)
// }
const productRef = ref() // 表单 Ref
const handleAdd = () => {
productRef.value.open(formData.value)
}
/** 删除按钮操作 */
const handleDelete = (index: number) => {
formData.value.splice(index, 1)
}
/** 处理产品变更 */
const onChangeProduct = (productId, row) => {
const product = productList.value.find((item) => item.id === productId)
if (product) {
row.productId = product.id
row.productName = product.name
row.productCategoryId = 1
row.productUnit = product.unit
row.onlinePrice = product.onlinePrice
row.offlinePrice = product.offlinePrice
row.totalPrice = product.totalPrice
row.productNo = product.no
row.productPrice = product.price
row.businessPrice = product.price
}
}
/** 表单校验 */
const validate = () => {
return formRef.value.validate()
}
defineExpose({ validate })
/** 初始化 */
onMounted(async () => {
productList.value = await ProductApi.getProductSimpleList()
})
</script>

63
src/views/crm/business/BusinessForm.vue
View File

@ -1,5 +1,5 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1280">
<ContentWrap class="mt-10px">
<el-form
ref="formRef"
:model="formData"
@ -78,8 +78,6 @@
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="商机状态组" prop="statusTypeId">
<el-select
@ -121,8 +119,6 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="账期" prop="paymentTerm">
<el-select v-model="formData.paymentTerm" placeholder="请选择账期">
@ -177,8 +173,6 @@
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
@ -191,7 +185,7 @@
<el-tab-pane label="产品清单" name="product">
<BusinessProductForm
ref="productFormRef"
:products="formData.products"
v-model="formData.products"
:disabled="disabled"
/>
</el-tab-pane>
@ -227,11 +221,10 @@
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</ContentWrap>
</template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
@ -245,7 +238,7 @@ import { defaultProps, handleTree } from '@/utils/tree'
import BusinessProductForm from './components/BusinessProductForm.vue'
import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
const deptTree = ref() // 部门树形结构
const { proxy }: any = getCurrentInstance();
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -277,7 +270,8 @@ const formData = ref({
creditMethod: undefined,
creditCalcCycle: undefined,
creditLimit: undefined,
techSupport: undefined
techSupport: undefined,
products: [],
})
const formRules = reactive({
name: [{ required: true, message: '商机名称不能为空', trigger: 'blur' }],
@ -296,11 +290,12 @@ const productFormRef = ref()
/** 计算 discountPrice、totalPrice 价格 */
watch(
() => formData.value,
() => formData.value.products,
(val) => {
if (!val) {
return
}
const totalOnlinePrice = val.products.reduce((prev, curr) => prev + curr.onlinePrice, 0)
const totalOfflinePrice = val.products.reduce((prev, curr) => prev + curr.offlinePrice, 0)
// 赋值
@ -310,12 +305,10 @@ watch(
},
{ deep: true }
)
/** 打开弹窗 */
const open = async (type: string, id?: number, customerId?: number, contactId?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
@ -335,14 +328,7 @@ const open = async (type: string, id?: number, customerId?: number, contactId?:
formData.value.contactId = contactId
}
}
// 获得客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
// 加载商机状态类型列表
statusTypeList.value = await BusinessStatusApi.getBusinessStatusTypeSimpleList()
// 获得用户列表
userOptions.value = await UserApi.getSimpleUserList()
// 获得部门树
deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
// 默认新建时选中自己
if (formType.value === 'create') {
formData.value.ownerUserId = useUserStore().getUser.id
@ -350,14 +336,20 @@ const open = async (type: string, id?: number, customerId?: number, contactId?:
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
await productFormRef.value.validate()
// 修改前：
// console.log('%csrc/views/crm/business/BusinessForm.vue:346 productFormRef.value.formData', 'color: #007acc;', productFormRef.value);
// formData.value.products = productFormRef.value.formData;
// 修改为：
if (!productFormRef.value) return;
const valid = await productFormRef.value.validate();
formData.value.products = valid
if (!valid) return;
// 提交请求
formLoading.value = true
try {
@ -393,4 +385,17 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
/** 初始化 */
const { params } = useRoute()
onMounted(async () => {
formType.value = params.id
// 获得客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
// 加载商机状态类型列表
statusTypeList.value = await BusinessStatusApi.getBusinessStatusTypeSimpleList()
// 获得用户列表
userOptions.value = await UserApi.getSimpleUserList()
// 获得部门树
deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
})
</script>

163
src/views/crm/business/components/BusinessProductForm.vue
View File

@ -10,26 +10,8 @@
>
<el-table :data="formData" class="-mt-10px">
<el-table-column label="序号" type="index" align="center" width="60" />
<el-table-column label="产品名称" min-width="180">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
<el-select
v-model="row.productId"
clearable
filterable
@change="onChangeProduct($event, row)"
placeholder="请选择产品"
>
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="产品名称" align="center" prop="name" />
<el-table-column label="产品分类" min-width="150">
<template #default="{ row }">
<el-form-item class="mb-0px!">
@ -45,8 +27,8 @@
</template>
</el-table-column>
<el-table-column label="单位" min-width="80">
<template #default="{ row }">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
</template>
</el-table-column>
<el-table-column label="线上价格（元）" fixed="right" min-width="140">
@ -92,103 +74,116 @@
<el-row justify="center" class="mt-3" v-if="!disabled">
<el-button @click="handleAdd" round>+ 添加产品</el-button>
</el-row>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="productRef" @success="getList" />
</template>
<script setup lang="ts">
import * as ProductApi from '@/api/crm/product'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'
import { ref, watch, onMounted, defineProps, defineExpose, reactive } from 'vue';
import * as ProductApi from '@/api/crm/product';
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils';
import ProductForm from '@/components/product/index.vue'
import { DICT_TYPE } from '@/utils/dict';
const props = defineProps<{
products: undefined
disabled: false
}>()
const formLoading = ref(false) // 表单的加载中
const formData = ref([])
const formLoading = ref(false); // 表单的加载中
const formData = ref([]); // 表单数据
const formRules = reactive({
productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
businessPrice: [{ required: true, message: '合同价格不能为空', trigger: 'blur' }],
count: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
})
const formRef = ref([]) // 表单 Ref
const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
/** 初始化设置产品项 */
});
const formRef = ref(null); // 表单 Ref
const productList = ref<ProductApi.ProductVO[]>([]); // 产品列表
const props = defineProps<{
products: any[]; // 确保 products 是一个数组
disabled: boolean; // 确保 disabled 是一个布尔值
}>();
// 初始化设置产品项
watch(
() => props.products,
async (val) => {
formData.value = val
(val) => {
formData.value = val || []; // 确保 formData 是一个数组
},
{ immediate: true }
)
);
/** 监听合同产品变化，计算合同产品总价 */
// 监听合同产品变化，计算合同产品总价
watch(
() => formData.value,
(val) => {
if (!val || val.length === 0) {
return
return;
}
// 循环处理
val.forEach((item) => {
if (item.offlinePrice != null && item.onlinePrice != null) {
item.totalPrice = item.offlinePrice + item.onlinePrice
item.totalPrice = item.offlinePrice + item.onlinePrice;
} else {
item.totalPrice = 0
item.totalPrice = 0;
}
})
});
},
{ deep: true }
)
);
/** 新增按钮操作 */
// 新增按钮操作
// const handleAdd = () => {
// const newRow = {
// id: undefined,
// productId: undefined,
// productName: undefined,
// productCategoryId: undefined, // 产品分类编号
// productUnit: undefined, // 产品单位
// productNo: undefined, // 产品条码
// productPrice: undefined, // 产品价格
// onlinePrice: undefined, // 线上价格
// offlinePrice: undefined, // 线下价格
// totalPrice: undefined, // 总价
// businessPrice: undefined, // 合同价格
// count: 1 // 默认数量为 1
// };
// formData.value.push(newRow);
// };
const emit = defineEmits(['update:products']);
const getList = (val: []) => {
formData.value = val
emit('update:products', val);
}
const productRef = ref() // 表单 Ref
const handleAdd = () => {
const row = {
id: undefined,
productId: undefined,
productName: undefined,
productCategoryId: undefined, //产品分类编号
productUnit: undefined, // 产品单位
productNo: undefined, // 产品条码
productPrice: undefined, // 产品价格
onlinePrice: undefined, // 产品价格
offlinePrice: undefined, // 产品价格
totalPrice: undefined,
businessPrice: undefined,
count: 1
}
formData.value.push(row)
productRef.value.open(formData.value)
}
/** 删除按钮操作 */
// 删除按钮操作
const handleDelete = (index: number) => {
formData.value.splice(index, 1)
}
formData.value.splice(index, 1);
};
/** 处理产品变更 */
// 处理产品变更
const onChangeProduct = (productId, row) => {
const product = productList.value.find((item) => item.id === productId)
const product = productList.value.find((item) => item.id === productId);
if (product) {
row.productId = product.id
row.productName = product.name
row.productCategoryId = 1
row.productUnit = product.unit
row.onlinePrice = product.onlinePrice
row.offlinePrice = product.offlinePrice
row.totalPrice = product.totalPrice
row.productNo = product.no
row.productPrice = product.price
row.businessPrice = product.price
row.productId = product.id;
row.productName = product.name;
row.productCategoryId = product.categoryId; // 假设产品数据中有分类编号
row.productUnit = product.unit;
row.onlinePrice = product.onlinePrice;
row.offlinePrice = product.offlinePrice;
row.totalPrice = product.onlinePrice + product.offlinePrice; // 计算总价
row.productNo = product.no;
row.productPrice = product.price;
row.businessPrice = product.price;
}
}
};
/** 表单校验 */
// 表单校验
const validate = () => {
return formRef.value.validate()
}
defineExpose({ validate })
return formData.value
};
defineExpose({ validate });
/** 初始化 */
// 初始化
onMounted(async () => {
productList.value = await ProductApi.getProductSimpleList()
})
productList.value = await ProductApi.getProductSimpleList();
});
</script>

5
src/views/crm/business/index.vue
View File

@ -161,7 +161,6 @@
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<BusinessForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
@ -233,8 +232,8 @@ const openCustomerDetail = (id: number) => {
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
const openForm = (id: number) => {
push({ name: 'CrmBusinessAdd', params: { id: 'create' } })
}
/** 删除按钮操作 */

287
src/views/crm/customer-complaints/create.vue Normal file
View File

@ -0,0 +1,287 @@
<template>
<el-row :gutter="20">
<el-col :span="16">
<ContentWrap title="新增客户投诉">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
>
<el-form-item label="客户" prop="customerId">
<el-select
v-model="formData.customerId"
clearable
filterable
lable-key="name"
placeholder="请选择客户"
value-key="id"
>
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.name"
:value="item.id!"
/>
</el-select>
</el-form-item>
<el-form-item label="投诉级别" prop="complaintLevel">
<el-select v-model="formData.complaintLevel" placeholder="请选择投诉级别">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_COMPLAINT_LEVEL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="投诉方式" prop="complaintMethod">
<el-select v-model="formData.complaintMethod" placeholder="请选择投诉方式">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_COMPLAINT_METHOD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="事件描述" prop="feedbackProblem">
<el-input v-model="formData.feedbackProblem" placeholder="请输入事件描述" type="textarea" :rows="5"/>
</el-form-item>
<el-form-item label="附件(可选)" prop="suggestion">
<UploadFile v-model="formData.suggestion" :limit="5" :fileType="['png','jpg','jpeg','bmp','doc','xls','pdf','txt']"/>
</el-form-item>
<el-form-item label="处理时效" prop="processingEfficiency">
<el-input v-model="formData.processingEfficiency" placeholder="请输入处理时效，单位：天" />
</el-form-item>
<el-form-item label="投诉人" prop="complaintUserId">
<el-input v-model="formData.complaintUserName" placeholder="请选择投诉人" readonly @click="handleSelectUserForm('complaintUser')"/>
</el-form-item>
<el-form-item label="被投诉人" prop="accusedComplaintUserId">
<el-input v-model="formData.accusedComplaintUserName" placeholder="请选择被投诉人" readonly @click="handleSelectUserForm('accusedComplaintUser')" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="submitForm">
确 定
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</el-col>
<!-- 审批相关：流程信息 -->
<el-col :span="8">
<ContentWrap title="审批流程" :bodyStyle="{ padding: '0 20px 0' }">
<ProcessInstanceTimeline
ref="timelineRef"
:activity-nodes="activityNodes"
:show-status-icon="false"
@select-user-confirm="selectUserConfirm"
/>
</ContentWrap>
</el-col>
</el-row>
<!-- 用户选择弹窗 -->
<UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
</template>
<script lang="ts" setup>
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import { useTagsViewStore } from '@/store/modules/tagsView'
import { CustomerComplaintsApi, CustomerComplaintsVO } from '@/api/crm/customer-complaints'
import * as CustomerApi from '@/api/crm/customer'
import UserSelectForm from '@/components/UserSelectForm/index.vue'
// 审批相关：import
import * as DefinitionApi from '@/api/bpm/definition'
import ProcessInstanceTimeline from '@/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/src/consts'
import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
defineOptions({ name: 'CustomerComplaintsCreate' })
const message = useMessage() // 消息弹窗
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({ //表单数据
customerId: undefined, // 客户ID
complaintLevel: undefined, // 投诉级别
complaintMethod: undefined, // 投诉方式
complaintUserId: undefined, // 投诉人ID
complaintUserName:undefined, // 投诉人姓名
accusedComplaintUserId: undefined, // 被投诉人ID
accusedComplaintUserName:undefined, //被投诉人姓名
processingEfficiency: undefined, // 处理时效：天
feedbackProblem: undefined, // 事件描述
suggestion: '', // 投诉附件
startUserSelectAssignees:undefined //发起人自选审批人 ,示例：{taskKey1:[1, 2],taskKey2:[1,2]}
})
const formRules = reactive({ //表单验证规则
customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
complaintLevel: [{ required: true, message: '投诉级别不能为空', trigger: 'blur' }],
complaintMethod: [{ required: true, message: '投诉方式不能为空', trigger: 'blur' }],
complaintUserId: [{ required: true, message: '投诉人不能为空', trigger: 'change' }],
accusedComplaintUserId: [{ required: true, message: '被投诉人不能为空', trigger: 'change' }],
processingEfficiency: [{ required: true, message: '处理时效不能为空', trigger: 'change' }],
feedbackProblem: [{ required: true, message: '事件描述不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
const customerList = ref([] as CustomerApi.CustomerVO[]) // 客户列表
const userSelectFormRef = ref(); //选择用户
// 审批相关：变量
const processDefineKey = 'crm_complaints' // 流程定义 Key
const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
const tempStartUserSelectAssignees = ref({}) // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
const processDefinitionId = ref('') //流程模型ID
/** 提交表单 */
const submitForm = async () => {
// 1.1 校验表单
await formRef.value.validate()
// 1.2 审批相关：校验指定审批人
if (startUserSelectTasks.value?.length > 0) {
for (const userTask of startUserSelectTasks.value) {
if (
Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
startUserSelectAssignees.value[userTask.id].length === 0
) {
return message.warning(`请选择${userTask.name}的审批人`)
}
}
}
// 2. 提交请求
formLoading.value = true
try {
const data = { ...formData.value } as unknown as CustomerComplaintsVO
// 审批相关：设置指定审批人
if (startUserSelectTasks.value?.length > 0) {
data.startUserSelectAssignees = startUserSelectAssignees.value
}
await CustomerComplaintsApi.createCustomerComplaints(data)
message.success('保存成功')
// 关闭当前 Tab
delView(unref(currentRoute))
// 跳转到客户投诉查询列表
await push({ name: 'CustomerComplaints' })
} finally {
formLoading.value = false
}
}
/** 审批相关：获取审批详情,用于节点预测 */
const getApprovalDetail = async () => {
try {
const data = await ProcessInstanceApi.getApprovalDetail({
processDefinitionId: processDefinitionId.value,
activityId: NodeId.START_USER_NODE_ID
})
if (!data) {
message.error('查询不到审批详情信息！')
return
}
// 获取审批节点，显示 Timeline 的数据
activityNodes.value = data.activityNodes
// 获取发起人自选的任务
startUserSelectTasks.value = data.activityNodes?.filter(
(node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
)
// 恢复之前的选择审批人
if (startUserSelectTasks.value?.length > 0) {
for (const node of startUserSelectTasks.value) {
if (
tempStartUserSelectAssignees.value[node.id] &&
tempStartUserSelectAssignees.value[node.id].length > 0
) {
startUserSelectAssignees.value[node.id] = tempStartUserSelectAssignees.value[node.id]
} else {
startUserSelectAssignees.value[node.id] = []
}
}
}
} finally {
}
}
/** 审批相关：选择发起人 */
const selectUserConfirm = (id: string, userList: any[]) => {
startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
}
/** 选择用户弹窗*/
const handleSelectUserForm = (activityId:string) => {
userSelectFormRef.value.open(activityId, []);
}
/** 选择用户后确认*/
const handleUserSelectConfirm = (activityId: string, userList: any[])=>{
formData.value[activityId+"Id"] = userList[0].id
formData.value[activityId+"Name"] = userList[0].nickname
}
/** 初始化 */
onMounted(async () => {
//获得流程模型定义
const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
undefined,
processDefineKey
)
if (!processDefinitionDetail) {
message.error('流程模型未配置，请检查！')
return
}
processDefinitionId.value = processDefinitionDetail.id // 流程模型ID
startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
// 审批相关：加载最新的审批详情，主要用于节点预测
await getApprovalDetail()
// 查询客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
})
/** 审批相关：预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次, formData.value可改成实际业务中的特定字段
watch(
formData.value,
(newValue, oldValue) => {
if (!oldValue) {
return
}
if (newValue && Object.keys(newValue).length > 0) {
// 记录之前的节点审批人
tempStartUserSelectAssignees.value = startUserSelectAssignees.value
startUserSelectAssignees.value = {}
// 加载最新的审批详情,主要用于节点预测
getApprovalDetail()
}
},
{
immediate: true
}
)
*/
</script>

115
src/views/crm/customer-complaints/detail.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<ContentWrap>
<el-descriptions :column="1" border>
<el-descriptions-item label="处理状态">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="detailData.status" />
</el-descriptions-item>
<el-descriptions-item label="投诉级别">
<dict-tag :type="DICT_TYPE.CRM_COMPLAINT_LEVEL" :value="detailData.complaintLevel" />
</el-descriptions-item>
<el-descriptions-item label="投诉方式">
<dict-tag :type="DICT_TYPE.CRM_COMPLAINT_METHOD" :value="detailData.complaintMethod" />
</el-descriptions-item>
<el-descriptions-item label="客户姓名">
{{ detailData.customerName }}
</el-descriptions-item>
<el-descriptions-item label="事件描述">
{{ detailData.feedbackProblem}}
</el-descriptions-item>
<el-descriptions-item label="投诉附件">
<span v-if="detailData.suggestion">
<el-link
v-for="(link, index) in detailData.suggestion.split(',')"
:key="index"
:href="link"
type="primary"
target="_blank"
>
附件{{ index + 1 }}&nbsp;&nbsp;
</el-link>
<span v-if="index < detailData.suggestion.split(',').length - 1">, </span>
</span>
<span v-else></span>
</el-descriptions-item>
<el-descriptions-item label="投诉人">
{{ detailData.complaintUserName }}
</el-descriptions-item>
<el-descriptions-item label="投诉部门">
{{ detailData.complaintDeptName }}
</el-descriptions-item>
<el-descriptions-item label="被投诉人">
{{ detailData.accusedComplaintUserName }}
</el-descriptions-item>
<el-descriptions-item label="被投诉部门">
{{ detailData.accusedComplaintDeptName }}
</el-descriptions-item>
<el-descriptions-item label="处理时效">
{{ detailData.processingEfficiency}}天
</el-descriptions-item>
<el-descriptions-item label="创建人">
{{ detailData.creatorName}}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
</el-descriptions-item>
<el-descriptions-item label="ID">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="流程编号">
{{ detailData.processInstanceId}}
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { CustomerComplaintsApi} from '@/api/crm/customer-complaints'
defineOptions({ name: 'CustomerSuggestionDetail' })
const { query } = useRoute() // 查询参数
const props = defineProps({
id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
/** 获得数据 */
const getInfo = async () => {
detailLoading.value = true
try {
detailData.value = await CustomerComplaintsApi.getCustomerComplaints(props.id || queryId)
} finally {
detailLoading.value = false
}
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {
getInfo()
})
</script>

355
src/views/crm/customer-complaints/index.vue Normal file
View File

@ -0,0 +1,355 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="投诉人" prop="complaintUserId">
<el-input
v-model="queryParams.complaintUserName"
class="!w-240px"
clearable
readonly
placeholder="请选择投诉人"
@click="handleSelectUserForm('complaintUser')"
/>
</el-form-item>
<el-form-item label="被投诉人" prop="accusedComplaintUserId">
<el-input
v-model="queryParams.accusedComplaintUserName"
class="!w-240px"
clearable
readonly
placeholder="请选择被投诉人"
@click="handleSelectUserForm('accusedComplaintUser')"
/>
</el-form-item>
<el-form-item label="客户" prop="customerId">
<el-select
v-model="queryParams.customerId"
placeholder="请选择客户"
clearable
filterable
class="!w-240px"
>
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.name"
:value="item.id!"
/>
</el-select>
</el-form-item>
<el-form-item label="投诉级别" prop="complaintLevel">
<el-select
v-model="queryParams.complaintLevel"
placeholder="请选择投诉级别"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_COMPLAINT_LEVEL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="投诉方式" prop="complaintMethod">
<el-select
v-model="queryParams.complaintMethod"
placeholder="请选择投诉方式"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_COMPLAINT_METHOD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="处理状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择处理状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
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-220px"
/>
</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>
<el-button
type="primary"
plain
@click="goCreateDetail"
v-hasPermi="['crm:customer-complaints:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['crm:customer-complaints:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" >
<el-table-column label="客户姓名" align="center" fixed="left" prop="customerName" width="120"/>
<el-table-column label="处理状态" align="center" prop="status" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="投诉级别" align="center" prop="complaintLevel" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_COMPLAINT_LEVEL" :value="scope.row.complaintLevel" />
</template>
</el-table-column>
<el-table-column label="事件描述" align="center" prop="feedbackProblem" width="300"/>
<el-table-column label="投诉人" align="center" prop="complaintUserName" width="100"/>
<el-table-column label="投诉部门" align="center" prop="complaintDeptName" width="200"/>
<el-table-column label="被投诉人" align="center" prop="accusedComplaintUserName" width="100"/>
<el-table-column label="被投诉部门" align="center" prop="accusedComplaintDeptName" width="200"/>
<el-table-column label="处理时效" align="center" prop="processingEfficiency" :formatter="addUnit" width="100"/>
<el-table-column label="投诉方式" align="center" prop="complaintMethod" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_COMPLAINT_METHOD" :value="scope.row.complaintMethod" />
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="creatorName" width="100"/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="ID" align="center" prop="id" width="200"/>
<el-table-column label="操作" align="center" fixed="right" min-width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="goDetail(scope.row.id)"
v-hasPermi="['crm:customer-complaints:query']"
>
详情
</el-button>
<el-button
link
type="primary"
@click="goProcessDetail(scope.row.processInstanceId)"
v-hasPermi="['crm:customer-complaints:query']"
>
进度
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 用户选择弹窗 -->
<UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CustomerComplaintsApi, CustomerComplaintsVO } from '@/api/crm/customer-complaints'
import * as CustomerApi from "@/api/crm/customer";
import UserSelectForm from '@/components/UserSelectForm/index.vue'
/** 客户投诉 列表 */
defineOptions({ name: 'CustomerComplaints' })
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const loading = ref(true) // 列表的加载中
const list = ref<CustomerComplaintsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
customerId: undefined,
complaintUserId: undefined,
complaintUserName:undefined, //投诉人姓名，仅用于展示不作为查询条件
complaintLevel: undefined,
complaintMethod: undefined,
acceptedUserId: undefined,
acceptedUserName:undefined, //受理人姓名，仅用于展示不作为查询条件
accusedComplaintUserId: undefined,
accusedComplaintUserName:undefined, //被投诉人姓名，仅用于展示不作为查询条件
processingUserId: undefined,
processingUserName:undefined, //处理人姓名，仅用于展示不作为查询条件
status: undefined,
createTime: [],
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
const userSelectFormRef = ref(); //选择用户
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CustomerComplaintsApi.getCustomerComplaintsPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
queryParams.complaintUserName = undefined
queryParams.acceptedUserName = undefined
queryParams.accusedComplaintUserName = undefined
queryParams.processingUserName = undefined
handleQuery()
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await CustomerComplaintsApi.exportCustomerComplaints(queryParams)
download.excel(data, '客户投诉.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 选择用户弹窗*/
const handleSelectUserForm = (activityId:string) => {
userSelectFormRef.value.open(activityId, []);
}
/** 选择用户后确认*/
const handleUserSelectConfirm = (activityId: string, userList: any[])=>{
queryParams[activityId+"Id"] = userList[0].id
queryParams[activityId+"Name"] = userList[0].nickname
}
/** 格式化函数，添加单位 */
const addUnit = (row, column, cellValue) => {
return `${cellValue}天`;
};
/** 详情*/
const goDetail = (id:number) => {
router.push({
name: 'CustomerComplaintsDetail',
query: {
id: id
}
})
}
/** 审批进度 */
const goProcessDetail = (processInstanceId:string) => {
router.push({
name: 'BpmProcessInstanceDetail',
query: {
id: processInstanceId
}
})
}
/** 新建 */
const goCreateDetail = () => {
router.push({
name: 'CustomerComplaintsCreate'
})
}
/** 初始化 **/
onMounted(async () => {
await getList()
// 查询客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
})
// fix: 列表不刷新的问题。
watch(
() => router.currentRoute.value,
() => {
getList()
}
)
</script>

40
src/views/crm/customer-suggestion/detail.vue
View File

@ -6,11 +6,6 @@
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="detailData.status" />
</el-descriptions-item>
<el-descriptions-item label="ID">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="客户姓名">
{{ detailData.customerName }}
@ -25,51 +20,30 @@
</el-descriptions-item>
<el-descriptions-item label="反馈人姓名">
<el-descriptions-item label="反馈人">
{{ detailData.feedbackUserName }}
</el-descriptions-item>
<el-descriptions-item label="反馈部门名称">
<el-descriptions-item label="反馈部门">
{{ detailData.feedbackDeptName }}
</el-descriptions-item>
<el-descriptions-item label="流程编号">
{{ detailData.processInstanceId }}
</el-descriptions-item>
<el-descriptions-item label="创建人姓名">
<el-descriptions-item label="创建人">
{{ detailData.creatorName }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
</el-descriptions-item>
<!--
<el-descriptions-item label="客户ID">
{{ detailData.customerId }}
<el-descriptions-item label="ID">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="反馈人ID">
{{ detailData.feedbackUserId }}
<el-descriptions-item label="流程编号">
{{ detailData.processInstanceId }}
</el-descriptions-item>
<el-descriptions-item label="反馈部门ID">
{{ detailData.feedbackDeptId }}
</el-descriptions-item>
<el-descriptions-item label="创建人ID">
{{ detailData.creator }}
</el-descriptions-item>
-->
</el-descriptions>
</ContentWrap>
</template>

19
src/views/crm/customer-suggestion/index.vue
View File

@ -125,18 +125,17 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column align="center" label="ID" prop="id" />
<el-table-column align="center" label="客户姓名" prop="customerName" />
<el-table-column align="center" label="反馈部门" prop="feedbackDeptName" />
<el-table-column align="center" label="反馈人" prop="feedbackUserName" />
<el-table-column align="center" label="反馈问题" prop="feedbackProblem" />
<el-table-column align="center" label="建议" prop="suggestion" />
<el-table-column align="center" label="处理状态" prop="status">
<el-table-column align="center" fixed="left" label="客户姓名" prop="customerName" width="120" />
<el-table-column align="center" label="反馈问题" prop="feedbackProblem" width="300"/>
<el-table-column align="center" label="建议" prop="suggestion" width="300"/>
<el-table-column align="center" label="处理状态" prop="status" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" label="创建人" prop="creatorName" />
<el-table-column align="center" label="反馈部门" prop="feedbackDeptName" width="200"/>
<el-table-column align="center" label="反馈人" prop="feedbackUserName" width="100"/>
<el-table-column align="center" label="创建人" prop="creatorName" width="100"/>
<el-table-column
:formatter="dateFormatter"
align="center"
@ -144,7 +143,9 @@
prop="createTime"
width="180"
/>
<el-table-column align="center" label="操作" width="200">
<el-table-column label="ID" align="center" prop="id" width="200"/>
<el-table-column align="center" fixed="right" label="操作" min-width="150">
<template #default="scope">
<el-button
v-hasPermi="['crm:customer-suggestion:query']"