v3-lab-xcx/pages_basics/views/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=='季管控'? 'lightBlue ': '',control.ruleType=='半年管控'? 'deepPurple  ': '',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.endDateTow}}</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="imagesUrl('commonality/icon_fjgk_sc.png')" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-button-box" @click="goSafeAccess">完成</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		gradingControlAdd
	} from '@/pages_basics/api/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: [item.url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (item.type == 'pdf' || item.type == 'xlsx' || item.type == 'docx') {
					uni.showLoading({
						title: '下载中'
					});
					console.log(item)
					//下载文档
					wx.downloadFile({
						url:item.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function(res) {
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + item.name
							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 != 'xlsx' &&
							text != 'docx') {
							uni.showToast({
								title: '仅支持png/jpg/jpeg/gif/pdf/xlsx/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 + '/system/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);
								}

								/* 季管控 */
								.lightBlue {
									color: #81d3f8;
									background: rgba(129, 211, 248, 0.2);
								}

								/* 半年管控 */
								.deepPurple {
									color: #6565f1;
									background: rgba(101, 101, 241, 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>