feat: 批量操作功能布局

src/views/SnapshotCluster/ClusterResult/ClusterResult.vue

@@ -132,27 +132,38 @@
 
                                 <span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
                                 <!--修正组类型数据-->
-                                <a-popconfirm
-                                    title="将从本组中剔除，您确认吗？"
-                                    ok-text="是"
-                                    cancel-text="否"
-                                    @confirm="deletePersonRecord(person)"
-                                >
-                                  <a-tooltip placement="bottom">
-                                    <template #title>按住cmd或alt键可多选</template>
-                                    <span class="expandWord">剔除</span>
-                                  </a-tooltip>
-                                </a-popconfirm>
-                                <a-tooltip placement="bottom">
-                                  <template #title>按住cmd或alt键可多选</template>
-                                  <span class="expandWord" @click="movePersonRecord(person)">移动</span>
-                                </a-tooltip>
                                 <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span>
                                 <span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span>
 
                                 <el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
                                 人id:{{ '   ' + person.person_unid }}
                                 图片数量:{{ person.perrsonList.length }}
+
+                                <!--批量操作-->
+                                <div class="multiple-operation">
+                                  <el-button type="text" @click="handleMutipleOperation">
+                                    {{mutipleOperationText}}
+                                    <i class="el-icon-arrow-right el-icon--right"></i>
+                                  </el-button>
+                                  <!--批量子操作-->
+                                  <el-button type="text" :disabled="mutipleOperationDisabled" @click="movePersonRecord(person)">移动</el-button>
+                                  <a-popconfirm
+                                      title="将从本组中剔除，您确认吗？"
+                                      ok-text="是"
+                                      cancel-text="否"
+                                      @confirm="deletePersonRecord(person)"
+                                  >
+                                    <el-button type="text" :disabled="mutipleOperationDisabled">剔除</el-button>
+                                  </a-popconfirm>
+                                  <a-popconfirm
+                                      title="将彻底删除，您确认吗？"
+                                      ok-text="是"
+                                      cancel-text="否"
+                                      @confirm="deleteRealPersonRecord(person)"
+                                  >
+                                    <el-button type="text" :disabled="mutipleOperationDisabled">删除</el-button>
+                                  </a-popconfirm>
+                                </div>
                             </div>
                             <el-row v-for="row in getPagedList(person.perrsonList, 8)">
                                 <el-col :span="3" v-for="item in row">
@@ -593,8 +604,26 @@ export default {
           // isShowGroupEditor.value = true
           personGroupEditorRef.value.initDialog(data);
         }
+
+        // 批量操作
+        const isMultipleOperation = ref(false)
+        const handleMutipleOperation = () => {
+          isMultipleOperation.value = !isMultipleOperation.value
+          if (!isMultipleOperation.value) {
+            selectedPersonList.value = []
+          }
+        }
+        const mutipleOperationText = computed(() => {
+          return isMultipleOperation.value ? '取消操作' : '批量操作'
+        })
+        const mutipleOperationDisabled = computed(() => {
+          return !(isMultipleOperation.value && selectedPersonList.value.length > 0)
+        })
+        const isSelectedPerson = (id) => {
+          return selectedPersonList.value.some(item => item.id === id)
+        }
         // 剔除人员
-        const selectedPersonList = ref([])
+        const selectedPersonList = ref([]) // 批量操作，选中的图片
         const deletePersonRecord = (data) => {
           console.log('deletePersonRecord', data, selectedPersonList)
           if (selectedPersonList.value.length < 1) {
@@ -630,8 +659,36 @@ export default {
               }
           )
         }
-        const isSelectedPerson = (id) => {
-          return selectedPersonList.value.some(item => item.id === id)
+        // 删除人员
+        const deleteRealPersonRecord = (data) => {
+          console.log('deletePersonRecord', data, selectedPersonList)
+
+          const unidList = selectedPersonList.value.map(item => item.unid)
+          const params = {
+            unid: unidList.join(','),
+            personUnid: '',
+            countdate: selectedPersonList.value[0].counttime
+          }
+
+          // TODO: 需要增加方法
+          clusterResultApi.updateRecognition(params).then(
+              (r) => {
+                if(r.msg_code==200){
+                  ElMessage({
+                    message: `剔除成功`,
+                    type: 'success'
+                  })
+                  selectedPersonList.value = []
+                  // 刷新列表
+                  clickSearch()
+                } else {
+                  ElMessage({
+                    message: `剔除失败`,
+                    type: 'error'
+                  })
+                }
+              }
+          )
         }
         // 移动人员
         const personGroupMoverRef = ref();
@@ -675,7 +732,7 @@ export default {
         const handleClick = function(data, event){
           console.log('handleClick', event)
           // 多选
-          if (event.metaKey || event.altKey) {
+          if (isMultipleOperation.value) {
             selectedPersonList.value.push(data)
           } else {
             currentItemId.value = data.id
@@ -865,6 +922,12 @@ export default {
 			DetailDialogComparisonRef,
 			singleImgComparisonRef,
       personGroupMoverRef,
+
+          isMultipleOperation,
+          handleMutipleOperation,
+          mutipleOperationText,
+          mutipleOperationDisabled,
+          deleteRealPersonRecord,
         }
     }
 }
@@ -924,5 +987,9 @@ export default {
     .downBtn1{
         float: right;
     }
+    .multiple-operation {
+      display: inline-block;
+      margin-left: 20px;
+    }
 </style>