Merge pull request #3955 from dataease/pr@dev_memory_component

Pr@dev memory component

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -372,7 +372,7 @@ export default {
     ])
   },
   mounted() {
-    if (navigator.platform.indexOf('Mac') == -1) {
+    if (navigator.platform.indexOf('Mac') === -1) {
       this.systemOS = 'Other'
     }
     this.initCurFields()

frontend/src/components/canvas/components/editor/SettingMenu.vue

@@ -17,8 +17,7 @@
             v-if="curComponent.type != 'custom-button'"
             icon="el-icon-document-copy"
             @click.native="copy"
-          ><span>{{ $t('panel.copy') }}(<span v-show="systemOS==='Mac'"><i class="icon iconfont icon-command"
-          />+ D</span> <span v-show="systemOS!=='Mac'">Control + D</span>)</span>
+          ><span>{{ $t('panel.copy') }}(<span v-show="systemOS==='Mac'"><i class="icon iconfont icon-command" />+ D</span> <span v-show="systemOS!=='Mac'">Control + D</span>)</span>
           </el-dropdown-item>
           <el-dropdown-item
             icon="el-icon-delete"
@@ -210,7 +209,7 @@ export default {
     ])
   },
   mounted() {
-    if (navigator.platform.indexOf('Mac') == -1) {
+    if (navigator.platform.indexOf('Mac') === -1) {
       this.systemOS = 'Other'
     }
   },

frontend/src/components/deCustomCm/DeTextarea.vue

@@ -1,12 +1,12 @@
 <template>
   <el-input
-    v-count="value"
+    v-count="{value, maxlength}"
     :placeholder="$t('fu.search_bar.please_input')"
     show-word-limit
     :disabled="disabled"
     :value="value"
     type="textarea"
-    maxlength="200"
+    :maxlength="maxlength"
     @input="handleChange"
   />
 </template>
@@ -16,14 +16,14 @@ export default {
   directives: {
     count: {
       update: function(el, binding) {
-        const lg = binding.value?.length || 0
+        const lg = binding.value.value?.length || 0
         const count = el.querySelector('.el-input__count')
         if (!count) return
         if (!lg) {
           if (count?.classList?.contains('no-zore')) {
             count.classList.remove('no-zore')
           }
-          count.innerHTML = '0/200'
+          count.innerHTML = `0/${binding.value.maxlength || 200}`
           return
         }
         if (el.querySelector('.no-zore')) {
@@ -34,7 +34,7 @@ export default {
         const num = document.createElement('span')
         const total = document.createElement('span')
         num.style.color = '#1F2329'
-        total.innerHTML = '/200'
+        total.innerHTML = `/${binding.value.maxlength || 200}`
         num.innerHTML = lg
         if (!newCount) return
         newCount.classList.add('el-input__count', 'no-zore')
@@ -46,7 +46,11 @@ export default {
   },
   props: {
     disabled: Boolean,
-    value: String
+    value: String,
+    maxlength: {
+      type: Number,
+      default: 200
+    }
   },
   methods: {
     handleChange(val) {

frontend/src/utils/request.js

@@ -108,13 +108,16 @@ service.interceptors.response.use(response => {
   const headers = error.response && error.response.headers || error.response || config.headers
   config.loading && tryHideLoading(store.getters.currentPath)
 
-  let msg
+  let msg = ''
   if (error.response) {
     checkAuth(error.response)
     msg = error.response.data.message || error.response.data
   } else {
     msg = error.message
   }
+  if (msg.length > 600) {
+    msg = msg.slice(0, 600)
+  }
   !config.hideMsg && (!headers['authentication-status']) && $error(msg)
   return Promise.reject(config.url === '/dataset/table/sqlPreview' ? msg : error)
 })

frontend/src/views/chart/components/ChartTitleUpdate.vue

@@ -380,8 +380,8 @@ export default {
         if (!viewSave) return
         viewEditSave(this.panelInfo.id, viewSave).then(() => {
           this.chart.title = this.chartTitleUpdate
-          bus.$emit('aside-set-title', this.chart.title)
         })
+        bus.$emit('title-name', this.chart.title, chartView.id)
         bus.$emit('view-in-cache', {
           type: 'styleChange',
           viewId: chartView.id,

frontend/src/views/chart/view/ChartEdit.vue

@@ -1934,7 +1934,8 @@ export default {
   },
 
   methods: {
-    setTitle(title) {
+    setTitle(title, id) {
+      if (this.view.id !== id) return
       this.view.customStyle.text = { ...this.view.customStyle.text, title }
       this.view.title = title
       this.view.name = title

frontend/src/views/dataset/data/FieldEdit.vue

@@ -861,7 +861,7 @@ export default {
         }
       }
       if (item.dateFormatType === 'custom' && !item.dateFormat) {
-        return;
+        return
       }
       post('/dataset/field/save', item)
         .then((response) => {

frontend/src/views/panel/appTemplateMarket/log/index.vue

@@ -1,8 +1,8 @@
 <template>
   <el-row
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
     style="text-align: left"
     class="de-search-table"
-    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
   >
     <el-row class="top-operate">
       <el-col :span="12">
@@ -180,11 +180,11 @@
 
     <!--导入templatedialog-->
     <el-dialog
+      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
       :title="$t('app_template.log_delete_tips')"
       :visible.sync="deleteConfirmDialog"
       :show-close="true"
       width="420px"
-      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
     >
       <el-row>
         <el-checkbox

frontend/src/views/panel/edit/index.vue

@@ -820,7 +820,7 @@ export default {
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
     bus.$off('delete-condition', this.deleteCustomComponent)
     bus.$off('current-component-change', this.asideRefresh)
-    bus.$off('aside-set-title', this.asideSetTitle)
+    bus.$off('title-name', this.asideSetTitle)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
@@ -851,16 +851,16 @@ export default {
       bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
       bus.$on('delete-condition', this.deleteCustomComponent)
       bus.$on('current-component-change', this.asideRefresh)
-      bus.$on('aside-set-title', this.asideSetTitle)
+      bus.$on('title-name', this.asideSetTitle)
     },
     asideRefresh() {
       if (this.$refs['chartEditRef']) {
         this.$refs['chartEditRef'].resetChartData()
       }
     },
-    asideSetTitle(val) {
+    asideSetTitle(val, id) {
       if (this.$refs['chartEditRef']) {
-        this.$refs['chartEditRef'].setTitle(val)
+        this.$refs['chartEditRef'].setTitle(val, id)
       }
     },
     deleteCustomComponent(param) {

frontend/src/views/system/datasource/DsForm.vue

@@ -182,6 +182,7 @@
             >
               <deTextarea
                 v-model="form.desc"
+                :maxlength="50"
                 class="w100-textarea"
               />
             </el-form-item>

frontend/src/views/system/datasource/DsTree.vue

@@ -255,15 +255,15 @@
         v-dialogDrag
         :title="$t('datasource.create')"
         :visible.sync="dsTypeRelate"
-        width="1200px"
+        width="1005px"
         class="de-dialog-form none-scroll-bar"
         append-to-body
       >
-        <el-tabs v-model="tabActive">
-          <el-tab-pane
-            :label="$t('datasource.all')"
-            name="all"
-          />
+        <el-tabs
+          v-model="tabActive"
+          class="de-tabs"
+          @tab-click="handleClick"
+        >
           <el-tab-pane
             :label="$t('datasource.relational_database')"
             name="RDBMS"
@@ -278,11 +278,21 @@
           />
         </el-tabs>
         <div class="db-container">
+          <template v-for="(list, idx) in databaseList">
             <div
-            v-for="(db, index) in databaseList"
+              :key="nameMap[idx]"
+              :class="typeList[idx]"
+              class="name"
+            >{{ $t(`datasource.${nameMap[idx]}`) }}</div>
+            <div
+              :key="nameMap[idx] + 'cont'"
+              class="item-container"
+            >
+              <div
+                v-for="(db, index) in list"
                 :key="db.type"
                 class="db-card"
-            :class="[{ marLeft: index % 4 === 0 }]"
+                :class="[{ marLeft: index % 5 === 0 }]"
                 @click="addDb(db)"
               >
                 <img
@@ -297,6 +307,8 @@
                 <p class="db-name">{{ db.name }}</p>
               </div>
             </div>
+          </template>
+        </div>
       </el-dialog>
     </el-col>
   </el-col>
@@ -329,11 +341,14 @@ export default {
   },
   data() {
     return {
-      tabActive: 'all',
+      tabActive: 'RDBMS',
+      databaseList: [],
       currentNodeId: '',
       dsTypeRelate: false,
       expandedArray: [],
       tData: [],
+      nameMap: ['relational_database', 'non_relational_database', 'other'],
+      typeList: ['RDBMS', 'NORDBMS', 'OTHER'],
       treeLoading: false,
       dsTypes: [],
       dsTypesForDriver: [],
@@ -386,15 +401,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['user']),
-    databaseList() {
-      if (this.tabActive === 'all') {
-        return this.dsTypes
-      }
-      return this.dsTypes.filter(
-        (ele) => ele.databaseClassification === this.tabActive
-      )
-    }
+    ...mapGetters(['user'])
   },
   watch: {
     key(val) {
@@ -406,6 +413,9 @@ export default {
     this.datasourceTypes()
   },
   methods: {
+    handleClick() {
+      document.querySelector(`.${this.tabActive}`).scrollIntoView()
+    },
     createDriveOrDs() {
       if (this.showView === 'Driver') {
         this.addDriver()
@@ -478,11 +488,17 @@ export default {
     datasourceTypes() {
       listDatasourceType().then((res) => {
         this.dsTypes = res.data
+        const databaseList = [[], [], []]
         this.dsTypes.forEach((item) => {
+          const index = this.typeList.findIndex(ele => ele === item.databaseClassification)
+          if (index !== -1) {
+            databaseList[index].push(item)
+          }
           if (item.isJdbc) {
             this.dsTypesForDriver.push(item)
           }
         })
+        this.databaseList = databaseList
       })
     },
     refreshType(datasource) {
@@ -802,24 +818,38 @@ export default {
   width: 100%;
   max-height: 65vh;
   overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: -3px;
+  margin-top: 3px;
   position: relative;
   z-index: 10;
+
+  .name {
+    margin: 16px 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--deTextPrimary, #1F2329);
+  }
+
+  .item-container {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
   .db-card {
-    height: 193px;
-    width: 270px;
+    height: 141px;
+    width: 177.6px;
     display: flex;
     flex-wrap: wrap;
     background: #ffffff;
     border: 1px solid #dee0e3;
     border-radius: 4px;
-    margin-bottom: 24px;
-    margin-left: 22px;
+    margin-bottom: 16px;
+    margin-left: 16px;
     img {
       width: 100%;
-      height: 154.58px;
+      height: 102px;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
     }