dgtis-uniapp/pages/oa/out/edit.vue

<template>
	<view class="container">
		<uni-forms ref="form" :rules="rules" :model="form" labelWidth="120px" :label-position="alignment">
			<uni-forms-item label="外出人">
				<uni-easyinput v-model="userInfo.nickname" disabled />
			</uni-forms-item>
			<uni-forms-item label="部门">
				<uni-easyinput v-model="userInfo.deptName" disabled />
			</uni-forms-item>
			<uni-forms-item label="职位">
				<uni-easyinput v-model="userInfo.position" disabled />
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput v-model="userInfo.mobile" disabled />
			</uni-forms-item>
			<uni-forms-item label="外出地点" required name="destination">
				<uni-easyinput maxlength="20" v-model="form.destination" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="外出开始时间" required name="startDate">
				<uni-datetime-picker type="datetime" v-model="form.startDate" @change="upHourStart"/>
			</uni-forms-item>
			<uni-forms-item label="外出结束时间" required name="endDate">
				<uni-datetime-picker  type="datetime" v-model="form.endDate" @change="upHourEnd"/>
			</uni-forms-item>
			<uni-forms-item label="外出时长" required name="hour">
				<uni-easyinput v-model="form.hour" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="外出事由" required name="reason">
				<uni-easyinput maxlength="200" type="textarea" v-model="form.reason" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="附件">
				<view class="upload-wrap">
					<button type="primary" size="mini" @click="handleUploadClick">点击上传</button>
					<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
					<view class="mgb-16 file-wrap" v-for="(item, index) in fileList" :key="index">
						<view class="btn-click file-line" @click="handlePreview(item)">
							<view class="file-info">
								<image :src="icons.file" mode="aspectFill" class="file-icon" />
								<text class="file-name">{{ item.name || title[type] }}</text>
							</view>
							<image :src="icons.close" mode="aspectFill" class="file-icon"
								@click.stop="handleDeleteFile(index)" />
						</view>
					</view>
				</view>

			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput maxlength="200" type="textarea" v-model="form.remarks" placeholder="请输入备注" />
			</uni-forms-item>
			<uni-forms-item label="审批人" required name="peopleList">
				<uni-easyinput v-model="form.peopleList" style="display: none;" />
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<uni-icons type="folder-add" size="40" @click="gotochooseUser"></uni-icons>
					<view style="display: flex;justify-content: flex-start;align-items: center;"
						v-for="(tag, index) in nikeNamelist" :key="index">
						<uni-icons type="right" size="20"></uni-icons>
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
							@click="handleClose(index)">
							<span class="user-avatar">{{ tag.substring(0, 1) || 'U' }}</span>
							<text style="font-size: 12px;">{{ tag }}</text>
						</view>

					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="流程动态" v-if="tasks.length > 0">
				<uni-steps active-icon="medal" :options="tasks" active-color="#007AFF" :active="tasks.length"
					direction="column" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group" v-if="name == '0'">
			<button type="primary" size="mini" @click="onReCommit('form')">提交</button>
			<button type="default" size="mini" @click="onClose()">关闭</button>
		</view>
		<view class="button-group" v-else>
			<button type="primary" size="mini" @click="submit('form')">提交</button>
			<button type="default" size="mini" @click="onSave()">暂存</button>
			<button type="warn" size="mini" @click="onDelete()" v-if="form.auditStatus == 0">删除</button>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0">
				<view class="popup-body">
					<view class="popup-close">
						<uni-icons type="closeempty" size="20" @click="popupClose"></uni-icons>
					</view>
					<view class="popup-content">
						<pople-Select type="multiple" @submit="submitPeople" ref="popleSelect"></pople-Select>
					</view>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
import {
	getDetail,
	create,
	save,
	deleteById,
	closeById,
	reCommit
} from "@/api/oa/out.js"
import {
	uploadFile
} from "@/api/system/user"
import popleSelect from '../../popleSelect/choose.vue'
export default {
	components: {
		popleSelect
	},
	props: {
		id: {
			type: [String, Number],
			default: undefined
		},
		name: {
			type: String,
			default: undefined
		},
	},
	data() {
		return {
			start: Date.now() - 10 * 24 * 3600000,
			end: Date.now() + 10 * 24 * 3600000,
			tasks: [],
			userInfo: uni.getStorageSync('userInfo'),
			alignment: 'top',
			uploadOptions: {},
			fileList: [],
			icons: {
				close: '/static/icon_close.png',
				file: '/static/icon_file.png',
			},
			nikeNamelist: [],
			// 表单数据
			form: {
				employeeName: undefined,
				deptName: undefined,
				position: undefined,
				employeePhone: undefined,
				destination: undefined,
				startDate: undefined,
				endDate: undefined,
				hour: undefined,
				reason: undefined,
				fileIdList: undefined,
				remarks: undefined,
				peopleList: '',
			},
			// 校验规则
			rules: {
				destination: {
					rules: [{
						required: true,
						errorMessage: '请输入'
					},]
				},
				startDate: {
					rules: [{
						required: true,
						errorMessage: '请选择'
					},]
				},
				endDate: {
					rules: [{
						required: true,
						errorMessage: '请选择'
					},]
				},
				hour: {
					rules: [{
						required: true,
						errorMessage: '请输入'
					}, {
						validateFunction: function (rule, value, data, callback) {
							let reg = /^[0-9]*$/
							if (!reg.test(value)) {
								callback("请输入数字")
							}
							return true
						}
					}]
				},
				reason: {
					rules: [{
						required: true,
						errorMessage: '请输入'
					},]
				},
				peopleList: {
					rules: [{
						required: true,
						errorMessage: '请选择'
					},]
				},
			},
		}
	},
	watch: {
		id: {
			immediate: true,
			handler(val) {
				if (val) {
					this.getDetail(val);
				}
			}
		}
	},
	methods: {
		upHourStart(e) {
			this.form.startDate = e;
			if (this.form.startDate && this.form.endDate) {
				let Hours = this.calLeaveDays();
				this.form.hour = Math.ceil(Hours);
				if (Hours < 0) {
					this.form.startDate = "";
					this.form.endDate = "";
					this.form.hour = "";
					this.$modal.showToast('起始日期小于结束日期，请重新选择！')
					return;
				} else if (Hours == 0) {
					this.form.startDate = "";
					this.form.endDate = "";
					this.form.hour = "";
					this.$modal.showToast('外出时间为0，请重新选择！')
					return;
				}
			}

		},
		upHourEnd(e) {
			this.form.endDate = e;
			if (this.form.startDate && this.form.endDate) {
				let Hours = this.calLeaveDays();
				this.form.hour = Math.ceil(Hours);
				if (Hours < 0) {
					this.form.startDate = "";
					this.form.endDate = "";
					this.form.hour = "";
					this.$modal.showToast('起始日期小于结束日期，请重新选择！')
					return;
				} else if (Hours == 0) {
					this.form.startDate = "";
					this.form.endDate = "";
					this.form.hour = "";
					this.$modal.showToast('外出时间为0，请重新选择！')
					return;
				}
			}

		},
		calLeaveDays() {
			var start_time = new Date();
			var end_time = new Date();
			start_time = new Date(this.form.startDate);
			end_time = new Date(this.form.endDate);
			console.log(start_time);
			console.log(end_time);
			//转成毫秒数，两个日期相减
			var hours = end_time.getTime() - start_time.getTime();
			//转换成小时
			var hour = hours / (1000 * 60 * 60);
			console.log("hour = ", hour);
			return hour;
		},
		/** 获得详情信息 */
		getDetail(val) {
			getDetail(val).then(response => {
				this.form = response.data;
				console.log(this.form);
				this.fileList = response.data.fileList ? response.data.fileList : [];
				let auditUserList = response.data.auditUserList;
				if (auditUserList) {
					let peopleList = [];
					let nikeNamelist = [];
					auditUserList.map(item => {
						peopleList.push(item.id);
						nikeNamelist.push(item.nickname)
					});
					this.$set(this.form, 'peopleList', peopleList.join(','));
					this.nikeNamelist = nikeNamelist;
				} else {
					this.$set(this.form, 'peopleList', '');
					this.nikeNamelist = [];
				}
				let auditRecordList = response.data.auditRecordList;
				if (auditRecordList) {
					let tasks = [];
					auditRecordList.forEach(v => {
						tasks.push({
							title: '任务:' + v.assigneeUser.nickname + v.name,
							desc: this.parseTime(v.endTime),
						})
					})
					this.tasks = tasks;
				}
			});
		},
		// 关闭标签
		handleClose(index) {
			this.nikeNamelist.splice(index, 1);
			let peopleList = this.form.peopleList.split(',');
			peopleList.splice(index, 1);
			this.form.peopleList = peopleList.join(',');
		},
		submitPeople(userList, nikeNamelist, userIdList) {
			console.log(userList);
			console.log(userIdList);
			this.nikeNamelist = nikeNamelist;
			this.form.peopleList = userIdList.join(',');
			this.$refs.popup.close();
		},
		popupClose() {
			this.$refs.popup.close();
		},
		gotochooseUser() {
			this.$refs.popup.open('bottom');
			setTimeout(() => {
				this.$refs.popleSelect.getInfoData();
			})
		},
		handleUploadClick() {
			this.$refs.XeUpload.upload('file');
		},
		handleUploadCallback(e) {
			console.log('UploadCallback', e);
			let data = {
				filePath: e.data[0].tempFilePath
			}
			uploadFile(data).then(response => {
				const tmpFiles = ([response.data] || []).map(({
					id,
					url,
					name,
					type
				}) => {
					return {
						id,
						url,
						name,
						type,
					};
				});
				this.fileList.push(...tmpFiles);
			})
		},
		// 预览
		handlePreview(val) {
			console.log('PreviewFile', val);
			const fileType = this.getFileType(val.name);
			if (fileType === 'image') {
				uni.previewImage({
					current: 0,
					urls: [val.url],
				});
			} else if (fileType === 'office') {
				return uni.downloadFile({
					url: val.url,
					success: function (res) {
						let filePath = res.filePath || res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			} else {
				uni.showModal({
					title: '该类型文件无法预览',
					content: val.name,
					showCancel: false,
				});
			}

		},
		handleDeleteFile(index) {
			this.fileList.splice(index, 1);
		},
		submit(ref) {
			this.$refs[ref].validate().then(res => {
				this.form.startUserSelectAssignees = this.form.peopleList.split(',');
				this.form.auditPass = true;
				let fileIds = [];
				this.fileList.forEach(v => {
					fileIds.push(v.id)
				})
				this.form.fileIdList = fileIds;
				create(this.form).then(response => {
					uni.showToast({
						title: `提交成功`
					})
					if (this.id) {
						this.$emit('popupClose');
					} else {
						setTimeout(() => {
							this.$router.go(0)
						}, 500)
					}

				}).catch(() => {

				});
			}).catch(err => {
				console.log('err', err);
			})
		},
		//暂存
		onSave() {
			if (this.form.peopleList) {
				this.form.startUserSelectAssignees = this.form.peopleList.split(',');
			}
			this.form.auditPass = false;
			let fileIds = [];
			this.fileList.forEach(v => {
				fileIds.push(v.id)
			})
			this.form.fileIdList = fileIds;
			save(this.form).then(response => {
				uni.showToast({
					title: `暂存成功`
				})
				if (this.id) {
					this.$emit('popupClose');
				} else {
					setTimeout(() => {
						this.$router.go(0)
					}, 500)
				}
			}).catch(() => {

			});
		},
		//驳回或撤回后再次提交
		onReCommit(ref) {
			this.$refs[ref].validate().then(res => {
				this.form.startUserSelectAssignees = this.form.peopleList.split(',');
				this.form.auditPass = true;
				reCommit(this.form).then(response => {
					uni.showToast({
						title: `提交成功`
					})
					this.$emit('popupClose');
				}).catch(() => {

				});
			}).catch(err => {
				console.log('err', err);
			})
		},
		//暂存删除
		async onDelete() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认删除?',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						deleteById(that.id).then(response => {
							uni.showToast({
								title: "删除成功！"
							})
							that.$emit('popupClose');
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//暂存关闭
		async onClose() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认关闭?',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						closeById(that.id).then(response => {
							uni.showToast({
								title: "流程已关闭！"
							})
							that.$emit('popupClose');
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
	}
}
</script>

<style lang="scss">
.container {
	padding: 15px;
	background-color: #fff;
}

.segmented-control {
	margin-bottom: 15px;
}

.button-group {
	margin-top: 15px;
	display: flex;
}

.form-item {
	display: flex;
	align-items: center;
	flex: 1;
}

.button {
	display: flex;
	align-items: center;
	height: 35px;
	line-height: 35px;
	margin-left: 10px;
}
</style>
<style lang="scss" scoped>
.user-avatar {
	width: 22px;
	height: 22px;
	line-height: 19px;
	font-size: 12px;
	background: #46c26f;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	line-height: 22px;
	margin-bottom: 2px;
}

.popup-body {
	z-index: 99;
	margin-bottom: 30px;
}

.popup-close {
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	border-bottom: 1px solid #eaecef;
}

.popup-content {
	height: 450px;
	overflow-x: auto;
	margin: 20px;
}

.btn-click {
	transition: all 0.3s;
	opacity: 1;
}

.btn-click:active {
	opacity: 0.5;
}

.mgb-16 {
	margin-bottom: 16rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.upload-wrap {
	width: 100%;
	border-radius: 16rpx;
	background: white;
	// padding: 32rpx;

	.upload-btn {
		width: 100%;
		height: 176rpx;
		border: 2rpx dashed #AAAAAA;
		background: #FAFAFA;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.upload-icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 8rpx;
		}

		.upload-text {
			font-size: 26rpx;
			color: #9E9E9E;
			line-height: 40rpx;
		}
	}

	.file-wrap {
		.file-line {
			width: 100%;
			background: #F5F5F5;
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.file-info {
				width: 90%;
				display: flex;
				align-items: center;

				.file-name {
					max-width: 80%;
					padding-left: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.file-icon {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}

			.file-empty {
				color: #999999;
			}
		}
	}
}
</style>