| | |
| | | :table-style="{ width: '100%', height: 'calc(100vh - 23em)' }"> |
| | | <template #inspector="{ row }"> |
| | | <div class="person-tags"> |
| | | <!-- 调试信息,上线时删除 --> |
| | | <!-- {{ console.log('inspector data:', row.inspector) }} --> |
| | | <template v-if="row.inspector && row.inspector.length > 0"> |
| | | <el-tag v-for="(person, index) in row.inspector" |
| | | :key="index" |
| | |
| | | <span v-else |
| | | class="no-data">--</span> |
| | | </div> |
| | | </template> |
| | | <template #statusRef="{ row }"> |
| | | <el-tag v-if="row.isActive === true || row.isActive === 1" type="success">启用</el-tag> |
| | | <el-tag v-else type="danger">停用</el-tag> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | |
| | | import { Delete, Plus } from "@element-plus/icons-vue"; |
| | | import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | |
| | | // 组件引入 |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | |
| | | delTimingTask, |
| | | inspectionTaskList, |
| | | timingTaskList, |
| | | addOrEditTimingTask, |
| | | } from "@/api/inspectionManagement/index.js"; |
| | | |
| | | // 全局变量 |
| | |
| | | // 单选框配置 |
| | | const activeRadio = ref("taskManage"); |
| | | const radios = reactive([ |
| | | { name: "taskManage", label: "定时任务管理" }, |
| | | { name: "task", label: "定时任务记录" }, |
| | | { name: "taskManage", label: "巡检任务管理" }, |
| | | { name: "task", label: "巡检任务记录" }, |
| | | ]); |
| | | |
| | | // 表格数据 |
| | |
| | | prop: "frequencyType", |
| | | label: "频次", |
| | | minWidth: 150, |
| | | // formatter: (_, __, val) => ({ |
| | | // DAILY: "每日", |
| | | // WEEKLY: "每周", |
| | | // MONTHLY: "每月", |
| | | // QUARTERLY: "季度" |
| | | // }[val] || "") |
| | | formatData: params => { |
| | | return params === "DAILY" |
| | | ? "每日" |
| | |
| | | }, |
| | | }, |
| | | { prop: "registrant", label: "登记人", minWidth: 100 }, |
| | | { prop: "createTime", label: "登记日期", minWidth: 100 }, |
| | | { prop: "createTime", label: "登记日期", minWidth: 120, formatData: (cell) => cell ? dayjs(cell).format("YYYY-MM-DD HH:MM:ss") : "-" }, |
| | | ]); |
| | | |
| | | const statusColumn = { |
| | | prop: "isActive", |
| | | label: "任务状态", |
| | | minWidth: 100, |
| | | align: "center", |
| | | dataType: "slot", |
| | | slot: "statusRef", |
| | | }; |
| | | |
| | | // 操作列配置 |
| | | const getOperationColumn = operations => { |
| | | if (!operations || operations.length === 0) return null; |
| | | |
| | | const operationList = operations |
| | | .map(op => { |
| | | switch (op) { |
| | | case "edit": |
| | | return { |
| | | name: "编辑", |
| | | clickFun: handleAdd, |
| | | color: "#409EFF", |
| | | }; |
| | | case "viewFile": |
| | | return { |
| | | name: "查看附件", |
| | | clickFun: viewFile, |
| | | color: "#67C23A", |
| | | }; |
| | | case "toggleActive": |
| | | return { |
| | | name: (row) => row.isActive === true || row.isActive === 1 ? "停用" : "启用", |
| | | clickFun: handleToggleActive, |
| | | color: (row) => row.isActive === true || row.isActive === 1 ? "#F56C6C" : "#67C23A", |
| | | }; |
| | | default: |
| | | return null; |
| | | } |
| | | }) |
| | | .filter(Boolean); |
| | | |
| | | const operationConfig = { |
| | | label: "操作", |
| | | width: 130, |
| | | width: 200, |
| | | 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), |
| | | operation: operationList, |
| | | }; |
| | | |
| | | return operationConfig; |
| | |
| | | // 单选变化 |
| | | const radioChange = value => { |
| | | if (value === "taskManage") { |
| | | const operationColumn = getOperationColumn(["edit"]); |
| | | const operationColumn = getOperationColumn(["edit", "toggleActive"]); |
| | | tableColumns.value = [ |
| | | ...columns.value, |
| | | statusColumn, |
| | | ...(operationColumn ? [operationColumn] : []), |
| | | ]; |
| | | operationsArr.value = ["edit"]; |
| | | operationsArr.value = ["edit", "toggleActive"]; |
| | | } else if (value === "task") { |
| | | const operationColumn = getOperationColumn(["viewFile"]); |
| | | tableColumns.value = [ |
| | |
| | | .catch(() => {}); |
| | | }; |
| | | |
| | | // 启用/停用切换 |
| | | const handleToggleActive = async (row) => { |
| | | const newStatus = row.isActive === true || row.isActive === 1 ? 0 : 1; |
| | | const actionText = newStatus === 1 ? "启用" : "停用"; |
| | | |
| | | try { |
| | | await proxy.$modal.confirm(`是否确认${actionText}该任务?`) |
| | | } catch { |
| | | return |
| | | } |
| | | |
| | | try { |
| | | await addOrEditTimingTask({ |
| | | id: row.id, |
| | | taskId: row.taskId, |
| | | taskName: row.taskName, |
| | | inspectorIds: row.inspectorIds, |
| | | remarks: row.remarks, |
| | | frequencyType: row.frequencyType, |
| | | frequencyDetail: row.frequencyDetail, |
| | | isActive: newStatus, |
| | | }) |
| | | proxy.$modal.msgSuccess(`${actionText}成功`) |
| | | handleQuery() |
| | | } catch (error) { |
| | | console.error(`${actionText}失败:`, error) |
| | | } |
| | | }; |
| | | |
| | | // 多选变更 |
| | | const handleSelectionChange = selection => { |
| | | selectedRows.value = selection; |
| | |
| | | .then(() => { |
| | | // 根据当前选中的标签页调用不同的导出接口 |
| | | if (activeRadio.value === "taskManage") { |
| | | // 定时任务管理 |
| | | proxy.download("/timingTask/export", {}, "定时任务管理.xlsx"); |
| | | // 保养任务管理 |
| | | proxy.download("/timingTask/export", {}, "保养任务管理.xlsx"); |
| | | } else if (activeRadio.value === "task") { |
| | | // 定时任务记录 |
| | | proxy.download("/inspectionTask/export", {}, "定时任务记录.xlsx"); |
| | | proxy.download("/inspectionTask/export", {}, "保养任务记录.xlsx"); |
| | | } |
| | | }) |
| | | .catch(() => { |