@@ -2,45 +2,51 @@
< Dialog :title = "dialogTitle" v-model = "dialogVisible" width="800px" >
< el -tabs v-model = "tabName" >
< el -tab -pane label = "线索信息" name = "info" >
< Form
ref = "formRef"
v-loading = "formLoading"
:rules = "rules"
isCol
:schema = "allSchemas.formSchema"
/ >
< Form ref = "formRef" v-loading = "formLoading" :rules="rules" isCol :schema="formSchema" / >
< / el-tab-pane >
< el-tab-pane label = "跟进信息" name = "follow" >
< el-button type = "primary" @click ="handleAppendFollow" > 新增跟进人 < / el -button >
< el-table :data = "followList" >
< el-table-column label = "跟进人" >
< template # default = "{ row }" >
< el-select v-model = "row.followUser" placeholder="选择跟进人" filterable >
< el-select
v-model = "row.userId"
placeholder = "选择跟进人"
filterable
:disabled = "!row.editable"
>
< el-option
v-for = "item in userOptions"
:key = "item.value "
:label = "item.label "
:value = "item.value "
:key = "item.id "
:label = "item.nickname "
:value = "item.id "
/ >
< / el-select >
< / template >
< / el-table-column >
< el-table-column prop = "nextF ollowTime" label = "下次跟进时间" >
< el-table-column prop = "f ollowTime" label = "下次跟进时间" >
< template # default = "{ row }" >
< el-date-picker v-model = "row.nextFollowTime" type="date" placeholder="选择日期时间" / >
< el-date-picker
v-model = "row.followTime"
type = "date"
placeholder = "选择日期时间"
:disabled = "!row.editable"
/ >
< / template >
< / el-table-column >
< el-table-column label = "操作" width = "80" >
< template # default = "{ $index }" >
< Icon icon = "ep:remove-filled" class = "text-red-500" @click ="handleRemove($index)" / >
<!-- < el-button @click ="handleRemove(row, $index) ">
< / el -button > -- >
< template # default = "{ row, $index }" >
< Icon
v-if = "row.editable "
icon = "ep:remove-filled"
class = "text-red-500"
@click ="handleRemove($index)"
/ >
< / template >
< / el-table-column >
< / el-table >
< / el-tab-pane >
< el-tab-pane label = =
< el-tab-pane v-if = "appStore.getAppInfo?.instanceType == 1" label= "位置信息" name= "map">
< div class = "flex justify-between" >
< el-select
v-model = "areaValue"
@@ -64,11 +70,15 @@
< span style = "float: right; color: #8492a6; font-size: 13px" > { { item . district } } < / span >
< / el-option >
< / el-select >
< el-checkbox v-model = "showSchool" :label="true" @change="handleShowSchool"
> 展示场地 < / e l - c h e c k b o x
< el-checkbox v-model = "showSchool" :label="true" @change="handleShowSchool" >
展示场地
< / el -checkbox
< / div >
< div id = "dialogMap" class = "mt-20px" style = "height: 400px; width: 100%" > < / div >
< div class = "flex items-center mt-10px mb-10px" >
< div class = "w-100px" > 线索位置 ： < / div >
< el-input v-model = "address" placeholder="请输入线索位置" clearable / >
< / div >
< / el-tab-pane >
< / el-tabs >
< template # footer >
@@ -80,12 +90,55 @@
< / Dialog >
< / template >
< script setup >
import { allSchemas , rules } from '../cluePool.data '
< script setup name = "DialogClue" >
import { useAppStore } from '@/store/modules/app '
import { getSimpleUserList as getUserOption } from '@/api/system/user'
import { getPlaceList } from '@/api/school/place'
import * as ClueApi from '@/api/clue'
import { formatDate } from '@/utils/formatTime'
import AMapLoader from '@amap/amap-jsapi-loader'
import ImgPostion from '@/assets/imgs/flag/flag_red.png'
import Img Flagfrom '@/assets/imgs/flag/position_blue .png'
import FlagRed from '@/assets/imgs/flag/flag_red .png'
import FlagYellow from '@/assets/imgs/flag/flag_yellow.png'
import FlagPurple from '@/assets/imgs/flag/flag_purple.png'
import FlagGreen from '@/assets/imgs/flag/flag_green.png'
import FlagBlue from '@/assets/imgs/flag/flag_blue.png'
import FlagBlack from '@/assets/imgs/flag/flag_black.png'
const message = useMessage ( ) // 消息弹窗
const { t } = useI18n ( ) // 国际化
const appStore = useAppStore ( )
const props = defineProps ( {
schema : {
type : Array
}
} )
const formSchema = computed ( ( ) => {
return [
... props . schema ,
{
component : 'Input' ,
label : '诉求' ,
field : 'requirement' ,
componentProps : {
type : 'textarea'
} ,
colProps : {
span : 24
}
} ,
{
component : 'Editor' ,
label : '备注' ,
field : 'remark' ,
colProps : {
span : 24
}
}
]
} )
const dialogVisible = ref ( false ) // 弹窗的是否展示
const dialogTitle = ref ( '' ) // 弹窗的标题
@@ -93,47 +146,106 @@ const formLoading = ref(false) // 表单的加载中： ）
const formType = ref ( '' ) // 表单的类型： ；
const formRef = ref ( ) // 表单 Ref
const rules = {
name : { required : true , message : '线索名称不可为空' , trigger : 'blur' } ,
phone : { required : true , message : '联系方式不可为空' , trigger : 'blur' } ,
source : { required : true , message : '线索来源不可为空' , trigger : 'change' } ,
intentionState : { required : true , message : '意向状态不可为空' , trigger : 'change' }
}
const tabName = ref ( 'info' )
const followList = ref ( [ ] )
const userOptions = ref ( [ ] )
const areaValue = ref ( '新天地国际 ' )
const areaValue = ref ( '' )
const areaList = ref ( [ ] )
const address = ref ( '' )
const defaultLatLng = ref ( {
lat : 31.86119 ,
lng : 117.283042
} )
const info = ref ( { } )
const open = async ( type , info ) => {
const open = async ( type , id ) => {
dialogVisible . value = true
dialogTitle . value = type == 'create' ? '新增线索' : '修改线索'
formType . value = type
// 修改时，设置数据
if ( info ) {
if ( id ) {
formLoading . value = true
try {
const data = { ... info }
const data = await ClueApi . getClue ( id )
info . value = { ... data , ... data . diyParams }
nextTick ( ( ) => {
formRef . value . setValues ( data )
followList . value = data . followUser
address . value = data . address || ''
formRef . value . setValues ( info . value )
} )
} finally {
formLoading . value = false
}
}
if ( ! dialogMap . value ) {
if ( appStore . getAppInfo ? . instanceType == 1 && ! dialogMap . value ) {
nextTick ( ( ) => {
initMap ( )
remoteMethod ( '新天地国际' )
getSchoolPlace ( )
initMap ( info . value )
remoteMethod ( address . value )
} )
}
}
defineExpose ( { open } ) // 提供 open 方法，用于打开弹窗
function handleSave ( ) {
console . log ( '保存' )
const placeList = ref ( [ ] )
function getSchoolPlace ( ) {
getPlaceList ( ) . then ( ( data ) => {
placeList . value = data . placeList
} )
}
async function handleSave ( ) {
// 校验表单
if ( ! formRef . value ) return
const valid = await formRef . value . getElFormRef ( ) . validate ( )
if ( ! valid ) return
if ( followList . value && followList . value . length && followList . value . some ( ( it ) => ! it . userId ) ) {
message . info ( '请将跟进人填写完整！' )
return
}
// 提交请求
formLoading . value = true
try {
let params = { ... formRef . value . formModel , address : address . value }
params . lat = defaultLatLng . value . lat
params . lng = defaultLatLng . value . lng
params . followUsers = [ ... followList . value ]
params . diyParams = { }
debugger
for ( const key in info . value . diyParams ) {
if ( Object . hasOwnProperty . call ( info . value . diyParams , key ) ) {
params . diyParams [ key ] = params . key
}
}
if ( formType . value === 'create' ) {
await ClueApi . createClue ( params )
message . success ( t ( 'common.createSuccess' ) )
} else {
await ClueApi . updateClue ( params )
message . success ( t ( 'common.updateSuccess' ) )
}
dialogVisible . value = false
// 发送操作成功的事件
emit ( 'success' )
} finally {
formLoading . value = false
}
}
function handleAppendFollow ( ) {
followList . value . push ( {
followU ser: undefined ,
nextF ollowTime: formatDate ( new Date ( ) )
u serId : undefined ,
f ollowTime: formatDate ( new Date ( ) ) ,
editable : true
} )
}
function handleRemove ( index ) {
@@ -145,28 +257,55 @@ const dialogMap = ref(null)
const aMap = ref ( null )
let AutoComplete = ref ( null )
let geoCoder = ref ( null )
function initMap ( ) {
function initMap ( data ) {
AMapLoader . load ( {
key : '2ffb0e2ea90b1df0b8be48ed66e18fc8' , //设置您的key
version : '2.0' ,
plugins : [ 'AMap.Geocoder' , 'AMap.AutoComplete' ]
} ) . then ( ( AMap ) => {
aMap . value = AMap
if ( data . lng || data . lat ) {
defaultLatLng . value = {
lng : data . lng ,
lat : data . lat
}
addmark ( data . lng , data . lat , AMap )
}
dialogMap . value = new AMap . Map ( 'dialogMap' , {
zoom : 12 ,
zooms : [ 2 , 22 ] ,
center : [ 117.283042 , 31.86119 ]
center : [ defaultLatLng . value . lng , defaultLatLng . value . lat ]
} )
AutoComplete . value = new AMap . AutoComplete ( {
city : '全国'
} )
geoCoder . value = new AMap . Geocoder ( )
dialogMap . value . on ( 'click' , ( e ) => {
defaultLatLng . value = {
lng : e . lnglat . getLng ( ) ,
lat : e . lnglat . getLat ( )
}
addmark ( e . lnglat . getLng ( ) , e . lnglat . getLat ( ) , AMap )
regeoCode ( e . lnglat . getLng ( ) , e . lnglat . getLat ( ) )
} )
} )
}
function regeoCode ( lng , lat ) {
try {
geoCoder . value . getAddress ( [ lng , lat ] , ( status , result ) => {
if ( status === 'complete' && result . regeocode ) {
address . value = result . regeocode . formattedAddress
} else {
message . error ( '根据经纬度查询地址失败' )
}
} )
} catch ( error ) {
console . log ( error )
}
}
let marker = ref ( null )
function addmark ( lat , lng , AMap ) {
marker . value && removeMarker ( )
@@ -186,29 +325,30 @@ const showSchool = ref(false)
const schoolMarkers = ref ( [ ] )
function handleShowSchool ( ) {
if ( showSchool . value ) {
let marker1 = new aMap . value . Marker ( {
const flagMap = {
red : FlagRed ,
yellow : FlagYellow ,
purple : FlagPurple ,
green : FlagGreen ,
blue : FlagBlue ,
black : FlagBlack
}
schoolMarkers . value = [ ]
for ( let i = 0 ; i < placeList . value . length ; i ++ ) {
const place = placeList . value [ i ]
const marker = new aMap . value . Marker ( {
map : dialogMap . value ,
position : [ 117.258001 , 31.895216 ] ,
position : [ place . lng , place . lat ] ,
label : {
content : '慧安驾校桃花社区训练基地' ,
content : place . name ,
direction : 'left'
} ,
icon : ImgFlag ,
// extData: element,
icon : flagMap [ place . flagColor || 'red' ] ,
: place ,
clickable : true
} )
let marker2 = new aMap . value . M arker( {
map : dialogMap . value ,
position : [ 117.286731 , 31.902396 ] ,
label : {
content : '（ ） （ ） ,
direction : 'left'
} ,
icon : ImgFlag ,
// extData: element,
clickable : true
} )
schoolMarkers . value = [ marker1 , marker2 ]
schoolMarkers . value . push ( m arker)
}
} else {
dialogMap . value . remove ( schoolMarkers . value )
}
@@ -231,8 +371,15 @@ function currentSelect(val) {
if ( area ) {
addmark ( area . location ? . lng , area . location ? . lat , aMap . value )
dialogMap . value . setCenter ( [ area . location ? . lng , area . location ? . lat ] , '' , 500 )
regeoCode ( area . location ? . lng , area . location ? . lat )
}
}
onMounted ( ( ) => {
getUserOption ( ) . then ( ( data ) => {
userOptions . value = data
} )
} )
< / script >
< style scoped >
qsh