yxk-electronic-archives/src/views/archiveKeeping/deviceManage/module/detail.vue

<template>
  <el-dialog class="detail-dialog" :title="detailTitle" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="detailVisible" :before-close="handleClose">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <div class="detail-tab tab-content">
        <!-- tab -->
        <ul class="tab-nav" style="padding: 0;">
          <li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
          <li v-if="(selectedDeviceType==='网络视频录像机（NVR）' || selectedDeviceType==='环境监控主机')" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">子设备列表</li>
        </ul>
        <!-- 基本信息 -->
        <div v-if="activeIndex==0" class="base-info item-content">
          <el-row>
            <el-col v-for="(item,index) in DetailsInfoData" :key="index" class="base-info-item">
              <span>{{ item.fieldCnName }}：</span>
              <p>{{ item.context }}</p>
            </el-col>
          </el-row>
        </div>
        <!-- 子设备列表 -->
        <div v-if="activeIndex==1 && (selectedDeviceType==='网络视频录像机（NVR）' || selectedDeviceType==='环境监控主机')" class="item-content" />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if=" selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机'" class="device-child-btn" @click="ChildDevice"><i class="iconfont icon-zishebeiguanli" />子设备管理</el-button>
      <el-button type="primary" @click="detailVisible=false">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Detail',
  components: { },
  mixins: [],
  props: {
    selectedDeviceType: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      detailTitle: '',
      activeIndex: 0,
      detailVisible: false,
      DetailsInfoData: []
    }
  },
  mounted() {
  },
  methods: {
    changeActiveTab(index) {
      this.activeIndex = index
    },
    ChildDevice() {
      this.$emit('childDevice')
    },
    // 删除 - 关闭
    handleClose(done) {
      this.detailVisible = false
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info{
  background: #F6F8FC;
}
</style>