<template>
<div class="app-container">
<el-form :model="userInfo" status-icon label-width="120px">
<div class="neibox" >
<el-row :gutter="80">
<el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >代理商:{{userInfo.name}}</h3></el-col>
<el-col :span="8">
<el-form-item label="账户类型:" prop="roleName">
<el-input type="text" v-model="userInfo.roleName" autocomplete="off" ></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="邀请码:" prop="inviteCode">
<el-input type="text" v-model="userInfo.inviteCode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--代理商-->
<div style="padding-bottom: 20px;"></div>
<el-row :gutter="80">
<el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >基础信息:</h3></el-col>
<el-col :span="8">
<el-form-item label="联系人:" prop="accountName">
<el-input type="text" v-model="userInfo.accountName" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话:" prop="phone">
<el-input type="number" v-model="userInfo.phone" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="身份证号:" prop="idcard">
<el-input type="text" v-model="userInfo.idcard" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="初始密码:" prop="password">
<el-input type="password" v-model="userInfo.password" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--基础信息-->
<div style="padding-bottom: 20px;"></div>
<el-row :gutter="80">
<el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >公司信息:</h3></el-col>
<el-col :span="8">
<el-form-item label="公司名:" prop="inviteCode">
<el-input type="text" v-model="userInfo.inviteCode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="社会信用代码:" prop="creditCode">
<el-input type="text" v-model="userInfo.creditCode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="法定代表人:" prop="legalPerson">
<el-input type="text" v-model="userInfo.legalPerson" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="公司地址:" prop="companyAddress">
<el-input type="text" v-model="userInfo.companyAddress" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--公司信息-->
<div style="padding-bottom: 20px;"></div>
<el-row :gutter="80">
<el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >付款信息:</h3></el-col>
<el-col :span="8">
<el-form-item label="账户名:" prop="accountName">
<el-input type="text" v-model="userInfo.accountName" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="税号:" prop="dutyNo">
<el-input type="text" v-model="userInfo.dutyNo" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<br/>
<el-col :span="8">
<el-form-item label="开户银行:" prop="openBank">
<el-input type="text" v-model="userInfo.openBank" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="收款账号:" prop="accountCode">
<el-input type="text" v-model="userInfo.accountCode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--付款信息-->
<div style="padding-bottom: 20px;"></div>
<el-row :gutter="80">
<el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >商务信息</h3></el-col>
<el-col :span="8">
<el-form-item label="代理范围:" >
<el-select v-model="proxyRangeArray" multiple placeholder="请选择">
<el-option
v-for="item in proxy"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="分成比例:" prop="baifen">
<el-input type="number" v-model="baifen" autocomplete="off"><template slot="append">%</template></el-input>
</el-form-item>
</el-col>
</el-row>
<!--商务信息-->
<div style="padding-bottom: 20px;"></div>
</div>
<div class="tijao">
<el-button type="primary" @click="editUsers" class="suretijao">保存修改</el-button>
<el-button class="gotoback">返 回</el-button>
</div>
</el-form>
</div>
</template>
<script>
import request from '@/utils/request';
export default {
data(){
var checkMobile = (rule, value, callback) => {
const checkMobile = /^1[3,4,5,6,7,8,9][0-9]{9}$/
if(checkMobile.test(value)){
return callback()
}
callback(new Error('请正确输入手机号码'))
}
var checkIdcard = (rule, value, callback) => {
const checkIdcard = /^[1-9][0-9]{5}(18|19|(2[0-9]))[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$/
if(checkIdcard.test(value)){
return callback()
}
callback(new Error('请正确输入身份证号码'))
}
return{
offices:[],
proxy:[],
queryInfo: {
roleId:''
},
id: '46',
userInfo: {},
proxyRangeArray: [],
baifen: 0,
addFormRules:{
roleId:[
{required: true, message: '请选择账号类型', trigger: 'blur'},
],
name:[
{required: true, message: '请输入联系人', trigger: 'blur'}
],
password:[
{required: true, message: '请输入密码', trigger: 'blur'},
{min:6, max:15, message:'用户名长度在6到15字符', trigger: 'blur'}
],
phone:[
{required: true, message: '请输入手机', trigger: 'blur'},
{validator: checkMobile, trigger: 'blur' }
],
idcard:[
{required: true, message: '请输入身份证号码', trigger: 'blur'},
{validator: checkIdcard, trigger: 'blur' }
]
},
addFormRef:{},
form: {
selectOne:'2',//单选默认值
selectMultiple:['1'],//多选默认值
}
}
},
created(){
this.getProxy();
this.getOffice();
this.getUserInfo();
},
methods:{
getUserInfo(){
request({
url:'lit/protected/lit/account/query/'+this.id,
method: 'get'
}).then((res) => {
debugger
this.userInfo = res.vo;
this.proxyRangeArray = this.userInfo.proxyRange?this.userInfo.proxyRange.split(","):[];
this.baifen = Math.floor(this.userInfo.shareProportion * 10000)/100
})
},
getOffice(){
request({
url: 'lit/protected/lit/account/getRoles',
method:'get'
}).then((res) => {
// console.log(res);
this.offices = res.list
})
},
getProxy(){
request({
url: 'lit/protected/lit/account/getProvinceProxy',
method:'get'
}).then((res) => {
console.log(res);
this.proxy = res.list;
})
},
editUsers(){
async aaaas=>{
// if(!aaaas) return
const{ data:res } = await this.$http.post('lit/protected/lit/account/modify/'+ this.userInfo.id )
if( res.meta.status !== 200 ){
return this.$message.error('修改失败')
}
this.$message.success('更新成功')
}
this.userInfo.shareProportion = Math.floor(this.baifen )/100;
this.userInfo.proxyRange = this.proxyRangeArray.join(",");
this.userInfo.proxyRangeText = this.proxy.filter(item=>{
return this.proxyRangeArray.includes(item.areaCode)}).map(item => item.areaName).join(",");
request({
url: 'lit/protected/lit/account/modify/'+ this.userInfo.id ,
method: 'post',
data: this.userInfo
}).then((res) => {
console.log(res)
this.$message.success('更新成功')
this.userlist =res.list
})
// );
}
}
}
</script>
<style scoped>
.neibox{margin:0 25px}
.agenttitle{font-weight: 400; padding-top: 5px;}
.listtext{display:flex;flex-wrap: wrap;padding-bottom: 12px;border-bottom: 1px solid #ccc}
.listinfo{ width:50%;box-sizing: border-box;font-size: 16px;margin: 12px 0;}
.tijao{ text-align: center;padding: 40px 0 30px;}
.suretijao{width:100px;}
.gotoback{width:100px;}
</style>
