| | |
| | | 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({ |
| | |
| | | */ |
| | | 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; |
| | | } |
| | | /** |
| | | * åç½®äºä»¶ |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |
| | |
| | | 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: { |
| | |
| | | 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: { |
| | |
| | | }, |
| | | 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'; |
| | |
| | | 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> |