mailbox-uniapp/pages/work/components/approval.vue

<template>
	<view class="wrapper" v-if="show">
		<view class="header text-center">
			<fui-icon name="arrowleft" color="#fff" :size="50" @tap="show = false"></fui-icon>
			<text>审批意见</text>
		</view>
		<view class="body">
			<uni-forms :label-width="90" :modelValue="formData" :rules="rules" ref="formRef">
				<view class="cell">
					<uni-forms-item label="上级领导" name="leaderEmpNo" >
						<uni-data-picker :localdata="leaders" placeholder="请选择上级领导" :border="false" :map="{text:'name', value: 'empNo'}" v-model="formData.leaderEmpNo"/>
					</uni-forms-item>
				</view>
				<view class="cell mt-6">
					<uni-forms-item label="审批意见" name="approvalComment" >
						<textarea v-model="formData.approvalComment" placeholder="请输入审批意见"></textarea>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="footer flex end">
			<view class="flex gap">
				<m-button size="large" @tap="show = false">取消</m-button>
				<m-button size="large" type="primary" @tap="submit">审批通过</m-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, inject, watch } from "vue";
	import { getLeaderList } from '@/api/user'
	
	const formData = reactive({})
	const formRef = ref()
	const rules = {
		leaderEmpNo: {
			rules:[
				{
					required: true,
					errorMessage: '请选择上级领导',
				}
			]
		},
		approvalComment: {
			rules:[
				{
					required: true,
					errorMessage: '请输入审批意见',
				}
			]
		}
	}
	const show = ref(false)
	const leaders = ref([])
	const mail = inject("mail");
	watch(() => mail.value.flowKey, (val) => {
		getLeaderList(val === 'second_approval' ? 'deputy' : 'leader').then(data => {
			leaders.value = data
		})
	})
	
	const props = defineProps({
		modelValue: {
			type: Object
		}
	})
	const emit = defineEmits(['update:modelValue', 'submit'])
	
	function submit() {
		formRef.value.validate().then(res => {
			emit('update:modelValue', formData)
			emit('submit', 'approvedSubmit')
			show.value = false
		}).catch(() => {
			uni.showToast({
			    title: '请检查输入项',
				icon: 'none'
			})
		})
	}
	
	function open() {
		show.value = true
	}
	
	defineExpose({
		open
	})
</script>

<style lang="scss">
	.wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F1F1F1;
		z-index: 3;
		.header {
			background-color: var(--primary-color);
			color: #fff;
			height: 46px;
			line-height: 46px;
			position: relative;
			.fui-icon {
				position: absolute;
				left: 10px;
			}
		}
		.body {
			height: calc(100vh - 96px);
		}
		.footer {
			background-color: #fff;
			padding: 9px 12px;
		}
		
	}
</style>