Browse Source

完善客户管理

master
yunuo970428 11 months ago
parent
commit
7390416c5d
  1. 27
      src/api/customerManagement/customerArchives.js
  2. 45
      src/api/customerManagement/customerFollowUp.js
  3. 43
      src/api/customerManagement/customerInformation.js
  4. 18
      src/router/index.js
  5. 261
      src/views/customerManagement/customerArchives/customerArchives.vue
  6. 323
      src/views/customerManagement/customerFollowUp/customerFollowUp.vue
  7. 265
      src/views/customerManagement/customerFollowUp/customerFollowUpAdd.vue
  8. 488
      src/views/customerManagement/customerInformation/customerInformation.vue
  9. 614
      src/views/customerManagement/customerInformation/customerInformationAdd.vue
  10. 299
      src/views/customerManagement/customerInformation/customerInformationInfo.vue

27
src/api/customerManagement/customerArchives.js

@ -0,0 +1,27 @@
import request from '@/utils/request'
export default {
// 查询分页列表
listPage: function(params) {
return request({
url: '/oms/v1/crmcustomerfile/listPage',
method: 'post',
data: params,
headers: { 'Content-Type': 'application/json' }
})
},
fetchBySid: function(data) {
return request({
url: '/oms/v1/crmcustomerfile/fetchFileListBySid/' + data,
method: 'get'
})
},
save: function(data) {
return request({
url: '/oms/v1/crmfile/save',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
}

45
src/api/customerManagement/customerFollowUp.js

@ -0,0 +1,45 @@
import request from '@/utils/request'
export default {
// 查询分页列表
listPage: function(params) {
return request({
url: '/oms/v1/crmvisit/pagerList',
method: 'post',
data: params,
headers: { 'Content-Type': 'application/json' }
})
},
fetchBySid: function(data) {
return request({
url: '/oms/v1/crmvisit/fetchSid/' + data,
method: 'get'
})
},
save: function(data) {
return request({
url: '/oms/v1/crmvisit/save',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
update: function(data) {
return request({
url: '/oms/v1/crmvisit/update',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
del: function(data) {
return request({
url: '/oms/v1/crmvisit/del',
method: 'DELETE',
data: data,
headers: {
'Content-Type': 'application/json'
}
})
}
}

43
src/api/customerManagement/customerInformation.js

@ -0,0 +1,43 @@
import request from '@/utils/request'
export default {
// 查询分页列表
listPage: function(params) {
return request({
url: '/oms/v1/crmcustomertemp/listPage',
method: 'post',
data: params,
headers: { 'Content-Type': 'application/json' }
})
},
fetchBySid: function(data) {
return request({
url: '/oms/v1/crmcustomertemp/fetchSid/' + data,
method: 'get'
})
},
deleteBySids: function(data) {
return request({
url: '/oms/v1/crmcustomertemp/del',
method: 'DELETE',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
save: function(data) {
return request({
url: '/oms/v1/crmcustomertemp/save',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
update: function(data) {
return request({
url: '/oms/v1/crmcustomertemp/save',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
}
}

18
src/router/index.js

@ -49,7 +49,23 @@ export const constantRoutes = [
}
}]
},
{
path: '/customerInformation',
component: Layout,
redirect: '/customerInformation',
meta: {
title: '客户信息管理'
},
children: [{
path: '/customerInformation/customerInformation',
component: () => import('@/views/customerManagement/customerInformation/customerInformation'),
name: 'CustomerInformation',
meta: {
title: '客户信息管理',
noCache: true
}
}]
},
{
path: '/salesOrder',
component: Layout,

261
src/views/customerManagement/customerArchives/customerArchives.vue

@ -0,0 +1,261 @@
<template>
<div class="app-container">
<!--列表页面-->
<div v-show="viewState == 1">
<button-bar view-title="客户档案资料" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<!--Start查询列表部分-->
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="文件类型">
<el-input v-model="listQuery.params.attachType" placeholder="" clearable/>
</el-form-item>
<el-form-item label="文件名称">
<el-input v-model="listQuery.params.fileName" placeholder="" clearable/>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
</div>
</div>
</div>
<!--End查询列表部分-->
<div class="listtop">
<div class="tit">{{ customerName }}客户档案资料</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--Start 主页面主要部分 -->
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;">
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
<el-table-column prop="attachType" label="文件类型" align="center" />
<el-table-column prop="fileName" label="文件名称" align="center" />
<el-table-column label="图片" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleAdd(scope.row)">上传</el-button>
<el-button type="primary" size="small" @click="handleLook(scope.row)">查看</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="最新上传人" align="center" />
<el-table-column prop="createTime" label="最新上传时间" align="center"/>
</el-table>
</div>
<!--End 主页面主要部分-->
<div class="pages">
<div class="tit"/>
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--End查询列表部分-->
</div>
</div>
<el-dialog :visible="dialogVisible" width="50%">
<el-form ref="" :model="formobj" class="formaddcopy02">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty">文件类型</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.attachType" clearable placeholder="" /></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">文件名称</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.fileName" clearable placeholder="" /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">附件</div>
<el-form-item>
<uploadImg ref="uploadImg" class="addinputInfo" v-model="formobj.filePath" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="handleSave()">保存</el-button>
<el-button type="info" size="small" @click="dialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<!-- 查看附件 -->
<el-dialog :visible.sync="dialogImageVisible">
<el-image style="width: 150px; height: 150px" v-for="(item, index) in image_list" :key="index" :src="item" :preview-src-list="image_list"/>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import req from '@/api/customerManagement/customerArchives'
import uploadImg from '@/components/uploadFile/uploadImg'
export default {
name: 'CustomerArchives',
components: {
Pagination,
pageye,
ButtonBar,
uploadImg
},
data() {
return {
btndisabled: false,
dialogVisible: false,
formobj: {
fileName: '',
attachType: '',
filePath: [],
linkSid: '',
name: ''
},
dialogImageVisible: false,
image_list: [],
customerName: '',
btnList: [
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1, // 1 2 3 4
tableKey: 0,
list: [],
sids: [], // SIDs
FormLoading: false,
listLoading: false,
//
listQuery: {
current: 1,
size: 5,
total: 0,
params: {
fileName: '',
attachType: '',
customerSid: ''
}
}
}
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
//
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'doClose':
this.doClose()
break
default:
break
}
},
//
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
showData(sid, name) {
this.listQuery.params.customerSid = sid
this.customerName = name
this.getList()
},
//
getList() {
this.listLoading = true
req.listPage(this.listQuery).then(response => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
//
handleFilter() {
this.listQuery.current = 1
this.getList()
},
//
handleReset() {
this.listQuery.current = 1
this.listQuery.size = 5
this.listQuery.total = 0
this.listQuery.params.attachType = ''
this.listQuery.params.fileName = ''
this.getList()
},
handleAdd(row) {
this.dialogVisible = true
this.formobj.fileName = row.fileName
this.formobj.attachType = row.attachType
this.formobj.linkSid = row.sid
this.formobj.name = window.sessionStorage.getItem('userName')
req.fetchBySid(row.sid).then((res) => {
if (res.success) {
if (res.data.crmFileDetailsVoList.length > 0) {
res.data.crmFileDetailsVoList.forEach((e) => {
this.formobj.filePath.push(e)
})
}
}
})
},
handleSave() {
req.save(this.formobj).then((res) => {
if (res.success) {
this.dialogVisible = false
this.formobj = {
fileName: '',
attachType: '',
filePath: [],
linkSid: '',
name: ''
}
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.getList()
}
})
},
handleLook(row) {
req.fetchBySid(row.sid).then((res) => {
if (res.success) {
this.dialogImageVisible = true
this.image_list = []
if (res.data.crmFileDetailsVoList.length > 0) {
res.data.crmFileDetailsVoList.forEach((e) => {
this.image_list.push(e.url)
})
}
}
})
},
doClose() {
this.$emit('doback')
}
}
}
</script>
<style scoped>
</style>

323
src/views/customerManagement/customerFollowUp/customerFollowUp.vue

@ -0,0 +1,323 @@
<template>
<div class="app-container">
<div v-show="viewState == 1">
<button-bar view-title="客户跟进记录" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item class="formItem" label="跟进时间">
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.start_follow_time" clearable type="date" placeholder="开始日期"/>
<span style="padding: 0 8px"></span>
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.end_follow_time" clearable type="date" placeholder="结束日期"/>
</el-form-item>
<el-form-item label="跟进形式">
<el-select v-model="listQuery.params.follow_form_key" class="addinputw" placeholder="请输入">
<el-option v-for="item in followupform" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="跟进状态">
<el-select v-model="listQuery.params.follow_state_key" class="addinputw" placeholder="">
<el-option v-for="item in followupstatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleReset()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleFilter()">重置</el-button>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">客户跟进记录列表</div>
<!-- 翻页分页 -->
<pageye v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50"/>
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
<el-table-column prop="follow_form" label="跟进形式" align="center" />
<el-table-column prop="follow_time" label="跟进时间" align="center" />
<el-table-column prop="follow_result" label="跟进结果" align="center" />
<el-table-column prop="follow_state" label="跟进状态" align="center" />
<el-table-column prop="staffName" label="业务员" align="center" />
<el-table-column prop="isOnRemind" label="是否开启提醒" align="center" />
<el-table-column prop="remind_day" label="提醒日期" align="center" />
<el-table-column label="见证材料" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleCheck(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<div class="tit"/>
<!-- 翻页 -->
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
</div>
</div>
<!-- 新增或编辑 -->
<customerFollowUpAdd ref="divAdd" v-show="viewState == 2 ||viewState == 3" @doback="resetState" @reloadlist="getList"/>
<!-- 查看附件 -->
<el-dialog :visible.sync="dialogImageVisible">
<el-image style="width: 150px; height: 150px" v-for="(item, index) in image_list" :key="index" :src="item" :preview-src-list="image_list"/>
</el-dialog>
</div>
</template>
<script>
import req from '@/api/customerManagement/customerFollowUp'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import customerFollowUpAdd from './customerFollowUpAdd.vue'
import { typeValues } from '@/api/Common/dictcommons'
export default {
name: 'CustomerFollowUp',
components: {
Pagination,
pageye,
ButtonBar,
customerFollowUpAdd
},
data() {
return {
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '编辑'
},
{
type: 'danger',
size: 'small',
icon: 'del',
btnKey: 'doDel',
btnLabel: '删除'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
viewState: 1,
isSearchShow: false,
searchxianshitit: '隐藏查询条件',
// -----------
tableKey: 0,
list: [],
sids: [],
total: 1,
listLoading: false,
listQuery: {
current: 1,
size: 5,
params: {
start_follow_time: '',
follow_type: '',
follow_form: '',
follow_form_key: '',
end_follow_time: '',
follow_state: '',
follow_state_key: '',
customerSid: '',
staffSid: ''
}
},
image_list: [],
Kehu_Name: '',
kehu_uesrsid: '',
followupform: [],
followupstatus: [],
dialogImageVisible: false
}
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'doDel':
this.doDel()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
//
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
//
init() {
typeValues({ type: 'visitWay' }).then((response) => {
if (response.success) {
this.followupform = response.data
}
})
typeValues({ type: 'followState' }).then((response) => {
if (response.success) {
this.followupstatus = response.data
}
})
},
//
showData(sid, name) {
this.Kehu_Name = name
this.kehu_uesrsid = sid
this.init()
this.getList()
},
//
handleReset() {
this.listQuery.current = 1
this.getList()
},
//
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
//
getList() {
this.listLoading = true
this.listQuery.params.customerSid = this.kehu_uesrsid
req.listPage(this.listQuery).then((response) => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.total = response.data.total
} else {
this.list = []
this.total = 0
}
})
},
//
handleFilter() {
this.listQuery = {
current: 1,
size: 5,
params: {
start_follow_time: '',
follow_type: '',
follow_form: '',
follow_form_key: '',
end_follow_time: '',
follow_state: '',
follow_state_key: '',
customerSid: '',
staffSid: ''
}
}
this.getList()
},
//
handleSelectionChange(row) {
const aa = []
row.forEach((element) => {
aa.push(element.sid)
})
this.sids = aa
},
//
toAdd() {
this.viewState = 2
this.$refs['divAdd'].showAdd(this.Kehu_Name, this.kehu_uesrsid)
},
//
toEdit() {
if (this.sids.length === 1) {
this.viewState = 3
this.$refs['divAdd'].showEdit(this.sids[0])
} else {
this.$notify({ title: '提示', message: '请选择一条记录进行操作', type: 'error', duration: 2000 })
return
}
},
resetState() {
this.viewState = 1
},
//
handleCheck(row) {
this.dialogImageVisible = true
this.image_list = []
if (row.files.length > 0) {
row.files.forEach((e) => {
this.image_list.push(e.url)
})
}
},
// ID
doDel() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' })
return
}
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
req.del(this.sids).then((resp) => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
doClose() {
this.$emit('reloadlist')
}
}
}
</script>
<style scoped>
</style>

265
src/views/customerManagement/customerFollowUp/customerFollowUpAdd.vue

@ -0,0 +1,265 @@
<template>
<div class="app-container">
<div class="tab-header webtop">
<div>{{viewTitle}}</div>
<div>
<el-button type="primary" size="small" @click="handleCreate()">保存</el-button>
<el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="dataForm" :model="temp" class="formaddcopy02" :rules="rules">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty"><span class="icon">*</span>跟进形式</div>
<el-form-item prop="follow_form">
<el-select class="addinputInfo" v-model="temp.follow_form_key" placeholder="" @change="getXingshi" filterable>
<el-option v-for="item in followupform" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">跟进时间</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="temp.follow_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty"><span class="icon">*</span>跟进结果</div>
<el-form-item prop="follow_result"><el-input v-model="temp.follow_result" maxlength="20" placeholder="" class="addinputInfo addinputw" clearable/></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">跟进状态</div>
<el-form-item>
<el-select class="addinputInfo" v-model="temp.follow_state_key" placeholder="" @change="getZhuaangtai" filterable>
<el-option v-for="item in followupstatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">是否开启提醒</div>
<el-form-item>
<el-radio-group class="addinputInfo" v-model="temp.isOnRemind">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<div v-show="temp.isOnRemind=='是'">
<div class="span-sty">提醒日期</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="temp.remind_day" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" /></el-form-item>
</div>
</el-col>
</el-row>
<el-row v-show="temp.isOnRemind=='是'">
<el-col :span="24">
<div class="span-sty">提醒备注</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.remind_remark" maxlength="20" placeholder="" clearable /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">见证材料</div>
<el-form-item>
<uploadImg ref="uploadImg" class="addinputInfo" v-model="temp.list" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import req from '@/api/customerManagement/customerFollowUp'
import { typeValues } from '@/api/Common/dictcommons'
import uploadImg from '@/components/uploadFile/uploadImg'
export default {
name: 'CustomerFollowUpAdd',
components: {
uploadImg
},
data() {
return {
//
pickerOptions: {
disabledDate(time) {
let oneDay = 60 * 60 * 24 * 1000
return time.getTime() < Date.now() - oneDay
}
},
viewTitle: '',
FormLoading: false,
followupform: [],
followupstatus: [],
temp: {
customerName: '',
customerSid: '',
follow_form: '',
follow_form_key: '',
follow_result: '',
follow_state: '',
follow_state_key: '',
follow_time: '',
isOnRemind: '',
isOnRemindkey: '',
orgSid: '',
remind_day: '',
remind_remark: '',
sid: '',
staffName: '',
staffSid: '',
visit_witness_materials: '',
list: []
},
rules: {
follow_form: [{ required: true, message: '请填写', trigger: 'blur' }],
follow_result: [{ required: true, message: '请填写', trigger: 'blur' }]
}
}
},
created() {
//
this.init()
},
methods: {
init() {
this.getShuJuZiDian()
},
//
showAdd(name, sid) {
this.viewTitle = '【新增】客户跟进记录'
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
this.temp.customerName = name
this.temp.customerSid = sid
this.temp.orgSid = window.sessionStorage.getItem('orgSid')
},
//
showEdit(sid) {
this.viewTitle = '【编辑】客户跟进记录'
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
req.fetchBySid(sid).then((response) => {
if (response.success) {
this.temp = response.data
}
})
},
// ------------------------------------------------------
//
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.temp = {
customerName: '',
customerSid: '',
follow_form: '',
follow_form_key: '',
follow_result: '',
follow_state: '',
follow_state_key: '',
follow_time: '',
isOnRemind: '',
isOnRemindkey: '',
orgSid: '',
remind_day: '',
remind_remark: '',
sid: '',
staffName: '',
staffSid: '',
visit_witness_materials: '',
list: []
}
this.$emit('doback')
},
//
handleCreate() {
if (this.temp.isOnRemind === '是') {
this.temp.isOnRemindkey = '1'
} else if (this.temp.isOnRemind === '否') {
this.temp.isOnRemindkey = '0'
}
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.FormLoading = true
if (this.temp.sid === '') {
req.save(this.temp).then((response) => {
this.FormLoading = false
if (response.success) {
this.$notify({ title: '提示', message: '添加成功', type: 'success', duration: 2000 })
this.handleReturn('true')
}
})
} else {
req.update(this.temp).then((response) => {
this.FormLoading = false
if (response.success) {
this.$notify({ title: '提示', message: '修改成功', type: 'success', duration: 2000 })
this.handleReturn('true')
}
})
}
}
})
},
//
getShuJuZiDian() {
typeValues({ type: 'visitWay' }).then((response) => {
if (response.success) {
this.followupform = response.data
}
})
typeValues({ type: 'followState' }).then((response) => {
if (response.success) {
this.followupstatus = response.data
}
})
},
//
getXingshi(value) {
const choose = this.followupform.filter((item) => item.dictKey === value)
if (choose !== null && choose.length > 0) {
this.temp.follow_form = choose[0].dictValue
} else {
this.temp.follow_form = ''
}
},
//
getZhuaangtai(value) {
const choose = this.followupstatus.filter((item) => item.dictKey === value)
if (choose !== null && choose.length > 0) {
this.temp.follow_state = choose[0].dictValue
} else {
this.temp.follow_state = ''
}
}
}
}
</script>
<style scoped>
.span-sty {
width: 130px !important;
}
.addinputInfo {
margin-left: 120px !important;
}
/deep/ .el-form-item__error {
margin-left: 120px !important;
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw {
margin-left: 120px !important;
width: calc(100% - 115px);
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .el-radio-group {
display: inline;
line-height: 1px;
vertical-align: middle;
}
</style>

488
src/views/customerManagement/customerInformation/customerInformation.vue

@ -0,0 +1,488 @@
<template>
<div class="app-container">
<div v-show="viewState ==1">
<button-bar view-title="客户管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="客户名称">
<el-input v-model="listQuery.params.name" maxlength="20" placeholder="请输入客户名称" class="addinputw" clearable/>
</el-form-item>
<el-form-item label="客户类型">
<el-select v-model="listQuery.params.customerTypeKey" class="addinputw" placeholder="请选择">
<el-option v-for="item in merType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="listQuery.params.mobile" maxlength="20" placeholder="请输入联系电话" class="addinputw" clearable/>
</el-form-item>
<el-form-item label="客户级别">
<el-select v-model="listQuery.params.levelKey" class="addinputw" placeholder="请选择客户级别">
<el-option v-for="item in induslevel" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="提醒日期">
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.remindStartDay" clearable style="width: 160px;" type="date" placeholder="开始日期"/>
<span style="padding: 0 8px"></span>
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.remindEndDay" clearable style="width: 160px;" type="date" placeholder="结束日期"/>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleReset">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleFilter">重置</el-button>
</div>
</div>
</div>
<div class="listtop">
<div class="tit">客户信息列表</div>
<!-- 翻页分页 -->
<pageye v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50"/>
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
<el-table-column prop="customerNo" label="客户编号" align="center" />
<el-table-column label="客户名称" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="toInfo(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="customerType" label="客户类型" align="center" />
<el-table-column prop="mobile" label="联系电话" align="center" />
<el-table-column prop="weixin" label="微信号" align="center" />
<el-table-column prop="level" label="客户级别" align="center" />
<el-table-column prop="remind_day" label="提醒日期" align="center" />
<el-table-column label="跟进记录" align="center">
<template slot-scope="scope">
<span class="bluezi" @click="handleJiLu(scope.row)">{{ scope.row.gjcounts }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
</div>
</div>
<!--新增及修改 -->
<customerInformationAdd v-show="viewState ==2 || viewState ==3" ref="divAdd" @reloadlist="getList" @doback="resetState"/>
<!-- 详情 -->
<customerInformationInfo v-show="viewState ==4" ref="divInfo" @doback="resetState"/>
<!-- 跟进记录 -->
<customerFollowUp v-show="viewState ==5" ref="divGJ" @reloadlist="getList"/>
<!-- 客户档案 -->
<customerArchives v-show="viewState ==6" ref="divDA" @doback="resetState"/>
<!--登记类型弹窗-->
<el-dialog title="客户登记-类型" :visible.sync="dialogVisible" width="28%" top="13%">
<el-form :model="customerTypeList">
<el-form-item label="联络方式" :label-width="formLabelWidth" class="diaForm">
<el-select v-model="customerTypeList.visitWayKey" placeholder="请选择联络方式" @change="getVisitWay" filterable>
<el-option v-for="(item) in visitWay_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="客户类型" :label-width="formLabelWidth" class="diaForm">
<el-radio-group v-model="customerTypeList.customerType">
<el-radio v-for="item in merType" :key="item.dictKey" :label="item.dictValue" @change="customerTypeChange">{{ item.dictValue }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="el-button-sure" type="primary" @click="handleOpen()"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import req from '@/api/customerManagement/customerInformation'
import { typeValues } from '@/api/Common/dictcommons'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import customerInformationAdd from './customerInformationAdd'
import customerInformationInfo from './customerInformationInfo'
import customerFollowUp from '../customerFollowUp/customerFollowUp'
import customerArchives from '../customerArchives/customerArchives'
export default {
name: 'CustomerInformation',
components: {
Pagination,
pageye,
ButtonBar,
customerInformationAdd,
customerInformationInfo,
customerFollowUp,
customerArchives
},
data() {
return {
viewState: 1,
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '编辑'
},
{
type: 'success',
size: 'small',
icon: 'user',
btnKey: 'toGenjin',
btnLabel: '客户跟进'
},
{
type: 'success',
size: 'small',
icon: 'user',
btnKey: 'toZiliao',
btnLabel: '客户档案'
},
{
type: 'danger',
size: 'small',
icon: 'del',
btnKey: 'doDel',
btnLabel: '删除'
},
{
type: 'success',
size: 'small',
icon: 'Import',
btnKey: 'doImport',
btnLabel: '导入'
},
{
type: 'success',
size: 'small',
icon: 'export',
btnKey: 'build',
btnLabel: '导出'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
dialogVisible: false, //
formLabelWidth: '110px',
customerTypeList: {
visitWay: '', //
visitWayKey: '',
customerType: '', //
customerTypeKey: '', //
psid: ''
},
visitWay_list: [],
isSearchShow: false,
searchxianshitit: '显示查询条件',
// -----------
tableKey: 0,
list: [],
sids: [],
names: [],
merType: [],
induslevel: [],
sourceLisst: [],
FormLoading: false,
listLoading: false,
listQuery: {
current: 1,
size: 5,
params: {
customerTypeKey: '',
levelKey: '',
mobile: '',
name: '',
remindStartDay: '',
remindEndtDay: ''
},
total: 0
}
}
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
created() {
//
this.init()
//
this.getList()
},
methods: {
//
init() {
typeValues({ type: 'customerType' }).then((res) => {
if (res.success) {
this.merType = res.data
}
})
typeValues({ type: 'customerSource' }).then((res) => {
if (res.success) {
this.sourceLisst = res.data
}
})
typeValues({ type: 'customerLevel' }).then((res) => {
if (res.success) {
this.induslevel = res.data
}
})
typeValues({ type: 'visitWay' }).then((res) => {
if (res.success) {
this.visitWay_list = res.data
}
})
},
//
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'toGenjin':
this.toGenjin()
break
case 'toZiliao':
this.toZiliao()
break
case 'doDel':
this.doDel()
break
case 'doImport':
this.doImport()
break
case 'export':
this.export()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
//
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
//
getList() {
this.listLoading = true
req.listPage(this.listQuery).then((response) => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
//
handleReset() {
this.listQuery.current = 1
this.getList()
},
//
handleFilter() {
this.listQuery = {
current: 1,
size: 5,
params: {
customerTypeKey: '',
levelKey: '',
mobile: '',
name: '',
remindStartDay: '',
remindEndtDay: ''
},
total: 0
}
this.getList()
},
//
handleSelectionChange(row) {
const aa = []
const cc = []
row.forEach((element) => {
aa.push(element.sid)
})
this.sids = aa
row.forEach((element) => {
cc.push(element.name)
})
this.names = cc
},
//
toAdd() {
this.dialogVisible = true
this.customerTypeList = {
visitWay: '',
visitWayKey: '',
customerType: '',
customerTypeKey: '',
psid: ''
}
},
//
customerTypeChange(val) {
const choosetItem = this.merType.filter((item) => item.dictValue === val)
if (choosetItem !== null && choosetItem.length > 0) {
this.customerTypeList.customerTypeKey = choosetItem[0].dictKey
this.customerTypeList.psid = choosetItem[0].sid
} else {
this.customerTypeList.customerTypeKey = ''
this.customerTypeList.psid = ''
}
},
//
getVisitWay(value) {
const choosetItem = this.visitWay_list.filter((item) => item.dictKey === value)
if (choosetItem !== null && choosetItem.length > 0) {
this.customerTypeList.visitWay = choosetItem[0].dictValue
} else {
this.customerTypeList.visitWay = ''
}
},
handleOpen() {
if (this.customerTypeList.visitWay !== '' && this.customerTypeList.customerType !== '') {
this.dialogVisible = false
const customerTypeList = this.customerTypeList
this.viewState = 2
this.$refs['divAdd'].openCreate(customerTypeList)
} else {
this.$message({
message: '请选择联络方式和客户类型',
type: 'warning'
})
}
},
//
toEdit() {
if (this.sids.length === 1) {
this.viewState = 3
this.$refs['divAdd'].openUpdate(this.sids[0])
} else {
this.$notify({ title: '提示', message: '请选择一条记录进行操作', type: 'error', duration: 2000 })
}
},
//
toGenjin() {
if (this.sids.length === 1) {
this.viewState = 5
this.$refs['Newpage'].newpage(this.sids[0], this.names[0])
} else {
this.$notify({ title: '提示', message: '请选择一条记录进行操作', type: 'error', duration: 2000 })
}
},
//
handleJiLu(row) {
this.viewState = 5
this.$refs['divGJ'].showData(row.sid, row.name)
},
//
toZiliao() {
if (this.sids.length === 1) {
this.viewState = 6
this.$refs['divDA'].showData(this.sids[0], this.names[0])
} else {
this.$notify({ title: '提示', message: '请选择一条记录进行操作', type: 'error', duration: 2000 })
}
},
//
toInfo(row) {
this.viewState = 4
this.$refs['divInfo'].showInfo(row.sid)
},
// ID
doDel() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' })
return
}
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
req.deleteBySids(this.sids).then((resp) => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
//
doImport() {},
//
export() {},
//
resetState() {
this.viewState = 1
},
//
genjinfanhui() {
this.viewState = 1
this.getList()
},
//
kehudanganziliao() {
this.viewState = 1
this.getList()
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>

614
src/views/customerManagement/customerInformation/customerInformationAdd.vue

@ -0,0 +1,614 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" icon="" @click="handleSave()">保存</el-button>
<el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="dataForm" :model="temp" class="formaddcopy02" :rules="rules">
<div class="title">基础信息</div>
<el-row>
<el-col :span="12">
<div class="span-sty"><span class="icon">*</span>客户名称</div>
<el-form-item prop="name">
<el-input class="addinputInfo addinputw" :disabled="editState" v-model="temp.name" placeholder="" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">客户类型</div>
<el-form-item><span class="addinputInfo">{{ temp.customerType }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty"><span class="icon">*</span>联系电话</div>
<el-form-item prop="mobile">
<el-input class="addinputInfo addinputw" :disabled="editState" v-model="temp.mobile" placeholder="" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">微信号</div>
<el-form-item>
<el-input class="addinputInfo addinputw" v-model="temp.weixin" placeholder="" clearable/>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="temp.customerType==='个人'">
<el-col :span="24">
<div class="span-sty">公司名称</div>
<el-form-item>
<el-input class="addinputInfo" style="width: 20%" v-model="temp.companyName" maxlength="20" placeholder="请输入公司名称" clearable/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">客户地址</div>
<el-form-item>
<div class="addinputInfo" style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center">
<el-select v-model="temp.province" filterable placeholder="请选择省" style="width:160px" @change="getShen">
<el-option v-for="item in inputProvinceList" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
<el-select v-model="temp.city" filterable placeholder="请选择市" style="width:160px" @change="getShi">
<el-option v-for="item in inputCityList" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
<el-select v-model="temp.county" filterable placeholder="请选择县" style="width:160px" @change="getQu">
<el-option v-for="item in inputCountyList" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
<el-input v-model="temp.address" clearable/>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">客户级别</div>
<el-form-item>
<el-select v-model="temp.levelKey" class="addinputInfo" placeholder="请选择客户级别" @change="getJiBie" filterable>
<el-option v-for="item in induslevel" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">是否开启提醒</div>
<el-form-item>
<el-radio-group class="addinputInfo" v-model="temp.isOnRemind">
<el-radio :disabled="editState" label="是"></el-radio>
<el-radio :disabled="editState" label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="temp.isOnRemind=='是'">
<el-col :span="12">
<div class="span-sty">提醒日期</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="temp.remind_day" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" clearable /></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">提醒备注</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.remind_remark" maxlength="20" placeholder="请输入提醒备注" clearable /></el-form-item>
</el-col>
</el-row>
<!--更多信息-->
<el-collapse v-model="activeNames">
<el-collapse-item title="更多信息" name="1">
<el-row v-show="temp.customerType==='个人'" style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty">客户生日</div>
<el-form-item><el-date-picker class="addinputInfo" v-model="temp.birthday" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" clearable /></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">性别</div>
<el-form-item>
<el-radio-group class="addinputInfo" v-model="temp.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty">证件类型</div>
<el-form-item><span class="addinputInfo">{{ temp.certificateType }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">证件号码</div>
<el-form-item><el-input v-model="temp.idnumber" maxlength="18" placeholder="请输入证件号码" class="addinputInfo addinputw" clearable/></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">证件有效期</div>
<el-form-item><el-date-picker v-model="temp.endDate" type="date" format="yyyy-MM-dd" class="addinputInfo" value-format="yyyy-MM-dd" placeholder="请选择"/></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">电子邮箱</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.e_mail" maxlength="20" placeholder="请输入电子邮箱" clearable /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">紧急联系人</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.emergencyContact" maxlength="20" placeholder="请输入紧急联系人" clearable /></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">紧急联系电话</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.emergencyMobile" maxlength="20" placeholder="请输入紧急联系电话" clearable /></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">客户来源</div>
<el-form-item>
<el-select v-model="temp.sourceKey" class="addinputInfo" placeholder="请选择客户来源" @change="getKeHuLaiYUan" filterable>
<el-option v-for="item in sourceLisst" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">客户分类</div>
<el-form-item>
<el-select v-model="temp.customerClassKey" class="addinputInfo" placeholder="请选择客户分类" @change="getFenLei" filterable>
<el-option v-for="item in merClass" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">备注</div>
<el-form-item><el-input class="addinputInfo addinputw" v-model="temp.remarks" maxlength="20" placeholder="请输入备注" clearable /></el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="见证材料" name="2">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="24">
<div class="span-sty">附件</div>
<el-form-item>
<uploadImg ref="uploadImg" class="addinputInfo" v-model="temp.crmVisitAppendixDtoList" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</div>
</div>
<!-- 弹框提示 -->
<el-dialog :visible.sync="dialogFormVisible" width="300px" :close-on-click-modal="false">
<div class="result-cont">
是否更新用户
</div>
<div slot="footer" v-loading="FormLoading" class="dialog-footer">
<el-button @click="dialogFormVisibl()"></el-button>
<el-button type="primary" @click="dialogStatus()"></el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import req from '@/api/customerManagement/customerInformation'
import uploadImg from '@/components/uploadFile/uploadImg'
import { getCity, getCounty, getProvince, typeValues } from '@/api/Common/dictcommons' //
export default {
name: 'CustomerInformationAdd',
components: {
uploadImg
},
data() {
return {
//
pickerOptions: {
disabledDate(time) {
let oneDay = 60 * 60 * 24 * 1000
return time.getTime() < Date.now() - oneDay
}
},
viewTitle: '',
editState: false,
inputProvinceList: [],
inputCityList: [],
inputCountyList: [],
activeNames: ['1'],
// ---------
customerClass: 'customerClass',
merClass: [],
customerSource: 'customerSource',
sourceLisst: [],
customerLevel: 'customerLevel',
induslevel: [],
customerType_list: [],
sex_list: [],
updateId: '',
FormLoading: false,
listLoading: false,
temp: {
address: '', //
address_city: '', //
address_county: '', //
address_province: '', //
birthday: '', //
certificateType: '', // /
certificateTypeKey: '', // key
city: '', //
companyName: '', //
contacts: '', //
county: '', //
createBySid: '', // sid
crmVisitAppendixDtoList: [], //
customerClass: '', // /////
customerClassKey: '', // Key
customerOrgName: '',
customerOrgSid: '',
customerType: '', // 1/2
customerTypeKey: '', // key
e_mail: '', //
emergencyContact: '', //
emergencyMobile: '', //
endDate: '', //
idnumber: '', //
isOnRemind: '', // 10
isOnRemindkey: '', // 10
level: '', // ////
levelKey: '', // key
mobile: '', //
name: '', //
orgPath: '',
orgSidPath: '',
phone: '', //
province: '', //
remarks: '', //
remind_day: '', //
remind_remark: '', //
sex: '', // K
sexKey: '', // Key
sid: '',
source: '', // ////
sourceKey: '', // key
staffSid: '', // sid
taxpayerNo: '', //
useOrgName: '', //
useOrgSid: '', // sid
userSid: '', // sid
visitWay: '', // //访
visitWayKey: '', // key
weixin: '' //
},
dialogFormVisible: false,
rules: {
name: [{ required: true, message: '请填写客户名称', trigger: 'blur' }],
mobile: [{ required: true, message: '请填写联系电话', trigger: 'blur' }]
}
}
},
methods: {
//
init() {
this.getShuJUZiDian()
},
//
openUpdate(sid) {
this.viewTitle = '【编辑】客户信息'
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
this.init()
this.huoquSheng() //
this.editState = true
req.fetchBySid(sid).then((response) => {
if (response.success) {
this.temp = response.data
typeValues({ type: 'customerType' }).then((res) => {
if (res.success) {
this.customerType_list = res.data
this.customerType_list.forEach((e) => {
if (e.dictValue === this.temp.customerType) {
typeValues({ psid: e.sid, type: this.customerClass }).then((res) => {
if (res.success) {
this.merClass = res.data
}
})
}
})
}
})
}
})
},
//
openCreate(customerTypeList) {
this.temp.customerType = customerTypeList.customerType
this.temp.customerTypeKey = customerTypeList.customerTypeKey
this.temp.visitWay = customerTypeList.visitWay
this.temp.visitWayKey = customerTypeList.visitWayKey
this.temp.userSid = window.sessionStorage.getItem('userSid')
this.temp.staffSid = ''
this.temp.orgSid = window.sessionStorage.getItem('orgSid')
this.$refs['dataForm'].clearValidate()
if (this.temp.customerType !== '') {
if (this.temp.customerType === '个人') {
this.temp.certificateType = '身份证'
this.temp.certificateTypeKey = '01'
} else {
this.temp.certificateType = '营业执照'
this.temp.certificateTypeKey = '02'
}
typeValues({ psid: customerTypeList.psid, type: this.customerClass }).then((res) => {
if (res.code === '200') {
this.merClass = res.data
}
})
}
this.init()
this.huoquSheng() //
},
//
getShuJUZiDian() {
//
typeValues({ type: this.customerSource }).then((res) => {
if (res.code === '200') {
this.sourceLisst = res.data
}
})
//
typeValues({ type: this.customerLevel }).then((res) => {
if (res.code === '200') {
this.induslevel = res.data
}
})
//
typeValues({ type: 'sex' }).then((res) => {
if (res.code === '200') {
this.sex_list = res.data
}
})
},
// --------------------------------------------------
huoquSheng() {
getProvince().then((res) => {
if (res.success) {
this.inputProvinceList = res.data
}
})
},
getShen(value) {
let bb = ''
this.inputProvinceList.forEach((e) => {
if (e.sid === value) {
bb = {
name: e.name,
districtCode: e.districtCode,
sid: e.sid
}
}
})
// codeprovince
this.temp.province = bb.name
this.huoquShi(bb.sid)
},
huoquShi(sid1) {
getCity({ sid: sid1 }).then((res) => {
if (res.success) {
this.inputCityList = res.data
}
})
},
getShi(value) {
let bb = ''
this.inputCityList.forEach((e) => {
if (e.sid === value) {
bb = {
name: e.name,
districtCode: e.districtCode,
sid: e.sid
}
}
})
this.temp.city = bb.name
this.huoquXian(bb.sid)
},
huoquXian(sid1) {
getCounty({ sid: sid1 }).then((res) => {
if (res.success) {
this.inputCountyList = res.data
}
})
},
getQu(value) {
let bb = ''
this.inputCountyList.forEach((e) => {
if (e.sid === value) {
bb = {
name: e.name,
districtCode: e.districtCode,
sid: e.sid
}
}
})
this.temp.county = bb.name
},
// ------------------------------------------------------
//
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.temp = {
address: '', //
address_city: '', //
address_county: '', //
address_province: '', //
birthday: '', //
certificateType: '', // /
certificateTypeKey: '', // key
city: '', //
companyName: '', //
contacts: '', //
county: '', //
createBySid: '', // sid
crmVisitAppendixDtoList: [],
customerClass: '', // /////
customerClassKey: '', // Key
customerOrgName: '',
customerOrgSid: '',
customerType: '', // 1/2
customerTypeKey: '', // key
e_mail: '', //
emergencyContact: '', //
emergencyMobile: '', //
endDate: '', //
idnumber: '', //
isOnRemind: '', // 10
isOnRemindkey: '', // 10
level: '', // ////
levelKey: '', // key
mobile: '', //
name: '', //
orgPath: '',
orgSidPath: '',
phone: '', //
province: '', //
remarks: '', //
remind_day: '', //
remind_remark: '', //
sex: '', // K
sexKey: '', // Key
sid: '',
source: '', // ////
sourceKey: '', // key
staffSid: '', // sid
taxpayerNo: '', //
useOrgName: '', //
useOrgSid: '', // sid
userSid: '', // sid
visitWay: '', // //访
visitWayKey: '', // key
weixin: '' //
}
this.editState = false
this.activeNames = ['1']
this.$emit('doback')
},
//
handleSave() {
if (this.temp.sex !== '') {
this.sex_list.forEach((e) => {
if (e.dictValue === this.temp.sex) {
this.temp.sexKey = e.dictKey
}
})
}
if (this.temp.isOnRemind !== '' && this.temp.isOnRemind === '是') {
this.temp.isOnRemindkey = 1
} else {
this.temp.isOnRemindkey = 0
}
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.FormLoading = true
if (this.temp.customerType === '企业' && this.temp.name.length < 5) {
this.$message({ showClose: true, type: 'error', message: '因客户类型为企业,客户名称的长度应不少于5个汉字' })
return
}
console.log(this.temp, 858585)
if (this.temp.sid === '') {
const tip = '客户名称、联系电话一经保存,无法修改,是否继续保存'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
req.save(this.temp).then((response) => {
this.FormLoading = false
if (response.success) {
this.$notify({ title: '提示', message: '添加成功', type: 'success', duration: 2000 })
this.handleReturn('true')
} else if (response.code === '511' || response.code === '513') {
this.FormLoading = false
this.dialogFormVisible = true
this.updateId = response.data
} else {
alert(200)
}
})
})
} else {
req.update(this.temp).then((response) => {
this.FormLoading = false
if (response.success) {
this.$notify({ title: '提示', message: '修改成功', type: 'success', duration: 2000 })
this.handleReturn('true')
}
})
}
}
})
},
dialogStatus() {
this.dialogFormVisible = false
this.openUpdate(this.updateId)
},
dialogFormVisibl() {
this.$notify({ title: '提示', message: '用户名手机号重复', type: 'error', duration: 2000 })
this.dialogFormVisible = false
},
// ---------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------
//
getJiBie(value) {
const choose = this.induslevel.filter((item) => item.dictKey === value)
if (choose !== null && choose.length > 0) {
this.temp.level = choose[0].dictValue
} else {
this.temp.level = ''
}
},
//
getKeHuLaiYUan(value) {
const choose = this.sourceLisst.filter((item) => item.dictKey === value)
if (choose !== null && choose.length > 0) {
this.temp.source = choose[0].dictValue
} else {
this.temp.source = ''
}
},
//
getFenLei(value) {
const choose = this.merClass.filter((item) => item.dictKey === value)
if (choose !== null && choose.length > 0) {
this.temp.customerClass = choose[0].dictValue
} else {
this.temp.customerClass = ''
}
}
}
}
</script>
<style scoped>
.span-sty {
width: 130px !important;
}
.addinputInfo {
margin-left: 120px !important;
}
/deep/ .el-form-item__error {
margin-left: 120px !important;
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw {
margin-left: 120px !important;
width: calc(100% - 115px);
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .el-radio-group {
display: inline;
line-height: 1px;
vertical-align: middle;
}
</style>

299
src/views/customerManagement/customerInformation/customerInformationInfo.vue

@ -0,0 +1,299 @@
<template>
<div class="app-container">
<div>
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="dataForm" :model="temp" class="formaddcopy02" :rules="rules">
<div class="title">基础信息</div>
<el-row>
<el-col :span="12">
<div class="span-sty">客户名称</div>
<el-form-item><span class="addinputInfo">{{ temp.name }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">客户类型</div>
<el-form-item><span class="addinputInfo">{{ temp.customerType }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">联系电话</div>
<el-form-item><span class="addinputInfo">{{ temp.mobile }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">微信号</div>
<el-form-item><span class="addinputInfo">{{ temp.weixin }}</span></el-form-item>
</el-col>
</el-row>
<el-row v-show="temp.customerType==='个人'">
<el-col :span="24">
<div class="span-sty">公司名称</div>
<el-form-item><span class="addinputInfo">{{ temp.companyName }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">客户地址</div>
<el-form-item><span class="addinputInfo">{{ temp.province }}{{ temp.city }}{{ temp.county }}{{ temp.address }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">客户级别</div>
<el-form-item><span class="addinputInfo">{{ temp.level }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">是否开启提醒</div>
<el-form-item><span class="addinputInfo">{{ temp.isOnRemind }}</span></el-form-item>
</el-col>
</el-row>
<el-row v-show="temp.isOnRemind=='是'">
<el-col :span="12">
<div class="span-sty">提醒日期</div>
<el-form-item><span class="addinputInfo">{{ temp.remind_day }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">提醒备注</div>
<el-form-item><span class="addinputInfo">{{ temp.remind_remark }}</span></el-form-item>
</el-col>
</el-row>
<!--更多信息-->
<el-collapse v-model="activeNames">
<el-collapse-item title="更多信息" name="1">
<el-row v-show="temp.customerType==='个人'" style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty">客户生日</div>
<el-form-item><span class="addinputInfo">{{ temp.birthday }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">性别</div>
<el-form-item><span class="addinputInfo">{{ temp.sex }}</span></el-form-item>
</el-col>
</el-row>
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty">证件类型</div>
<el-form-item><span class="addinputInfo">{{ temp.certificateType }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">证件号码</div>
<el-form-item><span class="addinputInfo">{{ temp.idnumber }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">证件有效期</div>
<el-form-item><span class="addinputInfo">{{ temp.endDate }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">电子邮箱</div>
<el-form-item><span class="addinputInfo">{{ temp.e_mail }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">紧急联系人</div>
<el-form-item><span class="addinputInfo">{{ temp.emergencyContact }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">紧急联系电话</div>
<el-form-item><span class="addinputInfo">{{ temp.emergencyMobile }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty">客户来源</div>
<el-form-item><span class="addinputInfo">{{ temp.source }}</span></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty">客户分类</div>
<el-form-item><span class="addinputInfo">{{ temp.customerClass }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty">备注</div>
<el-form-item><span class="addinputInfo">{{ temp.remarks }}</span></el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="见证材料" name="2">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="24">
<div class="span-sty">附件</div>
<el-form-item><el-image class="addinputInfo" style="width: 100px;height: 100px" v-for="(item, index) in temp.crmVisitAppendixDtoList" :key="index" :src="item" :preview-src-list="temp.crmVisitAppendixDtoList" /> </el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</div>
</div>
</div>
</template>
<script>
import req from '@/api/customerManagement/customerInformation'
export default {
name: 'CustomerInformationInfo',
data() {
return {
viewTitle: '',
activeNames: ['1'],
FormLoading: false,
listLoading: false,
temp: {
address: '', //
address_city: '', //
address_county: '', //
address_province: '', //
birthday: '', //
certificateType: '', // /
certificateTypeKey: '', // key
city: '', //
companyName: '', //
contacts: '', //
county: '', //
createBySid: '', // sid
crmVisitAppendixDtoList: [], //
customerClass: '', // /////
customerClassKey: '', // Key
customerOrgName: '',
customerOrgSid: '',
customerType: '', // 1/2
customerTypeKey: '', // key
e_mail: '', //
emergencyContact: '', //
emergencyMobile: '', //
endDate: '', //
idnumber: '', //
isOnRemind: '', // 10
isOnRemindkey: '', // 10
level: '', // ////
levelKey: '', // key
mobile: '', //
name: '', //
orgPath: '',
orgSidPath: '',
phone: '', //
province: '', //
remarks: '', //
remind_day: '', //
remind_remark: '', //
sex: '', // K
sexKey: '', // Key
sid: '',
source: '', // ////
sourceKey: '', // key
staffSid: '', // sid
taxpayerNo: '', //
useOrgName: '', //
useOrgSid: '', // sid
userSid: '', // sid
visitWay: '', // //访
visitWayKey: '', // key
weixin: '' //
},
rules: {}
}
},
methods: {
//
showInfo(sid) {
this.viewTitle = '客户信息详情'
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
req.fetchBySid(sid).then((response) => {
if (response.success) {
this.temp = response.data
}
})
},
// ------------------------------------------------------
//
handleReturn() {
this.temp = {
address: '', //
address_city: '', //
address_county: '', //
address_province: '', //
birthday: '', //
certificateType: '', // /
certificateTypeKey: '', // key
city: '', //
companyName: '', //
contacts: '', //
county: '', //
createBySid: '', // sid
crmVisitAppendixDtoList: [],
customerClass: '', // /////
customerClassKey: '', // Key
customerOrgName: '',
customerOrgSid: '',
customerType: '', // 1/2
customerTypeKey: '', // key
e_mail: '', //
emergencyContact: '', //
emergencyMobile: '', //
endDate: '', //
idnumber: '', //
isOnRemind: '', // 10
isOnRemindkey: '', // 10
level: '', // ////
levelKey: '', // key
mobile: '', //
name: '', //
orgPath: '',
orgSidPath: '',
phone: '', //
province: '', //
remarks: '', //
remind_day: '', //
remind_remark: '', //
sex: '', // K
sexKey: '', // Key
sid: '',
source: '', // ////
sourceKey: '', // key
staffSid: '', // sid
taxpayerNo: '', //
useOrgName: '', //
useOrgSid: '', // sid
userSid: '', // sid
visitWay: '', // //访
visitWayKey: '', // key
weixin: '' //
}
this.activeNames = ['1']
this.$emit('doback')
}
}
}
</script>
<style scoped>
.span-sty {
width: 130px !important;
}
.addinputInfo {
margin-left: 120px !important;
}
/deep/ .el-form-item__error {
margin-left: 120px !important;
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw {
margin-left: 120px !important;
width: calc(100% - 115px);
}
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .el-radio-group {
display: inline;
line-height: 1px;
vertical-align: middle;
}
</style>
Loading…
Cancel
Save