jiangyy
5 years ago
11 changed files with 1867 additions and 58 deletions
@ -0,0 +1,59 @@ |
|||
export default { |
|||
list: [ |
|||
{ |
|||
key: 'customerName', |
|||
title: '客户名称', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
type: 'input', |
|||
rule: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入客户名称', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fixed: false, |
|||
block: true, |
|||
width: 80 |
|||
}, |
|||
{ |
|||
key: 'gridName', |
|||
title: '网格名字', |
|||
display: ['table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 80 |
|||
}, |
|||
{ |
|||
key: 'adviceType', |
|||
title: '建议分类', |
|||
display: ['table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
{ |
|||
key: 'phone', |
|||
title: '联系电话', |
|||
display: ['table', 'model'], |
|||
block: true, |
|||
width: 80 |
|||
}, |
|||
{ |
|||
key: 'adviceTime', |
|||
title: '建议时间', |
|||
display: ['table', 'model'], |
|||
block: true, |
|||
width: 80 |
|||
}, |
|||
{ |
|||
key: 'adviceContent', |
|||
title: '建议内容', |
|||
display: ['table', 'model'], |
|||
type: 'input', |
|||
block: true, |
|||
width: 150 |
|||
}, |
|||
|
|||
], |
|||
} |
|||
@ -0,0 +1,336 @@ |
|||
<!-- 客户信息 --> |
|||
<template> |
|||
<div> |
|||
<!-- <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button> --> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<el-row> |
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">客户信息 |
|||
</el-tag><br /><br /> |
|||
<el-form :inline="false" |
|||
:model="dataForm.customerInfoDTO" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:label-width="'120px'"> |
|||
<el-form-item label="客户名称" |
|||
prop="customerName"> |
|||
<el-input class="item_width_1" |
|||
v-model="dataForm.customerInfoDTO.customerName" |
|||
placeholder="客户名称"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="logo" |
|||
label="Logo"> |
|||
<el-upload class="item_width_1 avatar-uploader" |
|||
:action="uploadUlr" |
|||
:show-file-list="false" |
|||
:on-success="handleImgSuccess" |
|||
:before-upload="beforeImgUpload"> |
|||
<img v-if="dataForm.customerInfoDTO.logo" |
|||
:src="dataForm.customerInfoDTO.logo" |
|||
style="width:70px;height:70px" |
|||
class="function-icon"> |
|||
<i v-else |
|||
class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-button size="mini" |
|||
class="btn_save" |
|||
type="primary" |
|||
@click="saveInfo()">保存客户信息</el-button> |
|||
|
|||
</el-form> |
|||
</el-row> |
|||
<el-row> |
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">根级组织信息 |
|||
</el-tag><br /><br /> |
|||
|
|||
<el-form :inline="false" |
|||
:model="dataForm.rootAgencyDTO" |
|||
ref="dataForm" |
|||
:label-width="'120px'"> |
|||
<el-form-item class="item_width_1" |
|||
label="组织名称"> |
|||
<span class="item_width_1">{{dataForm.rootAgencyDTO.agencyName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="item_width_1" |
|||
label="组织级别"> |
|||
<span class="item_width_1">{{dataForm.rootAgencyDTO.level|showInfo}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="item_width_1" |
|||
label="地区编码"> |
|||
<span class="item_width_1">{{dataForm.rootAgencyDTO.areaCode}}</span> |
|||
</el-form-item> |
|||
<el-form-item class="item_width_1" |
|||
label="所属地区"> |
|||
<span class="item_width_1">{{dataForm.rootAgencyDTO.province+dataForm.rootAgencyDTO.city+dataForm.rootAgencyDTO.district}}</span> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
</el-row> |
|||
<el-row> |
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">超级管理员信息 |
|||
</el-tag><br /><br /> |
|||
<el-form :inline="false" |
|||
:model="dataForm.managers[0]" |
|||
ref="dataForm" |
|||
:label-width="'120px'"> |
|||
<el-form-item class="item_width_1" |
|||
label="姓名"> |
|||
<span>{{dataForm.managers[0].realName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="item_width_1" |
|||
label="性别"> |
|||
<span>{{dataForm.managers[0].gender|showGender}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="item_width_1" |
|||
label="电话"> |
|||
<span>{{dataForm.managers[0].mobile}}</span> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
</el-row> |
|||
<!-- <el-row> |
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">配置信息 |
|||
</el-tag><br /><br /> |
|||
|
|||
<el-row v-for="(val, index) in data.managers" |
|||
:key="index" |
|||
style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" |
|||
:gutter="20"> |
|||
<el-col :span="6">{{val.realName}}</el-col> |
|||
<el-col :span="4">{{val.gender|genderName}}</el-col> |
|||
<el-col :span="14">{{val.mobile}}</el-col> |
|||
</el-row> |
|||
</el-row> --> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
props: { |
|||
}, |
|||
data () { |
|||
return { |
|||
customerId: '', |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload', |
|||
dataForm: { |
|||
rootAgencyDTO: { |
|||
agencyName: '成都市', |
|||
level: 'city', |
|||
areaCode: '123456', |
|||
province: '四川省', |
|||
city: '成都市', |
|||
district: 'SN4FHbIZtK', |
|||
|
|||
}, |
|||
customerInfoDTO: { |
|||
customerName: '成都市', |
|||
organizationLevel: 'city', |
|||
logo: '' |
|||
}, |
|||
managers: [ |
|||
{ |
|||
realName: '王显章', |
|||
gender: '1', |
|||
mobile: '18560677960' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
|
|||
}, |
|||
mounted () { |
|||
|
|||
this.$nextTick(() => { |
|||
|
|||
this.customerId = localStorage.getItem('customerId') |
|||
|
|||
this.loadData() |
|||
}) |
|||
|
|||
}, |
|||
methods: { |
|||
//获取客户基本信息 |
|||
loadData () { |
|||
this.startLoading() |
|||
|
|||
// 表单对象 |
|||
const url = '/oper/crm/customer/detail' |
|||
|
|||
let params = { |
|||
customerId: this.customerId, |
|||
} |
|||
|
|||
window.app.ajax.post(url, params, |
|||
(data, rspMsg) => { |
|||
this.endLoading() |
|||
this.dataForm = data |
|||
|
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
}, |
|||
//获取配置信息 |
|||
async loadConfigData () { |
|||
// 表单对象 |
|||
const url = '/oper/crm/customer/getcustomerparameter' |
|||
|
|||
let params = { |
|||
customerId: this.customerId, |
|||
} |
|||
|
|||
window.app.ajax.post(url, params, |
|||
(data, rspMsg) => { |
|||
this.endLoading() |
|||
this.$message.success('修改成功') |
|||
this.diaCancel() |
|||
this.$emit('refresh') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
}, |
|||
|
|||
saveInfo () { |
|||
// 表单对象 |
|||
// let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/crm/customer/updatecustomer' |
|||
let url = '/oper/crm/customer/updatecustomer' |
|||
// 表单对象 |
|||
let params = { |
|||
customerId: this.customerId, |
|||
customerName: this.dataForm.customerInfoDTO.customerName, |
|||
logo: this.dataForm.customerInfoDTO.logo |
|||
} |
|||
|
|||
window.app.ajax.post(url, params, |
|||
(data, rspMsg) => { |
|||
this.endLoading() |
|||
localStorage.setItem('customerName', this.dataForm.customerInfoDTO.customerName) |
|||
this.$emit('changeCustomerName', this.dataForm.customerInfoDTO.customerName) |
|||
|
|||
this.$message.success('修改成功') |
|||
this.loadData() |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
// 上传大图标成功 |
|||
handleImgSuccess (res, file) { |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
|
|||
this.dataForm.customerInfoDTO.logo = res.data.url |
|||
|
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}, |
|||
|
|||
beforeImgUpload (file) { |
|||
// const isPNG = file.type === 'image/png' |
|||
const isLt1M = file.size / 1024 / 1024 < 1 |
|||
|
|||
// if (!isPNG) { |
|||
// this.$message.error('上传图片只能是 PNG 格式!') |
|||
// } |
|||
if (!isLt1M) { |
|||
this.$message.error('上传图片大小不能超过 1MB!') |
|||
} |
|||
// return isPNG && isLt1M |
|||
return isLt1M |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
dataRule () { |
|||
return { |
|||
logo: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
customerName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
filters: { |
|||
|
|||
showInfo (key) { |
|||
if (key === 'province') { |
|||
return '省级' |
|||
} else if (key === 'city') { |
|||
return '市级' |
|||
} else if (key === 'district') { |
|||
return '区县级' |
|||
} else if (key === 'street') { |
|||
return '乡（镇、街道）级' |
|||
} else if (key === 'community') { |
|||
return '社区级' |
|||
} else if (key === '') { |
|||
return '————' |
|||
} else { |
|||
return key |
|||
} |
|||
}, |
|||
showGender (key) { |
|||
if (key === '1') { |
|||
return '女' |
|||
} else if (key === '0') { |
|||
return '男' |
|||
} else { |
|||
return key |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.item_width_1 { |
|||
width: 300px; |
|||
} |
|||
.btn_save { |
|||
margin: 0 50px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,360 @@ |
|||
<template> |
|||
<div> |
|||
<c-dialog :title="'建议详情'" |
|||
:visible="diaVisible" |
|||
:width="70" |
|||
:confirm="'回复'" |
|||
:showConfirm="showConfirm" |
|||
@ok="save" |
|||
@cancel="diaCancel"> |
|||
|
|||
<el-form :inline="true" |
|||
:model="adviceData" |
|||
:rules="dataRule" |
|||
ref="ref_form" |
|||
style="margin:0 auto;width:90%" |
|||
:label-width="'100px'"> |
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">建议详情</el-tag> |
|||
<div class="div_form"> |
|||
<el-form-item prop="customerName" |
|||
label="客户名" |
|||
class="form_item_half"> |
|||
<span>{{adviceData.customerName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="agencyName" |
|||
label="组织名" |
|||
class="form_item_half"> |
|||
<span>{{adviceData.agencyName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="gridName" |
|||
label="网格名" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.gridName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="regPhone" |
|||
label="注册手机" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.regPhone}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="adviceType" |
|||
label="问题分类" |
|||
class="form_item_half"> |
|||
<span>{{adviceData.adviceType}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="adviceTime" |
|||
label="提出时间" |
|||
class="form_item_half"> |
|||
<span>{{adviceData.adviceTime}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="userName" |
|||
label="提出者" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.userName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="phone" |
|||
label="联系方式" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.phone}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="adviceContent" |
|||
label="建议内容" |
|||
class="form_item_total"> |
|||
<span>{{adviceData.adviceContent}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="adviceData.imgList.length>0" |
|||
prop="imgList" |
|||
label="建议图片"> |
|||
<img v-for="(item,index) in adviceData.imgList" |
|||
:key="index" |
|||
:src="item" |
|||
style="width:70px;height:70px;margin-right:15px" |
|||
class="function-icon"> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<el-tag type="info" |
|||
class="eltag" |
|||
size="medium" |
|||
style="width:100%;margin-top:10px">回复详情</el-tag> |
|||
|
|||
<div class="div_form" |
|||
v-if="adviceData.replyContent===''"> |
|||
<el-form-item prop="replyContent" |
|||
label="回复内容" |
|||
label-width="100px" |
|||
class="form_item_total "> |
|||
<el-input type="textarea" |
|||
:rows="4" |
|||
resize="none" |
|||
maxlength="500" |
|||
show-word-limit |
|||
style="width:600px" |
|||
placeholder='请输入回复内容' |
|||
v-model="adviceData.replyContent"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="政府回复文本" |
|||
label-width="100px" |
|||
class="form_item_total "> |
|||
<el-input type="textarea" |
|||
:rows="4" |
|||
resize="none" |
|||
maxlength="500" |
|||
style="width:600px" |
|||
show-word-limit |
|||
placeholder='请输入回复内容' |
|||
v-model="adviceData.govContent"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="govImgList" |
|||
label="政府回复取证" |
|||
class="form_item_total "> |
|||
|
|||
<el-upload class="avatar-uploader" |
|||
ref="uploadPic" |
|||
:action="uploadUlr" |
|||
list-type="picture-card" |
|||
:on-exceed="exceedPic" |
|||
:on-remove="removePic" |
|||
:on-success="handleSuccess" |
|||
:limit="3"> |
|||
<span class="font-14">选择图片</span> |
|||
<div slot="tip" |
|||
class="el-upload__tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<div class="div_form" |
|||
v-else> |
|||
<el-form-item prop="replyUserName" |
|||
label="回复者" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.replyUserName}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="replyTime" |
|||
label="回复时间" |
|||
class="form_item_half "> |
|||
<span>{{adviceData.replyTime}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="replyContent" |
|||
label="回复内容" |
|||
class="form_item_total"> |
|||
<span>{{adviceData.replyContent}}</span> |
|||
</el-form-item> |
|||
<el-form-item prop="govContent" |
|||
label="政府回复内容" |
|||
class="form_item_total"> |
|||
<span>{{adviceData.govContent}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="adviceData.govImgList.length>0" |
|||
prop="govImgList" |
|||
label="政府图片取证"> |
|||
<img v-for="(item,index) in adviceData.govImgList" |
|||
:key="index" |
|||
:src="item" |
|||
style="width:70px;height:70px;margin-right:15px" |
|||
class="function-icon"> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
</el-form> |
|||
|
|||
</c-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
/* eslint-disable */ |
|||
import CForm from '@c/CForm' |
|||
import CDialog from '@c/CDialog' |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
diaVisible: false, |
|||
adviceId: '',//建议id，父组件传来 |
|||
adviceData: { |
|||
customerName: '',//客户名 |
|||
agencyName: '',//组织名 |
|||
gridName: '',//网格名 |
|||
userName: '',//提出人名字 |
|||
regPhone: '',//注册时的联系电话 |
|||
adviceType: '',//问题分类，后台拼接 |
|||
phone: '',//填写的联系电话 |
|||
adviceTime: '',//建议时间 |
|||
adviceContent: '',//建议内容 |
|||
imgList: [],//建议图片列表 |
|||
replyContent: '',//回复内容 无为空字符串 |
|||
replyTime: '',//回复时间 无为空字符串 |
|||
replyUserName: '',//回复人 |
|||
govContent: '',//政府回复文本 |
|||
govImgList: [],//政府回复取证 |
|||
}, |
|||
showConfirm: true, |
|||
|
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload', |
|||
// upload_url: '', // 上传URL |
|||
upload_name: '', // 图片或视频名称 |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CForm, CDialog |
|||
}, |
|||
mounted () { |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 50 - 400 |
|||
}, |
|||
...mapGetters(['clientHeight']), |
|||
dataRule () { |
|||
return { |
|||
replyContent: [ |
|||
{ required: true, message: "回复不能为空", trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// eslint-disable-next-line |
|||
async initData (row) { |
|||
this.diaVisible = true |
|||
this.adviceId = row.id |
|||
await this.getData() |
|||
|
|||
}, |
|||
|
|||
async getData () { |
|||
this.startLoading() |
|||
//const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/advicedetail" |
|||
const url = "/epmetuser/useradvice/advicedetail" |
|||
|
|||
const params = { |
|||
adviceId: this.adviceId |
|||
} |
|||
const { data, code, msg, internalMsg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
// this.endLoading() |
|||
if (data) { |
|||
this.adviceData = data |
|||
if (this.adviceData.replyContent !== '') { |
|||
this.showConfirm = false |
|||
} |
|||
} |
|||
} else { |
|||
this.$message.error(msg + "：" + internalMsg) |
|||
} |
|||
this.endLoading() |
|||
}, |
|||
|
|||
removePic (file, fileList) { |
|||
|
|||
this.adviceData.govImgList.splice(this.adviceData.govImgList.findIndex(item => item.uid === file.uid), 1) |
|||
|
|||
|
|||
}, |
|||
exceedPic () { |
|||
this.$message.warning("最多上传3张预览图片") |
|||
|
|||
}, |
|||
handleSuccess (response, file, fileList) { |
|||
this.adviceData.govImgList.push(file.url) |
|||
|
|||
}, |
|||
|
|||
save () { |
|||
this.$refs['ref_form'].validate((valid) => { |
|||
if (valid) { |
|||
// if (!this.adviceData.replyContent || this.adviceData.replyContent === '') { |
|||
// this.$message.error('请填写') |
|||
// return false |
|||
// } |
|||
|
|||
this.startLoading() |
|||
let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/advicedetail' |
|||
// let url = '/epmetuser/useradvice/advicedetail' |
|||
// 表单对象 |
|||
|
|||
let _data = { |
|||
adviceId: this.adviceData.adviceId, |
|||
replyContent: this.adviceData.replyContent, |
|||
govContent: this.adviceData.govContent, |
|||
govImgList: this.adviceData.govImgList |
|||
} |
|||
|
|||
|
|||
window.app.ajax.post(url, _data, |
|||
(data, rspMsg) => { |
|||
this.endLoading() |
|||
this.$message.success('回复成功') |
|||
this.diaCancel() |
|||
this.$emit('refresh') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
diaCancel () { |
|||
this.diaVisible = false |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scope> |
|||
.div_form { |
|||
margin: 10px 0 0 0; |
|||
} |
|||
.form_item_half { |
|||
width: 30%; |
|||
} |
|||
.form_item_total { |
|||
width: 90%; |
|||
} |
|||
.form_item_block { |
|||
display: block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,353 @@ |
|||
<template> |
|||
<div class="registerList"> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__demo}"> |
|||
<el-form :inline="true" |
|||
:model="tableParams" |
|||
@keyup.enter.native="loadData()"> |
|||
<div> |
|||
<el-form-item label="客户" |
|||
:label-width="labelWidth"> |
|||
<el-select v-model="tableParams.customerId" |
|||
placeholder="客户" |
|||
clear |
|||
@change="customerChange()" |
|||
clearable> |
|||
<el-option v-for="item in form.data['customerId']" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="组织" |
|||
:label-width="labelWidth"> |
|||
<c-tree-dialog-single style="width:200px;float:left" |
|||
ref="agencyCTreeDialog" |
|||
:params="treeParams" |
|||
:placeholder="'组织'" |
|||
:type="'primary'" |
|||
:title="'选择组织'" |
|||
:url="agencyUrl" |
|||
:defaultExpandKeys="agencyExpandKeys" |
|||
:defaultExpandAll="false" |
|||
:defaultNodeKey="agencyNodeKey" |
|||
:defaultOnlyLeaf="false" |
|||
:autoLoad="false" |
|||
:selBtnDisabled="selBtnDisabled" |
|||
@handleOk="handleAgencyOk" |
|||
@handleClear="handleAgencyClear"> |
|||
</c-tree-dialog-single> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="开始时间" |
|||
:label-width="labelWidth"> |
|||
<el-date-picker v-model="tableParams.startTime" |
|||
style="width:200px;margin-left:10px" |
|||
type="datetime" |
|||
format="yyyy-MM-dd hh:mm:ss" |
|||
value-format="yyyy-MM-dd hh:mm:ss" |
|||
placeholder="开始时间"></el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="结束时间" |
|||
:label-width="labelWidth"> |
|||
<el-date-picker v-model="tableParams.endTime" |
|||
style="width:200px;margin-left:10px" |
|||
type="datetime" |
|||
format="yyyy-MM-dd hh:mm:ss" |
|||
value-format="yyyy-MM-dd hh:mm:ss" |
|||
placeholder="结束时间"></el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-form-item label="问题分类" |
|||
:label-width="labelWidth"> |
|||
<el-select v-model="tableParams.adviceType" |
|||
placeholder="问题分类" |
|||
clearable> |
|||
<el-option v-for="item in form.data['adviceType']" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="回复状态" |
|||
:label-width="labelWidth"> |
|||
<el-select v-model="tableParams.isReply" |
|||
placeholder="回复状态" |
|||
clearable> |
|||
<el-option v-for="item in form.data['isReply']" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item style="margin-left:10px"> |
|||
<el-button @click="loadData()" |
|||
type="primary">查询</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
</el-form> |
|||
|
|||
<c-table column-type="" |
|||
ref="table" |
|||
:url="tableUrl" |
|||
:params="tableParams" |
|||
keyword="FeedbackList" |
|||
:operations="operations" |
|||
:tableHeight="tableHeight" |
|||
:operationWidth="60" |
|||
:buttonAlign="'center'" |
|||
@detail="detail"> |
|||
</c-table> |
|||
</div> |
|||
</el-card> |
|||
<detail-form ref="ref_edit_form" |
|||
@refresh="loadData"></detail-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CTable from '@c/CTable' |
|||
import CTreeDialogSingle from '@c/CTreeDialogSingle'; |
|||
import DetailForm from './DetailForm' |
|||
|
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
//查询条件标题宽度 |
|||
labelWidth: '70px', |
|||
// 列表相关 |
|||
tableUrl: '/epmetuser/useradvice/advicelist', |
|||
// tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/advicelist', |
|||
tableParams: { |
|||
customerId: '',//客户id 不填查询所有 |
|||
agencyId: '',//组织id 不填查询所有 |
|||
isReply: '',//是否被回复,0未回复，1回复, 传空查询所有 |
|||
adviceType: '',//问题类型 gov政府,software软件 ,传空查询全部，单选 |
|||
startTime: '',//开始时间 可不填 |
|||
endTime: '',//结束时间 可不填 |
|||
}, |
|||
// 列表操作栏的操作项数组 |
|||
operations: [ |
|||
{ |
|||
lable: '详情', // 按钮显示名称 |
|||
size: 'mini', |
|||
style: 'margin: 0 6px;', |
|||
type: 'text', |
|||
slot: '', |
|||
plain: false, |
|||
methodName: 'detail', // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true |
|||
} |
|||
} |
|||
], |
|||
|
|||
// 列表数据 |
|||
tableData: [], |
|||
|
|||
//组织树 |
|||
agencyUrl: "/gov/org/customeragency/getagencyelementtreelist",//组织树url |
|||
// agencyUrl: "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/org/customeragency/getagencyelementtreelist",//组织树url |
|||
agencyExpandKeys: [0],//树默认展开节点 |
|||
agencyNodeKey: 0,//树默认选中节点 |
|||
selBtnDisabled: true, |
|||
treeParams: { |
|||
customerId: '' |
|||
}, |
|||
|
|||
|
|||
// 查询栏下拉框数据 |
|||
form: { |
|||
dataUrl: [], // 下拉框/单选框/复选框等获取数据的url |
|||
data: { // 全部下拉框数据 |
|||
adviceType: [ |
|||
{ |
|||
value: 'gov', |
|||
label: '政府业务建议' |
|||
}, |
|||
{ |
|||
value: 'software', |
|||
label: '软件功能及体验问题' |
|||
} |
|||
], |
|||
isReply: [ |
|||
{ |
|||
value: '0', |
|||
label: '未回复' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '已回复' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
CTable, DetailForm, CTreeDialogSingle |
|||
}, |
|||
activated () { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout() // 解决表格错位 |
|||
}) |
|||
}, |
|||
mounted () { |
|||
this.initData() |
|||
|
|||
this.loadData() |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.clientHeight - 60 - 80 - 80 - 100 |
|||
}, |
|||
...mapGetters(['clientHeight', 'env']) |
|||
}, |
|||
methods: { |
|||
async initData () { |
|||
await this.getCustomerData() |
|||
await this.loadData() |
|||
}, |
|||
//获取客户数据 |
|||
async getCustomerData () { |
|||
|
|||
this.startLoading() |
|||
|
|||
const url = "https://epmet-cloud.elinkservice.cn/api/third/pacustomer/registerbyauth" |
|||
|
|||
const params = { |
|||
source: this.env, |
|||
initState: 1 |
|||
} |
|||
const { data, code, msg, internalMsg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
// this.endLoading() |
|||
if (data) { |
|||
let customerList = [] |
|||
|
|||
data.forEach(element => { |
|||
let oneObj = { |
|||
value: element.customerId, |
|||
label: element.customerName |
|||
} |
|||
customerList.push(oneObj) |
|||
}) |
|||
|
|||
this.form.data.customerId = customerList |
|||
this.$forceUpdate() |
|||
} |
|||
} else { |
|||
this.$message.error(msg + "：" + internalMsg) |
|||
} |
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
//客户下拉框改变 |
|||
async customerChange (value) { |
|||
this.treeParams.customerId = this.tableParams.customerId |
|||
if (this.tableParams.customerId === '') { |
|||
this.selBtnDisabled = true |
|||
this.treeParams.customerId = '' |
|||
} else { |
|||
this.selBtnDisabled = false |
|||
|
|||
|
|||
this.startLoading() |
|||
// const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/org/customeragency/getagencyelementtreekeys" |
|||
const url = "/gov/org/customeragency/getagencyelementtreekeys" |
|||
|
|||
const params = { |
|||
customerId: this.tableParams.customerId, |
|||
} |
|||
const { data, code, msg, internalMsg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
|
|||
if (data) { |
|||
this.agencyExpandKeys = data |
|||
this.$refs['agencyCTreeDialog'].setExpandKeys(this.agencyExpandKeys); |
|||
|
|||
|
|||
} |
|||
} else { |
|||
this.$message.error(msg + "：" + internalMsg) |
|||
} |
|||
this.endLoading() |
|||
} |
|||
}, |
|||
|
|||
|
|||
handleAgencyOk (data) {//查询界面——组织弹出树的【确认】 |
|||
|
|||
this.tableParams.agencyId = data.id |
|||
console.log(this.tableParams.agencyId) |
|||
|
|||
}, |
|||
handleAgencyClear () {//查询界面——组织弹出树的【清空】 |
|||
this.tableParams.agencyId = "" |
|||
this.$nextTick(() => { |
|||
this.agencyExpandKeys = [0]; |
|||
this.$refs['agencyCTreeDialog'].loadData(null, 0, this.agencyExpandKeys); |
|||
}) |
|||
}, |
|||
|
|||
// 获取列表数据 |
|||
async loadData () { |
|||
this.$refs.table.loadData() |
|||
}, |
|||
// 修改 |
|||
detail (row) { |
|||
this.$refs['ref_edit_form'].initData(row) |
|||
}, |
|||
|
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="css"> |
|||
.aaa { |
|||
height: 100px; |
|||
} |
|||
/* .register .el-table .el-table__header-wrapper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
}*/ |
|||
/* |
|||
.register .el-table .el-table__fixed-body-wrapper { |
|||
height: calc(100% - 44px); |
|||
margin-top: 44px; |
|||
overflow-y: auto !important; |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button> --> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill" |
|||
style="width:800px" |
|||
v-if="data.length!==0"> |
|||
<el-row> |
|||
<h2>客户信息</h2> |
|||
<el-row v-for="(val, key) in data.customerInfoDTO" |
|||
:key="key" |
|||
style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" |
|||
:gutter="20"> |
|||
<el-col :span="10">{{key|infoName}}</el-col> |
|||
<el-col :span="14">{{val|showInfo}}</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row> |
|||
<h2 v-if="data.rootAgencyDTO!=null">根级组织信息</h2> |
|||
<el-row v-for="(val, key) in data.rootAgencyDTO" |
|||
:key="key" |
|||
style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" |
|||
:gutter="20"> |
|||
<el-col :span="10">{{key|infoName}}</el-col> |
|||
<el-col :span="14">{{val|showInfo}}</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row> |
|||
<h2 v-if="data.managers.length!==0">管理员信息</h2> |
|||
<el-row v-for="(val, index) in data.managers" |
|||
:key="index" |
|||
style="margin:10px;font-size:16px;height:30px;line-height:30px;border-bottom:1px solid grey;" |
|||
:gutter="20"> |
|||
<el-col :span="6">{{val.realName}}</el-col> |
|||
<el-col :span="4">{{val.gender|genderName}}</el-col> |
|||
<el-col :span="14">{{val.mobile}}</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
dataList: { |
|||
type: [Object, Array], |
|||
default: () => { |
|||
return { |
|||
customerInfoDTO: {}, |
|||
rootAgencyDTO: {}, |
|||
managers: [] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
data: this.dataList |
|||
} |
|||
}, |
|||
filters: { |
|||
infoName (key) { |
|||
return { |
|||
'customerName': '客户名称', |
|||
'organizationLevel': '组织级别', |
|||
'agencyName': '组织名称', |
|||
'level': '组织级别', |
|||
'areaCode': '地区编码', |
|||
'province': '省份', |
|||
'city': '城市', |
|||
'district': '区县', |
|||
'realName': '姓名', |
|||
'gender': '性别', |
|||
'mobile': '手机号' |
|||
}[key] |
|||
}, |
|||
genderName (key) { |
|||
return [ |
|||
'未知', |
|||
'男', |
|||
'女' |
|||
][key] |
|||
}, |
|||
showInfo (key) { |
|||
if (key === 'province') { |
|||
return '省级' |
|||
} else if (key === 'city') { |
|||
return '市级' |
|||
} else if (key === 'district') { |
|||
return '区县级' |
|||
} else if (key === 'street') { |
|||
return '乡（镇、街道）级' |
|||
} else if (key === 'community') { |
|||
return '社区级' |
|||
} else if (key === '') { |
|||
return '————' |
|||
} else { |
|||
return key |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dataList (nVal) { |
|||
this.data = nVal |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,566 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<el-button type="primary" |
|||
plain |
|||
icon="el-icon-circle-plus-outline" |
|||
style="margin-bottom:10px;" |
|||
@click="toStep(2)">新增</el-button> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<el-table v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
style="width: 100%;" |
|||
@row-contextmenu="handleRowContext" |
|||
@cell-dblclick="handleRowContext"> |
|||
<el-table-column prop="logo" |
|||
label="客户LOGO" |
|||
header-align="left" |
|||
align="left" |
|||
width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-image v-if="scope.row.logo" |
|||
style="width: 40px; height: 40px;text-align: center;" |
|||
:src="scope.row.logo" |
|||
:preview-src-list="[scope.row.logo]"> |
|||
</el-image> |
|||
<!-- <img v-if="scope.row.logo" :src="scope.row.logo" class="customer-logo" /> --> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="customerName" |
|||
label="客户名称" |
|||
header-align="left" |
|||
align="left" |
|||
width="300"></el-table-column> |
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
header-align="right" |
|||
align="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="small" |
|||
v-if="!scope.row.hasRootAgency" |
|||
@click="toSetUpStep(scope.row.customerId, 3)">根级组织设置</el-button> |
|||
<el-button size="small" |
|||
v-if="!scope.row.hasManager" |
|||
@click="toSetUpStep(scope.row.customerId, 4)">管理员设置</el-button> |
|||
<el-button size="small" |
|||
@click="onOpenDetails(scope.row.customerId)">详情</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
<el-dialog @close="toStep(0)" |
|||
width="850px" |
|||
:visible.sync="centerDialogVisible" |
|||
center |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false"> |
|||
<div v-if="step == 1"> |
|||
<componentInfo :dataList="details"></componentInfo> |
|||
</div> |
|||
<div class="add-c-box" |
|||
v-if="step == 2"> |
|||
<h2>客户信息</h2> |
|||
<el-form label-position="left" |
|||
label-width="80px" |
|||
:model="dataForm2" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
@keyup.enter.native="submitStepHandle()" |
|||
status-icon> |
|||
<el-form-item prop="customerName" |
|||
label="客户名称"> |
|||
<el-input v-model="dataForm2.customerName" |
|||
key="customerName"> |
|||
<span slot="prefix" |
|||
class="el-input__icon"> |
|||
<svg class="icon-svg" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-user"></use> |
|||
</svg> |
|||
</span> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="organizationLevel" |
|||
label="组织级别"> |
|||
<el-select v-model="dataForm2.organizationLevel" |
|||
key="organizationLevel"> |
|||
<el-option v-for="(val, key) in organizationLevels" |
|||
:key="key" |
|||
:label="key" |
|||
:value="val"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="logo" |
|||
label="客户LOGO"> |
|||
<el-upload class="avatar-uploader" |
|||
:action="uploadUlr" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess"> |
|||
<img v-if="dataForm2.logo" |
|||
:src="dataForm2.logo" |
|||
class="avatar" /> |
|||
<i v-else |
|||
class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-button type="primary" |
|||
@click="submitStepHandle">下一步</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="add-c-box" |
|||
v-else-if="step == 3"> |
|||
<h2>根级组织信息</h2> |
|||
<el-form label-position="left" |
|||
label-width="80px" |
|||
:model="dataForm3" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
@keyup.enter.native="submitStepHandle()" |
|||
status-icon> |
|||
<el-form-item prop="agencyName" |
|||
label="组织名称"> |
|||
<el-input v-model="dataForm3.agencyName" |
|||
key="agencyName"> |
|||
<span slot="prefix" |
|||
class="el-input__icon"> |
|||
<svg class="icon-svg" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-user"></use> |
|||
</svg> |
|||
</span> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="level" |
|||
label="组织级别"> |
|||
<el-select v-model="dataForm3.level" |
|||
key="level" |
|||
@change="onLevelChange"> |
|||
<el-option v-for="(val, key) in organizationLevels" |
|||
:key="key" |
|||
:label="key" |
|||
:value="val"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item :prop="pcd" |
|||
label="选择地区" |
|||
:show-message="pcdError"> |
|||
<v-distpicker :hideArea="isHideArea" |
|||
:province="dataForm3.province" |
|||
:city="dataForm3.city" |
|||
:area="dataForm3.district" |
|||
:onlyProvince="isOnlyProvince" |
|||
@province="onChangeProvince" |
|||
@city="onChangeCity" |
|||
@area="onChangeArea"></v-distpicker> |
|||
</el-form-item> |
|||
<el-form-item prop="areaCode" |
|||
label="地区编码"> |
|||
<el-input v-model="dataForm3.areaCode" |
|||
key="areaCode" |
|||
disabled></el-input> |
|||
</el-form-item> |
|||
<el-button type="primary" |
|||
@click="submitStepHandle">下一步</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="add-c-box" |
|||
v-else-if="step == 4"> |
|||
<h2>管理员信息</h2> |
|||
<el-form label-position="left" |
|||
label-width="80px" |
|||
:model="dataForm4" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
@keyup.enter.native="submitStepHandle()" |
|||
status-icon> |
|||
<el-form-item prop="realName" |
|||
label="姓名"> |
|||
<el-input v-model="dataForm4.realName" |
|||
key="realName"> |
|||
<span slot="prefix" |
|||
class="el-input__icon"> |
|||
<svg class="icon-svg" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-user"></use> |
|||
</svg> |
|||
</span> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="gender" |
|||
label="性别"> |
|||
<el-select v-model="dataForm4.gender" |
|||
key="gender"> |
|||
<el-option v-for="(val, key) in genders" |
|||
:key="key" |
|||
:label="val" |
|||
:value="key"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="mobile" |
|||
label="手机号"> |
|||
<el-input v-model.number="dataForm4.mobile" |
|||
key="mobile"> |
|||
<span slot="prefix" |
|||
class="el-input__icon"> |
|||
<svg class="icon-svg" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-user"></use> |
|||
</svg> |
|||
</span> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-button type="primary" |
|||
@click="submitStepHandle">完成</el-button> |
|||
</el-form> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/c-manage/customer-manage.scss" |
|||
></style> |
|||
|
|||
<script> |
|||
|
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import VDistpicker from 'v-distpicker' |
|||
import { Loading } from 'element-ui' |
|||
import componentInfo from './customer-info' |
|||
|
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/oper/crm/customer/getvalidcustomerlist', |
|||
getDataListIsPage: false |
|||
}, |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/customerlogo/upload', |
|||
pcd: 'district', |
|||
pcdError: true, |
|||
centerDialogVisible: false, |
|||
organizationLevels: { |
|||
社区级: 'community', |
|||
'乡（镇、街道）级': 'street', |
|||
区县级: 'district', |
|||
市级: 'city', |
|||
省级: 'province' |
|||
}, |
|||
genders: ['未知', '男', '女'], |
|||
step: 1, |
|||
details: [], |
|||
customerId: '', |
|||
agencyId: '', |
|||
dataForm2: { |
|||
logo: '', |
|||
customerName: '', |
|||
organizationLevel: '' |
|||
}, |
|||
dataForm3: { |
|||
customerId: '', |
|||
agencyName: '', |
|||
level: '', |
|||
areaCode: '', |
|||
province: '', |
|||
city: '', |
|||
district: '' |
|||
}, |
|||
dataForm4: { |
|||
customerId: '', |
|||
realName: '', |
|||
gender: '', |
|||
mobile: '', |
|||
agencyId: '' |
|||
}, |
|||
isHideArea: false, |
|||
isOnlyProvince: false, |
|||
checkMobile: (rule, value, callback) => { |
|||
// if (!Number.isInteger(value)) { |
|||
// return callback(new Error('手机号格式不正确')) |
|||
// } |
|||
var phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ |
|||
if (!phoneReg.test(value.toString())) { |
|||
return callback(new Error('请输入正确格式的手机号')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
VDistpicker, |
|||
componentInfo |
|||
}, |
|||
mounted () { |
|||
// console.log(app.ajax) |
|||
}, |
|||
methods: { |
|||
toStep (s) { |
|||
this.step = s |
|||
if (s !== 0) { |
|||
this.centerDialogVisible = true |
|||
} |
|||
}, |
|||
toSetUpStep (customerId, step) { |
|||
this.customerId = customerId |
|||
this.toStep(step) |
|||
}, |
|||
getCustomerDetail (id) { |
|||
const url = '/oper/crm/customer/detail' |
|||
this.$http |
|||
.post(url, { customerId: id }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取详情成功') |
|||
this.details = res.data |
|||
console.log(res.data) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
async onOpenDetails (customerId) { |
|||
let loadingInstance = Loading.service() |
|||
await this.getCustomerDetail(customerId) |
|||
this.toStep(1) |
|||
loadingInstance.close() |
|||
}, |
|||
submitDataForm2 () { |
|||
console.log(this.dataForm2) |
|||
const url = '/oper/crm/customer/add' |
|||
const dataForm = this.dataForm2 |
|||
return this.$http |
|||
.post(url, dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.customerId = res.data.customerId |
|||
console.log('提交信息成功' + this.step) |
|||
this.toStep(3) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
submitDataForm3 () { |
|||
this.dataForm3.customerId = this.customerId |
|||
console.log(this.dataForm3) |
|||
const url = '/oper/crm/customer/addrootagency' |
|||
const dataForm = this.dataForm3 |
|||
return this.$http |
|||
.post(url, dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.agencyId = res.data.agencyId |
|||
console.log('提交信息成功' + this.step) |
|||
this.toStep(4) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
submitDataForm4 () { |
|||
let dataForm = this.dataForm4 |
|||
dataForm.customerId = this.customerId |
|||
dataForm.agencyId = this.dataForm4.agencyId |
|||
dataForm.mobile = this.dataForm4.mobile.toString() |
|||
console.log(dataForm) |
|||
const url = '/oper/crm/customer/addmanager' |
|||
|
|||
window.app.ajax.post(url, dataForm, |
|||
(data, rspMsg) => { |
|||
this.$message.success('提交信息成功' + this.step) |
|||
this.toStep(0) |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
|
|||
// return this.$http |
|||
// .post(url, dataForm) |
|||
// .then(({ data: res }) => { |
|||
// if (res.code !== 0) { |
|||
// return this.$message.error(res.msg) |
|||
// } else { |
|||
// console.log('提交信息成功' + this.step) |
|||
// this.toStep(0) |
|||
// } |
|||
// }) |
|||
// .catch(() => { |
|||
// return this.$message.error('网络错误') |
|||
// }) |
|||
}, |
|||
async toNextStep () { |
|||
let loadingInstance = Loading.service() |
|||
if (this.step === 2) { |
|||
await this.submitDataForm2() |
|||
} else if (this.step === 3) { |
|||
await this.submitDataForm3() |
|||
} else if (this.step === 4) { |
|||
await this.submitDataForm4() |
|||
} |
|||
loadingInstance.close() |
|||
}, |
|||
submitStepHandle () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.toNextStep() |
|||
}) |
|||
}, |
|||
// 改变组织级别 |
|||
onLevelChange (e) { |
|||
this.dataForm3.province = '' |
|||
this.dataForm3.city = '' |
|||
this.dataForm3.district = '' |
|||
}, |
|||
onChangeProvince (e) { |
|||
this.dataForm3.areaCode = e.code |
|||
this.dataForm3.province = e.value |
|||
this.dataForm3.city = '' |
|||
this.dataForm3.district = '' |
|||
if (this.pcd === 'province') { |
|||
this.pcdError = false |
|||
} |
|||
}, |
|||
onChangeCity (e) { |
|||
this.dataForm3.areaCode = e.code |
|||
this.dataForm3.city = e.value |
|||
this.dataForm3.district = '' |
|||
if (this.pcd === 'city') { |
|||
this.pcdError = false |
|||
} |
|||
}, |
|||
onChangeArea (e) { |
|||
this.dataForm3.areaCode = e.code |
|||
this.dataForm3.district = e.value |
|||
if (this.pcd === 'district') { |
|||
this.pcdError = false |
|||
} |
|||
}, |
|||
handleAvatarSuccess (res, file) { |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
this.dataForm2.logo = res.data.url |
|||
} else this.$message.error(res.msg) |
|||
}, |
|||
beforeAvatarUpload (file) { |
|||
const isJPG = file.type === 'image/jpeg' |
|||
const isLt2M = file.size / 1024 / 1024 < 2 |
|||
|
|||
if (!isJPG) { |
|||
this.$message.error('上传头像图片只能是 JPG 格式!') |
|||
} |
|||
if (!isLt2M) { |
|||
this.$message.error('上传头像图片大小不能超过 2MB!') |
|||
} |
|||
return isJPG && isLt2M |
|||
}, |
|||
handleCellDbclick (row, column, cell, event) { |
|||
if (column.label === '客户LOGO') { |
|||
this.copy(row.logo) |
|||
} |
|||
}, |
|||
handleRowContext (row, column, event) { |
|||
this.copy(row.logo) |
|||
}, |
|||
copy (data) { |
|||
let url = data |
|||
let oInput = document.createElement('input') |
|||
oInput.value = url |
|||
document.body.appendChild(oInput) |
|||
oInput.select() |
|||
console.log(oInput.value) |
|||
document.execCommand('Copy') |
|||
this.$message({ |
|||
message: 'LOGO链接复制成功', |
|||
type: 'success' |
|||
}) |
|||
oInput.remove() |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
customerName: [{ required: true, message: '请输入客户名称' }], |
|||
organizationLevel: [{ required: true, message: '请选择组织级别' }], |
|||
agencyName: [{ required: true, message: '请输入组织名称' }], |
|||
level: [{ required: true, message: '请选择组织级别' }], |
|||
areaCode: [{ required: true, message: '请输入地区编码' }], |
|||
province: [{ required: true, message: '请选择省份', trigger: 'blur' }], |
|||
city: [{ required: true, message: '请选择城市', trigger: 'blur' }], |
|||
district: [{ required: true, message: '请选择区县', trigger: 'blur' }], |
|||
realName: [{ required: true, message: '请输入姓名' }], |
|||
gender: [{ required: true, message: '请输入性别' }], |
|||
mobile: [ |
|||
{ required: true, message: '请输入手机号' }, |
|||
{ validator: this.checkMobile } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
step (nVal, oVal) { |
|||
if (nVal === 0) { |
|||
this.dataForm2 = { |
|||
customerName: '', |
|||
organizationLevel: '' |
|||
} |
|||
this.dataForm3 = { |
|||
agencyName: '', |
|||
level: '', |
|||
areaCode: '', |
|||
province: '', |
|||
city: '', |
|||
district: '' |
|||
} |
|||
this.dataForm4 = { |
|||
realName: '', |
|||
gender: '', |
|||
mobile: '' |
|||
} |
|||
this.centerDialogVisible = false |
|||
if (oVal === 3 || oVal === 4) { |
|||
this.query() |
|||
} |
|||
} |
|||
}, |
|||
'dataForm3.level': (nVal) => { |
|||
this.pcdError = true |
|||
this.dataForm3.areaCode = '' |
|||
if (nVal === 'province') { |
|||
this.isOnlyProvince = true |
|||
this.pcd = 'province' |
|||
} else if (nVal === 'city') { |
|||
this.isHideArea = true |
|||
this.isOnlyProvince = false |
|||
this.pcd = 'city' |
|||
} else { |
|||
this.pcd = 'district' |
|||
this.isHideArea = false |
|||
this.isOnlyProvince = false |
|||
} |
|||
if (nVal !== '') { |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue