gaoluyang
2026-08-06 377c0a70c094d024aeb0bb94f4b791c6d5530c1e
src/views/equipmentManagement/defectManagement/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,221 @@
<template>
  <div class="defect-management">
    <!-- æ“ä½œæŒ‰é’® -->
    <div class="actions">
      <el-button type="primary" @click="showRegisterDialog = true">登记缺陷</el-button>
    </div>
    <!-- ç¼ºé™·åˆ—表 -->
    <el-table :data="defectList" style="width: 100%; margin-top: 10px;" border>
      <el-table-column prop="deviceName" label="设备名称" width="180"></el-table-column>
      <el-table-column prop="defectDescription" label="缺陷描述" win-width="300"></el-table-column>
      <el-table-column prop="status" label="状态" width="220">
        <template #default="{ row }">
          <el-tag :type="row.status === '严重缺陷' ? 'danger' : 'success'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button
            v-if="row.status === '严重缺陷' || row.status === '一般缺陷'"
            type="text"
            @click="eliminateDefect(row)"
          >
            æ¶ˆé™¤ç¼ºé™·
          </el-button>
          <!-- <el-button
            v-if="row.status === '严重缺陷'"
            type="text"
            @click="transferToRepairOrder(row.id)"
          >
            è½¬ç»´ä¿®å•
          </el-button> -->
          <el-button type="text" @click="getLedger(row.deviceLedgerId)">
            æŸ¥çœ‹å°è´¦
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- ç¼ºé™·ç™»è®°å¯¹è¯æ¡† -->
    <el-dialog title="登记设备缺陷" v-model="showRegisterDialog" width="50%">
      <el-form :model="defectForm" :rules="defectRules" ref="defectFormRef" label-width="100px">
        <el-form-item label="设备名称" prop="deviceName">
          <el-select v-model="defectForm.deviceLedgerId" @change="setDeviceModel">
            <el-option
              v-for="(item, index) in deviceOptions"
              :key="index"
              :label="item.deviceName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缺陷描述" prop="defectDescription">
          <el-input type="textarea" v-model="defectForm.defectDescription"></el-input>
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-radio-group v-model="defectForm.status">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="一般缺陷">一般缺陷</el-radio>
            <el-radio label="严重缺陷">严重缺陷</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showRegisterDialog = false">取消</el-button>
          <el-button type="primary" @click="submitDefectForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ç¼ºé™·è®¾å¤‡å°è´¦å¯¹è¯æ¡† -->
    <el-dialog title="缺陷设备台账" v-model="showLedgerDialog" width="80%">
      <el-table :data="ledgerList" style="width: 100%; margin-top: 10px;" border>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="defectDescription" label="缺陷描述"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="eliminateTime" label="消缺时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
// å‡è®¾ä»¥ä¸‹æ˜¯åŽç«¯æŽ¥å£
import {
  registerDefect,
  getDefectList,
  eliminateDefect as apiEliminateDefect,
  getDefectLedger,
  deleteDefect
} from '@/api/equipmentManagement/defectManagement';
// ç¼ºé™·åˆ—表
const defectList = ref([]);
// ç™»è®°å¯¹è¯æ¡†æ˜¾ç¤ºçŠ¶æ€
const showRegisterDialog = ref(false);
// å°è´¦å¯¹è¯æ¡†æ˜¾ç¤ºçŠ¶æ€
const showLedgerDialog = ref(false);
// ç¼ºé™·è¡¨å•
const defectForm = reactive({
  deviceLedgerId: '',
  defectDescription: '',
  status: '',
});
const deviceOptions = ref([]);
// è¡¨å•验证规则
const defectRules = reactive({
  deviceLedgerId: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  defectDescription: [{ required: true, message: '请输入缺陷描述', trigger: 'blur' }]
});
// è¡¨å•引用
const defectFormRef = ref(null);
// å°è´¦åˆ—表
const ledgerList = ref([]);
const loadDeviceName = async () => {
  const { data } = await getDeviceLedger();
  // console.log(data);
  deviceOptions.value = data;
};
// èŽ·å–ç¼ºé™·åˆ—è¡¨
const fetchDefectList = async () => {
  try {
    const res = await getDefectList();
    if (res.code === 200) {
      defectList.value = res.data.records;
    } else {
      ElMessage.error(res.message || '获取缺陷列表失败');
    }
  } catch (error) {
    ElMessage.error('获取缺陷列表失败');
  }
};
// æäº¤ç¼ºé™·ç™»è®°è¡¨å•
const submitDefectForm = async () => {
  if (!defectFormRef.value) return;
  try {
    await defectFormRef.value.validate();
    const res = await registerDefect(defectForm);
    if (res.code === 200) {
      ElMessage.success('缺陷登记成功');
      showRegisterDialog.value = false;
      fetchDefectList();
    } else {
      ElMessage.error(res.message || '缺陷登记失败');
    }
  } catch (error) {
    ElMessage.error('请填写完整表单信息');
  }
};
// æ¶ˆé™¤ç¼ºé™·
const eliminateDefect = async (row) => {
  try {
    const res = await apiEliminateDefect(row);
    if (res.code === 200) {
      ElMessage.success('缺陷消除成功');
      fetchDefectList();
    } else {
      ElMessage.error(res.message || '缺陷消除失败');
    }
  } catch (error) {
    ElMessage.error('缺陷消除失败');
  }
};
// // è½¬ç»´ä¿®å·¥å•
// const transferToRepairOrder = async (id) => {
//   try {
//     const res = await transferToRepair(id);
//     if (res.code === 200) {
//       ElMessage.success('转维修工单成功');
//     } else {
//       ElMessage.error(res.message || '转维修工单失败');
//     }
//   } catch (error) {
//     ElMessage.error('转维修工单失败');
//   }
// };
// èŽ·å–ç¼ºé™·è®¾å¤‡å°è´¦
const getLedger = async (deviceLedgerId) => {
  try {
    const res = await getDefectLedger(deviceLedgerId);
    if (res.code === 200) {
      ledgerList.value = res.data.records;
      showLedgerDialog.value = true;
    } else {
      ElMessage.error(res.message || '获取缺陷设备台账失败');
    }
  } catch (error) {
    ElMessage.error('获取缺陷设备台账失败');
  }
};
// ç»„件挂载时获取缺陷列表
const onMounted = () => {
  fetchDefectList();
  loadDeviceName();
};
onMounted();
</script>
<style scoped>
.defect-management {
  padding: 20px;
}
.actions {
  margin-bottom: 10px;
}
</style>