forked from qiushanhe/dm-manage-web
提交
This commit is contained in:
784
src/views/zs/clue.vue
Normal file
784
src/views/zs/clue.vue
Normal file
@@ -0,0 +1,784 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<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>
|
||||
|
||||
<CustomColumnTable v-if="!queryParams.reSign" :table-list="tableDataList" :table-loading="tableLoading" :query-params.sync="queryParams" :default-columns="tableAllFields.map(item=>item.prop)" :sortable-columns="tableAllFields.map(item=>item.prop)" :table-all-fields="tableAllFields" :selectable="true" @getlist="getPageList" @changeSort="changeSort" @clickRow="handleRowClick" @selectRow="selectRow">
|
||||
<template v-slot:appendColumn>
|
||||
<!-- <el-table-column label="备注" prop="clueMemo" sortable min-width="140" show-overflow-tooltip=true v-if="!queryParams.reSign" /> -->
|
||||
<el-table-column label="意向状态" prop="intentionState" sortable fixed="right" min-width="100" v-if="!queryParams.reSign">
|
||||
<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" width="320" v-if="!queryParams.reSign">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click.native.stop="handleUpdate(scope.row)" v-if="admin == 'true' || scope.row.followUser2 == userId">编辑</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) && scope.row.refuse" type="text" icon="el-icon-edit" @click.native.stop="handleRefuse(scope.row)">甩单驳回</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) &&!scope.row.refuse" type="text" icon="el-icon-edit" :style="{ color: `${scope.row.offlineReceiver?'#26A69A':'#409EFF'}` }" @click.native.stop="handleDistribute(scope.row)">甩单</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) &&scope.row.state" type="text" icon="el-icon-edit" style="color:#26A69A;" @click.native.stop="handleSign1(scope.row)">已登记</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) &&!scope.row.state" type="text" icon="el-icon-edit" @click.native.stop="handleSign1(scope.row)">未登记</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) " type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row)">删除</el-button>
|
||||
<el-button v-if="(admin == 'true' || scope.row.followUser2 == userId ) " type="text" icon="el-icon-delete" @click.native.stop="handleDiscard(scope.row)">释放</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</CustomColumnTable>
|
||||
|
||||
<CustomColumnTable v-else :table-list="tableDataList" :table-loading="tableLoading" :query-params.sync="queryParams" :default-columns="tableAllFields.filter(item => item.show).map(item=>item.prop)" :sortable-columns="tableAllFields.filter(item => item.show).map(item=>item.prop)" :table-all-fields="tableAllFields.filter(item => item.show)" :selectable="true" @getlist="getPageList" @changeSort="changeSort" @clickRow="handleRowClick" @selectRow="selectRow">
|
||||
</CustomColumnTable>
|
||||
|
||||
<el-drawer :visible.sync="clueVisible" size="90%" append-to-body destroy-on-close>
|
||||
<div slot="title">
|
||||
<div v-if="clueInfo.consultCount && clueInfo.consultCount < 2">
|
||||
学员信息
|
||||
<span v-if="clueInfo.name">-【{{ clueInfo.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="clueInfo.consultCount">
|
||||
<span>
|
||||
学员信息
|
||||
<span v-if="clueInfo.name">-【{{ clueInfo.name }}】</span>
|
||||
</span>
|
||||
</el-badge>
|
||||
</el-popover>
|
||||
</div>
|
||||
<clue-form v-if="clueVisible" ref="clueInfo" v-model="clueInfo" :options="{ userOptions: userOptions2, sourceOptions: sourceOptions, intentionOptions: intentionOptions, placeInfo: placeInfo }" />
|
||||
<div class="drawer-form__footer">
|
||||
<div style="flex: 1;text-align: right;">
|
||||
<template v-if="saveNextShow">
|
||||
<el-checkbox v-model="saveNext" />
|
||||
<span class="ml5">保存后继续创建下一条</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="ml0" style="width: 60%; display: flex;">
|
||||
<el-button class="footer_button" @click="clueVisible = false">取 消</el-button>
|
||||
<el-button class="footer_button" type="primary" :loading="modalSaveLoading" @click="handleSaveClue">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogShow" custom-class="dialog500" :width="dialogWidth">
|
||||
<component :is="componentName" v-if="dialogShow" ref="form" v-model="form" :options="dialogFormOptions" />
|
||||
<span v-if="dialogFooterShow" slot="footer">
|
||||
<el-button @click="dialogShow = false">取消</el-button>
|
||||
<el-button type="primary" :loading="dialogSaving" @click="handleDialogConfirm">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog title="学员信息导入" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload action="#" accept=".xlsx, .xls" :show-file-list="false" :http-request="handleUpload" :disabled="upload.isUploading" 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>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getClueList,
|
||||
exportData,
|
||||
importTemplate,
|
||||
deleteClue,
|
||||
refuse,
|
||||
getClueCountBadge,
|
||||
addClue,
|
||||
updateClue,
|
||||
getSign,
|
||||
saveSign,
|
||||
getConsultRecord,
|
||||
saveDistribute,
|
||||
batchUpdate,
|
||||
discardClue,
|
||||
updateAccept,
|
||||
getAccept
|
||||
} from '@/api/zs/clue'
|
||||
import { getEmployee, getAllPlaces, importData } from '@/api/tool/common'
|
||||
export default {
|
||||
name: 'Clue',
|
||||
components: {
|
||||
CustomColumnTable: () => ({
|
||||
component: import('@/components/CustomColumnTable'),
|
||||
}),
|
||||
ClueForm: () => ({ component: import('./components/clueForm') }),
|
||||
DistributeForm: () => ({ component: import('./components/distributeForm.vue') }),
|
||||
SignForm: () => ({ component: import('./components/signForm') }),
|
||||
BatchUpdateForm: () => ({ component: import('./components/batchUpdateForm') }),
|
||||
FilterForm: () => ({ component: import('./components/filterForm') }),
|
||||
PublicTable: () => ({ component: import('./components/publicTable') }),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
admin: localStorage.getItem('admin'),
|
||||
userId: localStorage.getItem('userId'),
|
||||
tagColorMap: {
|
||||
A高意向: '#ff7043',
|
||||
B中意向: '#26a69a',
|
||||
C无意向: '#5c6bc0',
|
||||
D未知意向: '#ef5350',
|
||||
报名成功: '#ffa726',
|
||||
报名他校: '#afaeb0',
|
||||
无效线索: '#afaeb0',
|
||||
},
|
||||
|
||||
dialogShow: false,
|
||||
dialogFooterShow: false,
|
||||
componentName: undefined,
|
||||
dialogTitle: '',
|
||||
dialogWidth: '50%',
|
||||
form: {},
|
||||
dialogSaving: false,
|
||||
dialogFormOptions: [],
|
||||
clueVisible: false,
|
||||
distributeVisible: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
createTime: [],
|
||||
name: undefined,
|
||||
intentionState: undefined,
|
||||
followUser2: undefined,
|
||||
source: undefined,
|
||||
etc: [],
|
||||
total: 0,
|
||||
},
|
||||
tableAllFields: [
|
||||
{ prop: 'createTime', label: '创建时间', show: true },
|
||||
{ prop: 'source', label: '线索来源', show: true },
|
||||
{ prop: 'name', label: '姓名', show: true },
|
||||
{ prop: 'phone', label: '联系方式', show: true },
|
||||
{ prop: 'address', label: '位置', show: true },
|
||||
{ prop: 'requirement', label: '学员诉求', show: true },
|
||||
{ prop: 'licenseType', label: '咨询车型', show: true },
|
||||
{ prop: 'followTime', label: '下次跟进时间', width: 140, show: true },
|
||||
{ prop: 'firstFollowUserName', label: '首次跟进人员', width: 140, show: true },
|
||||
{ prop: 'followUserName', label: '跟进人员', show: true },
|
||||
{ prop: 'recentLook', label: '是否近期看场地', width: 140 },
|
||||
{ prop: 'offlineReceiverName', label: '线下接待人员', width: 140, show: true },
|
||||
{ prop: 'clueMemo', label: '备注', show: true },
|
||||
|
||||
],
|
||||
tableLoading: false,
|
||||
tableDataList: [],
|
||||
upload: {
|
||||
open: false,
|
||||
isUploading: false,
|
||||
// 是否一点通线索
|
||||
ydtData: false,
|
||||
},
|
||||
sourceOptions: [],
|
||||
intentionOptions: [],
|
||||
userOptions: [],
|
||||
clueInfo: {},
|
||||
expireCount: undefined,
|
||||
placeInfo: [],
|
||||
consultRecord: [],
|
||||
modalSaveLoading: false,
|
||||
saveNextShow: false,
|
||||
saveNext: false,
|
||||
clueIds: [],
|
||||
filterItems: {
|
||||
myCreate: true,
|
||||
myValid: true,
|
||||
valid: true,
|
||||
todayValid: true,
|
||||
todayFollow: true,
|
||||
outtime: true,
|
||||
relate: false,
|
||||
reSign: false
|
||||
},
|
||||
accept: false,
|
||||
employeeId: undefined,
|
||||
userOptions2: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 线索来源
|
||||
this.getDicts('dm_source').then((response) => {
|
||||
this.sourceOptions = response.data
|
||||
})
|
||||
// 意向状态
|
||||
this.getDicts('dm_intention_state').then((response) => {
|
||||
this.intentionOptions = response.data
|
||||
})
|
||||
this._getClueCountBadge()
|
||||
this.getPageList()
|
||||
this.getEmployee()
|
||||
// 查询场地
|
||||
this.getAllPlace()
|
||||
if (localStorage.getItem(this.userId + '-filterItems')) {
|
||||
this.filterItems = JSON.parse(
|
||||
localStorage.getItem(this.userId + '-filterItems')
|
||||
)
|
||||
}
|
||||
this.getAccept();
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getPageList()
|
||||
},
|
||||
getAccept() {
|
||||
getAccept().then(resp => {
|
||||
if (resp.code == 200) {
|
||||
this.accept = resp.data.accept;
|
||||
this.employeeId = resp.data.employeeId;
|
||||
}
|
||||
})
|
||||
},
|
||||
getPageList() {
|
||||
this.tableLoading = true
|
||||
const params = { ...this.queryParams, etc: undefined }
|
||||
getClueList(this.opearateRequestParams(params)).then((response) => {
|
||||
this.tableDataList = response.rows
|
||||
this.queryParams.total = response.total
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
// 获取已过期
|
||||
async _getClueCountBadge() {
|
||||
const resp = await getClueCountBadge()
|
||||
if (resp.code === 200) {
|
||||
this.expireCount = resp.data
|
||||
}
|
||||
},
|
||||
// 重置搜索
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
createTime: [],
|
||||
name: undefined,
|
||||
intentionState: undefined,
|
||||
followUser2: undefined,
|
||||
source: undefined,
|
||||
etc: [],
|
||||
total: 0,
|
||||
}
|
||||
this.handleQuery()
|
||||
},
|
||||
etcChange(val) {
|
||||
this.$set(this.queryParams, 'myCreate', undefined)
|
||||
this.$set(this.queryParams, 'myValid', undefined)
|
||||
this.$set(this.queryParams, 'valid', undefined)
|
||||
this.$set(this.queryParams, 'todayValid', undefined)
|
||||
this.$set(this.queryParams, 'todayFollow', undefined)
|
||||
this.$set(this.queryParams, 'outtime', undefined)
|
||||
this.$set(this.queryParams, 'relate', undefined)
|
||||
this.$set(this.queryParams, 'reSign', undefined)
|
||||
|
||||
if (!this.isNullOrEmpty(val)) {
|
||||
val.length > 1 &&
|
||||
this.$set(this.queryParams, 'etc', [val[val.length - 1]])
|
||||
this.$set(this.queryParams, val[val.length - 1], true)
|
||||
}
|
||||
if (this.queryParams.reSign) {
|
||||
this.tableAllFields = this.tableAllFields.map(item => {
|
||||
if (item.prop == 'clueMemo') {
|
||||
item.show = false;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
} else {
|
||||
this.tableAllFields = this.tableAllFields.map(item => {
|
||||
if (item.prop == 'clueMemo') {
|
||||
item.show = true;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
}
|
||||
this.handleQuery()
|
||||
},
|
||||
resetForm() {
|
||||
this.clueInfo = {
|
||||
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,
|
||||
}
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions,
|
||||
sourceOptions: this.sourceOptions,
|
||||
intentionOptions: this.intentionOptions,
|
||||
placeInfo: this.placeInfo,
|
||||
}
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.resetForm()
|
||||
this.clueVisible = true
|
||||
this.saveNextShow = true
|
||||
this.saveNext = false
|
||||
this.getEmployee2();
|
||||
},
|
||||
// 编辑
|
||||
handleUpdate(listItem) {
|
||||
this.clueVisible = true
|
||||
this.clueInfo = listItem
|
||||
this.saveNextShow = false
|
||||
this.saveNext = false
|
||||
this.getEmployee2()
|
||||
// 查询咨询记录
|
||||
this.getConsultRecord(listItem.clueId)
|
||||
},
|
||||
// 查询咨询记录
|
||||
getConsultRecord(clueId) {
|
||||
getConsultRecord({ clueId }).then((resp) => {
|
||||
if (resp && resp.code === 200 && resp.data) {
|
||||
this.consultRecord = resp.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRowClick(row) {
|
||||
if (!this.queryParams.reSign) {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
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.getPageList()
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(function () { })
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$confirm('是否确认导出所有学员信息项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
const resp = await exportData(
|
||||
this.opearateRequestParams(this.queryParams)
|
||||
)
|
||||
this.download(resp.msg)
|
||||
})
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport(ydtData) {
|
||||
this.upload.open = true
|
||||
this.upload.ydtData = ydtData
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
importTemplate({ ydtData: this.upload.ydtData }).then((response) => {
|
||||
this.download(response.msg)
|
||||
})
|
||||
},
|
||||
async handleUpload(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', data.file)
|
||||
this.upload.isUploading = true
|
||||
importData(this.upload.ydtData, formData).then(resp => {
|
||||
this.upload.isUploading = false
|
||||
if (resp.code === 200) {
|
||||
this.$alert(resp.msg, '导入结果', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
this.upload.open = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getEmployee() {
|
||||
getEmployee({ coach: false }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
this.userOptions = resp.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//查询不能接收线索的员工
|
||||
getEmployee2() {
|
||||
getEmployee({ coach: false }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
this.userOptions2 = resp.data
|
||||
this.userOptions2 = this.userOptions2.filter(item => {
|
||||
return item.accept;
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeSort(val) {
|
||||
if (val.order) {
|
||||
this.queryParams.orderName = val.prop
|
||||
if (val.order === 'ascending') {
|
||||
this.queryParams.orderType = 'asc'
|
||||
} else {
|
||||
this.queryParams.orderType = 'desc'
|
||||
}
|
||||
} else {
|
||||
this.queryParams.orderName = undefined
|
||||
this.queryParams.orderType = undefined
|
||||
}
|
||||
this.getPageList()
|
||||
},
|
||||
handleDistribute(item) {
|
||||
this.dialogTitle = '甩单'
|
||||
this.dialogWidth = '700px'
|
||||
this.componentName = 'DistributeForm'
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions,
|
||||
offlineReceiver: item.offlineReceiver,
|
||||
}
|
||||
this.dialogFooterShow = true
|
||||
this.form = {
|
||||
clueId: item.clueId,
|
||||
offlineReceiverName: item.offlineReceiverName,
|
||||
offlineReceiver: undefined,
|
||||
memo: item.memo,
|
||||
}
|
||||
this.dialogShow = true
|
||||
},
|
||||
handleRefuse(item) {
|
||||
refuse({ clueId: item.clueId }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
this.$message.success('驳回成功')
|
||||
this.getPageList()
|
||||
}
|
||||
})
|
||||
},
|
||||
resetSignForm() {
|
||||
this.form = {
|
||||
dealDate: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
||||
signSchool: undefined,
|
||||
schoolName: undefined,
|
||||
signPlace: undefined,
|
||||
placeName: undefined,
|
||||
signClass: undefined,
|
||||
className: undefined,
|
||||
signPrice: undefined,
|
||||
schoolPeople: undefined,
|
||||
schoolPay: undefined,
|
||||
alipay: undefined,
|
||||
profit: undefined,
|
||||
percentage: undefined,
|
||||
detail: undefined,
|
||||
dealState: undefined,
|
||||
extraPayType: undefined,
|
||||
extraPay: undefined,
|
||||
percentageState: undefined,
|
||||
memo: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
state: true,
|
||||
commission: undefined,
|
||||
}
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions,
|
||||
sourceOptions: this.sourceOptions,
|
||||
placeInfo: this.placeInfo,
|
||||
}
|
||||
},
|
||||
async handleSign1(item) {
|
||||
this.dialogTitle = '成交登记'
|
||||
this.dialogWidth = '800px'
|
||||
this.componentName = 'SignForm'
|
||||
this.dialogFooterShow = true
|
||||
this.resetSignForm()
|
||||
const resp = await getSign({ clueId: item.clueId })
|
||||
if (resp.code === 200) {
|
||||
const {
|
||||
clueId,
|
||||
consultTime,
|
||||
name,
|
||||
phone,
|
||||
source,
|
||||
followUser,
|
||||
followUser2,
|
||||
followUserName,
|
||||
offlineReceiver,
|
||||
offlineReceiver2,
|
||||
offlineReceiverName,
|
||||
} = item
|
||||
this.form = Object.assign({}, this.form, {
|
||||
clueId,
|
||||
consultTime,
|
||||
name,
|
||||
phone,
|
||||
source,
|
||||
followUser,
|
||||
followUser2,
|
||||
followUserName,
|
||||
offlineReceiver,
|
||||
offlineReceiver2,
|
||||
offlineReceiverName,
|
||||
})
|
||||
if (resp.data) {
|
||||
this.form = { ...this.form, ...resp.data }
|
||||
this.dialogFooterShow = this.form.signEdit
|
||||
}
|
||||
this.dialogShow = true
|
||||
}
|
||||
},
|
||||
getAllPlace() {
|
||||
getAllPlaces({ status: '0' }).then((resp) => {
|
||||
this.placeInfo = resp.data.filter(
|
||||
(item) => item.schoolShow && item.showInMap
|
||||
)
|
||||
})
|
||||
},
|
||||
handleSaveClue() {
|
||||
this.$refs.clueInfo.validateForm().then(async (valid) => {
|
||||
if (valid) {
|
||||
this.modalSaveLoading = true
|
||||
let resp
|
||||
if (this.clueInfo.clueId) {
|
||||
resp = await updateClue(this.clueInfo)
|
||||
this.modalSaveLoading = false
|
||||
if (resp.code === 200) {
|
||||
this.$message.success('修改成功')
|
||||
this.getPageList()
|
||||
this.clueVisible = false
|
||||
}
|
||||
} else {
|
||||
resp = await addClue(this.clueInfo)
|
||||
this.modalSaveLoading = false
|
||||
if (resp.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
if (this.saveNext) {
|
||||
this.resetForm()
|
||||
} else {
|
||||
this.getPageList()
|
||||
this.clueVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDialogConfirm() {
|
||||
this.$refs.form.validate().then(async (valid) => {
|
||||
if (valid) {
|
||||
let resp
|
||||
this.dialogSaving = true
|
||||
if (this.componentName === 'SignForm') {
|
||||
// 登记提交
|
||||
this.form.checkState = 1
|
||||
resp = await saveSign(this.form)
|
||||
} else if (this.componentName === 'DistributeForm') {
|
||||
resp = await saveDistribute(this.form)
|
||||
} else if (this.componentName === 'BatchUpdateForm') {
|
||||
resp = await batchUpdate(this.form)
|
||||
} else if (this.componentName === 'FilterForm') {
|
||||
this.filterItems = { ...this.form }
|
||||
localStorage.setItem(
|
||||
this.userId + '-filterItems',
|
||||
JSON.stringify(this.filterItems)
|
||||
)
|
||||
this.$message.success('操作成功')
|
||||
this.dialogShow = false
|
||||
}
|
||||
this.dialogSaving = false
|
||||
if (resp && resp.code === 200) {
|
||||
this.$message.success('操作成功')
|
||||
this.dialogShow = false
|
||||
this.getPageList()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//表格多选
|
||||
selectRow(val) {
|
||||
console.log(val)
|
||||
this.clueIds = []
|
||||
if (val && val.length > 0) {
|
||||
this.clueIds = val.map((item) => item.clueId)
|
||||
}
|
||||
},
|
||||
//批量修改
|
||||
handleBatChUpdate() {
|
||||
this.getEmployee2()
|
||||
//判断是否选择了数据
|
||||
if (!this.clueIds || this.clueIds.length <= 0) {
|
||||
//提示选择数据
|
||||
this.$message.error('请至少选择一条数据！')
|
||||
} else {
|
||||
//打开编辑框
|
||||
this.dialogTitle = '批量修改'
|
||||
this.dialogWidth = '500px'
|
||||
this.componentName = 'BatchUpdateForm'
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions2,
|
||||
}
|
||||
this.dialogFooterShow = true
|
||||
this.form = {
|
||||
followUsers: [],
|
||||
clueIds: this.clueIds,
|
||||
}
|
||||
this.dialogShow = true
|
||||
}
|
||||
},
|
||||
//筛选点击事件
|
||||
handleFilter() {
|
||||
//打开编辑框
|
||||
this.dialogTitle = '筛选配置'
|
||||
this.dialogWidth = '500px'
|
||||
this.componentName = 'FilterForm'
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions,
|
||||
}
|
||||
this.dialogFooterShow = true
|
||||
this.form = { ...this.filterItems }
|
||||
this.dialogShow = true
|
||||
},
|
||||
handlePublicClue() {
|
||||
//打开编辑框
|
||||
this.dialogTitle = '公海线索'
|
||||
this.dialogWidth = '900px'
|
||||
this.componentName = 'PublicTable'
|
||||
this.dialogFormOptions = {
|
||||
userOptions: this.userOptions,
|
||||
}
|
||||
this.dialogFooterShow = false
|
||||
this.form = {}
|
||||
this.dialogShow = true
|
||||
},
|
||||
handleDiscard(item) {
|
||||
discardClue(item).then((resp) => {
|
||||
if (resp && resp.code == 200) {
|
||||
this.$message.success('释放成功')
|
||||
this.getPageList()
|
||||
}
|
||||
})
|
||||
},
|
||||
//停止或启动接收线索
|
||||
handleAccept(accept) {
|
||||
updateAccept({ employeeId: this.employeeId, accept: accept }).then(resp => {
|
||||
if (resp.code == 200) {
|
||||
this.$message.success(accept ? '启动成功' : '停止成功')
|
||||
this.accept = accept;
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
|
||||
73
src/views/zs/components/batchUpdateForm.vue
Normal file
73
src/views/zs/components/batchUpdateForm.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
:disabled="form.signId != undefined"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="跟进人员" prop="followUsers">
|
||||
<el-select v-model="form.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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'BatchUpdateForm',
|
||||
model: {
|
||||
prop: 'info',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userOptions: [],
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
admin: JSON.parse(localStorage.getItem('admin')),
|
||||
form: JSON.parse(JSON.stringify(this.info)),
|
||||
rules: {
|
||||
followUsers: {
|
||||
required: true,
|
||||
message: '跟进人员不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
handler(val) {
|
||||
this.$emit('update', val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
650
src/views/zs/components/clueForm.vue
Normal file
650
src/views/zs/components/clueForm.vue
Normal file
@@ -0,0 +1,650 @@
|
||||
<template>
|
||||
<div style="margin-bottom: 50px">
|
||||
<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 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 popper-class="my-autocomplete" class="search-body" placeholder="请输入..." v-model="searchBody" :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>
|
||||
|
||||
<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') {
|
||||
let 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>
|
||||
95
src/views/zs/components/distributeForm.vue
Normal file
95
src/views/zs/components/distributeForm.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="线下接待人员" prop="offlineReceiver">
|
||||
<el-input v-if="form.offlineReceiverName" v-model="form.offlineReceiverName" disabled />+
|
||||
<el-select v-model="form.offlineReceiver" multiple filterable placeholder="请选择" style="width:97%; padding-top:5px;">
|
||||
<el-option v-for="dict in options.userOptions.filter(item => !options.offlineReceiver || !options.offlineReceiver.includes(item.id))" :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="memo">
|
||||
<el-input v-model="form.memo" type="textarea" :rows="4" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col v-if="distributeRecord != undefined && distributeRecord.length > 0" :span="24">
|
||||
<el-form-item label="甩单记录">
|
||||
<el-timeline style="max-height:260px;overflow-y:auto;">
|
||||
<el-timeline-item v-for="item in distributeRecord" :key="item.record" :timestamp="item.operateTime" placement="top" style="padding:5px !important;">
|
||||
<el-card>
|
||||
<span style="display:block;font-weight: bold; font-size:13px;">用户 {{ item.operateUserName }}</span>
|
||||
<span style="display:block;padding-left: 10px; font-size:13px;" v-html="item.centent" />
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDistributeRecord } from '@/api/zs/clue'
|
||||
export default {
|
||||
name: 'DistributeForm',
|
||||
model: {
|
||||
prop: 'info',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userOptions: [],
|
||||
offlineReceiver: [],
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: JSON.parse(JSON.stringify(this.info)),
|
||||
rules: {
|
||||
offlineReceiver: {
|
||||
required: true,
|
||||
message: '线下接待人员不为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
},
|
||||
distributeRecord: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
handler(val) {
|
||||
this.$emit('update', val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.handleDistribute()
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
handleDistribute() {
|
||||
// 甩单
|
||||
getDistributeRecord({ clueId: this.form.clueId }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
this.distributeRecord = resp.data
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
73
src/views/zs/components/filterForm.vue
Normal file
73
src/views/zs/components/filterForm.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.myCreate" label="myCreate">我创建的</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.myValid" label="myValid">我的有效</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.valid" label="valid">有效线索</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.todayValid" label="todayValid">今日有效线索</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.todayFollow" label="todayFollow">今日跟踪</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.outtime" label="outtime">过期线索</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.relate" label="relate">相关线索</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="form.reSign" label="reSign">撞单线索</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FilterForm',
|
||||
model: {
|
||||
prop: 'info',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userOptions: [],
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: JSON.parse(JSON.stringify(this.info)),
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
handler(val) {
|
||||
this.$emit('update', val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
84
src/views/zs/components/publicTable.vue
Normal file
84
src/views/zs/components/publicTable.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="text" icon="el-icon-refresh" style="margin-bottom:10px;" @click="handleQuery">刷新</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="getList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getPublicList, pickupClue } from '@/api/zs/clue'
|
||||
export default {
|
||||
name: 'PublicTable',
|
||||
data() {
|
||||
return {
|
||||
publicList: [],
|
||||
loading: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
total: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
// this.timer = setInterval(() => {
|
||||
// this.getList()
|
||||
// }, 5000)
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
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
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePickup(item) {
|
||||
pickupClue(item).then((resp) => {
|
||||
if (resp && resp.code == 200) {
|
||||
this.$message.success('拾取成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (row.followUser2 || row.followUser) {
|
||||
return 'warning-row'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.el-table .warning-row {
|
||||
background: oldlace;
|
||||
}
|
||||
</style>
|
||||
416
src/views/zs/components/signForm.vue
Normal file
416
src/views/zs/components/signForm.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="form.signId != undefined && !form.signEdit">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学员姓名">
|
||||
<el-input v-model="form.name" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学员联系方式">
|
||||
<el-input v-model="form.phone" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="线索来源">
|
||||
<el-select v-model="form.source" disabled>
|
||||
<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="12">
|
||||
<el-form-item label="是否全款" prop="state">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio :label="true">全款</el-radio>
|
||||
<el-radio :label="false">非全款</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成交日期" prop="dealDate">
|
||||
<el-date-picker v-model="form.dealDate" :picker-options="dateControl" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="报名价格(元)" prop="signPrice">
|
||||
<el-input v-model="form.signPrice" placeholder="学员报名时需要交纳总共的钱" @blur="priceChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="报名驾校" prop="signSchool">
|
||||
<el-select v-model="form.signSchool" filterable placeholder="请选择" @change="schoolChange">
|
||||
<el-option v-for="dict in schoolOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="报名场地" prop="signPlace">
|
||||
<el-select v-model="form.signPlace" filterable placeholder="请选择" @change="placeChange">
|
||||
<el-option v-for="dict in options.placeInfo.filter(item =>item.deptId === form.signSchool)" :key="dict.placeId" :label="dict.name" :value="dict.placeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="报名班型" prop="signClass">
|
||||
<el-select v-model="form.signClass" filterable placeholder="请选择" @change="priceChange">
|
||||
<el-option v-for="dict in classTypeOptions.filter(item =>((!item.placeId && item.deptId === form.signSchool) || item.placeId === form.signPlace))" :key="dict.typeId" :label="`${dict.licenseType}-${dict.typeName}`" :value="dict.typeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="对接人" prop="schoolPeople">
|
||||
<el-input v-model="form.schoolPeople" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驾校支付" prop="schoolPay">
|
||||
<el-input v-model="form.schoolPay" type="number" placeholder="请输入驾校支付金额" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驾考宝典款" prop="alipay">
|
||||
<el-input v-model="form.alipay" placeholder="请输入驾考宝典款金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="额外支出" prop="extraPayType">
|
||||
<el-select v-model="form.extraPayTypes" filterable placeholder="请选择" multiple clearable>
|
||||
<el-option v-for="dict in extraPayTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="额外支出金额" prop="extraPay">
|
||||
<el-input v-model="form.extraPay" placeholder="请输入额外支出金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属人员" prop="followUser">
|
||||
<el-select v-model="form.followUser" multiple placeholder="请选择" clearable :disabled="true">
|
||||
<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-col :span="12">
|
||||
<el-form-item label="所属区域" prop="area">
|
||||
<el-select v-model="form.area" placeholder="请选择" clearable>
|
||||
<el-option v-for="dict in areaOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="admin" :span="12">
|
||||
<el-form-item label="佣金明细" prop="commission">
|
||||
<el-select v-model="form.commission" placeholder="请选择" clearable>
|
||||
<el-option v-for="dict in commissionOptions" :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="memo">
|
||||
<el-input v-model="form.memo" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="凭据" prop="evidence">
|
||||
<el-upload action="#" class="evidence-uploader" :http-request="handleUploadFile" accept="image/*" :show-file-list="false" multiple>
|
||||
<i class="el-icon-plus evidence-uploader-icon" />
|
||||
</el-upload>
|
||||
<div v-for="(item, index) in form.fileList" :key="index" class="pr dib">
|
||||
<el-image class="image-list-item" fit="contain" :src="preUrl + item" :preview-src-list="form.fileList.map(url => preUrl + url)" lazy />
|
||||
<i class="el-icon-close btn-close" @click="handleRemoveImage(index,item)" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="checkRecord && checkRecord.length > 0">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="审核记录">
|
||||
<el-timeline style="max-height:260px;overflow-y:auto;">
|
||||
<el-timeline-item v-for="item in checkRecord" :key="item.record" :timestamp="item.operateTime" placement="top" style="padding:5px !important;">
|
||||
<el-card>
|
||||
<span style="display:block;font-weight: bold; font-size:13px;">用户 {{ item.operateUserName }}</span>
|
||||
<span style="display:block;padding-left: 10px; font-size:13px;" v-html="item.centent" />
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validateMoney } from '@/utils/validate'
|
||||
import {
|
||||
getSchools,
|
||||
getClassTypeInfo,
|
||||
uploadEvidence,
|
||||
deleteFile,
|
||||
} from '@/api/tool/common'
|
||||
import { getCheckRecord } from '@/api/zs/sign'
|
||||
export default {
|
||||
name: 'SignForm',
|
||||
model: {
|
||||
prop: 'info',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userOptions: [],
|
||||
sourceOptions: [],
|
||||
placeInfo: [],
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
admin: JSON.parse(localStorage.getItem('admin')),
|
||||
preUrl: process.env.VUE_APP_BASE_API,
|
||||
form: JSON.parse(JSON.stringify(this.info)),
|
||||
rules: {
|
||||
area: {
|
||||
required: true,
|
||||
message: '所属区域不为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
dealDate: {
|
||||
required: true,
|
||||
message: '成交时间不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
state: {
|
||||
required: true,
|
||||
message: '是否权限必选',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
followUser: {
|
||||
required: true,
|
||||
message: '归属人员不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
signSchool: {
|
||||
required: true,
|
||||
message: '报名驾校不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
signPlace: {
|
||||
required: true,
|
||||
message: '报名场地不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
signClass: {
|
||||
required: true,
|
||||
message: '报名班型不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
dealState: {
|
||||
required: true,
|
||||
message: '结算情况不为空',
|
||||
trigger: 'blur,change',
|
||||
},
|
||||
signPrice: {
|
||||
required: true,
|
||||
validator: validateMoney,
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
schoolOptions: [],
|
||||
placeOptions: [],
|
||||
classTypeOptions: [],
|
||||
areaOptions: [],
|
||||
commissionOptions: [],
|
||||
extraPayTypeOptions: [],
|
||||
dateControl: undefined,
|
||||
checkRecord: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
handler(val) {
|
||||
this.$emit('update', val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (!this.form.fileList) {
|
||||
this.$set(this.form, 'fileList', [])
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
// 佣金明细
|
||||
this.getDicts('dm_commission').then((response) => {
|
||||
this.commissionOptions = response.data
|
||||
})
|
||||
// 额外支出类型
|
||||
this.getDicts('dm_extra_pay').then((response) => {
|
||||
this.extraPayTypeOptions = response.data
|
||||
})
|
||||
// 所属区域
|
||||
this.getDicts('dm_area').then((response) => {
|
||||
this.areaOptions = response.data
|
||||
})
|
||||
// 驾校
|
||||
getSchools().then((resp) => {
|
||||
this.schoolOptions = resp.data
|
||||
})
|
||||
// 班型
|
||||
getClassTypeInfo({ status: '0' }).then((resp) => {
|
||||
this.classTypeOptions = resp.data
|
||||
})
|
||||
// 审核记录
|
||||
this.form.signId &&
|
||||
getCheckRecord({
|
||||
signId: this.form.signId,
|
||||
type: 1,
|
||||
}).then((resp) => {
|
||||
this.checkRecord = resp.data
|
||||
})
|
||||
// 未登记并且非管理员，添加日期规则
|
||||
if (!this.form.signId) {
|
||||
let start = new Date()
|
||||
// 取1号
|
||||
start.setDate(1)
|
||||
// 5号之前可操作上个月，注意跨年
|
||||
if (new Date().getDate() < 5) {
|
||||
if (start.getMonth() > 0) {
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
} else {
|
||||
start.setFullYear(start.getFullYear() - 1)
|
||||
start.setMonth(11)
|
||||
}
|
||||
}
|
||||
// 因为new Date()出来的时间戳，包含时分秒，判断日期时需要减一天
|
||||
start = start.getTime() - 24 * 60 * 60 * 1000
|
||||
this.dateControl = {
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() < start || time.getTime() > new Date()
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
// 驾校change事件
|
||||
schoolChange() {
|
||||
this.$set(this.form, 'signPlace', undefined)
|
||||
this.$set(this.form, 'signClass', undefined)
|
||||
},
|
||||
placeChange() {
|
||||
this.$set(this.form, 'signClass', undefined)
|
||||
this.$set(
|
||||
this.form,
|
||||
'schoolPeople',
|
||||
this.options.placeInfo.find(
|
||||
(item) => item.placeId === this.form.signPlace
|
||||
).contact
|
||||
)
|
||||
this.$set(
|
||||
this.form,
|
||||
'area',
|
||||
this.options.placeInfo.find(
|
||||
(item) => item.placeId === this.form.signPlace
|
||||
).area
|
||||
)
|
||||
// this.form.schoolPeople = this.options.placeInfo.find(
|
||||
// (item) => item.placeId === this.form.signPlace
|
||||
// ).contact
|
||||
},
|
||||
async handleUploadFile(data) {
|
||||
if (data.file) {
|
||||
const size = data.file.size
|
||||
const limitSize = 20 * 1024 * 1024 // 20M大小限制
|
||||
if (size < limitSize) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', data.file)
|
||||
const resp = await uploadEvidence(formData)
|
||||
if (resp.code === 200) {
|
||||
this.form.fileList.push(resp.data)
|
||||
}
|
||||
} else {
|
||||
this.msgInfo('文件过大')
|
||||
}
|
||||
}
|
||||
},
|
||||
handleRemoveImage(index, item) {
|
||||
deleteFile(item).then((resp) => {
|
||||
if (resp && resp.data)
|
||||
// 最好先通过接口删除服务器图片
|
||||
this.form.fileList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
priceChange() {
|
||||
//计算驾校支付款 报名价格-班型底价
|
||||
if (this.form.signClass && this.form.signPrice) {
|
||||
let minprice
|
||||
this.classTypeOptions.some((item) => {
|
||||
if (item.typeId == this.form.signClass) {
|
||||
minprice = item.minPrice
|
||||
return item
|
||||
}
|
||||
})
|
||||
if (minprice) {
|
||||
this.$set(this.form, 'schoolPay', this.form.signPrice - minprice)
|
||||
}
|
||||
} else {
|
||||
this.$set(this.form, 'schoolPay', undefined)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.evidence-uploader {
|
||||
display: inline-block;
|
||||
.el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.evidence-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-list-item {
|
||||
height: 100px;
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 2px;
|
||||
font-size: 20px;
|
||||
background: #f2f6fc;
|
||||
}
|
||||
</style>
|
||||
0
src/views/zs/sign.vue
Normal file
0
src/views/zs/sign.vue
Normal file
Reference in New Issue
Block a user