执行中列表可筛选

pages/receiptpage/receiptpage.vue

@@ -5,11 +5,11 @@
         :key="item.value" @click="clickHandler(item.label)">
         {{ item.label }}
         <text class="tab_num">( {{ item.num }} )</text>
-        <view class="more" v-if="item.label === '执行中'"></view>
-        <picker class="more_picker" v-if="item.label === '执行中'" @click.stop @change="execFilter($event)" :value="index"
+        <view class="more" v-if="item.label === '执行中'" @click.stop="execFilter"></view>
+        <!-- <picker class="more_picker" v-if="item.label === '执行中'" @click.stop @change="execFilter($event)" :value="index"
           :range="array" range-key="name">
           <view class="uni-input">{{ array[index].name }}</view>
-        </picker>
+        </picker> -->
       </view>
     </view>
     <view v-if="zxzData.length == 0" class="zwsj">
@@ -322,6 +322,40 @@
     <checkboxModal v-if="checkboxModels.disjunctor" :content="checkboxModels.content" :disjunctor="checkboxModels.disjunctor"
       @ok="checkboxOk" @cancel="checkboxCancel">
     </checkboxModal>
+    <!-- 执行中筛选 -->
+    <view class="execFilterMask" v-if="isShowExecFilter" @click="isShowExecFilter = false">
+      <view class="execFilter" @click.stop>
+        <view class="execFilterHeader">
+          全部筛选
+        </view>
+        <view class="execFilterBody">
+          <view class="execFilterItem">
+            <view class="execFilterItemHeader">
+              工单状态
+            </view>
+            <view class="execFilterItemBody">
+              <view class="execFilterItemBox" @click="currentId = item.id" :class="{active: item.id == currentId}" v-for="item in array" :key="item.id">
+                {{item.name}}
+              </view>
+            </view>
+          </view>
+          
+          <view class="execFilterItem">
+            <view class="execFilterItemHeader">
+              申请科室
+            </view>
+            <view class="execFilterItemBody">
+              <input class="deptName" v-model.trim="deptName" placeholder="请输入科室名称" placeholder-style="color:#cecece" />
+            </view>
+          </view>
+        </view>
+        
+        <view class="execFilterFooter">
+          <view class="btn" @click="execFilterReset()">重置</view>
+          <view class="btn" @click="execFilterOk()">完成</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 <script>
@@ -345,6 +379,9 @@
   export default {
     data() {
       return {
+        isShowExecFilter: false,
+        deptName: '',
+        currentId: 0,
         otherAssociationTypeId: null,
         hosId: uni.getStorageSync('userData').user.currentHospital.id,
         clinicalMultiplayerMode: 0,
@@ -790,19 +827,37 @@
         }
       },
       // 执行中筛选
-      execFilter({
-        detail: {
-          value
-        }
-      }) {
-        this.index = value;
-        this.arrayKey = this.array[value].id;
+      // execFilter({
+      //   detail: {
+      //     value
+      //   }
+      // }) {
+      //   this.index = value;
+      //   this.arrayKey = this.array[value].id;
+      //   this.zxzData = [];
+      //   this.totalNum = -1;
+      //   this.idx = 0;
+      //   this.selectedLabelSlots = "执行中";
+      //   this.executingOrders(0);
+      // },
+      // 执行中筛选
+      execFilter() {
+        this.isShowExecFilter = true;
+      },
+      // 执行中确定
+      execFilterOk() {
+        this.isShowExecFilter = false;
         this.zxzData = [];
         this.totalNum = -1;
         this.idx = 0;
         this.selectedLabelSlots = "执行中";
         this.executingOrders(0);
       },
+      // 执行中重置
+      execFilterReset() {
+        this.currentId = 0;
+        this.deptName = '';
+      },
       // 大扫描筛选
       execFilterBigScreen({
         detail: {
@@ -1486,11 +1541,24 @@
           idx,
           sum: 20,
         };
-        if (this.arrayKey) {
-          data.keyWord = this.arrayKey;
+        
+        // if (this.arrayKey) {
+        //   data.keyWord = this.arrayKey;
+        // } else {
+        //   delete data.keyWord;
+        // }
+        if (this.currentId) {
+          data.keyWord = this.currentId;
         } else {
           delete data.keyWord;
         }
+        
+        if (this.deptName) {
+          data.deptName = this.deptName;
+        } else {
+          delete data.deptName;
+        }
+        
         uni.showLoading({
           title: "加载中",
           mask: true,
@@ -1749,6 +1817,96 @@
     height: 100%;
     position: relative;
     
+    .execFilterMask{
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 9999;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;      
+      
+      .execFilter{
+        position: relative;
+        background-color: #fff;
+        height: 90vh;
+        border-radius: 100rpx 100rpx 0 0;
+        
+        .execFilterHeader{
+          height: 100rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-bottom: 2rpx solid #ccc;
+        }
+        
+        .execFilterBody{
+          .execFilterItem{
+            padding: 40rpx;
+            border-bottom: 2rpx dashed #ccc;
+            &:last-of-type{
+              border-bottom: none;
+            }
+            .execFilterItemHeader{}
+            .execFilterItemBody{
+              display: flex;
+              flex-wrap: wrap;
+              padding: 40rpx 0 0;
+              justify-content: space-between;
+              text-align: left;
+              
+              .execFilterItemBox{
+                width: 200rpx;
+                height: 80rpx;
+                text-align: center;
+                line-height: 80rpx;
+                background-color: #f6f6f6;
+                margin-bottom: 20rpx;
+                border-radius: 80rpx;
+                &.active{
+                  color: #fff;
+                  background-color: #49b856;
+                }
+              }
+              
+              .deptName {
+                height: 80rpx;
+                background-color: #f6f6f6;
+                border-radius: 20rpx;
+                padding: 0 20rpx;
+              }
+            }
+          }
+        }
+        
+        .execFilterFooter {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+          line-height: 66rpx;
+          height: 100rpx;
+          display: flex;
+          justify-content: space-between;
+        
+          .btn {
+            height: 66rpx;
+            flex: 1;
+            margin: 0 1%;
+            background-image: linear-gradient(to right, #72c172, #3bb197);
+            color: #fff;
+            border-radius: 8rpx;
+            font-size: 28rpx;
+            margin-top: 16rpx;
+            text-align: center;
+          }
+        }
+      }
+    }
+    
     .more {
       position: absolute;
       right: 20rpx;