miniapp/pages/handlecase/component/caseDetails.vue

<template>
	<view class="">
		<uni-section title="  ">
			<!-- 选项卡 -->
			<view>
				<uni-segmented-control :current="current" :values="itemsT" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="" v-show="current === 0">
				<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="案件名称:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.caseName" placeholder="请输入案件名称"/>
							</uni-forms-item>
							<uni-forms-item label="案件标的:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.caseSubjectAmount" placeholder="请输入案件标的"/>
							</uni-forms-item>
							<uni-forms-item label="借款开始日期" label-width="100px">
								<uni-datetime-picker :disabled='true' v-model="formData.loanStartDate" 
									type="date" :clear-icon="false" />
							</uni-forms-item>
							<uni-forms-item label="借款结束日期" label-width="100px">
								<uni-datetime-picker :disabled='true' v-model="formData.loanEndDate"
									type="date" :clear-icon="false" />
							</uni-forms-item>
							<uni-forms-item label="合同编号:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.contractNumber" placeholder="请输入"/>
							</uni-forms-item>
							<uni-forms-item label="申请人主张欠本金:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.claimPrinciOwed" placeholder="请输入"/>
							</uni-forms-item>
							<uni-forms-item label="申请人主张欠利息:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.claimInterestOwed" placeholder="请输入"/>
							</uni-forms-item>
							<uni-forms-item label="申请人主张违约金:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.claimLiquidDamag" placeholder="请输入"/>
							</uni-forms-item>
							<uni-forms-item label="申请人请求仲裁庭裁决:" label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.requestRule" type="textarea" placeholder="请输入申请人请求仲裁庭裁决" :maxlength='3000' />
							</uni-forms-item>
							<uni-forms-item label="申请人仲裁请求:"  label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.arbitratClaims" type="textarea" placeholder="请输入申请人仲裁请求" :maxlength='3000' />
							</uni-forms-item>
							<uni-forms-item label="事实和理由:" name="arbitratClaims" label-width="100px" required>
								<uni-easyinput :disabled='true' v-model="formData.arbitratClaims" type="textarea" placeholder="请输入事实和理由" :maxlength='3000' />
							</uni-forms-item>
							<uni-forms-item label="是否财产保全申请" label-width="100px">
								<uni-data-checkbox :disabled='true' v-model="formData.properPreser"
									:localdata="isPropertyPreservation"></uni-data-checkbox>
							</uni-forms-item>
							<uni-forms-item label="是否书面审理" label-width="100px">
								<uni-data-checkbox :disabled='true' v-model="formData.applicantIsWrittenHear"
									:localdata="isAdjudicate"></uni-data-checkbox>
							</uni-forms-item>
							<uni-forms-item label="裁决书模板" label-width="100px">
								<uni-data-select :disabled='true' v-model="formData.templateId"
									:localdata="rulingTemplate"></uni-data-select>
							</uni-forms-item>
							<uni-section title="申请人的主体信息" type="line" padding></uni-section>
							<!-- 申请人信息 -->
							<view class="" v-for="(item,index) in formData.affiliate.applicant">
								<uni-forms-item label="选择机构或自然人" label-width="100px">
									<uni-data-checkbox :disabled='true' v-model="item.applicant.organizeFlag" class='checkbox' :localdata="objectiJurisArr"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="是否操作人" label-width="100px">
									<uni-data-checkbox :disabled='true'  v-model="item.applicant.operatorFlag"
										:localdata="isProxyApplicant"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item :label="item.applicant.organizeFlag==0 ? '申请人':'申请机构'"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.name" placeholder="请输入"/>
								</uni-forms-item>
								<uni-forms-item label="证件类型" label-width="100px" v-if="item.applicant.organizeFlag==0">
									<uni-data-select :disabled='true' v-model="item.applicant.idType" :localdata="certificate"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="国籍" label-width="100px">
									<uni-data-select :disabled='true' v-model="item.applicant.nationality"
										:localdata="nationality"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="统一社会信用代码:"  v-if="item.applicant.organizeFlag==1"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.code" placeholder="请输入代码"/>
								</uni-forms-item>
								<uni-forms-item label="身份证号码:"  v-if="item.applicant.organizeFlag==0" label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.idCard" placeholder="请输入身份证号码"/>
								</uni-forms-item>
								<uni-forms-item label="联系电话:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.phone" placeholder="请输入联系电话"/>
								</uni-forms-item>
								<uni-forms-item label="邮箱:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.email" placeholder="请输入邮箱"/>
								</uni-forms-item>
								<uni-forms-item label="联系地址:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.address" placeholder="请输入联系地址"/>
								</uni-forms-item>
								<uni-forms-item label="申请人住所:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.home" placeholder="请输入申请人住所"/>
								</uni-forms-item>
								<uni-forms-item label="法人代表:"  v-if="item.applicant.organizeFlag==1" label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicant.compLegalPerson" placeholder="请输入法人代表"/>
								</uni-forms-item>
								<uni-forms-item label="申请人性别"  v-if="item.applicant.organizeFlag==0" label-width="100px" required>
									<uni-data-checkbox class='checkbox'v-model="item.applicant.sex"
										:localdata="respondentSexy"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="出生年月日"  v-if="item.applicant.organizeFlag==0" label-width="100px">
									<uni-datetime-picker :disabled='true' v-model="item.applicant.birth" type="date" :clear-icon="false" />
								</uni-forms-item>
								<uni-section title="代理人信息" type="line" padding></uni-section>
								<uni-forms-item label="是否操作人" label-width="100px">
									<uni-data-checkbox :disabled='true'  v-model="item.applicantAgent.operatorFlag"
										:localdata="isProxyApplicant"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="姓名:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicantAgent.name" placeholder="请输入姓名"/>
								</uni-forms-item>
								<uni-forms-item label="邮箱:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicantAgent.email" placeholder="请输入邮箱"/>
								</uni-forms-item>
								<uni-forms-item label="联系电话:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.applicantAgent.phone" placeholder="请输入联系电话"/>
								</uni-forms-item>
							</view>
							<!-- 被申请人信息 -->
							<uni-section title="被申请人主题信息" type="line" padding></uni-section>
							<view class="" v-for="(item,index) in formData.affiliate.res">
								<uni-forms-item label="选择机构或自然人" label-width="100px">
									<uni-data-checkbox :disabled='true' v-model="item.res.organizeFlag" class='checkbox' :localdata="objectiJurisArr"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="是否操作人" label-width="100px">
									<uni-data-checkbox :disabled='true' v-model="item.res.operatorFlag"
										:localdata="isProxyApplicant"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item :label="item.res.organizeFlag==0 ? '被申请人':'申请机构'"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.name" placeholder="请输入姓名"/>
								</uni-forms-item>
								<uni-forms-item label="证件类型"  v-if="item.res.organizeFlag==0" label-width="100px" required>
									<uni-data-select :disabled='true' v-model="item.res.idType" :localdata="certificate"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="国籍" label-width="100px" required>
									<uni-data-select :disabled='true' v-model="item.res.nationality"
										:localdata="nationality"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="身份证号:" v-if="item.res.organizeFlag==0" label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.idCard" placeholder="请输入身份证号"/>
								</uni-forms-item>
								<uni-forms-item label="统一社会信用代码:" v-if="item.res.organizeFlag==1" label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.code" placeholder="请输入统一社会信用代码"/>
								</uni-forms-item>
								<uni-forms-item label="联系电话:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.phone" placeholder="请输入联系电话"/>
								</uni-forms-item>
								<uni-forms-item label="邮箱:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.email" placeholder="请输入邮箱"/>
								</uni-forms-item>
								<uni-forms-item label="联系地址:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.address" placeholder="请输入联系地址"/>
								</uni-forms-item>
								<uni-forms-item label="被申请人住所:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.res.home" placeholder="请输入被申请人住所"/>
								</uni-forms-item>
								<uni-forms-item label="被申请人性别"label-width="100px" required v-if="item.res.organizeFlag==0">
									<uni-data-checkbox :disabled='true' class='checkbox'v-model="item.res.sex"
										:localdata="respondentSexy"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="出生年月日" label-width="100px" v-if="item.res.organizeFlag==0">
									<uni-datetime-picker :disabled='true' v-model="item.res.birth" type="date" :clear-icon="false" />
								</uni-forms-item>
								<uni-section title="代理信息" type="line" padding></uni-section>
								<uni-forms-item label="是否操作人" label-width="100px">
									<uni-data-checkbox  v-model="item.resAgent.operatorFlag"
										:localdata="isProxyApplicant"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="姓名:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.resAgent.name" placeholder="请输入姓名"/>
								</uni-forms-item>
								<uni-forms-item label="邮箱:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.resAgent.email" placeholder="请输入邮箱"/>
								</uni-forms-item>
								<uni-forms-item label="联系电话:"  label-width="100px" required>
									<uni-easyinput :disabled='true' v-model="item.resAgent.phone" placeholder="请输入联系电话"/>
								</uni-forms-item>
							</view>	
						</uni-forms>
					</view>
				</view>
			</view>
			<view class="" v-show="current === 1">
				<view class="" style="margin-top: 50rpx;">
					<view>申请人</view>
					<view v-for="item in formData.caseAttachList">
						<uni-link v-if="item.annexType==2" :href="item.annexPath" color="#007BFF"
							:text="item.fileName"></uni-link>
					</view>
					<view>被申请人</view>
					<view v-for="item in formData.caseAttachList">
						<uni-link v-if="item.annexType==6" :href="item.annexPath" color="#007BFF"
							:text="item.fileName"></uni-link>
					</view>
				</view>
				<view class="" style="margin-top: 40rpx;">
					<view>仲裁申请书</view>
					<view v-for="item in formData.caseAttachList">
						<uni-link v-if="item.annexType==1" :href="item.annexPath" color="#007BFF"
							:text="item.fileName"></uni-link>
					</view>
				</view>
			</view>
		</uni-section>
		
	</view>
	
</template>

<script>
	import {getTemplate,idType,selectCaseApplication} from '../../../api/handlecase/index.js'
	import config from '@/config'
	const baseUrl = config.baseUrlZC
	export default {
		data(){
			return{
				formData:{
					affiliate:[
						
					]
				},
				rules: {},
				caseDetailId:null,
				current: 0,
				itemsT: ['案件详情', '案件资料'],
				activeColor: '#007aff',
				styleType: 'button',
				isPropertyPreservation: [{
						value: 1,
						text: "是"
					},
					{
						value: 0,
						text: "否"
					},
				],
				isAdjudicate: [{
						value: 1,
						text: "是"
					},
					{
						value: 0,
						text: "否"
					},
				],
				objectiJurisArr: [{
					text: '自然人',
					value: 0
				}, {
					text: '机构',
					value: 1
				}],
				isProxyApplicant: [{
						value: 1,
						text: "是"
					},
					{
						value: 0,
						text: "否"
					},
				],
				respondentSexy: [{
					text: '女',
					value: 1
				}, {
					text: '男',
					value: 0
				}],
				rulingTemplate:[],
				certificate: [],
				nationality: [{
						value: 0,
						text: "境内"
					},
					{
						value: 1,
						text: "境外"
					},
				],
			}
		},
		methods:{
			/** 获取裁决书模板 */
			getTemplateFn(data) {
				getTemplate(data).then((res) => {
					console.log(res)
					res.rows.forEach(item => {
						this.rulingTemplate.push({
							value: item.id,
							text: item.temName
						})
					})
				});
			},
			// 获取证件类型
			getIdType() {
				idType().then(res => {
					console.log(res)
					res.data.forEach(item => {
						this.certificate.push({
							value: item.dictSort,
							text: item.dictLabel
						})
					})
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 获取案件详情
			getSelectCaseApplication(ids){
				selectCaseApplication({id:ids}).then(res=>{
					console.log(res.data.affiliate.applicant)
					let data = res.data
					if (data.affiliate.applicant.length == 0) {
						data.affiliate.applicant.push({
							applicant: {},
							applicantAgent: {}
						})
					} else {
						data.affiliate.applicant.forEach((item, index) => {
							if (!item.applicant) {
								item.applicant = {}
							} else {
								data.affiliate.applicant[index].applicant.sex = Number(data.affiliate.applicant[index].applicant
									.sex)
							}
							if (!item.applicantAgent) {
								item.applicantAgent = {}
							}
						})
					}
					if (data.affiliate.res.length == 0) {
						data.affiliate.res.push({
							res: {},
							resAgent: {}
						})
					} else {
						data.affiliate.res.forEach((item, index) => {
							if (!item.res) {
								item.res = {}
							} else {
								data.affiliate.res[index].res.sex = Number(data.affiliate.res[index].res
									.sex)
							}
							if (!item.resAgent) {
								item.resAgent = {}
							}
						})
					}
					this.formData = data
					if (res.data.caseAttachList.length > 0) {
						res.data.caseAttachList.forEach(item => {
							let names = item.annexPath.split('_')
							item['fileName'] = names[names.length - 1]
							item.annexPath = baseUrl + item.annexPath
						})
					}
				})
			}
		},
		onLoad(data){
			this.getTemplateFn()
			this.getIdType()
			this.getSelectCaseApplication(data.id)
		}
	}
</script>

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