update 自定义查询示例

Web/src/main.js

@@ -66,6 +66,11 @@ Vue.prototype.$moment = moment
  */
 import { auth } from './components/authorized'
 Vue.prototype.$auth = auth
+/**
+ * 常用工具函数全局化
+ */
+import { getSearchInfo } from './util/query'
+Vue.prototype.$getSearchInfo = getSearchInfo
 
 /**
  * 注册全局组件

Web/src/pages/business/house/member/selector/selectedList.vue

@@ -18,6 +18,9 @@
       <Auth auth="houseSelector:selectedPage" slot="query">
         <!-- 此处添加查询表单控件 -->
         <!-- ... -->
+        <a-form-model-item>
+          <a-range-picker v-model="query.createdTime"></a-range-picker>
+        </a-form-model-item>
         <a-form-model-item label="编号">
           <a-input-number
             :formatter="(number) => number && `000${number}`.slice(-3)"
@@ -31,10 +34,10 @@
         </a-form-model-item>
         <a-form-model-item label="房屋性质">
           <a-radio-group @change="onChangeQueryType" button-style="solid" v-model="query.type">
-            <a-radio-button :value="0">全部</a-radio-button>
+            <a-radio-button value>全部</a-radio-button>
             <a-radio-button
               :key="item.code"
-              :value="+item.code"
+              :value="item.code"
               v-for="item in codes.type"
             >{{item.value}}</a-radio-button>
           </a-radio-group>
@@ -92,7 +95,12 @@ export default {
 
       /* 查询条件 */
       query: {
-        type: 0,
+        type: '',
+      },
+
+      queryType: {
+        type: '=',
+        createdTime: ['>=', '<'],
       },
 
       /* 表格字段 */
@@ -150,13 +158,15 @@ export default {
      */
     loadData(params) {
       const query = this.$_.cloneDeep(this.query);
-      if (!query.userId) {
-        query.userId = this.userId;
-      }
+      const searchInfo = this.$getSearchInfo({
+        query,
+        queryType: this.queryType,
+      });
 
       return this.$api[api.page]({
         ...params,
-        ...query,
+        userId: this.userId,
+        searchInfo,
       }).then((res) => {
         return res.data;
       });

Web/src/pages/business/house/member/selector/selectorList.vue

@@ -31,10 +31,10 @@
         </a-form-model-item>
         <a-form-model-item label="房屋性质">
           <a-radio-group @change="onChangeQueryType" button-style="solid" v-model="query.type">
-            <a-radio-button :value="0">全部</a-radio-button>
+            <a-radio-button value>全部</a-radio-button>
             <a-radio-button
               :key="item.code"
-              :value="+item.code"
+              :value="item.code"
               v-for="item in codes.type"
             >{{item.value}}</a-radio-button>
           </a-radio-group>
@@ -90,7 +90,11 @@ export default {
 
       /* 查询条件 */
       query: {
-        type: 0,
+        type: '',
+      },
+
+      queryType: {
+        type: '=',
       },
 
       /* 表格字段 */
@@ -148,13 +152,15 @@ export default {
      */
     loadData(params) {
       const query = this.$_.cloneDeep(this.query);
-      if (!query.userId) {
-        query.userId = this.userId;
-      }
+      const searchInfo = this.$getSearchInfo({
+        query,
+        queryType: this.queryType,
+      });
 
       return this.$api[api.page]({
         ...params,
-        ...query,
+        userId: this.userId,
+        searchInfo,
       }).then((res) => {
         return res.data;
       });
@@ -175,7 +181,7 @@ export default {
     onResetQuery() {
       /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
       this.query = {
-        type: 0,
+        type: '',
       };
       this.onQuery();
     },

Web/src/util/query/index.js

@@ -0,0 +1,41 @@
+export const getSearchInfo = ({ query, queryType }) => {
+    const searchInfo = []
+    Object.keys(query).forEach((p) => {
+        if (queryType && queryType.hasOwnProperty(p) && queryType[p].constructor === Array) {
+            queryType[p].forEach((q, i) => {
+                if (query[p] != null && query[p] != undefined) {
+                    const _searchInfo = {
+                        field: p,
+                        value: [query[p][i]],
+                        type: q,
+                    }
+                    searchInfo.push(_searchInfo)
+                }
+            })
+        } else {
+            const _searchInfo = {
+                field: p,
+                value: [],
+                type: undefined,
+            }
+
+            if (query[p] != null && query[p] != undefined) {
+                if (query[p].constructor === Array) {
+                    _searchInfo.value = query[p]
+                } else {
+                    _searchInfo.value = [query[p]]
+                }
+            } else {
+                return false
+            }
+
+            if (queryType && queryType.hasOwnProperty(p)) {
+                _searchInfo.type = queryType[p]
+            }
+
+            searchInfo.push(_searchInfo)
+        }
+    })
+
+    return searchInfo
+}