<template> <el-form ref="clueRemarkForm" :model="clueRemark" label-width="110px" :rules="clueRemarkRules" style="max-width: 95%;"> <el-form-item label="负责人"> <div class="detail">{{clueDetail.ownerDO.name}} </div> </el-form-item> <el-form-item label="所属活动"> <div class="detail">{{clueDetail.activityDO.name}} </div> </el-form-item> <el-form-item label="姓名"> <div class="detail">{{clueDetail.fullName}} </div> </el-form-item> <el-form-item label="称呼"> <div class="detail">{{clueDetail.appellationDO.typeValue}} </div> </el-form-item> <el-form-item label="手机"> <div class="detail">{{clueDetail.phone}} </div> </el-form-item> <el-form-item label="微信"> <div class="detail">{{clueDetail.weixin}} </div> </el-form-item> <el-form-item label="QQ"> <div class="detail">{{clueDetail.qq}} </div> </el-form-item> <el-form-item label="邮箱"> <div class="detail">{{clueDetail.email}} </div> </el-form-item> <el-form-item label="年龄"> <div class="detail">{{clueDetail.age}} </div> </el-form-item> <el-form-item label="职业"> <div class="detail">{{clueDetail.job}} </div> </el-form-item> <el-form-item label="年收入"> <div class="detail">{{clueDetail.yearIn***e}} </div> </el-form-item> <el-form-item label="住址"> <div class="detail">{{clueDetail.address}} </div> </el-form-item> <el-form-item label="贷款"> <div class="detail">{{clueDetail.needLoanDO.typeValue}} </div> </el-form-item> <el-form-item label="意向状态"> <div class="detail">{{clueDetail.intentionStateDO.typeValue}} </div> </el-form-item> <el-form-item label="意向产品"> <div class="detail">{{clueDetail.intentionProductDO.name}} </div> </el-form-item> <el-form-item label="线索状态"> <div class="detail">{{clueDetail.stateDO.typeValue}} </div> </el-form-item> <el-form-item label="线索来源"> <div class="detail">{{clueDetail.sourceDO.typeValue}} </div> </el-form-item> <el-form-item label="线索描述"> <div class="detail">{{clueDetail.description}} </div> </el-form-item> <el-form-item label="下次联系时间"> <div class="detail">{{clueDetail.nextContactTime}} </div> </el-form-item> <el-form-item label="填写跟踪记录" prop="noteContent"> <el-input v-model="clueRemark.noteContent" :rows="8" type="textarea"/> </el-form-item> <el-form-item label="跟踪方式" prop="noteWay"> <el-select v-model="clueRemark.noteWay" placeholder="请选择跟踪方式" style="width: 100%" @click="loadDicValue('noteWay')" clearable> <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id"/> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button> <el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state">转换客户</el-button> <el-button type="su***ess" plain @click="goBack">返 回</el-button> </el-form-item> </el-form> <el-table :data="clueRemarkList" style="width: 100%"> <el-table-column type="index" label="序号" width="60"/> <el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/> <el-table-column prop="noteContent" label="跟踪内容"/> <el-table-column property="createTime" label="跟踪时间"/> <el-table-column property="createByDO.name" label="跟踪人"/> <el-table-column property="editTime" label="编辑时间"/> <el-table-column property="editByDO.name" label="编辑人"/> <el-table-column label="操作"> <template #default="scope"> <a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a> <a href="javascript:" @click="del(scope.row.id)">删除</a> </template> </el-table-column> </el-table> <div class="parent"> <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage" @next-click="toPage" @current-change="toPage"/> </div> <!-- 编辑弹窗 --> <el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable> <el-form ref="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules"> <el-form-item label="线索备注:" prop="noteContent"> <el-input v-model="clueRemarkEdit.noteContent" :rows="8" type="textarea" placeholder="请输入活动备注" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="editSubmit()"> 确定 </el-button> </div> </template> </el-dialog> <!--线索转换为客户的弹窗(对话框)--> <el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center> <el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules"> <el-form-item label="意向产品" prop="product"> <el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')"> <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"/> </el-select> </el-form-item> <el-form-item label="客户描述" prop="description"> <el-input v-model="customerQuery.description" :rows="8" type="textarea" placeholder="请输入客户描述"/> </el-form-item> <el-form-item label="下次跟踪时间" prop="nextContactTime"> <el-date-picker v-model="customerQuery.nextContactTime" type="datetime" style="width: 100%;" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择下次跟踪时间"/> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="convertCustomerDialogVisible = false">关 闭</el-button> <el-button type="primary" @click="convertCustomerSubmit()">转 换</el-button> </span> </template> </el-dialog> </template> <script> import { doGet, doPost, doDelete, doPut } from '../http/httpRequest'; import { messageTip, goBack, messageConfirm } from '../util/util'; export default { name : "clueDetail", inject : ["reload"], mounted(){ this.loadClueDetail(); this.getData(1); }, methods : { goBack, loadClueDetail(){ let id = this.$route.params.id; doGet("/api/clue/"+id,{}).then(resp => { if(resp.data.code === 200){ this.clueDetail = resp.data.data; } else{ messageTip("网络异常","error"); } }); }, // 提交线索跟踪记录 clueRemarkSubmit(){ this.$refs.clueRemarkForm.validate((isValid) => { if(this.clueRemark.noteContent&&this.clueRemark.noteWay){ doPost("/api/clue/remark/add", { clueId : this.clueDetail.id, noteContent : this.clueRemark.noteContent, noteWay : this.clueRemark.noteWay } ).then(resp => { if(resp.data.code === 200){ messageTip("提交成功","su***ess"); this.reload(); } else{ messageTip("提交失败","error"); } }); } else{ messageTip("请输入完整的信息","warning"); } }); }, //加载字典数据 loadDicValue(typeCode) { doGet("/api/dicValue/" + typeCode, {}).then( resp => { if (resp.data.code === 200) { if(typeCode === 'noteWay'){ this.noteWayOptions = resp.data.data; } else if(typeCode === 'product'){ this.productOptions = resp.data.data; } } else{ messageTip("网络错误","error"); } }); }, // 提交转换客户 convertCustomerSubmit(){ this.$refs.convertCustomerRefForm.validate((isVaild) => { if(this.customerQuery.description&&this.customerQuery.product&&this.customerQuery.nextContactTime){ doPost("/api/clue/customer",{ clueId : this.clueDetail.id, product : this.customerQuery.product, description : this.customerQuery.description, nextContactTime : this.customerQuery.nextContactTime }).then(resp => { if(resp.data.code === 200){ messageTip("客户转换成功","su***ess"); this.reload(); } else{ messageTip("客户转换失败","error"); } }); } }); }, // 删除线索备注 del(id){ messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => { doDelete("/api/clue/remark/delete/"+id,{}).then(resp => { if(resp.data.code === 200){ messageTip("删除成功","su***ess"); this.reload(); } else{ messageTip("删除失败:"+resp.data.msg,"error"); } }); }).catch(() => { messageTip("已取消删除","warning"); }); }, convertCustomer(){ this.convertCustomerDialogVisible = true; }, // 自动传参 toPage(current){ // 把当前页作为current传递给获取数据方法,就可以实现分页查询了 this.getData(current); }, // 获取分页信息 getData(current){ //获取数据,查询用户列表数据 doGet("/api/clue/remark/page",{ // 当前查询第几页 current : current, id : this.$route.params.id }).then(resp => { if(resp.data.code === 200){ this.clueRemarkList = resp.data.data.list; console.log(this.clueRemarkList); this.total = resp.data.data.total; this.pageSize = resp.data.data.pageSize; } else{ messageTip("网络错误","error"); } }); }, edit(id,index){ this.dialogVisible = true; this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent; this.clueRemarkEdit.id = id; }, editSubmit(){ this.$refs.clueRemarkRefForm.validate((isValid) => { if(isValid){ doPut("/api/clue/remark/edit",{ clueId : this.$route.params.id, id : this.clueRemarkEdit.id, noteContent : this.clueRemarkEdit.noteContent }).then(resp => { console.log(resp); if(resp.data.code === 200){ messageTip("修改成功","su***ess"); this.reload(); } else{ messageTip("修改失败","error"); } }) } }); } }, data(){ return { // 提交线索备注对象 clueRemark : {}, // 展示的线索信息对象 clueDetail : { state : 0, ownerDO : {}, activityDO : {}, appellationDO : {}, needLoanDO : {}, intentionStateDO : {}, intentionProductDO : {}, stateDO : {}, sourceDO : {} }, // 定义客户对象 customerQuery : {}, // 定义用户弹窗 convertCustomerDialogVisible : false, // 下拉选项 noteWayOptions : [{}], // 产品下拉选项 productOptions : [{}], //线索跟踪记录列表,初始值是空 clueRemarkList : [{ noteWayDO : {}, createByDO : {}, editByDO : {} }], total : 0, pageSize : 0, // 线索备注验证规则 clueRemarkRules : { noteContent : [ { required: true, message: '请输入线索备注', trigger: 'blur' }, { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' } ] }, // 验证规则 //定义线索转换为客户的验证规则 convertCustomerRules : { product : [ { required: true, message: '请选择意向产品', trigger: ['blur', 'change'] } ], description : [ { required: true, message: '客户描述不能为空', trigger: 'blur' }, { min: 5, max: 255, message: '客户描述长度为5-255个字符', trigger: 'blur' } ], nextContactTime : [ { required: true, message: '请选择下次联系时间', trigger: 'blur' } ] }, // 修改线索备注对象 clueRemarkEdit : {}, // 修改线索备注框对象 dialogVisible : false } } } </script> <style scoped> </style>
<template>
<el-form
ref="clueRemarkForm"
:model="clueRemark"
label-width="110px"
:rules="clueRemarkRules"
style="max-width: 95%;">
<el-form-item label="负责人">
<div class="detail">{{clueDetail.ownerDO.name}} </div>
</el-form-item>
<el-form-item label="所属活动">
<div class="detail">{{clueDetail.activityDO.name}} </div>
</el-form-item>
<el-form-item label="姓名">
<div class="detail">{{clueDetail.fullName}} </div>
</el-form-item>
<el-form-item label="称呼">
<div class="detail">{{clueDetail.appellationDO.typeValue}} </div>
</el-form-item>
<el-form-item label="手机">
<div class="detail">{{clueDetail.phone}} </div>
</el-form-item>
<el-form-item label="微信">
<div class="detail">{{clueDetail.weixin}} </div>
</el-form-item>
<el-form-item label="QQ">
<div class="detail">{{clueDetail.qq}} </div>
</el-form-item>
<el-form-item label="邮箱">
<div class="detail">{{clueDetail.email}} </div>
</el-form-item>
<el-form-item label="年龄">
<div class="detail">{{clueDetail.age}} </div>
</el-form-item>
<el-form-item label="职业">
<div class="detail">{{clueDetail.job}} </div>
</el-form-item>
<el-form-item label="年收入">
<div class="detail">{{clueDetail.yearIn***e}} </div>
</el-form-item>
<el-form-item label="住址">
<div class="detail">{{clueDetail.address}} </div>
</el-form-item>
<el-form-item label="贷款">
<div class="detail">{{clueDetail.needLoanDO.typeValue}} </div>
</el-form-item>
<el-form-item label="意向状态">
<div class="detail">{{clueDetail.intentionStateDO.typeValue}} </div>
</el-form-item>
<el-form-item label="意向产品">
<div class="detail">{{clueDetail.intentionProductDO.name}} </div>
</el-form-item>
<el-form-item label="线索状态">
<div class="detail">{{clueDetail.stateDO.typeValue}} </div>
</el-form-item>
<el-form-item label="线索来源">
<div class="detail">{{clueDetail.sourceDO.typeValue}} </div>
</el-form-item>
<el-form-item label="线索描述">
<div class="detail">{{clueDetail.description}} </div>
</el-form-item>
<el-form-item label="下次联系时间">
<div class="detail">{{clueDetail.nextContactTime}} </div>
</el-form-item>
<el-form-item label="填写跟踪记录" prop="noteContent">
<el-input
v-model="clueRemark.noteContent"
:rows="8"
type="textarea"/>
</el-form-item>
<el-form-item label="跟踪方式" prop="noteWay">
<el-select
v-model="clueRemark.noteWay"
placeholder="请选择跟踪方式"
style="width: 100%"
@click="loadDicValue('noteWay')"
clearable>
<el-option
v-for="item in noteWayOptions"
:key="item.id"
:label="item.typeValue"
:value="item.id"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
<el-button type="su***ess" @click="convertCustomer" v-if="clueDetail.state">转换客户</el-button>
<el-button type="su***ess" plain @click="goBack">返 回</el-button>
</el-form-item>
</el-form>
<el-table
:data="clueRemarkList"
style="width: 100%">
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>
<el-table-column prop="noteContent" label="跟踪内容"/>
<el-table-column property="createTime" label="跟踪时间"/>
<el-table-column property="createByDO.name" label="跟踪人"/>
<el-table-column property="editTime" label="编辑时间"/>
<el-table-column property="editByDO.name" label="编辑人"/>
<el-table-column label="操作">
<template #default="scope">
<a href="javascript:" @click="edit(scope.row.id,scope.$index)">编辑</a>
<a href="javascript:" @click="del(scope.row.id)">删除</a>
</template>
</el-table-column>
</el-table>
<div class="parent">
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@prev-click="toPage"
@next-click="toPage"
@current-change="toPage"/>
</div>
<!-- 编辑弹窗 -->
<el-dialog v-model="dialogVisible" label-width="10%" :title="Title" width="55%" draggable>
<el-form ref="clueRemarkRefForm" :model="clueRemarkEdit" :rules="clueRemarkRules">
<el-form-item label="线索备注:" prop="noteContent">
<el-input
v-model="clueRemarkEdit.noteContent"
:rows="8"
type="textarea"
placeholder="请输入活动备注"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="editSubmit()">
确定
</el-button>
</div>
</template>
</el-dialog>
<!--线索转换为客户的弹窗(对话框)-->
<el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>
<el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">
<el-form-item label="意向产品" prop="product">
<el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')">
<el-option
v-for="item in productOptions"
:key="item.id"
:label="item.name"
:value="item.id"/>
</el-select>
</el-form-item>
<el-form-item label="客户描述" prop="description">
<el-input
v-model="customerQuery.description"
:rows="8"
type="textarea"
placeholder="请输入客户描述"/>
</el-form-item>
<el-form-item label="下次跟踪时间" prop="nextContactTime">
<el-date-picker
v-model="customerQuery.nextContactTime"
type="datetime"
style="width: 100%;"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择下次跟踪时间"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="convertCustomerDialogVisible = false">关 闭</el-button>
<el-button type="primary" @click="convertCustomerSubmit()">转 换</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import { doGet, doPost, doDelete, doPut } from '../http/httpRequest';
import { messageTip, goBack, messageConfirm } from '../util/util';
export default {
name : "clueDetail",
inject : ["reload"],
mounted(){
this.loadClueDetail();
this.getData(1);
},
methods : {
goBack,
loadClueDetail(){
let id = this.$route.params.id;
doGet("/api/clue/"+id,{}).then(resp => {
if(resp.data.code === 200){
this.clueDetail = resp.data.data;
}
else{
messageTip("网络异常","error");
}
});
},
// 提交线索跟踪记录
clueRemarkSubmit(){
this.$refs.clueRemarkForm.validate((isValid) => {
if(this.clueRemark.noteContent&&this.clueRemark.noteWay){
doPost("/api/clue/remark/add",
{
clueId : this.clueDetail.id,
noteContent : this.clueRemark.noteContent,
noteWay : this.clueRemark.noteWay
}
).then(resp => {
if(resp.data.code === 200){
messageTip("提交成功","su***ess");
this.reload();
}
else{
messageTip("提交失败","error");
}
});
}
else{
messageTip("请输入完整的信息","warning");
}
});
},
//加载字典数据
loadDicValue(typeCode) {
doGet("/api/dicValue/" + typeCode, {}).then( resp => {
if (resp.data.code === 200) {
if(typeCode === 'noteWay'){
this.noteWayOptions = resp.data.data;
}
else if(typeCode === 'product'){
this.productOptions = resp.data.data;
}
}
else{
messageTip("网络错误","error");
}
});
},
// 提交转换客户
convertCustomerSubmit(){
this.$refs.convertCustomerRefForm.validate((isVaild) => {
if(this.customerQuery.description&&this.customerQuery.product&&this.customerQuery.nextContactTime){
doPost("/api/clue/customer",{
clueId : this.clueDetail.id,
product : this.customerQuery.product,
description : this.customerQuery.description,
nextContactTime : this.customerQuery.nextContactTime
}).then(resp => {
if(resp.data.code === 200){
messageTip("客户转换成功","su***ess");
this.reload();
}
else{
messageTip("客户转换失败","error");
}
});
}
});
},
// 删除线索备注
del(id){
messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
doDelete("/api/clue/remark/delete/"+id,{}).then(resp => {
if(resp.data.code === 200){
messageTip("删除成功","su***ess");
this.reload();
}
else{
messageTip("删除失败:"+resp.data.msg,"error");
}
});
}).catch(() => {
messageTip("已取消删除","warning");
});
},
convertCustomer(){
this.convertCustomerDialogVisible = true;
},
// 自动传参
toPage(current){
// 把当前页作为current传递给获取数据方法,就可以实现分页查询了
this.getData(current);
},
// 获取分页信息
getData(current){
//获取数据,查询用户列表数据
doGet("/api/clue/remark/page",{
// 当前查询第几页
current : current,
id : this.$route.params.id
}).then(resp => {
if(resp.data.code === 200){
this.clueRemarkList = resp.data.data.list;
console.log(this.clueRemarkList);
this.total = resp.data.data.total;
this.pageSize = resp.data.data.pageSize;
}
else{
messageTip("网络错误","error");
}
});
},
edit(id,index){
this.dialogVisible = true;
this.clueRemarkEdit.noteContent = this.clueRemarkList[index].noteContent;
this.clueRemarkEdit.id = id;
},
editSubmit(){
this.$refs.clueRemarkRefForm.validate((isValid) => {
if(isValid){
doPut("/api/clue/remark/edit",{
clueId : this.$route.params.id,
id : this.clueRemarkEdit.id,
noteContent : this.clueRemarkEdit.noteContent
}).then(resp => {
console.log(resp);
if(resp.data.code === 200){
messageTip("修改成功","su***ess");
this.reload();
}
else{
messageTip("修改失败","error");
}
})
}
});
}
},
data(){
return {
// 提交线索备注对象
clueRemark : {},
// 展示的线索信息对象
clueDetail : {
state : 0,
ownerDO : {},
activityDO : {},
appellationDO : {},
needLoanDO : {},
intentionStateDO : {},
intentionProductDO : {},
stateDO : {},
sourceDO : {}
},
// 定义客户对象
customerQuery : {},
// 定义用户弹窗
convertCustomerDialogVisible : false,
// 下拉选项
noteWayOptions : [{}],
// 产品下拉选项
productOptions : [{}],
//线索跟踪记录列表,初始值是空
clueRemarkList : [{
noteWayDO : {},
createByDO : {},
editByDO : {}
}],
total : 0,
pageSize : 0,
// 线索备注验证规则
clueRemarkRules : {
noteContent : [
{ required: true, message: '请输入线索备注', trigger: 'blur' },
{ min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
]
},
// 验证规则
//定义线索转换为客户的验证规则
convertCustomerRules : {
product : [
{ required: true, message: '请选择意向产品', trigger: ['blur', 'change'] }
],
description : [
{ required: true, message: '客户描述不能为空', trigger: 'blur' },
{ min: 5, max: 255, message: '客户描述长度为5-255个字符', trigger: 'blur' }
],
nextContactTime : [
{ required: true, message: '请选择下次联系时间', trigger: 'blur' }
]
},
// 修改线索备注对象
clueRemarkEdit : {},
// 修改线索备注框对象
dialogVisible : false
}
}
}
</script>
<style scoped>
</style>