Merge pull request #4319 from dataease/pr@dev_memory_component

feat: 数据集新建页面数据源排序   数据集详情展示UI调整 数据集展示的表与字段支持筛选框搜索

frontend/package.json

@@ -51,6 +51,7 @@
     "jquery": "^3.1.1",
     "js-base64": "^3.7.2",
     "js-cookie": "2.2.0",
+    "js-pinyin": "^0.1.9",
     "jsencrypt": "^3.0.0-rc.1",
     "jspdf": "^2.3.1",
     "jszip": "^3.10.1",

frontend/src/components/dataease/DeOutWidget.vue

@@ -182,8 +182,10 @@ export default {
         textAlign: horizontal
       }
       this.outsideStyle = {
-        flexWrap: 'wrap'
+        flexDirection: 'column'
       }
+
+      
       if (vertical !== 'top' && this.element.component !== 'de-select-grid') {
         this.titleStyle = null
         this.outsideStyle = {
@@ -192,6 +194,10 @@ export default {
         }
       }
 
+      if (this.element.component === 'de-select-grid') {
+        this.$set(this.outsideStyle, 'flexDirection', 'column')
+      }
+
       if (vertical !== 'top' && this.element.component === 'de-number-range') {
         if (!this.titleStyle) {
           this.titleStyle = {}

frontend/src/views/dataset/add/AddApi.vue

@@ -218,6 +218,7 @@ import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
 import cancelMix from './cancelMix'
 import msgCfm from '@/components/msgCfm/index'
+import { pySort } from './util'
 
 export default {
   name: 'AddApi',
@@ -398,7 +399,7 @@ export default {
     },
     initDataSource() {
       listApiDatasource().then((response) => {
-        this.options = response.data
+        this.options = pySort(response.data)
       })
     },
     kettleState() {

frontend/src/views/dataset/add/AddDB.vue

@@ -225,6 +225,8 @@ import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { engineMode, dbPreview } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
+
+import { pySort } from './util'
 export default {
   name: 'AddDB',
   mixins: [msgCfm, cancelMix],
@@ -415,7 +417,7 @@ export default {
     },
     initDataSource() {
       listDatasource().then((response) => {
-        this.options = response.data.filter((item) => item.type !== 'api')
+        this.options = pySort(response.data.filter((item) => item.type !== 'api'))
       })
     },
     kettleState() {

frontend/src/views/dataset/add/AddSQL.vue

@@ -109,6 +109,7 @@
               @click="
                 showTable = false
                 dataTable = ''
+                ;keywords = ''
               "
             ><i class="el-icon-arrow-left" /> {{ $t('chart.back') }}</span>
             <span v-else>{{ $t('deDataset.data_reference') }}</span>
@@ -147,13 +148,15 @@
         >{{
           $t('deDataset.to_start_using')
         }}</span>
-        <div
+        <template v-else>
-          v-else-if="dataSource && !dataTable"
+          <el-input :placeholder="$t('fu.search_bar.please_input')" style="padding: 5px" size="small" v-model="keywords"></el-input>
+          <div
+          v-if="dataSource && !dataTable"
           v-loading="tableLoading"
           class="item-list"
         >
           <div
-            v-for="ele in tableData"
+            v-for="ele in tableDataCopy"
             :key="ele.name"
             class="table-or-field"
             @click="typeSwitch(ele)"
@@ -173,10 +176,11 @@
         </div>
         <div
           v-else-if="dataSource && dataTable"
+          v-loading="tableLoading"
           class="item-list"
         >
           <div
-            v-for="ele in fieldData"
+            v-for="ele in fieldDataCopy"
             :key="ele.fieldName"
             class="table-or-field field"
           >
@@ -193,6 +197,8 @@
             />
           </div>
         </div>
+        </template>
+        
       </div>
       <div class="sql-table">
         <div
@@ -559,6 +565,7 @@ import 'codemirror/addon/hint/show-hint'
 import { engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
+import { pySort } from './util'
 import _ from 'lodash'
 import GridTable from '@/components/gridTable/index.vue'
 export default {
@@ -579,6 +586,7 @@ export default {
         pageSize: 10,
         total: 0
       },
+      keywords: '',
       sqlData: [],
       dataSource: '',
       loading: false,
@@ -605,6 +613,8 @@ export default {
           completeSingle: false // 当匹配只有一项的时候是否自动补全
         }
       },
+      tableDataCopy: [],
+      fieldDataCopy: [],
       errImg: require('@/assets/error.png'),
       initImg: require('@/assets/None.png'),
       sqlHeight: 248,
@@ -685,6 +695,21 @@ export default {
       handler: function() {
         this.calHeight()
       }
+    },
+    keywords(val) {
+      if (!val) {
+        this.tableDataCopy = [...this.tableData]
+        this.fieldDataCopy = [...this.fieldData]
+        return
+      }
+
+      if (this.dataSource && !this.dataTable) {
+        this.tableDataCopy = this.tableData.filter(ele => ele.name.includes(val))
+      }
+
+      if (this.dataSource && this.dataTable) {
+        this.fieldDataCopy = this.fieldData.filter(ele => ele.fieldName.includes(val))
+      }
     }
   },
   beforeDestroy() {
@@ -729,16 +754,22 @@ export default {
       this.listSqlLog()
     },
     getField(name) {
+      this.tableLoading = true
       post('/dataset/table/getFields', {
         dataSourceId: this.dataSource,
         info: JSON.stringify({ table: name })
       }).then((res) => {
         this.fieldData = res.data
+        this.fieldDataCopy = [...this.fieldData]
       })
+      .finally(() => {
+          this.tableLoading = false
+        })
     },
     typeSwitch({ name }) {
       this.showTable = true
       this.dataTable = name
+      this.keywords = ''
       this.getField(name)
     },
     mousedownDrag() {
@@ -787,6 +818,7 @@ export default {
       post('/datasource/getTables/' + this.dataSource, {})
         .then((response) => {
           this.tableData = response.data
+          this.tableDataCopy = [...this.tableData]
         })
         .finally(() => {
           this.tableLoading = false
@@ -799,7 +831,7 @@ export default {
     }, 200),
     initDataSource() {
       return listDatasource().then((response) => {
-        this.options = response.data.filter((item) => item.type !== 'api')
+        this.options = pySort(response.data.filter((item) => item.type !== 'api'))
       })
     },
 
@@ -1119,7 +1151,7 @@ export default {
 
       .item-list {
         padding: 16px 8px;
-        height: calc(100vh - 200px);
+        height: calc(100vh - 242px);
         overflow: auto;
         .table-or-field {
           height: 40px;

frontend/src/views/dataset/add/util.js

@@ -0,0 +1,12 @@
+import pyjs from 'js-pinyin'
+
+export function zh2py(str) {
+    return pyjs.getFullChars(str).toLowerCase().charCodeAt()
+}
+
+export function pySort(arr = []) {
+    arr.sort((a, b) => {
+        return zh2py(a.name[0]) - zh2py(b.name[0])
+    })
+    return arr
+}

frontend/src/views/dataset/common/DatasetDetail.vue

@@ -263,7 +263,7 @@ export default {
     .info-item {
       font-family: PingFang SC;
       font-weight: 400;
-      margin: 6px 0;
+      margin: 6px 0 12px 0;
     }
     .info-title {
       margin: 0!important;

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

@@ -662,7 +662,7 @@ export default {
     this.$emit('setParams', { ...this.params })
     this.$nextTick(() => {
       this.disabled = appMarketCheck ? !this.appMarketEdit : (Boolean(id) && showModel === 'show' && !this.canEdit)
-      if (this.configFromTabs.editor === 'editor') {
+      if (this.configFromTabs?.editor === 'editor') {
         this.$emit('editeTodisable', true)
       }
     })
@@ -1113,6 +1113,7 @@ export default {
           }
         })
       }
+      this.$refs.dsForm.validate()
       if (!status) {
         return
       }