[Core] [Metadata] Add filter component

core/datacap-web/src/i18n/langs/en/source/manager.ts

@@ -7,4 +7,5 @@ export default {
   visibleColumn: 'Visible Column',
   resetAutoIncrement: 'Reset AutoIncrement',
   resetTo: 'Reset To',
+  filter: 'Filter'
 }

core/datacap-web/src/i18n/langs/zhCn/source/manager.ts

@@ -7,4 +7,5 @@ export default {
   visibleColumn: '可见列',
   resetAutoIncrement: '重置自增列',
   resetTo: '重置为',
+  filter: '筛选器'
 }

core/datacap-web/src/views/admin/source/SourceManager.vue

@@ -74,6 +74,7 @@
                 </TableData>
               </TabPane>
               <TabPane :label="tabPane.statement"
+                       :style="{textAlign: 'center'}"
                        name="statement">
                 <TableStatement v-if="applyValue.tabType === 'statement'"
                                 :id="applyValue.node.applyId">

core/datacap-web/src/views/admin/source/components/TableColumnFilter.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <Modal v-model="visible"
+           :title="$t('source.manager.filter')"
+           :closable="false"
+           :mask-closable="false"
+           @cancel="handlerCancel()">
+      <CircularLoading v-if="loading"
+                       :show="loading"
+                       style="margin-top: 150px;">
+      </CircularLoading>
+      <div v-else>
+      </div>
+      <template #footer>
+        <Button danger
+                @click="handlerCancel">
+          {{ $t('common.cancel') }}
+        </Button>
+        <!--        <Button type="primary"-->
+        <!--                :loading="loadingChange"-->
+        <!--                @click="handlerSave()">-->
+        <!--          {{ $t('common.submit') }}-->
+        <!--        </Button>-->
+      </template>
+    </Modal>
+  </div>
+</template>
+<script lang="ts">
+import {defineComponent, watch} from "vue";
+import CircularLoading from "@/components/loading/CircularLoading.vue";
+
+export default defineComponent({
+  name: "TableFilter",
+  components: {CircularLoading},
+  props: {
+    isVisible: {
+      type: Boolean
+    }
+  },
+  created()
+  {
+    this.handlerInitialize();
+    this.watchId();
+  },
+  data()
+  {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    handlerInitialize()
+    {
+      console.log(1)
+    },
+    handlerCancel()
+    {
+      this.visible = false;
+    },
+    watchId()
+    {
+      watch(
+        () => this.id,
+        () => {
+          this.handlerInitialize();
+        }
+      );
+    }
+  },
+  computed: {
+    visible: {
+      get(): boolean
+      {
+        return this.isVisible;
+      },
+      set(value: boolean)
+      {
+        this.$emit('close', value);
+      }
+    }
+  }
+});
+</script>

core/datacap-web/src/views/admin/source/components/TableData.vue

@@ -94,17 +94,26 @@
               <FontAwesomeIcon icon="upload"/>
             </Button>
           </Tooltip>
+          <Tooltip :content="$t('common.preview')"
+                   transfer>
+            <Button size="small"
+                    @click="handlerVisibleContent(true)">
+              <FontAwesomeIcon icon="eye"/>
+            </Button>
+          </Tooltip>
         </Space>
         <div style="float: right;">
           <Space>
-            <Tooltip :content="$t('common.preview')"
+            <Tooltip :content="$t('source.manager.filter')"
+                     placement="bottom-end"
                      transfer>
               <Button size="small"
-                      @click="handlerVisibleContent(true)">
-                <FontAwesomeIcon icon="eye"/>
+                      @click="handlerFilterConfigure(true)">
+                <FontAwesomeIcon icon="filter"/>
               </Button>
             </Tooltip>
             <Tooltip :content="$t('source.manager.visibleColumn')"
+                     placement="bottom-end"
                      transfer>
               <Button size="small"
                       @click="handlerVisibleColumn(null, true)">
@@ -159,6 +168,10 @@
                    @close="handlerVisibleColumn($event, false)"
                    @onClose="handlerVisibleColumn($event, false)">
       </TableColumn>
+      <TableColumnFilter v-if="filterConfigure.show"
+                         :isVisible="filterConfigure.show"
+                         @close="handlerFilterConfigure(false)">
+      </TableColumnFilter>
     </div>
   </div>
 </template>
@@ -181,10 +194,11 @@ import TableCellEditPreview from "@/views/admin/source/components/TableCellEditP
 import TableRowDeletePreview from "@/views/admin/source/components/TableRowDeletePreview.vue";
 import {cloneDeep} from "lodash";
 import TableColumn from "@/views/admin/source/components/TableColumn.vue";
+import TableColumnFilter from "@/views/admin/source/components/TableColumnFilter.vue";
 
 export default defineComponent({
   name: "TableData",
-  components: {TableColumn, TableRowDeletePreview, TableCellEditPreview, MarkdownPreview, InputNumber, CircularLoading, AgGridVue},
+  components: {TableColumnFilter, TableColumn, TableRowDeletePreview, TableCellEditPreview, MarkdownPreview, InputNumber, CircularLoading, AgGridVue},
   props: {
     id: {
       type: Number,
@@ -231,6 +245,9 @@ export default defineComponent({
       visibleColumn: {
         show: false,
         columns: []
+      },
+      filterConfigure: {
+        show: false
       }
     }
   },
@@ -390,6 +407,10 @@ export default defineComponent({
         this.handlerRefererData(configure)
       }
     },
+    handlerFilterConfigure(show: boolean)
+    {
+      this.filterConfigure.show = show;
+    },
     getSortConfigure(configure: TableFilter)
     {
       const columnState = this.gridColumnApi.getColumnState();