OA/pages/reimbursementapplication/bianji.vue

<template>
	<view class="leave_request">
		<view class="leave_box">



			<view class="cont_cell">
				<view class="title">报销人：</view>
				<input type="text" v-model="personInfo.name" disabled placeholder="报销人">
			</view>
			<view class="cont_cell">
				<view class="title">报销部门：</view>
				<input type="text" v-model="personInfo.department_name" disabled placeholder="报销部门">
			</view>
			<view class="cont_cell">
				<view class="title">报销凭证编号：</view>
				<input type="text" v-model="listobj.code" placeholder="报销凭证编号">
			</view>

			<view class="cont_cell" @click="timeShow=true">
				<view class="title">原始单据日期：</view>
				<input type="text" v-model="listobj.expense_time" disabled placeholder="始单据日期">
			</view>
			<view class="cont_cell" @click="timeShow1=true">
				<view class="title">入账月份：</view>
				<input type="text" v-model="listobj.income_month" disabled placeholder="入账月份">
			</view>

			<view class="leava_type flex_a_c">
				<view class="title">关联项目：</view>
				<input type="text" v-model="project" placeholder="请选择" disabled @click="leavaShow1">
			</view>



		</view>
		<view class="leave_box">

			<view class="" v-for="(item,i) in list" :key='i'>
				<view class="leava_type flex_a_c">
					<view class="title">报销项目：</view>
					<input type="text" v-model="item.cate_title" placeholder="请选择" disabled @click="leavaShow(item,i)">
				</view>
				<view class="cont_cell">
					<view class="title">报销金额：</view>
					<input type="text" v-model="item.amount" placeholder="报销金额">
				</view>
				<view class="cont_cell">
					<view class="title">备注：</view>
					<input type="text" v-model="item.remarks" placeholder="备注">
				</view>
			</view>


			<view class="" style="display: flex; justify-content: space-around;padding-top: 20rpx;">
				<u-icon name="plus-circle" color="#333333" size="28" @click="addleava"></u-icon>
				<u-icon name="minus-circle" color="#333333" size="28" @click="deleteleava(item,index)"></u-icon>
			</view>

		</view>
		<view class="leave_box" style="padding-top: 100rpx;">



			<!-- 附件 -->
			<block v-for="(item, i) in fileArray" :key="i">
				<view class="file flex_a_c_j_sb">
					<view class="l_file">
						<view class="file_name">{{ item.name }}</view>
						<view class="file_size">{{ item.filesize }}</view>

					</view>
					<!-- <u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon> -->
				</view>
			</block>
			<view class="upload_box flex_a_c_j_sb">
				<view>
					<view class="title">选择文件并上传</view>
					<view class="text">
						上传前，请规范命名，最大只能上传100M的文件<br />
						超过请压缩成多个文件上传。
					</view>
				</view>
				<view class="" style="margin-top: 60rpx;">
					<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
						style="margin-top: 28rpx;" :debug="false"
						:formats="'pdf,txt,zip,rar,jpg,png,mp3,avi,mov,mp4,gif'" :multiple="false" :count="3"
						:instantly="true" @change="changeFile" @uploadEnd='onuploadEnd' @progress='onprogre'>
						<!-- <view class="change-file">请选择PDF类型的发票</view> -->
						<!-- 	<u-icon name="plus-circle" color="#333333" size="28"
							style="margin-top: 40rpx; margin-left: 60rpx;"></u-icon> -->
						<u-icon name="plus-circle" color="#333333" size="28"></u-icon>
					</lsjUpload>
				</view>
			</view>
		</view>
		<view class="flow_path">
			<view class="cont_cell">
				<view class="title">选择审批流程：</view>
				<input type="text" v-model="flowPath" placeholder="请选择" disabled @click="flowPathShow = true">
			</view>
			<view class="cont_cell" @click="branchShow = true" v-if="flowShow">
				<view class="title">审核人：</view>
				<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
			</view>
			<view v-else>
				<block v-for="(item,i) in  sprecord" :key="i">
					<view class="record" style="display: flex;">
						<view class="circle"></view>
						<text class="text">第{{i+1}}级 {{item.flow_type_txt}}
						</text>
					</view>
					<view class="" v-if="item.user_id_info.length>0&&item.user_id_info"
						style='padding-left: 20rpx;padding-right: 20rpx;margin-bottom: 20rpx;'>
						<view class="" v-for="(items,k) in item.user_id_info"
							style="display: flex;margin-right: 20rpx;">
							<view class=""
								style="width: 30rpx;height: 30rpx;border-radius: 50%; margin-left: 20rpx;margin-right: 10rpx;">
								<image :src="`${httpRequestUrl}`+items.thumb" mode=""
									style="width: 30rpx;height: 30rpx;border-radius: 50%;margin-top: 5rpx;"></image>
							</view>
							<view class=""> {{items.name}}</view>
						</view>
					</view>
				</block>
			</view>

			<view class="cont_cell" @click="branchShow1 = true">
				<view class="title">抄送人：</view>
				<input type="text" v-model="copy_names" placeholder="请选择" disabled>
			</view>

		</view>

		<view class="bot_btn">
			<view class="reset" @click="reset">重置</view>
			<view class="submit_btn" @click="submiteBtn">立即提交</view>
		</view>

		<u-action-sheet :show="leavaTypeShow" keyName="name" :actions="columns" title="请选择"
			@close="leavaTypeShow = false" @select="leavaType">
		</u-action-sheet>
		<u-action-sheet :show="leavaTypeShow1" keyName="name" :actions="actions4" title="请选择"
			@close="leavaTypeShow1 = false" @select="leavaType1">
		</u-action-sheet>
		<!-- 选择审批流程 -->
		<u-action-sheet :actions="flowPathSheet" @select="flowPathSelect" title="选择审批流程" :show="flowPathShow"
			@close="flowPathShow=false" :closeOnClickOverlay="true" :closeOnClickAction="true">
		</u-action-sheet>

		<!-- 部门选择 -->
		<u-picker :show="branchShow" :defaultIndex='defaultIndex' ref="branchRef" :columns="branchColumns"
			@confirm="branchConfirm" @change="columnCode" :closeOnClickOverlay="true" @close="branchShowclose"
			keyName="name">
		</u-picker>

		<u-picker :show="branchShow1" :defaultIndex='defaultIndex1' ref="branchRef" :columns="branchColumns1"
			@confirm="branchConfirm1" @change="columnCode1" :closeOnClickOverlay="true" @close="branchShowclose1"
			keyName="name">
		</u-picker>
		<!-- 选择时间 -->

		<u-datetime-picker :show="timeShow" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm($event)" @cancel="timeShow = false"
			@close="timeShow = false"></u-datetime-picker>
		<u-datetime-picker :show="timeShow1" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm1($event)" @cancel="timeShow1 = false"
			@close="timeShow1 = false"></u-datetime-picker>


	</view>
</template>

<script>
	import {
		Toast
	} from '../../libs/uniApi'
	import {
		getPersonInfoApi,
		appexpensecate,
		appexpenseflow,
		userdepartment,
		getemployee,
		appexpense,
		projectlist,
		appexpenseview,
		flowusers
	} from '@/api/oa.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	import {
		FILE_URL
	} from '@/api/file.js'
	export default {
		components: {
			lsjUpload
		},
		data() {
			return {
				defaultIndex: [0, 0, 0],
				defaultIndex1: [0, 0, 0],
				timestamp: '',
				personInfo: {},
				company: '',
				listobj: {},
				project: '',
				timeShow: false,
				timeShow1: false,
				branchShow: false,
				flowPathShow: false,
				leavaTypeShow: false,
				leavaTypeShow1: false,
				branchColumns: [],
				branchColumns1: [],
				flowPathSheet: [],
				actions4: [],
				branchShow1: false,
				flowPath: '',
				columns: [],
				check_admin_name: '',
				copy_names: '',
				flowShow: true,
				sprecord: [],

				list: [{
					cate_title: "",
					amount: '',
					remarks: ''
				}],
				fileOption: {},
				files: new Map(),
				fileArray: [],
				dnum: 0
			}
		},
		onLoad(option) {
			this.detail(option.type)
		},
		onShow() {
			this.fileOption = {
					url: FILE_URL,
					name: 'file',
					header: {
						token: this.$store.state.app.token
					}
				},
				// 获取当前时间戳
				this.timestamp = Date.parse(new Date());
			// this.getPersonInfo()
			this.getlist()
			this.getlist1()
			this.getDocumentList()
			this.getDocumentList1()
		},

		computed: {
			httpRequestUrl() {
				return HTTP_REQUEST_URL;
			}
		},
		methods: {
			//选择流程id
			async flowuser(id) {
				let res = await flowusers({
					id: id,
					
			
				})
				if (res.data.flow_data.length > 0) {

					this.flowShow = false
					this.sprecord = res.data.flow_data
				} else {
					this.flowShow = true
				}

			},
			async detail(id) {
				let res = await appexpenseview({
					id: id
				})
				// console.log(res,'111')
				this.listobj.code = res.data.detail.code
				this.listobj.id = res.data.detail.id
				this.list = res.data.detail.list
				this.listobj.expense_time = res.data.detail.expense_time
				this.listobj.income_month = res.data.detail.income_month
				this.project = res.data.detail.ptname
				this.listobj.flow_id = res.data.flows.id
				this.listobj.ptid = res.data.detail.ptid
				this.personInfo.name = res.data.detail.create_user

				this.personInfo.department_name = res.data.detail.department
				this.fileArray = res.data.detail.fileArray.map(function(obj) {
					return {
						name: obj.name,
						filepath: obj.filepath,
						fileext: obj.fileext,
						filesize: obj.filesize
					};
				});
				// console.log(this.fileArray,'11111111111', res.data.detail)

			},
			reset() {
				this.list = [{
						name: "",
						num: ''
					}],
					this.listobj = {}
				this.fileArray = []
				this.copy_names = ''
				this.flowPath = ''
				this.check_admin_name = ''
			},
			async getDocumentList1() {
				let res = await projectlist({
					page: 1,
					limit: 10000,

				})
				this.actions4 = res.data.data.map((step, index) => {
					return {
						name: step.name,
						id: step.id,
					};
				});
				console.log(this.actions4)

			},
			//获取部门
			async getDocumentList() {
				const res = await userdepartment()
				const deArr = res.data
				let codelist = [
					[], //顶级部门
					[], //次级部门
					[] // 负责人
				]

				codelist[0] = res.data.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})

				codelist[1] = res.data[0].children.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})



				let dat = await getemployee({
					did: codelist[1][0].id
				})

				codelist[2] = dat.data.map((item) => {
					return {
						id: item.id,
						name: item.name
					}
				})

				this.$forceUpdate()
				this.$nextTick(() => {
					this.branchColumns = codelist
					this.branchColumns1 = codelist
					this.branchColumns2 = codelist
				})


			},
			//监听人员加载数据
			async columnCode(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.branchColumns, 2, newColumn);

					}

				}

			},

			//监听人员加载数据
			async columnCode1(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns1[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.branchColumns1, 2, newColumn);

					}

				}

			},
			//弹窗显示
			leavaShow(item, i) {
				this.dnum = i
				this.leavaTypeShow = true
			},
			leavaShow1() {

				this.leavaTypeShow1 = true
			},
			branchConfirm(e) {
				console.log('confirm', e, e.value[2].name)
				this.check_admin_name = e.value[2].name

				this.listobj.check_admin_ids = e.value[2].id
				this.branchShow = false
			},
			branchConfirm1(e) {
				console.log('confirm', e, e.value[2].name)
				if (this.listobj.copy_uids) {
					this.listobj.copy_uids += e.value[2].id + ','
				} else {
					this.listobj.copy_uids = e.value[2].id
				}

				this.copy_names += e.value[2].name + ','
				this.branchShow1 = false
			},
			timeConfirm(e, i) {
				this.listobj.expense_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

				this.timeShow = false
			},
			timeConfirm1(e, i) {
				this.listobj.income_month = uni.$u.timeFormat(e.value, 'yyyy-mm')
				this.timeShow1 = false
			},
			async submiteBtn() {
				console.log(this.list)
				let fileIds = [];
				this.fileArray.map((item, i) => {
					fileIds.push(item.id)
				});

				this.listobj.amount = this.list.map(item => item.amount);
				this.listobj.cate_id = this.list.map(item => item.id);
				this.listobj.expense_id = this.list.map(item => item.id);
				this.listobj.remarks = this.list.map(item => item.remarks);
				this.listobj.flow_id = this.flow_id
				if (this.fileArray.length > 0) {
					this.listobj.file_ids = fileIds.join(',');
				}



				const res = await appexpense(this.listobj)
				if (res.code == 0) {
					uni.navigateBack({
						delta: 1
					})
				}
				Toast('提交成功')




			},
			//新增
			addleava() {
				this.list.push({
					name: "",
					num: ''
				})
			},
			deleteleava(item, index) {
				if (this.list.length > 1) {
					this.list.splice(0, 1)
				} else {
					Toast('不能删除')
				}

			},
			//获取个人信息
			async getPersonInfo() {
				const res = await getPersonInfoApi()
				this.personInfo = res.data

			},
			async getlist() {
				const res = await appexpensecate()
				// this.personInfo = res.data
				const reformattedData = res.data.map(item => {
					return {
						name: item.title,
						id: item.id
					};
				});



				this.columns = reformattedData






			},
			async getlist1() {

				const res = await appexpenseflow({})

				this.flowPathSheet = res.data
				console.log('个人信息2', res.data);
			},
			flowPathSelect(value) {
				this.flowPath = value.name
				this.flow_id = value.id
				this.flowuser(value.id)

			},
			/** 类型 */
			leavaType(e) {

				this.list[this.dnum].cate_title = e.name
				this.list[this.dnum].id = e.id
				this.leavaTypeShow = false
			},
			leavaType1(e) {

				this.project = e.name
				this.listobj.ptid = e.id
				this.leavaTypeShow1 = false
			},
			branchShowclose() {
				this.branchShow = false
			},
			branchShowclose1() {
				this.branchShow1 = false
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */
			onuploadEnd(item) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);
				if (item['responseText']) {
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				let arr1 = this.files.get(item.name).responseText

				this.fileArray.push(arr1.data)


				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogre(item) {

				console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			changeFile(files) {
				console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files
				console.log(files.values())
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 指定上传某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			resetUpload(name) {
				this.$refs.lsjUpload.upload(name);
			},

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.leave_request {
		position: relative;
		padding-bottom: 100px;
	}

	.leave_box,
	.flow_path {
		width: 100%;
		padding: 0 28.07rpx;
		background: #fff;
		margin-bottom: 35.09rpx;
		padding-bottom: 28.07rpx;
	}

	.bot_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 87.72rpx;

		>view {
			width: 50%;
			text-align: center;
			line-height: 87.72rpx;
		}

		.reset {
			background-color: #fff;
		}

		.submit_btn {
			color: #fff;
			height: 87.72rpx;
			background: $theme-oa-color;
		}
	}

	.leava_type {
		height: 100rpx;
		border-bottom: 1px solid #999;

		.title {
			font-size: 31.58rpx;
		}
	}

	.cont_cell {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 87.72rpx;
		border-bottom: 1px solid #f7f7f7;

		.title {
			font-size: 31.58rpx;
		}
	}

	// 审批流程
	.audit_process {

		.process_item {
			position: relative;
			height: 100%;
			margin: 17.54rpx 0;
		}

		:last-child {
			.circle {
				&::before {
					display: none;
				}
			}
		}

		.tag {
			font-size: 21.05rpx;
			color: #fff;
			padding: 0 4px;
			margin-left: 10.53rpx;
			background-color: #3c9cff;
			border-radius: 2px;
		}

		.verifier {
			margin: 17.54rpx 0;
		}
	}



	.circle {
		width: 31.58rpx;
		height: 31.58rpx;
		background-color: #fff;
		border: 2px solid #34A853;
		border-radius: 50%;
		margin: 0 5px;
		display: flex;
		flex-direction: column;
		align-items: center;

		&::before {
			content: "";
			display: block;
			position: absolute;
			clear: both;
			width: 1px;
			height: 100%;
			background-color: rgba(204, 204, 204, 0.5);
			margin: 31.58rpx;
		}
	}

	// 附件
	.upload_box {
		padding: 17.54rpx;
		background-color: #F7F7F7;
		border-radius: 4px;

		.title {
			font-size: 28.07rpx;
		}

		.text {
			margin-top: 7.02rpx;
			font-size: 21.05rpx;
			color: #999;
		}
	}

	.file_name {
		width: 526.32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.file {
		padding: 17.54rpx;
		border-radius: 4px;
		border: 1px solid #F2F2F2;
		margin: 17.54rpx 0;

		.file_size {
			margin-top: 7.02rpx;
		}

		.file_size,
		.upload_people {
			font-size: 21.05rpx;
			color: #999;
		}
	}
</style>