<template>
|
<div class="main-box">
|
<TreeFilter label="name" :title="t('ThreeMap.companyList')" :request-api="getUserDepartment" @change="changeTreeFilter" />
|
<div class="table-box">
|
<ProTable
|
ref="proTable"
|
:columns="columns"
|
:request-api="getThreeMapList"
|
:init-param="initParam"
|
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
|
:border="true"
|
:stripe="true"
|
:highlight-current-row="true"
|
header-align="center"
|
size="default"
|
>
|
<!-- 表格操作 -->
|
<template #operation="scope">
|
<el-button-group>
|
<el-button type="primary" :icon="View" size="small" @click="openDrawer(t('Config.view'), scope.row)">
|
{{ t("Config.view") }}
|
</el-button>
|
<el-button
|
v-if="BUTTONS.edit"
|
type="success"
|
:icon="EditPen"
|
size="small"
|
@click="openDrawer(t('Config.update'), scope.row)"
|
>
|
{{ t("Config.update") }}
|
</el-button>
|
</el-button-group>
|
</template>
|
</ProTable>
|
<ThreeMapDrawer 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 { 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 ThreeMapDrawer from "@/views/proTable/components/hxzk/map/ThreeMapDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import { EditPen, View } from "@element-plus/icons-vue";
|
import { getUserDepartment } from "@/api/modules/hxzk/user/user";
|
import { getThreeMapList, editThreeMap } from "@/api/modules/hxzk/map/threemap";
|
import { useAuthButtons } from "@/hooks/useAuthButtons";
|
|
const { t } = useI18n({ useScope: "global" });
|
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: 60,
|
align: "center",
|
fixed: "left"
|
},
|
{
|
prop: "mapposition",
|
label: t("ThreeMap.initialCoordinates"),
|
width: 180,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "alt",
|
label: t("ThreeMap.viewHeight"),
|
width: 120,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "heading",
|
label: t("ThreeMap.headingAngle"),
|
width: 120,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "pitch",
|
label: t("ThreeMap.pitchAngle"),
|
width: 120,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "pinlv",
|
label: t("ThreeMap.positioningFrequency"),
|
width: 150,
|
align: "center",
|
showOverflowTooltip: true,
|
render: scope => {
|
// 将毫秒转换为秒显示
|
const value = scope.row.pinlv;
|
if (value && !isNaN(value)) {
|
return (
|
<el-tag type="primary" effect="light">
|
{(parseFloat(value) / 1000).toFixed(1)} {t("ThreeMap.seconds")}
|
</el-tag>
|
);
|
}
|
return (
|
<el-tag type="info" effect="plain">
|
-
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "company",
|
label: t("ThreeMap.belongCompany"),
|
width: 160,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "username",
|
label: t("ThreeMap.creator"),
|
width: 120,
|
align: "center",
|
showOverflowTooltip: true
|
},
|
{
|
prop: "operation",
|
label: t("Config.operation"),
|
width: 200,
|
align: "center",
|
fixed: "right"
|
}
|
]);
|
|
// 批量添加用户
|
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
|
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof ThreeMapDrawer> | null>(null);
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === "查看",
|
row: { ...row },
|
api: title === `${t("Config.add")}` ? editThreeMap : title === `${t("Config.update")}` ? editThreeMap : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.main-box {
|
min-height: calc(100vh - 120px);
|
padding: 20px;
|
background-color: #f5f7fa;
|
.table-box {
|
overflow: hidden;
|
background-color: #ffffff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
:deep(.el-table) {
|
border-radius: 8px;
|
.el-table__header-wrapper {
|
th {
|
font-weight: 600;
|
color: #606266;
|
background-color: #f8f9fa;
|
border-bottom: 2px solid #e4e7ed;
|
}
|
}
|
.el-table__body-wrapper {
|
tr {
|
transition: background-color 0.3s;
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
}
|
td {
|
border-bottom: 1px solid #f0f0f0;
|
}
|
}
|
}
|
:deep(.el-button-group) {
|
.el-button {
|
border-radius: 4px;
|
&:first-child {
|
border-top-right-radius: 0;
|
border-bottom-right-radius: 0;
|
}
|
&:last-child {
|
margin-left: -1px;
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
