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.
450 lines
17 KiB
450 lines
17 KiB
<template> |
|
<!-- 展示关联人组件 --> |
|
<view> |
|
<!-- 仅处于企业和是否有关联人（有）的状态下展示，由父级空值隐藏 --> |
|
<view> |
|
<block v-for="(item,index) in list" :key="index"> |
|
<view class="bottom-border mab15"> |
|
<view class="left-border"><text class="mgl10">关联人{{index+1}}</text></view> |
|
</view> |
|
<uni-forms style="padding-bottom: 0;"> |
|
<uni-forms-item style="padding-bottom: 0;" required name="type" label="关联人类型"> |
|
<uni-data-checkbox v-model="item.type" :localdata="linkTypeList"></uni-data-checkbox> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<!-- 个人关联人 --> |
|
<uni-forms class="from-position" v-if="item.type == 0" :value="item" ref="manItem" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item name="relatedName" required label="关联人名称"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.relatedName" placeholder="请输入关联人名称"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="联系电话"> |
|
<uni-easyinput :disabled="handle" type="number" maxlength="11" :inputBorder="true" v-model="item.phone" placeholder="请输入联系电话"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="maritalStatus" required label="婚姻状况"> |
|
<picker :disabled="handle" :class="handle=='watch'||handle=='audit'?'disabled':''" @change="relatedMaritalChange($event,item)" :value="item.maritalStatusVal" :range="maritalList" :range-key="'name'"> |
|
<view :style="handle?'background-color:#eee;':''" class="picker-view flex-between"> |
|
<text >{{item.maritalStatusVal!==""? maritalList[item.maritalStatusVal].name : '请选择'}}</text> |
|
<text class="cuIcon-unfold lg text-gray"></text> |
|
</view> |
|
</picker> |
|
</uni-forms-item> |
|
<uni-forms-item name="idCard" required label="身份证号码"> |
|
<uni-easyinput :disabled="handle" type="idcard" :inputBorder="true" v-model="item.idCard" placeholder="请输入身份证号码"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="age" required label="年龄"> |
|
<uni-easyinput :disabled="handle" type="number" maxlength="2" :inputBorder="true" v-model="item.age" placeholder="请输入年龄"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="gender" required label="性别"> |
|
<uni-data-checkbox :disabled="handle" v-model="item.gender" :localdata="genders"></uni-data-checkbox> |
|
</uni-forms-item> |
|
<uni-forms-item name="address" required label="联系地址"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.address" placeholder="请输入联系地址"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="relatedEducation(index)" required label="学历"> |
|
<picker :disabled="handle" :class="handle=='watch'||handle=='audit'?'disabled':''" @change="educationChange($event,index)" :value="item.educationVal" :range="educationList" :range-key="'name'"> |
|
<view :style="handle?'background-color:#eee;':''" class="picker-view flex-between"> |
|
<text>{{item.educationVal!=='' ? educationList[item.educationVal].name : '请选择'}}</text> |
|
<text class="cuIcon-unfold lg text-gray"></text> |
|
</view> |
|
</picker> |
|
</uni-forms-item> |
|
<uni-forms-item name="employer" required label="工作单位"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.employer" placeholder="请输入工作单位"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="position" required label="职务"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.position" placeholder="请输入职务"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="relationship" required label="关联关系"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.relationship" placeholder="请输入关联关系"></uni-easyinput> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<!-- 企业关联人 enterprise--> |
|
<uni-forms class="from-position" v-if="item.type == 1" :value="item" ref="enterprise" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item name="relatedName" required label="关联人名称"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.relatedName" placeholder="请输入关联人名称"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="address" required label="联系住址"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.address" placeholder="请输入联系住址"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="socialUnifiedCode" required label="社会统一代码"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.socialUnifiedCode" placeholder="请输入社会统一代码"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="registeredCapital" required label="注册资金(万元)"> |
|
<uni-easyinput :disabled="handle" type="digit" :inputBorder="true" v-model="item.registeredCapital" placeholder="请输入注册资金"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="registeredTime" required label="注册时间"> |
|
<picker :disabled="handle" :class="handle?'disabled':''" mode="date" :value="item.registeredTime" @change="relatedtimeChange($event,item)"> |
|
<view class="picker-view flex-between"> |
|
<text>{{item.registeredTime ? item.registeredTime : '请选择'}}</text> |
|
<text class="cuIcon-unfold lg text-gray"></text> |
|
</view> |
|
</picker> |
|
</uni-forms-item> |
|
<uni-forms-item name="industry" required label="所属行业"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.industry" placeholder="请输入所属行业"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="legalPersonName" required label="法人姓名"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.legalPersonName" placeholder="请输入法人姓名"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="联系电话"> |
|
<uni-easyinput :disabled="handle" type="number" maxlength="11" :inputBorder="true" v-model="item.phone" placeholder="请输入联系电话"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="relationship" required label="关联关系"> |
|
<uni-easyinput :disabled="handle" type="text" :inputBorder="true" v-model="item.relationship" placeholder="请输入关联关系"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="shareholdersSituation" required label="股东情况"> |
|
<uni-easyinput :disabled="handle" type="textarea" :inputBorder="true" v-model="item.shareholdersSituation" placeholder="请输入关联关系"></uni-easyinput> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<!-- 企业和个人共用，可进行保存和删除 --> |
|
<view class="foot-btn btn-rig pad-bt"> |
|
<button v-if="!handle" class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="submitForm(item,index)">保存</button> |
|
<button v-if="!handle" class="mini-btn round" type="warn" size="mini" @click="deleteContact(index,item)">删除</button> |
|
</view> |
|
</block> |
|
</view> |
|
<!-- 末尾的新增关联人，点击生成一个新的关联人表单，无删除按钮。有新增按钮，新增完毕重新请求关联人列表 --> |
|
<!-- 且清除已有的值 --> |
|
<!-- 仅企业+有 关联人展示 --> |
|
<button v-if="!handle" class="cu-btn block bg-blue margin-tb-sm lg round" @click="addContact">新增关联人</button> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name:"linkMan", |
|
props:{ |
|
// 禁用修改,隐藏新增/保存功能，false为不做限制 |
|
handle:{ |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 用于保存，必传 |
|
companyId:{}, |
|
}, |
|
data() { |
|
return { |
|
// 切换关联人企业和客户 |
|
linkTypeList: [ |
|
{ |
|
text: '个人', |
|
value: '0', |
|
// disabled: true |
|
}, |
|
{ |
|
text: '企业', |
|
value: '1', |
|
// disabled: false |
|
}, |
|
], |
|
//性别列表-禁用 |
|
genders: [ |
|
{ |
|
text: '男', |
|
value: 1, |
|
}, |
|
{ |
|
text: '女', |
|
value: 0, |
|
}, |
|
], |
|
//婚姻状况列表 |
|
maritalList: [ |
|
{ |
|
name: '未婚', |
|
value: 0 |
|
}, |
|
{ |
|
name: '已婚', |
|
value: 1 |
|
}, |
|
{ |
|
name: '离异', |
|
value: 2 |
|
}, |
|
{ |
|
name: '再婚', |
|
value: 3 |
|
}, |
|
], |
|
//学历列表 |
|
educationList: [ |
|
{ |
|
name: '本科', |
|
value: 0 |
|
}, |
|
{ |
|
name: '大专', |
|
value: 1 |
|
}, |
|
{ |
|
name: '高职', |
|
value: 2 |
|
}, |
|
{ |
|
name: '中专', |
|
value: 3 |
|
}, |
|
{ |
|
name: '其他', |
|
value: 4 |
|
}, |
|
], |
|
//关联人列表，默认留一个初始化的对象 |
|
// 企业和个人共用了部分字段，提交时需要删除部分 |
|
list: [ |
|
{ // 公用 |
|
type: '0', |
|
relatedName: '',//关联人名称 |
|
relationship: '',//关联关系 |
|
phone: '',//联系电话 |
|
address: '',//联系地址 |
|
|
|
// 个人关联人 |
|
maritalStatusVal: '', |
|
maritalStatus: '',//婚姻状况 |
|
idCard: '',//身份证号码 |
|
age: '',//年龄 |
|
gender: 1,//性别 |
|
educationVal: '', |
|
education: '',//学历 |
|
employer: '',//工作单位 |
|
position: '',//职务 |
|
//企业关联人 |
|
socialUnifiedCode: '',//社会统一代码 |
|
registeredCapital: '',//注册资金 |
|
registeredTime: '',//注册时间 |
|
industry: '',//所属行业 |
|
legalPersonName: '',//法人姓名 |
|
shareholdersSituation: ''//股东情况 |
|
} |
|
] |
|
}; |
|
}, |
|
created() { |
|
console.log(this.companyId) |
|
if(this.companyId) this.getLinkmanList() |
|
console.log(this.handle,'当前操作状态') |
|
if(this.handle){ |
|
this.linkTypeList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.genders.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.maritalList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.educationList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
} |
|
// this.companyId |
|
}, |
|
watch:{ |
|
// 监听传值，若为true，禁用掉CheckBox |
|
handle:function(val){ |
|
console.log(val,'handlue-0-0linmk') |
|
if(val){ |
|
this.linkTypeList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.genders.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.maritalList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
this.educationList.map(e=>{ |
|
e.disabled = true |
|
}) |
|
} |
|
}, |
|
// 监听传递的企业id，调用关联人接口 |
|
companyId:function(val,old){ |
|
console.log(val,'当前的id值',old) |
|
if(val!==''||val!==null||val!==undefined){ |
|
this.getLinkmanList() |
|
} |
|
} |
|
}, |
|
onReady() { |
|
}, |
|
mounted() {}, |
|
methods:{ |
|
//企业关联人注册时间选择 |
|
relatedtimeChange(e,item) { |
|
item.registeredTime = e.detail.value |
|
console.log(item.registeredTime ,' 当前时间的值') |
|
}, |
|
//关联人婚姻状况选择 |
|
relatedMaritalChange(e,item) { |
|
item.maritalStatusVal = e.detail.value |
|
item.maritalStatus = this.maritalList[e.detail.value].value |
|
}, |
|
//关联人性别选择 |
|
legalGenderChange(e,index) { |
|
this.list[index].legalGender = e.detail.value |
|
}, |
|
//学历选择 |
|
educationChange(e,index) { |
|
this.list[index].educationVal = e.detail.value |
|
this.list[index].education = this.educationList[e.detail.value].value |
|
}, |
|
// 提交表单 |
|
submitForm(item,index) { |
|
// 0 个人 ： 企业 |
|
let obj // 用obj提交 |
|
if(!this.companyId) return uni.showToast({title: '请先选择客户！',icon:'none'}) |
|
// 共用验证 |
|
if (!item.relatedName)return uni.showToast({title:'请输入关联人名称',icon:"none"}) |
|
if (!item.relationship)return uni.showToast({title:'请输入关联关系',icon:"none"}) |
|
if (!item.phone)return uni.showToast({title:'请输入联系电话',icon:"none"}) |
|
if (!item.address)return uni.showToast({title:'请输入联系地址',icon:"none"}) |
|
|
|
obj = { |
|
type:item.type, |
|
relatedName:item.relatedName, |
|
relationship:item.relationship, |
|
phone:item.phone, |
|
address:item.address, |
|
relatedCompanyId:this.companyId |
|
} |
|
// 验证和赋值 |
|
if(item.type==0){ |
|
if (!item.maritalStatusVal)return uni.showToast({title:'请输入婚姻状况',icon:"none"}) |
|
if (!item.idCard)return uni.showToast({title:'请输入身份证号码',icon:"none"}) |
|
if (!item.age)return uni.showToast({title:'请输入年龄',icon:"none"}) |
|
if (item.gender!=0&&item.gender!=1)return uni.showToast({title:'请选择性别',icon:"none"}) |
|
if (!item.educationVal)return uni.showToast({title:'请选择学历',icon:"none"}) |
|
if (!item.employer)return uni.showToast({title:'请输入工作单位',icon:"none"}) |
|
if (!item.position)return uni.showToast({title:'请输入职务',icon:"none"}) |
|
obj.maritalStatus = item.maritalStatus |
|
obj.idCard = item.idCard |
|
obj.age = item.age |
|
obj.gender = item.gender |
|
obj.education = item.education |
|
obj.employer = item.employer |
|
obj.position = item.position |
|
}else{ |
|
if (!item.socialUnifiedCode)return uni.showToast({title:'请输入社会统一代码',icon:"none"}) |
|
if (!item.registeredCapital)return uni.showToast({title:'请输入注册资金',icon:"none"}) |
|
if (!item.registeredTime)return uni.showToast({title:'请选择注册时间',icon:"none"}) |
|
if (!item.industry)return uni.showToast({title:'请输入所属行业',icon:"none"}) |
|
if (!item.legalPersonName)return uni.showToast({title:'请输入法人姓名',icon:"none"}) |
|
if (!item.shareholdersSituation)return uni.showToast({title:'请输入股东情况',icon:"none"}) |
|
obj.socialUnifiedCode = item.socialUnifiedCode |
|
obj.registeredCapital = item.registeredCapital |
|
obj.registeredTime = item.registeredTime |
|
obj.industry = item.industry |
|
obj.legalPersonName = item.legalPersonName |
|
obj.shareholdersSituation = item.shareholdersSituation |
|
} |
|
// 老数据才有id--修改操作 |
|
if(item.id){ |
|
obj.id = item.id |
|
// 修改接口 |
|
this.$http.post('/api-crms/crms-company-personal/updateCompanyPersonal',obj).then(res=>{ |
|
uni.showToast({title: '修改成功'}) |
|
console.log('修改关联人的操作') |
|
this.getLinkmanList() |
|
}) |
|
} |
|
else{ // 下面为新增操作 |
|
console.log(obj,'新增操作') |
|
this.$http.post('/api-crms/crms-company-personal/insertCompanyPersonal',obj).then(res => { |
|
uni.showToast({title: '添加成功'}) |
|
// item.id = res.data[0].id // 添加成功,重新请求就有了 |
|
this.list.splice(list[this.list.length-1],1)// 删除添加的框，并请求一次接口 |
|
console.log('新增关联人操作') |
|
this.getLinkmanList()//调关联人接口 |
|
}).catch(function (error) {}); |
|
} |
|
}, |
|
//添加关联人按钮 |
|
addContact(){ |
|
// console.log('添加关联人按钮') |
|
// if(!this.businessApply.companyId) return uni.showToast({title: '请先选择客户！',icon:'none'}) |
|
// console.log('添加关联人按钮---没出发') |
|
// if(!this.enterpriseForm.isExistRelated) return uni.showToast({title: '请先选择客户！'}) |
|
// 生成一个新的表可输入 |
|
let CONTACT_INFO = { |
|
type: 0, |
|
relatedName: '', |
|
phone: '', |
|
maritalStatusVal: '', |
|
maritalStatus: '', |
|
idCard: '', |
|
age: '', |
|
gender: '', |
|
address: '', |
|
educationVal: '', |
|
education: '', |
|
employer: '', |
|
position: '', |
|
relationship: '', |
|
|
|
socialUnifiedCode: '', |
|
registeredCapital: '', |
|
registeredTime: '', |
|
industry: '', |
|
legalPersonName: '', |
|
shareholdersSituation: '' |
|
} |
|
this.list.push({...CONTACT_INFO}) |
|
}, |
|
//删除关联人 |
|
deleteContact(index,item){ |
|
let _this = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: '是否删除该关联人', |
|
success: function (res) { |
|
if (res.confirm) { |
|
if(item.id){ |
|
let arr = [] |
|
arr.push(item.id) |
|
_this.$http.post('/api-crms/crms-company-personal/deleteCompanyPersonal',arr).then(res => { |
|
_this.getLinkmanList() |
|
}).catch(function (error) {}); |
|
} |
|
_this.list.splice(index,1) |
|
_this.total = _this.total-1 |
|
uni.showToast({title: '删除成功'}) |
|
} else if (res.cancel) {} |
|
} |
|
}); |
|
}, |
|
// 关联人列表接口 |
|
getLinkmanList(){ |
|
console.log('关联人列表接口',this.companyId) |
|
if(!this.companyId) return uni.showToast({title: '请先选择客户！',icon:'none'}) |
|
this.$http.get("/api-crms/crms-company-personal/companyPersonalList",{ |
|
customerId:this.companyId, |
|
page:1, |
|
size:999 // 不做分页，直接展示所有的关联人或企业 |
|
}).then(res=>{ |
|
console.log(res,'读取关联人list') |
|
this.list = [] |
|
if(res.data.list&&res.data.list.length!==0){ |
|
this.list = res.data.list |
|
this.list.map(e=>{ |
|
e.educationVal = +e.education |
|
e.maritalStatusVal = +e.maritalStatus |
|
}) |
|
console.log(this.list,'关联人的list') |
|
} |
|
}) |
|
}, |
|
}, |
|
destroyed() {} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.from-position{ |
|
position: relative; |
|
top: -30rpx; |
|
} |
|
</style>
|
|
|