vue2-client 1.12.27 → 1.12.28

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

@@ -1,279 +1,47 @@
 <template>
   <div>
-    <template v-if="this.activatedConfig.designMode === 'json'">
-      <XReportJsonRender
+    <template v-if="isWidget">
+      <!--  插槽展示  -->
+      <x-report-tr-group
+        v-for="(row, rowIndex) in activatedConfig.columns"
         @updateImg="updateImg"
         @selectRow="selectRow"
-        :img-prefix="imgPrefix"
+        :show-img-in-cell="showImgInCell"
         :server-name="serverName"
-        :display-only="displayOnly"
-        :show-title="showTitle"
-        :no-padding="noPadding"
+        :env="env"
+        :key="rowIndex"
+        :columns="row"
         :no-top-border="noTopBorder"
-        :config="activatedConfig"/>
+        :config-data="activatedConfig.data"
+        :config="activatedConfig"
+        :display="true">
+      </x-report-tr-group>
     </template>
-    <template v-else-if="isWidget">
-      <template v-for="(row, rowIndex) in activatedConfig.columns">
-        <!--  插槽展示  -->
-        <template v-if="row[0].type === 'slot'">
-          <x-report-tr-group
-            @updateImg="updateImg"
-            @selectRow="selectRow"
-            :show-img-in-cell="showImgInCell"
-            :img-prefix="imgPrefix"
-            :server-name="serverName"
-            :env="env"
-            :use-oss-for-img="useOssForImg"
-            :key="rowIndex"
-            :columns="row"
-            :no-top-border="noTopBorder"
-            :config-data="activatedConfig.data"
-            :config="activatedConfig"
-            :display="true">
-          </x-report-tr-group>
-        </template>
-        <!--  普通行  -->
-        <template v-else>
-          <template v-if="!forDisplay">
+    <template v-else>
+      <div
+        :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'"
+        :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
+        <!--      主体表格      -->
+        <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
+          <tbody class="reportTable">
+            <!--  插槽展示  -->
             <x-report-tr-group
+              v-for="(row, rowIndex) in activatedConfig.columns"
               @updateImg="updateImg"
               @selectRow="selectRow"
+              @slotRendered="slotRendered"
               :show-img-in-cell="showImgInCell"
-              :img-prefix="imgPrefix"
               :server-name="serverName"
               :env="env"
-              :use-oss-for-img="useOssForImg"
               :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
-              @updateImg="updateImg"
-              @selectRow="selectRow"
-              :show-img-in-cell="showImgInCell"
-              :img-prefix="imgPrefix"
-              :server-name="serverName"
-              :env="env"
-              :use-oss-for-img="useOssForImg"
               :config="activatedConfig"
-              :key="rowIndex"
-              :columns="row"
-              :no-top-border="noTopBorder"
-              :config-data="activatedConfig.data"
               :display="true">
             </x-report-tr-group>
-          </template>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <div :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'" :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
-        <!--      大标题      -->
-        <h2 class="reportTitle" v-if="showTitle && activatedConfig.title" v-html="activatedConfig.title"></h2>
-        <!--      小标题 / 介乎于标题与表格之间的内容      -->
-        <div class="subTitle" v-if="activatedConfig.subTitle && activatedConfig.subTitle.length">
-          <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
-            <template v-if="item.type === 'column'">
-              <span>{{ item.text }}</span>
-            </template>
-            <template v-else-if="item.type === 'inputs'">
-              <div class="inputsDiv">
-                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
-                  <span class="inputsDivItemLabel">{{ displayFormatStartText(item.format) }}</span>
-                  <template v-if="!forDisplay">
-                    <template v-if="item.inputReadOnly === true">
-                      <a-input v-model="data[item.dataIndex][index]" :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'" :disabled="true"/>
-                    </template>
-                    <template v-else>
-                      <a-input v-model="data[item.dataIndex][index]" :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'"/>
-                    </template>
-                  </template>
-                  <template v-else>
-                    {{ activatedConfig.data[item.dataIndex][index] }}
-                  </template>
-                  <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-        <!--      主体表格      -->
-        <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
-          <tbody class="reportTable">
-            <template v-for="(row, rowIndex) in activatedConfig.columns">
-              <!--  插槽展示  -->
-              <template v-if="row[0].type === 'slot'">
-                <x-report-tr-group
-                  @updateImg="updateImg"
-                  @selectRow="selectRow"
-                  @slotRendered="slotRendered"
-                  :show-img-in-cell="showImgInCell"
-                  :img-prefix="imgPrefix"
-                  :server-name="serverName"
-                  :env="env"
-                  :use-oss-for-img="useOssForImg"
-                  :key="rowIndex"
-                  :columns="row"
-                  :no-top-border="noTopBorder"
-                  :config-data="activatedConfig.data"
-                  :config="activatedConfig"
-                  :display="true">
-                </x-report-tr-group>
-              </template>
-              <!--  列表 list -->
-              <template v-else-if="row[0].type === 'list'" >
-                <template v-for="(num, listIndex) in row[0].listLength + 1">
-                  <template v-if="!forDisplay">
-                    <x-report-tr-group
-                      @slotRendered="slotRendered"
-                      @updateImg="updateImg"
-                      @selectRow="selectRow"
-                      :show-img-in-cell="showImgInCell"
-                      :img-prefix="imgPrefix"
-                      :server-name="serverName"
-                      :env="env"
-                      :use-oss-for-img="useOssForImg"
-                      :config="activatedConfig"
-                      :key="rowIndex + listIndex"
-                      :columns="row"
-                      :no-top-border="noTopBorder"
-                      :config-data="activatedConfig.data"
-                      :list-index="listIndex">
-                    </x-report-tr-group>
-                  </template>
-                  <template v-else>
-                    <x-report-tr-group
-                      @slotRendered="slotRendered"
-                      @updateImg="updateImg"
-                      @selectRow="selectRow"
-                      :show-img-in-cell="showImgInCell"
-                      :img-prefix="imgPrefix"
-                      :server-name="serverName"
-                      :env="env"
-                      :use-oss-for-img="useOssForImg"
-                      :config="activatedConfig"
-                      :key="rowIndex + listIndex"
-                      :columns="row"
-                      :no-top-border="noTopBorder"
-                      :config-data="activatedConfig.data"
-                      :list-index="listIndex"
-                      :display="true">
-                    </x-report-tr-group>
-                  </template>
-                </template>
-              </template>
-              <!--  动态行 inputColumns -->
-              <template v-else-if="row[0].type === 'inputColumns'">
-                <template v-if="forDisplay">
-                  <x-report-tr-group
-                    @slotRendered="slotRendered"
-                    @updateImg="updateImg"
-                    @selectRow="selectRow"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :env="env"
-                    :use-oss-for-img="useOssForImg"
-                    :config="activatedConfig"
-                    :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"
-                    :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
-                </template>
-                <template v-if="!forDisplay">
-                  <x-report-tr-group
-                    @slotRendered="slotRendered"
-                    @updateImg="updateImg"
-                    @selectRow="selectRow"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :env="env"
-                    :use-oss-for-img="useOssForImg"
-                    :config="activatedConfig"
-                    :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>
-                  <!--  动态行交互按钮  -->
-                  <x-report-tr-group
-                    @slotRendered="slotRendered"
-                    @updateImg="updateImg"
-                    @selectRow="selectRow"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :env="env"
-                    :use-oss-for-img="useOssForImg"
-                    :config="activatedConfig"
-                    :key="rowIndex"
-                    :columns="row"
-                    :no-top-border="noTopBorder"
-                    :config-data="activatedConfig.data"
-                    :input-columns-button="true"
-                    :input-columns="true">
-                  </x-report-tr-group>
-                </template>
-              </template>
-              <!--  普通行  -->
-              <template v-else>
-                <template v-if="!forDisplay">
-                  <x-report-tr-group
-                    @slotRendered="slotRendered"
-                    @updateImg="updateImg"
-                    @selectRow="selectRow"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :env="env"
-                    :use-oss-for-img="useOssForImg"
-                    :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
-                    @slotRendered="slotRendered"
-                    @updateImg="updateImg"
-                    @selectRow="selectRow"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :env="env"
-                    :use-oss-for-img="useOssForImg"
-                    :config="activatedConfig"
-                    :key="rowIndex"
-                    :columns="row"
-                    :no-top-border="noTopBorder"
-                    :config-data="activatedConfig.data"
-                    :display="true">
-                  </x-report-tr-group>
-                </template>
-              </template>
-            </template>
           </tbody>
         </table>
-        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
-          <p>图片：</p>
-          <div :key="imgIndex" v-for="(img,imgIndex) in imageList" style="margin-left: 3%;width: 200px">
-            <img :src="img.url" class="img" :alt="img.name"/>
-            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">{{ img.name }}</p>
-          </div>
-        </div>
       </div>
     </template>
   </div>
@@ -281,7 +49,6 @@
 
 <script>
 import XReportTrGroup from './XReportTrGroup.vue'
-import XReportJsonRender from './XReportJsonRender.vue'
 import { getConfigByName } from '@vue2-client/services/api/common'
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
 
@@ -292,7 +59,8 @@ export default {
     config: {
       type: Object,
       require: true,
-      default: () => {}
+      default: () => {
+      }
     },
     showImgInCell: {
       type: Boolean,
@@ -323,16 +91,6 @@ export default {
       type: String,
       default: undefined
     },
-    // 将图片全部展示在表格之后，挨个罗列
-    showImages: {
-      type: Boolean,
-      default: false
-    },
-    // 图片罗列的数组
-    imageList: {
-      type: Array,
-      default: undefined
-    },
     // 表格没有边距
     noPadding: {
       type: Boolean,
@@ -343,26 +101,10 @@ export default {
       type: Boolean,
       default: false
     },
-    // 是否展示标题
-    showTitle: {
-      type: Boolean,
-      default: true
-    },
-    // 图片是否使用OSS来保存
-    useOssForImg: {
-      type: Boolean,
-      default: true
-    },
-    // 图片上传后添加前缀
-    imgPrefix: {
-      type: String,
-      default: undefined
-    }
   },
   components: {
     XFormTable,
-    XReportTrGroup,
-    XReportJsonRender
+    XReportTrGroup
   },
   inject: ['isWidget'],
   data () {
@@ -390,50 +132,6 @@ export default {
       console.log('XReportDesign')
       this.$emit('selectRow', selectedRowKeys, selectedRows)
     },
-    // 根据format计算需要多少个输入框
-    calcFormatInputNum (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] == '{') {
-          count++
-        }
-      }
-      return count
-    },
-    // 根据format计算输入框之后的文字显示
-    displayFormatText (formatStr, num) {
-      let start = 0
-      let count = 0
-      num++
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '}') {
-          start = i
-          count++
-        }
-        if (count === num) {
-          for (let j = start + 1; j < formatStr.length; j++) {
-            if (formatStr[j] === '{') {
-              return formatStr.slice(start + 1, j)
-            }
-            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
-              return formatStr[j]
-            }
-          }
-        }
-      }
-    },
-    // 根据format计算输入框之前的文字显示
-    displayFormatStartText (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          break
-        } else {
-          count++
-        }
-      }
-      return formatStr.slice(0, count)
-    },
   },
   created () {
     console.log('>>>> xreportdesign 渲染')
@@ -449,15 +147,13 @@ export default {
       this.activatedConfig = this.config
       this.render = true
     }
-    if (this.activatedConfig.designMode !== 'json') {
-      this.activatedConfig.columns.forEach(row => {
-        if (row[0] && row[0].type && row[0].type === 'list' && row[0].listLength === 1) {
-          row.forEach(cell => {
-            cell.listLength = this.activatedConfig.data[cell.dataIndex].length
-          })
-        }
-      })
-    }
+    this.activatedConfig.columns.forEach(row => {
+      if (row[0] && row[0].type && row[0].type === 'list' && row[0].listLength === 1) {
+        row.forEach(cell => {
+          cell.listLength = this.activatedConfig.data[cell.dataIndex].length
+        })
+      }
+    })
   },
   mounted () {
   },
@@ -477,11 +173,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.img{
+.img {
   width: 95%;
   height: 180px;
   object-fit: cover;
 }
+
 .reportMain {
   text-align: center;
   margin: 0 auto;
@@ -507,11 +204,13 @@ export default {
   .inputsDiv {
     display: flex;
     justify-content: space-between;
+
     .inputsDivItem {
       display: flex;
       align-items: center;
       padding: 0 4px;
       white-space: nowrap;
+
       .inputsDivItemLabel {
         padding: 0 4px;
       }
@@ -521,10 +220,11 @@ export default {
   .reportTable {
     width: 100%;
     border-collapse: collapse;
-    table-layout:fixed;
-    word-break:break-all;
+    table-layout: fixed;
+    word-break: break-all;
   }
 }
+
 .reportMainForDisplay {
   text-align: center;
   margin: 10% auto;
@@ -549,11 +249,13 @@ export default {
   .inputsDiv {
     display: flex;
     justify-content: space-around;
+
     .inputsDivItem {
       display: flex;
       align-items: center;
       padding: 0 4px;
       white-space: nowrap;
+
       .inputsDivItemLabel {
         padding: 0 4px;
       }
@@ -563,10 +265,11 @@ export default {
   .reportTable {
     width: 100%;
     border-collapse: collapse;
-    table-layout:fixed;
-    word-break:break-all;
+    table-layout: fixed;
+    word-break: break-all;
   }
 }
+
 .reportMainNoPadding {
   // text-align: center;
   margin: 0 auto;
@@ -575,7 +278,7 @@ export default {
   // background-color: #fff;
   border-radius: 8px;
   height: auto;
-  min-height : 20vh;
+  min-height: 20vh;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -595,11 +298,13 @@ export default {
   .inputsDiv {
     display: flex;
     justify-content: space-between;
+
     .inputsDivItem {
       display: flex;
       align-items: center;
       padding: 0 4px;
       white-space: nowrap;
+
       .inputsDivItemLabel {
         padding: 0 4px;
       }
@@ -609,17 +314,19 @@ export default {
   .reportTable {
     width: 100%;
     border-collapse: collapse;
-    table-layout:fixed;
-    word-break:break-all;
+    table-layout: fixed;
+    word-break: break-all;
   }
 }
-.tools{
+
+.tools {
   position: fixed;
   right: 2%;
   text-align: right;
   width: 60%;
   cursor: pointer;
-  .toolsItem{
+
+  .toolsItem {
     width: 15%;
     margin-right: 3%;
     display: inline-block;