新疆马铃薯 1.巡检记录添加巡检状态和巡检结果展示字段

gaoluyang

8 天以前 11b40328f7aa7599f89189d0ebcbbdf8773f9e1b

 src/views/equipmentManagement/inspectionManagement/index.vue

@@ -1,12 +1,26 @@
<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
      <el-form-item label="巡检任务名称">
        <el-input
            v-model="queryParams.searchAll"
            placeholder="请输入关键字"
            clearable
            :style="{ width: '100%' }"
          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>
@@ -15,395 +29,356 @@
      </el-form-item>
    </el-form>
    <el-card>
      <!-- 标签页 -->
      <el-tabs
          v-model="activeTab"
          class="info-tabs"
          @tab-click="handleTabClick"
      >
        <el-tab-pane
            v-for="tab in tabs"
      <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"
            :name="tab.name"
        />
      </el-tabs>
      <div style="display: flex;flex-direction: row;justify-content: space-between;" v-if="tabName === 'task'">
        <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"/>
            :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 type="info" plain :icon="Download">导出</el-button> -->
          <el-button @click="handleOut">导出</el-button>
        </el-space>
        <el-space v-else>
          <el-button @click="handleOut">导出</el-button>
        </el-space>
      </div>
      <div>
        <div>
          <PIMTable :table-loading="tableLoading"
                  :table-data="tableData"
                  :column="tableColumns"
                  @selection-change="handleSelectionChange"
                  :is-selection="true"
                  :border="true"
                  :table-style="{ width: '100%', height: 'calc(100vh - 30em)' }"
                  v-if="tabName === 'task'"
          >
          <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"
                  size="small"
                  type="primary"
                  class="person-tag"
                >
                  {{ person }}
                </el-tag>
              </template>
              <span v-else class="no-data">--</span>
            </div>
          </template>
          </PIMTable>
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" border v-else style="width: 100%;height: calc(100vh - 25em)">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.deviceName}}
              </template>
            </el-table-column>
            <el-table-column prop="location" label="所在位置描述" :show-overflow-tooltip="true">
              <template #default="scope">
                {{scope.row.qrCode.location}}
              </template>
            </el-table-column>
            <el-table-column prop="scanner" label="巡检人"></el-table-column>
            <el-table-column prop="scanTime" label="巡检时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button link type="primary" @click="handleAdd(scope.row)">查看附件</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
            v-if="total>0"
            :page="pageNum"
            :limit="pageSize"
            :total="total"
            @pagination="handlePagination"
            :layout="'total, prev, pager, next, jumper'"
        />
      </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"></form-dia>
    <qr-code-dia ref="qrCodeDia" @closeDia="handleQuery"></qr-code-dia>
    <view-files ref="viewFiles"></view-files>
    <view-qr-code-files ref="viewQrCodeFiles"></view-qr-code-files>
    <form-dia ref="formDia" @closeDia="handleQuery" />
    <view-files ref="viewFiles" />
  </div>
</template>

<script setup>
import { Delete, Plus } from "@element-plus/icons-vue";
import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";

// 组件引入
import Pagination from "@/components/Pagination/index.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 QrCodeDia from "@/views/equipmentManagement/inspectionManagement/components/qrCodeDia.vue";
import ViewFiles from "@/views/equipmentManagement/inspectionManagement/components/viewFiles.vue";
import ViewQrCodeFiles from "@/views/equipmentManagement/inspectionManagement/components/viewQrCodeFiles.vue";

// 接口引入
import {
  delTimingTask,
  inspectionTaskList,
  timingTaskList
  timingTaskList,
} from "@/api/inspectionManagement/index.js";
import {
  delQrCode,
  qrCodeList,
  qrCodeScanRecordList
} from "@/api/inspectionUpload/index.js";
import { getDeviceAreaTree } from "@/api/equipmentManagement/deviceArea";

// 全局变量
const { proxy } = getCurrentInstance();
const formDia = ref();
const qrCodeDia = ref();
const viewFiles = ref();
const viewQrCodeFiles = ref();

// 查询参数
const queryParams = reactive({
  searchAll: "",
  taskName: "",
  areaId: undefined,
});

// 标签页配置
const activeTab = ref("task");
const tabName = ref("task");
const tabs = reactive([
  { name: "task", label: "生产巡检" },
  { name: "qrCodeScanRecord", label: "现场巡检记录" },
]);
const areaOptions = ref([]);
const areaTreeProps = {
  label: "areaName",
  children: "children",
};

// 单选框配置
const activeRadio = ref("taskManage");
const radios = reactive([
  { name: "taskManage", label: "定时任务管理" },
  { name: "task", label: "定时任务记录" },
  { name: "qrCode", label: "二维码管理" },
]);

// 表格数据
const selectedRows = ref([]);
const tableData = ref([]);
const operationsArr = 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: "inspectionLocation", label: "地点", minWidth: 120 },
  { prop: "remarks", label: "备注", minWidth: 150 },
  { prop: "inspector", label: "执行巡检人", minWidth: 150, slot: "inspector" },
  {
    prop: "frequencyType",
    label: "频次",
    minWidth: 150,
    formatter: (_, __, val) => ({
      DAILY: "每日",
      WEEKLY: "每周",
      MONTHLY: "每月",
      QUARTERLY: "季度"
    }[val] || "")
    formatData: (value) =>
      ({
        DAILY: "每日",
        WEEKLY: "每周",
        MONTHLY: "每月",
        QUARTERLY: "季度",
            YEARLY: "每年",
      }[value] || ""),
  },
  {
    prop: "frequencyDetail",
    label: "开始日期与时间",
    minWidth: 150,
    formatter: (row, column, cellValue) => {
      // 先判断是否是字符串
      if (typeof cellValue !== 'string') return '';
      let val = cellValue;
      if (typeof cellValue !== "string") {
        return "";
      }
      const replacements = {
        MON: '周一',
        TUE: '周二',
        WED: '周三',
        THU: '周四',
        FRI: '周五',
        SAT: '周六',
        SUN: '周日'
        MON: "周一",
        TUE: "周二",
        WED: "周三",
        THU: "周四",
        FRI: "周五",
        SAT: "周六",
        SUN: "周日",
      };
      // 使用正则一次性替换所有匹配项
      return val.replace(/MON|TUE|WED|THU|FRI|SAT|SUN/g, match => replacements[match]);
    }
      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;
  
  const operationConfig = {
  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)
    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),
  };
  
  return operationConfig;
};

const columns1 = ref([
  { prop: "deviceName", label: "设备名称", minWidth: 160 },
  { prop: "location", label: "所在位置描述", minWidth: 120 },
  { prop: "createBy", label: "创建者", minWidth: 100 },
  { prop: "createTime", label: "创建时间", minWidth: 100 },
]);
const loadAreaTree = async () => {
  const { data } = await getDeviceAreaTree();
  areaOptions.value = Array.isArray(data) ? data : [];
};

onMounted(() => {
  radioChange('taskManage');
  loadAreaTree();
  radioChange("taskManage");
});

// 标签页点击事件
const handleTabClick = (tab) => {
  tabName.value = tab.props.name;
  tableData.value = [];
  getList();
};

// 单选变化
const radioChange = (value) => {
  if (value === "taskManage") {
    const operationColumn = getOperationColumn(['edit']);
    const operationColumn = getOperationColumn(["edit"]);
    tableColumns.value = [...columns.value, ...(operationColumn ? [operationColumn] : [])];
    operationsArr.value = ['edit'];
  } else if (value === "task") {
    const operationColumn = getOperationColumn(['viewFile']);
    tableColumns.value = [...columns.value, ...(operationColumn ? [operationColumn] : [])];
    operationsArr.value = ['viewFile'];
  } else {
    const operationColumn = getOperationColumn(['edit']);
    tableColumns.value = [...columns1.value, ...(operationColumn ? [operationColumn] : [])];
    operationsArr.value = ['edit'];
    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 };
  
  let apiCall;
  if (tabName.value === 'task') {
    switch (activeRadio.value) {
      case "task":
        apiCall = inspectionTaskList(params);
        break;
      case "qrCode":
        apiCall = qrCodeList(params);
        break;
      default:
        apiCall = timingTaskList(params);
    }
  } else {
    apiCall = qrCodeScanRecordList(params);
  }
  
  apiCall.then(res => {
    const rawData = res.data.records || [];
    // 处理 inspector 字段，将字符串转换为数组（适用于所有情况）
    tableData.value = rawData.map(item => {
      const processedItem = { ...item };
      
      // 处理 inspector 字段
      if (processedItem.inspector) {
        if (typeof processedItem.inspector === 'string') {
          // 字符串按逗号分割
          processedItem.inspector = processedItem.inspector.split(',').map(s => s.trim()).filter(s => s);
        } 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;
  });
  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 = () => {
  for (const key in queryParams) {
    if (!["pageNum", "pageSize"].includes(key)) {
      queryParams[key] = "";
    }
  }
  queryParams.taskName = "";
  queryParams.areaId = undefined;
  handleQuery();
};

// 新增 / 编辑
const handleAdd = (row) => {
  const type = row ? 'edit' : 'add';
  const type = row ? "edit" : "add";
  nextTick(() => {
    if (tabName.value === 'task') {
      if (activeRadio.value === "taskManage") {
        formDia.value?.openDialog(type, row);
      } else if (activeRadio.value === "qrCode") {
        qrCodeDia.value?.openDialog(type, row);
      }
    } else {
      viewQrCodeFiles.value?.openDialog(row);
    }
    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);
  const api = activeRadio.value === "taskManage" ? delTimingTask : delQrCode;
  
  proxy.$modal.confirm('是否确认删除所选数据项？').then(() => {
    return api(deleteIds);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
    handleQuery();
  }).catch(() => {});
  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;
@@ -419,4 +394,4 @@
  color: #909399;
  font-size: 14px;
}
</style>
</style>