You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
11 KiB
339 lines
11 KiB
<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 './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('手机号格式不正确'))
|
|
}
|
|
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
|
|
},
|
|
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>
|
|
|