forked from qiushanhe/dm-manage-web
parent
f727796d1f
commit
85a36e7fd9
@ -0,0 +1,257 @@ |
||||
|
||||
<template> |
||||
<div style="margin-bottom: 50px"> |
||||
<el-dialog title="抖音线索" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="700px" @close="visible = false"> |
||||
<el-form ref="clueForm" :model="clueForm" :rules="rules" label-width="110px"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="创建时间" prop="createTime"> |
||||
<el-date-picker style="width: 100%;" v-model="clueForm.createTime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" :disabled="admin!='true'" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="线索来源" prop="source"> |
||||
<el-select style="width: 100%;" v-model="clueForm.source" placeholder="请选择" clearable> |
||||
<el-option v-for="dict in sourceOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="姓名" prop="name"> |
||||
<el-input v-model="clueForm.name" placeholder="请输入姓名" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="联系方式" prop="phone"> |
||||
<el-input v-model="clueForm.phone" placeholder="请输入联系方式" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="商品名称" prop="goodName"> |
||||
<el-input v-model="clueForm.goodName" placeholder="请输入微信号" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="订单实收" prop="amountReceived"> |
||||
<el-input v-model="clueForm.amountReceived" placeholder="请输入微信号" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="跟进人员" prop="followUser"> |
||||
<el-select style="width: 100%;" v-model="clueForm.followUser" multiple clearable :disabled="admin != 'true' && clueForm.clueId != undefined"> |
||||
<el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-form-item label="意向状态" prop="intentionState"> |
||||
<el-select style="width: 100%;" v-model="clueForm.intentionState" placeholder="请选择" clearable> |
||||
<el-option v-for="dict in intentionOptions.filter(item => item.remark == undefined || item.remark == '抖音')" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"> |
||||
<i class="el-icon-star-on" :style="dict.cssClass" /> |
||||
<span style="float: right; color: #8492a6; font-size: 13px"> |
||||
{{ dict.dictValue }} |
||||
</span> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="核销时间" prop="writeOffTime"> |
||||
<el-date-picker style="width: 100%;" v-model="clueForm.writeOffTime" 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="followTime"> |
||||
<el-date-picker style="width: 100%;" v-model="clueForm.followTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="备注" prop="clueMemo"> |
||||
<el-input v-model="clueForm.clueMemo" type="textarea" :rows="5" maxlength="10009" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<!-- 跟进记录 --> |
||||
<el-col :span="24" style="margin-top: 20px;"> |
||||
<el-form-item label="跟进记录" prop="clueMemo" label-position="top"> |
||||
<FollowRecord v-if="clueId" :clueId="clueId" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
|
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button plain @click="(visible = false)">取消</el-button> |
||||
<el-button v-jclick type="primary" :disabled="!canSubmit" @click="clueSubmit()">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
<!-- eslint-disable no-undef --> |
||||
<script> |
||||
import { getConsultRecord, addClue, updateClue, } from '@/api/zs/clue' |
||||
import empApi from '@/api/system/employee' |
||||
|
||||
import FollowRecord from '../ClueForm/components/FollowRecord.vue'; |
||||
// import AMap from 'AMap'; |
||||
export default { |
||||
name: 'ClueForm', |
||||
components: { |
||||
FollowRecord |
||||
}, |
||||
data() { |
||||
return { |
||||
admin: localStorage.getItem('admin'), |
||||
userId: localStorage.getItem('userId'), |
||||
clueId: undefined, |
||||
clueForm: { |
||||
followTime: undefined |
||||
}, |
||||
rules: { |
||||
name: { required: true, message: '姓名不为空', trigger: 'blur' }, |
||||
phone: [{ required: true, message: '联系方式不为空', trigger: 'blur' }, |
||||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, 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' }, |
||||
goodName: { required: true, message: '商品名称不为空', trigger: 'blur,change' }, |
||||
amountReceived: { required: true, message: '订单实收不为空', trigger: 'blur,change' } |
||||
|
||||
|
||||
}, |
||||
userOptions: [],//跟进人员 |
||||
sourceOptions: [],//线索来源 |
||||
intentionOptions: [],//意向状态 |
||||
placeList: [],//场地信息 |
||||
mapDialogVisible: false, |
||||
consultRecord: [], |
||||
canSubmit: true, |
||||
saveNextShow: true, |
||||
saveNext: false, |
||||
visible: false |
||||
}; |
||||
}, |
||||
created() { |
||||
|
||||
this.getEmployee(); |
||||
|
||||
// 线索来源 |
||||
this.getDicts('dm_source').then((response) => { |
||||
this.sourceOptions = response.data; |
||||
}); |
||||
// 意向状态 |
||||
this.getDicts('dm_intention_state').then((response) => { |
||||
this.intentionOptions = response.data.filter(item => item.remark == undefined || item.remark == '抖音'); |
||||
}); |
||||
}, |
||||
|
||||
methods: { |
||||
init(info){ |
||||
this.canSubmit = true; |
||||
this.$nextTick(() => { |
||||
this.resetDialogForm(); |
||||
// this.$refs['dialogForm'].resetFields(); |
||||
if (info) { |
||||
this.clueForm = this.deepClone(info); |
||||
if(this.clueForm.clueId){ |
||||
this.clueId = this.clueForm.clueId |
||||
this.getConsultRecord(this.clueForm.phone); |
||||
} |
||||
} |
||||
this.visible = true; |
||||
|
||||
}); |
||||
}, |
||||
resetDialogForm() { |
||||
this.clueForm = { |
||||
clueId: undefined, |
||||
createTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), |
||||
consultTime: undefined, |
||||
source: "抖音直播", |
||||
name: undefined, |
||||
phone: undefined, |
||||
address: undefined, |
||||
intentionState: undefined, |
||||
followInfo: undefined, |
||||
followTime: undefined, |
||||
followUser: [], |
||||
signupInfo: undefined, |
||||
requirement: undefined, |
||||
licenseType: undefined, |
||||
lng: undefined, |
||||
lat: undefined, |
||||
goodName: undefined, |
||||
amountReceived: undefined, |
||||
writeOffTime: undefined |
||||
} |
||||
|
||||
if (this.admin == 'false') { |
||||
this.clueForm.followUser.push(Number(this.userId)) |
||||
} |
||||
}, |
||||
// 查询咨询记录 |
||||
getConsultRecord(phone) { |
||||
getConsultRecord({ phone }).then((resp) => { |
||||
if (resp && resp.code === 200 && resp.data) { |
||||
this.consultRecord = resp.data |
||||
if (this.consultRecord && this.consultRecord.length > 0) { |
||||
this.clueForm.consultCount = this.consultRecord.length |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 查询不能接收线索的员工 |
||||
getEmployee() { |
||||
empApi.getEmployee().then((resp) => { |
||||
if (resp.code === 200) { |
||||
this.userOptions = resp.data; |
||||
// this.userOptions = this.userOptions.filter((item) => { |
||||
// return item.accept; |
||||
// }); |
||||
} |
||||
}); |
||||
}, |
||||
//表单提交 |
||||
clueSubmit() { |
||||
this.$refs.clueForm.validate(async (valid) => { |
||||
if (valid) { |
||||
this.canSubmit = false |
||||
let resp |
||||
if (this.clueForm.clueId) { |
||||
resp = await updateClue(this.clueForm) |
||||
this.canSubmit = true |
||||
if (resp.code === 200) { |
||||
this.$message.success('修改成功') |
||||
this.$emit('refreshDataList'); |
||||
this.visible = false |
||||
} |
||||
} else { |
||||
resp = await addClue(this.clueForm) |
||||
this.canSubmit = false |
||||
if (resp.code === 200) { |
||||
if (resp.data && resp.data == 1) { |
||||
this.$message({ |
||||
message: resp.msg, |
||||
type: 'warning' |
||||
}); |
||||
} else { |
||||
this.$message.success('新增成功') |
||||
|
||||
} |
||||
this.$emit('refreshDataList'); |
||||
this.visible = false |
||||
|
||||
} |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue