<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="getDepartmentList"
|
: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("Department.addDepartment") }}
|
</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>
|
|
<DepartmentDrawer 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 { useAuthButtons } from "@/hooks/useAuthButtons";
|
import ProTable from "@/components/ProTable/index.vue";
|
import TreeFilter from "@/components/TreeFilter/index.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import DepartmentDrawer from "@/views/proTable/components/hxzk/person/DepartmentDrawer.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 { getDepartmentList, addDepartment, editDepartment, deleteDepartment } from "@/api/modules/hxzk/department/department";
|
import localImage from "../../../assets/images/notData.png";
|
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: "departmentname",
|
label: t("Department.name"),
|
width: 120,
|
search: { el: "input", span: 3 }
|
},
|
{ prop: "baoliu1", label: t("Department.manager") },
|
{ prop: "baoliu2", label: t("Department.managerPhone") },
|
{
|
prop: "baoliu3",
|
label: t("Department.icon"),
|
render: scope => {
|
// 默认的本地图片路径，确保这个路径是正确的
|
const defaultImage = localImage; // 替换为您的默认图片路径
|
// 拼接完整的图片 URL，或者为null的情况提供默认图片
|
const imageUrl = scope.row.baoliu3 || defaultImage;
|
return (
|
<img
|
src={imageUrl}
|
width="30"
|
height="30"
|
alt={t("Department.icon")}
|
style={{ cursor: "pointer" }} // 添加这一行设置鼠标指针样式
|
onError={e => {
|
// 当图片加载失败时，也替换为默认图片
|
e.target.src = defaultImage;
|
}}
|
/>
|
);
|
}
|
},
|
{
|
prop: "baoliu8",
|
label: t("Department.bgColor"),
|
render: scope => {
|
return (
|
<div
|
style={{
|
height: "20px",
|
backgroundColor: scope.row.baoliu8,
|
borderRadius: "4px",
|
border: "1px solid #dcdfe6"
|
}}
|
/>
|
);
|
}
|
},
|
{
|
prop: "baoliu5",
|
label: t("Department.creator"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain" type="danger">
|
{scope.row.baoliu5}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "company",
|
label: t("Person.company"),
|
render: scope => {
|
return <el-tag size="large">{scope.row.company}</el-tag>;
|
}
|
},
|
{ prop: "addtime", label: t("Department.updateTime") },
|
{ prop: "operation", label: t("Config.operation"), width: 260 }
|
]);
|
|
// 删除部门信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(
|
deleteDepartment,
|
{ id: params.id, departmentname: params.departmentname },
|
t("Department.deleteConfirm", { name: params.departmentname }),
|
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")}` ? addDepartment : title === `${t("Config.update")}` ? editDepartment : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
</script>
|
