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 type="primary" @click="getValues" >查询</el-button>
-          <el-button @click="handleReset" :icon="Refresh">重置</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,7 +1,8 @@
 <template>
   <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
-  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
+  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
-  <fvFormDialog ref="formDialogRef" :isVisited="showAddOrEditAddressBookDialog"  :title="dialogTitle" :dialogType="dialogType"
+           @selectionChange="selectionChange"></fvTable>
+  <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
                 :form-schema="formSchema" :form-rules="formRules" @dialogCancel="handleCancel"
                 @dialogSubmit="handleSubmit"></fvFormDialog>
 </template>
@@ -14,6 +15,8 @@ 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',
@@ -181,7 +188,7 @@ const tableConfig = reactive({
       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: () => handleSingleDelete(row), type: 'danger'})
         return (
             <div style={{width: '100%'}}>
               {
@@ -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;
   }
 }
 
@@ -255,13 +266,18 @@ const getDetail=(row)=>{
     }
   })
 }
-const handleDelete = (row) => {
+
-  ElMessageBox.confirm(`确认删除姓名为${row.name}的通讯录吗?`, '系统提示', {
+const selectionChange = (selection) => {
-    confirmButtonText: '确定',
+  if (selection.length !== 0) {
-    cancelButtonText: '取消',
+    delBtnDisabled.value = false
-    type: 'warning'
+    contactIds.value = selection.map(item => item.contactsId).join()
-  }).then(() => {
+  } else {
-    deleteContact(row.contactsId).then(res => {
+    contactIds.value=''
+    delBtnDisabled.value = true
+  }
+}
+const deleteContactMethod = (contactsId) => {
+  deleteContact(contactsId).then(res => {
     if (res.code === 1000) {
       ElMessage.success(res.msg)
       tableIns.value.refresh()
@@ -269,6 +285,30 @@ const handleDelete = (row) => {
       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(() => {
+    deleteContactMethod(row.contactsId)
   })
 }