yos_web/src/components/normal-basic-layout/details/modules/tabs/tab.vue

<template>
  <div class="normal-panel tab__panel">
    <div>
      <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane v-for="(tab,index) in tabs" :key="index" :label="tab" :name="'tab' + index"></el-tab-pane>
        <el-tab-pane label="附件" name="file"></el-tab-pane>
        <el-tab-pane label="操作记录" name="log"></el-tab-pane>
      </el-tabs>
    </div>

    <div v-show="'tab'+index === activeName" v-for="(item,index) in tabs" :key="index">
      <slot v-if="'tab'+index === activeName"  :name="'slot' + index"></slot>
    </div>
    <div v-show="activeName === 'file'">
      <attachmentList v-if="activeName === 'file'" :attinfos="attinfo_attachment" @onSuccess="queryAttments" @cancelEdit="queryAttments">
        <upload slot="upload" :folderid="folderid"
          :bindData="{ ownertable: ownertable, ownerid: editData[idname], usetype: 'default' }"
          @onSuccess="queryAttments"></upload>
      </attachmentList>
    </div>
    <div v-show="activeName === 'log'">
      <datalog v-if="activeName === 'log'" :editData="editData" :idname="idname" :ownertable="ownertable"></datalog>
    </div>
  </div>
</template>

<script>
import attachmentList from '@/components/attachment_list/index.vue'
import upload from '@/components/upload/hw_obs_upload.vue'
import datalog from '../datalog/index.vue'

export default {
  props:['tabs','editData','ownertable','idname'],
  components:{
    attachmentList,
    upload,
    datalog
  },
  data () {
    return {
      activeName:'tab0',
      attinfo_attachment:[],
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
    }
  },
  methods:{
    async queryAttments () {
      console.log(this.idname,'---')
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": this.ownertable,
          "ownerid": this.editData[this.idname],
          "usetype":""
        }
      })
      this.attinfo_attachment = res.data
    },
    handleClick(){
      console.log(this.activeName)
      this.$emit('onTabClick')
    }
  },
  mounted () {
    setTimeout(() => {
      if (!this.tabs) {this.activeName = 'file'} else {
        this.activeName = 'tab0'
      }
    }, 1000);
  },
  watch: {
    activeName (val) {
      val === 'file'?this.queryAttments():''
    }
  },
}

</script>
<style>
.tab__panel .el-tabs__item{
  color:#999
}
.tab__panel  .el-tabs__item.is-active {
  color:#3874f6
}
</style>
<style scoped>
.tab__panel{
  padding:0 10px 10px 10px;
  border-radius:5px;
}
</style>