项目列表搜索

components/search-drawer/search-drawer.vue

@@ -0,0 +1,105 @@
+<template>
+  <view>
+    <view class="search" @click="showDrawer"></view>
+    <uni-drawer ref="showRight" mode="right" :width="300">
+      <scroll-view class="drawer" style="height: 100%" scroll-y="true">
+        <div class="title">{{ title }}</div>
+        <slot></slot>
+        <view class="btn-group">
+          <view class="btn" @click="onOk">确定</view>
+          <view class="btn btn-white" @click="closeDrawer">取消</view>
+        </view>
+      </scroll-view>
+    </uni-drawer>
+  </view>
+</template>
+<script>
+export default {
+  name: "search-drawer",
+  props: ["title", "visible"],
+  watch: {
+    visible(val) {
+      if (val) {
+        this.$refs.showRight.open();
+      } else {
+        this.$refs.showRight.close();
+      }
+    },
+  },
+  methods: {
+    onOk() {
+      this.$emit("onOk");
+    },
+    closeDrawer() {
+      this.$emit("update:visible", false);
+      this.$refs.showRight.close();
+    },
+    showDrawer() {
+      this.$emit("update:visible", true);
+      this.$refs.showRight.open();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.search {
+  position: fixed;
+  right: 0;
+  top: 300rpx;
+  width: 100rpx;
+  height: 100rpx;
+  z-index: 999;
+  background: url("@/static/drawer-bar.png") no-repeat center;
+  background-size: cover;
+}
+.drawer {
+  .title {
+    font-size: 34rpx;
+    font-family: Microsoft YaHei UI;
+    font-weight: bold;
+    color: #666666;
+    line-height: 1;
+    border-bottom: 1px solid #666666;
+    margin: 44rpx 30rpx 20rpx;
+    padding-bottom: 34rpx;
+  }
+  .btn-group {
+    display: flex;
+    justify-content: space-between;
+    padding: 20rpx 30rpx;
+    margin-top: 20rpx;
+  }
+
+  .btn {
+    height: 70rpx;
+    width: 210rpx;
+    line-height: 70rpx;
+    text-align: center;
+    background: #5b78bf;
+    color: #fff;
+    font-size: 30rpx;
+    &.btn-white {
+      background: #fff;
+      color: #333;
+      border: 1px solid #666;
+    }
+  }
+  ::v-deep {
+    .select {
+      width: 100%;
+      height: 72rpx;
+      line-height: 70rpx;
+      border: 1px solid #666;
+      padding-left: 20rpx;
+    }
+    .input {
+      border: 1px solid #666;
+    }
+    .uni-forms-item__label {
+      font-size: 34rpx;
+      color: #666;
+      width: 100% !important;
+    }
+  }
+}
+</style>

pages/Project/auth.vue

@@ -12,6 +12,8 @@
       </view>
       <view class="loadmore">{{ loadMoreText }}</view>
     </view>
+
+    <search-drawer title="查询项目"></search-drawer>
   </view>
 </template>
 
@@ -26,9 +28,12 @@ export default {
   },
   data() {
     return {
-      checkself: [],
       projectList: [],
-      self: [{ text: "只看自己", value: 0 }],
+      projectFilter: {
+        project_name: "",
+        project_code: "",
+        project_status: 0,
+      },
     };
   },
   onShow() {

pages/Project/list.vue

@@ -28,6 +28,40 @@
       :popMenu="false"
       @fabClick="onClickAdd()"
     ></uni-fab>
+
+    <search-drawer title="查询项目" ref="searchDrawer" @onOk="search">
+      <uni-forms :modelValue="projectFilter" label-position="top" class="form">
+        <uni-forms-item label="项目名称">
+          <uni-easyinput
+            type="text"
+            class="input"
+            v-model="projectFilter.project_name"
+          />
+        </uni-forms-item>
+        <uni-forms-item label="项目编号">
+          <uni-easyinput
+            type="text"
+            class="input"
+            v-model="projectFilter.project_code"
+          />
+        </uni-forms-item>
+        <uni-forms-item label="状态">
+          <picker
+            @change="selectChangeStatus"
+            :range="statusList"
+            :range-key="'label'"
+          >
+            <view class="select">
+              {{
+                projectFilter.project_status != null
+                  ? statusList[projectFilter.project_status + 1].label
+                  : "全部"
+              }}
+            </view>
+          </picker>
+        </uni-forms-item>
+      </uni-forms>
+    </search-drawer>
   </view>
 </template>
 
@@ -35,6 +69,13 @@
 import { queryProject } from "@/services/project";
 import { mapState } from "vuex";
 import mixin from "@/utils/listMixin";
+const statusList = [
+  { value: null, label: "全部" },
+  { value: 0, label: "售前" },
+  { value: 1, label: "转执行" },
+  { value: 2, label: "转运营" },
+  { value: 3, label: "转质保" },
+];
 export default {
   mixins: [mixin],
   computed: {
@@ -42,8 +83,14 @@ export default {
   },
   data() {
     return {
-      checkself: [],
       projectList: [],
+      projectFilter: {
+        project_name: "",
+        project_code: "",
+        project_status: null,
+      },
+      checkself: [],
+      statusList,
       self: [{ text: "只看自己", value: 0 }],
     };
   },
@@ -77,6 +124,16 @@ export default {
         url: "./add",
       });
     },
+    selectChangeStatus(e) {
+      const item = this.statusList[e.target.value];
+      this.projectFilter.project_status = item.value;
+    },
+    async search() {
+      this.projectFilter.project_code = this.projectFilter.project_code.toUpperCase();
+      this.pagination.currentPage = 1;
+      await this.initData();
+      this.$refs.searchDrawer.closeDrawer();
+    },
   },
 };
 </script>
@@ -118,4 +175,7 @@ export default {
   color: gray;
   text-align: center;
 }
+.form {
+  margin: 0 20px;
+}
 </style>

services/project.js

@@ -1,13 +1,13 @@
 import request from "./request";
 
 export async function queryProject(params) {
-  return await request("/v2/approval/record", "GET", {
+  return await request("v2/approval/record", "GET", {
     ...params,
   });
 }
 
 export async function queryAuth(params) {
-  return await request("/v2/approval/list/auth", "GET", {
+  return await request("v2/approval/list/auth", "GET", {
     ...params,
   });
 }

utils/listMixin.js

@@ -6,7 +6,6 @@ export default {
         currentPage: 1,
         pageSize: 30,
       },
-      projectFilter: {},
       loadMoreText: "加载中...",
     };
   },