yos_web/src/components/scopeOfAuthority/indexCopy.vue

<template>
  <div class="container normal-panel ">
    <div class="tab flex-align-center">
      <p :class="activeName === '组织架构'?'tab-act':''" @click="tabChange('组织架构')">组织架构</p>
      <p :class="activeName === '营销组织'?'tab-act':''" @click="tabChange('营销组织')">营销组织</p>
    </div>
    <div style="padding:16px 0;">
      <dep ref="dep" :disabled="disabled" v-show="activeName === '组织架构'" :defaultData="defaultData" :scrollHeight="scrollHeight" :obiectName="obiectName" :obiectId="obiectId" @onParams="onParams"></dep>
      <mar ref="mar" v-show="activeName === '营销组织'" :defaultData="defaultData" :scrollHeight="scrollHeight" :obiectName="obiectName" :obiectId="obiectId" @onAgentParams="onAgentParams"></mar>
    </div>
  </div>
</template>

<script>
import dep from './modules/dep_auth.vue'
import mar from './modules/mar_auth.vue'

export default {
  props:['defaultData','scrollHeight','appidname','dataid','obiectName','obiectId','disabled'],
  components:{
    dep,
    mar
  },
  data () {
    return {
      activeName:'组织架构',
      param:{
        "isonlymanager_dept":false,
        "isonlymanager_agent":false,
        "departmentid":[],
        "hrid":[],
        "sa_saleareaid":[],
        "sa_agentsid":[]
      }
    }
  },
  methods:{
    onParams (dep,men,isonlymanager) {
      console.log(dep,men,isonlymanager)
      this.param.isonlymanager_dept = isonlymanager
      this.param.hrid = men
      this.param.departmentid = dep
      this.param[this.appidname] = this.dataid
      this.$emit('onChecked',this.param)
    },
    onAgentParams (area,agent,isonlymanager) {
      console.log(area,agent,isonlymanager)
      this.param.isonlymanager_agent = isonlymanager
      this.param.sa_agentsid = agent
      this.param.sa_saleareaid = area
      this.$emit('onChecked',this.param)
    },
    tabChange (val) {
      this.activeName = val
      this.$emit('tabChange')
    },
  },
  watch:{
    defaultData (val) {
      this.param = Object.assign({},this.param,val)
      this.$emit('onChecked',this.param)
    }
  }
}

</script>
<style>
.panel .el-checkbox__input.is-checked+.el-checkbox__label{
  color:#777 !important;
}
</style>
<style scoped>
.panel{
  border:1px solid #CCCCCC;
  border-radius: 4px;
}
.tab p{
  flex:1;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color:#999;
  border-bottom: 2px solid #eeeeee;
  cursor:pointer;
}
.tab-act{
  color:#3874F6 !important;
  border-bottom: 2px solid #3874F6 !important;
}
</style>