EMS_client/src/views/module_tpm/equipment/modulesDetail/EquipmentDetail.vue

<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    @close="close"
    destroyOnClose
    :visible="visible"
    class="equipment-detail-drawer"
    >
    <a-spin :spinning="confirmLoading" style="height: 100%;">
      <div class="u-flex-jab equipment-detail-container">
        <!-- 基础信息详情 -->
        <div class="base-info-container">
          <a-descriptions title="" layout="vertical" bordered size="middle" :column="2" class="equiment-info">
            <a-descriptions-item label="设备编号">
              {{detailData.equipmentcode}}
            </a-descriptions-item>
            <a-descriptions-item label="设备名称">
              {{detailData.equipmentname}}
            </a-descriptions-item>
            <a-descriptions-item label="设备分类">
              {{detailData.equipmenttreeid_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="规格型号">
              {{detailData.spec}}
            </a-descriptions-item>
            <a-descriptions-item label="安装地点" :span="2">
              {{detailData.address}}
            </a-descriptions-item>
            <a-descriptions-item label="区域">
              {{detailData.spaceid_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="周期">
              {{detailData.equipmentCycle}}
            </a-descriptions-item>
            <a-descriptions-item label="周期单位">
              {{detailData.cycleUnit_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="出厂编号">
              {{detailData.factoryNo}}
            </a-descriptions-item>
            <a-descriptions-item label="出厂日期">
              {{detailData.productDate}}
            </a-descriptions-item>
            <a-descriptions-item label="启用日期">
              {{detailData.activeDate}}
            </a-descriptions-item>
            <a-descriptions-item label="责任部门">
              {{detailData.responseDepartment_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="负责人">
              {{detailData.responsePerson_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="领用人">
              {{detailData.recipient_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="管理状态">
              {{detailData.manageStatus_dictText}}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 巡检详情 -->
        <a-tabs default-active-key="submission" @change="callback" class="equipment-cmms-tabs">
          <!-- <a-tab-pane key="repair" tab="维修记录">
            <eq-cmms-repair-log></eq-cmms-repair-log>
          </a-tab-pane> -->
          <a-tab-pane key="submission" tab="送检记录">
            <eq-cmms-submission-log :id="detailData.id"></eq-cmms-submission-log>
          </a-tab-pane>
          <!-- <a-tab-pane key="spotcheck" tab="点检记录" force-render>
            <eq-cmms-spotcheck-log></eq-cmms-spotcheck-log>
          </a-tab-pane> -->
          <a-tab-pane key="inspect" tab="巡检记录">
            <eq-cmms-inspect-log :id="detailData.id"></eq-cmms-inspect-log>
          </a-tab-pane>
          <a-tab-pane key="upkeep" tab="保养记录">
            <eq-cmms-upkeep-log :id="detailData.id"></eq-cmms-upkeep-log>
          </a-tab-pane>
        </a-tabs>
        
      </div>
    </a-spin>

  </a-drawer>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import EqCmmsInspectLog from './EqCmmsInspectLog.vue'
  import EqCmmsRepairLog from './EqCmmsRepairLog.vue'
  import EqCmmsSubmissionLog from './EqCmmsSubmissionLog.vue'
  import EqCmmsSpotcheckLog from './EqCmmsSpotcheckLog.vue'
  import EqCmmsUpkeepLog from './EqCmmsUpkeepLog.vue'
  export default {
    components: { 
      EqCmmsInspectLog,
      EqCmmsRepairLog,
      EqCmmsSubmissionLog,
      EqCmmsSpotcheckLog,
      EqCmmsUpkeepLog
    },
    name: 'RepairManageDetail',
    data () {
      return {
        title:"详情",
        width:'100%',
        visible: false,
        confirmLoading: false, // 加载中
        detailData: {}, // 详情
        logData: [], // 操作日志表格数据
        // 表头
        columns: [
          // {
          //   title: '序号',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'节点名称',
            align:"center",
            dataIndex: 'nodename'
          },
          {
            title:'日期',
            align:"center",
            dataIndex: 'handledate'
          },
          {
            title:'处理意见',
            align:"center",
            dataIndex: 'opinion'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
      }
    },
    created(){
    },
    methods: {
      detail (record) {
        console.log(record)
        this.detailData = record
        this.visible = true
        this.title = record.equipmentname
        // this.title = record.repairname + ' 详情'
        // this.confirmLoading = true
        // getAction('/cmmsRepair/cmmsRepair/queryById',{id:record.id}).then((res)=>{
        //   if(res.success){
        //     this.detailData = res.result
        //     this.logData = res.result.nodeList
        //   }else{
        //     this.$message.warning(res.message);
        //   }
        // }).finally(() => {
        //   this.confirmLoading = false;
        // })
      },
      close () {
        this.visible = false;
      },
      callback(key) {
        console.log(key);
      },

    }
  }
</script>

<style lang="less" scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .equipment-detail-drawer{
    height: 100vh;
    overflow: hidden;
    /deep/ .ant-drawer-body{
      height: calc(100vh - 55px);
      overflow: hidden;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .base-info-container{
      width: calc(50% - 6px);
      height: calc(100vh - 55px - 40px);
      overflow: auto;
      background-color: #fff;
      padding: 12px;
      border-radius: 4px;
      margin-right: 6px;
      .equiment-info{
      }
    }
    .equipment-cmms-tabs{
      width: calc(50% - 6px);
      height: calc(100vh - 55px - 40px);
      background-color: #fff;
      padding: 12px;
      border-radius: 4px;
      margin-left: 6px;
      
    }
    .equipment-cmms-table{
      overflow: auto;
    }
  }
</style>