vue2-client 1.8.237 → 1.8.239

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

@@ -2,6 +2,7 @@
   <div>
     <template v-if="this.activatedConfig.designMode === 'json'">
       <XReportJsonRender
+        :display-only="displayOnly"
         :show-title="showTitle"
         :no-padding="noPadding"
         :no-top-border="noTopBorder"
@@ -50,6 +51,8 @@
               <template v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'">
                 <template v-if="!forDisplay">
                   <x-report-tr-group
+                    @updateImg="updateImg"
+                    :use-oss-for-img="useOssForImg"
                     :key="rowIndex"
                     :columns="row"
                     :no-top-border="noTopBorder"
@@ -59,6 +62,8 @@
                 </template>
                 <template v-else>
                   <x-report-tr-group
+                    @updateImg="updateImg"
+                    :use-oss-for-img="useOssForImg"
                     :config="activatedConfig"
                     :key="rowIndex"
                     :columns="row"
@@ -73,6 +78,8 @@
                 <template v-for="(num, listIndex) in row[0].listLength + 1">
                   <template v-if="!forDisplay">
                     <x-report-tr-group
+                      @updateImg="updateImg"
+                      :use-oss-for-img="useOssForImg"
                       :config="activatedConfig"
                       :key="rowIndex + listIndex"
                       :columns="row"
@@ -83,6 +90,8 @@
                   </template>
                   <template v-else>
                     <x-report-tr-group
+                      @updateImg="updateImg"
+                      :use-oss-for-img="useOssForImg"
                       :config="activatedConfig"
                       :key="rowIndex + listIndex"
                       :columns="row"
@@ -98,6 +107,8 @@
               <template v-else>
                 <template v-if="forDisplay">
                   <x-report-tr-group
+                    @updateImg="updateImg"
+                    :use-oss-for-img="useOssForImg"
                     :config="activatedConfig"
                     :columns="row[0].definition"
                     :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
@@ -110,6 +121,8 @@
                 </template>
                 <template v-if="!forDisplay">
                   <x-report-tr-group
+                    @updateImg="updateImg"
+                    :use-oss-for-img="useOssForImg"
                     :config="activatedConfig"
                     :columns="row[0].definition"
                     :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
@@ -120,6 +133,8 @@
                     :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
                   <!--  动态行交互按钮  -->
                   <x-report-tr-group
+                    @updateImg="updateImg"
+                    :use-oss-for-img="useOssForImg"
                     :config="activatedConfig"
                     :key="rowIndex"
                     :columns="row"
@@ -155,38 +170,56 @@ import { getConfigByName } from '@vue2-client/services/api/common'
 export default {
   name: 'XReportDesign',
   props: {
+    // 配置
     config: {
       type: Object,
       require: true,
       default: () => {}
     },
+    // 是否是展示用
     forDisplay: {
       type: Boolean,
       default: false
     },
+    // 是否只能展示不可编辑
+    displayOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 插槽名
     slotConfigName: {
       type: String,
       default: undefined
     },
+    // 将图片全部展示在表格之后，挨个罗列
     showImages: {
       type: Boolean,
       default: false
     },
+    // 图片罗列的数组
     imageList: {
       type: Array,
       default: undefined
     },
+    // 表格没有边距
     noPadding: {
       type: Boolean,
       default: false
     },
+    // 表格没有上边框，与noPadding搭配可以实现连续表格
     noTopBorder: {
       type: Boolean,
     default: false
     },
+    // 是否展示标题
     showTitle: {
       type: Boolean,
       default: true
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true
     }
   },
   components: {
@@ -195,13 +228,20 @@ export default {
   },
   data () {
     return {
+      // 表单的数据
       data: this.config.data,
+      // 插槽配置
       slotConfig: undefined,
+      // 控制是否渲染
       render: false,
+      // 用于展示的配置
       activatedConfig: {}
     }
   },
   methods: {
+    updateImg (data) {
+      this.$emit('updateImg', data)
+    },
     // 根据format计算需要多少个输入框
     calcFormatInputNum (formatStr) {
       let count = 0
@@ -268,6 +308,8 @@ export default {
       }
     })
   },
+  mounted () {
+  },
   watch: {
     config: {
       deep: true,

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

@@ -2,6 +2,7 @@
   <div :class="noPadding ? 'reportMainNoPadding' : 'reportMain'">
     <table class="reportTable" :style="config.style ? config.style : undefined">
       <tbody class="'reportTable'">
+        <!--   标题   -->
         <tr v-if="showTitle && config.title.type && config.title.type !== ''">
           <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="12">
             <template v-if="config.title.type === 'titleKey'">
@@ -13,6 +14,7 @@
           </td>
         </tr>
         <template v-for="(row, rowIndex) in config.content">
+          <!--     数据对象是一个Obj     -->
           <template v-if="row.type === 'jsonKey'">
             <tr :key="rowIndex">
               <!--      表头        -->
@@ -32,13 +34,18 @@
                 :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
                 :style="determineCellStyle(receivedFunction[rowIndex].valueFunction(config))"
                 colspan="6">
-                <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
-                  {{ config.data[receivedFunction[rowIndex].valueFunction(config).content] }}
+                <template v-if="displayOnly">
+                  <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
+                    {{ config.data[receivedFunction[rowIndex].valueFunction(config).content] }}
+                  </template>
+                  <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'value'">
+                    {{ receivedFunction[rowIndex].valueFunction(config).content }}
+                  </template>
                 </template>
-                <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'value'">
-                  {{ receivedFunction[rowIndex].valueFunction(config).content }}
+                <template v-else>
+                  <a-input v-model="config.data[receivedFunction[rowIndex].valueFunction(config).originalKey]"/>
                 </template>
-                <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'img'">
+                <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'img'">
                   <template v-for="(img, imgIndex) in receivedFunction[rowIndex].valueFunction(config).content">
                     <span :key="imgIndex" class="imgText">
                       <a-icon type="link"/>
@@ -50,6 +57,7 @@
               </td>
             </tr>
           </template>
+          <!--     数据对象是一个Array     -->
           <template v-else-if="row.type === 'jsonArray'">
             <tr :key="rowIndex + '' + jsonArrayItemIndex" v-for="(item, jsonArrayItemIndex) in config.data[row.jsonArrayDataIndex]">
               <!--      表头        -->
@@ -69,11 +77,16 @@
                 :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
                 :style="determineCellStyle(receivedFunction[rowIndex].valueFunction(config, item))"
                 colspan="6">
-                <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'key'">
-                  {{ item[receivedFunction[rowIndex].valueFunction(config, item).content] }}
+                <template v-if="displayOnly">
+                  <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'key'">
+                    {{ item[receivedFunction[rowIndex].valueFunction(config, item).content] }}
+                  </template>
+                  <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'value'">
+                    {{ receivedFunction[rowIndex].valueFunction(config, item).content }}
+                  </template>
                 </template>
-                <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'value'">
-                  {{ receivedFunction[rowIndex].valueFunction(config, item).content }}
+                <template v-else>
+                  <a-input v-model="item[receivedFunction[rowIndex].valueFunction(config, item).originalKey]"/>
                 </template>
               </td>
             </tr>
@@ -81,6 +94,7 @@
         </template>
       </tbody>
     </table>
+    <!--  图片展示弹框  -->
     <a-modal
       title="图片"
       width="80%"
@@ -101,42 +115,59 @@
 export default {
   name: 'XReportJsonRender',
   props: {
+    // 配置
     config: {
       type: Object,
       required: true
     },
+    // 表格没有边距
     noPadding: {
       type: Boolean,
       default: false
     },
+    // 表格没有上边框，与noPadding搭配可以实现连续表格
     noTopBorder: {
       type: Boolean,
       default: false
     },
+    // 是否展示标题
     showTitle: {
       type: Boolean,
       default: true
+    },
+    // 是否仅展示
+    displayOnly: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
     return {
+      // 储存所有json传递的函数
       receivedFunction: [],
+      // 控制弹框显隐
       showImgModal: false,
+      // 弹框中图片路径
       showImageSrc: undefined
     }
   },
   methods: {
+    // 判断单元格样式
     determineCellStyle (labelFunctionReturn, color = '#000', borderWidth = '1px') {
+      // 如果声明了边框颜色
       if (labelFunctionReturn.style.borderColor) {
         color = labelFunctionReturn.style.borderColor
       }
+      // 如果声明了边框宽度
       if (labelFunctionReturn.style.borderWidth) {
         borderWidth = labelFunctionReturn.style.borderWidth
       }
+      // 正常边框单元格
       const withBorder = {
         border: borderWidth + ' solid ' + color,
         padding: '8px'
       }
+      // 仅没有上边框单元格
       const NoTopBorder = {
         borderTopStyle: 'none',
         borderLeft: borderWidth + ' solid ' + color,
@@ -145,6 +176,7 @@ export default {
         padding: '8px'
       }
       let result = {}
+      // 判断表头是否有声明的样式
       if (labelFunctionReturn.style !== undefined) {
         if (this.noTopBorder) {
           result = { ...NoTopBorder, ...labelFunctionReturn.style }
@@ -177,6 +209,7 @@ export default {
     }
   },
   beforeMount () {
+    // 遍历配置，将所有JSON传递的方法保存到一个数组中，并用index来一一对应
     for (let i = 0; i < this.config.content.length; i++) {
       this.receivedFunction.push({
         // eslint-disable-next-line no-eval

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

@@ -239,14 +239,26 @@
         </template>
         <template v-else-if="cell.type === 'images'">
           <div>
-            <upload
-              :model="{type: 'image', accept: ['*'], resUploadStock: 1, pathKey: 'cs', resUploadMode: 'oss'}"
-              service-name="af-system"
-              :images="configData.images[cell.dataIndex]"
-              :outer-container-index="cell.dataIndex"
-              @setFiles="setImages"
-              :upload-style="'simple'"
-            />
+            <template v-if="configData.images[cell.dataIndex].length > 0">
+              <upload
+                :model="uploadParams"
+                service-name="af-system"
+                :images="checkImg(cell.dataIndex, 'configData')"
+                :outer-container-index="cell.dataIndex"
+                @setFiles="(...args) => {setImages(args, 'configData')}"
+                :upload-style="'simple'"
+              />
+            </template>
+            <template v-else>
+              <upload
+                :model="uploadParams"
+                service-name="af-system"
+                :images="checkImg(cell.dataIndex, 'config')"
+                :outer-container-index="cell.dataIndex"
+                @setFiles="(...args) => {setImages(args, 'config', cell.dataIndex)}"
+                :upload-style="'simple'"
+              />
+            </template>
           </div>
         </template>
       </td>
@@ -370,39 +382,84 @@ export default {
       type: Boolean,
       default: false
     },
-    // listIndex
+    // list类型的下标，用于遍历列表时，获取对应的数据
     listIndex: {
       type: Number,
       default: undefined
     },
+    // 表格没有上边框
     noTopBorder: {
       type: Boolean,
       default: false
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
     return {
-      maxColSpan: 12
+      maxColSpan: 12,
+      uploadParams: {
+        type: 'image',
+        accept: ['*'],
+        resUploadStock: 1,
+        pathKey: 'cs'
+      }
       // tableConfig: {}
     }
   },
   methods: {
+    updateImg (data) {
+      this.$emit('updateImg', data)
+    },
+    checkImg (index, type) {
+      let target
+      if (type === 'configData') {
+        target = this.configData.images[index]
+      } else {
+        target = this.config.tempData[index]
+      }
+      target.forEach(obj => {
+        if (obj.uid === undefined) {
+          obj.uid = obj.id.toString()
+        }
+        if (obj.url === undefined) {
+          if (obj.path) {
+            obj.url = obj.path
+          }
+        }
+        if (obj.name === undefined) {
+          const withOutEndFix = obj.url.split('.')[0]
+          const temp = withOutEndFix.split('/')
+          obj.name = temp[temp.length - 1]
+        }
+      })
+      return target
+    },
+    // 判断单元格样式
     determineCellStyle (cell, color = '#000', borderWidth = '1px') {
+      // 如果声明了borderColor
       if (this.config.style.borderColor) {
         color = this.config.style.borderColor
       }
+      // 如果声明了borderWidth
       if (this.config.style.borderWidth) {
         borderWidth = this.config.style.borderWidth
       }
+      // 普通带边框单元格
       const withBorder = {
         border: borderWidth + ' solid ' + color,
         padding: '8px'
       }
+      // 只有左右边框的单元格
       const noBorder = {
         borderLeft: borderWidth + ' solid ' + color,
         borderRight: borderWidth + ' solid ' + color,
         padding: '8px'
       }
+      // 只没有上边框的单元格
       const NoTopBorder = {
         borderTopStyle: 'none',
         borderLeft: borderWidth + ' solid ' + color,
@@ -411,6 +468,7 @@ export default {
         padding: '8px'
       }
       let result = {}
+      // 如果表格也声明了样式，用表格样式将样式覆盖
       if (cell.style) {
         if (cell.noBorder) {
           result = { ...noBorder, ...cell.style }
@@ -423,6 +481,7 @@ export default {
         }
         return result
       }
+      // 如果表头声明了样式，则用其将基础样式覆盖
       if (cell.type === 'column') {
         if (this.config.labelStyle !== undefined) {
           if (cell.noBorder) {
@@ -448,9 +507,11 @@ export default {
       }
       return result
     },
+    // 表格中数据key含有@@@，需要手动触发更新
     handleInputDeepChange () {
       this.$forceUpdate()
     },
+    // 路径中含有@@@的key，将其解析，并返回其数据
     getDeepObject (obj, strPath) {
       const arr = strPath.split('@@@')
       let result = obj[arr[0]]
@@ -465,6 +526,7 @@ export default {
       }
       return result
     },
+    // 获取当前日期
     getNowDate (index1, index2) {
       if (index2) {
         // @click="getNowDate(configData.arr[inputColumnsDefinitionIndex][cell.dataIndex])"
@@ -474,14 +536,28 @@ export default {
       }
       this.configData = Object.assign({}, this.configData)
     },
+    // 反序列化函数并执行
     deserializeFunctionAndRun (functionStr, value) {
       // eslint-disable-next-line no-eval
       const fun = eval('(' + functionStr + ')')
       return fun(value, this.config)
     },
-    setImages (imageIds, dataIndex) {
-      this.configData.images[dataIndex] = imageIds
+    // 基础上传组件，图片改动后触发
+    setImages (args, type, index = undefined) {
+      // 如果基础上传组件在初始化完成后，就调用emit了setImage，此时图片并没有变化，直接返回
+      if (args[2] === 'created') {
+        return
+      }
+      if (type === 'configData') {
+        this.configData.images[args[1]] = args[0]
+      } else {
+        this.config.tempData[args[1]] = args[0]
+        if (index) {
+          this.$emit('updateImg', this.config.tempData[index])
+        }
+      }
     },
+    // 动态行删除
     removeData (index) {
       if (this.configData[index].length === 0) {
         this.$message.warn('已经没有更多了')
@@ -620,6 +696,9 @@ export default {
     },
   },
   beforeMount () {
+    if (this.useOssForImg) {
+      this.uploadParams.resUploadMode = 'oss'
+    }
   }
 }
 

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

@@ -1,48 +1,48 @@
-# XReportSlot 暂时废弃
-
-
-动态报表的插槽组件，可以递归使用
-
-
-## 何时使用
-
-> 当需要一个动态生成的报表时
-
-> 一般由XReportDesign嵌套使用，在XReportDesign中判断当前行如果类型是slot，
-> 则递归此组件
-
-引用方式：
-
-```javascript
-import XReportSlot from '@vue2-client/base-client/components/XReportSlot/XReportSlot'
-
-export default {
-    components: {
-      XReportSlot
-    }
-}
-```
-
-
-## API
-
-| 参数              | 说明                       | 类型     | 默认值  |
-|-----------------|--------------------------|--------|------|
-| config | 表格完整配置 | Object | 无（必填） |
-| forDisplay | 是否为展示页 | Boolean | false |
-| slotConfigName | 插槽名 | String | undefined |
-
-## 例子1
-----
-```vue
-<XReportSlot
-  :config="activatedConfig"
-  :slot-config-name="slotConfig"
-  :for-display="forDisplay">
-</XReportSlot>
-```
-## 注意事项
-> slotConfigName如果不填，则展示整个表格。
-> 如果填写，则仅展示插槽中的内容
-
-> 该组件可以递归调用
+# XReportSlot 暂时废弃
+
+
+动态报表的插槽组件，可以递归使用
+
+
+## 何时使用
+
+> 当需要一个动态生成的报表时
+
+> 一般由XReportDesign嵌套使用，在XReportDesign中判断当前行如果类型是slot，
+> 则递归此组件
+
+引用方式：
+
+```javascript
+import XReportSlot from '@vue2-client/base-client/components/XReportSlot/XReportSlot'
+
+export default {
+    components: {
+      XReportSlot
+    }
+}
+```
+
+
+## API
+
+| 参数              | 说明                       | 类型     | 默认值  |
+|-----------------|--------------------------|--------|------|
+| config | 表格完整配置 | Object | 无（必填） |
+| forDisplay | 是否为展示页 | Boolean | false |
+| slotConfigName | 插槽名 | String | undefined |
+
+## 例子1
+----
+```vue
+<XReportSlot
+  :config="activatedConfig"
+  :slot-config-name="slotConfig"
+  :for-display="forDisplay">
+</XReportSlot>
+```
+## 注意事项
+> slotConfigName如果不填，则展示整个表格。
+> 如果填写，则仅展示插槽中的内容
+
+> 该组件可以递归调用