v3-lab-xcx/pages_manage/gradingControl/gradingControlAdd.vue

<!-- 分级管控完成工作 -->
<template>
    <view id="accessQualification">
        <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="list_li">
					<view class="list_li_t">
						<view class="list_li_t_l" :style="'color:'+labData.levelColor+';border-color:'+labData.levelColor">{{labData.levelName}}</view>
						<view class="list_li_t_c">{{labData.subName}}</view>
						<view class="list_li_t_r">{{labData.typeName}}</view>
					</view>
					<view class="list_li_b">
						<view class="list_li_b_t">
							<view class="list_li_b_t_t">
								<view class="list_li_b_t_t_n">
									<view class="list_li_b_t_t_l" :class="[control.ruleType== '日管控' ? 'purple': '', control.ruleType=='周管控'? 'blue': '',control.ruleType=='月管控'? 'orange': '',control.ruleType=='年管控'? 'green': '',]">{{control.ruleType}}</view>
									<view class="list_li_b_t_t_c">{{control.ruleName}}</view>
									<view class="list_li_b_t_t_r" v-if="control.isExpired==1">(过期未完成)</view>
									<view class="list_li_b_t_t_rr" >{{control.endDate}}</view>
								</view>
							</view>
						</view>
						<view class="flex-view">
							<view><text style="margin-right: 20rpx;"></text>执行方式:</view>
							<view>{{control.isAll==1?'多人执行':'单人执行'}}</view>
						</view>
						<view class="flex-view">
							<view><text style="margin-right: 20rpx;"></text>规则描述:</view>
							<view>{{control.ruleRemark}}</view>
						</view>
						<view class="list_li_b_b2"><text style="position: relative;top: 4rpx;color: #f00;margin-right: 10rpx;">*</text>执行描述:</view>
						<textarea class="list_li_b_b3" v-model="param.detail.remark" maxlength="30" placeholder-class="placeholder-style" placeholder="请输入执行描述"></textarea>
						<view class="list_li_b_b4" v-if="control.isUpload==1"><text style="position: relative;top: 4rpx;color: #f00;margin-right: 10rpx;">*</text>执行材料:<label @click="itemUpData(item)">+ 请上传执行材料</label></view>

						<view class="list_li_b_b6" v-if="upList.length>0" v-for="(item,index) in upList" :key="index">
							<view @click="download(item)">{{item.name}}</view>
							<view @click="delImg(index)">
								<img src="@/images/basicsModules/icon_fjgk_sc.png"/>
							</view>
						</view>
					</view>
				</view>
			</view>
        </scroll-view>
        <view class="bottom-button-box" @click="goSafeAccess">完成</view>
    </view>
</template>

<script>
    import { gradingControlAdd } from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				labData:{},
				control:{},
				upList:[],
				param:{
					subId:'',//实验室id
					ruleId:'',//规则ID
					ruleUserId:'',//规则细则
					id:'',//记录id
					ruleType:'',
					endDate:'',
					detail:{
						imgName:'',//文件名
						imgUrl:'',//文件路径
						imgType:'',//文件类型
						remark:'',
					}
				},
				messageUserId:""
            }
        },
        onLoad(option) {
			if(option.item){
				let item = JSON.parse(decodeURIComponent(option.item));
				let item2 = JSON.parse(decodeURIComponent(option.item2));
				this.labData=item
				this.control=item2
				this.param.subId=item.subId;
				this.param.ruleId=item2.ruleId;
				this.param.ruleUserId=item2.ruleUserId;
				// this.param.id=item2.recordId;
				 this.param.ruleType=item2.ruleType;
				 this.param.endDate=item2.endDate;

				if(option.messageUserId){
					this.messageUserId = option.messageUserId;
				}
			}

        },
        onShow(){

        },
        methods: {
			download(item){
				if(item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg' || item.type == 'gif'){
					//查看图片
					wx.previewImage({
						urls: [config.base_url+item.url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}else if(item.type == 'pdf' || item.type == 'doc' || item.type == 'docx'){
					uni.showLoading({
					    title: '下载中'
					});
					//下载文档
					wx.downloadFile({
						url: config.base_url+item.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function (res) {
							console.log("resresresresresres",res)
							const fileManager = wx.getFileSystemManager()
							console.log('wx.env.USER_DATA_PATH',wx.env.USER_DATA_PATH);
							console.log('item.name',item.name);
							console.log('item.type',item.type);
							const filePath = wx.env.USER_DATA_PATH + '/' + item.name
							console.log('filePath',filePath);
							fileManager.saveFile({
								tempFilePath: res.tempFilePath,
								filePath,
								success: () => {
									uni.hideLoading();
									wx.openDocument({
										filePath: filePath,
										showMenu: true,
										fileType: item.type
									})
								},
								fail: function (res){
									uni.hideLoading();
									uni.showToast({
										title: '下载失败',
										icon:"none",
										mask:true,
										duration: 2000
									});
								}
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				}
			},
			delImg(index){
				let self = this;
				uni.showModal({
				  title: '',
				  cancelColor:'#999999',
				  confirmColor:'#0183FA',
				  content: '确定删除吗?',
				  success (res) {
					if (res.confirm) {
					  self.upList.splice(index,1)
					  self.$forceUpdate();
					} else if (res.cancel) {

					}
				  }
				})
			},
			//上传
			itemUpData(item){
				let self = this;
				if(this.upList.length>4){
					uni.showToast({
						title: '最多只能上传5个',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				uni.showActionSheet({
				    itemList: ['上传文件', '上传图片'],
				    success: function (res) {
						if(res.tapIndex == 0){
							//上传文件
							self.upData(item);
						}else if(res.tapIndex == 1){
							//上传图片
							self.upImg(item);
						}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			upImg(item) {
			    let self = this;
			    wx.chooseImage({
			        count: 1,
			        sizeType: ["original", "compressed"],
			        sourceType: ["album", "camera"],
			        success: function(res) {
						console.log(res)
						let text = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('.') + 1);
						if(text != 'png' && text != 'jpg' && text != 'jpeg' && text != 'gif' && text != 'pdf' && text != 'doc' && text != 'docx'){
							uni.showToast({
								title: '仅支持png/jpg/jpeg/gif/pdf/doc/docx类型的文件上传',
								icon:"none",
								mask:true,
								duration: 2000
							});
							return
						}
						let upObj = {
							name:'照片.'+text,
							path:res.tempFilePaths[0],
							type:text,
						}
						self.upDataFunction(item,upObj);
			            // let tempFilePaths = res.tempFilePaths[0];
			            // self.upDataFunction(tempFilePaths,upObj);
			        }
			    });
			},
			//上传文件
			upData(item){
				let self = this;
				wx.chooseMessageFile({
				  count: 1,
				  type: 'all',
				  success (res) {
					let text = res.tempFiles[0].path.substring(res.tempFiles[0].path.lastIndexOf('.') + 1);


					if(text != 'png' && text != 'jpg' && text != 'jpeg' && text!= 'gif' && text != 'pdf' && text != 'doc' && text != 'docx'){
						uni.showToast({
							title: '仅支持png/jpg/jpeg/gif/pdf/doc/docx类型的文件上传',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
					let upObj = {
						name:res.tempFiles[0].name,
						path:res.tempFiles[0].path,
						type:text,
					}
					self.upDataFunction(item,upObj);
				  }
				})
			},
			async upDataFunction(item,upObj){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: upObj.path,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							let obj = {
								name:upObj.name,
								url:config.base_url+res.data.url,
								realUrl:res.data.url,
								type:upObj.type
							}
							this.upList.push(obj);
							this.$forceUpdate();

							console.log(this.upList)
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
	       async goSafeAccess(){
			   if(!this.param.detail.remark){
			   	uni.showToast({
			   		title: '请输入执行描述',
			   		icon:"none",
			   		mask:true,
			   		duration: 2000
			   	});
			   	return
			   }
				if(this.control.isUpload==1){
					if(!this.upList[0]){
						uni.showToast({
							title: '请上传执行材料',
							icon:"none",
							mask:true,
							duration: 2000
						});
						return
					}
				}

			   let _this = this;
			   let obj = {

			   }
			   let imgName=[];
			   let imgUrl=[];
			   let imgType=[];
			    _this.upList.forEach(function (item,index) {
			           imgName.push(item.name)
			           imgUrl.push(item.realUrl)
			           imgType.push(item.type)
			    })
			   _this.param.detail.imgName=imgName.join(',')
			   _this.param.detail.imgUrl=imgUrl.join(',')
			   _this.param.detail.imgType=imgType.join(',')
			   if(this.messageUserId){
				   _this.param.messageUserId = this.messageUserId
			   }
			   console.log(_this.param)
			   const {data} = await gradingControlAdd(_this.param)
			   if(data.code==200){
					uni.showToast({
						title: '提交成功!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateBack();
					},2000);
			   }

		   },
        }
    }
</script>

<style lang="stylus" scoped>
    #accessQualification{
        height:100%;
        display flex
        flex-direction column
        .info-max-box{
            flex:1;
            overflow: scroll
			.for-big-box:last-child{
			    margin-bottom:180rpx;
			}
			/* 列表 */
			.list{
				padding 0 20rpx;
				box-sizing border-box;
				.list_li{
					height auto;
					.list_li_t{
						height :80rpx;
						display flex;
						justify-content flex-start;
						align-items :center;
						.list_li_t_l{
							width: 80rpx;
							height: 30rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #EE3A3A;
							line-height: 30rpx;
							border: 2rpx solid #EE3A3A;
							border-radius: 6rpx;
							text-align center;
						}
						.list_li_t_c{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 30rpx;
							margin 0 32rpx 0 16rpx;
						}
						.list_li_t_r{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 30rpx;
						}
					}
					.list_li_b{
						overflow :hidden;
						width 710rpx;
						height auto;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding :0 14rpx;
						box-sizing :border-box;
						.list_li_b_t{
							overflow :hidden;
							.list_li_b_t_t{
								display flex;
								justify-content flex-start;
								margin :24rpx 0 18rpx 0;
								.list_li_b_t_t_n{
									flex:1;
									width:655rpx;
									display flex;
									justify-content flex-start;
									.list_li_b_t_t_l{
										width :100rpx;
										height :30rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										/* color: #0183FA; */
										line-height: 30rpx;
										/* background: rgba(1,131,250,0.2); */
										border-radius: 6rpx;
										text-align :center;
									}
									.list_li_b_t_t_c{
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #333333;
										line-height: 28rpx;
										margin :0 16rpx 0 12rpx;
									}
									.list_li_b_t_t_r{
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #EE3A3A;
										line-height: 24rpx;
									}
									.list_li_b_t_t_rr{
										flex:1;
										text-align:right;
										font-family: PingFang SC;
										font-weight: 500;
										color:#999;
										font-size: 24rpx;
										line-height: 24rpx;
									}
								}
								/* 日管控 */
								.purple{
									color: #AC20E0;
									background: rgba(172,32,224,0.2);
								}
								/* 周管控 */
								.blue{
									color: #0183FA;
									background: rgba(1,131,250,0.2);
								}
								/* 月管控 */
								.orange{
									color: #FA8801;
									background: rgba(250,136,1,0.2);
								}
								/* 年管控 */
								.green{
									color: #11BA25;
									background: rgba(17,186,37,0.2);
								}
								>img{
									width: 12rpx;
									height: 24rpx;
								}
							}
							.list_li_b_t_b{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 48rpx;
								margin-bottom :14rpx;
							}
						}
						.flex-view{
							display:flex;
							view{
								font-size:28rpx;
								line-height:28rpx;
								margin-top:28rpx;
							}
							view:nth-child(1){
								width:220rpx;
							}
							view:nth-child(2){
								width:460rpx;
								word-wrap:break-word;
								word-break:break-all;
								overflow: hidden;
								color:#999;
							}
						}
						.list_li_b_b{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
							>label{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 28rpx;
							}
						}
						.list_li_b_b2{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
							margin-top :32rpx;
						}
						.list_li_b_b3{
							width: 640rpx;
							height: 250rpx;
							border: 1rpx solid #E0E0E0;
							border-radius: 10rpx;
							margin :32rpx 0 0 10rpx;
							padding :25rpx 18rpx;
							box-sizing :border-box;
						}

						.placeholder-style{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #CCCCCC;
							line-height: 24rpx;
						}
						.list_li_b_b4{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 60rpx;
							margin-top :30rpx;
							margin-bottom :52rpx;
							>label{
								display :inline-block;
								width: 300rpx;
								height: 60rpx;
								border: 1rpx solid #0183FA;
								border-radius: 10rpx;
								text-align :center;
								margin-left :22rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #0183FA;
								line-height: 60rpx;

							}
						}
						.list_li_b_b5{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
							margin-top :30rpx;
							margin-bottom 20rpx;
							>label{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 28rpx;

							}
						}
						.list_li_b_b6{
							display flex;
							margin-bottom:20rpx;
							view:nth-child(1){
								flex:1;
								line-height:30rpx;
								margin:15rpx 0 15rpx 15rpx;
							}
							view:nth-child(2){
								height:60rpx;
								width:60rpx;
								margin:0 20rpx 0 60rpx;
								img{
									height:30rpx;
									width:30rpx;
									margin:15rpx;
								}
							}
						}
					}
				}
			}

			/*暂无数据*/
            .get-null-box{
                height:100rpx;
                line-height:100rpx;
                color:#999;
                text-align center
            }
        }
        .bottom-button-box{
			border-radius:20rpx;
			margin:20rpx 50rpx;
            width: 650rpx;
            height: 100rpx;
            line-height: 100rpx;
            background: #0183FA;
            font-size: 30rpx;
            color: #FFFFFF;
            text-align center;
        }
    }
</style>