aiot-app/pages/warehouse/inventoryAllocation/preview.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="调拨预览" @clickLeft="back">
			<!--右菜单-->
			<template slot="right">
				<text class="roughDraft" @click="handleSaveToRoughDraft">保存为草稿</text>
			</template>
		</uni-nav-bar>
		<view class="view-container">
			<DetailView :baseInfo="baseInfo.conventionalStockTransferReq" :list="baseInfo.infoReqList" type="view" />
		</view>
		<view class="footer">
			<view class="verify-box">
				<u-input
					class="dept"
					:value="baseInfo.conventionalStockTransferReq.deptName"
					disableColor="#ffffff"
					placeholder="请选择审批部门"
					@click.native="$refs.treePicker._show()"
					disabled
					border="surround">
					<u-icon v-show="baseInfo.conventionalStockTransferReq.deptName" slot="suffix" name="close-circle-fill" @click.native.stop="verifyDeptConfirm([])"></u-icon>
				</u-input>
				<picker @change="e => handlePicker(e, userList, 'auditorId', 'auditorName')" :value="0" :disabled="!baseInfo.conventionalStockTransferReq.deptName" :range="userList" range-key="name">
					<u-input @click.native="handlMind" class="name" :value="baseInfo.conventionalStockTransferReq.auditorName" disableColor="#ffffff" placeholder="请选择审批人" disabled border="surround">
						<u-icon slot="suffix" name="close-circle-fill" v-show="baseInfo.conventionalStockTransferReq.auditorName" @click.native.stop="clearAuditor"></u-icon>
					</u-input>
				</picker>
			</view>
			<u-button type="primary" @click="handleSave">提交审核</u-button>
		</view>

		<ba-tree-picker ref="treePicker" :multiple="false" @select-change="verifyDeptConfirm" key="dept" title="选择部门" :localdata="deptList" valueKey="code" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import DetailView from './components/DetailView.vue'
	import { post, postJ, get, getJ } from '@/utils/api.js'
	export default {
		components: { DetailView, baTreePicker },
		data() {
			return {
				activeName: 1,
				baseInfo: {
					conventionalStockTransferReq: {
						deptCode: '',
						deptName: '',
						auditorId: '',
						auditorName: ''
					}
				},

				assetsList: [],
				deptList: [],
				userList: [],
				loading: false
			}
		},
		onLoad({ id }) {
			if (id) {
				const storeInfo = uni.getStorageSync('inventoryAllocation_preview')
				const info = storeInfo[id] || {}
				this.baseInfo = info.params
				this.assetsList = info.assetsList
			}
			this.getDept()
		},
		methods: {
			handlMind() {
				if (this.baseInfo.conventionalStockTransferReq.deptName) {
					return
				}

				uni.showToast({
					title: '请先选择部门',
					icon: 'none'
				})
			},
			async handleSaveToRoughDraft() {
				// delete this.baseInfo.conventionalStockTransferReq.createTime;
				// const params = uni.$u.deepClone(this.baseInfo);
				// params.infoReqList = [
				//   ...params.infoReqList,
				//   ...this.assetsList.map((item) => {
				//     item.detailReqList = item.curDetailReqList;
				//     return item;
				//   }),
				// ];
				// const res = await postJ(
				//   this.apiUrl + `/conventionalStockTransfer/saveDraft`,
				//   params,
				//   true
				// );
				// if (res?.success) {
				//   uni.showToast({
				//     title: "保存成功！",
				//     mask: true,
				//   });
				//   setTimeout(() => {
				//     uni.navigateBack({
				//       delta: 2,
				//     });
				//   }, 1500);
				// }
			},
			async handleSave() {
				// delete this.baseInfo.conventionalStockTransferReq.createTime
				// const res = await postJ(this.apiUrl + `/conventionalStockTransfer/add`, this.baseInfo, true, false).catch(err => {
				// 	console.log(err)
				// 	if (err.code === 'B00000') {
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: err.message,
				// 			showCancel: false,
				// 			success: function (res) {}
				// 		})
				// 	}
				// })
				// if (res?.success) {
				// 	uni.showToast({
				// 		title: '提交成功！',
				// 		mask: true
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateBack({
				// 			delta: 2
				// 		})
				// 	}, 1500)
				// }
			},
			// 审核人保存
			handlePicker(e, list, idKey, nameKey) {
				if (idKey) {
					this.$set(this.baseInfo.conventionalStockTransferReq, idKey, list[e.detail.value].id)
				}
				if (nameKey) {
					this.$set(this.baseInfo.conventionalStockTransferReq, nameKey, list[e.detail.value].name)
				}
				console.log(this.baseInfo.conventionalStockTransferReq)
			},
			// 部门确认
			verifyDeptConfirm(data, name) {
				this.baseInfo.conventionalStockTransferReq.deptCode = data[0]
				this.baseInfo.conventionalStockTransferReq.deptName = name
				this.$set(this.baseInfo.conventionalStockTransferReq, 'auditorId', '')
				this.$set(this.baseInfo.conventionalStockTransferReq, 'auditorName', '')
				if (data[0]) {
					this.getUser(data[0])
				} else {
					this.userList = []
					this.$refs.treePicker._reTreeList()
				}
			},
			clearAuditor() {
				this.$set(this.baseInfo.conventionalStockTransferReq, 'auditorId', '')
				this.$set(this.baseInfo.conventionalStockTransferReq, 'auditorName', '')
			},
			// 获取部门
			getDept() {
				// get(this.apiUrl + '/main/org/dept/effectiveTree').then(res => {
				// 	if (res?.success) {
				// 		this.deptList = res.data
				// 	}
				// })
			},

			// 获取人员
			getUser(deptCode) {
				// post(this.apiUrl + "/main/user/list", {
				//   deptCode,
				//   page: 1,
				//   size: 9999,
				// }).then((res) => {
				//   if (res?.success) {
				//     this.userList = res.data.items.map((item) => {
				//       item.name = item.trueName;
				//       item.id = item.userId;
				//       return item;
				//     });
				//   }
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.roughDraft {
		color: rgba(75, 121, 2, 1);
		white-space: nowrap;
	}
	.tabs {
		position: fixed;
		width: 100vw;
		background-color: rgba(242, 242, 242, 0.792156862745098);
		padding-top: 20rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;

		.tab-item {
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				background: linear-gradient(180deg, rgba(75, 121, 2, 1) 0%, rgba(255, 255, 255, 1) 12%);
			}
		}
	}
	.view-container {
		padding-bottom: 200rpx;
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0;
		background-color: #fff;
		.verify-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
			/deep/.u-input {
				border: 1rpx solid #ccc;
			}
			.dept.u-input {
				margin-right: 30rpx;
			}

			uni-picker {
				width: 40%;
			}
		}
	}
</style>