client_LemonBeans/subPackages/shutdown/index.vue

<template>
	<view class="shutdown-page">
		<navigation title="停机维护"></navigation>
		<view class="form-box">
			<u--form labelPosition="left" labelWidth="160rpx" :model="formInfo" :rules="rules" ref="form">
				<u-form-item label="设备号" prop="code" borderBottom @click="showEquipment = true">
					<u--input v-model="formInfo.code" disabled disabledColor="#ffffff" placeholder="请选择设备号"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="停机原因" prop="reason" borderBottom @click="showReason = true">
					<u--input v-model="formInfo.reason" disabled disabledColor="#ffffff" placeholder="请选择停机原因"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="更换模具" prop="mould" borderBottom @click="showMould = true">
					<u--input v-model="formInfo.mould" disabled disabledColor="#ffffff" placeholder="请选择更换模具"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="生产产品" prop="product" borderBottom @click="showProduct = true">
					<u--input v-model="formInfo.product" disabled disabledColor="#ffffff" placeholder="请选择生产产品"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="生产数量" prop="num">
					<u--input v-model="formInfo.num" border="none"></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showEquipment" :actions="equipmentActions" title="请选择设备号"
				@close="showEquipment = false" @select="equipmentSelect">
			</u-action-sheet>
			<u-action-sheet :show="showReason" :actions="reasonActions" title="请选择停机原因" @close="showReason = false"
				@select="reasonSelect">
			</u-action-sheet>
			<u-action-sheet :show="showMould" :actions="mouldActions" title="请选择更换模具" @close="showMould = false"
				@select="mouldSelect">
			</u-action-sheet>
			<u-action-sheet :show="showProduct" :actions="productActions" title="请选择生产产品" @close="showProduct = false"
				@select="productSelect">
			</u-action-sheet>
		</view>
		<view class="submit">
			<u-button @click="onSubmit" type="primary" shape="circle" size="large">提 交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showEquipment: false,
				showReason: false,
				showMould: false,
				showProduct: false,
				formInfo: {
					code: '',
					reason: '',
					mould: '',
					product: '',
					num: '',
				},
				equipmentActions: [{
						name: '设备1',
					},
					{
						name: '设备2',
					},
				],
				reasonActions: [{
						name: '原因1',
					},
					{
						name: '原因2',
					},
				],
				mouldActions: [{
						name: '模具1',
					},
					{
						name: '模具2',
					},
				],
				productActions: [{
						name: '产品1',
					},
					{
						name: '产品2',
					},
				],
				rules: {
					code: {
						type: 'string',
						required: true,
						message: '请选择设备号',
						trigger: ['blur', 'change']
					},
					reason: {
						type: 'string',
						required: true,
						message: '请选择停机原因',
						trigger: ['blur', 'change']
					},
					mould: {
						type: 'string',
						required: true,
						message: '请选择更换模具',
						trigger: ['blur', 'change']
					},
					product: {
						type: 'string',
						required: true,
						message: '请选择生产产品',
						trigger: ['blur', 'change']
					},
					num: {
						type: 'string',
						required: true,
						message: '请输入生产数量',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.form.setRules(this.rules)
		},
		onLoad() {

		},
		methods: {
			onSubmit() {
				this.$refs.form.validate().then(res => {
					console.log('校验通过')
				}).catch(errors => {
					console.log('校验失败')
				})
			},
			equipmentSelect(e) {
				this.formInfo.code = e.name
			},
			reasonSelect(e) {
				this.formInfo.reason = e.name
			},
			mouldSelect(e) {
				this.formInfo.mould = e.name
			},
			productSelect(e) {
				this.formInfo.product = e.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shutdown-page {
		.form-box {
			margin: 24rpx;
			padding: 0 24rpx;
			background: $uni-bg-color;
			border-radius: 12rpx;
		}

		.submit {
			margin: 34rpx;
		}
	}
</style>