yvan-print

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite -m development",
     "ts": "vue-tsc --noEmit",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"

src/api/ApiUrlConstant.ts

@@ -4,4 +4,6 @@ export default class ApiUrlConstant {
 
     public static readonly getResourceByIdUrl: string = ApiUrlConstant.BASIC_PATH + '/com/galaxis/wms/print/CommonManager@getResourceById'
 
+    public static readonly previewTemplateUrl: string = ApiUrlConstant.BASIC_PATH + '/com/galaxis/wms/print/PrintServer@preview'
+
 }

src/api/index.ts

@@ -18,8 +18,37 @@ export default class Api {
         })
     }
 
+    private static invoke<T = any>(url: string, args: any = {}, config?: any): Promise<T> {
+        return request.invoke(Api.getContextPath() + url, [args], config)
+    }
+
+    /**
+     * 获取资源信息
+     * @param resourceId
+     */
     public static async getResourceById(resourceId) {
         const params = {pageCode: resourceId};
         return Api.request(ApiUrlConstant.getResourceByIdUrl, params);
     }
+
+    /**
+     * 预览模板
+     * @param templateJson
+     * @param templateParams
+     * @param callback
+     */
+    public static async previewTemplate(templateJson, templateParams, callback) {
+        console.log('templateJson >>>', templateJson)
+        const params = {templateJson, ...templateParams}
+        return Api.invoke(ApiUrlConstant.previewTemplateUrl, params, {
+            headers: {
+                'Accept': 'application/json, */*',
+                'Content-Type': 'application/json',
+                'cache': 'default',
+                'x-ajax': 'true'
+            },
+            'responseType': 'blob',
+            afterResponse: callback
+        });
+    }
 }

src/components/YvanPrintDataSource.vue

@@ -26,8 +26,8 @@
 <script>
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import Constant from '@/utils/constant'
-import commonMixin from '@/mixin/commonMixin'
+import Constant from '@/utils/constant';
+import commonMixin from '@/mixin/commonMixin';
 import {functionList} from "@/components/config/globalConfig";
 
 export default {

src/components/YvanPrintDesigner.vue

@@ -49,6 +49,8 @@
 </template>
 
 <script>
+import Api from '@/api'
+import System from  '@/utils/system'
 import {mapState, mapActions} from "pinia";
 import {globalStore, modeStore} from "@/store";
 import YvanPrintContainer from "@/components/yvan-ui/YvanPrintContainer.vue";
@@ -102,7 +104,7 @@ export default {
       defaultExpendAside: true,
       configIn: {
         toolbarConfig: {
-          buttons: ['guide', 'exportTemplate', 'importTemplate', 'pageFormat', 'logout'],
+          buttons: ['guide', 'exportTemplate', 'importTemplate', 'previewTemplate', 'logout'],
           showNightMode: true
         }
       },
@@ -126,6 +128,12 @@ export default {
           event: this.uploadTemplate
         },
         {
+          code: 'previewTemplate',
+          name: '预览',
+          icon: 'fa fa-file-pdf-o',
+          event: this.previewTemplate
+        },
+        {
           code: 'logout',
           name: '登出',
           icon: 'fa fa-sign-out',
@@ -180,13 +188,7 @@ export default {
       let eleA = document.createElement('a')
       eleA.download = `${this.pageConfig.title + "_" + Date.now()}.json`
       eleA.style.display = 'none'
-      const saveData = {
-        pageConfig: this.pageConfig,
-        dataSource: this.dataSource
-      }
-      this.elementBands.forEach((value, key) => {
-        saveData[key] = value
-      })
+      const saveData = this.getTemplateJSON()
       const blob = new Blob([JSON.stringify(saveData)])
       eleA.href = URL.createObjectURL(blob)
       document.body.appendChild(eleA)
@@ -196,6 +198,28 @@ export default {
     },
     uploadTemplate() {
 
+    },
+    previewTemplate() {
+      const saveData = this.getTemplateJSON();
+      Api.previewTemplate(JSON.stringify(saveData), {}, (res) => {
+        if (res.status === 200) {
+          let URL = window.URL || window.webkitURL;
+          const url = URL.createObjectURL(res.data);
+          System.openWindow(url)
+          return;
+        }
+        System.toast("打印模板预览异常, 请稍后再试")
+      }).finally();
+    },
+    getTemplateJSON() {
+      const saveData = {
+        pageConfig: this.pageConfig,
+        dataSource: this.dataSource
+      }
+      this.elementBands.forEach((value, key) => {
+        saveData[key] = value
+      })
+      return saveData;
     }
   },
   created() {

src/components/elements/YvanBarcodeProps.vue

@@ -2,7 +2,7 @@
   <section class="yvan-barcode-props">
     <el-form ref="form" label-position="top">
       <el-form-item label="文本值">
-        <el-input v-model="activeComponent.expression" placeholder="请输入标题"/>
+        <el-input v-model="activeComponent.expression" placeholder="请输入文本值"/>
       </el-form-item>
       <el-form-item label="条码类型">
         <el-select v-model="activeComponent.config.format" placeholder="请选择边框类型" filterable>

src/components/elements/YvanSimpleText.vue

@@ -6,19 +6,17 @@
     <StyledSimpleText
         ref="editArea"
         :class="{
-          'can-edit': canEdit,
-          'is-drag-over': dragOver
+          'can-edit': canEdit
         }"
         :contenteditable="canEdit"
         class="edit-area"
         tabindex="0"
         v-bind="style"
         @blur="handleBlur"
-        @keydown="handleKeyDown"
         @mousedown="handleMouseDown"
         @paste="clearStyle"
     >
-      <div class="yvan-simple-text-inner" v-html="expression"></div>
+      <div class="yvan-simple-text-inner" v-html="expression" />
     </StyledSimpleText>
   </div>
 </template>
@@ -26,7 +24,6 @@
 <script lang="js">
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
-import system from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledSimpleText} from '@/components/elements/style';
 import YvanSimpleTextProps from "@/components/elements/YvanSimpleTextProps.vue";
@@ -48,14 +45,6 @@ export default {
       type: String,
       default: ''
     },
-    propValue: {
-      type: String,
-      default: ''
-    },
-    bindValue: {
-      type: Object,
-      default: null
-    }
   },
   computed: {
     ...mapState(globalStore, {
@@ -71,8 +60,7 @@ export default {
   },
   data() {
     return {
-      canEdit: false,
-      dragOver: false
+      canEdit: false
     }
   },
   methods: {
@@ -101,33 +89,6 @@ export default {
       selection.removeAllRanges()
       selection.addRange(range)
     },
-    handleDrop(e) {
-      this.dragOver = false
-      const index = e.dataTransfer.getData('datasource-index')
-      if (index) {
-        console.log(' >>> ', index, this.dataSource)
-        // let bindingDataSource = this.dataSource[index]
-        let bindingDataSource = {
-          title: '当前页',
-          code: 'pageNumber',
-          fieldName: 'page_number',
-          typeName: 'String'
-        }
-        if (bindingDataSource) {
-          globalStore().setBindValue({
-            id: this.element.id,
-            bindValue: bindingDataSource
-          })
-          globalStore().setPropValue({
-            id: this.element.id,
-            propValue: `<span class="yvan-binding-value">[绑定:${bindingDataSource.title}]</span>`
-          })
-          this.canEdit = false
-        }
-      } else {
-        system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
-      }
-    },
     handleBlur() {
       this.canEdit = false
     },
@@ -146,12 +107,6 @@ export default {
     clearStyle(e) {
       this.$emit('input', this.element, e.target.innerHTML)
     },
-    handleDragEnter() {
-      this.dragOver = true
-    },
-    handleDragLeave() {
-      this.dragOver = false
-    },
   },
   install(Vue) {
     Vue.component(this.name, this)
@@ -171,9 +126,10 @@ export default {
     },
     canEdit(newVal) {
       if (!newVal) {
-        globalStore().setPropValue({
+        globalStore().setExpression({
+          bandCode: this.element.bandCode,
           id: this.element.id,
-          propValue: this.$refs.editArea.$el.innerHTML
+          expression: this.$refs.editArea.$el.innerHTML
         })
       }
     }
@@ -193,11 +149,6 @@ export default {
     word-break: break-all;
   }
 
-  .is-drag-over {
-    border: 2px solid var(--roy-color-warning);
-    background: #cccccc;
-  }
-
   .can-edit {
     height: 100%;
     cursor: text;

src/components/elements/YvanSimpleTextProps.vue

@@ -1,6 +1,9 @@
 <template>
   <section class="yvan-simple-text-props">
     <el-form ref="form" label-position="top">
+      <el-form-item label="值">
+        <el-input v-model="activeComponent.expression" placeholder="请输入值"/>
+      </el-form-item>
       <el-form-item label="宽度">
         <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
       </el-form-item>
@@ -8,7 +11,7 @@
         <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="字体">
-        <el-select v-model="activeComponent.style.fontFamily" placeholder="请选择字体" filterable>
+        <el-select v-model="activeComponent.style.fontName" placeholder="请选择字体" filterable>
           <el-option v-for="font in fontList" :label="font.name" :value="font.code"/>
         </el-select>
       </el-form-item>
@@ -118,10 +121,7 @@ export default {
   },
   computed: {
     ...mapState(globalStore, {
-      activeComponent: (state) => {
-        console.log("activeComponent => ", state.curComponent)
-        return state.curComponent
-      }
+      activeComponent: (state) => state.curComponent
     }),
   },
 }

src/components/elements/YvanTextField.vue

@@ -29,7 +29,7 @@
 <script lang="js">
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
-import system from '@/utils/system';
+import System from '@/utils/system';
 import Constant from '@/utils/constant'
 import commonMixin from '@/mixin/commonMixin';
 import {StyledTextField} from '@/components/elements/style';
@@ -115,7 +115,7 @@ export default {
         this.canEdit = false
         return;
       }
-      system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
+      System.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
     },
     handleBlur() {
       this.canEdit = false
@@ -183,7 +183,7 @@ export default {
   }
 
   .is-drag-over {
-    border: 2px solid var(--roy-color-warning);
+    border: 1px solid var(--yvan-color-warning);
     background: #cccccc;
   }
 

src/components/elements/YvanTextFieldProps.vue

@@ -1,6 +1,9 @@
 <template>
   <section class="yvan-simple-text-props">
     <el-form ref="form" label-position="top">
+      <el-form-item label="值">
+        <el-input v-model="activeComponent.expression" placeholder="请输入值"/>
+      </el-form-item>
       <el-form-item label="宽度">
         <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
       </el-form-item>
@@ -8,7 +11,7 @@
         <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
       </el-form-item>
       <el-form-item label="字体">
-        <el-select v-model="activeComponent.style.fontFamily" placeholder="请选择字体" filterable>
+        <el-select v-model="activeComponent.style.fontName" placeholder="请选择字体" filterable>
           <el-option v-for="font in fontList" :label="font.name" :value="font.code"/>
         </el-select>
       </el-form-item>

src/components/yvan-editor/ComponentAdjuster.vue

@@ -6,10 +6,10 @@
       @click.stop.prevent="selectCurComponent($event)"
       @mousedown.stop="handleMouseDownOnShape($event)"
   >
-    <span
-        v-show="isActive && showRotate"
-        class="fa fa-rotate-left yvan-print-component-adjuster__rotate"
-        @mousedown="handleRotate"/>
+    <!--<span-->
+    <!--    v-show="isActive && showRotate"-->
+    <!--    class="fa fa-rotate-left yvan-print-component-adjuster__rotate"-->
+    <!--    @mousedown="handleRotate"/>-->
     <span v-show="element.isLock" class="fa fa-lock yvan-print-component-adjuster__lock"/>
     <span
         v-show="element.bindValue"
@@ -39,6 +39,7 @@ import {globalStore, modeStore} from "@/store";
 import eventBus from '@/utils/eventBus'
 import {mod360} from '@/utils/translate'
 import commonMixin from '@/mixin/commonMixin'
+import EditorUtils from '@/utils/EditorUtils';
 import {isPreventDrop} from '@/utils/html-util'
 import calculateComponentPositionAndSize from '@/utils/calculateComponentPositonAndSize'
 
@@ -350,7 +351,7 @@ export default {
       this.$nextTick(() => eventBus.emit('componentClick'))
       const elementRect = event.target.getBoundingClientRect();
       console.log('>>> ', {top: elementRect.top, left: elementRect.right})
-      globalStore().showEditorMenu({top: elementRect.top, left: elementRect.right})
+      EditorUtils.showEditorMenu(elementRect)
       globalStore().setInEditorStatus(true)
       globalStore().setClickComponentStatus(true)
       if (isPreventDrop(this.element.component)) {

src/components/yvan-editor/Editor.vue

@@ -35,7 +35,7 @@
               :index="idx"
               :band-name="getElementBand(elementBandCode)?.name"
               :band-code="elementBandCode"
-              :band-height="getElementBandFormStore(elementBandCode)?.band?.height"
+              :band-eight="getElementBandFormStore(elementBandCode)?.band?.height"
               :used-height="getUsedHeight(elementBandCode)"
               @changeElementBandTop="changeElementBandTop"/>
 
@@ -46,11 +46,11 @@
           <!-- 上下边距线 -->
           <!--<div :style="`top: ${pageConfig?.topMargin * realScale}px`" class="yvan-print-margin-top-line" />-->
           <!--<div :style="`bottom: ${pageConfig?.bottomMargin * realScale}px`" class="yvan-print-margin-bottom-line"/>-->
+          <!-- 菜单-->
+          <EditorMenu/>
         </div>
       </div>
     </div>
-    <!-- 菜单-->
-    <EditorMenu/>
     <!--<Context ref="contextmenu" :theme="contextTheme">-->
     <!--  <ContextItem-->
     <!--      v-for="item in contextMenu"-->

src/components/yvan-editor/EditorMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+      id="yvan-editor-menu"
       v-show="visible"
       :style="getStyle"
       class="yvan-print-designer-menu">
@@ -17,7 +18,7 @@
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
 import eventBus from "@/utils/eventBus";
-import {getEditorMenu, getEditorRect} from '@/utils/editorUtils'
+import EditorUtils from '@/utils/EditorUtils'
 
 export default {
   data() {
@@ -43,19 +44,21 @@ export default {
     this.initMounted();
   },
   methods: {
-    getEditorMenu,
     initMounted() {
       eventBus.on('move', (args) => {
         // const {isDownward, isRightward, curX, curY} = args
-        const editorRect = getEditorRect();
+        const editorRect = EditorUtils.getEditorRect();
         const menuTop = this.curComponent.style.top + editorRect.top;
         const menuLeft = this.curComponent.style.left + editorRect.left + this.curComponent.width;
-        globalStore().showEditorMenu({top: menuTop, left: menuLeft})
+        EditorUtils.showEditorMenu({top: menuTop, left: menuLeft})
       })
       eventBus.on('unmove', () => {
         // this.showCoordinate = false
       })
-    }
+    },
+    getEditorMenu() {
+      return EditorUtils.getEditorMenu();
+    },
   }
 }
 </script>
@@ -63,8 +66,11 @@ export default {
 <style lang="less" scoped>
 .yvan-print-designer-menu {
   position: fixed;
-  width: 200px;
-  border: 0.5px dotted var(--yvan-menu-bar-background);
+  //width: 200px;
+  background-color: var(--yvan-color-primary-light-7);
+  //border: 0.5px dotted var(--yvan-menu-bar-background);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 
   ul {
     list-style: none;

src/router.ts

@@ -2,9 +2,9 @@ import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 
 // 基本页面
 const basePages = {
-    design: () => import('@/pages/Design.vue'),
-    studio: () => import('@/pages/Studio.vue'),
-    404: () => import('@/components/NotFound.vue'),
+    // design: () => import('@/pages/Design.vue'),
+    // studio: () => import('@/pages/Studio.vue'),
+    // 404: () => import('@/components/NotFound.vue'),
 }
 
 /** 获取路由数据 */

src/store/global.ts

@@ -4,9 +4,9 @@ import lock from '@/store/lock'
 import layer from '@/store/layer'
 import compose from '@/store/compose'
 import snapshot from '@/store/snapshot'
-import {ruleStore} from "@/store/ruler-things";
-import {getEditorMenuPos} from '@/utils/editorUtils'
 import Constant from "@/utils/constant";
+import EditorUtils from '@/utils/EditorUtils'
+import {ruleStore} from "@/store/ruler-things";
 
 export const globalStore = defineStore('global', {
     state: () => {
@@ -22,17 +22,17 @@ export const globalStore = defineStore('global', {
                 // 页面长度：mm
                 pageWidth: 210,
                 // 页面高度：mm
-                pageHeight: 290,
+                pageHeight: 297,
                 // 模板标题
                 title: '新建模板',
                 // 模板编码
                 code: 'TEMPLATE',
                 // 默认缩放比例：100%
                 // 页面边距 mm
-                topMargin: 8,
-                rightMargin: 8,
-                bottomMargin: 8,
-                leftMargin: 8,
+                topMargin: 4,
+                rightMargin: 4,
+                bottomMargin: 4,
+                leftMargin: 4,
                 style: {
                     // 默认缩放比例：100%
                     scale: 1,
@@ -43,7 +43,7 @@ export const globalStore = defineStore('global', {
                     // 默认字号
                     fontSize: 12,
                     // 默认字体
-                    fontFamily: '微软雅黑',
+                    fontName: '微软雅黑',
                     // 默认行高
                     lineHeight: 1,
                 }
@@ -135,7 +135,6 @@ export const globalStore = defineStore('global', {
         },
 
         setExpression({bandCode, expression, id}) {
-            console.log('>>> ', bandCode, expression, id)
             const elementBand = this.elementBands.get(bandCode)
             if (elementBand) {
                 let newElementValue = null;
@@ -153,6 +152,7 @@ export const globalStore = defineStore('global', {
                     }
                 }
             }
+            this.curComponent.expression = expression;
         },
 
         setPropValue({propValue, id}) {
@@ -320,7 +320,8 @@ export const globalStore = defineStore('global', {
             }
         },
         showEditorMenu({top, left}) {
-            const editorMenuPos = getEditorMenuPos(top, left);
+            const editorMenuPos = EditorUtils.getEditorMenuPos(top, left);
+            console.log('editorMenuPos >> ', editorMenuPos)
             this.editorMenuInfo = {
                 visible: true,
                 style: {

src/utils/BusinessDesignExtractor.ts

@@ -29,4 +29,12 @@ export default class BusinessDesignExtractor {
     private static getDesignJsPath(designPath) {
         return BusinessDesignExtractor.BUSINESS_DESIGN_BASIC_PATH + designPath + BusinessDesignExtractor.BUSINESS_DESIGN_SUFFIX;
     }
+
+    private static extractColumn(){
+
+    }
+
+    private static extractDatasource(){
+
+    }
 }

src/utils/EditorUtils.ts

@@ -0,0 +1,165 @@
+import {globalStore} from "@/store";
+
+
+export default class EditorUtils {
+
+    public static getEditorRect() {
+        return globalStore().getEditor()?.getBoundingClientRect();
+    }
+
+    public static getEditorMenuPos(eleTop, eleLeft): { top, left } {
+        const editorRect = EditorUtils.getEditorRect();
+        const editorMenuWidthAndHeight = EditorUtils.getEditorMenuWidthAndHeight();
+        console.log('editorMenuWidthAndHeight >> ', editorMenuWidthAndHeight, eleLeft)
+        if (editorRect) {
+            return {
+                top: eleTop - editorRect.top - editorMenuWidthAndHeight?.height ?? 0 - 1,
+                left: eleLeft - editorRect.left - editorMenuWidthAndHeight.width ?? 0
+            }
+        }
+        return {top: 0, left: 0}
+    }
+
+    public static getEditorMenuObj() {
+        return document.querySelector('#yvan-editor-menu')
+    }
+
+    public static getEditorMenuRect() {
+        return EditorUtils.getEditorMenuObj()?.getBoundingClientRect();
+    }
+
+    public static getEditorMenuWidthAndHeight() {
+        const editorMenuRect = EditorUtils.getEditorMenuObj()?.getBoundingClientRect();
+        return {
+            width: editorMenuRect.right - editorMenuRect.left,
+            height: editorMenuRect.bottom - editorMenuRect.top
+        }
+    }
+
+    public static showEditorMenu(elementRect) {
+        globalStore().showEditorMenu({top: elementRect.top, left: elementRect.right})
+    }
+
+    public static hideEditorMenu() {
+        globalStore().hideEditorMenu();
+    }
+
+    public static getEditorMenu() {
+        const currentElement = globalStore().curComponent;
+        if (!currentElement) {
+            return [
+                {
+                    code: 'paste',
+                    icon: 'fa fa-paste',
+                    label: '粘贴',
+                    status: 'default',
+                    event: () => {
+                        globalStore().paste(true)
+                        globalStore().recordSnapshot()
+                    }
+                }
+            ]
+        }
+        if (currentElement?.isLock) {
+            return [
+                {
+                    code: 'unlock',
+                    icon: 'fa fa-unlock',
+                    label: '解锁',
+                    status: 'default',
+                    event: () => {
+                        globalStore().unlock({curComponent: currentElement})
+                    }
+                }
+            ]
+        }
+        return [
+            {
+                code: 'copy',
+                icon: 'fa fa-copy',
+                label: '复制',
+                status: 'default',
+                event: () => {
+                    globalStore().copy()
+                }
+            },
+            {
+                code: 'cut',
+                icon: 'fa fa-cut',
+                label: '剪切',
+                status: 'default',
+                event: () => {
+                    globalStore().cut()
+                }
+            },
+            {
+                code: 'del',
+                icon: 'fa fa-trash',
+                label: '删除',
+                status: 'danger',
+                event: () => {
+                    globalStore().deleteElement({
+                        element: globalStore().curComponent,
+                        elementIdx: globalStore().curComponentIndex
+                    });
+                    globalStore().recordSnapshot();
+                    EditorUtils.hideEditorMenu();
+                }
+            },
+            {
+                code: 'lock',
+                icon: 'fa fa-lock',
+                label: '锁定',
+                status: 'default',
+                event: () => {
+                    globalStore().lock({curComponent: currentElement});
+                    EditorUtils.hideEditorMenu();
+                }
+            },
+            // {
+            //     code: 'top',
+            //     icon: 'fa fa-angle-double-up',
+            //     label: '置顶',
+            //     status: 'default',
+            //     event: () => {
+            //         // this.$store.commit('printTemplateModule/topComponent')
+            //         // this.$store.commit('printTemplateModule/recordSnapshot')
+            //     }
+            // },
+            // {
+            //     code: 'bottom',
+            //     icon: 'fa fa-angle-double-down',
+            //     label: '置底',
+            //     status: 'default',
+            //     event: () => {
+            //         this.$store.commit('printTemplateModule/bottomComponent')
+            //         this.$store.commit('printTemplateModule/recordSnapshot')
+            //     }
+            // },
+            // {
+            //     code: 'up',
+            //     icon: 'fa fa-arrow-circle-up',
+            //     label: '上移',
+            //     status: 'default',
+            //     event: () => {
+            //         // this.$store.commit('printTemplateModule/upComponent')
+            //         // this.$store.commit('printTemplateModule/recordSnapshot')
+            //     }
+            // },
+            // {
+            //     code: 'down',
+            //     icon: 'fa fa-arrow-circle-down',
+            //     label: '下移',
+            //     status: 'default',
+            //     event: () => {
+            //         // this.$store.commit('printTemplateModule/downComponent')
+            //         // this.$store.commit('printTemplateModule/recordSnapshot')
+            //     }
+            // }
+        ]
+    }
+};
+
+
+
+

src/utils/constant.js

@@ -2,8 +2,10 @@ export default {
     STORAGE_PREFIX: '_YVAN_DESIGNER_',
     MIN_SCALE: 0.25,
     MAX_SCALE: 2,
-
     DATASOURCE_DRAG_KEY: "fieldCode",
-
-    NONE: 'none'
+    NONE: 'none',
+    /* 默认Windows宽度 */
+    defaultWidth: 800,
+    /* 默认Windows高度 */
+    defaultHeight: 800,
 }

src/utils/editorUtils.js

@@ -1,131 +0,0 @@
-import {globalStore} from "@/store";
-
-export function getEditorRect() {
-    return globalStore().getEditor()?.getBoundingClientRect();
-}
-
-export function getEditorMenuPos(eleTop, eleLeft) {
-    const editorRect = globalStore().getEditor()?.getBoundingClientRect();
-    if (editorRect) {
-        return {
-            top: eleTop - 28,
-            left: eleLeft - 200
-        }
-    }
-    return {}
-}
-
-export function getEditorMenu() {
-    const currentElement = globalStore().curComponent;
-    if (!currentElement) {
-        return [
-            {
-                code: 'paste',
-                icon: 'fa fa-paste',
-                label: '粘贴',
-                status: 'default',
-                event: () => {
-                    globalStore().paste(true)
-                    globalStore().recordSnapshot()
-                }
-            }
-        ]
-    }
-    if (currentElement?.isLock) {
-        return [
-            {
-                code: 'unlock',
-                icon: 'fa fa-unlock',
-                label: '解锁',
-                status: 'default',
-                event: () => {
-                    globalStore().unlock({curComponent: currentElement})
-                }
-            }
-        ]
-    }
-    return [
-        {
-            code: 'copy',
-            icon: 'fa fa-copy',
-            label: '复制',
-            status: 'default',
-            event: () => {
-                globalStore().copy()
-            }
-        },
-        {
-            code: 'cut',
-            icon: 'fa fa-cut',
-            label: '剪切',
-            status: 'default',
-            event: () => {
-                globalStore().cut()
-            }
-        },
-        {
-            code: 'del',
-            icon: 'fa fa-trash',
-            label: '删除',
-            status: 'danger',
-            event: () => {
-                globalStore().deleteElement({
-                    element: globalStore().curComponent,
-                    elementIdx: globalStore().curComponentIndex
-                });
-                globalStore().recordSnapshot();
-                globalStore().hideEditorMenu();
-            }
-        },
-        {
-            code: 'lock',
-            icon: 'fa fa-lock',
-            label: '锁定',
-            status: 'default',
-            event: () => {
-                globalStore().lock({curComponent: currentElement});
-                globalStore().hideEditorMenu();
-            }
-        },
-        // {
-        //     code: 'top',
-        //     icon: 'fa fa-angle-double-up',
-        //     label: '置顶',
-        //     status: 'default',
-        //     event: () => {
-        //         // this.$store.commit('printTemplateModule/topComponent')
-        //         // this.$store.commit('printTemplateModule/recordSnapshot')
-        //     }
-        // },
-        // {
-        //     code: 'bottom',
-        //     icon: 'fa fa-angle-double-down',
-        //     label: '置底',
-        //     status: 'default',
-        //     event: () => {
-        //         this.$store.commit('printTemplateModule/bottomComponent')
-        //         this.$store.commit('printTemplateModule/recordSnapshot')
-        //     }
-        // },
-        // {
-        //     code: 'up',
-        //     icon: 'fa fa-arrow-circle-up',
-        //     label: '上移',
-        //     status: 'default',
-        //     event: () => {
-        //         // this.$store.commit('printTemplateModule/upComponent')
-        //         // this.$store.commit('printTemplateModule/recordSnapshot')
-        //     }
-        // },
-        // {
-        //     code: 'down',
-        //     icon: 'fa fa-arrow-circle-down',
-        //     label: '下移',
-        //     status: 'default',
-        //     event: () => {
-        //         // this.$store.commit('printTemplateModule/downComponent')
-        //         // this.$store.commit('printTemplateModule/recordSnapshot')
-        //     }
-        // }
-    ]
-}

src/utils/system.ts

@@ -2,6 +2,7 @@ import {h} from "vue";
 import {nanoid} from "nanoid";
 import {ElIcon} from "element-plus";
 import * as FaIcon from '@vicons/fa';
+import Constant from '@/utils/constant'
 import Toast from "@/components/yvan-ui/yvan-print-toast"
 import Dialog from "@/components/yvan-ui/yvan-print-dialog"
 
@@ -29,6 +30,30 @@ class System {
         }
         return () => h(ElIcon, null, {default: () => h(FaIcon[iconName])});
     }
+
+    /**
+     * 打开对话框
+     * @param fileUrl       转向网页的地址;
+     */
+    public openWindow(fileUrl) {
+        this.doOpenWindow(fileUrl, '模板预览', Constant.defaultWidth, Constant.defaultHeight);
+    }
+
+    /**
+     * 打开对话框
+     * @param url       转向网页的地址;
+     * @param title     网页名称(选填);
+     * @param iWidth    弹出窗口的宽度;
+     * @param iHeight   弹出窗口的高度;
+     */
+    public doOpenWindow(url, title, iWidth, iHeight): WindowProxy | null {
+        // window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+        // 获得窗口的垂直位置;
+        const iTop = (window.screen.height - 30 - iHeight) / 2;
+        // 获得窗口的水平位置;
+        const iLeft = (window.screen.width - 10 - iWidth) / 2;
+        return window.open(url, title, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
+    }
 }
 
 export default new System()