vue2-client 1.8.163 → 1.8.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.163",
+  "version": "1.8.165",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XReport/XReport.vue

@@ -3,20 +3,7 @@
     <a-card v-if="showSkeleton">
       <a-skeleton active/>
     </a-card>
-    <!--  用以包裹整个页面  -->
-    <a-card v-else>
-      <!--   切换菜单   -->
-      <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged">
-        <a-radio-button value="design" v-if="!onlyDisplay">
-          设计
-        </a-radio-button>
-        <a-radio-button value="display" style="border-radius: 0">
-          预览
-        </a-radio-button>
-      </a-radio-group>
-      <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0" v-if="!onlyDisplay">
-        保存
-      </a-radio-button>
+    <template v-if="noPadding">
       <!--   主体表格   -->
       <XReportDesign
         v-if="scanFinish"
@@ -25,20 +12,52 @@
         :for-display="type === 'display'"
         ref="XReportDesign"
         id="printReady"
+        :no-padding="noPadding"
+        :no-top-border="noTopBorder"
         :show-images="hasImages"
         :image-list="imageList">
       </XReportDesign>
-      <!--   导出按钮   -->
-      <template v-if="type === 'display'">
-        <div class="tools">
-          <div class="toolsItem" @click="exportPDF">
-            <a-button type="primary">
-              导出PDF
-            </a-button>
+    </template>
+    <template v-else>
+      <!--  用以包裹整个页面  -->
+      <a-card v-if="!showSkeleton">
+        <!--   切换菜单   -->
+        <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged">
+          <a-radio-button value="design" v-if="!onlyDisplay">
+            设计
+          </a-radio-button>
+          <a-radio-button value="display" style="border-radius: 0">
+            预览
+          </a-radio-button>
+        </a-radio-group>
+        <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0" v-if="!onlyDisplay">
+          保存
+        </a-radio-button>
+        <!--   主体表格   -->
+        <XReportDesign
+          v-if="scanFinish"
+          :config="type === 'display' ? originalConfig : activeConfig"
+          :slot-config-name="type === 'display' ? undefined : activatedSlotName"
+          :for-display="type === 'display'"
+          :no-padding="noPadding"
+          :no-top-border="noTopBorder"
+          ref="XReportDesign"
+          id="printReady"
+          :show-images="hasImages"
+          :image-list="imageList">
+        </XReportDesign>
+        <!--   导出按钮   -->
+        <template v-if="type === 'display'">
+          <div class="tools">
+            <div class="toolsItem" @click="exportPDF">
+              <a-button type="primary">
+                导出PDF
+              </a-button>
+            </div>
           </div>
-        </div>
-      </template>
-    </a-card>
+        </template>
+      </a-card>
+    </template>
   </div>
 </template>
 
@@ -88,6 +107,14 @@ export default {
     displayOnly: {
       type: Boolean,
       default: false
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    noTopBorder: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -617,6 +644,7 @@ export default {
     }
     if (this.localConfig) {
       if (this.localConfig.designMode === 'json') {
+        this.config = this.localConfig
         if (this.configData !== undefined) {
           this.config.data = this.configData
         }

package/src/base-client/components/common/XReport/XReportDesign.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
     <template v-if="this.activatedConfig.designMode === 'json'">
-      <XReportJsonRender :config="activatedConfig"/>
+      <XReportJsonRender
+        :no-padding="noPadding"
+        :no-top-border="noTopBorder"
+        :config="activatedConfig"/>
     </template>
     <template v-else>
-      <div class="reportMain" :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
+      <div :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'" :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
         <!--      大标题      -->
         <h2 class="reportTitle" v-if="activatedConfig.title" v-html="activatedConfig.title"></h2>
         <!--      小标题 / 介乎于标题与表格之间的内容      -->
@@ -45,10 +48,23 @@
               <!--  普通行  -->
               <template v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'">
                 <template v-if="!forDisplay">
-                  <x-report-tr-group :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :config="activatedConfig"></x-report-tr-group>
+                  <x-report-tr-group
+                    :key="rowIndex"
+                    :columns="row"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :config="activatedConfig">
+                  </x-report-tr-group>
                 </template>
                 <template v-else>
-                  <x-report-tr-group :config="activatedConfig" :key="rowIndex" :columns="row" :config-data="activatedConfig.data" :display="true"></x-report-tr-group>
+                  <x-report-tr-group
+                    :config="activatedConfig"
+                    :key="rowIndex"
+                    :columns="row"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :display="true">
+                  </x-report-tr-group>
                 </template>
               </template>
               <!--  列表  -->
@@ -58,6 +74,7 @@
                     :config="activatedConfig"
                     :key="rowIndex + listIndex"
                     :columns="row"
+                    :no-top-border="noTopBorder"
                     :config-data="activatedConfig.data"
                     :list-index="listIndex">
                   </x-report-tr-group>
@@ -67,6 +84,7 @@
                     :config="activatedConfig"
                     :key="rowIndex + listIndex"
                     :columns="row"
+                    :no-top-border="noTopBorder"
                     :config-data="activatedConfig.data"
                     :list-index="listIndex"
                     :display="true">
@@ -81,6 +99,7 @@
                     :columns="row[0].definition"
                     :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
                     :input-columns="true"
+                    :no-top-border="noTopBorder"
                     v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
                     :input-columns-definition-index="definitionIndex"
                     :display="true"
@@ -92,6 +111,7 @@
                     :columns="row[0].definition"
                     :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
                     :input-columns="true"
+                    :no-top-border="noTopBorder"
                     v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
                     :input-columns-definition-index="definitionIndex"
                     :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
@@ -100,6 +120,7 @@
                     :config="activatedConfig"
                     :key="rowIndex"
                     :columns="row"
+                    :no-top-border="noTopBorder"
                     :config-data="activatedConfig.data"
                     :input-columns-button="true"
                     :input-columns="true">
@@ -151,6 +172,14 @@ export default {
     imageList: {
       type: Array,
       default: undefined
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    noTopBorder: {
+      type: Boolean,
+    default: false
     }
   },
   components: {
@@ -328,6 +357,48 @@ export default {
     word-break:break-all;
   }
 }
+.reportMainNoPadding {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-between;
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout:fixed;
+    word-break:break-all;
+  }
+}
 .tools{
   position: fixed;
   right: 2%;

package/src/base-client/components/common/XReport/XReportJsonRender.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="reportMain">
+  <div :class="noPadding ? 'reportMainNoPadding' : 'reportMain'">
     <table class="reportTable">
       <tbody class="reportTable">
         <tr v-if="config.title.type && config.title.type !== ''">
-          <th class="tdWithBorder" colspan="12">
+          <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="12">
             <template v-if="config.title.type === 'titleKey'">
               {{ config.data[config.title.value] }}
             </template>
             <template v-else-if="config.title.type === 'titleValue'">
               {{ config.title.value }}
             </template>
-          </th>
+          </td>
         </tr>
         <template v-for="(row, rowIndex) in config.content">
           <template v-if="row.type === 'jsonKey'">
             <tr :key="rowIndex">
               <!--      表头        -->
-              <td class="tdWithBorder" colspan="6">
+              <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="6">
                 <template v-if="receivedFunction[rowIndex].labelFunction(config).type === 'key'">
                   {{ config.data[receivedFunction[rowIndex].labelFunction(config).content] }}
                 </template>
@@ -25,7 +25,7 @@
                 </template>
               </td>
               <!--      内容        -->
-              <td class="tdWithBorder" colspan="6">
+              <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="6">
                 <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
                   {{ config.data[receivedFunction[rowIndex].valueFunction(config).content] }}
                 </template>
@@ -47,7 +47,7 @@
           <template v-else-if="row.type === 'jsonArray'">
             <tr :key="rowIndex + '' + jsonArrayItemIndex" v-for="(item, jsonArrayItemIndex) in config.data[row.jsonArrayDataIndex]">
               <!--      表头        -->
-              <td class="tdWithBorder" colspan="6">
+              <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="6">
                 <template v-if="receivedFunction[rowIndex].labelFunction(config, item).type === 'key'">
                   {{ item[receivedFunction[rowIndex].labelFunction(config, item).content] }}
                 </template>
@@ -56,7 +56,7 @@
                 </template>
               </td>
               <!--      内容        -->
-              <td class="tdWithBorder" colspan="6">
+              <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="6">
                 <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'key'">
                   {{ item[receivedFunction[rowIndex].valueFunction(config, item).content] }}
                 </template>
@@ -92,6 +92,14 @@ export default {
     config: {
       type: Object,
       required: true
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    noTopBorder: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -141,6 +149,14 @@ export default {
   padding: 15px;
   border-radius: 8px;
 }
+.reportMainNoPadding {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 8px;
+}
 .reportTitle {
   font-weight: bold;
 }
@@ -158,4 +174,11 @@ export default {
   color: rgb( 24,144,255);
   cursor: pointer;
 }
+.tdWithNoTopBorder {
+  border-top-style: none;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  padding: 8px;
+}
 </style>

package/src/base-client/components/common/XReport/XReportTrGroup.vue

@@ -7,7 +7,7 @@
           v-for="(cell, cellIndex) in columns"
           v-if="!cell.dontShowRow"
           :key="cellIndex"
-          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+          :class=" calcTDBorder(cell.noBoarder) "
           :style="cell.style ? cell.style : undefined"
           :colspan="cell.colSpan ? cell.colSpan : undefined">
           <template v-if="cell.type === 'column'">
@@ -57,6 +57,9 @@
             <template v-for="(img,imgIndex) in getDeepObject(configData.images, cell.dataIndex)">
               <span :key="imgIndex" style="margin-right: 5%">{{ img.name }}</span>
             </template>
+            <template v-if="getDeepObject(configData.images, cell.dataIndex).length === 0">
+              <span>无</span>
+            </template>
           </template>
         </td>
       </template>
@@ -64,7 +67,7 @@
         <td
           v-for="(cell, cellIndex) in columns"
           :key="cellIndex"
-          :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+          :class=" calcTDBorder(cell.noBoarder) "
           :colspan="cell.colSpan ? cell.colSpan : undefined"
           :style="cell.style ? cell.style : undefined"
           :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
@@ -117,7 +120,7 @@
       <td
         v-for="(cell, cellIndex) in columns"
         :key="cellIndex"
-        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+        :class=" calcTDBorder(cell.noBoarder) "
         :colspan="cell.colSpan ? cell.colSpan : undefined"
         :style="cell.style ? cell.style : undefined"
         :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
@@ -244,7 +247,7 @@
     </template>
     <!--  动态行插入按钮  -->
     <template v-else-if="inputColumnsButton">
-      <td :colspan="maxColSpan" class="tdWithBorder">
+      <td :colspan="maxColSpan" :class="calcTDBorder()">
         <a-button-group>
           <a-button @click="addData(columns[0].dataIndex, columns)">
             <a-icon type="plus"/>
@@ -260,7 +263,7 @@
       <td
         v-for="(cell, cellIndex) in columns"
         :key="cellIndex"
-        :class=" cell.noBoarder ? 'tdNoBorder' : 'tdWithBorder'"
+        :class=" calcTDBorder(cell.noBoarder) "
         :colspan="cell.colSpan ? cell.colSpan : undefined"
         :style="cell.style ? cell.style : undefined"
         :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
@@ -365,6 +368,10 @@ export default {
     listIndex: {
       type: Number,
       default: undefined
+    },
+    noTopBorder: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -481,6 +488,17 @@ export default {
         }
       }
     },
+    calcTDBorder (cellNoBorder = false) {
+      if (cellNoBorder) {
+        return 'tdNoBorder'
+      } else {
+        if (this.noTopBorder) {
+          return 'tdWithNoTopBorder'
+        } else {
+          return 'tdWithBorder'
+        }
+      }
+    },
     // 根据format计算输入框之前的文字显示
     displayFormatStartText (formatStr) {
       let count = 0
@@ -567,4 +585,12 @@ export default {
   border: 1px solid #000;
   padding: 8px;
 }
+
+.tdWithNoTopBorder {
+  border-top-style: none;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  padding: 8px;
+}
 </style>

package/src/pages/Example/index.vue

@@ -1,17 +1,28 @@
 <template>
-  <div>
+  <div id="test">
     <!--    <XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>-->
     <!--        <XReport :config-name="'test_tableConfig'" :local-config="test_config_withoutSlot" :config-data="test_config_data"/>-->
     <!--        <XReport :config-name="'test_tableConfig'" :local-config="test_yangchun_json" :config-data="test_yangchun_data" :dont-format="true"/>-->
     <!--    <XReport :config-name="'test_tableConfig'" :local-config="test_yangchun_json" :config-data="test_yangchun_jsonData" :dont-format="true"/>-->
-    <XReport :config-name="'test_tableConfig'" :local-config="test_upload" :dont-format="true"/>
+    <XReport :config-name="'test_tableConfig'" :local-config="test_upload" :dont-format="true" :no-padding="true"/>
+    <XReport
+      :config-name="'test_tableConfig'"
+      :local-config="test_yangchun_json"
+      :config-data="test_yangchun_jsonData"
+      :dont-format="true"
+      :no-padding="true"
+      :no-top-border="true"/>
+    <XReport :config-name="'test_tableConfig'" :local-config="test_upload" :dont-format="true" :no-padding="true" :no-top-border="true"/>
+    <!--            <XReport :config-name="'test_table_config_forEditor'" :dont-format="true"/>-->
     <!--            <XReport :config-name="'test_table_config_forEditor'" :dont-format="true"/>-->
     <!--    <XReport config-name="test_tableConfig" :local-config="test_config_json" :config-data="test_config_json_data"/>-->
+    <a-button @click="testExport">导出</a-button>
   </div>
 </template>
 
 <script>
 import XReport from '@vue2-client/base-client/components/common/XReport'
+import { exportHTMLNodeToPDF } from '@vue2-client/utils/htmlToPDFApi'
 
 export default {
   name: 'Example',
@@ -1282,6 +1293,11 @@ export default {
       }
     }
   },
+  methods: {
+    testExport () {
+      exportHTMLNodeToPDF('123', '#test')
+    }
+  }
 }
 </script>
 <style scoped>

package/src/utils/htmlToPDFApi.js

@@ -0,0 +1,5 @@
+import HtmlToPdf from '@vue2-client/utils/htmlToPDF'
+
+export function exportHTMLNodeToPDF (fileName, nodeId) {
+  HtmlToPdf.getPdf(fileName, nodeId)
+}