新增委外管理的筛选

pages/pda/components/bottomOperate.vue

@@ -286,36 +286,50 @@
               <input class="uni-input content_num" v-model="errorForm.name" />
             </u-form-item>
 
-            <u-form-item label="异常描述:" borderBottom prop="name">
-              <input
-                type="textarea"
-                class="content_num"
+            <u-form-item
+              label="异常描述:"
+              borderBottom
+              prop="describes"
+              :labelStyle="{ alignSelf: 'flex-start', paddingTop: '12rpx' }"
+            >
+              <textarea
+                class="error_popup__textarea"
                 v-model="errorForm.describes"
+                placeholder="请输入异常描述"
+                :auto-height="true"
               />
             </u-form-item>
           </u-form>
-        </view>
 
-        <view class="photo_btn" @click="chooseImage">拍照</view>
-        <view class="photo_list">
-          <PreviewPhoto
-            type="add"
-            @imagedelete="imagedelete"
-            :imageList="imageList"
-          />
+          <view class="error_popup__photo">
+            <view class="error_popup__photo-header">
+              <view class="error_popup__photo-label">现场照片</view>
+              <view class="error_popup__photo-btn" @click="chooseImage">
+                <text class="error_popup__photo-btn-icon">+</text>
+                <text>拍照</text>
+              </view>
+            </view>
+            <view class="error_popup__photo-list">
+              <PreviewPhoto
+                type="add"
+                @imagedelete="imagedelete"
+                :imageList="imageList"
+              />
+            </view>
+          </view>
         </view>
       </template>
 
       <template v-slot:operate>
-        <view class="operate_box rx-bc">
-          <u-button size="small" class="u-reset-button" @click="errorCancel">
+        <view class="error_popup__operate rx-bc">
+          <u-button size="normal" class="error_popup__btn" @click="errorCancel">
             取消
           </u-button>
 
           <u-button
             type="success"
-            size="small"
-            class="u-reset-button"
+            size="normal"
+            class="error_popup__btn"
             @click="errorOk()"
           >
             确定
@@ -1138,7 +1152,10 @@ export default {
 .popup_list {
   width: 78vw;
   min-height: 360rpx;
+  max-height: 70vh;
+  overflow-y: auto;
   padding: 0 32rpx;
+  box-sizing: border-box;
 
   .title {
     color: #333;
@@ -1148,6 +1165,74 @@ export default {
   }
 }
 
+.error_popup__textarea {
+  width: 100%;
+  min-height: 120rpx;
+  max-height: 320rpx;
+  padding: 12rpx 16rpx;
+  box-sizing: border-box;
+  border: 2rpx solid #f0f8f2;
+  border-radius: 8rpx;
+  background: #f0f8f2;
+  color: $theme-color;
+  font-size: 26rpx;
+  line-height: 1.5;
+}
+
+.error_popup__photo {
+  margin: 24rpx 0 16rpx;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+  }
+
+  &-label {
+    font-size: 26rpx;
+    color: #333;
+    font-weight: 500;
+  }
+
+  &-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 56rpx;
+    padding: 0 24rpx;
+    background: $theme-color;
+    color: #fff;
+    border-radius: 28rpx;
+    font-size: 24rpx;
+
+    &-icon {
+      font-size: 30rpx;
+      line-height: 1;
+      margin-right: 6rpx;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.error_popup__operate {
+  padding: 16rpx 32rpx;
+  gap: 24rpx;
+
+  /deep/ .u-button {
+    flex: 1;
+    height: 72rpx;
+  }
+}
+
+.error_popup__btn {
+  flex: 1;
+}
+
 .list_item_btn {
   width: 160rpx;
   height: 54rpx;

pages/pda/outsourcing/components/searchPopup.vue

@@ -0,0 +1,111 @@
+<template>
+  <u-popup
+    :show="show"
+    mode="top"
+    :round="10"
+    closeable
+    @close="close"
+    bgColor="#fff"
+  >
+    <view class="search_wrap">
+      <view class="title">筛选</view>
+      <view class="form_item">
+        <view class="label">关键字</view>
+        <u-input
+          v-model="form.keyWord"
+          placeholder="请输入型号、规格、批次号"
+        ></u-input>
+      </view>
+      <view class="form_item">
+        <view class="label">工单编码</view>
+        <u-input v-model="form.workOrderCode" placeholder="请输入"></u-input>
+      </view>
+      <view class="form_item">
+        <view class="label">委外名称</view>
+        <u-input v-model="form.name" placeholder="请输入"></u-input>
+      </view>
+      <view class="form_item">
+        <view class="label">委外编码</view>
+        <u-input v-model="form.code" placeholder="请输入"></u-input>
+      </view>
+      <view class="btns">
+        <button class="btn reset" @click="reset">重置</button>
+        <button class="btn confirm" @click="confirm">确定</button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+const defaultForm = () => ({
+  keyWord: "",
+  workOrderCode: "",
+  name: "",
+  code: "",
+});
+
+export default {
+  props: {
+    show: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      form: defaultForm(),
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+    reset() {
+      this.form = defaultForm();
+      this.$emit("search", { ...this.form });
+      this.close();
+    },
+    confirm() {
+      this.$emit("search", { ...this.form });
+      this.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search_wrap {
+  padding: 30rpx 30rpx 40rpx;
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 20rpx;
+  }
+  .form_item {
+    margin-bottom: 24rpx;
+    .label {
+      font-size: 26rpx;
+      color: #333;
+      margin-bottom: 10rpx;
+    }
+  }
+  .btns {
+    display: flex;
+    gap: 20rpx;
+    margin-top: 30rpx;
+    .btn {
+      flex: 1;
+      height: 72rpx;
+      line-height: 72rpx;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+    }
+    .reset {
+      background: #f5f5f5;
+      color: #333;
+    }
+    .confirm {
+      background: $theme-color;
+      color: #fff;
+    }
+  }
+}
+</style>

pages/pda/outsourcing/index/index.vue

@@ -11,19 +11,14 @@
     ></uni-nav-bar>
 
     <view class="top-wrapper">
-      <uni-section>
-        <uni-easyinput
-          prefixIcon="search"
-          style="width: 520rpx"
-          v-model="searchFrom.keyWord"
-          placeholder="请输入"
-        >
-        </uni-easyinput>
-      </uni-section>
-
+      <uni-easyinput
+        prefixIcon="search"
+        style="flex: 1"
+        v-model="searchFrom.keyWord"
+        placeholder="请输入型号、规格、批次号"
+      ></uni-easyinput>
       <button class="search_btn" @click="doSearch">搜索</button>
-
-      <!-- <image class="menu_icon" src="~@/static/pda/menu.svg"></image> -->
+      <button class="search_btn" @click="filterShow = true">筛选</button>
     </view>
 
     <view class="list_box">
@@ -47,11 +42,18 @@
         </u-list-item>
       </u-list>
     </view>
+
+    <searchPopup
+      :show="filterShow"
+      @close="filterShow = false"
+      @search="onFilterSearch"
+    ></searchPopup>
   </view>
 </template>
 
 <script>
 import workCard from "../components/workCard.vue";
+import searchPopup from "../components/searchPopup.vue";
 
 import { workorderPage } from "@/api/pda/workOrder.js";
 import { getOutsourceList } from "@/api/pda/outsourcing.js";
@@ -59,15 +61,20 @@ let [isEnd] = [false];
 export default {
   components: {
     workCard,
+    searchPopup,
   },
   data() {
     return {
       page: 1,
       size: 10,
       dataList: [],
+      filterShow: false,
 
       searchFrom: {
-        keyWord: null,
+        keyWord: "",
+        workOrderCode: "",
+        name: "",
+        code: "",
       },
     };
   },
@@ -76,11 +83,16 @@ export default {
   },
   methods: {
     async getList() {
-      let params = {
+      const params = {
         pageNum: this.page,
         size: this.size,
         ...this.searchFrom,
       };
+      Object.keys(params).forEach((k) => {
+        if (params[k] === "" || params[k] === null || params[k] === undefined) {
+          delete params[k];
+        }
+      });
 
       isEnd = false;
 
@@ -95,9 +107,15 @@ export default {
     },
 
     doSearch() {
+      this.page = 1;
       this.getList();
     },
 
+    onFilterSearch(e) {
+      this.searchFrom = { ...this.searchFrom, ...e };
+      this.doSearch();
+    },
+
     scrolltolower() {
       if (isEnd) return;
       this.page++;
@@ -112,6 +130,10 @@ export default {
         url,
       });
     },
+
+    back() {
+      uni.navigateBack();
+    },
   },
 };
 </script>
@@ -128,41 +150,25 @@ export default {
 .top-wrapper {
   background-color: #fff;
   display: flex;
-  width: 750rpx;
-  height: 88rpx;
-  padding: 16rpx 32rpx;
   align-items: center;
-  gap: 16rpx;
-
-  /deep/.uni-section {
-    margin-top: 0px;
-  }
-
-  /deep/.uni-section-header {
-    padding: 0px;
-  }
+  padding: 20rpx 26rpx;
+  gap: 20rpx;
+  box-sizing: border-box;
 
   .search_btn {
-    width: 120rpx;
-    height: 70rpx;
-    line-height: 70rpx;
-    padding: 0 24rpx;
+    padding: 0 26rpx;
+    height: 64rpx;
+    line-height: 64rpx;
     background: $theme-color;
-    font-size: 32rpx;
     color: #fff;
+    border-radius: 8rpx;
+    font-size: 26rpx;
+    white-space: nowrap;
     margin: 0;
-    margin-left: 26rpx;
-  }
-
-  .menu_icon {
-    width: 44rpx;
-    height: 44rpx;
-    margin-left: 14rpx;
   }
 }
 
 .list_box {
-  flex: 1;
   overflow: hidden;
   padding: 16rpx 0;