浅念
341 lines
11 KiB
Vue
341 lines
11 KiB
Vue
<template>
|
|
<div class="customer-form-page">
|
|
<div class="form-header">
|
|
<el-link underline="never" @click="goBack">
|
|
<i class="iconfont-sys icon-reverse"></i> 返回
|
|
</el-link>
|
|
<span class="border"></span><span class="form-title">新增客户资料</span>
|
|
</div>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
class="customer-form"
|
|
label-position="right"
|
|
>
|
|
<el-row :gutter="24">
|
|
<el-col :span="24">
|
|
<el-form-item label="客户渠道" prop="channel_id">
|
|
<el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
|
|
<el-option
|
|
v-for="item in channelOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="客户商机" prop="magnitude">
|
|
<el-select v-model="form.magnitude" placeholder="请选择客户商机">
|
|
<el-option
|
|
v-for="item in opportunityOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="客户名称" prop="contacts">
|
|
<el-input v-model="form.contacts" placeholder="请输入客户名称" />
|
|
</el-form-item>
|
|
<el-form-item label="客户性别" prop="sex">
|
|
<el-radio-group v-model="form.sex">
|
|
<el-radio label="0">未知</el-radio>
|
|
<el-radio label="1">男</el-radio>
|
|
<el-radio label="2">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入电话" />
|
|
</el-form-item>
|
|
<el-form-item label="Email" prop="email">
|
|
<el-input v-model="form.email" placeholder="请输入Email" />
|
|
</el-form-item>
|
|
<el-form-item label="WhatsApp" prop="WhatsApp">
|
|
<el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="客户偏好" prop="car_type_id">
|
|
<el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
|
|
<el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="客户分级" prop="grade">
|
|
<el-select v-model="form.grade" placeholder="请选择客户分级">
|
|
<el-option
|
|
v-for="item in levelOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="国家" prop="country_id">
|
|
<el-select v-model="form.country_id" filterable placeholder="请选择国家">
|
|
<el-option
|
|
v-for="item in countryOptions"
|
|
:key="item.id"
|
|
:label="item.cn_addr"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="公司" prop="company">
|
|
<el-input v-model="form.company" placeholder="请输入公司" />
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="describe">
|
|
<el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item class="submit-row">
|
|
<el-button type="primary" style="width: 100%" @click="submitForm">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- 谷歌地图选点弹窗 -->
|
|
<el-dialog v-model="showMapDialog" title="选择公司地址" width="800px">
|
|
<div style="height: 400px; position: relative">
|
|
<!-- <input id="map-search" type="text" placeholder="搜索地点" style="position:absolute;z-index:2;top:10px;left:10px;width:300px;" /> -->
|
|
<div id="google-map" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="showMapDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="confirmMapSelect">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog v-model="centerDialogVisible" title="提示" width="500" center>
|
|
<div style="text-align: center">
|
|
<span v-html="warningMsg"></span>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="centerDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="distinctNoticefn"> 通知跟进 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useRouter } from 'vue-router'
|
|
import { CrmService } from '@/api/crmApi'
|
|
defineOptions({ name: 'CustomerAdd' })
|
|
const warningMsg = ref('')
|
|
const centerDialogVisible = ref(false)
|
|
const router = useRouter()
|
|
const formRef = ref()
|
|
const form = ref({
|
|
channel_id: '',
|
|
magnitude: '',
|
|
contacts: '',
|
|
sex: '0',
|
|
phone: '',
|
|
email: '',
|
|
WhatsApp: '',
|
|
grade: '',
|
|
country_id: '',
|
|
company: '',
|
|
describe: ''
|
|
})
|
|
|
|
const rules = {
|
|
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
|
|
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
|
|
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
|
|
}
|
|
|
|
const channelOptions = ref<any>()
|
|
const opportunityOptions = ref<any>()
|
|
const levelOptions = ref<any>()
|
|
const countryOptions = ref<any>()
|
|
onMounted(() => {
|
|
getgetChannel()
|
|
getMagnitude()
|
|
getGrade()
|
|
getarea()
|
|
})
|
|
//渠道
|
|
const getgetChannel = async () => {
|
|
const res = await CrmService.getChannel()
|
|
channelOptions.value = res || []
|
|
}
|
|
//商机
|
|
const getMagnitude = async () => {
|
|
const res = await CrmService.getMagnitude()
|
|
opportunityOptions.value = res || []
|
|
}
|
|
//客户等级
|
|
const getGrade = async () => {
|
|
const res = await CrmService.getGrade()
|
|
levelOptions.value = res || []
|
|
}
|
|
//国家
|
|
const getarea = async () => {
|
|
const res = await CrmService.getCountry()
|
|
countryOptions.value = res || []
|
|
}
|
|
function goBack() {
|
|
router.back()
|
|
}
|
|
const customer_id = ref('')
|
|
function submitForm() {
|
|
formRef.value.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
try {
|
|
const res = await CrmService.customerAdd(form.value)
|
|
if (res.status == 'distinct') {
|
|
customer_id.value = res.data.id
|
|
warningMsg.value = res?.message
|
|
centerDialogVisible.value = true
|
|
return
|
|
}
|
|
ElMessage.success(res?.message || '提交成功！')
|
|
router.push('/crmpc/customer')
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.message || '提交失败')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
const distinctNoticefn = async () => {
|
|
const res = await CrmService.repeatCustomer({
|
|
customer_id: customer_id.value
|
|
})
|
|
ElMessage.success(res?.message)
|
|
centerDialogVisible.value = false
|
|
router.push('/crmpc/customer')
|
|
}
|
|
|
|
const showMapDialog = ref(false)
|
|
const selectedAddress = ref('')
|
|
const selectedLatLng = ref({ lat: null, lng: null })
|
|
|
|
function confirmMapSelect() {
|
|
form.value.company = selectedAddress.value
|
|
// 你也可以保存 selectedLatLng.value 到 form
|
|
showMapDialog.value = false
|
|
}
|
|
|
|
let map: any, marker: any, autocomplete: any
|
|
|
|
function initMap() {
|
|
const google = (window as any).google
|
|
const input = document.getElementById('map-search') as HTMLInputElement
|
|
if (!input) {
|
|
setTimeout(initMap, 100)
|
|
return
|
|
}
|
|
map = new google.maps.Map(document.getElementById('google-map'), {
|
|
center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
|
|
zoom: 12
|
|
})
|
|
|
|
marker = new google.maps.Marker({
|
|
map,
|
|
draggable: true
|
|
})
|
|
|
|
map.addListener('click', (e: any) => {
|
|
marker.setPosition(e.latLng)
|
|
getAddressByLatLng(e.latLng)
|
|
})
|
|
|
|
marker.addListener('dragend', (e: any) => {
|
|
getAddressByLatLng(e.latLng)
|
|
})
|
|
|
|
autocomplete = new google.maps.places.Autocomplete(input)
|
|
autocomplete.bindTo('bounds', map)
|
|
autocomplete.addListener('place_changed', () => {
|
|
const place = autocomplete.getPlace()
|
|
if (!place.geometry) return
|
|
map.panTo(place.geometry.location)
|
|
marker.setPosition(place.geometry.location)
|
|
getAddressByLatLng(place.geometry.location)
|
|
})
|
|
}
|
|
|
|
function getAddressByLatLng(latlng: any) {
|
|
const google = (window as any).google
|
|
const geocoder = new google.maps.Geocoder()
|
|
geocoder.geocode({ location: latlng }, (results: any, status: any) => {
|
|
if (status === 'OK' && results[0]) {
|
|
selectedAddress.value = results[0].formatted_address
|
|
selectedLatLng.value = {
|
|
lat: latlng.lat(),
|
|
lng: latlng.lng()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
watch(showMapDialog, (val) => {
|
|
if (val) {
|
|
nextTick(() => {
|
|
setTimeout(() => {
|
|
const google = (window as any).google
|
|
if (!google || !google.maps) {
|
|
const script = document.createElement('script')
|
|
script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
|
|
script.async = true
|
|
script.onload = initMap
|
|
document.head.appendChild(script)
|
|
} else {
|
|
initMap()
|
|
}
|
|
}, 100)
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.border {
|
|
margin: 0px 10px 0px 40px;
|
|
}
|
|
.submit-row .el-form-item__content {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.icon-reverse {
|
|
display: inline-block;
|
|
transform: rotate(270deg); /* 旋转180度 */
|
|
}
|
|
.customer-form-page {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 18px;
|
|
}
|
|
.form-header {
|
|
width: 98%;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
justify-content: flex-start; /* 新增，左对齐 */
|
|
}
|
|
.form-title {
|
|
font-weight: bold;
|
|
color: #222;
|
|
}
|
|
|
|
.customer-form {
|
|
width: 600px;
|
|
background: #fff;
|
|
padding: 10px 24px 16px 24px;
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 18px;
|
|
}
|
|
.el-form-item__label {
|
|
color: #222;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|