灵山运营端前端代码
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

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