mailbox-uniapp/pages/work/templates/DeptSelectForm.vue

<template>
	<uni-forms :label-width="90" :modelValue="formData" :rules="rules" ref="formRef">
		<view class="cell mt-6">
			<uni-forms-item label="主责单位" name="mainDeptId" >
				<uni-data-picker :localdata="depts" placeholder="请选择办理单位" :border="false" :map="{text:'name', value: 'id'}" v-model="formData.mainDeptId" />
			</uni-forms-item>
		</view>
		<view class="cell mt-6">
			<uni-forms-item label="主办层级" name="mainDeptLevel">
				<uni-data-select :localdata="mainDeptLevels" placeholder="请选择主办层级" v-model="formData.mainDeptLevel" />
			</uni-forms-item>
		</view>
		<view class="cell">
			<view class="tips">
				<view>如主办层级 为 市局主办，则在选择被举报/投诉对象时，可以在全局范围内选择 单位和民警</view>
				<view>如主办层级 为 二级机构主办时，则在选择被举报/投诉对象时， 只能选择二级机构范围内的单位和民警</view>
				<view>如主办层级 为 三级机构主办时，则在选择被举报/投诉对象时， 只能选择该三级机构和民警</view>
			</view>
		</view>
		<view class="cell mt-6">
			<uni-forms-item label="次责单位1">
				<uni-data-picker :localdata="depts" placeholder="请选择办理单位" :border="false" :map="{text:'name', value: 'id'}" v-model="formData.secondDeptId1" />
			</uni-forms-item>
		</view>
		<view class="cell mt-6">
			<uni-forms-item label="次责单位2">
				<uni-data-picker :localdata="depts" placeholder="请选择办理单位" :border="false" :map="{text:'name', value: 'id'}" v-model="formData.secondDeptId2"/>
			</uni-forms-item>
		</view>
		<view class="cell mt-6">
			<uni-forms-item label="下发意见">
				<textarea v-model="formData.comments" placeholder="请输入下发意见"></textarea>
			</uni-forms-item>
		</view>
	</uni-forms>
</template>
 
<script setup>
	import { reactive, ref, defineProps, defineExpose, inject, watch } from 'vue'
	import { listSecond, listThree } from "@/api/dept";
	
	const mail = inject("mail");
	const formData = reactive({
		mainDeptLevel: mail.value.mainDeptLevel
	})
	const formRef = ref()
	const depts = ref([])
	
	watch(() => mail.value.id + mail.value.flowKey, () => {
		getDepts()
		if (mail.value.flowKey === "second_distribute") {
		    rules.value = {
				mainDeptId: {
					rules:[
						{
							required: true,
							errorMessage: '请选择办理单位',
						}
					]
				},
				mainDeptLevel: {
					rules:[
						{
							required: true,
							errorMessage: '请选择主办层级',
						}
					]
				}
			}
		}
	})
	
	function getDepts() {
		if (mail.value.flowKey === 'first_distribute') {
			listSecond().then(data => {
				depts.value = data
			})
		} else {
			listThree().then(data => {
				depts.value = data
			})
		}
	}
	
	getDepts()
	
	
	const mainDeptLevels = [
		{
			text: '市局主办',
			value: 1
		},
		{
			text: '二级机构主办',
			value: 2
		},{
			text: '三级机构主办',
			value: 3
		}
	]
	
	const rules = ref(
		{
			mainDeptId: {
				rules:[
					{
						required: true,
						errorMessage: '请选择办理单位',
					}
				]
			}
		}
	)
	
	const props = defineProps({
		modelValue: {
			type: Object
		}
	})
	const emit = defineEmits(['update:modelValue'])
	
	function validate() {
		return new Promise((resolve, reject) => {
			formRef.value.validate().then(res => {
				console.log(res)
				emit('update:modelValue', formData)
				resolve()
			}).catch(() => {
				uni.showToast({
				    title: '请检查输入项',
					icon: 'none'
				})
				reject()
			})
		})
	}
	
	defineExpose({
	    validate,
	});
</script>

<style lang="scss" scoped>
	.tips {
		color: #999;
	}
</style>