设备报修-只需要展示关键数据。新增一个详情按钮，其他数据在详情里查看

zhangwencui

2026-05-23 5a3edeb49a1d318ff41ec0bb9d4adf12ea32275c

设备报修-只需要展示关键数据。新增一个详情按钮，其他数据在详情里查看

 src/views/equipmentManagement/repair/Modal/RepairModal.vue

@@ -1,111 +1,126 @@
<template>
  <FormDialog
    v-model="visible"
    :title="id ? '编辑设备报修' : '新增设备报修'"
  <FormDialog v-model="visible"
              :title="computedTitle"
              :operation-type="operationType"
    width="800px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
              @close="handleClose">
    <el-form :model="form"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-select v-model="form.deviceLedgerId" @change="setDeviceModel" filterable>
              <el-option
                v-for="(item, index) in deviceOptions"
            <el-select v-model="form.deviceLedgerId"
                       @change="setDeviceModel"
                       filterable
                       :disabled="operationType === 'view'">
              <el-option v-for="(item, index) in deviceOptions"
                :key="index"
                :label="item.deviceName"
                :value="item.id"
              ></el-option>
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号">
            <el-input
              v-model="form.deviceModel"
            <el-input v-model="form.deviceModel"
              placeholder="请输入规格型号"
              disabled
            />
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修日期">
            <el-date-picker
              v-model="form.repairTime"
            <el-date-picker v-model="form.repairTime"
              placeholder="请选择报修日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              clearable
              style="width: 100%"
            />
                            :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修人">
            <el-input v-model="form.repairName" placeholder="请输入报修人" />
            <el-input v-model="form.repairName"
                      placeholder="请输入报修人"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修报修项目">
            <el-input v-model="form.machineryCategory" placeholder="请输入报修报修项目" />
            <el-input v-model="form.machineryCategory"
                      placeholder="请输入报修报修项目"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维修人">
            <el-input v-model="form.maintenanceName" placeholder="请输入维修人姓名" />
            <el-input v-model="form.maintenanceName"
                      placeholder="请输入维修人姓名"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="id">
        <el-col :span="12">
          <el-form-item label="报修状态">
            <el-select v-model="form.status" disabled>
              <el-option label="待维修" :value="0"></el-option>
              <el-option label="已验收" :value="1"></el-option>
              <el-option label="失败" :value="2"></el-option>
            <el-select v-model="form.status"
                       disabled>
              <el-option label="待维修"
                         :value="0"></el-option>
              <el-option label="已验收"
                         :value="1"></el-option>
              <el-option label="失败"
                         :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 验收信息展示 -->
      <el-row v-if="id && form.status === 1">
      <el-row v-if="id && (form.status === 1 || form.status === 3)">
        <el-col :span="12">
          <el-form-item label="验收人">
            <el-input v-model="form.acceptanceName" disabled />
            <el-input v-model="form.acceptanceName"
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收时间">
            <el-input v-model="form.acceptanceTime" disabled />
            <el-input v-model="form.acceptanceTime"
                      disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="验收备注">
            <el-input v-model="form.acceptanceRemark" type="textarea" :rows="2" disabled />
            <el-input v-model="form.acceptanceRemark"
                      type="textarea"
                      :rows="2"
                      disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="故障现象">
            <el-input
              v-model="form.remark"
            <el-input v-model="form.remark"
              :rows="2"
              type="textarea"
              placeholder="请输入故障现象"
            />
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
      <el-row v-if="operationType !== 'view'"
              :gutter="30">
        <el-col :span="24">
          <el-form-item label="附件" prop="attachmentIds">
            <FileUpload v-model:file-list="form.storageBlobDTOs" />
          <el-form-item label="附件"
                        prop="attachmentIds">
            <FileUpload v-model:file-list="form.storageBlobDTOs"
                        :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
@@ -136,6 +151,14 @@
const id = ref();
const visible = ref(false);
const loading = ref(false);
  const operationType = ref(""); // add, edit, view

  const computedTitle = computed(() => {
    if (operationType.value === "add") return "新增设备报修";
    if (operationType.value === "edit") return "编辑设备报修";
    if (operationType.value === "view") return "设备报修详情";
    return "";
  });

const userStore = useUserStore();
const deviceOptions = ref([]);
@@ -159,12 +182,12 @@
  maintenanceName: undefined, // 维修人
});

const setDeviceModel = (deviceId) => {
  const option = deviceOptions.value.find((item) => item.id === deviceId);
  const setDeviceModel = deviceId => {
    const option = deviceOptions.value.find(item => item.id === deviceId);
  form.deviceModel = option.deviceModel;
};

const setForm = (data) => {
  const setForm = data => {
  form.deviceLedgerId = data.deviceLedgerId;
  form.deviceName = data.deviceName;
  form.deviceModel = data.deviceModel;
@@ -208,15 +231,27 @@

const openAdd = async () => {
  id.value = undefined;
    operationType.value = "add";
  visible.value = true;
  fileList.value = [];
  await nextTick();
  await loadDeviceName();
};

const openEdit = async (editId) => {
  const openEdit = async editId => {
  const { data } = await getRepairById(editId);
  id.value = editId;
    operationType.value = "edit";
    visible.value = true;
    await nextTick();
    await loadDeviceName();
    setForm(data);
  };

  const openView = async viewId => {
    const { data } = await getRepairById(viewId);
    id.value = viewId;
    operationType.value = "view";
  visible.value = true;
  await nextTick();
  await loadDeviceName();
@@ -226,6 +261,7 @@
defineExpose({
  openAdd,
  openEdit,
    openView,
});
</script>


 src/views/equipmentManagement/repair/index.vue

@@ -1,91 +1,81 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
    <el-form :model="filters"
             :inline="true">
      <el-form-item label="设备名称">
        <el-input
            v-model="filters.deviceName"
        <el-input v-model="filters.deviceName"
            style="width: 240px"
            placeholder="请输入设备名称"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
            v-model="filters.deviceModel"
        <el-input v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请选择规格型号"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="故障现象">
        <el-input
            v-model="filters.remark"
        <el-input v-model="filters.remark"
            style="width: 240px"
            placeholder="请输入故障现象"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="维修人">
        <el-input
            v-model="filters.maintenanceName"
        <el-input v-model="filters.maintenanceName"
            style="width: 240px"
            placeholder="请输入维修人"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="报修日期">
        <el-date-picker
            v-model="filters.repairTimeStr"
        <el-date-picker v-model="filters.repairTimeStr"
            type="date"
            placeholder="请选择报修日期"
            size="default"
            @change="(date) => handleDateChange(date,2)"
        />
                        @change="(date) => handleDateChange(date,2)" />
      </el-form-item>
      <el-form-item label="维修日期">
        <el-date-picker
            v-model="filters.maintenanceTimeStr"
        <el-date-picker v-model="filters.maintenanceTimeStr"
            type="date"
            placeholder="请选择维修日期"
            size="default"
            @change="(date) => handleDateChange(date,1)"
        />
                        @change="(date) => handleDateChange(date,1)" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <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>
        <el-text class="mx-1"
                 size="large">设备报修</el-text>
        <div>
          <el-button type="success" icon="Van" @click="addRepair">
          <el-button type="success"
                     icon="Van"
                     @click="addRepair">
            新增报修
          </el-button>
          <el-button @click="handleOut">
            导出
          </el-button>
          <el-button
            type="danger"
          <el-button type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0 || hasFinishedStatus"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
                     @click="delRepairByIds(multipleList.map((item) => item.id))">
            批量删除
          </el-button>
        </div>
      </div>
      <PIMTable
          rowKey="id"
      <PIMTable rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
@@ -95,66 +85,76 @@
          total: pagination.total,
        }"
          @selection-change="handleSelectionChange"
          @pagination="changePage"
      >
                @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 === 3" type="info">待验收</el-tag>
          <el-tag v-if="row.status === 0" type="warning">待维修</el-tag>
          <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 === 3"
                  type="info">待验收</el-tag>
          <el-tag v-if="row.status === 0"
                  type="warning">待维修</el-tag>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
          <el-button type="primary"
                     link
                     @click="viewRepair(row.id)">
            详情
          </el-button>
          <el-button type="primary"
            link
            :disabled="row.status === 1 || row.status === 3"
            @click="editRepair(row.id)"
          >
                     @click="editRepair(row.id)">
            编辑
          </el-button>
          <el-button
            type="success"
          <el-button type="success"
            link
            :disabled="row.status !== 0"
            @click="addMaintain(row)"
          >
                     @click="addMaintain(row)">
            维修
          </el-button>
          <el-button
            type="warning"
          <el-button type="warning"
            link
            :disabled="row.status !== 3"
            @click="openAcceptance(row)"
          >
                     @click="openAcceptance(row)">
            验收
          </el-button>
          <el-button
            type="danger"
          <el-button type="danger"
            link
            :disabled="row.status === 1 || row.status === 3"
            @click="delRepairByIds(row.id)"
          >
                     @click="delRepairByIds(row.id)">
            删除
          </el-button>
          <el-button
              type="primary"
          <el-button type="primary"
              link
              @click="openFileDialog(row)"
          >
                     @click="openFileDialog(row)">
            附件
          </el-button>
        </template>
      </PIMTable>
    </div>
    <RepairModal ref="repairModalRef" @ok="getTableData"/>
    <MaintainModal ref="maintainModalRef" @ok="getTableData"/>
    <AcceptanceModal ref="acceptanceModalRef" @ok="getTableData"/>
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" :record-type="'device_repair'" :record-id="recordId"  />
    <RepairModal ref="repairModalRef"
                 @ok="getTableData" />
    <MaintainModal ref="maintainModalRef"
                   @ok="getTableData" />
    <AcceptanceModal ref="acceptanceModalRef"
                     @ok="getTableData" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'device_repair'"
              :record-id="recordId" />
  </div>
</template>

<script setup>
import {onMounted, getCurrentInstance, computed, ref, defineAsyncComponent} from "vue";
  import {
    onMounted,
    getCurrentInstance,
    computed,
    ref,
    defineAsyncComponent,
  } from "vue";
import {usePaginationApi} from "@/hooks/usePaginationApi";
import {getRepairPage, delRepair} from "@/api/equipmentManagement/repair";
import RepairModal from "./Modal/RepairModal.vue";
@@ -162,7 +162,9 @@
import dayjs from "dayjs";
import MaintainModal from "./Modal/MaintainModal.vue";
import AcceptanceModal from "./Modal/AcceptanceModal.vue";
const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );

defineOptions({
  name: "设备报修",
@@ -209,52 +211,15 @@
        prop: "deviceModel",
      },
      {
        label: "报修项目",
        align: "center",
        prop: "machineryCategory",
      },
      {
        label: "报修日期",
        align: "center",
        prop: "repairTime",
        formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
        formatData: cell => dayjs(cell).format("YYYY-MM-DD"),
      },
      {
        label: "报修人",
        align: "center",
        prop: "repairName",
      },
      {
        label: "故障现象",
        align: "center",
        prop: "remark",
      },
      {
        label: "维修人",
        align: "center",
        prop: "maintenanceName",
      },
      {
        label: "维修结果",
        align: "center",
        prop: "maintenanceResult",
      },
      {
        label: "维修日期",
        align: "center",
        prop: "maintenanceTime",
        formatData: (cell) => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
      },
      {
        label: "验收人",
        align: "center",
        prop: "acceptanceName",
      },
      {
        label: "验收时间",
        align: "center",
        prop: "acceptanceTime",
        formatData: (cell) => (cell ? dayjs(cell).format("YYYY-MM-DD HH:mm:ss") : ""),
      },
      {
        label: "状态",
@@ -269,15 +234,15 @@
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "300px",
        width: "320px",
      },
    ]
);

// type === 1 维修 2报修间
const handleDateChange = (value, type) => {
  filters.maintenanceTimeStr = null
  filters.c = null
    filters.maintenanceTimeStr = null;
    filters.c = null;
  if (type === 1) {
    if (value) {
      filters.maintenanceTimeStr = dayjs(value).format("YYYY-MM-DD");
@@ -291,41 +256,46 @@
};

// 打开附件弹窗
const recordId =ref(0)
const fileDialogVisible = ref(false)
  const recordId = ref(0);
  const fileDialogVisible = ref(false);

const openFileDialog = async (row) => {
  recordId.value = row.id
  fileDialogVisible.value = true
}
  const openFileDialog = async row => {
    recordId.value = row.id;
    fileDialogVisible.value = true;
  };

// 多选后做什么
const handleSelectionChange = (selectionList) => {
  const handleSelectionChange = selectionList => {
  multipleList.value = selectionList;
};

// 检查选中的记录中是否有完结状态的
const hasFinishedStatus = computed(() => {
  return multipleList.value.some(item => item.status === 1)
})
    return multipleList.value.some(item => item.status === 1);
  });

// 新增报修
const addRepair = () => {
  repairModalRef.value.openAdd();
};

  // 详情查看
  const viewRepair = id => {
    repairModalRef.value.openView(id);
  };

// 编辑报修
const editRepair = (id) => {
  const editRepair = id => {
  repairModalRef.value.openEdit(id);
};

// 新增维修
const addMaintain = (row) => {
  const addMaintain = row => {
  maintainModalRef.value.open(row.id, row);
};

// 打开验收弹窗
const openAcceptance = (row) => {
  const openAcceptance = row => {
  acceptanceModalRef.value.open(row);
};

@@ -336,7 +306,7 @@
};

// 单行删除
const delRepairByIds = async (ids) => {
  const delRepairByIds = async ids => {
  // 检查是否有完结状态的记录
  const idsArray = Array.isArray(ids) ? ids : [ids];
  const hasFinished = idsArray.some(id => {
@@ -345,7 +315,7 @@
  });

  if (hasFinished) {
    ElMessage.warning('不能删除状态为完结的记录');
      ElMessage.warning("不能删除状态为完结的记录");
    return;
  }