page config

src/components/YvanPrintDesignerLeft_o.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="yvan-print-designer-left-element">
-    <yvan-print-designer-left-element/>
-  </div>
-  <div class="yvan-print-designer-left-structure">
-    <yvan-print-designer-left-structure/>
-  </div>
-</template>
-
-<script>
-import YvanPrintDesignerLeftElement from "@/components/YvanPrintDesignerLeftElement.vue";
-import YvanPrintDesignerLeftStructure from "@/components/YvanPrintDesignerLeftStructure.vue";
-
-export default {
-  name: 'yvan-print-designer-left',
-  components: {
-    YvanPrintDesignerLeftElement,
-    YvanPrintDesignerLeftStructure
-  },
-  data() {
-    return {
-      isNightMode: false,
-    }
-  },
-  props: {
-    showRight: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {},
-  methods: {},
-  mounted() {
-  },
-  watch: {}
-}
-</script>
-
-<style lang="less" scoped>
-.yvan-print-designer-left-element {
-  height: calc(50% - 10px);
-  width: 100%;
-}
-
-.yvan-print-designer-left-structure {
-  height: calc(50% - 10px);
-  width: 100%;
-  margin-top: 10px;
-}
-
-</style>

src/components/YvanPrintDesignerMain.vue

@@ -19,7 +19,7 @@
 <script>
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {system} from '@/utils/system'
+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";

src/components/YvanPrintPageFormat.vue

@@ -1,123 +1,92 @@
 <template>
   <div class="yvan-print-page-format">
-    <div class="yvan-print-page-format__content">
-      <el-form label-width="80px">
-        <el-form-item label="纸张大小">
-          <el-select v-model="pageFormat.pageSize" class="m-2" placeholder="请选择纸张大小" clearable>
-            <el-option
-                v-for="pageSize in pageSizeList"
-                :key="pageSize.name"
-                :label="pageSize.name"
-                :value="pageSize.name"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="纸张方向">
-          <el-radio-group v-model="pageFormat.pageDirection">
-            <el-radio-button
-                v-for="pageDirection in pageDirectionList"
-                :label="pageDirection.label"/>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="宽度">
-          <el-input-number v-model="pageFormat.width" controls-position="right"/>
-          (mm)
-        </el-form-item>
-        <el-form-item label="高度">
-          <el-input-number v-model="pageFormat.height" controls-position="right"/>
-          (mm)
-        </el-form-item>
-        <!--        <el-form-item label="单位">-->
-        <!--          <el-select class="m-2" placeholder="Select">-->
-        <!--            <el-option key="item.value" label="item.label" value="item.value"/>-->
-        <!--          </el-select>-->
-        <!--        </el-form-item>-->
-        <el-form-item label="外边距" class="yvan-print-page-format__margins">
-          <el-input-number v-model="pageFormat.margins.top" placeholder="上" controls-position="right"/>
-          <el-input-number v-model="pageFormat.margins.right" placeholder="右" controls-position="right"/>
-          <el-input-number v-model="pageFormat.margins.bottom" placeholder="下" controls-position="right"/>
-          <el-input-number v-model="pageFormat.margins.left" placeholder="左" controls-position="right"/>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="yvan-print-page-format__content_display">
-      <div class="yvan-print-page-format__content_display_detail"/>
-    </div>
+    <el-form label-width="80px">
+      <el-form-item label="模板名称">
+        <el-input v-model="pageConfig.title" placeholder="请输入模板名称"/>
+      </el-form-item>
+      <el-form-item label="模板编码">
+        <el-input v-model="pageConfig.code" placeholder="请输入模板编码"/>
+      </el-form-item>
+      <el-form-item label="纸张大小">
+        <el-select v-model="pageConfig.pageSize" class="m-2" placeholder="请选择纸张大小" clearable>
+          <el-option
+              v-for="pageSize in pageSizeList"
+              :key="pageSize.name"
+              :label="pageSize.name"
+              :value="pageSize.name"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="纸张方向">
+        <el-radio-group v-model="pageConfig.pageDirection" @change="changePageDirection">
+          <el-radio-button
+              v-for="pageDirection in pageDirectionList"
+              :label="pageDirection.value">
+            {{ pageDirection.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="宽度">
+        <el-input-number v-model="pageConfig.pageWidth" controls-position="right" @change="changePageWidth"/>
+        (mm)
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="pageConfig.pageHeight" controls-position="right" @change="changePageHeight"/>
+        (mm)
+      </el-form-item>
+      <el-form-item label="外边距" class="yvan-print-page-format__margins">
+        <el-input-number v-model="pageConfig.margins.top" placeholder="上" controls-position="right"/>
+        <el-input-number v-model="pageConfig.margins.right" placeholder="右" controls-position="right"/>
+        <el-input-number v-model="pageConfig.margins.bottom" placeholder="下" controls-position="right"/>
+        <el-input-number v-model="pageConfig.margins.left" placeholder="左" controls-position="right"/>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
+import {storeToRefs} from "pinia";
+import {globalStore} from "@/store";
 import {pageSizeList, pageDirectionList} from '@/components/config/globalConfig'
-import {reactive} from "vue";
 
-const defaultPageSize = pageSizeList[0]
-const defaultPageDirection = pageDirectionList[0]
+const {pageConfig} = storeToRefs(globalStore())
 
-const pageFormat = reactive<PageFormat>({
-  pageSize: defaultPageSize,
-  pageDirection: defaultPageDirection.label,
-  width: defaultPageSize.width,
-  height: defaultPageSize.height,
-  unit: "mm",
-  margins: {
-    top: 10,
-    bottom: 10,
-    left: 10,
-    right: 10
-  }
-})
-
-interface PageFormat {
-  pageSize: any,
-  pageDirection: string,
-  width: number,
-  height: number,
-  unit: string,
-  margins: Margins
+const changePageDirection = (newPageDirection) => {
+  globalStore().togglePageDirection(newPageDirection)
 }
 
-interface Margins {
-  top: number,
-  bottom: number,
-  left: number,
-  right: number
+const changePageWidth = (newPageWidth) => {
+  globalStore().setPageSize({
+    pageSize: pageConfig.value.pageSize,
+    w: newPageWidth,
+    h: pageConfig.value.pageHeight
+  })
 }
 
-
+const changePageHeight = (newPageHeight) => {
+  globalStore().setPageSize({
+    pageSize: pageConfig.value.pageSize,
+    w: pageConfig.value.pageWidth,
+    h: newPageHeight
+  })
+}
 </script>
 
 <style lang="less">
 .yvan-print-page-format {
 
-  .yvan-print-page-format__content {
-    display: flex;
-
-    .yvan-print-page-format__margins {
-
-      .el-input-number {
-        width: 80px;
-      }
-    }
+  .el-select {
+    width: 100%;
   }
 
+  .el-input-number {
+    width: calc(100% - 36px);
+  }
 
-  .yvan-print-page-format__content_display {
-    background: #ffffff;
-    position: absolute;
-    top: 75px;
-    right: 125px;
-    width: 168px;
-    height: 237.6px;
-    border: 1px solid;
-    box-shadow: -2px -2px #aaaaaa, 2px -2px #aaaaaa, -2px 2px #aaaaaa, 2px 2px #aaaaaa;
+  .yvan-print-page-format__margins {
 
-    .yvan-print-page-format__content_display_detail {
-      width: 158px;
-      height: 227.6px;
-      margin: 5px;
-      border: 1px solid #aaaaaa;
+    .el-input-number {
+      width: 25%;
     }
   }
-
-
 }
 </style>

src/components/config/globalConfig.ts

@@ -4,8 +4,9 @@ export const pageSizeList = [
 ]
 /** 纸张方向 */
 export const pageDirectionList = [
-    {label: "垂直方向", value: "vertical"},
-    {label: "水平方向", value: "horizontal"},
+    // vertical or horizontal
+    {label: "垂直方向", value: "v"},
+    {label: "水平方向", value: "h"},
 ]
 /** 字体 */
 export const fontList = [

src/components/config/toolbarConfig.ts

@@ -1,5 +1,5 @@
 import {ruleStore} from "@/store";
-import {system} from '@/utils/system';
+import system from '@/utils/system';
 import YvanPrintPageFormat from "@/components/YvanPrintPageFormat.vue";
 
 export default [
@@ -19,7 +19,7 @@ export default [
     // },
     {
         name: '显示/隐藏标尺',
-        icon: 'fa fa-industry',
+        icon: 'fa fa-eye',
         event: () => {
             ruleStore().toggleRuler()
         }
@@ -29,14 +29,14 @@ export default [
         icon: 'fa fa-exchange',
         event: () => {
             ruleStore().rotateRect()
-            // ruleStore().setReDrawRuler()
+            ruleStore().setReDrawRuler()
         }
     },
     {
         name: '页面设置',
         icon: 'fa fa-gear',
         event: () => {
-            system.showDialog(YvanPrintPageFormat, {title: "页面设置", width: 40}).then((res: any) => {
+            system.showDialog(YvanPrintPageFormat, {title: "页面设置", width: 35}).then((res: any) => {
                 console.log(" >>> then", res)
             }).catch((res: any) => {
                 console.log(" >>> catch", res)

src/components/elements/YvanRichText.vue

@@ -9,7 +9,7 @@
 <script>
 import {mapState} from 'pinia';
 import {globalStore} from '@/store';
-import {system} from '@/utils/system';
+import system from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledText} from '@/components/elements/style';
 import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';

src/components/elements/YvanSimpleText.vue

@@ -31,7 +31,7 @@
 <script>
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
-import {system} from '@/utils/system';
+import system from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledSimpleText} from '@/components/elements/style';
 import YvanSimpleTextProps from "@/components/elements/YvanSimpleTextProps.vue";

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

@@ -9,7 +9,7 @@
 <script>
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
-import {system} from '@/utils/system';
+import system from '@/utils/system';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledText} from '@/components/elements/style';
 import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';

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

@@ -32,7 +32,7 @@
 <script>
 import {mapState} from 'pinia'
 import {globalStore} from "@/store"
-import {system} from '@/utils/system'
+import system from '@/utils/system'
 import commonMixin from '@/mixin/commonMixin'
 import {StyledSimpleText} from '@/components/elements/style'
 

src/components/yvan-editor/Editor.vue

@@ -54,8 +54,8 @@
           <!-- 标线 -->
           <EditorLine/>
           <!-- 上下边距线 -->
-          <div :style="`top: ${pageConfig?.pageMarginTop * realScale}px`" class="yvan-print-margin-top-line"/>
-          <div :style="`bottom: ${pageConfig?.pageMarginBottom * realScale}px`" class="yvan-print-margin-bottom-line"/>
+          <div :style="`top: ${pageConfig?.margins?.top * realScale}px`" class="yvan-print-margin-top-line"/>
+          <div :style="`bottom: ${pageConfig?.margins?.bottom * realScale}px`" class="yvan-print-margin-bottom-line"/>
         </div>
       </div>
     </div>

src/mixin/commonMixin.js

@@ -1,4 +1,4 @@
-import {system} from '@/utils/system';
+import system from '@/utils/system';
 import {deepCopy} from '@/utils/html-util';
 import {elementList} from "@/components/config/globalConfig";
 

src/store/copy.ts

@@ -1,5 +1,5 @@
 import Utils from '@/utils/utils'
-import {system} from '@/utils/system'
+import system from '@/utils/system'
 import {deepCopy} from '@/utils/html-util'
 
 export default {

src/store/global.ts

@@ -17,18 +17,16 @@ export const globalStore = defineStore('global', {
             pageConfig: {
                 // 页面大小
                 pageSize: 'A4',
-                // 页面方向 l 横向长 p 纵向长
-                pageDirection: 'p',
+                // 页面方向 h 水平方向 v 垂直方向
+                pageDirection: 'v',
                 // 页面长度：mm
                 pageWidth: 210,
                 // 页面高度：mm
-                pageHeight: 297,
-                // 页面下边距 mm
-                pageMarginBottom: 8,
-                // 页面上边距 mm
-                pageMarginTop: 8,
-                // 页面标题/模板标题
+                pageHeight: 290,
+                // 模板标题
                 title: '新建模板',
+                // 模板编码
+                code: 'TEMPLATE',
                 // 默认缩放比例：100%
                 scale: 1,
                 // 页面背景
@@ -40,7 +38,14 @@ export const globalStore = defineStore('global', {
                 // 默认字体
                 fontFamily: 'simhei',
                 // 默认行高
-                lineHeight: 1
+                lineHeight: 1,
+                // 页面边距 mm
+                margins: {
+                    top: 8,
+                    right: 8,
+                    bottom: 8,
+                    left: 8
+                }
             },
             // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
             isInEditor: false,
@@ -53,7 +58,6 @@ export const globalStore = defineStore('global', {
             // 点击画布时是否点中组件，主要用于取消选中组件用。
             // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
             isClickComponent: false,
-            isInEdiotr: false,
             curTableSettingId: null
         }
     },
@@ -72,7 +76,7 @@ export const globalStore = defineStore('global', {
         },
 
         setInEditorStatus(status) {
-            this.isInEdiotr = status
+            this.isInEditor = status
         },
 
         setCanvasStyle(state, style) {
@@ -93,11 +97,19 @@ export const globalStore = defineStore('global', {
             this.pageConfig.pageSize = pageSize
             this.pageConfig.pageWidth = w
             this.pageConfig.pageHeight = h
+            console.log('w, h', w, h)
+            ruleStore().setRect({w: w, h: h})
+            ruleStore().setReDrawRuler()
         },
 
-        togglePageDirection(state) {
-            const direction = state.pageConfig.pageDirection
-            state.pageConfig.pageDirection = direction === 'p' ? 'l' : 'p'
+        togglePageDirection(pageDirection) {
+            const pageConfig = this.pageConfig
+            pageConfig.pageDirection = pageDirection
+            ruleStore().setRect({
+                w: pageDirection === 'v' ? pageConfig.pageWidth : pageConfig.pageHeight,
+                h: pageDirection === 'v' ? pageConfig.pageHeight : pageConfig.pageWidth
+            })
+            ruleStore().setReDrawRuler()
         },
 
         setPageConfig(pageConfig) {
@@ -212,5 +224,9 @@ export const globalStore = defineStore('global', {
             }
         },
     },
-    getters: {}
+    getters: {
+        getPageConfig(state) {
+            return state.pageConfig
+        },
+    }
 })

src/store/ruler-things.ts

@@ -1,6 +1,7 @@
+import Big from 'big.js'
 import {defineStore} from "pinia";
+import {globalStore} from "@/store/global";
 import CONSTANT from '@/utils/constant';
-import Big from "big.js";
 
 const {MIN_SCALE, MAX_SCALE} = CONSTANT
 
@@ -8,8 +9,8 @@ const {MIN_SCALE, MAX_SCALE} = CONSTANT
 export const ruleStore = defineStore('ruleThings', {
     state: () => ({
         scale: 5,
-        rectWidth: 210,
-        rectHeight: 297,
+        rectWidth: globalStore().getPageConfig.pageWidth,
+        rectHeight: globalStore().getPageConfig.pageHeight,
         needReDrawRuler: 0,
         showRuler: true
     }),
@@ -37,9 +38,9 @@ export const ruleStore = defineStore('ruleThings', {
         setReDrawRuler() {
             this.needReDrawRuler += 1
         },
-        setRect(payload) {
-            this.rectWidth = payload.w
-            this.rectHeight = payload.h
+        setRect({w, h}) {
+            this.rectWidth = w
+            this.rectHeight = h
         },
         rotateRect() {
             const tmpHeight = this.rectHeight

src/utils/system.ts

@@ -31,7 +31,7 @@ class System {
     }
 }
 
-export const system = new System()
+export default new System()
 
 export interface DialogProps {
     title: String,

vite.config.ts

@@ -33,4 +33,7 @@ export default defineConfig({
             },
         },
     },
+    server: {
+        host: true
+    }
 })