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

<template>
	<div class="page-container" >
		<div class="edit-box">
			
			<LayoutTmp v-model="layoutELModels"></LayoutTmp>
			
		</div>
		
		<VueDragResize
		:isActive="false" 
		:w="320" 
		:h="300"
		:x="60"
		:isResizable="false"
		:parentLimitation="false"
		key="ctr-panel"
		>
			<el-card class="ctr-panel">
				<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="delTemp">删除</el-button>
				</el-button-group>
				<el-select v-model="formModel.tempId" placeholder="选择单井模板" style="width:100%;margin-top:10px;" @change="changeTempHandle">
					<el-option value="new" label="空白模板"/>
					<el-option
					  v-for="item in tempList"
					  :key="item.tempId"
					  :label="item.tempName"
					  :value="item.tempId"
					/>
				</el-select>
				
				<el-collapse  accordion>
					<el-collapse-item title="单值元素" name="1">
						 <el-tag v-for="(el,index) in elOpts?.single" :key="index" @click="selEL(el)" :effect="el?.checked?'dark':'light'">{{el?.paramName}}</el-tag>
					</el-collapse-item>
					<el-collapse-item title="多值元素" name="2">
						<el-tag v-for="(el,index) in elOpts?.multi" :key="index" @click="selEL(el)" :effect="el?.checked?'dark':'light'">{{el?.paramName}}</el-tag>
					</el-collapse-item>
					<el-collapse-item title="其它元素" name="3">
						<el-tag v-for="(el,index) in elOpts?.oth" :key="index" @click="selEL(el)" :effect="el?.checked?'dark':'light'">{{el?.paramName}}</el-tag>
					</el-collapse-item>
				</el-collapse>
			</el-card>
		</VueDragResize>
	
		
	</div>
</template>

<script setup>
	import {ref,reactive,toRaw,onMounted } from 'vue'
	import paramMgrAPI from '../../api/paramMgr.js'
	import LayoutTmp from '../../components/layouttmp/LayoutTmp.vue'
	import VueDragResize from 'vue-drag-resize/src'
	import api from '../../api/singleLayoutTemp.js'
	import {ElMessageBox,ElMessage} from 'element-plus'
	
	const formModel = reactive({
		  tempId:null
	})
	
	const layoutELModels=ref([])
	
	const tempList=ref([])
		
	const elOpts=reactive({
		single:[],
		multi:[],
		oth:[
			{paramCode:'wellName',paramName:'井名标题',elType:'wellName'}
		]
	})
	
	
	
	
	//选择布局元素
	const selEL=(el)=>{
		el['checked']=!el['checked']
		synLayoutEL(el)
	}
	
	//同步更新layoutel
	const synLayoutEL=(srcEL)=>{
		if(!srcEL.checked){
			let finedIdx=null
			layoutELModels.value.forEach((item,index)=>{
				if(item&&item.paramCode==srcEL.paramCode){
					finedIdx=index
					return false
				}
			})
			if(finedIdx!=null){
				layoutELModels.value.splice(finedIdx,1)
			}
			
		}
		else{
			let initVal={
				width: 120,
				height: 60,
				top: 0,
				left: 100,
				paramName:srcEL.paramName,
				paramCode:srcEL.paramCode,
				elType:srcEL.elType
			}
			if(srcEL.elType=="multi"){
				initVal.width=400
				initVal.height=220
			}
			else if(srcEL.elType=="wellName"){
				initVal.width=120
				initVal.height=30
			}
			layoutELModels.value.push(initVal)
		}
	}
	
	onMounted(()=>{
		loadParamType()
		loadTempList()
	})
	
	const loadParamType=()=>{
		paramMgrAPI.loadAll().then(resp=>{
			if(resp.code==0){
				let tmp
				resp.data.forEach(param=>{
					//param['name']=param.paramName
					//param['code']=param.paramCode
					param['elType']='single'
					tmp=elOpts.single
					if(param.paramCode.indexOf('diagram')>=0){
						param['elType']='multi'
						tmp=elOpts.multi
					}
					tmp.push(param)
					
				})
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	
	const resetPage=()=>{
		layoutELModels.value=[]
		elOpts.single.forEach((item,index)=>{ 
			item.checked=false
		})
		elOpts.multi.forEach((item,index)=>{
			item.checked=false
		})
		elOpts.oth.forEach((item,index)=>{
			item.checked=false
		})
	}
	
	const initElOptsCheck=(checkMap)=>{
		elOpts.single.forEach((item,index)=>{
			item.checked=checkMap[item.paramCode]
		})
		elOpts.multi.forEach((item,index)=>{
			item.checked=checkMap[item.paramCode]
		})
		elOpts.oth.forEach((item,index)=>{
			item.checked=checkMap[item.paramCode]
		})
	}
	
	//选择模板后，加载明细
	const changeTempHandle=(val)=>{
		resetPage()
		api.getTempDtl(val).then(resp=>{
			if(resp.code!=0){
				ElMessage.error(err||'加载模板明细失败')
				return
			}
			if(resp.data&&resp.data.tempContent){
				let elModels=JSON.parse(resp.data.tempContent)
				let mapping={}
				elModels.forEach((item,index)=>{
					mapping[item.paramCode]=true
					layoutELModels.value.push(item)
				})
				initElOptsCheck(mapping)
				
			}
			
		}).catch(err=>{
			   
		   }
		)
	}
	
	//加载库中模板
	const loadTempList=()=>{
		api.loadTempList().then(resp=>{
			if(resp.code==0){
				tempList.value=resp.data
			}
		}).catch(error=>{
			
		})
	}
	
	
	//获取要保存的数据
	const getSaveData=()=>{
		let tempName=''
		if(tempList.value&&tempList.value.length>0){
			let chkedtemp=tempList.value.filter(temp=>temp.tempId==formModel.tempId)
			tempName=chkedtemp&&chkedtemp.length>0?chkedtemp[0].tempName:null
		}
		return {tempName,tempId:formModel.tempId,tempContent:JSON.stringify(layoutELModels.value),tempType:'single'}
	}
	
	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('操作成功')
								loadTempList()
								formModel.tempId=resp.data
							}
						})
						
					})
					.catch(err => {
						console.log('cancel save as '+err)
					})
		}
	}
	
	//删除模板
	const delTemp=()=>{
		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
				resetPage()
				loadTempList()
				
			}).catch(err=>{
				ElMessage.error(err||'操作失败')
			})
		}).catch(()=>{
			console.log('cancel del')
		})
	}
	  
</script>

<style scoped>
	.page-container{
		position: relative;
		left:0px;
		top:0px;
		
		height: 100%;
	}
	.edit-box{
		width:100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		
		
	}
	
	
	.item2 {
	  margin-bottom: 18px;
	}
	.ctr-panel{
	  width: 300px;
	  position: absolute;
	  top:0px;
	  right: 10px;
	}
	.ctr-panel .el-tag{
		width:70px;
		margin:0px 5px 5px 0px;
		cursor:pointer;
	}
	
</style>