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-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" :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" @success="refreshTable" @closed="dialog = false"></user-detail>
</template>

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

import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemInput, mapFormItemTenant } from "@/components/scTable/helper";
import userDetail from "./detail";

import store from "@/store";
watch(() => store.state.tenant.tenantId, () => (fetchDept(), refreshTable()));

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 => {
    if (XEUtils.get(formConfig.data, "deptId", null) === data.id) {
        treeRef.value.setCurrentKey();
        XEUtils.set(formConfig.data, "deptId", null);
    } else XEUtils.set(formConfig.data, "deptId", data.id);

    refreshTable();
}

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

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

const columns = reactive([
    { type: "seq", width: 60 },
    { visible: computed(() => store.state.tenant.tenantId === "0"), type: "html", field: "tenant.name", title: "所属租户", minWidth: 200, sortable: true },
    { type: "html", field: "username", title: "用户名", minWidth: 160, sortable: true },
    { type: "html", field: "nickName", title: "用户昵称", minWidth: 160, sortable: true },
    { type: "html", field: "roleNames", title: "角色", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.map(row.roleList, item => item.name).join() },
    { 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, slots: { default: "action" } }
]);

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

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-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>