miniapp/pages/handlecase/component/uploadEvidence.vue

<template>
	<view class="assignrbitrators">
		<view class="from">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<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" 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="上传证据" name="headImage" label-width="120px" required>
						<uni-file-picker  ref="files" :auto-upload="false" @select="select"  :limit='1'/>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view class="uni-list" v-if="selectFlag">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
						<view>
							<checkbox :value="item.id + ''"/>
						</view>
						<view class="main">
							<view class="">
								仲裁员姓名：{{item.arbitratorName}}
							</view>
							<view class="">
								当前案件数量：{{item.currentCaseNum}}
							</view>
							<view class="">
								已结案数量：{{item.closedCaseNum}}
							</view>
							<view class="">
								专业分类：{{item.professiClassifi}}
							</view>
						</view>
					</label>
				</checkbox-group>
			</view>
			<button type="primary" @click="submitImg">确认提交</button>
		</view>

	</view>
</template>

<script>
	import {respondentDetail,arbitratorList,evidenceCrossexami} from '../../../api/handlecase/index.js'
	import { uploadImage } from '../../../api/upload.js'
	import { getToken } from '@/utils/auth'
	import moment from 'moment'
	const app = getApp()
	export default {
		data() {
			return {
				formData: {},
				subnitForm:{},
				selectFlag:false,
				tempFilePaths:null,
				rules: {},
				maintenancetypeArr:[{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				},],
				arbitrationmethodArr: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				uploadEvidence:[{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				items: []
			}
		},
		methods: {
			arbitrationmethod(){},
			uploadEvidenceChange(){},
			maintenancetypeChange(val){
				let flag = val.detail.value;
				if(flag == 1){
					this.selectFlag = true
					this.getArbitratorList()
				}else{
					this.selectFlag = false
				}
			},
			checkboxChange (e) {
				let idArr = e.detail.value;
				let numberArray = idArr.map(str => parseInt(str));
				const result = this.items.filter(item => numberArray.includes(item.id));
				let arbitrators = []
				result.forEach(item=>{
					arbitrators.push({
						id:item.id,
						arbitratorName:item.arbitratorName
					})
				})
				this.subnitForm.arbitrators = arbitrators;
			},
			getData(parms){
				respondentDetail(parms).then(res=>{
					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 + ''
				})
			},
			// 文件上传
			select(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:2,
						id:this.formData.id
					},
					name: 'file',
					success:(res) => {
						let { data } = res
						uni.showToast({
							title:'上传成功',
							icon:'none',
							duration:1000
						})
						uni.hideLoading();
						uni.navigateTo({
							url:'/pages/handlecase/index'
						})
					},
					fail:(err) => {
						uni.showToast({
							title:'上传失败',
							icon:'none',
							duration:1000
						})
						uni.hideLoading()
					}
				})
			},
			// 获取仲裁员列表
			getArbitratorList(){
				arbitratorList().then(res=>{
					this.items = res.rows;
				})
			},
			// 提交数据
			evidenceCrossexamiFn(parms){
				evidenceCrossexami(parms).then(res=>{
					uni.showToast({
						title:'提交成功',
						icon:'none',
						duration:1000
					})
					uni.navigateBack({delta: 1})
				})
			},
			submitImg(){
				this.evidenceCrossexamiFn(this.subnitForm)
			}
		},
		onLoad(data){
			this.getData(data.id);
			this.subnitForm.caseId = Number(data.id);
			// this.getArbitratorList()
		},
	}
</script>

<style lang="scss">
	.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;
				}
			}
		}
	}
</style>