合格转隔离页面组件

4 weeks ago · d5b0ae0c5c
2 changed files with 347 additions and 23 deletions
--- a/src/pages/inventoryMove/coms/okToHoldRecordScan.vue
+++ b/src/pages/inventoryMove/coms/okToHoldRecordScan.vue
@ -0,0 +1,327 @@
+<!-- 合格转隔离扫码组件 -->
+<template>
+	<u-popup
+		v-model="show"
+		:mode="mode"
+		:mask='mask'
+		:length='length'
+		:zoom='zoom'
+		:safe-area-inset-bottom='safeAreaInsetBottom'
+		:mask-close-able='maskCloseAble'
+		:custom-style='customStyle'
+		:border-radius='borderBadius'
+		:z-index='zIndex'
+		:closeable='closeable'
+		:close-icon='closeIcon'
+		:close-icon-pos='closeIconPos'
+		:close-icon-color='closeIconColor'
+		:close-icon-size='closeIconSize'
+		:width='width'
+		:height='height'
+		:negative-top='negativeTop'
+		:mask-custom-style='maskCustomStyle'
+		:duration='duration'
+		:blur='blur'
+		@open='open'
+		@close='close'
+	>
+		<view>
+			<view class="title">
+				<view class="title-txt">
+						需求
+				</view>
+				<u-icon name="close" color="#4f4f4f" size="28"></u-icon>
+			</view>
+			<u-form 
+				class="form"
+				:model="allData" 
+				ref="formRef"
+				:rules="rules"
+				:error-type="errorType"
+				:border-bottom="borderBottom"
+				:label-position="labelPosition"
+				:label-width="labelWidth"
+				:label-style="labelStyle"
+				:label-align="labelAlign"
+				@setRules='setRules'
+				@resetFields='resetFields'
+				@validate='validate'
+			>
+				<u-form-item
+					:label="item.label"
+					:prop="item.field"
+					v-for="(item,index) in formField"
+					:key='index'
+					:border-bottom="item.form.formItemBorderBottom == true || item.form.formItemBorderBottom == false ? item.form.formItemBorderBottom : true"
+					:label-position="item.form.formItemLabelPosition || 'left'"
+					:label-width="item.form.formItemLabelWidth || ''"
+					:label-style="item.form.formItemLabelStyle || {}"
+					:label-align="item.form.formItemLabelAlign || ''"
+					:right-icon="item.form.rightIcon || ''"
+					:left-icon="item.form.leftIcon || ''"
+					:left-icon-style="item.form.leftIconStyle || ''"
+					:right-icon-style="item.form.righIconStyle || ''"
+					:required="item.form.required || false"
+				>
+				<view :class="item.form.border ? 'border' : formItemBorder ? 'border' : ''" class="item">
+					
+					<u-input 
+						v-if="item.form.type == 'text'||item.form.type == 'password'||item.form.type == 'textarea'||item.form.type == 'number'"
+						v-model="allData[item.field]" 
+						:type='item.form.type'
+						:clearable='item.form.clearable == true || item.form.clearable == false ? item.form.clearable : true'
+						:input-align="item.form.inputAlign || 'left'"
+						:placeholder="item.form.placeholder || `请输入${[item.label]}`"
+						:disabled='item.form.disabled || false'
+						:maxlength='item.form.maxlength || 140'
+						:placeholder-style='item.form.placeholderStyle || "color: #c0c4cc;"'
+						:confirm-type='item.form.confirmType ||"done"'
+						:custom-style='item.form.customStyle'
+						:focus='item.form.focus || false'
+						:fixed='item.form.fixed || false'
+						:password-icon='item.form.passwordIcon == true || item.form.passwordIcon == false ? item.form.passwordIcon : true'
+						:border-color='item.form.borderColor ? item.form.borderColor : formItemBorderColor ? formItemBorderColor : "#dcdfe6"'
+						:auto-height='item.form.autoHeight == true || item.form.autoHeight == false ? item.form.autoHeight : true'
+						:height='item.form.height'
+						:cursor-spacing='item.form.cursorSpacing'
+						:selection-start='item.form.selectionStart'
+						:selection-end='item.form.selectionEnd'
+						:show-confirmbar='item.form.showConfirmbar'
+						:adjust-position='item.form.adjustPosition'
+					/>
+					<!-- <u-input v-model="allData[item.field]" v-if="item.form.type == 'Select'"/> -->
+					<view class="select" v-if="item.form.type == 'select'">
+						<u-input
+							v-model="allData[item.field]" 
+							type='text'
+							:clearable='item.form.clearable == true || item.form.clearable == false ? item.form.clearable : true'
+							:input-align="item.form.inputAlign || 'left'"
+							:placeholder="item.form.placeholder || `请输入${[item.label]}`"
+							:disabled='item.form.disabled || false'
+							:maxlength='item.form.maxlength || 140'
+							:placeholder-style='item.form.placeholderStyle || "color: #c0c4cc;"'
+							:confirm-type='item.form.confirmType ||"done"'
+							:custom-style='item.form.customStyle'
+							:focus='item.form.focus || false'
+							:fixed='item.form.fixed || false'
+							:password-icon='item.form.passwordIcon == true || item.form.passwordIcon == false ? item.form.passwordIcon : true'
+							:border='false'
+							:border-color='item.form.borderColor ? item.form.borderColor : formItemBorderColor ? formItemBorderColor : "#dcdfe6"'
+							:auto-height='item.form.autoHeight == true || item.form.autoHeight == false ? item.form.autoHeight : true'
+							:height='item.form.height'
+							:cursor-spacing='item.form.cursorSpacing'
+							:selection-start='item.form.selectionStart'
+							:selection-end='item.form.selectionEnd'
+							:show-confirmbar='item.form.showConfirmbar'
+							:adjust-position='item.form.adjustPosition'
+						/>
+						<u-icon name="arrow-down-fill" color="#878787" size="28"></u-icon>
+					</view>
+				</view>
+				</u-form-item>
+			</u-form>
+	</view>
+	</u-popup>
+</template>
+<script>
+	export default {
+		components: {
+		
+		},
+		props: {
+			// 弹窗参数
+			mode:{
+				type: String,
+				default: 'bottom',
+			},
+			mask:{
+				type: Boolean,
+				default: true
+			},
+			length:{
+				type: String,
+				default: 'auto'
+			},
+			zoom:{
+				type: Boolean,
+				default: true
+			},
+			safeAreaInsetBottom:{
+				type: Boolean,
+				default: false
+			},
+			maskCloseAble:{
+				type: Boolean,
+				default: true
+			},
+			customStyle:{
+				type: Number,
+				default: ()=>{}
+			},
+			borderBadius:{
+				type: Number,
+				default: 0
+			},	
+			zIndex:{
+				type: Number,
+				default: 10075
+			},
+			closeable:{
+				type: Boolean,
+				default: false
+			},
+			closeIcon:{
+				type: String,
+				default: 'close'
+			},
+			closeIconPos:{
+				type: String,
+				default: 'top-right'
+			},
+			closeIconColor:{
+				type: String,
+				default: '#909399'
+			},
+			closeIconSize:{
+				type: Number,
+				default: 30
+			},
+			width:{
+				type: String,
+				default: ''
+			},
+			height:{
+				type: String,
+				default: ''
+			},
+			negativeTop:{
+				type: Number,
+				default: 0
+			},
+			maskCustomStyle:{
+				type: Object,
+				default:()=>{}
+			},
+			duration:{
+				type: Number,
+				default: 250
+			},
+			blur:{
+				type: Number,
+				default: 0
+			},
+			
+			// 表单参数
+			//  表单字段
+			formField:{
+				type: Array,
+				default: ()=>[]
+			},
+			// 数据
+			allData:{
+				
+			},
+			rules:{
+				type: Object,
+				default: ()=>{}
+			},
+			errorType:{
+				type: Array,
+				default:()=>['message']
+			},
+			borderBottom:{
+				type: Boolean,
+				default: true
+			},
+			labelPosition:{
+				type: String,
+				default: 'left'
+			},
+			labelWidth:{
+				type: Number,
+				default: 90
+			},
+			labelStyle:{
+				type: Object,
+				default: ()=>{}
+			},
+			labelAlign:{
+				type: String,
+				default: 'left'
+			},
+			formItemBorder :{
+				type: Boolean,
+				default: false
+			},
+			formItemBorderColor :{
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				show:true,
+			
+			}
+		},
+
+		mounted() {
+		// this.$refs.form1.setRules(this.rules);
+		},
+		methods: {
+			// 打开弹窗
+			open(){
+				
+			},
+			// 关闭弹窗
+			close(){
+				
+			},
+			// 设置校验规则
+			setRules(){
+				
+			},
+			// 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+			resetFields(){
+				
+			},
+			// 对整个表单进行校验的方法
+			validate(){
+				
+			},
+		}
+	}
+</script>
+
+<style>
+	.form{
+		padding: 0px 20rpx;
+		font-size: 24rpx;
+	}
+	.item{
+		flex:1;padding: 0px 20rpx;
+	}
+	.title{
+		padding:20rpx;
+		display: flex;
+		border-bottom:1px solid rgba(230, 230, 230, 1);
+		.title-txt{
+			flex:1;
+			font-weight: bold;
+			font-size: 32rpx;
+		}
+		
+	}
+	.select{
+		display: flex;
+	}
+	.border{
+		border:1px  solid rgba(230, 230, 230, 1)
+	}
+	::v-deep .u-input__right-icon__clear{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #a7a7a7;
+	}
+</style>
--- a/src/pages/inventoryMove/record/okToHoldRecord.vue
+++ b/src/pages/inventoryMove/record/okToHoldRecord.vue
@ -1,59 +1,56 @@
 <template>
 	<view class="page-wraper">
-		<!-- <comMoveRecord :myTitle="title" businessTypeCode='OkToHold' > </comMoveRecord> -->
+		<okToHoldRecordScan :formField='formField' :allData='data' :labelWidth='140' :formItemBorder='true'></okToHoldRecordScan>
 	</view>
 </template>

 <script>
-	// import comMoveRecord from '@/pages/inventoryMove/coms/comMoveRecord.vue'
+	import okToHoldRecordScan from '@/pages/inventoryMove/coms/okToHoldRecordScan.vue'
+	// import {fromLocationField} from '@/api/data.js'

 	export default {
 		components: {
-			comMoveRecord
+			okToHoldRecordScan
 		},
 		data() {
 			return {
-				formHeader: [{
+				formField: [{
 					label: '来源库位',
 					field: 'fromLocationCode',
 					form:{
-						component:'Input',
-						componentProps: {
-							disabled: true
-						}
+						type:'text',
 					}
 				},{
 					label: '零件',
 					field: 'itemCode',
 					form:{
-						component:'Input',
-						componentProps: {
-							disabled: true
-						}
+						type:'select',
+						dictType:[{
+							
+						}]
 					}
 				},{
 					label: '批次',
 					field: 'batch',
 					form:{
-						component:'Input',
-						componentProps: {
-							disabled: true
-						}
+						type:'select',
 					}
 				},{
 					label: '数量',
-					field: 'batch',
+					field: 'qty',
 					form:{
-						component:'Input',
-						componentProps: {
-							disabled: true
+						type:'select',
 					}
+				}],
+				data:{
+					fromLocationCode:'12122',
+					itemCode:'233',
+					batch:'111',
+					qty:22,
 				}
-				}]
 			}
 		},
 		onLoad(option) {
-
 		},
 		methods: {}
 	}