[bug-350] 调整数据模板加载loading与数据列表加载loading位置重叠

src/api/platform/data/dataTemplate.js

@@ -219,7 +219,8 @@ export function queryDataTable(params) {
   return request({
     url: DATA_URL() + '/data/template/queryDataTable',
     method: 'post',
-    data: params
+    data: params,
+    isLoading: true
   })
 }
 

src/business/platform/data/templatebuilder/dialog.vue

@@ -1,28 +1,28 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    class="templatebuilder-dialog"
-    fullscreen
-    append-to-body
-    @open="getFormData"
-    @close="closeDialog"
-  >
-    <div
-      v-loading.fullscreen.lock="dialogLoading"
-      :element-loading-text="$t('common.loading')"
-    >
-      <data-template-builder
-        v-if="dialogVisible && $utils.isNotEmpty(dataTemplate)"
-        :data="dataTemplate"
-        :compose-confirm="composeConfirm"
-        @callback="handleCallback"
-        @initDataTemplte="initDataTemplte"
+    <el-dialog
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        class="templatebuilder-dialog"
+        fullscreen
+        append-to-body
+        @open="getFormData"
         @close="closeDialog"
-      />
-    </div>
-  </el-dialog>
+    >
+        <div
+            v-loading.fullscreen.lock="dialogLoading"
+            :element-loading-text="$t('common.loading')"
+        >
+            <data-template-builder
+                v-if="dialogVisible && $utils.isNotEmpty(dataTemplate)"
+                :data="dataTemplate"
+                :compose-confirm="composeConfirm"
+                @callback="handleCallback"
+                @initDataTemplte="initDataTemplte"
+                @close="closeDialog"
+            />
+        </div>
+    </el-dialog>
 </template>
 <script>
 import { getBuildDataById } from '@/api/platform/data/dataTemplate'
@@ -34,184 +34,184 @@ import Utils from './utils'
 import DataTemplateBuilder from './index'
 
 export default {
-  components: {
-    DataTemplateBuilder
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
+    components: {
+        DataTemplateBuilder
     },
-    data: {
-      type: Object
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        data: {
+            type: Object
+        },
+        composeConfirm: {
+            type: Boolean,
+            default: false
+        },
+        id: String
     },
-    composeConfirm: {
-      type: Boolean,
-      default: false
-    },
-    id: String
-  },
-  data() {
-    return {
-      dialogVisible: this.visible,
-      dialogLoading: false,
-      defaultForm: {
-        attrs: {},
-        templates: [] // 模版
-      },
-      dataTemplate: null
-    }
-  },
-  computed: {
-    formId() {
-      return this.id
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    ...mapActions({
-      setDatasets: 'ibps/dataTemplate/setDatasets'
-    }),
-    // 关闭当前窗口
-    closeDialog() {
-      this.$emit('close', false)
-    },
-    handleCallback() {
-      this.$emit('callback')
-    },
-    getDefaultTemplateAttrs(data) {
-      if (data.type === 'valueSource') {
-        data.templates = [
-          Utils.defaultValueSourcetAttrs(data)
-        ]
-      } else {
-        if (data.showType === 'list') {
-          data.templates = [
-            Utils.defaultListAttrs(data)
-          ]
-        } else if (data.showType === 'tree' || data.composeType === 'treeForm') {
-          data.templates = [
-            Utils.defaultTreeAttrs(data)
-          ]
-        } else if (data.showType === 'compose' && data.composeType !== 'treeForm') {
-          data.templates = []
-        }
-
-        if (data.type === 'dialog') {
-          data.dialogs = Utils.defaultDialogAttrs()
+    data () {
+        return {
+            dialogVisible: this.visible,
+            dialogLoading: false,
+            defaultForm: {
+                attrs: {},
+                templates: [] // 模版
+            },
+            dataTemplate: null
         }
-      }
-      return data
     },
-    initDataTemplte(data) {
-      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm))
-      this.dataTemplate = defaultsDeep(this.getDefaultTemplateAttrs(data), defaultForm)
-    },
-    /**
-     * 获取表单数据
-     */
-    getFormData() {
-      this.dataTemplate = null
-      this.dialogLoading = true
-      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm))
-      if (this.$utils.isEmpty(this.formId) && this.$utils.isNotEmpty(this.data)) {
-        const data = JSON.parse(JSON.stringify(this.data))
-        // 重置表单
-        this.dataTemplate = defaultsDeep(this.getDefaultTemplateAttrs(data), defaultForm)
-        if (this.dataTemplate.datasetKey) {
-          this.intDatasets(this.dataTemplate.datasetKey)
-        } else {
-          this.dialogLoading = false
-          this.setDatasets([])
-        }
-        return
-      }
-      getBuildDataById({
-        dataTemplateId: this.formId
-      }).then(response => {
-        const data = response.data
-        // 从后台获取数据
-        this.dataTemplate = defaultsDeep({}, JSON.parse(data), defaultForm)
-        if (this.dataTemplate.datasetKey) {
-          this.intDatasets(this.dataTemplate.datasetKey)
-        } else {
-          this.setDatasets([])
+    computed: {
+        formId () {
+            return this.id
         }
-        this.dialogLoading = false
-      }).catch(() => {
-        this.dialogLoading = false
-      })
     },
-    intDatasets(datasetKey) {
-      const datasets = this.dataTemplate.datasets
-      if (this.$utils.isNotEmpty(datasets)) {
-        this.setDatasets(datasets)
-        this.setUnique(datasets)
-        this.dialogLoading = false
-      } else {
-        buildTree({
-          datasetKey: datasetKey
-        }).then(response => {
-          this.dialogLoading = false
-          const datasets = response.data
-          this.setDatasets(datasets)
-          this.dataTemplate.datasets = datasets
-          this.setUnique(datasets)
-        }).catch((e) => {
-          this.dialogLoading = false
-        })
-      }
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+            },
+            immediate: true
+        }
     },
-    setUnique(datasets) {
-      if (this.$utils.isEmpty(this.dataTemplate.unique)) {
-        if (Array.isArray(datasets)) {
-          // 取第一个字段
-          const fields = datasets.filter((d) => {
-            return d.parentId !== '0'
-          })
-          if (fields && fields.length > 0) {
-            this.dataTemplate.unique = fields[0].name
-          }
-        } else {
-          // TODO:唯一字段
+    methods: {
+        ...mapActions({
+            setDatasets: 'ibps/dataTemplate/setDatasets'
+        }),
+        // 关闭当前窗口
+        closeDialog () {
+            this.$emit('close', false)
+        },
+        handleCallback () {
+            this.$emit('callback')
+        },
+        getDefaultTemplateAttrs (data) {
+            if (data.type === 'valueSource') {
+                data.templates = [
+                    Utils.defaultValueSourcetAttrs(data)
+                ]
+            } else {
+                if (data.showType === 'list') {
+                    data.templates = [
+                        Utils.defaultListAttrs(data)
+                    ]
+                } else if (data.showType === 'tree' || data.composeType === 'treeForm') {
+                    data.templates = [
+                        Utils.defaultTreeAttrs(data)
+                    ]
+                } else if (data.showType === 'compose' && data.composeType !== 'treeForm') {
+                    data.templates = []
+                }
+
+                if (data.type === 'dialog') {
+                    data.dialogs = Utils.defaultDialogAttrs()
+                }
+            }
+            return data
+        },
+        initDataTemplte (data) {
+            const defaultForm = JSON.parse(JSON.stringify(this.defaultForm))
+            this.dataTemplate = defaultsDeep(this.getDefaultTemplateAttrs(data), defaultForm)
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData () {
+            this.dataTemplate = null
+            this.dialogLoading = true
+            const defaultForm = JSON.parse(JSON.stringify(this.defaultForm))
+            if (this.$utils.isEmpty(this.formId) && this.$utils.isNotEmpty(this.data)) {
+                const data = JSON.parse(JSON.stringify(this.data))
+                // 重置表单
+                this.dataTemplate = defaultsDeep(this.getDefaultTemplateAttrs(data), defaultForm)
+                if (this.dataTemplate.datasetKey) {
+                    this.intDatasets(this.dataTemplate.datasetKey)
+                } else {
+                    this.dialogLoading = false
+                    this.setDatasets([])
+                }
+                return
+            }
+            getBuildDataById({
+                dataTemplateId: this.formId
+            }).then(response => {
+                const data = response.data
+                // 从后台获取数据
+                this.dataTemplate = defaultsDeep({}, JSON.parse(data), defaultForm)
+                if (this.dataTemplate.datasetKey) {
+                    this.intDatasets(this.dataTemplate.datasetKey)
+                } else {
+                    this.setDatasets([])
+                }
+                this.dialogLoading = false
+            }).catch(() => {
+                this.dialogLoading = false
+            })
+        },
+        intDatasets (datasetKey) {
+            const datasets = this.dataTemplate.datasets
+            if (this.$utils.isNotEmpty(datasets)) {
+                this.setDatasets(datasets)
+                this.setUnique(datasets)
+                this.dialogLoading = false
+            } else {
+                buildTree({
+                    datasetKey: datasetKey
+                }).then(response => {
+                    this.dialogLoading = false
+                    const datasets = response.data
+                    this.setDatasets(datasets)
+                    this.dataTemplate.datasets = datasets
+                    this.setUnique(datasets)
+                }).catch((e) => {
+                    this.dialogLoading = false
+                })
+            }
+        },
+        setUnique (datasets) {
+            if (this.$utils.isEmpty(this.dataTemplate.unique)) {
+                if (Array.isArray(datasets)) {
+                    // 取第一个字段
+                    const fields = datasets.filter((d) => {
+                        return d.parentId !== '0'
+                    })
+                    if (fields && fields.length > 0) {
+                        this.dataTemplate.unique = fields[0].name
+                    }
+                } else {
+                    // TODO:唯一字段
+                }
+            }
         }
-      }
     }
-  }
 
 }
 </script>
 <style lang="scss" >
-  .templatebuilder-dialog{
-    .el-dialog__header{
-      padding: 0;
-      border-bottom:0;
+.templatebuilder-dialog {
+    .el-dialog__header {
+        padding: 0;
+        border-bottom: 0;
     }
     .el-dialog__body {
-     padding: 0;
+        padding: 0;
     }
-    .is-fullscreen{
-      overflow: hidden;
+    .is-fullscreen {
+        overflow: hidden;
     }
     @media print {
-      .el-dialog__headerbtn {
-        display: none !important;
-      }
-      .hidden-print{
-        padding: 0;
-        margin:  0;
-      }
+        .el-dialog__headerbtn {
+            display: none !important;
+        }
+        .hidden-print {
+            padding: 0;
+            margin: 0;
+        }
     }
-  }
+}
 </style>

src/business/platform/data/templaterender/templates/list.vue

@@ -754,10 +754,11 @@ export default {
          * 加载数据
          */
         loadData (outerKey) {
-            this.loading = true
+            // 取消loading,直接在接口处设置,避免模板加载loading与数据加载loading差异过大
+            // this.loading = true
             if (this.$utils.isEmpty(this.template)) return
             queryDataTable(this.getFormatParams(outerKey)).then((response) => {
-                this.loading = false
+                // this.loading = false
                 ActionUtils.handleListData(this, response.data)
                 this.setSelectRow()
                 if (this.$refs.crud) {
@@ -769,7 +770,7 @@ export default {
                     }, 100)()
                 }
             }).catch(() => {
-                this.loading = false
+                // this.loading = false
             })
         },
         /**