element

src/assets/style/main.less

@@ -1,17 +1,17 @@
-.roy-designer-container {
-  .roy-fade-enter-active {
+.yvan-print-designer-container {
+  .yvan-fade-enter-active {
     animation: fadeIn 1s;
   }
 
-  .roy-fade-leave-active {
+  .yvan-fade-leave-active {
     animation: fadeOut 1s;
   }
 
-  .roy-slide-enter-active {
+  .yvan-slide-enter-active {
     animation: slideInLeft 0.58s;
   }
 
-  .roy-slide-leave-active {
+  .yvan-slide-leave-active {
     animation: slideOutLeft 0.8s;
   }
 

src/components/YvanPrintDesignerMain.vue

@@ -19,10 +19,10 @@
 <script>
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
+import {system} from '@/utils/system'
 import commonMixin from '@/mixin/commonMixin'
 import YvanPrintToolbar from "@/components/yvan-ui/YvanPrintToolbar.vue";
 import YvanPrintDesignerEditor from "@/components/yvan-editor/Editor.vue";
-import ElementUtils from "@/utils/elementUtils";
 
 export default {
   name: 'yvan-print-designer-main',
@@ -54,7 +54,7 @@ export default {
       const componentCode = e.dataTransfer.getData('componentCode')
       const rectInfo = document.querySelector('#designer-page').getBoundingClientRect()
       if (componentCode) {
-        const component = this.deepCopy(ElementUtils.getElementByCode(componentCode))
+        const component = this.deepCopy(this.findElementByCode(componentCode))
         component.style = component.style ?? {}
         component.style.top = e.clientY - rectInfo.y
         component.style.left = e.clientX - rectInfo.x
@@ -63,7 +63,7 @@ export default {
         globalStore().addComponent({ component })
         globalStore().recordSnapshot()
       } else {
-        System.toast('拖拽元素非页面组件，此次拖拽无效', 'info')
+        system.toast('拖拽元素非页面组件，此次拖拽无效', 'info')
       }
     },
 

src/components/elements/YvanGroup.vue

@@ -25,8 +25,8 @@ export default {
   name: 'YvanGroup',
   mixins: [commonMixin],
   components: {
-    YvanRect
-    YvanRichText,
+    YvanRect,
+    YvanRichText
   },
   props: {
     propValue: {

src/components/elements/YvanRichText.vue

@@ -9,6 +9,7 @@
 <script>
 import {mapState} from 'pinia';
 import {globalStore} from '@/store';
+import {system} from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledText} from '@/components/elements/style';
 import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';
@@ -58,7 +59,7 @@ export default {
       })
     },
     onDblClick() {
-      System.showDialog(YvanRichTextEditor, {valueHtml: this.html, width: 65}).then(res => {
+      system.showDialog(YvanRichTextEditor, {valueHtml: this.html, width: 65}).then(res => {
 
       }).finally(() => {
 

src/components/elements/YvanSimpleText.vue

@@ -31,6 +31,7 @@
 <script>
 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";
@@ -129,7 +130,7 @@ export default {
           this.canEdit = false
         }
       } else {
-        System.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
+        system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
       }
     },
     handleBlur() {

src/components/elements/yvan-table/YvanRichTextInTable.vue

@@ -9,6 +9,7 @@
 <script>
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
+import {system} from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledText} from '@/components/elements/style';
 import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';
@@ -57,7 +58,7 @@ export default {
       })
     },
     onDblClick() {
-      System.showDialog(YvanPrintTextEditor, {valueHtml: this.html, width: 65}).then(res => {
+      system.showDialog(YvanPrintTextEditor, {valueHtml: this.html, width: 65}).then(res => {
 
       }).finally(() => {
 

src/components/elements/yvan-table/YvanSimpleTable.vue

@@ -257,7 +257,7 @@ export default {
       ]
     }
   },
-  install(Vue){
+  install(Vue) {
     Vue.component(this.name, this)
     Vue.component(YvanSimpleTableProps.name, YvanSimpleTableProps)
   },
@@ -303,18 +303,13 @@ export default {
   },
   methods: {
     initMounted() {
-      let preSettled = false
       if (this.propValue.tableConfig) {
-        preSettled = true
         this.tableConfig = this.deepCopy(this.propValue.tableConfig)
       }
       if (this.propValue.tableData) {
-        preSettled = true
         this.tableData = this.deepCopy(this.propValue.tableData)
       }
-      if (!preSettled) {
-        this.reRenderTableLayout()
-      }
+      this.reRenderTableLayout()
     },
     clearSelection() {
       this.selectedCells = []
@@ -404,6 +399,7 @@ export default {
       this.tableConfig.layoutDetail = arr
     },
     menyItemCmd(cmd) {
+      console.log(' menyItemCmd >>> ', cmd)
       switch (cmd) {
         case 'merge':
           this.mergeCell()
@@ -519,6 +515,7 @@ export default {
       this.reRenderTableLayout()
     },
     addRow() {
+      console.log('addRow 1 >> ', this.tableConfig)
       this.tableConfig.rows = this.tableConfig.rows + 1
       const colArray = [...new Array(this.tableConfig.rows).keys()]
       colArray.map((key) => {
@@ -529,6 +526,7 @@ export default {
           id: this.getUuid()
         }
       })
+      console.log('addRow 2 >> ', this.tableConfig)
       this.reRenderTableLayout()
     },
     onCellActive({id}) {

src/components/elements/yvan-table/YvanSimpleTextInTable.vue

@@ -32,6 +32,7 @@
 <script>
 import {mapState} from 'pinia'
 import {globalStore} from "@/store"
+import {system} from '@/utils/system'
 import commonMixin from '@/mixin/commonMixin'
 import {StyledSimpleText} from '@/components/elements/style'
 
@@ -160,7 +161,7 @@ export default {
           this.canEdit = false
         }
       } else {
-        System.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
+        system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
       }
     },
     handleDragEnter() {

src/components/yvan-editor/Editor.vue

@@ -76,30 +76,20 @@
 </template>
 
 <script>
+import Big from 'big.js'
+import eventBus from "@/utils/eventBus";
+import CONSTANT from '@/utils/constant'
+import commonMixin from '@/mixin/commonMixin'
 import {mapActions, mapState} from "pinia";
 import {globalStore, ruleStore, modeStore} from "@/store";
-import SketchRuler from '../sketch-ruler/sketchRuler.vue'
-import CONSTANT from '@/utils/constant.js'
 import {Context, ContextItem, directive} from '@/components/yvan-context'
-import ComponentAdjuster from '@/components/yvan-editor/ComponentAdjuster.vue'
 import {getComponentRotatedStyle, getShapeStyle} from '@/utils/style-util.js'
-import Big from 'big.js'
-// import RoyText from '@/components/elements/YvanRichText.vue'
-// import YvanSimpleText from '@/components/elements/YvanSimpleText.vue'
-// import RoyRect from '@/components/elements/RoyRect'
-// import RoyLine from '@/components/elements/YvanLine.vue'
-// import RoyImage from '@/components/elements/RoyImage'
-// import RoyStar from '@/components/elements/RoyStar'
-// import RoyCircle from '@/components/elements/RoyCircle'
-// import RoySimpleTable from '@/components/elements/RoyTable/RoySimpleTable.vue'
-// import RoyComplexTable from '@/components/elements/RoyTable/RoyComplexTable'
-// import RoyGroup from '@/components/elements/RoyGroup'
-import Area from '@/components/yvan-editor/Area.vue'
-import commonMixin from '@/mixin/commonMixin'
 import {isPreventDrop} from '@/utils/html-util.js'
+import Area from '@/components/yvan-editor/Area.vue'
+import SketchRuler from '../sketch-ruler/sketchRuler.vue'
 import EditorLine from '@/components/yvan-editor/EditorLine.vue'
 import EditorCoordinate from '@/components/yvan-editor/EditorCoordinate.vue'
-import eventBus from "@/utils/eventBus.js";
+import ComponentAdjuster from '@/components/yvan-editor/ComponentAdjuster.vue'
 
 const {MIN_SCALE, MAX_SCALE} = CONSTANT
 
@@ -116,16 +106,6 @@ export default {
     Context,
     ContextItem,
     ComponentAdjuster,
-    // RoyText,
-    // YvanSimpleText,
-    // RoyGroup,
-    // RoyRect,
-    // RoyLine,
-    // RoyCircle,
-    // RoyStar,
-    // RoyImage,
-    // RoySimpleTable,
-    // RoyComplexTable,
     Area
   },
   props: {
@@ -384,8 +364,6 @@ export default {
       e.preventDefault()
       let top = e.clientY
       let left = e.clientX
-      console.log("handleContextMenu >>> ", top, left, e)
-      // globalStore().showContextMenu( {top, left})
       eventBus.emit("showContextMenu", {top, left})
     },
     hideArea() {
@@ -563,7 +541,6 @@ export default {
     },
     needReDrawRuler: {
       handler() {
-        console.log("needReDrawRuler >>> ", this)
         this.$nextTick(() => {
           this.handleScroll()
           this.$refs.sketchRuler?.$children[0]?.$children[0]?.drawRuler()

src/main.ts

@@ -6,7 +6,6 @@ import '@/assets/style/main.less'
 import '@/assets/style/variable.css'
 import 'element-plus/theme-chalk/index.css'
 import * as Icons from '@ant-design/icons-vue'
-import System from "@/utils/system";
 import App from '@/App.vue'
 import {install} from "@/components/elements"
 
@@ -17,8 +16,6 @@ for (const i in Icons) {
     app.component(i, Icons[i])
 }
 
-window['System'] = System;
-
 app.use({install})
 
 app.use(pinia).use(ElementPlus, {}).mount('#app')

src/mixin/commonMixin.js

@@ -1,18 +1,14 @@
-import Utils from '@/utils/utils'
-import {deepCopy} from '@/utils/html-util'
+import {system} from '@/utils/system';
+import {deepCopy} from '@/utils/html-util';
+import {elementList} from "@/components/config/globalConfig";
 
 export default {
     methods: {
         deepCopy,
-        getUuid: Utils.getUuid,
+        getUuid: system.getUuid,
         isBlank(value) {
             return value === undefined || value === null || value === ''
         },
-        /**
-         * 通过name查找父组件
-         * @param {*} vueIns
-         * @param {*} name
-         */
         findParentComponent(vueIns, name) {
             let parent = vueIns.$parent
             while (parent) {
@@ -24,6 +20,12 @@ export default {
                 }
             }
             return false
+        },
+        findElementByCode(elementCode: string): any {
+            if (!elementList || elementList.length <= 0) {
+                return
+            }
+            return elementList.findLast(element => element.code === elementCode)
         }
     }
 }

src/store/copy.ts

@@ -1,90 +1,91 @@
 import Utils from '@/utils/utils'
-import { deepCopy } from '@/utils/html-util'
+import {system} from '@/utils/system'
+import {deepCopy} from '@/utils/html-util'
 
 export default {
-  state: {
-    copyData: null, // 复制粘贴剪切
-    isCut: false,
-    menuTop: 0, // 右击菜单数据
-    menuLeft: 0
-  },
-  actions: {
-    copy() {
-      if (!this.curComponent) {
-        System.toast('请选择组件')
-        return
-      }
+    state: {
+        copyData: null, // 复制粘贴剪切
+        isCut: false,
+        menuTop: 0, // 右击菜单数据
+        menuLeft: 0
+    },
+    actions: {
+        copy() {
+            if (!this.curComponent) {
+                system.toast('请选择组件')
+                return
+            }
 
-      // 如果有剪切的数据，需要先还原
-      restorePreCutData()
-      copyData()
+            // 如果有剪切的数据，需要先还原
+            restorePreCutData()
+            copyData()
 
-      this.isCut = false
-    },
+            this.isCut = false
+        },
 
-    paste(isMouse) {
-      if (!this.copyData) {
-        // toast('请选择组件')
-        return
-      }
+        paste(isMouse) {
+            if (!this.copyData) {
+                // toast('请选择组件')
+                return
+            }
 
-      const data = this.copyData.data
+            const data = this.copyData.data
 
-      if (isMouse) {
-        data.style.top = this.menuTop
-        data.style.left = this.menuLeft
-      } else {
-        data.style.top += 10
-        data.style.left += 10
-      }
+            if (isMouse) {
+                data.style.top = this.menuTop
+                data.style.left = this.menuLeft
+            } else {
+                data.style.top += 10
+                data.style.left += 10
+            }
 
-      data.id = Utils.getUuid()
-      data.label = `${data.name}-${data.id}`
-      // store.commit('printTemplateModule/addComponent', {
-      //   component: deepCopy(data)
-      // })
-      if (this.isCut) {
-        this.copyData = null
-      }
-    },
+            data.id = Utils.getUuid()
+            data.label = `${data.name}-${data.id}`
+            // store.commit('printTemplateModule/addComponent', {
+            //   component: deepCopy(data)
+            // })
+            if (this.isCut) {
+                this.copyData = null
+            }
+        },
 
-    cut() {
-      if (!this.curComponent) {
-        System.toast('请选择组件')
-        return
-      }
+        cut() {
+            if (!this.curComponent) {
+                system.toast('请选择组件')
+                return
+            }
 
-      // 如果重复剪切，需要恢复上一次剪切的数据
-      restorePreCutData()
-      copyData()
+            // 如果重复剪切，需要恢复上一次剪切的数据
+            restorePreCutData()
+            copyData()
 
-      this.deleteComponent()
-      this.isCut = true
-    },
+            this.deleteComponent()
+            this.isCut = true
+        },
 
-    showContextMenu({ top, left }) {
-      this.menuTop = top
-      this.menuLeft = left
+        showContextMenu({top, left}) {
+            this.menuTop = top
+            this.menuLeft = left
+        }
     }
-  }
 }
 
 // 恢复上一次剪切的数据
 function restorePreCutData() {
-  if (this.isCut && this.copyData) {
-    const data = deepCopy(this.copyData.data)
-    const index = this.copyData.index
-    // store.commit('addComponent', { component: data, index })
-    if (this.curComponentIndex >= index) {
-      // 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
-      this.curComponentIndex++
+    if (this.isCut && this.copyData) {
+        const data = deepCopy(this.copyData.data)
+        const index = this.copyData.index
+        // store.commit('addComponent', { component: data, index })
+        if (this.curComponentIndex >= index) {
+            // 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
+            this.curComponentIndex++
+        }
     }
-  }
 }
 
 function copyData() {
-  this.copyData = {
-    data: deepCopy(this.curComponent),
-    index: this.curComponentIndex
-  }
+    this.copyData = {
+        data: deepCopy(this.curComponent),
+        index: this.curComponentIndex
+    }
 }

src/utils/elementUtils.ts

@@ -1,13 +0,0 @@
-import {elementList} from "@/components/config/globalConfig";
-
-class ElementUtils {
-
-    getElementByCode(elementCode: string): any {
-        const elements = elementList.filter(element => element.code === elementCode)
-        if (elements) {
-            return elements[0]
-        }
-    }
-}
-
-export default new ElementUtils()

src/utils/system.ts

@@ -5,13 +5,13 @@ import * as FaIcon from '@vicons/fa';
 import Toast from "@/components/yvan-ui/yvan-print-toast"
 import Dialog from "@/components/yvan-ui/yvan-print-dialog"
 
-export default class System {
+class System {
 
-    public static getUuid(length = 8) {
+    public getUuid(length = 8) {
         return nanoid(length)
     }
 
-    public static toast(message: string = '', type: string = 'warning', duration: number = 3000): void {
+    public toast(message: string = '', type: string = 'warning', duration: number = 3000): void {
         return Toast({
             type: type,
             message: message,
@@ -19,19 +19,21 @@ export default class System {
         })
     }
 
-    public static showDialog(componentName: any, props: DialogProps): Promise<any> {
+    public showDialog(componentName: any, props: DialogProps): Promise<any> {
         return Dialog({componentName, ...props})
     }
 
-    public static renderIcon(iconName: string): any {
-        if(!iconName){
+    public renderIcon(iconName: string): any {
+        if (!iconName) {
             return
         }
         return () => h(ElIcon, null, {default: () => h(FaIcon[iconName])});
     }
 }
 
-interface DialogProps {
+export const system = new System()
+
+export interface DialogProps {
     title: String,
     width: Number,
 }