bonus-material-app/src/pages/repair/wsMaInfo/index.vue

<template>
	<view class="accept">
		<div class="card">
			<uni-forms label-width="170rpx" :border="true">
				<uni-forms-item label="机具类型：" name="maName" required>
					<select-one style="width: 100%; height: 90rpx" :options="maNameList" placeholder="请选择机具类型"
						@change="onMaNameChange" @clear="onMaNameClear" />
				</uni-forms-item>

				<uni-forms-item label="机具规格：" name="maModel" required>
					<select-one style="width: 100%; height: 90rpx" :options="maModelList" placeholder="请选择机具规格"
						:key="new Date()" @change="onMaModelChange" @clear="onMaModelClear" />
				</uni-forms-item>
				<uni-forms-item label="机具编码：" name="maCode" required>
					<uni-easyinput v-model="maCode" maxlength="30" placeholder="请输入机具编码" />
				</uni-forms-item>
				<uni-forms-item label="出厂厂家：" name="supplier" required>
					<select-one style="width: 100%; height: 90rpx" :options="supplierList" placeholder="请选择出厂厂家"
						:key="new Date()" @change="onSupplierChange" @clear="onSupplierClear" />
				</uni-forms-item>

				<uni-forms-item label="检修员：" name="repairMan" required>
					<uni-easyinput v-model="repairMan" maxlength="30" placeholder="请输入检修员" />
				</uni-forms-item>

				<uni-forms-item label="检验员：" name="checkMan" required>
					<uni-easyinput v-model="checkMan" maxlength="30" placeholder="请输入检验员" />
				</uni-forms-item>

				<uni-forms-item label="联系方式：" name="phone" required>
					<uni-easyinput v-model="phone" maxlength="11" placeholder="请输入联系方式" />
				</uni-forms-item>
			</uni-forms>
		</div>

		<div class="btn">
			<button class="btn-cont" @click="clearForm">清空</button>
			<button class="btn-cont" @click="confirmAdd">确认</button>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		addWsMaInfo,
		getMaTypeData,
		getMaModeData,
		getSupplier
	} from '@/services/wsMaInfo/wsMaInfo.js'
	import SelectOne from '../tree-select/select-one'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const maName = ref('') // ✅ 机具类型
	const maModel = ref('') // 机具规格
	const maCode = ref('') // 机具编码
	const supplier = ref('') // 出厂厂家
	const repairMan = ref('王鹏') // 检修员
	const checkMan = ref('高民') // 检验员
	const phone = ref('0551-63703966') // 联系方式
	const modelId = ref('')
	const maNameList = ref([]) // 机具类型下拉列表
	const maModelList = ref([]) // 机具规格下拉列表
	const supplierList = ref([]) // 机具规格下拉列表
	// 清空表单
	const clearForm = () => {
		maName.value = ''
		maModel.value = ''
		maCode.value = ''
		supplier.value = ''
		repairMan.value = ''
		checkMan.value = ''
		phone.value = ''
	}

	const onMaNameChange = (item) => {
		maName.value = item.label;
		maModel.value = null; // 清空规格值
		getMaModeData(item.id).then(res => {
			if (res.code === 200) {
				maModelList.value = res.data.map(option => {
					return {
						id: option.id,
						label: option.name,
					}
				});
			}
		}).catch(error => {
			console.log(error)
		})
	};

	const onMaModelChange = (item) => {
		modelId.value = item.id;
		maModel.value = item.label;
	}

	const onSupplierChange = (item) => {
		supplier.value = item.label;
	}

	const onMaNameClear = () => {
		maName.value = null;
		maModel.value = null; // 清空规格值
	};
	const onMaModelClear = () => {
		maModel.value = null;
	};
	const onSupplierClear = () => {
		supplier.value = null;
	};
	
	const getSupplierSelect = () => {
		getSupplier().then(res => {
			if (res.code === 200) {
				supplierList.value = res.data.map(option => {
					return {
						id: option.id,
						label: option.name,
					}
				});
			}
		}).catch(error => {
			console.log(error)
		})
	}
	const getMaName = () => {
		getMaTypeData().then(res => {
			if (res.code === 200) {
				maNameList.value = res.data.map(option => {
					return {
						id: option.id,
						label: option.name,
					}
				});
				console.log(maModelList)
			}
		}).catch(error => {
			console.log(error)
		})
	}

	// 提交表单
	const confirmAdd = async () => {
		console.log(maName.value)
		if (!maName.value) {
			return uni.showToast({
				title: '请选择机具类型',
				icon: 'none'
			})
		}
		if (!maModel.value) {
			return uni.showToast({
				title: '请选择机具规格',
				icon: 'none'
			})
		}
		if (!maCode.value) {
			return uni.showToast({
				title: '请输入机具编码',
				icon: 'none'
			})
		}
		if (!supplier.value) {
			return uni.showToast({
				title: '请输入出厂厂家',
				icon: 'none'
			})
		}
		if (!repairMan.value) {
			return uni.showToast({
				title: '请输入检修员',
				icon: 'none'
			})
		}
		if (!checkMan.value) {
			return uni.showToast({
				title: '请输入检验员',
				icon: 'none'
			})
		}
		if (!phone.value) {
			return uni.showToast({
				title: '请输入联系方式',
				icon: 'none'
			})
		}

		const postData = {
			maName: maName.value,
			maModel: maModel.value,
			maCode: maCode.value,
			supplier: supplier.value,
			repairMan: repairMan.value,
			checkMan: checkMan.value,
			phone: phone.value,
			modelId: modelId.value
		}

		try {
			const res = await addWsMaInfo(postData)
			if (res.code === 200) {
				uni.showToast({
					title: '新增成功',
					icon: 'success'
				})
				clearForm()
				uni.navigateBack()
			} else {
				uni.showToast({
					title: res.msg || '新增失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error(error)
			uni.showToast({
				title: '请求失败，请稍后重试',
				icon: 'none'
			})
		}
	}
	onLoad(() => {
		getMaName();
		getSupplierSelect();
	})
</script>


<style lang="scss">
	.accept {
		padding: 24rpx;
		height: 90vh;
		word-break: break-all;
		background-color: #f7f8fa;
		display: flex;
		flex-direction: column;

		// 卡片样式
		.card {
			padding: 32rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			margin-bottom: 24rpx;
			height: auto;

			// 表单样式
			:deep(.uni-forms) {
				.uni-forms-item {
					padding: 24rpx 0;
					margin-bottom: 0;
					border-bottom: 2rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.uni-forms-item__label {
						height: 2.75rem;
						color: #8c8c8c;
					}

					// 下拉选择框样式
					.uni-data-select {
						.uni-select {
							border: 2rpx solid #e8e8e8;
							border-radius: 12rpx;
							height: 88rpx;
							padding: 0 24rpx;
							transition: all 0.3s ease;

							&:focus-within {
								border-color: #3784fb;
								box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
							}

							.uni-select__input-box {
								height: 88rpx;
								line-height: 88rpx;
							}

							.uni-select__input-text {
								font-size: 28rpx;
								color: #262626;
							}
						}
					}

					// 输入框样式
					.uni-easyinput {
						.uni-easyinput__content {
							background-color: #f7f8fa;
							border: 2rpx solid #e8e8e8;
							border-radius: 12rpx;
							height: 88rpx;
							padding: 0 24rpx;
							transition: all 0.3s ease;

							&:focus-within {
								border-color: #3784fb;
								box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
							}

							.uni-easyinput__content-input {
								font-size: 28rpx;
								height: 88rpx;
								line-height: 88rpx;
								color: #262626;
							}
						}
					}
				}
			}
		}

		// 底部按钮
		.btn {
			margin-top: auto;
			padding: 32rpx;
			// background: #fff;
			// box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
			display: flex;
			justify-content: space-between;
			gap: 24rpx;

			.btn-cont {
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
				color: #fff;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
					box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
				}

				// 清空按钮样式
				&:first-child {
					background: #fff;
					color: #3784fb;
					border: 2rpx solid #3784fb;
					box-shadow: none;

					&:active {
						background: #f7f8fa;
					}
				}
			}
		}
	}
</style>