暂存

package.json

@@ -14,12 +14,15 @@
     "@sv-print/vue": "^0.1.4",
     "@wangeditor/editor": "^5.1.1",
     "@wangeditor/editor-for-vue": "^1.0.1",
+    "ant-design-vue": "^1.7.8",
     "axios": "^0.26.0",
+    "bootstrap": "^3.3.7",
     "core-js": "^3.8.3",
     "countup.js": "^2.0.8",
     "element-ui": "^2.15.6",
     "file-saver": "^2.0.5",
     "js-md5": "^0.7.3",
+    "less-loader": "^11.1.0",
     "nprogress": "^0.2.0",
     "script-loader": "^0.7.2",
     "vue": "^2.6.14",

public/index.html

@@ -4,7 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
@@ -15,4 +18,7 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+ 
+
 </html>
+ 

src/HManagement/accountManage/index.vue

@@ -69,14 +69,18 @@
         </p>
         <p v-else> {{scope.data.column.data[[scope.data.column.columnname]]}}</p>
       </template>
+      <template v-slot:tbOpreation="scope">
+        <!-- <print :dataid="scope.data.data.userid" :sys_printmodelid="23"></print> -->
+      </template>
     </basicLayout>
   </div>
 </template>
 
 <script>
-import downSelect from '@/components/down_select/index'
+import downSelect from '@/components/down_select/index.vue'
 import accountUse from './modules/useAccdount.vue'
 import accountUnuse from './modules/unuseAccount.vue'
+// import print from '@/components/print/index.vue'
 export default {
   data () {
     return {
@@ -91,7 +95,7 @@ export default {
     // accountEdit,
     accountUse,
     accountUnuse,
-    downSelect
+    downSelect,
   },
   methods:{
     onSuccess () {

src/main.js

@@ -27,8 +27,10 @@ import tagPanl from '@/components/tagPanl/tagPanl'
 import sort from './components/sort'
 import '@/style/theme/font-icon/iconfont.css'
 import {hiPrintPlugin} from './index'
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+Vue.use(Antd);
 Vue.use(hiPrintPlugin)
-
 Vue.prototype.$api = api
 
 Vue.prototype.$upload = upload

src/router/index.js

@@ -68,6 +68,14 @@ let routes = [
           ast_nav:true
         },
         component: () => import(/* webpackChunkName: "about" */ '@/views/printmodel/index.vue')
+      },{
+        path: '/printmodelDesign',
+        name: 'printmodelDesign',
+        meta: {
+          title: '打印模板设计',
+          ast_nav:true
+        },
+        component: () => import(/* webpackChunkName: "about" */ '@/views/printmodel/design/index.vue')
       }]
   }
 ];

src/views/printmodel/design/components/bindData.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="绑定数据字段" name="first"></el-tab-pane>
+      <el-tab-pane label="数据集" name="second"></el-tab-pane>
+    </el-tabs>
+    <div v-if="activeName === 'first'">
+      <div v-for="(item,idx) in panels" :key="idx" class="mt-10">
+        <div v-if="item.printElementType.type === 'text'">
+          <p class="preview__item">{{item.options.title}}</p>
+          <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
+            <el-option
+              v-for="i in databastlist"
+              :key="i.sys_printdatasetid"
+              :label="i.datasetname"
+              :value="i.sys_printdatasetid">
+            </el-option>
+          </el-select>&nbsp;
+          <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
+            <el-option
+              v-for="i in sys_printdataset"
+              :key="i.sys_printdataset_columnsid"
+              :label="i.column_name"
+              :value="i.column_name"
+              @visible-change="visibleChange">
+            </el-option>
+          </el-select>
+        </div>
+        <div v-if="item.printElementType.type === 'table'">
+          <p style="font-size:12px">表格数据</p>
+          <div>
+            <div v-for="td in item.options.columns[0]" :key="td.index">
+              <p class="preview__item">{{td.title}}</p>
+              <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
+                <el-option
+                  v-for="i in databastlist"
+                  :key="i.sys_printdatasetid"
+                  :label="i.datasetname"
+                  :value="i.sys_printdatasetid">
+                </el-option>
+              </el-select>&nbsp;
+              <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
+                <el-option
+                  v-for="i in sys_printdataset"
+                  :key="i.sys_printdataset_columnsid"
+                  :label="i.column_name"
+                  :value="i.column_name"
+                  @visible-change="visibleChange">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-button type="primary" size="mini" @click="saveJson">保 存</el-button>
+    </div>
+    <div v-else>
+      <div v-for="item in databastlist" :key="item.index" @click="queryDataBaseDetail(item.sys_printdatasetid)">{{item.datasetname}}</div>
+      <div>
+        <el-input style="margin-bottom:10px" size="small" v-model="database.datasetname" placeholder="请输入数据集名称"></el-input>
+        <el-input size="small" type="textarea" v-model="database.sqlstr" placeholder="请输入sql语句" :autosize="{ minRows: 3, maxRows: 6 }"></el-input>
+      </div>
+      <el-button type="primary" size="small" @click="saveDatabase">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['temp'],
+  computed:{
+    formComponent(){
+      if (this.dialogFormVisible) {
+        return ()=>import(`@/style/sv-print.css`)
+      } else {
+        return
+      }
+    }
+  },
+  data () {
+    return {
+      activeName:'first',
+      template:{},
+      panels:{},
+      databastlist:[],
+      sys_printdataset:[],
+      databastlist:[],
+      act_DataBaseID:null,
+      modeData:{},
+      database:{}
+    }
+  },
+  methods:{
+    onDesigned () {},
+    async queryMode (id) {
+      this.show = false
+        const res = await this.$api.requested({
+          "id": 20221121155901,
+          "content": { 
+            "sys_printmodelid":id
+          }
+        })
+        this.modeData = res.data
+        this.panels = JSON.parse(res.data.modeljson).panels[0].printElements
+        this.template = JSON.parse(res.data.modeljson)
+        this.show = true
+    }, 
+    async saveJson () {
+      const res = await this.$api.requested({
+        "id": 20221121160001,
+        "content": { 
+          "sys_printmodelid": this.modeData.sys_printmodelid,
+          "systemappid":this.modeData.systemappid,
+          "modelname":this.modeData.modelname,
+          "modeljson":this.template,
+          "isused":this.modeData.isused
+        }
+      })
+    },
+    async saveDatabase () {
+      this.database.sys_printmodelid = this.modeData.sys_printmodelid
+      const res = await this.$api.requested({
+        "id": 20221121160301,
+        "content": this.database,
+      })
+    },
+    queryDataBaseDetail () {},
+    onChange () {},
+    onClose () {
+      this.$emit('onClose')
+    },
+  },
+  watch:{
+    temp (val) {
+       this.template = JSON.parse(val)
+       this.panels = this.template.panels[0].printElements
+    }
+  },
+  mounted () {
+    var _this = this;
+    document.onkeydown = function(e) {
+      let key = window.event.keyCode;
+      if (key == 83 && event.ctrlKey) {
+      //  _this.template = JSON.parse(localStorage.getItem('sv-print-preferences'))['default-template']
+      //  _this.panels =  _this.template.panels[0].printElements
+      //  _this.saveJson()
+      }
+    };
+  }
+}
+
+</script>
+<style scoped>
+.preview{
+  position: fixed;
+  min-height: 600px;
+  width: 550px;
+  top:10px;
+  right:30px;
+  z-index: 99;
+  background: #fff;
+  box-shadow: 0 2px 4px #0000004d;
+  padding: 10px;
+}
+.preview__item{
+  position: relative;
+  font-size: 12px;
+  line-height: 30px;
+}
+.preview__item__table{
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.preview__item__table p{
+  flex: 1;
+  width:80px ;
+  border: 1px solid #f1f2f3;
+  font-size: 12px;
+  text-align: center;
+  line-height: 30px;
+  margin-left: -1px;
+}
+
+</style>

src/views/printmodel/design/panel.js

@@ -0,0 +1,36 @@
+export default {
+  "panels": [
+    {
+      "index": 0,
+      "paperType": "A4",
+      "height": 297,
+      "width": 210,
+      "paperHeader": 0,
+      "paperFooter": 841.8897637795277,
+      "printElements": [
+        {
+          "options": {
+            "left": 231,
+            "top": 21,
+            "height": 9.75,
+            "width": 120,
+            "title": "经销项目协议",
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "fontSize": 18,
+            "qrCodeLevel": 0,
+            "right": 350.25,
+            "bottom": 30,
+            "vCenter": 290.25,
+            "hCenter": 25.125
+          },
+          "printElementType": {
+            "title": "文本",
+            "type": "text"
+          }
+        }
+      ],
+      "topOffset": 30
+    }
+  ]
+}

src/views/printmodel/design/preview.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="width+'mm'">
+    <a-spin :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content_design"></div>
+    </a-spin>
+    <template slot="title">
+      <a-space>
+        <div style="margin-right: 20px">打印预览</div>
+        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
+        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
+      </a-space>
+    </template>
+    <template slot="footer">
+      <a-button key="close" type="info" @click="hideModal">
+        关闭
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: data.table
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      this.hiprintTemplate.print(this.printData, {}, {
+        callback: () => {
+          console.log('callback')
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      this.hiprintTemplate.toPdf({}, '打印预览');
+    },
+  }
+}
+
+</script>
+<style lang="less" scoped>
+/deep/ .ant-modal-body {
+  padding: 0px;
+}
+
+/deep/ .ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/printmodel/index.vue

@@ -20,7 +20,6 @@
         <el-button type="text" size="small" @click="showTemp(scope.data.data)">模板设计</el-button>
       </template>
     </basicLayout>
-    <designTemp ref="temp" @onClose="onClose"></designTemp>
   </div>
 </template>
 
@@ -33,7 +32,7 @@
  * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
  * @param {Array} options:{label:描述,value:值} 
  */
-import designTemp from './design/index.vue'
+
 export default {
   data () {
     return {
@@ -42,19 +41,10 @@ export default {
     }
   },
   components:{
-    designTemp
   },
   methods:{
     showTemp (row) {
-      this.$refs['temp'].dialogFormVisible = true
-      this.$refs['temp'].queryMode(row.sys_printmodelid)
-      this.$refs['temp'].formComponent()
-    },
-    onClose () {
-      // this.show = false
-      // setTimeout(() => {
-      //   this.show = true
-      // }, 1000);
+      this.$router.push({path:'/printmodelDesign'})
     }
   }
 }

src/views/printmodel/modules/add.vue

@@ -7,7 +7,15 @@
           <el-input v-model="param.modelname" placeholder="输入模板名称"></el-input>
         </el-form-item>
         <el-form-item label="应用ID">
-          <el-input v-model="param.systemappid" placeholder="应用ID"></el-input>
+          <!-- <el-input v-model="param.systemappid" placeholder="应用ID"></el-input> -->
+          <el-select style="width:100%" v-model="param.systemappid" placeholder="请选择">
+            <el-option
+              v-for="item in applist"
+              :key="item.systemappid"
+              :label="item.appname"
+              :value="item.systemappid">
+            </el-option>
+          </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -31,7 +39,8 @@ export default {
         "modelname":"",
         "modeljson":"json",
         "isused":1
-      }
+      },
+      applist:[]
     }
   },
   methods:{
@@ -45,7 +54,19 @@ export default {
       this.tool.showMessage(res,()=>{
         this.$emit('onSuccess')
       })
+    },
+    async aueryApplist () {
+      const res = await this.$api.requested({
+       "id": 20221122171801,
+        "content": { 
+          
+        }
+      })
+      this.applist = res.data
     }
+  },
+  mounted () {
+    this.aueryApplist()
   }
 }
 

src/views/printmodel/modules/mode.js

@@ -1,38 +1,626 @@
 const panel = {
   "panels": [
     {
-      "index": 0,
-      "paperType": "A4",
-      "height": 297,
-      "width": 210,
-      "paperHeader": 0,
-      "paperFooter": 841.8897637795277,
-      "printElements": [
-        {
-          "options": {
-            "left": 231,
-            "top": 21,
-            "height": 9.75,
-            "width": 120,
-            "title": "经销项目协议",
-            "coordinateSync": false,
-            "widthHeightSync": false,
-            "fontSize": 18,
-            "qrCodeLevel": 0,
-            "right": 350.25,
-            "bottom": 30,
-            "vCenter": 290.25,
-            "hCenter": 25.125
-          },
-          "printElementType": {
-            "title": "文本",
-            "type": "text"
-          }
-        }
-      ],
-      "topOffset": 30
+        "index": 0, 
+        "height": 297, 
+        "width": 210, 
+        "paperHeader": 49.5, 
+        "paperFooter": 780, 
+        "printElements": [
+            {
+                "options": {
+                    "left": 175.5, 
+                    "top": 10.5, 
+                    "height": 27, 
+                    "width": 259, 
+                    "title": "HiPrint自定义模块打印插件", 
+                    "fontSize": 19, 
+                    "fontWeight": "600", 
+                    "textAlign": "center", 
+                    "lineHeight": 26, 
+                    "coordinateSync": true, 
+                    "widthHeightSync": true, 
+                    "draggable": false
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 27, 
+                    "height": 13, 
+                    "width": 52, 
+                    "title": "页眉线", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 25.5, 
+                    "top": 57, 
+                    "height": 705, 
+                    "width": 9, 
+                    "fixed": true, 
+                    "borderStyle": "dotted"
+                }, 
+                "printElementType": {
+                    "type": "vline"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 61.5, 
+                    "height": 48, 
+                    "width": 87, 
+                    "src": "", 
+                    "fit": "contain"
+                }, 
+                "printElementType": {
+                    "title": "图片", 
+                    "type": "image"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 153, 
+                    "top": 64.5, 
+                    "height": 39, 
+                    "width": 276, 
+                    "title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center", 
+                    "lineHeight": 18
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 457.5, 
+                    "top": 79.5, 
+                    "height": 13, 
+                    "width": 120, 
+                    "title": "姓名", 
+                    "field": "name", 
+                    "testData": "古力娜扎", 
+                    "color": "#f00808", 
+                    "textDecoration": "underline", 
+                    "textAlign": "center", 
+                    "fields": [
+                        {
+                            "text": "id", 
+                            "field": "id"
+                        }, 
+                        {
+                            "text": "姓名", 
+                            "field": "name"
+                        }, 
+                        {
+                            "text": "性别", 
+                            "field": "gender"
+                        }, 
+                        {
+                            "text": "数量", 
+                            "field": "count"
+                        }
+                    ]
+                }, 
+                "printElementType": {
+                    "title": "文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 483, 
+                    "top": 124.5, 
+                    "height": 43, 
+                    "width": 51, 
+                    "title": "123456789", 
+                    "textType": "qrcode"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 285, 
+                    "top": 130.5, 
+                    "height": 34, 
+                    "width": 175, 
+                    "title": "123456789", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center", 
+                    "textType": "barcode"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 132, 
+                    "height": 19, 
+                    "width": 213, 
+                    "title": "所有打印元素都可已拖拽的方式来改变元素大小", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center", 
+                    "lineHeight": 18
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 153, 
+                    "top": 189, 
+                    "height": 13, 
+                    "width": 238, 
+                    "title": "单击元素，右侧可自定义元素属性", 
+                    "textAlign": "center", 
+                    "fontFamily": "微软雅黑"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 190.5, 
+                    "height": 13, 
+                    "width": 51, 
+                    "title": "横线", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 415.5, 
+                    "top": 190.5, 
+                    "height": 13, 
+                    "width": 164, 
+                    "title": "可以配置各属性的默认值", 
+                    "textAlign": "center", 
+                    "fontFamily": "微软雅黑"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 214.5, 
+                    "height": 10, 
+                    "width": 475.5
+                }, 
+                "printElementType": {
+                    "title": "横线", 
+                    "type": "hline"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 235.5, 
+                    "top": 220.5, 
+                    "height": 32, 
+                    "width": 342, 
+                    "title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center", 
+                    "lineHeight": 15
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 156, 
+                    "top": 265.5, 
+                    "height": 13, 
+                    "width": 94, 
+                    "title": "表头列大小可拖动", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 265.5, 
+                    "height": 13, 
+                    "width": 90, 
+                    "title": "红色区域可拖动", 
+                    "fontFamily": "微软雅黑", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 285, 
+                    "height": 56, 
+                    "width": 511.5, 
+                    "field": "table", 
+                    "tableFooterRepeat": "", 
+                    "fields": [
+                        {
+                            "text": "id", 
+                            "field": "id"
+                        }, 
+                        {
+                            "text": "姓名", 
+                            "field": "name"
+                        }, 
+                        {
+                            "text": "性别", 
+                            "field": "gender"
+                        }, 
+                        {
+                            "text": "数量", 
+                            "field": "count"
+                        }
+                    ], 
+                    "columns": [
+                        [
+                            {
+                                "width": 102.30000000000001, 
+                                "checked": true, 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0
+                            }, 
+                            {
+                                "width": 102.30000000000001, 
+                                "title": "姓名", 
+                                "field": "name", 
+                                "checked": true, 
+                                "columnId": "name", 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "align": "center", 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0, 
+                                "tableSummary": "count"
+                            }, 
+                            {
+                                "width": 102.30000000000001, 
+                                "title": "数量", 
+                                "field": "count", 
+                                "checked": true, 
+                                "columnId": "count", 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "align": "center", 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0, 
+                                "tableSummary": "sum"
+                            }, 
+                            {
+                                "width": 102.30000000000001, 
+                                "checked": true, 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0
+                            }, 
+                            {
+                                "width": 102.30000000000001, 
+                                "checked": true, 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0
+                            }, 
+                            {
+                                "width": 85.25, 
+                                "title": "性别", 
+                                "field": "gender", 
+                                "checked": false, 
+                                "columnId": "gender", 
+                                "fixed": false, 
+                                "rowspan": 1, 
+                                "colspan": 1, 
+                                "tableColumnHeight": 30, 
+                                "tableTextType": "text", 
+                                "tableBarcodeMode": "CODE128A", 
+                                "tableQRCodeLevel": 0
+                            }
+                        ]
+                    ]
+                }, 
+                "printElementType": {
+                    "title": "表格", 
+                    "type": "table", 
+                    "editable": true, 
+                    "columnDisplayEditable": true, 
+                    "columnDisplayIndexEditable": true, 
+                    "columnTitleEditable": true, 
+                    "columnResizable": true, 
+                    "columnAlignEditable": true, 
+                    "isEnableEditField": true, 
+                    "isEnableContextMenu": true, 
+                    "isEnableInsertRow": true, 
+                    "isEnableDeleteRow": true, 
+                    "isEnableInsertColumn": true, 
+                    "isEnableDeleteColumn": true, 
+                    "isEnableMergeCell": true
+                }
+            }, 
+            {
+                "options": {
+                    "left": 21, 
+                    "top": 346.5, 
+                    "height": 61.5, 
+                    "width": 15, 
+                    "title": "装订线", 
+                    "lineHeight": 18, 
+                    "fixed": true, 
+                    "contentPaddingTop": 3.75, 
+                    "backgroundColor": "#ffffff"
+                }, 
+                "printElementType": {
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 225, 
+                    "top": 355, 
+                    "height": 13, 
+                    "width": 346.5, 
+                    "title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 370.5, 
+                    "height": 18, 
+                    "width": 79, 
+                    "title": "配置项表格", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 225, 
+                    "top": 385.5, 
+                    "height": 38, 
+                    "width": 346.5, 
+                    "title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2", 
+                    "fontFamily": "微软雅黑", 
+                    "lineHeight": 15, 
+                    "textAlign": "center", 
+                    "color": "#d93838"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 487.5, 
+                    "height": 13, 
+                    "width": 123, 
+                    "title": "长文本会自动分页", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 507, 
+                    "height": 40, 
+                    "width": 511.5, 
+                    "field": "longText"
+                }, 
+                "printElementType": {
+                    "title": "长文", 
+                    "type": "longText"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 475.5, 
+                    "top": 565.5, 
+                    "height": 100, 
+                    "width": 100
+                }, 
+                "printElementType": {
+                    "title": "矩形", 
+                    "type": "rect"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 174, 
+                    "top": 568.5, 
+                    "height": 13, 
+                    "width": 90, 
+                    "title": "竖线", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 60, 
+                    "top": 574.5, 
+                    "height": 100, 
+                    "width": 10
+                }, 
+                "printElementType": {
+                    "title": "竖线", 
+                    "type": "vline"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 210, 
+                    "top": 604.5, 
+                    "height": 13, 
+                    "width": 120, 
+                    "title": "横线", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 130.5, 
+                    "top": 625.5, 
+                    "height": 10, 
+                    "width": 277
+                }, 
+                "printElementType": {
+                    "title": "横线", 
+                    "type": "hline"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 364.5, 
+                    "top": 649.5, 
+                    "height": 13, 
+                    "width": 101, 
+                    "title": "矩形", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 525, 
+                    "top": 784.5, 
+                    "height": 13, 
+                    "width": 63, 
+                    "title": "页尾线", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 12, 
+                    "top": 786, 
+                    "height": 49, 
+                    "width": 49
+                }, 
+                "printElementType": {
+                    "title": "html", 
+                    "type": "html"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 75, 
+                    "top": 790.5, 
+                    "height": 13, 
+                    "width": 137, 
+                    "title": "红色原型是自动定义的Html", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }, 
+            {
+                "options": {
+                    "left": 334.5, 
+                    "top": 810, 
+                    "height": 13, 
+                    "width": 205, 
+                    "title": "页眉线已上。页尾下以下每页都会重复打印", 
+                    "textAlign": "center"
+                }, 
+                "printElementType": {
+                    "title": "自定义文本", 
+                    "type": "text"
+                }
+            }
+        ], 
+        "paperNumberLeft": 565.5, 
+        "paperNumberTop": 819
     }
-  ]
+]
 }
 export default panel