From 29dfe79acdfa61302a6e496bc44b5f81bba409bf Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Fri, 5 Jul 2024 14:59:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=B0=83=E7=A0=94=E8=A1=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js                             |   5 +-
 .../research-mobile/components/BasicInfo.vue  | 289 +++++++++++---
 .../components/EquipmentForm.vue              | 168 +++++++++
 .../research-mobile/components/Equipments.vue | 185 +++++----
 .../components/HistoricalParticipantForm.vue  | 304 +++++++++++++++
 .../components/HistoricalParticipants.vue     | 194 +++++++++-
 .../research-mobile/components/Notes.vue      |  21 +-
 .../components/ParticipantForm.vue            | 318 ++++++++++++++++
 .../components/Participants.vue               | 225 +++++++----
 src/views/research-mobile/detail.vue          | 173 ++++++++-
 src/views/research-mobile/login.vue           | 354 ++++++++++++++++--
 11 files changed, 2002 insertions(+), 234 deletions(-)
 create mode 100644 src/views/research-mobile/components/EquipmentForm.vue
 create mode 100644 src/views/research-mobile/components/HistoricalParticipantForm.vue
 create mode 100644 src/views/research-mobile/components/ParticipantForm.vue

diff --git a/src/permission.js b/src/permission.js
index 42a12db4..a387445f 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', '/researchLogin_m', '/researchDetail_m', '/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', '/blindResumeInfo', '/trialsResume', '/joinVerify', '/showNoneDicoms', '/noneDicomReading', '/clinicalData', '/readingDicoms', '/readingPage', '/visitDicomReview', '/visitNondicomReview', '/globalReview', '/adReview', '/oncologyReview', '/nonedicoms']
 
 router.beforeEach(async(to, from, next) => {
   NProgress.start()
@@ -56,9 +56,10 @@ router.beforeEach(async(to, from, next) => {
     /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) {
       if (to.path === '/researchLogin') {
+        console.log(to)
         const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
         if (flag) {
-          next(`/researchLogin_m`)
+          next(`/researchLogin_m?trialId=${to.query.trialId}&lang=${to.query.lang}`)
         } else {
           next()
         }
diff --git a/src/views/research-mobile/components/BasicInfo.vue b/src/views/research-mobile/components/BasicInfo.vue
index ef3d49a7..2c0b8047 100644
--- a/src/views/research-mobile/components/BasicInfo.vue
+++ b/src/views/research-mobile/components/BasicInfo.vue
@@ -1,80 +1,271 @@
 <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 ref="researchBSForm" label-position="left" :model="form" :rules="rules">
+      <div class="basic_content form-label-width">
+        <el-form-item :label="$t('trials:researchForm:title:researchSurveyStatus')">
+          <el-tag>{{ $fd('ResearchRecord', state) }}</el-tag>
         </el-form-item>
-        <el-form-item label="试验方案号">
-          <span>{{ form.name2 }}</span>
+        <!-- 项目编号 -->
+        <el-form-item :label="$t('trials:researchForm:form:trialId')">
+          <span>{{ form.TrialCode }}</span>
         </el-form-item>
-        <el-form-item label="试验名称">
-          <span>{{ form.name3 }}</span>
+        <!-- 试验方案号 -->
+        <el-form-item :label="$t('trials:researchForm:form:researchNo')">
+          <span>{{ form.ResearchProgramNo }}</span>
         </el-form-item>
-        <el-form-item label="适应症类型">
-          <span>{{ form.name4 }}</span>
+        <!-- 试验名称 -->
+        <el-form-item :label="$t('trials:researchForm:form:researchName')">
+          <span>{{ form.ExperimentName }}</span>
+        </el-form-item>
+        <!-- 适应症类型 -->
+        <el-form-item :label="$t('trials:researchForm:form:decleareType')">
+          <span>{{ form.IndicationType }}</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>
+        <div class="form-label-width">
+          <el-form-item :label="$t('trials:researchForm:form:siteName')" prop="TrialSiteId">
+            <el-select
+              v-model="form.TrialSiteId"
+              filterable
+              style="width:100%;"
+              :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory"
+              @change="handleSiteChange"
+            >
+              <el-option
+                v-for="(item,index) of siteOptions"
+                :key="index"
+                :label="item.TrialSiteAliasName"
+                :value="item.TrialSiteId"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 中心编号 -->
+          <el-form-item v-if="form.TrialSiteId" :label="$t('trials:researchForm:form:siteId')">
+            <el-input v-model="form.TrialSiteCode" disabled />
+          </el-form-item>
+          <!-- 联系人 -->
+          <el-form-item :label="$t('trials:researchForm:form:contactor')" prop="UserName">
+            <el-input v-model="form.UserName" :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory" />
+          </el-form-item>
+          <!-- 联系电话 -->
+          <el-form-item
+            :label="$t('trials:researchForm:form:contactorPhone')"
+            prop="Phone"
+          >
+            <el-input v-model="form.Phone" :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory" />
+          </el-form-item>
+          <!-- 联系邮箱 -->
+          <el-form-item :label="$t('trials:researchForm:form:contactorEmail')">
+            <el-input v-model="form.Email" disabled />
+          </el-form-item>
+          <!-- 平均刻盘周期（天） -->
+          <el-form-item :label="$t('trials:researchForm:form:engravingCycle')">
+            <el-input-number v-model="form.AverageEngravingCycle" :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory" controls-position="right" :min="0" style="width:100%;" />
+          </el-form-item>
+        </div>
+        <!-- 请确认参与本项目影像采集的影像技师具备对应的资质（如：“技师证”，对应设备的“大型设备上岗证”） -->
+        <el-form-item v-if="!notShowFieldList.includes('IsConfirmImagingTechnologist')" :label="$t('trials:researchForm:form:isQualified')">
+          <el-radio-group v-model="form.IsConfirmImagingTechnologist" :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory">
+            <el-radio
+              v-for="item of $d.YesOrNo"
+              :key="`IsConfirmImagingTechnologist${item.value}`"
+              :label="item.value"
+            >{{ item.label }}</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="邮箱">
-          <el-input v-model="form.name4" />
+        <!-- 原因 -->
+        <el-form-item
+          v-if="!notShowFieldList.includes('NotConfirmReson') && form.IsConfirmImagingTechnologist === false"
+          :label="$t('trials:researchForm:form:notQualifiedReason')"
+        >
+          <el-input
+            v-model="form.NotConfirmReson"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory"
+          />
         </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 v-if="!notShowFieldList.includes('EfficacyEvaluatorType')" :label="$t('trials:researchForm:form:staffType')">
+          <el-radio-group v-model="form.EfficacyEvaluatorType" :disabled="!(state === 0 && userTypeEnumInt === 0)|| isHistory">
+            <el-radio v-for="item of $d.EfficacyEvaluatorType" :key="`EfficacyEvaluatorType${item.value}`" :label="item.value">{{ item.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <!-- 是否严格按照研究单位影像手册参数完成图像采集 -->
+        <el-form-item v-if="!notShowFieldList.includes('IsFollowStudyParameters')">
+          <span slot="label" v-html="$t('trials:researchForm:form:isFollowStudyParam')" />
+          <el-radio-group v-model="form.IsFollowStudyParameters" :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory">
+            <el-radio v-for="item of $d.YesOrNo" :key="`IsFollowStudyParameters${item.value}`" :label="item.value">{{ item.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <!-- 不能严格按照研究单位影像手册参数采集图像原因 -->
+        <el-form-item
+          v-if="!notShowFieldList.includes('NotFollowReson') && !form.IsFollowStudyParameters"
+        >
+          <span slot="label" v-html="$t('trials:researchForm:form:notFollowStudyParam')" />
+          <el-input
+            v-model="form.NotFollowReson"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            :disabled="!(state === 0 && userTypeEnumInt === 0) || isHistory"
+          />
         </el-form-item>
-        <!-- <div class="submit_content">
-          <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
-        </div> -->
       </div>
     </el-form>
   </div>
 </template>
 <script>
+import { getTrialSiteSelect } from '@/api/trials'
+import { addOrUpdateTrialSiteSurvey } from '@/api/research'
 export default {
   name: 'ResearchBasicInfo',
+  props: {
+    isHistory: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
+    var checkPhone = (rule, value, callback) => {
+      const phoneReg = /^[0-9]+$/
+      if (!value) {
+        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
+      } else {
+        setTimeout(() => {
+          if (phoneReg.test(value)) {
+            callback()
+          } else {
+            callback(new Error(this.$t('trials:researchForm:formRule:phone')))
+          }
+        }, 100)
+      }
+    }
     return {
       form: {
-        name1: 'ZY20240516',
-        name2: 'TEST',
-        name3: 'TEST20240613',
-        name4: '肺癌',
-        name5: '',
-        VerificationCode: ''
-      }
+        Id: '',
+        Sponsor: '', // 申办方
+        ResearchProgramNo: '', // 方案号
+        ExperimentName: '',
+        TrialCode: '', // 项目编号
+        TrialSiteCode: '',
+        TrialSiteAliasName: '',
+        IndicationType: '', // 适应症
+        TrialSiteId: '', // 研究单位名称
+        UserName: '', // 联系人
+        Phone: '', // 联系人电话
+        Email: '', // 联系人邮箱
+        AverageEngravingCycle: '',
+        IsConfirmImagingTechnologist: '',
+        NotConfirmReson: '',
+        EfficacyEvaluatorType: '',
+        IsFollowStudyParameters: '',
+        NotFollowReson: ''
+      },
+      rules: {
+        TrialSiteId: [
+          { required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: 'blur' }
+        ],
+        UserName: [
+          { required: true, validator: (rule, value, callback) => { !value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback() }, trigger: 'blur' },
+          { min: 0, max: 50, message: this.$t('trials:researchForm:formRule:maxLength'), trigger: ['blur', 'change'] }
+        ],
+        Phone: [
+          { required: true, validator: checkPhone, trigger: 'blur' }
+        ]
+      },
+      siteOptions: [],
+      loading: false,
+      state: null,
+      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
+      isShow: false,
+      notShowFieldList: []
     }
   },
   methods: {
-    onSubmit() {},
-    handleSendCode() {
-      console.log(1)
+    // 保存基本信息
+    handleSave(isAutoCommit) {
+      return new Promise(async(resolve) => {
+        try {
+          const valid = await this.$refs['researchBSForm'].validate()
+          if (valid) {
+            this.loading = true
+            const param = {
+              id: this.form.Id,
+              trialId: this.$route.query.trialId,
+              trialSiteId: this.form.TrialSiteId,
+              userName: this.form.UserName,
+              phone: this.form.Phone,
+              email: this.form.Email,
+              averageEngravingCycle: this.form.AverageEngravingCycle,
+              isConfirmImagingTechnologist: this.form.IsConfirmImagingTechnologist,
+              notConfirmReson: this.form.NotConfirmReson,
+              efficacyEvaluatorType: this.form.EfficacyEvaluatorType,
+              isFollowStudyParameters: this.form.IsFollowStudyParameters,
+              notFollowReson: this.form.NotFollowReson
+            }
+            const res = await addOrUpdateTrialSiteSurvey(param)
+            this.loading = false
+            if (res.IsSuccess && !isAutoCommit) {
+              this.$message.success(this.$t('common:message:savedSuccessfully'))
+            }
+            resolve(true)
+          } else {
+            if (isAutoCommit) {
+              this.$message.error(this.$t('trials:researchForm:button:msg1'))
+            }
+            resolve(false)
+          }
+        } catch (e) {
+          console.log(e)
+          resolve(false)
+        }
+      })
+    },
+    // 初始化
+    async initForm(trialInfo, trialSiteSurvey, notShowFieldList) {
+      // 获取项目下的site
+      const { Result } = await getTrialSiteSelect(this.$route.query.trialId)
+      this.siteOptions = Result
+      this.form.Id = trialSiteSurvey.Id
+      this.form.Sponsor = trialInfo.Sponsor // 申办方
+      this.form.ResearchProgramNo = trialInfo.ResearchProgramNo // 方案号
+      this.form.ExperimentName = trialInfo.ExperimentName
+      this.form.TrialCode = trialInfo.TrialCode // 项目编号
+      this.form.TrialSiteCode = trialSiteSurvey.TrialSiteCode
+      this.form.TrialSiteAliasName = trialSiteSurvey.TrialSiteAliasName // 项目别称
+      this.form.IndicationType = trialInfo.IndicationType // 适应症
+      this.form.TrialSiteId = trialSiteSurvey.TrialSiteId
+      this.form.UserName = trialSiteSurvey.UserName // 联系人
+      this.form.Phone = trialSiteSurvey.Phone // 联系人电话
+      this.form.Email = trialSiteSurvey.Email // 联系人邮箱
+      this.form.AverageEngravingCycle = trialSiteSurvey.AverageEngravingCycle
+      this.form.IsConfirmImagingTechnologist = trialSiteSurvey.IsConfirmImagingTechnologist
+      this.form.NotConfirmReson = trialSiteSurvey.NotConfirmReson
+      this.form.EfficacyEvaluatorType = trialSiteSurvey.EfficacyEvaluatorType
+      this.form.IsFollowStudyParameters = trialSiteSurvey.IsFollowStudyParameters
+      this.form.NotFollowReson = trialSiteSurvey.NotFollowReson
+      this.state = trialSiteSurvey.State
+      this.isShow = true
+      if (!notShowFieldList) return
+      this.notShowFieldList = notShowFieldList
+    },
+    handleSiteChange(val) {
+      var selected = this.siteOptions.find(item => item.TrialSiteId === val)
+      if (selected) {
+        this.form.TrialSiteCode = selected.TrialSiteCode
+      }
     }
   }
 }
 </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;
@@ -89,13 +280,21 @@ export default {
       margin-right: 10px;
     }
   }
+  .form-label-width{
+    /deep/.el-form-item__label{
+      width: 140px;
+    }
+    /deep/.el-form-item__content{
+      margin-left: 140px;
+    }
+  }
   .submit_content{
     margin-top: 20px;
     text-align: center;
   }
 
   /deep/.el-form-item {
-    margin-bottom: 0px;
+    margin-bottom: 10px;
     padding: 5px 0px;
     border-bottom: 1px solid #f5f7fa;
     .el-form-item__content{
diff --git a/src/views/research-mobile/components/EquipmentForm.vue b/src/views/research-mobile/components/EquipmentForm.vue
new file mode 100644
index 00000000..e7e0025a
--- /dev/null
+++ b/src/views/research-mobile/components/EquipmentForm.vue
@@ -0,0 +1,168 @@
+<template>
+  <div
+    v-loading="loading"
+    class="equipment_form_content"
+  >
+    <el-form
+      ref="equipmentForm"
+      :model="form"
+      :rules="rules"
+      label-position="left"
+    >
+      <!-- 扫描设备 -->
+      <el-form-item :label="$t('trials:equiptResearch:form:equipment')" prop="EquipmentTypeId">
+        <el-select
+          v-model="form.EquipmentTypeId"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item of $d.SiteSurvey_ScanEquipmentType"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- 扫描参数 -->
+      <el-form-item v-if="isShowParameters" :label="$t('trials:equiptResearch:form:param')">
+        <el-input v-model="form.Parameters" />
+      </el-form-item>
+      <!-- 扫描仪器制造商名称 -->
+      <el-form-item :label="$t('trials:equiptResearch:form:manufacturer')">
+        <el-input v-model="form.ManufacturerName" />
+      </el-form-item>
+      <!-- 扫描仪型号 -->
+      <el-form-item :label="$t('trials:equiptResearch:form:model')">
+        <el-input v-model="form.ScannerType" />
+      </el-form-item>
+      <!-- 备注 -->
+      <el-form-item :label="$t('trials:equiptResearch:form:remark')">
+        <el-input v-model="form.Note" />
+      </el-form-item>
+      <div style="text-align: center">
+        <!-- 取消 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleCancel"
+        >
+          {{ $t("common:button:cancel") }}
+        </el-button>
+        <!-- 保存 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleSave"
+        >
+          {{ $t("common:button:save") }}
+        </el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { addOrUpdateTrialSiteEquipmentSurvey } from '@/api/research'
+import { getQueryString } from '@/utils/history.js'
+export default {
+  name: 'EquipmentForm',
+  props: {
+    equipmentInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    trialSiteSurveyEquipmentType: {
+      type: String,
+      default: ''
+    },
+    isShowParameters: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      form: {
+        Id: '',
+        EquipmentTypeId: '',
+        Parameters: '',
+        ManufacturerName: '',
+        ScannerType: '',
+        Note: '',
+        TrialSiteSurveyId: ''
+      },
+      rules: {
+        EquipmentTypeId: [
+          { required: true, message: this.$t('trials:researchForm:formRule:select'), trigger: ['blur', 'change'] }
+        ]
+      },
+      loading: false,
+      dictionaryList: {}
+    }
+  },
+  mounted() {
+    this.initForm()
+  },
+  methods: {
+    async initForm() {
+      Object.keys(this.equipmentInfo).forEach(key => {
+        this.form[key] = this.equipmentInfo[key]
+      })
+    },
+    // 保存参与者信息
+    async handleSave() {
+      try {
+        const validate = await this.$refs.equipmentForm.validate()
+        if (!validate) return
+        this.loading = true
+        if (!this.form.TrialSiteSurveyId) {
+          this.form.TrialSiteSurveyId = getQueryString('trialSiteSurveyId')
+        }
+        const trialId = getQueryString('trialId')
+        const res = await addOrUpdateTrialSiteEquipmentSurvey(trialId, this.form)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.$message.success(this.$t('common:message:savedSuccessfully'))
+          this.$emit('getList')
+          this.$emit('close')
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    handleTrialRoleChange(v) {
+      if (v === 1) {
+        // crc
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.crcId
+      } else if (v === 2) {
+        // cra
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.craId
+      } else {
+        this.form.IsGenerateAccount = false
+        this.form.UserTypeId = ''
+      }
+    },
+    // 取消保存
+    handleCancel() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.equipment_form_content{
+  padding: 0 10px;
+  /deep/.el-form-item {
+    margin-bottom: 10px;
+    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
index 32789cfb..a9840fa0 100644
--- a/src/views/research-mobile/components/Equipments.vue
+++ b/src/views/research-mobile/components/Equipments.vue
@@ -1,10 +1,14 @@
 <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>{{ $t('trials:equiptResearch:title:equiptResearch') }}</div>
+      <div>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">
+          {{ $t('common:button:add') }}
+        </el-button>
+      </div>
     </div>
-    <div v-for="item in list" :key="item.name" class="participant_info">
+    <div v-for="item in list" :key="item.name" class="equipment_info">
       <div class="p_icon">
         <i class="el-icon-receiving" />
       </div>
@@ -15,89 +19,140 @@
                    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 class="p_text">{{ item.EquipmentType }}</div>
+          <div v-if="isShowParameters" class="p_text" style="margin-left:10px">{{ item.Parameters }}</div>
+          <div class="p_text" style="margin-left:10px">{{ item.ManufacturerName }}</div>
         </div>
-        <div class="p_text">{{ item.email }}</div>
-        <div class="p_text">{{ item.site }}</div>
+        <div class="p_text">{{ item.ScannerType }}</div>
+        <div class="p_text">{{ item.Note }}</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 v-if="state === 0 && userTypeEnumInt === 0 && !isHistory" class="p_func">
+        <el-button type="text" @click="handleEdit(item)">
+          <i class="el-icon-edit-outline" style="font-size: 20px;" />
+        </el-button>
+        <el-button type="text" @click="handleDelete(item)">
+          <i class="el-icon-delete" style="font-size: 20px;" />
+        </el-button>
       </div>
     </div>
+    <!-- 添加/编辑设备信息 -->
     <el-drawer
-      title="添加"
-      :visible.sync="drawer"
+      :title="title"
+      :visible.sync="formVisible"
       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>
+      <EquipmentForm
+        v-if="formVisible"
+        :equipment-info="equipmentInfo"
+        :is-show-parameters="isShowParameters"
+        @getList="getList"
+        @close="close"
+      />
     </el-drawer>
   </div>
 </template>
 <script>
+import { getTrialSiteEquipmentSurveyList, deleteTrialSiteEquipmentSurvey } from '@/api/research'
+import EquipmentForm from './EquipmentForm'
+import { getQueryString } from '@/utils/history.js'
 export default {
   name: 'EquipmentsResearch',
+  components: { EquipmentForm },
+  props: {
+    trialSiteSurveyEquipmentType: {
+      type: String,
+      default: ''
+    },
+    isHistory: {
+      type: Boolean,
+      default: false
+    }
+  },
   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
+      list: [],
+      formVisible: false,
+      title: '',
+      equipmentInfo: {},
+      w: 0,
+      loading: false,
+      userTypeEnumInt: 0,
+      state: null,
+      trialSiteSurveyId: '',
+      trialId: '',
+      isShowParameters: false
     }
   },
   mounted() {
     this.w = document.body.clientWidth - 200
+    if (zzSessionStorage.getItem('userTypeEnumInt')) {
+      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+    }
+    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
+    this.trialId = getQueryString('trialId')
   },
   methods: {
-
+    // 获取列表数据
+    async getList() {
+      try {
+        this.loading = true
+        const res = await getTrialSiteEquipmentSurveyList(this.trialSiteSurveyId)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.list = res.Result
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    // 新增
+    handleAdd() {
+      this.equipmentInfo = {}
+      this.title = this.$t('trials:equiptResearch:dialogTitle:add')
+      this.formVisible = true
+    },
+    // 编辑
+    handleEdit(obj) {
+      this.equipmentInfo = Object.assign({ ...obj })
+      this.title = this.$t('trials:equiptResearch:dialogTitle:edit')
+      this.formVisible = true
+    },
+    // 删除
+    async handleDelete(obj) {
+      try {
+        const confirm = await this.$confirm(
+          this.$t('trials:staffResearch:message:confirmDel'),
+          {
+            type: 'warning',
+            distinguishCancelAndClose: true
+          }
+        )
+        if (confirm !== 'confirm') return
+        this.loading = true
+        const res = await deleteTrialSiteEquipmentSurvey(obj.Id, this.trialId)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.list.splice(this.list.findIndex((item) => item.Id === obj.Id), 1)
+          this.$message.success(this.$t('trials:equiptResearch:message:delSuccessfully'))
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    initList(TrialSiteEquipmentSurveyList, trialSiteSurvey, isShowParameters) {
+      this.isShowParameters = isShowParameters
+      this.list = TrialSiteEquipmentSurveyList
+      this.state = trialSiteSurvey.State
+      this.$forceUpdate()
+      console.log(this.list)
+    },
+    // 关闭窗口
+    close() {
+      this.formVisible = false
+    }
   }
 }
 </script>
@@ -112,7 +167,7 @@ export default {
     align-items: center;
     margin-bottom: 10px;
   }
-  .participant_info{
+  .equipment_info{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
diff --git a/src/views/research-mobile/components/HistoricalParticipantForm.vue b/src/views/research-mobile/components/HistoricalParticipantForm.vue
new file mode 100644
index 00000000..38bbdb96
--- /dev/null
+++ b/src/views/research-mobile/components/HistoricalParticipantForm.vue
@@ -0,0 +1,304 @@
+<template>
+  <div
+    v-loading="loading"
+    class="participants_form_content"
+  >
+    <el-form
+      ref="participantForm"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      label-position="left"
+    >
+      <!-- 姓 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:lastName')"
+        prop="LastName"
+      >
+        <span>{{ form.LastName }}</span>
+      </el-form-item>
+      <!-- 名 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:firstName')"
+        prop="FirstName"
+      >
+        <span>{{ form.FirstName }}</span>
+      </el-form-item>
+      <!-- 电话号码 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:phone')"
+        prop="Phone"
+      >
+        <span>{{ form.Phone }}</span>
+      </el-form-item>
+      <!-- 邮箱 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:email')"
+        prop="Email"
+      >
+        <span>{{ form.Email }}</span>
+      </el-form-item>
+      <!-- 单位 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:organization')"
+        prop="OrganizationName"
+      >
+        <span>{{ form.Email }}</span>
+      </el-form-item>
+      <!-- 用户类型 -->
+      <el-form-item v-if="form.IsGenerateAccount" :label="$t('trials:staffResearch:form:userType')" prop="UserTypeId">
+        <el-select v-model="form.UserTypeId" style="width: 100%" disabled>
+          <el-option v-for="item of userTypeOptions" :key="item.Id" :label="item.UserTypeShortName" :value="item.Id">
+            <span>{{ item.UserType }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!-- 更新状态 -->
+      <el-form-item :label="$t('trials:staffResearch:form:updateState')">
+        <el-radio-group v-model="form.IsHistoryUserDeleted" style="width: 100%">
+          <el-radio v-for="item of $d.IsUserExitTrial" :key="`IsHistoryUserDeleted${item.value}`" :label="item.value">{{
+            item.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="errorMsg"
+        label=""
+      >
+        <span
+          v-if="errorMsg"
+          style="font-size: 12px; color: #f66"
+        >
+          {{ errorMsg }}
+        </span>
+      </el-form-item>
+      <div style="text-align: center">
+        <!-- 取消 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleCancel"
+        >
+          {{ $t("common:button:cancel") }}
+        </el-button>
+        <!-- 保存 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleSave"
+        >
+          {{ $t("common:button:save") }}
+        </el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { addOrUpdateTrialSiteUserSurvey } from '@/api/research'
+import { getUserTypeList } from '@/api/research'
+import { getQueryString } from '@/utils/history.js'
+export default {
+  name: 'ParticipantForm',
+  props: {
+    participantInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    state: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    var validateEmail = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
+      } else {
+        var reg =
+          /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        if (this.form.Email && reg.test(this.form.Email)) {
+          this.sendDisabled = false
+          callback()
+        } else {
+          callback(new Error(this.$t('trials:researchForm:formRule:email')))
+          this.sendDisabled = true
+        }
+      }
+    }
+    return {
+      form: {
+        Id: '',
+        LastName: null,
+        FirstName: null,
+        TrialRoleCode: null,
+        UserTypeId: null,
+        Phone: null,
+        Email: null,
+        OrganizationName: '',
+        IsGenerateAccount: false,
+        IsHistoryUserDeleted: ''
+      },
+      rules: {
+        LastName: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:specify'),
+            trigger: 'blur'
+          },
+          {
+            min: 0,
+            max: 50,
+            message: this.$t('trials:researchForm:formRule:maxLength'),
+            trigger: 'blur'
+          }
+        ],
+        FirstName: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:specify'),
+            trigger: 'blur'
+          },
+          {
+            min: 0,
+            max: 50,
+            message: this.$t('trials:researchForm:formRule:maxLength'),
+            trigger: 'blur'
+          }
+        ],
+        TrialRoleCode: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:select'),
+            trigger: ['blur', 'change']
+          }
+        ],
+        UserTypeId: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:select'),
+            trigger: ['blur']
+          }
+        ],
+        Phone: [
+          {
+            max: 50,
+            message: this.$t('common:ruleMessage:maxLength') + ' 50',
+            trigger: 'blur'
+          }
+        ],
+        Email: [
+          { required: true, validator: validateEmail, trigger: ['blur'] }
+        ],
+        IsHistoryUserDeleted: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:select'),
+            trigger: ['blur', 'change']
+          }
+        ]
+      },
+      userRoles: [],
+      userTypeOptions: [],
+      userTypeEnumInt: 0,
+      errorMsg: '',
+      loading: false
+    }
+  },
+  mounted() {
+    this.initForm()
+  },
+  methods: {
+    async initForm() {
+      this.loading = true
+      const res = await getUserTypeList(3)
+      if (res.IsSuccess) {
+        this.userTypeOptions = res.Result
+        var crcObj = res.Result.find((i) => i.UserTypeEnum === 2)
+        this.crcId = crcObj ? crcObj.Id : ''
+        var craObj = res.Result.find((i) => i.UserTypeEnum === 9)
+        this.craId = craObj ? craObj.Id : ''
+      }
+      Object.keys(this.participantInfo).forEach((key) => {
+        this.form[key] = this.participantInfo[key]
+      })
+      if (zzSessionStorage.getItem('userTypeEnumInt')) {
+        this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+      }
+      this.loading = false
+    },
+    // 保存参与者信息
+    async handleSave() {
+      try {
+        const validate = await this.$refs.participantForm.validate()
+        if (!validate) return
+        this.loading = true
+        if (!this.form.TrialSiteSurveyId) {
+          this.form.TrialSiteSurveyId = getQueryString('trialSiteSurveyId')
+        }
+        const trialId = getQueryString('trialId')
+        const res = await addOrUpdateTrialSiteUserSurvey(trialId, this.form)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.$message.success(
+            this.$t('common:message:savedSuccessfully')
+          )
+
+          this.$emit('close', { id: res.Result, errorMessage: '' })
+        }
+      } catch (e) {
+        if (e.Result && e.Result.Id && e.ErrorMessage) {
+          this.$emit('close', {
+            id: e.Result.Id,
+            errorMessage: e.ErrorMessage
+          })
+        } else {
+          console.log(e)
+        }
+        this.loading = false
+      }
+    },
+    handleTrialRoleChange(v) {
+      if (v === 1) {
+        // crc
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.crcId
+      } else if (v === 2) {
+        // cra
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.craId
+      } else {
+        this.form.IsGenerateAccount = false
+        this.form.UserTypeId = ''
+      }
+    },
+    // 取消保存
+    handleCancel() {
+      this.$emit('close')
+    },
+    handleIsCorrectChange(val) {
+      if (!val) {
+        this.form.IsGenerateAccount = false
+      }
+    },
+    handleIsGenerateAccountChange(val) {
+      if (!val) {
+        this.form.UserTypeId = ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.participants_form_content{
+  padding: 0 10px;
+  /deep/.el-form-item {
+    margin-bottom: 10px;
+    padding: 5px 0px;
+    border-bottom: 1px solid #f5f7fa;
+    .el-form-item__content{
+      color: #82848a;
+    }
+  }
+}
+</style>
diff --git a/src/views/research-mobile/components/HistoricalParticipants.vue b/src/views/research-mobile/components/HistoricalParticipants.vue
index 5901ec2e..9e67c196 100644
--- a/src/views/research-mobile/components/HistoricalParticipants.vue
+++ b/src/views/research-mobile/components/HistoricalParticipants.vue
@@ -1,10 +1,198 @@
 <template>
-  <div>
-    历史人员
+  <div class="participants_content">
+    <div class="title">
+      <div>{{ $t('trials:staffResearch:title:historicalStaff') }}</div>
+    </div>
+    <div v-for="item in list" :key="item.Id" 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.LastName} / ${item.FirstName}` }}</div>
+          <div class="p_text" style="margin:0 10px">{{ $fd('SiteSurvey_UserRoles',item.TrialRoleCode) }}</div>
+          <div class="p_text">{{ item.Phone }}</div>
+        </div>
+        <div class="p_text">{{ item.Email }}</div>
+        <div class="p_text">{{ item.OrganizationName }}</div>
+      </div>
+      <div v-if="state === 0 && (userTypeEnumInt===0 ) && !isHistory" class="p_func">
+        <!-- 编辑 -->
+        <el-button
+          v-if="userTypeEnumInt===0"
+          type="text"
+          @click="editParticipant(item)"
+        >
+          <i class="el-icon-edit-outline" style="font-size: 20px;" />
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 编辑人员信息 -->
+    <el-drawer
+      :title="title"
+      :visible.sync="formVisible"
+      direction="btt"
+      size="50%"
+    >
+      <HistoricalParticipantForm
+        v-if="formVisible"
+        :state="state"
+        :participant-info="participantInfo"
+        @getList="getList"
+        @close="close"
+      />
+    </el-drawer>
   </div>
 </template>
 <script>
+import { getTrialSiteUserSurveyList } from '@/api/research'
+import HistoricalParticipantForm from './HistoricalParticipantForm'
+import { getQueryString } from '@/utils/history.js'
 export default {
-  name: 'HisParticipantsResearch'
+  name: 'HisParticipantsResearch',
+  components: { HistoricalParticipantForm },
+  props: {
+    isHistory: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      formVisible: false,
+      title: '',
+      participantInfo: null,
+      w: 0,
+      state: null,
+      trialSiteSurveyId: '',
+      trialId: '',
+      userTypeEnumInt: 0,
+      warningList: []
+    }
+  },
+  mounted() {
+    this.w = document.body.clientWidth - 200
+    if (zzSessionStorage.getItem('userTypeEnumInt')) {
+      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+    }
+    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
+    this.trialId = getQueryString('trialId')
+  },
+  methods: {
+    // 获取参与者列表数据
+    async getList() {
+      try {
+        this.loading = true
+        var params = {
+          trialSiteSurveyId: this.trialSiteSurveyId,
+          isHistoryUser: true
+        }
+        const res = await getTrialSiteUserSurveyList(params)
+        this.loading = false
+        if (res.IsSuccess) {
+          res.Result.map(item => {
+            var obj = this.warningList.find(i => i.id === item.Id)
+            if (obj) {
+              item.ErrorMessage = obj.errorMessage
+            }
+          })
+          this.list = res.Result
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    // 编辑
+    editParticipant(row) {
+      this.participantInfo = Object.assign({ ...row })
+      this.title = this.$t('trials:staffResearch:dialogTitle:edit')
+      this.formVisible = true
+    },
+    // 初始化列表
+    initList(trialSiteUserSurveyList, trialSiteSurvey) {
+      this.list = trialSiteUserSurveyList
+      this.state = trialSiteSurvey.State
+      this.$forceUpdate()
+    },
+    // 关闭窗口
+    async close(obj) {
+      this.formVisible = false
+      var idx = this.warningList.findIndex(i => i.id === obj.id)
+      if (idx > -1) {
+        this.warningList[idx].errorMessage = obj.errorMessage
+      } else {
+        this.warningList.push({ id: obj.id, errorMessage: obj.errorMessage })
+      }
+      this.getList()
+    }
+  }
 }
 </script>
+<style lang="scss" scoped>
+.participants_content{
+  background: #fff;
+  padding: 10px;
+  .title{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .participant_info{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    border-top: 1px solid #f5f7fa;
+    .p_icon{
+      width: 70px;
+      font-size: 25px;
+      font-weight: bold;
+      text-align: center;
+    }
+    .p_info{
+      position: relative;
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      // border-right: 1px solid #f5f7fa;
+      font-size: 13px;
+    }
+    .p_info:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        height: 50px;
+        width: 1px;
+        background-color: #f5f7fa;
+    }
+    .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/Notes.vue b/src/views/research-mobile/components/Notes.vue
index 0177579a..2b63d32f 100644
--- a/src/views/research-mobile/components/Notes.vue
+++ b/src/views/research-mobile/components/Notes.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="research_note">
     <div class="title">
-      备注
+      {{ $t('trials:equiptResearch:form:precautions') }}
     </div>
-    <ol>
+    <ol v-if="siteSurveyNoteInfo">
+      <div v-if="$i18n.locale === 'zh'" v-html="siteSurveyNoteInfo.ReplaceContentCN" />
+      <div v-else v-html="siteSurveyNoteInfo.ReplaceContent" />
+    </ol>
+    <ol v-else>
       <!-- 只要有可能，请确保受试者使用上述指定的扫描仪器采集影像。 -->
       <li>{{ $t('trials:equiptResearch:form:item1') }}</li>
       <!-- 请确保对每位受试者的扫描参数在整个研究过程中保持一致。 -->
@@ -14,11 +18,20 @@
       <li>{{ $t('trials:equiptResearch:form:item4') }}</li>
     </ol>
   </div>
-
 </template>
 <script>
 export default {
-  name: 'ResearchNotes'
+  name: 'ResearchNotes',
+  data() {
+    return {
+      siteSurveyNoteInfo: null
+    }
+  },
+  methods: {
+    initPage(siteSurveyNoteInfo) {
+      this.siteSurveyNoteInfo = siteSurveyNoteInfo
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/research-mobile/components/ParticipantForm.vue b/src/views/research-mobile/components/ParticipantForm.vue
new file mode 100644
index 00000000..995106f8
--- /dev/null
+++ b/src/views/research-mobile/components/ParticipantForm.vue
@@ -0,0 +1,318 @@
+<template>
+  <div
+    v-loading="loading"
+    class="participants_form_content"
+  >
+    <el-form
+      ref="participantForm"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      label-position="left"
+    >
+      <!-- 姓 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:lastName')"
+        prop="LastName"
+      >
+        <el-input
+          v-model="form.LastName"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+        />
+      </el-form-item>
+      <!-- 名 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:firstName')"
+        prop="FirstName"
+      >
+        <el-input
+          v-model="form.FirstName"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+        />
+      </el-form-item>
+      <!-- 角色 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:role')"
+        prop="TrialRoleCode"
+      >
+        <el-select
+          v-model="form.TrialRoleCode"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+          style="width:100%"
+          @change="handleTrialRoleChange"
+        >
+          <el-option
+            v-for="item of $d.SiteSurvey_UserRoles"
+            :key="item.id"
+            :label="item.label"
+            :value="parseInt(item.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- 电话号码 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:phone')"
+        prop="Phone"
+      >
+        <el-input
+          v-model="form.Phone"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+        />
+      </el-form-item>
+      <!-- 邮箱 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:email')"
+        prop="Email"
+      >
+        <el-input
+          v-model="form.Email"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+        />
+      </el-form-item>
+      <!-- 单位 -->
+      <el-form-item
+        :label="$t('trials:staffResearch:form:organization')"
+        prop="OrganizationName"
+      >
+        <el-input
+          v-model="form.OrganizationName"
+          :disabled="!(state === 0 && userTypeEnumInt === 0)"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="errorMsg"
+        label=""
+      >
+        <span
+          v-if="errorMsg"
+          style="font-size: 12px; color: #f66"
+        >
+          {{ errorMsg }}
+        </span>
+      </el-form-item>
+      <div style="text-align: center">
+        <!-- 取消 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleCancel"
+        >
+          {{ $t("common:button:cancel") }}
+        </el-button>
+        <!-- 保存 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleSave"
+        >
+          {{ $t("common:button:save") }}
+        </el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { addOrUpdateTrialSiteUserSurvey } from '@/api/research'
+import { getUserTypeList } from '@/api/research'
+import { getQueryString } from '@/utils/history.js'
+export default {
+  name: 'ParticipantForm',
+  props: {
+    participantInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    state: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    var validateEmail = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
+      } else {
+        var reg =
+          /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        if (this.form.Email && reg.test(this.form.Email)) {
+          this.sendDisabled = false
+          callback()
+        } else {
+          callback(new Error(this.$t('trials:researchForm:formRule:email')))
+          this.sendDisabled = true
+        }
+      }
+    }
+    return {
+      form: {
+        Id: '',
+        LastName: null,
+        FirstName: null,
+        TrialRoleCode: null,
+        UserTypeId: null,
+        Phone: null,
+        Email: null,
+        OrganizationName: '',
+        IsGenerateAccount: false,
+        IsDisable: false
+      },
+      rules: {
+        LastName: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:specify'),
+            trigger: 'blur'
+          },
+          {
+            min: 0,
+            max: 50,
+            message: this.$t('trials:researchForm:formRule:maxLength'),
+            trigger: 'blur'
+          }
+        ],
+        FirstName: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:specify'),
+            trigger: 'blur'
+          },
+          {
+            min: 0,
+            max: 50,
+            message: this.$t('trials:researchForm:formRule:maxLength'),
+            trigger: 'blur'
+          }
+        ],
+        TrialRoleCode: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:select'),
+            trigger: ['blur', 'change']
+          }
+        ],
+        UserTypeId: [
+          {
+            required: true,
+            message: this.$t('trials:researchForm:formRule:select'),
+            trigger: ['blur']
+          }
+        ],
+        Phone: [
+          {
+            max: 50,
+            message: this.$t('common:ruleMessage:maxLength') + ' 50',
+            trigger: 'blur'
+          }
+        ],
+        Email: [
+          { required: true, validator: validateEmail, trigger: ['blur'] }
+        ]
+      },
+      userRoles: [],
+      userTypeOptions: [],
+      userTypeEnumInt: 0,
+      errorMsg: '',
+      crcId: '',
+      craId: '',
+      loading: false
+    }
+  },
+  mounted() {
+    this.initForm()
+  },
+  methods: {
+    async initForm() {
+      this.loading = true
+      const res = await getUserTypeList(3)
+      if (res.IsSuccess) {
+        this.userTypeOptions = res.Result
+        var crcObj = res.Result.find((i) => i.UserTypeEnum === 2)
+        this.crcId = crcObj ? crcObj.Id : ''
+        var craObj = res.Result.find((i) => i.UserTypeEnum === 9)
+        this.craId = craObj ? craObj.Id : ''
+      }
+      Object.keys(this.participantInfo).forEach((key) => {
+        this.form[key] = this.participantInfo[key]
+      })
+      if (zzSessionStorage.getItem('userTypeEnumInt')) {
+        this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+      }
+      this.loading = false
+    },
+    // 保存参与者信息
+    async handleSave() {
+      try {
+        const validate = await this.$refs.participantForm.validate()
+        if (!validate) return
+        this.loading = true
+        if (!this.form.TrialSiteSurveyId) {
+          this.form.TrialSiteSurveyId = getQueryString('trialSiteSurveyId')
+        }
+        const trialId = getQueryString('trialId')
+        const res = await addOrUpdateTrialSiteUserSurvey(trialId, this.form)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.$message.success(
+            this.$t('common:message:savedSuccessfully')
+          )
+
+          this.$emit('close', { id: res.Result, errorMessage: '' })
+        }
+      } catch (e) {
+        if (e.Result && e.Result.Id && e.ErrorMessage) {
+          this.$emit('close', {
+            id: e.Result.Id,
+            errorMessage: e.ErrorMessage
+          })
+        } else {
+          console.log(e)
+        }
+        this.loading = false
+      }
+    },
+    handleTrialRoleChange(v) {
+      if (v === 1) {
+        // crc
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.crcId
+      } else if (v === 2) {
+        // cra
+        this.form.IsGenerateAccount = true
+        this.form.UserTypeId = this.craId
+      } else {
+        this.form.IsGenerateAccount = false
+        this.form.UserTypeId = ''
+      }
+    },
+    // 取消保存
+    handleCancel() {
+      this.$emit('close')
+    },
+    handleIsCorrectChange(val) {
+      if (!val) {
+        this.form.IsGenerateAccount = false
+      }
+    },
+    handleIsGenerateAccountChange(val) {
+      if (!val) {
+        this.form.UserTypeId = ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.participants_form_content{
+  padding: 0 10px;
+  /deep/.el-form-item {
+    margin-bottom: 10px;
+    padding: 5px 0px;
+    border-bottom: 1px solid #f5f7fa;
+    .el-form-item__content{
+      color: #82848a;
+    }
+  }
+}
+</style>
diff --git a/src/views/research-mobile/components/Participants.vue b/src/views/research-mobile/components/Participants.vue
index 873a6678..6ceb1898 100644
--- a/src/views/research-mobile/components/Participants.vue
+++ b/src/views/research-mobile/components/Participants.vue
@@ -1,111 +1,188 @@
 <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>{{ $t('trials:staffResearch:title:newStaff') }}</div>
+      <div>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="addParticipant"
+        >
+          {{ $t('common:button:add') }}
+        </el-button>
+      </div>
     </div>
-    <div v-for="item in list" :key="item.name" class="participant_info">
+    <div v-for="item in list" :key="item.Id" 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'}"
+          :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 class="p_text">{{ `${item.LastName} / ${item.FirstName}` }}</div>
+          <div class="p_text" style="margin:0 10px">{{ $fd('SiteSurvey_UserRoles',item.TrialRoleCode) }}</div>
+          <div class="p_text">{{ item.Phone }}</div>
         </div>
-        <div class="p_text">{{ item.email }}</div>
-        <div class="p_text">{{ item.site }}</div>
+        <div class="p_text">{{ item.Email }}</div>
+        <div class="p_text">{{ item.OrganizationName }}</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 v-if="state === 0 && (userTypeEnumInt===0 ) && !isHistory" class="p_func">
+        <!-- 编辑 -->
+        <el-button
+          type="text"
+          :disabled="state!==0 || item.IsGenerateSuccess"
+          @click="editParticipant(item)"
+        >
+          <i class="el-icon-edit-outline" style="font-size: 20px;" />
+        </el-button>
+        <!-- 移除 -->
+        <el-button
+          type="text"
+          :disabled="state!==0 || item.IsGenerateSuccess"
+          @click="removeParticipant(item)"
+        >
+          <i class="el-icon-delete" style="font-size: 20px;" />
+        </el-button>
       </div>
     </div>
+
+    <!-- 添加/编辑人员信息 -->
     <el-drawer
-      title="添加"
-      :visible.sync="drawer"
+      :title="title"
+      :visible.sync="formVisible"
       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>
+      <ParticipantForm
+        v-if="formVisible"
+        :state="state"
+        :participant-info="participantInfo"
+        @getList="getList"
+        @close="close"
+      />
     </el-drawer>
   </div>
 </template>
 <script>
+import { getTrialSiteUserSurveyList, deleteTrialSiteUserSurvey } from '@/api/research'
+import ParticipantForm from './ParticipantForm'
+import { getQueryString } from '@/utils/history.js'
 export default {
   name: 'ParticipantsResearch',
+  components: { ParticipantForm },
+  props: {
+    isHistory: {
+      type: Boolean,
+      default: false
+    }
+  },
   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
+      loading: false,
+      list: [],
+      formVisible: false,
+      title: '',
+      participantInfo: null,
+      w: 0,
+      state: null,
+      trialSiteSurveyId: '',
+      trialId: '',
+      userTypeEnumInt: 0,
+      warningList: []
     }
   },
   mounted() {
     this.w = document.body.clientWidth - 200
-    console.log(document.body.clientWidth)
+    if (zzSessionStorage.getItem('userTypeEnumInt')) {
+      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+    }
+    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
+    this.trialId = getQueryString('trialId')
   },
   methods: {
+    // 获取参与者列表数据
+    async getList() {
+      try {
+        this.loading = true
+        var params = {
+          trialSiteSurveyId: this.trialSiteSurveyId,
+          isHistoryUser: false
+        }
+        const res = await getTrialSiteUserSurveyList(params)
+        this.loading = false
+        if (res.IsSuccess) {
+          res.Result.map(item => {
+            var obj = this.warningList.find(i => i.id === item.Id)
+            if (obj) {
+              item.ErrorMessage = obj.errorMessage
+            }
+          })
+          this.list = res.Result
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    // 新增
+    addParticipant() {
+      this.participantInfo = {}
+      this.title = this.$t('trials:staffResearch:dialogTitle:add')
+      this.formVisible = true
+    },
+    // 编辑
+    editParticipant(obj) {
+      this.participantInfo = Object.assign({ ...obj })
+      this.title = this.$t('trials:staffResearch:dialogTitle:edit')
+      this.formVisible = true
+    },
+    // 删除
+    async removeParticipant(obj) {
+      try {
+        const confirm = await this.$confirm(
+          this.$t('trials:staffResearch:message:confirmDel'),
+          {
+            type: 'warning',
+            distinguishCancelAndClose: true
+          }
+        )
+        if (confirm !== 'confirm') return
+        this.loading = true
+        const res = await deleteTrialSiteUserSurvey(obj.Id, this.trialId)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.list.splice(this.list.findIndex((item) => item.Id === obj.Id), 1)
+          this.$message.success(this.$t('trials:staffResearch:message:delSuccessfully'))
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    isExistIncorrect() {
+      return this.list.some(item => item.IsCorrect === false)
+    },
 
+    // 初始化列表
+    initList(trialSiteUserSurveyList, trialSiteSurvey) {
+      this.list = trialSiteUserSurveyList
+      this.state = trialSiteSurvey.State
+      this.$forceUpdate()
+    },
+    // 关闭窗口
+    async close(obj) {
+      this.formVisible = false
+      var idx = this.warningList.findIndex(i => i.id === obj.id)
+      if (idx > -1) {
+        this.warningList[idx].errorMessage = obj.errorMessage
+      } else {
+        this.warningList.push({ id: obj.id, errorMessage: obj.errorMessage })
+      }
+      this.getList()
+    }
   }
 }
 </script>
diff --git a/src/views/research-mobile/detail.vue b/src/views/research-mobile/detail.vue
index c3cab3c8..41477911 100644
--- a/src/views/research-mobile/detail.vue
+++ b/src/views/research-mobile/detail.vue
@@ -1,22 +1,46 @@
 <template>
-  <div class="research_detal_wrapper">
+  <div v-loading="loading" class="research_detal_wrapper">
+    <div class="d_title">中心调研表</div>
     <div class="d_content">
+
       <!-- 项目基本信息 -->
-      <BasicInfo />
+      <BasicInfo ref="basicInfo" />
       <!-- 历史人员 -->
-      <!-- <HistoricalParticipants /> -->
+      <HistoricalParticipants ref="historicalParticipant" class="mt5" />
       <!-- 新增人员 -->
-      <Participants style="margin-top: 5px" />
+      <Participants ref="participants" class="mt5" />
       <!-- 设备调研 -->
-      <Equipments style="margin-top: 5px" />
+      <Equipments ref="equipments" class="mt5" />
       <!-- 备注 -->
-      <Notes style="margin-top: 5px" />
+      <Notes ref="notes" class="mt5" />
+    </div>
+    <div class="d_footer">
+      <!-- 保存 -->
+      <el-button
+        v-if="state === 0 && userTypeEnumInt === 0 "
+        type="primary"
+        size="small"
+        @click="handleSave"
+      >
+        {{ $t('common:button:save') }}
+      </el-button>
+      <!-- 提交 -->
+      <el-button
+        v-if="(state === 0 && userTypeEnumInt === 0)"
+        type="primary"
+        size="small"
+        @click="handleSubmit('submit')"
+      >
+        {{ $t('trials:researchForm:button:submit') }}
+      </el-button>
     </div>
   </div>
 </template>
 <script>
+import { getSiteSurveyInfo, trialSurveySubmit } from '@/api/research'
+import { getQueryString } from '@/utils/history.js'
 import BasicInfo from './components/BasicInfo'
-// import HistoricalParticipants from './components/HistoricalParticipants'
+import HistoricalParticipants from './components/HistoricalParticipants'
 import Participants from './components/Participants'
 import Equipments from './components/Equipments'
 import Notes from './components/Notes'
@@ -24,14 +48,145 @@ export default {
   name: 'ResearchMobileDetail',
   components: {
     BasicInfo,
-    // HistoricalParticipants,
-    Participants, Equipments, Notes }
+    HistoricalParticipants,
+    Participants, Equipments, Notes
+  },
+  data() {
+    return {
+      trialId: this.$route.query.trialId,
+      trialSiteSurveyId: '',
+      loading: false,
+      state: null,
+      userTypeEnumInt: 0,
+      rejectVisible: false,
+      rejectForm: { reason: '' },
+      siteSurveyNoteInfo: null
+    }
+  },
+  mounted() {
+    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
+    this.initPage()
+    if (zzSessionStorage.getItem('userTypeEnumInt')) {
+      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
+    }
+  },
+  methods: {
+    // 初始化页面
+    async initPage() {
+      try {
+        this.loading = true
+        const res = await getSiteSurveyInfo(this.trialId, this.trialSiteSurveyId)
+        if (res.Result) {
+          if (res.Result.SiteSurveyFiledConfig && res.Result.SiteSurveyFiledConfig.ModifyFiledList.length > 0) {
+            this.siteSurveyNoteInfo = res.Result.SiteSurveyFiledConfig.ModifyFiledList.find(i => i.NeedModifyFiled === 'SiteSurveyNote')
+          }
+          this.state = res.Result.TrialSiteSurvey.State
+          this.$refs['basicInfo'].initForm(res.Result.TrialInfo, res.Result.TrialSiteSurvey, res.Result.SiteSurveyFiledConfig ? res.Result.SiteSurveyFiledConfig.NotShowFieldList : null)
+          var historicalArr = []
+          var newArr = []
+          res.Result.TrialSiteUserSurveyList.map(i => {
+            if (i.IsHistoryUser) {
+              historicalArr.push(i)
+            } else {
+              newArr.push(i)
+            }
+          })
+
+          this.$refs['historicalParticipant'].initList(historicalArr, res.Result.TrialSiteSurvey)
+          this.$refs['participants'].initList(newArr, res.Result.TrialSiteSurvey)
+          this.$refs['equipments'].initList(res.Result.TrialSiteEquipmentSurveyList, res.Result.TrialSiteSurvey, !(res.Result.SiteSurveyFiledConfig && res.Result.SiteSurveyFiledConfig.ModifyFiledList.length > 0))
+          this.$refs['notes'].initPage(this.siteSurveyNoteInfo)
+        }
+        this.loading = false
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    // 保存
+    handleSave() {
+      this.$refs['basicInfo'].handleSave(false)
+    },
+    // 提交
+    async handleSubmit(type) {
+      if (this.userTypeEnumInt === 0) {
+        try {
+          this.loading = true
+          const res = await this.$refs['basicInfo'].handleSave(true)
+          this.loading = false
+          if (res) {
+            this.submit(type)
+          }
+        } catch (e) {
+          this.loading = false
+          console.log(e)
+        }
+      } else {
+        this.submit(type)
+      }
+    },
+    submit(type) {
+      // 是否确认提交
+      this.$confirm(this.userTypeEnumInt === 0 ? this.$t('trials:researchForm:message:submitWarning') : this.$t('trials:researchForm:message:submitWarning2'), {
+        type: 'warning',
+        distinguishCancelAndClose: true
+      }).then(() => {
+        this.loading = true
+        var param = {
+          TrialId: this.trialId,
+          TrialSiteSurveyId: this.trialSiteSurveyId
+        }
+        trialSurveySubmit(param).then((res) => {
+          this.loading = false
+          if (res.IsSuccess) {
+            this.initPage()
+            if (this.userTypeEnumInt !== 0) {
+              this.$emit('refreshPage')
+            }
+            if (type === 'approve') {
+              this.$message.success(this.$t('common:message:approvedSuccessfully'))
+            } else {
+              this.$message.success(this.$t('trials:researchForm:message:savedSuccessfully'))
+            }
+          }
+        }).catch(() => { this.loading = false })
+      }).catch(() => {})
+    },
+    // 退出
+    handleBack() {
+      this.$router.push({ path: `/researchLogin_m?trialId=${this.trialId}&lang=${this.$i18n.locale}` })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .research_detal_wrapper{
   background-color:#f5f7fa;
+  .d_title{
+    margin-bottom: 5px;
+    line-height: 80px;
+    font-size: 28px;
+    font-weight: bold;
+    text-align: center;
+    background: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  // .d_content{
 
+  // }
+  .d_footer{
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background-color: #f8f8f8;
+    line-height: 50px;
+    text-align: center;
+  }
+  .mt5{
+    margin-top: 5px
+  }
 }
 
 </style>
diff --git a/src/views/research-mobile/login.vue b/src/views/research-mobile/login.vue
index 7faf1399..fc06cff2 100644
--- a/src/views/research-mobile/login.vue
+++ b/src/views/research-mobile/login.vue
@@ -1,65 +1,355 @@
 <template>
   <div class="research_login_m_content">
     <div class="title">中心调研表</div>
-    <el-form label-position="left" label-width="120px" :model="form">
+    <el-form
+      ref="loginForm"
+      v-loading="loading"
+      label-position="left"
+      label-width="120px"
+      :model="form"
+    >
       <div class="basic_content">
-        <el-form-item label="项目编号">
-          <span>{{ form.name1 }}</span>
+        <!-- 项目编号 -->
+        <el-form-item
+          :label="$t('trials:researchForm:form:trialId')"
+        >
+          <span>{{ form.TrialCode }}</span>
         </el-form-item>
-        <el-form-item label="试验方案号">
-          <span>{{ form.name2 }}</span>
+        <!-- 试验方案号 -->
+        <el-form-item
+          :label="$t('trials:researchForm:form:researchNo')"
+        >
+          <span>{{ form.ResearchProgramNo }}</span>
         </el-form-item>
-        <el-form-item label="试验名称">
-          <span>{{ form.name3 }}</span>
+        <!-- 试验名称 -->
+        <el-form-item
+          :label="$t('trials:researchForm:form:researchName')"
+        >
+          <span>{{ form.ExperimentName }}</span>
         </el-form-item>
-        <el-form-item label="适应症类型">
-          <span>{{ form.name4 }}</span>
+        <!-- 适应症类型 -->
+        <el-form-item
+          :label="$t('trials:researchForm:form:decleareType')"
+        >
+          <span>{{ form.IndicationType }}</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-form-item
+          :label="$t('trials:researchForm:form:siteName')"
+          prop="SiteId"
+        >
+          <el-select
+            v-model="form.TrialSiteId"
+            filterable
+            style="width:100%;"
+            @change="handleSiteChange"
+          >
+            <el-option
+              v-for="(item,index) of siteOptions"
+              :key="index"
+              :label="item.TrialSiteAliasName"
+              :value="item.TrialSiteId"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="邮箱">
-          <el-input v-model="form.name4" />
+        <el-form-item
+          v-if="form.TrialSiteId && isHaveSiteSurveyRecord"
+          label=""
+          style="text-align:right;"
+        >
+          <!-- 更新调研表 -->
+          <el-link
+            v-if="!form.IsUpdate"
+            type="primary"
+            @click="form.IsUpdate = true"
+          >
+            {{ $t('trials:researchForm:button:updateQsForm') }}
+          </el-link>
+          <!-- 取消更新调研表 -->
+          <el-link
+            v-else
+            type="primary"
+            @click="form.IsUpdate = false;form.ReplaceUserEmailOrPhone=''"
+          >
+            {{ $t('trials:researchForm:button:cancelUpdateQsForm') }}
+          </el-link>
         </el-form-item>
-        <el-form-item label="验证码">
+
+        <!-- 原调研表填写人邮箱 -->
+        <el-form-item
+          v-if="form.IsUpdate"
+          :label="$t('trials:researchForm:form:originalEmail')"
+          prop="ReplaceUserEmailOrPhone"
+        >
+          <el-input
+            v-model="form.ReplaceUserEmailOrPhone"
+            autocomplete="new-password"
+          />
+        </el-form-item>
+        <!-- 联系邮箱 -->
+        <el-form-item
+          :label="$t('trials:researchForm:form:contactorEmail')"
+          prop="EmailOrPhone"
+        >
+          <el-input
+            v-model="form.EmailOrPhone"
+            autocomplete="new-password"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('trials:researchForm:form:verifyCode')"
+        >
           <div class="code_content">
-            <el-input v-model="form.VerificationCode" />
-            <el-button type="primary" @click="handleSendCode">发送</el-button>
+            <el-input
+              v-model="form.VerificationCode"
+              autocomplete="new-password"
+            />
+            <el-button
+              type="primary"
+              :disabled="sendDisabled || !form.EmailOrPhone || count > 0"
+              @click="handleSendCode"
+            >
+              {{ this.$t('trials:researchForm:button:send') }} {{ sendTitle ? `${sendTitle}` : null }}
+            </el-button>
           </div>
         </el-form-item>
         <div class="submit_content">
-          <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >
+            提交
+          </el-button>
         </div>
       </div>
     </el-form>
   </div>
 </template>
 <script>
+import { sendVerifyCode, verifySendCode, getTrialSurveyInitInfo } from '@/api/research'
+import { getUserMenuTree, getUserPermissions } from '@/api/user'
+import store from '@/store'
+import { mapGetters, mapMutations } from 'vuex'
 export default {
   name: 'ResearchMobileLogin',
   data() {
-    return {
-      form: {
-        name1: 'ZY20240516',
-        name2: 'TEST',
-        name3: 'TEST20240613',
-        name4: '肺癌',
-        name5: '',
-        VerificationCode: ''
+    var checkPhone = (rule, value, callback) => {
+      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
+      if (!value) {
+        return callback(new Error(this.$t('trials:researchForm:formRule:specify')))
       }
+      setTimeout(() => {
+        if (!Number.isInteger(+value)) {
+          callback(new Error(this.$t('trials:researchForm:formRule:phone')))
+        } else {
+          if (phoneReg.test(value)) {
+            callback()
+          } else {
+            callback(new Error(this.$t('trials:researchForm:formRule:phone')))
+          }
+        }
+      }, 100)
+    }
+    var validateEmail = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
+      } else {
+        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        if (this.form.EmailOrPhone && reg.test(this.form.EmailOrPhone)) {
+          callback()
+        } else {
+          callback(new Error(this.$t('trials:researchForm:formRule:email')))
+        }
+      }
+    }
+    var validateReplaceEmail = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
+      } else {
+        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        if (this.form.ReplaceUserEmailOrPhone && reg.test(this.form.ReplaceUserEmailOrPhone)) {
+          callback()
+        } else {
+          callback(new Error(this.$t('trials:researchForm:formRule:email')))
+        }
+      }
+    }
+    return {
+      trialId: '',
+      form: {
+        Sponsor: null, // 申办方
+        ResearchProgramNo: null, // 方案号
+        TrialCode: null, // 项目编号
+        IndicationType: null, // 适应症
+        ExperimentName: '',
+        TrialSiteId: null, // 研究单位名称
+        UserName: null, // 联系人
+        Phone: '', // 联系人电话
+        EmailOrPhone: '',
+        TrialSiteCode: '',
+        IsUpdate: false,
+        ReplaceUserEmailOrPhone: '',
+        VerificationCode: ''
+      },
+      rules: {
+        TrialSiteId: [
+          { required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: ['blur'] }
+        ],
+        UserName: [
+          { required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: ['blur'] },
+          { min: 0, max: 50, message: this.$t('trials:researchForm:formRule:maxLength'), trigger: 'blur' }
+        ],
+        Phone: [
+          { required: true, validator: checkPhone, trigger: ['blur'] }
+        ],
+        EmailOrPhone: [
+          { required: true, validator: validateEmail, trigger: ['blur', 'change'] }
+        ],
+        ReplaceUserEmailOrPhone: [
+          { required: true, validator: validateReplaceEmail, trigger: ['blur'] }
+        ],
+        VerificationCode: [{ required: true, validator: (rule, value, callback) => { !value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback() }, trigger: ['blur'] }]
+      },
+      siteOptions: [],
+      loading: false,
+      sendDisabled: false,
+      btnLoading: false,
+      sendTitle: '',
+      count: '',
+      timer: null,
+      msg: '',
+      lang: 'zh',
+      isHaveSiteSurveyRecord: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'asyncRoutes',
+      'routes',
+      'language'
+    ])
+  },
+  mounted() {
+    this.$i18n.locale = this.$route.query.lang
+    this.setLanguage(this.$route.query.lang)
+    this.$updateDictionary()
+    if (this.$route.query.trialId) {
+      this.trialId = this.$route.query.trialId
+      this.initPage()
     }
   },
   methods: {
-    onSubmit() {
-      this.$router.push({ path: `/researchDetail_m` })
+    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
+    // 初始化页面
+    async initPage() {
+      try {
+        this.loading = true
+        const res = await getTrialSurveyInitInfo(this.trialId)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.siteOptions = res.Result.TrialSiteSelectList
+        }
+        Object.keys(this.form).forEach(key => {
+          if (res.Result.hasOwnProperty(key)) {
+            this.form[key] = res.Result[key]
+          }
+        })
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
     },
-    handleSendCode() {
-      console.log(1)
+    // 提交
+    async onSubmit() {
+      const validate = await this.$refs.loginForm.validate()
+      if (!validate) return
+      try {
+        this.loading = true
+        if (!this.form.IsUpdate) {
+          this.form.ReplaceUserEmailOrPhone = ''
+        }
+        const param = {
+          trialSiteId: this.form.TrialSiteId,
+          userName: this.form.UserName,
+          phone: this.form.Phone,
+          verificationType: 0,
+          emailOrPhone: this.form.EmailOrPhone,
+          verificationCode: this.form.VerificationCode,
+          isUpdate: this.form.IsUpdate,
+          replaceUserEmailOrPhone: this.form.ReplaceUserEmailOrPhone,
+          trialId: this.trialId
+        }
+        const res = await verifySendCode(param)
+
+        if (res.IsSuccess) {
+          zzSessionStorage.clear()
+          this.$i18n.locale = this.$route.query.lang
+          this.setLanguage(this.$route.query.lang)
+          store.dispatch('user/setToken', res.Result.Token)
+          zzSessionStorage.setItem('TokenKey', res.Result.Token)
+          var permissions = await getUserPermissions()
+          var menuTree = await getUserMenuTree()
+          store.dispatch('user/setTree', menuTree.Result)
+          store.dispatch('user/setPermissions', permissions.Result)
+          this.$router.push({ path: `/researchDetail_m?trialId=${this.trialId}&trialSiteSurveyId=${res.Result.TrialSiteSurveyId}` })
+          this.loading = false
+        }
+      } catch (e) {
+        this.loading = false
+        this.sendDisabled = false
+      }
+    },
+    handleSiteChange(val) {
+      this.isHaveSiteSurveyRecord = false
+      var selected = this.siteOptions.find(item => item.TrialSiteId === val)
+      if (selected) {
+        this.form.TrialSiteCode = selected.TrialSiteCode
+        this.isHaveSiteSurveyRecord = selected.IsHaveSiteSurveyRecord
+      }
+    },
+    // 发送验证码
+    async handleSendCode() {
+      try {
+        this.loading = true
+        const param = {
+          Email: this.form.EmailOrPhone,
+          TrialId: this.trialId
+        }
+        const res = await sendVerifyCode(param)
+        if (res.IsSuccess) {
+          this.getCode()
+          this.loading = false
+          const msg = this.$t('trials:researchForm:tip:sendCode').replace('xxx', this.form.EmailOrPhone)
+          this.$message.success(msg)
+        } else {
+          this.$alert(res.ErrorMessage)
+        }
+      } catch (e) {
+        this.loading = false
+        console.log(e)
+      }
+    },
+    getCode() {
+      const TIME_COUNT = 60
+      if (!this.timer) {
+        this.count = TIME_COUNT
+        this.sendDisabled = true
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.sendTitle = `(${this.count}s)`
+            this.count--
+          } else {
+            this.sendDisabled = false
+            this.sendTitle = ''
+            clearInterval(this.timer)
+            this.timer = null
+          }
+        }, 1000)
+      }
+    },
+    onCancel() {
+      this.$refs['loginForm'].resetFields()
     }
   }
 }
@@ -98,7 +388,7 @@ export default {
   }
 
   /deep/.el-form-item {
-    margin-bottom: 0px;
+    margin-bottom: 10px;
     padding: 5px 0px;
     border-bottom: 1px solid #f5f7fa;
     .el-form-item__content{