hitch-sb-antd/src/views/sb/info/modules/DetailC.vue

<template>
  <a-card v-show="visibleDetail" :title="modalTitle">
    <div v-show="visible">
      <div style="padding: 20px;">
        <a-row :gutter="48" slot="extra">
          <a-col :md="48" :sm="48">
            <span style="float: left">
              <a-badge :count="numChildSbInfo" title="子设备总数" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button style="margin-left: 20px" type="default" @ok="handleOk" @click="handleViewChildSbInfo()">子设备</a-button>
              </a-badge>
              <a-badge :count="numPartInfo" title="设备部位总数" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button style="margin-left: 20px" type="default" @ok="handleOk" @click="partInfoListView()">设备部位</a-button>
              </a-badge>
              <a-badge :count="numModelbom" title="备件总数" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button style="margin-left: 20px" type="default" @ok="handleOk" @click="handleViewBom()">备件BOM</a-button>
              </a-badge>
              <a-badge :count="numCheckStandard" title="维护项目总数" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button style="margin-left: 20px" type="default" @ok="handleOk" @click="handleViewCheck()">维护项目</a-button>
              </a-badge>
              <a-badge :count="numCheckjob" title="保养任务总数" :number-style="{ backgroundColor: '#52c41a' }">
                <a-button style="margin-left: 20px" type="default" @click="handleViewCheckJob()">保养任务</a-button>
              </a-badge>
              <a-button v-show="model.useType==4" style="margin-left: 8px" type="default" @click="handleMeasure()">检定记录</a-button>
              <a-button style="margin-left: 20px" type="error" @click="handleTuiCalendar(1)">保养日历</a-button>
              <a-button style="margin-left: 20px" type="default" @click="handleRepairReportSbInfo()">工单分析</a-button>
              <a-button style="margin-left: 20px" type="default" @click="handleRepairReportSbInfoFee()">费用分析</a-button>
              <a-button style="margin-left: 20px" type="primary" @click="handleCancel()">返回</a-button>
            <!-- <a-button style="margin-left: 20px" type="default" >检定记录</a-button>
            <a-button style="margin-left: 20px" type="error" >保养日历</a-button>
            <a-button style="margin-left: 20px" type="default">工单分析</a-button>
            <a-button style="margin-left: 20px" type="default">费用分析</a-button>
            <a-button style="margin-left: 20px" type="primary">返回</a-button> -->
            </span>
          </a-col>
        </a-row>
      </div>
      <a-layout>
        <a-layout-sider :width="335">

          <img-code
            style="border: 1px dashed #ccc"
            :src="model.qrCode"
            title="点击重新生成二维码"
            :code-id="model.id"
            :width="297"
            :height="297"></img-code>
          <a-divider style="background: #D6D6D6" />
          <a-row type="flex" justify="space-between" :gutter="[16,16]">
            <a-col :span="10">
              <a-button shape="round" block>
                配件记录
              </a-button>
            </a-col>
            <a-col :span="10">
              <a-button shape="round" type="primary" block>
                配件记录
              </a-button>
            </a-col>
            <a-col :span="10">
              <a-button shape="round" block>

                配件记录
              </a-button>
            </a-col>
            <a-col :span="10">
              <a-button shape="round" block>

                配件记录
              </a-button>
            </a-col>
            <a-col :span="10">
              <a-button shape="round" block>

                配件记录
              </a-button>
            </a-col>
            <a-col :span="10">
              <a-button shape="round" block>

                配件记录
              </a-button>
            </a-col>
          </a-row>

        </a-layout-sider>
        <a-layout-content :style="{ background: '#fff',padding: '20px'}">
          <a-card >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>基本信息</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="设备（新号）">
                {{ model.no }}
              </a-descriptions-item>
              <a-descriptions-item label="设备（旧号）">
                {{ model.zbh }}
              </a-descriptions-item>
              <a-descriptions-item label="设备描述">
                {{ model.name }}
              </a-descriptions-item>
              <a-descriptions-item label="规格型号">
                {{ model.model }}
              </a-descriptions-item>
              <a-descriptions-item label="ABC 标识" >
                {{ BaseTool.Object.getField(levelMap,model.level) }}
              </a-descriptions-item>
              <a-descriptions-item label="设备类型">
                {{ model.typeName }}
              </a-descriptions-item>
              <a-descriptions-item label="自定义类型">
                {{ BaseTool.Object.getField(useTypeMap,model.useType) }}
              </a-descriptions-item>
              <a-descriptions-item label="生产商">
                {{ model.producerName }}
              </a-descriptions-item>
              <a-descriptions-item label="大小尺寸">
                {{ model.zz }}
              </a-descriptions-item>
              <a-descriptions-item label="系列号(出厂编号)">{{ model.zzh }}</a-descriptions-item>
              <a-descriptions-item label="使用位置">{{ model.cph }}</a-descriptions-item>
              <a-descriptions-item label="所属车间">{{ model.positionName }}</a-descriptions-item>
              <a-descriptions-item label="使用寿命">{{ model.workYear }}</a-descriptions-item>
              <a-descriptions-item label="是否显示">{{ model.isShow?'显示':'不显示' }}</a-descriptions-item>
              <a-descriptions-item v-if="model.isChild == 1" label="是否子设备">子设备</a-descriptions-item>
              <a-descriptions-item v-else-if="model.isChild == 2" label="是否子设备">父设备</a-descriptions-item>
              <a-descriptions-item v-else-if="model.isChild == 3" label="是否子设备">独立设备</a-descriptions-item>
              <a-descriptions-item label="状态"><badge :status="DictCache.COLOR.SB_INFO_STATUS[model.status]" :text="statusMap[model.status]"></badge></a-descriptions-item>
              <a-descriptions-item label="备注">{{ model.remark }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br>
          <a-card >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>自定义参数</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item v-for="item in paramList" :key="item.name" :label="item.name">{{ item.content }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br>
          <a-card >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>资产编号</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="资产编号1">{{ model.financingNo }}</a-descriptions-item>
              <a-descriptions-item label="资产编号2">{{ model.financingNoTwo }}</a-descriptions-item>
              <a-descriptions-item label="资产编号3">{{ model.financingNoThird }}</a-descriptions-item>
              <a-descriptions-item label="资产编号4">{{ model.financingNoFour }}</a-descriptions-item>
              <a-descriptions-item label="资产编号5">{{ model.financingNoFive }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br>
          <a-card >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>人员信息</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="使用人">{{ model.saveUserName }}</a-descriptions-item>
              <a-descriptions-item label="第一维修人">{{ model.repairUserName }}</a-descriptions-item>
              <a-descriptions-item label="第二维修人">{{ model.repairUserNameSecond }}</a-descriptions-item>
              <a-descriptions-item label="购置日期">{{ model.buyDate }}</a-descriptions-item>
              <a-descriptions-item label="投用日期">{{ model.startDate }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br>
          <a-card v-show="model.useType == 5">
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>特种信息</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="注册代码">{{ model.registerNo }}</a-descriptions-item>
              <a-descriptions-item label="介质属性">{{ model.characterType }}</a-descriptions-item>
              <a-descriptions-item label="使用登记证编号">{{ model.usedNo }}</a-descriptions-item>
              <a-descriptions-item label="维护供应商">{{ model.supplier }}</a-descriptions-item>
              <a-descriptions-item label="设备批号">{{ model.batchNo }}</a-descriptions-item>
              <a-descriptions-item label="设计到期年限">{{ model.retirementDate }}</a-descriptions-item>
              <a-descriptions-item label="登记日期">{{ model.registerDate }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br v-show="model.useType == 5">
          <a-card v-show="model.useType == 4" >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>计量信息</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="测量设备编号">{{ model.cardNo }}</a-descriptions-item>
              <a-descriptions-item label="准确度等级">{{ model.fdjxh }}</a-descriptions-item>
              <a-descriptions-item label="检定日期">{{ model.checkDate }}</a-descriptions-item>
              <a-descriptions-item label="检定周期">{{ model.checkPeriod }}</a-descriptions-item>
              <a-descriptions-item label="检定有效期">{{ model.nextCheckDate }}</a-descriptions-item>
              <a-descriptions-item label="检定单位">{{ model.dph }}</a-descriptions-item>
              <a-descriptions-item label="检定人">{{ model.zaiz }}</a-descriptions-item>
              <a-descriptions-item label="检定结论">{{ BaseTool.Object.getField(rlTypeMap,model.rlType) }}</a-descriptions-item>
              <a-descriptions-item label="是否周检查">{{ BaseTool.Object.getField(colorMap,model.color) }}</a-descriptions-item>
              <a-descriptions-item label="检定证书编号">{{ model.sbdh }}</a-descriptions-item>
              <a-descriptions-item label="预警天数">{{ model.seatNumber }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br v-show="model.useType == 4">
          <a-card >
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>文件信息</b></div>
            <a-descriptions bordered :column="3">
              <a-descriptions-item label="维保手册">
                <a-upload
                  :multiple="true"
                  :fileList="BaseTool.UPLOAD.transImg(model.repairFileList)"
                >
                </a-upload>
              </a-descriptions-item>
              <a-descriptions-item label="使用手册">
                <a-upload
                  :multiple="true"
                  :fileList="BaseTool.UPLOAD.transImg(model.useFileList)"
                >
                </a-upload>
              </a-descriptions-item>
              <a-descriptions-item label="验收文件">
                <a-upload
                  :multiple="true"
                  :fileList="BaseTool.UPLOAD.transImg(model.recheckFileList)"
                >
                </a-upload>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
          <br>
          <a-card>
            <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>图片信息</b></div>
            <br>
            <a-row v-if="model.sbFileList != null && model.sbFileList.length > 0" type="flex" justify="space-between" :gutter="[16,16]">
              <a-col >
                <img v-for="item in model.sbFileList" :src="item.url" :key="item.id" class="image">
              </a-col>
            </a-row>
            <div v-if="model.sbFileList == null || model.sbFileList.length === 0"> 暂无</div>
          </a-card>
        </a-layout-content>
      </a-layout>
    </div>
    <detail-sb-bom ref="detailSbBomModal" @ok="handleOk"/>
    <detail-sb-check ref="detailSbCheckModal" @ok="handleOk"/>
    <detail-sb-check-job ref="detailSbCheckJobModal" @ok="handleOk"/>
    <detail-sb-measure ref="detailSbMeasureModal" @ok="handleOk"/>
    <detail-sb-info ref="detailSbInfoModal" @ok="handleOk"/>
    <part-info-list ref="partInfoList" />
    <repair-report-sb-info ref="repairReportSbInfo" :sb-id="model.id" @ok="handleOk"/>
    <repair-report-sb-info-fee ref="repairReportSbInfoFee" :sb-id="model.id" @ok="handleOk"/>
  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import RepairApplicationFormTable from '@/views/repair/application-form/modules/RepairApplicationFormTable'
import CheckJobTable from '@/views/check/checkjob/modules/CheckJobTable'
import SbStatusLogTable from '@/views/sb/status-log/modules/SbStatusLogTable'
import SbStopLogTable from '@/views/sb/stop-logs/modules/SbStopLogTable'
import { fetchFirmProducer } from '@/api/firm/producer'
import { queryNumCheckStandard } from '@/api/check/checkstandard'
import { queryNumCheckjob, queryTuiCalendarIgnores } from '@/api/check/checkjob'
import { queryNumRepairReason } from '@/api/repair/repair-reason'
import { queryNumPartInfo } from '@/api/part/info'
import { queryNumModelbom } from '@/api/sb/modelbom'
import { queryChildNumSbInfo } from '@/api/sb/info'
import SparePartUsedSelectTable from '@/views/sqarepartmanage/sparepartused/modules/SparePartUsedSelectTable'
import SbOilPageTable from '@/views/sb/oil/modules/SbOilPageTable'
import SbRunFillPageTable from '@/views/sb/run-fill/modules/SbRunFillPageTable'
import SbInspectionFillPageTable from '@/views/sb/inspection-fill/modules/SbInspectionFillPageTable'
import DetailSbBom from '@/views/sb/modelbom/modules/DetailSbBom'
import DetailSbCheck from '@/views/check/checkstandard/modules/DetailSbCheck'
import DetailSbCheckJob from '@/views/check/checkjob/modules/DetailSbCheckJob'
import DetailSbMeasure from '@/views/sb/measurelog/modules/DetailSbCheck'
import DetailSbInfo from '@/views/sb/info/modules/DetailSbInfo'
import RepairFeeTable from '@/views/repair/fee/modules/RepairFeeTable'
import RepairReportSbInfo from '@/views/dashboard/RepairReportSbInfo'
import RepairReportSbInfoFee from '@/views/dashboard/RepairReportSbInfoFee'
import PartInfoList from '@/views/part/info/modules/PartInfoList'
const DetailListItem = DetailList.Item

export default {
  name: 'SbInfoDetail',
  components: {
    DetailList,
    DetailListItem,
    RepairApplicationFormTable,
    CheckJobTable,
    SparePartUsedSelectTable,
    SbOilPageTable,
    SbRunFillPageTable,
    SbInspectionFillPageTable,
    DetailSbBom,
    DetailSbCheck,
    DetailSbCheckJob,
    PartInfoList,
    DetailSbMeasure,
    DetailSbInfo,
    RepairFeeTable,
    SbStatusLogTable,
    SbStopLogTable,
    RepairReportSbInfo,
    RepairReportSbInfoFee
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      paramList: [],
      visible: false,
      visibleDetail: false,
      activeKey: '3',
      isChildMap: {},
      isShowMap: {},
      collapseActiveKey: '1',
      model: {
        'no': null,
        'financingNo': null,
        'financingNoTwo': null,
        'financingNoThird': null,
        'financingNoFour': null,
        'financingNoFive': null,
        'name': null,
        'modelId': null,
        'typeId': null,
        'isShow': null,
        'isChild': null,
        'paramList': null,
        'parentId': null,
        'level': null,
        'useType': null,
        'rate': null,
        'month': null,
        'usedMonth': null,
        'initialValue': null,
        'currentValue': null,
        'cutValue': null,
        'producerId': null,
        // 'sourceType': null,
        // 'sourceSbId': null,
        // 'parentId': null,
        'unit': null,
        // 'position': null,
        // 'guigeId': null,
        'useCompanyName': null,
        'useProjectName': null,
        'useDeptName': null,
        'useGroupName': null,
        'useUserName': null,
        'saveDeptName': null,
        'saveUserName': null,
        'repairUserName': null,
        'repairUserNameSecond': null,
        'totalMiles': null,
        'totalHours': null,
        // 'lastBaoyangTime': null,
        // 'lastBaoyangMiles': null,
        // 'lastBaoyangHours': null,
        // 'baoyangTimes': null,
        'buyDate': null,
        'startDate': null,
        // 'nextCheckDate': null,
        // 'guaranteeDate': null,
        // 'workYear': null,
        // 'retirementDate': null,
        // 'depreciationType': null,
        'wbFile': null,
        'useFile': null,
        'checkFile': null,
        'sbImage': null,
        'sbFileList': null,
        'qrCode': null,
        'status': null,
        'remark': null,
        'parentName': null,
        'createdUserName': null,
        'typeName': null,
        'producerName': null,
        'zzh': null,
        'fdjxh': null,
        'fdjh': null,
        'cph': null,
        'positionId': null,
        'positionName': null,
        'dph': null,
        'zz': null,
        'rlType': null,
        'color': null,
        'seatNumber': null,
        'registerNo': null,
        'characterType': null,
        'usedNo': null,
        'supplier': null,
        'repairUserSecond': null,
        'batchNo': null,
        'workYear': null,
        'retirementDate': null,
        'registerDate': null
      },
      numCheckStandard: 0,
      numCheckjob: 0,
      numRepairReason: 0,
      numModelbom: 0,
      numPartInfo: 0,
      numChildSbInfo: 0,
      firmProducerLevelMap: {},
      firmSupplier: {},
      firmProducer: {},
      statusMap: {},
      useTypeMap: {},
      levelMap: {},
      unitMap: {},
      colorMap: {},
      rlTypeMap: {},
      sourceTypeMap: {}
    }
  },
  created () {
    this.depreciationTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_DEPRECIATIONTYPE)
    this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_LEVEL)
    this.firmProducerLevelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.FIRM_PRODUCER_LEVEL)
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_INFO_STATUS)
    this.unitMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_UNIT)
    this.colorMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_COLOR)
    this.rlTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.RANLIAO_TYPE)
    this.sourceTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBTYPE_SOURCETYPE)
    this.useTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_USE_TYPE)
    this.isChildMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_IS_CHILD)
    this.isShowMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_IS_SHOW)
  },
  computed: {
  },
  methods: {
    inited (viewer) {
      this.$viewer = viewer
    },
    handleViewBom (record) {
      this.visible = false
      const modal = this.$refs.detailSbBomModal
      modal.base(this.model)
    },
    handleViewChildSbInfo () {
      this.visible = false
      const modal = this.$refs.detailSbInfoModal
      modal.base(this.model)
    },
    handleViewCheck (record) {
      this.visible = false
      const modal = this.$refs.detailSbCheckModal
      modal.base(this.model)
    },
    handleViewCheckJob (record) {
      this.visible = false
      const modal = this.$refs.detailSbCheckJobModal
      modal.base(this.model)
    },
    handleMeasure (record) {
      this.visible = false
      const modal = this.$refs.detailSbMeasureModal
      modal.base(this.model)
    },
    handleRepairReportSbInfo  () {
      this.visible = false
      const modal = this.$refs.repairReportSbInfo
      modal.base()
    },
    handleRepairReportSbInfoFee  () {
      this.visible = false
      const modal = this.$refs.repairReportSbInfoFee
      modal.base()
    },
    base (record) {
      this.visible = true
      this.visibleDetail = true
      this.modalTitle = '详情'
      this.model = record
      this.activeKey = '1'
      this.collapseActiveKey = '0'
      this.paramList = JSON.parse(record.paramList)
      this.fetchNum()
      fetchFirmProducer({ id: this.model.producerId }).then(res => {
        this.firmProducer = res.data
      })
    },
    fetchNum () {
      Promise.all([
        queryNumPartInfo({ sbId: this.model.id }),
        queryNumModelbom({ sbId: this.model.id }),
        queryNumCheckStandard({ sbId: this.model.id }),
        queryNumCheckjob({ sbId: this.model.id }),
        queryNumRepairReason({ sbId: this.model.id })
      ])
        .then((values) => {
          this.numPartInfo = values[0].data
          this.numModelbom = values[1].data
          this.numCheckStandard = values[2].data
          this.numCheckjob = values[3].data
          this.numRepairReason = values[4].data
        })

      // 如果是父设备，则要获取子设备的数量，并点击后可以看到子设备的情况
      queryChildNumSbInfo({ parentId: this.model.id }).then(res => {
        this.numChildSbInfo = res.data
      })
    },
    changeTab (activeKey) {
      this.activeKey = activeKey
      if (this.activeKey === '2' && this.BaseTool.Object.isNotBlank(this.$refs.sparePartUsedSelectTable)) {
        this.$refs.sparePartUsedSelectTable.handleOk()
        return
      }
      if (this.activeKey === '3' && this.BaseTool.Object.isNotBlank(this.$refs.spotJobTable)) {
        this.$refs.spotJobTable.handleOk()
        return
      }
      if (this.activeKey === '4' && this.BaseTool.Object.isNotBlank(this.$refs.repairApplicationFormTable)) {
        this.$refs.repairApplicationFormTable.handleOk()
      }
      if (this.activeKey === '5' && this.BaseTool.Object.isNotBlank(this.$refs.repairFeeTable)) {
        this.$refs.repairFeeTable.handleOk()
      }
      if (this.activeKey === '6' && this.BaseTool.Object.isNotBlank(this.$refs.sbStatusLogTable)) {
        this.$refs.sbStatusLogTable.handleOk()
      }
      if (this.activeKey === '7' && this.BaseTool.Object.isNotBlank(this.$refs.sbStopLogTable)) {
        this.$refs.sbStopLogTable.handleOk()
      }
    },
    getQrcodeSrc: (dom) => {
      console.log(11, 22)
    },
    handleCancel (values) {
      this.visible = false
      this.visibleDetail = false
      this.confirmLoading = false
      this.$emit('ok', values)
    },
    handleOk () {
      this.visible = true
      this.fetchNum()
    },
    partInfoListView () {
      const modal = this.$refs.partInfoList
      modal.base({ sbId: this.model.id }, { sbId: this.model.id })
    },
    checkJobTableWaitDoListView () {
      const modal = this.$refs.checkJobTableWaitDo
      modal.base({ sbId: this.model.id }, { sbId: this.model.id, status: 1 })
    },
    handleTuiCalendar (level) {
      const that = this
      queryTuiCalendarIgnores({ sbId: this.model.id, type: 2 }).then(res => {
        const a = document.createElement('a')
        a.target = '_blank'
        a.href = '/tui-calendar/checkJobCalendar.html?'
        localStorage.setItem('calendarList', JSON.stringify(res.data.calendarList))
        var scheduleList = res.data.scheduleList
        scheduleList.forEach((item) => {
          item.start = that.BaseTool.Moment(item.start, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
          item.end = that.BaseTool.Moment(item.end, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
        })
        localStorage.setItem('scheduleList', JSON.stringify(scheduleList))
        a.click()
      })
    }
  }
}
</script>

<style scoped>
 .ant-layout-sider {
background: #fff !important;
padding: 20px 16px !important;
}
.ant-card-body{
  padding: 0  !important;
}
</style>