CN-906 fix: 上传loading、保存loading

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -97,6 +97,7 @@
           border: none;
         }
         .el-collapse-item__content {
+          position: relative;
           padding-bottom: 20px;
         }
 

src/components/table/setting/KnowledgeBaseTable.vue

@@ -52,9 +52,9 @@
             <span>-</span>
           </template>
         </template>
-        <template v-else-if="item.prop === 'cbyObj' || item.prop === 'ubyObj'">
+        <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
           <template v-if="scope.row[item.prop]">
-            {{scope.row[item.prop].name || '-'}}
+            {{scope.row[item.prop].username || '-'}}
           </template>
           <template v-else>
             <span>-</span>
@@ -111,8 +111,7 @@ export default {
         }, {
           label: this.$t('overall.type'),
           prop: 'tagType',
-          show: true,
+          show: true
-          sortable: 'custom'
         }, {
           label: this.$t('overall.remark'),
           prop: 'remark',
@@ -120,18 +119,18 @@ export default {
         },
         {
           label: this.$t('overall.createdBy'),
-          prop: 'cbyObj',
+          prop: 'cuser',
           show: true
         },
         {
-          label: this.$t('overall.createTime'),
+          label: this.$t('config.user.createTime'),
           prop: 'ctime',
           show: false,
           sortable: 'custom'
         },
         {
           label: this.$t('overall.updatedBy'),
-          prop: 'ubyObj',
+          prop: 'uuser',
           show: false
         },
         {

src/mixins/table.js

@@ -28,7 +28,7 @@ export default {
       if (n) {
         setTimeout(() => {
           this.$refs.dataTable.doLayout()
-        }, 100)
+        }, 200)
       }
     }
   },

src/views/setting/KnowledgeBase.vue

@@ -42,7 +42,7 @@ import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import KnowledgeBaseTable from '@/components/table/setting/KnowledgeBaseTable'
 import { api } from '@/utils/api'
-import {del, get} from '@/utils/http'
+import { del, get } from '@/utils/http'
 
 export default {
   name: 'knowledgeBase',
@@ -55,7 +55,6 @@ export default {
     return {
       url: api.knowledgeBase,
       tableId: 'knowledgeBaseTable' // 需要分页的table的id，用于记录每页数量
-
     }
   },
   methods: {
@@ -73,7 +72,8 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        del(this.url + '?ids=' + row.knowledgeId).then(response => {
+        this.tools.loading = true
+        del(this.url + '?ids=' + row.id).then(response => {
           if (response.code === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -81,6 +81,8 @@ export default {
           } else {
             this.$message.error(response.msg)
           }
+        }).finally(() => {
+          this.tools.loading = false
         })
       })
     },

src/views/setting/KnowledgeBaseForm.vue

@@ -33,6 +33,7 @@
         </el-collapse-item>
         <el-collapse-item name="1" class="upload-collapse">
           <template #title><div class="form-sub-title">{{$t('overall.importFromFile')}}</div></template>
+          <loading :loading="uploadLoading"></loading>
           <el-upload :action="`${baseUrl}knowledge/import`"
                      :headers="uploadHeaders"
                      :data="uploadParams"
@@ -41,6 +42,8 @@
                      :on-change="fileChange"
                      :on-success="uploadSuccess"
                      :on-remove="onRemove"
+                     :before-upload="beforeUpload"
+                     :on-progress="onUpload"
                      :class="uploadErrorTip ? 'el-upload--error' : ''"
                      drag
                      accept=".csv"
@@ -108,10 +111,11 @@
       </el-collapse>
     </div>
     <div class="edit-knowledge-base__footer">
-      <button class="footer__btn footer__btn--light">
+      <button class="footer__btn footer__btn--light" @click="cancel">
-      <span>{{$t('overall.cancel')}}</span>
+        <span>{{$t('overall.cancel')}}</span>
-    </button>
+      </button>
-      <button :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <loading size="small" :loading="blockOperation.save"></loading>
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -121,17 +125,20 @@
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import _ from 'lodash'
-import { knowledgeBaseType, storageKey } from '@/utils/constants'
+import { knowledgeBaseType, storageKey, unitTypes } from '@/utils/constants'
 import i18n from '@/i18n'
 import Pagination from '@/components/common/Pagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import axios from 'axios'
 import { api } from '@/utils/api'
+import unitConvert from '@/utils/unit-convert'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'CreateKnowledgeBase',
   components: {
     Pagination,
-    ChartNoData
+    ChartNoData,
+    Loading
   },
   methods: {
     fileChange (files, fileList) {
@@ -155,6 +162,9 @@ export default {
         originalImportedData.sort((a, b) => b.status - a.status)
         this.importedData = originalImportedData
         this.handleShowImportedData()
+      } else {
+        this.uploadLoading = false
+        this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
       }
     },
     onRemove (files, fileList) {
@@ -168,10 +178,25 @@ export default {
         failed: null
       }
     },
+    beforeUpload (file) {
+      // 判断文件大小
+      if (file.size > this.uploadFileSizeLimit) {
+        this.$message.error(this.$t('validate.fileSizeLimit', { size: unitConvert(this.uploadFileSizeLimit, unitTypes.byte).join('') }))
+        this.fileList = []
+        return false
+      }
+      return true
+    },
+    onUpload (event, file) {
+      this.uploadLoading = true
+    },
     handleShowImportedData () {
       const startIndex = (this.importedPageObj.pageNo - 1) * this.importedPageObj.pageSize
       const endIndex = this.importedPageObj.pageNo * this.importedPageObj.pageSize
       this.showImportedData = this.importedData.slice(startIndex, endIndex)
+      this.$nextTick(() => {
+        this.uploadLoading = false
+      })
     },
     pageNo (val) {
       this.importedPageObj.pageNo = val
@@ -201,6 +226,9 @@ export default {
         this.previewErrorTip = ''
       }
     },
+    cancel () {
+      history.back()
+    },
     save () {
       if (this.blockOperation.save) { return }
       this.blockOperation.save = true
@@ -226,44 +254,41 @@ export default {
 
       // 校验通过后组织数据、请求接口
       if (formValid && !this.uploadErrorTip && !this.previewErrorTip) {
-        try {
+        const postData = {
-          const postData = {
+          tagName: this.editObject.tagName,
-            tagName: this.editObject.tagName,
+          tagType: this.editObject.tagType,
-            tagType: this.editObject.tagType,
+          data: []
-            data: []
-          }
-          this.importedData.forEach(d => {
-            const findData = postData.data.find(d2 => d2.tagValue === d.tagValue)
-            if (findData) {
-              findData.itemList.add(d.tagItem)
-            } else {
-              const set = new Set()
-              set.add(d.tagItem)
-              postData.data.push({
-                tagValue: d.tagValue,
-                itemList: set
-              })
-            }
-          })
-          postData.data.forEach(d => {
-            d.itemList = [...d.itemList]
-          })
-          axios.post(this.url, postData).then(response => {
-            if (response.data.code === 200) {
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$router.push({
-                path: '/knowledgeBase',
-                t: +new Date()
-              })
-            } else {
-              this.$message.error(response.data.message)
-            }
-          }).finally(() => {
-            this.blockOperation.save = false
-          })
-        } finally {
-          this.blockOperation.save = false
         }
+        this.importedData.forEach(d => {
+          const findData = postData.data.find(d2 => d2.tagValue === d.tagValue)
+          if (findData) {
+            findData.itemList.add(d.tagItem)
+          } else {
+            const set = new Set()
+            set.add(d.tagItem)
+            postData.data.push({
+              tagValue: d.tagValue,
+              itemList: set
+            })
+          }
+        })
+        postData.data.forEach(d => {
+          d.itemList = [...d.itemList]
+        })
+        postData.remark = this.editObject.remark
+        axios.post(this.url, postData).then(response => {
+          if (response.data.code === 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.$router.push({
+              path: '/knowledgeBase',
+              t: +new Date()
+            })
+          } else {
+            this.$message.error(response.data.message)
+          }
+        }).finally(() => {
+          this.blockOperation.save = false
+        })
       } else {
         this.blockOperation.save = false
       }
@@ -393,7 +418,9 @@ export default {
       originalImportInfo,
       uploadErrorTip,
       previewErrorTip,
-      typeSelectDisable: ref(false)
+      typeSelectDisable: ref(false),
+      uploadFileSizeLimit: 100 * 1024 * 1024,
+      uploadLoading: ref(false)
     }
   }
 }