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,13 +254,7 @@ function closeModal(event: MouseEvent) {
   selectedApproveItems.value = []
   show.value = false
 }
-
+async function commit() {
-async function remove() {
-  if ( !selectIds.value|| selectIds.value.length === 0) {
-    message.error('至少选中一个')
-    return
-  }
-
   const ids = selectIds.value.join(',')
   const res = await removeFiles({ pictureid: ids })
   if (res.code === 'OK') {
@@ -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,8 +291,6 @@ defineExpose({
   showModal,
 })
 
-const checked = ref(false)
-
 const notPassModalRef = ref(null)
 const showActions = computed(() => {
   console.log('selectedApproveItems', selectedApproveItems)
@@ -394,14 +395,10 @@ function refreshHandler(){
 
 <template>
   <div>
-    <n-modal
+    <n-modal v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
-      v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
+      @after-enter="afterEnter" @after-leave="afterLeave">
-      @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-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" />
@@ -456,25 +453,17 @@ function refreshHandler(){
             <div ref="el" class="scroll">
               <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
               <div ref="masonryRef" class="grid">
-                <div
+                <div v-for="(item, index) in listData" :key="item.id" :data-id="item.id"
-                  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-selected': isSelected(item.id) }" :style="{ height: gridHeight }" class="grid-item"
+                  class="grid-item">
-                >
                   <!-- <img
                     class="wrapper-content-item-img"
                     :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
                   > -->
-                  <n-image
+                  <n-image :src="item.imgurl" class="img "
-                    :src="item.imgurl"
+                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
-                    class="img "
+                  <n-checkbox v-if="batch" v-model:checked="item.checked" style="position:absolute;left:20px;top:20px"
-                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
+                    @click.prevent @update:checked="onCheckChange($event, item)" />
-                  />
-                  <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,8 +492,6 @@ function refreshHandler(){
   user-select: none;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-
-  /* Standard syntax */
 }
 
 .remove {
@@ -644,9 +632,11 @@ function refreshHandler(){
   width: 100%;
   overflow: hidden;
 }
+
 .img-full {
   width: 100%;
   overflow: hidden;
+
   ::v-deep(img) {
     width: 100%;
     height: 100%;

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)" />