main
qsh
1 month ago
parent
fa2ee0cd6a
commit
7c0581f15f
@ -0,0 +1,553 @@ |
||||
<template> |
||||
<div style="height: 100vh; overflow-y: auto"> |
||||
<div> |
||||
<div> |
||||
<Descriptions |
||||
:title="`线索信息-${info.name}`" |
||||
:data="info" |
||||
:schema="showSchema" |
||||
:columns="2" |
||||
labelWidth="130px" |
||||
:defaultShow="false" |
||||
/> |
||||
<el-form |
||||
:model="form" |
||||
ref="formRef" |
||||
:rules="rules" |
||||
label-width="85px" |
||||
class="mt-20px pl-10px pr-10px" |
||||
> |
||||
<el-row> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="学员姓名" prop="name"> |
||||
<el-input v-model="form.name" placeholder="请输入学员姓名" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="联系方式" prop="phone"> |
||||
<el-input v-model="form.phone" placeholder="请输入联系方式" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="成交驾校" prop="signSchool"> |
||||
<el-select |
||||
v-model="form.signSchool" |
||||
placeholder="选择驾校" |
||||
filterable |
||||
@change="changeSchool" |
||||
> |
||||
<el-option |
||||
v-for="item in schoolOptions" |
||||
:key="item.schoolId" |
||||
:label="item.schoolName" |
||||
:value="item.schoolId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="成交场地" prop="signPlace"> |
||||
<el-select |
||||
v-model="form.signPlace" |
||||
placeholder="选择场地" |
||||
filterable |
||||
:disabled="!form.signSchool" |
||||
@change="changePlace" |
||||
> |
||||
<el-option |
||||
v-for="item in placeOptions" |
||||
:key="item.placeId" |
||||
:label="item.name" |
||||
:value="item.placeId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="成交班型" prop="signClass"> |
||||
<el-select |
||||
v-model="form.signClass" |
||||
:disabled="!form.signPlace" |
||||
placeholder="选择班型" |
||||
filterable |
||||
@change="changeClass" |
||||
> |
||||
<el-option |
||||
v-for="item in classOptions" |
||||
:key="item.typeId" |
||||
:label="item.typeName" |
||||
:value="item.typeId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="成交日期" prop="dealDate"> |
||||
<el-date-picker |
||||
v-model="form.dealDate" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="选择日期时间" |
||||
style="width: 100%" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="成交价" prop="signPrice"> |
||||
<el-input-number |
||||
v-model="form.signPrice" |
||||
:min="0" |
||||
style="width: 100%" |
||||
:controls="false" |
||||
@change="signPriceChange" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="是否全款"> |
||||
<el-radio-group v-model="form.isPayoff"> |
||||
<el-radio :label="true" :value="true"> 全款 </el-radio> |
||||
<el-radio :label="false" :value="false"> 非全款 </el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="支付金额" prop="payAmount"> |
||||
<el-input-number |
||||
v-model="form.payAmount" |
||||
:min="0" |
||||
style="width: 100%" |
||||
:controls="false" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24"> |
||||
<el-form-item label="公司收款" prop="isCompanyReceipts"> |
||||
<el-radio-group v-model="form.isCompanyReceipts"> |
||||
<el-radio :label="true" :value="true">是</el-radio> |
||||
<el-radio :label="false" :value="false">否</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="6" :lg="6" :md="8" :sm="24" :xs="24" v-if="form.signClass"> |
||||
<el-form-item label="利润"> |
||||
<div style="color: blue; font-weight: bold; font-size: 16px">{{ profitNum }}</div> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col |
||||
:xl="6" |
||||
:lg="6" |
||||
:md="8" |
||||
:sm="24" |
||||
:xs="24" |
||||
v-for="fieldItem in diyFieldList" |
||||
:key="fieldItem.clueParamId" |
||||
> |
||||
<el-form-item :label="fieldItem.label" :prop="fieldItem.field"> |
||||
<component :is="componentMap[fieldItem.component]" v-model="form[fieldItem.field]"> |
||||
<template v-if="fieldItem.component == 'Select'"> |
||||
<el-option |
||||
v-for="item in fieldItem.options" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</template> |
||||
<template v-else-if="fieldItem.component == 'Radio'"> |
||||
<el-radio |
||||
v-for="item in fieldItem.options" |
||||
:key="item.id" |
||||
:label="item.id" |
||||
:value="item.id" |
||||
> |
||||
{{ item.name }} |
||||
</el-radio> |
||||
</template> |
||||
<template v-else-if="fieldItem.component == 'Checkbox'"> |
||||
<el-checkbox |
||||
v-for="item in fieldItem.options" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</template> |
||||
</component> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24" :offset="0" class="mb-18px"> |
||||
<el-divider direction="horizontal" content-position="left"> |
||||
其他费用<span v-if="extraTotalPrice">，应收：{{ extraTotalPrice }}</span> |
||||
</el-divider> |
||||
<el-button |
||||
class="mb-5px" |
||||
type="primary" |
||||
size="small" |
||||
@click="form.extraPay.push({ extraPayType: undefined, extraPayMoney: 0 })" |
||||
> |
||||
添加其他费用 |
||||
</el-button> |
||||
<el-table :data="form.extraPay" border size="small"> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column prop="extraPayType" label="费用类型" width="200px"> |
||||
<template #default="{ row }"> |
||||
<el-select |
||||
v-model="row.extraPayType" |
||||
size="small" |
||||
placeholder="其他费用类型" |
||||
filterable |
||||
> |
||||
<el-option |
||||
v-for="item in extraPayOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="extraPayMoney" label="费用金额" width="180px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number v-model="row.extraPayMoney" size="small" :controls="false" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="remark" label="备注"> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.remark" size="small" placeholder="备注信息" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="60px"> |
||||
<template #default="{ $index }"> |
||||
<Icon |
||||
icon="ep:remove-filled" |
||||
class="text-red-500" |
||||
@click="handleRemove('extraPay', $index)" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-col> |
||||
<el-col :span="24" :offset="0" class="mb-18px"> |
||||
<el-divider direction="horizontal" content-position="left"> 额外支出 </el-divider> |
||||
<el-button |
||||
class="mb-5px" |
||||
type="primary" |
||||
size="small" |
||||
@click=" |
||||
form.extraPay.push({ |
||||
extraPayType: undefined, |
||||
extraPayMoney: 0, |
||||
dictType: 'extra_pay_type', |
||||
editabled: true |
||||
}) |
||||
" |
||||
> |
||||
添加额外支出 |
||||
</el-button> |
||||
<el-table :data="form.extraPay" border size="small"> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column prop="extraPayType" label="费用类型" width="200px"> |
||||
<template #default="{ row }"> |
||||
<el-select |
||||
v-if="row.editabled" |
||||
v-model="row.extraPayType" |
||||
size="small" |
||||
placeholder="其他费用类型" |
||||
filterable |
||||
> |
||||
<el-option |
||||
v-for="item in extraPayOptions" |
||||
:key="item.id" |
||||
:label="item.extraPayName" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="extraPayMoney" label="费用金额" width="180px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.editabled" |
||||
v-model="row.extraPayMoney" |
||||
size="small" |
||||
:controls="false" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="remark" label="备注"> |
||||
<template #default="{ row }"> |
||||
<el-input |
||||
v-if="row.editabled" |
||||
v-model="row.remark" |
||||
size="small" |
||||
placeholder="备注信息" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="60px"> |
||||
<template #default="{ row, $index }"> |
||||
<Icon |
||||
icon="ep:remove-filled" |
||||
class="text-red-500" |
||||
v-if="row.editabled" |
||||
@click="handleRemove('extraPay', $index)" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-col> |
||||
<el-col :span="24" :offset="0"> |
||||
<el-form-item label="备注" label-width="50px"> |
||||
<Editor v-model:modelValue="form.remark" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<el-button v-if="!remarkInfo.isEnroll" type="primary" @click="handleSave">提 交</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import * as ClueApi from '@/api/clue' |
||||
import { createSign, getSignProfit } from '@/api/clue/sign' |
||||
import { getClueRemarkByRemarkId } from '@/api/clue/clueRemark' |
||||
import { getDiyFieldList } from '@/api/clue/orderField' |
||||
import { getPlaceList } from '@/api/school/place' |
||||
import { getClassTypeList } from '@/api/school/class' |
||||
import { getConfigByConfigKey } from '@/api/system/set' |
||||
import { getSimpleFieldList as getClueField } from '@/api/clue/clueField' |
||||
import { getSimpleFieldList } from '@/api/clue/orderField' |
||||
|
||||
import { formatDate } from '@/utils/formatTime' |
||||
import { getDictOptions } from '@/utils/dict' |
||||
import { componentMap } from '@/components/Form/src/componentMap' |
||||
|
||||
const form = ref({}) |
||||
|
||||
const schoolRules = { |
||||
name: { required: true, message: '学员姓名不可为空', trigger: 'blur' }, |
||||
phone: { required: true, message: '联系方式不可为空', trigger: 'blur' }, |
||||
signSchool: { required: true, message: '成交驾校不可为空', trigger: 'change' }, |
||||
signPlace: { required: true, message: '成交场地不可为空', trigger: 'change' }, |
||||
signClass: { required: true, message: '成交班型不可为空', trigger: 'change' } |
||||
} |
||||
|
||||
const info = ref({}) |
||||
const formLoading = ref(false) |
||||
|
||||
const route = useRoute() |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const extraTotalPrice = computed(() => { |
||||
return form.value.extraPay?.reduce((pre, cur) => pre + cur.extraPayMoney, 0) |
||||
}) |
||||
|
||||
const showSchema = ref([]) |
||||
|
||||
const extraPayOptions = getDictOptions('other_pay_type') |
||||
|
||||
const remarkInfo = ref({}) |
||||
|
||||
onMounted(() => { |
||||
if (route.params.id && route.params.id != 0) { |
||||
// 这里可以调用API获取会议详情数据 |
||||
getClueRemarkByRemarkId({ remarkId: route.params.id }).then((response) => { |
||||
remarkInfo.value = response |
||||
resetForm() |
||||
getOptions() |
||||
getDiyFields() |
||||
ClueApi.getClue(remarkInfo.value.clueId).then((data) => { |
||||
info.value = { ...data, ...data.diyParams, signInfo: remarkInfo.value.signInfo } |
||||
let str = '' |
||||
if (!remarkInfo.value.remarkContent.includes(data.name)) { |
||||
// 提示姓名不一致 |
||||
str += '学员姓名不一致' |
||||
} |
||||
if (!remarkInfo.value.remarkContent.includes(data.phone)) { |
||||
// 提示姓名不一致 |
||||
str += '手机号不一致' |
||||
} |
||||
if (str.length) { |
||||
message.warning(`请注意：${str}`) |
||||
} |
||||
}) |
||||
}) |
||||
} else { |
||||
// 关闭网页 |
||||
window.close() |
||||
} |
||||
}) |
||||
|
||||
async function resetForm() { |
||||
const data = await getConfigByConfigKey({ configKey: 'companyCollectionConfig' }) |
||||
form.value = { |
||||
name: remarkInfo.value.name, |
||||
phone: remarkInfo.value.phone, |
||||
clueId: remarkInfo.value.clueId, |
||||
dealDate: formatDate(new Date()), |
||||
isPayoff: true, |
||||
signPrice: 0, |
||||
payAmount: 0, |
||||
remark: undefined, |
||||
isCompanyReceipts: data.configValue == 'true', |
||||
receiver: remarkInfo.value.enterUser, |
||||
extraPay: [], |
||||
signProducts: [], |
||||
installStatus: 3 |
||||
} |
||||
} |
||||
|
||||
const rules = ref([]) |
||||
function getDiyFields() { |
||||
getSimpleFieldList().then((data) => { |
||||
let ruleObj = {} |
||||
data.map((it) => { |
||||
if (it.isRequired) { |
||||
Reflect.set(ruleObj, it.field, { |
||||
required: true, |
||||
message: `${it.label}不可为空`, |
||||
trigger: 'blur, change' |
||||
}) |
||||
} |
||||
}) |
||||
rules.value = { ...ruleObj, ...schoolRules } |
||||
}) |
||||
} |
||||
|
||||
const formRef = ref() |
||||
async function handleSave() { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
|
||||
if (form.value.extraPay.some((it) => !it.extraPayType || it.extraPayMoney == null)) { |
||||
message.info('请将费用类型及费用金额填写完整！') |
||||
return |
||||
} |
||||
|
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const params = { ...form.value } |
||||
params.diyParams = {} |
||||
diyFieldList.value.map((it) => { |
||||
params.diyParams[it.field] = undefined |
||||
}) |
||||
for (const key in params.diyParams) { |
||||
if (Object.hasOwnProperty.call(params, key)) { |
||||
params.diyParams[key] = params[key] |
||||
} |
||||
} |
||||
await createSign(params) |
||||
message.success('登记成功！') |
||||
show.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
const schoolOptions = ref([]) |
||||
const allPlaceOptions = ref([]) |
||||
|
||||
const diyFieldList = ref([]) |
||||
|
||||
const placeOptions = computed(() => { |
||||
return allPlaceOptions.value.filter((it) => it.schoolId == form.value.signSchool) |
||||
}) |
||||
|
||||
const classOptions = ref([]) |
||||
|
||||
async function getClassTypeOptions() { |
||||
const data = await getClassTypeList({ placeId: form.value.signPlace, status: 0 }) |
||||
classOptions.value = data |
||||
} |
||||
|
||||
function getOptions() { |
||||
getClueField().then((data) => { |
||||
const list = useCrudSchemas(data)?.allSchemas?.detailSchema?.map((it) => { |
||||
if (it.label.includes('日期')) { |
||||
it.dateFormat = 'YYYY-MM-DD' |
||||
} |
||||
return it |
||||
}) |
||||
if (list.length % 2 != 0) { |
||||
list.push({}) |
||||
} |
||||
const arr = [ |
||||
{ |
||||
field: 'requirement', |
||||
label: '诉求', |
||||
span: 2 |
||||
}, |
||||
{ |
||||
field: 'remark', |
||||
label: '备注', |
||||
isEditor: true, |
||||
span: 2 |
||||
}, |
||||
{ |
||||
field: 'signInfo', |
||||
label: '报名信息', |
||||
isEditor: true, |
||||
span: 2 |
||||
} |
||||
] |
||||
showSchema.value = [...list, ...arr] |
||||
}) |
||||
// 驾校 |
||||
getPlaceList({ placeStatus: 0, schoolStatus: 0, isSearchSchool: true }).then((data) => { |
||||
schoolOptions.value = data.schoolList |
||||
allPlaceOptions.value = data.placeList |
||||
}) |
||||
// 自定义参数 |
||||
getDiyFieldList().then((data) => { |
||||
diyFieldList.value = data |
||||
}) |
||||
} |
||||
|
||||
function changeSchool() { |
||||
form.value.signPlace = undefined |
||||
form.value.signClass = undefined |
||||
} |
||||
|
||||
function changePlace() { |
||||
form.value.signClass = undefined |
||||
getClassTypeOptions() |
||||
} |
||||
|
||||
function changeClass() { |
||||
form.value.signPrice = |
||||
classOptions.value.find((it) => it.typeId == form.value.signClass).guidingPrice || 0 |
||||
signPriceChange() |
||||
} |
||||
|
||||
function signPriceChange() { |
||||
if (form.value.isPayoff) { |
||||
form.value.payAmount = form.value.signPrice |
||||
} |
||||
calcSignProfit() |
||||
} |
||||
|
||||
const profitNum = ref(0) |
||||
function calcSignProfit() { |
||||
if (form.value.signClass) { |
||||
// 计算员工利润 |
||||
getSignProfit({ signClass: form.value.signClass, signPrice: form.value.signPrice }).then( |
||||
(data) => { |
||||
profitNum.value = data |
||||
} |
||||
) |
||||
} |
||||
} |
||||
|
||||
function handleRemove(type, index) { |
||||
form.value[type].splice(index, 1) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue