完善table组件

components.d.ts

@@ -91,6 +91,7 @@ declare module 'vue' {
     YvanComplexTableProps: typeof import('./src/components/elements/yvan-table/YvanComplexTableProps.vue')['default']
     YvanComplexTableProps_bak: typeof import('./src/components/elements/yvan-table/YvanComplexTableProps_bak.vue')['default']
     YvanComplexTablePropsAttr: typeof import('./src/components/elements/yvan-table/YvanComplexTablePropsAttr.vue')['default']
+    YvanComplexTablePropsElement: typeof import('./src/components/elements/yvan-table/YvanComplexTablePropsElement.vue')['default']
     YvanComplexTablePropsStyle: typeof import('./src/components/elements/yvan-table/YvanComplexTablePropsStyle.vue')['default']
     YvanDesigner: typeof import('./src/components/YvanDesigner.vue')['default']
     YvanFieldText: typeof import('./src/components/elements/YvanFieldText.vue')['default']

src/components/config/globalConfig.ts

@@ -21,17 +21,14 @@ export const borderTypeList = [
     // {code: 'double', name: '双线', label: '双线'},
 ]
 /** 条码类型 */
-export const barcodeTypList = [
-    {code: 'CODABAR', name: 'Codabar'},
-    {code: 'CODE128', name: 'Code128'},
-    {code: 'CODE128A', name: 'Code128A'},
-    {code: 'CODE128B', name: 'Code128B'},
-    {code: 'CODE128C', name: 'Code128C'},
+export const barcodeFormats = [
+    {code: 'CODE128', name: 'Code 128'},
     {code: 'CODE39', name: 'Code39'},
-    // {code: 'EAN8', name: 'EAN8'},
-    // {code: 'EAN13', name: 'EAN13'},
-    // {code: 'EAN8', name: 'EAN8'},
-    // {code: 'UPC', name: 'UPC'},
+    {code: 'EAN8', name: 'EAN8'},
+    {code: 'EAN13', name: 'EAN13'},
+    {code: 'UPC', name: 'UPC'},
+    {code: 'CODABAR', name: 'Codabar'},
+    {code: 'PHARMACODE', name: 'Pharmacode'},
 ]
 
 export const commonStyle = {
@@ -232,7 +229,7 @@ export const elementList = [
         component: 'YvanLine',
         style: {
             width: 200,
-            height: 1,
+            height: 5,
             background: '#000',
             rotate: 0
         },
@@ -278,8 +275,8 @@ export const elementList = [
         name: '图片',
         component: 'YvanImage',
         expression: '',
-        title: '默认图片',
         config: {
+            title: '默认图片',
             src: '/default_image.png',
         },
         style: {
@@ -287,8 +284,8 @@ export const elementList = [
             borderWidth: 0,
             borderColor: '#212121',
             borderType: 'none',
-            width: 50,
-            height: 50,
+            width: 80,
+            height: 60,
             rotate: 0
         },
         groupStyle: {}
@@ -324,8 +321,8 @@ export const elementList = [
         component: 'YvanQrcode',
         expression: '1234567890',
         style: {
-            width: 100,
-            height: 100,
+            width: 80,
+            height: 80,
             borderType: 'none',
             borderWidth: 0,
             borderColor: '#212121',

src/components/elements/YvanBarcode.vue

@@ -1,12 +1,10 @@
 <template>
-  <div class="yvan-barcode">
-    <StyledBarcode v-bind="style">
-      <yvan-print-barcode :value="expression" :config="element.config" :style="element.style" />
-    </StyledBarcode>
-  </div>
+  <StyledBarcode v-bind="style">
+    <yvan-print-barcode :value="expression" :config="element.config" :style="element.style" />
+  </StyledBarcode>
 </template>
 
-<script>
+<script lang="js">
 import commonMixin from '@/mixin/commonMixin'
 import {StyledBarcode} from '@/components/elements/style'
 import YvanPrintBarcode from "@/components/yvan-ui/YvanPrintBarcode.vue";

src/components/elements/YvanBarcodeProps.vue

@@ -6,13 +6,19 @@
       </el-form-item>
       <el-form-item label="条码类型">
         <el-select v-model="activeComponent.config.format" placeholder="请选择边框类型" filterable>
-          <el-option v-for="barcodeType in barcodeTypList" :label="barcodeType.name" :value="barcodeType.code"/>
+          <el-option v-for="barcodeFormat in barcodeFormats" :label="barcodeFormat.name" :value="barcodeFormat.code"/>
         </el-select>
       </el-form-item>
+      <el-form-item label="宽度">
+        <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
+      </el-form-item>
       <el-form-item label="是否显示文字">
         <el-switch v-model="activeComponent.config.displayValue" inline-prompt active-text="是" inactive-text="否"/>
       </el-form-item>
-      <el-form-item label="文字布局">
+      <el-form-item label="文字布局" v-if="activeComponent.config.displayValue">
         <el-radio-group v-model="activeComponent.config.textAlign" size="small">
           <el-radio-button label="left">
             <component is="align-left-outlined"/>
@@ -25,15 +31,9 @@
           </el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="文字大小">
+      <el-form-item label="文字大小" v-if="activeComponent.config.displayValue">
         <el-input-number v-model="activeComponent.config.fontSize" :min="0" controls-position="right"/>
       </el-form-item>
-      <el-form-item label="宽度">
-        <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
-      </el-form-item>
-      <el-form-item label="高度">
-        <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.borderType" placeholder="请选择边框类型" filterable>
           <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
@@ -58,13 +58,13 @@
 <script lang="ts">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
-import {barcodeTypList, borderTypeList} from "@/components/config/globalConfig";
+import {barcodeFormats, borderTypeList} from "@/components/config/globalConfig";
 
 export default {
   name: 'YvanBarcodeProps',
   data() {
     return {
-      barcodeTypList,
+      barcodeFormats,
       borderTypeList
     }
   },
@@ -75,9 +75,7 @@ export default {
       }
     }),
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
 
@@ -92,4 +90,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>

src/components/elements/YvanImage.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="yvan-image">
     <StyledImage v-bind="style">
-      <img :alt="element.title || 'YvanImage'" :src="element.src" />
+      <img :alt="config.title || 'YvanImage'" :src="config.src"/>
     </StyledImage>
   </div>
 </template>
 
-<script>
+<script lang="js">
 import commonMixin from '@/mixin/commonMixin'
-import { StyledImage } from '@/components/elements/style'
+import {StyledImage} from '@/components/elements/style'
 import YvanImageProps from "@/components/elements/YvanImageProps.vue";
 
 export default {
@@ -21,7 +21,8 @@ export default {
   props: {
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     propValue: {
       type: Object,
@@ -33,13 +34,17 @@ export default {
   computed: {
     style() {
       return this.element.style || {}
+    },
+    config() {
+      return this.element.config || {}
     }
   },
   data() {
     return {}
   },
   methods: {
-    initMounted() {}
+    initMounted() {
+    }
   },
   install(Vue) {
     Vue.component(this.name, this)

src/components/elements/YvanImageProps.vue

@@ -2,7 +2,7 @@
   <section class="yvan-image-props">
     <el-form ref="form" label-position="top">
       <el-form-item label="标题">
-        <el-input v-model="activeComponent.title" placeholder="请输入标题"/>
+        <el-input v-model="activeComponent.config.title" placeholder="请输入标题"/>
       </el-form-item>
       <el-form-item label="宽度">
         <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
@@ -19,8 +19,8 @@
             action="/wms_api/print/com/galaxis/wms/print/CommonManager@uploadFile"
             accept="image/*"
             :limit="1"
-            :before-upload="handleBeforeFileUpload"
-            :on-success="handleFileUploadSuccess"
+            :before-upload="handleBeforeUpload"
+            :on-success="handleUploadSuccess"
         >
           <component is="CloudUploadOutlined" :style="{fontSize: '20px'}"/>
         </el-upload>
@@ -66,12 +66,12 @@ export default {
     }),
   },
   methods: {
-    handleBeforeFileUpload(rawFile) {
+    handleBeforeUpload(rawFile) {
       const fileName = rawFile.name
       console.log('file name is ', fileName)
       return true
     },
-    handleFileUploadSuccess(response, uploadFile) {
+    handleUploadSuccess(res, uploadFile) {
 
     },
   }
@@ -96,4 +96,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>

src/components/elements/YvanLineProps.vue

@@ -29,7 +29,6 @@ export default {
   computed: {
     ...mapState(globalStore, {
       activeComponent: (state) => {
-        console.log("activeComponent => ", state.curComponent)
         return state.curComponent
       }
     }),
@@ -49,4 +48,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>

src/components/elements/index.js

@@ -7,7 +7,6 @@ import YvanBarcode from "@/components/elements/YvanBarcode.vue";
 import YvanRichText from "@/components/elements/YvanRichText.vue";
 import YvanTextField from "@/components/elements/YvanTextField.vue";
 import YvanSimpleText from "@/components/elements/YvanSimpleText.vue";
-import YvanSimpleTable from "@/components/elements/yvan-table/YvanSimpleTable.vue";
 import YvanComplexTable from "@/components/elements/yvan-table/YvanComplexTable.vue";
 
 export default {
@@ -21,7 +20,6 @@ export default {
         YvanRichText.install(app)
         YvanTextField.install(app)
         YvanSimpleText.install(app)
-        YvanSimpleTable.install(app)
         YvanComplexTable.install(app)
     }
-}
+}

src/components/elements/style.js

@@ -310,6 +310,8 @@ export const StyledBarcode = styled('div', barcodeProps)`
   height: 100%;
   
   svg {
+    width: ${(props) => `${props.width}px`};
+    height: ${(props) => `${props.height}px`};
     z-index: ${(props) => props.zIndex};
     border-radius: ${(props) => isNaN(props.borderRadius) ? props.borderRadius : `${props.borderRadius}px`};
     border: ${(props) => {

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

@@ -1,9 +1,10 @@
 <template>
-  <div ref="slot"
-       style="width: 120px; height:30px"
+  <div ref="_inner"
+       :style="defaultStyle"
        class="yvan-table-cell-container"
        @dragover.prevent="handleDragOver"
-       @drop.stop.prevent="handleDrop">
+       @drop.stop.prevent="handleDrop"
+       @click.stop.prevent="handleClick">
     <component
         v-if="!!innerElement"
         :is="innerElement.component"
@@ -14,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import {globalStore} from "@/store";
 import System from "@/utils/system"
 import commonMixin from "@/mixin/commonMixin";
@@ -54,14 +55,27 @@ export default {
   },
   data() {
     return {
-      selectedCells: [],
+      // selectedCells: [],
       // mousedown的时候设置为其他值 否则都是-1
-      selectionHold: -1,
-      element: {}
+      // selectionHold: -1,
+      // element: {}
+      tableCellWidth: 80,
+      tableCellHeight: 30,
+    }
+  },
+  computed: {
+    defaultStyle() {
+      console.log('defaultStyle > 222')
+      return `width: ${this.tableCellWidth}px; height: ${this.tableCellHeight}px;`;
     }
   },
-  computed: {},
   mounted() {
+    const innerEle = this.innerElement;
+    if (!innerEle || !innerEle?.style) {
+      return;
+    }
+    this.tableCellWidth = innerEle.style?.width;
+    this.tableCellHeight = innerEle.style?.height;
   },
   methods: {
     getIsActiveCell(row, col) {
@@ -76,7 +90,6 @@ export default {
         System.alert('无法获取该元素信息, 此次拖拽无效')
         return
       }
-      console.log('tableInnerElementCodes.includes(elementCode) >>', tableInnerElementCodes, elementCode, tableInnerElementCodes.includes(elementCode))
       if (!tableInnerElementCodes.includes(elementCode)) {
         System.alert(`${elementCode}类型元素不可拖入到表格单元格, 此次拖拽无效`)
         return
@@ -90,6 +103,13 @@ export default {
       element.id = this.getUuid()
       element.label = `${element.name}-${element.id}`
       element.bandCode = this.bandCode
+      element.style.width = this.tableCellWidth
+      element.style.height = this.tableCellHeight
+      if (this.isQrCodeElement(element)) {
+        const defaultSize = Math.min(this.tableCellWidth, this.tableCellHeight)
+        element.style.width = defaultSize
+        element.style.height = defaultSize
+      }
       globalStore().addTableCellElement(
           {
             bandCode: this.bandCode,
@@ -102,10 +122,13 @@ export default {
       )
       globalStore().recordSnapshot()
     },
+    handleClick() {
+      console.log("=>", this.bandRowName, this.rowNo, this.colNo, this.innerElement)
+    }
   },
 }
 </script>
 
 <style lang="less" scoped>
 
-</style>
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <td v-for="col in columnTotal">
-    <YvanComplexCell
+    <yvan-complex-cell
         :bandCode="element.bandCode"
         :elementId="element.id"
         :bandRowName="bandRowName"
@@ -46,4 +46,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <tr v-if="showBand()" v-for="row in column.rows">
+  <tr v-if="isShowBand" v-for="row in column.rows">
     <yvan-complex-col :band-row-name="bandRowName" :row="row" :element="element"/>
   </tr>
 </template>
@@ -29,10 +29,8 @@ export default {
   computed: {
     column() {
       return this.element?.config[this.bandRowName]
-    }
-  },
-  methods: {
-    showBand() {
+    },
+    isShowBand() {
       return !!this.element?.config[this.bandRowName];
     }
   }
@@ -41,4 +39,4 @@ export default {
 
 <style lang="less" scoped>
 
-</style>
+</style>

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

@@ -12,17 +12,14 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import {mapState} from 'pinia'
 import {globalStore} from "@/store"
 import commonMixin from '@/mixin/commonMixin'
 import {StyledComplexTable} from '@/components/elements/style'
 import ResizeObserver from '@/components/elements/yvan-table/ResizeObserver'
-import YvanSimpleTable from '@/components/elements/yvan-table/YvanSimpleTable.vue'
 import YvanComplexCell from '@/components/elements/yvan-table/YvanComplexCell.vue'
 import YvanComplexRow from '@/components/elements/yvan-table/YvanComplexRow.vue'
-import YvanRichTextInTable from '@/components/elements/yvan-table/YvanRichTextInTable.vue'
-import YvanSimpleTextInTable from '@/components/elements/yvan-table/YvanSimpleTextInTable.vue'
 import YvanComplexTableProps from '@/components/elements/yvan-table/YvanComplexTableProps.vue'
 
 const defaultTextProp = {
@@ -93,12 +90,9 @@ export default {
   name: 'YvanComplexTable',
   mixins: [commonMixin],
   components: {
-    YvanSimpleTable,
-    YvanComplexCell,
-    YvanComplexRow,
     StyledComplexTable,
-    YvanRichTextInTable,
-    YvanSimpleTextInTable
+    YvanComplexRow,
+    YvanComplexCell,
   },
   props: {
     element: {
@@ -122,9 +116,6 @@ export default {
     ...mapState(globalStore, {
       curTableSettingId: (state) => state.curTableSettingId
     }),
-    showTableDataSetting() {
-      return this.curTableSettingId !== null && this.curTableSettingId === this.element.id
-    },
     style() {
       return this.element.style || {}
     },
@@ -209,9 +200,6 @@ export default {
         }
         resizeObserver.onElResize(element, callback)
       })
-    },
-    showBand(bandConfig) {
-      return !!bandConfig;
     }
   },
   created() {

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

@@ -2,10 +2,13 @@
   <section class="yvan-complex-table-props">
     <el-tabs type="border-card">
       <el-tab-pane label="属性设置">
-        <YvanComplexTablePropsAttr/>
+        <yvan-complex-table-props-attr/>
       </el-tab-pane>
       <el-tab-pane label="样式设置">
-        <YvanComplexTablePropsStyle/>
+        <yvan-complex-table-props-style/>
+      </el-tab-pane>
+      <el-tab-pane label="组件设置">
+        <yvan-complex-table-props-element/>
       </el-tab-pane>
     </el-tabs>
   </section>
@@ -17,12 +20,14 @@ import {globalStore} from "@/store";
 import {fontList, borderTypeList} from "@/components/config/globalConfig";
 import YvanComplexTablePropsAttr from "@/components/elements/yvan-table/YvanComplexTablePropsAttr.vue";
 import YvanComplexTablePropsStyle from "@/components/elements/yvan-table/YvanComplexTablePropsStyle.vue";
+import YvanComplexTablePropsElement from "@/components/elements/yvan-table/YvanComplexTablePropsElement.vue";
 
 export default {
   name: 'YvanComplexTableProps',
   components: {
     YvanComplexTablePropsAttr,
-    YvanComplexTablePropsStyle
+    YvanComplexTablePropsStyle,
+    YvanComplexTablePropsElement
   },
   data() {
     return {
@@ -33,7 +38,6 @@ export default {
   computed: {
     ...mapState(globalStore, {
       activeComponent: (state) => {
-        console.log("activeComponent => ", state.curComponent)
         return state.curComponent
       }
     }),
@@ -52,4 +56,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <el-form ref="form" label-position="top">
+    <el-form-item label="背景颜色">
+      <el-color-picker v-model="activeComponent.style.background"/>
+    </el-form-item>
+    <el-form-item label="边框颜色">
+      <el-color-picker v-model="activeComponent.style.borderColor"/>
+    </el-form-item>
+    <el-form-item label="边框类型">
+      <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
+        <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="边框宽度">
+      <el-input-number v-model="activeComponent.style.borderWidth" :min="0" controls-position="right"/>
+    </el-form-item>
+    <el-form-item label="字体">
+      <el-select v-model="activeComponent.style.fontFamily" placeholder="请选择字体" filterable>
+        <el-option v-for="font in fontList" :label="font.name" :value="font.code"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="字体颜色">
+      <el-color-picker v-model="activeComponent.style.fontColor"/>
+    </el-form-item>
+    <el-form-item label="字体大小(pt)">
+      <el-input-number v-model="activeComponent.style.fontSize" :min="0" controls-position="right"/>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
+import {fontList, borderTypeList} from "@/components/config/globalConfig";
+
+export default {
+  name: "YvanComplexTablePropsStyle",
+  data() {
+    return {
+      fontList,
+      borderTypeList
+    }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      activeComponent: (state) => {
+        console.log("activeComponent => ", state.curComponent)
+        return state.curComponent
+      }
+    }),
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,19 +1,5 @@
 <template>
   <el-form ref="form" label-position="top">
-    <el-divider content-position="left">属性设置</el-divider>
-    <el-form-item label="展示头部留白">
-      <el-switch v-model="activeComponent.showPrefix" inline-prompt active-text="是" inactive-text="否"/>
-    </el-form-item>
-    <el-form-item label="展示头部单元格">
-      <el-switch v-model="activeComponent.showHead" inline-prompt active-text="是" inactive-text="否"/>
-    </el-form-item>
-    <el-form-item label="展示尾部单元格">
-      <el-switch v-model="activeComponent.showFoot" inline-prompt active-text="是" inactive-text="否"/>
-    </el-form-item>
-    <el-form-item label="展示尾部留白">
-      <el-switch v-model="activeComponent.showSuffix" inline-prompt active-text="是" inactive-text="否"/>
-    </el-form-item>
-    <el-divider content-position="left">样式设置</el-divider>
     <el-form-item label="背景颜色">
       <el-color-picker v-model="activeComponent.style.background"/>
     </el-form-item>
@@ -68,4 +54,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

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

@@ -1,82 +0,0 @@
-<template>
-  <section class="yvan-complex-table-props">
-    <el-form ref="form" label-position="top">
-      <el-divider content-position="left">属性设置</el-divider>
-      <el-form-item label="展示头部留白">
-        <el-switch v-model="activeComponent.showPrefix" inline-prompt active-text="是" inactive-text="否"/>
-      </el-form-item>
-      <el-form-item label="展示头部单元格">
-        <el-switch v-model="activeComponent.showHead" inline-prompt active-text="是" inactive-text="否"/>
-      </el-form-item>
-      <el-form-item label="展示尾部单元格">
-        <el-switch v-model="activeComponent.showFoot" inline-prompt active-text="是" inactive-text="否"/>
-      </el-form-item>
-      <el-form-item label="展示尾部留白">
-        <el-switch v-model="activeComponent.showSuffix" inline-prompt active-text="是" inactive-text="否"/>
-      </el-form-item>
-      <el-divider content-position="left">样式设置</el-divider>
-      <el-form-item label="背景颜色">
-        <el-color-picker v-model="activeComponent.style.background"/>
-      </el-form-item>
-      <el-form-item label="边框颜色">
-        <el-color-picker v-model="activeComponent.style.borderColor"/>
-      </el-form-item>
-      <el-form-item label="边框类型">
-        <el-select v-model="activeComponent.style.borderType" placeholder="请选择边框类型" filterable>
-          <el-option v-for="borderType in borderTypeList" :label="borderType.label" :value="borderType.code"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="边框宽度">
-        <el-input-number v-model="activeComponent.style.borderWidth" :min="0" controls-position="right"/>
-      </el-form-item>
-      <el-form-item label="字体">
-        <el-select v-model="activeComponent.style.fontFamily" placeholder="请选择字体" filterable>
-          <el-option v-for="font in fontList" :label="font.name" :value="font.code"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="字体颜色">
-        <el-color-picker v-model="activeComponent.style.fontColor"/>
-      </el-form-item>
-      <el-form-item label="字体大小(pt)">
-        <el-input-number v-model="activeComponent.style.fontSize" :min="0" controls-position="right"/>
-      </el-form-item>
-    </el-form>
-  </section>
-</template>
-
-<script lang="ts">
-import {mapState} from "pinia";
-import {globalStore} from "@/store";
-import {fontList, borderTypeList} from "@/components/config/globalConfig";
-
-export default {
-  name: 'YvanComplexTableProps',
-  data() {
-    return {
-      fontList,
-      borderTypeList
-    }
-  },
-  computed: {
-    ...mapState(globalStore, {
-      activeComponent: (state) => {
-        console.log("activeComponent => ", state.curComponent)
-        return state.curComponent
-      }
-    }),
-  },
-}
-</script>
-
-<style lang="less">
-.yvan-complex-table-props {
-
-  .el-input-number {
-    width: 100%;
-  }
-
-  .el-select {
-    width: 100%;
-  }
-}
-</style>

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

@@ -1,322 +0,0 @@
-<template>
-  <div v-if="initCompleted" class="yvan-complex-table">
-    <StyledComplexTable v-bind="style">
-      <table class="yvan-complex-table__container">
-        <tr v-if="element.showPrefix">
-          <td>
-            <div class="yvan-complex-table__prefix" style="border: #0a0a0a 1px solid">
-              <YvanSimpleTextInTable
-                  key="prefix"
-                  :element="prefixTextElement"
-                  :prop-value="prefixTextElement.propValue"
-                  style="min-height: 40px; min-width: 200px"
-                  @componentUpdated="componentUpdated"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="element.showHead">
-          <td>
-            <div class="yvan-complex-table__head">
-              <YvanSimpleTable
-                  key="head"
-                  :element="headSimpleTableElement"
-                  :prop-value="headSimpleTableElement.propValue"
-                  :scale="scale"
-                  @componentUpdated="componentUpdated"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div
-                :style="{
-                marginTop: element.showHead ? `-${style.borderWidth - 0.5}px` : '',
-                marginBottom: element.showFoot ? `-${style.borderWidth - 0.5}px` : ''
-              }"
-                class="yvan-complex-table__body"
-            >
-              <table :style="`width: ${bodyTableWidth}px`">
-                <thead>
-                <tr>
-                  <th
-                      v-for="(item, index) in tableCols"
-                      :key="index"
-                      :style="{
-                        width: `${item.width}px`,
-                        height: `${tableRowHeight}px`
-                      }"
-                  >
-                    <div style="display: inline; width: 100%">
-                      {{ item.title }}
-                    </div>
-                  </th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr :style="`height: ${tableRowHeight}px`">
-                  <td :colspan="tableCols.length" :style="`height: ${tableRowHeight}px`">
-                    <div class="yvan-complex-table__auto_fill">自动填充</div>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </td>
-        </tr>
-        <tr v-if="element.showFoot">
-          <td>
-            <div class="yvan-complex-table__foot">
-              <YvanSimpleTable
-                  key="foot"
-                  :element="footSimpleTableElement"
-                  :prop-value="footSimpleTableElement.propValue"
-                  :scale="scale"
-                  @componentUpdated="componentUpdated"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr v-if="element.showSuffix">
-          <td>
-            <div class="yvan-complex-table__suffix" style="border: #0a0a0a 1px solid">
-              <YvanSimpleTextInTable
-                  key="suffix"
-                  :element="suffixTextElement"
-                  :prop-value="suffixTextElement.propValue"
-                  style="min-height: 40px; min-width: 200px"
-                  @componentUpdated="componentUpdated"
-              />
-            </div>
-          </td>
-        </tr>
-      </table>
-    </StyledComplexTable>
-  </div>
-</template>
-
-<script>
-import {mapState} from 'pinia'
-import {globalStore} from "@/store"
-import commonMixin from '@/mixin/commonMixin'
-import {StyledComplexTable} from '@/components/elements/style'
-import ResizeObserver from '@/components/elements/yvan-table/ResizeObserver'
-import YvanSimpleTable from '@/components/elements/yvan-table/YvanSimpleTable.vue'
-import YvanRichTextInTable from '@/components/elements/yvan-table/YvanRichTextInTable.vue'
-import YvanSimpleTextInTable from '@/components/elements/yvan-table/YvanSimpleTextInTable.vue'
-import YvanComplexTableProps from '@/components/elements/yvan-table/YvanComplexTableProps.vue'
-
-const defaultTextProp = {
-  icon: 'ri-text',
-  code: 'text',
-  name: '文本',
-  component: 'YvanSimpleTextInTable',
-  propValue: '',
-  style: {
-    width: '100%',
-    height: '100%',
-    fontSize: 12,
-    background: null,
-    textStyle: [],
-    rotate: 0,
-  },
-  groupStyle: {}
-}
-
-const defaultSimpleTableProp = {
-  icon: 'ri-table-2',
-  code: 'table',
-  name: '单元格',
-  component: 'YvanSimpleTable',
-  propValue: {},
-  style: {
-    width: '100%',
-    height: 'auto',
-    fontSize: 12,
-    background: '#FFFFFF',
-    borderWidth: 2,
-    borderColor: '#212121',
-    rotate: 0,
-    isRelative: true
-  },
-  groupStyle: {}
-}
-
-const defaultDataTableProp = {
-  tableRowHeight: 30,
-  tableDataSource: '',
-  tableCols: [
-    {
-      field: 'field1',
-      title: '表头R1',
-      width: 100,
-      align: 'left',
-      formatter: 'String'
-    },
-    {
-      field: 'field2',
-      title: '表头R2',
-      width: 100,
-      align: 'center',
-      formatter: 'String'
-    },
-    {
-      field: 'field3',
-      title: '表头R3',
-      width: 100,
-      align: 'right',
-      formatter: 'String'
-    }
-  ]
-}
-
-/**
- * 复杂表格
- */
-export default {
-  name: 'YvanComplexTable',
-  mixins: [commonMixin],
-  components: {
-    YvanSimpleTable,
-    StyledComplexTable,
-    YvanRichTextInTable,
-    YvanSimpleTextInTable
-  },
-  props: {
-    element: {
-      type: Object,
-      default: () => {
-      }
-    },
-    propValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    scale: {
-      required: true,
-      type: [Number, String],
-      default: 1
-    }
-  },
-  computed: {
-    ...mapState(globalStore, {
-      curTableSettingId: (state) => state.curTableSettingId
-    }),
-    showTableDataSetting() {
-      return this.curTableSettingId !== null && this.curTableSettingId === this.element.id
-    },
-    style() {
-      return this.element.style || {}
-    },
-    tableCols() {
-      return this.bodyDataTableElement.tableCols || []
-    },
-    tableRowHeight() {
-      return this.bodyDataTableElement.tableRowHeight || 40
-    },
-    bodyTableWidth() {
-      return this.tableCols
-          .map((item) => {
-            return Number(item.width)
-          })
-          .reduce((a, b) => {
-            return a + b
-          })
-    }
-  },
-  data() {
-    return {
-      initCompleted: false,
-      prefixTextElement: {},
-      suffixTextElement: {},
-      bodyDataTableElement: {},
-      headSimpleTableElement: {},
-      footSimpleTableElement: {}
-    }
-  },
-  methods: {
-    initMounted() {
-      const {
-        prefixTextElement,
-        suffixTextElement,
-        headSimpleTableElement,
-        footSimpleTableElement,
-        bodyDataTableElement
-      } = this.propValue
-      this.prefixTextElement = prefixTextElement || this.deepCopy(defaultTextProp)
-      this.suffixTextElement = suffixTextElement || this.deepCopy(defaultTextProp)
-      this.headSimpleTableElement = headSimpleTableElement || this.deepCopy(defaultSimpleTableProp)
-      this.footSimpleTableElement = footSimpleTableElement || this.deepCopy(defaultSimpleTableProp)
-      this.bodyDataTableElement = bodyDataTableElement || this.deepCopy(defaultDataTableProp)
-      setTimeout(() => {
-        this.initCompleted = true
-        // this.observeElementWidth()
-      })
-    },
-    componentUpdated() {
-      this.bodyDataTableElement.bodyTableWidth = this.bodyTableWidth
-      const propValue = Object.assign({}, this.propValue, {
-        prefixTextElement: this.prefixTextElement,
-        suffixTextElement: this.suffixTextElement,
-        headSimpleTableElement: this.headSimpleTableElement,
-        footSimpleTableElement: this.footSimpleTableElement,
-        bodyDataTableElement: this.bodyDataTableElement
-      })
-      globalStore().setPropValue({
-        id: this.element.id,
-        propValue
-      })
-      this.$emit('componentUpdated')
-    },
-    handleTableSettingSave(data) {
-      this.bodyDataTableElement = data
-      this.componentUpdated()
-    },
-    observeElementWidth() {
-      this.$nextTick(() => {
-        const element = this.$el.querySelector('.yvan-complex-table__container')
-        if (!element) {
-          return
-        }
-        const resizeObserver = new ResizeObserver()
-        const callback = () => {
-          this.$nextTick(() => {
-            globalStore().setShapeStyle({
-              width: element.clientWidth,
-              height: element.clientHeight
-            })
-          })
-        }
-        resizeObserver.onElResize(element, callback)
-      })
-    }
-  },
-  created() {
-  },
-  install(Vue) {
-    Vue.component(this.name, this)
-    Vue.component(YvanComplexTableProps.name, YvanComplexTableProps)
-  },
-  mounted() {
-    this.initMounted()
-  },
-  watch: {
-    style: {
-      handler() {
-        Object.assign(this.headSimpleTableElement.style, this.style)
-        Object.assign(this.footSimpleTableElement.style, this.style)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.yvan-complex-table {
-  padding: 0;
-}
-</style>

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

@@ -1,90 +0,0 @@
-<template>
-  <div style="width: 100%; height: 100%" @click="activeCell" @dblclick="onDblClick">
-    <StyledText v-bind="style">
-      <div class="yvan-text-inner" v-html="propValue"></div>
-    </StyledText>
-  </div>
-</template>
-
-<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';
-import YvanRichTextEditor from "@/components/yvan-ui/YvanRichTextEditor.vue";
-
-export default {
-  name: 'YvanRichTextInTable',
-  mixins: [commonMixin],
-  props: {
-    element: {
-      type: Object,
-      default: () => {
-      }
-    },
-    propValue: {
-      type: String,
-      default: ''
-    }
-  },
-  components: {
-    StyledText,
-    YvanRichTextEditor
-  },
-  computed: {
-    ...mapState(globalStore, {
-      curComponent: (state) => state.curComponent
-    }),
-    style() {
-      return this.element.style || {}
-    }
-  },
-  data() {
-    return {
-      wangEditor: null,
-      showEditor: false,
-      html: this.deepCopy(this.propValue),
-      toolbarConfig: toolBarConfig,
-      editorConfig: editorConfig,
-      mode: mode
-    }
-  },
-  methods: {
-    activeCell() {
-      this.$emit('activeCell', {
-        id: this.element.id
-      })
-    },
-    onDblClick() {
-      system.showDialog(YvanPrintTextEditor, {valueHtml: this.html, width: 65}).then(res => {
-
-      }).finally(() => {
-
-      })
-    },
-    handleMouseDown(e) {
-      e.stopPropagation()
-    },
-    handleTextClosed() {
-      this.$store.commit('printTemplateModule/updateDataValue', {
-        data: this.element,
-        value: this.html,
-        key: 'propValue'
-      })
-      this.$emit('componentUpdated', this.html)
-    }
-  },
-  created() {
-  },
-  watch: {},
-  beforeDestroy() {
-    const editor = this.wangEditor
-    if (editor == null) {
-      return
-    }
-    editor.destroy() // 组件销毁时，及时销毁编辑器
-  }
-}
-</script>

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

@@ -1,639 +0,0 @@
-<template>
-  <div class="yvan-simple-table">
-    <Context ref="simple-table-contextmenu" :theme="contextTheme">
-      <ContextItem
-          v-for="item in contextMenu"
-          :key="item.code"
-          :class="`yvan-context--${item.status}`"
-          @handle-click="item.event"
-      >
-        <i><component :is="item.icon" /></i>
-        <span>{{ item.label }}</span>
-      </ContextItem>
-    </Context>
-    <StyledSimpleTable v-bind="style">
-      <table ref="yvanSimpleTable">
-        <tbody>
-        <tr v-for="(row, index) in tableConfig.rows" :key="index">
-          <td
-              v-for="(col, index) in tableConfig.cols"
-              v-show="isNeedShow(row - 1, col - 1)"
-              :key="index"
-              v-contextmenu="'simple-table-contextmenu'"
-              :class="{
-                'yvan-simple-table-cell--selected': getIsActiveCell(row, col)
-              }"
-              :colspan="getItColSpan(row, col)"
-              :rowspan="getItRowSpan(row, col)"
-              :style="{
-                width: `${tableData[`${row}-${col}`].width}px`,
-                height: `${tableData[`${row}-${col}`].height}px`,
-                padding: '0',
-                overflow: 'hidden'
-              }"
-              @contextmenu="handleContendMenu"
-              @mouseup="handleMouseUp"
-              @mousedown.stop="(e) => handleCellMousedown(e, row, col)"
-              @mouseenter.stop.prevent="handleCellMouseenter(row, col)"
-          >
-            <component
-                :is="tableData[`${row}-${col}`] && tableData[`${row}-${col}`].component"
-                v-if="tableData[`${row}-${col}`]"
-                :id="`yvan-component-${tableData[`${row}-${col}`].id}`"
-                :bind-value.sync="tableData[`${row}-${col}`].bindValue"
-                :cur-id="curClickedId"
-                :element="tableData[`${row}-${col}`]"
-                :prop-value.sync="tableData[`${row}-${col}`].propValue"
-                :style="{
-                  width: `${tableData[`${row}-${col}`].width}px`,
-                  height: `${tableData[`${row}-${col}`].height}px`
-                }"
-                @activeCell="onCellActive"
-                @componentUpdated="
-                  (value) => {
-                    componentUpdated(row, col, value)
-                  }
-                "
-            />
-            <div
-                v-if="getIsActiveCell(row, col) && selectedCells.length === 1"
-                class="yvan-simple-table__cell__corner"
-                @mousedown="handleMouseDownOnResize(row, col, $event)"
-            ></div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </StyledSimpleTable>
-  </div>
-</template>
-<script>
-import {mapState} from 'pinia'
-import {globalStore} from "@/store"
-import toast from '@/utils/toast'
-import commonMixin from '@/mixin/commonMixin'
-import {StyledSimpleTable} from '@/components/elements/style'
-import {Context, ContextItem, directive} from '@/components/yvan-context'
-import YvanRichTextIn from '@/components/elements/yvan-table/YvanRichTextInTable.vue'
-import YvanSimpleTextIn from '@/components/elements/yvan-table/YvanSimpleTextInTable.vue'
-import YvanSimpleTableProps from '@/components/elements/yvan-table/YvanSimpleTableProps.vue'
-
-const defaultTableCell = {
-  icon: 'ri-text',
-  code: 'text',
-  name: '文本',
-  component: 'YvanSimpleTextIn',
-  propValue: '',
-  width: 100,
-  height: 30,
-  textStyle: {
-    width: '100%',
-    height: '100%',
-    fontSize: 12,
-    background: null,
-    rotate: 0,
-    padding: '0'
-  },
-  simpleTextStyle: {},
-  style: {
-    color: '#212121',
-    borderRadius: 0,
-    padding: '0',
-    margin: '0',
-    fontFamily: 'default',
-    lineHeight: 1,
-    letterSpacing: '0',
-    borderWidth: 0,
-    borderColor: '#212121',
-    borderType: 'none',
-    width: '100%',
-    height: '100%',
-    fontSize: 12,
-    background: null,
-    rotate: 0,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    textStyle: [],
-  },
-  groupStyle: {}
-}
-
-export default {
-  name: 'YvanSimpleTable',
-  mixins: [commonMixin],
-  directives: {
-    contextmenu: directive
-  },
-  components: {
-    Context,
-    ContextItem,
-    YvanRichTextIn,
-    YvanSimpleTextIn,
-    StyledSimpleTable
-  },
-  props: {
-    element: {
-      type: Object,
-      default: () => {
-      }
-    },
-    propValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    scale: {
-      required: true,
-      type: [Number, String],
-      default: 1
-    }
-  },
-  data() {
-    return {
-      curClickedId: '',
-      // 这块其实初始设置 tableConfig： {cols: 3, rows: 2} 就可以 把tabelDate设置成计算属性，layoutDetail 用js生成更方便
-      tableConfig: {
-        cols: 2,
-        rows: 2,
-        layoutDetail: []
-      },
-      tableData: {
-        '1-1': {
-          ...this.deepCopy(defaultTableCell),
-          id: this.getUuid()
-        },
-        '1-2': {
-          ...this.deepCopy(defaultTableCell),
-          id: this.getUuid()
-        },
-        '2-1': {
-          ...this.deepCopy(defaultTableCell),
-          id: this.getUuid()
-        },
-        '2-2': {
-          ...this.deepCopy(defaultTableCell),
-          id: this.getUuid()
-        }
-      },
-      selectedCells: [],
-      // mousedown的时候设置为其他值 否则都是-1
-      selectionHold: -1,
-      startX: -1,
-      startY: -1,
-      endX: -1,
-      endY: -1,
-      contextPos: {
-        l: 0,
-        t: 0
-      },
-      contextMenu: [
-        {
-          label: '插入行',
-          code: 'insertRow',
-          icon: 'InsertRowAboveOutlined',
-          status: 'default',
-          event: () => {
-            console.log(' contextMenu insert row >>> ', 'addRow')
-            this.menyItemCmd('addRow')
-          }
-        },
-        {
-          label: '添加行',
-          code: 'addRow',
-          icon: 'InsertRowBelowOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('addRow')
-          }
-        },
-        {
-          label: '插入列',
-          code: 'insertCol',
-          icon: 'InsertRowLeftOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('addCol')
-          }
-        },
-        {
-          label: '添加列',
-          code: 'addCol',
-          icon: 'InsertRowRightOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('addCol')
-          }
-        },
-        {
-          label: '删除行',
-          code: 'delRow',
-          icon: 'DeleteRowOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('delRow')
-          }
-        },
-        {
-          label: '删除列',
-          code: 'delCol',
-          icon: 'DeleteColumnOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('delCol')
-          }
-        },
-        {
-          label: '合并',
-          code: 'merge',
-          icon: 'MergeCellsOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('merge')
-          }
-        },
-        {
-          label: '拆分',
-          code: 'split',
-          icon: 'SplitCellsOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('split')
-          }
-        },
-        {
-          label: '清空选择',
-          code: 'clearSelection',
-          icon: 'ClearOutlined',
-          status: 'default',
-          event: () => {
-            this.menyItemCmd('clearSelection')
-          }
-        }
-      ]
-    }
-  },
-  install(Vue) {
-    Vue.component(this.name, this)
-    Vue.component(YvanSimpleTableProps.name, YvanSimpleTableProps)
-  },
-  created() {
-  },
-  mounted() {
-    this.initMounted()
-  },
-  computed: {
-    ...mapState(globalStore, {
-      editor: (state) => state.editor,
-      isNightMode: (state) => false
-    }),
-    style() {
-      return this.element.style || {}
-    },
-    contextTheme() {
-      return this.isNightMode ? 'dark' : 'default'
-    },
-    hiddenTdMaps() {
-      let hiddenTdMaps = {}
-      let tableConfig = this.tableConfig
-      for (let i = 0; i < tableConfig.rows; i++) {
-        for (let j = 0; j < tableConfig.cols; j++) {
-          if (tableConfig.layoutDetail[i * tableConfig.cols + j]) {
-            let colInfo = tableConfig.layoutDetail[i * tableConfig.cols + j]
-            if (
-                (colInfo.colSpan && colInfo.colSpan > 1) ||
-                (colInfo.rowSpan && colInfo.rowSpan > 1)
-            ) {
-              for (let row = i; row < i + (colInfo.rowSpan || 1); row++) {
-                // col = (row === i ? j + 1 : j) 是为了避开自己
-                for (let col = row === i ? j + 1 : j; col < j + (colInfo.colSpan || 1); col++) {
-                  hiddenTdMaps[`${row}_${col}`] = true
-                }
-              }
-            }
-          }
-        }
-      }
-      return hiddenTdMaps
-    }
-  },
-  methods: {
-    initMounted() {
-      if (this.propValue.tableConfig) {
-        this.tableConfig = this.deepCopy(this.propValue.tableConfig)
-      }
-      if (this.propValue.tableData) {
-        this.tableData = this.deepCopy(this.propValue.tableData)
-      }
-      this.reRenderTableLayout()
-    },
-    clearSelection() {
-      this.selectedCells = []
-    },
-    isNeedShow(row, col) {
-      return !this.hiddenTdMaps[`${row}_${col}`]
-    },
-    getIsActiveCell(row, col) {
-      return this.selectedCells.includes((row - 1) * this.tableConfig.cols + col - 1)
-    },
-    getItColSpan(row, col) {
-      return (
-          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
-          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['colSpan']
-      )
-    },
-    getItRowSpan(row, col) {
-      return (
-          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
-          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['rowSpan']
-      )
-    },
-    handleCellMousedown(e, x, y) {
-      this.$refs['simple-table-contextmenu'].hide()
-      globalStore().setInEditorStatus(true)
-      globalStore().setClickComponentStatus(true)
-      globalStore().setCurTableCell({
-        component: this.tableData[`${x}-${y}`]
-      })
-      // e.witch = 1 是鼠标左键
-      if (e.which !== 1) {
-        if (this.endX === -1 && this.endY === -1) {
-          let cellIndex = (x - 1) * this.tableConfig.cols + y - 1
-          this.startX = x
-          this.startY = y
-          this.selectedCells = [cellIndex]
-        }
-        return
-      }
-      let cellIndex = (x - 1) * this.tableConfig.cols + y - 1
-      this.startX = x
-      this.startY = y
-      this.selectedCells = [cellIndex]
-      this.endX = this.endY = -1
-      // mousedown标志
-      this.selectionHold = cellIndex
-    },
-    handleCellMouseenter(x, y) {
-      if (this.selectionHold !== -1) {
-        this.endX = x
-        this.endY = y
-        this.rendSelectedCell()
-      }
-    },
-    rendSelectedCell() {
-      let startX = Math.min(this.startX, this.endX)
-      let startY = Math.min(this.startY, this.endY)
-      let endX = Math.max(this.startX, this.endX)
-      let endY = Math.max(this.startY, this.endY)
-      let tableConfig = this.tableConfig
-      let selectedCells = []
-      for (let row = 1; row <= tableConfig.rows; row++) {
-        for (let col = 1; col <= tableConfig.cols; col++) {
-          if (row >= startX && row <= endX && col >= startY && col <= endY) {
-            selectedCells.push((row - 1) * this.tableConfig.cols + col - 1)
-          }
-        }
-      }
-      this.selectedCells = selectedCells
-    },
-    handleMouseUp() {
-      this.selectionHold = -1
-    },
-    handleContendMenu(e) {
-      console.log(' >>> ')
-      e.preventDefault()
-      e.stopPropagation()
-    },
-    reRenderTableLayout() {
-      let arr = []
-      for (let i = 0; i < this.tableConfig.cols * this.tableConfig.rows; i++) {
-        arr.push({
-          uniId: this.getUuid(),
-          colSpan: 1,
-          rowSpan: 1
-        })
-      }
-      this.tableConfig.layoutDetail = arr
-    },
-    menyItemCmd(cmd) {
-      console.log(' menyItemCmd >>> ', cmd)
-      switch (cmd) {
-        case 'merge':
-          this.mergeCell()
-          break
-        case 'split':
-          this.splitCell()
-          break
-        case 'delRow':
-          if (this.tableConfig.rows === 1) {
-            toast('只剩一行了')
-            return
-          }
-          this.tableConfig.rows = this.tableConfig.rows - 1
-          // 行号 列号变化时候  需要重新渲染 this.tableConfig.layoutDetail
-          this.reRenderTableLayout()
-          break
-        case 'delCol':
-          if (this.tableConfig.cols === 1) {
-            toast('只剩一列了')
-            return
-          }
-          this.tableConfig.cols = this.tableConfig.cols - 1
-          this.reRenderTableLayout()
-          break
-        case 'addRow':
-          this.addRow()
-          break
-        case 'addCol':
-          this.addCol()
-          break
-        case 'clearSelection':
-          this.clearSelection()
-          break
-      }
-    },
-    mergeCell() {
-      let tableConfig = this.tableConfig
-      const startX = Math.min(this.startX, this.endX)
-      const startY = Math.min(this.startY, this.endY)
-      const endX = Math.max(this.startX, this.endX)
-      const endY = Math.max(this.startY, this.endY)
-      const startIndex = (startX - 1) * tableConfig.cols + startY - 1
-      const groupId = this.getUuid()
-      if (
-          startX === -1 ||
-          startY === -1 ||
-          endX === -1 ||
-          endY === -1 ||
-          (startX === endX && startY === endY)
-      ) {
-        toast('请选中要合并的单元格')
-        return
-      }
-      for (let i = startX; i <= endX; i++) {
-        for (let j = startY; j <= endY; j++) {
-          const curIndex = (i - 1) * tableConfig.cols + j - 1
-          this.tableConfig.layoutDetail[curIndex].groupId = groupId
-          if (curIndex === startIndex) {
-            let curTableData = this.tableData[`${i}-${j}`]
-            let startCellData = this.tableData[`${startX}-${startY}`]
-            let endCellData = this.tableData[`${endX}-${endY}`]
-            let startComponent = document
-                .getElementById(`yvan-component-${startCellData.id}`)
-                .getBoundingClientRect()
-            let endComponent = document
-                .getElementById(`yvan-component-${endCellData.id}`)
-                .getBoundingClientRect()
-            const {x: startAriaX, y: startAriaY} = startComponent
-            const {x: endAriaX, y: endAriaY, width: endWidth, height: endHeight} = endComponent
-            curTableData.width = Math.abs(endAriaX - startAriaX) + endWidth
-            curTableData.height = Math.abs(endAriaY - startAriaY) + endHeight
-            this.tableConfig.layoutDetail[curIndex].rowSpan = endX - startX + 1
-            this.tableConfig.layoutDetail[curIndex].colSpan = endY - startY + 1
-          } else {
-            this.tableConfig.layoutDetail[curIndex].rowSpan = 0
-            this.tableConfig.layoutDetail[curIndex].colSpan = 0
-          }
-        }
-      }
-    },
-    splitCell() {
-      let tableConfig = this.tableConfig
-      let startX = this.startX
-      let startY = this.startY
-      if (startX === -1 || startY === -1) {
-        toast('请选中要拆分的单元格')
-        return
-      }
-      let startIndex = (startX - 1) * tableConfig.cols + startY - 1
-      const {groupId} = this.tableConfig.layoutDetail[startIndex]
-      if (!groupId) {
-        return
-      }
-      this.tableConfig.layoutDetail.forEach((v) => {
-        if (v.groupId && v.groupId === groupId) {
-          v.rowSpan = 1
-          v.colSpan = 1
-          v.groupId = undefined
-        }
-      })
-    },
-    addCol() {
-      this.tableConfig.cols = this.tableConfig.cols + 1
-      const colArray = [...new Array(this.tableConfig.cols).keys()]
-      colArray.map((key) => {
-        const firstCol = this.tableData[`${key + 1}-1`]
-        this.tableData[`${key + 1}-${this.tableConfig.cols}`] = {
-          ...defaultTableCell,
-          height: firstCol ? firstCol.height : defaultTableCell.height,
-          id: this.getUuid()
-        }
-      })
-      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) => {
-        const firstRow = this.tableData[`1-${key + 1}`]
-        this.tableData[`${this.tableConfig.rows}-${key + 1}`] = {
-          ...defaultTableCell,
-          width: firstRow ? firstRow.width : defaultTableCell.width,
-          id: this.getUuid()
-        }
-      })
-      console.log('addRow 2 >> ', this.tableConfig)
-      this.reRenderTableLayout()
-    },
-    onCellActive({id}) {
-      this.curClickedId = id
-    },
-    handleMouseDownOnResize(row, col, e) {
-      e.stopPropagation()
-      e.preventDefault()
-      const element = this.tableData[`${row}-${col}`]
-      const curIndex = (row - 1) * this.tableConfig.cols + col - 1
-      const curTableConfig = this.tableConfig.layoutDetail[curIndex]
-      if (!element) {
-        return
-      }
-      const comEle = document.getElementById(`yvan-component-${element.id}`)
-      if (!comEle) {
-        return
-      }
-      const move = (moveEvent) => {
-        const {width, height} = comEle.getBoundingClientRect()
-        const deltaX = moveEvent.movementX
-        const deltaY = moveEvent.movementY
-
-        for (let ir = 1; ir <= this.tableConfig.rows; ir++) {
-          const irIndex = (ir - 1) * this.tableConfig.cols + col - 1
-          const irCellConfig = this.tableConfig.layoutDetail[irIndex]
-          if (irCellConfig.colSpan === curTableConfig.colSpan) {
-            this.tableData[`${ir}-${col}`].width = (width + deltaX) / this.scale
-          }
-        }
-        for (let ic = 1; ic <= this.tableConfig.cols; ic++) {
-          const icIndex = (row - 1) * this.tableConfig.cols + ic - 1
-          const icCellConfig = this.tableConfig.layoutDetail[icIndex]
-          if (icCellConfig.rowSpan === curTableConfig.rowSpan) {
-            this.tableData[`${row}-${ic}`].height = (height + deltaY) / this.scale
-          }
-        }
-      }
-      const up = () => {
-        document.removeEventListener('mousemove', move)
-        document.removeEventListener('mouseup', up)
-      }
-      document.addEventListener('mousemove', move)
-      document.addEventListener('mouseup', up)
-    },
-    setTablePropValue() {
-      const propValue = {
-        tableData: this.deepCopy(this.tableData),
-        tableConfig: this.deepCopy(this.tableConfig)
-      }
-      globalStore().setPropValue({
-        id: this.element.id,
-        propValue
-      })
-      globalStore().updateDataValue({
-        data: this.element,
-        value: propValue,
-        key: 'propValue'
-      })
-      this.$emit('componentUpdated', propValue)
-    },
-    componentUpdated(row, col, value) {
-      let curTableCell = this.tableData[`${row}-${col}`]
-      curTableCell.propValue = value
-      this.setTablePropValue()
-    }
-  },
-  watch: {
-    tableData: {
-      handler() {
-        this.setTablePropValue()
-      },
-      deep: true,
-      immediate: true
-    },
-    tableConfig: {
-      handler() {
-        this.setTablePropValue()
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.yvan-simple-table {
-  user-select: none;
-}
-</style>

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

@@ -1,52 +0,0 @@
-<template>
-  <section class="yvan-simple-table-props">
-    <el-form  ref="form" label-position="top">
-      <el-form-item label="宽度">
-        <el-input-number controls-position="right"/>
-      </el-form-item>
-      <el-form-item label="高度">
-        <el-input-number controls-position="right"/>
-      </el-form-item>
-      <el-form-item label="文本类型">
-        <el-radio-group size="small">
-          <el-radio-button label="全">
-            <component is="border-outer-outlined"/>
-          </el-radio-button>
-          <el-radio-button label="上">
-            <component is="border-top-outlined"/>
-          </el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
-
-
-      <el-form-item label="旋转角度(°)">
-        <el-input-number controls-position="right"/>
-      </el-form-item>
-    </el-form>
-  </section>
-</template>
-
-<script lang="ts">
-
-export default {
-  name: 'YvanSimpleTableProps',
-  data(){
-    return {}
-  }
-}
-
-</script>
-
-<style lang="less">
-.yvan-simple-table-props {
-
-  .el-input-number {
-    width: 100%;
-  }
-
-  .el-select {
-    width: 100%;
-  }
-}
-</style>

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

@@ -1,215 +0,0 @@
-<template>
-  <div
-      class="yvan-simple-text"
-      style="width: 100%; height: 100%"
-      @click="activeCell"
-      @contextmenu="setEdit"
-      @dblclick="setEdit"
-      @dragenter="handleDragEnter"
-      @dragleave="handleDragLeave"
-      @drop="handleDrop"
-  >
-    <StyledSimpleText
-        ref="editArea"
-        :class="{
-        'can-edit': canEdit,
-        'is-drag-over': dragOver
-      }"
-        :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="propValue"></div>
-    </StyledSimpleText>
-  </div>
-</template>
-
-<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'
-
-export default {
-  name: 'YvanSimpleTextInTable',
-  mixins: [commonMixin],
-  components: {
-    StyledSimpleText
-  },
-  props: {
-    element: {
-      type: Object,
-      default: () => {
-      }
-    },
-    propValue: {
-      type: String,
-      default: ''
-    },
-    bindValue: {
-      type: Object,
-      default: null
-    },
-    curId: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    ...mapState(globalStore, {
-      curComponent: (state) => state.curComponent,
-      dataSource: (state) => state.dataSource
-    }),
-    style() {
-      return this.element.style || {}
-    },
-    mayEdit() {
-      return this.curId === this.element?.id
-    }
-  },
-  data() {
-    return {
-      canEdit: false,
-      dragOver: false
-    }
-  },
-  methods: {
-    initMounted() {
-    },
-    activeCell() {
-      this.$emit('activeCell', {
-        id: this.element.id
-      })
-    },
-    setEdit() {
-      if (this.canEdit) {
-        return
-      }
-      if (this.bindValue) {
-        return
-      }
-      if (this.element.isLock) {
-        return
-      }
-      this.canEdit = true
-      // 全选
-      this.selectText(this.$refs.editArea.$el)
-      // 聚焦
-      this.$refs.editArea.$el.focus()
-    },
-    selectText(element) {
-      const selection = window.getSelection()
-      const range = document.createRange()
-      range.selectNodeContents(element)
-      selection.removeAllRanges()
-      selection.addRange(range)
-    },
-    handleBlur() {
-      this.canEdit = false
-    },
-    handleMouseDown(e) {
-      if (this.canEdit) {
-        e.stopPropagation()
-      }
-    },
-    handleKeyDown(e) {
-      if (this.canEdit && [13].includes(e.keyCode)) {
-        e.preventDefault()
-        document.execCommand('insertLineBreak')
-        return false
-      }
-    },
-    clearStyle(e) {
-      this.$emit('input', this.element, e.target.innerHTML)
-    },
-    handleDrop(e) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      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) {
-          this.$emit('update:bindValue', bindingDataSource)
-          globalStore().updateDataValue({
-            data: this.element,
-            value: `<span class="yvan-binding-value">[绑定:${bindingDataSource.title}]</span>`,
-            key: 'propValue'
-          })
-          this.$emit(
-              'componentUpdated',
-              `<span class="yvan-binding-value">[绑定:${bindingDataSource.title}]</span>`
-          )
-          this.canEdit = false
-        }
-      } else {
-        system.toast('拖拽元素非数据源元素，此次拖拽无效', 'info')
-      }
-    },
-    handleDragEnter() {
-      this.dragOver = true
-    },
-    handleDragLeave() {
-      this.dragOver = false
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.initMounted()
-  },
-  watch: {
-    mayEdit(newVal) {
-      if (!newVal) {
-        this.canEdit = false
-      }
-    },
-    canEdit(newVal) {
-      if (!newVal) {
-        globalStore().updateDataValue({
-          data: this.element,
-          value: this.$refs.editArea.$el.innerHTML,
-          key: 'propValue'
-        })
-        this.$emit('componentUpdated', this.$refs.editArea.$el.innerHTML)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.yvan-simple-text {
-  .edit-area {
-    width: 100%;
-    height: 100%;
-    outline: none;
-    word-break: break-all;
-  }
-
-  .is-drag-over {
-    border: 2px solid var(--roy-color-warning);
-    background: #cccccc;
-  }
-
-  .can-edit {
-    height: 100%;
-    cursor: text;
-  }
-}
-</style>

src/components/yvan-ui/YvanPrintBarcode.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg :id="barcodeId" :style="computeStyle"/>
+  <svg :id="barcodeId"/>
 </template>
 
 <script lang="js">
@@ -34,18 +34,8 @@ export default {
   mounted() {
     this.createBarcode(this.config)
   },
-  computed: {
-    computeStyle() {
-      return `width: ${this.style.width}px; height: ${this.style.height}px;`
-    }
-  },
   methods: {
     createBarcode(config) {
-      this.$nextTick(() => {
-        const barcode = document.getElementById(this.barcodeId);
-        barcode.style.width = `${this.style.width}px`;
-        barcode.style.height = `${this.style.height}px`;
-      })
       const barcode = document.getElementById(this.barcodeId);
       JsBarcode(barcode, this.value, {...config});
     }

src/mixin/commonMixin.js

@@ -21,11 +21,14 @@ export default {
             }
             return false
         },
-        findElementByCode(elementCode){
+        findElementByCode(elementCode) {
             if (!elementList || elementList.length <= 0) {
                 return
             }
             return elementList.findLast(element => element.code === elementCode)
+        },
+        isQrCodeElement(element):boolean {
+            return element && element?.component === 'YvanQrcode'
         }
     }
 }