用户管理模块增删改查接口对接完成

src/api/system/user/index.js

  * 删除用户
  * params
  */
-export function deleteUser(id) {
+export function deleteUser(idList) {
   return request({
-    url: `/user/delete${[id]}`,
+    url: `/user/delete/${idList}`,
     method: 'DELETE'
   })
 }

src/components/Search/index.vue

     /* 初始化搜索表单信息 */
     function initForm() {
       data.info.forEach((item) => {
-        form.value[item.key] = ''
+        form.value[item.key] = null
       })
     }
 

src/views/system/user/index.vue

     <n-card>
       <headSearch :info="data.info" @search="handleSearch" />
       <data-table
+        ref="tableRef"
         :columns="data.columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
             @positive-click="deleteUsers('plural')"
           >
             <template #trigger>
-              <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+              <n-button type="primary"> 删除 </n-button>
             </template>
-            确认要批量删除吗？
+            确认要删除选中数据吗？
           </n-popconfirm>
         </template>
       </data-table>
     v-if="data.modalShow"
     v-model:visible="data.modalShow"
     :row="rowData"
-    @done="loadDataTable"
+    @done="handleSearch"
   />
 </template>
 
                   props: {
                     negativeText: '取消',
                     positiveText: '确认',
-                    onPositiveClick: deleteSingle.bind(row)
+                    onPositiveClick: deleteSingle.bind(null, row.id)
                   }
                 }
               ],
       data.modalShow = true
     }
 
-    const params = ref({
-      page: 1,
-      limit: 10
-    })
+    const params = ref({})
+
     const tableRef = ref()
 
     function handleSearch(data) {
       }
       return await getUserList(_params)
     }
+
+    // 新增用户
     function handleUser() {
       data.rowData = {}
       data.modalShow = true
     }
 
-    function deleteUsers(type) {
-      console.log(type)
-      // deleteUser({ data: [] }).then((res) => {
-      //   if (res.code === 0) {
-      //     $message.success(res.data.msg)
-      //     this.reload()
-      //   } else {
-      //     $message.error(res.data.msg)
-      //   }
-      // })
+    // 选择表格数据
+    const selectedIds = ref([])
+    function handleCheck(rowKeys) {
+      selectedIds.value = rowKeys
     }
-    function deleteSingle(type, row) {
-      console.log(type, row, '++000+++')
+    // 批量删除用户
+    function deleteUsers() {
+      if (selectedIds.value.length) {
+        deleteData(selectedIds.value)
+      } else {
+        $message.warning('请至少选中一条数据')
+      }
+    }
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData([id])
     }
 
-    const checkedRows = ref([])
-    function handleCheck(rowKeys) {
-      checkedRows.value = rowKeys
-      console.log(rowKeys)
+    // 删除用户接口
+    function deleteData(data) {
+      deleteUser(data).then((res) => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.data.msg)
+        } else {
+          $message.error(res.data.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {
       loadDataTable,
       handleUser,
       ...toRefs(data),
+      tableRef,
       handleSearch,
       deleteUsers,
-      handleCheck
+      handleCheck,
+      selectedIds,
+      deleteData
     }
   },
   methods: {

src/views/system/user/info.js

 import { getRoleAll } from '@/api/system/role/index'
 import { dataToSelect } from '@/utils/handleData.js'
-const res = await getRoleAll()
-const rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+import { ref } from 'vue'
+const rolesOptions = ref([])
+async function getRolesOption() {
+  const res = await getRoleAll()
+  rolesOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
+}
+getRolesOption()
 const data = [
   {
-    label: '用户姓名',
-    key: 'realname',
+    label: '用户账号',
+    key: 'username',
     props: {
-      placeholder: '请输入角色名称'
+      placeholder: '请输入用户账号'
     }
   },
   {
     label: '用户姓名',
     key: 'realname',
     props: {
-      placeholder: '请输入角色名称'
+      placeholder: '请输入用户姓名'
     }
   },
   {
     type: 'select',
     key: 'roleId',
     props: {
+      placeholder: '请选择用户角色',
       options: rolesOptions
     }
   }