From b717530ae3e0b1041084d0a8300ca4067da9dbea Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Thu, 4 Jul 2024 17:14:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=B0=83=E7=A0=94=E8=A1=A8?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js                             |   4 +-
 src/router/index.js                           |   6 +-
 .../research-mobile/components/BasicInfo.vue  | 107 ++++++++++++
 .../research-mobile/components/Equipments.vue | 153 +++++++++++++++++
 .../components/HistoricalParticipants.vue     |  10 ++
 .../research-mobile/components/Notes.vue      |  34 ++++
 .../components/Participants.vue               | 161 ++++++++++++++++++
 src/views/research-mobile/detail.vue          |  37 ++++
 src/views/research-mobile/form.vue            |   3 -
 src/views/research-mobile/login.vue           | 110 ++++++++----
 10 files changed, 588 insertions(+), 37 deletions(-)
 create mode 100644 src/views/research-mobile/components/BasicInfo.vue
 create mode 100644 src/views/research-mobile/components/Equipments.vue
 create mode 100644 src/views/research-mobile/components/HistoricalParticipants.vue
 create mode 100644 src/views/research-mobile/components/Notes.vue
 create mode 100644 src/views/research-mobile/components/Participants.vue
 create mode 100644 src/views/research-mobile/detail.vue
 delete mode 100644 src/views/research-mobile/form.vue

diff --git a/src/permission.js b/src/permission.js
index db67208e..f7bc06ad 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -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()
diff --git a/src/router/index.js b/src/router/index.js
index e535d071..d4b2c220 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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
   },
   {
diff --git a/src/views/research-mobile/components/BasicInfo.vue b/src/views/research-mobile/components/BasicInfo.vue
new file mode 100644
index 00000000..ef3d49a7
--- /dev/null
+++ b/src/views/research-mobile/components/BasicInfo.vue
@@ -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>
diff --git a/src/views/research-mobile/components/Equipments.vue b/src/views/research-mobile/components/Equipments.vue
new file mode 100644
index 00000000..919af34d
--- /dev/null
+++ b/src/views/research-mobile/components/Equipments.vue
@@ -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>
diff --git a/src/views/research-mobile/components/HistoricalParticipants.vue b/src/views/research-mobile/components/HistoricalParticipants.vue
new file mode 100644
index 00000000..5901ec2e
--- /dev/null
+++ b/src/views/research-mobile/components/HistoricalParticipants.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    历史人员
+  </div>
+</template>
+<script>
+export default {
+  name: 'HisParticipantsResearch'
+}
+</script>
diff --git a/src/views/research-mobile/components/Notes.vue b/src/views/research-mobile/components/Notes.vue
new file mode 100644
index 00000000..0177579a
--- /dev/null
+++ b/src/views/research-mobile/components/Notes.vue
@@ -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>
diff --git a/src/views/research-mobile/components/Participants.vue b/src/views/research-mobile/components/Participants.vue
new file mode 100644
index 00000000..3425d627
--- /dev/null
+++ b/src/views/research-mobile/components/Participants.vue
@@ -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>
diff --git a/src/views/research-mobile/detail.vue b/src/views/research-mobile/detail.vue
new file mode 100644
index 00000000..c3cab3c8
--- /dev/null
+++ b/src/views/research-mobile/detail.vue
@@ -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>
diff --git a/src/views/research-mobile/form.vue b/src/views/research-mobile/form.vue
deleted file mode 100644
index 4bc97cb9..00000000
--- a/src/views/research-mobile/form.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>form</div>
-</template>
diff --git a/src/views/research-mobile/login.vue b/src/views/research-mobile/login.vue
index 47dc5243..3d301630 100644
--- a/src/views/research-mobile/login.vue
+++ b/src/views/research-mobile/login.vue
@@ -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>