spring
2026-03-17 a24c34af0c00a59c94e1a6ebc2cbbc0814215f21
src/views/equipmentManagement/repair/index.vue
@@ -1,24 +1,83 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备名称">
        <el-input
            v-model="filters.deviceName"
            style="width: 240px"
            placeholder="请输入设备名称"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请选择规格型号"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="故障现象">
        <el-input
            v-model="filters.remark"
            style="width: 240px"
            placeholder="请输入故障现象"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="维修人">
        <el-input
            v-model="filters.maintenanceName"
            style="width: 240px"
            placeholder="请输入维修人"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="报修日期">
        <el-date-picker
            v-model="filters.repairTimeStr"
            type="date"
            placeholder="请选择报修日期"
            size="default"
            @change="(date) => handleDateChange(date,2)"
        />
      </el-form-item>
      <el-form-item label="维修日期">
        <el-date-picker
            v-model="filters.maintenanceTimeStr"
            type="date"
            placeholder="请选择维修日期"
            size="default"
            @change="(date) => handleDateChange(date,1)"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <el-text class="mx-1" size="large">设备报修</el-text>
        <div>
          <el-button
            type="primary"
            icon="Plus"
            :disabled="multipleList.length !== 1"
            @click="addMaintain"
          >
            新增维修
          </el-button>
          <el-button type="success" icon="Van" @click="addRepair">
            新增报修
          </el-button>
          <el-button @click="handleOut">
            导出
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            :disabled="multipleList.length <= 0 || hasFinishedStatus"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
            批量删除
@@ -26,34 +85,51 @@
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
          :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
          @selection-change="handleSelectionChange"
          @pagination="changePage"
      >
        <template #statusRef="{ row }">
          <el-tag v-if="row.status === 2" type="danger">失败</el-tag>
          <el-tag v-if="row.status === 1" type="success">完结</el-tag>
          <el-tag v-if="row.status === 0" type="error">待维修</el-tag>
          <el-tag v-if="row.status === 0" type="warning">待维修</el-tag>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            text
            icon="editPen"
            link
            :disabled="row.status === 1"
            @click="editRepair(row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="info"
            link
            @click="viewAttachments(row)"
          >
            查看附件
          </el-button>
          <el-button
            type="success"
            link
            :disabled="row.status === 1"
            @click="addMaintain(row)"
          >
            维修
          </el-button>
          <el-button
            type="danger"
            text
            icon="delete"
            link
            :disabled="row.status === 1"
            @click="delRepairByIds(row.id)"
          >
            删除
@@ -61,37 +137,94 @@
        </template>
      </PIMTable>
    </div>
    <RepairModal ref="repairModalRef" @ok="getTableData" />
    <MaintainModal ref="maintainModalRef" @ok="getTableData" />
    <RepairModal ref="repairModalRef" @ok="getTableData"/>
    <MaintainModal ref="maintainModalRef" @ok="getTableData"/>
    <FileListDialog
      ref="fileListDialogRef"
      v-model="fileDialogVisible"
      title="查看附件"
      :show-upload-button="false"
      :show-delete-button="false"
      name-column-label="附件名称"
    />
  </div>
</template>
<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
import { onMounted } from "vue";
import { onMounted, getCurrentInstance, computed } from "vue";
import {usePaginationApi} from "@/hooks/usePaginationApi";
import {getRepairPage, delRepair, getRepairById} from "@/api/equipmentManagement/repair";
import RepairModal from "./Modal/RepairModal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {ElMessageBox, ElMessage} from "element-plus";
import dayjs from "dayjs";
import MaintainModal from "./Modal/MaintainModal.vue";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
defineOptions({
  name: "设备报修",
});
const {proxy} = getCurrentInstance();
// 模态框实例
const repairModalRef = ref();
const maintainModalRef = ref();
const fileListDialogRef = ref();
const fileDialogVisible = ref(false);
const baseApi = import.meta.env.VITE_APP_BASE_API || "";
const formatFileUrl = (url) => {
  if (!url) return "";
  if (url.startsWith("http://") || url.startsWith("https://")) return url;
  if (url.includes(":") || url.startsWith("/")) {
    return url;
  }
  const path = String(url).replace(/^\/+/, "");
  return path ? baseApi + "/" + path : baseApi;
};
// 查看附件(与 APP 字段一致:fileList / commonFileList)
const viewAttachments = async (row) => {
  try {
    const { code, data } = await getRepairById(row.id);
    if (code === 200 && data) {
      const list = data.fileList || data.commonFileList || [];
      const mapped = (Array.isArray(list) ? list : []).map((f) => ({
        id: f.id,
        name: f.originalFilename || f.bucketFilename || f.name || "附件",
        url: formatFileUrl(f.url || f.downloadUrl),
        raw: f,
      }));
      fileListDialogRef.value?.open(mapped);
    } else {
      ElMessage.warning("获取附件失败");
    }
  } catch (e) {
    ElMessage.error("获取附件失败");
  }
};
// 表格多选框选中项
const multipleList = ref([]);
// 表格钩子
const { filters, columns, dataList, pagination, getTableData, resetFilters } =
  usePaginationApi(
const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
    getRepairPage,
    {
      searchText: undefined,
      deviceName: undefined,
      deviceModel: undefined,
      remark: undefined,
      maintenanceName: undefined,
      repairTimeStr: undefined,
      maintenanceTimeStr: undefined,
    },
    [
      {
@@ -149,19 +282,40 @@
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "200px",
        width: "360px",
      },
    ]
  );
);
// type === 1 维修 2报修间
const handleDateChange = (value, type) => {
  filters.maintenanceTimeStr = null
  filters.c = null
  if (type === 1) {
    if (value) {
      filters.maintenanceTimeStr = dayjs(value).format("YYYY-MM-DD");
    }
  } else {
    if (value) {
      filters.repairTimeStr = dayjs(value).format("YYYY-MM-DD");
    }
  }
  getTableData();
};
// 多选后做什么
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};
// 检查选中的记录中是否有完结状态的
const hasFinishedStatus = computed(() => {
  return multipleList.value.some(item => item.status === 1)
})
// 新增报修
const addRepair = () => {
  repairModalRef.value.openModal();
  repairModalRef.value.openAdd();
};
// 编辑报修
@@ -170,24 +324,56 @@
};
// 新增维修
const addMaintain = () => {
  const row = multipleList.value[0];
const addMaintain = (row) => {
  maintainModalRef.value.open(row.id, row);
};
const changePage = ({page, limit}) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  onCurrentChange(page);
};
// 单行删除
const delRepairByIds = async (ids) => {
  // 检查是否有完结状态的记录
  const idsArray = Array.isArray(ids) ? ids : [ids];
  const hasFinished = idsArray.some(id => {
    const record = dataList.value.find(item => item.id === id);
    return record && record.status === 1;
  });
  if (hasFinished) {
    ElMessage.warning('不能删除状态为完结的记录');
    return;
  }
  ElMessageBox.confirm("确认删除报修数据, 此操作不可逆?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delRepair(ids);
    const {code} = await delRepair(ids);
    if (code === 200) {
      ElMessage.success("删除成功");
      getTableData();
    }
  });
};
// 导出
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/device/repair/export", {}, "设备报修.xlsx");
      })
      .catch(() => {
        ElMessage.info("已取消");
      });
};
onMounted(() => {
@@ -199,6 +385,7 @@
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;