dgtis-uniapp/pages/oa/expense/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="expenseTypeId">
				<uni-data-select v-model="form.expenseTypeId" :localdata="typeList" @change="changeExpenseTypeId">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="费用所属期间" required name="expenseMonth">
				<picker mode="date" fields="month" @change="bindDateChange">
					<uni-easyinput v-model="form.expenseMonth" placeholder="请选择"/>
				</picker>
			</uni-forms-item>
			<button type="primary" size="mini" @click="addRow">新增</button>
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th align="center" width="100">费用项目</uni-th>
					<uni-th align="center" width="100">金额(元)</uni-th>
					<uni-th align="center" width="200">开始日期</uni-th>
					<uni-th align="center" width="200">结束日期</uni-th>
					<uni-th align="center" width="200">说明</uni-th>
					<uni-th align="center" width="90">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in form.oaExpenseObjs" :key="index">
					<uni-td>
						<uni-data-picker v-model="item.expenseItemId" :localdata="listByExpenseType" popup-title="费用项目">
						</uni-data-picker>
					</uni-td>
					<uni-td align="center">
						<uni-easyinput v-model="item.money" :clearable="false" @blur="testMoney(item.money,index)" @change="changeMoney()" />
					</uni-td>
					<uni-td align="center">
						<uni-datetime-picker type="date" v-model="item.startDate" :clearable="false"/>
					</uni-td>
					<uni-td align="center">
						<uni-datetime-picker type="date" v-model="item.endDate" :clearable="false"/>
					</uni-td>
					<uni-td align="center">
						<uni-easyinput maxlength="20" v-model="item.remarks" :clearable="false" />
					</uni-td>
					
					<uni-td align="center">
						<view class="uni-group">
							<button :disabled="form.oaExpenseObjs.length > 1 ? false : true" size="mini" type="warn"
								@click="handleDeleteRow(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-forms-item label="报销总金额(元)" required name="totalMoney">
				<uni-easyinput v-model="form.totalMoney" disabled />
			</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 {
	typeList,
	listByExpenseTypeId,
	getDetail,
	create,
	save,
	deleteById,
	closeById,
	reCommit
} from "@/api/oa/expense.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 {
			typeList:[],
			listByExpenseType:[],
			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,
				expenseTypeId: undefined,
				expenseMonth: undefined,
				oaExpenseObjs: [],
				totalMoney: undefined,
				supplierName: undefined,
				reason: undefined,
				fileIdList: undefined,
				remarks: undefined,
				peopleList: '',
			},
			// 校验规则
			rules: {
				expenseTypeId: {
					rules: [{
						required: true,
						errorMessage: '请选择'
					},]
				},
				expenseMonth: {
					rules: [{
						required: true,
						errorMessage: '请选择'
					},]
				},
				totalMoney: {
					rules: [{
						required: true,
						errorMessage: '报销总金额不能为空'
					},]
				},
				reason: {
					rules: [{
						required: true,
						errorMessage: '请输入'
					},]
				},
				peopleList: {
					rules: [{
						required: true,
						errorMessage: '请选择审批人'
					},]
				},
			},
		}
	},
	watch: {
		id: {
			immediate: true,
			handler(val) {
				this.getInfoDataList();
				if (val) {
					this.getDetail(val);
				} else {
					this.addRow();
				}
			}
		}
	},
	methods: {
		bindDateChange(e){
			this.form.expenseMonth = e.detail.value;
		},
		getInfoDataList() {
			typeList().then(response => {
				response.data.forEach(v => {
					this.typeList.push({
						text: v.name,
						value: v.id,
					})
				})
			});
		},
		
		changeExpenseTypeId(e) {
			if(e){
				this.form.expenseTypeId = e;
				this.getListByExpenseTypeId();
			}
		},
		//获得报销费用项目信息列表
		getListByExpenseTypeId(){
			this.listByExpenseType = [];
			listByExpenseTypeId({expenseTypeId:this.form.expenseTypeId}).then(
				response => {
					response.data.forEach(v => {
						this.listByExpenseType.push({
							text: v.name,
							value: v.id,
						})
					})
				}
			);
		},
		testMoney(val,index){
			console.log(val,index);
			let reg = /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/
			if (!reg.test(val)) {
				this.$modal.showToast('请输入合法的金额数字，最多两位小数')
				this.form.oaExpenseObjs[index].money = '';
			}
		}, 
		changeMoney() {
			let arr = this.form.oaExpenseObjs;
			this.form.totalMoney = this.sum(arr);
		},
		//求和
		sum(arr) {
			return arr.reduce((prev, cur) => {
				return ((prev * 100) + (cur.money * 100)) / 100
			}, 0)
		},
		/**
* 新增行
*/
		addRow() {
			this.form.oaExpenseObjs.push({
				expenseItemId: undefined,
				money: undefined,
				startDate: undefined,
				endDate: undefined,
				remarks: undefined,
			});
		},

		/**
		 * 删除行
		 * @param row
		 */
		handleDeleteRow(index) {
			console.log(index);
			this.form.oaExpenseObjs.splice(index, 1);
			let arr = this.form.oaExpenseObjs;
      		this.form.totalMoney = this.sum(arr);
		},
		/** 获得详情信息 */
		getDetail(val) {
			getDetail(val).then(response => {
				if(response.data.expenseTypeId){
					this.form.expenseTypeId = response.data.expenseTypeId;
					this.getListByExpenseTypeId();
				}
				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) {
			console.log('submit', this.form);
			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">
.table-header {
	position: sticky;
	left: 0;
	top: 0;
	z-index: 98;
	background-color: #fff;
}

//冻结表头第一列
/deep/ .uni-table-tr .uni-table-td:last-child {
	position: sticky;
	right: 0;
	top: 0;
	background-color: #fff;
	z-index: 98;
}

/deep/ .uni-table-tr {
	overflow: visible;
	background-color: #fff;
}

/deep/ .uni-table-tr .uni-table-th:last-child {
	position: sticky;
	right: 0;
	top: 0;
	background-color: #fff;
	z-index: 98;
}

.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>