abb-antd/src/views/sb/info/modules/Detail.vue

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <a-card :bordered="false" v-show="visibleDetail" class="card" :title="modalTitle">
    <div v-show="visible">
      <a-row :gutter="48" slot="extra">
        <a-col :md="48" :sm="48">
          <span class="table-page-search-submitButtons" style="float: right">
            <a-badge :count="numChildSbInfo" title="子设备总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 16px" type="default" @ok="handleOk" @click="handleViewChildSbInfo()">子设备</a-button>
            </a-badge>
            <a-badge :count="numPartInfo" title="设备部位总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 16px" type="default" @ok="handleOk" @click="partInfoListView()">设备部位</a-button>
            </a-badge>
            <a-badge :count="numModelbom" title="备件总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 16px" 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: 16px" type="default" @ok="handleOk" @click="handleViewCheck()">保养项目</a-button>
            </a-badge>
            <a-badge :count="numCheckjob" title="待保养项目总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 8px" 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: 8px" type="error" @click="handleTuiCalendar()">保养日历图</a-button>
            <a-button style="margin-left: 8px" type="primary" @click="handleCancel()">返回</a-button>
          </span>
        </a-col>
      </a-row>
      <detail-list title="" :col="3">
        <!--        <detail-list-item v-for="item in model.sbFileList" term="">
                  <img :src="BaseTool.Constant.FILE_URL + item.url" width="200px" height="200px"/>
                </detail-list-item>-->
        <detail-list-item>
          <img-code :src="model.qrCode" title="点击重新生成二维码" :code-id="model.id" :width="200"></img-code>
        </detail-list-item>
      </detail-list>

      <title-divider title="基本信息" width="90px"></title-divider>
      <detail-list title="" :col="3">
        <detail-list-item term="设备（新号）">{{ model.no }}</detail-list-item>
        <detail-list-item term="设备（旧号）">{{ model.zbh }}</detail-list-item>
        <detail-list-item term="设备描述">{{ model.name }}</detail-list-item>
        <detail-list-item term="规格型号">{{ model.model }}</detail-list-item>
        <detail-list-item term="ABC 标识">{{ BaseTool.Object.getField(levelMap,model.level) }}</detail-list-item>
        <detail-list-item term="设备类型">{{ model.typeName }}</detail-list-item>
        <detail-list-item term="自定义类型">{{ BaseTool.Object.getField(useTypeMap,model.useType) }}</detail-list-item>
        <detail-list-item term="生产商">{{ model.producerName }}</detail-list-item>
        <detail-list-item term="大小尺寸">{{ model.zz }}</detail-list-item>
        <detail-list-item term="系列号(出厂编号)">{{ model.zzh }}</detail-list-item>
        <detail-list-item term="使用寿命">{{ model.workYear }}</detail-list-item>
        <detail-list-item term="是否显示">{{ model.isShow?'显示':'不显示' }}</detail-list-item>
        <detail-list-item v-show="model.isChild == 1" term="是否子设备">子设备</detail-list-item>
        <detail-list-item v-show="model.isChild == 2" term="是否子设备">父设备</detail-list-item>
        <detail-list-item v-show="model.isChild == 3" term="是否子设备">独立设备</detail-list-item>
        <detail-list-item term="状态"><badge :status="DictCache.COLOR.SB_INFO_STATUS[model.status]" :text="statusMap[model.status]"></badge></detail-list-item>
        <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
      </detail-list>
      <title-divider width="120px" title="自定义参数"></title-divider>
      <detail-list v-for="item in paramList" title="" :col="3">
        <detail-list-item term="参数名称">{{ item.name }}</detail-list-item>
        <detail-list-item term="参数内容">{{ item.content }}</detail-list-item>
      </detail-list>
      <title-divider title="资产编号" width="90px"></title-divider>
      <detail-list title="" :col="3">
        <detail-list-item term="资产编号1">{{ model.financingNo }}</detail-list-item>
        <detail-list-item term="资产编号2">{{ model.financingNoTwo }}</detail-list-item>
        <detail-list-item term="资产编号3">{{ model.financingNoThird }}</detail-list-item>
        <detail-list-item term="资产编号4">{{ model.financingNoFour }}</detail-list-item>
        <detail-list-item term="资产编号5">{{ model.financingNoFive }}</detail-list-item>
      </detail-list>
      <title-divider title="人员信息" width="90px"></title-divider>
      <detail-list title="" :col="3">
        <detail-list-item term="使用人">{{ model.saveUserName }}</detail-list-item>
        <detail-list-item term="第一维修人">{{ model.repairUserName }}</detail-list-item>
        <detail-list-item term="第二维修人">{{ model.repairUserNameSecond }}</detail-list-item>
      </detail-list>
      <detail-list title="" :col="3">
        <detail-list-item term="购置日期">{{ model.buyDate }}</detail-list-item>
        <detail-list-item term="投用日期">{{ model.startDate }}</detail-list-item>
      </detail-list>
      <title-divider v-show="model.useType == 5" title="特种信息" width="90px"></title-divider>
      <detail-list v-show="model.useType == 5" title="" :col="3">
        <detail-list-item term="注册代码">{{ model.registerNo }}</detail-list-item>
        <detail-list-item term="介质属性">{{ model.characterType }}</detail-list-item>
        <detail-list-item term="使用登记证编号">{{ model.usedNo }}</detail-list-item>
        <detail-list-item term="维护供应商">{{ model.supplier }}</detail-list-item>
        <detail-list-item term="设备批号">{{ model.batchNo }}</detail-list-item>
        <detail-list-item term="设计到期年限">{{ model.retirementDate }}</detail-list-item>
        <detail-list-item term="登记日期">{{ model.registerDate }}</detail-list-item>
      </detail-list>
      <title-divider v-show="model.useType == 4" title="计量信息" width="90px"></title-divider>
      <detail-list v-show="model.useType == 4" title="" :col="3">
        <detail-list-item term="测量设备编号">{{ model.cardNo }}</detail-list-item>
        <detail-list-item term="准确度等级">{{ model.fdjxh }}</detail-list-item>
        <detail-list-item term="检定日期">{{ model.checkDate }}</detail-list-item>
        <detail-list-item term="检定周期">{{ model.checkPeriod }}</detail-list-item>
        <detail-list-item term="检定有效期">{{ model.nextCheckDate }}</detail-list-item>
        <detail-list-item term="检定单位">{{ model.dph }}</detail-list-item>
        <detail-list-item term="检定人">{{ model.zaiz }}</detail-list-item>
        <detail-list-item term="检定结论">{{ BaseTool.Object.getField(rlTypeMap,model.rlType) }}</detail-list-item>
        <detail-list-item term="是否周检查">{{ BaseTool.Object.getField(colorMap,model.color) }}</detail-list-item>
        <detail-list-item term="检定证书编号">{{ model.sbdh }}</detail-list-item>
        <detail-list-item term="预警天数">{{ model.seatNumber }}</detail-list-item>
      </detail-list>
      <title-divider title="图片信息" width="90px"></title-divider>
      <detail-list title="" :col="1">
        <detail-list-item term="" v-if="model.sbFileList != null && model.sbFileList.length > 0">
          <viewer :images="model.sbFileList" @inited="inited" ref="viewer" :index="1" >
            <img v-for="item in model.sbFileList" :src="item.url" :key="item.id" class="image">
          </viewer>
        </detail-list-item>
        <detail-list-item term="" v-if="model.sbFileList == null || model.sbFileList.length === 0">
          暂无
        </detail-list-item>
      </detail-list>
      <title-divider title="文件信息" width="90px"></title-divider>
      <detail-list title="" :col="4">
        <detail-list-item term="维保手册">
          <a-upload
            :multiple="true"
            :fileList="BaseTool.UPLOAD.transImg(model.repairFileList)"
          >
          </a-upload>
        </detail-list-item>
        <detail-list-item term="使用手册">
          <a-upload
            :multiple="true"
            :fileList="BaseTool.UPLOAD.transImg(model.useFileList)"
          >
          </a-upload>
        </detail-list-item>
        <detail-list-item term="验收文件">
          <a-upload
            :multiple="true"
            :fileList="BaseTool.UPLOAD.transImg(model.recheckFileList)"
          >
          </a-upload>
        </detail-list-item>
      </detail-list>
      <title-divider title="相关数据" width="90px"></title-divider>
      <q-tabs :activeKey="activeKey" @change="changeTab">
        <q-tab-pane key="2" tab="配件记录">
          <spare-part-used-select-table :type="2" :table-params="{sbId: model.id, modelId: model.modelId}" ref="sparePartUsedSelectTable"/>
        </q-tab-pane>
        <q-tab-pane key="3" tab="保养任务">
          <check-job-table :type="2" :check-type="2" :table-params="{sbId: model.id}" ref="spotJobTable" />
        </q-tab-pane>
        <q-tab-pane key="4" tab="历史故障">
          <repair-application-form-table :type="2" :table-params="{sbId: model.id, sbName: model.name}" ref="repairApplicationFormTable" />
        </q-tab-pane>
        <q-tab-pane key="5" tab="历史费用">
          <repair-fee-table :table-params="{sbId: model.id}" ref="repairFeeTable" />
        </q-tab-pane>
      </q-tabs>
    </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" />
    <!--    <check-job-table-wait-do :type="2" :check-type="2" ref="checkJobTableWaitDo" @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 CheckJobTableWaitDo from '@/views/check/checkjob/modules/CheckJobTableWaitDo'
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 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
  },
  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,
        '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)
    },
    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, status: this.DictCache.VALUE.CHECK_JOB_STATUS.NOT_EXECUTE }),
        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()
      }
    },
    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 () {
      queryTuiCalendarIgnores({ sbId: this.model.id, type: 2 }).then(res => {
        const a = document.createElement('a')
        a.href = '/tui-calendar/example00-basic.html?'
        localStorage.setItem('calendarList', JSON.stringify(res.data.calendarList))
        localStorage.setItem('scheduleList', JSON.stringify(res.data.scheduleList))
        a.target = '_blank'
        a.click()
      })
    }
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel {
  width: 300px;
  height: 300px;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 300px;
  line-height: 300px;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.image {
  width: calc(20% - 10px);
  cursor: pointer;
  margin: 5px;
  display: inline-block;
}
</style>