add batch delete user token

src/api/user_token.js

@@ -14,3 +14,11 @@ export function remove (data) {
     data,
   })
 }
+
+export function batchRemove (data) {
+  return request({
+    url: '/user_token/batchDelete',
+    method: 'post',
+    data,
+  })
+}

src/views/user/token.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { list, remove } from '@/api/user_token'
+import { batchRemove, list, remove } from '@/api/user_token'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { T } from '@/utils/i18n'
@@ -36,7 +36,7 @@ export function useRepositories () {
   }
 
   const del = async (row) => {
-    const cf = await ElMessageBox.confirm(T('Confirm?', {param: T('Logout')}), {
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Logout') }), {
       confirmButtonText: T('Confirm'),
       cancelButtonText: T('Cancel'),
       type: 'warning',
@@ -52,11 +52,29 @@ export function useRepositories () {
     }
   }
 
+  const batchDelete = async (ids) => {
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('BatchDelete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await batchRemove({ ids }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
   return {
     listRes,
     listQuery,
     getList,
     handlerQuery,
     del,
+    batchDelete,
   }
 }

src/views/user/token.vue

@@ -13,12 +13,14 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">{{ T('Filter')}}</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toBatchDelete">{{ T('BatchDelete') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
-      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+      <el-table :data="listRes.list" v-loading="listRes.loading" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" width="50"/>
         <el-table-column prop="id" label="id" align="center" width="100"/>
         <el-table-column :label="T('Owner')" align="center">
           <template #default="{row}">
@@ -56,7 +58,7 @@
 </template>
 
 <script setup>
-  import { onActivated, onMounted, watch } from 'vue'
+  import { onActivated, onMounted, ref, watch } from 'vue'
   import { loadAllUsers } from '@/global'
   import { useRepositories } from '@/views/user/token.js'
   import { T } from '@/utils/i18n'
@@ -70,6 +72,7 @@
     getList,
     handlerQuery,
     del,
+    batchDelete,
   } = useRepositories()
 
   onMounted(getList)
@@ -85,6 +88,17 @@
     const now = new Date().getTime()
     return row.expired_at * 1000 < now
   }
+
+  const multipleSelection = ref([])
+  const handleSelectionChange = (val) => {
+    multipleSelection.value = val
+  }
+  const toBatchDelete = () => {
+    if (multipleSelection.value.length === 0) {
+      return
+    }
+    batchDelete(multipleSelection.value.map(v => v.id))
+  }
 </script>
 
 <style scoped lang="scss">