增加多井列表模板编辑功能

src/api/multiTabTemp.js

@@ -0,0 +1,55 @@
+import request from '../utils/request';
+
+const api={}
+
+api.loadParamType=()=>{
+	return request({
+	    url: '/base/parammgr/loadAll',
+	    method: 'get'
+	});
+}
+
+api.loadTypeAll=()=>{
+	return request({
+	    url: '/base/temp/loadTypeAll',
+	    method: 'post',
+		data:{tempType:'multi'}
+	});
+}
+
+
+api.save=(data)=>{
+	return request({
+	    url: '/base/temp/update',
+	    method: 'post',
+		data:  data
+	});
+}
+
+api.saveAs=(data)=>{
+	return request({
+	    url: '/base/temp/add',
+	    method: 'post',
+		data:  data
+	});
+}
+
+
+
+api.del = (tempId) => {
+	    return request({
+	        url: '/base/temp/delete',
+	        method: 'post',
+			data:  {tempId}
+	    });
+}
+
+api.getTempDtl = (tempId) => {
+	    return request({
+	        url: '/base/temp/get',
+	        method: 'post',
+			data:  {tempId}
+	    });
+}
+
+export  default api

src/pages/base/MultiTabTemp.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="page-container">
+	
+	
+	<div class="tool-bar">
+		<el-select v-model="formModel.tempId" placeholder="选择多井模板" @change="changeTempHandle">
+			<el-option
+			  v-for="item in tempbases"
+			  :key="item.tempId"
+			  :label="item.tempName"
+			  :value="item.tempId"
+			/>
+		</el-select>
+		<el-button-group>
+		    <el-button type="primary" icon="Folder" @click="saveTemp('save')">保存</el-button>
+		    <el-button type="primary" icon="FolderAdd" @click="saveTemp('saveAs')">另存为</el-button>
+		    <el-button type="primary" icon="Delete" @click="delHandle">删除</el-button>
+		</el-button-group>
+		
+		<el-button type="success" icon="Menu" style="margin:0px 100px;" @click="ctrDialogShow=true">设置列</el-button>
+		
+		<el-button-group>
+			<el-button type="primary" plain @click="moveclm(-1)" icon="ArrowLeftBold"/>
+			<el-button type="primary" plain @click="moveclm(1)" icon="ArrowRightBold"/>
+			<el-button type="primary" plain @click="fixClm(false)">不固定</el-button>
+			<el-button type="primary" plain @click="fixClm(true)">固定</el-button>
+		</el-button-group>
+	</div>
+   
+	
+	<el-table :data="[{}]" border style="width: 100%" 
+		@header-click="checkedClmHandle" 
+		@header-dragend="headerDragHandle"
+		:cell-class-name="cellClassName"
+		:header-cell-class-name="cellClassName">
+		<el-table-column type="index" label="序号" width="60" align="center" fixed="left"/> 
+		<el-table-column prop="wellName" label="井号" width="100" align="center" fixed="left"/>
+		<el-table-column prop="time" label="时间" width="160" align="center" fixed="left"/>  
+		
+		<el-table-column v-for="(col, index) in tableHead"
+			:key="index"
+			:prop="col.paramCode"
+			:align="col.align || 'center'"
+			:width="col.width || 100"
+			:label="col.paramName"
+			:fixed="col.fixed"
+			
+		>
+			
+		</el-table-column>
+	</el-table>
+	
+	<el-dialog v-model="ctrDialogShow" title="选择参数" :close-on-click-modal="false">
+		<el-row :gutter="20">
+			<el-col :sm="6" :md="4" v-for="(param,index) in paramTypes" :key="index">
+				<div class="dialog-item" :class="{'dialog-item-checked':param.checked}" @click="checkParamTypeHandle(index)">{{param.paramName}}<el-icon v-if="param.checked"><Select/></el-icon></div>
+			</el-col>
+		</el-row>
+		
+		<template #footer>
+		    <span class="dialog-footer">
+		        <el-button @click="ctrDialogShow=false">关闭</el-button>
+		       
+		    </span>
+		</template>
+	</el-dialog>
+	
+  </div>
+  
+  
+</template>
+
+<script setup>
+
+	import {reactive,ref, toRaw,onMounted,computed} from 'vue'
+	import api from '../../api/multiTabTemp.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+
+	const ctrDialogShow=ref(false)
+
+	const paramTypes=ref([])
+	
+	const tempbases=ref([])
+	
+	const formModel = reactive({
+		  tempId:null
+		})
+
+	onMounted(()=>{
+		loadParamType()
+		loadTypeAll()
+	})
+
+	const tableHead=ref([])
+
+	
+	const fixClm=(tag)=>{
+		if(!checkedClmProp.value){
+			return
+		}
+		let {head}=getDatasetIdx(checkedClmProp.value)
+		head.fixed=tag
+		
+	}
+	
+	const moveclm=(step)=>{
+		let {idx}=getDatasetIdx(checkedClmProp.value)
+		let newidx=idx+step
+		if(newidx<0||newidx>=tableHead.value.length){
+			return 
+		}
+		const originColumn = tableHead.value[idx];
+		let tmphead=[...tableHead.value]
+		tmphead.splice(idx, 1)
+		tmphead.splice(newidx, 0,originColumn)
+		tableHead.value=tmphead
+		
+		
+		
+	}
+	
+	const getDatasetIdx=(prop)=>{
+		let rtn={head:null,idx:null}
+		tableHead.value.forEach((head,idx)=>{
+			if(prop==head.paramCode){
+				rtn = {head,idx}
+				return false
+			} 
+			
+		})
+		
+		return rtn
+	}
+	
+	
+	
+	const checkedClmProp=ref('')
+	
+	//选择列事件处理
+	const checkedClmHandle=(column, event)=>{
+		if(column.type=='index'||column.property=='wellName'||column.property=='time'){
+			return
+		}
+		checkedClmProp.value=column.property
+	}
+	
+	const cellClassName=({ column,rowIndex })=>{
+		if(checkedClmProp.value==column.property){
+			return 'selected-clm'
+		}
+		return ''
+	}
+	
+	
+	const loadParamType=()=>{
+		api.loadParamType().then(resp=>{
+			if(resp.code==0){
+				paramTypes.value=resp.data
+			}
+		}).catch(error=>{
+			
+		})
+	}
+	
+	//拖到列改变宽度
+	const headerDragHandle=(newWidth, oldWidth, column)=>{
+		let tabHeadData=tableHead.value[column.getColumnIndex()-3]   //3为前面固定的3列
+		tabHeadData.width=newWidth
+	}
+	
+	//更改了备选参数的状态
+	const checkParamTypeHandle=(checkeIndex)=>{
+		let chk=paramTypes.value[checkeIndex].checked
+		paramTypes.value[checkeIndex].checked=!chk
+		
+		let checkedParams=paramTypes.value.filter(param=> param.checked)
+		
+		tableHead.value=[...checkedParams]
+		//synTabHead([...checkedParams])
+	}
+	
+	//选择模板后，加载明细
+	const changeTempHandle=(val)=>{
+		api.getTempDtl(val).then(resp=>{
+			if(resp.code!=0){
+				ElMessage.error(err||'加载模板明细失败')
+				return
+			}
+			if(resp.data&&resp.data.tempContent){
+				let headAry=JSON.parse(resp.data.tempContent)
+				let mapping={}
+				headAry.forEach((item,index)=>{
+					mapping[item.paramCode]=item
+				})
+				paramTypes.value.forEach((item,index)=>{
+					item.checked=mapping[item.paramCode]
+				})
+				tableHead.value=headAry
+			}
+			
+		}).catch(err=>{
+			   
+		   }
+		)
+	}
+	
+	//加载库中模板
+	const loadTypeAll=()=>{
+		api.loadTypeAll().then(resp=>{
+			if(resp.code==0){
+				tempbases.value=resp.data
+			}
+		}).catch(error=>{
+			
+		})
+	}
+	
+	
+	//获取要保存的数据
+	const getSaveData=()=>{
+		let tempName=null
+		if(tempbases.value&&tempbases.value.length>0){
+			let chkedtemp=tempbases.value.filter(temp=>temp.tempId==formModel.tempId)
+			tempName=chkedtemp?chkedtemp[0].tempName:null
+		}
+		return {tempName,tempId:formModel.tempId,tempContent:JSON.stringify(tableHead.value),tempType:'multi'}
+	}
+	
+	//保存
+	const saveTemp=(tag)=>{
+		if(tag==="save"){
+			api.save(getSaveData()).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+		}
+		else if(tag==="saveAs"){
+			return ElMessageBox.prompt('创建新模板',null,{
+			   		   showCancelButton:true,
+			   		   showInput:true,
+					   inputType:'text',
+					   inputPlaceholder:'请输入模板名称',
+					   inputPattern:/\S+/,
+					   inputErrorMessage:'模板名称不能为空',
+					   closeOnClickModal:false
+					}).then(({value })=>{
+						let saveData=getSaveData()
+						saveData['tempName']=value 
+						api.saveAs(saveData).then(resp=>{
+							if(resp.code!=0){
+								ElMessage.error(resp.msg||'操作失败')
+							}
+							else{
+								ElMessage.success('操作成功')
+								loadTypeAll()
+								formModel.tempId=resp.data
+							}
+						})
+						
+					})
+					.catch(() => {
+						console.log('cancel save as')
+					})
+		}
+	}
+	
+	//删除模板
+	const delHandle=()=>{
+		if(formModel.tempId==null){
+			ElMessage.error('还未选择模板')
+			return
+		}
+		ElMessageBox.confirm(
+			'确定要删除该模板吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			api.del(formModel.tempId).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+				formModel.tempId=null
+				tableHead.value=[]
+				loadTypeAll()
+				
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+	}
+  
+</script>
+
+<style scoped>
+	.page-container{
+			 height:100%;
+			 box-sizing: border-box;
+			
+	}
+	
+	.page-container:deep(.selected-clm ) {
+	  opacity: 0.8;
+	  background-color: #ecf5ff !important;
+	  color: #222;
+	  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+	  border-bottom:4px solid #ff0000;
+	}
+	
+	
+	.tool-bar{
+		height:45px;
+		box-sizing: border-box;
+		padding: 5px 10px;
+		margin-bottom: 10px;
+		display: flex;
+		flex-flow:row nowrap;
+	}
+	
+	.dialog-item{
+		text-align: center;
+		padding:5px;
+		border: 1px solid #a0cfff;
+		background-color: #ecf5ff;
+		color:#409eff;
+		margin-bottom:15px;
+		cursor:pointer;
+		border-radius: 4px;
+		position: relative;
+	}
+	
+	.dialog-item .el-icon{
+		position: absolute;
+		right: 2px;
+		top:2px;
+	}
+	
+	.dialog-item:hover{
+		border: 1px solid #409eff;
+		
+	}
+	
+	.dialog-item-checked{
+		border: 1px solid #409eff;
+		background-color: #409eff;
+		color:#fff;
+	}
+	
+</style>