From 9cb6d0f454eace6f9ef73356ab7a28bb36143b57 Mon Sep 17 00:00:00 2001
From: lihui_ocr <lihui1@qq.com>
Date: Tue, 16 Apr 2024 12:31:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BB=88=E5=AE=A1=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=89=B9=E9=87=8F=E4=B8=8D=E9=80=9A=E8=BF=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/final/content/ListContent.vue | 308 ++++++++++++++++++------
 1 file changed, 233 insertions(+), 75 deletions(-)

diff --git a/src/views/final/content/ListContent.vue b/src/views/final/content/ListContent.vue
index 4e4474d..06b6e6c 100644
--- a/src/views/final/content/ListContent.vue
+++ b/src/views/final/content/ListContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, reactive, unref } from "vue";
+import { onMounted, ref, reactive, unref, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import testImg from "@/assets/images/test.png";
 import { chunk } from "lodash-es";
@@ -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 scrollContainer = ref(null);
 const tableData = ref<any>([]);
 const finalStore = useFinal();
+
 let num = 1;
 const pagination = reactive({
   page: 1,
@@ -30,7 +31,47 @@ const pagination = reactive({
 });
 const repeatModalRef = ref(null);
 const repeatTaskTableModalRef = ref(null);
+const selectionIds = ref([]);
+const showActions = computed(() => {
+  return selectionIds.value.length;
+});
 const emit = defineEmits(["changeShow"]);
+function handleCheck(row: any, showcheck: any) {
+  if (showcheck == false) {
+    console.log(tableData.value);
+    tableData.value.map((item) => {
+      if (item.length > 0) {
+        item.map((itemx, index) => {
+          if (row.id == itemx.id) {
+            itemx.showcheck = true;
+          }
+          //newlistx.push(itemx)
+        });
+      }
+    });
+    selectionIds.value.push(row);
+  } else {
+    tableData.value.map((item) => {
+      if (item.length > 0) {
+        item.map((itemx, index) => {
+          if (row.id == itemx.id) {
+            itemx.showcheck = false;
+          }
+          //newlistx.push(itemx)
+        });
+      }
+    });
+    selectionIds.value.pop(row);
+  }
+}
+function switchBatch() {
+  tableData.value.map((item) => {
+    item.map((itemx, index) => {
+      itemx.showcheck = false;
+    });
+  });
+  selectionIds.value = [];
+}
 function changeContent() {
   emit("changeShow");
 }
@@ -41,10 +82,12 @@ const initRem = () => {
   document.documentElement.style.fontSize = scale * rempPx + "px";
 };
 
-async function initData(  page: number,
+async function initData(
+  page: number,
   pageSize: number,
   filterId?: any,
-  taskName?: string) {
+  taskName?: string
+) {
   const asideParmas = unref(finalStore.getAsideValue);
   // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
   // let params = filterId ? { userSearchId: filterId } : asideParmas
@@ -57,22 +100,24 @@ async function initData(  page: number,
     currPage: page,
     sortname: sortname.value,
     taskName,
-    //isFail: true,
+    isFail: true,
     ...params,
   });
   const { data, pageCount, totalCount } = result;
   console.log(data, pageCount, totalCount);
-//tableData.value =  tableData.value.concat(data);
+  //tableData.value =  tableData.value.concat(data);
   tableData.value = data;
-console.log(tableData.value)
+  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);
-  }});
+    item.showcheck = false;
+    if (isValidTimestamp(item.createdate)) {
+      item.createdate = formatToDateHMS(item.createdate);
+    }
+  });
 
   tableData.value = chunk(tableData.value, 4);
 }
@@ -96,49 +141,54 @@ async function query(
     currPage: page,
     sortname: sortname.value,
     taskName,
-    //isFail: true,
+    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)
-  })
-  
-}else{
-  newlist=data
-}
-//tableData.value =  tableData.value.concat(data);
+  let newlist = [];
+  let oldlist = tableData.value;
+  if (oldlist.length > 0) {
+    oldlist.map((item) => {
+      console.log(item);
+      if (item.length > 0) {
+        item.map((itemx: any) => {
+          itemx.showcheck = false;
+          newlist.push(itemx);
+        });
+      }
+    });
+    data.map((item) => {
+      item.showcheck = false;
+      newlist.push(item);
+    });
+  } else {
+    data.map((item) => {
+      item.showcheck = false;
+      newlist.push(item);
+    });
+  }
+  //tableData.value =  tableData.value.concat(data);
   tableData.value = newlist;
-console.log(tableData.value)
+  // 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);
-  }});
+    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()); // 验证能否转换为有效日期
+  if (typeof value !== "number" || !Number.isInteger(value)) {
+    return false; // 首先确保值是一个整数数字
+  }
+  const date = new Date(value);
+  return !isNaN(date.getTime()); // 验证能否转换为有效日期
 }
 
 //查看详情页
@@ -155,6 +205,7 @@ function repeatBatchReject(items) {
 }
 // 审核不通过
 function rejectHandler(list) {
+  console.log(list);
   const msg = validate(list);
   if (msg !== null) {
     message.error(msg);
@@ -164,6 +215,7 @@ function rejectHandler(list) {
     if (items.length === 0) return "至少选中一个任务";
     return null;
   }
+  console.log(notPassModalRef);
   const modal = unref(notPassModalRef)! as any;
   modal.showModal(list);
 }
@@ -174,7 +226,7 @@ function showModal(modalRef: any) {
 }
 onMounted(() => {
   initRem();
-  initData(1,20);
+  initData(1, 20);
 });
 const item = {
   img: testImg,
@@ -196,33 +248,12 @@ function actionHandler(action: any, row: any) {
       singleApproval(row);
       break;
     case "reject":
-      rejectHandler([row]);
+      rejectHandler(row);
       break;
     default:
       break;
   }
 }
-// 单个审批通过
-function singleApproval(row) {
-  console.log(row);
-  const param = {
-    result: true,
-    comment: "",
-    disposeType: "",
-    disposeTypeId: "",
-    failCauseId: "",
-    failCauseName: "",
-    flowTaskInfoList: [
-      {
-        formId: row.id,
-        taskId: row.taskId,
-        taskName: row.fromTaskName,
-      },
-    ],
-  };
-  doAudit(param, row);
-}
-
 // 审核通过
 function doAudit(param: any, row: any) {
   dialog.info({
@@ -236,8 +267,8 @@ function doAudit(param: any, row: any) {
         if (code === "OK") {
           message.success(res.message);
           //changecardstatus(3, row);
-         initData(1,20);
-         num=1
+          initData(1, 20);
+          num = 1;
           reload();
         } else {
           message.error(res.message);
@@ -247,12 +278,75 @@ function doAudit(param: any, row: any) {
     onNegativeClick: () => {},
   });
 }
+// 单个审批通过
+function singleApproval(row) {
+  console.log(row);
+  const param = {
+    result: true,
+    comment: "",
+    disposeType: "",
+    disposeTypeId: "",
+    failCauseId: "",
+    failCauseName: "",
+    flowTaskInfoList: [
+      {
+        formId: row.id,
+        taskId: row.taskId,
+        taskName: row.fromTaskName,
+      },
+    ],
+  };
+  doAudit(param, row);
+}
+// 批量通过
+function batchApproval() {
+  const items: any = selectionIds.value;
+  const msg = validate(items);
+  function validate(items: any[]) {
+    if (items.length === 0) return "至少选中一个任务";
+    return null;
+  }
+  if (msg !== null) {
+    message.error(msg);
+    return;
+  }
+  console.log(items);
+  const list: any = [];
+  items.forEach((item) => {
+    list.push({
+      formId: item.id,
+      taskId: item.taskId,
+      taskName: item.fromtaskname,
+    });
+  });
+
+  const param = {
+    result: true,
+    comment: "",
+    disposeType: "",
+    disposeTypeId: "",
+    failCauseId: "",
+    failCauseName: "",
+    flowTaskInfoList: list,
+  };
+
+  doAudit(param, {});
+  selectionIds.value = [];
+  num = 1;
+}
+// 批量不通过
+function batchReject() {
+  const items: any = selectionIds.value;
+  rejectHandler(items);
+  selectionIds.value = [];
+  num = 1;
+}
 //修改卡片状态渲染效果
 function changecardstatus(states, item) {
   //let index = tableData.value.findIndex(itemx => itemx.id === item.id);
   let newlist = [];
   tableData.value.map((itemarr, indexarr) => {
-    itemarr.map((itemobj: any, indexobj) => {
+    itemarr.map((itemobj, indexobj) => {
       if (item.id == itemobj.id) {
         itemobj.states = states;
       }
@@ -263,6 +357,8 @@ function changecardstatus(states, item) {
 }
 
 function reload() {
+  //query(1, 20)
+  //num=1
   //selectionIds.value = []
   //checkedRowKeys.value = []
   //  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
@@ -291,12 +387,11 @@ function checkBottom() {
     if (scrollTop + clientHeight >= scrollHeight - 10) {
       num = num + 1;
       console.log(num);
-      query(num, 20)
-    //  fetchData(); // 接近底部时加载更多数据
+      query(num, 20);
+      //  fetchData(); // 接近底部时加载更多数据
     }
   }, 500);
 }
-
 </script>
 
 <template>
@@ -395,7 +490,32 @@ function checkBottom() {
     <div class="header_data">
       <DataHeader :hasColor="true" />
     </div>
-    <div class="cotnet_wrapeer"  @scroll="checkBottom"  ref="scrollContainer">
+    <div class="wrapper-settings">
+      <div>
+        <div>
+          <span>提报时间排序</span
+          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+        </div>
+        <div>
+          <span>相似度排序</span
+          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+        </div>
+        <div>
+          <span>提报人排序</span
+          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+        </div>
+      </div>
+      <div style="width: 3vw">
+        <SvgIcon name="magnifying-1" size="18" style="margin-right: 8px" />
+        <SvgIcon
+          style="cursor: pointer"
+          size="18"
+          name="column"
+          @click="showModal(customTabelRef)"
+        />
+      </div>
+    </div>
+    <div class="cotnet_wrapeer" @scroll="checkBottom" ref="scrollContainer">
       <div
         class="data_wrapper"
         v-for="(sitem, sindex) in tableData"
@@ -427,13 +547,22 @@ function checkBottom() {
           <div class="top">
             <div
               class="img"
-              :style="`background:url(${item.serverThumbnailUrl});background-size:100%;background-repeat: no-repeat;`"
+              :style="
+                item.serverThumbnailUrl != null
+                  ? `background:url(${item.serverThumbnailUrl});background-size:100%;background-repeat: no-repeat;`
+                  : `background:url(${item.imgUrl});background-size:100%;background-repeat: no-repeat;`
+              "
             >
               <div class="check_box" v-show="item.states == 2">
-                <n-checkbox size="medium" label=" " />
+                <n-checkbox
+                  size="medium"
+                  label=" "
+                  @click="handleCheck(item, item.showcheck)"
+                  :checked="item.showcheck"
+                />
               </div>
             </div>
-            <div class="content">
+            <div class="content" @click="goDetail(item)">
               <div class="title">
                 <n-ellipsis style="max-width: 8.5vw">
                   任务ID：{{ item.fromtaskid }}
@@ -501,7 +630,7 @@ function checkBottom() {
         </div>
       </div>
     </div>
-    <NotPassed ref="notPassModalRef" @success="reload" />
+    <NotPassed ref="notPassModalRef" @success="initData(1, 20)" />
     <RepeatModal
       ref="repeatModalRef"
       @reject="repeatBatchReject"
@@ -532,6 +661,15 @@ function checkBottom() {
   width: 100%;
   background: #fff;
   padding: 0px 24px 24px 24px;
+  .btn-approval {
+    width: 68px;
+    height: 28px;
+    cursor: pointer;
+  }
+
+  .btn-left {
+    margin-left: 16px;
+  }
   .icon-wrap {
     display: flex;
     align-items: center;
@@ -612,7 +750,26 @@ function checkBottom() {
       }
     }
   }
-
+  &-settings {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0px;
+    > div {
+      display: flex;
+      justify-content: space-between;
+      width: 20vw;
+      > div {
+        cursor: pointer;
+        font-size: 0.8rem;
+        font-family: PingFang SC, PingFang SC-Regular;
+        font-weight: bolder;
+        text-align: left;
+        color: #666666;
+        line-height: 0.8rem;
+      }
+    }
+  }
   .header_data {
     width: 100%;
   }
@@ -637,6 +794,7 @@ function checkBottom() {
       // margin-right: 20px;
       margin: 0 1% 0 1%;
       margin-bottom: 1rem;
+      cursor: pointer;
       .top {
         display: flex;
         flex-flow: row nowrap;
@@ -726,7 +884,7 @@ function checkBottom() {
   }
   .cotnet_wrapeer {
     width: 100%;
-    height: 70vh;
+    height: 67vh;
     //padding-right: 10px; /* 右侧内边距 */
     overflow: hidden; /* 默认隐藏滚动条 */
   }
-- 
2.39.3