irc_web/src/views/trials/trials-panel/trial-summary/trial-document/index.vue

133 lines
3.0 KiB
Vue

<template>
<div class="trialDocument">
<div class="left">
<div class="top" v-if="isManage">
<div class="viewCheck">
<span>{{ $t('trials:trialDocument:view') }}</span>
<el-switch
v-model="viewStatus"
active-color="#13ce66"
inactive-color="#409eff"
:active-value="false"
:inactive-value="true"
:active-text="$t('trials:trialDocument:viewStatus:manage')"
:inactive-text="$t('trials:trialDocument:viewStatus:inspect')"
@change="handleChange"
>
</el-switch>
</div>
</div>
<div
:class="{
menuBox: true,
noTop: !isManage,
}"
>
<Menu
ref="Menu"
:viewStatus="viewStatus"
:Id.sync="Id"
:SubIdentificationEnum.sync="SubIdentificationEnum"
:ArchiveTypeEnum.sync="ArchiveTypeEnum"
:rowData.sync="rowData"
/>
</div>
</div>
<div class="main">
<!--v-if="[0, 1].includes(SubIdentificationEnum)"-->
<report-doc
v-if="[0, 1].includes(SubIdentificationEnum)"
:viewStatus="viewStatus"
:Id="Id"
:ArchiveTypeEnum="ArchiveTypeEnum"
:rowData="rowData"
@getMenu="getMenu"
/>
</div>
</div>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Menu from './components/menu.vue'
import reportDoc from './components/report_doc/index.vue'
export default {
name: 'trialDocument',
components: { BaseContainer, Menu, reportDoc },
data() {
return {
viewStatus: false,
Id: null,
SubIdentificationEnum: null,
ArchiveTypeEnum: null,
rowData: {},
}
},
computed: {
isInspect() {
return this.hasPermi([
'trials:trials-panel:trial-summary:trial-document:inspect',
])
},
isManage() {
return this.hasPermi([
'trials:trials-panel:trial-summary:trial-document:manage',
])
},
},
methods: {
handleChange() {
this.Id = null
this.SubIdentificationEnum = null
this.ArchiveTypeEnum = null
this.rowData = {}
},
getMenu() {
this.$refs.Menu.getMenu()
},
},
}
</script>
<style lang="scss" scoped>
.trialDocument {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
align-items: center;
.left {
width: 300px;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #e4e7ed;
.top {
width: 100%;
max-height: 75px;
display: flex;
flex-wrap: wrap;
padding: 0 15px;
margin-bottom: 5px;
.viewCheck {
width: 100%;
line-height: 30px;
margin-bottom: 10px;
}
}
.menuBox {
width: 100%;
height: calc(100% - 80px);
overflow-y: auto;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
.noTop {
height: 100%;
}
}
.main {
width: calc(100% - 300px);
height: 100%;
padding: 10px;
}
}
</style>