138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<template>
|
|
<BaseContainer>
|
|
<div class="step-wrapper">
|
|
<el-steps :active="activeStatus" align-center :space="300">
|
|
<!-- 中心填写 -->
|
|
<el-step :title="$t('trials:siteResearch:timeline:step1')" class="click_cursor"
|
|
@click.native="handleClick(0)" />
|
|
<!-- SPM审核 -->
|
|
<el-step v-if="isSPMJoin" :title="$t('trials:siteResearch:timeline:step2')" class="click_cursor"
|
|
@click.native="handleClick(1)" />
|
|
<!-- PM审核 -->
|
|
<el-step :title="$t('trials:siteResearch:timeline:step3')" class="click_cursor"
|
|
@click.native="handleClick(2)" />
|
|
<!-- 审核完毕 -->
|
|
<el-step :title="$t('trials:siteResearch:timeline:step14')" class="click_cursor"
|
|
@click.native="handleClick(3)" />
|
|
</el-steps>
|
|
<div class="step-content">
|
|
<ResearchList ref="researchList" />
|
|
</div>
|
|
</div>
|
|
</BaseContainer>
|
|
</template>
|
|
<script>
|
|
import { getTrialIsSPMJoin } from '@/api/research'
|
|
import BaseContainer from '@/components/BaseContainer'
|
|
import ResearchList from './components/ResearchList'
|
|
export default {
|
|
name: 'SiteResearch',
|
|
components: {
|
|
BaseContainer,
|
|
ResearchList
|
|
},
|
|
data() {
|
|
return {
|
|
isSPMJoin: false,
|
|
activeStatus: 0
|
|
}
|
|
},
|
|
watch: {
|
|
activeStatus: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(v) {
|
|
this.$nextTick(() => {
|
|
this.$refs['researchList'].searchData.State = v
|
|
this.$refs['researchList'].getList()
|
|
})
|
|
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTrialIsSPMJoin()
|
|
if (this.hasPermi(['role:pm'])) this.activeStatus = 2
|
|
if (this.hasPermi(['role:spm'])) this.activeStatus = 1
|
|
},
|
|
methods: {
|
|
async getTrialIsSPMJoin() {
|
|
try {
|
|
let trialId = this.$route.query.trialId
|
|
if (!trialId) return
|
|
let res = await getTrialIsSPMJoin(trialId)
|
|
this.isSPMJoin = res.Result
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
|
|
},
|
|
handleClick(step) {
|
|
this.activeStatus = step
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.step-wrapper {
|
|
height: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.el-steps {
|
|
height: 80px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.step-content {
|
|
flex: 1;
|
|
}
|
|
|
|
// .underline {
|
|
// // .el-step__title {
|
|
// // text-decoration: underline
|
|
// // }
|
|
// .el-step__title,
|
|
// .el-step__title.is-process,
|
|
// .el-step__title.is-finish {
|
|
// text-decoration: underline;
|
|
// }
|
|
// }
|
|
// .noneUnderline {
|
|
// .el-step__title {
|
|
// text-decoration: none;
|
|
// }
|
|
// }
|
|
// .el-step__head.is-process,
|
|
// .el-step__title.is-process,
|
|
// .el-step__description.is-process {
|
|
// color: #428bca;
|
|
// border-color: #428bca;
|
|
// }
|
|
// .el-step__head.is-process .el-step__line {
|
|
// background-color: #428bca;
|
|
// }
|
|
// .el-step__head.is-finish,
|
|
// .el-step__title.is-finish,
|
|
// .el-step__description.is-finish {
|
|
// color: #303133;
|
|
// border-color: #303133;
|
|
// }
|
|
// .el-step__title.is-process,
|
|
// .el-step__title.is-finish {
|
|
// text-decoration: none;
|
|
// }
|
|
// .el-step__head.is-finish .el-step__line {
|
|
// background-color: #303133;
|
|
// }
|
|
.click_cursor {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|