miniapp/pages/handlecase/component/newlyAddedCase.vue

<template>
	<view class="conent">
		<view class="assignrbitrators">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-section title="案件信息" type="line" padding></uni-section>
				<uni-forms-item label="申请人调解请求:" name="arbitratClaims" label-width="120px" required
				:rules="[{'required': true,errorMessage: '申请人调解请求不能为空'}]"
				>
					<uni-easyinput  v-model="formData.arbitratClaims" type="textarea" placeholder="请输入申请人调解请求" />
				</uni-forms-item>
				<uni-forms-item label="事实和理由:" name="facts" label-width="120px" required
				:rules="[{'required': true,errorMessage: '事实和理由不能为空'}]"
				>
					<uni-easyinput v-model="formData.facts" type="textarea" placeholder="请输入事实和理由" />
				</uni-forms-item>
				<uni-forms-item label="案件标的:" name="caseSubjectAmount" label-width="120px" required
				:rules="[{'required': true,errorMessage: '案件标的不能为空'}]"
				>
					<uni-easyinput v-model="formData.caseSubjectAmount" type="text" placeholder="请输入案件标的" />
				</uni-forms-item>
				<uni-forms-item label="模板:" name="templateId" label-width="120px" required 
				:rules="[{'required': true,errorMessage: '模板不能为空'}]"
				>
					<uni-data-select :localdata="templateList" v-model="formData.templateId"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="申请人案件证据资料上传:" name="headImage" label-width="120px">
							<uni-file-picker ref="files" file-mediatype="all" :auto-upload="false" @select="select" :limit='9' />
				</uni-forms-item>
				<uni-section title="双方信息" type="line" padding></uni-section>
				<uni-forms-item label="选择机构或自然人" label-width="120px" name="objectiJuris">
					<uni-data-checkbox class='checkbox' 
						:localdata="objectiJurisArr"
						v-model="formData.affiliate.organizeFlag"
						@change='clearValidate'></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item :label="formData.affiliate.organizeFlag==0 ? '申请人':'申请机构'" :rules="rulesappName" name="affiliate.applicationName" label-width="120px" required >
					<uni-easyinput v-model="formData.affiliate.applicationName" type="text" :placeholder="formData.affiliate.organizeFlag==0 ? '请输入申请人姓名':'请输入申请机构名称'"/>
				</uni-forms-item>
				<uni-forms-item :label="formData.affiliate.organizeFlag==0 ? '身份证号码':'机构代码'" name="affiliate.code" label-width="120px" required 
				:rules="rulesappNo">
					<uni-easyinput v-model="formData.affiliate.code" type="text" :placeholder="formData.affiliate.organizeFlag==0 ? '请输入身份证号码':'请输入统一社会代码'" />
				</uni-forms-item>
				
				<uni-forms-item label="申请人邮箱:" name="affiliate.applicationEmail" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '申请人邮箱不能为空'},
					{pattern:'^\\S+?@\\S+?\\.\\S+?$',errorMessage:'邮箱格式不正确'}
					]"
				>
					<uni-easyinput v-model="formData.affiliate.applicationEmail"
					 type="text" placeholder="请输入申请人邮箱" />
				</uni-forms-item>
				<uni-forms-item label="申请人电话:" name="affiliate.applicationPhone" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '申请人电话不能为空'},
					{pattern:'^[1][3,4,5,6,7,8,9][0-9]{9}$',errorMessage:'申请人电话格式不正确'}
					]"
				>
					<uni-easyinput v-model="formData.affiliate.applicationPhone" type="text" placeholder="请输入申请人电话" />
				</uni-forms-item>
				<uni-forms-item label="法定代表人:" name="affiliate.compLegalPerson" label-width="120px" required
				:rules="[{'required': true,errorMessage: '法定代表人不能为空'}]"
				>
					<uni-easyinput v-model="formData.affiliate.compLegalPerson" type="text" placeholder="请输入法定代表人" />
				</uni-forms-item>
				<uni-forms-item label="申请人住所:" name="affiliate.applicantHome" label-width="120px" required
				:rules="[{'required': true,errorMessage: '申请人住所不能为空'}]"
				>
					<uni-easyinput v-model="formData.affiliate.applicantHome" type="text" placeholder="请输入申请人住所" />
				</uni-forms-item>
				<uni-forms-item label="申请人联系地址:" name="affiliate.applicantAddress" label-width="120px" required
				:rules="[{'required': true,errorMessage: '申请人联系地址不能为空'}]"
				>
					<uni-easyinput v-model="formData.affiliate.applicantAddress" type="text" placeholder="请输入申请人联系地址" />
				</uni-forms-item>
				<uni-forms-item label="代理人联系电话:" name="affiliate.contactTelphoneAgent" label-width="120px"
				 
				v-if="formData.affiliate.organizeFlag==0">
					<uni-easyinput v-model="formData.affiliate.contactTelphoneAgent" type="text" placeholder="请输入代理人联系电话" />
				</uni-forms-item>
				<uni-forms-item label="代理人联系电话:" name="affiliate.contactTelphoneAgent" label-width="120px" required
				 :rules="[
					 {'required': true,errorMessage: '代理人联系电话不能为空'},
					 {pattern:'^[1][3,4,5,6,7,8,9][0-9]{9}$',errorMessage:'代理人联系电话格式不正确'}
					 ]"
				v-if="formData.affiliate.organizeFlag==1"
				>
					<uni-easyinput v-model="formData.affiliate.contactTelphoneAgent" type="text" placeholder="请输入代理人联系电话" />
				</uni-forms-item>
				<uni-forms-item label="委托代理人姓名:" 	name="affiliate.nameAgent" label-width="120px" v-if="formData.affiliate.organizeFlag==0">
					<uni-easyinput v-model="formData.affiliate.nameAgent" type="text" placeholder="请输入委托代理人姓名" />
				</uni-forms-item>
				<uni-forms-item label="委托代理人姓名:" name="affiliate.nameAgent"  label-width="120px" required
				:rules="[{'required': true,errorMessage: '委托代理人姓名不能为空'}]"
				v-if="formData.affiliate.organizeFlag==1"
				>
					<uni-easyinput v-model="formData.affiliate.nameAgent" type="text" placeholder="请输入委托代理人姓名" />
				</uni-forms-item>
				<uni-forms-item label="代理人邮箱:" name="affiliate.agentEmail" label-width="120px" v-if="formData.affiliate.organizeFlag==0">
					<uni-easyinput v-model="formData.affiliate.agentEmail" type="text" placeholder="请输入代理人邮箱" />
				</uni-forms-item>
				<uni-forms-item label="代理人邮箱:" name="affiliate.agentEmail" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '代理人邮箱不能为空'},
					{pattern:'^\\S+?@\\S+?\\.\\S+?$',errorMessage:'邮箱格式不正确'}
					]"
				v-if="formData.affiliate.organizeFlag==1"
				>
					<uni-easyinput v-model="formData.affiliate.agentEmail" type="text" placeholder="请输入代理人邮箱" />
				</uni-forms-item>
				<uni-forms-item label="被申请人姓名:" name="affiliate.respondentName" label-width="120px" required
				:rules="[{'required': true,errorMessage: '被申请人姓名不能为空'}]"
				>
					<uni-easyinput v-model="formData.affiliate.respondentName" type="text" placeholder="请输入被申请人姓名" />
				</uni-forms-item>
				<uni-forms-item label="被申请人联系电话:" name="affiliate.respondentPhone" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '被申请人联系电话不能为空'},
					{pattern:'^[1][3,4,5,6,7,8,9][0-9]{9}$',errorMessage:'被申请人联系电话格式不正确'}
					]"
				>
					<uni-easyinput v-model="formData.affiliate.respondentPhone" type="text" placeholder="请输入被申请人联系电话" />
				</uni-forms-item>
				<uni-forms-item label="被申请人身份证号:" name="affiliate.respondentIdentityNum" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '被申请人身份证号不能为空'},
					{pattern:'^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',errorMessage:'被申请人身份证格式错误'}
					
					]"
				>
					<uni-easyinput v-model="formData.affiliate.respondentIdentityNum" @blur="handleBlur" type="text" placeholder="请输入被申请人身份证号" />
				</uni-forms-item>
				<uni-forms-item label="被申请人性别" label-width="120px" required>
					<uni-data-checkbox class='checkbox'
						:disabled='true'
						v-model="formData.affiliate.respondentSex"
						:localdata="respondentSexy"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="被申请人出生年月日" label-width="120px">
					<uni-datetime-picker v-model="formData.affiliate.respondentBirth" :disabled='true' type="date" :clear-icon="false" />
				</uni-forms-item>
				<uni-forms-item label="被申请人住所:" name="affiliate.respondentHome" label-width="120px" required
				:rules="[{'required': true,errorMessage: '被申请人住所不能为空'}]"
				>
					<uni-easyinput v-model="formData.affiliate.respondentHome" type="text" placeholder="请输入被申请人住所" />
				</uni-forms-item>
				<uni-forms-item label="被申请人邮箱:" name="affiliate.respondentEmail" label-width="120px" required
				:rules="[
					{'required': true,errorMessage: '被申请人邮箱不能为空'},
					{pattern:'^\\S+?@\\S+?\\.\\S+?$',errorMessage:'邮箱格式不正确'}
					
					]"	
				>
					<uni-easyinput v-model="formData.affiliate.respondentEmail" type="text" placeholder="请输入被申请人邮箱" />
				</uni-forms-item>
			</uni-forms>
			<view class="determine" style="text-align: center;">
				<button  class="mini-btn" 
				type="primary" size="mini" 
				@tap="submitReasont">确定</button>
				<button style="margin-left:30rpx;" class="mini-btn" 
				type="default" size="mini" 
				@tap="cencalBut">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getTemplate,getInfoByIdCard,caseApplicationInsert,updateComfire,caseApplicationSelectById} from '../../../api/handlecase/index.js'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	export default {
		data() {
				return {
					formData:{
						affiliate:{
							organizeFlag: 0,
							respondentSex: 0,
						},
						columnValueList: [],
						caseAttachList: [],
					},
					ids:null,
					tempFilePaths: null,
					templateList:[],
					objectiJurisArr: [{
						text: '自然人',
						value: 0
					}, {
						text: '机构',
						value: 1
					}],
					respondentSexy: [
						{
							text: '女',
							value: 1
						}, {
							text: '男',
							value: 0
						}
					],
					rules:{},
					rulesappName: [
						{  
							required: true,    
							errorMessage: '输入信息不能为空',    
						},{
							
							validateFunction: (rule, value, data, callback) => {
								//判断手机号格式时候正确
								if (value.length<1) {
									if(this.formData.affiliate.organizeFlag == 0){
										callback('请输入申请人姓名')
									}else{
										callback('请输入机构名称')
									}
								}
								return true
							}
													
						}
					],
					rulesappNo: [
						{  
							required: true,    
							errorMessage:'输入信息不能为空',    
						},{
							
							validateFunction: (rule, value, data, callback) => {
								//判断手机号格
								if(this.formData.affiliate.organizeFlag == 0){
									let pNoReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
									if(!pNoReg.test(value)){
										callback('请输入正确的身份证号码')
									}
								}else{
									if(!value){
										callback('请输入正确的机构信息')
									}
								}
								return true
							}
													
						}
					]
				}
			
			
		},
		methods:{
			clearValidate(val){
				 this.formData.affiliate.applicationName = null
				 this.formData.affiliate.code = null
				 this.$refs["form"].clearValidate()
			},
			submitReasont(){
				this.$refs.form.validate().then(res=>{
						if(this.ids){
							this.modifyData(this.formData)
						}else{
							this.insertFn(this.formData)
						}
						
					}).catch(err =>{
						
				})
			},
			/** 获取裁决书模板 */
			getTemplateFn(data) {
			      getTemplate(data).then((res) => {
			        //this.templateList = res.rows;
					res.rows.forEach(item=>{
						this.templateList.push({value:item.id,text:item.temName})
					})
			      });
			},
			 /** 根据案件id获取对应信息 */
			 caseApplicationSelectByIdFn(data) {
				  caseApplicationSelectById(data).then(res=>{
					 res.data.affiliate.respondentSex = Number(res.data.affiliate.respondentSex)
					 this.formData = res.data
				  })
			 },
			// 被申请人获取性别出生年月
			handleBlur(){
				let idCards = {
				        idCard: this.formData.affiliate.respondentIdentityNum,
				      };
				getInfoByIdCard(idCards).then(res=>{
					this.formData.affiliate.respondentSex = Number(res.respondentSex);
					this.formData.affiliate.respondentBirth = res.respondentBirth;
				})
			},
			// 新增案件
			    insertFn(data) {
			      caseApplicationInsert(data).then((res) => {
					  uni.showToast({
					  	title: '成功',
					  	icon: 'none',
					  	duration: 1000
					  })
					  uni.navigateBack({
					  	delta: 1
					  })
			      });
			},
			//修改案件
				modifyData(data) {
				      updateComfire(data).then((res) => {
				        uni.showToast({
				        	title: '成功',
				        	icon: 'none',
				        	duration: 1000
				        })
				        uni.navigateBack({
				        	delta: 1
				        })
				      });
				},
				// 文件上传
				select(e) {
					this.tempFilePaths = e.tempFilePaths;
					// loading
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
						url: config.baseUrlTJ + "/common/upload",
						filePath: this.tempFilePaths[0],
						header: {
							Authorization: getToken() || '',
						},
						formData: {
							annexType: 2,
							id: this.formData.id
						},
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data)
							 this.formData.caseAttachList.push({
							        annexId: result.annexId,
							  });
							console.log(result.annexId)
							uni.showToast({
								title: '上传成功',
								icon: 'none',
								duration: 1000
							})
							uni.hideLoading();
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 1000
							})
							uni.hideLoading()
						}
					})
				},
			cencalBut(){
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(data) {
			this.ids = data.id
			if(this.ids){
				this.caseApplicationSelectByIdFn({id:data.id})
				uni.setNavigationBarTitle({title:"案件修改"})
			}else{
				uni.setNavigationBarTitle({title:"案件新增"})
			}
			this.getTemplateFn()
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		}
	}
	
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
	.assignrbitrators{
		margin: 30rpx;
	}
</style>