合同信息列表增加筛选条件

src/views/sunVillage_info/information.vue

@@ -7,8 +7,8 @@
          </div>
          <div class="search_info">
             <div class="search_block">
-                <i class="icon"></i>
-                <input type="text" class="ipt" placeholder="搜索" v-model="queryParams.name" @input="getSearchList">
+              <van-search class="search_block searchHeight" v-model="queryParams.queryOr" @input="getSearchList" :placeholder="searchPlaceholder" />
+              <van-icon name="filter-o" color="#1989fa" class="filter-icon" @click="openContractionStatus" />
             </div>
             <div class="total">共{{listLength}}个合同</div>
          </div>
@@ -57,18 +57,42 @@
            <van-uploader v-model="fileList" :after-read="afterRead" @delete="deleteFile1" multiple />
          </div>
        </van-popup>
+
+       <van-popup v-model="typeVisible" lock-scroll closeable position="top" >
+         <div style="padding: 0.2rem 0.3rem 0.3rem;">
+           <van-cell-group>
+             <van-cell>
+               <div style="text-align: center; font-size: 18px;">筛选</div>
+             </van-cell>
+             <field-select
+               v-model="queryParams.contractionStatus"
+               label="合同状态"
+               value-key="dictLabel"
+               data-key="dictValue"
+               placeholder="选择合同状态"
+               :columns="contractionStatusOptions"
+               :clearable="true"
+             />
+           </van-cell-group>
+           <div style="padding: 0.2rem 0.5rem 0;">
+             <van-button round type="primary" block @click="refresh">搜索</van-button>
+           </div>
+         </div>
+       </van-popup>
     </div>
 </template>
 
 <script>
  import { contractionList , delInfo , commonAttach , attachmentList , systemAttachment } from "@/api/sunVillage_info/fixedAssets";
  import request from '@/utils/request'
+ import Selector from "@/components/common/Selector.vue";
+ import FieldSelect from "@/components/form/FieldSelect.vue";
  export default {
    name: "certificateList",
+   components: {FieldSelect, Selector},
    data() {
      return {
        applicationList:[],
-       applicationListSecond:[],
        assetStatusOptions:[],
        auditStatus:[],
        loading: false,
@@ -81,12 +105,18 @@
          pageNum:1,
          pageSize:10,
          orderByColumn:'createTime',
+         contractionStatus: null,
+         secondParty: null,
          isAsc:'desc',
          name:'',
+         params:{},
+         queryOr: null,
        },
        uploadFiles1:[],
        projectId:'',
-       projectIndex:''
+       projectIndex:'',
+       typeVisible: false,
+       contractionStatusOptions: [],
      };
    },
    created() {
@@ -96,14 +126,17 @@
    },
    methods: {
      getList(){
+      console.log("getList()");
+      this.queryParams.params = {};
+      this.queryParams.params["queryOr"] = this.queryParams.queryOr;
        setTimeout(() => {
          contractionList(this.queryParams).then(response => {
            this.listLength = response.total;
+           this.applicationList = [];
            for (var i = 0; i < response.rows.length; i++) {
              response.rows[i].contractionStatus = this.selectDictLabel(this.contractionStatusOptions, response.rows[i].contractionStatus);
              response.rows[i].totalAmount = Number(response.rows[i].totalAmount ).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }).replace(/\.$/, "")
              this.applicationList.push(response.rows[i]);
-             this.applicationListSecond.push(response.rows[i]);
            }
            if(this.applicationList.length >= response.total){
              this.finished = true;
@@ -115,11 +148,6 @@
          });
        }, 1000);
      },
-     getSearchList(){
-       this.applicationList = [];
-       this.queryParams.pageNum = 1;
-       this.getList();
-     },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        this.uploadFiles1.push(file.file);
@@ -182,11 +210,40 @@
      goAdd(){
        this.$router.push('/sunVillage_info/informationAdd')
      },
+     getSearchList(){
+      if(this.queryParams.queryOr == null){
+        return;
+      }
+       this.applicationList = [];
+       this.queryParams.pageNum = 1;
+      console.log("getList()1");
+       this.getList();
+     },
+      openContractionStatus() {
+        this.typeVisible = true;
+      },
+      refresh() {
+        this.typeVisible = false;
+        this.queryParams.pageNum = 1;
+        this.listLength = 0;
+        this.applicationList = [];
+        this.finished = false;
+        this.getList();
+      },
    },
+    computed: {
+      searchPlaceholder() {
+        let typeName = this.contractionStatusOptions.find((x) => x.dictValue == this.queryParams.contractionStatus);
+        return '搜索' + (typeName ? typeName.dictLabel : '');
+      },
+    }
  }
 </script>
 
 <style scoped lang="scss">
+/deep/ .van-search__content{
+  background-color: transparent;
+}
 .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;
@@ -229,29 +286,39 @@
         padding:20px 23px;
         display: flex;
         .search_block{
-        height: 59px;
-        width: 535px;
-        border-radius: 59px;
-        background: #fff;
-        display: flex;
-        border:2px solid #3494ff;
-        padding-right: 35px;
-        align-items: center;
-        .icon{
-            width: 30px;
-            height: 30px;
-            background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
-            background-size: 100% 100%;
-            display: block;
-            margin:0 8px 0 26px;
-        }
-        .ipt{
-        flex: 1;
-        font-size: 26px;
-        background: none;
-        border:0 none;
-        line-height: 59px;
-        }
+          width: 535px;
+          border-radius: 59px;
+          background: #fff;
+          display: flex;
+          border:2px solid #3494ff;
+          padding-right: 20px;
+          align-items: center;
+            &.searchHeight{
+              border: none;
+              height: 57px;
+              padding-left: 0;
+            }
+          .icon{
+              width: 30px;
+              height: 30px;
+              background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
+              background-size: 100% 100%;
+              display: block;
+              margin:0 8px 0 26px;
+          }
+            .filter-icon {
+              font-weight: bold;
+              font-size: .4rem;
+              width: .6rem;
+              text-align: center;
+            }
+          .ipt{
+          flex: 1;
+          font-size: 26px;
+          background: none;
+          border:0 none;
+          line-height: 59px;
+          }
         }
         .total{
         flex: 1;

src/views/sunVillage_info/three.vue

@@ -363,39 +363,39 @@
         padding:20px 23px;
         display: flex;
         .search_block{
-        width: 535px;
-        border-radius: 59px;
-        background: #fff;
-        display: flex;
-        border:2px solid #3494ff;
-        padding-right: 20px;
-        align-items: center;
-          &.searchHeight{
-            border: none;
-            height: 57px;
-            padding-left: 0;
+          width: 535px;
+          border-radius: 59px;
+          background: #fff;
+          display: flex;
+          border:2px solid #3494ff;
+          padding-right: 20px;
+          align-items: center;
+            &.searchHeight{
+              border: none;
+              height: 57px;
+              padding-left: 0;
+            }
+          .icon{
+              width: 30px;
+              height: 30px;
+              background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
+              background-size: 100% 100%;
+              display: block;
+              margin:0 8px 0 26px;
           }
-        .icon{
-            width: 30px;
-            height: 30px;
-            background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
-            background-size: 100% 100%;
-            display: block;
-            margin:0 8px 0 26px;
-        }
-          .filter-icon {
-            font-weight: bold;
-            font-size: .4rem;
-            width: .6rem;
-            text-align: center;
+            .filter-icon {
+              font-weight: bold;
+              font-size: .4rem;
+              width: .6rem;
+              text-align: center;
+            }
+          .ipt{
+          flex: 1;
+          font-size: 26px;
+          background: none;
+          border:0 none;
+          line-height: 59px;
           }
-        .ipt{
-        flex: 1;
-        font-size: 26px;
-        background: none;
-        border:0 none;
-        line-height: 59px;
-        }
         }
         .total{
         flex: 1;