<template>
|
<div class="custom-scroll">
|
<v-header title="新增组织成员"></v-header>
|
<div class="form-box">
|
<el-form class="demo-form-inline" label-width="100px">
|
<div class="item">
|
<el-form-item label="姓名">
|
<el-input size="small" class="input" v-model="formInline.name" maxlength="10" show-word-limit placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="职务">
|
<el-input size="small" class="input" v-model="formInline.job" maxlength="15" show-word-limit placeholder="请输入职务"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="电话">
|
<el-input size="small" class="input" v-model="formInline.phone" maxlength="11" show-word-limit placeholder="请输入电话"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="身份证号">
|
<el-input size="small" class="input" v-model="formInline.idCard" maxlength="18" show-word-limit placeholder="请输入身份证号"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="住址">
|
<el-input size="small" class="input" v-model="formInline.address" placeholder="请输入住址"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="民族">
|
<el-select size="small" v-model="formInline.nationCode" placeholder="请选择民族">
|
<el-option v-for="item in nationList" :key="item.nationCode" :label="item.nationName" :value="item.nationCode"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="所属组织">
|
<el-select size="small" v-model="formInline.clusterId" placeholder="请选择组织">
|
<el-option v-for="item in clusterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="item">
|
<el-form-item label="状态">
|
<el-radio-group size="small" v-model="formInline.status">
|
<el-radio-button label="1">启用</el-radio-button>
|
<el-radio-button label="2">停用</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div class="item sec">
|
<el-form-item label="上传照片">
|
<div class="app_images ">
|
<div
|
class="avatar"
|
v-for="(i, j) in formInline.recordPhoto"
|
:key="j + '-ta-img'"
|
>
|
<span
|
class="close el-icon-close"
|
@click.stop="onDelImage(i)"
|
></span>
|
<img
|
:src="i"
|
alt=""
|
@click.stop="appShowImage(i,formInline.recordPhoto)"
|
>
|
</div>
|
<v-upload
|
slots
|
class="avatar"
|
@path="onImageSave"
|
v-if="formInline.recordPhoto.length<1"
|
>
|
<div class="uopload-text">
|
<i class="el-icon-plus"></i>
|
<b>上传</b>
|
</div>
|
</v-upload>
|
</div>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div class="item">
|
<el-button @click="sub" size="small" type="primary">保存</el-button>
|
<el-button @click="back" size="small">返回</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {isvalidPhone,isIdcard} from '../../../assets/js/fromValidate';
|
import vUpload from "com/upload/upload1";
|
export default {
|
name: "add",
|
props: [],
|
components: {vUpload},
|
data() {
|
return {
|
formInline:{
|
name:'',
|
job:'',
|
phone:'',
|
idCard:'',
|
address:'',
|
nationCode:'',
|
clusterId:'',
|
status:'1',
|
recordPhoto:[],
|
logo:''
|
},
|
id:'',
|
nationList:[],//民族
|
clusterList:[],//组织
|
}
|
},
|
inject: ["appShowImage"],
|
created() {
|
if(this.$route.query.id){
|
this.id = this.$route.query.id
|
this.init()
|
}
|
this.setNationList()
|
this.setClusterList()
|
},
|
mounted() {
|
|
},
|
methods: {
|
sub(){
|
//提交
|
if(!this.formInline.name){
|
demo.toast(`请输入姓名`)
|
return
|
}
|
if(!this.formInline.job){
|
demo.toast(`请输入职务`)
|
return
|
}
|
if(!isvalidPhone(this.formInline.phone)){
|
demo.toast(`请输入正确的电话`)
|
return
|
}
|
// if(!this.formInline.phone){
|
// demo.toast(`请输入电话`)
|
// return
|
// }
|
if(!isIdcard(this.formInline.idCard)){
|
demo.toast(`请输入正确的身份证`)
|
return
|
}
|
if(!this.formInline.address){
|
demo.toast(`请输入住址`)
|
return
|
}
|
if(!this.formInline.nationCode){
|
demo.toast(`请选择民族`)
|
return
|
}
|
if(!this.formInline.clusterId){
|
demo.toast(`请选择所属组织`)
|
return
|
}
|
if(this.formInline.recordPhoto.length===0){
|
demo.toast(`请上传照片`)
|
return
|
}
|
let data = {
|
name:this.formInline.name,
|
job:this.formInline.job,
|
phone:this.formInline.phone,
|
idCard:this.formInline.idCard,
|
address:this.formInline.address,
|
nationCode:this.formInline.nationCode,
|
clusterId:this.formInline.clusterId,
|
status:this.formInline.status,
|
imageUrl:this.formInline.recordPhoto.join(),
|
}
|
if(this.id){//编辑
|
this.edit(data)
|
}else{//新增
|
// this.add(data)
|
this.add(data)
|
}
|
},
|
edit(data){
|
//编辑
|
data.id= this.id
|
this.$api.post('cluster/member/edit',data,e=>{
|
// console.log(res)
|
demo.toast("保存成功")
|
this.back()
|
})
|
},
|
add(data){
|
//新增
|
this.$api.post('cluster/member/add',data,res=>{
|
demo.toast("保存成功")
|
// console.log(res)
|
this.back()
|
})
|
},
|
back(){
|
this.$router.back()
|
},
|
init(){
|
this.$api.get('cluster/member/detail?id='+this.id,'',e=>{
|
// console.log(e)
|
e.recordPhoto = [e.imageUrl]
|
this.formInline = e
|
})
|
},
|
onDelImage(v) {
|
this.formInline.recordPhoto = this.formInline.recordPhoto.filter((r) => {
|
return r !== v;
|
});
|
},
|
onImageSave(v) {
|
this.formInline.recordPhoto.push(v);
|
},
|
setClusterList(){
|
//组织
|
this.$api.get('cluster/list','',res=>{
|
// console.log(res)
|
this.clusterList = res||[]
|
})
|
},
|
setNationList(){
|
//民族
|
this.$api.get('cluster/member/nation/list','',res=>{
|
// console.log(res)
|
this.nationList = res||[]
|
})
|
}
|
},
|
watch: {},
|
computed: {}
|
}
|
|
</script>
|
<style scoped lang="less">
|
.el-input {
|
width: 200px;
|
}
|
.upImage {
|
width: 100px;
|
display: flex;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
}
|
.custom-scroll {
|
overflow: auto;
|
.form-box{
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
.demo-form-inline{
|
display: flex;
|
max-width: 700px;
|
flex-wrap: wrap;
|
}
|
/deep/.el-form-item__label::before {
|
content: '*';
|
color: #e54d42;
|
|
}
|
.item{
|
box-sizing: border-box;
|
width: 300px;
|
|
}
|
}
|
}
|
</style>
|
