[#1047] Grid, TreeGrid > 사용자가 입력했을 경우에만 검색 가능 (#1049)

Co-authored-by: yell <yell@ex-em.com> Co-authored-by: kimdoeun <kdeun1@ex-em.com>
ex-em · Jan 25, 2022 · 461c94b · 461c94b
1 parent 1955ef3
commit 461c94b
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/docs/views/grid/example/Toolbar.vue b/docs/views/grid/example/Toolbar.vue
@@ -18,6 +18,7 @@
           mode: checkboxModeMV,
           headerCheck: headerCheckMV,
         },
+        searchValue: searchVm,
         // customContextMenu: menuItems,
         style: {
           stripe: stripeMV,
@@ -34,28 +35,25 @@
         <ev-button
           type="primary"
           class="refresh"
-          @click="item.onRefresh"
         >
           Refresh
         </ev-button>
         <ev-button
           type="primary"
           class="delete"
-          @click="item.onDelete"
         >
           Delete
         </ev-button>
         <ev-button
           type="info"
           @click="onClickCustom"
         >
-          Custom1
+          Set Search Value
         </ev-button>
         <ev-button
           type="info"
-          @click="onClickCustom"
         >
-          Custom2
+          Custom
         </ev-button>
         <ev-text-field
           v-model="searchVm"
@@ -180,9 +178,8 @@ export default {
       tableData.value = temp;
     };
     const onClickCustom = () => {
-      console.log('On click custom button');
+      searchVm.value = 'AIX';
     };
-
     getData(7, 0);
     return {
       columns,

diff --git a/docs/views/treeGrid/example/Toolbar.vue b/docs/views/treeGrid/example/Toolbar.vue
@@ -18,6 +18,7 @@
           mode: checkboxModeMV,
           headerCheck: headerCheckMV,
         },
+        searchValue: searchVm,
         customContextMenu: menuItems,
         style: {
           stripe: stripeMV,
@@ -37,6 +38,12 @@
         >
           Add
         </ev-button>
+        <ev-button
+          type="info"
+          @click="onClickCustom"
+        >
+          Set Search Value
+        </ev-button>
         <ev-text-field
           v-model="searchVm"
           class="search"
@@ -136,7 +143,7 @@ export default {
       { caption: 'Name', field: 'name', type: 'number' },
     ]);
     const onClickCustom = () => {
-      console.log('On click custom button');
+      searchVm.value = 'diserver';
     };
 
     const addNode = () => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

diff --git a/src/components/grid/Grid.vue b/src/components/grid/Grid.vue
@@ -341,7 +341,7 @@ export default {
         items: [],
       },
       isSearch: false,
-      searchWord: '',
+      searchValue: computed(() => (props.option.searchValue || '')),
     });
     const stores = reactive({
       viewStore: [],
@@ -512,7 +512,7 @@ export default {
       (value) => {
         setStore(value);
         if (filterInfo.isSearch) {
-          onSearch(filterInfo.searchWord);
+          onSearch(filterInfo.searchValue);
         }
       },
     );
@@ -581,6 +581,12 @@ export default {
         setStore([], false);
       },
     );
+    watch(
+      () => filterInfo.searchValue,
+      (value) => {
+        onSearch(value?.value ?? value);
+      }, { immediate: true },
+    );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,

diff --git a/src/components/grid/uses.js b/src/components/grid/uses.js
@@ -710,7 +710,6 @@ export const filterEvent = (params) => {
     }
     timer = setTimeout(() => {
       filterInfo.isSearch = false;
-      filterInfo.searchWord = searchWord;
       if (searchWord) {
         stores.searchStore = stores.store.filter((row) => {
           let isShow = false;

diff --git a/src/components/treeGrid/TreeGrid.vue b/src/components/treeGrid/TreeGrid.vue
@@ -242,6 +242,7 @@ export default {
       resizeLine: null,
       'grid-wrapper': null,
     });
+    const searchValue = computed(() => (props.option.searchValue || ''));
     const stores = reactive({
       treeStore: [],
       viewStore: [],
@@ -396,6 +397,12 @@ export default {
         onResize();
       },
     );
+    watch(
+      () => searchValue.value,
+      (value) => {
+        onSearch(value?.value ?? value);
+      }, { immediate: true },
+    );
     const gridStyle = computed(() => ({
       width: resizeInfo.gridWidth,
       height: resizeInfo.gridHeight,