miniapp/pages/handlecase/component/uploadEvidence.vue

<template>
	<view>
		<view>


		</view> <uni-section title="  ">
			<!-- 选项卡 -->
			<view>
				<uni-segmented-control :current="current" :values="itemsT" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<!-- 选项卡内容 -->
			<view class="conent">
				<view v-show="current === 0">
					<view class="assignrbitrators">
						<view class="from">
							<uni-forms ref="form" :modelValue="subnitForm" :rules="rules" v-if="sysType == 1">
								<!-- <view class="title">案件详情</view> -->
								<view class="box">
									<uni-forms-item label="案件编号：" name="caseNum" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseNum"
											placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="申请人：" name="applicantName" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.applicantName" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="被申请人：" name="respondentName" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.respondentName" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="借款开始日期：" name="loanStartDate" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.loanStartDate" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="借款结束日期：" name="loanEndDate" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.loanEndDate" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="案件标的：" name="caseSubjectAmount" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.caseSubjectAmount" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="申请人主张欠本金：" name="claimPrinciOwed" label-width="120px"
										required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.claimPrinciOwed" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="申请人主张欠利息：" name="claimInterestOwed" label-width="120px"
										required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.claimInterestOwed" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="申请人主张违约金：" name="claimLiquidDamag" label-width="120px"
										required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="formData.claimLiquidDamag" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="是否有异议需要举证" label-width="120px" name="objectionAddEviden" required>
													<uni-data-checkbox class='checkbox' v-model="subnitForm.objectionAddEviden"
														:localdata="maintenancetypeArr" @change='uploadEvidenceChange'></uni-data-checkbox>
												</uni-forms-item>
									<!-- <uni-forms-item label="是否需要开庭审理" label-width="120px" name="openCourtHear" required>
													<uni-data-checkbox class='checkbox' v-model="subnitForm.openCourtHear"
														:localdata="arbitrationmethodArr" @change='arbitrationmethod'></uni-data-checkbox>
												</uni-forms-item> -->
									<!-- <uni-forms-item label="是否指派调解员" label-width="120px" v-if="sysType==2" name="pendingAppointArbotrar" required>
													<uni-data-checkbox class='checkbox' v-model="subnitForm.pendingAppointArbotrar"
														:localdata="uploadEvidence" @change='maintenancetypeChange'></uni-data-checkbox>
												</uni-forms-item> -->
									<uni-forms-item label="是否仲裁反请求" label-width="120px" name="objectiJuris" required>
										<uni-data-checkbox class='checkbox' v-model="subnitForm.objectiJuris"
											:localdata="objectiJurisArr"
											@change='objectiJurisChange'></uni-data-checkbox>
									</uni-forms-item>
									<!-- <uni-forms-item label="是否管辖异议申请" label-width="120px" name="adjudicaCounter" required>
													<uni-data-checkbox class='checkbox' v-model="subnitForm.adjudicaCounter"
														:localdata="adjudicaCounterArr"></uni-data-checkbox>
												</uni-forms-item> -->
									<uni-forms-item label="上传证据" name="headImage" label-width="120px" v-if="caseFlag">
													<uni-file-picker ref="files" :auto-upload="false" @select="select"   @delete="handleClose" :limit='1' />
												</uni-forms-item>
									<uni-forms-item label="是否书面审理" label-width="120px" name="respondentIsWrittenHear"
										required>
										<uni-data-checkbox class='checkbox' v-model="subnitForm.respondentIsWrittenHear"
											:localdata="adjudicateRecord"
											@change='arbitrationmethod'></uni-data-checkbox>
									</uni-forms-item>
								</view>
							</uni-forms>
							<uni-forms ref="form" :modelValue="subnitForm" :rules="rules" v-if="sysType == 2">
								<!-- <view class="title">案件详情</view> -->
								<view class="box">
									<uni-forms-item label="案件编号：" name="caseNum" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseNum"
											placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="申请人：" name="applicantName" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="affiliateApp" placeholder="" />
									</uni-forms-item>
									<uni-forms-item label="被申请人：" name="respondentName" label-width="120px" required>
										<uni-easyinput :inputBorder="false" :disabled='true'
											v-model="affiliateRes" placeholder="" />
									</uni-forms-item>
									<!-- <uni-forms-item label="是否有异议需要举证" label-width="120px" name="objectionAddEviden" required>
													<uni-data-checkbox class='checkbox' v-model="subnitForm.objectionAddEviden"
														:localdata="maintenancetypeArr" @change='uploadEvidenceChange'></uni-data-checkbox>
												</uni-forms-item> -->
									<!-- <uni-forms-item label="是否指派调解员" label-width="120px" name="pendingAppointArbotrar"
										required>
										<uni-data-checkbox class='checkbox' v-model="subnitForm.pendingAppointArbotrar"
											:localdata="uploadEvidence"
											@change='maintenancetypeChange'></uni-data-checkbox>
									</uni-forms-item> -->
								</view>
							</uni-forms>
							<!-- 自定义弹窗层组件 -->
							<uni-popup scroll-y="true" ref="popup" :is-mask-click="false" type="bottom">
								<view class="content_list">
									<uni-card>
										<view class="" style="text-align: center;font-size: 35rpx;font-weight: bold;">
											<text>权力和义务告知书</text>
										</view>
										根据《中华人民共和国仲裁法》的规定，仲裁当事人在仲裁活动中依法享有权利并承担义务。
										<view class="">
											<text>一、当事人的权利</text>
											<text>1.依据仲裁协议提请仲裁；撤回仲裁申请或者变更、放弃仲裁请求；承认或者反驳仲裁请求；提出仲裁反请求。</text>
											<text>2.对仲裁协议效力提出异议。</text>
											<text>3.委托代理人进行仲裁活动。</text>
											<text>4.申请财产保全、证据保全。</text>
											<text>5.约定、选定仲裁庭的组成方式；选定或者委托本会主任指定仲裁员；申请仲裁员、办案秘书、翻译人员、鉴定人员回避。</text>
											<text>6.收集、提供证据。对证据进行质证，发表辩论意见，作最后陈述。</text>
											<text>7.请求调解。自行和解的，可以请求仲裁庭根据和解协议作出裁决书。</text>
											<text>8.认为开庭笔录对自己陈述的记录有遗漏或者差错的，申请补正。</text>
											<text>9.对裁决书中的文字、计算错误或者仲裁庭已经裁决但在裁决书中遗漏的事项，请求补正或者作出补正裁决。</text>
											<text>10.向人民法院申请撤销、执行或者不予执行仲裁裁决。</text>

										</view>
										<view>
											<text>
												<text>二、当事人的义务</text>
												<text>1.如实书写仲裁申请书和答辩书；在庭审中不得做虚假陈述。</text>
												<text>2.对自己的主张按期提供证据，不得提供伪证。</text>
												<text>3.遵守仲裁员回避制度。</text>
												<text>4.按时参加开庭。</text>
												<text>5.遵守开庭纪律和仲裁程序。</text>
												<text>6.在庭审笔录上签字。</text>
												<text>7.在仲裁文书的送达回证上签字盖章。</text>
												<text>8.主动履行生效的仲裁裁决。</text>
												<text>9.按规定交纳仲裁费用。</text>
												<text>10.法律、法规和本会仲裁规则规定的其他义务。</text>
											</text>

										</view>
										<view class="from" style="margin-top:30rpx;">
											<uni-forms ref="reasontFormData">
												<uni-forms-item label="异议原因:" label-width="100px" required>
													<uni-easyinput v-model="reasontFormData.reasont"
														placeholder="请输入异议原因" />
												</uni-forms-item>
											</uni-forms>
										</view>
										<view class="determine">
											<button style="width: 150rpx;float: left;margin-left: 90rpx;" type="primary"
												@tap="submitReasont">确定</button>
											<button style="width: 150rpx;" @tap="cencalBut">取消</button>
										</view>
									</uni-card>
								</view>

							</uni-popup>
							<view class="uni-list">
								<checkbox-group @change="checkboxChange" style="width: 100%;margin-bottom: 15rpx;">
									<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
										:key="item.mediatorId">
										<view>
											<checkbox color="blue" style="transform:scale(0.7)"
												:value="item.mediatorId + ''" :checked="item.echoFlag" />
										</view>
										<view class="main">
											<view class="">
												调解员：{{item.mediatorName}}
											</view>
											<view class="">
												专业：{{item.specialty || '暂无信息'}}
											</view>
											<view class="">
												待办数量：{{item.todoAmount || '0'}}
											</view>
											<view class="">
												已办数量：{{item.completeAmount || '0'}}
											</view>
										</view>
									</label>
								</checkbox-group>
							</view>
							<button type="primary" @click="submitImg">确认提交</button>
						</view>

					</view>

				</view>

			</view>
			<view v-show="current === 1" style="padding: 20rpx;">
				<view class="" v-if="sysType == 1">
					<view class="" style="margin-top: 50rpx;">
						<view>申请人</view>
						<view v-for="item in formData.evidenceMaterialList">
							<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.evidenceMaterialList">
							<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.evidenceMaterialList">
							<uni-link v-if="item.annexType==1" :href="item.annexPath" color="#007BFF"
								:text="item.fileName"></uni-link>
						</view>
					</view>
				</view>
				<view class="" v-if="sysType == 2">
					<view class="" style="margin-top: 50rpx;">
						<view>申请人</view>
						<view v-for="item in formData.caseAttachList">
							<uni-link v-if="item.annexType==4" :href="item.annexPath" color="#007BFF"
								:text="item.annexName"></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.annexName"></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==3" :href="item.annexPath" color="#007BFF"
								:text="item.annexName"></uni-link>
						</view>
					</view>
				</view>
			</view>

		</uni-section>
	</view>

</template>

<script>
	import {
		respondentDetail,
		arbitratorList,
		evidenceCrossexami,
		selectById,
		updateBooking,
		deleteFile
	} from '../../../api/handlecase/index.js'
	import {
		uploadImage
	} from '../../../api/upload.js'
	import {
		getToken
	} from '@/utils/auth'
	import moment from 'moment'
	import config from '@/config'
import constant from '../../../utils/constant.js'
	const baseUrl = config.baseUrlZC
	const app = getApp()
	export default {
		data() {
			return {
				sysType: null, //默认系统 1.仲裁2.调节
				selectValue: null,
				defaultSelected: [], //默认选中项
				serviceList: ['1', '2'], //传递给子组件的数据
				current: 0,
				affiliateApp:"",
				affiliateRes:"",
				itemsT: ['案件详情', '案件资料'],
				styleType: 'button',
				activeColor: '#007aff',
				reasontFormData: {
					reasont: ''
				},
				isShowPopup: false,
				formData: {
					affiliate: {}
				},
				subnitForm: {
					objectionAddEviden: 0,
					pendingAppointArbotrar: 0,
					objectiJuris: 0,
					adjudicaCounter: 0,
					respondentIsWrittenHear: 1,
					adjudicaCounterReason: ''
				},
				selectFlag: false,
				caseFlag: false,
				tempFilePaths: null,
				rules: {
					// 是否有异议需要举证
					objectionAddEviden: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}]
					},
					// 是否需要开庭审理
					openCourtHear: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}]
					},
					// 是否指派仲裁员
					pendingAppointArbotrar: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}]
					},
				},
				maintenancetypeArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}, ],
				arbitrationmethodArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				uploadEvidence: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				objectiJurisArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				adjudicaCounterArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				obligationsArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				// 是否书面审理
				adjudicateRecord: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				items: [],
				sysType: null,
				mediatorList: []
			}
		},
		mounted() {

		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			submitReasont() {

				if (this.reasontFormData.reasont) {
					this.subnitForm.adjudicaCounterReason = this.reasontFormData.reasont
					this.$refs.popup.close()
					this.reasontFormData.reasont = ''
					
				} else {
					this.$modal.msgError("请输入反意理由")
				}
			},
			cencalBut() {
				this.$refs.popup.close();
				this.subnitForm.objectiJuris = 0;
			},
			objectiJurisChange(value) {

				let flag = value.detail.value;
				if (flag == 1) {
					this.$refs.popup.open('center')
				}
			},
			arbitrationmethod() {},
			uploadEvidenceChange(val) {
				let flag = val.detail.value;
				if (flag == 1) {
					this.caseFlag = true;
				} else if (flag == 0) {
					this.caseFlag = false;
				}
			},
			// maintenancetypeChange(val) {
			// 	let flag = val.detail.value;
			// 	if (flag == 1) {
			// 		this.selectFlag = true
			// 		this.getArbitratorList()
			// 	} else {
			// 		this.selectFlag = false
			// 	}
			// },
			checkboxChange(e) {
				let params = e.detail.value;
				params = params.map(Number);
				this.mediatorList = e.detail.value;
				let result = this.items.filter(element => params.includes(element.mediatorId));
				let userListArr = result.map(({
					mediatorId,
					mediatorName
				}) => ({
					mediatorId: mediatorId,
					mediatorName: mediatorName
				}));
				let arbitrators = {
					caseFlowId: this.formData.caseFlowId,
					mediatorList: userListArr,
				};
				this.subnitForm.arbitrators = arbitrators;
				console.log(this.subnitForm.arbitrators, "PPPPPPPPPPPPPP");
			},
			getData(parms) {
				if (this.sysType == 1) {
					respondentDetail(parms).then(res => {
						if (res.data.evidenceMaterialList.length > 0) {
							res.data.evidenceMaterialList.forEach(item => {
								let names = item.annexPath.split('_')
								item['fileName'] = names[names.length - 1]
								item.annexPath = baseUrl + item.annexPath
							})
						}
						this.formData = res.data
						this.formData.loanEndDate = moment(this.formData.loanEndDate).format(
							'YYYY-MM-DD HH:mm:ss');
						this.formData.loanStartDate = moment(this.formData.loanStartDate).format(
							'YYYY-MM-DD HH:mm:ss');
						this.formData.id = this.formData.id + ''
					})
				} else if (this.sysType == 2) {
					selectById({
						id: parms
					}).then(res => {
						this.formData = res.data
						this.affiliateApp = res.data.affiliate.applicant.map(item =>item.applicant.name).join(',')
						this.affiliateRes = res.data.affiliate.res.map(item =>item.res.name).join(',')
						console.log(res, "KKKKKKKKKKKKKKKKKKKKK");
					})
				}
			},
			// 文件上传
			select(e) {
				console.log(e)
				this.tempFilePaths = e.tempFilePaths;
				// loading
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: getApp().globalData.requestUrl + uploadImage,
					filePath: this.tempFilePaths[0],
					header: {
						Authorization: getToken() || '',
					},
					formData: {
						annexType: 6,
						id: this.formData.id
					},
					name: 'file',
					success: (res) => {
						let {
							data
						} = res
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading();
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
					}
				})
			},
			// 上传删除
			handleClose(filelds){
				console.log("关闭",filelds)
				deleteFile({fileIds:[filelds.tempFile.uuid]}).then(res=>{
					console.log(res)
				})
				
			},
			// 获取仲裁员列表
			getArbitratorList(val) {
				arbitratorList({caseAppliId: val}).then(res => {
					this.items = res.data;
				})
			},
			// 提交数据
			evidenceCrossexamiFn(parms) {
				evidenceCrossexami(parms).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1000
					})

					uni.navigateBack({
						delta: 1
					})
				})
			},
			submitImg() {
				if (this.sysType == 2) {
					if (this.mediatorList.length > 3) {
						uni.showToast({
							title: '最多选择三个调解员',
							icon: 'none',
							duration: 1000
						})
						return
					}
					if (this.mediatorList.length == 0) {
						uni.showToast({
							title: '请选择调解员',
							icon: 'none',
							duration: 1000
						})
						return
					}
				}
				if (this.sysType == 1) {
					this.$refs.form.validate().then(res => {
						console.log(this.subnitForm)
						this.evidenceCrossexamiFn(this.subnitForm)
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				} else if (this.sysType == 2) {
					// TODO
					// 调解提交
					if (this.mediatorList.length > 3) {
						uni.showToast({
							title: '最多选择三个调解员',
							icon: 'none',
							duration: 1000
						})
						return
					}
					this.subnitForm.arbitrators.id = this.formData.id;
					this.subnitForm.arbitrators.miniProgressFlag = 1;
					updateBooking(this.subnitForm.arbitrators).then(res => {
						uni.showToast({
							title: '成功',
							icon: 'none',
							duration: 1000
						})
						uni.navigateBack({
							delta: 1
						})
					})
				}

			},
			// 证据清单
			evidenceList() {
				console.log(this.formData.evidenceMaterialList)
				this.$tab.navigateTo(
					`/pages/handlecase/component/evidenceList?title=证据清单&evidenceList=${encodeURIComponent(JSON.stringify(this.formData.evidenceMaterialList))}`
				)
			},
		},
		onLoad(data) {
			this.sysType = uni.getStorageSync('sysType')
			this.getData(data.id);
			console.log(this.subnitForm)
			this.subnitForm.caseId = Number(data.id);
			if(this.sysType==2){
				this.getArbitratorList(data.id)
			}
			
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.content_list {
		height: 1060rpx;
		overflow-x: hidden;

		.scroll_view_style {
			height: 100%;
		}
	}

	.assignrbitrators {
		// text-align: center;
		padding: 20rpx;

		.box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
		}

		.flexd {
			padding-top: 20rpx;

			.btn {
				width: 80%;
				font-size: 26rpx;
				border-radius: 60rpx;
			}
		}

		.btn {
			margin-top: 20rpx;
		}

		.select-picker {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			border: 1px solid #DCDFE6;
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			font-size: 28rpx;
		}

		.table-content {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.none {
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.box {
			/deep/.title {
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.htmltitle {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;

			.look {
				color: #0D91F9;
			}
		}

		.title {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.adsTitle {
			font-size: 30rpx;
		}

		.multiple {
			width: 75%;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 24rpx;
			// @include text-overflow($width: 100%)
		}

		.uni-list {
			width: 100%;
			margin-top: 20rpx;

			.uni-list-cell {
				border-radius: 30rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				background-color: #fff;

				.main {
					height: 100%;
					margin-left: 20rpx;
				}
			}
		}

		.determine {
			padding: left 50rpx;
		}
	}
</style>