|
@@ -0,0 +1,392 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="tool-bar">
|
|
|
+ <el-select v-model="formModel.tempId" placeholder="选择模板" @change="changeTempHandle">
|
|
|
+ <el-option value="new" label="空白模板"/>
|
|
|
+ <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-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="temp-container">
|
|
|
+ <div class="param-block" :class="{'param-block-active':selectIndex==index}" v-for="(param,index) in tableHead" @click="selectIndex=index">
|
|
|
+ <div class="param-tit">{{param.paramName}}</div>
|
|
|
+ <div class="param-val" ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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 paramAPI from '../../api/paramMgr.js'
|
|
|
+ import tempAPI from '../../api/tempMgr.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 defclms=[
|
|
|
+
|
|
|
+ ]
|
|
|
+
|
|
|
+ const tableHead=ref([...defclms])
|
|
|
+
|
|
|
+ //选中的参数索引
|
|
|
+ const selectIndex=ref(null)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const moveclm=(step)=>{
|
|
|
+
|
|
|
+ let newidx=selectIndex.value+step
|
|
|
+ if(newidx<0 || newidx>=tableHead.value.length){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const selItem = tableHead.value[selectIndex.value];
|
|
|
+ let tmphead=[...tableHead.value]
|
|
|
+ tmphead.splice(selectIndex.value, 1)
|
|
|
+ tmphead.splice(newidx, 0,selItem)
|
|
|
+ tableHead.value=tmphead
|
|
|
+ selectIndex.value=newidx
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 checkedHeadIndex=ref(-1)
|
|
|
+
|
|
|
+ //更改了备选参数的状态
|
|
|
+ const checkParamTypeHandle=(checkeIndex)=>{
|
|
|
+ let chkparam=paramTypes.value[checkeIndex]
|
|
|
+ chkparam.checked=!chkparam.checked
|
|
|
+
|
|
|
+ let {idx}=getDatasetIdx(chkparam.paramCode)
|
|
|
+ //console.log(idx+""+chkparam.checked)
|
|
|
+ if(chkparam.checked&&idx==null){
|
|
|
+ tableHead.value.push(chkparam)
|
|
|
+ }
|
|
|
+ else if(!chkparam.checked&&idx!=null){
|
|
|
+ tableHead.value.splice(idx, 1)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const cellClassName=({ column,rowIndex })=>{
|
|
|
+ if(checkedClmProp.value==column.property){
|
|
|
+ return 'selected-clm'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const loadParamType=()=>{
|
|
|
+ paramAPI.loadAll().then(resp=>{
|
|
|
+ if(resp.code==0){
|
|
|
+ paramTypes.value=resp.data
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const resetPage=()=>{
|
|
|
+ tableHead.value=[...defclms]
|
|
|
+ paramTypes.value.forEach((item,index)=>{
|
|
|
+ item.checked=false
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //选择模板后,加载明细
|
|
|
+ const changeTempHandle=(val)=>{
|
|
|
+ resetPage()
|
|
|
+ tempAPI.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]=true
|
|
|
+ })
|
|
|
+ paramTypes.value.forEach((item,index)=>{ //同步勾选参数选项
|
|
|
+ item.checked=mapping[item.paramCode]
|
|
|
+ })
|
|
|
+ tableHead.value=headAry
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(err=>{
|
|
|
+
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ //加载库中模板
|
|
|
+ const loadTypeAll=()=>{
|
|
|
+ tempAPI.loadTemps('singleDynParam').then(resp=>{
|
|
|
+ if(resp.code==0){
|
|
|
+ tempbases.value=resp.data
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //获取要保存的数据
|
|
|
+ const getSaveData=()=>{
|
|
|
+ let tempName=''
|
|
|
+ if(tempbases.value&&tempbases.value.length>0){
|
|
|
+ let chkedtemp=tempbases.value.filter(temp=>temp.tempId==formModel.tempId)
|
|
|
+ tempName=chkedtemp&&chkedtemp.length>0?chkedtemp[0].tempName:null
|
|
|
+ }
|
|
|
+ return {tempName,tempId:formModel.tempId,tempContent:JSON.stringify(tableHead.value),tempType:'singleDynParam'}
|
|
|
+ }
|
|
|
+
|
|
|
+ //保存
|
|
|
+ const saveTemp=(tag)=>{
|
|
|
+ if(tag==="save"){
|
|
|
+ tempAPI.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
|
|
|
+ tempAPI.saveAs(saveData).then(resp=>{
|
|
|
+ if(resp.code!=0){
|
|
|
+ ElMessage.error(resp.msg||'操作失败')
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ loadTypeAll()
|
|
|
+ formModel.tempId=resp.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log('cancel save as '+err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //删除模板
|
|
|
+ const delHandle=()=>{
|
|
|
+ if(formModel.tempId==null){
|
|
|
+ ElMessage.error('还未选择模板')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '确定要删除该模板吗?',
|
|
|
+ '操作确认',
|
|
|
+ {
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ type: 'warning'
|
|
|
+ }
|
|
|
+ ).then(()=>{
|
|
|
+ tempAPI.del(formModel.tempId).then(resp=>{
|
|
|
+ if(resp.code!=0){
|
|
|
+ ElMessage.error(resp.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ formModel.tempId=null
|
|
|
+ resetPage()
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .temp-container{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns:repeat(2, 180px);
|
|
|
+ grid-template-rows:repeat(auto-fill, 30px);
|
|
|
+ grid-gap: 10px 20px;
|
|
|
+ justify-content:center;
|
|
|
+
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .temp-container .param-block{
|
|
|
+ font-size:14px;
|
|
|
+ vertical-align:baseline;
|
|
|
+ display: flex;
|
|
|
+ flex-flow:row nowrap;
|
|
|
+ align-items: center;
|
|
|
+ color:#555;
|
|
|
+ height: 28px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-block-active{
|
|
|
+ background-color: #409eff;
|
|
|
+ color:#ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-block .param-tit{
|
|
|
+ width:90px;
|
|
|
+ padding:0px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-block .param-val{
|
|
|
+ background-color: #fff;
|
|
|
+ /* width:60px; */
|
|
|
+ text-align: right;
|
|
|
+ flex:1;
|
|
|
+ padding:5px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border:1px solid #e4e4e4;
|
|
|
+ border-top-left-radius: 3px;
|
|
|
+ border-bottom-left-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|