vue2-client 1.12.28 → 1.12.30

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

@@ -26,16 +26,13 @@
           <tbody class="reportTable">
             <!--  插槽展示  -->
             <x-report-tr-group
+              :key="rowIndex"
               v-for="(row, rowIndex) in activatedConfig.columns"
-              @updateImg="updateImg"
               @selectRow="selectRow"
               @slotRendered="slotRendered"
-              :show-img-in-cell="showImgInCell"
               :server-name="serverName"
               :env="env"
-              :key="rowIndex"
               :columns="row"
-              :no-top-border="noTopBorder"
               :config-data="activatedConfig.data"
               :config="activatedConfig"
               :display="true">
@@ -107,6 +104,11 @@ export default {
     XReportTrGroup
   },
   inject: ['isWidget'],
+  provide () {
+    return {
+      setColSpanByName: this.setColSpanByName
+    }
+  },
   data () {
     return {
       // 表单的数据
@@ -132,9 +134,69 @@ export default {
       console.log('XReportDesign')
       this.$emit('selectRow', selectedRowKeys, selectedRows)
     },
+    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)
+            }
+          })
+        })
+      }
+
+      // 处理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()
+        })
+      }
+
+      // 处理当前激活的配置
+      if (this.activatedConfig?.columns) {
+        processColumns(this.activatedConfig.columns)
+      }
+      if (this.activatedConfig?.table) {
+        processTable(this.activatedConfig.table)
+      }
+
+      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
@@ -164,6 +226,7 @@ export default {
       }
     },
     activatedConfig: {
+      deep: true,
       handler (val) {
         console.log('>>>> activatedConfig: ', val)
       }

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

@@ -1,92 +1,83 @@
 <template>
   <a-row id="has_row" type="flex" :gutter="gutter" :style="isWidget ? {margin: '0px'} : {'margin-bottom': '.5rem'}">
-    <!--  预览页展示  -->
-    <a-col
-      name="trGroup"
-      v-for="(cell, cellIndex) in columns"
-      v-if="Array.isArray(cell) || !cell.dontShowRow"
-      :key="cellIndex"
-      :style="isWidget ? {padding: '0px 2px'} : (Array.isArray(cell) ? {} : determineCellStyle(cell))"
-      :span="Array.isArray(cell) ? cell[0][0].colSpan * 2 : (cell.colSpan ? cell.colSpan * 2 : undefined)">
-      <div id="report_widget" v-if="isWidget">
-        <!-- 插槽渲染 -->
-        <template v-if="Array.isArray(cell)">
-          <!-- 处理 cell 是数组的情况 -->
-          <div v-for="(item, index) in cell" :key="index">
-            <x-report-tr-group
-              :show-img-in-cell="showImgInCell"
-              :img-prefix="imgPrefix"
-              :server-name="serverName"
-              :env="env"
-              :use-oss-for-img="useOssForImg"
-              :key="index"
-              :columns="recalculateItem(item)"
-              :no-top-border="noTopBorder"
-              :config-data="configData"
-              :config="config"
-              :display="true">
-            </x-report-tr-group>
-          </div>
-        </template>
-        <template v-else-if="cell.type === 'slot'">
-          <template
-            v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions'].includes(cell.slotType)">
-            <component
-              :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
-              :key="cellIndex"
-              :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
-              :serviceName="cell.serviceName"
-              :serverName="cell.serviceName"
-              v-on="getEventHandlers(cell)"
-              @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
-              :queryParamsName="cell.slotConfig"
-              :configName="cell.slotConfig"
-              :countVisible="false"
-              :env="env"
-            />
+    <template v-for="(cell, cellIndex) in columns">
+      <a-col
+        name="trGroup"
+        v-if="Array.isArray(cell) || !cell.dontShowRow"
+        :key="cellIndex"
+        :style="isWidget ? {padding: '0px 2px'} : (Array.isArray(cell) ? {} : determineCellStyle(cell))"
+        :span="calculateColSpan(cell)">
+        <div id="report_widget" v-if="isWidget">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
           </template>
-        </template>
-      </div>
-      <a-card v-else class="flexItem" :bordered="false" :body-style="flexItemBodyState">
-        <!-- 插槽渲染 -->
-        <template v-if="Array.isArray(cell)">
-          <!-- 处理 cell 是数组的情况 -->
-          <div v-for="(item, index) in cell" :key="index">
-            <x-report-tr-group
-              :show-img-in-cell="showImgInCell"
-              :img-prefix="imgPrefix"
-              :server-name="serverName"
-              :env="env"
-              :use-oss-for-img="useOssForImg"
-              :key="index"
-              :columns="recalculateItem(item)"
-              :no-top-border="noTopBorder"
-              :config-data="configData"
-              :config="config"
-              :display="true">
-            </x-report-tr-group>
-          </div>
-        </template>
-        <template v-else-if="cell.type === 'slot'">
-          <template
-            v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions'].includes(cell.slotType)">
-            <component
-              :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
-              :key="cellIndex"
-              :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
-              :serviceName="cell.serviceName"
-              :serverName="cell.serviceName"
-              v-on="getEventHandlers(cell)"
-              @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
-              :queryParamsName="cell.slotConfig"
-              :configName="cell.slotConfig"
-              :countVisible="false"
-              :env="env"
-            />
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
           </template>
-        </template>
-      </a-card>
-    </a-col>
+        </div>
+        <a-card v-else class="flexItem" :bordered="false" :body-style="flexItemBodyState">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :server-name="serverName"
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
+          </template>
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
+          </template>
+        </a-card>
+      </a-col>
+    </template>
   </a-row>
 </template>
 
@@ -147,46 +138,11 @@ export default {
       type: Object,
       required: true
     },
-    // 是否为动态行
-    inputColumns: {
-      type: Boolean,
-      default: false
-    },
-    // 是否为动态行按钮
-    inputColumnsButton: {
-      type: Boolean,
-      default: false
-    },
-    // 动态行的Index
-    inputColumnsDefinitionIndex: {
-      type: Number,
-      default: undefined
-    },
     // 是否为展示行
     display: {
       type: Boolean,
       default: false
     },
-    // list类型的下标，用于遍历列表时，获取对应的数据
-    listIndex: {
-      type: Number,
-      default: undefined
-    },
-    // 表格没有上边框
-    noTopBorder: {
-      type: Boolean,
-      default: false
-    },
-    // 图片是否使用OSS来保存
-    useOssForImg: {
-      type: Boolean,
-      default: true
-    },
-    // 图片上传后添加前缀
-    imgPrefix: {
-      type: String,
-      default: undefined
-    }
   },
   computed: {
     allSlotSum () {
@@ -225,13 +181,31 @@ export default {
       // tableConfig: {}
     }
   },
-  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
+  watch: {
+    columns: {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        console.log('columns变化:', JSON.parse(JSON.stringify(newVal)))
+        // 使用nextTick确保DOM更新
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+      }
+    }
+  },
+  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setColSpanByName', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
   methods: {
     getWindow,
     isMicroAppEnv,
     microDispatch,
     getMicroData,
     getRealKeyData,
+    calculateColSpan (cell) {
+      return Array.isArray(cell)
+        ? cell[0][0]?.colSpan * 2
+        : (cell?.colSpan ?? cell?.def?.colSpan ?? 1) * 2
+    },
     onComponentMounted (h, cell, cellIndex) {
       this.slotRendered += 1
       if (this.slotRendered >= this.allSlotSum) {
@@ -334,15 +308,20 @@ export default {
         }, this.env === 'dev')
       }
     },
-
-    // 对于嵌套情况，对colSpan重新分配
     recalculateItem (item) {
-      const totalColSpan = item.reduce((sum, cell) => sum + (cell.colSpan || 1), 0) // 计算总的 colSpan
+      const totalColSpan = item.reduce((sum, cell) => {
+        // 保留手动设置的colSpan
+        return sum + (cell._isManualColSpan ? 0 : (cell.colSpan || 1))
+      }, 0)
       return item.map(cell => {
-        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12) // 按比例重新分配 colSpan
+        // 跳过已手动设置的单元格
+        if (cell._isManualColSpan) return cell
+        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12)
         return {
           ...cell,
-          colSpan: newColSpan // 更新 colSpan
+          colSpan: newColSpan,
+          // 标记自动计算的单元格
+          _isAutoCalculated: true
         }
       })
     },

package/src/base-client/components/common/XReportGrid/index.js

@@ -1,3 +1,3 @@
-import XReport from './XReport'
-
-export default XReport
+import XReport from './XReport'
+
+export default XReport

package/src/base-client/components/common/XReportGrid/index.md

@@ -1,44 +1,44 @@
-# XReport
-
-动态报表控件，根据JSON配置生成一个完整的报表
-
-
-## 何时使用
-
-当需要一个动态生成的报表时
-
-
-引用方式：
-
-```javascript
-import XReport from '@vue2-client/base-client/components/XReport/XReport'
-
-export default {
-    components: {
-      XReport
-    }
-}
-```
-
-## API
-
-| 参数              | 说明   | 类型    | 默认值       |
-|-----------------|------|-------|-----------|
-| configName | 配置文件名 | String | 无（必填）     |
-| activatedSlotName| 激活插槽名 | String | undefined |
-| files | 文件列表 | Array | []        |
-| authority | 权限控制 | String | user |
-| localConfig | 本地配置 | Object | undefined |
-| dontFormat | 禁止已经格式化后的配置格式化| Boolean | false|
-| configData | 配置中的Data | Object | undefined |
-## 例子1
-----
-```vue
-<XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>
-```
-## 注意事项
-
-> 在某些情况下，比如手机端，只需要输入表格中一部分的内容。
-> 可以将这部分内容作为插槽，并在activatedSlotName中填写插槽名。
-> 则会在设计页面仅展示插槽中的输入项，并在预览窗口中，根据configName中的配置，
-> 渲染出来完整的表格
+# XReport
+
+动态报表控件，根据JSON配置生成一个完整的报表
+
+
+## 何时使用
+
+当需要一个动态生成的报表时
+
+
+引用方式：
+
+```javascript
+import XReport from '@vue2-client/base-client/components/XReport/XReport'
+
+export default {
+    components: {
+      XReport
+    }
+}
+```
+
+## API
+
+| 参数              | 说明   | 类型    | 默认值       |
+|-----------------|------|-------|-----------|
+| configName | 配置文件名 | String | 无（必填）     |
+| activatedSlotName| 激活插槽名 | String | undefined |
+| files | 文件列表 | Array | []        |
+| authority | 权限控制 | String | user |
+| localConfig | 本地配置 | Object | undefined |
+| dontFormat | 禁止已经格式化后的配置格式化| Boolean | false|
+| configData | 配置中的Data | Object | undefined |
+## 例子1
+----
+```vue
+<XReport :config-name="'test_tableConfig'" :activated-slot-name="'test_tableConfig_slot'"/>
+```
+## 注意事项
+
+> 在某些情况下，比如手机端，只需要输入表格中一部分的内容。
+> 可以将这部分内容作为插槽，并在activatedSlotName中填写插槽名。
+> 则会在设计页面仅展示插槽中的输入项，并在预览窗口中，根据configName中的配置，
+> 渲染出来完整的表格