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";
@@ -22,6 +22,7 @@ const total = ref(0);
 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 = 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) => {
+    item.showcheck = false;
     if (isValidTimestamp(item.createdate)) {
       item.createdate = formatToDateHMS(item.createdate);
-  }});
+    }
+  });
 
   tableData.value = chunk(tableData.value, 4);
 }
@@ -96,32 +141,36 @@ 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 newlist = [];
-let oldlist= tableData.value
+  let oldlist = tableData.value;
   if (oldlist.length > 0) {
     oldlist.map((item) => {
-    console.log(item)
+      console.log(item);
       if (item.length > 0) {
         item.map((itemx: any) => {
-  newlist.push(itemx)
+          itemx.showcheck = false;
-})
+          newlist.push(itemx);
+        });
       }
-  })
+    });
     data.map((item) => {
-newlist.push(item)
+      item.showcheck = false;
-  })
+      newlist.push(item);
-  
+    });
   } else {
-  newlist=data
+    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);
@@ -129,12 +178,13 @@ console.log(tableData.value)
   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)) {
+  if (typeof value !== "number" || !Number.isInteger(value)) {
     return false; // 首先确保值是一个整数数字
   }
   const date = new Date(value);
@@ -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);
 }
@@ -196,12 +248,36 @@ function actionHandler(action: any, row: any) {
       singleApproval(row);
       break;
     case "reject":
-      rejectHandler([row]);
+      rejectHandler(row);
       break;
     default:
       break;
   }
 }
+// 审核通过
+function doAudit(param: any, row: any) {
+  dialog.info({
+    title: "确认提示",
+    content: "确认给该任务审批为【通过】吗?",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: () => {
+      audit(param).then((res) => {
+        const { code } = res;
+        if (code === "OK") {
+          message.success(res.message);
+          //changecardstatus(3, row);
+          initData(1, 20);
+          num = 1;
+          reload();
+        } else {
+          message.error(res.message);
+        }
+      });
+    },
+    onNegativeClick: () => {},
+  });
+}
 // 单个审批通过
 function singleApproval(row) {
   console.log(row);
@@ -222,37 +298,55 @@ function singleApproval(row) {
   };
   doAudit(param, row);
 }
-
+// 批量通过
-// 审核通过
+function batchApproval() {
-function doAudit(param: any, row: any) {
+  const items: any = selectionIds.value;
-  dialog.info({
+  const msg = validate(items);
-    title: "确认提示",
+  function validate(items: any[]) {
-    content: "确认给该任务审批为【通过】吗?",
+    if (items.length === 0) return "至少选中一个任务";
-    positiveText: "确定",
+    return null;
-    negativeText: "取消",
+  }
-    onPositiveClick: () => {
+  if (msg !== null) {
-      audit(param).then((res) => {
+    message.error(msg);
-        const { code } = res;
+    return;
-        if (code === "OK") {
-          message.success(res.message);
-          //changecardstatus(3, row);
-         initData(1,20);
-         num=1
-          reload();
-        } else {
-          message.error(res.message);
   }
+  console.log(items);
+  const list: any = [];
+  items.forEach((item) => {
+    list.push({
+      formId: item.id,
+      taskId: item.taskId,
+      taskName: item.fromtaskname,
     });
-    },
-    onNegativeClick: () => {},
   });
+
+  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)
+      query(num, 20);
       //  fetchData(); // 接近底部时加载更多数据
     }
   }, 500);
 }
-
 </script>
 
 <template>
@@ -395,6 +490,31 @@ function checkBottom() {
     <div class="header_data">
       <DataHeader :hasColor="true" />
     </div>
+    <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"
@@ -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; /* 默认隐藏滚动条 */
   }