eln_web/src/views/business/study/comp/syj.vue

<!-- 饲养间使用管理 -->
<template>
  <div class="study-tbbd">
    <div class="tbbd-left" v-show="!showDetail">
      <sbject :study="study" @change="changeSubject" />
    </div>
    <div class="tbbd-right" v-if="studyInfo.studySubjectId != ''">
      <syjList :study="studyInfo" @showDetail="showDetailCallback" />
    </div>
  </div>
</template>

<script>
import sbject from './suject.vue'
import syjList from './syjList.vue'
export default {
  name: 'StudySyj',
  props: {
    study: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    study: {
      immediate: true,
      handler(v) {
        this.studyInfo = {
          studyId: v.id,
          studyLeader: v.leader,
          studySubjectId: ''
        }
      },
      deep: true,
    },
  },
  components: { sbject, syjList },
  computed: {},
  filters: {},
  data() {
    return {
      showDetail: false,
      studyInfo: {
        studyId: this.study.id,
        studyLeader: this.study.leader,
        studySubjectId: ''
      }
    }
  },
  created() { },
  methods: {
    changeSubject(val) {
      this.studyInfo.studySubjectId = val
    },
    showDetailCallback(val) {
      this.showDetail = val
      this.$emit('showDetail', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.study-tbbd {
  display: flex;
  flex-direction: row;

  .tbbd-left {
    background: #fff;
    padding: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    width: 350px;
  }

  .tbbd-right {
    flex-grow: 1;
    overflow: hidden;
  }
}
</style>