增加油层套管管理模块

src/api/oilCasingPipe.js

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

src/pages/base/OilCasingPipe.vue

@@ -0,0 +1,197 @@
+<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/casing/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="depthDiff" 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">
+					<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">
+					  <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">
+				  		<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">
+					  <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">
+					  <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/oilCasingPipe.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)=>{
+		console.log(row)
+		let record=toRaw(row)
+		record.isUpdated=true
+	}
+	
+	const addNewRow=()=>{
+		if(!isReady()){
+			return
+		}
+		let [posNum,innerDiam,topDepth,btmDepth,steelGrade,linearWeight]=[null,null,null,null,null,null]
+		let defRow={wellId:queryForm.wellId,posNum,innerDiam,topDepth,btmDepth,steelGrade,linearWeight}
+		crudTable.value.addRow(defRow)
+	}
+	
+	const delRow=(record,index)=>{
+		if(record.casingId){
+			ElMessageBox.confirm(
+				'确定要删除该记录吗?',
+				'操作确认',
+				{
+					confirmButtonText:'确定',
+					cancelButtonText:'取消',
+					type: 'warning'
+				}
+			).then(()=>{
+				api.del(record.casingId).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.casingId==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>