feat : 通讯录批量删除

src/fvcomponents/fvSearchForm/index.vue

@@ -34,8 +34,8 @@
           <el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
             {{ showMore ? '收起' : '展开' }}
           </el-button>
-          <el-button type="primary" @click="getValues" :icon="Search">查询</el-button>
-          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
+          <el-button type="primary" @click="getValues" >查询</el-button>
+          <el-button @click="handleReset" >重置</el-button>
         </el-form-item>
       </el-col>
     </el-row>

src/views/phone-traffic-management/address-book-management/index.vue

@@ -1,19 +1,22 @@
 <template>
   <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
-  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
-  <fvFormDialog ref="formDialogRef" :isVisited="showAddOrEditAddressBookDialog"  :title="dialogTitle" :dialogType="dialogType"
+  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
+           @selectionChange="selectionChange"></fvTable>
+  <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
                 :form-schema="formSchema" :form-rules="formRules" @dialogCancel="handleCancel"
                 @dialogSubmit="handleSubmit"></fvFormDialog>
 </template>
 
 <script setup lang="jsx">
 import fvSelect from '@/fvcomponents/fvSelect/index.vue'
-import {addContact,editContact,getContactDetail,deleteContact} from "@/api/address-book";
+import {addContact, editContact, getContactDetail, deleteContact} from "@/api/address-book";
 import {ElMessage, ElMessageBox} from "element-plus";
 
 const router = useRouter()
 const tableIns = ref()
 const formDialogRef = ref()
+const delBtnDisabled = ref(true)
+const contactIds = ref("");
 const dialogTitle = ref("");
 const dialogType = ref("");
 const formRules = reactive({
@@ -131,6 +134,10 @@ const searchConfig = reactive([
 ])
 const tableConfig = reactive({
   columns: [
+    {
+      type: 'selection',
+      prop: 'selection'
+    },
     {
       prop: 'index',
       type: 'index',
@@ -178,12 +185,12 @@ const tableConfig = reactive({
       fixed: 'right',
       width: 150,
       showOverflowTooltip: false,
-      currentRender: ({ row, index }) => {
+      currentRender: ({row, index}) => {
         let btn = []
-        btn.push({ label: '编辑', func: () => handleEdit(row), type: 'primary' })
-        btn.push({ label: '删除', func: () => handleDelete(row), type: 'danger' })
+        btn.push({label: '编辑', func: () => handleEdit(row), type: 'primary'})
+        btn.push({label: '删除', func: () => handleSingleDelete(row), type: 'danger'})
         return (
-            <div style={{ width: '100%' }}>
+            <div style={{width: '100%'}}>
               {
                 btn.map(item => (
                     <el-button
@@ -204,7 +211,8 @@ const tableConfig = reactive({
   api: '/contact/list',
   params: {},
   btns: [
-    {name: '新增', key: 'add', type: 'primary', icon: 'Plus'},
+    {name: '新增', key: 'add', type: 'primary'},
+    {name: '删除', key: 'delete', type: 'danger'},
   ]
 })
 const search = (val) => {
@@ -223,6 +231,9 @@ const headBtnClick = (key) => {
     case 'add':
       handleAdd()
       break;
+    case 'delete':
+      handleMoreDelete()
+      break;
   }
 }
 
@@ -242,7 +253,7 @@ const handleEdit = (row) => {
   dialogTitle.value = "编辑通讯录";
   dialogType.value = "edit";
 }
-const getDetail=(row)=>{
+const getDetail = (row) => {
   getContactDetail(row.contactsId).then(res => {
     if (res.code === 1000) {
       ElMessage.success(res.msg)
@@ -255,20 +266,49 @@ const getDetail=(row)=>{
     }
   })
 }
-const handleDelete = (row) => {
+
+const selectionChange = (selection) => {
+  if (selection.length !== 0) {
+    delBtnDisabled.value = false
+    contactIds.value = selection.map(item => item.contactsId).join()
+  } else {
+    contactIds.value=''
+    delBtnDisabled.value = true
+  }
+}
+const deleteContactMethod = (contactsId) => {
+  deleteContact(contactsId).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      tableIns.value.refresh()
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+const handleMoreDelete = () => {
+  console.info("🚀 ~method:contactIds -----", contactIds.value)
+
+    if(contactIds.value){
+      ElMessageBox.confirm(`确认删除选择的通讯录吗?`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+      deleteContactMethod(contactIds.value)
+      })
+    }else{
+      ElMessage.warning("请选择要删除的通讯录")
+    }
+
+}
+const handleSingleDelete = (row) => {
   ElMessageBox.confirm(`确认删除姓名为${row.name}的通讯录吗?`, '系统提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    deleteContact(row.contactsId).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success(res.msg)
-        tableIns.value.refresh()
-      } else {
-        ElMessage.error(res.msg)
-      }
-    })
+    deleteContactMethod(row.contactsId)
   })
 }