easydo-mes-web/src/views/system/user/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header @add="table_add"></sc-page-header>

        <el-container class="user-container">
            <el-aside width="310px">
                <el-header>
                    <el-input v-model="filterText" clearable placeholder="输入关键字进行过滤"></el-input>
                    <el-button title="重置部门" circle @click="dept_unset">
                        <template #icon><sc-iconify icon="iconoir:remove-link"></sc-iconify></template>
                    </el-button>
                </el-header>

                <el-main class="nopadding">
                    <el-scrollbar>
                        <el-tree ref="treeRef" node-key="id" :data="deptTree" :expand-on-click-node="false" highlight-current check-strictly :filter-node-method="filterNode" @node-click="data => nodeClick(data)">
                            <template #default="{ data }">
                                <vxe-text-ellipsis :id="data.id" :title="data.name" class="custom-tree-node" :content="data.name"></vxe-text-ellipsis>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </el-main>
            </el-aside>

            <scTable ref="xGridTable" :apiObj="$API.auth.user" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
                <template #action="{ row }">
                    <el-button type="primary" link @click="password_rest(row)">
                        <template #icon><sc-iconify icon="material-symbols:arrow-split"></sc-iconify></template>重置密码
                    </el-button>
                    <el-button type="primary" link @click="table_edit(row)">
                        <template #icon><sc-iconify icon="ant-design:edit-outlined"></sc-iconify></template>修改
                    </el-button>
                    <el-button type="primary" link @click="table_del(row)">
                        <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
                    </el-button>
                </template>
            </scTable>
        </el-container>
	</el-container>

    <user-detail v-if="dialog" ref="userRef" :deptTree="deptTree" @success="refreshTable" @closed="dialog = false"></user-detail>
</template>

<script setup>
import XEUtils from "xe-utils";

import API from "@/api";
import { mapFormItemInput } from "@/components/scTable/helper";
import userDetail from "./detail";

const filterText = ref("");
const deptTree = ref([]);
const treeRef = ref();

watch(() => filterText.value, value => treeRef.value.filter(value));
const filterNode = (value, data) => {
    if (!value) return true;
    return data.name.includes(value);
}

const nodeClick = data => {
    XEUtils.set(formConfig.data, "deptId", data.id);
    refreshTable();
}

const dept_unset = () => {
    treeRef.value.setCurrentKey();
    XEUtils.set(formConfig.data, "deptId", null);
    refreshTable();
}

const toolbarConfig = reactive({
    enabled: true,
    export: true
});

const formConfig = reactive({
    data: {},
    items: [
        mapFormItemInput("usernameLike", "用户名"),
        mapFormItemInput("nickNameLike", "用户昵称"),
        mapFormItemInput("phoneLike", "手机号")
    ]
});

const paramsColums = reactive([
    { column: "orderBy", defaultValue: "id_desc" },
    { column: "deptId" },
    { column: "usernameLike" },
    { column: "nickNameLike" },
    { column: "phoneLike" }
]);

const columns = reactive([
    { type: "seq", width: 60 },
    { type: "html", field: "username", title: "用户名", minWidth: 160, sortable: true },
    { type: "html", field: "nickName", title: "用户昵称", minWidth: 160, sortable: true },
    { type: "html", field: "dept.name", title: "所属部门", minWidth: 160, sortable: true },
    { type: "html", field: "gender", title: "性别", minWidth: 100, sortable: true },
    { type: "html", field: "phone", title: "手机号", minWidth: 120, sortable: true },
    { type: "html", field: "email", title: "邮箱", minWidth: 160, sortable: true },
    { visible: false, type: "html", field: "idcard", title: "身份证号", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.toStringJSON(row.features), "idcard") },
    { title: "操作", fixed: "right", width: 220, align: "center", slots: { default: "action" } }
]);

// 显示隐藏 筛选表单
const xGridTable = ref();
const refreshTable = (mode = "add") => xGridTable.value.searchData(mode);

const userRef = ref();
const dialog = ref(false);

const table_add = () => {
    dialog.value = true;
    nextTick(() => userRef.value?.open());
}

const table_edit = row => {
    dialog.value = true;
    nextTick(() => userRef.value?.setData(row));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该用户?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.auth.user.del(({ id })).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    }).catch(() => {});
}

const password_rest = ({ id, username }) => {
    ElMessageBox.confirm(`是否确认重置"${username}"密码?`, "重置密码", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.auth.user.resetPass(({ id })).then(() => {
            ElNotification.success({
                title: "提示",
                message: `密码已重置，密码为：123456`,
                duration: 1500
            });
        });
    }).catch(() => {});
}

const fetchDept = () => API.system.dept.get({ orderBy: "deptSort_asc" }).then(res => deptTree.value = XEUtils.toArrayTree(res, { parentKey: "pid" })).catch(() => deptTree.value = []);
fetchDept();
</script>

<style lang="scss" scoped>
.user-container {border-top: 1px solid var(--el-border-color-light);}
.user-container .el-aside {display: flex;flex-direction: column;}
.user-container .el-aside .el-header .el-button {margin-left: 10px;}
.user-container .el-aside .el-main {padding-top: 15px;padding-left: 15px;}
.user-container .el-aside + .el-main {padding-top: 15px;}

@media (max-width: 992px) {
    .aminui-main > .el-container > .el-container.user-container {display: block;margin-top: 0;border: none;}
    .user-container .el-aside {width: 100%;}
    .user-container .el-aside .el-main {padding-bottom: 15px;}
    .user-container .el-aside + .el-main {margin-top: 15px;}
}
</style>