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

<template>
	<view class="container">
		<uni-forms ref="form" :rules="rules" :model="form" labelWidth="80px" :label-position="alignment">
			<uni-forms-item label="入职人" required name="entryName">
				<uni-easyinput v-model="form.entryName" placeholder="请输入"/>
			</uni-forms-item>
			<uni-forms-item label="部门" required name="deptId">
				<uni-data-select v-model="form.deptId" :localdata="deptOptions">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="职位" required name="postId">
				<uni-data-select v-model="form.postId" :localdata="postOptions">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="员工类型" required name="employeeType">
				<uni-data-select v-model="form.employeeType" :localdata="employeeTypeListOpen">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="性别" required name="gender">
				<uni-data-select v-model="form.gender" :localdata="userSexList">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="出生日期" required name="birthday">
				<uni-datetime-picker type="date" v-model="form.birthday"/>
			</uni-forms-item>
			
			<uni-forms-item label="联系电话" required name="contactNumber">
				<uni-easyinput v-model="form.contactNumber" placeholder="请输入"/>
			</uni-forms-item>
			<uni-forms-item label="电子邮箱" required name="email">
				<uni-easyinput v-model="form.email" placeholder="请输入"/>
			</uni-forms-item>
			<uni-forms-item label="教育背景">
				<uni-easyinput maxlength="50" type="textarea" v-model="form.education" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="工作经验">
				<uni-easyinput maxlength="200" type="textarea" v-model="form.workExperience" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="入职日期" required name="entryDate">
				<uni-datetime-picker type="date" v-model="form.entryDate"/>
			</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="default" size="mini" @click="onReCommit('form')">提交</button>
			<button type="primary" 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 @submit="submitPeople" ref="popleSelect"></pople-Select>
					</view>
				</view>

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

<script>
	import {
		getDetail,
		create,
		save,
		deleteById,
		closeById,
		reCommit
	} from "@/api/oa/entry.js"
	import {getDicts,getOpenDicts,listSimplePosts,listSimpleDepts } from "@/api/system/dict.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 {
				deptOptions:[],
				postOptions:[],
				employeeTypeListOpen:[],
				userSexList:[],
				tasks: [],
				userInfo: uni.getStorageSync('userInfo'),
				alignment: 'top',
				uploadOptions: {},
				fileList: [],
				icons: {
					close: '/static/icon_close.png',
					file: '/static/icon_file.png',
				},
				nikeNamelist: [],
				// 表单数据
				form: {
					entryName: undefined,
					deptId: undefined,
					postId: undefined,
					employeeType: undefined,
					gender: undefined,
					birthday: undefined,
					contactNumber: undefined,
					email: undefined,
					education: undefined,
					workExperience: undefined,
					entryDate: undefined,
					fileIdList: undefined,
					remarks: undefined,
					peopleList: '',
				},
				// 校验规则
				rules: {
					entryName: {
						rules: [{
							required: true,
							errorMessage: '请输入'
						}, ]
					},
					deptId: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					postId: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					employeeType: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					birthday: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					contactNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入'
						}, ]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入'
						}, ]
					},
					entryDate: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}, ]
					},
					peopleList: {
						rules: [{
							required: true,
							errorMessage: '请选择审批人'
						}, ]
					},
				},
			}
		},
		  watch: {
		    id: {
		      immediate: true,
		      handler(val) {
				this.getInfoDataList();
		        if (val) {
		          this.getDetail(val);
		        }
		      }
		    }
		  },
		methods: {
			maskClick(e) {
				console.log('----maskClick事件:', e);
			},
			 /** 查询部门列表 */
			 getInfoDataList() {
				listSimpleDepts().then(response => {
					response.data.forEach(v => {
						this.deptOptions.push({
							text: v.name,
							value: v.id,
						})
					})
				});
				getDicts('system_user_sex').then(response => {
					response.data.forEach(v => {
						this.userSexList.push({
							text: v.label,
							value: v.value,
						})
					})
				});
				getOpenDicts('tenant_employee_type').then(response => {
					response.data.forEach(v => {
						this.employeeTypeListOpen.push({
							text: v.label,
							value: v.value,
						})
					})
				});
				listSimplePosts().then(response => {
					response.data.forEach(v => {
						this.postOptions.push({
							text: v.name,
							value: v.id,
						})
					})
				});
			},
			/** 获得详情信息 */
			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;
					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;
				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>