page config

components.d.ts

@@ -94,6 +94,7 @@ declare module 'vue' {
     YvanLinePropsTemplate: typeof import('./src/components/elements/YvanLinePropsTemplate.vue')['default']
     YvanPrintAside: typeof import('./src/components/yvan-ui/YvanPrintAside.vue')['default']
     YvanPrintBarcode: typeof import('./src/components/yvan-ui/YvanPrintBarcode.vue')['default']
+    YvanPrintBarcode_2: typeof import('./src/components/yvan-ui/YvanPrintBarcode_2.vue')['default']
     YvanPrintContainer: typeof import('./src/components/yvan-ui/YvanPrintContainer.vue')['default']
     YvanPrintDataSource: typeof import('./src/components/YvanPrintDataSource.vue')['default']
     YvanPrintDesigner: typeof import('./src/components/YvanPrintDesigner.vue')['default']

src/components/YvanPrintDataSource.vue

@@ -26,6 +26,7 @@
 <script>
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
+import Constant from '@/utils/constant'
 import commonMixin from '@/mixin/commonMixin'
 import {functionList} from "@/components/config/globalConfig";
 
@@ -56,8 +57,7 @@ export default {
   },
   methods: {
     handleDragStartForFunction(e) {
-      console.log("handleDragStartForFunction >>> ", e)
-      e.dataTransfer.setData('datasource-index', e.target.dataset.code)
+      e.dataTransfer.setData(Constant.DATASOURCE_DRAG_KEY, e.target.dataset.code)
     },
   },
   mounted() {

src/components/config/globalConfig.ts

@@ -59,12 +59,10 @@ export const elementBands = [
 export const elementList = [
     {
         icon: 'fa fa-file-text-o',
-        code: 'text',
+        code: 'simpleText',
         name: '静态文本',
         component: 'YvanSimpleText',
-        expression: '双击编辑文本',
-        width: 200,
-        height: 50,
+        expression: '静态文本',
         style: {
             color: '#000000',
             padding: '0',
@@ -77,8 +75,8 @@ export const elementList = [
             borderColor: '#212121',
             borderType: 'none',
             borderPosition: [],
-            width: 200,
-            height: 50,
+            width: 150,
+            height: 30,
             fontSize: 10,
             background: '#FFFFFF',
             rotate: 0,
@@ -93,9 +91,7 @@ export const elementList = [
         code: 'text',
         name: '字段文本',
         component: 'YvanTextField',
-        expression: '双击编辑文本',
-        width: 200,
-        height: 50,
+        expression: '字段文本',
         style: {
             color: '#000000',
             padding: '0',
@@ -108,8 +104,8 @@ export const elementList = [
             borderColor: '#212121',
             borderType: 'none',
             borderPosition: [],
-            width: 200,
-            height: 50,
+            width: 150,
+            height: 30,
             fontSize: 10,
             background: '#FFFFFF',
             rotate: 0,
@@ -156,36 +152,34 @@ export const elementList = [
         },
         groupStyle: {}
     },
-    // {
-    //     icon: 'fa fa-table',
-    //     code: 'complex-table',
-    //     name: '复杂表格',
-    //     component: 'YvanComplexTable',
-    //     propValue: {},
-    //     showPrefix: true,
-    //     showHead: true,
-    //     showFoot: true,
-    //     showSuffix: true,
-    //     style: {
-    //         width: 'auto',
-    //         height: 'auto',
-    //         fontSize: 12,
-    //         fontFamily: 'default',
-    //         color: '#000000',
-    //         background: '#FFFFFF',
-    //         borderWidth: 2,
-    //         borderColor: '#212121',
-    //         rotate: 0
-    //     },
-    //     groupStyle: {}
-    // },
+    {
+        icon: 'fa fa-table',
+        code: 'complex-table',
+        name: '复杂表格',
+        component: 'YvanComplexTable',
+        propValue: {},
+        showPrefix: true,
+        showHead: true,
+        showFoot: true,
+        showSuffix: true,
+        style: {
+            width: 'auto',
+            height: 'auto',
+            fontSize: 12,
+            fontFamily: 'default',
+            color: '#000000',
+            background: '#FFFFFF',
+            borderWidth: 2,
+            borderColor: '#212121',
+            rotate: 0
+        },
+        groupStyle: {}
+    },
     {
         icon: 'fa fa-minus',
         code: 'line',
         name: '直线',
         component: 'YvanLine',
-        width: 200,
-        height: 1,
         style: {
             width: 200,
             height: 1,
@@ -199,15 +193,13 @@ export const elementList = [
         code: 'rectangle',
         name: '矩形',
         component: 'YvanRect',
-        width: 200,
-        height: 200,
         style: {
             borderRadius: 0,
             borderWidth: 1,
             borderColor: '#212121',
             borderType: 'solid',
-            width: 200,
-            height: 200,
+            width: 100,
+            height: 100,
             background: '#FFFFFF',
             rotate: 0
         },
@@ -238,15 +230,13 @@ export const elementList = [
         src: '/default_image.png',
         expression: '',
         title: '默认图片',
-        width: 200,
-        height: 137,
         style: {
             borderRadius: 0,
             borderWidth: 0,
             borderColor: '#212121',
             borderType: 'none',
-            width: 200,
-            height: 137,
+            width: 100,
+            height: 68,
             rotate: 0
         },
         groupStyle: {}
@@ -256,11 +246,8 @@ export const elementList = [
         code: 'barcode',
         name: '条形码',
         component: 'YvanBarcode',
-        width: 200,
-        height: 145,
-        expression: '',
+        expression: '1234567890',
         config: {
-            textValue: '1234567890',
             format: 'CODE128',
             displayValue: true,
             textAlign: 'center',
@@ -272,7 +259,7 @@ export const elementList = [
             borderColor: '#212121',
             borderRadius: 0,
             width: 200,
-            height: 145,
+            height: 114,
             background: '#fff',
             rotate: 0
         },
@@ -283,13 +270,10 @@ export const elementList = [
         code: 'qrcode',
         name: '二维码',
         component: 'YvanQrcode',
-        width: 100,
-        height: 100,
-        expression: '',
-        config: {
-            textValue: '1234567890',
-        },
+        expression: '1234567890',
         style: {
+            width: 100,
+            height: 100,
             borderType: 'none',
             borderWidth: 0,
             borderColor: '#212121',

src/components/elements/YvanBarcode.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="yvan-barcode">
     <StyledBarcode v-bind="style">
-      <yvan-print-barcode :config="element.config" />
+      <yvan-print-barcode :value="expression" :config="element.config" :style="element.style" />
     </StyledBarcode>
   </div>
 </template>
@@ -26,8 +26,8 @@ export default {
       default: () => {
       }
     },
-    propValue: {
-      type: Object,
+    expression: {
+      type: String,
       default: () => {
         return {}
       }

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.config.textValue" 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/YvanQrcode.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="yvan-qrcode">
     <StyledQrcode v-bind="style">
-      <qrcode-vue :value="element.config.textValue" :size="element.style.width" level="H"/>
+      <qrcode-vue :value="element.expression" :size="element.style.width" level="H"/>
     </StyledQrcode>
   </div>
 </template>
 
-<script>
+<script lang="js">
 import QrcodeVue from 'qrcode.vue';
 import commonMixin from '@/mixin/commonMixin';
 import {StyledQrcode} from '@/components/elements/style';
@@ -26,12 +26,6 @@ export default {
       default: () => {
       }
     },
-    propValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
   },
   computed: {
     style() {
@@ -57,7 +51,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .yvan-qrcode {
   height: 100%;
   padding: 0;

src/components/elements/YvanQrcodeProps.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.config.textValue" placeholder="请输入标题"/>
+        <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" @change="changeSize"/>

src/components/elements/YvanSimpleText.vue

@@ -1,11 +1,7 @@
 <template>
   <div
       class="yvan-simple-text"
-      @click="setEdit"
-      @contextmenu="setEdit"
-      @dragenter="handleDragEnter"
-      @dragleave="handleDragLeave"
-      @drop.stop.prevent="handleDrop"
+      @dblclick="setEdit"
   >
     <StyledSimpleText
         ref="editArea"
@@ -22,7 +18,7 @@
         @mousedown="handleMouseDown"
         @paste="clearStyle"
     >
-      <div class="yvan-simple-text-inner" v-html="propValue"></div>
+      <div class="yvan-simple-text-inner" v-html="expression"></div>
     </StyledSimpleText>
   </div>
 </template>
@@ -36,7 +32,7 @@ import {StyledSimpleText} from '@/components/elements/style';
 import YvanSimpleTextProps from "@/components/elements/YvanSimpleTextProps.vue";
 
 export default {
-  name: 'YvanTextField',
+  name: 'YvanSimpleText',
   mixins: [commonMixin],
   components: {
     StyledSimpleText,
@@ -48,6 +44,10 @@ export default {
       default: () => {
       }
     },
+    expression: {
+      type: String,
+      default: ''
+    },
     propValue: {
       type: String,
       default: ''

src/components/elements/YvanTextField.vue

@@ -1,13 +1,12 @@
 <template>
   <div
       class="yvan-simple-text"
-      @click="setEdit"
-      @contextmenu="setEdit"
+      @dblclick="setEdit"
       @dragenter="handleDragEnter"
       @dragleave="handleDragLeave"
       @drop.stop.prevent="handleDrop"
   >
-    <StyledSimpleText
+    <StyledTextField
         ref="editArea"
         :class="{
           'can-edit': canEdit,
@@ -22,8 +21,8 @@
         @mousedown="handleMouseDown"
         @paste="clearStyle"
     >
-      <div class="yvan-simple-text-inner" v-html="propValue"></div>
-    </StyledSimpleText>
+      <div class="yvan-text-field-inner" v-html="expression"></div>
+    </StyledTextField>
   </div>
 </template>
 
@@ -31,15 +30,17 @@
 import {mapState} from 'pinia';
 import {globalStore} from "@/store";
 import system from '@/utils/system';
+import Constant from '@/utils/constant'
 import commonMixin from '@/mixin/commonMixin';
-import {StyledSimpleText} from '@/components/elements/style';
+import {StyledTextField} from '@/components/elements/style';
+import {obtainExpression} from "@/utils/ExpressionUtils";
 import YvanTextFieldProps from "@/components/elements/YvanTextFieldProps.vue";
 
 export default {
-  name: 'YvanSimpleText',
+  name: 'YvanTextField',
   mixins: [commonMixin],
   components: {
-    StyledSimpleText,
+    StyledTextField,
     YvanTextFieldProps
   },
   props: {
@@ -48,6 +49,10 @@ export default {
       default: () => {
       }
     },
+    expression: {
+      type: String,
+      default: ''
+    },
     propValue: {
       type: String,
       default: ''
@@ -82,9 +87,6 @@ export default {
       if (this.canEdit) {
         return
       }
-      if (this.bindValue) {
-        return
-      }
       if (this.element.isLock) {
         return
       }
@@ -103,30 +105,17 @@ export default {
     },
     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')
+      const fieldCode = e.dataTransfer.getData(Constant.DATASOURCE_DRAG_KEY)
+      if (fieldCode) {
+        globalStore().setExpression({
+          bandCode: this.element.bandCode,
+          expression: obtainExpression(fieldCode),
+          id: this.element.id
+        })
+        this.canEdit = false
+        return;
       }
+      system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
     },
     handleBlur() {
       this.canEdit = false

src/components/elements/YvanTextFieldProps.vue

@@ -109,7 +109,7 @@ import {globalStore} from "@/store";
 import {fontList, borderTypeList} from "@/components/config/globalConfig";
 
 export default {
-  name: 'YvanSimpleTextProps',
+  name: 'YvanTextFieldProps',
   data() {
     return {
       fontList,

src/components/elements/style.js

@@ -132,11 +132,11 @@ export const StyledText = styled('div', textProps)`
   border: ${(props) => {
     const {borderWidth, borderType, borderColor} = props
     if (borderType === 'none') {
-      return borderType
+        return borderType
     } else {
-      return `${borderWidth}px ${borderType} ${borderColor}`
+        return `${borderWidth}px ${borderType} ${borderColor}`
     }
-  }};
+}};
 
   .yvan-text-inner {
     height: 100%;
@@ -195,21 +195,67 @@ export const StyledSimpleText = styled('div', textProps)`
     padding: ${(props) => `${props.padding}px`};
     line-height: ${(props) => props.lineHeight};
     letter-spacing: ${(props) => `${props.letterSpacing}px`};
-    font-weight: ${(props) => (props.textStyle?.includes('bold')? 'bold' : 'normal')};
-    font-style: ${(props) => (props.textStyle?.includes('italic')? 'oblique' : 'normal')};
+    font-weight: ${(props) => (props.textStyle?.includes('bold') ? 'bold' : 'normal')};
+    font-style: ${(props) => (props.textStyle?.includes('italic') ? 'oblique' : 'normal')};
     text-decoration: ${(props) => {
-      const {textStyle} = props
-      const isUnderLine = textStyle.includes('underline')
-      const isStrikethrough = textStyle.includes('strikethrough')
-      const propsValue = {
+    const {textStyle} = props
+    const isUnderLine = textStyle.includes('underline')
+    const isStrikethrough = textStyle.includes('strikethrough')
+    const propsValue = {
         underline: isUnderLine,
         'line-through': isStrikethrough
-      }
-      if (isUnderLine || isStrikethrough) {
+    }
+    if (isUnderLine || isStrikethrough) {
         return Object.keys(propsValue).filter((item) => propsValue[item]).join(' ')
-      } else {
+    } else {
         return 'none'
-      }
+    }
+}};
+  }
+`
+export const StyledTextField = styled('div', textProps)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  color: ${(props) => props.color};
+  background: ${(props) => props.background};
+  border: ${(props) => props.border};
+  border-radius: ${(props) => `${props.borderRadius}px`};
+  margin: ${(props) => props.margin};
+  font-size: ${(props) => `${props.fontSize}pt`};
+  font-family: ${(props) => (props.fontFamily === 'default' ? 'inherit' : `${props.fontFamily}`)};
+  border-top: ${(props) => (props.borderPosition?.includes('top') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-right: ${(props) => (props.borderPosition?.includes('right') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-bottom: ${(props) => (props.borderPosition?.includes('bottom') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  border-left: ${(props) => (props.borderPosition?.includes('left') ? `${props.borderWidth}px ${props.borderType} ${props.borderColor}` : 'none')};
+  z-index: ${(props) => props.zIndex};
+
+  .yvan-text-field-inner {
+    height: 100%;
+    display: flex;
+    text-align: left;
+    word-break: break-all;
+    justify-content: ${(props) => props.justifyContent};
+    align-items: ${(props) => props.alignItems};
+    padding: ${(props) => `${props.padding}px`};
+    line-height: ${(props) => props.lineHeight};
+    letter-spacing: ${(props) => `${props.letterSpacing}px`};
+    font-weight: ${(props) => (props.textStyle?.includes('bold') ? 'bold' : 'normal')};
+    font-style: ${(props) => (props.textStyle?.includes('italic') ? 'oblique' : 'normal')};
+    text-decoration: ${(props) => {
+        const {textStyle} = props
+        const isUnderLine = textStyle.includes('underline')
+        const isStrikethrough = textStyle.includes('strikethrough')
+        const propsValue = {
+            underline: isUnderLine,
+            'line-through': isStrikethrough
+        }
+        if (isUnderLine || isStrikethrough) {
+            return Object.keys(propsValue).filter((item) => propsValue[item]).join(' ')
+        } else {
+            return 'none'
+        }
     }};
   }
 `
@@ -225,11 +271,11 @@ export const StyledRect = styled('div', rectProps)`
   border: ${(props) => {
     const {borderWidth, borderType, borderColor} = props
     if (borderType === 'none') {
-      return borderType
+        return borderType
     } else {
-      return `${borderWidth}px ${borderType} ${borderColor}`
+        return `${borderWidth}px ${borderType} ${borderColor}`
     }
-  }};
+}};
 `
 
 export const StyledImage = styled('div', imageProps)`
@@ -246,15 +292,15 @@ export const StyledImage = styled('div', imageProps)`
   img {
     height: 100%;
     border-radius: ${(props) =>
-            isNaN(props.borderRadius) ? props.borderRadius : `${props.borderRadius}px`};
+    isNaN(props.borderRadius) ? props.borderRadius : `${props.borderRadius}px`};
     z-index: ${(props) => props.zIndex};
     border: ${(props) => {
-      const {borderWidth, borderType, borderColor} = props
-      if (borderType === 'none') {
-        return borderType
-      } else {
-        return `${borderWidth}px ${borderType} ${borderColor}`
-      }
+        const {borderWidth, borderType, borderColor} = props
+        if (borderType === 'none') {
+            return borderType
+        } else {
+            return `${borderWidth}px ${borderType} ${borderColor}`
+        }
     }};
   }
 `
@@ -267,12 +313,12 @@ export const StyledBarcode = styled('div', barcodeProps)`
     z-index: ${(props) => props.zIndex};
     border-radius: ${(props) => isNaN(props.borderRadius) ? props.borderRadius : `${props.borderRadius}px`};
     border: ${(props) => {
-      const {borderWidth, borderType, borderColor} = props
-      if (borderType === 'none') {
-        return borderType
-      } else {
-        return `${borderWidth}px ${borderType} ${borderColor}`
-      }
+        const {borderWidth, borderType, borderColor} = props
+        if (borderType === 'none') {
+            return borderType
+        } else {
+            return `${borderWidth}px ${borderType} ${borderColor}`
+        }
     }};
   }
 `
@@ -285,12 +331,12 @@ export const StyledQrcode = styled('div', qrcodeProps)`
     z-index: ${(props) => props.zIndex};
     border-radius: ${(props) => isNaN(props.borderRadius) ? props.borderRadius : `${props.borderRadius}px`};
     border: ${(props) => {
-      const {borderWidth, borderType, borderColor} = props
-      if (borderType === 'none') {
-        return borderType
-      } else {
-        return `${borderWidth}px ${borderType} ${borderColor}`
-      }
+        const {borderWidth, borderType, borderColor} = props
+        if (borderType === 'none') {
+            return borderType
+        } else {
+            return `${borderWidth}px ${borderType} ${borderColor}`
+        }
     }};
   }
 `
@@ -306,11 +352,11 @@ export const StyledCircle = styled('div', circleProps)`
   border: ${(props) => {
     const {borderWidth, borderType, borderColor} = props
     if (borderType === 'none') {
-      return borderType
+        return borderType
     } else {
-      return `${borderWidth}px ${borderType} ${borderColor}`
+        return `${borderWidth}px ${borderType} ${borderColor}`
     }
-  }};
+}};
 `
 
 export const StyledLine = styled('div', lineProps)`

src/components/yvan-editor/ComponentAdjuster.vue

@@ -25,8 +25,8 @@
         :key="item"
         :class="`yvan-print-component-adjuster__shape-point--${item}`"
         :style="getPointStyle(item)"
-        @mousedown="handleMouseDownOnPoint(item, $event)"
-    ></div>
+        @mousedown="handleMouseDownOnPoint(item, $event)"/>
+
     <div ref="slot" class="adjuster-container" @mousedown="handleMouseMoveItem">
       <slot></slot>
     </div>
@@ -40,7 +40,6 @@ import eventBus from '@/utils/eventBus'
 import {mod360} from '@/utils/translate'
 import commonMixin from '@/mixin/commonMixin'
 import {isPreventDrop} from '@/utils/html-util'
-import {getEditorRect} from "@/utils/editorUtils";
 import calculateComponentPositionAndSize from '@/utils/calculateComponentPositonAndSize'
 
 export default {
@@ -350,8 +349,8 @@ export default {
     handleMouseDownOnShape(event) {
       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})
+      console.log('>>> ', {top: elementRect.top, left: elementRect.right})
+      globalStore().showEditorMenu({top: elementRect.top, left: elementRect.right})
       globalStore().setInEditorStatus(true)
       globalStore().setClickComponentStatus(true)
       if (isPreventDrop(this.element.component)) {

src/components/yvan-editor/ComponentBand.vue

@@ -38,9 +38,8 @@
               :is="item.component"
               :id="'yvan-print-component-' + item.id"
               :active="item.id === (curComponent || {}).id"
-              :bind-value="item.bindValue"
               :element="item"
-              :prop-value="item.propValue"
+              :expression="item.expression"
               :scale="scale"
           />
         </ComponentAdjuster>
@@ -65,10 +64,10 @@
 
 <script>
 import Big from "big.js";
-import {mapActions, mapState} from "pinia";
-import {globalStore, modeStore, ruleStore} from "@/store";
+import {mapState} from "pinia";
+import {globalStore, ruleStore} from "@/store";
 import commonMixin from '@/mixin/commonMixin';
-import {getComponentRotatedStyle, getShapeStyle} from '@/utils/style-util.js';
+import {getShapeStyle} from '@/utils/style-util';
 import ComponentAdjuster from '@/components/yvan-editor/ComponentAdjuster.vue';
 
 export default {
@@ -132,7 +131,7 @@ export default {
     scale() {
       return new Big(this.realScale).div(new Big(5)).toNumber()
     },
-    getElements(){
+    getElements() {
       const elementBand = this.elementBands ? this.elementBands.get(this.bandCode) : {}
       return elementBand?.elements;
     },
@@ -167,7 +166,6 @@ export default {
     globalStore().addElementBand(elementBand)
   },
   methods: {
-    ...mapActions(globalStore, ['getElementBandByCode']),
     getShapeStyle,
     handleDragOver(event) {
       event.dataTransfer.dropEffect = 'copy'
@@ -184,6 +182,7 @@ export default {
         element.style.x = element.style.left
         element.id = this.getUuid()
         element.label = `${element.name}-${element.id}`
+        element.bandCode = this.bandCode
         globalStore().addElement({bandCode: this.bandCode, element: element})
         globalStore().recordSnapshot()
       } else {
@@ -275,7 +274,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-
 .yvan-component-band {
 
   .yvan-component-layout__top, .yvan-component-layout__bottom {
@@ -289,6 +287,7 @@ export default {
     border-left: 3px solid var(--yvan-menu-bar-background);
     position: absolute;
     width: 100%;
+    z-index: 5;
 
     .yvan-component-layout__title {
       margin: auto;

src/components/yvan-ui/YvanPrintBarcode.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="barcode"/>
+  <svg id="barcode" :width="computeWidth" :height="computeHeight"/>
 </template>
 
 <script>
@@ -8,8 +8,21 @@ import JsBarcode from 'jsbarcode';
 export default {
   name: "YvanPrintBarcode",
   props: {
+    value: {
+      type: String,
+      default: ''
+    },
     config: {
       type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    style: {
+      type: Object,
+      default: () => {
+        return {}
+      }
     }
   },
   data() {
@@ -18,11 +31,24 @@ export default {
   mounted() {
     this.createBarcode(this.config)
   },
+  computed: {
+    computeWidth(){
+      return `${this.style.width}px`;
+    },
+    computeHeight(){
+      return `${this.style.height}px`;
+    }
+  },
   methods: {
     createBarcode(config) {
-      JsBarcode("#barcode", config.textValue, {
-        ...config
+      JsBarcode("#barcode", this.value, {
+        ...config,
+        // height: this.style.height
       });
+      // const barcodeWidth = this.style.width;
+      // this.$nextTick(() => {
+      //   this.style.width = barcodeWidth;
+      // })
     }
   },
   watch: {

src/store/global.ts

@@ -132,6 +132,27 @@ export const globalStore = defineStore('global', {
             data[key] = value
         },
 
+        setExpression({bandCode, expression, id}) {
+            console.log('>>> ', bandCode, expression, id)
+            const elementBand = this.elementBands.get(bandCode)
+            if (elementBand) {
+                let newElementValue = null;
+                let newElementIndex = null;
+                const elements = elementBand.elements
+                for (let i = 0; i < elements?.length; i++) {
+                    if (elements[i].id === id) {
+                        newElementIndex = i
+                        newElementValue = elements[i]
+                        newElementValue.expression = expression
+                    }
+                    if (newElementIndex !== null) {
+                        elements[newElementIndex] = newElementValue
+                        this.recordSnapshot()
+                    }
+                }
+            }
+        },
+
         setPropValue({propValue, id}) {
             const componentData = this.componentData
             if (this.componentData.length) {
@@ -235,17 +256,17 @@ export const globalStore = defineStore('global', {
                 elementBand.elements.push(element)
             }
         },
-        deleteElement({elementBandCode, index}) {
-            const elementBand = this.elementBands.get(elementBandCode);
-            if (index === undefined) {
-                index = this.curComponentIndex
+        deleteElement({element, elementIdx}) {
+            const elementBand = this.elementBands.get(element.bandCode);
+            if (elementIdx === undefined) {
+                elementIdx = this.curComponentIndex
             }
-            if (index === this.curComponentIndex) {
+            if (elementIdx === this.curComponentIndex) {
                 this.curComponentIndex = null
                 this.curComponent = null
             }
-            if (/\d/.test(index)) {
-                elementBand.elements.splice(index, 1)
+            if (/\d/.test(elementIdx)) {
+                elementBand.elements.splice(elementIdx, 1)
             }
         },
         addComponent({component, index}) {

src/store/snapshot.ts

@@ -58,7 +58,7 @@ export default {
 
         recordSnapshot() {
             // 添加新的快照
-            console.log("snapshotData >>> ", this.snapshotData)
+            // console.log("snapshotData >>> ", this.snapshotData)
             this.snapshotData[++this.snapshotIndex] = deepCopy(this.componentData)
             // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
             if (this.snapshotIndex < this.snapshotData.length - 1) {

src/utils/ExpressionUtils.ts

@@ -0,0 +1,13 @@
+class ExpressionConstant {
+
+    public static readonly EXPRESSION_PREFIX = "${";
+
+    public static readonly EXPRESSION_SUFFIX = "}";
+}
+
+export function obtainExpression(fieldCode) {
+    if (!fieldCode) {
+        return fieldCode;
+    }
+    return ExpressionConstant.EXPRESSION_PREFIX + fieldCode + ExpressionConstant.EXPRESSION_SUFFIX;
+}

src/utils/constant.js

@@ -1,5 +1,7 @@
 export default {
     STORAGE_PREFIX: '_YVAN_DESIGNER_',
     MIN_SCALE: 0.25,
-    MAX_SCALE: 2
+    MAX_SCALE: 2,
+
+    DATASOURCE_DRAG_KEY: "fieldCode"
 }

src/utils/editorUtils.js

@@ -69,8 +69,12 @@ export function getEditorMenu() {
             label: '删除',
             status: 'danger',
             event: () => {
-                globalStore().deleteComponent(globalStore().curComponentIndex)
-                globalStore().recordSnapshot()
+                globalStore().deleteElement({
+                    element: globalStore().curComponent,
+                    elementIdx: globalStore().curComponentIndex
+                });
+                globalStore().recordSnapshot();
+                globalStore().hideEditorMenu();
             }
         },
         {
@@ -79,48 +83,49 @@ export function getEditorMenu() {
             label: '锁定',
             status: 'default',
             event: () => {
-                globalStore().lock({curComponent: currentElement})
+                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')
-            }
-        }
+        // {
+        //     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')
+        //     }
+        // }
     ]
 }