vue2-client 1.12.2 → 1.12.3-9.alpha

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

@@ -9,8 +9,6 @@
         :show-img-in-cell="true"
         :display-only="true"
         :edit-mode="false"
-        :show-save-button="false"
-        :no-padding="true"
         :dont-format="true"/>
     </a-card>
   </div>

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

@@ -1,279 +1,44 @@
 <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
-              @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
-              @updateImg="updateImg"
+              v-for="(row, rowIndex) in activatedConfig.columns"
               @selectRow="selectRow"
-              :show-img-in-cell="showImgInCell"
-              :img-prefix="imgPrefix"
+              @slotRendered="slotRendered"
               :server-name="serverName"
               :env="env"
-              :use-oss-for-img="useOssForImg"
-              :config="activatedConfig"
-              :key="rowIndex"
               :columns="row"
-              :no-top-border="noTopBorder"
               :config-data="activatedConfig.data"
+              :config="activatedConfig"
               :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 +46,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 +56,8 @@ export default {
     config: {
       type: Object,
       require: true,
-      default: () => {}
+      default: () => {
+      }
     },
     showImgInCell: {
       type: Boolean,
@@ -323,16 +88,6 @@ export default {
       type: String,
       default: undefined
     },
-    // 将图片全部展示在表格之后，挨个罗列
-    showImages: {
-      type: Boolean,
-      default: false
-    },
-    // 图片罗列的数组
-    imageList: {
-      type: Array,
-      default: undefined
-    },
     // 表格没有边距
     noPadding: {
       type: Boolean,
@@ -343,28 +98,17 @@ 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'],
+  provide () {
+    return {
+      setColSpanByName: this.setColSpanByName
+    }
+  },
   data () {
     return {
       // 表单的数据
@@ -390,53 +134,69 @@ 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)
+    setColSpanByName (componentName, colSpan) {
+      // 处理columns配置（二维数组结构）
+      const processColumns = (columns) => {
+        columns.forEach((row) => {
+          row.forEach((cell, index) => {
+            if (Array.isArray(cell)) {
+              processColumns(cell) // 递归处理嵌套数组
+            } else if (cell.slotRef === componentName) {
+              // 使用Vue.set确保响应式更新
+              this.$set(row[index], 'colSpan', colSpan)
+              this.$set(row[index], '_isManualColSpan', true)
             }
-            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
-              return formatStr[j]
+          })
+        })
+      }
+
+      // 处理table配置（二维数组结构）
+      const processTable = (table) => {
+        table.forEach((row) => {
+          row.forEach((cell, index) => {
+            // 同时检查顶层和def中的slotRef
+            const isTargetCell =
+              cell.slotRef === componentName ||
+              cell.def?.slotRef === componentName
+
+            if (isTargetCell) {
+              // 同时更新顶层和def中的colSpan
+              this.$set(row[index], 'colSpan', colSpan)
+              this.$set(row[index], '_isManualColSpan', true)
+              if (cell.def) {
+                this.$set(row[index].def, 'colSpan', colSpan)
+                this.$set(row[index].def, '_isManualColSpan', true)
+              }
             }
+          })
+        })
+      }
+
+      // 强制刷新视图
+      const forceUpdate = () => {
+        this.$nextTick(() => {
+          // 创建新对象引用以触发watch
+          this.activatedConfig = {
+            ...this.activatedConfig,
+            _version: Date.now()
           }
-        }
+          this.$forceUpdate()
+        })
       }
-    },
-    // 根据format计算输入框之前的文字显示
-    displayFormatStartText (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          break
-        } else {
-          count++
-        }
+
+      // 处理当前激活的配置
+      if (this.activatedConfig?.columns) {
+        processColumns(this.activatedConfig.columns)
+      }
+      if (this.activatedConfig?.table) {
+        processTable(this.activatedConfig.table)
       }
-      return formatStr.slice(0, count)
+
+      forceUpdate()
     },
   },
   created () {
-    console.log('>>>> xreportdesign 渲染')
+    console.log('>>>> xreportdesign 渲染', JSON.stringify(this.config, null, 2))
     if (this.slotConfigName) {
       getConfigByName(this.slotConfigName, undefined, res => {
         this.slotConfig = res
@@ -449,15 +209,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 () {
   },
@@ -468,6 +226,7 @@ export default {
       }
     },
     activatedConfig: {
+      deep: true,
       handler (val) {
         console.log('>>>> activatedConfig: ', val)
       }
@@ -477,11 +236,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 +267,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 +283,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 +312,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 +328,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 +341,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 +361,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 +377,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;