打印框架

components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    'ElInput-': typeof import('element-plus/es')['ElInput-']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']

src/components/config/globalConfig.ts

@@ -63,10 +63,8 @@ export const tableBands = [
 const tableColTemplate = {
     colspan: 1,
     rowspan: 1,
-    style: {
-        width: 80,
-        height: 30
-    },
+    width: 80,
+    height: 30
     // element: {}
 }
 

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

@@ -71,7 +71,7 @@ export default {
   },
   computed: {
     defaultStyle() {
-      return `width: ${this.col.style.width}px; height: ${this.col.style.height}px;`;
+      return `width: ${this.col.width}px; height: ${this.col.height}px;`;
     }
   },
   mounted() {
@@ -109,10 +109,10 @@ export default {
       element.id = this.getUuid()
       element.label = `${element.name}-${element.id}`
       element.bandCode = this.bandCode
-      element.style.width = this.col.style.width
-      element.style.height = this.col.style.height
+      element.style.width = this.col.width
+      element.style.height = this.col.height
       if (this.isQrCodeElement(element)) {
-        const defaultSize = Math.min(this.col.style.width, this.col.style.height)
+        const defaultSize = Math.min(this.col.width, this.col.height)
         element.style.width = defaultSize
         element.style.height = defaultSize
       }

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

@@ -1,34 +1,11 @@
 <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>
+  <component v-if="!!activeComponentPropsName" :is="activeComponentPropsName" />
+  <div v-else>
+    <span>请先拖拽组件至表格单元格</span>
+  </div>
 </template>
 
-<script>
+<script lang="js">
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
 import {fontList, borderTypeList} from "@/components/config/globalConfig";
@@ -44,10 +21,14 @@ export default {
   computed: {
     ...mapState(globalStore, {
       activeComponent: (state) => {
-        console.log("activeComponent => ", state.curComponent)
         return state.curComponent
       }
     }),
+    activeComponentPropsName() {
+      const selectedCell = globalStore().getSelectedTableCell();
+      const componentName = this.activeComponent.config[selectedCell.bandRowName]?.rows[selectedCell.rowNo - 1]?.cols[selectedCell.colNo]?.element?.component
+      return !componentName ? "" : componentName + 'Props';
+    }
   },
 }
 </script>

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

@@ -1,10 +1,10 @@
 <template>
   <el-form ref="form" label-position="top">
     <el-form-item label="单元格宽度">
-      <el-input-number :min="0" controls-position="right"/>
+      <el-input-number v-model="activeCell.width" :min="0" controls-position="right"/>
     </el-form-item>
     <el-form-item label="单元格高度">
-      <el-input-number :min="0" controls-position="right"/>
+      <el-input-number v-model="activeCell.height" :min="0" controls-position="right"/>
     </el-form-item>
 
 
@@ -57,12 +57,7 @@ export default {
     }),
     activeCell() {
       const selectedCell = globalStore().getSelectedTableCell();
-      // console.log("activeCell 1 => ", this.activeComponent, selectedCell)
-      // console.log("activeCell 2 => ", this.activeComponent.config[selectedCell.bandRowName].rows[selectedCell.rowNo - 1].cols[selectedCell.colNo].style.width)
-      // const cell = this.activeComponent.config[selectedCell.bandRowName].rows[selectedCell.rowNo].cols[selectedCell.colNo]
-      // console.log('activeCell 2 =>', cell)
-      // return cell
-      return this.activeComponent.config[selectedCell.bandRowName].rows[selectedCell.rowNo - 1].cols[selectedCell.colNo]
+      return this.activeComponent.config[selectedCell.bandRowName]?.rows[selectedCell.rowNo - 1]?.cols[selectedCell.colNo] ?? {width: 10, height: 10}
     }
   },
 }