feat: 移除文件夹增加确认功能

src/assets/icons/exclamation-solid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+	<path fill="#f6c042" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07M9 5v6h2V5zm0 8v2h2v-2z" />
+</svg>

src/layout/components/Header/ConfrimModal.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+
+const emit = defineEmits<{
+  (e: 'commit')
+}>()
+const props = defineProps({
+  selectedTotal: {
+    type: Number,
+    default: () => 0,
+  }
+})
+
+const show = ref(false)
+const cardStyle = {
+  'width': '450px',
+  '--n-padding-top': '20px',
+  '--n-padding-bottom': '20px',
+  '--n-padding-left': '20px',
+  '--n-padding-right': '20px',
+}
+
+function showModal() {
+  show.value = true
+}
+
+function closeModal() {
+  show.value = false
+}
+
+defineExpose({
+  showModal,
+})
+
+async function handleSumbit(e: MouseEvent) {
+  e.preventDefault()
+  closeModal()
+  emit('commit')
+}
+
+onBeforeMount(async () => { })
+</script>
+
+<template>
+  <n-modal v-model:show="show" transform-origin="center">
+    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <div class="wrapper">
+        <div class="wrapper-header">
+          <SvgIcon name="exclamation-solid" size="16" />
+          <span class="wrapper-left">确认提示</span>
+        </div>
+        <div class="wrapper-content">
+          已选<span class="highlighted-text">{{ props.selectedTotal }}</span>张图片，确认将所选照片移除可疑夹吗？
+        </div>
+      </div>
+      <template #footer>
+        <div class="wrapper-footer">
+          <n-button type="info" @click="handleSumbit">
+            确定
+          </n-button>
+          <n-button secondary style="margin-left:15px" @click="closeModal">
+            取消
+          </n-button>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.wrapper {
+  &-header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+  }
+
+  &-left {
+    font-weight: 600;
+    font-size: 16px;
+    margin-left: 15px;
+  }
+
+  &-content {
+    margin-left: 15px;
+    color: #8e8e8e;
+
+    .highlighted-text {
+      color: #5b85f8;
+      margin: 0 5px;
+    }
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
+  border: 0px;
+}
+
+::v-deep(.n-card > .n-card-header) {
+  --n-padding-top: 0px;
+  --n-padding-bottom: 12px;
+}
+
+::v-deep(.n-divider:not(.n-divider--vertical)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+</style>

src/layout/components/Header/RecycleModal.vue

@@ -12,6 +12,7 @@ import { debounce } from 'lodash-es'
 import { audit } from '@/api/task/task'
 import NotPassed from '@/components/Approval/NotPassed.vue'
 import { off, on } from '@/utils/domUtils'
+import ConfrimModal from "./ConfrimModal.vue"
 
 const cardStyle = {
   '--n-padding-bottom': '40px',
@@ -59,6 +60,7 @@ const show = ref(false)
 const selectedApproveItems = ref<any[]>([]); // 审核批量选中
 const dialog = useDialog();
 let processItems: any[] = [];
+const confrimModalRef = ref<any>();
 
 const layout = debounce(() => {
   if (!show.value)
@@ -252,14 +254,8 @@ function closeModal(event: MouseEvent) {
   selectedApproveItems.value = []
   show.value = false
 }
-
-async function remove() {
-  if ( !selectIds.value|| selectIds.value.length === 0) {
-    message.error('至少选中一个')
-    return
-  }
-
-  const ids =  selectIds.value.join(',')
+async function commit() {
+  const ids = selectIds.value.join(',')
   const res = await removeFiles({ pictureid: ids })
   if (res.code === 'OK') {
     message.success('移除成功')
@@ -269,6 +265,13 @@ async function remove() {
     layout()
   }
 }
+ function remove() {
+  if ( !selectIds.value|| selectIds.value.length === 0) {
+    message.error('至少选中一个')
+    return
+  }
+  confrimModalRef?.value?.showModal()
+}
 
 
 function setBatch(value) {
@@ -288,11 +291,9 @@ defineExpose({
   showModal,
 })
 
-const checked = ref(false)
-
 const notPassModalRef = ref(null)
 const showActions = computed(() => {
-  console.log('selectedApproveItems',selectedApproveItems)
+  console.log('selectedApproveItems', selectedApproveItems)
   return selectedApproveItems.value.length > 0 && batch;
 });
 
@@ -385,7 +386,7 @@ function doAudit(param: any) {
 function reloadList() {
   refreshHandler()
 }
-function refreshHandler(){
+function refreshHandler() {
   reset()
   featchList()
 }
@@ -394,14 +395,10 @@ function refreshHandler(){
 
 <template>
   <div>
-    <n-modal
-      v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
-      @after-enter="afterEnter" @after-leave="afterLeave"
-    >
-    <n-card
-    :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge" role="dialog"
-    aria-modal="true"
-    >
+    <n-modal v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
+      @after-enter="afterEnter" @after-leave="afterLeave">
+      <n-card :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge"
+        role="dialog" aria-modal="true">
         <div class="wrapper">
           <div class="wrapper-m32">
             <SvgIcon name="recycle" size="16" />
@@ -436,45 +433,37 @@ function refreshHandler(){
                   批量审批
                 </div>
                 <div v-show="showActions" class="batch">
-                    <n-button text @click="setBatch(false)">
-                      <template #icon>
-                        <SvgIcon name="revoke" />
-                      </template>
-                      返回
-                    </n-button>
-                    <div style="cursor: pointer; margin-left: 16px" @click.stop="rejectHandler">
-                      <SvgIcon width="64" height="28" name="a1" />
-                    </div>
-                    <SvgIcon size="24" name="vs" />
-                    <div style="cursor: pointer" @click.stop="approvalHandler">
-                      <SvgIcon width="64" height="28" name="a2" />
-                    </div>
+                  <n-button text @click="setBatch(false)">
+                    <template #icon>
+                      <SvgIcon name="revoke" />
+                    </template>
+                    返回
+                  </n-button>
+                  <div style="cursor: pointer; margin-left: 16px" @click.stop="rejectHandler">
+                    <SvgIcon width="64" height="28" name="a1" />
+                  </div>
+                  <SvgIcon size="24" name="vs" />
+                  <div style="cursor: pointer" @click.stop="approvalHandler">
+                    <SvgIcon width="64" height="28" name="a2" />
                   </div>
+                </div>
               </div>
             </div>
 
             <div ref="el" class="scroll">
               <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
               <div ref="masonryRef" class="grid">
-                <div
-                  v-for="(item, index) in listData" :key="item.id" :data-id="item.id"
-                  :class="{ 'grid-item-selected': isSelected(item.id) }" :style="{ height: gridHeight }" class="grid-item"
-                >
+                <div v-for="(item, index) in listData" :key="item.id" :data-id="item.id"
+                  :class="{ 'grid-item-selected': isSelected(item.id) }" :style="{ height: gridHeight }"
+                  class="grid-item">
                   <!-- <img
                     class="wrapper-content-item-img"
                     :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
                   > -->
-                  <n-image
-                    :src="item.imgurl"
-                    class="img "
-                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
-                  />
-                  <n-checkbox
-                    v-if="batch"
-                    v-model:checked="item.checked"
-                    style="position:absolute;left:20px;top:20px" @click.prevent
-                    @update:checked="onCheckChange($event, item)"
-                  />
+                  <n-image :src="item.imgurl" class="img "
+                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
+                  <n-checkbox v-if="batch" v-model:checked="item.checked" style="position:absolute;left:20px;top:20px"
+                    @click.prevent @update:checked="onCheckChange($event, item)" />
                   <!-- <div class="percent">
                     {{ getPercent(item.pictureid, item) }}
                   </div> -->
@@ -491,6 +480,7 @@ function refreshHandler(){
       </n-card>
     </n-modal>
     <NotPassed ref="notPassModalRef" @success="reloadList" />
+    <ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length"/>
 
   </div>
 </template>
@@ -502,11 +492,9 @@ function refreshHandler(){
   user-select: none;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-
-  /* Standard syntax */
 }
 
-.remove{
+.remove {
   cursor: pointer;
 }
 
@@ -538,7 +526,7 @@ function refreshHandler(){
   }
 }
 
-.img{
+.img {
   border-radius: 8px;
 }
 
@@ -553,7 +541,7 @@ function refreshHandler(){
     padding: 24px 0px 12px 0px;
   }
 
-  &-m32{
+  &-m32 {
     margin-left: 32px;
   }
 
@@ -636,21 +624,23 @@ function refreshHandler(){
   }
 }
 
-.wrapper-content-form-button{
+.wrapper-content-form-button {
   cursor: pointer;
 }
 
 .img-fit {
-      width: 100%;
-      overflow: hidden;
-    }
-    .img-full {
-      width: 100%;
-      overflow: hidden;
-      ::v-deep(img) {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
+  width: 100%;
+  overflow: hidden;
+}
+
+.img-full {
+  width: 100%;
+  overflow: hidden;
+
+  ::v-deep(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 </style>

src/views/worksheet/content/Content.vue

@@ -607,11 +607,6 @@ function reloadList() {
             <div class="pass-status" v-else-if="item.historyStates === 3">
               <SvgIcon name="no-pass-icon" style="width:52;height:24px" />
             </div>
-            <!-- 
-              重复标签
-            <div class="pass-status" v-if="item.historyStates === 1">
-              <SvgIcon name="repeat-icon" style="width:52;height:24px" />
-            </div> -->
             <div v-show="overTask && overTask.id === item.id" class="action">
               <SvgIcon style="cursor: pointer" name="t1" @click.stop="approvalHandler" />
               <SvgIcon style="cursor: pointer;margin-left: 40px;" name="t2" @click.stop="singleRejectHandler(item)" />