smart-app/pages/task/createTask/createTask.vue

<template>
	<view>
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		<!-- 顶部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">新建自定义任务</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center">
					<button @click="save()" class="cu-btn round line-blue text-white" style="width: 160rpx;height: 66rpx;padding: 0;">提交</button>
				</view>
			</block>
		</cu-custom>
		<!-- 内容 -->
		<form>
			<view class="cu-form-group_1">
				<view class="title">任务名称</view>
				<input placeholder="请输入任务名称" placeholder-style="color:#AEAEAE;font-size:30rpx" v-model="data.taskName" name="input"></input>
			</view>
			<view class="cu-form-group_2">
				<view class="title">任务说明</view>
				<textarea maxlength="-1" placeholder="请输入" placeholder-style="color:#AEAEAE;font-size:30rpx" v-model="data.content"></textarea>
			</view>
			<view class="cu-form-group_3 flex">
				<view class="title">每人限定时间</view>
				<picker class="flex-sub text-right" @change="timeLimitChange" :value="data.timeLimit" :range="timeLimitList">
					<view class="picker">
						{{timeLimitList[data.timeLimit]}}天
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view>
			<view class="cu-form-group_3 flex">
				<view class="title">任务流程</view>
				<picker class="flex-sub text-right" @change="flowChange" :value="data.flow" :range="workflow" range-key="name">
					<view class="picker">
						{{flowName}}
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view>
			<!-- <view class="cu-form-group_3">
				<view class="title">任务状态</view>
				<picker @change="taskStatusChange" :value="taskIndex" :range="taskStatus">
					<view class="picker">
						{{taskStatus[taskIndex]}}
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view> -->
			<!-- <view class="cu-form-group_3" v-if="pickerData.length!=0">
				<view class="title">预警规则</view>
				<picker @change="PickerChange" :value="index" :range="pickerData">
					<view class="picker">
						{{pickerData[index]}}
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view> -->
			<!-- <view class="cu-form-group_3">
				<view class="title">开始日期</view>
				<datetime-picker v-model="data.startTime" placeholder="请选择开始日期" style="color:#AEAEAE;font-size:30rpx" fields="minute"
				 @change="changeStartTime"></datetime-picker>
				<text class='cuIcon-right text-gray'></text>
			</view> -->
			<!-- <view class="cu-form-group_3">
				<view class="title">结束日期</view>
				<datetime-picker v-model="data.endTime" placeholder="请选择结束日期" style="color:#AEAEAE;font-size:30rpx" fields="minute"
				 @change="changeEndTime"></datetime-picker>
				<text class='cuIcon-right text-gray'></text>
			</view> -->
		</form>
		<!-- 负责人内容 -->
		<view class="cu-form-group_1">
			<view class="title">任务人</view>
		</view>
		<view class="cu-list_b">
			<view class="cu-list_1">
				<view class="cu-list_item" v-for="item in principal" :key="item.id">
					<view class="cu-capsule round">
						<!-- <view v-if="item.type==1" class='cu-tag bg-gray-secondary '>
							施工方
						</view>
						<view v-if="item.type==2" class='cu-tag bg-gray-secondary '>
							监理方
						</view>
						<view v-if="item.type==3" class='cu-tag bg-gray-secondary '>
							业主方
						</view>
						<view class="cu-tag bg-gray-secondary">
							<text class="cuIcon-titles text-gray"></text>
						</view> -->
						<view class="cu-tag bg-gray-secondary" :class="{ 'padding-sm': data.flow != 0 }">
							{{item.user_name}}
						</view>
						<view v-if="data.flow == 0" class="cu-tag bg-gray-secondary" @tap="delprincipal(item,'task')">
							<image src="/static/index/delete-blue.png" class="login-img"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="data.flow == 0">
				<button @click="addPrincipal('task')" class="cu-btn round bg-blue-secondary"><text class="cuIcon-add text-blue">新增</text></button>
			</view>
		</view>
		
		<view class="cu-form-group_1">
			<view class="title">抄送人</view>
		</view>
		<view class="cu-list_b">
			<view class="cu-list_1">
				<view class="cu-list_item" v-for="(item) in copyList" :key="item.id">
					<view class="cu-capsule round">
						<!-- <view v-if="item.type==1" class='cu-tag bg-gray-secondary '>
							施工方
						</view>
						<view v-if="item.type==2" class='cu-tag bg-gray-secondary '>
							监理方
						</view>
						<view v-if="item.type==3" class='cu-tag bg-gray-secondary '>
							业主方
						</view>
						<view class="cu-tag bg-gray-secondary">
							<text class="cuIcon-titles text-gray"></text>
						</view> -->
						<view class="cu-tag bg-gray-secondary">
							{{item.user_name}}
						</view>
						<view class="cu-tag bg-gray-secondary" @tap="delprincipal(item,'copy')">
							<image src="/static/index/delete-blue.png" class="login-img"></image>
						</view>
					</view>
				</view>
			</view>
			<view>
				<button @click="addPrincipal('copy')" class="cu-btn round bg-blue-secondary"><text class="cuIcon-add text-blue">新增</text></button>
			</view>
		</view>
		
		<!-- 上传附件-->
		<view class="cu-form-group_3">
			<view class="title">上传附件</view>
			<view class="action">
				<button @click="chooseFile()" class="cu-btn round line-blue"><text class="cuIcon-add text-blue">新增</text></button>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in uploadFileList" :key="index">
				<view class="cu-avatar round lg">
					<image v-if="item.type==1" :src="fileImage[0]" class="menuImageTask"></image>
					<image v-if="item.type==2" :src="fileImage[1]" class="menuImageTask"></image>
					<image v-if="item.type==3" :src="fileImage[2]" class="menuImageTask"></image>
					<image v-if="item.type==4" :src="fileImage[3]" class="menuImageTask"></image>
				</view>
				<view class="content text-cut">
					<view class="text-black text-cut text-lg">{{item.name}}</view>
					<view class="flex justify-start">
						<text class="text-gray text-sm">{{item.size}}</text>
					</view>
				</view>
				<view class="action" style="width: auto;">
					<view class=" text-gray text-sm margin-right-sm" @click="delFile(index)">
						<image src="/static/index/delete-blue.png" class="login-img"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 已不用-->
		<view class="cu-modal bottom-modal " :class="modalShow?'show':''">
			<view class="cu-dialog">
				<!-- 内容 -->
				<view class="boderbo margin-bottom-xxxl ">
					<!-- 菜单-->
					<view class="padding bg-white text-black">
						<text>目前只支持上传以下类型的文件 </text>
					</view>
					<view class="cu-list grid bg-black col-4 no-border">
						<view class="cu-item text-black" v-for="(item,index) in menuList" :key="index">
							<view>
								<image class="menuImageTask" :src="item.image"></image>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../../core/api.js"
	export default {
		data() {
			return {
				modalShow: false,
				principal: [],
				fileImage: ["/static/task/excel.png", "/static/task/word.png", "/static/task/pdf.png", "/static/task/image.png", ],
				menuList: [{
						name: "XLS",
						image: "/static/task/excel.png"
					},
					{
						name: "DOC",
						image: "/static/task/word.png"
					},
					{
						name: "PDF",
						image: "/static/task/pdf.png"
					},
					{
						name: "JPG",
						image: "/static/task/image.png"
					},
				],
				userInfo: "",
				rulesData: [],
				pickerData: [],
				index: 0,
				uploadFileList: [],
				taskStatus: ['未完成', '完成'],
				taskIndex: 0,
				data: {
					taskName: "",
					content: "",
					status: 0,
					rules: "",
					startTime: "",
					endTime: "",
					principal: "",
					userId: uni.getStorageSync("userInfo").id,
					file: '',
					contractId: '',
					timeLimit:0,//限定时间
					flow:0,//任务流程
				},
				
				timeLimitList:[1,2,3,4,5,6,7,10,15,20,25,30],
				workflow:[{id:0,name:"自定义流程"}],
				flowName:'自定义流程',
				copyList:[],
				contractId : uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).contractId,
				projectId : uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).id,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo");
			this.data.contractId = this.contractId;
			//console.log(this.data.contractId)
			//this.findRule();
			this.findWorkflow();
		},
		onShow() {
			uni.$on("taskPerson", res => {
				this.principal = res;
				//console.log(this.principal)
			})
			uni.$on("copyPerson", res => {
				this.copyList = res;
				//console.log(this.principal)
			})
		},
		onBackPress() {/* 监听返回事件，删除上传的文件 */
			/* var that =this;
			that.uploadFileList.forEach(item=>{
				that.delOssFile(item.path)
			}) */
		},
		methods: {
			delprincipal(value,type) {
				let list = []
				if(type == 'task'){
					list = this.principal;
				}else if(type == 'copy'){
					list = this.copyList;
				}
				
				list.forEach((item, index, arry) => {
					if (item.id == value.id) {
						list.splice(index, 1);
						return;
					}
				})
			},
			delFile(value) {
				let data = [];
				var that = this;
				that.uploadFileList.forEach((item, index, arry) => {
					if (value != index) { //把没有删除的留下来
						data.push(item)
					} else { //删除云端文件
						that.delOssFile(item.path);
					}
				})
				that.uploadFileList = data;
			},
			//删除云端文件
			delOssFile(delData) {
				this.http.request("/app/task/delOssFile", {
					name: delData
				})
			},
			addPrincipal(type) {
				//console.log(this.principal);
				let list = [];
				let name = '';
				
				if(type == 'task'){
					list = this.principal;
					name = '选择任务人'
				}else if(type == 'copy'){
					list = this.copyList;
					name = '选择抄送人'
				}
				//把已选值储存到全局变量
				getApp().globalData.principal = list;
				uni.navigateTo({
					url: "/pages/constructionLog/personnel/personnel?name=" + name
				})
			},
			/**
			 * 选择日期时间
			 * @param {Object} date 日期数据
			 */
			changeStartTime(date) {
				this.data.startTime = date.fmt1 + " " + date.fmt8;
				console.log(this.startTime)
			},
			/**
			 * 选择日期时间
			 * @param {Object} date 日期数据
			 */
			changeEndTime(date) {
				this.data.endTime = date.fmt1 + " " + date.fmt8;
			},
			stopPenetrate() {
				return;
			},
			colseFlie() {
				this.modalShow = false;
			},
			/* 获取预警规则、根据合同同id和用户id  */
			findRule() {
				var that = this;
				var contractId = this.contractId;
				var useId = that.userInfo.id;
				that.http.request("/app/task/findRule", {
					userId: useId,
					contractId: contractId
				}).then((res) => {
					if (res.datas != null) {
						res.datas.forEach((item) => {
							that.pickerData.push(item.rulesName)
						})
						that.rulesData = res.datas;
						that.data.rules = that.rulesData[0].id;
					}

				})
			},
			PickerChange(e) {
				this.index = e.detail.value;
				//选中的内容
				this.rulesData.forEach((item, index) => {
					if (index == this.index) {
						this.data.rules = item.id;
					}
				})
			},
			taskStatusChange(e) {
				this.taskIndex = e.detail.value;
				this.taskStatus.forEach((item, index) => {
					if (index == this.taskIndex) {
						this.data.status = this.taskIndex;
					}
				})
			},
			onSuccess(res) {
				var that = this;
				console.log(res.data.id);
				if (res.data.id == "null") {
					that.$prompt.none("上传的文件格式不正确")
				} else {
					console.log('上传成功回调:');
					console.log(res);
					that.uploadFileList.push(JSON.parse(res.data.id));
				}
				/* that.modalShow=false; */
			},
			//选择文件
			chooseFile() {
				var that = this;
				//that.modalShow=true;
				var url = config.api;
				var token = uni.getStorageSync("token");
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					url: url + '/app/task/saveTaskFile',
					header: {
						"Authorization": token
					},
					name: "file",
					// #endif
				});
			},
			// /* 提交 */
			// save() {
			// 	var that = this;
			// 	if (that.data.taskName == "") {
			// 		that.$prompt.none("请填写任务名称");
			// 		return
			// 	}

			// 	that.http.request("/app/task/taskRename", {
			// 		userId: that.data.userId,
			// 		contractId: that.data.contractId,
			// 		taskName: that.data.taskName
			// 	}).then((res) => {
			// 		if (res.result != '-1') {
			// 			that.$prompt.none("任务名称已存在");
			// 		} else {
			// 			if (that.data.content == "") {
			// 				that.$prompt.none("请填写任务说明");
			// 				return
			// 			}
			// 			if (that.data.startTime == "") {
			// 				that.$prompt.none("请选择开始日期");
			// 				return
			// 			}
			// 			if (that.data.endTime == "") {
			// 				that.$prompt.none("请选择结束日期");
			// 				return
			// 			}
			// 			if (that.principal.length == 0) {
			// 				that.$prompt.none("请选择负责人");
			// 				return
			// 			}


			// 			//获取负责人，利用逗号隔开多个人员
			// 			that.principal.forEach((item) => {
			// 				that.data.principal += item.id + ",";
			// 			})
			// 			//获取上传的文件
			// 			var file;
			// 			if (that.uploadFileList.length > 0) {
			// 				that.data.file = JSON.stringify(that.uploadFileList);
			// 			}
			// 			that.http.request("/app/task/saveTask", that.data).then((res) => {
			// 				if (res.result == "1") {
			// 					that.$prompt.none("提交成功");
			// 					//清除全局变量
			// 					getApp().globalData.principal = [];
			// 					setTimeout(function() {
			// 						uni.navigateBack({
			// 							delta: 1
			// 						})
			// 					}, 300)
			// 				} else {
			// 					that.$prompt.none("提交失败");
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			/* 提交 */
			save() {
				var that = this;
				if (that.data.taskName == "") {
					that.$prompt.none("请填写任务名称");
					return
				}
			
				that.http.request("/app/task/taskRename", {
					userId: that.data.userId,
					contractId: that.data.contractId,
					taskName: that.data.taskName
				}).then((res) => {
					if (res.result != '-1') {
						that.$prompt.none("任务名称已存在");
					} else {
						if (that.data.content == "") {
							that.$prompt.none("请填写任务说明");
							return
						}
						if (that.principal.length == 0) {
							that.$prompt.none("请选择任务人");
							return
						}
						
						var copyUserIds = [];
						this.copyList.forEach((item)=>{
							copyUserIds.push(item.id)
						})
			
			
						//获取负责人，利用逗号隔开多个人员
						that.principal.forEach((item) => {
							that.data.principal += item.id + ",";
						})
						//获取上传的文件
						var file;
						if (that.uploadFileList.length > 0) {
							that.data.file = JSON.stringify(that.uploadFileList);
						}
						that.http.request("/app/task/saveTask", {
							userId:this.data.userId,
							contractId:that.data.contractId,
							status:that.data.status,
							taskName:that.data.taskName,
							content:that.data.content,
							projectId:this.projectId,
							taskFlow:this.data.flow,
							principal:that.data.principal,
							blackout_days:this.timeLimitList[this.data.timeLimit],
							file:that.data.file,
							copyUserIds:copyUserIds.join(','),
						}).then((res) => {
							if (res.result == "1") {
								that.$prompt.none("提交成功");
								//清除全局变量
								getApp().globalData.principal = [];
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 300)
							} else {
								that.$prompt.none("提交失败");
							}
						})
					}
				})
			},
			
			timeLimitChange(e){
				this.data.timeLimit = e.detail.value;
			},
			flowChange(e){
				//console.log(e.detail)
				this.flowName = this.workflow[e.detail.value].name;
				this.data.flow = this.workflow[e.detail.value].id;
				
				if(this.data.flow != 0){
					this.http.request("/app/getLinks",{id:this.data.flow}).then((res)=>{
						//console.log(res)
						if(res.datas && res.datas.length > 0){
							res.datas.forEach((item)=>{
								item.user_name = item.userName
							})
							this.principal = res.datas;
						}
					})
				}else{
					this.principal = [];
				}
			},
			
			/**
			 * 查询填报流程
			 */
			findWorkflow(){
				this.http.request("/app/workflowlist",{type:'1',contractId:this.contractId}).then((res)=>{
					res.datas.forEach((item)=>{
						this.workflow.push(item);
					});
					this.workflow.forEach((item,index)=>{
						item.value =''+index+'';
					})
				})
			}
		}
	}
</script>

<style>
	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 4px;
		color: #101010;
		font-size: 14px;
		line-height: 17px;
	}

	.boderbo {
		border-bottom: 1px solid #F7F7F7;
	}

	.cu-form-group_1 {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #E3E1E1;
		height: 88rpx;
		background-color: #fff;
	}

	.cu-form-group_1 .title {
		width: 142rpx;
		font-size: 30rpx;
		color: #101010;
	}

	.cu-form-group_1 input {
		width: 560rpx;
		color: #8a8a8a;
		font-size: 30rpx;
	}

	.cu-form-group_2 {
		display: flex;
		padding: 22rpx 24rpx;
		background-color: #fff;
		margin-bottom: 22rpx;
	}

	.cu-form-group_2 .title {
		width: 142rpx;
		font-size: 30rpx;
		color: #101010;
	}

	.cu-form-group_2 textarea {
		font-size: 30rpx;
		color: #8a8a8a;
		width: 560rpx;
		height: 130rpx;
	}

	.cu-form-group_3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #E3E1E1;
		height: 88rpx;
		background-color: #fff;
	}

	.cu-form-group_3:last-child {
		border-bottom: none;
		margin-bottom: 22rpx;
	}

	.cu-form-group_3 .title {
		font-size: 30rpx;
		color: #101010;
	}

	.cu-form-group_3 .picker {
		color: #8a8a8a;
		font-size: 30rpx;
	}
	.cu-list_b{background-color: #fff;padding: 22rpx 24rpx;margin-bottom: 22rpx;}
	.cu-list_1{display: flex;flex-wrap: wrap;}
	.cu-list_item{margin-bottom: 26rpx;margin-right: 20rpx;}
</style>