[Core] [Metadata] Add filter column operation

core/datacap-web/src/model/TableFilter.ts

@@ -27,3 +27,12 @@ export class SqlColumn
   value?: string;
   original?: Map<string, object>;
 }
+
+export class ColumnFilter
+{
+  index: number;
+  column: string;
+  operation: string;
+  operations: Array<string>;
+  value: any
+}

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

@@ -1,6 +1,7 @@
 <template>
   <div>
     <Modal v-model="visible"
+           width="40%"
            :title="$t('source.manager.filter')"
            :closable="false"
            :mask-closable="false"
@@ -35,14 +36,25 @@
               <Row>
                 <Col span="6"
                      offset="1">
-                  <Select v-model="item.column"
-                          size="small">
+                  <Select v-model="item.index"
+                          size="small"
+                          @on-change="handlerFetchOperations($event, item)">
+                    <Option v-for="(column, index) in columns"
+                            :label="column"
+                            :key="index"
+                            :value="index">
+                    </Option>
                   </Select>
                 </Col>
                 <Col span="6"
                      offset="1">
-                  <Select v-model="item.filter"
+                  <Select v-model="item.operation"
                           size="small">
+                    <Option v-for="operation in item.operations"
+                            :label="operation"
+                            :key="operation"
+                            :value="operation">
+                    </Option>
                   </Select>
                 </Col>
                 <Col span="6"
@@ -90,6 +102,7 @@
 <script lang="ts">
 import {defineComponent, watch} from "vue";
 import CircularLoading from "@/components/loading/CircularLoading.vue";
+import {ColumnFilter} from "@/model/TableFilter";
 
 export default defineComponent({
   name: "TableFilter",
@@ -97,11 +110,16 @@ export default defineComponent({
   props: {
     isVisible: {
       type: Boolean
+    },
+    columns: {
+      type: Array
+    },
+    types: {
+      type: Array
     }
   },
   created()
   {
-    this.handlerInitialize();
     this.watchId();
   },
   data()
@@ -115,23 +133,26 @@ export default defineComponent({
     }
   },
   methods: {
-    handlerInitialize()
-    {
-      console.log(1)
-    },
     handlerAddFilter()
     {
-      const filter = {
-        column: null,
-        filter: null,
-        value: null
-      }
+      const filter: ColumnFilter = new ColumnFilter();
       this.formState.filters.push(filter);
     },
     handlerRemoveFilter(index: number)
     {
       this.formState.filters.splice(index, 1);
     },
+    handlerFetchOperations(value, filter: ColumnFilter)
+    {
+      const type = this.types[value];
+      filter.column = this.columns[value];
+      if (type === 'Long' || type === 'Double' || type === 'Integer') {
+        filter.operations = ['=', '!=', '>', '<', '>=', '<='];
+      }
+      else {
+        filter.operations = ['=', '!=', 'LIKE', 'NOT LIKE', 'IS NULL', 'IS NOT NULL'];
+      }
+    },
     handlerCancel()
     {
       this.visible = false;

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

@@ -170,6 +170,8 @@
       </TableColumn>
       <TableColumnFilter v-if="filterConfigure.show"
                          :isVisible="filterConfigure.show"
+                         :columns="filterConfigure.columns"
+                         :types="filterConfigure.types"
                          @close="handlerFilterConfigure(false)">
       </TableColumnFilter>
     </div>
@@ -247,7 +249,9 @@ export default defineComponent({
         columns: []
       },
       filterConfigure: {
-        show: false
+        show: false,
+        columns: [],
+        types: []
       }
     }
   },
@@ -270,6 +274,8 @@ export default defineComponent({
             this.configure.datasets = response.data.columns;
             this.configure.pagination = response.data.pagination;
             this.visibleContent.content = '```sql\n' + response.data.content + '\n```';
+            this.filterConfigure.columns = cloneDeep(response.data.headers)
+            this.filterConfigure.types = cloneDeep(response.data.types)
           }
           else {
             this.$Message.error(response.message);
@@ -297,6 +303,8 @@ export default defineComponent({
             }
             this.configure.pagination = response.data.pagination;
             this.visibleContent.content = '```sql\n' + response.data.content + '\n```';
+            this.filterConfigure.columns = cloneDeep(response.data.headers)
+            this.filterConfigure.types = cloneDeep(response.data.types)
           }
           else {
             this.$Message.error(response.message);