feat:Terminology supports data source filtering. (#498)

frontend/src/api/professional.ts

@@ -2,10 +2,7 @@ import { request } from '@/utils/request'
 
 export const professionalApi = {
   getList: (pageNum: any, pageSize: any, params: any) =>
-    request.get(`/system/terminology/page/${pageNum}/${pageSize}`, {
-      params,
-    }),
-
+    request.get(`/system/terminology/page/${pageNum}/${pageSize}${params}`),
   updateEmbedded: (data: any) => request.put('/system/terminology', data),
   deleteEmbedded: (params: any) => request.delete('/system/terminology', { data: params }),
   getOne: (id: any) => request.get(`/system/terminology/${id}`),

frontend/src/views/system/professional/index.vue

@@ -15,6 +15,9 @@ import { cloneDeep } from 'lodash-es'
 import { genFileId, type UploadInstance, type UploadProps, type UploadRawFile } from 'element-plus'
 import { useCache } from '@/utils/useCache.ts'
 import { settingsApi } from '@/api/setting.ts'
+import { convertFilterText, FilterText } from '@/components/filter-text'
+import { DrawerMain } from '@/components/drawer-main'
+import iconFilter from '@/assets/svg/icon-filter_outlined.svg'
 
 interface Form {
   id?: string | null
@@ -33,11 +36,15 @@ const allDsList = ref<any[]>([])
 const keywords = ref('')
 const oldKeywords = ref('')
 const searchLoading = ref(false)
+const drawerMainRef = ref()
 
 const selectable = () => {
   return true
 }
 onMounted(() => {
+  datasourceApi.list().then((res) => {
+    filterOption.value[0].option = [...res]
+  })
   search()
 })
 const dialogFormVisible = ref<boolean>(false)
@@ -51,6 +58,11 @@ const pageInfo = reactive({
   total: 0,
 })
 
+const state = reactive<any>({
+  conditions: [],
+  filterTexts: [],
+})
+
 const dialogTitle = ref('')
 const updateLoading = ref(false)
 const defaultForm = {
@@ -288,15 +300,29 @@ const handleToggleRowSelection = (check: boolean = true) => {
   isIndeterminate.value = !(i === 0 || i === arr.length)
 }
 
+const configParams = () => {
+  let str = ''
+  if (keywords.value) {
+    str += `word=${keywords.value}`
+  }
+
+  state.conditions.forEach((ele: any) => {
+    ele.value.forEach((itx: any) => {
+      str += str ? `&${ele.field}=${itx}` : `${ele.field}=${itx}`
+    })
+  })
+
+  if (str.length) {
+    str = `?${str}`
+  }
+  return str
+}
+
 const search = () => {
   searchLoading.value = true
   oldKeywords.value = keywords.value
   professionalApi
-    .getList(
-      pageInfo.currentPage,
-      pageInfo.pageSize,
-      keywords.value ? { word: keywords.value } : {}
-    )
+    .getList(pageInfo.currentPage, pageInfo.pageSize, configParams())
     .then((res) => {
       toggleRowLoading.value = true
       fieldList.value = res.data
@@ -426,6 +452,49 @@ const deleteHandlerItem = (idx: number) => {
   pageForm.value.other_words = pageForm.value.other_words!.filter((_, index) => index !== idx)
 }
 
+const filterOption = ref<any[]>([
+  {
+    type: 'select',
+    option: [],
+    field: 'dslist',
+    title: t('ds.title'),
+    operate: 'in',
+    property: { placeholder: t('common.empty') + t('ds.title') },
+  },
+])
+
+const fillFilterText = () => {
+  const textArray = state.conditions?.length
+    ? convertFilterText(state.conditions, filterOption.value)
+    : []
+  state.filterTexts = [...textArray]
+  Object.assign(state.filterTexts, textArray)
+}
+const searchCondition = (conditions: any) => {
+  state.conditions = conditions
+  fillFilterText()
+  search()
+  drawerMainClose()
+}
+
+const clearFilter = (params?: number) => {
+  let index = params ? params : 0
+  if (isNaN(index)) {
+    state.filterTexts = []
+  } else {
+    state.filterTexts.splice(index, 1)
+  }
+  drawerMainRef.value.clearFilter(index)
+}
+
+const drawerMainOpen = async () => {
+  drawerMainRef.value.init()
+}
+
+const drawerMainClose = () => {
+  drawerMainRef.value.close()
+}
+
 const changeStatus = (id: any, val: any) => {
   professionalApi
     .enable(id, val + '')
@@ -485,6 +554,12 @@ const changeStatus = (id: any, val: any) => {
             {{ $t('user.batch_import') }}
           </el-button>
         </el-upload>
+        <el-button secondary @click="drawerMainOpen">
+          <template #icon>
+            <iconFilter></iconFilter>
+          </template>
+          {{ $t('user.filter') }}
+        </el-button>
         <el-button type="primary" @click="editHandler(null)">
           <template #icon>
             <icon_add_outlined></icon_add_outlined>
@@ -498,6 +573,11 @@ const changeStatus = (id: any, val: any) => {
       class="table-content"
       :class="multipleSelectionAll?.length && 'show-pagination_height'"
     >
+      <filter-text
+        :total="pageInfo.total"
+        :filter-texts="state.filterTexts"
+        @clear-filter="clearFilter"
+      />
       <div class="preview-or-schema">
         <el-table
           ref="multipleTableRef"
@@ -781,6 +861,11 @@ const changeStatus = (id: any, val: any) => {
       </el-form-item>
     </el-form>
   </el-drawer>
+  <drawer-main
+    ref="drawerMainRef"
+    :filter-options="filterOption"
+    @trigger-filter="searchCondition"
+  />
 </template>
 
 <style lang="less" scoped>