处理巡逻打卡列表时间筛选 处理时间轴图片展示处理

src/pages/patrolList/index.vue

@@ -6,7 +6,11 @@ import PatrolWrapper from "@/pages/patrolList/copmonents/patrolWrapper.vue";
 import {fetchPatrolList} from "@/api/patrolList";
 import {getDictListByCode} from "@/api/common";
 import router from "@/router";
+import SxPopup from "@/components/SxPopup.vue";
+import SelectTime from "@/components/SelectTime.vue";
 
+const showPopup = ref(false);
+const timeShow = ref(false);
 const finished = ref(false);
 const loading = ref(false);
 const loadingRefresh = ref(false);
@@ -19,7 +23,9 @@ const pageData = reactive({
 })
 
 const data = reactive({
-  list: []
+  list: [],
+  dictList: [],
+  startTime: ''
 })
 
 const onSearch = () => {
@@ -79,19 +85,20 @@ const parseAndJoinLx = (jsonString, type = 'lx') => {
 };
 
 const getData = async () => {
-
   const { total, ...ret }  = pageData
+  loading.value = true;
   try {
-    const res = await fetchPatrolList({ ...ret, fgMc: searchValue.value })
+    const res = await fetchPatrolList({ ...ret, fgMc: searchValue.value, rwRq: data.startTime })
     if (res?.records.length > 0) {
       data.list = data.list.concat(res?.records)?.map((item) => ({
         ...item,
-        fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx')
+        fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx'),
+        fgYjdjLabel: data.dictList?.find(i => i.dm === item.fgYjdj)?.zdmc || item.fgYjdj
       })) || []
+
       pageData.total = res?.total
       loading.value = false;
 
-      await getDictList()
     }
     loadingRefresh.value = false;
 
@@ -103,15 +110,36 @@ const getData = async () => {
 
 const getDictList = async () => {
   const res = await getDictListByCode({ dictCode: 'D_ZDXL_FGXLRW_YJDJ' })
-
-  data.list = (data.list || []).map(item => ({
-    ...item,
-    fgYjdjLabel: (res?.itemList || []).find(i => i.dm === item.fgYjdj)?.zdmc || item.fgYjdj
-  }));
+  if (res && res?.itemList?.length > 0) {
+    data.dictList = res?.itemList
+  }
 }
 
-onMounted(() => {
+const onSelectTime = (val) => {
+  data.startTime = val;
+  timeShow.value = false
+}
+
+const onClickTime = () => {
+  timeShow.value = true;
+}
+
+const onConfirm = () => {
+  pageData.pageCurrent = 1;
+  data.list = []
   getData()
+  showPopup.value = false;
+}
+
+const handleReset = () => {
+  data.startTime = ""
+  onConfirm()
+}
+
+
+onMounted(async () => {
+  await getDictList()
+  await getData()
 })
 </script>
 
@@ -122,13 +150,32 @@ onMounted(() => {
     <van-sticky>
       <div class="header">
         <search
+          :isSx="true"
           placeholder="请输入方格名称进行查询"
           v-model="searchValue"
+          @update:sx="showPopup = !showPopup"
           @update:modelValue="onSearch"
         />
       </div>
     </van-sticky>
 
+    <sx-popup :showPopup="showPopup" :p_top="110" @update:close="showPopup = false"
+              @update:onConfirm="onConfirm" @reset="handleReset">
+      <div class="time_box">
+        <van-field
+          v-model="data.startTime"
+          label-width="60px"
+          placeholder="请选择时间"
+          input-align="left"
+          right-icon="arrow-down"
+          readonly
+          @click.stop="onClickTime"
+        />
+      </div>
+    </sx-popup>
+
+    <select-time v-if="timeShow" time-type="选择任务日期" @update:time="onSelectTime" @update:cancelTime="timeShow = false" />
+
     <div class="content">
       <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1" :immediate-check="false">
@@ -142,6 +189,10 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+.time_box {
+  padding: 0 3vw 3vw;
+}
+
 .header {
   margin-top: 13vw;
 }