中心调研表移动端页面布局调整
continuous-integration/drone/push Build is passing Details

uat_us
caiyiling 2024-07-04 17:14:34 +08:00
parent 66e5380fce
commit b717530ae3
10 changed files with 588 additions and 37 deletions

View File

@ -10,7 +10,7 @@ import { OSSclient } from './utils/oss'
NProgress.configure({ showSpinner: false })
const whiteList = ['/ReviewersResearch', '/login', '/error', '/resetpassword', '/recompose', '/email-recompose', '/trialStats', '/showdicom', '/imagesShare', '/audit', '/preview', '/researchLogin', '/blindResumeInfo', '/trialsResume', '/joinVerify', '/showNoneDicoms', '/noneDicomReading', '/clinicalData', '/readingDicoms', '/readingPage', '/visitDicomReview', '/visitNondicomReview', '/globalReview', '/adReview', '/oncologyReview', '/nonedicoms']
const whiteList = ['/ReviewersResearch', '/login', '/error', '/resetpassword', '/recompose', '/email-recompose', '/trialStats', '/showdicom', '/imagesShare', '/audit', '/preview', '/researchLogin', '/researchLogin_m', '/researchDetail_m', '/blindResumeInfo', '/trialsResume', '/joinVerify', '/showNoneDicoms', '/noneDicomReading', '/clinicalData', '/readingDicoms', '/readingPage', '/visitDicomReview', '/visitNondicomReview', '/globalReview', '/adReview', '/oncologyReview', '/nonedicoms']
router.beforeEach(async(to, from, next) => {
NProgress.start()
@ -56,7 +56,7 @@ router.beforeEach(async(to, from, next) => {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录whiteList中直接进入
if (to.path === '/readingDicoms' || to.path === '/noneDicomReading'){
if (to.path === '/readingDicoms' || to.path === '/noneDicomReading') {
OSSclient()
}
next()

View File

@ -208,9 +208,9 @@ export const constantRoutes = [
hidden: true
},
{
path: '/researchForm_m',
name: 'researchForm_m',
component: () => import('@/views/research-mobile/form'),
path: '/researchDetail_m',
name: 'researchDetail_m',
component: () => import('@/views/research-mobile/detail'),
hidden: true
},
{

View File

@ -0,0 +1,107 @@
<template>
<div class="research_bs_content">
<div class="title">中心调研表</div>
<el-form label-position="left" label-width="120px" :model="form">
<div class="basic_content">
<el-form-item label="项目编号">
<span>{{ form.name1 }}</span>
</el-form-item>
<el-form-item label="试验方案号">
<span>{{ form.name2 }}</span>
</el-form-item>
<el-form-item label="试验名称">
<span>{{ form.name3 }}</span>
</el-form-item>
<el-form-item label="适应症类型">
<span>{{ form.name4 }}</span>
</el-form-item>
</div>
<div class="login_content">
<el-form-item label="中心名称" prop="region">
<el-select v-model="form.name5" placeholder="请选择活动区域" style="width:100%">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.name4" />
</el-form-item>
<el-form-item label="验证码">
<div class="code_content">
<el-input v-model="form.VerificationCode" />
<el-button type="primary" @click="handleSendCode"></el-button>
</div>
</el-form-item>
<!-- <div class="submit_content">
<el-button type="primary" size="large" @click="onSubmit"></el-button>
</div> -->
</div>
</el-form>
</div>
</template>
<script>
export default {
name: 'ResearchBasicInfo',
data() {
return {
form: {
name1: 'ZY20240516',
name2: 'TEST',
name3: 'TEST20240613',
name4: '肺癌',
name5: '',
VerificationCode: ''
}
}
},
methods: {
onSubmit() {},
handleSendCode() {
console.log(1)
}
}
}
</script>
<style lang="scss" scoped>
.research_bs_content{
.title{
margin-bottom: 5px;
line-height: 80px;
font-size: 28px;
font-weight: bold;
text-align: center;
background: #fff;
}
.basic_content{
padding: 0 20px;
background: #fff;
}
.login_content{
padding: 0 20px;
margin-top: 5px;
background: #fff;
}
.code_content{
display:flex;
flex-direction: row;
justify-content: flex-start;
.el-input{
margin-right: 10px;
}
}
.submit_content{
margin-top: 20px;
text-align: center;
}
/deep/.el-form-item {
margin-bottom: 0px;
padding: 5px 0px;
border-bottom: 1px solid #f5f7fa;
.el-form-item__content{
color: #82848a;
}
}
}
</style>

View File

@ -0,0 +1,153 @@
<template>
<div class="equipments_content">
<div class="title">
<div>设备调研</div>
<div><el-button type="primary" icon="el-icon-plus" size="mini" @click="drawer = true">添加</el-button></div>
</div>
<div v-for="item in list" :key="item.name" class="participant_info">
<div class="p_icon">
<i class="el-icon-receiving" />
</div>
<div class="p_info">
<div
class="p_info_basic"
:style="{maxWidth:w+'px','white-space': 'nowrap',
overflow: 'hidden',
'text-overflow': 'ellipsis'}"
>
<div class="p_text">{{ item.name }}</div>
<div class="p_text" style="margin:0 10px">{{ item.role }}</div>
<div class="p_text">{{ item.phone }}</div>
</div>
<div class="p_text">{{ item.email }}</div>
<div class="p_text">{{ item.site }}</div>
</div>
<div class="p_func">
<el-button type="text"><i class="el-icon-edit-outline" style="font-size: 20px;" /></el-button>
<el-button type="text"><i class="el-icon-delete" style="font-size: 20px;" /></el-button>
</div>
</div>
<el-drawer
title="添加"
:visible.sync="drawer"
direction="btt"
size="50%"
>
<div style="padding: 0 10px">
<el-form :model="form" label-width="80px" label-position="left">
<el-form-item label="扫描设备">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="扫描参数">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="扫描仪器制造商名称">
<el-select v-model="form.region">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="扫描仪型号">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="注意事项">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</template>
<script>
export default {
name: 'EquipmentsResearch',
data() {
return {
list: [
{
name: '扫描设备1',
role: '扫描参数',
phone: '扫描仪型号',
email: '扫描仪器制造商名称',
site: '注意事项'
},
{
name: '扫描设备2',
role: '扫描参数',
phone: '扫描仪型号',
email: '扫描仪器制造商名称',
site: '注意事项'
}
],
drawer: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
w: 0
}
},
mounted() {
this.w = document.body.clientWidth - 200
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.equipments_content{
background: #fff;
padding: 10px;
.title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.participant_info{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 10px;
border-top: 1px solid #f5f7fa;
.p_icon{
width: 70px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.p_info{
flex:1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border-right: 1px solid #f5f7fa;
font-size: 13px;
}
.p_info_basic{
display: flex;
flex-direction: row;
align-items: center;
}
.p_text{
line-height: 25px;
color: #82848a;
}
.p_func{
width: 80px;
padding: 0 10px;
text-align: center;
}
}
}
</style>

View File

@ -0,0 +1,10 @@
<template>
<div>
历史人员
</div>
</template>
<script>
export default {
name: 'HisParticipantsResearch'
}
</script>

View File

@ -0,0 +1,34 @@
<template>
<div class="research_note">
<div class="title">
备注
</div>
<ol>
<!-- 只要有可能请确保受试者使用上述指定的扫描仪器采集影像 -->
<li>{{ $t('trials:equiptResearch:form:item1') }}</li>
<!-- 请确保对每位受试者的扫描参数在整个研究过程中保持一致 -->
<li>{{ $t('trials:equiptResearch:form:item2') }}</li>
<!-- 试验过程中如果有任何人员设备或扫描仪器的替换请立即通知我们 -->
<li>{{ $t('trials:equiptResearch:form:item3') }}</li>
<!-- 请保存好原始未经压缩的非重建的数据 -->
<li>{{ $t('trials:equiptResearch:form:item4') }}</li>
</ol>
</div>
</template>
<script>
export default {
name: 'ResearchNotes'
}
</script>
<style lang="scss" scoped>
.research_note{
background: #fff;
padding: 10px;
li{
line-height: 20px;
font-size: 14px;
color: #82848a;
}
}
</style>

View File

@ -0,0 +1,161 @@
<template>
<div class="participants_content">
<div class="title">
<div>新增人员</div>
<div><el-button type="primary" icon="el-icon-plus" size="mini" @click="drawer = true">添加</el-button></div>
</div>
<div v-for="item in list" :key="item.name" class="participant_info">
<div class="p_icon">
<i class="el-icon-user" />
</div>
<div class="p_info">
<div
class="p_info_basic"
:style="{maxWidth:w+'px','white-space': 'nowrap',
overflow: 'hidden',
'text-overflow': 'ellipsis'}"
>
<div class="p_text">{{ item.name }}</div>
<div class="p_text" style="margin:0 10px">{{ item.role }}</div>
<div class="p_text">{{ item.phone }}</div>
</div>
<div class="p_text">{{ item.email }}</div>
<div class="p_text">{{ item.site }}</div>
</div>
<div class="p_func">
<el-button type="text"><i class="el-icon-edit-outline" style="font-size: 20px;" /></el-button>
<el-button type="text"><i class="el-icon-delete" style="font-size: 20px;" /></el-button>
</div>
</div>
<el-drawer
title="添加"
:visible.sync="drawer"
direction="btt"
size="50%"
>
<div style="padding: 0 10px">
<el-form :model="form" label-width="80px" label-position="left">
<el-form-item label="性">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="名">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.region">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="电话号码">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</template>
<script>
export default {
name: 'ParticipantsResearch',
data() {
return {
list: [
{
name: '张三',
role: 'CRC',
phone: '13000009999',
email: 'zhangsan@zhizhun.com',
site: '人民医院'
},
{
name: '李四',
role: 'CRA',
phone: '14555509999',
email: 'lisi@zhizhun.com',
site: '同济医院'
},
{
name: '王五',
role: 'CRA',
phone: '18888809999',
email: 'wang@zhizhun.com',
site: '协和医院'
}
],
drawer: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
w: 0
}
},
mounted() {
this.w = document.body.clientWidth - 200
console.log(document.body.clientWidth)
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.participants_content{
background: #fff;
padding: 10px;
.title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.participant_info{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 10px;
border-top: 1px solid #f5f7fa;
.p_icon{
width: 70px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.p_info{
flex:1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border-right: 1px solid #f5f7fa;
font-size: 13px;
}
.p_info_basic{
display: flex;
flex-direction: row;
align-items: center;
}
.p_text{
line-height: 25px;
color: #82848a;
}
.p_func{
width: 80px;
padding: 0 10px;
text-align: center;
}
}
}
</style>

View File

@ -0,0 +1,37 @@
<template>
<div class="research_detal_wrapper">
<div class="d_content">
<!-- 项目基本信息 -->
<BasicInfo />
<!-- 历史人员 -->
<!-- <HistoricalParticipants /> -->
<!-- 新增人员 -->
<Participants style="margin-top: 5px" />
<!-- 设备调研 -->
<Equipments style="margin-top: 5px" />
<!-- 备注 -->
<Notes style="margin-top: 5px" />
</div>
</div>
</template>
<script>
import BasicInfo from './components/BasicInfo'
// import HistoricalParticipants from './components/HistoricalParticipants'
import Participants from './components/Participants'
import Equipments from './components/Equipments'
import Notes from './components/Notes'
export default {
name: 'ResearchMobileDetail',
components: {
BasicInfo,
// HistoricalParticipants,
Participants, Equipments, Notes }
}
</script>
<style lang="scss" scoped>
.research_detal_wrapper{
background-color:#f5f7fa;
}
</style>

View File

@ -1,3 +0,0 @@
<template>
<div>form</div>
</template>

View File

@ -1,26 +1,41 @@
<template>
<div class="research_login_m_content">
<div class="title">中心调研表</div>
<el-form label-position="left" label-width="150px" :model="form">
<el-form-item label="项目编号">
<!-- <el-input v-model="form.name1" /> -->
<span>{{ form.name1 }}</span>
</el-form-item>
<el-form-item label="试验方案号">
<el-input v-model="form.name2" />
</el-form-item>
<el-form-item label="试验名称">
<el-input v-model="form.name3" />
</el-form-item>
<el-form-item label="试验证类型">
<el-input v-model="form.name4" />
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="form.name5" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form label-position="left" label-width="120px" :model="form">
<div class="basic_content">
<el-form-item label="项目编号">
<span>{{ form.name1 }}</span>
</el-form-item>
<el-form-item label="试验方案号">
<span>{{ form.name2 }}</span>
</el-form-item>
<el-form-item label="试验名称">
<span>{{ form.name3 }}</span>
</el-form-item>
<el-form-item label="适应症类型">
<span>{{ form.name4 }}</span>
</el-form-item>
</div>
<div class="login_content">
<el-form-item label="中心名称" prop="region">
<el-select v-model="form.name5" placeholder="请选择活动区域" style="width:100%">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.name4" />
</el-form-item>
<el-form-item label="验证码">
<div class="code_content">
<el-input v-model="form.VerificationCode" />
<el-button type="primary" @click="handleSendCode"></el-button>
</div>
</el-form-item>
<div class="submit_content">
<el-button type="primary" size="large" @click="onSubmit"></el-button>
</div>
</div>
</el-form>
</div>
</template>
@ -30,27 +45,64 @@ export default {
data() {
return {
form: {
name1: '1111',
name2: '',
name3: '',
name4: '',
name5: ''
name1: 'ZY20240516',
name2: 'TEST',
name3: 'TEST20240613',
name4: '肺癌',
name5: '',
VerificationCode: ''
}
}
},
methods: {
onSubmit() {},
handleSendCode() {
console.log(1)
}
}
}
</script>
<style lang="scss" scoped>
.research_login_m_content{
padding: 0 10px;
background-color:#f5f7fa;
.title{
// height: 80px;
margin-bottom: 10px;
border-bottom: 2px solid #f3f3f3;
margin-bottom: 5px;
line-height: 80px;
font-size: 28px;
font-weight: bold;
text-align: center;
background: #fff;
}
.basic_content{
padding: 0 20px;
background: #fff;
}
.login_content{
padding: 0 20px;
margin-top: 5px;
background: #fff;
}
.code_content{
display:flex;
flex-direction: row;
justify-content: flex-start;
.el-input{
margin-right: 10px;
}
}
.submit_content{
margin-top: 20px;
text-align: center;
}
/deep/.el-form-item {
margin-bottom: 0px;
padding: 5px 0px;
border-bottom: 1px solid #f5f7fa;
.el-form-item__content{
color: #82848a;
}
}
}
</style>