zl-opd-view/src/pages/base/WellParamEdit.vue

<template>
	<div class="edit-page">
		<el-form :model="formModel" ref="formcomp"  label-position="left" label-width="auto" :inline="false" :rules="rules" :inline-message="false">
		    <el-row :gutter="50">
				<el-col :sm="24" :md="12">
					<el-form-item label="参数名" prop="paramName">
					  <el-input v-model="formModel.paramName" autocomplete="off" placeholder="请输入参数名"  clearable/>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="参数编码" prop="paramCode" >
									<el-select v-model="formModel.paramCode"  placeholder="选择参数编码"  style="width:100%" @change="changeParamHandle">
										<el-option
									       v-for="item in paramCodeOpts"
									       :key="item.paramCode"
									       :label="item.paramName+'【'+item.paramCode+'】'"
									       :value="item.paramCode"
									     />
									</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="显示单位" prop="displayUnit">
						<el-select v-model="formModel.displayUnit"  placeholder="请选择显示单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="显示格式" >
					  <el-input v-model="formModel.displayFormat" autocomplete="off" placeholder="请输入显示格式"  clearable/>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="入库单位" prop="insertUnit">
						<el-select v-model="formModel.insertUnit"  placeholder="请选择入库单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="采集单位" prop="gatherUnit">
						<el-select v-model="formModel.gatherUnit"  placeholder="请选择采集单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="工程最大">
					  <el-input-number v-model="formModel.maxVal" autocomplete="off" placeholder="选填" :controls="false"   style="width:100%"/>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数A">
					  <el-input-number v-model="formModel.calibrateA" autocomplete="off" placeholder="请输入标定系数A"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="工程最小">
					  <el-input-number v-model="formModel.minVal" autocomplete="off" placeholder="选填" :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数B">
					  <el-input-number v-model="formModel.calibrateB" autocomplete="off" placeholder="请输入标定系数B"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="参考值">
					  <el-input-number v-model="formModel.referData" autocomplete="off" placeholder="选填" :controls="false"   style="width:100%"/>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数C">
					  <el-input-number v-model="formModel.calibrateC" autocomplete="off" placeholder="请输入标定系数C"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="异常值调节模式" >
					  <el-select v-model="formModel.adjustMode"  placeholder="选填"  style="width:100%">
						<el-option label="固定为参考值" value="usFixedVal"></el-option>
						<el-option label="为0取前或停井" value="zeroUsPreElsStop"></el-option>
						<el-option label="为0取前或连续3次" value="zeroUsPreElsSerial3"></el-option>
						<el-option label="为0取前或参考插值" value="zeroUsPreOrRandRef"></el-option>
					  </el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="显示序号">
						<el-input-number v-model="formModel.displayNum" :min="1" :max="10000" style="width:100%"/>
					</el-form-item>
				</el-col>
				
				
				
			</el-row>
			  
		    <el-row :gutter="50" v-show="showParam2">
				<el-col :sm="24" :md="24">
					<el-divider content-position="left"><label style="font-weight: bold;">位移参数配置(多值参数才需要)</label></el-divider>
				</el-col>
				<el-col :sm="24" :md="12">
					<el-form-item label="显示单位">
						<el-select v-model="formModel.displayUnit2"  placeholder="请选择显示单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="显示格式" >
					  <el-input v-model="formModel.displayFormat2" autocomplete="off" placeholder="请输入显示格式"  clearable/>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="入库单位">
						<el-select v-model="formModel.insertUnit2"  placeholder="请选择入库单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="采集单位">
						<el-select v-model="formModel.gatherUnit2"  placeholder="请选择采集单位"  style="width:100%">
							<el-option
						       v-for="item in unitOpts"
						       :key="item.unitSymbol"
						       :label="item.unitSymbol"
						       :value="item.unitSymbol"
						     />
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数A">
					  <el-input-number v-model="formModel.calibrateA2" autocomplete="off" placeholder="请输入标定系数A"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数B">
					  <el-input-number v-model="formModel.calibrateB2" autocomplete="off" placeholder="请输入标定系数B"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="标定系数C">
					  <el-input-number v-model="formModel.calibrateC2" autocomplete="off" placeholder="请输入标定系数C"   :controls="false"   style="width:100%" />
					</el-form-item>
				</el-col>
					
				<el-col :sm="24" :md="12">
					<el-form-item label="序列名">
					  <el-input v-model="formModel.serialName" autocomplete="off" placeholder="请输入序列名"   clearable />
					</el-form-item>
				</el-col>
				
				<el-col :sm="24" :md="12">
					<el-form-item label="序列名(位移)">
					  <el-input v-model="formModel.serialName2" autocomplete="off" placeholder="请输入序列名"   clearable />
					</el-form-item>
				</el-col>
				
			</el-row>  
			 
			 
			 
			  
			 
			 
			 
			  
			
		</el-form>
	</div>
</template>

<script setup>
	import {reactive,ref,toRaw,onMounted} from 'vue'
	import wellParamAPI from "../../api/wellParam.js"
	import paramMgrAPI from "../../api/paramMgr.js"
	import {ElMessageBox,ElMessage} from 'element-plus'
	
	const formModel = reactive({
	  paramId:null,
	  wellId:null,
	  paramName: null,
	  paramCode:null,
	  displayUnit:null,
	  displayFormat:null,
	  insertUnit:null,
	  gatherUnit:null,
	  calibrateA:null,
	  calibrateB:null,
	  calibrateC:null,
	  displayNum:1,
	  displayUnit2:null,
	  displayFormat2:null,
	  insertUnit2:null,
	  gatherUnit2:null,
	  calibrateA2:null,
	  calibrateB2:null,
	  calibrateC2:null,
	  serialName:null,
	  serialName2:null,
	  maxVal:null,
	  minVal:null,
	  referData:null,
	  adjustMode:null
	})
	
	const showParam2=ref(false)
	
	const props=defineProps({
		record:Object
	})
	
	const formcomp = ref(null);
	
	const rules =reactive({
		paramName:[
			{required:true,message:'参数名还未填写',trigger:'blur'},
			{ min: 1, max: 20, message: '参数名长度应该为1-20', trigger: 'blur' }
			],
		paramCode:[
			{required:true,message:'参数编码还未选择',trigger:'blur'},
			
			],
		displayUnit:[
			{required:true,message:'显示单位还未填写',trigger:'blur'}
			],
		insertUnit:[
			{required:true,message:'入库单位还未填写',trigger:'blur'}
			],
		gatherUnit:[
			{required:true,message:'采集单位还未填写',trigger:'blur'}
			],
	})
	
	onMounted(async ()=>{
		try{
			await initForm()
			if(props.record){
				let {paramId,wellId,paramCode,paramName,displayUnit,displayFormat,insertUnit,gatherUnit,calibrateA,calibrateB,calibrateC,displayNum,maxVal,minVal,referData,adjustMode}=props.record
				Object.assign(formModel,{paramId,wellId,paramCode,paramName,displayUnit,displayFormat,insertUnit,gatherUnit,calibrateA,calibrateB,calibrateC,displayNum,maxVal,minVal,referData,adjustMode})
				
				let {displayUnit2,insertUnit2,gatherUnit2,displayFormat2,calibrateA2,calibrateB2,calibrateC2,serialName,serialName2}=props.record
				Object.assign(formModel,{displayUnit2,insertUnit2,gatherUnit2,displayFormat2,calibrateA2,calibrateB2,calibrateC2,serialName,serialName2})
				
				changeParamHandle(paramCode)
			}
		}
		catch(err){
			console.log('init form error')
		}
		
	})
	
	const changeParamHandle=(selVal)=>{
		showParam2.value=selVal.indexOf('diagram_')>=0
	}
	
	
	let initFormDone=false
	
	const paramCodeOpts=ref([])
	
	const unitOpts=ref([])
	
	const initForm=async ()=>{
		try{
			let resp=await paramMgrAPI.loadAll()
			if(resp.code==0){
				paramCodeOpts.value=resp.data
			}
			
			resp=await wellParamAPI.loadUnitOpts()
			if(resp.code==0){
				unitOpts.value=resp.data
			}
			
			
			initFormDone=true
			
			return Promise.resolve('ok')
		}
		catch(err){
			return Promise.reject('err')
		}
	}
	
	
	const submitForm=async ()=>{
		let validateRst=false
		try{
			validateRst = await formcomp.value.validate()
		}
		catch(err){
			ElMessage.error("请按要求填写数据");
			console.log(err)
			return Promise.reject('invalidate')
		}
		
		if(validateRst){  //验证通过，准备提交数据
		  try{
			   let resp =await wellParamAPI.save(toRaw(formModel))
			   if(resp.code!=0){
			   	ElMessage.error(resp.msg)
			   	return Promise.reject(resp.msg)
			   }
			   ElMessage.success('操作成功')
			   return Promise.resolve('ok')
			}
			catch (e) {
				ElMessage.error(e||'操作失败')
				return Promise.reject('操作失败')
			}
		}
		
		
		
	}
	
	defineExpose({
		submitForm
	})
</script>

<style scoped>
	.el-col{
		height:60px;
	}
	
</style>