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

<template>
  <div v-if="visible">
    <div class="card">
      <a-tabs v-model="activeKey">
        <template v-for="(item,i) in components">
          <a-tab-pane v-if="item.show" :key="i">
            <div slot="tab" v-if="item.badge">
              <a-badge :count="item.badge.count" :title="item.badge.title" :number-style="{ backgroundColor: '#52c41a' }">
                <div class="tab-title">
                  <my-icon v-if="item.isMy" class="icon" :type="item.icon"></my-icon>
                  <a-icon v-else class="icon" :type="item.icon" />
                  <div>
                    {{ item.name }}
                  </div>
                </div>
              </a-badge>
            </div>
            <div slot="tab" class="tab-title" v-else>
              <my-icon v-if="item.isMy" class="icon" :type="item.icon"></my-icon>
              <a-icon v-else class="icon" :type="item.icon" />
              <div>
                {{ item.name }}
              </div>
            </div>
          </a-tab-pane>
        </template>
      </a-tabs>
    </div>
    <div v-show="show">
      <keep-alive>
        <component :is="components[activeKey].component" v-bind="props" />
      </keep-alive>
    </div>
    <div class="btn">
      <a-space>
        <a-button style="margin-left: 20px" type="default" @click="handleEdit()">修改</a-button>
        <a-button type="default" :loading="confirmLoading" @click="handleOk()">刷新</a-button>
        <a-button type="primary" @click="handleBack">返回</a-button>

      </a-space>
    </div>
    <base-form ref="baseModal" @ok="handleOk"/>

  </div>
</template>

<script>
// 组件
import BaseForm from './BaseForm'
import DetailInfo from './detail/DetailInfo.vue'
import Children from './detail/Children.vue'
import PartInfoList from './detail/PartInfoList.vue'
import LocationList from './detail/LocationList.vue'
import SbModelBom from '@/views/sb/modelbom/SbModelBom.vue'
import CheckStandard from '@/views/check/checkstandard/CheckStandard.vue'
import CheckJob from '@/views/check/checkjob/CheckJob.vue'
import DetailSbMeasure from './detail/DetailSbCheck.vue'

// api
import { queryNumCheckStandard } from '@/api/check/checkstandard'
import { queryNumCheckjob } from '@/api/check/checkjob'
import { queryNumRepairReason } from '@/api/repair/repair-reason'
import { queryNumPartInfo } from '@/api/part/info'
import { queryNumSbLocation } from '@/api/sb/location'
import { queryNumModelbom } from '@/api/sb/modelbom'
import { fetchSbInfo, queryChildNumSbInfo } from '@/api/sb/info'

export default {
  name: 'DetailC',
  components: {
    BaseForm,
    DetailInfo,
    Children,
    PartInfoList,
    LocationList,
    SbModelBom,
    CheckStandard,
    CheckJob,
    DetailSbMeasure
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      show: true,
      activeKey: 0,
      model: {},
      numCheckStandard1: 0,
      numCheckjob1: 0,
      numCheckStandard2: 0,
      numCheckjob2: 0,
      numCheckStandard3: 0,
      numCheckjob3: 0,
      numRepairReason: 0,
      numModelbom: 0,
      numPartInfo: 0,
      numLocation: 0,
      numChildSbInfo: 0
    }
  },
  computed: {
    props () {
      let props = null
      switch (this.activeKey) {
        case 0:
        case 1:
        case 7:
          props = {
            model: this.model
          }
          break
        case 2:
        case 3:
        case 4:
          props = {
            sbId: this.model.id
          }
          break
        case 5:
        case 6:
          props = {
            checkType: 1,
            sbId: this.model.id,
            sbNo: this.model.no
          }
          break
      }
      return props
    },
    components () {
      return [
        {
          name: '设备详情',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailInfo'
        },
        {
          name: '子设备',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'Children',
          badge: {
            title: '子设备总数',
            count: this.numChildSbInfo
          }
        },
        {
          name: '设备部位',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'PartInfoList',
          badge: {
            title: '部位总数',
            count: this.numPartInfo
          }
        },
        {
          name: '设备位号',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'LocationList',
          badge: {
            title: '位号总数',
            count: this.numLocation
          }
        },
        {
          name: '备件BOM',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'SbModelBom',
          badge: {
            title: '备件总数',
            count: this.numModelbom
          }
        },
        {
          name: '点检标准',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'CheckStandard',
          badge: {
            title: '点检标准',
            count: this.numCheckStandard1
          }
        },
        {
          name: '点检任务',
          icon: 'appstore',
          isMy: false,
          show: true,
          component: 'CheckJob',
          badge: {
            title: '点检任务',
            count: this.numCheckjob1
          }
        },
        {
          name: '检定记录',
          icon: 'appstore',
          show: this.model.useType === 4,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '设备履历',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '配件记录',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '保养记录',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '历史故障',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '历史费用',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '状态变更记录',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '停机记录',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '遥测点位',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '设备树',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '检点日历',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '工单分析',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        },
        {
          name: '费用分析',
          icon: 'appstore',
          show: true,
          isMy: false,
          component: 'DetailSbMeasure'
        }
      ]
    }
  },
  methods: {
    base (record) {
      this.visible = true
      this.model = record
      this.fetchNum()
    },
    handleEdit () {
      fetchSbInfo({ id: this.model.id }).then(res => {
        this.show = false
        const modal = this.$refs.baseModal
        modal.base(res.data)
      })
    },
    handleOk () {
      this.confirmLoading = true
      this.show = true
      fetchSbInfo({ id: this.model.id }).then(res => {
        this.confirmLoading = false
        this.base(res.data)
      })
    },
    handleBack () {
      this.visible = false
      this.activeKey = 0
      this.$emit('ok')
    },
    fetchNum () {
      Promise.all([
        queryNumPartInfo({ sbId: this.model.id }),
        queryNumModelbom({ sbId: this.model.id }),
        queryNumRepairReason({ sbId: this.model.id }),
        queryNumCheckStandard({ sbId: this.model.id, type: 1 }),
        queryNumCheckStandard({ sbId: this.model.id, type: 2 }),
        queryNumCheckStandard({ sbId: this.model.id, type: 3 }),
        queryNumCheckjob({ sbId: this.model.id, type: 1 }),
        queryNumCheckjob({ sbId: this.model.id, type: 2 }),
        queryNumCheckjob({ sbId: this.model.id, type: 3 }),
        queryNumSbLocation({ sbId: this.model.id }),
        queryChildNumSbInfo({ parentId: this.model.id })
      ])
        .then((values) => {
          this.numPartInfo = values[0].data
          this.numModelbom = values[1].data
          this.numRepairReason = values[2].data
          this.numCheckStandard1 = values[3].data
          this.numCheckStandard2 = values[4].data
          this.numCheckStandard3 = values[5].data
          this.numCheckjob1 = values[6].data
          this.numCheckjob2 = values[7].data
          this.numCheckjob3 = values[8].data
          this.numLocation = values[9].data
          this.numChildSbInfo = values[10].data
        }).then(() => {
          this.$forceUpdate()
        })
    }
  }
}
</script>

<style lang="less" scoped>
.card{
  background: #fff;
  padding: 10px 10px 0 10px;
  margin-bottom: 15px;
}
.tab-title{
  text-align: center;
  font-size: 18px;
  .icon{
    font-size: 30px;
  }
}
.btn{
  position: absolute;
  bottom: 30px;
  left:50%;
  transform: translateX(-50%);
}
/deep/.ant-tabs-bar{
  border:none;
}
/deep/.ant-tabs-ink-bar{
  visibility: hidden;
}
/deep/ .ant-tabs-tab-prev-icon-target,/deep/ .ant-tabs-tab-next-icon-target {
    font-size: 20px;
}
</style>