docking-vue/src/views/user_management/user/index.vue

<template>
  <div style="gap: 20px">
    <app-search v-model="searchForm" :options @submit="resetPagination" />
    <app-table
      ref="tableRef"
      v-model:pagination="pagination"
      :data="list"
      row-key="userId"
      show-selection
      @get-data="getData"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="departmentName" label="部门"> </el-table-column>
      <el-table-column v-slot="{ row }" label="操作" width="150">
        <el-button
          type="primary"
          text
          link
          @click="
            router.push({
              path: '/user_management/user/edit',
              query: { userId: row.userId },
            })
          "
        >
          修改
        </el-button>
        <el-button
          type="primary"
          text
          link
          @click="fnResetPassword(row.userId, row.username)"
        >
          重置密码
        </el-button>
        <el-button
          type="danger"
          text
          link
          @click="fnDelete(row.userId, row.username)"
        >
          删除
        </el-button>
      </el-table-column>
      <template #button>
        <el-button
          type="primary"
          @click="router.push({ path: '/user_management/user/add' })"
        >
          新建
        </el-button>
        <el-button type="danger" @click="fnDelete('', '')">
          批量删除
        </el-button>
      </template>
    </app-table>
  </div>
</template>

<script setup>
import AppSearch from "@/components/search/index.vue";
import { getRoleListAll } from "@/request/system_management.js";
import { ref } from "vue";
import { useRouter } from "vue-router";
import useListData from "@/hooks/useListData.js";
import {
  getUserList,
  setUserDelete,
  setUserResetPassword,
} from "@/request/user_management.js";
import AppTable from "@/components/table/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const roleList = ref([]);
const { list, pagination, searchForm, getData, resetPagination, tableRef } =
  useListData(getUserList);
const options = [
  { key: "name", label: "姓名" },
  { key: "username", label: "用户名" },
];
(async () => {
  const resData = await getRoleListAll();
  roleList.value = resData.roleList;
})();
const fnResetPassword = async (userId, name) => {
  await ElMessageBox.confirm(
    `"确定要将【${name}】的密码重置为[Aqsc@0335]吗?"`,
    { type: "warning" }
  );
  await setUserResetPassword({ userId });
  ElMessage.success("重置成功");
  resetPagination();
};
const fnDelete = async (userId, name) => {
  let ids = [];
  if (userId) {
    await ElMessageBox.confirm(`"确定要删除【${name}】吗?"`, {
      type: "warning",
    });
    ids.push(userId);
  } else {
    const selectData = tableRef.value.getSelectionRows();
    ids = selectData.map((item) => item.userId);
    if (ids.length === 0) {
      return ElMessage.error("请选择要删除的数据");
    }
    await ElMessageBox.confirm(
      `"确定要删除【${selectData
        .map((item) => item.username)
        .join("、")}】吗?"`,
      {
        type: "warning",
      }
    );
  }
  await setUserDelete({ userIds: ids });
  ElMessage.success("删除成功");
  resetPagination();
};
</script>

<style scoped></style>