Merge pull request 'feat:卡片页滚动与通过后状态修改' (#196) from fix/change_task into test

Reviewed-on: #196

src/views/final/content/ListContent.vue

@@ -19,9 +19,10 @@ const sortorder = ref("asc");
 const sortname = ref("states");
 const loading = ref(true);
 const total = ref(0);
-
+const  scrollContainer=ref(null);
 const tableData = ref<any>([]);
 const finalStore = useFinal();
+let num = 1;
 const pagination = reactive({
   page: 1,
   pageCount: 20,
@@ -40,8 +41,40 @@ const initRem = () => {
   document.documentElement.style.fontSize = scale * rempPx + "px";
 };
 
-function initData() {
-  query(1, 10);
+async function initData(  page: number,
+  pageSize: number,
+  filterId?: any,
+  taskName?: string) {
+  const asideParmas = unref(finalStore.getAsideValue);
+  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
+  // let params = filterId ? { userSearchId: filterId } : asideParmas
+  let params = asideParmas;
+  params = params?.izshowall ? {} : params;
+
+  const result = await getFinalList({
+    sortorder: sortorder.value,
+    pageSize,
+    currPage: page,
+    sortname: sortname.value,
+    taskName,
+    //isFail: true,
+    ...params,
+  });
+  const { data, pageCount, totalCount } = result;
+  console.log(data, pageCount, totalCount);
+//tableData.value =  tableData.value.concat(data);
+  tableData.value = data;
+console.log(tableData.value)
+  total.value = totalCount;
+  pagination.page = page;
+  pagination.pageCount = Math.ceil(totalCount / pageSize);
+  loading.value = false;
+  tableData.value.map((item) => {
+    if(isValidTimestamp(item.createdate)){
+    item.createdate = formatToDateHMS(item.createdate);
+  }});
+
+  tableData.value = chunk(tableData.value, 4);
 }
 async function query(
   page: number,
@@ -63,23 +96,51 @@ async function query(
     currPage: page,
     sortname: sortname.value,
     taskName,
+    //isFail: true,
     ...params,
   });
   const { data, pageCount, totalCount } = result;
   console.log(data, pageCount, totalCount);
+  let newlist=[]
+let oldlist= tableData.value
+if(oldlist.length>0){
+  oldlist.map((item)=>{
+    console.log(item)
+    if(item.length>0){
+item.map((itemx:any)=>{
+  newlist.push(itemx)
+})
+    }
+  })
+  data.map((item)=>{
+newlist.push(item)
+  })
   
-  tableData.value = data;
-
+}else{
+  newlist=data
+}
+//tableData.value =  tableData.value.concat(data);
+  tableData.value = newlist;
+console.log(tableData.value)
   total.value = totalCount;
   pagination.page = page;
   pagination.pageCount = Math.ceil(totalCount / pageSize);
   loading.value = false;
   tableData.value.map((item) => {
+    if(isValidTimestamp(item.createdate)){
     item.createdate = formatToDateHMS(item.createdate);
-  });
+  }});
 
   tableData.value = chunk(tableData.value, 4);
 }
+function isValidTimestamp(value) {
+    if (typeof value !== 'number' || !Number.isInteger(value)) {
+        return false; // 首先确保值是一个整数数字
+    }
+    const date = new Date(value);
+    return !isNaN(date.getTime()); // 验证能否转换为有效日期
+}
+
 //查看详情页
 function goDetail(row) {
   router.push({
@@ -113,7 +174,7 @@ function showModal(modalRef: any) {
 }
 onMounted(() => {
   initRem();
-  initData();
+  initData(1,20);
 });
 const item = {
   img: testImg,
@@ -175,7 +236,8 @@ function doAudit(param: any, row: any) {
         if (code === "OK") {
           message.success(res.message);
           //changecardstatus(3, row);
-            query(1, 10);
+         initData(1,20);
+         num=1
           reload();
         } else {
           message.error(res.message);
@@ -206,6 +268,35 @@ function reload() {
   //  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
   //  query(page!, pageSize!)
 }
+
+let debounceTimer;
+// 检查是否滚动到底部
+function checkBottom() {
+  const container = scrollContainer.value;
+  // console.log(1)
+  if (!container) return;
+
+  // const { scrollTop, clientHeight, scrollHeight } = container;
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  // 获取视口的内部高度
+  const clientHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+
+  // 获取整个文档的高度
+  const scrollHeight = document.documentElement.scrollHeight;
+
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      num = num + 1;
+      console.log(num);
+      query(num, 20)
+    //  fetchData(); // 接近底部时加载更多数据
+    }
+  }, 500);
+}
+
 </script>
 
 <template>
@@ -304,107 +395,108 @@ function reload() {
     <div class="header_data">
       <DataHeader :hasColor="true" />
     </div>
-
-    <div
-      class="data_wrapper"
-      v-for="(sitem, sindex) in tableData"
-      :key="sindex"
-      :style="
-        sitem.length == 1
-          ? { width: '25%' }
-          : sitem.length == 2
-          ? { width: '50%' }
-          : sitem.length == 3
-          ? { width: '75%' }
-          : {}
-      "
-    >
+    <div class="cotnet_wrapeer"  @scroll="checkBottom"  ref="scrollContainer">
       <div
-        class="item"
-        v-for="(item, index) in sitem"
-        :key="index"
+        class="data_wrapper"
+        v-for="(sitem, sindex) in tableData"
+        :key="sindex"
         :style="
           sitem.length == 1
             ? { width: '25%' }
             : sitem.length == 2
-            ? { margin: '0 2% 0 2%' }
+            ? { width: '50%' }
             : sitem.length == 3
             ? { width: '75%' }
             : {}
         "
       >
-        <div class="top">
-          <div
-            class="img"
-            :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
-          >
-            <div class="check_box" v-show="item.states == 2">
-              <n-checkbox size="medium" label=" " />
-            </div>
-          </div>
-          <div class="content">
-            <div class="title">
-              <n-ellipsis style="max-width: 8.5vw">
-                任务ID：{{ item.fromtaskid }}
-              </n-ellipsis>
-            </div>
-            <div class="date">
-              <n-ellipsis style="max-width: 8.5vw"
-                >{{ item.createdate }}
-              </n-ellipsis>
+        <div
+          class="item"
+          v-for="(item, index) in sitem"
+          :key="index"
+          :style="
+            sitem.length == 1
+              ? { margin: '0 4% 0 4%' }
+              : sitem.length == 2
+              ? { margin: '0 2% 0 2%' }
+              : sitem.length == 3
+              ? { margin: '0 1.2% 0 1.2%' }
+              : {}
+          "
+        >
+          <div class="top">
+            <div
+              class="img"
+              :style="`background:url(${item.serverThumbnailUrl});background-size:100%;background-repeat: no-repeat;`"
+            >
+              <div class="check_box" v-show="item.states == 2">
+                <n-checkbox size="medium" label=" " />
+              </div>
             </div>
-            <div class="tag_box">
-              <div
-                class="tag_item"
-                v-for="index in 2"
-                :key="index"
-                :style="
-                  index == 2 || item.states == 3
-                    ? 'color:#02C984'
-                    : item.states == 2
-                    ? 'color: #fe9800;background:#f7eac0'
-                    : item.states == 5
-                    ? 'color:#FF4E4F;background:#f7c0c0'
-                    : 'color:#02C984'
-                "
-              >
-                {{
-                  index == 1
-                    ? item.states == 3
-                      ? "通过"
+            <div class="content">
+              <div class="title">
+                <n-ellipsis style="max-width: 8.5vw">
+                  任务ID：{{ item.fromtaskid }}
+                </n-ellipsis>
+              </div>
+              <div class="date">
+                <n-ellipsis style="max-width: 8.5vw"
+                  >{{ item.createdate }}
+                </n-ellipsis>
+              </div>
+              <div class="tag_box">
+                <div
+                  class="tag_item"
+                  v-for="index in 2"
+                  :key="index"
+                  :style="
+                    index == 2 || item.states == 3
+                      ? 'color:#02C984'
                       : item.states == 2
-                      ? "待审核"
+                      ? 'color: #fe9800;background:#f7eac0'
                       : item.states == 5
-                      ? "未通过"
-                      : ""
-                    : item.fromusername
-                }}
+                      ? 'color:#FF4E4F;background:#f7c0c0'
+                      : 'color:#02C984'
+                  "
+                >
+                  {{
+                    index == 1
+                      ? item.states == 3
+                        ? "通过"
+                        : item.states == 2
+                        ? "待审核"
+                        : item.states == 5
+                        ? "未通过"
+                        : ""
+                      : item.fromusername
+                  }}
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="bottom">
-          <!-- <div class="reset_action">重置审批</div>-->
-          <div
-            class="resovle_action"
-            v-show="item.states != 2"
-            @click="goDetail(item)"
-          >
-            查看
-          </div>
-          <div
-            class="resovle_action"
-            v-show="item.states == 2"
-            @click="actionHandler({ key: 'approval' }, item)"
-          >
-            通过
-          </div>
-          <div
-            class="reject_action"
-            v-show="item.states == 2"
-            @click="actionHandler({ key: 'reject' }, [item])"
-          >
-            不通过
+          <div class="bottom">
+            <!-- <div class="reset_action">重置审批</div>-->
+            <div
+              class="resovle_action"
+              v-show="item.states != 2"
+              @click="goDetail(item)"
+            >
+              查看
+            </div>
+            <div
+              class="resovle_action"
+              v-show="item.states == 2"
+              @click="actionHandler({ key: 'approval' }, item)"
+            >
+              通过
+            </div>
+            <div
+              class="reject_action"
+              v-show="item.states == 2"
+              @click="actionHandler({ key: 'reject' }, [item])"
+            >
+              不通过
+            </div>
           </div>
         </div>
       </div>
@@ -525,7 +617,9 @@ function reload() {
     width: 100%;
   }
   .data_wrapper {
+    // padding-right: 10px;
     display: flex;
+    //box-sizing: border-box;
     flex-flow: row wrap;
     align-items: center;
     // justify-content: flex-start;
@@ -630,5 +724,39 @@ function reload() {
       }
     }
   }
+  .cotnet_wrapeer {
+    width: 100%;
+    height: 70vh;
+    //padding-right: 10px; /* 右侧内边距 */
+    overflow: hidden; /* 默认隐藏滚动条 */
+  }
+  .cotnet_wrapeer:hover {
+    overflow: auto;
+    width: calc(100% + 5px);
+  }
+  /* 定义滚动条的宽度及背景颜色 */
+  ::-webkit-scrollbar {
+    position: fixed;
+    width: 5px; /* for vertical scrollbars */
+    height: 10px; /* for horizontal scrollbars */
+    background: #f1f1f1;
+  }
+
+  /* 定义滚动条轨道的样式 */
+  ::-webkit-scrollbar-track {
+    background-color: #e1e1e1;
+    border-radius: 10px; /* 圆角 */
+  }
+
+  /* 定义滚动条滑块的样式 */
+  ::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 10px; /* 圆角 */
+  }
+
+  /* 滑块hover时的样式 */
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
 }
 </style>