xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改代码格式

Browse Source
This commit is contained in:
浅念
2025-07-23 14:40:02 +08:00
parent 4a39387865
commit 7979a31e36
4 changed files with 1022 additions and 957 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/crmpc/customer/Add.vue
+222 -211
View File
@@ -1,8 +1,8 @@
<template>
<div class="customer-form-page">
<div class="form-header">
<el-link :underline="false" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
<el-link underline="never" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
</el-link>
<span class="border"></span><span class="form-title">新增客户资料</span>
</div>
@@ -18,19 +18,29 @@
<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-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-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" style="justify-content: flex-end;width: 100%;">
<el-form-item label="客户性别" prop="sex">
<el-radio-group v-model="form.sex" style="justify-content: flex-end; width: 100%">
<el-radio label="0">未知</el-radio>
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
@@ -52,16 +62,31 @@
</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-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-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="请输入公司" @click="showMapDialog = true" readonly />
<el-input
v-model="form.company"
placeholder="请输入公司"
@click="showMapDialog = true"
readonly
/>
</el-form-item>
<el-form-item label="备注" prop="describe">
<el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
@@ -69,15 +94,15 @@
</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-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;">
<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 id="google-map" style="width: 100%; height: 100%"></div>
</div>
<template #footer>
<el-button @click="showMapDialog = false">取消</el-button>
@@ -87,221 +112,207 @@
</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'
import { ref, onMounted, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { CrmService } from '@/api/crmApi'
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 intentionOptions = ref<any>()
const levelOptions = ref<any>()
const countryOptions = ref<any>()
onMounted(() => {
getgetChannel()
getMagnitude()
getGrade()
getarea()
})
//渠道
const getgetChannel = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getChannel()
channelOptions.value = res||[]
} catch (error) { channelOptions.value = [] }
}
//商机
const getMagnitude = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getMagnitude()
opportunityOptions.value = res||[]
} catch (error) { opportunityOptions.value = [] }
}
//客户等级
const getGrade = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getGrade()
levelOptions.value = res||[]
} catch (error) { levelOptions.value = [] }
}
//国家
const getarea = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getCountry()
countryOptions.value = res||[]
} catch (error) { countryOptions.value = [] }
}
function goBack() {
router.back()
}
function submitForm() {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
try {
const res = await CrmService.customerAdd(form.value)
ElMessage.success(res?.message || '提交成功！')
router.push('/crmpc/customer')
} catch (e: any) {
ElMessage.error(e?.message || '提交失败')
}
}
const router = useRouter()
const formRef = ref()
const form = ref({
channel_id: '',
magnitude: '',
contacts: '',
sex: '0',
phone: '',
email: '',
WhatsApp: '',
grade: '',
country_id: '',
company: '',
describe: ''
})
}
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;
const rules = {
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
}
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
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()
}
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()
function submitForm() {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
try {
const res = await CrmService.customerAdd(form.value)
ElMessage.success(res?.message || '提交成功！')
router.push('/crmpc/customer')
} catch (e: any) {
ElMessage.error(e?.message || '提交失败')
}
}, 100)
}
})
}
})
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 {
.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;
}
}
.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>
.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>