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

<template>
  <div>
    <app-search
      v-model="searchForm"
      label-width="60px"
      @submit="resetPagination"
    >
      <el-col :span="6">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入姓名" />
        </el-form-item>
      </el-col>
    </app-search>
    <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="userIdCard" label="身份证号" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="departmentName" label="部门" />
      <el-table-column label="类型" width="190">
        <template #default="{ row }">
          {{ fnGetUserType(row) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="190">
        <template #default="{ row }">
          <el-button type="primary" text link @click="fnView(row.userId)">
            查看
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="fnAddOrEdit(row.userId, 'edit')"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="fnResetPassword(row.userId)"
          >
            重置密码
          </el-button>
          <el-button type="primary" text link @click="fnDelete(row.userId)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #button>
        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
          新增
        </el-button>
        <el-button type="danger" @click="fnDeleteMultiple">删除</el-button>
      </template>
    </app-table>
    <add
      v-model:visible="addOrEditDialog.visible"
      v-model:form="addOrEditDialog.form"
      :type="addOrEditDialog.type"
      @get-data="resetPagination"
    />
    <view-info v-model:visible="viewDialog.visible" :info="viewDialog.info" />
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
import {
  setUserDelete,
  getUserView,
  getUserList,
  setUserResetPassword,
} from "@/request/user_management.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import AppTable from "@/components/table/index.vue";
import AppSearch from "@/components/search/index.vue";
import Add from "./components/add.vue";
import ViewInfo from "./components/view.vue";
import { setRoleDelete } from "@/request/system_management.js";
import useListData from "@/assets/js/useListData.js";

const { list, pagination, searchForm, getData, resetPagination, tableRef } =
  useListData(getUserList);
const addOrEditDialog = ref({
  visible: false,
  type: "",
  form: {
    name: "",
    username: "",
    mobile: "",
    degree: "",
    type: "",
    email: "",
    departmentId: "",
  },
});
const viewDialog = ref({
  visible: false,
  info: {},
});
const fnGetUserType = (row) => {
  const type = row.type.split(",");
  const typeList = [
    { id: "1", name: "销售" },
    { id: "2", name: "服务" },
    { id: "3", name: "专家" },
  ];
  return typeList
    .filter((item) => type.includes(item.id.toString()))
    .map((item) => item.name)
    .join(",");
};
const fnResetPassword = debounce(
  1000,
  async (userId) => {
    await ElMessageBox.confirm(`是否重置密码为Aqsc@2024？`, {
      type: "warning",
    });
    await setUserResetPassword({ userId });
    ElMessage.success("重置密码成功");
    await resetPagination();
  },
  { atBegin: true }
);
const fnDelete = debounce(
  1000,
  async (userId) => {
    await ElMessageBox.confirm(`确定要删除吗？`, {
      type: "warning",
    });
    await setUserDelete({ userIds: [userId] });
    ElMessage.success("删除成功");
    await resetPagination();
  },
  { atBegin: true }
);
const fnDeleteMultiple = debounce(
  1000,
  async () => {
    const selectionData = tableRef.value.getSelectionRows();
    if (selectionData.length === 0) {
      ElMessage.warning("请选择要删除的数据");
      return;
    }
    await ElMessageBox.confirm(`确定要删除吗？`, {
      type: "warning",
    });
    const userIds = selectionData.map((item) => item.userId);
    await setRoleDelete({ userIds });
    ElMessage.success("删除成功");
    await resetPagination();
  },
  { atBegin: true }
);
const fnAddOrEdit = async (userId, type) => {
  addOrEditDialog.value.visible = true;
  addOrEditDialog.value.type = type;
  await nextTick();
  if (type === "edit") {
    const resData = await getUserView({ userId });
    resData.user.roleIdList = resData.user.rolesId.split(",");
    resData.user.type = resData.user.type.split(",");
    addOrEditDialog.value.form = resData.user;
  }
};
const fnView = async (userId) => {
  const resData = await getUserView({ userId });
  viewDialog.value.info = resData.user;
  viewDialog.value.visible = true;
};
</script>

<style scoped></style>