查看action，自定义组件展示

 Source/ProjectWeb/src/components/actions/base/TabViewAction.js

@@ -4,9 +4,7 @@
import {paramLow,callPreEvent,callPostEvent,replaceFreeMarker} from './BaseAction';
import {validatenull} from "@/util/validate";
import Vue from "vue";
import AddEditDialog from "@/components/actions/AddEditDialog";
import Layout from "@/router/page";
import router from '@/router/router';
import ViewDialog from "@/components/actions/base/ViewDialog";

export const doAction = (options,callback) => {
  const paramVOS = Object.assign({
@@ -43,36 +41,40 @@
 */
export const doView = (options,callback)=> {
  const paramVOS = options.paramVOS;
  let component = '@/views/base/UIContentViewerInDialog';
  let component = 'base/UIContentViewerInDialog';
  if (!validatenull(paramVOS.customurl)) {
    //自定义js
    component = `@/views/custom-ui/` + paramVOS.customurl;
    component = `custom-ui/` + paramVOS.customurl;
  }else{
    if (!paramVOS['type'] || !paramVOS['context']) {
      Vue.prototype.$message.error("按钮配置不正确");
      return false;
    }
  }
  let name="查看数据"
  paramVOS.component=component;
  let name="查看详情"
  if(paramVOS.showname){
    name=replaceFreeMarker(paramVOS.showname,options.dataStore,options.sourceData)
    name="查看【"+replaceFreeMarker(paramVOS.showname,options.dataStore,options.sourceData)+"】"
  }
  router.addRoutes({
    path: '/view-form'+options.dataStore[0].oid,
    name: name,
    component: Layout,
    meta: {
      keepAlive: true,
      isTab: true
    },
    children: [
      {
        path: '', // ç©ºè·¯å¾„表示访问 '/dynamic-form' æ—¶åŠ è½½ Layout ç»„件
        component: () => import(component),
        props: true
      }
    ]
    })
  paramVOS.title=name;
  const dialogConstructor = Vue.extend(ViewDialog);
  let instance = new dialogConstructor();
  instance.sourceData = options.sourceData;
  instance.dataStore = options.dataStore;
  instance.paramVOS = paramVOS

  instance.dialogClose = function () {
    vm.visible = false;
    document.body.removeChild(vm.$el);
    instance.$destroy();
    instance = null;
  };
  if (callback) {
    instance.saveCallback = callback;
  }
  let vm = instance.$mount();
  document.body.appendChild(vm.$el);
  instance.visible = true;
}
/**
 * å‰ç½®äº‹ä»¶

 Source/ProjectWeb/src/components/actions/base/ViewDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,129 @@
<template>
  <el-dialog v-dialogDrag
             :title="title"
             :visible.sync="visible"
             :width="width"
             :fullscreen="fullscreen"
             :append-to-body="true"
             top="0"
             class="avue-dialog"
             :destroy-on-close="true"
             @close="dialogClose">
    <component :is="currentComponent"
               ref="uiViewRef"
               key="ViewDialog"
               :style="fullscreen?'':'height:'+height"
               :btmType="paramVOS.type"
               :context="paramVOS.context"
               :inDialog="true"
               :canEdit="false"
               actionType="view"
               :sourceData="sourceData"
               :dataStore="dataStore"
               :paramVOS="paramVOS"></component>
    <!--<ui-view ref="uiViewRef"
             key="ViewDialog"
             :style="fullscreen?'':'height:'+height"
             :btmType="paramVOS.type"
             :context="paramVOS.context"
             :inDialog="true"
             :canEdit="false"
             actionType="view"
             :sourceData="sourceData"
             :dataStore="dataStore"
             :paramVOS="paramVOS"
    ></ui-view>-->

  </el-dialog>
</template>

<script>
import {validatenull} from "@/util/validate";

export default {
  name: "ViewDialog",
  components:{},
  props: {
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    }
  },
  data(){
    return {
      visible:false,
      currentComponent: null,
    }
  },
  computed:{
    title(){
      return this.paramVOS.title || "查看详情"
    },
    width() {
      if (!validatenull(this.paramVOS.width)) {
        if (this.paramVOS.width.includes("px") || this.paramVOS.width.includes("%")) {
          return this.paramVOS.width;
        } else {
          return this.paramVOS.width + "px";
        }
      } else {
        return "60%";
      }
    },
    height(){
      if (!validatenull(this.paramVOS.height)) {
        if (this.paramVOS.height.includes("px") || this.paramVOS.height.includes("%")) {
          return this.paramVOS.height;
        } else {
          return this.paramVOS.height + "px";
        }
      } else {
        return "auto"
      }
    },
    fullscreen(){
      if(this.paramVOS.width || this.paramVOS.height){
        return false;
      }else if(this.paramVOS.form){
        return false;
      }
      return true;
    }
  },
  created() {

  },
  mounted() {
    this.loadCompoent();
  },
  methods: {
    loadCompoent(){
      // åŠ¨æ€å¯¼å…¥ç»„件
      import(`@/views/${this.paramVOS.component}.vue`).then((module) => {
        // æˆåŠŸå¯¼å…¥åŽï¼Œå°†ç»„件注册到Vue实例中
        this.currentComponent = module.default;
      }).catch((error) => {
        // å¤„理导入失败的情况
        console.error('组件加载失败:', error);
      });
    },
    dialogClose() {
      this.visible = false;
    },
  }
}
</script>

<style scoped>

</style>

 Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue

@@ -27,11 +27,6 @@
import {validatenull} from "@/util/validate";
export default {
  name: "dynamic-custom",
  components: {
    'UI': () => import('@/views/base/UIContentViewerInDialog'),
    'test': () => import('@/views/custom-ui/test'),
    'test2': () => import('@/views/custom-ui/test2'),
  },
  props: {
    //ui上下文的业务类型（或链接类型）
    uiBtmType: {
@@ -86,7 +81,8 @@
      height: '300px',
      customClass: '', //?type=xxx&context=yyy&param=zzz  æˆ–者 ç»„件name?type=xxx&context=yyy&param=zzz
      isError: false, //路径解析失败
      currentComponent: 'UI',//组件name
      ComponentUrl:'base/UIContentViewerInDialog',
      currentComponent: null
    }
  },
  watch: {
@@ -102,39 +98,49 @@
  },
  computed: {},
  created() {

  },
  mounted() {
    this.customClass=this.componentVO.customClass;
    this.componentVO.customClass.split(';').forEach(item=>{
      if(item.indexOf('web=')==0){
        this.customClass=item.split('web=')[1];
      }
    })
    let urlParams = {};
    // å¦‚果路径中存在 '?'，则取问号前面部分给 parts
    if (this.customClass.includes('?')) {
      this.currentComponent = this.customClass.split("?")[0];
      this.ComponentUrl = this.customClass.split("?")[0];
      urlParams = queryStringToObject(this.customClass);
    } else {
      this.currentComponent = this.customClass; // ä¸å­˜åœ¨ '?' æ•´æ¡è·¯å¾„就是 parts
      this.ComponentUrl = this.customClass; // ä¸å­˜åœ¨ '?' æ•´æ¡è·¯å¾„就是 parts
    }
    if(validatenull(this.currentComponent)){
      this.currentComponent='UI';
    if(validatenull(this.ComponentUrl) || ['UI', 'ui'].includes(this.ComponentUrl)){
      this.ComponentUrl='base/UIContentViewerInDialog';
    }else {
      this.ComponentUrl='custom-ui/'+this.ComponentUrl;
    }
    if (['UI', 'ui'].includes(this.currentComponent) && (this.customClass.indexOf("type=") < 0 || this.customClass.indexOf("context=") < 0)) {
    if (this.ComponentUrl=='base/UIContentViewerInDialog' && (!urlParams.type || !urlParams.context)) {
      this.isError = true;
      return;
    }
    let urlParams = {};
    if(this.customClass.includes('?')) {
      urlParams = queryStringToObject(this.customClass);
    }

    this.btmType = urlParams.type;
    this.context = urlParams.context;
    this.urlParams = Object.assign(this.paramVOS, urlParams)

    this.urlParams = Object.assign({},this.paramVOS, urlParams)
    this.loadCompoent();
  },
  mounted() {
    //this.getHeight(this.$parent);
  },
  methods: {
    loadCompoent(){
      // åŠ¨æ€å¯¼å…¥ç»„件
      import(`@/views/${this.ComponentUrl}.vue`).then((module) => {
        // æˆåŠŸå¯¼å…¥åŽï¼Œå°†ç»„件注册到Vue实例中
        this.currentComponent = module.default;
      }).catch((error) => {
        // å¤„理导入失败的情况
        console.error('组件加载失败:', error);
      });
    },
    getHeight(el) {
      if (el.$el.clientHeight > 50) {
        this.height = el.$el.clientHeight + 'px';

 Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue

@@ -33,20 +33,30 @@
                        type="table"></dynamic-button>
      </template>
      <template  slot="menuRight" slot-scope="scope">
        <el-button icon="el-icon-printer" title="打印"
                   circle @click="$refs.dataTable.rowPrint()"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-download" title="导出"
                   circle @click="rowExcel"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-tickets" circle title="筛选"  @click="$refs.dataTable.$refs.dialogFilter.box=!0"
                  :size="scope.size"></el-button>
        <el-button icon="el-icon-s-operation" circle title="列显隐"  @click="$refs.dataTable.$refs.dialogColumn.columnBox=!0"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-search" circle title="查询" @click="$refs.dataTable.$refs.headerSearch.handleSearchShow()"
                   :size="scope.size"></el-button>
        <el-button icon="el-icon-refresh" circle title="刷新" @click="$refs.dataTable.refreshChange()"
                   :size="scope.size"></el-button>
        <el-tooltip class="item" effect="dark" content="打印" placement="top">
          <el-button icon="el-icon-printer" circle @click="$refs.dataTable.rowPrint()"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <el-button icon="el-icon-download" circle @click="rowExcel"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="筛选" placement="top">
          <el-button icon="el-icon-tickets" circle  @click="$refs.dataTable.$refs.dialogFilter.box=!0"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="列显隐" placement="top">
          <el-button icon="el-icon-s-operation" circle @click="$refs.dataTable.$refs.dialogColumn.columnBox=!0"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="查询" placement="top">
          <el-button icon="el-icon-search" circle @click="$refs.dataTable.$refs.headerSearch.handleSearchShow()"
                     :size="scope.size"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button icon="el-icon-refresh" circle @click="$refs.dataTable.refreshChange()"
                     :size="scope.size"></el-button>
        </el-tooltip>
      </template>
    </avue-crud>
  </div>