newcpms/ui/src/views/reliability/rel_maint_plan/MaintPlanDetailContent.vue

<template>
  <div>
    <!-- 基础信息区域 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-info"></i>
        <span class="section-title">基础信息</span>
      </div>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="装置">{{ planData.plant || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ planData.devName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备位号">{{ planData.devTag || '-' }}</el-descriptions-item>
        <el-descriptions-item label="计划开始时间">
          <span v-if="planData.planTime">{{ parseTime(planData.planTime, '{y}-{m}-{d}') }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="计划结束时间">
          <span v-if="planData.planEndTime">{{ parseTime(planData.planEndTime, '{y}-{m}-{d}') }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="责任人">{{ getStaffNameById(planData.responsible) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审批人">{{ getStaffNameById(planData.approver) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="计划审批状态">
          <el-tag v-if="planData.approvalStatus === '9'" type="" size="mini">未开始</el-tag>
          <el-tag v-else-if="planData.approvalStatus === '0'" type="warning" size="mini">待审批</el-tag>
          <el-tag v-else-if="planData.approvalStatus === '1'" type="success" size="mini">已通过</el-tag>
          <el-tag v-else-if="planData.approvalStatus === '-1'" type="danger" size="mini">未通过</el-tag>
          <span v-else>{{ planData.approvalStatus || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="计划完成状态">
          <el-tag v-if="planData.completionStatus === '9'" type="" size="mini">计划中</el-tag>
          <el-tag v-else-if="planData.completionStatus === '0'" type="info" size="mini">未完成</el-tag>
          <el-tag v-else-if="planData.completionStatus === '1'" type="success" size="mini">已完成</el-tag>
          <el-tag v-else-if="planData.completionStatus === '-1'" type="danger" size="mini">已拒绝</el-tag>
          <span v-else>{{ planData.completionStatus || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ planData.createrCode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          <span v-if="planData.createdate">{{ parseTime(planData.createdate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ planData.remarks || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 设备信息展示 -->
    <div class="form-section" v-if="deviceInfo">
      <div class="section-header">
        <i class="el-icon-s-platform"></i>
        <span class="section-title">设备信息</span>
      </div>
      <el-descriptions :column="3" border size="small">
        <el-descriptions-item label="装置">{{ deviceInfo.plant || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备位号">{{ deviceInfo.devTag || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ deviceInfo.devName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ deviceInfo.devLoc || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ deviceInfo.devType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="区域负责人">{{ deviceInfo.areaResponsible || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 维修记录列表 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-grid"></i>
        <span class="section-title">维修列表</span>
      </div>
      <el-table
        :data="maintRecords"
        border
        size="small"
        style="margin-top: 10px"
        v-loading="recordsLoading">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="部件名称" align="center" prop="compoName" width="150" />
        <el-table-column label="维修类型" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.maintType === '1'">检查</span>
            <span v-else-if="scope.row.maintType === '2'">维修</span>
            <span v-else-if="scope.row.maintType === '3'">更换</span>
            <span v-else>{{ scope.row.maintType || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ getStaffNameById(scope.row.responsible) || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="维修状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="getRecordStatusTagType(scope.row.recordStatus)" size="small">
              {{ getRecordStatusText(scope.row.recordStatus) }}
            </el-tag>
            <el-tag
              v-if="scope.row.memo"
              type="warning"
              size="small"
              style="margin-left: 5px; cursor: pointer;"
              @click.native.stop="handleViewMemo(scope.row.memo)">
              备
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="检查/维修时间" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.inspectTime || scope.row.maintTime">
              <span v-if="scope.row.inspectTime">
                {{ parseTime(scope.row.inspectTime, '{y}-{m}-{d}') }}
              </span>
              <span v-if="scope.row.inspectTime && scope.row.maintTime"> / </span>
              <span v-if="scope.row.maintTime">
                {{ parseTime(scope.row.maintTime, '{y}-{m}-{d}') }}
              </span>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="检查内容" prop="inspectContent" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="维修内容" prop="maintContent" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="维修结果" prop="maintResult"  align="center" width="100" :show-overflow-tooltip="true" />
        <el-table-column label="维修费用k" align="center" prop="maintCost" width="100" >
          <template slot-scope="scope">
            <span v-if="scope.row.maintCost">{{ scope.row.maintCost }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="维修时长h" align="center" prop="maintDuration" width="100" >
          <template slot-scope="scope">
            <span v-if="scope.row.maintDuration">{{ scope.row.maintDuration }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="工艺损失k" align="center" prop="processLoss" width="100" :show-overflow-tooltip="true" />
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" />
      </el-table>
      <div v-if="maintRecords.length === 0 && !recordsLoading" style="text-align: center; padding: 20px; color: #909399;">
        暂无维修记录
      </div>
    </div>

    <!-- 查看备忘录详情对话框 -->
    <el-dialog title="备忘录详情" :visible.sync="memoDialogVisible" width="700px" append-to-body>
      <el-descriptions :column="2" border v-if="memoDetail">
        <el-descriptions-item label="装置">{{ memoDetail.plant || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ memoDetail.devName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备位号">{{ memoDetail.devTag || '-' }}</el-descriptions-item>
        <el-descriptions-item label="部件名称">{{ memoDetail.compoName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维修类型">
          <span v-if="memoDetail.maintType === '1'">检查</span>
          <span v-else-if="memoDetail.maintType === '2'">维修</span>
          <span v-else-if="memoDetail.maintType === '3'">更换</span>
          <span v-else>{{ memoDetail.maintType || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="维修责任人">{{ getStaffNameById(memoDetail.responsible) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维修内容" :span="2">{{ memoDetail.maintContent || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备忘原因" :span="2">{{ memoDetail.memoReason || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备忘时间">
          <span v-if="memoDetail.memoTime">{{ parseTime(memoDetail.memoTime, '{y}-{m}-{d}') }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ memoDetail.remarks || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="memoDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime as formatTime } from "@/utils/ruoyi";
import { getRel_maint_memo } from "@/api/reliability/rel_maint_memo";

export default {
  name: "MaintPlanDetailContent",
  props: {
    planData: {
      type: Object,
      default: () => ({})
    },
    deviceInfo: {
      type: Object,
      default: null
    },
    maintRecords: {
      type: Array,
      default: () => []
    },
    recordsLoading: {
      type: Boolean,
      default: false
    },
    staffOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 备忘录对话框
      memoDialogVisible: false,
      memoDetail: null
    };
  },
  methods: {
    /** 根据员工号获取员工姓名 */
    getStaffNameById(staffid) {
      if (!staffid) return '';
      const staff = this.staffOptions.find(s => s.staffid === staffid);
      return staff ? staff.name : staffid;
    },
    /** 时间格式化 */
    parseTime(time, pattern) {
      return formatTime(time, pattern);
    },
    /** 获取维修状态文本 */
    getRecordStatusText(status) {
      if (status === 9 || status === '9') return '计划中';
      if (status === -1 || status === '-1') return '删除申请中';
      if (status === 0 || status === '0') return '新增申请中';
      if (status === 1 || status === '1') return '待完成';
      if (status === 2 || status === '2') return '已完成';
      if (status === 3 || status === '3') return '已延期';
      return status != null ? status : '-';
    },
    /** 获取维修状态标签类型 */
    getRecordStatusTagType(status) {
      if (status === -1 || status === '-1') return 'danger';
      if (status === 0 || status === '0') return 'warning';
      if (status === 1 || status === '1') return 'info';
      if (status === 2 || status === '2') return 'success';
      if (status === 3 || status === '3') return 'warning';
      return '';
    },
    /** 查看备忘录 */
    handleViewMemo(memo) {
      if (memo && memo.memoId) {
        // 如果memo对象已经有完整信息，直接显示
        this.memoDetail = memo;
        this.memoDialogVisible = true;
      } else if (memo && memo.recordId) {
        // 如果只有recordId，需要通过recordId查询备忘录
        // 这里可以根据需要调用API查询
        this.memoDetail = memo;
        this.memoDialogVisible = true;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.form-section {
  margin-bottom: 20px;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e7ed;

    .el-icon-info,
    .el-icon-s-platform,
    .el-icon-s-grid {
      font-size: 18px;
      color: #409EFF;
      margin-right: 8px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
}
</style>