<template>
|
<div class="main-box">
|
<TreeFilter label="name" :title="t('User.companyList')" :request-api="getUserDepartment" @change="changeTreeFilter" />
|
<div class="table-box">
|
<ProTable
|
ref="proTable"
|
:columns="columns"
|
:request-api="getRoleList"
|
:init-param="initParam"
|
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
|
>
|
<!-- 表格 header 按钮 -->
|
<template #tableHeader>
|
<el-button type="primary" v-if="BUTTONS.add" :icon="CirclePlus" @click="openDrawer(t('Config.add'))">
|
{{ t("role.addRole") }}
|
</el-button>
|
</template>
|
<!-- 表格操作 -->
|
<template #operation="scope">
|
<el-button type="primary" link :icon="View" @click="openDrawer(t('Config.view'), scope.row)">
|
{{ t("Config.view") }}
|
</el-button>
|
<el-button type="primary" v-if="BUTTONS.edit" link :icon="EditPen" @click="openDrawer(t('Config.update'), scope.row)">
|
{{ t("Config.update") }}
|
</el-button>
|
<el-button type="primary" v-if="BUTTONS.delete" link :icon="Delete" @click="deleteAccount(scope.row)">
|
{{ t("Config.delete") }}
|
</el-button>
|
</template>
|
</ProTable>
|
<RoleDrawer ref="drawerRef" />
|
<ImportExcel ref="dialogRef" />
|
</div>
|
</div>
|
</template>
|
<script setup lang="tsx" name="useTreeFilter">
|
import { ref, reactive } from "vue";
|
import { useI18n } from "vue-i18n";
|
import { User } from "@/api/interface";
|
import { useHandleData } from "@/hooks/useHandleData";
|
import ProTable from "@/components/ProTable/index.vue";
|
import TreeFilter from "@/components/TreeFilter/index.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import RoleDrawer from "@/views/proTable/components/hxzk/user/RoleDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
|
import { getUserDepartment } from "@/api/modules/hxzk/user/user";
|
import { getRoleList, addRole, editRole, deleteRole } from "@/api/modules/hxzk/user/role";
|
import { useAuthButtons } from "@/hooks/useAuthButtons";
|
|
const { t } = useI18n();
|
const { BUTTONS } = useAuthButtons();
|
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
|
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
const initParam = reactive({ departmentId: "" });
|
|
// 树形筛选切换
|
const changeTreeFilter = (val: string) => {
|
proTable.value!.pageable.pageNum = 1;
|
initParam.departmentId = val;
|
};
|
|
// 表格配置项
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
{ type: "index", label: "", width: 80 },
|
{
|
prop: "name",
|
label: t("role.role"),
|
width: 120,
|
search: { el: "input", span: 3 },
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain" type="danger">
|
{scope.row.name}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "username",
|
label: t("role.creator"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain" type="primary">
|
{scope.row.username}
|
</el-tag>
|
);
|
}
|
},
|
{ prop: "companyname", label: t("User.companyName") },
|
{
|
prop: "addrole",
|
label: t("role.addPermission"),
|
render: scope => {
|
const displayText = scope.row.addrole === true ? t("role.hasPermission") : t("role.noPermission");
|
return (
|
<el-tag size="large" effect="plain" type="primary">
|
{displayText}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "editrole",
|
label: t("role.editPermission"),
|
render: scope => {
|
const displayText = scope.row.editrole === true ? t("role.hasPermission") : t("role.noPermission");
|
return (
|
<el-tag size="large" effect="plain" type="primary">
|
{displayText}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "deleterole",
|
label: t("role.deletePermission"),
|
render: scope => {
|
const displayText = scope.row.deleterole === true ? t("role.hasPermission") : t("role.noPermission");
|
return (
|
<el-tag size="large" effect="plain" type="primary">
|
{displayText}
|
</el-tag>
|
);
|
}
|
},
|
{ prop: "addtime", label: t("role.updateTime") },
|
{ prop: "operation", width: 250, label: t("Config.operation") }
|
]);
|
|
// 删除用户信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(deleteRole, { id: params.id, name: params.name }, t("role.deleteConfirm", { name: params.name }), t);
|
proTable.value?.getTableList();
|
};
|
|
// 批量添加用户
|
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
|
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof RoleDrawer> | null>(null);
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === t("Config.view"),
|
row: { ...row },
|
api: title === t("Config.add") ? addRole : title === t("Config.update") ? editRole : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
</script>
|
