feat:超出添加提示

src/views/task/content/Content.vue

@@ -148,12 +148,16 @@ function handleKeydown(event) {
       // 清除已经设置的定时器（如果有的话）
       clearTimeout(keyPressTimer);
       const item = taskDetailInfo.value;
-      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
+      if (
+        item?.userapprove?.statshis === 2 ||
+        item?.userapprove?.statshis == 3
+      ) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false) overTask.value = item;
+      if (validate([item]) == null && batch.value === false)
+        overTask.value = item;
       // 执行想要的操作
       approvalHandler();
 
@@ -179,12 +183,16 @@ function handleKeydown(event) {
       // 清除已经设置的定时器（如果有的话）
       clearTimeout(keyPressTimer);
       const item = taskDetailInfo.value;
-      if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
+      if (
+        item?.userapprove?.statshis === 2 ||
+        item?.userapprove?.statshis == 3
+      ) {
         overTask.value = null;
         return;
       }
 
-      if (validate([item]) == null && batch.value === false) overTask.value = item;
+      if (validate([item]) == null && batch.value === false)
+        overTask.value = item;
       // 执行想要的操作
       const modal = unref(notPassModalRef)! as any;
       modal.showModal([taskDetailInfo.value]);
@@ -257,7 +265,8 @@ function approvalHandler(items?: any) {
     processItems = [cloneItem];
   }
 
-  if (items !== undefined && !(items instanceof PointerEvent)) processItems = items;
+  if (items !== undefined && !(items instanceof PointerEvent))
+    processItems = items;
 
   const msg = validate(processItems);
 
@@ -511,7 +520,9 @@ function notPassSuccess(param) {
 function reloadList(param, text) {
   // 修改左侧状态
   const id = currentTaskId();
-  const hasCurrentId = param.flowTaskInfoList.find((item) => item.formId === id);
+  const hasCurrentId = param.flowTaskInfoList.find(
+    (item) => item.formId === id
+  );
   finalStore.setListKey();
   if (hasCurrentId) emit("setAsideItemName", text);
 
@@ -545,7 +556,8 @@ function overTaskHandelr(item: any) {
     return;
   }
 
-  if (validate([item]) == null && batchtwo.value === false) overTasktwo.value = item;
+  if (validate([item]) == null && batchtwo.value === false)
+    overTasktwo.value = item;
 }
 function closePassno() {
   console.log(notPassModalRef.value);
@@ -579,7 +591,8 @@ function checkBottom() {
   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
   // 获取视口的内部高度
-  const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+  const clientHeight =
+    window.innerHeight || document.documentElement.clientHeight;
 
   // 获取整个文档的高度
   const scrollHeight = document.documentElement.scrollHeight;
@@ -648,8 +661,18 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
         <template v-if="!isDetail">
-          <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
+          <SvgIcon
-          <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
+            size="22"
+            class="forward"
+            name="arrow-left"
+            @click="backHandler"
+          />
+          <SvgIcon
+            size="22"
+            class="back"
+            name="arrow-right"
+            @click="forwardHandler"
+          />
         </template>
       </div>
       <div v-if="!isDetail" class="right">
@@ -785,7 +808,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                 }
               : {
                   height: '92vh',
-                  //flex: 1,
+                  flex: 1,
 
                   'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
                 }
@@ -842,13 +865,25 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
           />
         </div>
         <div class="mark">
-          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
+          <SvgIcon
+            v-show="taskDetailInfo?.iztrueorfalse === 0"
+            size="128"
+            name="jia"
+          />
         </div>
         <div class="mark">
-          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
+          <SvgIcon
+            v-show="taskDetailInfo?.iztrueorfalse === 0"
+            size="128"
+            name="jia"
+          />
         </div>
         <div class="mark">
-          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
+          <SvgIcon
+            v-show="taskDetailInfo?.iztrueorfalse === 1"
+            size="128"
+            name="zhen"
+          />
         </div>
         <div class="big-mark" />
         <div class="preview" @click="previewHandler">
@@ -858,7 +893,11 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
           <n-grid x-gap="12" y-gap="10" :cols="12">
             <n-gi span="4" class="gi1">
               <span>
-                <img class="icon-status" src="@/assets/images/task/status.png" alt="" />t
+                <img
+                  class="icon-status"
+                  src="@/assets/images/task/status.png"
+                  alt=""
+                />
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
@@ -877,23 +916,39 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
-              <span class="value num">{{ totalCount }}<span class="unit">张</span> </span>
+              <span class="value num"
+                >{{ totalCount }}<span class="unit">张</span>
+              </span>
               <span class="label">相似匹配</span>
             </n-gi>
           </n-grid>
         </div>
         <div class="time">
           <div class="time-item">
-            <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+            <SvgIcon
+              class="svg-time"
+              color="#FFF"
+              size="16"
+              name="camera-time"
+            />
 
-            <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
+            <span>{{
+              taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-"
+            }}</span>
           </div>
           <div class="time-item time-item2">
-            <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+            <SvgIcon
+              class="svg-time"
+              color="#FFF"
+              size="16"
+              name="submit-time"
+            />
 
             <span>{{
               taskDetailInfo?.ocrPicture?.submitDateTimestamp
-                ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp))
+                ? formatToDateHMS(
+                    Number(taskDetailInfo.ocrPicture.submitDateTimestamp)
+                  )
                 : "-"
             }}</span>
           </div>
@@ -994,7 +1049,12 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                 />
                 <div class="time">
                   <div class="time-item">
-                    <SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="8"
+                      name="camera-time"
+                    />
                     <span>{{
                       item.photoDateTimestamp
                         ? formatToDateHMS(Number(item.photoDateTimestamp))
@@ -1002,7 +1062,12 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                     }}</span>
                   </div>
                   <div class="time-item time-item2">
-                    <SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="8"
+                      name="submit-time"
+                    />
                     <span>{{
                       item.submitDateTimestamp
                         ? formatToDateHMS(Number(item.submitDateTimestamp))
@@ -1019,8 +1084,18 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
               </div>
             </div>
             <n-scrollbar v-else style="max-height: 100%">
-              <div :style="{ fontSize: '22px', fontWeight: 500, color: '#0D0B22' }">
+              <div
-                {{ taskDetailInfo.fromtaskname }}
+                style="
+                  font-size: 22px;
+                  font-weight: 500;
+                  color: #0d0b22;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  width: 20vw;
+                "
+              >
+                <n-ellipsis style="max-width: 20VW">  {{ taskDetailInfo.fromtaskname }}</n-ellipsis>
               </div>
               <div class="tags">
                 <div
@@ -1082,10 +1157,16 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                       {{ item[0].value }}
                     </div>
                   </div>
-                  <div v-if="!(item[0].label == '拜访终端名称')" class="viewlabel">
+                  <div
+                    v-if="!(item[0].label == '拜访终端名称')"
+                    class="viewlabel"
+                  >
                     {{ item[0].label }}
                   </div>
-                  <div v-if="!(item[0].label == '拜访终端名称')" class="viewvalue">
+                  <div
+                    v-if="!(item[0].label == '拜访终端名称')"
+                    class="viewvalue"
+                  >
                     {{ item[0].value }}
                   </div>
                   <div
@@ -1128,7 +1209,11 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
     <div v-else class="imgbottom">
       <div
         v-show="imgbigshow"
-        style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0"
+        style="
+          display: flex;
+          justify-content: space-between;
+          padding: 12px 0px 3px 0;
+        "
       >
         <div>
           <span
@@ -1152,16 +1237,36 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
         >
           <div style="cursor: pointer" @click="sortHandler('createdate')">
             <span>时间排序</span>
-            <SvgIcon v-if="true" style="margin-left: 5px" name="sort" size="12" />
+            <SvgIcon
-            <SvgIcon v-else style="margin-left: 5px" name="active-sort" size="12" />
+              v-if="true"
+              style="margin-left: 5px"
+              name="sort"
+              size="12"
+            />
+            <SvgIcon
+              v-else
+              style="margin-left: 5px"
+              name="active-sort"
+              size="12"
+            />
           </div>
           <div
             style="margin-left: 15px; cursor: pointer"
             @click="sortHandler('similarityScore')"
           >
             <span>相似度排序</span>
-            <SvgIcon v-if="true" style="margin-left: 5px" name="sort" size="12" />
+            <SvgIcon
-            <SvgIcon v-else style="margin-left: 5px" name="active-sort" size="12" />
+              v-if="true"
+              style="margin-left: 5px"
+              name="sort"
+              size="12"
+            />
+            <SvgIcon
+              v-else
+              style="margin-left: 5px"
+              name="active-sort"
+              size="12"
+            />
           </div>
         </div>
       </div>
@@ -1226,7 +1331,12 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
             />
             <div class="time">
               <div class="time-item">
-                <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+                <SvgIcon
+                  class="svg-time"
+                  color="#FFF"
+                  size="16"
+                  name="camera-time"
+                />
                 <span>{{
                   item.photoDateTimestamp
                     ? formatToDateHMS(Number(item.photoDateTimestamp))
@@ -1234,7 +1344,12 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                 }}</span>
               </div>
               <div class="time-item time-item2">
-                <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+                <SvgIcon
+                  class="svg-time"
+                  color="#FFF"
+                  size="16"
+                  name="submit-time"
+                />
                 <span>{{
                   item.submitDateTimestamp
                     ? formatToDateHMS(Number(item.submitDateTimestamp))
@@ -1242,7 +1357,10 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
                 }}</span>
               </div>
             </div>
-            <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+            <div
+              :class="{ 'percent-red': item.similarityScore === 100 }"
+              class="percent"
+            >
               {{ item.similarityScore }}<span class="percent-unit">%</span>
             </div>
           </div>
@@ -1329,8 +1447,16 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
         </div>
       </div> -->
     </div>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
+    <NotPassed
-    <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
+      ref="notPassModalRef"
+      @success="notPassSuccess"
+      @close="closePassno"
+    />
+    <BatchModal
+      ref="batchModalRef"
+      @reject="rejectHandler"
+      @approval="approvalHandler"
+    />
     <CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
   </div>
 </template>
@@ -2039,7 +2165,11 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
     .small-mark {
       width: 100%;
       height: 53px;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.44) 88%);
+      background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.01),
+        rgba(0, 0, 0, 0.44) 88%
+      );
       border-radius: 0px 8px 8px 8px;
       position: absolute;
       left: 0;