<template>
|
<div class="main-box">
|
<TreeFilter label="name" :title="t('TwoMap.companyList')" :request-api="getUserDepartment" @change="changeTreeFilter" />
|
<div class="table-box">
|
<ProTable
|
ref="proTable"
|
:columns="columns"
|
:request-api="getTwoMapList"
|
:init-param="initParam"
|
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
|
>
|
<!-- 表格操作 -->
|
<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" link :icon="EditPen" @click="openDrawer(t('Config.update'), scope.row)">{{
|
t("Config.update")
|
}}</el-button>
|
<el-button type="primary" 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 { useI18n } from "vue-i18n";
|
import ProTable from "@/components/ProTable/index.vue";
|
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 { Delete, EditPen, View } from "@element-plus/icons-vue";
|
import { getUserDepartment } from "@/api/modules/hxzk/user/user";
|
import { getTwoMapList } from "@/api/modules/hxzk/map/twomap";
|
|
const { t } = useI18n({ useScope: "global" });
|
|
// 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: "mapname", label: t("TwoMap.mapName"), width: 120 },
|
{ prop: "floor", label: t("TwoMap.layer") },
|
{ prop: "baoliu5", label: t("TwoMap.topLeft") },
|
{ prop: "baoliu6", label: t("TwoMap.topRight") },
|
{ prop: "baoliu7", label: t("TwoMap.bottomRight") },
|
{ prop: "baoliu8", label: t("TwoMap.bottomLeft") },
|
{ prop: "company", label: t("TwoMap.belongCompany") },
|
{ prop: "addtime", label: t("TwoMap.updateTime") }
|
]);
|
|
// 删除地图信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(
|
deleteTwoMap,
|
{ id: params.id, mapname: params.mapname },
|
t("TwoMap.deleteConfirm", { name: params.mapname })
|
);
|
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 === "新增" ? addTwoMap : title === "编辑" ? editTwoMap : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
</script>
|
