xytSk-App/pages/xcrw/detail/dbForm.vue

<template>
	<view class="contentItem">
		<uni-collapse >
			  	
			<uni-collapse-item 
			title-border="none" 
			v-for="(item,index) in listData" 
			:key="index" 
			:border="false" 
			:show-animation="true"
			>
				<template v-slot:title >
				<view style="display: flex;align-items: center;">
				<text class="yuandian"></text>
				<text>{{item.name}}</text>
				<text style="margin-left: auto; color:#ff0000">{{getIsItem(item.children)}}项未填写</text>
				</view>	
			   </template>
				<view class="xj-content">
					<view class="xj-text" v-for="(o,i) in item.children" :key="i">
						<text>{{o.itemDesc}}</text>
						<view class="subsectioin">
							<u--form labelPosition="left" :model="o"  ref="uForm">
								<u-form-item label="状态" prop="isNormal" borderBottom 
								    required>
								    <u-subsection
								    :list="list" 
								    :current="getNormal(o.isNormal)" 
								    mode="subsection"
									@change="(e)=>change(e,o,index,i,'isNormal')"
								    style="width:200px;margin-left: 10px"
								    ></u-subsection>
								</u-form-item>
								<view class="" v-if="o.isNormal">					
							    <u-form-item label="现场图片" prop="inspectPics" borderBottom 
							        required>
							        <u-upload accept="image" :fileList="o.inspectPics" @afterRead="(e)=>afterRead(e,o,index,i)" @delete="(e)=>deletePic(e,o,index,i)" name="inspectPics" multiple
							            :maxCount="10"></u-upload>
							    </u-form-item>
							    <u-form-item label="现场视频" prop="inspectVideos" borderBottom 
							       >
							        <u-upload accept="video" :fileList="o.inspectVideos" @afterRead="(e)=>afterRead(e,o,index,i)" @delete="(e)=>deletePic(e,o,index,i)" name="inspectVideos" multiple
							            :maxCount="10"></u-upload>
							    </u-form-item>
								<u-form-item label="问题描述" prop="itemProblemDesc" borderBottom 
								    required>
								    <u--textarea v-model="o.itemProblemDesc" placeholder="请输入内容"></u--textarea>
								</u-form-item>
								<u-form-item label="处理状态" prop="isHandle" borderBottom
								    required>
								    <u-subsection
								    :list="listStatus" 
								    :current="getHandle(o.isHandle)" 
									mode="subsection"
									@change="(e)=>change(e,o,index,i,'isHandle')"
								    style="width:200px;margin-left: 10px"
								    ></u-subsection>
								</u-form-item>
								<view class="" v-if="o.isHandle !== 1">
								<u-form-item label="现场图片" prop="handlePics" borderBottom
								    required>
								    <u-upload accept="image" :fileList="o.handlePics" @afterRead="(e)=>afterRead(e,o,index,i)" @delete="(e)=>deletePic(e,o,index,i)" name="handlePics" multiple
								        :maxCount="10"></u-upload>
								</u-form-item>
								<u-form-item label="现场视频" prop="handleVideos" borderBottom 
								   >
								    <u-upload accept="video" :fileList="o.handleVideos" @afterRead="(e)=>afterRead(e,o,index,i)" @delete="(e)=>deletePic(e,o,index,i)" name="handleVideos" multiple
								        :maxCount="10"></u-upload>
								</u-form-item>
								<u-form-item label="问题描述" prop="handleDesc" borderBottom 
								   required>
								    <u--textarea v-model="o.handleDesc" placeholder="请输入内容"></u--textarea>
								</u-form-item>
								</view>
								<view class="" v-if="o.isHandle == 1">
								<u-form-item label="责任人" prop="handleUserId" borderBottom @click="showSex = true; hideKeyboard()" required
								   >
								    <u--input v-model="o.handleUserId" disabled disabledColor="#ffffff" placeholder="请选择性别"
								        border="none"></u--input>
								    <u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
								
								</view>
								</view>
							</u--form>
							<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
							    @close="showSex = false" @select="sexSelect">
							</u-action-sheet>
						</view>
					</view>
				</view>
			</uni-collapse-item >
				
		</uni-collapse>
		<u-button type="primary" text="结束巡检" customStyle="margin-top: 50px" @click="submit"></u-button>
	</view>
</template>

<script>
	export default{
		props:{
		  xjItem:Array
		},
		data(){
			return{
				list:["正常","异常"],
				listStatus:["已处理","未处理"],
				current:0,
				listData:[],
				showSex:false,
				actions: [{
				    name: '男',
				},
				{
				    name: '女',
				},
				{
				    name: '保密',
				},
				],
			}
		},
		mounted() {
			// this.listData = this.xjItem
		},
		watch:{
			xjItem:function(n,o){
				
				this.listData = n.map(item=>{
				 item.childen=item.children.map(i=>{
						if(!i.handlePics){
							i.handlePics=[]
						}
						if(!i.handleVideos){
							i.handleVideos=[]
						}
						if(!i.inspectPics){
							i.inspectPics=[]
						}
						if(!i.inspectVideos){
							i.inspectVideos=[]
						}
						return i
					})
					return item
				})
				console.log(n,this.listData,'this.listData ');
			}
		},
		methods:{
			getIsItem(arr){
				return arr.filter(item1=> item1.isNormal!==1 && item1.isNormal!==0).length
			},
			getNormal(isNormal){
				if(isNormal == 0){
					return 0
				}
				if(isNormal == 1){
					return 1
				}
				if(isNormal == null){
					return 3
				}
			},
			getHandle(isHandle){
				if(isHandle == 0){
					return 0
				}
				if(isHandle == 1){
					return 1
				}
				if(isHandle == null){
					return 3
				}
			},
			async uploadContent(){
				
							try {
								let params={
									status:2,
									list:[]
								}
								this.listData.map(i=>{
									params.list.push(i.children)
								})
								const {data} = await uni.$http.post(`/gunshiApp/xyt/inspect/task/finish`,params)
								if(data.code == 200){
									this.xjItem = data.data
								}
							} catch (error) {
								uni.$showMsg();
							}
						},
			submit() {
				let tigger =true
				//判断是否符合提交条件
			this.listData.forEach(item=>{
				 item.ab = item.children.filter(i=>{
					 if(i.isNormal ==1){
						 if(i.inspectPics?.length && i.itemProblemDesc){
							 tigger=true
						 }else{
							 tigger=false
						 }
						 if(i.isHandle ==0){
							 if(i.handlePics?.length && i.handleDesc){
							 		tigger=true
							 }else{
							 		tigger=false
							 }
						 }else if(i.isHandle ==1){
							 tigger=true
						 }
					 }else if(i.isNormal == 0){
						 tigger=true
					 } 
					})
					return item
				})
			console.log(tigger,'arr');
			if(tigger){
				this.uploadContent()
			}
			// 
			// if()
				},
				// 删除图片
				deletePic(event,o,index,index1) {
					this.listData[index].children[index1][event.name].splice(event.index, 1)
				},
				// 新增图片
				async afterRead(event,o,index,index1) {
					console.log(event,index1,this.listData[index]);
					// let file
					// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					let lists = [].concat(event.file)
					let fileListLen = this.listData[index].children[index1][event.name]?.length
					lists.map((item) => {
						this.listData[index].children[index1][event.name].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url,event.name,index,index1)
						console.log(result);
						let item = this.listData[index].children[index1][event.name][fileListLen]
						this.listData[index].children[index1][event.name].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							...result
						}))
						fileListLen++
					}
				},
				uploadFilePromise(url,name,index,index1) {
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'http://local.gunshiiot.com:18083/gunshiApp/xyt/maintain/service/file/upload/singleSimple', // 仅为示例，非真实的接口地址
							filePath: url,
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								setTimeout(() => {
									// this.listData[index].children[index1][name].push({...res.data.data,url:res.data.data.filePath})
									console.log(res.data)
									resolve(JSON.parse(res.data).data)
								}, 1000)
							}
						});
						// resolve(a)
					})
				},
			change(e,o,index,i,key){
				
			    this.listData[index].children[i][key] = e;
				this.$forceUpdate()
			},
			sexSelect(e) {
			    // this.model1.userInfo.sex = e.name
			    // this.$refs.uForm.validateField('userInfo.sex')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentItem{
		height: 260px;
		overflow: auto;
		.itemC{
			display: flex;
			justify-content: space-between;
			display: flex;
			color: #666666;
			padding: 10px;
			border-bottom: 1px solid #f0f0f0;
		}
		.itemNo{
			color: #666666;
			padding: 10px;
		}
	}
	.circle-btn{
		width: 120px;
		height: 120px;
		background-color: #007aff;
		border-radius: 50%;
		color:#fff;
		text-align: center;
		line-height: 120px;
	}
	.yuandian{
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: #409eff;
		border-radius: 50%;
		margin-right: 10px;
	}
	.xj-content{
		height: 300px;
		overflow-y: auto;
	}
	.xj-text{
		margin-left: 10%;
		margin-top: 2%;
	}
	.subsectioin{
		display: flex;
		column-gap: 10px;
		align-items: center;
		margin-top: 10px;
	}
</style>