UI定义页面

 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

@@ -113,7 +113,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,105 @@
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
  })
}

 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/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>
@@ -206,9 +205,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 +573,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/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/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/plShow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,385 @@
<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>
    <!-- åˆ›å»ºç¼–辑自定义对话框    -->
    <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 {uiDefineVOData} from "@/views/base/uiDefineVO";

export default {
name: "plShow",
  props: {
    uiDefineData: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      uiDefineOid:'',
      areaType: '',
      tableLoading: false,
      selectList: [],
      option: {
        ...basicOption,
        height:'50%',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index:false,
        menuWidth:160,
        align:'left',
        column: [{
          label: '序号',
          prop: 'plSeq',
          width:60
        }, {
          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.$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>