ZhaoTongYao
5 years ago
6 changed files with 450 additions and 1 deletions
@ -0,0 +1,23 @@ |
|||||
|
.add-c-box{ |
||||
|
width: 600px; |
||||
|
height: 500px; |
||||
|
margin: 0 auto; |
||||
|
border: 1px dashed grey; |
||||
|
position: relative; |
||||
|
padding: 20px 100px; |
||||
|
.el-input{ |
||||
|
width: 300px; |
||||
|
& input{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
}; |
||||
|
.el-button{ |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
bottom: 10px; |
||||
|
width: 200px; |
||||
|
}; |
||||
|
h2{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-button @click="backStep" type="primary" icon="el-icon-back">返回</el-button> |
||||
|
<el-card shadow="never" class="aui-card--fill"> |
||||
|
<el-row> |
||||
|
<h2>客户信息</h2> |
||||
|
<el-row v-for="(val, key) in data.customerInfoDTO" :key="key" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :gutter="20"> |
||||
|
<el-col :span="10">{{key|infoName}}</el-col> |
||||
|
<el-col :span="14">{{val}}</el-col> |
||||
|
</el-row> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<h2>根级组织信息</h2> |
||||
|
<el-row v-for="(val, key) in data.rootAgencyDTO" :key="key" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :gutter="20"> |
||||
|
<el-col :span="10">{{key|infoName}}</el-col> |
||||
|
<el-col :span="14">{{val}}</el-col> |
||||
|
</el-row> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<h2>管理员信息</h2> |
||||
|
<el-row v-for="(val, index) in data.managers" :key="index" style="background-color:rgb(23,179,163);margin:10px;color:white;font-size:16px;height:30px;line-height:30px;" :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: [ Object, Array ] |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
data: this.dataList |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
backStep () { |
||||
|
this.$emit('backto') |
||||
|
} |
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
this.data = {} |
||||
|
}, |
||||
|
filters: { |
||||
|
infoName (key) { |
||||
|
return { |
||||
|
'customerName': '客户名称', |
||||
|
'organizationLevel': '组织级别', |
||||
|
'agencyName': '组织名称', |
||||
|
'level': '组织级别', |
||||
|
'areaCode': '地区编码', |
||||
|
'province': '省份', |
||||
|
'city': '城市', |
||||
|
'district': '区县', |
||||
|
'realName': '姓名', |
||||
|
'gender': '性别', |
||||
|
'mobile': '手机号' |
||||
|
}[key] |
||||
|
}, |
||||
|
genderName (key) { |
||||
|
return [ |
||||
|
'未知', |
||||
|
'男', |
||||
|
'女' |
||||
|
][key] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dataList (nVal) { |
||||
|
this.data = nVal |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,338 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-if="step==0"> |
||||
|
<componentInfo :dataList="details" @backto="toStep(1)"></componentInfo> |
||||
|
</div> |
||||
|
<el-button v-show="step==1" type="primary" plain icon="el-icon-circle-plus-outline" style="margin-bottom:10px;" @click="toStep(2)">新增</el-button> |
||||
|
<el-card v-show="step==1" shadow="never" class="aui-card--fill"> |
||||
|
<el-table |
||||
|
v-loading="dataListLoading" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column prop="customerName" label="客户名称" header-align="left" align="left" width="300"></el-table-column> |
||||
|
<el-table-column label="操作" fixed="right" header-align="center" align="center"> |
||||
|
<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> |
||||
|
<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="val" :value="val"></el-option> |
||||
|
</el-select> |
||||
|
</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"> |
||||
|
<el-option v-for="(val, key) in organizationLevels" :key="key" :label="val" :value="val"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="district" label="选择地区"> |
||||
|
<v-distpicker @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"></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> |
||||
|
</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 '@/components/customer-manage/customer-info' |
||||
|
// import cloneDeep from 'lodash/cloneDeep' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [mixinViewModule], |
||||
|
data () { |
||||
|
return { |
||||
|
mixinViewModuleOptions: { |
||||
|
getDataListURL: '/oper/crm/customer/getvalidcustomerlist', |
||||
|
getDataListIsPage: false |
||||
|
}, |
||||
|
organizationLevels: ['社区级', '乡（镇、街道）级', '区县级', '市级', '省级'], |
||||
|
genders: ['未知', '男', '女'], |
||||
|
step: 1, |
||||
|
details: [], |
||||
|
customerId: '', |
||||
|
agencyId: '', |
||||
|
dataForm2: { |
||||
|
customerName: '', |
||||
|
organizationLevel: '' |
||||
|
}, |
||||
|
dataForm3: { |
||||
|
customerId: '', |
||||
|
agencyName: '', |
||||
|
level: '', |
||||
|
areaCode: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
district: '' |
||||
|
}, |
||||
|
dataForm4: { |
||||
|
customerId: '', |
||||
|
realName: '', |
||||
|
gender: '', |
||||
|
mobile: '', |
||||
|
agencyId: '' |
||||
|
}, |
||||
|
checkMobile: (rule, value, callback) => { |
||||
|
if (!Number.isInteger(value)) { |
||||
|
return callback(new Error('手机号格式不正确')) |
||||
|
} |
||||
|
if (value.toString().length !== 11) { |
||||
|
return callback(new Error('请输入11位长度的手机号')) |
||||
|
} |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
VDistpicker, componentInfo |
||||
|
}, |
||||
|
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: '请选择省份' } |
||||
|
], |
||||
|
city: [ |
||||
|
{ required: true, message: '请选择城市' } |
||||
|
], |
||||
|
district: [ |
||||
|
{ required: true, message: '请选择区县', trigger: 'blur' } |
||||
|
], |
||||
|
realName: [ |
||||
|
{ required: true, message: '请输入姓名' } |
||||
|
], |
||||
|
gender: [ |
||||
|
{ required: true, message: '请输入性别' } |
||||
|
], |
||||
|
mobile: [ |
||||
|
{ required: true, message: '请输入手机号' }, |
||||
|
{ validator: this.checkMobile } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
toStep (s) { |
||||
|
this.step = s |
||||
|
}, |
||||
|
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(0) |
||||
|
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) |
||||
|
} |
||||
|
}).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) |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
submitDataForm4 () { |
||||
|
this.dataForm4.customerId = this.customerId |
||||
|
this.dataForm4.agencyId = this.agencyId |
||||
|
this.dataForm4.mobile = this.dataForm4.mobile.toString() |
||||
|
console.log(this.dataForm4) |
||||
|
const url = '/oper/crm/customer/addmanager' |
||||
|
const dataForm = this.dataForm4 |
||||
|
return this.$http.post( |
||||
|
url, |
||||
|
dataForm |
||||
|
).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
console.log('提交信息成功' + this.step) |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async toNextStep () { |
||||
|
let loadingInstance = Loading.service() |
||||
|
if (this.step === 2) { |
||||
|
await this.submitDataForm2() |
||||
|
this.toStep(3) |
||||
|
} else if (this.step === 3) { |
||||
|
await this.submitDataForm3() |
||||
|
this.toStep(4) |
||||
|
} else if (this.step === 4) { |
||||
|
await this.submitDataForm4() |
||||
|
this.toStep(1) |
||||
|
} |
||||
|
loadingInstance.close() |
||||
|
}, |
||||
|
submitStepHandle () { |
||||
|
this.$refs['dataForm'].validate((valid) => { |
||||
|
if (!valid) { |
||||
|
return false |
||||
|
} |
||||
|
this.toNextStep() |
||||
|
}) |
||||
|
}, |
||||
|
onChangeProvince (e) { |
||||
|
this.dataForm3.areaCode = e.code |
||||
|
this.dataForm3.province = e.value |
||||
|
}, |
||||
|
onChangeCity (e) { |
||||
|
this.dataForm3.areaCode = e.code |
||||
|
this.dataForm3.city = e.value |
||||
|
}, |
||||
|
onChangeArea (e) { |
||||
|
this.dataForm3.areaCode = e.code |
||||
|
this.dataForm3.district = e.value |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
step (nVal) { |
||||
|
if (nVal === 1) { |
||||
|
this.dataForm2 = { |
||||
|
customerName: '', |
||||
|
organizationLevel: '' |
||||
|
} |
||||
|
this.dataForm3 = { |
||||
|
agencyName: '', |
||||
|
level: '', |
||||
|
areaCode: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
district: '' |
||||
|
} |
||||
|
this.dataForm4 = { |
||||
|
realName: '', |
||||
|
gender: '', |
||||
|
mobile: '' |
||||
|
} |
||||
|
this.query() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue