ol-base-components 3.1.0 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "3.1.0",
+  "version": "3.1.3",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/App.vue

@@ -1,13 +1,14 @@
 <template>
   <div id="app">
-    <!-- <div>table组件案例</div> -->
-    <!-- <ol-search
+    <div>table组件案例</div>
+    <ol-search
       :form-search-data="formSearchData"
       @handleSearch="handleSearch"
       @handleReset="handleReset"
       url="/api/app/admission-info/paged-result"
-    /> -->
-    <button @click="aaa">123</button>
+    />
+    <!-- url="/api/app/admission-info/paged-result" -->
+
     <ol-table
       :paginations="paginations"
       :empty-img="tableData.emptyImg"
@@ -23,7 +24,8 @@
     <el-button @click="onAdd">新建</el-button>
     <el-button @click="onEdit">编辑</el-button>
 
-    <!-- <el-dialog :title="`${this.form.title}`" :visible.sync="dialogVisible" width="80%">
+    <!-- 编辑,查看弹窗 -->
+    <el-dialog :title="`${this.form.title}`" :visible.sync="dialogVisible" width="80%">
       <ol-form
         v-if="dialogVisible"
         url="/api/app/admission-info/admission-info"
@@ -31,8 +33,32 @@
         @onCancel="dialogVisible = false"
         @onSubmit="onSubmit"
       />
-    </el-dialog> -->
-    <!-- <ol-print /> -->
+    </el-dialog>
+
+    <!-- <el-button @click="handlePrint">接口</el-button>
+
+    <div
+      class="ellipsis-container"
+      id="ellipsis-container"
+      v-for="item in 5"
+      :key="item"
+    >如何处理文本溢出如何实现单行文本溢出显示省略号</div>
+
+    <div class="triangle-up"></div>
+    <div class="grid-content">
+      <div>11</div>
+      <div>11</div>
+    </div>
+
+    <div class="container">
+      <div class="item">1</div>
+      <div class="item item2">2</div>
+      <div class="item">3</div>
+    </div>
+
+    <div class="square-container">
+      <div class="square"></div>
+    </div> -->
   </div>
 </template>
 
@@ -501,275 +527,6 @@ export default {
         });
       }
     },
-    aaa() {
-      // const printEnpty = this.$hiprint({
-      //   printData: {
-      //     name: "CcSimple",
-      //     barcode: "33321323",
-      //     table: [
-      //       { id: "1", name: "王小可123", gender: "男", count: "120", amount: "9089元" },
-      //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-      //     ],
-      //     table1: [
-      //       { id: "1", name: "王小可11", gender: "男", count: "120", amount: "9089元" },
-      //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-      //     ],
-      //   },
-      //   onPrintData: data => {
-      //     return data;
-      //   },
-      //   onTemplate: data => {
-      //     return data;
-      //   },
-      //   defaultTemplate: {
-      //     panels: [
-      //       {
-      //         index: 0,
-      //         name: 1,
-      //         paperType: "A4",
-      //         height: 297,
-      //         width: 210,
-      //         paperHeader: 0,
-      //         paperFooter: 841.8897637795277,
-      //         printElements: [
-      //           {
-      //             options: {
-      //               left: 117,
-      //               top: 94.5,
-      //               height: 9.75,
-      //               width: 120,
-      //               field: "name",
-      //               testData: "内容",
-      //               title: "文本",
-      //               qid: "name",
-      //             },
-      //             printElementType: {
-      //               title: "文本",
-      //               type: "text",
-      //             },
-      //           },
-      //           {
-      //             options: {
-      //               left: 160.5,
-      //               top: 174,
-      //               height: 36,
-      //               width: 550,
-      //               fields: [],
-      //               field: "table",
-      //               qid: "table",
-      //               columns: [
-      //                 [
-      //                   {
-      //                     width: 137.5,
-      //                     title: "名称",
-      //                     field: "name",
-      //                     checked: true,
-      //                     columnId: "name",
-      //                     fixed: false,
-      //                     rowspan: 1,
-      //                     colspan: 1,
-      //                     align: "center",
-      //                   },
-      //                   {
-      //                     width: 137.5,
-      //                     title: "性别",
-      //                     field: "gender",
-      //                     checked: true,
-      //                     columnId: "gender",
-      //                     fixed: false,
-      //                     rowspan: 1,
-      //                     colspan: 1,
-      //                     align: "center",
-      //                   },
-      //                   {
-      //                     width: 137.5,
-      //                     title: "数量",
-      //                     field: "count",
-      //                     checked: true,
-      //                     columnId: "count",
-      //                     fixed: false,
-      //                     rowspan: 1,
-      //                     colspan: 1,
-      //                     align: "center",
-      //                   },
-      //                   {
-      //                     width: 137.5,
-      //                     title: "金额",
-      //                     field: "amount",
-      //                     checked: true,
-      //                     columnId: "amount",
-      //                     fixed: false,
-      //                     rowspan: 1,
-      //                     colspan: 1,
-      //                     align: "center",
-      //                   },
-      //                 ],
-      //               ],
-      //             },
-      //             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,
-      //             },
-      //           },
-      //         ],
-      //         paperNumberContinue: true,
-      //         watermarkOptions: {},
-      //         panelLayoutOptions: {},
-      //       },
-      //     ],
-      //   },
-      //   onSubmit: data => {
-      //     console.log(6666, data);
-      //   },
-      // });
-
-      this.$hiprint.print({
-        printData: {
-          name: "CcSimple",
-          barcode: "33321323",
-          table: [
-            { id: "1", name: "王小可123", gender: "男", count: "120", amount: "9089元" },
-            { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-          ],
-          table1: [
-            { id: "1", name: "王小可11", gender: "男", count: "120", amount: "9089元" },
-            { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-          ],
-        },
-        onPrintData: data => {
-          return data;
-        },
-        onTemplate: data => {
-          return data;
-        },
-        defaultTemplate: {
-          panels: [
-            {
-              index: 0,
-              name: 1,
-              paperType: "A4",
-              height: 297,
-              width: 210,
-              paperHeader: 0,
-              paperFooter: 841.8897637795277,
-              printElements: [
-                {
-                  options: {
-                    left: 117,
-                    top: 94.5,
-                    height: 9.75,
-                    width: 120,
-                    field: "name",
-                    testData: "内容",
-                    title: "文本",
-                    qid: "name",
-                  },
-                  printElementType: {
-                    title: "文本",
-                    type: "text",
-                  },
-                },
-                {
-                  options: {
-                    left: 160.5,
-                    top: 174,
-                    height: 36,
-                    width: 550,
-                    fields: [],
-                    field: "table",
-                    qid: "table",
-                    columns: [
-                      [
-                        {
-                          width: 137.5,
-                          title: "名称",
-                          field: "name",
-                          checked: true,
-                          columnId: "name",
-                          fixed: false,
-                          rowspan: 1,
-                          colspan: 1,
-                          align: "center",
-                        },
-                        {
-                          width: 137.5,
-                          title: "性别",
-                          field: "gender",
-                          checked: true,
-                          columnId: "gender",
-                          fixed: false,
-                          rowspan: 1,
-                          colspan: 1,
-                          align: "center",
-                        },
-                        {
-                          width: 137.5,
-                          title: "数量",
-                          field: "count",
-                          checked: true,
-                          columnId: "count",
-                          fixed: false,
-                          rowspan: 1,
-                          colspan: 1,
-                          align: "center",
-                        },
-                        {
-                          width: 137.5,
-                          title: "金额",
-                          field: "amount",
-                          checked: true,
-                          columnId: "amount",
-                          fixed: false,
-                          rowspan: 1,
-                          colspan: 1,
-                          align: "center",
-                        },
-                      ],
-                    ],
-                  },
-                  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,
-                  },
-                },
-              ],
-              paperNumberContinue: true,
-              watermarkOptions: {},
-              panelLayoutOptions: {},
-            },
-          ],
-        },
-        onSubmit: data => {
-          console.log(6666, data);
-        },
-      });
-    },
   },
 };
 </script>

package/src/main.js

@@ -2,12 +2,13 @@ import Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import App from "./App.vue";
-import OlCom, { swaggerInstall, Hiprint } from "@/package/index.js";
+import OlCom, { swaggerInstall } from "@/package/index.js";
 Vue.use(ElementUI);
-Vue.use(Hiprint);
 
 Vue.use(OlCom);
-swaggerInstall("http://220.179.249.140:20025/swagger/v1/swagger.json").then(() => {});
+swaggerInstall("http://220.179.249.140:20019/swagger/v1/swagger.json").then(
+  () => {}
+);
 new Vue({
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount("#app");

package/src/package/print/index.js

@@ -12,7 +12,7 @@ let container = null;
 const Hiprint = {
   install(Vue) {
     const hiprint = function (options) {
-      const { printData, onPrintData, defaultTemplate, onTemplate, onSubmit } = options;
+      const { printData, onPrintData, defaultTemplate, onTemplate, onSubmit, grid } = options;
       // 销毁旧实例
       if (printInstance) {
         printInstance.$destroy();
@@ -28,7 +28,9 @@ const Hiprint = {
       document.body.appendChild(container);
 
       const PrintComponent = Vue.extend(OlPrint);
-      const propsData = {};
+      const propsData = {
+        grid,
+      };
       if (printData) {
         propsData.printData = printData;
       }

package/src/package/print/src/components/PaperSelector.vue

@@ -24,6 +24,7 @@
       :visible.sync="paperPopVisible"
       width="400px"
       :append-to-body="true"
+      :z-index="3001"
     >
       <el-form label-width="80px">
         <el-form-item label="纸张宽度">

package/src/package/print/src/index.vue

@@ -161,6 +161,7 @@ export default {
       this.hiprintTemplate.design("#hiprint-printTemplate", {
         grid: this.grid,
       });
+      console.log(6666, this.hiprintTemplate);
     },
     async print() {
       // 使用外部传入的打印数据
@@ -213,12 +214,13 @@ export default {
     close() {
       this.$destroy();
       this.$el.remove();
+      this.$emit("close");
     },
   },
 };
 </script>
 
-<style>
+<style scoped>
 /* flex */
 .flex-row {
   display: flex;
@@ -441,6 +443,16 @@ button i {
   border-radius: 4px;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
 }
+/* 隐藏 hiprint 打印 iframe，避免影响页面布局 */
+#hiwprint_iframe {
+  position: fixed !important;
+  top: -9999px !important;
+  left: -9999px !important;
+  width: 0 !important;
+  height: 0 !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
 </style>
 <style scoped>
 /* api按钮 */
@@ -566,7 +578,7 @@ button i {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 2000;
+  z-index: 3000;
 }
 
 .print-dialog {

package/src/package/table/src/TableColumn.vue

@@ -18,17 +18,16 @@
   >
     <!-- 表头插槽 -->
     <template v-slot:header>
-      <el-tooltip
-        v-if="column.prop"
-        :content="`${column.label} ${column.prop} ${column.show}`"
-        placement="top"
-      >
+      <el-tooltip v-if="column.prop" :content="`${column.label} ${column.prop}`" placement="top">
         <span>{{ column.label }}</span>
       </el-tooltip>
       <!-- 多级表头无prop无需提示 -->
       <span v-else>{{ column.label }}</span>
     </template>
 
+    <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
+      <slot :name="name" v-bind="data"></slot>
+    </template>
     <!-- 递归渲染子列 -->
     <template v-if="column.children && column.children.length">
       <TableColumn v-for="(child, idx) in column.children" :key="idx" :column="child">
@@ -38,43 +37,41 @@
         </template>
       </TableColumn>
     </template>
-    <!-- 内容插槽：自定义渲染 -->
-    <template v-else-if="column.render" v-slot="scope">
-      <render-dom :render="() => column.render(scope.row)" />
-    </template>
-    <template v-else-if="column.renderSlot" v-slot="scope">
-      <slot :row="scope.row" :name="column.prop" />
+    <template v-slot="scope" v-if="!column.children">
+      <render-dom v-if="column.render" :render="() => column.render(scope.row)" />
+      <slot v-else-if="column.renderSlot" :row="scope.row" :name="column.prop" />
+      <span v-else>{{ scope.row[column.prop] }}</span>
     </template>
   </el-table-column>
 </template>
 <script>
-  export default {
-    name: "TableColumn",
-    components: {
-      renderDom: {
-        functional: true,
-        props: { render: Function },
-        render(h, ctx) {
-          return <div>{ctx.props.render()}</div>;
-        },
+export default {
+  name: "TableColumn",
+  components: {
+    renderDom: {
+      functional: true,
+      props: { render: Function },
+      render(h, ctx) {
+        return <div>{ctx.props.render()}</div>;
       },
-      TableColumn: null, // 递归自身，见下方
-    },
-    props: {
-      column: { type: Object, required: true },
     },
-    data() {
-      return {};
-    },
-    // beforeCreate() {
-    //   // 递归注册自身
-    //   this.$options.components.TableColumn = require("./TableColumn.vue").default;
-    // },
-    computed: {
-      shouldShow() {
-        if (this.column.hasOwnProperty("show")) return this.column.show;
-        return true;
-      },
+    TableColumn: null, // 递归自身，见下方
+  },
+  props: {
+    column: { type: Object, required: true },
+  },
+  data() {
+    return {};
+  },
+  // beforeCreate() {
+  //   // 递归注册自身
+  //   this.$options.components.TableColumn = require("./TableColumn.vue").default;
+  // },
+  computed: {
+    shouldShow() {
+      if (this.column.hasOwnProperty("show")) return this.column.show;
+      return true;
     },
-  };
+  },
+};
 </script>

package/src/package/table/src/index.vue

@@ -242,9 +242,6 @@
       </el-row>
     </div>
     <printTemplate v-show="false" class="printTemplate" :print-list-obj="printListObj" />
-    <el-dialog title="打印" :visible.sync="showPrint" fullscreen>
-      <ol-print v-if="showPrint" />
-    </el-dialog>
   </div>
 </template>
 <script>
@@ -449,7 +446,6 @@ export default {
       twinPage: 1,
       columnsWatcher: null,
       key: 0,
-      showPrint: false,
     };
   },
   computed: {
@@ -627,18 +623,17 @@ export default {
       this.$emit("refreshTable");
     },
     printTable() {
-      this.showPrint = true;
-      // console.log("printTable");
-      // if (this.tableData.rows.length <= 0) return;
-      // this.printListObj.title = this.$router.history.current.name;
-      // this.printListObj.tableHeader = this.tableData.columns;
-      // this.printListObj.tableData = this.tableData.rows;
-      // console.log(this.printListObj);
-      // setTimeout(() => {
-      //   $(".printTemplate").show();
-      //   $(".printTemplate").jqprint();
-      //   $(".printTemplate").hide();
-      // }, 50);
+      console.log("printTable");
+      if (this.tableData.rows.length <= 0) return;
+      this.printListObj.title = this.$router.history.current.name;
+      this.printListObj.tableHeader = this.tableData.columns;
+      this.printListObj.tableData = this.tableData.rows;
+      console.log(this.printListObj);
+      setTimeout(() => {
+        $(".printTemplate").show();
+        $(".printTemplate").jqprint();
+        $(".printTemplate").hide();
+      }, 50);
       this.$emit("printTable");
     },
     selectAll(val) {

package/src/package/print/src/provide/aaa.json

@@ -1,110 +0,0 @@
-{
-  "panels": [
-    {
-      "index": 0,
-      "name": 1,
-      "paperType": "A4",
-      "height": 297,
-      "width": 210,
-      "paperHeader": 0,
-      "paperFooter": 841.8897637795277,
-      "printElements": [
-        {
-          "options": {
-            "left": 117,
-            "top": 94.5,
-            "height": 9.75,
-            "width": 120,
-            "field": "name",
-            "testData": "内容",
-            "title": "文本",
-            "qid": "name"
-          },
-          "printElementType": {
-            "title": "文本",
-            "type": "text"
-          }
-        },
-        {
-          "options": {
-            "left": 160.5,
-            "top": 174,
-            "height": 36,
-            "width": 550,
-            "fields": [],
-            "field": "table",
-            "qid": "table",
-            "columns": [
-              [
-                {
-                  "width": 137.5,
-                  "title": "名称",
-                  "field": "name",
-                  "checked": true,
-                  "columnId": "name",
-                  "fixed": false,
-                  "rowspan": 1,
-                  "colspan": 1,
-                  "align": "center"
-                },
-                {
-                  "width": 137.5,
-                  "title": "性别",
-                  "field": "gender",
-                  "checked": true,
-                  "columnId": "gender",
-                  "fixed": false,
-                  "rowspan": 1,
-                  "colspan": 1,
-                  "align": "center"
-                },
-                {
-                  "width": 137.5,
-                  "title": "数量",
-                  "field": "count",
-                  "checked": true,
-                  "columnId": "count",
-                  "fixed": false,
-                  "rowspan": 1,
-                  "colspan": 1,
-                  "align": "center"
-                },
-                {
-                  "width": 137.5,
-                  "title": "金额",
-                  "field": "amount",
-                  "checked": true,
-                  "columnId": "amount",
-                  "fixed": false,
-                  "rowspan": 1,
-                  "colspan": 1,
-                  "align": "center"
-                }
-              ]
-            ]
-          },
-          "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
-          }
-        }
-      ],
-      "paperNumberContinue": true,
-      "watermarkOptions": {},
-      "panelLayoutOptions": {}
-    }
-  ]
-}