ZhaoTongYao
6 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