vue2-client 1.8.237 → 1.8.239

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

@@ -1,12 +1,16 @@
 <template>
   <div>
+    <!--  骨架屏  -->
     <a-card v-if="showSkeleton">
       <a-skeleton active/>
     </a-card>
     <template v-if="noPadding">
       <!--   主体表格   -->
       <XReportDesign
+        @updateImg="updateImg"
         v-if="scanFinish"
+        :use-oss-for-img="useOssForImg"
+        :display-only="displayOnly"
         :config="type === 'display' ? originalConfig : activeConfig"
         :slot-config-name="type === 'display' ? undefined : activatedSlotName"
         :for-display="type === 'display'"
@@ -23,7 +27,7 @@
       <!--  用以包裹整个页面  -->
       <a-card v-if="!showSkeleton">
         <!--   切换菜单   -->
-        <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged" v-show="!onlyDisplay">
+        <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged" v-show="!onlyDisplay && editMode">
           <a-radio-button value="design" v-if="!onlyDisplay">
             设计
           </a-radio-button>
@@ -31,12 +35,15 @@
             预览
           </a-radio-button>
         </a-radio-group>
-        <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0" v-if="!onlyDisplay">
+        <a-radio-button @click="saveConfig" style="border-radius: 0 4px 4px 0" v-if="showSaveButton">
           保存
         </a-radio-button>
         <!--   主体表格   -->
         <XReportDesign
           v-if="scanFinish"
+          @updateImg="updateImg"
+          :use-oss-for-img="useOssForImg"
+          :display-only="displayOnly"
           :config="type === 'display' ? originalConfig : activeConfig"
           :slot-config-name="type === 'display' ? undefined : activatedSlotName"
           :for-display="type === 'display'"
@@ -78,60 +85,96 @@ export default {
         return []
       }
     },
+    // 控制用户权限，user和admin
     authority: {
       type: String,
       default: 'user'
     },
+    // 是否为编辑模式
+    editMode: {
+      type: Boolean,
+      default: true
+    },
+    // 配置名
     configName: {
       type: String,
       required: true
     },
+    // 插槽名
     activatedSlotName: {
       type: String,
       default: undefined
     },
+    // 本地配置，调试用
     localConfig: {
       type: Object,
       default: undefined
     },
+    // 兼容老版本配置
     dontFormat: {
       type: Boolean,
-      default: false
+      default: true
     },
+    // 数据
     configData: {
       type: Object,
       default: undefined
     },
+    // 命名空间
     serverName: {
       type: String,
       default: 'af-system'
     },
+    // 只做展示
     displayOnly: {
       type: Boolean,
       default: false
     },
+    // 表格没有边距
     noPadding: {
       type: Boolean,
       default: false
     },
+    // 表格没有上边框，与noPadding搭配可以实现连续表格
     noTopBorder: {
       type: Boolean,
       default: false
     },
+    // 是否展示标题
     showTitle: {
       type: Boolean,
       default: true
     },
+    // 是否展示保存按钮
+    showSaveButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否将组件注册到外层提供的容器中，方便外侧统一保存
+    registerMap: {
+      type: Array,
+      default: undefined
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true
+    }
   },
   components: {
     XReportDesign
   },
   data () {
     return {
+      // 控制骨架屏显隐
       showSkeleton: true,
+      // 配置
       config: undefined,
+      // 当前显示模式，编辑模式，预览模式
       type: 'design',
+      // 仅供展示，不可编辑
       onlyDisplay: false,
+      // 每行最大列数，非必要请勿更改，现在的设计器完全是基于每行12列来设计的
       maxColSpan: 12,
       // 定义是否完成配置的扫描，未完成不要渲染子组件
       scanFinish: false,
@@ -142,12 +185,20 @@ export default {
       originalConfig: null,
       // 扫描到的配置
       configFromWeb: {},
+      // 用于获取配置的锁
       timer: undefined,
+      // 是否包含图片
       hasImages: false,
-      imageList: []
+      // 图片列表
+      imageList: [],
+      // 保存最原始的数据，用于判断哪些数据被更改了
+      dataCache: undefined,
+      // 判断哪些数据被更改了，存储对应的key
+      diff: []
     }
   },
   watch: {
+    // 如果配置名更改了，重新获取配置
     configName (val) {
       if (val) {
         getConfigByName(this.configName, undefined, res => {
@@ -156,6 +207,7 @@ export default {
         })
       }
     },
+    // 如果本地配置更改了，重新初始化
     localConfig (val) {
       if (val) {
         this.config = val
@@ -164,13 +216,71 @@ export default {
     }
   },
   methods: {
-    saveConfig () {
-      const tempDataKeys = Object.keys(this.activeConfig.tempData)
-      tempDataKeys.forEach(key => {
-        this.changeDeepObject(this.activeConfig.data, key, this.activeConfig.tempData[key])
+    // 向外暴露图片修改后的数据，某些外部需要自己管理图片的保存与修改
+    updateImg (data) {
+      this.$emit('updateImg', data)
+    },
+    // 导出数据，某些外部需要统一控制数据的变动
+    exportData () {
+      // 获取当前修改后的数据
+      let tempData
+      if (this.activeConfig === undefined || this.activeConfig === null) {
+        tempData = this.originalConfig.data
+      } else {
+        const tempDataKeys = Object.keys(this.activeConfig.tempData)
+        tempDataKeys.forEach(key => {
+          this.changeDeepObject(this.activeConfig.data, key, this.activeConfig.tempData[key])
+        })
+        tempData = this.activeConfig.data
+      }
+      // 对比数据的差异
+      this.diff = []
+      this.compareProps(tempData, this.dataCache)
+      this.diff.forEach(eachDiff => {
+        const arr = eachDiff.split('.')
+        let targetData = tempData[arr[0]]
+        if (arr.length !== 1) {
+          for (let i = 1; i < arr.length - 1; i++) {
+            const path = arr[i]
+            targetData = targetData[path]
+          }
+        }
+        // 将修改的数据，添加update = true属性
+        targetData.update = true
       })
-      this.$emit('saveConfig', this.$refs.XReportDesign.activatedConfig)
+      return tempData
+    },
+    // 对比两个obj有哪里不同
+    compareProps (obj1, obj2, path = '') {
+      for (const key in obj1) {
+        // 如果一个是undefined
+        if (typeof obj2[key] === 'undefined') {
+          this.diff.push(path + key)
+          // 如果是数组长度不一样
+        } else if (obj1[key].length !== obj2[key].length) {
+          this.diff.push(path + key)
+          // 如果都是对象，并且存在同样的key，递归子key
+        } else if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {
+          this.compareProps(obj1[key], obj2[key], path + key + '.')
+          // 如果不是obj，对比其数据
+        } else if (obj1[key] !== obj2[key]) {
+          this.diff.push(path + key)
+        }
+      }
+    },
+    // 正常的保存方法，当前修改内容会直接全部导出到外部
+    saveConfig () {
+      if (this.activeConfig === undefined || this.activeConfig === null) {
+        return this.originalConfig.data
+      } else {
+        const tempDataKeys = Object.keys(this.activeConfig.tempData)
+        tempDataKeys.forEach(key => {
+          this.changeDeepObject(this.activeConfig.data, key, this.activeConfig.tempData[key])
+        })
+        this.$emit('saveConfig', this.$refs.XReportDesign.activatedConfig)
+      }
     },
+    // 通过@@@分割临时变量，找到对应的key，并修改它的值
     changeDeepObject (obj, strPath, newVal) {
       const arr = strPath.split('@@@')
       if (obj[arr[0]] === undefined) {
@@ -302,6 +412,7 @@ export default {
         this.config.columns = newArr
       }
     },
+    // 路径中含有@@@的key，将其解析，并返回其数据
     getDeepObject (obj, strPath) {
       const arr = strPath.split('@@@')
       let result = obj[arr[0]]
@@ -566,6 +677,7 @@ export default {
           })
         })
 
+        // 使用定时器循环判断锁状态，用于多个插槽，要等待统一获取完成之后，再进行下一步初始化
         const timer = setInterval(() => {
           console.log('插槽下载进度，当前：' + count + '/' + total)
           if (count >= total) {
@@ -592,14 +704,18 @@ export default {
     },
     // 获取配置之后的初始化
     configInit () {
+      // 上锁，等待所有配置获取完成
       const lock = { status: true }
 
+      // 获取插槽
       this.getConfigAndJoin(this.config, lock)
 
+      // 用定时器循环查看锁状态
       this.timer = setInterval(() => {
         if (!lock.status) {
           clearInterval(this.timer)
           console.log('拼接完成', this.config)
+          // 将初始化好的配置拷贝一份留存
           this.originalConfig = Object.assign({}, this.config)
           if (!this.dontFormat) {
             // 扫描配置文件中有没有rowSpan，进行格式化调整
@@ -607,18 +723,23 @@ export default {
           }
           this.activeConfig = this.config
           this.showSkeleton = false
+          // 判断是否有动态Index
           this.activeConfig.columns.forEach(row => {
             row.forEach(cell => {
               if (cell.dynamicDataIndex === true) {
+                // 如果有动态index，取其函数，运行函数得到真实index保存
                 // eslint-disable-next-line no-eval
                 const func = eval('(' + cell.customFunctionForDynamicDataIndex + ')')
                 cell.dataIndex = func(this.config)
               }
             })
           })
+          // 将数据复制到临时数据中，带有@@@的数据，我们将其整体作为一个key保存，当编辑完成后，再将其解析，回填到需要的数据中
           this.activeConfig.tempData = {}
+          // 是否有@@@深层引用
           this.activeConfig.columns.forEach(row => {
             row.forEach(cell => {
+              // 将@@@解析
               if (cell.dataIndex !== undefined && cell.dataIndex.indexOf('@@@') !== -1) {
                 this.activeConfig.tempData[cell.dataIndex] = this.getDeepObject(this.activeConfig.data, cell.dataIndex)
               }
@@ -638,7 +759,7 @@ export default {
         this.originalConfig = Object.assign({}, this.config)
         this.originalConfig.data = JSON.parse(JSON.stringify(this.configData))
         this.type = 'display'
-        this.onlyDisplay = true
+        // this.onlyDisplay = true
         this.showSkeleton = false
         this.$nextTick(() => {
           this.scanFinish = true
@@ -647,11 +768,14 @@ export default {
     },
   },
   beforeMount () {
+    // 如果只是展示
     if (this.displayOnly) {
       this.onlyDisplay = true
       this.type = 'display'
     }
+    // 如果有本地配置，优先使用本地配置
     if (this.localConfig) {
+      // 如果配置是json渲染器
       if (this.localConfig.designMode === 'json') {
         this.config = this.localConfig
         if (this.configData !== undefined) {
@@ -659,6 +783,7 @@ export default {
         }
         this.jsonConfigInit()
       } else {
+        // 如果配置是普通渲染器
         this.config = this.localConfig
         if (this.configData !== undefined) {
           this.config.data = this.configData
@@ -669,6 +794,7 @@ export default {
         this.configInit()
       }
     } else {
+      // 如果本地配置没有值，则从琉璃中获取
       getConfigByName(this.configName, this.serverName, res => {
         this.config = res
         if (this.config.designMode === 'json') {
@@ -687,6 +813,14 @@ export default {
         }
       })
     }
+  },
+  mounted () {
+    // 如果外界传来了registerMap，我们将本VM对象注册到map中
+    if (this.registerMap !== undefined) {
+      this.registerMap.push(this)
+    }
+    // 将原始数据备份保存
+    this.dataCache = JSON.parse(JSON.stringify(this.config.data))
   }
 }
 </script>