simple table context menu

src/components/config/toolbarConfig.ts

@@ -1,4 +1,5 @@
 import {ruleStore} from "@/store";
+import {system} from '@/utils/system';
 import YvanPrintPageFormat from "@/components/YvanPrintPageFormat.vue";
 
 export default [
@@ -35,7 +36,7 @@ export default [
         name: '页面设置',
         icon: 'fa fa-gear',
         event: () => {
-            window['System'].showDialog(YvanPrintPageFormat, {title: "页面设置", width: 40}).then((res: any) => {
+            system.showDialog(YvanPrintPageFormat, {title: "页面设置", width: 40}).then((res: any) => {
                 console.log(" >>> then", res)
             }).catch((res: any) => {
                 console.log(" >>> catch", res)

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

@@ -2,10 +2,10 @@
   <div v-if="initCompleted" class="yvan-complex-table">
     <StyledComplexTable v-bind="style">
       <table class="yvan-complex-table__container">
-        <tr v-if="element.showPrefix">
+        <tr class="1234">
           <td>
-            <div class="yvan-complex-table__prefix">
-              <YvanTextInTable
+            <div class="yvan-complex-table__prefix" tyle="border: #0a0a0a 1px solid">
+              <YvanSimpleTextInTable
                 key="prefix"
                 :element="prefixTextElement"
                 :prop-value="prefixTextElement.propValue"
@@ -68,20 +68,20 @@
         <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"
-              />
+<!--              <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">
-              <YvanTextInTable
+            <div class="yvan-complex-table__suffix" style="border: #0a0a0a 1px solid">
+              <YvanSimpleTextInTable
                 key="suffix"
                 :element="suffixTextElement"
                 :prop-value="suffixTextElement.propValue"
@@ -109,22 +109,24 @@ import commonMixin from '@/mixin/commonMixin'
 import { StyledComplexTable } from '@/components/elements/style'
 import ResizeObserver from '@/components/elements/yvan-table/ResizeObserver'
 import TableDataSetting from '@/components/elements/yvan-table/TableDataSetting.vue'
-import YvanSimpleTable from '@/components/elements/yvan-table/YvanSimpleTable.vue';
+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: 'YvanTextIn',
+  component: 'YvanSimpleTextInTable',
   propValue: '',
   style: {
     width: '100%',
     height: '100%',
     fontSize: 12,
     background: null,
-    rotate: 0
+    textStyle:[],
+    rotate: 0,
   },
   groupStyle: {}
 }
@@ -184,9 +186,10 @@ export default {
   mixins: [commonMixin],
   components: {
     YvanSimpleTable,
-    YvanRichTextInTable,
+    TableDataSetting,
     StyledComplexTable,
-    TableDataSetting
+    YvanRichTextInTable,
+    YvanSimpleTextInTable
   },
   props: {
     element: {

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

@@ -1,20 +1,70 @@
 <template>
   <section class="yvan-complex-table-props">
     <el-form ref="form" label-position="top">
-
-      <el-form-item label="旋转角度(°)">
-        <el-input-number controls-position="right"/>
+      <el-divider content-position="left">属性设置</el-divider>
+      <el-form-item label="展示头部留白">
+        <el-switch inline-prompt active-text="是" inactive-text="否"/>
+      </el-form-item>
+      <el-form-item label="展示头部单元格">
+        <el-switch inline-prompt active-text="是" inactive-text="否"/>
+      </el-form-item>
+      <el-form-item label="展示尾部单元格">
+        <el-switch inline-prompt active-text="是" inactive-text="否"/>
+      </el-form-item>
+      <el-form-item label="展示尾部留白">
+        <el-switch 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 {}
-  }
+    return {
+      fontList,
+      borderTypeList
+    }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      activeComponent: (state) => {
+        console.log("activeComponent => ", state.curComponent)
+        return state.curComponent
+      }
+    }),
+  },
 }
 </script>