<template>
|
<div class="main-box">
|
<TreeFilter
|
label="name"
|
:title="t('Person.companyList')"
|
:request-api="getUserDepartment"
|
@change="changeTreeFilter"
|
:labeltext="t('treeFilter.searchPlaceholder')"
|
:zhankai="t('treeFilter.expandAll')"
|
:zhedie="t('treeFilter.collapseAll')"
|
/>
|
<div class="table-box">
|
<ProTable
|
ref="proTable"
|
:columns="columns"
|
:request-api="getDepartmentIconList"
|
: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" plain :icon="CirclePlus" @click="openDrawer($t('Config.add'))">
|
{{ t("DepartmentIcon.addIcon") }}
|
</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>
|
<DepartmentIconDrawer ref="drawerRef" />
|
<ImportExcel ref="dialogRef" />
|
</div>
|
</div>
|
</template>
|
<script setup lang="tsx" name="useTreeFilter">
|
import { ref, reactive } from "vue";
|
import { User } from "@/api/interface";
|
import { useHandleData } from "@/hooks/useHandleData";
|
import ProTable from "@/components/ProTable/index.vue";
|
import { useAuthButtons } from "@/hooks/useAuthButtons";
|
import TreeFilter from "@/components/TreeFilter/index.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import DepartmentIconDrawer from "@/views/proTable/components/hxzk/department/DepartmentIconDrawer.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 {
|
getDepartmentIconList,
|
addDepartmentIcon,
|
editDepartmentIcon,
|
deleteDepartmentIcon
|
} from "@/api/modules/hxzk/department/departmentIcon";
|
import { useI18n } from "vue-i18n";
|
|
// 使用 useI18n 获取 i18n 实例
|
const { t } = useI18n({
|
useScope: "global"
|
});
|
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
const { BUTTONS } = useAuthButtons();
|
// 如果表格需要初始化请求参数，直接定义传给 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: "iconname",
|
label: t("DepartmentIcon.name"),
|
search: { el: "input", span: 3 },
|
width: 120,
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain">
|
{scope.row.iconname}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "iconadress",
|
label: t("DepartmentIcon.icon"),
|
render: scope => {
|
return <ElImage style={{ width: "30px", height: "30px" }} src={scope.row.iconadress} />;
|
}
|
},
|
{
|
prop: "company",
|
label: t("Person.company"),
|
render: scope => {
|
return <el-tag size="large">{scope.row.company}</el-tag>;
|
}
|
},
|
{
|
prop: "username",
|
label: t("DepartmentIcon.creator"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain" type="danger">
|
{scope.row.username}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "addtime",
|
label: t("DepartmentIcon.updateTime"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain">
|
{scope.row.addtime}
|
</el-tag>
|
);
|
}
|
},
|
{ prop: "operation", label: t("Config.operation"), width: 260 }
|
]);
|
|
// 删除用户信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(
|
deleteDepartmentIcon,
|
{ id: params.id, iconname: params.iconname },
|
t("DepartmentIcon.deleteConfirm", { name: params.iconname }),
|
t
|
);
|
proTable.value?.getTableList();
|
};
|
|
// 批量添加用户
|
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
|
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === "查看",
|
row: { ...row },
|
api: title === `${t("Config.add")}` ? addDepartmentIcon : title === `${t("Config.update")}` ? editDepartmentIcon : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
</script>
|
