页签克隆

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue

@@ -26,6 +26,7 @@
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
        </el-button>
        <el-button icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆</el-button>
      </template>

      <!-- eventKey以及eventValue显示区域 -->
@@ -79,7 +80,7 @@
            </el-button>
            <el-button plain size="mini" type="primary">调整为下级按钮</el-button>
            <el-button plain size="mini" type="primary">调整为上级按钮</el-button>
            <el-button plain size="mini" type="primary">复制到其他组件</el-button>
            <el-button plain size="mini" type="primary"  @click="cloneClickBtnHandler">复制到其他组件</el-button>
          </div>
        </el-header>
        <el-container>
@@ -195,6 +196,7 @@
      </el-container>
    </el-dialog>
    <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
    <clone-dialog ref="cloneDialog"></clone-dialog>
  </div>
</template>

@@ -213,6 +215,7 @@
  addPageDefination
} from "@/api/UI/uiDefine";
import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action';
import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog";

export default {
  props: {
@@ -227,7 +230,8 @@
    }
  },
  components: {
    actionDialog
    actionDialog,
    cloneDialog
  },
  name: "index",
  data() {
@@ -1105,6 +1109,7 @@
          this.treeData = [{
            label: this.selectList[0].name,
            oId: 'parentNode',
            disabled: true,
            children: data
          }];
          this.treeLoading = false;
@@ -1259,6 +1264,17 @@
      });
    },

    cloneClickBtnHandler(){
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行复制');
        return;
      }
      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许复制');
        return;
      }
      this.$refs.cloneDialog.openDialog(this.nodeTreeRow);
    },
    // é€‰æ‹©action
    actionFoucus() {
      this.$refs.actionDialog.btnActionVisible = true;
@@ -1268,7 +1284,10 @@
    actionSaveHandler(val) {
      this.$set(this.basicForm, 'actionName', val.plName);
      this.$set(this.basicForm, 'actionOId', val.plOId);
    }
    },
    rowCloneHandler(row) {
      this.$refs.cloneDialog.openDialog(row);
    },
  }
}
</script>

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
<template>
  <el-dialog v-dialogDrag
             :title="dialog.title"
             :visible.sync="dialog.showDialog"
             width="1200px"
             :append-to-body="true"
             class="avue-dialog"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @close="cancelDialog">
    <el-container style="height: 580px">
      <el-aside style="width: 380px">
        <basic-container style="height: 530px">
          <h3 style="margin: 0 0 10px 0">业务类型</h3>
          <div style="height: 435px">
            <avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick">
              <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
                    {{ (node || {}).label }}
                </span>
              </span>
            </avue-tree>
          </div>
        </basic-container>
      </el-aside>

      <el-main>
        <basic-container style="height: 530px">
          <div style="height: 520px;">
            <avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption">
              <span slot-scope="{ node, data }" class="el-tree-node__label">
                <span style="font-size: 15px">
                  <i :class="data.icon"></i>
                    {{ (node || {}).label }}
                </span>
              </span>
            </avue-tree>
          </div>
        </basic-container>
      </el-main>
    </el-container>
    <div class="dialog-footer avue-dialog__footer">
      <el-button type="primary" plain size="small" @click="submitDialog" >保 å­˜</el-button>
      <el-button size="small" @click="cancelDialog">取 æ¶ˆ</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getUIAuthor} from "@/api/authority/ui/uiAuthor";
import {getBizTree} from "@/api/UI/uiDefine";

export default {
name: "cloneDialog",
  data(){
    return {
      dialog: {
        showDialog: false,
        title: "克隆目标",
        loading: false,
        type: "clone",
      },
      treeOption: {
        menu: false,
        addBtn: false,
        props: {
          label: 'text',
          value: 'oid',
          children: 'children'
        }
      },
      nodeRow: {},
      treeData: [],
      defaultExpandKeys:[],
      uiTreeOption: {
        nodeKey:'oid',
        checkOnClickNode:true,
        defaultExpandedKeys:this.defaultExpandKeys,
        multiple: true,
        menu: false,
        addBtn: false,
        filter:false,
        props: {
          label: 'label',
          value: 'oid',
          children: 'children'
        }
      },
      uiTreeData: [],
    };
  },
  methods: {
    openDialog( data) {
      this.dialog.showDialog = true;
      this.getTreeList()
      this.uiTreeData=[];
    },
    cancelDialog() {
      this.dialog.loading = false;
      this.dialog.showDialog = false;
    },
    submitDialog() {
      linkSave({}).then(res => {
        if (res.data.success) {
          this.$message.success("克隆成功");
          this.cancelDialog();
          this.$emit("refresh");
        }
      });
    },
    getTreeList() {
      const loading = this.$loading({});
      getBizTree().then(res => {
        this.treeData =res.data.obj.children;
        loading.close();
      }).catch(error=>{
        loading.close();
      })
    },
    // è§’色点击
    nodeClick(row,node) {
      this.nodeRow = row;
      const loading = this.$loading({});
      const params = {
        'conditionMap[roleId]': this.nodeRow.oid,
        'conditionMap[type]': this.type,
        'conditionMap[context]': this.context
      }
      this.defaultExpandKeys=['root'];
      getUIAuthor(params).then(res => {
        this.processChildren(res.data.data[0]); // å¤„理每个节点
        this.uiTreeOption.defaultExpandedKeys=this.defaultExpandKeys;
        this.uiTreeData = [{
          attributes: {},
          checked: false,
          expanded: true,
          data: "root",
          level: 0,
          icon: 'el-icon-s-home',
          oid: res.data.data[0].oid,
          label: 'UI上下文选项',
          children: res.data.data[0].children
        }];
        loading.close();
      }).catch(error => {
        loading.close();
      })
    },
    //处理树
    processChildren(item) {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map(child => {
          if(child.level<4){
            this.defaultExpandKeys.push(child.oid)
          }
          if(child.level==1){
            child.icon='el-icon-s-promotion';
            child.label=child.data.label+'('+child.data.name+')'
          }else if(child.level==2){
            child.icon='el-icon-s-order';
            child.label=child.text
          }else if(child.level==3){
            child.icon='el-icon-office-building';
            child.label=child.text
          }else if(child.level==4){
            child.icon='el-icon-document';
            child.label=child.text
          }else if(child.level==5){
            child.icon='el-icon-s-tools';
            child.label=child.text
          }
          this.processChildren(child); // é€’归处理每个子节点
          return child; // åªè¿”回子节点的 attributes
        });
      }
    },
  },
}
</script>

<style scoped>

</style>

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/plShow.vue

@@ -18,10 +18,9 @@
        <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>-->
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button icon="el-icon-edit" size="small" type="text" @click="rowEditBtnClick(scope.row)">编辑
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
        </el-button>
        <el-button icon="el-icon-edit" size="small" type="text" @click="rowEditBtnClick(scope.row)">编辑</el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除</el-button>
        <el-button icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆</el-button>
      </template>
      <template slot="plIsOpen" slot-scope="{row}">
        <el-tag v-if="row.plIsOpen === 1" type="success">启用</el-tag>
@@ -99,6 +98,7 @@
            <el-button type="primary" @click="saveHandler">ç¡® å®š</el-button>
          </span>
    </el-dialog>
    <clone-dialog ref="cloneDialog"></clone-dialog>
  </div>
</template>

@@ -112,6 +112,7 @@
} from "@/api/UI/uiDefine";
import func from "@/util/func";
import bottomTable from "./bottomTable/index";
import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog";

export default {
name: "plShow",
@@ -121,7 +122,7 @@
      default: {}
    },
  },
  components:{bottomTable},
  components:{bottomTable,cloneDialog},
  data() {
    return {
      uiDefineOid:'',
@@ -135,7 +136,7 @@
        editBtn: false,
        delBtn: false,
        index:false,
        menuWidth:160,
        menuWidth:220,
        align:'left',
        column: [{
          label: '序号',
@@ -375,6 +376,9 @@
        }
      });
    },
    rowCloneHandler(row) {
      this.$refs.cloneDialog.openDialog(row);
    },
  }
}
</script>