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="$t(tab)" :name="'tab' + index"></el-tab-pane>
        <el-tab-pane v-if="isFollow" :label="$t('跟进动态')" name="follow"></el-tab-pane>
        <el-tab-pane :label="$t('附件')" name="file"></el-tab-pane>
        <el-tab-pane :label="$t('操作记录')" 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 === 'follow'">
      <followTable :ownertable="ownertable" :disabled="disabled" @newFollow="newFollow" ref="followRef"></followTable>
    </div>
    <div v-show="activeName === 'file'">
      <attachmentList v-if="activeName === 'file'" :disabled="$route.path == '/contractDetail'?false:disabled" :status="status" :attachmentDisabled="$route.path == '/contractDetail'?false:attachmentDisabled"  :attinfos="attinfo_attachment" @onSuccess="queryAttments" @cancelEdit="queryAttments" :issalehr="issalehr">
        <upload slot="upload" :folderid="folderid" :status="status" :attachmentDisabled="$route.path == '/contractDetail'?false:attachmentDisabled" :disabled="$route.path == '/contractDetail'?false:disabled"
          :bindData="{ ownertable: ownertable, ownerid: editData[idname], usetype: 'default' }"
          @onSuccess="queryAttments" :hidemediastock="hidemediastock"></upload>
      </attachmentList>
    </div>
    <div v-show="activeName === 'log'" >
      <datalog v-if="activeName === 'log'" :status="status" :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'
import followTable from '../followTable/index'

export default {
  props:['tabs','editData','ownertable','idname','status','attachmentDisabled','disabled','isFollow'],
  components:{
    attachmentList,
    upload,
    datalog,
    followTable
  },
  data () {
    return {
      activeName:'tab0',
      attinfo_attachment:[],
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      hidemediastock:!JSON.parse(sessionStorage.getItem('activeApp')).selectfileinattachment,
      hrid:JSON.parse(sessionStorage.getItem('active_account')).hrid,
      issalehr:false,
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
    }
  },
  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',this.activeName)
    },
    newFollow(){
      this.$emit('newFollow')
    },
    /*判断是否业务员*/
    async isSalesman(){
      const res = await this.$api.requested({
        classname: "webmanage.hr.hr",
        content: {
          hrid: this.hrid
        },
        method: "query_hrMain"
      })
      if (res.code == 0){
        this.issalehr = false
      }else {
        res.data.issalehr && (this.siteid == 'HY' || this.siteid == 'YOSTEST1')  ?  this.issalehr = true : this.issalehr = false
      }
    }
  },
  mounted () {
    setTimeout(() => {
      if (!this.tabs) {this.activeName = 'file'} else {
        this.activeName = 'tab0'
      }
    }, 1000);
    this.isSalesman()
  },
  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>