<template>
|
<div class="table-box">
|
<!-- 根据布局模式渲染不同的组件 -->
|
|
<ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
|
<!-- Expand -->
|
<template #expand="scope">
|
{{ scope.row }}
|
</template>
|
<template #Sign="scope">
|
<span style="margin-left: 10px">
|
<b>{{ t("historyAttendance.radarId") }} </b>
|
<el-divider direction="vertical" border-style="dashed" />{{ scope.row.achorid }}
|
</span>
|
</template>
|
<template #Context="scope">
|
<el-tabs>
|
<el-tab-pane :label="t('historyAttendance.radarInfo')">
|
<p>{{ t("historyAttendance.boundDevice") }}：{{ scope.row.name }}</p>
|
<p>{{ t("historyAttendance.distance") }}：{{ scope.row.fzdis }}</p>
|
<p>{{ t("historyAttendance.cardNumber") }}：{{ scope.row.ccid }}</p>
|
<!-- 基本信息字段 -->
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<template #Footer="scope">
|
<span>
|
<b>{{ t("Config.time") }}：</b>{{ scope.row.addtime }}
|
</span>
|
</template>
|
<!-- 表格操作 -->
|
<template #operation="scope">
|
<el-button type="primary" link :icon="VideoPlay" @click="handleViewTrack(scope.row)">
|
{{ $t("historyAttendance.viewTrack") }}
|
</el-button>
|
</template>
|
</ProTable>
|
|
<UserDrawer ref="drawerRef" />
|
<ImportExcel ref="dialogRef" />
|
|
<!-- 轨迹回放对话框 -->
|
<TrackReplayDialog v-model="trackDialogVisible" :track-data="currentTrackData" />
|
</div>
|
</template>
|
|
<script setup lang="tsx" name="useProTable">
|
import { ref, reactive } from "vue";
|
import { User } from "@/api/interface";
|
import {} from "@/hooks/useHandleData";
|
// import { ElMessage } from "element-plus";
|
import ProTable from "@/components/ProTable/card.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import { VideoPlay } from "@element-plus/icons-vue";
|
import { getAttendanceList } from "@/api/modules/hxzk/statistics/historyAttendance";
|
import { useI18n } from "vue-i18n";
|
|
// 使用 useI18n 获取 i18n 实例
|
const { t } = useI18n({
|
useScope: "global"
|
});
|
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
|
// 轨迹回放对话框相关
|
const trackDialogVisible = ref(false);
|
const currentTrackData = ref({});
|
|
// 处理查看轨迹
|
const handleViewTrack = row => {
|
// 设置当前轨迹数据
|
currentTrackData.value = {
|
tagid: row.tagid,
|
name: row.name,
|
intime: row.intime,
|
outtime: row.outtime
|
};
|
|
// 显示轨迹回放对话框
|
trackDialogVisible.value = true;
|
};
|
|
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
const initParam = reactive({ type: 1 });
|
const getTableList = (params: any) => {
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
// 提取 tableList 对象
|
const { pageSize, pageNum, name, tagid, intime, ...restParams } = newParams;
|
const tableList = { pageSize, pageNum };
|
|
// 提取 person 对象
|
const { ...restParams2 } = restParams;
|
const kaoqing = { name, tagid, intime };
|
|
// 处理 createTime 字段
|
if (restParams2.createTime) {
|
restParams2.startTime = restParams2.createTime[0];
|
restParams2.endTime = restParams2.createTime[1];
|
delete restParams2.createTime;
|
}
|
|
// 合并所有参数
|
const finalParams = {
|
...restParams2,
|
tableList,
|
kaoqing
|
};
|
|
return getAttendanceList(finalParams);
|
};
|
|
// 表格配置项
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
{ type: "index", fixed: "left", width: 70 },
|
{
|
prop: "area",
|
label: t("historyAttendance.area")
|
},
|
{
|
prop: "name",
|
label: t("Person.name"),
|
search: { el: "input", span: 3 }
|
},
|
{
|
prop: "bumen",
|
label: t("Person.department")
|
},
|
{
|
prop: "tagid",
|
search: { el: "input", span: 3 },
|
label: t("Tag.tagId")
|
},
|
{
|
prop: "intime",
|
label: t("historyAttendance.entryTime"),
|
search: {
|
el: "date-picker",
|
label: t("Config.time"),
|
span: 3,
|
props: {
|
rangeSeparator: t("SearchForm.rangeSeparator"),
|
startPlaceholder: t("SearchForm.startTime"),
|
endPlaceholder: t("SearchForm.endTime")
|
}
|
}
|
},
|
{
|
prop: "outtime",
|
label: t("historyAttendance.exitTime")
|
},
|
{
|
prop: "alltime",
|
label: t("historyAttendance.stayTime")
|
},
|
{
|
prop: "operation",
|
label: t("historyAttendance.operation"),
|
fixed: "right",
|
width: 120
|
}
|
]);
|
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
|
</script>
|
