订单高级搜索页面 各个搜索条件l逻辑

src/components/SearchInSupplier.vue

@@ -88,14 +88,10 @@ export default {
       type: Object,
       default: () => {}
     },
-    chinfo: {
-      type: Object,
-      default: ()=> {
-        return {
-          goodsId: '',
-          supplier: ''
-        }
-      }
+    // 货主
+    consignor: {
+      type: Array,
+      default: () => []
     }
   },
   watch: {
@@ -183,7 +179,7 @@ export default {
         // 'erpUserId':this.linkInfo.sysUserId,
         'erpUserId': '23528',
         'invOwner':'200',
-        'goodsId':_this.chinfo.goodsId,
+        'goodsId':'',
         'supply':_this.keywords
       }
       getCgSupplyList(data).then(rt => {

src/views/myOrder/components/HighSearch.vue

@@ -14,26 +14,26 @@
         <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('consignor')">
-            <div class="title font-bold font-16">货主</div>
+            <div class="title font-bold font-16"><span style="color: red;">* </span>货主</div>
             <!-- <textarea :value="consignor" class="inputInfo" type="text"></textarea> -->
-            <div contenteditable="false" placeholder="请选择货主" class="inputInfo">{{consignor}}</div>
+            <div style="background-color: #EFF5F9;" contenteditable="false" placeholder="请选择货主" class="inputInfo">{{consignor}}</div>
           </div>
           <div class="high-info" @click="showPost('supplier')">
-            <div class="title font-bold font-16">供应商</div>
-            <div contenteditable="false" placeholder="请选择供应商" class="inputInfo">{{supplier}}</div>
+            <div class="title font-bold font-16"><span style="color: red;">* </span>供应商</div>
+            <div :class="moreSearchInfo.consignor.length !== 0 ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择供应商">{{supplier}}</div>
           </div>
-          <div class="high-info">
+          <div class="high-info" @click="showPost('orderNo')">
             <div class="title font-bold font-16">请输入订单号</div>
-            <!-- <div contenteditable="true" class="inputInfo">{{orderNo}}</div> -->
-            <input v-model="moreSearchInfo.orderNo" placeholder="请输入订单号" class="input" type="text">
+            <div :class="isSelectConsignorSupplier === true ? 'nom input': 'select input'" :contenteditable="isSelectConsignorSupplier === true ? 'true': 'false'" class="inputInfo" placeholder="请输入订单号">{{moreSearchInfo.orderNo}}</div>
+            <!-- <input :class="isSelectConsignorSupplier === true ? 'nom input': 'select input'" :disabled="isSelectConsignorSupplier" v-model="moreSearchInfo.orderNo" placeholder="请输入订单号" class="input" type="text"> -->
           </div>
           <div class="high-info" @click="showPost('goods')">
             <div class="title font-bold font-16">商品</div>
-            <div contenteditable="false" placeholder="请选择商品" class="inputInfo">{{goods}}</div>
+            <div :class="isSelectConsignorSupplier === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择商品">{{goods}}</div>
           </div>
           <div class="high-info" @click="showPost('client')">
             <div class="title font-bold font-16">客户</div>
-            <div contenteditable="false" placeholder="请选择客户" class="inputInfo">{{client}}</div>
+            <div :class="isSelectConsignorSupplier === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择客户">{{client}}</div>
           </div>
         </div>
         <!-- <van-cell-group class="high-info">
@@ -76,26 +76,30 @@
           <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"
+        :consignor="moreSearchInfo.consignor"
         @cancleclick="showPost"
         @confirmclick="postConfirm"
       ></search-in-supplier>
+       <!-- 货主 -->
       <search-in-consignor
         v-model="moreSearchDialog.consignorShow"
-        :customer="!moreSearchInfo.consignor ? {}:moreSearchInfo.consignor"
+        :customer="!moreSearchInfo.consignor ? []:moreSearchInfo.consignor"
         :chinfo="chinfo"
         @cancleclick="showPost"
         @confirmclick="postConfirm"
       ></search-in-consignor>
+      <!-- 商品 -->
       <search-goods
         v-model="moreSearchDialog.goodsShow"
         :customer="!moreSearchInfo.goods ? {}:moreSearchInfo.goods"
         @cancleclick="showPost"
         @confirmclick="postConfirm"
       ></search-goods>
+      <!-- 客户 -->
       <search-in-client
         v-model="moreSearchDialog.clientShow"
         :customer="!moreSearchInfo.client ? {}:moreSearchInfo.client"
@@ -220,6 +224,13 @@ export default {
       } else {
         return ''
       }
+    },
+    // 货主与供应商是否选择
+    isSelectConsignorSupplier () {
+      if (this.moreSearchInfo.consignor.length === 0 || this.moreSearchInfo.supplier === '' || this.moreSearchInfo.supplier === null || this.moreSearchInfo.supplier === undefined) {
+        return false
+      }
+      return true
     }
   },
   props: {
@@ -246,6 +257,14 @@ export default {
       this.moreSearchInfo.time = data
     },
     onSearchClick() {
+      if (this.moreSearchInfo.consignor.length === 0) {
+        this.$toast('请先选择货主！')
+        return
+      }
+      if (this.moreSearchInfo.supplier === '' || this.moreSearchInfo.supplier === null || this.moreSearchInfo.supplier === undefined) {
+        this.$toast('请先供应商！')
+        return
+      }
       this.moreSearchShow = false
       this.$emit('onsearch', this.moreSearchInfo)
     },
@@ -261,12 +280,24 @@ export default {
           end: getFormateDate(new Date(), 'yyyy-MM-dd')
         },
       }
-      console.log(this.moreSearchInfo)
+      // console.log(this.moreSearchInfo)
       this.moreSearchShow = false
       this.$emit('onsearch', this.moreSearchInfo)
     },
 
     showPost(type) {
+      if (type !== 'consignor') {
+        if (this.moreSearchInfo.consignor.length === 0) {
+          this.$toast('请先选择货主！')
+          return
+        }
+        if (type !== 'supplier') {
+          if (this.moreSearchInfo.supplier === '' || this.moreSearchInfo.supplier === null || this.moreSearchInfo.supplier === undefined) {
+            this.$toast('请先供应商！')
+            return
+          }
+        }
+      }
       switch (true) {
         case type === 'supplier':
           this.moreSearchDialog.supplierShow = !this.moreSearchDialog.supplierShow;
@@ -287,13 +318,18 @@ export default {
       console.log(data)
       switch (true) {
         case data.page === 'supplier':
-          this.moreSearchInfo.supplier = data.value;
+          this.moreSearchInfo.supplier = data.value
           this.chinfo.supplier = this.moreSearchInfo.supplier.comPartyId
+          this.moreSearchInfo.goods = ''
+          this.moreSearchInfo.client = ''
           break;
         case data.page === 'goods':
           this.moreSearchInfo.goods = data.value
           break;
         case data.page === 'consignor':
+          this.moreSearchInfo.supplier = ''
+          this.moreSearchInfo.goods = ''
+          this.moreSearchInfo.client = ''
           this.moreSearchInfo.consignor = data.value
           break;
         case data.page === 'client':
@@ -473,6 +509,27 @@ export default {
     getCurrentDate() {
       this.moreSearchInfo.time.start = getFormateDate(new Date(), 'yyyy-MM-dd')
       this.moreSearchInfo.time.end = getFormateDate(new Date(), 'yyyy-MM-dd')
+    },
+    // 获取本季度开始的月份
+    getQuarterSeasonStartMonth(month) {
+      var spring = 0 // 春
+      var summer = 3 // 夏
+      var fall = 6 // 秋
+      var winter = 9 // 冬
+      // 月份从0-11
+      if (month < 3) {
+        return spring
+      }
+
+      if (month < 6) {
+        return summer
+      }
+
+      if (month < 9) {
+        return fall
+      }
+
+      return winter
     }
   }
 }
@@ -492,7 +549,7 @@ export default {
       margin: 30PX 0 0 15PX
     }
     .high-info-list{
-      height: calc(100vh - 156px);
+      height: calc(100vh - 200px);
       overflow-x: hidden;
       overflow-y: auto;
       .high-info{
@@ -517,13 +574,19 @@ export default {
           overflow-y: auto;
           padding: 5PX;
           border:0.5px solid #eeeeee;
-          background-color: #EFF5F9;
+          
         }
         .inputInfo:empty::before {
            content: attr(placeholder);
            color: #999999;
            font-size: 15PX;
         }
+        .nom{
+          background-color: #EFF5F9;
+        }
+        .select {
+          background-color: #ddd;
+        }
         .input {
           color: #666666;
           width: 100%;
@@ -532,7 +595,7 @@ export default {
           margin: 10PX auto;
           border-radius: 5PX;
           border:0.5px solid #eeeeee;
-          background-color: #EFF5F9;
+          // background-color: #EFF5F9;
           -webkit-appearance:none;
           min-height: 35PX;
           line-height: 24px;

src/views/myOrder/components/goodsHighSearch.vue

@@ -2,11 +2,11 @@
   <div class="h100">
     <van-popup
     v-model="searchShow"
+    class="goodsHighSearch"
     position="right"
     :style="{ width: '75%',height: '100%', overflow: 'hidden' }"
     >
       <div style="height: 40px">
-
       </div>
       <div class="search-info">
         <div class="search-name">商品编号</div>
@@ -42,7 +42,7 @@
 
 <script>
 export default {
-  name: 'goodsHighSearch',
+  name: 'GoodsHighSearch',
   data () {
     return {
       searchShow: false
@@ -88,6 +88,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.goodsHighSearch{
   .search-info {
     padding: 15px 15px 0;
     .search-name {
@@ -100,6 +101,7 @@ export default {
       height:40px;
       padding: 5px;
       margin-top: 10px;
+      font-size: 14PX;
       .search-input {
         background-color:#eeeeee;
         width: 100%;
@@ -107,15 +109,17 @@ export default {
         border: none;
       }
     }
-    .action-bottom {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      display: flex;
+  }
+  .action-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
 
-      button {
-        flex: 1;
-      }
+    button {
+      flex: 1;
     }
   }
+}
+  
 </style>

src/views/myOrder/index.vue

@@ -96,7 +96,8 @@ export default {
     window.removeEventListener('popstate', this.onBrowserBack, false)
   },
   mounted() {
-    this.tabsTitleData()
+    this.moreSearchShow = true
+    // this.tabsTitleData()
   },
   destroyed() {
   },