<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">关键词：</span>
|
<el-input
|
v-model="searchForm.keyword"
|
style="width: 240px"
|
placeholder="电表名称/表地址/备注"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增电表</el-button>
|
<el-button type="success" :loading="syncing" @click="handleSync">同步电表</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
>
|
<template #source="{ row }">
|
<el-tag :type="row.source === 'manual' ? 'warning' : 'info'" size="small">
|
{{ row.source === "manual" ? "手动" : "同步" }}
|
</el-tag>
|
</template>
|
<template #relayState="{ row }">
|
<el-tag :type="row.relayState === '1' ? 'success' : 'danger'" size="small">
|
{{ row.relayState === "1" ? "合闸" : row.relayState === "0" ? "拉闸" : "未知" }}
|
</el-tag>
|
</template>
|
<template #operate="{ row }">
|
<el-button link type="primary" @click="openForm('edit', row)">编辑</el-button>
|
<el-button v-if="row.source === 'manual'" link type="danger" @click="handleDelete(row)">删除</el-button>
|
</template>
|
</PIMTable>
|
</div>
|
<form-dia ref="formDiaRef" @close="getList" />
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import FormDia from "./components/formDia.vue";
|
import { meterListPage, meterSync, meterDelete } from "@/api/energyManagement/tqdianbiao.js";
|
|
const tableLoading = ref(false);
|
const syncing = ref(false);
|
const tableData = ref([]);
|
const formDiaRef = ref(null);
|
|
const data = reactive({ searchForm: { keyword: "" } });
|
const { searchForm } = toRefs(data);
|
const page = reactive({ current: 1, size: 10, total: 0 });
|
|
const tableColumn = ref([
|
{ label: "电表名称", prop: "meterName", minWidth: 120 },
|
{ label: "电表档案ID", prop: "meterId", width: 120 },
|
{ label: "表地址", prop: "address", minWidth: 120 },
|
{ label: "倍率", prop: "rate", width: 70 },
|
{ label: "来源", prop: "source", dataType: "slot", slot: "source", width: 80 },
|
{ label: "继电器", prop: "relayState", dataType: "slot", slot: "relayState", width: 90 },
|
{ label: "备注", prop: "description", minWidth: 100 },
|
{ label: "同步时间", prop: "syncTime", minWidth: 160 },
|
{ label: "操作", prop: "operate", dataType: "slot", slot: "operate", width: 120, fixed: "right" },
|
]);
|
|
function openForm(type, row) {
|
formDiaRef.value.open(type, row);
|
}
|
|
function handleQuery() {
|
page.current = 1;
|
getList();
|
}
|
|
function pagination(obj) {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
}
|
|
async function getList() {
|
tableLoading.value = true;
|
try {
|
const res = await meterListPage({ ...searchForm.value, current: page.current, size: page.size });
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
} finally {
|
tableLoading.value = false;
|
}
|
}
|
|
async function handleSync() {
|
syncing.value = true;
|
try {
|
const res = await meterSync();
|
ElMessage.success(res.msg || "同步成功");
|
getList();
|
} finally {
|
syncing.value = false;
|
}
|
}
|
|
function handleDelete(row) {
|
ElMessageBox.confirm(`确认删除电表「${row.meterName || row.address}」？`, "提示", { type: "warning" })
|
.then(async () => {
|
await meterDelete([row.id]);
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(() => {});
|
}
|
|
onMounted(() => getList());
|
</script>
|
