park-shanghai-app/components/emEntryform.vue

<template>
	<view class="form-container">
		<!-- 工单类型 -->
		<view class="form-item" @click="openWorkOrderTypePicker">
			<text class="form-label">工单类型：</text>
			<view class="form-value">
				<text>{{ formData.workOrderTypeText || '' }}</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>

		<!-- 倒伏相关选项 -->
		<view class="form-item" v-if="showFallOptions" @click="openFallAffectPicker">
			<text class="form-label">倒伏状态：</text>
			<view class="form-value">
				<text>{{ formData.fallAffectText || '' }}</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>

		<!-- 影响类型 -->
		<view class="form-item" style="justify-content: flex-start">
			<text class="form-label">影响类型：</text>
			<view class="form-value">
				<uni-data-checkbox v-model="formData.workOrderLevel" multiple :localdata="workOrderLevels" />
			</view>
		</view>

		<!-- 工单描述 -->
		<view class="form-item">
			<text class="form-label">工单描述：</text>
			<view class="form-value">
				<textarea v-model="formData.description" placeholder="请输入工单描述信息" class="textarea" />
			</view>
		</view>

		<!-- 工单图片 -->
		<view class="form-item">
			<text class="form-label">工单图片：</text>
			<view class="form-value">
				<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" />
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<button type="primary" @click="handleSubmit('pending')">确认提交</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getDicts } from '@/api/system/dict/data';

// 获取工单类型字典
const fetchDicts = async () => {
	const response = await getDicts('gdlx', 'xdsqm', 'yxlx');
	options.value = response.data.map((item) => ({
		value: item.dictValue,
		text: item.dictLabel
	}));
};

// 表单数据
const formData = ref({
	workOrderType: '',
	workOrderTypeText: '',
	fallAffect: '',
	fallAffectText: '',
	workOrderLevel: [],
	description: '',
	images: []
});

// 图片上传相关
const imageValue = ref([]);

// 控制显示倒伏选项
const showFallOptions = ref(false);

// 选项数据
const workOrderTypes = [
	{ value: 'fall', text: '行道树/乔木' },
	{ value: 'tilt', text: '花箱设施' },
	{ value: 'broken', text: '建筑物' },
	{ value: 'others', text: '其他' }
];

const fallAffectOptions = [
	{ value: 'wire', text: '倒伏' },
	{ value: 'vehicle', text: '倾斜' },
	{ value: 'wall', text: '断枝' },
	{ value: 'eaves', text: '其他' }
];

const workOrderLevels = [
	{ value: 'wire', text: '线缆' },
	{ value: 'road', text: '道路' },
	{ value: 'vehicle', text: '车辆' },
	{ value: 'building', text: '建筑物' },
	{ value: 'others', text: '其他' }
];

// 打开工单类型选择器
const openWorkOrderTypePicker = () => {
	uni.showActionSheet({
		itemList: workOrderTypes.map((item) => item.text),
		success: (res) => {
			const selected = workOrderTypes[res.tapIndex];
			formData.value.workOrderType = selected.value;
			formData.value.workOrderTypeText = selected.text;
			showFallOptions.value = selected.value === 'fall';
		}
	});
};

// 打开倒伏状态选择器
const openFallAffectPicker = () => {
	uni.showActionSheet({
		itemList: fallAffectOptions.map((item) => item.text),
		success: (res) => {
			const selected = fallAffectOptions[res.tapIndex];
			formData.value.fallAffect = selected.value;
			formData.value.fallAffectText = selected.text;
		}
	});
};

// 图片上传相关方法
const select = (e) => {
	console.log('选择文件:', e);
};
const progress = (e) => {
	console.log('上传进度:', e);
};
const success = (e) => {
	console.log('上传成功:', e);
	formData.value.images.push(e.tempFilePaths[0]);
};
const fail = (e) => {
	console.log('上传失败:', e);
};

// 按钮处理方法
const handleBack = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退单吗？',
		success: (res) => {
			if (res.confirm) {
				console.log('退单操作');
			}
		}
	});
};

const handleSubmit = (type) => {
	// 表单验证
	if (!formData.value.workOrderType) {
		uni.showToast({ title: '请选择工单类型', icon: 'none' });
		return;
	}

	if (showFallOptions.value && !formData.value.fallAffect) {
		uni.showToast({ title: '请选择倒伏状态', icon: 'none' });
		return;
	}

	if (formData.value.workOrderLevel.length === 0) {
		uni.showToast({ title: '请选择影响类型', icon: 'none' });
		return;
	}

	if (!formData.value.description) {
		uni.showToast({ title: '请输入工单描述', icon: 'none' });
		return;
	}

	console.log('提交数据:', {
		...formData.value,
		submitType: type
	});

	uni.showToast({ title: '提交成功', icon: 'success' });
};
</script>

<style scoped>
.form-container {
	overflow: auto;
}

.form-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1px solid #eee;
}

.form-label {
	width: 155rpx;
	font-size: 28rpx;
	color: #767d9c;
}

.form-value {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	color: #333;
}

.arrow {
	color: #999;
	font-size: 30rpx;
}

.checkbox-item {
	margin-right: 30rpx;
	margin-bottom: 20rpx;
	display: inline-flex;
	align-items: center;
}

.checkbox {
	margin-right: 10rpx;
	transform: scale(0.9);
}

.textarea {
	width: 100%;
	min-height: 200rpx;
	padding-left: 5rpx;
	border: 1px solid #eee;
	border-radius: 8rpx;
}

.bottom-btn {
	width: 100%;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.bottom-btn button {
	flex: 1;
	margin: 0 10rpx;
	font-size: 28rpx;
}

button[type='default'] {
	background-color: #f8f8f8;
	color: #333;
}
</style>