qiushanhe/dm-manage-web
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
zcxee
2023-04-11 18:36:41 +08:00
parent 1fd8a381ea
commit f6225b2afb
51 changed files with 5066 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/zs/clue/ClueForm/components/ClassTypeDialog.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<el-dialog width="40%" :title="title" :visible.sync="visible" append-to-body @close="visible = false">
<div v-if="classTypeList == undefined || classTypeList.length == 0">无班型数据</div>
<el-table v-else :data="classTypeList" style="height: 300px; overflow-y: auto">
<el-table-column label="班型" width="140">
<template slot-scope="scope">
<span>{{ scope.row.licenseType }}-{{ scope.row.typeName }}</span>
</template>
</el-table-column>
<el-table-column property="currentPrice" label="报价" width="120" />
<el-table-column property="minPrice" label="底价" width="120" />
<el-table-column property="description" label="描述" />
</el-table>
</el-dialog>
</template>
<script>
import { getClassTypeTableList } from '@/api/sch/classType'
export default {
data() {
return {
classTypeList: [],
visible: false,
title: ''
}
},
methods: {
async init(info) {
this.title = info.schoolName + '-' + info.name + '-班型报价';
const resp = await getClassTypeTableList({
schoolId: info.schoolId,
placeId: info.placeId,
status: '0'
});
if (resp.code == 200) {
this.classTypeList = resp.rows
}
this.visible = true
},
},
}
</script>

36
src/views/zs/clue/ClueForm/components/FollowRecord.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div>
<el-timeline v-if="folowInfos != undefined && folowInfos.length > 0" style="max-height: 200px; overflow-y: auto">
<el-timeline-item v-for="item in folowInfos" :key="item.record" :timestamp="item.operateTime" placement="top" style="padding: 5px !important">
<el-card>
<div style="font-weight: bold">用户 {{ item.operateUserName }}</div>
<div style="padding-left: 10px" v-html="item.centent" />
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
import { getFollowRecord } from '@/api/zs/clue';
export default {
props: {
clueId: {
type: Number,
default: undefined
}
},
data() {
return {
folowInfos: []
}
},
created() {
// 加载跟进记录
getFollowRecord({ clueId: this.clueId }).then((resp) => {
this.folowInfos = resp.data;
});
}
}
</script>

170
src/views/zs/clue/ClueForm/components/MapDialog.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<el-dialog width="800px" title="地图编辑" :visible.sync="visible" append-to-body @close="closeDialog">
<div id="dialogMap" class="dialog-map" style="height: 400px; width: 100%;" />
<el-input id="search" v-model="searchBody" class="search-body" placeholder="请输入..." />
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="handleMapSave">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import AMap from 'AMap';
export default {
data() {
return {
dialogMap: null,
visible: false,
placeSearch: null,
currentPoint: undefined,
marker: null,
searchBody: undefined
}
},
beforeDestroy() {
console.log("mapdialog----beforeDestroy")
this.marker = null;
this.placeSearch = null;
this.dialogMap && this.dialogMap.destroy();
this.dialogMap = null;
},
mounted() {
console.log("mounted")
// this.initData()
},
created() {
console.log("created")
},
methods: {
initData(point = undefined) {
console.log(point)
this.visible = true
this.$nextTick(() => {
this.resetData();
if (point) {
this.currentPoint = point;
}
this.initMap()
});
},
resetData() {
this.currentPoint = undefined;
this.dialogMap && this.marker && this.dialogMap.remove(this.marker);
this.marker = null;
this.placeSearch = null;
this.searchBody = null
},
initMap() {
console.log("初始化地图")
if (!this.dialogMap) {
this.dialogMap = new AMap.Map('dialogMap', {
zoom: 12,
resizeEnable: true,
center: [117.283042, 31.86119]
});
this.dialogMap.on('click', ev => {
this.currentPoint.lat = ev.lnglat.lat;
this.currentPoint.lng = ev.lnglat.lng;
this.regeoCode();
this.marker && this.dialogMap.remove(this.marker);
this.marker = new AMap.Marker({
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.add(this.marker);
});
this.dialogMap.addControl(new AMap.Scale());
const auto = new AMap.Autocomplete({
input: 'search', // 前端搜索框
})
this.placeSearch = new AMap.PlaceSearch({
map: this.dialogMap,
pageSize: 10, // 单页显示结果条数
pageIndex: 1, // 页码
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
})
AMap.event.addListener(auto, 'select', this.select)
this.geocoder = new AMap.Geocoder();
}
this.initMapCenter();
},
// 初始化编辑地图的中心点
initMapCenter() {
if (this.currentPoint && this.currentPoint.lat && this.currentPoint.lng) {
this.searchBody = this.currentPoint.address;
this.marker = new AMap.Marker({
map: this.dialogMap,
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.setCenter([this.currentPoint.lng, this.currentPoint.lat]);
this.dialogMap.setZoom(14);
}
},
// 选择查询结果
select(e) {
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
if (result && result.info && result.info === 'OK' && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
this.currentPoint.lat = result.poiList.pois[0].location.lat;
this.currentPoint.lng = result.poiList.pois[0].location.lng;
this.currentPoint.address = e.poi.name;
this.dialogMap.clearMap();
this.marker && this.dialogMap.remove(this.marker);
this.marker = new AMap.Marker({
map: this.dialogMap,
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.setZoom(14);
this.dialogMap.setCenter([this.currentPoint.lng, this.currentPoint.lat]);
}
});
},
//定位地址
regeoCode() {
this.geocoder.getAddress(
[this.currentPoint.lng, this.currentPoint.lat],
(status, result) => {
if (status === 'complete' && result.regeocode) {
this.currentPoint.address = result.regeocode.formattedAddress;
this.searchBody = result.regeocode.formattedAddress;
}
}
);
},
handleMapSave() {
if (this.currentPoint.lat && this.currentPoint.lng) {
//通知父组件
this.$emit("handleMapDialogPoint", this.currentPoint);
this.visible = false;
this.$emit('update:mapDialogVisible', false);
} else {
this.$message.error('请在地图上选择位置后保存！');
}
},
closeDialog() {
this.$emit('update:mapDialogVisible', false);
}
},
}
</script>
<style scoped>
.dialog-map {
width: 100%;
height: 400px;
}
.search-body {
position: absolute;
top: 90px;
left: 25px;
width: 350px;
}
</style>

232
src/views/zs/clue/ClueForm/components/PlaceMap.vue Normal file
View File

@@ -0,0 +1,232 @@
<template >
<div>
<el-form>
<el-form-item label="显示场地">
<el-radio-group v-model="mapPlaceType" @change="createMarkersInMap">
<el-radio :label="0">自营场地</el-radio>
<el-radio :label="1">全部场地</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div id="map" style="height: 600px; width: 100%;"></div>
<el-collapse class="box-card">
<el-collapse-item title="附近驾校">
<div style="padding: 10px">
<div slot="header">附近驾校</div>
<div v-if="nearbySchoolSearching">正在搜索中...</div>
<template v-else>
<div v-for="p in nearbySchoolList" :key="p.index">
<div class="hover-pointer" style="font-size: 14px; color: blue" @click="getClassType(p)">
<i v-if="p.recommend" class="el-icon-star-off" />
驾校: {{ p.deptName }}-{{ p.name }}
</div>
<div class="mt5">地址：{{ p.address }}</div>
<div class="mt5">
直线距离: {{ p.distance }} 公里;
<span class="ml0">步行距离：{{ p.walkdistance }}</span>
</div>
<el-divider style="margin: 6px 0 !important;" />
</div>
</template>
</div>
</el-collapse-item>
</el-collapse>
<ClassTypeDialog v-if="classVisible" ref="classTypeDialog" :dialog-visible="classVisible" />
</div>
</template>
<script>
import AMap from 'AMap';
import ClassTypeDialog from './ClassTypeDialog.vue';
export default {
name: 'PlaceMap',
components: {
ClassTypeDialog
},
data() {
return {
mapPlaceType: 0,
nearbySchoolSearching: true,
nearbySchoolList: [],
amap: null,
locationMarker: null,
geocoder: null,
placeList: [],
classVisible: false,
}
},
mounted() {
this.initMap();
},
created() {
},
beforeDestroy() {
console.log("placemap----beforeDestroy")
this.geocoder = null;
this.locationMarker = null;
this.amap && this.amap.clearMap();
this.amap && this.amap.destroy();
this.amap = null;
},
methods: {
// 初始化地图
initMap() {
if (!this.amap) {
this.amap = new AMap.Map('map', {
zoom: 12,
center: [117.226095, 31.814372],
resizeEnable: true
});
// 地图坐标点定位
// this.getAllPlaces();
// this.createMarkersInMap()
}
},
setMapCenter(info) {
if (info.lat && info.lng) {
this.locationMarker && this.amap.remove(this.locationMarker);
this.locationMarker = new AMap.Marker({
position: [info.lng, info.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.amap.add(this.locationMarker);
this.amap.setCenter([info.lng, info.lat]);
this.amap.setZoom(14);
this.getNearbySchool(info);
}
},
//获取附近驾校
getNearbySchool(info) {
if (info.lng && info.lat) {
this.nearbySchoolList = [];
this.nearbySchoolSearching = true;
// 推荐的场地
let places1 = [];
// 普通的场地
let places2 = [];
const p2 = [info.lng, info.lat];
for (let i = 0; i < this.placeList.length; i++) {
const element = this.placeList[i];
const p1 = [element.lng, element.lat];
// 计算直线距离
element.distance = (window.AMap.GeometryUtil.distance(p1, p2) / 1000).toFixed(2);
element.recommend ? places1.push(element) : places2.push(element);
}
// 按直线距离排序
// 排序
if (places1.length > 1) {
places1 = places1.sort((a, b) => a.distance - b.distance);
}
// 排序
if (places2.length > 1) {
places2 = places2.sort((a, b) => a.distance - b.distance);
}
// 取普通场地和推荐场地，组合, 取四个
this.nearbySchoolList = [];
for (let i = 0; i < 4; i++) {
places1.length > i && this.nearbySchoolList.push(places1[i]);
places2.length > i && this.nearbySchoolList.push(places2[i]);
if (this.nearbySchoolList.length === 4) {
break;
}
}
// 计算步行距离
this.nearbySchoolList.map(async (item) => {
const p1 = [item.lng, item.lat];
const resp = await this.getWalkingDistance(p1, p2);
item.walkdistance = resp;
this.$forceUpdate();
});
this.nearbySchoolSearching = false;
}
},
// 获取两点之间的步行距离
async getWalkingDistance(start, end) {
return new Promise((resolve, reject) => {
window.AMap.plugin('AMap.Walking', () => {
const walking = new AMap.Walking();
let num = 0;
walking.search(start, end, (status, result) => {
if (status === 'complete') {
result.routes.forEach((item) => {
num += item.distance;
});
resolve(
num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`
);
} else {
resolve('步行数据无法确定');
}
});
});
});
},
handleMarkers(places) {
this.placeList = places;
this.createMarkersInMap();
},
//创建地图点标记
createMarkersInMap() {
let arr = this.placeList;
if (this.mapPlaceType === 0) {
arr = arr.filter((item) => item.recommend);
}
this.amap && this.amap.clearMap();
this.locationMarker && this.amap.add(this.locationMarker);
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
const tmpMarker = new AMap.Marker({
map: this.amap,
position: [element.lng, element.lat],
label: {
content: element.name,
direction: 'left'
},
icon: require(`@/assets/images/place/position_${element.flagColor}.png`),
extData: element,
clickable: true
});
tmpMarker.on('click', (ev) => this.getClassType(ev.target.getExtData()));
}
},
// 查询该场地下的班型报价
getClassType(item) {
console.log(item)
// this.classType = [];
// getClassTypes({
// schoolId: item.deptId,
// placeId: item.placeId,
// status: '0'
// }).then((resp) => {
// if (resp && resp.code === 200 && resp.data) {
// this.classType = resp.data;
// this.innerVisible = true;
// }
// });
this.classVisible = true;
this.$nextTick(() => {
this.$refs.classTypeDialog.init(item);
});
},
},
}
</script>
<style scoped>
.box-card {
position: absolute;
right: 30px;
top: 45px;
width: 400px;
}
::v-deep .el-divider--horizontal {
margin: 6px 0 !important;
}
</style>

328
src/views/zs/clue/ClueForm/index.vue Normal file
View File

@@ -0,0 +1,328 @@
<template>
<div class="app-container">
<!-- <el-card class="box-card"> -->
<div slot="header" class="clearfix">
<div style="display: inline-block;">
<div v-if="clueForm.consultCount && clueForm.consultCount < 2">
学员信息
<span v-if="clueForm.name">-【{{ clueForm.name }}】</span>
</div>
<el-popover v-else placement="top-start" trigger="hover">
<el-table :data="consultRecord">
<el-table-column width="120" prop="consultTime" label="咨询日期" />
<el-table-column width="100" prop="consultUserName" label="咨询人" />
</el-table>
<el-badge slot="reference" :value="clueForm.consultCount">
<span>
学员信息
<span v-if="clueForm.name">-【{{ clueForm.name }}】</span>
</span>
</el-badge>
</el-popover>
</div>
<div style="float: right;">
<div style="display: inline-block;margin-right: 5px;">
<template v-if="saveNextShow">
<el-checkbox v-model="saveNext" />
<span class="ml5">保存后继续创建下一条</span>
</template>
</div>
<!-- :disabled="!canSubmit" -->
<el-button class="footer_button" type="primary" @click="clueSubmit">确 定</el-button>
<el-button class="footer_button" @click="toBackClue">取 消</el-button>
</div>
</div>
<el-divider />
<div>
<el-form ref="clueForm" :model="clueForm" :rules="rules" label-width="110px">
<el-row :gutter="20">
<el-col :span="8">
<el-col :span="24">
<el-form-item label="创建时间" prop="createTime">
<el-date-picker style="width: 100%;" v-model="clueForm.createTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" :disabled="admin!='true'" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="线索来源" prop="source">
<el-select style="width: 100%;" v-model="clueForm.source" placeholder="请选择" clearable>
<el-option v-for="dict in sourceOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="姓名" prop="name">
<el-input v-model="clueForm.name" placeholder="请输入姓名" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="联系方式" prop="phone">
<el-input v-model="clueForm.phone" placeholder="请输入联系方式" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="跟进人员" prop="followUser">
<el-select style="width: 100%;" v-model="clueForm.followUser" multiple clearable :disabled="admin != 'true' && clueForm.clueId != undefined">
<el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="意向状态" prop="intentionState">
<el-select style="width: 100%;" v-model="clueForm.intentionState" placeholder="请选择" clearable>
<el-option v-for="dict in intentionOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">
<i class="el-icon-star-on" :style="dict.cssClass" />
<span style="float: right; color: #8492a6; font-size: 13px">
{{ dict.dictValue }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="下次跟进时间" prop="followTime">
<el-date-picker style="width: 100%;" v-model="clueForm.followTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否近期看场地" prop="recentLook">
<el-radio v-model="clueForm.recentLook" label="是">是</el-radio>
<el-radio v-model="clueForm.recentLook" label="否">否</el-radio>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="clueMemo">
<el-input v-model="clueForm.clueMemo" type="textarea" :rows="5" maxlength="1000" />
</el-form-item>
</el-col>
<!-- 跟进记录 -->
<el-col :span="24" style="margin-top: 20px;">
<el-form-item label="跟进记录" prop="clueMemo" label-position="top">
<FollowRecord v-if="clueId" :clueId="clueId" />
</el-form-item>
</el-col>
</el-col>
<el-col :span="16">
<div>
<el-col :span="24" class="mb20 plr20" style="position: relative">
<PlaceMap ref="placeMap" :placeList="placeList" />
<div class="address">
<el-form-item label="位置" prop="address" label-width="80px">
<el-input v-model="clueForm.address" placeholder="请输入位置" disabled>
<el-button slot="append" class="p10" icon="el-icon-location-information" @click="handleMapDialog" />
<el-button slot="append" class="p10" icon="el-icon-delete-solid" @click="handleRemovePosition" />
</el-input>
</el-form-item>
</div>
</el-col>
</div>
</el-col>
</el-row>
</el-form>
</div>
<!-- </el-card> -->
<MapDialog v-if="mapDialogVisible" ref="mapDialog" :dialog-visible="mapDialogVisible" @handleMapDialogPoint="handleMapDialogPoint" />
</div>
</template>
<script>
import { getClueInfo, getConsultRecord, addClue, updateClue, } from '@/api/zs/clue'
import empApi from '@/api/system/employee'
import { getAllPlaces } from '@/api/sch/place'
import PlaceMap from './components/PlaceMap.vue';
import FollowRecord from './components/FollowRecord.vue';
import MapDialog from './components/MapDialog.vue';
export default {
name: 'ClueForm',
components: {
PlaceMap, FollowRecord, MapDialog
},
data() {
return {
admin: localStorage.getItem('admin'),
userId: localStorage.getItem('userId'),
clueId: undefined,
clueForm: {},
rules: {
name: { required: true, message: '姓名不为空', trigger: 'blur' },
phone: { required: true, message: '联系方式不为空', trigger: 'blur' },
createTime: { required: true, message: '创建时间不为空', trigger: 'blur,change' },
consultTime: { required: true, message: '咨询时间不为空', trigger: 'blur,change' },
source: { required: true, message: '线索来源不为空', trigger: 'blur,change' },
address: { required: true, message: '位置不为空', trigger: 'blur' },
intentionState: { required: true, message: '意向状态不为空', trigger: 'blur,change' }
},
userOptions: [],//跟进人员
sourceOptions: [],//线索来源
intentionOptions: [],//意向状态
placeList: [],//场地信息
mapDialogVisible: false,
consultRecord: [],
canSubmit: true,
saveNextShow: true,
saveNext: false
};
},
created() {
//获取clueId
this.clueId = Number(this.$route.params.clueId)
this.getAllPlaces()
this.getClueInfo(this.clueId);
// 线索来源
this.getDicts('dm_source').then((response) => {
this.sourceOptions = response.data;
});
// 意向状态
this.getDicts('dm_intention_state').then((response) => {
this.intentionOptions = response.data;
});
this.getEmployee();
},
methods: {
async getClueInfo(clueId) {
this.resetForm();
if (clueId === 0)
return
this.saveNextShow = false
this.saveNext = false
const resp = await getClueInfo(clueId);
if (resp.code == 200) {
this.clueForm = resp.data
this.handleMapCenter(this.clueForm);
this.getConsultRecord(this.clueForm.clueId);
}
},
resetForm() {
this.clueForm = {
clueId: undefined,
createTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
consultTime: undefined,
source: undefined,
name: undefined,
phone: undefined,
address: undefined,
intentionState: undefined,
followInfo: undefined,
followTime: undefined,
followUser: undefined,
signupInfo: undefined,
requirement: undefined,
licenseType: undefined,
lng: undefined,
lat: undefined
}
},
// 查询咨询记录
getConsultRecord(clueId) {
getConsultRecord({ clueId }).then((resp) => {
if (resp && resp.code === 200 && resp.data) {
this.consultRecord = resp.data
}
})
},
//地图编辑弹框
handleMapDialog() {
this.mapDialogVisible = true;
this.$nextTick(() => {
this.$refs.mapDialog.initData(this.clueForm);
});
},
//处理地图弹框返回的点
handleMapDialogPoint(point) {
console.log("handleMapDialogPoint")
console.log(point)
if (point) {
this.handleMapCenter(point);
}
},
//删除当前地址
handleRemovePosition() {
this.clueForm.lng = undefined;
this.clueForm.lat = undefined;
this.clueForm.address = undefined;
},
//定位地图的中心点
handleMapCenter(info) {
this.$nextTick(() => {
this.$refs.placeMap.setMapCenter(info);
});
},
// 查询不能接收线索的员工
getEmployee() {
empApi.getEmployee().then((resp) => {
if (resp.code === 200) {
this.userOptions = resp.data;
// this.userOptions = this.userOptions.filter((item) => {
// return item.accept;
// });
}
});
},
// 查询场地信息
async getAllPlaces() {
const resp = await getAllPlaces();
if (resp.code == 200) {
this.placeList = resp.data.filter((item) => item.showInMap);
this.$nextTick(() => {
this.$refs.placeMap.handleMarkers(this.placeList);
});
}
},
//表单提交
clueSubmit() {
this.$refs.clueForm.validate(async (valid) => {
if (valid) {
this.canSubmit = false
let resp
if (this.clueForm.clueId) {
resp = await updateClue(this.clueForm)
this.canSubmit = true
if (resp.code === 200) {
this.$message.success('修改成功')
this.toBackClue();
}
} else {
resp = await addClue(this.clueForm)
this.canSubmit = false
if (resp.code === 200) {
this.$message.success('新增成功')
if (this.saveNext) {
this.resetForm()
} else {
this.toBackClue();
}
}
}
}
})
},
toBackClue() {
const obj = { path: "/zs/clue" };
this.$tab.closeOpenPage(obj);
}
}
};
</script>
<style lang="scss" scoped>
.address {
position: absolute;
left: 30px;
top: 40px;
width: 400px;
background: #fff;
}
::v-deep .el-divider--horizontal {
margin: 10px 0 !important;
}
</style>

104
src/views/zs/clue/columns.js Normal file
View File

@@ -0,0 +1,104 @@
export const defaultColumns = [{
key: 0,
prop: 'createTime',
label: '创建时间',
width: 140,
visible: true,
overflow: false
},
{
key: 1,
prop: 'source',
label: '线索来源',
width: 140,
visible: true,
overflow: false
},
{
key: 2,
prop: 'name',
label: '姓名',
width: 140,
visible: true,
overflow: false
},
{
key: 3,
prop: 'phone',
label: '联系方式',
width: 140,
visible: true,
overflow: false
},
{
key: 4,
prop: 'address',
label: '位置',
width: 140,
visible: true,
overflow: false
},
{
key: 5,
prop: 'requirement',
label: '学员诉求',
visible: true,
overflow: false
},
{
key: 6,
prop: 'licenseType',
label: '咨询车型',
width: 140,
visible: true,
overflow: false
},
{
key: 7,
prop: 'followTime',
label: '下次跟进时间',
width: 120,
visible: true,
overflow: false
},
{
key: 8,
prop: 'firstFollowUserName',
label: '首次跟进人员',
width: 120,
visible: true,
overflow: false
},
{
key: 9,
prop: 'followUserName',
label: '跟进人员',
width: 140,
visible: true,
overflow: false
},
{
key: 10,
prop: 'recentLook',
label: '是否近期看场地',
width: 140,
visible: true,
overflow: false
},
{
key: 11,
prop: 'offlineReceiverName',
label: '线下接待人员',
width: 140,
visible: true,
overflow: false
},
{
key: 12,
prop: 'clueMemo',
label: '备注',
width: 140,
visible: true,
overflow: true
}
];

90
src/views/zs/clue/components/BatchUpdateDialog.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<el-dialog title="批量修改" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="600px" @close="closeDialog">
<el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
<el-row>
<el-col :span="24">
<el-form-item label="跟进人员" prop="followUsers">
<el-select v-model="dialogForm.followUsers" multiple placeholder="请选择" clearable>
<el-option v-for="dict in options.userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button plain @click="(visible=false)">取消</el-button>
<el-button v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import { batchUpdate } from '@/api/zs/clue'; export default {
name: 'BatchUpdateDialog',
props: {
options: {
type: Object,
default: () => ({
userOptions: []
})
}
},
data() {
return {
visible: false,
canSubmit: true,
dialogForm: {},
rules: {
followUsers: {
required: true,
message: '跟进人员不能为空',
trigger: 'blur'
}
}
};
},
methods: {
init(info = undefined) {
// debugger
this.visible = true;
this.$nextTick(() => {
this.resetDialogForm();
this.$refs['dialogForm'].resetFields();
if (info) {
this.dialogForm = this.deepClone(info);
}
});
},
resetDialogForm() {
this.dialogForm = {
followUsers: [],
clueIds: this.clueIds
};
},
closeDialog() {
this.$emit('update:dialog.batchUpdateVisible', false);
},
// 表单提交
dialogFormSubmit() {
this.$refs.dialogForm.validate((valid) => {
if (valid) {
this.canSubmit = false;
// 校验完成，调接口
batchUpdate(this.dialogForm)
.then((resp) => {
this.canSubmit = true;
if (resp.code == 200) {
this.$message.success('修改成功');
this.$emit('refreshDataList');
this.visible = false;
}
})
.catch(() => {
this.canSubmit = true;
});
}
});
}
}
};
</script>

635
src/views/zs/clue/components/ClueFormDialog.vue Normal file
View File

@@ -0,0 +1,635 @@
<template>
<div style="margin-bottom: 50px">
<el-dialog title="学员信息导入" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="400px" @close="closeDialog">
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="创建时间" prop="createTime">
<el-date-picker v-model="form.createTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" :disabled="admin != 'true'" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="线索来源" prop="source">
<el-select v-model="form.source" placeholder="请选择" clearable>
<el-option v-for="dict in options.sourceOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="跟进人员" prop="followUser">
<el-select v-model="form.followUser" multiple clearable :disabled="admin != 'true' && form.clueId != undefined">
<el-option v-for="dict in options.userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系方式" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="意向状态" prop="intentionState">
<el-select v-model="form.intentionState" placeholder="请选择" clearable>
<el-option v-for="dict in options.intentionOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">
<i class="el-icon-star-on" :style="dict.cssClass" />
<span style="float: right; color: #8492a6; font-size: 13px">
{{ dict.dictValue }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="下次跟进时间" prop="followTime">
<el-date-picker v-model="form.followTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否近期看场地" prop="recentLook">
<el-radio v-model="form.recentLook" label="是">是</el-radio>
<el-radio v-model="form.recentLook" label="否">否</el-radio>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="显示场地">
<el-radio-group v-model="mapPlaceType" @change="createMarkersInMap">
<el-radio :label="0">自营场地</el-radio>
<el-radio :label="1">全部场地</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="clueMemo">
<el-input v-model="form.clueMemo" type="textarea" :rows="2" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20 plr20" style="position: relative">
<div id="map" class="amap-cavans" />
<el-collapse class="box-card">
<el-collapse-item title="附近驾校">
<div style="padding: 10px">
<div slot="header">附近驾校</div>
<div v-if="nearbySchoolSearching">正在搜索中...</div>
<template v-else>
<div v-for="p in nearbySchoolList" :key="p.index">
<div class="hover-pointer" style="font-size: 14px; color: blue" @click="getClassType(p)">
<i v-if="p.recommend" class="el-icon-star-off" />
驾校: {{ p.deptName }}-{{ p.name }}
</div>
<div class="mt5">地址：{{ p.address }}</div>
<div class="mt5">
直线距离: {{ p.distance }} 公里;
<span class="ml0">步行距离：{{ p.walkdistance }}</span>
</div>
<el-divider />
</div>
</template>
</div>
</el-collapse-item>
</el-collapse>
<div class="address">
<el-form-item label="位置" prop="address" label-width="80px">
<el-input v-model="form.address" placeholder="请输入位置" disabled>
<el-button slot="append" class="p10" icon="el-icon-location-information" @click="handleMapEdit" />
<el-button slot="append" class="p10" icon="el-icon-delete-solid" @click="handleRemovePosition" />
</el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px">
<el-col :span="24">
<el-form-item label="跟进情况">
<el-timeline v-if="folowInfos != undefined && folowInfos.length > 0" style="max-height: 200px; overflow-y: auto">
<el-timeline-item v-for="item in folowInfos" :key="item.record" :timestamp="item.operateTime" placement="top" style="padding: 5px !important">
<el-card>
<div style="font-weight: bold">用户 {{ item.operateUserName }}</div>
<div style="padding-left: 10px" v-html="item.centent" />
</el-card>
</el-timeline-item>
</el-timeline>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog width="800px" title="地图编辑" :visible.sync="mapDialogShow" append-to-body @opened="initDialogMap()">
<div id="dialogMap" class="dialog-map" />
<!-- <el-input id="search" v-model="searchBody" class="search-body" placeholder="请输入..." /> -->
<el-autocomplete v-model="searchBody" popper-class="my-autocomplete" class="search-body" placeholder="请输入..." :trigger-on-focus="false" :fetch-suggestions="querySearch" @select="handleSelect">
<template slot-scope="{ item }">
<span class="name">{{ item.name }}</span>
<span class="addr">{{ item.district }}</span>
</template>
</el-autocomplete>
<span slot="footer" class="dialog-footer">
<el-button @click="mapDialogShow = false">取 消</el-button>
<el-button type="primary" @click="handleMapSave">确 定</el-button>
</span>
</el-dialog>
<el-dialog width="40%" :title="innerTitle" :visible.sync="innerVisible" append-to-body>
<div v-if="classType == undefined || classType.length == 0">无班型数据</div>
<el-table v-else :data="classType" style="height: 300px; overflow-y: auto">
<el-table-column label="班型">
<template slot-scope="scope">
<span>{{ scope.row.licenseType }}-{{ scope.row.dictLabel }}</span>
</template>
</el-table-column>
<el-table-column property="currentPrice" label="报价" />
<el-table-column property="minPrice" label="底价" />
<el-table-column property="description" label="描述" />
</el-table>
</el-dialog>
</div>
</template>
<!-- eslint-disable no-undef -->
<script>
import { getFollowRecord } from '@/api/zs/clue';
import { getClassTypes } from '@/api/tool/common';
import { inputtips, regeo, walking } from '@/api/tool/map';
// import AMap from 'AMap';
export default {
model: {
prop: 'info',
event: 'update'
},
props: {
info: {
type: Object,
default: () => { }
},
options: {
type: Object,
default: () => ({
userOptions: [],
sourceOptions: [],
intentionOptions: [],
placeInfo: []
})
}
},
data() {
return {
admin: localStorage.getItem('admin'),
userId: localStorage.getItem('userId'),
form: JSON.parse(JSON.stringify(this.info)),
mapDialogShow: false,
map: null,
locationMarker: null,
dialogMap: null, // 弹窗地图（打点用）
currentPoint: {}, // 地图弹窗经纬度信息
marker: null, // 地图打点
placeSearch: null,
geocoder: null,
searchBody: '',
nearbySchoolList: [],
folowInfos: [],
nearbySchoolSearching: false, // 搜索附近场地
rules: {
name: {
required: true,
message: '姓名不为空',
trigger: 'blur'
},
phone: {
required: true,
message: '联系方式不为空',
trigger: 'blur'
},
createTime: {
required: true,
message: '创建时间不为空',
trigger: 'blur,change'
},
consultTime: {
required: true,
message: '咨询时间不为空',
trigger: 'blur,change'
},
source: {
required: true,
message: '线索来源不为空',
trigger: 'blur,change'
},
address: {
required: true,
message: '位置不为空',
trigger: 'blur'
},
intentionState: {
required: true,
message: '意向状态不为空',
trigger: 'blur,change'
}
},
innerTitle: '',
classType: [],
innerVisible: false,
consultRecord: [],
mapPlaceType: 0 // 地图上展示的场地类型 0：自营 1 全部
};
},
watch: {
form: {
handler(val) {
this.$emit('update', val);
},
deep: true,
immediate: true
}
},
created() {
if (this.form.clueId) {
this.handleUpdate();
}
},
mounted() {
this.initMap();
},
beforeDestroy() {
this.geocoder = null;
this.locationMarker = null;
this.marker = null;
this.placeSearch = null;
this.map.clearMap();
this.map && this.map.destroy();
this.map = null;
this.dialogMap && this.dialogMap.destroy();
this.dialogMap = null;
},
methods: {
// 查询该场地下的班型报价
getClassType(item) {
this.classType = [];
this.innerTitle = item.deptName + '-' + item.name + '-班型报价';
getClassTypes({
schoolId: item.deptId,
placeId: item.placeId,
status: '0'
}).then((resp) => {
if (resp && resp.code === 200 && resp.data) {
this.classType = resp.data;
this.innerVisible = true;
}
});
},
// 编辑
handleUpdate() {
// 加载跟进记录
getFollowRecord({ clueId: this.form.clueId }).then((resp) => {
this.folowInfos = resp.data;
});
},
initMap() {
if (!this.map) {
this.map = new AMap.Map('map', {
zoom: 12,
center: [117.226095, 31.814372],
resizeEnable: true
});
}
// 地图坐标点定位
if (this.form.lat && this.form.lng) {
this.locationMarker = new AMap.Marker({
position: [this.form.lng, this.form.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.map.add(this.locationMarker);
this.map.setCenter([this.form.lng, this.form.lat]);
this.map.setZoom(14);
}
this.getNearbySchool();
this.createMarkersInMap();
},
// 生成markers
createMarkersInMap() {
let arr = this.options.placeInfo;
if (this.mapPlaceType === 0) {
arr = arr.filter((item) => item.recommend);
}
this.map && this.map.clearMap();
this.locationMarker && this.map.add(this.locationMarker);
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
const tmpMarker = new AMap.Marker({
map: this.map,
position: [element.lng, element.lat],
label: {
content: element.name,
direction: 'left'
},
icon: require(`@/assets/images/position_${element.flagColor}.png`),
extData: element,
clickable: true
});
tmpMarker.on('click', (ev) => this.getClassType(ev.target.getExtData()));
}
},
handleMapEdit() {
this.searchBody = '';
this.mapDialogShow = true;
if (this.form.lat && this.form.lng) {
this.currentPoint.lat = this.form.lat;
this.currentPoint.lng = this.form.lng;
}
this.dialogMap && this.dialogMap.clearMap();
},
handleRemovePosition() {
this.form.lng = undefined;
this.form.lat = undefined;
this.form.address = undefined;
},
initDialogMap() {
if (!this.dialogMap) {
this.dialogMap = new AMap.Map('dialogMap', {
zoom: 12,
resizeEnable: true,
center: [117.283042, 31.86119]
});
this.dialogMap.on('click', (ev) => {
this.currentPoint.lat = ev.lnglat.lat;
this.currentPoint.lng = ev.lnglat.lng;
this.regeoCode();
this.marker && this.dialogMap.remove(this.marker);
this.marker = new AMap.Marker({
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.add(this.marker);
});
this.dialogMap.addControl(new AMap.Scale());
// const auto = new AMap.Autocomplete({
// input: 'search', // 前端搜索框
// })
// this.placeSearch = new AMap.PlaceSearch({
// map: this.dialogMap,
// pageSize: 1, // 单页显示结果条数
// pageIndex: 1, // 页码
// autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
// })
// AMap.event.addListener(auto, 'select', this.select)
this.geocoder = new AMap.Geocoder();
}
// 初始化编辑地图的中心点
if (this.form.lat && this.form.lng) {
this.searchBody = this.form.address;
this.marker = new AMap.Marker({
map: this.dialogMap,
position: [this.form.lng, this.form.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.setCenter([this.form.lng, this.form.lat]);
this.dialogMap.setZoom(14);
}
},
handleMapSave() {
if (this.currentPoint.lat && this.currentPoint.lng) {
this.form.lng = this.currentPoint.lng;
this.form.lat = this.currentPoint.lat;
this.$set(this.form, 'address', this.currentPoint.address);
this.locationMarker && this.map.remove(this.locationMarker);
this.locationMarker = new AMap.Marker({
map: this.map,
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.map.setCenter([this.currentPoint.lng, this.currentPoint.lat]);
this.map.setZoom(14);
this.getNearbySchool();
this.mapDialogShow = false;
} else {
this.$message.error('请在地图上选择位置后保存！');
}
},
// 选择查询结果
select(e) {
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
if (result && result.info && result.info === 'OK' && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
this.currentPoint.lat = result.poiList.pois[0].location.lat;
this.currentPoint.lng = result.poiList.pois[0].location.lng;
this.currentPoint.address = e.poi.name;
this.dialogMap.clearMap();
this.marker && this.dialogMap.remove(this.marker);
this.marker = new AMap.Marker({
map: this.dialogMap,
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.setZoom(14);
this.dialogMap.setCenter([this.currentPoint.lng, this.currentPoint.lat]);
}
});
},
// 经纬度 -> 地址
regeoCode() {
// this.geocoder.getAddress(
// [this.currentPoint.lng, this.currentPoint.lat],
// (status, result) => {
// if (status === 'complete' && result.regeocode) {
// this.currentPoint.address = result.regeocode.formattedAddress;
// this.searchBody = result.regeocode.formattedAddress;
// }
// }
// );
if (this.currentPoint.lng && this.currentPoint.lat) {
regeo({
key: 'f2f35d6adc4a16bb879d303cead56237',
location: this.currentPoint.lng + ',' + this.currentPoint.lat
}).then((resp) => {
if (resp.status === '1') {
this.currentPoint.address = resp.regeocode.formatted_address;
this.searchBody = resp.regeocode.formatted_address;
}
});
}
},
// 计算各个场地到目标点的距离·
getNearbySchool() {
if (this.form.lng && this.form.lat) {
this.nearbySchoolList = [];
this.nearbySchoolSearching = true;
// 推荐的场地
let places1 = [];
// 普通的场地
let places2 = [];
const p2 = [this.form.lng, this.form.lat];
for (let i = 0; i < this.options.placeInfo.length; i++) {
const element = this.options.placeInfo[i];
const p1 = [element.lng, element.lat];
// 计算直线距离
element.distance = (window.AMap.GeometryUtil.distance(p1, p2) / 1000).toFixed(2);
element.recommend ? places1.push(element) : places2.push(element);
}
// 按直线距离排序
// 排序
if (places1.length > 1) {
places1 = places1.sort((a, b) => a.distance - b.distance);
}
// 排序
if (places2.length > 1) {
places2 = places2.sort((a, b) => a.distance - b.distance);
}
// 取普通场地和推荐场地，组合, 取四个
this.nearbySchoolList = [];
for (let i = 0; i < 4; i++) {
places1.length > i && this.nearbySchoolList.push(places1[i]);
places2.length > i && this.nearbySchoolList.push(places2[i]);
if (this.nearbySchoolList.length === 4) {
break;
}
}
// 计算步行距离
this.nearbySchoolList.map(async (item) => {
const p1 = [item.lng, item.lat];
const resp = await this.getWalkingDistance(p1, p2);
item.walkdistance = resp;
this.$forceUpdate();
});
this.nearbySchoolSearching = false;
}
},
// 获取两点之间的步行距离
async getWalkingDistance(start, end) {
if (start && end) {
const resp = await walking({
key: 'f2f35d6adc4a16bb879d303cead56237',
origin: start[0] + ',' + start[1],
destination: end[0] + ',' + end[1]
});
if (resp.status === '1') {
const num = resp.route.paths[0].distance;
return num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`;
} else {
return '步行数据无法确定';
}
}
// return new Promise((resolve, reject) => {
// })
// return new Promise((resolve, reject) => {
// window.AMap.plugin('AMap.Walking', () => {
// const walking = new AMap.Walking();
// let num = 0;
// walking.search(start, end, (status, result) => {
// debugger
// if (status === 'complete') {
// result.routes.forEach((item) => {
// num += item.distance;
// });
// resolve(
// num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`
// );
// } else {
// resolve('步行数据无法确定');
// }
// });
// });
// });
},
validateForm() {
return this.$refs.form.validate();
},
async querySearch(queryString, cb) {
if (queryString) {
const resp = await inputtips({
key: 'f2f35d6adc4a16bb879d303cead56237',
keywords: queryString
});
cb(resp.tips);
}
},
handleSelect(item) {
this.currentPoint.lat = item.location.split(',')[1];
this.currentPoint.lng = item.location.split(',')[0];
this.currentPoint.address = item.name;
this.searchBody = item.district + item.name;
this.dialogMap.clearMap();
this.marker && this.dialogMap.remove(this.marker);
this.marker = new AMap.Marker({
map: this.dialogMap,
position: [this.currentPoint.lng, this.currentPoint.lat],
icon: require(`@/assets/images/place/flag_red.png`)
});
this.dialogMap.setZoom(14);
this.dialogMap.setCenter([this.currentPoint.lng, this.currentPoint.lat]);
}
}
};
</script>
<style lang="scss" scoped>
.amap-cavans {
width: 100%;
height: 600px;
}
.dialog-map {
width: 100%;
height: 400px;
}
.address {
position: absolute;
left: 30px;
top: 10px;
width: 400px;
background: #fff;
}
.box-card {
position: absolute;
right: 30px;
top: 10px;
width: 400px;
}
.search-body {
position: absolute;
top: 90px;
left: 25px;
width: 300px;
}
.el-divider--horizontal {
margin: 6px 0;
}
li {
padding: 6px;
.name {
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
line-height: 16px;
font-size: 10px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
</style>

79
src/views/zs/clue/components/PublicDialog.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<el-dialog title="公海" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="1000px" height="500" @close="closeDialog">
<div>
<el-button type="text" icon="el-icon-refresh" style="margin-bottom: 10px" @click="_getTableList">刷新</el-button>
<el-table v-loading="loading" :data="publicList" border :row-class-name="tableRowClassName">
<el-table-column label="创建时间" prop="consultTime" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.consultTime) }}</span>
</template>
</el-table-column>
<el-table-column label="线索来源" prop="source" width="100" />
<el-table-column label="姓名" prop="name" width="100" />
<el-table-column label="位置" prop="address" min-width="160" />
<el-table-column label="意向状态" prop="intentionState" width="100" />
<el-table-column label="备注" prop="clueMemo" min-width="150" />
<el-table-column label="操作" fixed="right" width="80">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handlePickup(scope.row)">获取</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="queryParams.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[50, 100]" @pagination="_getTableList" />
</div>
</el-dialog>
</template>
<script>
import { getPublicList, pickupClue } from '@/api/zs/clue';
export default {
name: 'PublicDialog',
data() {
return {
visible: false,
loading: true,
queryParams: {
pageNum: 1,
pageSize: 100,
total: 0
},
publicList: []
};
},
methods: {
init() {
this.visible = true;
this._getTableList();
},
_getTableList() {
this.loading = true;
getPublicList(this.queryParams).then((resp) => {
if (resp && resp.code === 200) {
this.publicList = resp.rows;
this.loading = false;
this.queryParams.total = resp.total;
}
});
},
closeDialog() {
this.$emit('update:dialog.publicVisible', false);
},
handlePickup(item) {
pickupClue(item).then((resp) => {
if (resp && resp.code === 200) {
this.$message.success('拾取成功');
this._getTableList();
}
});
},
tableRowClassName({ row, rowIndex }) {
if (row.followUser2 || row.followUser) {
return 'warning-row';
} else {
return '';
}
},
}
};
</script>

161
src/views/zs/clue/components/SearchForm.vue
View File

@@ -1,80 +1,101 @@
<template>
<div>
<el-row>
<el-form ref="queryForm" :model="queryParams" inline>
<el-row>
<el-form-item>
<el-input v-model="queryParams.name" placeholder="姓名/联系方式" clearable style="width: 200px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-select v-model="queryParams.source" placeholder="选择线索来源" clearable @change="handleQuery">
<el-option v-for="dict in sourceOptions" :key="dict.dictValue" :value="dict.dictValue" />
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="queryParams.intentionState" placeholder="选择意向状态" clearable @change="handleQuery">
<el-option v-for="dict in intentionOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">
<i class="el-icon-star-on" :style="dict.cssClass" />
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictValue }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="queryParams.followUser2" placeholder="选择跟进人员" filterable clearable @change="handleQuery">
<el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="queryParams.createTime" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleQuery" />
</el-form-item>
</el-row>
<el-row>
<el-form-item label-width="80">
<template slot="label">
<el-button type="text" @click="handleFilter">筛选</el-button>
</template>
<el-checkbox-group v-model="queryParams.etc" @change="etcChange">
<el-checkbox v-if="filterItems.myCreate" label="myCreate">我创建的</el-checkbox>
<el-checkbox v-if="filterItems.myValid" label="myValid">我的有效</el-checkbox>
<el-checkbox v-if="filterItems.valid" label="valid">有效线索</el-checkbox>
<el-checkbox v-if="filterItems.todayValid" label="todayValid">今日有效线索</el-checkbox>
<el-checkbox v-if="filterItems.todayFollow" label="todayFollow">今日跟踪</el-checkbox>
<el-checkbox v-if="filterItems.outtime" label="outtime">
<el-badge :value="expireCount" type="danger">过期线索</el-badge>
</el-checkbox>
<el-checkbox v-if="filterItems.relate" label="relate">相关线索</el-checkbox>
<el-checkbox v-if="filterItems.reSign" label="reSign">撞单线索</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item class="m20">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
<el-button type="primary" @click="handlePublicClue">公海</el-button>
<el-dropdown trigger="click">
<el-button type="primary">
更多
<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleImport(false)">导入</el-dropdown-item>
<el-dropdown-item @click.native="handleImport(true)">一点通导入</el-dropdown-item>
<el-dropdown-item v-if="admin == 'true'" @click.native="handleExport">导出</el-dropdown-item>
<el-dropdown-item v-if="admin == 'true'" @click.native="handleBatChUpdate()">批量修改</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
<!-- <el-button type="primary" v-if="admin != 'true' && accept" @click="handleAccept(false)">停止接收</el-button>
<el-button type="primary" v-if="admin != 'true' && !accept" @click="handleAccept(true)">启动接收</el-button> -->
</el-row>
</el-form>
</el-row>
<el-form ref="searchForm" :model="searchForm" inline>
<el-form-item label="筛选:" label-width="90px">
<DMRadio v-model="searchForm.quickSearch" :list="quickList" all-text="全部" @change="$emit('search')" />
</el-form-item>
<el-form-item label="意向状态:" label-width="90px">
<DMRadio v-model="searchForm.intentionState" :list="intentionOptions" all-text="全部" @change="$emit('search')" />
</el-form-item>
<el-row>
<el-form-item label="姓名/联系方式">
<el-input v-model="searchForm.name" placeholder="姓名/联系方式" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="线索来源">
<el-select v-model="searchForm.source" placeholder="选择线索来源" clearable>
<el-option v-for="dict in sourceOptions" :key="dict.dictValue" :value="dict.dictValue" />
</el-select>
</el-form-item>
<el-form-item label="跟进人员">
<el-select v-model="searchForm.followUser2" placeholder="选择跟进人员" filterable clearable>
<el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="pickDateChange" />
</el-form-item>
<el-form-item label-width="0">
<el-button type="primary" icon="el-icon-search" @click="$emit('search')">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-row>
</el-form>
</div>
</template>
<script>
import DMRadio from '@/components/DMRadio';
export default {
components: {
DMRadio
},
props: {
userOptions: {
type: Array,
default: []
},
sourceOptions: {
type: Array,
default: []
},
},
data() {
return {
searchForm: {},
quickList: [
{ value: 1, label: '我创建的' },
{ value: 2, label: '我的有效' },
{ value: 3, label: '有效线索' },
{ value: 4, label: '今日有效线索' },
{ value: 5, label: '今日跟踪' },
{ value: 6, label: '过期线索' },
{ value: 7, label: '相关线索' },
{ value: 8, label: '撞单线索' }
],
intentionOptions: [],
dateRange: []
}
},
created() {
// 意向状态
this.getDicts('dm_intention_state').then((response) => {
let list = response.data
this.intentionOptions = []
list.map(item => {
this.intentionOptions.push({
value: item.dictValue,
label: item.dictLabel
})
})
})
},
methods: {
resetQuery() {
this.searchForm = {
createTime: [],
name: undefined,
intentionState: undefined,
followUser2: undefined,
source: undefined,
quickSearch: undefined,
total: 0
};
this.dateRange = []
},
pickDateChange() {
this.addDateRange(this.searchForm, this.dateRange)
}
},
}
</script>

85
src/views/zs/clue/components/UploadDialog.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="400px" @close="closeDialog">
<el-upload ref="upload" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?ydtData=' + ydtData" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">
<el-link type="info" style="font-size: 12px" @click="importTemplate">下载模板</el-link>
</div>
<div slot="tip" class="el-upload__tip" style="color: red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { importTemplate } from '@/api/zs/clue';
import { importData } from '@/api/tool/common';
import { getToken } from '@/utils/auth'
export default {
name: 'UploadDialog',
data() {
return {
visible: false,
canSubmit: true,
isUploading: true,
ydtData: false,
title: '学员信息导入',
upload: {
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/zs/clue/importData',
},
};
},
methods: {
init(info = false) {
this.visible = true;
this.ydtData = false;
this.$nextTick(() => {
if (info) {
this.ydtData = info;
this.title = "一点通-" + this.title;
}
});
},
/** 下载模板操作 */
importTemplate() {
this.download('zs/clue/importTemplate?ydtData=' + this.ydtData, {}, `clue_template_${new Date().getTime()}.xlsx`);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.visible = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
this.$emit('update:dialog.batchUpdateVisible', false);
this.$emit('refreshDataList');
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
closeDialog() {
this.$emit('update:dialog.batchUpdateVisible', false);
},
}
};
</script>

277
src/views/zs/clue/index.vue
View File

@@ -0,0 +1,277 @@
<template>
<div class="app-container">
<!-- 搜索插件 -->
<SearchForm v-show="showSearch" ref="SearchForm" @search="_getTableList" :userOptions="userOptions" :sourceOptions="sourceOptions" />
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button icon="el-icon-plus" type="primary" @click="handleAddandUpdate(undefined)">新增</el-button>
<el-button icon="el-icon-upload" type="warning" @click="handleImport(false)">导入</el-button>
<el-button icon="el-icon-upload" type="warning" @click="handleImport(true)">一点通导入</el-button>
<el-button icon="el-icon-download" type="warning" @click="handleExport">导出</el-button>
<el-button icon="el-icon-edit" type="primary" :disabled="multiple" @click="handleBatChUpdate()">批量修改</el-button>
<el-button type="primary" @click="handlePublicClue">公海</el-button>
</el-col>
<right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" />
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" @select="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<template v-for="item in columns">
<el-table-column v-if="item.visible" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop" :show-overflow-tooltip="item.overflow" />
</template>
<el-table-column label="意向状态" prop="intentionState" sortable fixed="right" min-width="100">
<template slot-scope="{ row }">
<el-tag effect="dark" style="border: none" :color="tagColorMap[row.intentionState]">{{ row.intentionState }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" @click.native.stop="handleAddandUpdate(scope.row)">编辑</el-button>
<el-button v-if="scope.row.state" type="text" icon="el-icon-edit" style="color: #26a69a" @click.native.stop="handleSign(scope.row)">已登记</el-button>
<el-button v-if="!scope.row.state" type="text" icon="el-icon-edit" @click.native.stop="handleSign(scope.row)">未登记</el-button>
<el-button type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row)">删除</el-button>
<el-button type="text" v-if="!scope.row.state" icon="el-icon-delete" @click.native.stop="handleDiscard(scope.row)">释放</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" :page-sizes="[10, 20, 30, 50, 100]" @pagination="_getTableList" />
<!-- 新增、修改 -->
<!-- <ClueForm v-if="dialog.addAndUpdateVisible" ref="addAndUpdateForm" :dialog-visible="dialog.addAndUpdateVisible" :options="options" @refreshDataList="_getTableList" /> -->
<!-- 批量修改 -->
<BatchUpdateDialog v-if="dialog.batchUpdateVisible" ref="batchUpdateDialogForm" :dialog-visible="dialog.batchUpdateVisible" :options="options" @refreshDataList="_getTableList" />
<!-- 公海 -->
<PublicDialog v-if="dialog.publicVisible" ref="publicDialogForm" :dialog-visible="dialog.publicVisible" @refreshDataList="_getTableList" />
<!-- 上传 -->
<UploadDialog v-if="dialog.uploadVisible" ref="uploadDialogForm" :dialog-visible="dialog.uploadVisible" @refreshDataList="_getTableList" />
<!-- 登记弹框 -->
<SignFormDialog v-if="dialog.signVisible" ref="signDialogForm" :dialog-visible="dialog.signVisible" :clueInfo="clueInfo" />
</div>
</template>
<script>
import SearchForm from './components/SearchForm.vue';
import BatchUpdateDialog from './components/BatchUpdateDialog.vue';
import PublicDialog from './components/PublicDialog.vue';
import UploadDialog from './components/UploadDialog.vue';
import SignFormDialog from '../sign/components/SignFormDialog.vue';
import { defaultColumns } from './columns.js';
import { getClueList, exportData, deleteClue, getClueCountBadge, discardClue, getSign } from '@/api/zs/clue';
import empApi from '@/api/system/employee'
export default {
components: {
SearchForm, BatchUpdateDialog, PublicDialog, UploadDialog, SignFormDialog
},
name: 'Clue',
data() {
return {
// 遮罩层
loading: false,
// 显示搜索条件
showSearch: true,
searchForm: {
pageNum: 1,
pageSize: 10
},
tableList: [],
total: 0,
columns: [],
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
expireCount: 0,
dialog: {
batchUpdateVisible: false,
publicVisible: false,
uploadVisible: false,
addAndUpdateVisible: false,
signVisible: false
},
userOptions2: [],
userOptions: [],
sourceOptions: [],
tagColorMap: {
A高意向: '#ff7043',
B中意向: '#26a69a',
C无意向: '#5c6bc0',
D未知意向: '#ef5350',
报名成功: '#ffa726',
报名他校: '#afaeb0',
无效线索: '#afaeb0'
},
options: undefined,
clueInfo: undefined
}
},
created() {
const str = localStorage.getItem(`${this.$route.name}-table-columns`);
this.columns = str ? JSON.parse(str) : defaultColumns;
this._getClueCountBadge();
this.getEmployee();
// 线索来源
this.getDicts('dm_source').then((response) => {
this.sourceOptions = response.data;
});
// 意向状态
this.getDicts('dm_intention_state').then((response) => {
this.intentionOptions = response.data;
});
this._getTableList();
},
methods: {
// 分页查询表格数据
_getTableList() {
this.loading = true;
const tempForm = this.$refs.SearchForm?.searchForm || {};
const params = { ...this.searchForm, ...tempForm };
getClueList(params).then((response) => {
this.tableList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 获取已过期线索数
async _getClueCountBadge() {
const resp = await getClueCountBadge();
if (resp.code === 200) {
this.expireCount = resp.data;
}
},
// 新增或修改
handleAddandUpdate(info) {
this.$router.push("/zs/clue-form/index/" + (info ? info.clueId : 0));
},
// 批量修改
handleBatChUpdate() {
this.options = {
userOptions: this.userOptions
}
this.getEmployee2();
this.dialog.batchUpdateVisible = true;
let item = {
clueIds: this.ids
}
this.$nextTick(() => {
this.$refs.batchUpdateDialogForm.init(item);
});
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.clueId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
// 释放线索操作
handleDiscard(item) {
discardClue(item).then((resp) => {
if (resp && resp.code === 200) {
this.$message.success('释放成功');
this._getTableList();
}
});
},
// 删除
handleDelete(item) {
this.$confirm('是否确认删除该条线索（“' + item.name + '/' + item.phone + '”）?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then((res) => {
deleteClue({ clueId: item.clueId }).then((resp) => {
if (resp.code === 200) {
this.$message.success('删除成功');
this._getTableList();
}
});
})
.catch(function () { });
},
// 登记
// 导入
handleImport(ydtData) {
this.dialog.uploadVisible = true;
this.$nextTick(() => {
this.$refs.uploadDialogForm.init(ydtData);
});
},
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有学员信息项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const tempForm = this.$refs.SearchForm?.searchForm || {};
this.download('zs/clue/export', tempForm, `线索信息_${new Date().getTime()}.xlsx`);
});
},
// 公海按钮点击时间
handlePublicClue() {
this.dialog.publicVisible = true;
this.$nextTick(() => {
this.$refs.publicDialogForm.init();
});
},
getEmployee() {
empApi.getEmployee().then((resp) => {
if (resp.code === 200) {
this.userOptions = resp.data;
}
});
},
// 查询不能接收线索的员工
getEmployee2() {
empApi.getEmployee().then((resp) => {
if (resp.code === 200) {
this.userOptions2 = resp.data;
this.userOptions2 = this.userOptions2.filter((item) => {
return item.accept;
});
}
});
},
//登记成交
async handleSign(item) {
//根据clueId查询登记信息
let signInfo = {};
this.clueInfo = item;
const resp = await getSign({ clueId: item.clueId })
if (resp.code == 200) {
signInfo = { ...resp.data }
}
this.dialog.signVisible = true;
this.$nextTick(() => {
this.$refs.signDialogForm.init(signInfo);
});
}
}
}
</script>
<style scoped>
.drawer-form__footer {
border-top: 1px solid rgba(69, 74, 91, 0.1);
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
z-index: 2;
background: #fff;
}
.footer_button {
width: 49%;
margin: auto;
}
</style>