增加油管数据、油层数据、抽油杆数据、井斜数据管理模块

src/api/oilPipe.js

@@ -0,0 +1,32 @@
+import request from '../utils/request';
+
+const api={}
+
+
+api.save = (jsonData)=>{
+	return request({
+	    url: '/base/pipe/oil/save',
+	    method: 'post',
+		data:  jsonData,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+}
+
+api.del = (id)=>{
+	return request({
+	    url: '/base/pipe/oil/delete',
+	    method: 'post',
+		data:  {pipeId:id}
+	});
+}
+
+api.loadPipeType = ()=>{
+	return request({
+	    url: '/code/options/OilPipe/pipeType',
+	    method: 'get'
+	});
+}
+
+export  default api

src/api/oilRod.js

@@ -0,0 +1,32 @@
+import request from '../utils/request';
+
+const api={}
+
+
+api.save = (jsonData)=>{
+	return request({
+	    url: '/base/rod/oil/save',
+	    method: 'post',
+		data:  jsonData,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+}
+
+api.del = (id)=>{
+	return request({
+	    url: '/base/rod/oil/delete',
+	    method: 'post',
+		data:  {rodId:id}
+	});
+}
+
+api.loadRodType = ()=>{
+	return request({
+	    url: '/code/options/OilRod/rodType',
+	    method: 'get'
+	});
+}
+
+export  default api

src/api/wellDeviation.js

@@ -0,0 +1,25 @@
+import request from '../utils/request';
+
+const api={}
+
+
+api.save = (jsonData)=>{
+	return request({
+	    url: '/base/deviation/save',
+	    method: 'post',
+		data:  jsonData,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+}
+
+api.del = (id)=>{
+	return request({
+	    url: '/base/deviation/delete',
+	    method: 'post',
+		data:  {recId:id}
+	});
+}
+
+export  default api

src/api/wellStratum.js

@@ -0,0 +1,27 @@
+import request from '../utils/request';
+
+const api={}
+
+
+api.save = (jsonData)=>{
+	return request({
+	    url: '/base/stratum/save',
+	    method: 'post',
+		data:  jsonData,
+		headers:{
+			'Content-Type':'application/json'
+		}
+	});
+}
+
+api.del = (id)=>{
+	return request({
+	    url: '/base/stratum/delete',
+	    method: 'post',
+		data:  {stratumId:id}
+	});
+}
+
+
+
+export  default api

src/pages/base/OilCasingPipe.vue

@@ -27,32 +27,32 @@
 				 
 			  </template>
 			  <template #tabColumns={indexGenerate}>
-				  <el-table-column prop="depthDiff" label="位置号"  width="110" align="center">
+				  <el-table-column prop="posNum" label="位置号"  width="110" align="center">
 					 <template #default="scope">
 					  	<el-input-number v-model="scope.row.posNum" :controls="false" :precision="0" @change="inputChangeHandle(scope.row)"/>
 					  </template>	
 				  </el-table-column>
-				  <el-table-column prop="flowPressDiff" label="内径(mm)"  width="110" align="center">
+				  <el-table-column prop="innerDiam" label="内径(mm)"  width="110" align="center">
 					<template #default="scope">
 						<el-input-number v-model="scope.row.innerDiam" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
 					</template>	
 				  </el-table-column>
-				  <el-table-column prop="liquidYield" label="顶部深度(m)"  width="110" align="center">
+				  <el-table-column prop="topDepth" label="顶部深度(m)"  width="110" align="center">
 					  <template #default="scope">
 					  	<el-input-number v-model="scope.row.topDepth" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
 					  </template>	
 				  </el-table-column>
-				  <el-table-column prop="liquidYield" label="底部深度(m)"  width="110" align="center">
+				  <el-table-column prop="btmDepth" label="底部深度(m)"  width="110" align="center">
 				  		<template #default="scope">
 				  			<el-input-number v-model="scope.row.btmDepth" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
 				  		</template>			  	
 				  </el-table-column>
-				  <el-table-column prop="oilYield"  label="套管钢级" width="110" align="center">
+				  <el-table-column prop="steelGrade"  label="套管钢级" width="110" align="center">
 					  <template #default="scope">
 					  	<el-input v-model="scope.row.steelGrade" @change="inputChangeHandle(scope.row)"/>
 					  </template>
 				  </el-table-column>
-				  <el-table-column prop="waterYield"  label="线性重量(kg/m)" width="140" align="center">
+				  <el-table-column prop="linearWeight"  label="线性重量(kg/m)" width="140" align="center">
 					  <template #default="scope">
 					  	<el-input-number v-model="scope.row.linearWeight" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
 					  </template>
@@ -102,7 +102,6 @@
 	}
 	
 	const inputChangeHandle=(row)=>{
-		console.log(row)
 		let record=toRaw(row)
 		record.isUpdated=true
 	}

src/pages/base/OilPipe.vue

@@ -0,0 +1,232 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			<el-form-item label="井名">
+				<div style="width:140px;">{{queryForm.wellName}}</div>
+			</el-form-item>
+			
+			
+			
+			  
+			<el-form-item style="float:right;">
+				<el-button type="primary"  @click="queryHandle">检索</el-button>
+			</el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next"
+			url="/base/pipe/oil/query"
+			:pageSize="50"
+			:autoLoad="false"
+			>
+			  <template #toolGroup>
+				<el-button type="primary" icon="plus" @click="addNewRow">新增</el-button>
+				<el-button type="success" icon="select" @click="save">保存</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column prop="posNum" label="位置号"  width="110" align="center">
+					 <template #default="scope">
+					  	<el-input-number v-model="scope.row.posNum" :controls="false" :precision="0" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				  <el-table-column prop="pipeType" label="类型"  width="160" align="center">
+				  	<template #default="scope">
+						<el-select v-model="scope.row.pipeType">
+							<el-option v-for="item in pipeTypeOpts" :label="item.codeName" :value="item.codeName"/>
+						</el-select>
+				  	</template>					
+				  </el-table-column>
+				  <el-table-column prop="innerDiam" label="内径(mm)"  width="110" align="center">
+					<template #default="scope">
+						<el-input-number v-model="scope.row.innerDiam" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					</template>	
+				  </el-table-column>
+				  <el-table-column prop="outerDiam" label="外径(mm)"  width="110" align="center">
+				  	<template #default="scope">
+				  		<el-input-number v-model="scope.row.outerDiam" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  	</template>					
+				  </el-table-column>
+				  <el-table-column prop="sumLength" label="累计长度(m)"  width="110" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.sumLength" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				  <el-table-column prop="pipeGrade" label="级别"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input v-model="scope.row.pipeGrade" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				  <el-table-column prop="elasticConstant" label="弹性常数"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input-number v-model="scope.row.elasticConstant" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				  <el-table-column prop="elasticModulus" label="弹性模量"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input-number v-model="scope.row.elasticModulus" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				 
+				
+				  <el-table-column prop="linearWeight"  label="线性重量(kg/m)" width="140" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.linearWeight" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					  </template>
+				  </el-table-column>
+				  
+				  <el-table-column prop="oper" label="操作" width="60" fixed="right" align="center">
+				  		<template #default="scope">
+				  			<el-icon :size="26" @click="delRow(scope.row,scope.$index)" :title="scope.row.delIf?'取消删除':'删除'">
+								<CircleCloseFilled/>
+							</el-icon>
+				  		    
+				  		</template>			
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick} from 'vue'
+	import CrudTable from '../../components/crudtable/CrudTable.vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	
+	import api from "../../api/oilPipe.js"
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+	  wellId: null,
+	  wellName:'未选择井'
+	})
+	
+	const pipeTypeOpts=ref(null)
+	
+	const queryHandle=()=>{
+		setTimeout(()=>{crudTable.value.query(queryForm)},100)
+	}
+	
+	const loadOpts=()=>{
+		api.loadPipeType().then(resp=>{
+			if(resp.code==0 && resp.data){
+				pipeTypeOpts.value=resp.data.pipeType
+			}
+			else{
+				console.log(resp.msg)
+			}
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	loadOpts()
+	
+	const isReady=()=>{
+		if(!queryForm.wellId){
+			ElMessage.error('还未选择井')
+			return false
+		}
+		return true
+	}
+	
+	const inputChangeHandle=(row)=>{
+		let record=toRaw(row)
+		record.isUpdated=true
+	}
+	
+	const addNewRow=()=>{
+		if(!isReady()){
+			return
+		}
+		let [posNum,pipeType,innerDiam,outerDiam,sumLength,pipeGrade,elasticConstant,elasticModulus,linearWeight]=[null,null,null,null,null,null,null,null,null]
+		let defRow={wellId:queryForm.wellId,posNum,pipeType,innerDiam,outerDiam,sumLength,pipeGrade,elasticConstant,elasticModulus,linearWeight}
+		crudTable.value.addRow(defRow)
+	}
+	
+	const delRow=(record,index)=>{
+		if(record.pipeId){
+			ElMessageBox.confirm(
+				'确定要删除该记录吗?',
+				'操作确认',
+				{
+					confirmButtonText:'确定',
+					cancelButtonText:'取消',
+					type: 'warning'
+				}
+			).then(()=>{
+				api.del(record.pipeId).then(resp=>{
+					if(resp.code!=0){
+						ElMessage.error(resp.msg || '删除失败')
+						return
+					}
+					ElMessage.success('删除成功')
+					queryHandle()
+				}).catch(err=>{
+					ElMessage.error('删除出错')
+					console.log(err)
+				})
+			}).catch(()=>{
+				console.log('cancel del')
+			})
+		}
+		else{ //新加的行直接删除
+			let ds=crudTable.value.getTableDataSet()
+			ds.value.splice(index,1)
+		}
+		
+	}
+	
+	const save=()=>{
+		let datas=toRaw(crudTable.value.getTableDataSet().value)
+		if(datas==null || datas.length==0){
+			ElMessage.error('无数据可保存')
+			return
+		}
+		datas=datas.filter(item=>item.isUpdated || item.pipeId==null)
+		if(datas==null || datas.length==0){
+			ElMessage.error('数据无更改无需保存')
+			return
+		}
+		api.save(datas).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '保存失败')
+				return
+			}
+			ElMessage.success('保存成功')
+			queryHandle()
+		}).catch(err=>{
+			ElMessage.error('保存出错')
+			console.log(err)
+		})
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+		if(newNode!=null && newNode.nodeType=='well'){
+			queryForm.wellId=newNode.id 
+			queryForm.wellName=newNode.name 
+			queryHandle()
+		}
+		
+	},{ immediate: true })
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.el-input-number{
+		width:80px;
+	}
+	.el-icon{
+		cursor: pointer;
+	}
+</style>

src/pages/base/OilRod.vue

@@ -0,0 +1,232 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			<el-form-item label="井名">
+				<div style="width:140px;">{{queryForm.wellName}}</div>
+			</el-form-item>
+			
+			
+			
+			  
+			<el-form-item style="float:right;">
+				<el-button type="primary"  @click="queryHandle">检索</el-button>
+			</el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next"
+			url="/base/rod/oil/query"
+			:pageSize="50"
+			:autoLoad="false"
+			>
+			  <template #toolGroup>
+				<el-button type="primary" icon="plus" @click="addNewRow">新增</el-button>
+				<el-button type="success" icon="select" @click="save">保存</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column prop="posNum" label="位置号"  width="110" align="center">
+					 <template #default="scope">
+					  	<el-input-number v-model="scope.row.posNum" :controls="false" :precision="0" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				  <el-table-column prop="rodType" label="类型"  width="160" align="center">
+				  	<template #default="scope">
+						<el-select v-model="scope.row.rodType">
+							<el-option v-for="item in rodTypeOpts" :label="item.codeName" :value="item.codeName"/>
+						</el-select>
+				  	</template>					
+				  </el-table-column>
+				  <el-table-column prop="innerDiam" label="内径(mm)"  width="110" align="center">
+					<template #default="scope">
+						<el-input-number v-model="scope.row.innerDiam" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					</template>	
+				  </el-table-column>
+				  <el-table-column prop="outerDiam" label="外径(mm)"  width="110" align="center">
+				  	<template #default="scope">
+				  		<el-input-number v-model="scope.row.outerDiam" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  	</template>					
+				  </el-table-column>
+				  <el-table-column prop="sumLength" label="累计长度(m)"  width="110" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.sumLength" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				  <el-table-column prop="rodGrade" label="级别"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input v-model="scope.row.rodGrade" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				  <el-table-column prop="elasticConstant" label="弹性常数"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input-number v-model="scope.row.elasticConstant" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				  <el-table-column prop="elasticModulus" label="弹性模量"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input-number v-model="scope.row.elasticModulus" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				 
+				
+				  <el-table-column prop="linearWeight"  label="线性重量(kg/m)" width="140" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.linearWeight" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					  </template>
+				  </el-table-column>
+				  
+				  <el-table-column prop="oper" label="操作" width="60" fixed="right" align="center">
+				  		<template #default="scope">
+				  			<el-icon :size="26" @click="delRow(scope.row,scope.$index)" :title="scope.row.delIf?'取消删除':'删除'">
+								<CircleCloseFilled/>
+							</el-icon>
+				  		    
+				  		</template>			
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick} from 'vue'
+	import CrudTable from '../../components/crudtable/CrudTable.vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	
+	import api from "../../api/oilRod.js"
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+	  wellId: null,
+	  wellName:'未选择井'
+	})
+	
+	const rodTypeOpts=ref(null)
+	
+	const queryHandle=()=>{
+		setTimeout(()=>{crudTable.value.query(queryForm)},100)
+	}
+	
+	const loadOpts=()=>{
+		api.loadRodType().then(resp=>{
+			if(resp.code==0 && resp.data){
+				rodTypeOpts.value=resp.data.rodType
+			}
+			else{
+				console.log(resp.msg)
+			}
+		}).catch(err=>{
+			console.log(err)
+		})
+	}
+	
+	loadOpts()
+	
+	const isReady=()=>{
+		if(!queryForm.wellId){
+			ElMessage.error('还未选择井')
+			return false
+		}
+		return true
+	}
+	
+	const inputChangeHandle=(row)=>{
+		let record=toRaw(row)
+		record.isUpdated=true
+	}
+	
+	const addNewRow=()=>{
+		if(!isReady()){
+			return
+		}
+		let [posNum,rodType,innerDiam,outerDiam,sumLength,rodGrade,elasticConstant,elasticModulus,linearWeight]=[null,null,null,null,null,null,null,null,null]
+		let defRow={wellId:queryForm.wellId,posNum,rodType,innerDiam,outerDiam,sumLength,rodGrade,elasticConstant,elasticModulus,linearWeight}
+		crudTable.value.addRow(defRow)
+	}
+	
+	const delRow=(record,index)=>{
+		if(record.rodId){
+			ElMessageBox.confirm(
+				'确定要删除该记录吗?',
+				'操作确认',
+				{
+					confirmButtonText:'确定',
+					cancelButtonText:'取消',
+					type: 'warning'
+				}
+			).then(()=>{
+				api.del(record.rodId).then(resp=>{
+					if(resp.code!=0){
+						ElMessage.error(resp.msg || '删除失败')
+						return
+					}
+					ElMessage.success('删除成功')
+					queryHandle()
+				}).catch(err=>{
+					ElMessage.error('删除出错')
+					console.log(err)
+				})
+			}).catch(()=>{
+				console.log('cancel del')
+			})
+		}
+		else{ //新加的行直接删除
+			let ds=crudTable.value.getTableDataSet()
+			ds.value.splice(index,1)
+		}
+		
+	}
+	
+	const save=()=>{
+		let datas=toRaw(crudTable.value.getTableDataSet().value)
+		if(datas==null || datas.length==0){
+			ElMessage.error('无数据可保存')
+			return
+		}
+		datas=datas.filter(item=>item.isUpdated || item.rodId==null)
+		if(datas==null || datas.length==0){
+			ElMessage.error('数据无更改无需保存')
+			return
+		}
+		api.save(datas).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '保存失败')
+				return
+			}
+			ElMessage.success('保存成功')
+			queryHandle()
+		}).catch(err=>{
+			ElMessage.error('保存出错')
+			console.log(err)
+		})
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+		if(newNode!=null && newNode.nodeType=='well'){
+			queryForm.wellId=newNode.id 
+			queryForm.wellName=newNode.name 
+			queryHandle()
+		}
+		
+	},{ immediate: true })
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.el-input-number{
+		width:80px;
+	}
+	.el-icon{
+		cursor: pointer;
+	}
+</style>

src/pages/base/WellDeviation.vue

@@ -0,0 +1,188 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			<el-form-item label="井名">
+				<div style="width:140px;">{{queryForm.wellName}}</div>
+			</el-form-item>
+			
+			
+			
+			  
+			<el-form-item style="float:right;">
+				<el-button type="primary"  @click="queryHandle">检索</el-button>
+			</el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next"
+			url="/base/deviation/query"
+			:pageSize="50"
+			:autoLoad="false"
+			>
+			  <template #toolGroup>
+				<el-button type="primary" icon="plus" @click="addNewRow">新增</el-button>
+				<el-button type="success" icon="select" @click="save">保存</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				
+				
+				  <el-table-column prop="measureDepth" label="测量井深(m)"  width="110" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.measureDepth" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				  <el-table-column prop="deviateAngle" label="井斜角"  width="110" align="center">
+				  		<template #default="scope">
+				  			<el-input-number v-model="scope.row.deviateAngle" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  		</template>			  	
+				  </el-table-column>
+				  <el-table-column prop="azimuth"  label="方位角" width="110" align="center">
+					  <template #default="scope">
+					  	<el-input v-model="scope.row.azimuth" @change="inputChangeHandle(scope.row)"/>
+					  </template>
+				  </el-table-column>
+				  <el-table-column prop="verticalDepth"  label="垂直井深(m)" width="120" align="center">
+					  <template #default="scope">
+					  	<el-input-number v-model="scope.row.verticalDepth" :controls="false" :precision="2" disabled/>
+					  </template>
+				  </el-table-column>
+				  
+				  <el-table-column prop="oper" label="操作" width="60" fixed="right" align="center">
+				  		<template #default="scope">
+				  			<el-icon :size="26" @click="delRow(scope.row,scope.$index)" :title="scope.row.delIf?'取消删除':'删除'">
+								<CircleCloseFilled/>
+							</el-icon>
+				  		    
+				  		</template>			
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick} from 'vue'
+	import CrudTable from '../../components/crudtable/CrudTable.vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	
+	import api from "../../api/wellDeviation.js"
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+	  wellId: null,
+	  wellName:'未选择井'
+	})
+	
+	const queryHandle=()=>{
+		setTimeout(()=>{crudTable.value.query(queryForm)},100)
+	}
+	
+	const isReady=()=>{
+		if(!queryForm.wellId){
+			ElMessage.error('还未选择井')
+			return false
+		}
+		return true
+	}
+	
+	const inputChangeHandle=(row)=>{
+		let record=toRaw(row)
+		record.isUpdated=true
+	}
+	
+	const addNewRow=()=>{
+		if(!isReady()){
+			return
+		}
+		let [measureDepth,deviateAngle,azimuth,verticalDepth]=[null,null,null,null]
+		let defRow={wellId:queryForm.wellId,measureDepth,deviateAngle,azimuth,verticalDepth}
+		crudTable.value.addRow(defRow)
+	}
+	
+	const delRow=(record,index)=>{
+		if(record.recId){
+			ElMessageBox.confirm(
+				'确定要删除该记录吗?',
+				'操作确认',
+				{
+					confirmButtonText:'确定',
+					cancelButtonText:'取消',
+					type: 'warning'
+				}
+			).then(()=>{
+				api.del(record.recId).then(resp=>{
+					if(resp.code!=0){
+						ElMessage.error(resp.msg || '删除失败')
+						return
+					}
+					ElMessage.success('删除成功')
+					queryHandle()
+				}).catch(err=>{
+					ElMessage.error('删除出错')
+					console.log(err)
+				})
+			}).catch(()=>{
+				console.log('cancel del')
+			})
+		}
+		else{ //新加的行直接删除
+			let ds=crudTable.value.getTableDataSet()
+			ds.value.splice(index,1)
+		}
+		
+	}
+	
+	const save=()=>{
+		let datas=toRaw(crudTable.value.getTableDataSet().value)
+		if(datas==null || datas.length==0){
+			ElMessage.error('无数据可保存')
+			return
+		}
+		datas=datas.filter(item=>item.isUpdated || item.recId==null)
+		if(datas==null || datas.length==0){
+			ElMessage.error('数据无更改无需保存')
+			return
+		}
+		api.save(datas).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '保存失败')
+				return
+			}
+			ElMessage.success('保存成功')
+			queryHandle()
+		}).catch(err=>{
+			ElMessage.error('保存出错')
+			console.log(err)
+		})
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+		if(newNode!=null && newNode.nodeType=='well'){
+			queryForm.wellId=newNode.id 
+			queryForm.wellName=newNode.name 
+			queryHandle()
+		}
+		
+	},{ immediate: true })
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.el-input-number{
+		width:80px;
+	}
+	.el-icon{
+		cursor: pointer;
+	}
+</style>

src/pages/base/WellStratum.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+			<el-form-item label="井名">
+				<div style="width:140px;">{{queryForm.wellName}}</div>
+			</el-form-item>
+			
+			
+			
+			  
+			<el-form-item style="float:right;">
+				<el-button type="primary"  @click="queryHandle">检索</el-button>
+			</el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next"
+			url="/base/stratum/query"
+			:pageSize="50"
+			:autoLoad="false"
+			>
+			  <template #toolGroup>
+				<el-button type="primary" icon="plus" @click="addNewRow">新增</el-button>
+				<el-button type="success" icon="select" @click="save">保存</el-button>
+				 
+			  </template>
+			  <template #tabColumns={indexGenerate}>
+				  <el-table-column prop="stratumSerial" label="序号"  width="110" align="center">
+					 <template #default="scope">
+					  	<el-input v-model="scope.row.stratumSerial" :controls="false" :precision="0" @change="inputChangeHandle(scope.row)"/>
+					  </template>	
+				  </el-table-column>
+				 
+				  <el-table-column prop="stratumName" label="产层名称"  width="200" align="center">
+					<template #default="scope">
+						<el-input v-model="scope.row.stratumName" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+					</template>	
+				  </el-table-column>
+				  <el-table-column prop="stratumDepth" label="地层深度(m)"  width="110" align="center">
+				  	<template #default="scope">
+				  		<el-input-number v-model="scope.row.stratumDepth" :controls="false" :precision="2" @change="inputChangeHandle(scope.row)"/>
+				  	</template>					
+				  </el-table-column>
+				  
+				 
+				
+				 
+				  
+				  <el-table-column prop="oper" label="操作" width="60" fixed="right" align="center">
+				  		<template #default="scope">
+				  			<el-icon :size="26" @click="delRow(scope.row,scope.$index)" :title="scope.row.delIf?'取消删除':'删除'">
+								<CircleCloseFilled/>
+							</el-icon>
+				  		    
+				  		</template>			
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,watch,isRef,toRaw,onMounted, nextTick} from 'vue'
+	import CrudTable from '../../components/crudtable/CrudTable.vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from '../../store/home.js'
+	
+	import api from "../../api/wellStratum.js"
+	
+	const crudTable=ref(null)
+	
+	const queryForm = reactive({
+	  wellId: null,
+	  wellName:'未选择井'
+	})
+	
+	const rodTypeOpts=ref(null)
+	
+	const queryHandle=()=>{
+		setTimeout(()=>{crudTable.value.query(queryForm)},100)
+	}
+	
+	
+	
+	const isReady=()=>{
+		if(!queryForm.wellId){
+			ElMessage.error('还未选择井')
+			return false
+		}
+		return true
+	}
+	
+	const inputChangeHandle=(row)=>{
+		let record=toRaw(row)
+		record.isUpdated=true
+	}
+	
+	const addNewRow=()=>{
+		if(!isReady()){
+			return
+		}
+		let [stratumName,stratumSerial,stratumDepth]=[null,null,null]
+		let defRow={wellId:queryForm.wellId,stratumName,stratumSerial,stratumDepth}
+		crudTable.value.addRow(defRow)
+	}
+	
+	const delRow=(record,index)=>{
+		if(record.stratumId){
+			ElMessageBox.confirm(
+				'确定要删除该记录吗?',
+				'操作确认',
+				{
+					confirmButtonText:'确定',
+					cancelButtonText:'取消',
+					type: 'warning'
+				}
+			).then(()=>{
+				api.del(record.stratumId).then(resp=>{
+					if(resp.code!=0){
+						ElMessage.error(resp.msg || '删除失败')
+						return
+					}
+					ElMessage.success('删除成功')
+					queryHandle()
+				}).catch(err=>{
+					ElMessage.error('删除出错')
+					console.log(err)
+				})
+			}).catch(()=>{
+				console.log('cancel del')
+			})
+		}
+		else{ //新加的行直接删除
+			let ds=crudTable.value.getTableDataSet()
+			ds.value.splice(index,1)
+		}
+		
+	}
+	
+	const save=()=>{
+		let datas=toRaw(crudTable.value.getTableDataSet().value)
+		if(datas==null || datas.length==0){
+			ElMessage.error('无数据可保存')
+			return
+		}
+		datas=datas.filter(item=>item.isUpdated || item.stratumId==null)
+		if(datas==null || datas.length==0){
+			ElMessage.error('数据无更改无需保存')
+			return
+		}
+		api.save(datas).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(resp.msg || '保存失败')
+				return
+			}
+			ElMessage.success('保存成功')
+			queryHandle()
+		}).catch(err=>{
+			ElMessage.error('保存出错')
+			console.log(err)
+		})
+	}
+	
+	const store=useHomeStore()
+	const  {currentTreeNode} = storeToRefs(store)
+	watch(currentTreeNode,(newNode, oldNode)=>{
+		if(newNode!=null && newNode.nodeType=='well'){
+			queryForm.wellId=newNode.id 
+			queryForm.wellName=newNode.name 
+			queryHandle()
+		}
+		
+	},{ immediate: true })
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	.el-input-number{
+		width:80px;
+	}
+	.el-icon{
+		cursor: pointer;
+	}
+</style>