运行记录调整

pages/recordFilling/list.vue

@@ -2,29 +2,6 @@
   <z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
     <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
     <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
-    <template #top>
-      <uni-row class="search-row flex-row align-center justify-between">
-        <uni-col :span="19">
-          <uni-easyinput
-            v-model="orderName"
-            :styles="inputStyles"
-            :placeholderStyle="placeholderStyle"
-            :placeholder="$t('operation.searchText')"
-          >
-          </uni-easyinput>
-        </uni-col>
-        <uni-col :span="5" class="flex-row justify-end">
-          <button
-            class="mini-btn"
-            type="primary"
-            size="mini"
-            @click="searchList"
-          >
-            {{ $t("operation.search") }}
-          </button>
-        </uni-col>
-      </uni-row>
-    </template>
     <view class="list">
       <view class="item" v-for="(item, index) in dataList" :key="index">
         <view
@@ -32,8 +9,7 @@
           :class="{
             tobeFilled: item.orderStatus == 0,
             ignore: item.orderStatus == 3,
-          }"
-        >
+          }">
           <!-- 创建时间 -->
           <view class="module-name">
             {{ item.createTime ? formatDate(item.createTime) : "" }}
@@ -44,8 +20,7 @@
             :class="{
               pending: item.orderStatus == 0,
               ignore: item.orderStatus == 3,
-            }"
-          >
+            }">
             {{ fillStatusDict[item.orderStatus] }}
           </view>
         </view>
@@ -125,8 +100,7 @@
             type="default"
             class="btn-ignore"
             v-if="item.orderStatus == 0 || item.orderStatus == 2"
-            @click="ignoreOrder(item)"
-          >
+            @click="ignoreOrder(item)">
             {{ $t("operation.ignore") }}
           </button>
           <!-- 查看 -->
@@ -134,22 +108,78 @@
             type="primary"
             plain="true"
             v-if="item.orderStatus == 1 || item.orderStatus == 3"
-            @click="navigatorDetail(item, 0)"
-          >
+            @click="navigatorDetail(item, 0)">
             {{ $t("operation.view") }}
           </button>
           <!-- 填写 -->
           <button
             type="primary"
             v-if="item.orderStatus == 0 || item.orderStatus == 2"
-            @click="navigatorDetail(item, 1)"
-          >
+            @click="navigatorDetail(item, 1)">
             {{ $t("operation.fill") }}
           </button>
         </view>
       </view>
     </view>
   </z-paging>
+
+  <UniFab
+    :pattern="fabPattern"
+    horizontal="right"
+    vertical="bottom"
+    direction="horizontal"
+    :popMenu="false"
+    @fabClick="openFilterPopup" />
+
+  <uni-popup
+    ref="filterPopup"
+    type="bottom"
+    background-color="#fff"
+    border-radius="10px 10px 0 0">
+    <view class="filter-popup">
+      <view class="filter-header">
+        <text class="filter-action" @click="closeFilterPopup">{{
+          $t("operation.cancel")
+        }}</text>
+        <text class="filter-title">筛选条件</text>
+        <text class="filter-action primary" @click="searchList">{{
+          $t("operation.confirm")
+        }}</text>
+      </view>
+
+      <view class="filter-body">
+        <view class="filter-item">
+          <view class="filter-label">工单名称</view>
+          <uni-easyinput
+            v-model="orderName"
+            :input-border="false"
+            :styles="inputStyles"
+            :placeholderStyle="placeholderStyle"
+            :placeholder="$t('operation.searchText')"
+            @confirm="searchList" />
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">创建时间</view>
+          <uni-datetime-picker
+            v-model="createTime"
+            type="datetimerange"
+            return-type="string"
+            :border="false"
+            :placeholder="$t('operation.PleaseSelect')" />
+        </view>
+      </view>
+
+      <view class="filter-footer">
+        <button class="filter-button reset" @click="resetFilter">
+          {{ $t("inventory.search.reset") }}
+        </button>
+        <button class="filter-button" type="primary" @click="searchList">
+          {{ $t("operation.search") }}
+        </button>
+      </view>
+    </view>
+  </uni-popup>
+
   <ignore-reason ref="ignorePopupRef" @ignore-submit="ignoreSubmit" />
 </template>
 
@@ -161,9 +191,10 @@ import {
   getRecordFillingList,
   recordFillingIgnore,
 } from "@/api/recordFilling.js";
-import { getUserId, getDeptId } from "@/utils/auth.js";
+import { getDeptId } from "@/utils/auth.js";
 import { useDataDictStore } from "@/store/modules/dataDict";
 import ignoreReason from "@/components/ignore/reason.vue";
+import UniFab from "@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue";
 
 // 获取字典项
 const { getStrDictOptions } = useDataDictStore();
@@ -175,6 +206,20 @@ getStrDictOptions("operation_fill_order_status").map((item) => {
 console.log("🚀 ~ getDataDictList ~ fillStatusDict:", fillStatusDict);
 
 const orderName = ref("");
+const getCurrentMonthRange = () => [
+  dayjs().startOf("week").format("YYYY-MM-DD HH:mm:ss"),
+  dayjs().endOf("week").format("YYYY-MM-DD HH:mm:ss"),
+];
+const createTime = ref(getCurrentMonthRange());
+const filterPopup = ref(null);
+const fabPattern = reactive({
+  color: "#fff",
+  backgroundColor: "#fff",
+  selectedColor: "#fff",
+  buttonColor: "#004098",
+  iconColor: "#fff",
+  icon: "search",
+});
 const placeholderStyle = ref("color:#797979;font-weight:500;font-size:16px");
 const inputStyles = reactive({
   backgroundColor: "#FFFFFF",
@@ -192,6 +237,7 @@ const queryList = (pageNo, pageSize) => {
     pageSize,
     deptId: getDeptId(),
     orderName: orderName.value,
+    createTime: createTime.value,
   })
     .then((res) => {
       // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
@@ -205,8 +251,19 @@ const queryList = (pageNo, pageSize) => {
     });
 };
 const searchList = () => {
+  closeFilterPopup();
   paging.value.reload();
 };
+const openFilterPopup = () => {
+  filterPopup.value?.open();
+};
+const closeFilterPopup = () => {
+  filterPopup.value?.close();
+};
+const resetFilter = () => {
+  orderName.value = "";
+  createTime.value = getCurrentMonthRange();
+};
 const navigatorDetail = (item, type) => {
   console.log("item", item);
   const param = {
@@ -276,18 +333,6 @@ onShow(() => {
 <style lang="scss" scoped>
 @import "@/style/work-order.scss";
 
-.search-row {
-  height: 35px;
-  background: #f3f5f9;
-
-  .mini-btn {
-    height: 35px;
-    line-height: 35px;
-    width: 100%;
-    margin-left: 8px;
-  }
-}
-
 .item {
   width: 100%;
   // height: 245px;
@@ -297,4 +342,79 @@ onShow(() => {
   border-radius: 6px;
   margin-top: 10px;
 }
+
+.filter-popup {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #fff;
+}
+
+.filter-header {
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.filter-title {
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.filter-action {
+  min-width: 48px;
+  color: #666;
+  font-size: 14px;
+}
+
+.filter-action.primary {
+  color: #004098;
+  text-align: right;
+}
+
+.filter-body {
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.filter-item + .filter-item {
+  margin-top: 16px;
+}
+
+.filter-label {
+  margin-bottom: 8px;
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.filter-footer {
+  display: flex;
+  padding: 10px 16px 14px;
+  border-top: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.filter-button {
+  flex: 1;
+  height: 38px;
+  margin: 0;
+  font-size: 14px;
+  line-height: 38px;
+}
+
+.filter-button + .filter-button {
+  margin-left: 10px;
+}
+
+.filter-button.reset {
+  border: 1px solid #004098;
+  background: #fff;
+  color: #004098;
+}
 </style>

pages/ruihen-task/index.vue

@@ -182,15 +182,17 @@ onShow(() => {
 .top {
   display: flex;
   flex-direction: column;
-  gap: 12px;
   background: #f3f5f9;
   padding: 10px 0;
 }
 
+.top > * + * {
+  margin-top: 12px;
+}
+
 .search-row {
   display: flex;
   align-items: center;
-  gap: 12px;
 }
 
 .search-row :deep(.uni-easyinput) {
@@ -200,7 +202,7 @@ onShow(() => {
 :deep(.mini-btn) {
   height: 38px !important;
   font-size: 16px !important;
-  margin: 0;
+  margin: 0 0 0 12px;
 }
 
 .create-btn {
@@ -212,7 +214,10 @@ onShow(() => {
   margin-top: 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+}
+
+.list > .item + .item {
+  margin-top: 12px;
 }
 
 .item {
@@ -221,18 +226,21 @@ onShow(() => {
   border-radius: 8px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+}
+
+.item > * + * {
+  margin-top: 12px;
 }
 
 .header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
 }
 
 .contract-name {
   flex: 1;
+  margin-right: 12px;
   font-size: 16px;
   font-weight: 600;
   color: #1f2329;
@@ -254,7 +262,10 @@ onShow(() => {
 .content {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+}
+
+.content > .content-item + .content-item {
+  margin-top: 8px;
 }
 
 .content-item {
@@ -275,10 +286,13 @@ onShow(() => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 12px;
 }
 
 .button {
   margin: 0;
 }
+
+.footer > .button + .button {
+  margin-left: 12px;
+}
 </style>