CRM项目前端实现删除修改线索备注的逻辑和对应效果——CRM项目

{{clueDetail.ownerDO.name}}{{clueDetail.activityDO.name}}{{clueDetail.fullName}}{{clueDetail.appellationDO.typeValue}}{{clueDetail.phone}}{{clueDetail.weixin}}{{clueDetail.qq}}{{clueDetail.email}}{{clueDetail.age}}{{clueDetail.job}}{{clueDetail.yearIncome}}{{clueDetail.address}}{{clueDetail.needLoanDO.typeValue}}{{clueDetail.intentionStateDO.typeValue}}{{clueDetail.intentionProductDO.name}}{{clueDetail.stateDO.typeValue}}{{clueDetail.sourceDO.typeValue}}{{clueDetail.description}}{{clueDetail.nextContactTime}}提 交转换客户返 回编辑删除取消确定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("提交成功","success");this.reload();}else{messageTip("提交失败","error");}});}else{messageTip("请输入完整的信息","warning");}});},//加载字典数据loadDicValue(typeCode) {doGet("/api/dicValue/" + typeCode, {}).then( resp => {if (resp.data.code === 200) {this.noteWayOptions = resp.data.data;}else{messageTip("网络错误","error");}});},// 删除线索备注del(id){messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {doDelete("/api/clue/remark/delete/"+id,{}).then(resp => {if(resp.data.code === 200){messageTip("删除成功","success");this.reload();}else{messageTip("删除失败:"+resp.data.msg,"error");}});}).catch(() => {messageTip("已取消删除","warning");});},// 自动传参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("修改成功","success");this.reload();}else{messageTip("修改失败","error");}})}});}},data(){return {clueRemark : {},clueRemarkRules : {},clueDetail : {ownerDO : {},activityDO : {},appellationDO : {},needLoanDO : {},intentionStateDO : {},intentionProductDO : {},stateDO : {},sourceDO: {}},noteWayOptions : [{}],//线索跟踪记录列表，初始值是空clueRemarkList : [{noteWayDO : {},createByDO : {},editByDO : {}}],total : 0,pageSize : 0,clueRemarkRules : {noteContent : [{ required: true, message: '请输入线索备注', trigger: 'blur' },{ min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }]},clueRemarkEdit : {},dialogVisible : false}}}

<el-form

ref=”clueRemarkForm”

:model=”clueRemark”

label-width=”110px”

:rules=”clueRemarkRules”

>

{{clueDetail.ownerDO.name}}

{{clueDetail.activityDO.name}}

{{clueDetail.fullName}}

{{clueDetail.appellationDO.typeValue}}

{{clueDetail.phone}}

{{clueDetail.weixin}}

{{clueDetail.qq}}

{{clueDetail.email}}

{{clueDetail.age}}

{{clueDetail.job}}

{{clueDetail.yearIncome}}

{{clueDetail.address}}

{{clueDetail.needLoanDO.typeValue}}

{{clueDetail.intentionStateDO.typeValue}}

{{clueDetail.intentionProductDO.name}}

{{clueDetail.stateDO.typeValue}}

{{clueDetail.sourceDO.typeValue}}

{{clueDetail.description}}

{{clueDetail.nextContactTime}}

<el-input

v-model=”clueRemark.noteContent”

:rows=”8″

type=”textarea”/>

<el-select

v-model=”clueRemark.noteWay”

placeholder=”请选择跟踪方式”

@click=”loadDicValue(‘noteWay’)”

clearable>

<el-option

v-for=”item in noteWayOptions”

:key=”item.id”

:label=”item.typeValue”

:value=”item.id”/>

提 交

转换客户

返 回

<el-table

:data=”clueRemarkList”

>

编辑

删除

<el-pagination

background

layout=”prev, pager, next”

:page-size=”pageSize”

:total=”total”

@prev-click=”toPage”

@next-click=”toPage”

@current-change=”toPage”/>

<el-input

v-model=”clueRemarkEdit.noteContent”

:rows=”8″

type=”textarea”

placeholder=”请输入活动备注”

/>

取消

确定

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(“提交成功”,”success”);

this.reload();

}

else{

messageTip(“提交失败”,”error”);

}

});

}

else{

messageTip(“请输入完整的信息”,”warning”);

}

});

},

//加载字典数据

loadDicValue(typeCode) {

doGet(“/api/dicValue/” + typeCode, {}).then( resp => {

if (resp.data.code === 200) {

this.noteWayOptions = resp.data.data;

}

else{

messageTip(“网络错误”,”error”);

}

});

},

// 删除线索备注

del(id){

messageConfirm(“注意:删除后不可恢复”,”您确定要删除?”).then(() => {

doDelete(“/api/clue/remark/delete/”+id,{}).then(resp => {

if(resp.data.code === 200){

messageTip(“删除成功”,”success”);

this.reload();

}

else{

messageTip(“删除失败:”+resp.data.msg,”error”);

}

});

}).catch(() => {

messageTip(“已取消删除”,”warning”);

});

},

// 自动传参

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(“修改成功”,”success”);

this.reload();

}

else{

messageTip(“修改失败”,”error”);

}

})

}

});

}

},

data(){

return {

clueRemark : {},

clueRemarkRules : {},

clueDetail : {

ownerDO : {},

activityDO : {},

appellationDO : {},

needLoanDO : {},

intentionStateDO : {},

intentionProductDO : {},

stateDO : {},

sourceDO : {}

},

noteWayOptions : [{}],

//线索跟踪记录列表，初始值是空

clueRemarkList : [{

noteWayDO : {},

createByDO : {},

editByDO : {}

}],

total : 0,

pageSize : 0,

clueRemarkRules : {

noteContent : [

{ required: true, message: ‘请输入线索备注’, trigger: ‘blur’ },

{ min: 5, max: 255, message: ‘活动备注长度为5-255字符’, trigger: ‘blur’ }

]

},

clueRemarkEdit : {},

dialogVisible : false

}

}

}