app流程发起增加分类筛选

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/nworkflow/releasetask/list.vue

@@ -1,15 +1,19 @@
 <template>
-  <view class="page" style="height: 100%; padding-top: 100rpx;">
+	<view>
+		
+  <view :class="sideOpen ? 'show' : ''" class="page mainpage" style="height: 100%; padding-top: 100rpx;">
     <!-- 顶部搜索栏 -->
     <l-banner
       v-model="searchText"
       @change="searchChange"
       placeholder="搜索流程模板名"
       type="search"
-      noSearchButton
+      noshadow
       fill
       fixed
-    />
+    >
+	  <l-icon @click="sideOpen = true" slot="searchButton" type="searchlist" color="blue" class="text-xxl" />
+	</l-banner>
 
     <!-- 下拉刷新滚动区 -->
     <l-scroll-list @pullDown="pullDown" @toBottom="fetchList()" ref="list">
@@ -29,20 +33,41 @@
       </l-list>
     </l-scroll-list>
   </view>
+  
+  <view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose">
+    <l-icon type="pullright" color="blue" />
+  </view>
+  
+  <!-- 侧边栏 -->
+  <scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y>
+    <view class="padding">
+  	  <l-select v-model="query.category" @input="e=>{query.category=e}" @change="searchChange" title="流程分类" :range="FlowSortOptions"></l-select>
+	  <!-- 重置查询条件按钮 -->
+	  <view class="padding-tb"> 
+	    <l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button> 
+	  </view> 
+    </view>
+  </scroll-view>
+		
+	</view>
 </template>
 
 <script>
 export default {
   data() {
     return {
+	  query:{},
       searchData: {},
       searchText: '',
       loadState: '向下翻以加载更多',
+	  
+	  sideOpen: false,
 
       page: 1,
       total: 2,
 
-      list: []
+      list: [],
+	  FlowSortOptions:[],
     }
   },
 
@@ -53,6 +78,7 @@ export default {
   methods: {
     // 初始化页面
     async init() {
+	  this.FlowSortOptions = Object.values(this.GET_GLOBAL('dataDictionary').FlowSort)
       await this.fetchList()
     },
 
@@ -111,18 +137,26 @@ export default {
     // 搜索框输入内容
     searchChange() {
       const searchData = {}
+	  searchData.category = this.query.category
       if (this.searchText) {
         searchData.keyword = this.searchText
       }
 
       this.searchData = searchData
       this.refresh()
-    }
+    },
+	
+	// 点击「清空查询条件」按钮
+	reset() { 
+	  this.query.category = ''
+	  this.searchChange() 
+	}, 
   }
 }
 </script>
 
 <style lang="less" scoped>
+@import '~@/common/css/sidepage.less';
 .tasklist {
   .item-img {
     display: inline-block;