Merge branch 'ch/eta_forum_3.0' of eta_forum/eta_forum_front into debug

src/api/etaChart/etaChart.js

@@ -22,7 +22,9 @@ export default{
     // 指标溯源
     getEdbSource:params=>{
         return get('/edb/trace',params)
-    }
-
-
+    },
+    // 指标溯源
+    getDescription:params=>{
+        return get('/chart/description',params)
+    },
 }

src/views/etaChart/components/ChartWrap.vue

@@ -19,11 +19,12 @@ watch(
   () => props.chartInfoId,
   (n) => {
     tableData.value = []
-    intro.value = ''
+    intro.value = []
     chartInfo.value = null
     calendarType.value = ''
     if (!n) return
     getChartDetail()
+    getDescriptionList()
   }
 )
 
@@ -58,8 +59,25 @@ const columns = [
     align: 'center'
   }
 ]
+const columnsDescription = [
+  {
+    colKey: 'Description',
+    title: '逻辑描述',
+    align: 'center'
+  },
+  {
+    colKey: 'SysUserRealName',
+    title: '创建人',
+    align: 'center'
+  },
+  {
+    colKey: 'CreateTime',
+    title: '创建时间',
+    align: 'center'
+  },
+]
 const tableData = ref([])
-const intro = ref('')
+const intro = ref([])
 const chartInfo = ref(null)
 const calendarType = ref('')
 const loading = ref(false)
@@ -73,7 +91,6 @@ async function getChartDetail() {
   loading.value = false
   if (res.Ret === 200) {
     tableData.value = res.Data.EdbInfoList || []
-    intro.value = res.Data.ChartInfo.Description
     chartInfo.value = res.Data.ChartInfo
     calendarType.value = res.Data.ChartInfo.Calendar
     WaterMark.value=res.Data.WaterMark
@@ -98,7 +115,22 @@ async function getChartDetail() {
     })
   }
 }
+
+async function getDescriptionList() {
+  loading.value = true
+  const res = await apiETAChart.getDescription({
+    ChartInfoId: props.chartInfoId,
+  })
+  loading.value = false
+  if (res.Ret === 200) {
+    intro.value = res.Data.List || ''
+    console.log(res.Data.List);
+    
+  }
+}
+
 getChartDetail()
+getDescriptionList()
 
 
 // 跳转指标溯源
@@ -177,9 +209,24 @@ function handleGoEdbSource(data) {
         </template>
       </t-table>
     </div>
-    <div class="instructions-wrap" v-if="intro">
-      <p>逻辑简述:</p>
-      <p>{{ intro }}</p>
+    <div class="instructions-wrap" v-if="intro && intro.length">
+      <h3>逻辑描述:</h3>
+      <t-table
+        row-key="index"
+        :data="intro"
+        :columns="columnsDescription"
+        bordered
+        hover
+        max-height="300"
+        cell-empty-content="-"
+        resizable
+      >
+        <template #Description="{ row }">
+            <t-tooltip :content="row.Description" theme="light">
+              <span class="text_description">{{ row.Description }}</span>
+            </t-tooltip>
+        </template>
+      </t-table>
     </div>
   </div>
 </template>
@@ -218,6 +265,13 @@ function handleGoEdbSource(data) {
   .instructions-wrap {
     margin-top: 20px;
     line-height: 1.7;
+    .text_description {
+      width: 100%;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 </style>

src/views/etaChart/components/ClassifyWrap.vue

@@ -17,12 +17,15 @@ const expandedclassify = ref([])
 const searchVal = ref('')
 const searchOpts = ref([])
 const searchLoading = ref(false)
-let searchPage = 1
-const searchPageSize = 20
+let searchPage = ref(1)
+const searchPageSize = 15
 let finished = false
+const totals = ref(0)
+const showSearchResults = ref(false)
 function handleSearchChart(keyword) {
+  if (keyword === '' || keyword === null) return
   finished = false
-  searchPage = 1
+  searchPage.value = 1
   searchOpts.value = []
   handleGetSearchChartList(keyword)
 }
@@ -31,7 +34,7 @@ async function handleGetSearchChartList(keyword) {
   showSuggestions.value = true
   const res = await apiETAChart.chartSearch({
     PageSize: searchPageSize,
-    CurrentIndex: searchPage,
+    CurrentIndex: searchPage.value,
     SysUserIds: userVal.value?.join(','),
     Keyword: keyword
   })
@@ -40,6 +43,10 @@ async function handleGetSearchChartList(keyword) {
     const arr = res.Data.List || []
     searchOpts.value = [...searchOpts.value, ...arr]
     finished = res.Data.Paging.IsEnd
+    totals.value = res.Data.Paging.Totals
+    if (searchOpts.value.length === 0 && searchPage.value === 1) {
+      showSuggestions.value = false
+    }
   }
 }
 async function handleLoadMoreChart() {
@@ -132,13 +139,34 @@ const showSuggestions = ref(false)
 
 
 const handleBlur = (text) => {
+  showSuggestions.value = false
   if(!text){
     clearMenu()
   }
 }
 const clearMenu = () => {
   searchOpts.value = []
-  showSuggestions.value = false
+  showSearchResults.value = false
+}
+const handleEnterInput = () => {
+  showSearchResults.value = true
+}
+const handleFocusInput = () => {
+  if(!searchVal.value) return
+  handleSearchChart(searchVal.value)
+}
+const clearInput = () => {
+  searchVal.value = ''
+  showSearchResults.value = false
+  handleSearchChart(searchVal.value)
+}
+const searchLoad = (e) => {
+  const {scrollTop, clientHeight, scrollHeight} = e.target
+  if (scrollTop + clientHeight === scrollHeight){
+    if(finished) return
+    searchPage.value++
+    handleGetSearchChartList()
+  }
 }
 
 
@@ -157,6 +185,8 @@ const clearMenu = () => {
         placeholder="请输入图表名称"
         @change="handleSearchChart"
         @blur="handleBlur"
+        @focus="handleFocusInput"
+        @enter="handleEnterInput"
       >
       </t-input>
       <template #content>
@@ -172,8 +202,9 @@ const clearMenu = () => {
     </t-popup>
 
 
-    <div class="classify-list-box">
+    <div class="classify-list-box" ref="scrollView" @scroll="searchLoad">
       <t-tree
+        v-if="!showSearchResults"
         :actived="classifyActived"
         :data="classifyList"
         v-model:expanded="expandedclassify"
@@ -197,11 +228,40 @@ const clearMenu = () => {
           />
         </template>
       </t-tree>
+      <template v-else>
+        <div class="search-result flex-align">
+            <div>共<span class="total-text">{{ totals }}</span>条搜索结果</div>
+            <div @click="clearInput" class="clear-result flex-align">
+                清除内容
+                <img src="@/assets/imgs/clear.png" alt="">
+            </div>
+        </div>
+        <template v-for="(item, index) in searchOpts" :key="index">
+          <div class="list-item" @click="handleSelectChart(item)">
+            <div v-html="item.ChartName"></div>
+          </div>
+        </template>  
+      </template>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+
+// 美化滚动条
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  width: 1px;
+  background: rgba(#101F1C, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
 .classify-wrap {
   width: 300px;
   flex-shrink: 0;
@@ -215,6 +275,38 @@ const clearMenu = () => {
     padding-top: 10px;
     height: calc(100vh - 260px);
     overflow-y: auto;
+    .search-result {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .clear-result {
+        cursor: pointer;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-left: 5px;
+        }
+      }
+      .total-text {
+        color: #333333;
+      }
+    }
+    .list-item {
+      width: 244px;
+      cursor:pointer;
+      margin: 4px;
+      padding: 5px 5px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      &:hover {
+        background-color: #ECF2FE; // 背景颜色变为浅灰色
+      }
+    }
   }
 }
 .suggestions-item {
@@ -229,4 +321,8 @@ const clearMenu = () => {
     background-color: #ECF2FE; // 背景颜色变为浅灰色
   }
 }
+.flex-align {
+  display: flex;
+  align-items: center;
+}
 </style>