<template>
|
<div class="table-box">
|
<!-- 根据布局模式渲染不同的组件 -->
|
|
<ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
|
<template #tableHeader>
|
<el-button type="primary" v-if="BUTTONS.add" plain :icon="CirclePlus" @click="openDrawer(t('Config.add'))">
|
{{ t("video.addMonitor") }}
|
</el-button>
|
</template>
|
<!-- Expand -->
|
<template #expand="scope">
|
{{ scope.row }}
|
</template>
|
<template #Sign="scope">
|
<span style="margin-left: 10px">
|
<b>{{ t("Tag.tagId") }}</b>
|
<el-divider direction="vertical" border-style="dashed" />{{ scope.row.tagId }}
|
</span>
|
</template>
|
<template #power="scope">
|
<VueUiGizmo :config="config" :dataset="scope.row.power" />
|
</template>
|
<template #Context="scope">
|
<el-tabs>
|
<el-tab-pane :label="t('video.tagInfo')">
|
<p>
|
{{ t("Config.type") }}：<el-tag effect="plain">{{ scope.row.type }}</el-tag>
|
</p>
|
<p>
|
{{ t("Person.power") }}：<el-tag effect="plain">{{ scope.row.power }}</el-tag>
|
</p>
|
<p>
|
{{ t("Tag.version") }}：<el-tag effect="plain">{{ scope.row.version }}</el-tag>
|
</p>
|
<!-- 基本信息字段 -->
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<template #Footer="scope">
|
<span>
|
<b>{{ t("Config.status") }}：</b>
|
<el-tag :type="getStatusType(scope.row.anchormode)">{{ getStatusText(scope.row.anchormode) }}</el-tag>
|
</span>
|
</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>
|
|
<videoDrawer ref="drawerRef" />
|
<ImportExcel ref="dialogRef" />
|
</div>
|
</template>
|
|
<script setup lang="tsx" name="useProTable">
|
import { ref, reactive } from "vue";
|
import { User } from "@/api/interface";
|
import {} from "@/hooks/useHandleData";
|
import { useHandleData } from "@/hooks/useHandleData";
|
import { useI18n } from "vue-i18n";
|
|
import ProTable from "@/components/ProTable/card.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import videoDrawer from "@/views/proTable/components/hxzk/video/videoDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import { EditPen, Delete, View } from "@element-plus/icons-vue";
|
import { getVideoList, addVideo, editVideo, deleteVideo } from "@/api/modules/hxzk/video/video";
|
import { VueUiGizmo } from "vue-data-ui";
|
import "vue-data-ui/style.css";
|
import { useAuthButtons } from "@/hooks/useAuthButtons";
|
|
// 使用 useI18n 获取 i18n 实例
|
const { t } = useI18n({
|
useScope: "global"
|
});
|
|
const { BUTTONS } = useAuthButtons();
|
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
|
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
const initParam = reactive({ type: 1 });
|
const getTableList = (params: any) => {
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
// 提取 tableList 对象
|
const { pageSize, pageNum, ...restParams } = newParams;
|
const tableList = { pageSize, pageNum };
|
|
// 提取 person 对象
|
const { ...restParams2 } = restParams;
|
const tag = {};
|
|
// 处理 createTime 字段
|
if (restParams2.createTime) {
|
restParams2.startTime = restParams2.createTime[0];
|
restParams2.endTime = restParams2.createTime[1];
|
delete restParams2.createTime;
|
}
|
|
// 合并所有参数
|
const finalParams = {
|
...restParams2,
|
tableList,
|
tag
|
};
|
|
return getVideoList(finalParams);
|
};
|
|
// 表格配置项
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
{ type: "selection", fixed: "left", width: 70 },
|
{
|
prop: "name",
|
label: t("video.monitorName")
|
},
|
{
|
prop: "ip",
|
label: t("video.ipAddress")
|
},
|
{
|
prop: "port",
|
label: t("video.rtspPort")
|
},
|
{
|
prop: "baoliu1",
|
label: t("video.channelNumber")
|
},
|
{
|
prop: "username",
|
label: t("video.username")
|
},
|
{
|
prop: "password",
|
label: t("video.password")
|
},
|
{
|
prop: "shebeiport",
|
label: t("video.localIpAddress")
|
},
|
{
|
prop: "posx",
|
label: t("Anchor.longitude")
|
},
|
{
|
prop: "posy",
|
label: t("Anchor.latitude")
|
},
|
{ prop: "operation", label: t("Config.operation"), width: 260 }
|
]);
|
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof videoDrawer> | null>(null);
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === t("Config.view"),
|
row: { ...row },
|
api: title === t("Config.add") ? addVideo : title === t("Config.update") ? editVideo : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
|
// 删除设备信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(deleteVideo, { id: params.id }, t("video.deleteConfirm", { name: params.name }), t);
|
proTable.value?.getTableList();
|
};
|
|
// 状态类型和文本（根据您的业务逻辑可能需要调整）
|
const getStatusType = (status: any) => {
|
// 根据状态返回对应的标签类型
|
return status === 1 ? "success" : "danger";
|
};
|
|
const getStatusText = (status: any) => {
|
// 根据状态返回对应的文本
|
return status === 1 ? t("status.online") : t("status.offline");
|
};
|
</script>
|
<style scoped>
|
.el-result {
|
--el-result-icon-font-size: 10px !important;
|
--el-result-padding: 0px 0px;
|
}
|
</style>
|
