FE_DQmini-code/components/linkMan/linkMan.vue

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