审批列表增加一键全选

src/views/bpm/task/process-list/index.vue

@@ -44,6 +44,19 @@
           </el-col>
         </el-row>
       </el-form>
+      <div
+        v-if="selectableTaskIds.length"
+        class="batch-select-bar"
+        @click.stop
+      >
+        <el-checkbox
+          :model-value="isAllSelectableSelected"
+          :indeterminate="isPartialSelectableSelected"
+          @change="onSelectAllChange"
+        >
+          全选当前列表（{{ selectedSelectableCount }}/{{ selectableTaskIds.length }}）
+        </el-checkbox>
+      </div>
       <div v-infinite-scroll="load" class="infinite-list scrollLeft" v-loading="loading" v-if="list.length">
         <el-checkbox-group v-model="processInstanceIds">
           <el-card shadow="never" v-for="(item, index) in list" :key="index" :class="['card-item', {'selected': currItem.processInstanceId == item.processInstanceId}]" @click="handleClickCard(item)">
@@ -86,7 +99,7 @@ import { message } from 'ant-design-vue'
 defineOptions({ name: 'BpmProcessList' })
 const { base_url } = config
 const activeName = ref('1')
-const processInstanceIds = ref([])
+const processInstanceIds = ref<any[]>([])
 const route = useRoute()
 const loading = ref(false)
 const list = ref<any>([])
@@ -105,6 +118,7 @@ const handleClick = (tab) => {
   activeName.value = tab.paneName
   queryParams.queryType = tab.paneName
   list.value = []
+  processInstanceIds.value = []
   queryParams.pageNo = 1
   getList()
 
@@ -154,6 +168,7 @@ const handleClickCard = (item: any) => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
+  processInstanceIds.value = []
   getList()
 }
 
@@ -176,6 +191,37 @@ const updateRead = async (item) => {
 }
 
 const processDetailRef = ref()
+
+/** 左侧列表中可进行批量审批的项（status == 1）对应的任务 id */
+const selectableTaskIds = computed(() =>
+  list.value.filter((item) => item.status == 1).map((item) => item.id)
+)
+
+const selectedSelectableCount = computed(() =>
+  selectableTaskIds.value.filter((id) => processInstanceIds.value.includes(id)).length
+)
+
+const isAllSelectableSelected = computed(
+  () =>
+    selectableTaskIds.value.length > 0 &&
+    selectedSelectableCount.value === selectableTaskIds.value.length
+)
+
+const isPartialSelectableSelected = computed(
+  () =>
+    selectedSelectableCount.value > 0 &&
+    selectedSelectableCount.value < selectableTaskIds.value.length
+)
+
+const onSelectAllChange = (checked: boolean) => {
+  if (checked) {
+    processInstanceIds.value = [...new Set([...processInstanceIds.value, ...selectableTaskIds.value])]
+  } else {
+    const drop = new Set(selectableTaskIds.value)
+    processInstanceIds.value = processInstanceIds.value.filter((id) => !drop.has(id))
+  }
+}
+
 // 批量通过
 const handlePass = () => {
   batchLoading.value = true
@@ -344,6 +390,13 @@ onMounted(async () => {
     font-size: 26px;
     color: #ccc;
   }
+  .batch-select-bar{
+    padding: 8px 12px;
+    margin-top: 8px;
+    background-color: #fff;
+    border-radius: 8px;
+    font-size: 14px;
+  }
   .scrollLeft{
     padding: 10px 0;
     height: 78vh;