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

<template>
	<view>
		<view class="cell">
			<view>
				<text class="info">接访群众、核查办理以及协办民警相关操作请在PC 端处理。</text>
			</view>
		</view>
		<view class="cell mt-6">
			<uni-forms :label-width="96" :modelValue="formData" :rules="rules" ref="formRef" label-align="right">
				<uni-forms-item label="联系民警" name="contactPolice" class="mb-6" >
					<uni-data-select :localdata="policeOptions" placeholder="请选择联系民警" v-model="formData.contactPoliceEmpNo" @change="handleChangePolice" />
				</uni-forms-item>
				<uni-forms-item label="职务" class="flex v-center mb-6">
					<text>{{ formData.contactPolice?.postTitle }}</text>
				</uni-forms-item>
				<uni-forms-item label="是否取得联系" name="contactFlag" class="mb-6">
					<uni-data-select :localdata="[{text: '是', value: true}, {text: '否', value: false}]" placeholder="请选择是否取得联系" v-model="formData.contactFlag"/>
				</uni-forms-item>
				<uni-forms-item label="联系时间" name="contactTime" class="mb-6">
					<uni-datetime-picker type="datetime" @change="handleTimeChange" :border="false" placeholder="请选择联系时间" />
				</uni-forms-item>
				<uni-forms-item label="联系时长" class="flex v-center mb-6">
					<view>
						<text>{{ formData.contactDuration <= 0 ? '-1' : formatTimeText(formData.contactDuration) }}</text>
						<text class="ml-8 danger" >{{ formData.contactDuration > 600 ? '已超时' : '' }}</text>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref, inject, watch } from 'vue'
	import { listByCurrentDept } from '@/api/user'
	import { formatTimeText } from '@/common/util'
	
	const mail = inject("mail");
	const formRef = ref()
	const formData = reactive({})
	const rules = {
		contactPolice: {
			rules:[
				{
					required: true,
					errorMessage: '请选择联系民警',
				}
			]
		},
		contactFlag: {
			rules:[
				{
					required: true,
					errorMessage: '请选择是否取得联系',
				}
			]
		},
		contactTime: {
			rules:[
				{
					required: true,
					errorMessage: '请选择联系时间',
				},
				{
					validateFunction: (rule, value, data, callback) => {
						if (new Date(value).getTime() < new Date(mail.value.flowLimitedLastHandlerTime).getTime()) {
							return callback('联系时间不能小于签收时间')
						}
						callback()
					}
				}
			]
		},
	}
	let polices = []
	const policeOptions = ref([])
	listByCurrentDept().then(data => {
		polices = data;
		policeOptions.value = data.map(item => {
			return {
				text: item.name,
				value: item.empNo
			}
		})
	})
	
	function handleChangePolice(empNo) {
		formData.contactPolice = polices.find(obj => obj.empNo === empNo)
	}
	
	function handleTimeChange(val) {
		if (!val) {
			delete formData.contactDuration
			delete formData.contactTime
			return
		}
		if (val.length === 11) {
			val += '00:00:00'
		}
		formData.contactTime = val
		formData.contactDuration = (new Date(val) - new Date(mail.value.flowLimitedLastHandlerTime)) / 1000
	}
	
	defineProps({
		modelValue: {
			type: Object
		}
	})
	const emit = defineEmits(['update:modelValue'])
	
	function validate() {
		return new Promise((resolve, reject) => {
			formRef.value.validate().then(res => {
				emit('update:modelValue', formData)
				resolve()
			}).catch(() => {
				uni.showToast({
				    title: '请检查输入项',
					icon: 'none'
				})
				reject()
			})
		})
	}
	
	defineExpose({
	    validate,
	});
</script>

<style>
</style>