请货单查询 添加高级搜索页面

src/views/myOrder/clearance/HighSearch.vue

+<template>
+    <div class="h100">
+      <van-popup
+        v-model="moreSearchShow"
+        class="more-search"
+        position="right"
+        :style="{ width: '75%',height: '100%', overflow: 'hidden' }">
+        <div class="title font-bold font-16">开始时间</div>
+        <time-choose :startTime="moreSearchInfo.time.start" :endTime="moreSearchInfo.time.end" @confirm="timeConfirm"></time-choose>
+        <div class="high-info-list">
+          <div class="high-info" @click="showPost('supplier')">
+            <div class="title font-bold font-16">供应商</div>
+            <div contenteditable="true" class="inputInfo">{{supplier}}</div>
+          </div>
+          <div class="high-info">
+            <div class="title font-bold font-16">请货单号</div>
+            <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
+            <input :value="orderNo" class="input" type="text">
+          </div>
+          <div class="high-info" @click="showPost('goods')">
+            <div class="title font-bold font-16">商品</div>
+            <div contenteditable="true" class="inputInfo">{{goods}}</div>
+          </div>
+          <div class="high-info">
+            <div class="title font-bold font-16">来源商品编码</div>
+            <input :value="sourceGoodNo" class="input" type="text">
+          </div>
+          <!-- <div class="high-info" @click="showPost('consignor')">
+            <div class="title font-bold font-16">货主</div>
+            <div contenteditable="true" class="inputInfo">{{consignor}}</div>
+          </div> -->
+          <!-- <div class="high-info" @click="showPost('client')">
+            <div class="title font-bold font-16">客户</div>
+            <div contenteditable="true" class="inputInfo">{{client}}</div>
+          </div> -->
+        </div>
+        <!-- <van-cell-group class="high-info">
+          <van-cell class="flex4" is-link
+            :value="consignor"
+            @click="showPost('consignor')">
+            <template #title>
+              <span type="danger" class="font-bold">货主</span>
+            </template>
+          </van-cell>
+          <van-field class="common" placeholder="请输入订单号" v-model="moreSearchInfo.orderNo">
+            <template #label>
+              <span type="danger" class="font-bold">订单号</span>
+            </template>
+          </van-field>
+          <van-cell class="flex4" is-link
+            :value="supplier"
+            @click="showPost('supplier')">
+            <template #title>
+              <span type="danger" class="font-bold">供应商</span>
+            </template>
+          </van-cell>
+          <van-cell class="flex4" is-link
+            :value="goods"
+            @click="showPost('goods')">
+            <template #title>
+              <span type="danger" class="font-bold">商品</span>
+            </template>
+          </van-cell>
+          <van-cell class="flex4" is-link
+            :value="client"
+            @click="showPost('client')">
+            <template #title>
+              <span type="danger" class="font-bold">客户</span>
+            </template>
+          </van-cell>
+        </van-cell-group> -->
+        <div class="action-bottom">
+          <van-button type="default" @click="onCleanClick">重置</van-button>
+          <van-button type="info" class="submit" @click="onSearchClick">查询</van-button>
+        </div>
+      </van-popup>
+      <search-in-supplier
+        v-model="moreSearchDialog.supplierShow"
+        :customer="!moreSearchInfo.supplier ? {}:moreSearchInfo.supplier"
+        :chinfo="chinfo"
+        @cancleclick="showPost"
+        @confirmclick="postConfirm"
+      ></search-in-supplier>
+      <search-in-consignor
+        v-model="moreSearchDialog.consignorShow"
+        :customer="!moreSearchInfo.consignor ? {}:moreSearchInfo.consignor"
+        :chinfo="chinfo"
+        @cancleclick="showPost"
+        @confirmclick="postConfirm"
+      ></search-in-consignor>
+      <cg-search-goods
+        v-model="moreSearchDialog.goodsShow"
+        :customer="!moreSearchInfo.goods ? {}:moreSearchInfo.goods"
+        @cancleclick="showPost"
+        @confirmclick="postConfirm"
+      ></cg-search-goods>
+      <search-in-client
+        v-model="moreSearchDialog.clientShow"
+        :customer="!moreSearchInfo.client ? {}:moreSearchInfo.client"
+        :chinfo="chinfo"
+        @cancleclick="showPost"
+        @confirmclick="postConfirm"
+      ></search-in-client>
+    </div>
+</template>
+
+<script>
+import TimeChoose from '@/components/TimeChoose'
+import {getFormateDate} from '@/utils/common'
+// 供应商
+import SearchInSupplier from "@/components/SearchInSupplier";
+// 货主
+import SearchInConsignor from "@/components/SearchInConsignor";
+// 商品
+import CgSearchGoods from "@/components/CgSearchGoods";
+// 客户
+import SearchInClient from "@/components/SearchInClient"
+export default {
+  name: 'HighSearch',
+  components: {
+    TimeChoose,
+    SearchInSupplier,
+    CgSearchGoods,
+    SearchInConsignor,
+    SearchInClient
+  },
+  data() {
+    return {
+      moreSearchShow: false,
+      moreSearchDialog: {
+        consignorShow: false,
+        goodsShow: false,
+        supplierShow: false,
+        goodsShow: false,
+        clientShow: false
+      },
+      moreSearchInfo: {
+        supplier: '', // 供应商
+        consignor: [], // 货主
+        goods: '', // 商品
+        client: '', // 客户
+        orderNo: '', // 订单号
+        sourceGoodNo: '', // 来源商品编码
+        time: {
+          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
+          end: getFormateDate(new Date(), 'yyyy-MM-dd')
+        },
+      },
+      chinfo: {
+        goodsId: '',
+        supplier: ''
+      }
+    }
+  },
+  computed: {
+    // 供应商
+    supplier () {
+      if (this.moreSearchInfo.supplier.comPartyId) {
+        return !this.moreSearchInfo.supplier ? '' : (this.moreSearchInfo.supplier.comPartyId + '/(' + this.moreSearchInfo.supplier.partyOpcode + ')' + this.moreSearchInfo.supplier.partyName)
+      } else {
+        return ''
+      }
+    },
+    // 货主
+    consignor () {
+      // if (this.moreSearchInfo.consignor.comPartyId) {
+      //   return !this.moreSearchInfo.consignor ? '' : (this.moreSearchInfo.consignor.comPartyId + '/(' + this.moreSearchInfo.consignor.partyOpcode + ')' + this.moreSearchInfo.consignor.partyName)
+      // } else {
+      //   return ''
+      // }
+      if (this.moreSearchInfo.consignor) {
+        return this.fieldStitching()
+      } else {
+        return ''
+      }
+    },
+    // 商品
+    goods () {
+      if (this.moreSearchInfo.goods.comGoodsId) {
+        return !this.moreSearchInfo.goods ? '' : (this.moreSearchInfo.goods.comGoodsId + '/(' + this.moreSearchInfo.goods.goodsOpcode + ')' + this.moreSearchInfo.goods.goodsName + '/' + this.moreSearchInfo.goods.goodsDesc + '/' + this.moreSearchInfo.goods.productLocation + '/' + this.moreSearchInfo.goods.packageNum + '/' + this.moreSearchInfo.goods.unitName)
+      } else {
+        return ''
+      }
+    },
+    // 客户
+    client () {
+      if (this.moreSearchInfo.client.comPartyId) {
+        return !this.moreSearchInfo.client ? '' : (this.moreSearchInfo.client.comPartyId + '/(' + this.moreSearchInfo.client.partyOpcode + ')' + this.moreSearchInfo.client.partyName)
+      } else {
+        return ''
+      }
+    },
+    // 订单号
+    orderNo () {
+      if (this.moreSearchInfo.orderNo) {
+        return !this.moreSearchInfo.orderNo ? '' : this.moreSearchInfo.orderNo
+      } else {
+        return ''
+      }
+    },
+    // 来源商品编号
+    sourceGoodNo () {
+      if (this.moreSearchInfo.sourceGoodNo) {
+        return !this.moreSearchInfo.sourceGoodNo ? '' : this.moreSearchInfo.sourceGoodNo
+      } else {
+        return ''
+      }
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    choosetime: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    value (val) {
+      this.moreSearchShow = val
+      // this.time = JSON.parse(JSON.stringify(this.choosetime))
+    },
+    moreSearchShow (val) {
+      this.$emit('input', val)
+    }
+  },
+  methods: {
+    timeConfirm (data) {
+      this.time = data
+    },
+    onSearchClick() {
+      this.moreSearchShow = false
+      console.log(this.moreSearchInfo)
+      this.$emit('onsearch', this.moreSearchInfo)
+    },
+    onCleanClick() {
+      this.moreSearchInfo = {
+        supplier: '', // 供应商
+        consignor: [], // 货主
+        goods: '', // 商品
+        client: '', // 客户
+        orderNo: '',
+        sourceGoodNo: '', // 来源商品编码
+        time: {
+          start: getFormateDate(new Date(), 'yyyy-MM-dd'),
+          end: getFormateDate(new Date(), 'yyyy-MM-dd')
+        },
+      }
+      console.log(this.moreSearchInfo)
+      // this.moreSearchShow = false
+      // this.$emit('onsearch', this.moreSearchInfo)
+    },
+    
+    showPost(type) {
+      switch (true) {
+        case type === 'supplier':
+          this.moreSearchDialog.supplierShow = !this.moreSearchDialog.supplierShow;
+          break;
+        case type === 'consignor':
+          this.moreSearchDialog.consignorShow = !this.moreSearchDialog.consignorShow;
+          break;
+        case type === 'goods':
+          this.moreSearchDialog.goodsShow = !this.moreSearchDialog.goodsShow
+          break;
+        case type === 'client':
+          this.moreSearchDialog.clientShow = !this.moreSearchDialog.clientShow
+          break;
+      }
+      window.history.pushState(null, null, document.URL);
+    },
+    postConfirm(data) {
+      console.log(data)
+      switch (true) {
+        case data.page === 'supplier':
+          this.moreSearchInfo.supplier = data.value;
+          this.chinfo.supplier = this.moreSearchInfo.supplier.comPartyId
+          break;
+        case data.page === 'goods':
+          this.moreSearchInfo.goods = data.value
+          break;
+        case data.page === 'consignor':
+          this.moreSearchInfo.consignor = data.value
+          break;
+        case data.page === 'client':
+          this.moreSearchInfo.client = data.value
+          break;
+      }
+      this.showPost(data.page);
+    },
+    // 字段拼接
+    fieldStitching() {
+      let str = ''
+      if (this.moreSearchInfo.consignor.length === 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0])
+      } else if (this.moreSearchInfo.consignor.length > 1) {
+        str = this.consignorInfoStitching(this.moreSearchInfo.consignor[0]) + '......'
+      }
+      return str
+    },
+    // 商品信息拼接
+    consignorInfoStitching(model) {
+      return model.comPartyId + '/(' + model.partyOpcode + ')/' + model.partyName
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  * {
+    box-sizing: border-box;
+  }
+  .more-search {
+    .title {
+      margin: 30PX 0 0 15PX
+    }
+    .high-info-list{
+      height: calc(100vh - 156px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      .high-info{
+        margin: 0PX 15PX;
+        font-size: 14PX;
+        .title {
+          margin: auto
+        }
+        .inputInfo {
+          color: #666666;
+          width: 100%;
+          max-height: 100%;
+          // height: 40PX;
+          margin: 10PX auto;
+          border-radius: 5PX;
+          border:0.5px solid #bbbbbb;
+          min-height: 35PX;
+          line-height: 24px;
+          outline: 0;
+          word-wrap: break-word;
+          overflow-x: hidden;
+          overflow-y: auto;
+          padding: 5PX;
+        }
+        .input {
+          color: #666666;
+          width: 100%;
+          max-height: 100%;
+          // height: 40PX;
+          margin: 10PX auto;
+          border-radius: 5PX;
+          border:0.5px solid #bbbbbb;
+          min-height: 35PX;
+          line-height: 24px;
+          outline: 0;
+          word-wrap: break-word;
+          overflow-x: hidden;
+          overflow-y: auto;
+          padding: 5PX;
+        }
+      }
+    }
+    
+    .search-value {
+      margin-top: 45PX;
+    }
+    .flex4 {
+      /deep/ .van-cell__title {
+        flex: none;
+      }
+    }
+    .action-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      display: flex;
+
+      button {
+        flex: 1;
+      }
+    }
+  }
+</style>

src/views/myOrder/clearance/index.vue

 <template>
   <div id="clearance">
     <clearance-list @gotoDetail="gotoDetail"/>
-    <!-- <high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/> -->
+    <high-search v-model="moreSearchShow" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
   </div>
 </template>
 
 <script>
-// import HighSearch from './components/HighSearch.vue'
+import HighSearch from './HighSearch.vue'
 import {getFormateDate} from '@/utils/common'
 import clearanceList from './clearanceList.vue'
 export default {
   name: 'Clearance',
   components: {
-    // HighSearch,
+    HighSearch,
     clearanceList                          
   },
   data() {