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

商机

pull/781/head
zy 2025-04-28 11:32:29 +08:00
parent 224e82c0f8
commit 31e9c45532
7 changed files with 636 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@ -534,6 +534,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
}, },
component: () => import('@/views/crm/business/detail/index.vue') 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', path: 'contract/detail/:id',
name: 'CrmContractDetail', name: 'CrmContractDetail',

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

@ -1,15 +1,19 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible" width="1280">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
label-width="100px" label-width="120px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="名称" prop="name"> <el-row>
<el-col :span="8">
<el-form-item label="票据模版名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" /> <el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="formData.status" clearable placeholder="请选择模板状态"> <el-select v-model="formData.status" clearable placeholder="请选择模板状态">
<el-option <el-option
@ -20,6 +24,20 @@
/> />
</el-select> </el-select>
</el-form-item> </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> </el-form>
<template #footer> <template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -28,11 +46,17 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
import { BillTemplateApi, BillTemplateVO } from '@/api/crm/billtemplate' import * as BusinessApi from '@/api/crm/business'
import * as BusinessStatusApi from '@/api/crm/business/status'
/** 票据模版 表单 */ import * as CustomerApi from '@/api/crm/customer'
defineOptions({ name: 'BillTemplateForm' }) 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 { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@ -44,15 +68,62 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
name: 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({ 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 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 dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
@ -61,10 +132,31 @@ const open = async (type: string, id?: number) => {
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await BillTemplateApi.getBillTemplate(id) formData.value = await BusinessApi.getBusiness(id)
} finally { } finally {
formLoading.value = false 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 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -73,16 +165,25 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { 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 formLoading.value = true
try { try {
const data = formData.value as unknown as BillTemplateVO const data = formData.value as unknown as BusinessApi.BusinessVO
if (formType.value === 'create') { if (formType.value === 'create') {
await BillTemplateApi.createBillTemplate(data) await BusinessApi.createBusiness(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
await BillTemplateApi.updateBillTemplate(data) await BusinessApi.updateBusiness(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
dialogVisible.value = false dialogVisible.value = false
@ -98,7 +199,14 @@ const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
name: undefined, name: undefined,
status: undefined, customerId: undefined,
ownerUserId: undefined,
statusTypeId: undefined,
dealTime: undefined,
totalPrice: undefined,
products: [],
contactId: undefined,
customerDefault: false
} }
formRef.value?.resetFields() 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> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1280"> <ContentWrap class="mt-10px">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
@ -78,8 +78,6 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="商机状态组" prop="statusTypeId"> <el-form-item label="商机状态组" prop="statusTypeId">
<el-select <el-select
@ -121,8 +119,6 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="账期" prop="paymentTerm"> <el-form-item label="账期" prop="paymentTerm">
<el-select v-model="formData.paymentTerm" placeholder="请选择账期"> <el-select v-model="formData.paymentTerm" placeholder="请选择账期">
@ -177,8 +173,6 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" /> <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
@ -191,7 +185,7 @@
<el-tab-pane label="产品清单" name="product"> <el-tab-pane label="产品清单" name="product">
<BusinessProductForm <BusinessProductForm
ref="productFormRef" ref="productFormRef"
:products="formData.products" v-model="formData.products"
:disabled="disabled" :disabled="disabled"
/> />
</el-tab-pane> </el-tab-pane>
@ -227,11 +221,10 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </ContentWrap>
</Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict' 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 BusinessProductForm from './components/BusinessProductForm.vue'
import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils' import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
const deptTree = ref() // 部门树形结构 const deptTree = ref() // 部门树形结构
const { proxy }: any = getCurrentInstance();
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@ -276,7 +269,8 @@ const formData = ref({
creditMethod: undefined, creditMethod: undefined,
creditCalcCycle: undefined, creditCalcCycle: undefined,
creditLimit: undefined, creditLimit: undefined,
techSupport: undefined techSupport: undefined,
products: [],
}) })
const formRules = reactive({ const formRules = reactive({
name: [{ required: true, message: '商机名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '商机名称不能为空', trigger: 'blur' }],
@ -295,11 +289,12 @@ const productFormRef = ref()
/** 计算 discountPrice、totalPrice 价格 */ /** 计算 discountPrice、totalPrice 价格 */
watch( watch(
() => formData.value, () => formData.value.products,
(val) => { (val) => {
if (!val) { if (!val) {
return return
} }
const totalOnlinePrice = val.products.reduce((prev, curr) => prev + curr.onlinePrice, 0) const totalOnlinePrice = val.products.reduce((prev, curr) => prev + curr.onlinePrice, 0)
const totalOfflinePrice = val.products.reduce((prev, curr) => prev + curr.offlinePrice, 0) const totalOfflinePrice = val.products.reduce((prev, curr) => prev + curr.offlinePrice, 0)
// 赋值 // 赋值
@ -309,12 +304,10 @@ watch(
}, },
{ deep: true } { deep: true }
) )
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number, customerId?: number, contactId?: number) => { const open = async (type: string, id?: number, customerId?: number, contactId?: number) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type
resetForm() resetForm()
// 修改时，设置数据 // 修改时，设置数据
if (id) { if (id) {
@ -334,14 +327,7 @@ const open = async (type: string, id?: number, customerId?: number, contactId?:
formData.value.contactId = 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') { if (formType.value === 'create') {
formData.value.ownerUserId = useUserStore().getUser.id formData.value.ownerUserId = useUserStore().getUser.id
@ -349,14 +335,20 @@ const open = async (type: string, id?: number, customerId?: number, contactId?:
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
// 校验表单 // 修改前：
if (!formRef) return // console.log('%csrc/views/crm/business/BusinessForm.vue:346 productFormRef.value.formData', 'color: #007acc;', productFormRef.value);
const valid = await formRef.value.validate() // formData.value.products = productFormRef.value.formData;
if (!valid) return
await productFormRef.value.validate() // 修改为：
if (!productFormRef.value) return;
const valid = await productFormRef.value.validate();
formData.value.products = valid
if (!valid) return;
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
@ -392,4 +384,17 @@ const resetForm = () => {
} }
formRef.value?.resetFields() 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> </script>

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

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

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

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