From 46f7ae4e3a00e3a1ce38498dce0dd373726e9648 Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期五, 10 五月 2024 12:16:05 +0800
Subject: [PATCH] 查看action，自定义组件展示
---
Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue | 46 +++++----
Source/ProjectWeb/src/components/actions/base/TabViewAction.js | 48 +++++----
Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue | 38 ++++--
Source/ProjectWeb/src/components/actions/base/ViewDialog.vue | 129 +++++++++++++++++++++++++
4 files changed, 204 insertions(+), 57 deletions(-)
diff --git a/Source/ProjectWeb/src/components/actions/base/TabViewAction.js b/Source/ProjectWeb/src/components/actions/base/TabViewAction.js
index 9430fa9..d8c914d 100644
--- a/Source/ProjectWeb/src/components/actions/base/TabViewAction.js
+++ b/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)) {
//鑷畾涔塲s
- 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;
}
/**
* 鍓嶇疆浜嬩欢
diff --git a/Source/ProjectWeb/src/components/actions/base/ViewDialog.vue b/Source/ProjectWeb/src/components/actions/base/ViewDialog.vue
new file mode 100644
index 0000000..34c7163
--- /dev/null
+++ b/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>
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
index f96eff4..44dbf0e 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
+++ b/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¶m=zzz 鎴栬�� 缁勪欢name?type=xxx&context=yyy¶m=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';
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
index 2e17737..fce7be6 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
+++ b/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>
--
Gitblit v1.9.3