eam-uniapp/src/pages/spotCheckOrder/addForm.vue

<template>
	<!-- 添加设备报修 -->
	<view class="add-form-container">
		<u-form :model="form" ref="formRef" label-width="160rpx">
			<u-form-item label="点检描述" prop="describes" required>
				<u-input v-model="form.describes" placeholder="请输入点检描述" />
			</u-form-item>
			<u-form-item :label="`${type=='DEVICE'?'设备' : '模具'}编码`" prop="deviceNumber" required>
				<u-input v-model="form.deviceNumber" :placeholder="`请输入${type=='DEVICE'?'设备' : '模具'}编码`" @blur="blur"
					@confirm='blur()' />
				<view class="right-button" @click="chickRightButton">
					扫描
				</view>
			</u-form-item>
			<u-form-item :label="`${type=='DEVICE'?'设备' : '模具'}名称`" prop="deviceName" required class="disabled">
				<u-input v-model="form.deviceName" :placeholder="`请输入${type=='DEVICE'?'设备' : '模具'}名称`" disabled />
			</u-form-item>
			<u-form-item label="点检人" prop="name" required class="disabled">
				<u-input v-model=" store.name" placeholder="请输入点检人" disabled />
			</u-form-item>
			<u-form-item label="班次" prop="classes" required>
				<view class="select" @click="openSingleColumn('classes',form.classes,maintenanceShift)">
					<view class="input" v-if='form.classes'>
						{{form.classesName}}
					</view>
					<view class="placeholder" v-else>
						{{`请选择班次`}}
					</view>
					<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
				</view>
			</u-form-item>
		</u-form>
		<view class="list">
			<!-- <view class="title">
				<span></span>备件
			</view> -->
			<view class="item " v-for="(item,index) in subList" :key="index">
				<view class="item-box">
					<view class="spare-title">
						<view class="title-txt">
							{{item.name}}
						</view>
					</view>
					<u-row gutter="16">
						<u-col :span="12">
							<view class="dec">
								<view class="">
									设备部位名称:
								</view>
								<view>{{item.equipmentParts}}</view>
							</view>
							<view class="dec">
								<!-- <view style="margin-right: 20rpx;">是否符合:</view><u-switch v-model="item.isConform1"></u-switch> -->
								<u-radio-group v-model="item.isConform" @change="radioGroupChange">
									<!-- <u-radio 
													@change="radioChange" 
													v-for="(item, index) in list" :key="index" 
													:name="item.name"
													:disabled="item.disabled"
												>
													{{item.name}}
												</u-radio> -->
									<u-radio name="TRUE">符合</u-radio>
									<u-radio name="FALSE">不符合</u-radio>
								</u-radio-group>

							</view>
							<view class="dec">
							    <view class="">
							        <span v-if="item.numberNeedSwitch" class="required">*</span>
							        巡检点检记录:
							    </view>
							    <u-input 
									v-model="item.records" 
									:placeholder="'请输入巡检点检记录'" 
									:class="{'error': item.numberNeedSwitch && !item.records}" 
								  />
							</view>
							<!-- <view class="dec">
							    <view style="margin-right: 20rpx;">是否符合:</view>
							    <input type="radio" v-model="item.isConform1" value="true"> 是
							    <input type="radio" v-model="item.isConform1" value="false"> 否
							</view> -->
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<button class="reset" @click="reset">重置</button>
				<button class="sure" @click="submit" :loading='loading' :disabled='loading'>确定</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue'
			:list="singleColumnList" @confirm="chooseSingleColumn" @cancle='singleColumnShow = false'></u-select>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	import * as deviceApi from "@/api/device"
	import * as moldApi from "@/api/mold"
	import * as spotCheckOrderApi from "@/api/spotCheckOrder"
	import * as dictApi from "@/api/dict"
	import { useCountStore } from '@/store'

	const { proxy } = getCurrentInstance()
	// 获取自定义的store
	const store = useCountStore()

	const loading = ref(false)
	const type = ref('')
	const list = ref([{
		name: 'apple',
		disabled: false
	},
	{
		name: 'banner',
		disabled: false
	},
	{
		name: 'orange',
		disabled: false
	}])
	const form = ref({
		describes: "",
		deviceNumber: '',
		deviceName: '',
		maintenances: '',
		classes: '',
		classesName: ''
	})
	const singleColumnShow = ref(false)
	const singleColumnDefaultValue = ref([])
	const singleColumnList = ref([])
	const field = ref('')
	const maintenanceShift = ref([])
	const subList = ref([])
	// 扫描设备条码
	function chickRightButton(field) {
		uni.scanCode({
			success: function (res) {
				form.value.deviceNumber = res.result
				getDetailsByNumber()
				getSubList()
			}
		});
	}
	function blur() {
		if (form.value.deviceNumber) {
			getDetailsByNumber()
			getSubList()
		}
	}
	// 根据设备/模具号查询信息
	function getDetailsByNumber() {
		const data = {
			number: form.value.deviceNumber,
			flag: 2
		}
		if (type.value == 'MOLD') {
			moldApi.getMoldDetailsByNumber(data).then((res) => {
				if (res.data) {
					form.value.deviceName = res.data.name
				} else {
					proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
				}
			}).catch(() => { })
		} else {
			deviceApi.getDeviceDetailsByNumber(data).then((res) => {
				if (res.data) {
					form.value.deviceName = res.data.name
				} else {
					proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
				}
			}).catch(() => { })
		}

	}
	// 根据设备获取二级列表
	function getSubList() {
		const data = {
			number: form.value.deviceNumber
		}
		deviceApi.getSubList(data).then((res) => {
			if (res.data) {
				subList.value = res.data
				subList.value.forEach(item => {
					item.isConform = 'TRUE'
					item.records = ''
				})
			} else {
				proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
			}
		}).catch(() => { })
	}
	//提交
	function submit() {
	    // 校验
	    if (!form.value.describes) {
	        proxy.$modal.showToast('请输入点检描述');
	        return;
	    }
	    if (!form.value.deviceNumber) {
	        proxy.$modal.showToast(`请输入${type.value == 'DEVICE' ? '设备' : '模具'}编码`);
	        return;
	    }
	    if (!form.value.classes) {
	        proxy.$modal.showToast('请选择班次');
	        return;
	    }
	    if (subList.value.length == 0) {
	        proxy.$modal.showToast('该设备无检修项目');
	        return;
	    }
	
	    // 校验 subList 中的巡检点检记录
	    let hasError = false;
	    subList.value.forEach(item => {
	        if (item.numberNeedSwitch && !item.records) {
	            hasError = true;
	            item.error = true;  // 设置错误标记
	        } else {
	            item.error = false; // 清除错误标记
	        }
	    });
	
	    if (hasError) {
	        proxy.$modal.showToast('请填写所有必填的巡检点检记录');
	        return;
	    }
	
	    const data = {
	        describes: form.value.describes,
	        deviceNumber: form.value.deviceNumber,
	        maintenances: form.value.maintenances,
	        classes: form.value.classes,
	        subList: subList.value,
	        type: type.value
	    };
	
	    proxy.$modal.confirm('是否添加点检工单').then(() => {
	        proxy.$modal.loading('加载中');
	        loading.value = true;
	        spotCheckOrderApi.spotCheckOrderCreate(data, type.value).then((res) => {
	            proxy.$modal.closeLoading();
	            if (res.data) {
	                proxy.$modal.showToast('添加成功');
	                setTimeout(() => {
	                    proxy.$tab.navigateBack();
	                    loading.value = false;
	                }, 1500);
	            } else {
	                if (res.msg) {
	                    proxy.$modal.showToast(res.msg);
	                } else {
	                    proxy.$modal.showToast('添加失败');
	                }
	                loading.value = false;
	            }
	        }).catch(() => {
	            proxy.$modal.closeLoading();
	            loading.value = false;
	        });
	    });
	}
	// 重置
	function reset() {
		form.value = {
			describes: "",
			deviceNumber: '',
			deviceName: '',
			maintenances: '',
			classes: ''
		}
	}

	// 单列模式
	function openSingleColumn(fieldName, val, list) {
		singleColumnList.value = list
		field.value = fieldName
		if (val) {
			singleColumnDefaultValue.value = [list.findIndex(item => item.value == val)]
		} else {
			singleColumnDefaultValue.value = []
		}
		singleColumnShow.value = true
	}
	// 单列模式点击确定之后
	function chooseSingleColumn(e) {
		form.value[field.value] = e[0].value
		if (field.value == 'classes') {
			form.value.classesName = e[0].label
		}
		singleColumnShow.value = false
	}
	onLoad(async (option) => {
		if (option.type) type.value = option.type;
		maintenanceShift.value = await dictApi.getDict('maintenance_shift')
		form.value.maintenances = uni.getStorageSync('user').nickname
	})

	function radioGroupChange(e) {
		console.log(e);
	}
</script>

<style lang="scss" scoped>
.add-form-container {
    min-height: calc(100vh - 140rpx);
    background: white;
    padding: 0px 0rpx 140rpx;
}
.u-form-item {
    padding: 20rpx 30rpx;
}
.disabled {
    background: #f5f5f5;
}
.list {
    padding: 30rpx 30rpx;
    .item {
        display: flex;
        margin-bottom: 20rpx;
        .item-box {
            background: #F5F5F5;
            border-radius: 12rpx;
            flex: 1;
            width: 0rpx;
        }
        .spare-title {
            padding: 20rpx 30rpx;
            border-bottom: 1px solid #e4e4e4;
            .title-txt {
                color: #409eff;
                font-size: 30rpx;
                font-weight: bold;
            }
        }
        .dec {
            color: #9c9c9c;
            padding: 20rpx 30rpx 20rpx;
            display: flex;
            align-items: center;
            .required {
                color: red;
                margin-right: 5rpx;
            }
            .error {
                border: 1px solid red !important;
            }
        }
    }
}
.select {
    display: flex;
    align-items: center;
    height: 72rpx;
    width: 100%;
    .input {
        flex: 1;
        font-size: 28rpx;
        color: #000000;
    }
    .placeholder {
        flex: 1;
        font-size: 28rpx;
        color: rgb(192, 196, 204);
    }
}
.footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
.btns {
    display: flex;
    button {
        flex: 1;
    }
    .sure {
        background: #409eff;
        color: white;
        border-radius: 0px;
        &::after {
            border: 1px solid #409eff;
            border-radius: 0px;
        }
    }
    .reset {
        background: #F5F5F5;
        border-radius: 0px;
        &::after {
            border-radius: 0px;
        }
    }
}
.right-button {
    background: #409eff;
    color: white;
    padding: 0rpx 30rpx;
    border-radius: 16rpx;
    text-align: center;
    font-size: 28rpx;
}
</style>