Merge remote-tracking branch 'origin/master'

 Source/plt-web/plt-web-ui/public/index.html

@@ -97,8 +97,7 @@
      </div>
    </div>
    <div class="avue-home__footer">
      <a href="https://bladex.vip" target="_blank">
        https://bladex.vip </a>

    </div>
  </div>
</div>

 Source/plt-web/plt-web-ui/src/App.vue

@@ -80,6 +80,9 @@
.avue-crud__pagination{
  padding: 15px 0 10px;
}
.el-form .el-col{
  margin-bottom: 0;
}
.UITabs > .el-tabs__content{
  height:calc(100% - 56px);
}
@@ -113,7 +116,7 @@
  margin-bottom: 15px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 10px;
  margin-bottom: 15px;
}

.tree-buttons .el-button{

 Source/plt-web/plt-web-ui/src/api/UI/uiDefine.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,180 @@
import request from '@/router/axios';

// ä¸šåŠ¡ç±»åž‹æ ‘查询
export function getBizTree(params) {
  return request({
    url: "/api/uiManagerController/getBizTree",
    method: "get",
    params
  });
}
// åˆ—表查询
export function gridUIContextData(page, limit, params) {
  return request({
    url: "/api/uiManagerController/gridUIContextData",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}
export const saveUIContextData = (row) => {
  return request({
    url: '/api/uiManagerController/saveUIContextData',
    method: 'post',
    data: row
  })
}

export const updateUIContextData = (row) => {
  return request({
    url: '/api/uiManagerController/updateUIContextData',
    method: 'put',
    data: row
  })
}
// é€šè¿‡oid删除
export function delUIContextData(params) {
  return request({
    url: "/api/uiManagerController/delUIContextData",
    method: "delete",
    params
  })
}
//克隆
export const cloneUIContextData = (params) => {
  return request({
    url: '/api/uiManagerController/cloneUIContextData',
    method: 'post',
    data: params
  })
}
//    å¯¼å‡ºé€‰æ‹©åˆ—表
//参数     expDatas:选择oid
export function getExpContextTree(params) {
  return request({
    url: "/api/uiManagerController/getExpContextTree",
    method: "get",
    params: params
  });
}
// å¯¼å‡º
export function expUIContextData (params) {
  return request({
    url: '/api/uiManagerController/expUIContextData',
    method: 'post',
    responseType: 'blob',
    data:{
      params
    }
  })
}

//上下文各区域列表数据
export function getTabByContextIdAndType(params){
  return request({
    url: "/api/uiManagerController/getTabByContextIdAndType",
    method: "get",
    params
  });
}
export const addTabData = (row) => {
  return request({
    url: '/api/uiManagerController/addTabData',
    method: 'post',
    data: row
  })
}

export const updateTabData = (row) => {
  return request({
    url: '/api/uiManagerController/updateTabData',
    method: 'put',
    data: row
  })
}
// é€šè¿‡oid删除
export function deleteTabData(params) {
  return request({
    url: "/api/uiManagerController/deleteTabData",
    method: "delete",
    params
  })
}
//下方表格数据
export function getPLPageDefinations(params){
  return request({
    url: "/api/uiManagerController/getPLPageDefinations",
    method: "get",
    params
  });
}

// ä¸šåŠ¡ç±»åž‹ä¸‹æ‹‰æŸ¥è¯¢
export function getBtmDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getBtmDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// é€‰æ‹©æ¨¡æ¿ä¸‹æ‹‰æŸ¥è¯¢
export function getPortalVIDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getPortalVIDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// æŸ¥è¯¢æ¨¡æ¿ä¸‹æ‹‰æŸ¥è¯¢
export function getQTInfoDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getQTInfoDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†å·¦ä¾§æ ‘查询
export function getTabButtons(params) {
  return request({
    url: "/api/uiManagerController/getTabButtons",
    method: "get",
    params
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†æ·»åŠ 
export function addTapButton(params) {
  return request({
    url: "/api/uiManagerController/addTapButton",
    method: "post",
    data:params
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†æ·»åŠ 
export function updateTapButton(params) {
  return request({
    url: "/api/uiManagerController/updateTapButton",
    method: "put",
    data:params
  });
}


 Source/plt-web/plt-web-ui/src/api/UI/uiDefine/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
import request from '@/router/axios';

// ä¸šåŠ¡ç±»åž‹ä¸‹æ‹‰æŸ¥è¯¢
export function getBtmDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getBtmDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// é€‰æ‹©æ¨¡æ¿ä¸‹æ‹‰æŸ¥è¯¢
export function getPortalVIDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getPortalVIDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// æŸ¥è¯¢æ¨¡æ¿ä¸‹æ‹‰æŸ¥è¯¢
export function getQTInfoDatasByPage(page, limit, params) {
  return request({
    url: "/api/uiManagerController/getQTInfoDatasByPage",
    method: "get",
    params: {
      page,
      limit,
      ...params
    }
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†å·¦ä¾§æ ‘查询
export function getTabButtons(params) {
  return request({
    url: "/api/uiManagerController/getTabButtons",
    method: "get",
    params
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†æ·»åŠ 
export function addTapButton(params) {
  return request({
    url: "/api/uiManagerController/addTapButton",
    method: "post",
    data:params
  });
}

// æŒ‰é’®è®¾è®¡å¯¹è¯æ¡†æ·»åŠ 
export function updateTapButton(params) {
  return request({
    url: "/api/uiManagerController/updateTapButton",
    method: "put",
    data:params
  });
}

 Source/plt-web/plt-web-ui/src/components/PLT-basic-component/upload-file.vue

@@ -69,8 +69,8 @@
    },
    // è¯·æ±‚地址 æºå¸¦å‚æ•°
    fileData: {
      type: Array,
      default: () => []
      type: Object,
      default: () => {}
    },
    // å¯¼å…¥æç¤ºæ–‡å­—  tipList:["导入模板中标明红色字体的为必输项","部门列上下级关系必须按照反斜杠隔开(/)"]
    tipList:{
@@ -124,13 +124,14 @@
      return true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸ
    onSuccess(resbonse) {
      if (resbonse.code === 200) {
    onSuccess(response) {
      if (response.code === 200) {
        this.$message.success("导入成功！");
        this.visible = false;
        this.$emit('updata',resbonse);
        this.$emit('updata',response);
      } else {
        this.$message.error(resbonse.msg);
        this.$emit('upfaildata',response);
        this.$message.error(response.msg);
      }
    },
    //文件上传失败
@@ -140,7 +141,6 @@
    },
    //文件状态改变
    uploadChange(file) {
      console.log( this.pageLoading);
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }

 Source/plt-web/plt-web-ui/src/router/page/index.js

@@ -91,11 +91,11 @@
  },
  {
    path: '/UIContentViewer',
    name: '动态表格页面',
    name: 'UI上下文展示',
    component: Layout,
    children: [
      {
        path: '', // ç©ºè·¯å¾„表示访问 '/dynamic-form' æ—¶åŠ è½½ Layout ç»„件
        path: '', // ç©ºè·¯å¾„表示访问 '/UIContentViewer' æ—¶åŠ è½½ Layout ç»„件
        component: () => import('@/views/base/UIContentViewer'),
        props: true
      }
@@ -103,14 +103,31 @@
  },
  {
    path: '/referIndex',
    name: '动态表格页面',
    name: '参照示例',
    component: Layout,
    children: [
      {
        path: '', // ç©ºè·¯å¾„表示访问 '/dynamic-form' æ—¶åŠ è½½ Layout ç»„件
        path: '', // ç©ºè·¯å¾„表示访问 '/referIndex' æ—¶åŠ è½½ Layout ç»„件
        component: () => import('@/views/test/referDemo/index'),
        props: true
      }
    ]
  },
  {
    path: '/UIDefineShow/:uiDefineOid',
    name: 'UI定义详情',
    component: Layout,
    children: [
      {
        path: '', // ç©ºè·¯å¾„表示访问 '/referIndex' æ—¶åŠ è½½ Layout ç»„件
        component: () => import('@/views/modelingMenu/ui/uiDefine/rightRegion/plShow'),
        props: true
      }
    ],
    meta:{
      keepAlive: true,
      isTab: true,
      isAuth: true
    }
  }
]

 Source/plt-web/plt-web-ui/src/util/basic-option.js

@@ -10,6 +10,7 @@
  headerAlign: 'center',
  align: 'center',
  emptyText: '暂无内容',
  tip:false,
  // selection æ˜¯å¦æœ‰é€‰æ‹©æ¡†
  // indexFixed:true/left/right, å›ºå®šåˆ—
  // menu:false, æ˜¯å¦æœ‰æ“ä½œæ 

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/attributePool/index.vue

@@ -21,8 +21,7 @@
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="rowSaveHandlerClick">创建</el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="allDelHandler">删除</el-button>
            <el-button icon="el-icon-view" plain size="small" type="primary" @click="chekView">查看使用范围</el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadTemplateHandler">下载导入模板
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="downloadTemplateHandler">下载导入模板</el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadHandler">导入</el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="downLoadHandler">导出</el-button>
          </template>
@@ -45,19 +44,25 @@
              <template slot="label">
                åç§°
              </template>
              {{ lastItem.id }}
              <div style="width: 330px">
                {{ lastItem.id }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                æ ‡ç­¾
              </template>
              <div style="width: 330px">
              {{ lastItem.name }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                æè¿°
              </template>
              <div style="width: 330px">
              {{ lastItem.description }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
@@ -75,9 +80,11 @@
              <template slot="label">
                å…è®¸ä¸ºç©º
              </template>
              <div style="width: 330px">
              <el-tag :type="lastItem.nullableFlag ? 'success' : 'danger'">
                {{ lastItem.nullableFlag ? '是' : '否' }}
              </el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="accuracy">
              <template slot="label">
@@ -89,13 +96,17 @@
              <template slot="label">
                é•¿åº¦
              </template>
              <div style="width: 330px">
              {{ lastItem.attrLength }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                é»˜è®¤å€¼
              </template>
              <div style="width: 330px">
              {{ lastItem.defaultValue }}
              </div>
            </el-descriptions-item>
          </el-descriptions>

@@ -106,33 +117,43 @@
              <template slot="label">
                å½“前类型
              </template>
              <div style="width: 345px">
              {{ lastItem.version ? '链接类型' : '业务类型' }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                å½“前类型值
              </template>
              <div style="width: 345px">
              {{ lastItem.version ? lastItem.linkTypeName : lastItem.btmTypeId }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item v-if="lastItem.version">
              <template slot="label">
                å½“前版本次
              </template>
              <div style="width: 345px">
              {{ lastItem.version }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                ä½¿ç”¨æžšä¸¾
              </template>
              <div style="width: 345px">
              <el-tag :type="lastItem.enumId ? 'success' : 'danger'">
                {{ lastItem.enumId ? '是' : '否' }}
              </el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                å½“前枚举类型
              </template>
              <div style="width: 345px">
              {{ lastItem.enumId }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
@@ -153,21 +174,25 @@
              <template slot="label">
                ä½¿ç”¨æžšä¸¾
              </template>
              <div style="width: 330px">
              <el-tag :type="lastItem.enumFlag ? 'success' : 'danger'">
                {{ lastItem.enumFlag ? '是' : '否' }}
              </el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                æžšä¸¾ç±»åž‹
              </template>
              <div style="width: 330px">
              {{ lastItem.enumFlag }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                å–值范围
              </template>
              <div style="width: 330px; height: 80px;overflow: auto">
              <div style="width: 345px; height: 80px;overflow: auto">
                <el-tag v-for="item in rangeList" plain style="margin: 5px">{{ item }}</el-tag>
              </div>
            </el-descriptions-item>
@@ -206,9 +231,7 @@
        <el-row>
          <div class="addDialog">
            <div>

              <h3>属性项</h3>

              <el-col :span="12">
                <el-form-item label="名称：" prop="id">
                  <el-input v-model="form.id"></el-input>
@@ -576,6 +599,7 @@
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth:160,
        column
      },
      tableLoading: false,

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/attributePool/option.js

@@ -14,11 +14,13 @@
    label: '类型',
    prop: 'attributeDataTypeText',
    sortable: true,
    width:100
  },
  {
    label: '默认值',
    prop: 'defaultValue',
    sortable: true,
    width: 120
  },
  {
    label: '描述',

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/businessType/index.vue

@@ -2,38 +2,10 @@
  <el-container v-loading="createViewLoading">
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="createViewClickHandler">创建视图
            </el-button>
            <el-button class="miniBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       type="primary" @click="indexClickHandler">创建索引
            </el-button>
            <el-button icon="el-icon-menu" plain size="small" style="width: 82px;text-align: center;padding-left: 1px"
                       type="primary" @click="checkClickHandler">一致性检查
            </el-button>
            <el-button class="miniBtn" icon="el-icon-delete" plain size="small"
                       type="danger" @click="checkClickHandler">删除数据
            </el-button>
            <el-button class="smallBtn" plain size="small"
                       type="danger" @click="checkClickHandler">删除全部类型
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary" @click="checkViewClickHandler">查看使用范围
            </el-button>
          </div>
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">

          <!-- å·¦ä¾§æ ‘ -->
          <div style="height:  calc(100vh - 330px);">
          <div style="height:  calc(100vh - 190px);">
            <avue-tree ref="tree" v-loading="treeLoading" :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
@@ -48,7 +20,20 @@
    </el-aside>
    <el-main>
      <basic-container>
        <div style="display: flex;justify-content: center; height: 230px">
        <div>
          <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建</el-button>
          <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改</el-button>
          <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除</el-button>
          <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出</el-button>
          <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入</el-button>
          <el-button icon="el-icon-circle-plus-outline" plain size="small" type="primary" @click="createViewClickHandler">创建视图</el-button>
          <el-button icon="el-icon-circle-plus-outline" plain size="small" type="primary" @click="indexClickHandler">创建索引</el-button>
          <el-button icon="el-icon-menu" plain size="small" type="primary" @click="checkClickHandler">一致性检查</el-button>
          <el-button icon="el-icon-delete" plain size="small" type="danger" @click="checkClickHandler">删除数据</el-button>
          <el-button plain size="small" type="danger" @click="checkClickHandler">删除全部类型</el-button>
          <el-button plain size="small" type="primary" @click="checkViewClickHandler">查看使用范围</el-button>
        </div>
        <div style="display: flex;justify-content: center; height: 230px;margin-top: 10px;">
          <div class="descBox" style="max-height: 100px">
            <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
@@ -1703,18 +1688,6 @@

.headerCon > .el-button:nth-child(10) {
  margin-left: 0;
}

.miniBtn {
  width: 82px;
  text-align: center;
  padding-left: 7px;
}

.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}

.descBox {

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/linkType/index.vue

@@ -2,30 +2,9 @@
  <el-container v-loading="createViewLoading">
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除
            </el-button>
            <el-button icon="el-icon-view" plain size="small" type="primary">查看
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入
            </el-button>
            <el-button class="smallBtn" icon="el-icon-circle-plus-outline" plain size="small"
                       style="padding-left: 7px !important;"
                       type="primary" @click="createViewClickHandler">创建视图
            </el-button>
            <el-button class="smallBtn" icon="el-icon-menu" plain size="small" style="padding-left: 1px"
                       type="primary" @click="checkClickHandler">一致性检查
            </el-button>
          </div>
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
          <!-- å·¦ä¾§æ ‘ -->
          <div style="height:  calc(100vh - 300px);">
          <div style="height:  calc(100vh - 190px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
@@ -41,7 +20,16 @@

    <el-main>
      <basic-container>
        <div style="height: 380px">
        <div>
          <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建</el-button>
          <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改</el-button>
          <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">删除</el-button>
          <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出</el-button>
          <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入</el-button>
          <el-button icon="el-icon-circle-plus-outline" plain size="small" type="primary" @click="createViewClickHandler">创建视图</el-button>
          <el-button icon="el-icon-menu" plain size="small" type="primary" @click="checkClickHandler">一致性检查</el-button>
        </div>
        <div style="height: 380px;margin-top: 10px">
          <el-descriptions :column="2" border class="margin-top" size="medium">
            <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                  :labelStyle="descriptionOption.labelStyle">

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/statusPool/index.vue

@@ -32,8 +32,6 @@
        <el-button icon="el-icon-delete" plain size="small" type="text" @click="delRowClickHandler(row)">删除
        </el-button>
      </template>


    </avue-crud>

    <!-- æ–°å¢ž ä¿®æ”¹ -->

 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/versioning/index.vue

@@ -1,109 +1,30 @@
<template>
  <el-container>
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary"
                       @click="checkViewClickHandler">查看使用范围
            </el-button>
          </div>
          <!-- å·¦ä¾§æ ‘ -->
          <div style="height:  calc(100vh - 260px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
            </avue-tree>
          </div>
        </div>
      </basic-container>
    </el-aside>

    <el-main>
      <basic-container>
        <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息">
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.id"></i>
              åç§°
            </template>
            <el-tag v-if="nodeRow.id">{{ nodeRow.id }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.name"></i>
              æ ‡ç­¾
            </template>
            <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.jump"></i>
              è·³è·ƒå­—符
            </template>
            <el-tag v-if="nodeRow.jumpCharacter">{{ nodeRow.jumpCharacter }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.init"></i>
              åˆå§‹å€¼
            </template>
            <el-tag v-if="nodeRow.initialValue">{{ nodeRow.initialValue }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.length"></i>
              æ­¥é•¿
            </template>
            <el-tag v-if="nodeRow.stepLength">{{ nodeRow.stepLength }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.left"></i>
              å‰ç¼€
            </template>
            <el-tag v-if="nodeRow.prefixion">{{ nodeRow.prefixion }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.right"></i>
              åŽç¼€
            </template>
            <el-tag v-if="nodeRow.suffix">{{ nodeRow.suffix }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                :labelStyle="descriptionOption.labelStyle">
            <template slot="label">
              <i :class="icons.desc"></i>
              æè¿°
            </template>
            <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </basic-container>
    </el-main>

  <basic-container>
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      :table-loading="loading"
      @refresh-change="getTableList"
      @selection-change="selectChange"
      @row-click="rowClickHandler">
      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建</el-button>
        <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
        </el-button>
        <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
        </el-button>
        <el-button icon="el-icon-view" plain size="small" type="primary"
                   @click="checkViewClickHandler">查看使用范围
        </el-button>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button icon="el-icon-edit" size="small" type="text" @click="editClickHandler(scope.row)">编辑
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="delClickHandler(scope.row)">删除
        </el-button>
      </template>
    </avue-crud>
    <!-- æ–°å¢ž ä¿®æ”¹ -->
    <el-dialog
      v-dialogDrag
@@ -166,7 +87,7 @@

    <!-- å¯¼å…¥ -->
    <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
                 @updata="getTreeList"></upload-file>
                 @updata="getTableList"></upload-file>

    <!-- æŸ¥çœ‹ä½¿ç”¨èŒƒå›´ -->
    <el-dialog
@@ -187,7 +108,7 @@
      >
      </avue-crud>
    </el-dialog>
  </el-container>
  </basic-container>
</template>

<script>
@@ -206,6 +127,57 @@
  name: "index",
  data() {
    return {
      loading: false,
      data: [],
      option: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        calcHeight: -30,
        column: [
          {
            label: '名称',
            prop: 'id',
            sortable: true,
          },
          {
            label: '标签',
            prop: 'name',
            sortable: true,
          },
          {
            label: '跳跃字符',
            prop: 'jumpCharacter',
            sortable: true,
          },
          {
            label: '初始值',
            prop: 'initialValue',
            sortable: true,
          },
          {
            label: '步长',
            prop: 'stepLength',
            sortable: true,
          },
          {
            label: '前缀',
            prop: 'prefixion',
            sortable: true,
          },
          {
            label: '后缀',
            prop: 'suffix',
            sortable: true,
          },
          {
            label: '描述',
            prop: 'description',
            sortable: true,
          },
        ]
      },
      checkViewVisible: false,
      checkViewData: [],
      checkViewDataSearch: [],
@@ -296,25 +268,24 @@
        right: 'el-icon-caret-right',
        desc: 'el-icon-chat-line-square'
      },
      selectList: [],
      lastIndex: null,
    }
  },
  created() {
    this.getTreeList();
    this.getTableList();
  },
  methods: {
    // å·¦ä¾§æ ‘查询
    getTreeList() {
    getTableList() {
      this.loading = true;
      getVersionRuleAllList().then(res => {
        const data = res.data.data;
        this.treeData = data;
        this.data = data;
        this.loading = false;
      }).catch(err => {
        this.$message.error(err)
      });
    },

    // å·¦ä¾§æ ‘行点击
    nodeClick(row) {
      this.nodeRow = row;
    },

    // åˆ›å»ºæŒ‰é’®
@@ -324,14 +295,10 @@
    },

    // ä¿®æ”¹æŒ‰é’®
    editClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
        this.$message.error('请至少选择一条数据！');
        return;
      }
    editClickHandler(row) {
      this.form = {...row};
      this.visible = true;
      this.dialogTitle = 'edit';
      this.form = this.nodeRow;
    },

    // æ–°å¢žä¿®æ”¹å¯¹è¯æ¡†å…³é—­
@@ -359,7 +326,7 @@
          saveFunction(this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.obj);
              this.getTreeList();
              this.getTableList();
              this.visible = false;
            } else {
              this.$message.error(res.data.obj);
@@ -374,22 +341,17 @@
    },

    // åˆ é™¤æŒ‰é’®
    delClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
        this.$message.error('请至少选择一条数据！');
        return;
      }
    delClickHandler(row) {
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const list = [this.nodeRow];
        const list = [row];
        deleteVersionRule(list).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTreeList();
            this.nodeRow = {};
            this.getTableList();
          }
        })
      }).catch(() => {
@@ -402,12 +364,17 @@

    // å¯¼å‡º
    exportClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据！');
        return;
      }

      exportVersionRule({vrNames: this.nodeRow.id}).then(res => {
      if (this.selectList.length > 1) {
        this.$message.error('只能选择一条数据！');
        return;
      }

      exportVersionRule({vrNames: this.selectList[0].id}).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
      }).catch(err => {
@@ -422,11 +389,16 @@

    // æŸ¥çœ‹ä½¿ç”¨èŒƒå›´
    checkViewClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据！');
        return;
      }
      getUsedVersionRuleList({vrName: this.nodeRow.id}).then(res => {

      if (this.selectList.length > 1) {
        this.$message.error('只能选择一条数据！');
        return;
      }
      getUsedVersionRuleList({vrName: this.selectList[0].id}).then(res => {
        if (res.data.code === 200) {
          this.checkViewVisible = true;
          const data = res.data.data;
@@ -458,6 +430,27 @@
    checkHandleReset() {
      this.checkViewData = this.checkViewDataSearch;
    },

    // é€‰æ‹©æ¡†
    selectChange(row) {
      this.selectList = row;
    },

    // ç‚¹å‡»è¡Œ
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

  }
}
</script>

 Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/linkTypeQuery/formDialog.vue

@@ -528,7 +528,7 @@
    //获取查询模板定义下拉
    getTemp(btmName,linkFlag) {
      if (btmName) {
        queryTemplateListByAttr({btmName: btmName, linkFlag: linkFlag,direction:this.form.direction}).then(res => {
        queryTemplateListByAttr({btmName: btmName, linkFlag: linkFlag,direction:linkFlag?null:this.form.direction}).then(res => {
          const data = res.data.data.map(item => {
            item.label = item.name + '-' + (item.linkTypeName || item.btmName);
            item.value = item.name;

 Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue

@@ -251,7 +251,7 @@
        this.tableLoading = false;
      })
    },
    selectHandler(selection, row){debugger;
    selectHandler(selection, row){
      this.dialogSelectionRow=selection
    },
    changeTemp(data) {

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue

@@ -184,6 +184,8 @@
        });
        this.treeData = data;
        this.treeLoading = false;
      }).catch(error => {
        loading.close();
      });
    },

@@ -384,12 +386,10 @@
        this.$message.error('请至少选择一条数据');
        return;
      }
      console.log(this.selectList);
      const params = {
        ids: this.selectList.map(item => item.id).join(',')
      }
      deleteByIds(params).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success('删除成功');
          this.getRightPortalVIDatas();
@@ -397,7 +397,14 @@
      })

    },

    rowDeleteHandler(row){
      deleteByIds({ids:row.id}).then(res => {
        if (res.data.code === 200) {
          this.$message.success('删除成功');
          this.getRightPortalVIDatas();
        }
      })
    },
    // å¤šé€‰
    selectChangeHandler(row) {
      this.selectList = row;

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

@@ -6,12 +6,12 @@
          <!-- å·¦ä¾§æ ‘         -->
          <div style="height:  calc(100vh - 190px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
              <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
                  <i class="el-icon-s-promotion"></i>
                    {{ (node || {}).label }}
                </span>
              </span>
            </avue-tree>
          </div>
        </div>
@@ -20,36 +20,323 @@

    <el-main>
      <basic-container>

        <avue-crud
          ref="crud"
          :data="data"
          :option="option"
          :page.sync="page"
          :table-loading="tableLoading"
          @size-change="sizeChange"
          @current-change="currentChange"
          @selection-change="selectChangeHandler"
          @search-change="handleSearch"
          @search-reset="handleReset"
          @row-click="rowClickHandler">
          <template slot="menuLeft">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">创建</el-button>
            <!--<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">修改</el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>-->
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出</el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">导入</el-button>
            <el-button icon="el-icon-place" plain size="small" type="primary" @click="">授权</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-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆</el-button>
          </template>
          <template slot="plName" slot-scope="{row}">
            <el-link type="primary" @click="linkClickHandler(row)">{{ row.plName }}</el-link>
          </template>
        </avue-crud>
        <!-- åˆ›å»ºç¼–辑自定义对话框    -->
        <el-dialog
          v-dialogDrag
          v-loading="dialogLoading"
          :title="dialogType === 'add' ? ' åˆ›å»º ä¸Šä¸‹æ–‡' : '编辑 ä¸Šä¸‹æ–‡'"
          :visible.sync="dialogVisible"
          append-to-body="true"
          class="avue-dialog"
          :close-on-click-modal="false"
          width="500px"
          @close="dialogClose"
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="95px" size="small">
            <el-form-item label="名称：" prop="plName">
              <el-input v-model="form.plName"></el-input>
            </el-form-item>
            <el-form-item label="UI上下文：" prop="plCode">
              <el-input v-model="form.plCode"></el-input>
            </el-form-item>
            <el-form-item label="显示：" prop="plIsShow">
              <el-checkbox-group v-model="form.plIsShow">
                <el-checkbox label="导航区"></el-checkbox>
                <el-checkbox label="控制区"></el-checkbox>
                <el-checkbox label="操作区"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="描述：" prop="plDesc">
              <el-input type="textarea" :rows="5" v-model="form.plDesc"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="saveHandler">ç¡® å®š</el-button>
          </span>
        </el-dialog>
        <!-- å…‹éš†    -->
        <el-dialog
          key="cloneDialog"
          v-dialogDrag
          title="克隆"
          :visible.sync="cloneDialogVisible"
          append-to-body="true"
          class="avue-dialog"
          width="500px"
          @close="cloneDialogClose"
        >
          <avue-form ref="cloneForm" :option="cloneOption" v-model="cloneForm"></avue-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cloneDialogClose">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="cloneSaveHandler">ç¡® å®š</el-button>
          </span>
        </el-dialog>
        <!-- å¯¼å‡º    -->
        <el-dialog
          key="cloneDialog"
          v-dialogDrag
          title="导出"
          :visible.sync="expDialogVisible"
          append-to-body="true"
          class="avue-dialog"
          width="500px"
          @close="expDialogVisible=false"
        >
          <div style="height:  70%;min-height: 300px">
            <avue-tree ref="expTree" :data="expTreeData" :option="expOption"></avue-tree>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="expDialogVisible=false">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="exportData">ç¡® å®š</el-button>
          </span>
        </el-dialog>
      </basic-container>
      <!-- å¯¼å…¥ -->
      <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" :fileData="fileData" title="导入"
                   @updata="getTableList" @upfaildata="upFail"></upload-file>
      <el-dialog v-dialogDrag
                 :title="dialog.title"
                 :visible.sync="dialog.showDialog"
                 :fullscreen="true"
                 :append-to-body="true"
                 class="avue-dialog"
                 :destroy-on-close="true"
                 :close-on-click-modal="false"
                 @close="dialog.showDialog=false">
          <pl-show :uiDefineData="dialog.uiDefineData"></pl-show>
      </el-dialog>
    </el-main>

  </el-container>
</template>

<script>
import {getBizTypes} from "@/api/modeling/businessType/api";
import {getBizTree,gridUIContextData,saveUIContextData,updateUIContextData,delUIContextData, cloneUIContextData ,getExpContextTree,expUIContextData} from "@/api/UI/uiDefine";
import basicOption from "@/util/basic-option";
import func from "@/util/func";
import plShow from "@/views/modelingMenu/ui/uiDefine/rightRegion/plShow";
export default {
  name: "index",
  components:{plShow},
  data() {
    return {
      dialog: {
        showDialog: false,
        title: "上下文详情",
        loading: false,
        uiDefineData:null
      },
      tipList: [],
      upFileType: ['xls'],
      fileUrl: 'api/uiManagerController/impUIContextData',
      fileData:{},
      lastIndex: null,
      treeOption: {
        height: 'auto',
        defaultExpandedKeys: ['topNode'],
        defaultExpandAll: true,
        menu: false,
        addBtn: false,
        props: {
          label: 'label',
          label: 'text',
          value: 'oid',
          children: 'children'
        }
      },
      nodeRow: {},
      treeData: [{
        label: '业务类型树',
        oid: 'topNode',
        children: []
      }],
      treeData: [],
      searchParams: {
        'conditionMap[txtName]': '',
        'conditionMap[txtCode]': '',
      },
      tableLoading: false,
      page: {
        currentPage: 1,
        pageSize: 50,
        total: 0,
        pageSizes: [10, 30, 50, 100],
      },
      selectList: [],
      option: {
        ...basicOption,
        calcHeight: -40,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        searchMenuSpan: 6,
        align:'left',
        column: [{
          label: '名称',
          prop: 'plName',
          search: true
        }, {
          label: 'UI上下文',
          prop: 'plCode',
          search: true,
          sortable: true,
        }, {
          label: '导航区',
          prop: 'plIsShowNavigator',
          width: 130,
          align:'center',
          formatter: function (row, value) {
            if (row.plIsShowNavigator == 0) {
              return '不显示'
            } else {
              return '显示'
            }
          }
        }, {
          label: '控制区',
          prop: 'plIsShowForm',
          width: 130,
          align:'center',
          formatter: function (row, value) {
            if (row.plIsShowForm == 0) {
              return '不显示'
            } else {
              return '显示'
            }
          }
        }, {
          label: '操作区',
          prop: 'plIsShowTab',
          width: 130,
          align:'center',
          formatter: function (row, value) {
            if (row.plIsShowTab == 0) {
              return '不显示'
            } else {
              return '显示'
            }
          }
        }]
      },
      data: [],
      dialogLoading: false,
      dialogVisible: false,
      dialogType: '',
      form: {
        plName: '',
        plCode: '',
        plIsShow: [],
      },
      rules: {
        plName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        plCode: [{
          required: true,
          message: '请输入UI上下文',
          trigger: 'blur'
        }],
        plIsShow: [{
          required: true,
          message: '请选择显示区域',
          trigger: 'blur'
        }]
      },
      cloneDialogVisible:false,
      cloneOption: {
        submitBtn:false,
        emptyBtn:false,
        column: [{
          label: '克隆目标',
          prop: 'cloneTargetName',
          span:24,
          type: 'tree',
          clearable: true,
          dicData: [],
          defaultExpandAll:true,
          rules: [
            {
              required: true,
              message: '请选择克隆目标',
              trigger: 'blur'
            }
          ]
        }, {
          label: 'UI名称',
          prop: 'cloneName',
          span:24,
          type: 'input',
          rules: [
            {
              required: true,
              message: '请输入UI名称',
              trigger: 'blur'
            }
          ]
        }, {
          label: 'UI上下文',
          prop: 'cloneContextCode',
          span:24,
          type: 'input',
          rules: [
            {
              required: true,
              message: '请输入UI上下文',
              trigger: 'blur'
            }
          ]
        }]
      },
      cloneForm:{
        //克隆的源对象的信息
        sourcePLUILayout:null,
        cloneTargetName:'n',
        cloneName:'',
        cloneContextCode:''
      },
      expDialogVisible:false,
      expTreeData:[],
      expOption:{
        height: 'auto',
        filter:false,
        multiple:true,
        defaultExpandAll: true,
        menu: false,
        addBtn: false,
        props: {
          label: 'text',
          value: 'oid',
          children: 'children'
        }
      }
    }
  },
  created() {
@@ -59,12 +346,19 @@
    //树表查询
    getTreeList() {
      const loading = this.$loading({});
      getBizTypes().then(res => {
        const data = res.data.data.map(item => {
          item.attributes.label = item.attributes.id;
          return item.attributes;
      getBizTree().then(res => {
        this.treeData=[res.data.obj];
        const dicData = res.data.obj.children.map(item => {
          item.label=item.attributes.name;
          item.value=item.attributes.name;
          return item;
        });
        this.treeData[0].children = data;
        this.cloneOption.column[0].dicData=[{
          label:'业务类型树',
          value:'业务类型树',
          disabled: true,
          children:dicData
        }];
        loading.close();
      }).catch(error => {
        loading.close();
@@ -72,8 +366,294 @@
    },
    // æ ‘点击
    nodeClick(row) {
      this.nodeRow = row;
      if (row.oid) {
        this.nodeRow = row;
        this.tableLoading = true;
        this.getTableList();
      }
    },
    getTableList(){
      const params = Object.assign(this.searchParams,{
        'conditionMap[btmName]': this.nodeRow.attributes.name,
      })
      gridUIContextData(this.page.currentPage, this.page.pageSize, params).then(res => {
        this.data = res.data.data;
        this.page.total = res.data.total;
        this.$refs.crud.clearSelection();
        this.tableLoading = false;
      })
    },
    linkClickHandler(row){
      this.dialog.title='【'+row.plName+' - '+row.plCode+'】详情'
      this.dialog.uiDefineData=row;
      this.dialog.showDialog=true;
      return false;
      this.$router.push({
        path: '/UIDefineShow/:'+row.plOId,
        name: row.plName+'详情'
      });
    },
    sizeChange(val) {
      this.page.pageSize = val;
    },
    // é¡µç 
    currentChange(val) {
      this.page.currentPage = val;
    },
    // å¤šé€‰
    selectChangeHandler(row) {
      this.selectList = row;
    },
    // æœç´¢
    handleSearch(params, done) {
      this.searchParams = {
        'conditionMap[txtName]': params.plName,
        'conditionMap[txtCode]': params.plCode,
      };
      this.getTableList()
      done();
    },

    // é‡ç½®æœç´¢æ¡ä»¶
    handleReset() {
      this.searchParams = {};
      this.getTableList();
    },
    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    //创建
    addHandler(){
      if(this.nodeRow && this.nodeRow.oid){
        this.form.plIsShow=[];
        this.form.plRelatedType=this.nodeRow.attributes.name;
        this.dialogType = 'add';
        this.dialogVisible = true;
      }else {
        this.$message.error('请选择业务类型');
      }

    },
    editHandler(){
      if(this.selectList.length!=0){
        this.rowEditBtnClick(this.selectList[0]);
      }else {
        this.$message.error('请选择一条数据进行编辑');
      }
    },
    delHandler(){
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      const params = {
        oids: this.selectList.map(item => item.plOId).join(',')
      }
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUIContextData(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // å…³é—­å¯¹è¯æ¡†
    dialogClose() {
      this.dialogVisible = false;
      this.$refs.form.clearValidate();
      this.form = {
        plName: '',
        plCode: '',
        plDesc:'',
        plIsShow: [],
      }
    },
    // ä¿å­˜UI上下文
    saveHandler() {
      this.$refs.form.validate((valid,done) => {
        if (valid) {
          let params = {
            ...this.form
          }
          if(this.form.plIsShow.includes('导航区')){
            params.plIsShowNavigator=1
          }else {
            params.plIsShowNavigator=0
          }
          if(this.form.plIsShow.includes('控制区')){
            params.plIsShowForm=1;
          }else {
            params.plIsShowForm=0;
          }
          if(this.form.plIsShow.includes('操作区')){
            params.plIsShowTab=1;
          }else {
            params.plIsShowTab=0;
          }
          delete params.plIsShow;
          if (this.dialogType === 'add') {
            saveUIContextData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('添加成功');
                this.dialogClose();
                this.getTableList();
              }
            })
          } else if (this.dialogType === 'edit') {
            updateUIContextData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('修改成功');
                this.dialogClose()
                this.getTableList();
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    // å¯¼å‡º
    exportClickHandler() {
      if (this.selectList.length <= 0) {
        this.$message.error('请选择数据');
        return;
      }
      const params = {
        expDatas: this.selectList.map(item => item.plOId).join(',')
      }
      getExpContextTree(params).then(res => {
        this.expTreeData=[res.data.obj];
      })
      this.expDialogVisible=true;
    },
    exportData(){
      const params = {}
      const checkedDatas=this.$refs.expTree.getCheckedNodes();
      if (checkedDatas.length <= 0) {
        this.$message.error('请选择数据');
        return;
      }
      this.selectList.forEach(item=>{
        params[item.plOId]=checkedDatas.filter(checkitem => checkitem.parentId==item.plOId).map(checkitem => checkitem.oid).join(',')
      })
      expUIContextData(params).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
        this.expDialogVisible=false;
      }).catch(err => {
        this.$message.error(err);
      });
    },

    // å¯¼å…¥
    upLoadClickHandler() {
      this.fileData={
        isCovered:false,
        selectBtm:this.nodeRow.attributes.name
      }
      this.$refs.upload.visible = true;
    },
    //导入失败
    upFail(response){

    },
    // ç¼–辑按钮
    rowEditBtnClick(row) {
      this.form={
        ...row,
        plIsShow: [],
      };
      if(row.plIsShowNavigator){
        this.form.plIsShow.push('导航区')
      }
      if(row.plIsShowForm){
        this.form.plIsShow.push('控制区')
      }
      if(row.plIsShowTab){
        this.form.plIsShow.push('操作区')
      }
      this.dialogType = 'edit';
      this.dialogVisible = true;
    },
    // åˆ é™¤æŒ‰é’®
    rowDeleteHandler(row) {
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUIContextData({oids: row.plOId}).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //克隆
    rowCloneHandler(row){
      this.cloneForm={
        sourcePLUILayout:row,
        cloneTargetName:'',
        cloneName:row.plName+'_copy(0)',
        cloneContextCode:row.plCode+'_copy(0)',
      }
      this.cloneDialogVisible=true;
    },
    cloneSaveHandler(){
      this.$refs.cloneForm.validate((valid,done) => {
        if (valid) {
          cloneUIContextData(this.cloneForm).then(res => {
            if (res.data.code === 200) {
              this.$message.success('克隆成功');
              this.cloneDialogClose();
              this.getTableList();
            }
          })
        } else {
          return false;
        }
      });
    },
    cloneDialogClose(){
      this.cloneDialogVisible=false;
      this.cloneForm= {
        //克隆的源对象的信息
        sourcePLUILayout: null,
        cloneTargetName: '',
        cloneName: '',
        cloneContextCode: ''
      }
    }
  }
}
</script>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,433 @@
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="btnActionVisible"
    append-to-body="true"
    class="avue-dialog"
    title="选择Action"
    width="70%"
    @close="dialogClose">
    <el-container>
      <el-aside>
        <basic-container>
          <!-- å·¦ä¾§æ ‘ -->
          <div>
            <avue-tree
              ref="tree"
              v-model="treeForm"
              :data="treeData"
              :option="treeOption"
              node-key="value"
              @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
            </avue-tree>
          </div>
        </basic-container>
      </el-aside>

      <el-main>
        <basic-container>
          <div>
            <avue-crud
              ref="crud"
              v-model="form"
              :data="data"
              :option="option"
              :page.sync="page"
              :table-loading="tableLoading"
              @search-change="handleSearch"
              @search-reset="handleReset"
              @refresh-change="handleRefresh"
              @selection-change="selectChangeHandler"
              @row-click="rowClickHandler">
              <template slot="plTypeType" slot-scope="{row}">
                <el-tag :type="row.plTypeType === 'business' ? '' : 'success'">
                  {{ row.plTypeType === 'business' ? '业务类型' : '链接类型' }}
                </el-tag>
              </template>

            </avue-crud>
          </div>
        </basic-container>
      </el-main>


    </el-container>
    <span slot="footer" class="dialog-footer">
        <el-button @click="btnActionVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="actionSaveHandler">ç¡® å®š</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {
  getActionTree,
  getActionTableData,
} from '@/api/UI/Action/api'
import func from "@/util/func";
import basicOption from "@/util/basic-option";

export default {
  name: "index",
  data() {
    return {
      btnActionVisible: false,
      currenRow: {}, // action当前行信息
      topMethodsObj: {
        select: true,
        all: true,
        page: false
      },
      transferTitle: ['未选择', '已选择'],
      leftRoleData: [],
      rightRoleData: [],
      form: {},
      bottomTableLoading: false,
      bottomData: [],
      bottomOption: {
        ...basicOption,
        addBtn: false,
        calcHeight: -30,
        selection: false,
        refreshBtn: false,
        // height:'auto',
        column: [
          {
            label: '参数名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入参数名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '默认值',
            prop: 'defaultValue',
          },
          {
            label: '提示信息',
            prop: 'description',
            span: 24,
            type: 'textarea',
            rows: 4
          },
        ],
      },
      tableLoading: false,
      lastIndex: null,
      selectList: [],
      data: [],
      option: {
        ...basicOption,
        addBtn: false,
        height: 500,
        highlightCurrentRow: true,
        menu:false,
        column: [
          {
            label: '编号',
            prop: 'plCode',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'plName',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '类路径',
            prop: 'plCSClass',
            search: true,
            overHidden: true,
          },
          {
            label: '分类',
            prop: 'plActionCls',
            type: 'tree',
            hide: true,
            props: {
              label: 'name',
              value: 'id',
              children: 'childs'
            },
            rules: [
              {
                required: true,
                message: '请选择分类',
                trigger: 'blur'
              }
            ],
            dicData: []
          },
          {
            label: '链接地址',
            prop: 'plBSUrl',
            search: true,
          },
          {
            label: '类型',
            prop: 'plTypeType',
            search: true,
            type: 'select',
            dicData: [{
              label: '业务类型',
              value: 'business'
            }, {
              label: '链接类型',
              value: 'link'
            }],
            rules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '描述',
            prop: 'plDesc',
            search: true,
            overHidden: true,
          },
        ]
      },
      treeNodeRow: {},
      treeForm: {},
      treeOption: {
        addBtn: false,
        defaultExpandedKeys: ['root'],
        props: {
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        formOption: {
          column: [
            {
              label: '分类名称',
              prop: 'name',
              rules: [
                {
                  required: true,
                  message: '请输入分类名称',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '分类序号',
              prop: 'serialno',
              rules: [
                {
                  required: true,
                  message: '请输入分类序号',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '创建者',
              prop: 'creator',
              readonly: true,
            },
            {
              label: '创建时间',
              prop: 'createTime',
              readonly: true,
            },
            {
              label: '父主类',
              prop: 'pidName',
              readonly: true,
            },
            {
              label: '备注',
              prop: 'description'
            },
          ],
        }
      },
      treeData: [],
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    // å·¦ä¾§æ ‘请求
    getTreeList(status) {
      const params = {
        isExp: status ? true : false
      }
      getActionTree(params).then(res => {
        const data = res.data.obj;
        this.treeData = [data];
        const selectTreeData = this.option.column.find(item => item.prop === 'plActionCls'); // æ‰¾åˆ°action添加分类树
        selectTreeData.dicData = [data];
      })
    },

    // å·¦ä¾§æ ‘行点击
    nodeClick(row) {
      this.treeNodeRow = row;
      this.getRightTableList(row);
      this.bottomData = [];
    },

    // å¤´éƒ¨åˆ·æ–°æŒ‰é’®
    handleRefresh() {
      if (func.isEmptyObject(this.treeNodeRow)) {
        return;
      }
      this.getRightTableList(this.treeNodeRow);
    },

    // å³ä¾§è¡¨æ ¼ä¿¡æ¯
    getRightTableList(row) {
      this.tableLoading = true;
      const params = {
        plactioncls: row.id
      }
      getActionTableData(params).then(res => {
        const data = res.data.data;
        this.data = data;
        this.tableLoading = false;
      })
    },

    // è¡¨æ ¼å¤šé€‰
    selectChangeHandler(row) {
      this.selectList = row;
    },

    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      this.currenRow = row;
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    // æœç´¢
    handleSearch(params, done) {
      if (func.isEmptyObject(this.treeNodeRow)) {
        this.$message.error('请先在左侧选择节点后操作');
        return done();
      }
      this.tableLoading = true;
      const apiParams = {
        plactioncls: this.treeNodeRow.id === 'root' ? '' : this.treeNodeRow.id,
        ...params
      }

      getActionTableData(apiParams).then(res => {
        const data = res.data.data;
        this.data = data;
        this.tableLoading = false;
      })
      done();
    },

    // é‡ç½®æœç´¢æ¡ä»¶
    handleReset() {
      if (func.isEmptyObject(this.treeNodeRow)) {
        this.$message.error('请先在左侧选择节点后操作');
        return;
      }
      this.getRightTableList(this.treeNodeRow);
    },

    // ä¿å­˜action
    actionSaveHandler() {
      if (this.selectList.length != 1) {
        this.$message.error('只能选择一条数据');
        return;
      }
      this.$emit('updataAction', this.selectList[0]);
      this.dialogClose();
    },

    dialogClose(){
      this.btnActionVisible = false;
      this.data = [];
      this.$refs.tree.setCurrentKey(null);
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-scrollbar__wrap {
    overflow: auto !important;
  }

  .headerCon {
    .el-button {
      width: 82px;
    }
  }
}

.headerCon {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;

  .el-button + .el-button {
    margin-left: 5px;
  }

  .el-button {
    margin-top: 5px;
  }
}

.headerCon > .el-button:nth-child(4) {
  margin-left: 0;
}

.headerCon > .el-button:nth-child(7) {
  margin-left: 0;
}

.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}

</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1190 @@
<template>
  <div>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :table-loading="tableLoading"
      @row-del="rowDelHandler"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
      @refresh-change="handleRefresh"
      @selection-change="selectChangeHandler"
      @row-click="rowClickHandler">
      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-plus" plain size="small" type="primary"
                   @click="addClickHandler">增加
        </el-button>
        <el-button icon="el-icon-edit-outline" plain size="small" type="primary"
                   @click="btnDesignClickHandler">按钮设计
        </el-button>
      </template>

      <!-- eventKey以及eventValue显示区域 -->
      <template slot="bottomValueForm" slot-scope="scope">
        <avue-crud
          :data="eventData"
          :option="eventOption"
          @row-click="formDataRowClick">
          <template slot="menuLeft" slot-scope="scope">
            <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">创建</el-button>
          </template>

          <template slot="menu" slot-scope="scope">
            <el-button plain size="mini" type="danger" @click="formDataDelClickHandler(scope.row)">删除</el-button>
            <el-button plain size="mini" type="primary" @click="moveUp(scope.row)">上移</el-button>
            <el-button plain size="mini" type="primary" @click="moveDown(scope.row)">下移</el-button>
          </template>
        </avue-crud>
      </template>


      <!-- åˆ‡æ¢æœç´¢ç±»åž‹ æºå¯¹è±¡ ç›®æ ‡å¯¹è±¡æ˜¾ç¤ºlabel切换 -->
      <template slot="showTypeLabel" slot-scope="{}">
        <span v-if="form.templateType === '3'">顶级节点</span>
        <span v-else-if="form.templateType === '5'">业务类型</span>
        <span v-else-if="form.templateType === '6'">对象类型</span>
        <span v-else-if="form.searchTarger === '1'">源对象</span>
        <span v-else-if="form.searchTarger === '2'">目标对象</span>
      </template>
    </avue-crud>
    <el-dialog
      v-dialogDrag
      :visible.sync="btnDesignVisible"
      append-to-body="true"
      class="avue-dialog"
      title="配置按钮"
      width="75%"
      @close="dialogClose">
      <el-container v-loading="dialogLoading">
        <el-header style="height: 40px !important;">
          <div style="display: flex">
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="saveClickBtnHandler">保存
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="escClickBtnHandler">取消
            </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>
          </div>
        </el-header>
        <el-container>
          <el-aside width="20%">
            <basic-container>
              <div style="height:650px;">
                <avue-tree
                  ref="Tree"
                  :data="treeData"
                  :loading="treeLoading"
                  :option="treeOption"
                  node-key="value"
                  @node-click="nodeTreeClick">
                  <span slot-scope="{ node, data }" class="el-tree-node__label">
                    <span style="font-size: 14px">
                    <i class="el-icon-s-promotion"></i>
                      {{ (node || {}).label }}
                    </span>
                  </span>
                </avue-tree>
              </div>
            </basic-container>
          </el-aside>

          <el-main>
            <basic-container>
              <el-divider content-position="left">基础信息</el-divider>
              <el-form ref="form" :model="basicForm" :rules="rules" label-width="90px" size="small"
                       style="margin-top: 20px">
                <el-row>
                  <el-form-item :inline-message='true' label="编号：" prop="seq">
                    <el-input-number v-model="basicForm.seq" :disabled="disabledBtn" :max="9999" :min="1"
                                     controls-position="right"></el-input-number>
                  </el-form-item>

                  <el-form-item :inline-message='true' label="名称：" prop="label">
                    <el-col :span="14">
                      <el-input v-model="basicForm.label" :readonly="disabledBtn"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="Action：" prop="Action">
                    <el-col :span="14">
                      <div style="display: flex">
                        <el-input v-model="basicForm.actionName" :readonly="disabledBtn"></el-input>
                        <el-button :disabled="disabledBtn" size="mini" style="margin-left: 10px" type="success"
                                   @click="actionFoucus">选择
                        </el-button>
                      </div>
                    </el-col>
                  </el-form-item>

                  <el-col :span="12">
                    <el-form-item label="是否授权：" prop="resource">
                      <el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="0">是</el-radio>
                      <el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="1">否</el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="是否显示：" prop="show">
                      <el-radio v-model="basicForm.show" :disabled="disabledBtn" label="0">是</el-radio>
                      <el-radio v-model="basicForm.show" :disabled="disabledBtn" label="1">否</el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="显示方式：" prop="showType">
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="text">文字</el-radio>
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="image">图标</el-radio>
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="textandimage">文字和图标
                      </el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="提示信息：" prop="desc">
                      <el-input v-model="basicForm.desc" :readonly="disabledBtn" type="textarea"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>

              <el-divider content-position="left">参数信息</el-divider>
              <avue-crud
                ref="paramsCrud"
                v-model="paramsForm"
                :data="paramsData"
                :option="paramsOption"
                style="margin-top: 20px"
                @row-save="paramsRowSave"
                @row-update="paramsRowUpdate">
                <template slot="menuLeft" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary"
                             @click="paramsRowAddClickHandler">创建
                  </el-button>
                </template>

                <template slot="menu" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-edit" size="small" type="text"
                             @click="paramsRowEditHandler(scope.row)">修改
                  </el-button>
                  <el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text"
                             @click="paramsRowDeleteHandler(scope.row)">删除
                  </el-button>
                </template>

              </avue-crud>
            </basic-container>
          </el-main>
        </el-container>
      </el-container>
    </el-dialog>
    <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
  </div>
</template>

<script>
import basicOption from "@/util/basic-option";
import func from "@/util/func";
import {
  getPLPageDefinations,
  getBtmDatasByPage,
  getPortalVIDatasByPage,
  getQTInfoDatasByPage,
  getTabButtons,
  addTapButton,
  updateTapButton, getTabByContextIdAndType
} from "@/api/UI/uiDefine";
import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action';

export default {
  props: {
    sourceData: {
      type: Object,
      default: () => {
      }
    },
    height: {
      type: String,
      default: () => "auto"
    }
  },
  components: {
    actionDialog
  },
  name: "index",
  data() {
    return {
      paramsForm:{},
      eventOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        height: 200,
        column: [
          {
            label: 'EventKey',
            prop: 'eventKey',
            type: 'select',
            value: 'SelectionEvent',
            dicData: [
              {
                label: 'SelectionEvent',
                value: 'SelectionEvent'
              },
              {
                label: 'DBClickEvent',
                value: 'DBClickEvent'
              },
              {
                label: 'ClickEvent',
                value: 'ClickEvent'
              }
            ],
            cell: true
          },
          {
            label: 'EventValue',
            prop: 'eventValue',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入eventValue',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      eventData: [],
      btnActionVisible: false,
      dialogLoading: false,
      saveType: '',
      disabledBtn: true,
      paramsData: [],
      nodeTreeRow: {},
      paramsOption: {
        ...basicOption,
        height: 260,
        addBtn: false,
        tip: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        column: [
          {
            label: '名称',
            prop: 'name',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '值',
            prop: 'value',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入值',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      rules: {
        seq: [
          {required: true, message: '请输入编号', type: 'number', trigger: 'blur'},
        ],
        label: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
      },
      // æŒ‰é’®è®¾è®¡ åŸºç¡€ä¿¡æ¯
      basicForm: {
        seq: 1
      },
      treeData: [],
      treeOption: {
        menu: false,
        addBtn: false,
        defaultExpandedKeys: ['parentNode'],
        props: {
          label: 'label',
          value: 'oId',
          children: 'children',
        },
      },
      treeLoading: false,
      btnDesignVisible: false,
      FormData: [],
      form: {},
      data: [],
      option: {
        ...basicOption,
        height: this.height,
        addBtn: false,
        index: true,
        calcHeight: -30,
        column: [
          {
            label: '名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编号',
            prop: 'seq',
            hide: false,
            rules: [
              {
                required: true,
                message: '请输入编号',
                trigger: 'blur'
              }
            ],
          },
          {
            label: 'UI解析类型',
            prop: 'uiParser',
            hide: true,
          },
          {
            label: '扩展属性',
            prop: 'extAttr',
            hide: true,
          },
          {
            label: '模板类型',
            prop: 'templateType',
            type: 'radio',
            span: 24,
            value: '1',
            dicData: [
              {
                label: 'Table(表格)',
                value: '1'
              },
              {
                label: 'Custom（自定义模板）',
                value: '2'
              },
              {
                label: 'TreeTable(树表)',
                value: '3',
              },
              {
                label: 'Form(表单)',
                value: '4',
              },
              {
                label: 'Tree(树)',
                value: '5',
              },
              {
                label: 'UILayout(UI定义)',
                value: '6',
              }
            ],
            formatter: (row) => {
              const val = this.templateTypeValueHandler(row.templateType);
              return val;
            },
            change: (val) => {
              console.log(val);
              const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
              searchTarger.display = true; // åˆ‡æ¢é»˜è®¤å±•ç¤ºæœç´¢ç±»åž‹
              // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨æ ¼
              this.templateTypeTable(val.value === '1');
              // æ¨¡æ¿ç±»åž‹ä¸ºè‡ªå®šä¹‰æ¨¡æ¿
              this.templateTypeCustom(val.value === '2');
              // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘表
              this.templateTypeTreeTable(val.value === '3');
              // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨å•
              this.templateTypeForm(val.value === '4');
              // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘
              this.templateTypeTree(val.value === '5');
              // æ¨¡æ¿ç±»åž‹ä¸ºUI定义
              this.templateTypeUI(val.value === '6');
            }
          },
          {
            label: '显示类型',
            prop: 'navigatorType',
            type: 'radio',
            span: 24,
            value: '1',
            hide: true,
            dicData: [
              {
                label: '不显示',
                value: '1'
              },
              {
                label: '显示角色',
                value: '2'
              },
              {
                label: '显示Folder',
                value: '3',
              },
            ],
          },
          {
            label: '搜索类型',
            prop: 'searchTarger',
            display: true,
            type: 'radio',
            value: '1',
            span: 24,
            dicData: [
              {
                label: '本对象属性',
                value: '1'
              },
              {
                label: '关联对象属性',
                value: '2'
              },
            ],
            formatter: (row) => {
              return row.searchTarger === '1' ? '本对象属性' : '关联对象属性';
            },
            change: (val) => {
              // å¦‚果模板类型是表格、 æ ‘表 ã€ è¡¨å• åˆ‡æ¢å¯¹è±¡å±žæ€§çš„时候，如果是本对象属性不展示链接类型，否则展示链接类型
              if (['1', '3', '4'].includes(this.form.templateType)) {
                const obj = this.option.group[0].column.find(item => item.prop === 'linkType');
                obj.display = val.value !== '1';
              }
            }
          },
          {
            label: '描述',
            prop: 'description',
            display: false
          },
        ],
        group: [
          {
            label: '',
            arrow: false,
            prop: 'group1',
            column: [
              {
                label: '源对象',
                prop: 'showType',
                type: 'table',
                display: false,
                placeholder: "请输入内容",
                props: {
                  label: 'name',
                  value: 'name'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'name'
                  }, {
                    label: '标签',
                    prop: 'label'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  //page分页
                  // ä¸ç®¡æ˜¯æœç´¢ è¿˜æ˜¯é¦–次加载都会触发page æ‰€ä»¥åªéœ€è¦æ‹¿page存在与否进行请求就可以 å¦‚果再去判断data搜索 æˆ–者value初次加载就会重复请求
                  if (page) {
                    const params = {
                      "conditionMap[filterInputValue]": value ? value.name : ''
                    };
                    getBtmDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '链接类型',
                prop: 'linkType',
                type: 'table',
                display: false,
                props: {
                  label: 'viName',
                  value: 'viName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'viName'
                  }, {
                    label: '类型',
                    prop: 'viType'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.viName : '',
                    };
                    getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '选择模板',
                prop: 'showTypea',
                display: false,
                type: 'table',
                props: {
                  label: 'viName',
                  value: 'viName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'viName'
                  }, {
                    label: '类型',
                    prop: 'viType'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.viName : '',
                    };
                    getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: 'UI定义',
                prop: 'UI',
                type: 'table',
                display: false,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '查询类型',
                prop: 'searchType',
                display: false,
                type: 'radio',
                span: 24,
                dicData: [
                  {
                    label: '业务类型',
                    value: '1'
                  },
                  {
                    label: '链接类型',
                    value: '2'
                  }
                ]
              },
              {
                label: '查询对象类型',
                prop: 'searchObjType',
                type: 'table',
                display: false,
                labelWidth: 100,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '查询模板',
                prop: 'showTypes',
                type: 'table',
                display: false,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '控制路径',
                prop: 'kzlj',
                display: false,
                type: 'textarea',
                rows: 3
              },
              {
                label: '根节点显示表达式',
                prop: 'genjiedian',
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '树节点显示表达式',
                prop: 'shujiedian',
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '参照树设置',
                prop: 'canzhaoshu',
                display: false,
              },
              {
                label: '分隔符',
                prop: 'fgf',
                display: false,
              },
              {
                label: '展开方式',
                prop: 'zkfs',
                display: false,
                type: 'radio',
                dicData: [
                  {
                    label: '逐级展开',
                    value: '1'
                  },
                  {
                    label: '全部展开',
                    value: '2'
                  }
                ]
              },
            ]
          },
          {
            label: '',
            arrow: false,
            prop: 'group2',
            column: [
              {
                label: '',
                prop: 'bottomValue',
                span: 24,
                labelWidth: 10
              },
            ]
          }
        ],
      },
      tableLoading: false,
      lastIndex: null,
      selectList: [],
      formDataRow: {},
    }
  },
  watch: {
    sourceData: {
      handler(val) {
        if (val && val.plOId) {
          this.getTableList()
        } else {
          this.data = [];
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {},
  methods: {
    //获取列表数据
    getTableList() {
      const params = {
        pageContextOId: this.sourceData.plOId
      }
      getPLPageDefinations(params).then(res => {
        this.data = res.data.data;
        this.selectList = [];
        this.$refs.crud.clearSelection();
        this.tableLoading = false;
      })
    },
    // æ ¹æ®ä¸åŒå€¼åŒºåˆ†ç±»åž‹
    templateTypeValueHandler(val) {
      const componentMap = {
        '1': '表格',
        '2': '自定义模板',
        '3': '树表',
        '4': '表单',
        '5': '树',
        '6': 'UI定义',
      };

      return componentMap[val] || ""; // å¦‚果为空 è¿”回空
    },

    // è¡¨æ ¼å¤šé€‰
    selectChangeHandler(row) {
      this.selectList = row;
    },

    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    // å¢žåŠ 
    addClickHandler() {
      console.log(this.sourceData);
      if (!this.sourceData || !this.sourceData.plOId) {
        this.$message.error('请在上方选择一条数据后进行添加');
        return;
      }
      this.$refs.crud.rowAdd();
    },

    // å¯¹è¯æ¡†è¡¨æ ¼è¡Œç‚¹å‡»
    formDataRowClick(row) {
      this.formDataRow = row;
    },

    // å¯¹è¯æ¡†è¡¨æ ¼æ·»åŠ 
    formDataAddClickHandler() {
      // if (!this.form.eventKey) {
      //   this.$message.error('请选择EventKey');
      //   return;
      // }
      //
      // if (!this.form.eventValue) {
      //   this.$message.error('请输入EventValue');
      //   return;
      // }
      //
      // if (this.eventData.length >= 1) {
      //   const eventValueStatus = this.eventData.some(item => item.eventValue === this.form.eventValue);
      //
      //   if (eventValueStatus) {
      //     this.$message.error('已存在相同的 EventValue，不能重复添加');
      //     return;
      //   }
      // }
      const obj = {
        index: this.eventData.length,
        eventKey: this.form.eventKey || 'SelectionEvent',
        eventValue: this.form.eventValue,
        $cellEdit: true
      }

      this.eventData.push(obj);
    },

    // å¯¹è¯æ¡†è¡¨æ ¼åˆ é™¤
    formDataDelClickHandler(row) {
      this.eventData = this.eventData.filter(item => item.index !== row.index);
    },

    // æ¨¡æ¿ç±»åž‹æ˜¾ç¤ºéšè—æ–¹æ³•
    updateDisplay(val, showTpeMap) {
      const groupList = this.option.group[0].column; // èŽ·å–第一层group所有数据
      groupList.forEach(item => {
        item.display = showTpeMap.includes(item.prop) ? val : !val; // æ›´æ–°display
      });
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨æ ¼
    templateTypeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè‡ªå®šä¹‰æ¨¡æ¿
    templateTypeCustom(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['kzlj']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘表
    templateTypeTreeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes', 'zkl', 'zkfs']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨å•
    templateTypeForm(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘
    templateTypeTree(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['showType', 'showTypes', 'genjiedian', 'shujiedian', 'canzhaoshu', 'fgf', 'zkfs', 'linkType']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºUI定义
    templateTypeUI(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['showType', 'UI', 'searchType', 'searchObjType', 'showTypes']);
    },

    // æŸ¥æ‰¾æ•°ç»„中对象索引
    findIndexByEventValue(array, eventValue) {
      return array.findIndex(item => item.eventValue === eventValue);
    },

    // ä¸Šç§»
    moveUp(row) {
      const index = this.findIndexByEventValue(this.eventData, row.eventValue);
      if (index > 0) {
        // ä½¿ç”¨ splice æ¥æ¨¡æ‹Ÿäº¤æ¢
        const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // ç§»é™¤ index-1 çš„元素 å¹¶åœ¨ç›¸åŒä½ç½®æ’å…¥ index çš„元素 è¿”回被移除的元素
        this.eventData.splice(index, 1, temp); // åœ¨ index ä½ç½®æ’入之前被移除的元素
      }
    },

    // ä¸‹ç§»
    moveDown(row) {
      const index = this.findIndexByEventValue(this.eventData, row.eventValue);
      const length = this.eventData.length;
      if (index < length - 1) {
        const temp = this.eventData[index];
        this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]);
      }
    },

    // æŒ‰é’®è®¾è®¡å…³é—­å¯¹è¯æ¡†
    dialogClose() {

    },

    // æŒ‰é’®è®¾è®¡
    btnDesignClickHandler() {
      if (this.selectList.length != 1) {
        this.$message.error('请选择一条数据');
        return;
      }
      this.btnDesignVisible = true;
      this.getTabBtnTree();
    },

    // å·¦ä¾§æ ‘请求
    getTabBtnTree() {
      const params = {
        pageDefinationOid: this.selectList[0].id
      }
      this.treeLoading = true;
      getTabButtons(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData = [{
            label: this.selectList[0].name,
            oId: 'parentNode',
            children: data
          }];
          this.treeLoading = false;
        } else {
          this.$message.error('请检查控制台错误');
        }
      })
    },

    // æŒ‰é’®è®¾è®¡è¡Œç‚¹å‡»
    nodeTreeClick(row) {
      this.nodeTreeRow = row;
      this.basicForm = {...row};
      this.paramsData = row.buttonParams ? Object.entries(row.buttonParams).map(([key, value]) => ({
        name: key,
        value: value
      })) : [];
      this.disabledBtn = true;
    },

    // æŒ‰é’®è®¾è®¡å‚数信息删除
    paramsRowDeleteHandler(row) {
      this.paramsData.splice(row.$index, 1)
    },

    // æŒ‰é’®è®¾è®¡ä¿¡æ¯å‚数信息修改
    paramsRowEditHandler(row) {
      this.$refs.paramsCrud.rowEdit(row);
    },

    // æŒ‰é’®è®¾è®¡å‚数信息添加按钮
    paramsRowAddClickHandler() {
      this.$refs.paramsCrud.rowAdd();
    },

    // æŒ‰é’®è®¾è®¡å‚数信息修改保存
    paramsRowUpdate(row, index, done, loading) {
      this.paramsData.splice(index, 1, row);
      done();
    },

    // æŒ‰é’®è®¾è®¡å‚数信息保存
    paramsRowSave(row, done, loading) {
      if (!row.name) {
        this.$message.error('名称不能为空');
        return loading();
      }

      if (!row.value) {
        this.$message.error('值不能为空');
        return loading();
      }

      this.paramsData.push(row);
      done();
    },

    // æŒ‰é’®è®¾è®¡æ·»åŠ 
    addClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行添加');
        return;
      }
      this.disabledBtn = false;
      this.basicForm = {};
      this.paramsData = [];
      this.saveType = 'add';
    },

    // æŒ‰é’®è®¾è®¡ä¿®æ”¹
    editClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行修改');
        return;
      }

      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许修改');
        return;
      }

      this.disabledBtn = false;
      this.saveType = 'edit';
    },

    // æŒ‰é’®è®¾è®¡å–消
    escClickBtnHandler() {
      this.disabledBtn = true;
      if (this.saveType === 'add') {
        this.$refs.Tree.setCurrentKey(null);
      }
    },

    // æŒ‰é’®è®¾è®¡ä¿å­˜
    saveClickBtnHandler() {
      this.dialogLoading = true;
      const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton;
      const bottomParams = {};
      if (this.paramsData.length > 0) {
        this.paramsData.forEach(item => {
          bottomParams[item.name] = item.value
        })
      }
      ;

      const params = this.saveType === 'add' ? {
        ...this.basicForm,
        parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId,
        buttonParams: bottomParams
      } : {
        ...this.basicForm,
        buttonParams: bottomParams
      }

      saveFunction(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.disabledBtn = true;
          this.getTabBtnTree();
          this.basicForm = {};
          this.paramsData = [];
          this.dialogLoading = false;
        }
      }).catch(err => {
        this.dialogLoading = false;
      })
    },

    // æŒ‰é’®è®¾è®¡åˆ é™¤
    delClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行删除');
        return;
      }

      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许删除');
        return;
      }

      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // é€‰æ‹©action
    actionFoucus() {
      this.$refs.actionDialog.btnActionVisible = true;
    },

    // ä¿å­˜action
    actionSaveHandler(val) {
      this.$set(this.basicForm, 'actionName', val.plName);
      this.$set(this.basicForm, 'actionOId', val.plOId);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider__text, .el-link {
  font-size: 16px !important;
}
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,388 @@
<template>
  <div>
    <el-tabs v-model="areaType" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="uiDefineData.plIsShowNavigator" label="导航区" name="1"></el-tab-pane>
      <el-tab-pane v-if="uiDefineData.plIsShowForm" label="控制区" name="2"></el-tab-pane>
      <el-tab-pane v-if="uiDefineData.plIsShowTab" label="操作区" name="3"></el-tab-pane>
    </el-tabs>
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      :table-loading="tableLoading"
      @selection-change="selectChangeHandler"
      @row-click="rowClickHandler">
      <template slot="menuLeft">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">创建</el-button>
        <!--<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">修改</el-button>
        <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>
      </template>
      <template slot="plIsOpen" slot-scope="{row}">
        <el-tag v-if="row.plIsOpen === 1" type="success">启用</el-tag>
        <el-tag v-else type="danger">未启用</el-tag>
      </template>
    </avue-crud>
    <bottom-table :sourceData="selectList[0]" :height="'280px'" style="margin-top: 15px;"></bottom-table>
    <!-- åˆ›å»ºç¼–辑自定义对话框    -->
    <el-dialog
      v-dialogDrag
      v-loading="dialogLoading"
      :title="dialogType === 'add' ? ' åˆ›å»º é¡µç­¾' : '编辑 é¡µç­¾'"
      :visible.sync="dialogVisible"
      append-to-body="true"
      class="avue-dialog"
      :close-on-click-modal="false"
      width="800px"
      @close="dialogClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="页面编码：" prop="plCode">
              <el-input v-model="form.plCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称：" prop="plName">
              <el-input v-model="form.plName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号：" prop="plSeq">
              <el-input v-model="form.plSeq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="plIsOpen">
              <el-switch v-model="form.plIsOpen" :active-value="1"  :inactive-value="0"   active-color="#13ce66"  inactive-color="#ff4949"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="显示表达式：" prop="plOpenExpression">
          <el-input type="textarea" :rows="3" v-model="form.plOpenExpression"></el-input>
        </el-form-item>
        <el-form-item label="国际化标准：" prop="plLabel">
          <el-input type="textarea" :rows="1" v-model="form.plLabel"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="plDesc">
          <el-input type="textarea" :rows="1" v-model="form.plDesc"></el-input>
        </el-form-item>
        <el-form-item label="UI解析类：" prop="plUIParser">
          <el-input type="textarea" :rows="2" v-model="form.plUIParser"></el-input>
        </el-form-item>
        <div class="tip">
          <div style="color: #D40000">示例：java_cs:xxx;java_bs:xxx;net_cs:xxx;net_bs:xxx;mobile_cs:xxx;mobile_bs:xxx;</div>
          <div>1、用英文半角分号;分隔各组值。</div>
          <div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
          <div>3、其中的xxx是各种解析类的完整类型名称（完全限定名）。</div>
          <div>4、输入时，不要敲回车换行。</div>
        </div>
        <el-form-item label="拓展属性：" prop="plExtAttr">
          <el-input type="textarea" :rows="2" v-model="form.plExtAttr"></el-input>
        </el-form-item>
        <div class="tip">
          <div style="color: #D40000">示例：ext1:xx;ext2:xx;ext3:xxx;ext4:xxx;extn:xxx</div>
          <div>1、用英文半角分号;分隔各组值。</div>
          <div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
          <div>3、可以定义任意组，但总字符长度不得超过4000。</div>
          <div>4、输入时，不要敲回车换行。</div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="saveHandler">ç¡® å®š</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import basicOption from "@/util/basic-option";
import {
  getTabByContextIdAndType,
  addTabData,
  updateTabData,
  deleteTabData,
} from "@/api/UI/uiDefine";
import func from "@/util/func";
import bottomTable from "./bottomTable/index";

export default {
name: "plShow",
  props: {
    uiDefineData: {
      type: Object,
      default: {}
    },
  },
  components:{bottomTable},
  data() {
    return {
      uiDefineOid:'',
      areaType: '',
      tableLoading: false,
      selectList: [],
      option: {
        ...basicOption,
        height:'300px',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index:false,
        menuWidth:160,
        align:'left',
        column: [{
          label: '序号',
          prop: 'plSeq',
          width:50
        }, {
          label: '编码',
          prop: 'plCode',
          width:180
        }, {
          label: '名称',
          prop: 'plName',
          width:200
        }, {
          label: '是否启用',
          prop: 'plIsOpen',
          align:'center',
          width: 90
        }, {
          label: '显示表达式',
          prop: 'plOpenExpression',
          overHidden:true,
          width:300
        }, {
          label: 'UI解析类',
          prop: 'plUIParser'
        }, {
          label: '拓展属性',
          prop: 'plExtAttr'
        }, {
          label: '描述',
          prop: 'plDesc'
        }]
      },
      data: [],
      dialogLoading: false,
      dialogVisible: false,
      dialogType: '',
      form: {
        plSeq: '',
        plCode: '',
        plName: '',
        plIsOpen:0,
        plOpenExpression:'',
        plLabel:'',
        plUIParser:'',
        plExtAttr:'',
        plDesc:''
      },
      rules: {
        plName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        plCode: [{
          required: true,
          message: '请输入编码',
          trigger: 'blur'
        }],
        plSeq: [{
          required: true,
          message: '请输入序号',
          trigger: 'blur'
        }]
      },
    }
  },
  watch: {
    uiDefineData:{
      handler(val) {
        if(val && val.plOId) {
          if (val.plIsShowNavigator) {
            this.areaType = '1';
          }else if(val.plIsShowForm){
            this.areaType = '2'
          }else{
            this.areaType = '3'
          }
          this.getTableList()
        }
      },
      immediate: true,
      deep:true
    }
  },
  created() {
    this.uiDefineOid=this.$route.params.uiDefineOid;
  },
  methods: {
    handleClick(tab, event) {
      this.getTableList()
    },
    getTableList(){
      const params = {
        contextId:this.uiDefineData.plOId,
        areaType:this.areaType
      }
      getTabByContextIdAndType( params).then(res => {
        this.data = res.data.data;
        this.selectList=[];
        this.$refs.crud.clearSelection();
        this.tableLoading = false;
      })
    },
    selectChangeHandler(row) {
      this.selectList = row;
    },
    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },
    //创建
    addHandler(){
      this.form={
        plSeq: '',
        plCode: '',
        plName: '',
        plIsOpen:0,
        plOpenExpression:'',
        plLabel:'',
        plUIParser:'',
        plExtAttr:'',
        plDesc:''
      };
      this.dialogType = 'add';
      this.dialogVisible = true;
    },
    editHandler(){
      if(this.selectList.length!=0){
        this.rowEditBtnClick(this.selectList[0]);
      }else {
        this.$message.error('请选择一条数据进行编辑');
      }
    },
    delHandler(){
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      const params = {
        oids: this.selectList.map(item => item.plOId).join(',')
      }
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTabData(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // ç¼–辑按钮
    rowEditBtnClick(row) {
      this.form=row;
      this.dialogType = 'edit';
      this.dialogVisible = true;
    },
    // åˆ é™¤æŒ‰é’®
    rowDeleteHandler(row) {
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTabData({oids: row.plOId}).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å…³é—­å¯¹è¯æ¡†
    dialogClose() {
      this.dialogVisible = false;
      this.$refs.form.clearValidate();
      this.form = {
        plName: '',
        plCode: '',
        plDesc:'',
        plIsShow: [],
      }
    },
    // ä¿å­˜é¡µç­¾
    saveHandler() {
      this.$refs.form.validate((valid,done) => {
        if (valid) {
          const params = {
            plAreaType:parseInt(this.areaType),
            plContextOId:this.uiDefineData.plOId,
            ...this.form
          }
          if (this.dialogType === 'add') {
            addTabData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('添加成功');
                this.dialogClose();
                this.getTableList();
              }
            })
          } else if (this.dialogType === 'edit') {
            updateTabData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('修改成功');
                this.dialogClose()
                this.getTableList();
              }
            })
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.tip{
  font-size: 12px;
  color: #909399;
  margin: -13px 0 10px 100px;
}
</style>