<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="巡检任务名称">
|
<el-input
|
v-model="queryParams.taskName"
|
placeholder="请输入巡检任务名称"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="所属区域">
|
<el-tree-select
|
v-model="queryParams.areaId"
|
:data="areaOptions"
|
:props="areaTreeProps"
|
node-key="id"
|
value-key="id"
|
check-strictly
|
clearable
|
filterable
|
placeholder="请选择所属区域"
|
style="width: 220px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-card>
|
<div class="toolbar">
|
<el-radio-group v-model="activeRadio" @change="radioChange">
|
<el-radio-button
|
v-for="tab in radios"
|
:key="tab.name"
|
:label="tab.label"
|
:value="tab.name"
|
/>
|
</el-radio-group>
|
<el-space v-if="activeRadio !== 'task'">
|
<el-button type="primary" :icon="Plus" @click="handleAdd(undefined)">新建</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
|
<el-button @click="handleOut">导出</el-button>
|
</el-space>
|
<el-space v-else>
|
<el-button @click="handleOut">导出</el-button>
|
</el-space>
|
</div>
|
<PIMTable
|
:table-loading="tableLoading"
|
:table-data="tableData"
|
:column="tableColumns"
|
:is-selection="true"
|
:border="true"
|
:page="{
|
current: pageNum,
|
size: pageSize,
|
total,
|
layout: 'total, sizes, prev, pager, next, jumper',
|
}"
|
:table-style="{ width: '100%', height: 'calc(100vh - 23em)' }"
|
@selection-change="handleSelectionChange"
|
@pagination="handlePagination"
|
>
|
<template #inspector="{ row }">
|
<div class="person-tags">
|
<template v-if="row.inspector && row.inspector.length > 0">
|
<el-tag
|
v-for="(person, index) in row.inspector"
|
:key="index"
|
size="small"
|
type="primary"
|
class="person-tag"
|
>
|
{{ person }}
|
</el-tag>
|
</template>
|
<span v-else class="no-data">--</span>
|
</div>
|
</template>
|
</PIMTable>
|
</el-card>
|
<form-dia ref="formDia" @closeDia="handleQuery" />
|
<view-files ref="viewFiles" />
|
</div>
|
</template>
|
|
<script setup>
|
import { Delete, Plus } from "@element-plus/icons-vue";
|
import { ElMessageBox } from "element-plus";
|
import { getCurrentInstance, nextTick, onMounted, reactive, ref } from "vue";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import FormDia from "@/views/equipmentManagement/inspectionManagement/components/formDia.vue";
|
import ViewFiles from "@/views/equipmentManagement/inspectionManagement/components/viewFiles.vue";
|
import {
|
delTimingTask,
|
inspectionTaskList,
|
timingTaskList,
|
} from "@/api/inspectionManagement/index.js";
|
import { getDeviceAreaTree } from "@/api/equipmentManagement/deviceArea";
|
|
const { proxy } = getCurrentInstance();
|
const formDia = ref();
|
const viewFiles = ref();
|
|
const queryParams = reactive({
|
taskName: "",
|
areaId: undefined,
|
});
|
|
const areaOptions = ref([]);
|
const areaTreeProps = {
|
label: "areaName",
|
children: "children",
|
};
|
|
const activeRadio = ref("taskManage");
|
const radios = reactive([
|
{ name: "taskManage", label: "定时任务管理" },
|
{ name: "task", label: "定时任务记录" },
|
]);
|
|
const selectedRows = ref([]);
|
const tableData = ref([]);
|
const tableColumns = ref([]);
|
const tableLoading = ref(false);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
|
const columns = ref([
|
{
|
label: "所在区域",
|
prop: "areaName",
|
},
|
{ prop: "taskName", label: "巡检任务名称", minWidth: 160 },
|
{ prop: "remarks", label: "备注", minWidth: 150 },
|
{ prop: "inspector", label: "执行巡检人", minWidth: 150, slot: "inspector" },
|
{
|
prop: "frequencyType",
|
label: "频次",
|
minWidth: 150,
|
formatData: (value) =>
|
({
|
DAILY: "每日",
|
WEEKLY: "每周",
|
MONTHLY: "每月",
|
QUARTERLY: "季度",
|
YEARLY: "每年",
|
}[value] || ""),
|
},
|
{
|
prop: "frequencyDetail",
|
label: "开始日期与时间",
|
minWidth: 150,
|
formatter: (row, column, cellValue) => {
|
if (typeof cellValue !== "string") {
|
return "";
|
}
|
const replacements = {
|
MON: "周一",
|
TUE: "周二",
|
WED: "周三",
|
THU: "周四",
|
FRI: "周五",
|
SAT: "周六",
|
SUN: "周日",
|
};
|
return cellValue.replace(/MON|TUE|WED|THU|FRI|SAT|SUN/g, (match) => replacements[match]);
|
},
|
},
|
{ prop: "registrant", label: "登记人", minWidth: 100 },
|
{ prop: "createTime", label: "登记日期", minWidth: 100 },
|
]);
|
|
// 巡检状态列（仅定时任务记录显示）
|
const inspectionStatusColumn = {
|
prop: "inspectionStatus",
|
label: "巡检状态",
|
minWidth: 100,
|
dataType: "tag",
|
formatData: (value) =>
|
({
|
1: "待巡检",
|
2: "已巡检",
|
}[value] || ""),
|
formatType: (value) =>
|
({
|
1: "warning",
|
2: "success",
|
}[value] || "info"),
|
};
|
// 巡检结果列（仅定时任务记录显示）
|
const inspectionResultColumn = {
|
prop: "inspectionResult",
|
label: "巡检结果",
|
minWidth: 100,
|
dataType: "tag",
|
formatData: (value) =>
|
({
|
1: "正常",
|
2: "异常",
|
}[value] || ""),
|
formatType: (value) =>
|
({
|
1: "success",
|
2: "error",
|
}[value] || "info"),
|
};
|
|
const getOperationColumn = (operations) => {
|
if (!operations || operations.length === 0) {
|
return null;
|
}
|
return {
|
label: "操作",
|
width: 130,
|
fixed: "right",
|
dataType: "action",
|
operation: operations
|
.map((op) => {
|
switch (op) {
|
case "edit":
|
return {
|
name: "编辑",
|
clickFun: handleAdd,
|
color: "#409EFF",
|
};
|
case "viewFile":
|
return {
|
name: "查看附件",
|
clickFun: viewFile,
|
color: "#67C23A",
|
};
|
default:
|
return null;
|
}
|
})
|
.filter(Boolean),
|
};
|
};
|
|
const loadAreaTree = async () => {
|
const { data } = await getDeviceAreaTree();
|
areaOptions.value = Array.isArray(data) ? data : [];
|
};
|
|
onMounted(() => {
|
loadAreaTree();
|
radioChange("taskManage");
|
});
|
|
const radioChange = (value) => {
|
if (value === "taskManage") {
|
const operationColumn = getOperationColumn(["edit"]);
|
tableColumns.value = [...columns.value, ...(operationColumn ? [operationColumn] : [])];
|
} else {
|
const operationColumn = getOperationColumn(["viewFile"]);
|
// 定时任务记录添加巡检状态列
|
tableColumns.value = [...columns.value, inspectionStatusColumn, inspectionResultColumn, ...(operationColumn ? [operationColumn] : [])];
|
}
|
pageNum.value = 1;
|
pageSize.value = 10;
|
getList();
|
};
|
|
const handleQuery = () => {
|
pageNum.value = 1;
|
pageSize.value = 10;
|
getList();
|
};
|
|
const handlePagination = (val) => {
|
pageNum.value = val.page;
|
pageSize.value = val.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
const params = {
|
...queryParams,
|
size: pageSize.value,
|
current: pageNum.value,
|
};
|
const apiCall =
|
activeRadio.value === "task" ? inspectionTaskList(params) : timingTaskList(params);
|
|
apiCall
|
.then((res) => {
|
const rawData = res?.data?.records || [];
|
tableData.value = rawData.map((item) => {
|
const processedItem = { ...item };
|
if (processedItem.inspector) {
|
if (typeof processedItem.inspector === "string") {
|
processedItem.inspector = processedItem.inspector
|
.split(",")
|
.map((text) => text.trim())
|
.filter(Boolean);
|
} else if (!Array.isArray(processedItem.inspector)) {
|
processedItem.inspector = [processedItem.inspector];
|
}
|
} else {
|
processedItem.inspector = [];
|
}
|
return processedItem;
|
});
|
total.value = res?.data?.total || 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const resetQuery = () => {
|
queryParams.taskName = "";
|
queryParams.areaId = undefined;
|
handleQuery();
|
};
|
|
const handleAdd = (row) => {
|
const type = row ? "edit" : "add";
|
nextTick(() => {
|
formDia.value?.openDialog(type, row);
|
});
|
};
|
|
const viewFile = (row) => {
|
nextTick(() => {
|
viewFiles.value?.openDialog(row);
|
});
|
};
|
|
const handleDelete = () => {
|
if (!selectedRows.value.length) {
|
proxy.$modal.msgWarning("请选择要删除的数据");
|
return;
|
}
|
const deleteIds = selectedRows.value.map((item) => item.id);
|
proxy.$modal
|
.confirm("是否确认删除所选数据项？")
|
.then(() => delTimingTask(deleteIds))
|
.then(() => {
|
proxy.$modal.msgSuccess("删除成功");
|
handleQuery();
|
})
|
.catch(() => {});
|
};
|
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
if (activeRadio.value === "taskManage") {
|
proxy.download("/timingTask/export", {}, "定时任务管理.xlsx");
|
} else {
|
proxy.download("/inspectionTask/export", {}, "定时任务记录.xlsx");
|
}
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
</script>
|
|
<style scoped>
|
.toolbar {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
|
.person-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 4px;
|
}
|
|
.person-tag {
|
margin-right: 4px;
|
margin-bottom: 2px;
|
}
|
|
.no-data {
|
color: #909399;
|
font-size: 14px;
|
}
|
</style>
|
