From 181eaed3f55f26a6f9981cc446bbd6f9f2506cb9 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Tue, 4 Nov 2025 16:17:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=B9=E9=87=8F=E8=AE=BE=E7=BD=AE=E9=98=85?=
 =?UTF-8?q?=E7=89=87=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trials.js                             |  16 +
 .../reading-period/components/AddOrEditPR.vue | 325 +++++-----
 .../reading-period/components/RPList.vue      | 205 ++----
 .../reading-period/components/ViewPeriod.vue  | 184 ++++++
 .../subject/reading-period/index.vue          | 608 ++++++------------
 5 files changed, 626 insertions(+), 712 deletions(-)
 create mode 100644 src/views/trials/trials-panel/subject/reading-period/components/ViewPeriod.vue

diff --git a/src/api/trials.js b/src/api/trials.js
index 882dc72d..db4b751c 100644
--- a/src/api/trials.js
+++ b/src/api/trials.js
@@ -4341,4 +4341,20 @@ export function getTrialSiteLatestSurvey(params) {
     method: 'get',
     params
   })
+}
+// 阅片期计划列表
+export function getReadModulePageList(data) {
+  return request({
+    url: `/ReadModule/getReadModulePageList`,
+    method: 'post',
+    data
+  })
+}
+// 移除阅片期
+export function setBatchRemoveReadingPlan(data) {
+  return request({
+    url: `/ReadingPeriodSet/setBatchRemoveReadingPlan`,
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/subject/reading-period/components/AddOrEditPR.vue b/src/views/trials/trials-panel/subject/reading-period/components/AddOrEditPR.vue
index e3597f0a..e0228a97 100644
--- a/src/views/trials/trials-panel/subject/reading-period/components/AddOrEditPR.vue
+++ b/src/views/trials/trials-panel/subject/reading-period/components/AddOrEditPR.vue
@@ -1,50 +1,20 @@
 <template>
   <div v-loading="loading" class="add_reading-period-wrapper" style="display:flex;width: 100%;height: 100%;">
-    <div
-      class="reading-period-form"
-      style="width:450px;height:100%;margin-right: 10px;"
-    >
+    <div class="reading-period-form" style="width:450px;height:100%;margin-right: 10px;">
       <el-card shadow="never" style="height:571px;">
-        <el-form
-          ref="addOrUpdatePR"
-          :model="form"
-          size="small"
-          :rules="rules"
-          label-width="160px"
-        >
+        <el-form ref="addOrUpdatePR" :model="form" size="small" :rules="rules" label-width="120px">
           <!-- 阅片期类型 -->
           <el-form-item :label="$t('trials:rpManage:table:readingType')">
             <el-input v-model="form.ReadingSetTypeName" disabled style="width:100%;" />
           </el-form-item>
           <!-- 阅片期名称 -->
           <el-form-item :label="$t('trials:rpManage:table:readingName')" prop="ReadingPeriodName">
-            <el-input v-model="form.ReadingPeriodName" style="width:100%;" />
-          </el-form-item>
-          <!-- 受试者范围 -->
-          <el-form-item :label="$t('trials:rpManage:table:subjectRange')" prop="ReadingScope">
-            <el-select v-model="form.ReadingScope" style="width:100%;">
-              <el-option
-                v-for="(item,index) of $d.ReadingScopeEnum"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <!-- 中心 -->
-          <el-form-item v-if="form.ReadingScope === 1" :label="$t('trials:addRP:form:sites')" prop="SiteIds">
-            <el-select v-model="form.SiteIds" filterable style="width:100%;" multiple>
-              <el-option
-                v-for="(item,index) of siteOptions"
-                :key="index"
-                :label="item.TrialSiteCode"
-                :value="item.TrialSiteId"
-              />
-            </el-select>
+            <el-input v-model="form.ReadingPeriodName" style="width:100%;" :disabled="data.IsTakeEffect === 1" />
           </el-form-item>
           <!-- 条件 -->
           <el-form-item :label="$t('trials:addRP:form:condition')" prop="DeadlineCondition">
-            <el-radio-group v-model="form.DeadlineCondition" style="width:100%;" @change="handleDeadlineCondition">
+            <el-radio-group v-model="form.DeadlineCondition" :disabled="data.IsTakeEffect === 1" style="width:100%;"
+              @change="handleDeadlineCondition">
               <!-- 截止日期 -->
               <el-radio :label="0">{{ $t('trials:rpManage:table:expirationDate') }}</el-radio>
               <!-- 截止访视 -->
@@ -52,125 +22,151 @@
             </el-radio-group>
           </el-form-item>
           <!-- 截止日期 -->
-          <el-form-item v-if="form.DeadlineCondition === 0" :label="$t('trials:rpManage:table:expirationDate')" prop="ExpirationDate">
-            <el-date-picker
-              v-model="form.ExpirationDate"
-              type="date"
-              value-format="yyyy-MM-dd"
-              format="yyyy-MM-dd"
-
-              style="width:100%;"
-            />
+          <el-form-item v-if="form.DeadlineCondition === 0" :label="$t('trials:rpManage:table:expirationDate')"
+            prop="ExpirationDate">
+            <el-date-picker v-model="form.ExpirationDate" :disabled="data.IsTakeEffect === 1" type="date"
+              value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:100%;" />
           </el-form-item>
           <!-- 截止访视 -->
-          <el-form-item v-if="form.DeadlineCondition === 1" :label="$t('trials:rpManage:table:expirationVisit')" prop="VisitStageId">
-            <el-select
-              v-model="form.VisitStageId"
-              clearable
-              style="width:100%;"
-              @change="handleVisitChange"
-            >
-              <el-option
-                v-for="item of visitPlanOptions"
-                :key="item.VisitStageId"
-                :label="item.VisitName"
-                :value="item.VisitStageId"
-              >
+          <el-form-item v-if="form.DeadlineCondition === 1" :label="$t('trials:rpManage:table:expirationVisit')"
+            prop="VisitStageId">
+            <el-select v-model="form.VisitStageId" clearable style="width:100%;" :disabled="data.IsTakeEffect === 1"
+              @change="handleVisitChange">
+              <el-option v-for="item of visitPlanOptions" :key="item.VisitStageId" :label="item.VisitName"
+                :value="item.VisitStageId">
                 <span style="float: left">{{ item.VisitName }}</span>
               </el-option>
             </el-select>
           </el-form-item>
-          <div style="text-align:right;margin-top:10px;">
-            <el-form-item>
-              <!-- 生成阅片期 -->
-              <el-button size="small" type="primary" :loading="btnLoading" @click="getRPList">
-                {{ $t('trials:addRP:button:createPR') }}
-              </el-button>
-            </el-form-item>
-          </div>
-
         </el-form>
       </el-card>
 
     </div>
     <div class="result-table" style="flex:1;">
       <el-card shadow="never">
-
-        <el-table
-          ref="prList"
-          v-loading="listLoading"
-          :data="list"
-          stripe
-          height="455"
-          @selection-change="handleSelectChange"
-        >
-          <el-table-column type="selection" align="left" width="45" />
-          <el-table-column type="index" width="40" />
+        <div>
+          <el-form :inline="true">
+            <!-- 中心编号 -->
+            <el-form-item :label="$t('trials:linkedRP:table:siteCode')">
+              <el-select v-model="searchData.SiteId" placeholder="" style="width:100px;" clearable>
+                <el-option v-for="(site, index) of siteOptions" :key="index" :label="site.TrialSiteCode"
+                  :value="site.Id" />
+              </el-select>
+            </el-form-item>
+            <!-- 受试者编号 -->
+            <el-form-item :label="$t('trials:linkedRP:table:subjectCode')">
+              <el-input v-model="searchData.SubjectCode" style="width:100px;" clearable />
+            </el-form-item>
+            <!-- 已加入 -->
+            <el-form-item :label="$t('trials:linkedRP:table:IsJoin')">
+              <el-select v-model="searchData.IsJoin" placeholder="" style="width:100px;" clearable>
+                <el-option v-for="item in $d.YesOrNo" :key="item.id" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <!-- 生成阅片期 -->
+            <el-form-item :label="$t('trials:linkedRP:table:IsGenerate')">
+              <el-select v-model="searchData.IsGenerate" placeholder="" style="width:100px;" clearable>
+                <el-option v-for="item in $d.YesOrNo" :key="item.id" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="small" @click="getRPList">
+                {{ $t('common:button:search') }}
+              </el-button>
+              <el-button type="primary" icon="el-icon-refresh-left" size="small" @click="handleReset">
+                {{ $t('common:button:reset') }}
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" :disabled="selectArr.length <= 0"
+                @click="handleConfirm(selectArr)">
+                {{ $t('trials:linkedRP:button:batchAdd') }}
+              </el-button>
+              <el-button type="primary" size="small" :disabled="selectArr.length <= 0" @click="handleDel(selectArr)">
+                {{ $t('trials:linkedRP:button:batchDel') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-table ref="prList" v-loading="listLoading" :data="list" stripe height="400"
+          @selection-change="handleSelectChange">
+          <el-table-column type="selection" align="left" width="45" :selectable="handleSelectable" />
           <!-- 中心 -->
-          <el-table-column
-            prop="TrialSiteCode"
-            :label="$t('trials:linkedRP:table:siteCode')"
-          />
+          <el-table-column prop="TrialSiteCode" :label="$t('trials:linkedRP:table:siteCode')" />
           <!-- 受试者 -->
-          <el-table-column
-            prop="SubjectCode"
-            :label="$t('trials:linkedRP:table:subjectCode')"
-          />
+          <el-table-column prop="SubjectCode" :label="$t('trials:linkedRP:table:subjectCode')" />
           <!-- 截止访视 -->
-          <el-table-column
-            prop="SubjectVisitName"
-            :label="$t('trials:linkedRP:table:expirationVisit')"
-          />
+          <el-table-column prop="SubjectVisitName" :label="$t('trials:linkedRP:table:expirationVisit')" />
           <!-- 最晚拍片日期 -->
-          <el-table-column
-            prop="LatestScanDate"
-            :label="$t('trials:linkedRP:table:latestScanDate')"
-          >
+          <el-table-column prop="LatestScanDate" :label="$t('trials:linkedRP:table:latestScanDate')">
             <template slot-scope="scope">
-              {{ scope.row.LatestScanDate?moment(scope.row.LatestScanDate).format('YYYY-MM-DD'):'' }}
+              {{ scope.row.LatestScanDate ? moment(scope.row.LatestScanDate).format('YYYY-MM-DD') : '' }}
             </template>
           </el-table-column>
           <!-- 截止日期 -->
-          <el-table-column
-            prop="ExpirationDate"
-            :label="$t('trials:linkedRP:table:expirationDate')"
-          >
+          <el-table-column prop="ExpirationDate" :label="$t('trials:linkedRP:table:expirationDate')">
             <template slot-scope="scope">
-              {{ scope.row.ExpirationDate?moment(scope.row.ExpirationDate).format('YYYY-MM-DD'):'' }}
+              {{ scope.row.ExpirationDate ? moment(scope.row.ExpirationDate).format('YYYY-MM-DD') : '' }}
             </template>
           </el-table-column>
           <!-- 阅片期名称 -->
-          <el-table-column
-            prop="ReadingPeriodName"
-            :label="$t('trials:linkedRP:table:readingName')"
-          />
+          <el-table-column prop="ReadingPeriodName" :label="$t('trials:linkedRP:table:readingName')" />
+          <!-- 已加入 -->
+          <el-table-column prop="IsJoin" :label="$t('trials:linkedRP:table:IsJoin')">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.IsJoin ? 'success' : 'danger'">{{ $fd("YesOrNo", scope.row.IsJoin) }}</el-tag>
+            </template>
+          </el-table-column>
+          <!--生成阅片期 -->
+          <el-table-column prop="IsGenerate" :label="$t('trials:linkedRP:table:IsGenerate')">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.IsGenerate ? 'success' : 'danger'">{{ $fd("YesOrNo", scope.row.IsGenerate)
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <!-- 生成任务 -->
+          <el-table-column prop="IsGenerateTask" :label="$t('trials:linkedRP:table:IsGenerateTask')">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.IsGenerateTask ? 'success' : 'danger'">{{ $fd("YesOrNo",
+                scope.row.IsGenerateTask) }}</el-tag>
+            </template>
+          </el-table-column>
           <!-- 生效时间 -->
-          <el-table-column
-            prop="EffectOfTime"
-            :label="$t('trials:linkedRP:table:effectiveTime')"
-          />
+          <el-table-column prop="GeneratedTime" :label="$t('trials:linkedRP:table:effectiveTime')" />
+          <el-table-column :label="$t('common:action:action')" width="100" fixed="right">
+            <template slot-scope="scope">
+              <!-- 添加 -->
+              <el-button circle :title="$t('trials:linkedRP:button:add')" icon="el-icon-plus"
+                :disabled="scope.row.IsJoin" @click="handleConfirm([scope.row])" size="small" />
+              <!-- 移除 -->
+              <el-button circle :title="$t('trials:linkedRP:button:del')" icon="el-icon-minus"
+                :disabled="scope.row.IsGenerateTask || !scope.row.IsJoin" @click="handleDel([scope.row])"
+                size="small" />
+            </template>
+          </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <div style="text-align:right">
-          <pagination class="page" :total="total" :pageSizes="[10, 20, 30, 50, 100, 500, 1000]" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" :disabled="list.length === 0" @pagination="getReadingReriodList" />
-        </div>
-
-        <div style="text-align:right;padding-top: 10px;">
-          <!-- 确认添加 -->
-          <el-button size="small" type="primary" :disabled="selectArr.length === 0" @click="handleConfirm">
-            {{ $t('trials:addRP:button:confirmAddPR') }}
-          </el-button>
+          <pagination class="page" :total="total" :pageSizes="[10, 20, 30, 50, 100, 500, 1000]"
+            :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" :disabled="list.length === 0"
+            @pagination="getReadingReriodList" />
         </div>
       </el-card>
     </div>
   </div>
 </template>
 <script>
-import { getTrialSiteSelect, addOrUpdateReadingPeriodSet, getReadingVisitList, getPreviewTheReadingList, getPreviewTheReadingPlanList } from '@/api/trials'
+import { getTrialSiteSelect, addOrUpdateReadingPeriodSet, getReadingVisitList, getPreviewTheReadingList, getPreviewTheReadingPlanList, setBatchRemoveReadingPlan } from '@/api/trials'
 import Pagination from '@/components/Pagination'
 import moment from 'moment'
 const searchDataDefault = () => {
   return {
+    SiteId: null,
+    SubjectCode: null,
+    IsJoin: null,
+    IsGenerate: null,
     PageIndex: 1,
     PageSize: 20
   }
@@ -186,7 +182,13 @@ export default {
     data: {
       type: Object,
       default() { return {} }
-    }
+    },
+    siteOptions: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
   },
   data() {
     return {
@@ -200,7 +202,7 @@ export default {
         ReadingSetTypeName: '',
         DeadlineCondition: 0,
         ReadingPeriodName: '',
-        ReadingScope: null,
+        ReadingScope: 0,
         SiteIds: [],
         VisitStageId: '',
         ExpirationDate: '',
@@ -220,7 +222,7 @@ export default {
         VisitStageId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
         // Remark: [{ max: 500, message: `${this.$t('common:ruleMessage:maxLength')} 500` }]
       },
-      siteOptions: [],
+      // siteOptions: [],
       trialId: '',
       listLoading: false,
       list: [],
@@ -233,11 +235,15 @@ export default {
   mounted() {
     this.trialId = this.$route.query.trialId
     this.initForm()
+    console.log(this.data, 'data')
   },
   methods: {
+    handleSelectable(row) {
+      return !row.IsGenerate
+    },
     async initForm() {
       this.loading = true
-      await this.getSite()
+      // await this.getSite()
       var param = {
         trialId: this.trialId,
         readingPeriodSetId: Object.keys(this.data).length > 0 ? this.data.Id : '',
@@ -256,7 +262,9 @@ export default {
 
         this.form.DeadlineCondition = this.data.SubjectVisitName ? 1 : 0
         if (this.form.Id) {
-          this.getReadingPeriodCheckedResult()
+          this.$nextTick(() => {
+            this.getRPList()
+          })
         }
       }
       this.form.TrialId = this.trialId
@@ -269,8 +277,12 @@ export default {
         this.getReadingPeriodResult()
       })
     },
+    handleReset() {
+      this.searchData = searchDataDefault()
+      this.getRPList()
+    },
     getReadingReriodList() {
-      console.log(this.form)
+      return this.getReadingPeriodResult()
       if (this.form.Id === '') {
         this.getReadingPeriodResult()
       } else {
@@ -288,9 +300,10 @@ export default {
         ReadingPeriodName: this.form.ReadingPeriodName,
         ReadingSetType: this.form.ReadingSetType,
         ReadingScope: this.form.ReadingScope,
-        TrialReadingCriterionId: this.trialReadingCriterionId
+        TrialReadingCriterionId: this.trialReadingCriterionId,
       }
       Object.assign(this.searchData, param)
+      if (this.form.Id) this.searchData.ReadingPeriodSetId = this.form.Id
       getPreviewTheReadingList(this.searchData).then(res => {
         this.list = res.Result.CurrentPageData
         this.total = res.Result.TotalCount
@@ -310,31 +323,49 @@ export default {
         this.list = res.Result.CurrentPageData
         this.total = res.Result.TotalCount
         this.listLoading = false
-        this.$nextTick(() => {
-          for (let i = 0; i < this.list.length; i++) {
-            this.$refs['prList'].toggleRowSelection(this.list[i], true)
-          }
-        })
+        // this.$nextTick(() => {
+        //   for (let i = 0; i < this.list.length; i++) {
+        //     this.$refs['prList'].toggleRowSelection(this.list[i], true)
+        //   }
+        // })
       }).catch(() => {
         this.listLoading = false
       })
     },
     // 获取勾选行数据
     handleSelectChange(val) {
-      const arr = []
-      for (let index = 0; index < val.length; index++) {
-        arr.push(val[index].SubjectVisitId)
-      }
-      this.selectArr = arr
+      this.selectArr = val
     },
-    handleConfirm() {
+    async handleDel(arr) {
+      try {
+        let data = {
+          Id: this.form.Id,
+          SubjectVisitIdList: []
+        }
+        data.SubjectVisitIdList = arr.map(item => item.SubjectVisitId)
+        this.loading = true
+        let res = await setBatchRemoveReadingPlan(data)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.getReadingReriodList()
+          this.$emit('getList')
+          this.$message.success(this.$t('common:message:removedSuccessfully'))
+        }
+      } catch (err) {
+        this.loading = false
+        console.log(err)
+      }
+    },
+    handleConfirm(arr) {
       this.loading = true
       var params = Object.assign({}, this.form)
-      params.subjectVisitIds = this.selectArr
+      params.subjectVisitIds = arr.map(item => item.SubjectVisitId)
       params.TrialReadingCriterionId = this.trialReadingCriterionId
       addOrUpdateReadingPeriodSet(params).then(res => {
         this.loading = false
-        this.$emit('close')
+        // this.$emit('close')
+        this.form.Id = res.Result
+        this.getReadingReriodList()
         this.$emit('getList')
         this.$message.success(this.$t('common:message:savedSuccessfully'))
       }).catch(() => { this.loading = false })
@@ -357,17 +388,17 @@ export default {
       }
     },
     // 获取site下拉框数据
-    getSite() {
-      return new Promise((resolve, reject) => {
-        getTrialSiteSelect(this.trialId).then(res => {
-          this.siteOptions = res.Result
-          resolve()
-        }).catch(() => {
-          this.loading = false
-          reject()
-        })
-      })
-    },
+    // getSite() {
+    //   return new Promise((resolve, reject) => {
+    //     getTrialSiteSelect(this.trialId).then(res => {
+    //       this.siteOptions = res.Result
+    //       resolve()
+    //     }).catch(() => {
+    //       this.loading = false
+    //       reject()
+    //     })
+    //   })
+    // },
     close() {
       this.$emit('close')
     }
diff --git a/src/views/trials/trials-panel/subject/reading-period/components/RPList.vue b/src/views/trials/trials-panel/subject/reading-period/components/RPList.vue
index b7fb2cf3..6a89ea01 100644
--- a/src/views/trials/trials-panel/subject/reading-period/components/RPList.vue
+++ b/src/views/trials/trials-panel/subject/reading-period/components/RPList.vue
@@ -4,17 +4,13 @@
       <el-form :inline="true">
         <!-- 阅片期名称 -->
         <el-form-item :label="$t('trials:rpManage:table:readingName')">
-          <el-input
-            v-model="searchData.ReadingPeriodName"
-            style="width:100px;"
-            clearable
-          />
+          <el-input v-model="searchData.ReadingPeriodName" style="width:100px;" clearable />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleSearch">
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">
             {{ $t('common:button:search') }}
           </el-button>
-          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
+          <el-button type="primary" icon="el-icon-refresh-left" size="small" @click="handleReset">
             {{ $t('common:button:reset') }}
           </el-button>
           <!--导出-->
@@ -22,23 +18,11 @@
             {{ $t('common:button:export') }}
           </el-button> -->
           <!-- 添加影像学阅片 -->
-          <el-button
-            v-if="isGlobalReading"
-            type="primary"
-            icon="el-icon-plus"
-            size="small"
-            @click="handleAdd(0)"
-          >
+          <el-button v-if="isGlobalReading" type="primary" icon="el-icon-plus" size="small" @click="handleAdd(0)">
             {{ $t('trials:rpManage:button:addImageReading') }}
           </el-button>
           <!-- 添加肿瘤学阅片 -->
-          <el-button
-            v-if="isClinicalReading"
-            type="primary"
-            icon="el-icon-plus"
-            size="small"
-            @click="handleAdd(1)"
-          >
+          <el-button v-if="isClinicalReading" type="primary" icon="el-icon-plus" size="small" @click="handleAdd(1)">
             {{ $t('trials:rpManage:button:addOncologyReading') }}
           </el-button>
         </el-form-item>
@@ -46,77 +30,44 @@
 
     </div>
     <div class="main-wrapper">
-      <el-table
-        v-loading="loading"
-        :data="list"
-        stripe
-        style="width: 100%"
-        height="500"
-        @sort-change="handleSortChange"
-      >
+      <el-table v-loading="loading" :data="list" stripe style="width: 100%" height="400"
+        @sort-change="handleSortChange">
         <el-table-column type="index" width="40" />
         <!-- 阅片期类型 -->
-        <el-table-column
-          prop="ReadingSetType"
-          :label="$t('trials:rpManage:table:readingType')"
-          sortable="custom"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="ReadingSetType" :label="$t('trials:rpManage:table:readingType')" sortable="custom"
+          show-overflow-tooltip>
           <template slot-scope="scope">
-            {{ $fd('ReadingSetType',scope.row.ReadingSetType) }}
+            {{ $fd('ReadingSetType', scope.row.ReadingSetType) }}
           </template>
         </el-table-column>
         <!-- 阅片期名称 -->
-        <el-table-column
-          prop="ReadingPeriodName"
-          :label="$t('trials:rpManage:table:readingName')"
-          sortable="custom"
-          show-overflow-tooltip
-        />
+        <el-table-column prop="ReadingPeriodName" :label="$t('trials:rpManage:table:readingName')" sortable="custom"
+          show-overflow-tooltip />
         <!-- 受试者范围 -->
-        <el-table-column
-          prop="ReadingScope"
-          :label="$t('trials:rpManage:table:subjectRange')"
-          sortable="custom"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="ReadingScope" :label="$t('trials:rpManage:table:subjectRange')" sortable="custom"
+          show-overflow-tooltip>
           <template slot-scope="scope">
-            {{ $fd('ReadingScopeEnum',scope.row.ReadingScope) }}
+            {{ $fd('ReadingScopeEnum', scope.row.ReadingScope) }}
           </template>
         </el-table-column>
         <!-- 指定中心 -->
-        <el-table-column
-          prop="SiteCodes"
-          :label="$t('trials:rpManage:table:designatedSite')"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="SiteCodes" :label="$t('trials:rpManage:table:designatedSite')" show-overflow-tooltip>
           <template slot-scope="scope">
-            {{ scope.row.SiteCodes.length>0? scope.row.SiteCodes.join(', '):'' }}
+            {{ scope.row.SiteCodes.length > 0 ? scope.row.SiteCodes.join(', ') : '' }}
           </template>
         </el-table-column>
         <!-- 截止日期 -->
-        <el-table-column
-          prop="ExpirationDate"
-          :label="$t('trials:rpManage:table:expirationDate')"
-          sortable="custom"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="ExpirationDate" :label="$t('trials:rpManage:table:expirationDate')" sortable="custom"
+          show-overflow-tooltip>
           <template slot-scope="scope">
-            {{ scope.row.ExpirationDate?moment(scope.row.ExpirationDate).format('YYYY-MM-DD'):'' }}
+            {{ scope.row.ExpirationDate ? moment(scope.row.ExpirationDate).format('YYYY-MM-DD') : '' }}
           </template>
         </el-table-column>
         <!-- 截止访视 -->
-        <el-table-column
-          prop="SubjectVisitName"
-          :label="$t('trials:rpManage:table:expirationVisit')"
-        />
+        <el-table-column prop="SubjectVisitName" :label="$t('trials:rpManage:table:expirationVisit')" />
         <!-- 关联阅片期 -->
-        <el-table-column
-          prop="PlanCount"
-          :label="$t('trials:rpManage:table:linkedVisits')"
-          sortable="custom"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="PlanCount" :label="$t('trials:rpManage:table:linkedVisits')" sortable="custom"
+          show-overflow-tooltip>
           <template slot-scope="scope">
             <el-button type="text" :disabled="scope.row.PlanCount === 0" @click="handleRelationPR(scope.row)">
               {{ scope.row.PlanCount }}
@@ -124,12 +75,8 @@
           </template>
         </el-table-column>
         <!-- 状态 -->
-        <el-table-column
-          prop="IsTakeEffect"
-          :label="$t('trials:rpManage:table:readingStatus')"
-          sortable="custom"
-          show-overflow-tooltip
-        >
+        <el-table-column prop="IsTakeEffect" :label="$t('trials:rpManage:table:readingStatus')" sortable="custom"
+          show-overflow-tooltip>
           <template slot-scope="scope">
             <el-tag v-if="scope.row.IsTakeEffect === 0" type="info">
               {{ $fd('TakeEffect', scope.row.IsTakeEffect) }}
@@ -143,87 +90,48 @@
           </template>
         </el-table-column>
         <!-- 生效时间 -->
-        <el-table-column
-          prop="EffectOfTime"
-          :label="$t('trials:rpManage:table:effectiveTime')"
-          sortable="custom"
-          show-overflow-tooltip
-          width="120"
-        />
-        <el-table-column
-          :label="$t('common:action:action')"
-          width="200"
-        >
+        <el-table-column prop="EffectOfTime" :label="$t('trials:rpManage:table:effectiveTime')" sortable="custom"
+          show-overflow-tooltip width="120" />
+        <el-table-column :label="$t('common:action:action')" width="200">
           <template slot-scope="scope">
             <!-- 编辑 -->
-            <el-button
-              circle
-              :title="$t('trials:rpManage:action:edit')"
-              icon="el-icon-edit-outline"
-              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal"
-              @click="handleEdit(scope.row)"
-            />
+            <el-button circle :title="$t('trials:rpManage:action:edit')" icon="el-icon-tickets"
+              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal" @click="handleEdit(scope.row)" />
             <!-- 修改状态 -->
-            <el-button
-              circle
-              :title="$t('trials:rpManage:action:status')"
-              icon="el-icon-edit"
-              :disabled="scope.row.IsGlobal"
-              @click="handleEditStatus(scope.row)"
-            />
+            <el-button circle :title="$t('trials:rpManage:action:status')" icon="el-icon-edit"
+              :disabled="scope.row.IsGlobal" @click="handleEditStatus(scope.row)" />
 
             <!-- 删除 -->
-            <el-button
-              circle
-              :title="$t('trials:rpManage:action:delete')"
-              icon="el-icon-delete"
-              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal"
-              @click="handleDelete(scope.row)"
-            />
+            <el-button circle :title="$t('trials:rpManage:action:delete')" icon="el-icon-delete"
+              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal" @click="handleDelete(scope.row)" />
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
+      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
+        @pagination="getList" />
     </div>
     <!-- 新增/编辑 -->
-    <el-dialog
-      v-if="addOrEditPR.visible"
-      :visible.sync="addOrEditPR.visible"
-      :close-on-click-modal="false"
-      :before-close="beforePRClose"
-      :title="addOrEditPR.title"
-      width="80%"
-      append-to-body
-      custom-class="base-dialog-wrapper"
-    >
-      <AddOrEditPR ref="addOrEditPR" :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="addOrEditPR.visible = false" @getList="getList" />
+    <el-dialog v-if="addOrEditPR.visible" :visible.sync="addOrEditPR.visible" :close-on-click-modal="false"
+      :before-close="beforePRClose" :title="addOrEditPR.title" width="1400px" append-to-body
+      custom-class="base-dialog-wrapper" v-dialogDrag>
+      <AddOrEditPR ref="addOrEditPR" :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow"
+        :siteOptions="siteOptions" @close="() => { addOrEditPR.visible = false }" @getList="getList"></AddOrEditPR>
     </el-dialog>
 
     <!-- 状态变更 -->
-    <el-dialog
-      v-if="editStatus.visible"
-      :visible.sync="editStatus.visible"
-      :close-on-click-modal="false"
-      :title="editStatus.title"
-      width="500px"
-      append-to-body
-      custom-class="base-dialog-wrapper"
-    >
-      <EditPRStatus :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="editStatus.visible = false" @getList="refresh" />
+    <el-dialog v-if="editStatus.visible" :visible.sync="editStatus.visible" :close-on-click-modal="false"
+      :title="editStatus.title" width="500px" append-to-body custom-class="base-dialog-wrapper">
+      <EditPRStatus :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow"
+        @close="() => { editStatus.visible = false }" @getList="refresh" />
     </el-dialog>
 
     <!-- 关联阅片期 -->
-    <el-dialog
-      v-if="relationPR.visible"
-      :visible.sync="relationPR.visible"
-      :close-on-click-modal="false"
-      :title="$t('trials:rpManage:dialogTitle:linkedRP')"
-      width="1000px"
-      append-to-body
-      custom-class="base-dialog-wrapper"
-    >
-      <RelationPRList :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="relationPR.visible = false" @getList="getList" />
+    <el-dialog v-if="relationPR.visible" :visible.sync="relationPR.visible" :close-on-click-modal="false"
+      :title="$t('trials:rpManage:dialogTitle:linkedRP')" width="1000px" append-to-body
+      custom-class="base-dialog-wrapper">
+      <RelationPRList :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow"
+        @close="() => { relationPR.visible = false }" @getList="getList" />
     </el-dialog>
   </div>
 </template>
@@ -257,7 +165,13 @@ export default {
     isGlobalReading: {
       type: Boolean,
       required: true
-    }
+    },
+    siteOptions: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
   },
   data() {
     return {
@@ -351,6 +265,7 @@ export default {
       this.getList()
     },
     beforePRClose(done) {
+      return done()
       // 新增且未勾选访视时提醒
       if (this.$refs['addOrEditPR'].list.length > 0 && this.$refs['addOrEditPR'].selectArr.length === 0) {
         this.$confirm(this.$t('trials:rpManage:message:closeDialog'), {
@@ -370,6 +285,4 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/trials/trials-panel/subject/reading-period/components/ViewPeriod.vue b/src/views/trials/trials-panel/subject/reading-period/components/ViewPeriod.vue
new file mode 100644
index 00000000..e0a10fd1
--- /dev/null
+++ b/src/views/trials/trials-panel/subject/reading-period/components/ViewPeriod.vue
@@ -0,0 +1,184 @@
+<template>
+    <div class="ViewPeriod">
+        <div class="top-wrapper">
+            <el-form :inline="true">
+                <!-- 阅片期类型 -->
+                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ReadingSetType')">
+                    <el-select v-model="searchData.ReadingSetType" placeholder="" style="width:100px;" clearable>
+                        <el-option v-for="item in $d.ReadingSetType" :key="item.id" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- 阅片期名称 -->
+                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ModuleName')">
+                    <el-input v-model="searchData.ModuleName" style="width:100px;" clearable />
+                </el-form-item>
+                <!-- 中心编号 -->
+                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:TrialSiteId')">
+                    <el-select v-model="searchData.TrialSiteId" placeholder="" style="width:100px;" clearable>
+                        <el-option v-for="(site, index) of siteOptions" :key="index" :label="site.TrialSiteCode"
+                            :value="site.Id" />
+                    </el-select>
+                </el-form-item>
+                <!-- 受试者编号 -->
+                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:SubjectCode')">
+                    <el-input v-model="searchData.SubjectCode" style="width:100px;" clearable />
+                </el-form-item>
+                <!-- 来源 -->
+                <el-form-item :label="$t('trials:rpManage:viewPeriod:table:ReadModuleAddTypeEnum')">
+                    <el-select v-model="searchData.ReadModuleAddTypeEnum" placeholder="" style="width:100px;" clearable>
+                        <el-option v-for="item in $d.ReadModuleAddType" :key="item.id" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="getList">
+                        {{ $t('common:button:search') }}
+                    </el-button>
+                    <el-button type="primary" icon="el-icon-refresh-left" size="small" @click="handleReset">
+                        {{ $t('common:button:reset') }}
+                    </el-button>
+                </el-form-item>
+            </el-form>
+
+        </div>
+        <div class="main-wrapper">
+            <el-table v-loading="loading" :data="list" stripe style="width: 100%" height="400"
+                @sort-change="handleSortChange">
+                <el-table-column type="index" width="40" />
+                <!-- 阅片期类型 -->
+                <el-table-column prop="ReadingSetType" :label="$t('trials:rpManage:viewPeriod:table:ReadingSetType')"
+                    sortable="custom" show-overflow-tooltip>
+                    <template slot-scope="scope">
+                        {{ $fd('ReadingSetType', scope.row.ReadingSetType) }}
+                    </template>
+                </el-table-column>
+                <!-- 阅片期名称 -->
+                <el-table-column prop="ModuleName" :label="$t('trials:rpManage:viewPeriod:table:ModuleName')"
+                    sortable="custom" show-overflow-tooltip />
+                <!-- 中心编号 -->
+                <el-table-column prop="SiteCode" :label="$t('trials:rpManage:viewPeriod:table:SiteCode')"
+                    sortable="custom" show-overflow-tooltip />
+                <!-- 受试者编号 -->
+                <el-table-column prop="SubjectCode" :label="$t('trials:rpManage:viewPeriod:table:SubjectCode')"
+                    sortable="custom" show-overflow-tooltip />
+                <!-- 截止访视 -->
+                <el-table-column prop="VisitName" :label="$t('trials:rpManage:viewPeriod:table:VisitName')"
+                    sortable="custom" show-overflow-tooltip />
+                <!-- 最晚拍片日期 -->
+                <el-table-column prop="LatestScanDate" :label="$t('trials:rpManage:viewPeriod:table:LatestScanDate')"
+                    sortable="custom" show-overflow-tooltip />
+                <!-- 来源 -->
+                <el-table-column prop="ReadModuleAddTypeEnum"
+                    :label="$t('trials:rpManage:viewPeriod:table:ReadModuleAddTypeEnum')" sortable="custom"
+                    show-overflow-tooltip>
+                    <template slot-scope="scope">
+                        <span>{{ $fd('ReadModuleAddType', scope.row.ReadModuleAddTypeEnum) }}</span>
+                    </template>
+                </el-table-column>
+                <!-- 任务状态 -->
+                <el-table-column prop="IsGenerateTask" :label="$t('trials:rpManage:viewPeriod:table:IsGenerateTask')"
+                    show-overflow-tooltip>
+                    <template slot-scope="scope">
+                        <span>{{ $fd('TrainingStatusEnum', scope.row.IsGenerateTask) }}</span>
+                    </template>
+                </el-table-column>
+                <!-- 生成时间 -->
+                <el-table-column prop="GenerateTaskTime"
+                    :label="$t('trials:rpManage::viewPeriod:table:GenerateTaskTime')" show-overflow-tooltip />
+            </el-table>
+            <!-- 分页组件 -->
+            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
+                @pagination="getList" />
+        </div>
+    </div>
+</template>
+<script>
+import { getReadModulePageList } from '@/api/trials'
+import Pagination from '@/components/Pagination'
+const searchDataDefault = () => {
+    return {
+        TrialId: null,
+        TrialSiteId: null,
+        TrialReadingCriterionId: null,
+        ModuleName: null,
+        SubjectCode: null,
+        ReadingSetType: null,
+        VisitName: null,
+        ReadModuleAddTypeEnum: null,
+        PageIndex: 1,
+        PageSize: 20,
+        Asc: false,
+        SortField: ''
+    }
+}
+export default {
+    name: "ViewPeriod",
+    components: {
+        Pagination
+    },
+    props: {
+        siteOptions: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        TrialReadingCriterionId: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            searchData: searchDataDefault(),
+            list: [],
+            total: 0,
+            loading: false,
+        }
+    },
+    mounted() {
+        this.getList()
+    },
+    methods: {
+        async getList() {
+            try {
+                this.searchData.TrialId = this.$route.query.TrialId
+                this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId
+                this.loading = true
+                let res = await getReadModulePageList(this.searchData)
+                this.loading = false
+                if (res.IsSuccess) {
+                    this.list = res.Result.CurrentPageData
+                    this.total = res.Result.TotalCount
+                }
+            } catch (err) {
+                this.loading = false
+                console.log(err)
+            }
+        },
+        handleReset() {
+            this.searchData = searchDataDefault()
+            this.getList()
+        },
+        // 排序
+        handleSortChange(column) {
+            if (column.order === 'ascending') {
+                this.searchData.Asc = true
+            } else {
+                this.searchData.Asc = false
+            }
+            this.searchData.SortField = column.prop
+            this.searchData.PageIndex = 1
+            this.getList()
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.ViewPeriod {
+    margin-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/subject/reading-period/index.vue b/src/views/trials/trials-panel/subject/reading-period/index.vue
index 85c86e68..6b37f896 100644
--- a/src/views/trials/trials-panel/subject/reading-period/index.vue
+++ b/src/views/trials/trials-panel/subject/reading-period/index.vue
@@ -1,216 +1,103 @@
 <template>
   <BaseContainer class="reading-period">
     <el-tabs v-model="TrialReadingCriterionId" type="border-card">
-      <el-tab-pane
-        v-for="criterion of trialCriterionList"
-        :key="criterion.TrialReadingCriterionId"
-        :label="criterion.TrialReadingCriterionName"
-        :name="criterion.TrialReadingCriterionId"
-      >
-        <div
-          v-if="TrialReadingCriterionId === criterion.TrialReadingCriterionId"
-        >
+      <el-tab-pane v-for="criterion of trialCriterionList" :key="criterion.TrialReadingCriterionId"
+        :label="criterion.TrialReadingCriterionName" :name="criterion.TrialReadingCriterionId">
+        <div v-if="TrialReadingCriterionId === criterion.TrialReadingCriterionId">
           <div slot="search-container">
             <el-form :inline="true">
               <el-form-item :label="$t('trials:readingPeriod:table:siteCode')">
                 <!-- 中心编号 -->
-                <el-select
-                  v-model="searchData.TrialSiteCode"
-                  clearable
-                  filterable
-                  style="width: 120px"
-                >
-                  <el-option
-                    v-for="(site, index) of siteOptions"
-                    :key="index"
-                    :label="site.TrialSiteCode"
-                    :value="site.TrialSiteCode"
-                  />
+                <el-select v-model="searchData.TrialSiteCode" clearable filterable style="width: 120px">
+                  <el-option v-for="(site, index) of siteOptions" :key="index" :label="site.TrialSiteCode"
+                    :value="site.TrialSiteCode" />
                 </el-select>
               </el-form-item>
               <!-- 受试者编号 -->
-              <el-form-item
-                :label="$t('trials:readingPeriod:table:subjectCode')"
-              >
-                <el-input
-                  v-model="searchData.SubjectCode"
-                  style="width: 100px"
-                  clearable
-                />
+              <el-form-item :label="$t('trials:readingPeriod:table:subjectCode')">
+                <el-input v-model="searchData.SubjectCode" style="width: 100px" clearable />
               </el-form-item>
               <!-- 阅片类型 -->
-              <el-form-item
-                :label="$t('trials:readingPeriod:table:readingType')"
-              >
-                <el-select
-                  v-model="searchData.ModuleType"
-                  clearable
-                  style="width: 120px"
-                >
-                  <el-option
-                    v-for="item of $d.ModuleTypeEnum"
-                    :key="item.value"
-                    :value="item.value"
-                    :label="item.label"
-                  />
+              <el-form-item :label="$t('trials:readingPeriod:table:readingType')">
+                <el-select v-model="searchData.ModuleType" clearable style="width: 120px">
+                  <el-option v-for="item of $d.ModuleTypeEnum" :key="item.value" :value="item.value"
+                    :label="item.label" />
                 </el-select>
               </el-form-item>
               <!-- 进度 -->
-              <el-form-item
-                :label="$t('trials:readingPeriod:table:readingSchedule')"
-              >
-                <el-select
-                  v-model="searchData.ReadingStatus"
-                  clearable
-                  style="width: 120px"
-                >
-                  <el-option
-                    v-for="item of $d.ReadModuleEnum"
-                    :key="item.value"
-                    :value="item.value"
-                    :label="item.label"
-                  />
+              <el-form-item :label="$t('trials:readingPeriod:table:readingSchedule')">
+                <el-select v-model="searchData.ReadingStatus" clearable style="width: 120px">
+                  <el-option v-for="item of $d.ReadModuleEnum" :key="item.value" :value="item.value"
+                    :label="item.label" />
                 </el-select>
               </el-form-item>
               <!-- 阅片名称 -->
-              <el-form-item
-                :label="$t('trials:readingPeriod:table:readingName')"
-              >
-                <el-input
-                  v-model="searchData.Name"
-                  style="width: 100px"
-                  clearable
-                />
+              <el-form-item :label="$t('trials:readingPeriod:table:readingName')">
+                <el-input v-model="searchData.Name" style="width: 100px" clearable />
               </el-form-item>
 
-              <el-form-item
-                :label="$t('trials:readingPeriod:table:completeClinicalData')"
-              >
-                <el-select
-                  v-model="searchData.CompleteClinicalData"
-                  clearable
-                  style="width: 120px"
-                >
-                  <el-option
-                    v-for="item of $d.CompleteClinicalDataEnum"
-                    :key="item.value"
-                    :value="item.value"
-                    :label="item.label"
-                  />
+              <el-form-item :label="$t('trials:readingPeriod:table:completeClinicalData')">
+                <el-select v-model="searchData.CompleteClinicalData" clearable style="width: 120px">
+                  <el-option v-for="item of $d.CompleteClinicalDataEnum" :key="item.value" :value="item.value"
+                    :label="item.label" />
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  @click="handleSearch"
-                >
+                <el-button type="primary" icon="el-icon-search" @click="handleSearch">
                   {{ $t('common:button:search') }}
                 </el-button>
-                <el-button
-                  type="primary"
-                  icon="el-icon-refresh-left"
-                  @click="handleReset"
-                >
+                <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
                   {{ $t('common:button:reset') }}
                 </el-button>
                 <!--导出受试者进展表-->
-                <el-button
-                  type="primary"
-                  icon="el-icon-download"
-                  @click="handleExportSubject"
-                >
+                <el-button type="primary" icon="el-icon-download" @click="handleExportSubject">
                   {{ $t('trials:readingPeriod:buttton:exportSubjectTbl') }}
                 </el-button>
                 <!--导出阅片期信息表-->
-                <el-button
-                  type="primary"
-                  icon="el-icon-download"
-                  @click="handleExportPeriod"
-                >
+                <el-button type="primary" icon="el-icon-download" @click="handleExportPeriod">
                   {{ $t('trials:readingPeriod:buttton:exportPeriodTbl') }}
                 </el-button>
                 <!-- 阅片期管理 -->
-                <el-button
-                  v-if="
-                    ReadingInfoSignTime &&
-                    (otherInfo.IsClinicalReading || otherInfo.IsReadingPeriod)
-                  "
-                  v-hasPermi="[
-                    'trials:trials-panel:subject:readingPeriod:edit',
-                  ]"
-                  type="primary"
-                  icon="el-icon-edit-outline"
-                  @click="handleReadingPeriod"
-                >
+                <el-button v-if="
+                  ReadingInfoSignTime &&
+                  (otherInfo.IsClinicalReading || otherInfo.IsReadingPeriod)
+                " v-hasPermi="[
+                  'trials:trials-panel:subject:readingPeriod:edit',
+                ]" type="primary" icon="el-icon-edit-outline" @click="handleReadingPeriod">
                   {{ $t('trials:readingPeriod:button:rpManage') }}
                 </el-button>
               </el-form-item>
             </el-form>
           </div>
           <div slot="main-container">
-            <el-table
-              ref="myTable"
-              v-adaptive="{ bottomOffset: 135 }"
-              v-loading="loading"
-              :data="list"
-              stripe
-              height="100"
-              :header-row-class-name="headerRowStyle"
-              :cell-style="cellStyle"
-              @sort-change="handleSortChange"
-            >
+            <el-table ref="myTable" v-adaptive="{ bottomOffset: 135 }" v-loading="loading" :data="list" stripe
+              height="100" :header-row-class-name="headerRowStyle" :cell-style="cellStyle"
+              @sort-change="handleSortChange">
               <el-table-column type="index" width="40" fixed="left" />
               <!-- 中心编号 -->
-              <el-table-column
-                prop="TrialSiteCode"
-                :label="$t('trials:readingPeriod:table:siteCode')"
-                min-width="110"
-                fixed="left"
-                sortable="custom"
-                show-overflow-tooltip
-              />
+              <el-table-column prop="TrialSiteCode" :label="$t('trials:readingPeriod:table:siteCode')" min-width="110"
+                fixed="left" sortable="custom" show-overflow-tooltip />
               <!-- 受试者编号 -->
-              <el-table-column
-                prop="SubjectCode"
-                :label="$t('trials:readingPeriod:table:subjectCode')"
-                min-width="120"
-                fixed="left"
-                sortable="custom"
-                show-overflow-tooltip
-              />
+              <el-table-column prop="SubjectCode" :label="$t('trials:readingPeriod:table:subjectCode')" min-width="120"
+                fixed="left" sortable="custom" show-overflow-tooltip />
               <!-- 阅片计划 -->
-              <el-table-column
-                :label="$t('trials:readingPeriod:table:readingPlan')"
-                align="center"
-                min-width="100"
-              >
-                <el-table-column
-                  v-for="i in maxLength"
-                  :key="`${i}`"
-                  :prop="`Plan${i - 1}`"
-                  label=""
-                  width="240"
-                >
+              <el-table-column :label="$t('trials:readingPeriod:table:readingPlan')" align="center" min-width="100">
+                <el-table-column v-for="i in maxLength" :key="`${i}`" :prop="`Plan${i - 1}`" label="" width="240">
                   <template slot-scope="scope">
                     <div v-if="i <= scope.row.Data.length">
                       <!--                      <div style="">-->
-                      <div
-                        style="
+                      <div style="
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
                           display: flex;
                           justify-content: space-between;
-                        "
-                      >
+                        ">
                         <div style="font-size: 16px; font-weight: 900">
                           {{ scope.row.Data[i - 1].Name }}
                         </div>
                         <div>
-                          <span
-                            v-if="scope.row.Data[i - 1].IsEnrollmentConfirm"
-                          >
+                          <span v-if="scope.row.Data[i - 1].IsEnrollmentConfirm">
                             | {{ $t('trials:readingPeriod:table:enroll') }}
                           </span>
                           <span v-if="scope.row.Data[i - 1].PDState">
@@ -224,15 +111,13 @@
                           </span>
                         </div>
                       </div>
-                      <div
-                        style="
+                      <div style="
                           display: flex;
                           justify-content: space-between;
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
-                        "
-                      >
+                        ">
                         <div>
                           {{
                             $fd(
@@ -241,21 +126,17 @@
                             )
                           }}
                         </div>
-                        <div
-                          style="
+                        <div style="
                             white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             width: 110px;
                             text-align: right;
-                          "
-                          :title="
-                            $fd(
-                              'ReadModuleEnum',
-                              scope.row.Data[i - 1].ReadingStatus
-                            )
-                          "
-                        >
+                          " :title="$fd(
+                            'ReadModuleEnum',
+                            scope.row.Data[i - 1].ReadingStatus
+                          )
+                            ">
                           {{
                             $fd(
                               'ReadModuleEnum',
@@ -264,16 +145,13 @@
                           }}
                         </div>
                       </div>
-                      <div
-                        v-if="scope.row.Data[i - 1].ModuleType === 1"
-                        style="
+                      <div v-if="scope.row.Data[i - 1].ModuleType === 1" style="
                           display: flex;
                           justify-content: space-between;
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
-                        "
-                      >
+                        ">
                         <!-- 上一访视 -->
                         <div>
                           {{ $t('trials:readingPeriod:table:lastVisit') }}
@@ -282,36 +160,30 @@
                           {{ scope.row.Data[i - 1].OutPlanPreviousVisitName }}
                         </div>
                       </div>
-                      <div
-                        v-if="
-                          scope.row.Data[i - 1].ModuleType === 2 ||
-                          scope.row.Data[i - 1].ModuleType === 3 ||
-                          scope.row.Data[i - 1].ModuleType === 5
-                        "
-                        style="
+                      <div v-if="
+                        scope.row.Data[i - 1].ModuleType === 2 ||
+                        scope.row.Data[i - 1].ModuleType === 3 ||
+                        scope.row.Data[i - 1].ModuleType === 5
+                      " style="
                           display: flex;
                           justify-content: space-between;
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
-                        "
-                      >
+                        ">
                         <!-- 截止访视： -->
                         <div>
                           {{ $t('trials:readingPeriod:table:deadlineVisit') }}
                         </div>
                         <div>{{ scope.row.Data[i - 1].CutOffVisitName }}</div>
                       </div>
-                      <div
-                        v-if="scope.row.Data[i - 1].ModuleType === 4"
-                        style="
+                      <div v-if="scope.row.Data[i - 1].ModuleType === 4" style="
                           display: flex;
                           justify-content: space-between;
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
-                        "
-                      >
+                        ">
                         <!-- 对应阅片期： -->
                         <div>
                           {{
@@ -320,63 +192,47 @@
                         </div>
                         <div>{{ scope.row.Data[i - 1].ReadModuleName }}</div>
                       </div>
-                      <div
-                        v-if="otherInfo.ExistClinicalData"
-                        style="
+                      <div v-if="otherInfo.ExistClinicalData" style="
                           display: flex;
                           justify-content: space-between;
                           border-bottom: 1px solid #d9d9d9;
                           margin-bottom: 8px;
                           padding-bottom: 8px;
-                        "
-                      >
-                        <div
-                          style="
+                        ">
+                        <div style="
                             display: flex;
                             justify-content: space-between;
                             width: 100%;
-                          "
-                        >
+                          ">
                           <!-- 临床资料 -->
                           <div>
-                            <el-tooltip
-                              v-if="
-                                scope.row.Data[i - 1].CompleteClinicalData === 0
-                              "
-                              class="item"
-                              effect="dark"
-                              :content="
-                                $t(
-                                  'trials:readingPeriod:table:clinicalDataNotComplete'
-                                )
-                              "
-                              placement="bottom"
-                            >
+                            <el-tooltip v-if="
+                              scope.row.Data[i - 1].CompleteClinicalData === 0
+                            " class="item" effect="dark" :content="$t(
+                              'trials:readingPeriod:table:clinicalDataNotComplete'
+                            )
+                              " placement="bottom">
                               <i class="el-icon-warning" style="color: red" />
                             </el-tooltip>
                             {{ $t('trials:readingPeriod:table:clinicalInfo2') }}
                           </div>
-                          <el-link
-                            type="danger"
-                            v-if="
-                              (scope.row.Data[i - 1].IsVisit &&
-                                otherInfo.IsExistsSubjectClinicalData &&
-                                scope.row.Data[i - 1].IsBaseLine) ||
-                              (scope.row.Data[i - 1].IsVisit &&
-                                otherInfo.IsExistsVisitClinicalData) ||
-                              (scope.row.Data[i - 1].IsVisit &&
-                                otherInfo.IsExistsStudyClinicalData) ||
-                              (!scope.row.Data[i - 1].IsVisit &&
-                                otherInfo.IsExistsReadingClinicalData &&
-                                scope.row.Data[i - 1].ModuleType === 3) ||
-                              (!scope.row.Data[i - 1].IsVisit &&
-                                otherInfo.IsExistsOncologyReadClinicalData &&
-                                scope.row.Data[i - 1].ModuleType === 5)
-                            "
-                            @click="
-                              handleView(scope.row, scope.row.Data[i - 1])
-                            "
-                          >
+                          <el-link type="danger" v-if="
+                            (scope.row.Data[i - 1].IsVisit &&
+                              otherInfo.IsExistsSubjectClinicalData &&
+                              scope.row.Data[i - 1].IsBaseLine) ||
+                            (scope.row.Data[i - 1].IsVisit &&
+                              otherInfo.IsExistsVisitClinicalData) ||
+                            (scope.row.Data[i - 1].IsVisit &&
+                              otherInfo.IsExistsStudyClinicalData) ||
+                            (!scope.row.Data[i - 1].IsVisit &&
+                              otherInfo.IsExistsReadingClinicalData &&
+                              scope.row.Data[i - 1].ModuleType === 3) ||
+                            (!scope.row.Data[i - 1].IsVisit &&
+                              otherInfo.IsExistsOncologyReadClinicalData &&
+                              scope.row.Data[i - 1].ModuleType === 5)
+                          " @click="
+                            handleView(scope.row, scope.row.Data[i - 1])
+                            ">
                             {{ $t('trials:readingPeriod:button:view') }}
                           </el-link>
                           <span v-else>{{
@@ -385,33 +241,23 @@
                         </div>
                       </div>
                       <div>
-                        <el-link
-                          style="color: #428bca; margin-right: 5px"
-                          @click="
-                            handleDetail(scope.row, scope.row.Data[i - 1])
-                          "
-                        >
+                        <el-link style="color: #428bca; margin-right: 5px" @click="
+                          handleDetail(scope.row, scope.row.Data[i - 1])
+                          ">
                           {{ $t('trials:readingPeriod:button:detail') }}
                         </el-link>
-                        <el-link
-                          style="color: #428bca; margin-right: 5px"
+                        <el-link style="color: #428bca; margin-right: 5px"
                           v-if="scope.row.Data[i - 1].IsCanChangeCutOffVisit"
-                          @click="handleEdit(scope.row, scope.row.Data[i - 1])"
-                        >
+                          @click="handleEdit(scope.row, scope.row.Data[i - 1])">
                           {{ $t('common:button:edit') }}
                         </el-link>
-                        <el-link
-                          style="color: #428bca; margin-right: 5px"
-                          v-if="
-                            (scope.row.Data[i - 1].ModuleType === 3 ||
-                              scope.row.Data[i - 1].ModuleType === 5) &&
-                            scope.row.Data[i - 1].ReadingStatus < 4
-                          "
-                          v-hasPermi="[
-                            'trials:trials-panel:subject:readingPeriod:edit',
-                          ]"
-                          @click="handleDelete(scope.row.Data[i - 1])"
-                        >
+                        <el-link style="color: #428bca; margin-right: 5px" v-if="
+                          (scope.row.Data[i - 1].ModuleType === 3 ||
+                            scope.row.Data[i - 1].ModuleType === 5) &&
+                          scope.row.Data[i - 1].ReadingStatus < 4
+                        " v-hasPermi="[
+                          'trials:trials-panel:subject:readingPeriod:edit',
+                        ]" @click="handleDelete(scope.row.Data[i - 1])">
                           {{ $t('trials:readingPeriod:button:delete') }}
                         </el-link>
                       </div>
@@ -419,127 +265,79 @@
                   </template>
                 </el-table-column>
               </el-table-column>
-              <el-table-column
-                v-if="
-                  hasPermi([
-                    'trials:trials-panel:subject:readingPeriod:edit',
-                  ]) && ReadingInfoSignTime
-                "
-                :fixed="
-                  (otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
-                  ReadingInfoSignTime &&
-                  hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])
-                    ? 'right'
-                    : false
-                "
-                :label="
-                  (otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
-                  ReadingInfoSignTime &&
-                  hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])
-                    ? $t('common:action:action')
-                    : ''
-                "
-                :width="
-                  (otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
+              <el-table-column v-if="
+                hasPermi([
+                  'trials:trials-panel:subject:readingPeriod:edit',
+                ]) && ReadingInfoSignTime
+              " :fixed="(otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
+                ReadingInfoSignTime &&
+                hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])
+                ? 'right'
+                : false
+                " :label="(otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
                   ReadingInfoSignTime &&
                   hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])
+                  ? $t('common:action:action')
+                  : ''
+                  " :width="(otherInfo.IsReadingPeriod || otherInfo.IsClinicalReading) &&
+                    ReadingInfoSignTime &&
+                    hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])
                     ? '150px'
                     : '80px'
-                "
-              >
+                    ">
                 <template slot-scope="scope">
-                  <el-button
-                    v-if="otherInfo.IsReadingPeriod"
-                    circle
-                    :title="
-                      $t('trials:readingPeriod:buttton:addSubjectImageRP')
-                    "
-                    icon="el-icon-plus"
-                    @click="handleAdd(scope.row, 0)"
-                  />
-                  <el-button
-                    v-if="isClinicalReading"
-                    circle
-                    :title="
-                      $t('trials:readingPeriod:buttton:addSubjectOncologyRP')
-                    "
-                    icon="el-icon-plus"
-                    @click="handleAdd(scope.row, 1)"
-                  />
+                  <el-button v-if="otherInfo.IsReadingPeriod" circle :title="$t('trials:readingPeriod:buttton:addSubjectImageRP')
+                    " icon="el-icon-plus" @click="handleAdd(scope.row, 0)" />
+                  <el-button v-if="isClinicalReading" circle :title="$t('trials:readingPeriod:buttton:addSubjectOncologyRP')
+                    " icon="el-icon-plus" @click="handleAdd(scope.row, 1)" />
                 </template>
               </el-table-column>
             </el-table>
             <!-- 分页组件 -->
-            <pagination
-              class="page"
-              :total="total"
-              :page.sync="searchData.PageIndex"
-              :limit.sync="searchData.PageSize"
-              @pagination="getList"
-            />
+            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
+              @pagination="getList" />
             <!-- 详情 -->
-            <el-dialog
-              v-if="dialogVisible"
-              :title="$t('trials:rpDetail:dialogTitle:detail')"
-              :visible.sync="dialogVisible"
-              width="600px"
-              :close-on-click-modal="false"
-            >
+            <el-dialog v-if="dialogVisible" :title="$t('trials:rpDetail:dialogTitle:detail')"
+              :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
               <el-descriptions :column="2" border>
                 <!-- 阅片期名称 -->
-                <el-descriptions-item
-                  :label="$t('trials:readingPeriod:table:readingName')"
-                >
+                <el-descriptions-item :label="$t('trials:readingPeriod:table:readingName')">
                   {{ currentData.Name }}
                 </el-descriptions-item>
                 <!-- 阅片期类型 -->
-                <el-descriptions-item
-                  :label="$t('trials:readingPeriod:table:readingType')"
-                >
+                <el-descriptions-item :label="$t('trials:readingPeriod:table:readingType')">
                   {{ $fd('ModuleTypeEnum', currentData.ModuleType) }}
                 </el-descriptions-item>
                 <!-- 是否加急 -->
                 <!-- <el-descriptions-item label="是否加急"> <el-tag size="small">{{ $fd('YesOrNo',currentData.IsUrgent) }}</el-tag></el-descriptions-item> -->
                 <!-- 进度 -->
-                <el-descriptions-item
-                  :label="$t('trials:readingPeriod:table:readingSchedule')"
-                >
+                <el-descriptions-item :label="$t('trials:readingPeriod:table:readingSchedule')">
                   {{ $fd('ReadModuleEnum', currentData.ReadingStatus) }}
                 </el-descriptions-item>
-                <el-descriptions-item
-                  v-if="currentData.CutOffVisitName"
-                  :label="$t('trials:readingPeriod:table:deadlineVisit')"
-                >
+                <el-descriptions-item v-if="currentData.CutOffVisitName"
+                  :label="$t('trials:readingPeriod:table:deadlineVisit')">
                   {{ currentData.CutOffVisitName }}
                 </el-descriptions-item>
-                <el-descriptions-item
-                  v-if="currentData.OutPlanPreviousVisitName"
-                  :label="$t('trials:readingPeriod:table:lastVisit')"
-                >
+                <el-descriptions-item v-if="currentData.OutPlanPreviousVisitName"
+                  :label="$t('trials:readingPeriod:table:lastVisit')">
                   {{ currentData.OutPlanPreviousVisitName }}
                 </el-descriptions-item>
-                <el-descriptions-item
-                  v-if="currentData.ReadModuleName"
-                  :label="$t('trials:readingPeriod:table:correspondVisit')"
-                >
+                <el-descriptions-item v-if="currentData.ReadModuleName"
+                  :label="$t('trials:readingPeriod:table:correspondVisit')">
                   {{ currentData.ReadModuleName }}
                 </el-descriptions-item>
                 <!-- 临床资料 -->
-                <el-descriptions-item
-                  v-if="otherInfo.ExistClinicalData"
-                  :label="$t('trials:readingPeriod:table:clinicalInfo')"
-                >
-                  <template
-                    v-if="
-                      (currentData.IsVisit &&
-                        otherInfo.IsExistsSubjectClinicalData &&
-                        currentData.IsBaseLine) ||
-                      (currentData.IsVisit &&
-                        otherInfo.IsExistsVisitClinicalData) ||
-                      (!currentData.IsVisit &&
-                        otherInfo.IsExistsReadingClinicalData)
-                    "
-                  >
+                <el-descriptions-item v-if="otherInfo.ExistClinicalData"
+                  :label="$t('trials:readingPeriod:table:clinicalInfo')">
+                  <template v-if="
+                    (currentData.IsVisit &&
+                      otherInfo.IsExistsSubjectClinicalData &&
+                      currentData.IsBaseLine) ||
+                    (currentData.IsVisit &&
+                      otherInfo.IsExistsVisitClinicalData) ||
+                    (!currentData.IsVisit &&
+                      otherInfo.IsExistsReadingClinicalData)
+                  ">
                     <el-link @click="view">{{
                       $t('trials:readingPeriod:button:view')
                     }}</el-link>
@@ -549,86 +347,49 @@
                   </template>
                 </el-descriptions-item>
                 <!-- 当前干系人 -->
-                <el-descriptions-item
-                  :label="$t('trials:readingPeriod:table:stakeholder')"
-                  :span="2"
-                >
+                <el-descriptions-item :label="$t('trials:readingPeriod:table:stakeholder')" :span="2">
                   {{ currentData.Stakeholders }}
                 </el-descriptions-item>
               </el-descriptions>
             </el-dialog>
 
             <!-- 设置阅片期 -->
-            <el-dialog
-              v-if="readPeriodVisible"
-              :title="$t('trials:rpManage:dialogTitle:setRP')"
-              :visible.sync="readPeriodVisible"
-              width="1400px"
-              :close-on-click-modal="false"
-            >
-              <ReadingPeriod
-                :trial-id="trialId"
-                :trial-reading-criterion-id="TrialReadingCriterionId"
-                :is-clinical-reading="isClinicalReading"
-                :is-global-reading="otherInfo.IsReadingPeriod"
-                @getList="getList"
-              />
+            <el-dialog v-if="readPeriodVisible" :title="$t('trials:rpManage:dialogTitle:setRP')"
+              :visible.sync="readPeriodVisible" width="1400px" :close-on-click-modal="false" v-dialogDrag>
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane :label="$t('trials:rpManage:tab:title:ViewPeriod')" name="ViewPeriod">
+                  <ViewPeriod v-if="activeName === 'ViewPeriod'" :siteOptions="siteOptions"
+                    :TrialReadingCriterionId="TrialReadingCriterionId" />
+                </el-tab-pane>
+                <el-tab-pane :label="$t('trials:rpManage:tab:title:ReadingPeriod')" name="ReadingPeriod">
+                  <ReadingPeriod v-if="activeName === 'ReadingPeriod'" :trial-id="trialId" :siteOptions="siteOptions"
+                    :trial-reading-criterion-id="TrialReadingCriterionId" :is-clinical-reading="isClinicalReading"
+                    :is-global-reading="otherInfo.IsReadingPeriod" @getList="getList" />
+                </el-tab-pane>
+
+              </el-tabs>
             </el-dialog>
 
             <!-- 临床资料 -->
-            <el-dialog
-              v-if="clinicalDataVisible"
-              :title="`${$t(
-                'trials:readingPeriod:dialogTitle:clinicalData'
-              )}（${currentData.SubjectCode}|${currentData.Name}|${
-                currentData.CriterionName
-              }）`"
-              :visible.sync="clinicalDataVisible"
-              :close-on-click-modal="false"
-              append-to-body
-              width="70%"
-            >
-              <ClinicalData
-                :trial-reading-criterion-id="TrialReadingCriterionId"
-                :trial-id="trialId"
-                :data="currentData"
-                @getList="getList"
-              />
+            <el-dialog v-if="clinicalDataVisible" :title="`${$t(
+              'trials:readingPeriod:dialogTitle:clinicalData'
+            )}（${currentData.SubjectCode}|${currentData.Name}|${currentData.CriterionName
+              }）`" :visible.sync="clinicalDataVisible" :close-on-click-modal="false" append-to-body width="70%">
+              <ClinicalData :trial-reading-criterion-id="TrialReadingCriterionId" :trial-id="trialId"
+                :data="currentData" @getList="getList" />
             </el-dialog>
             <!-- 添加受试者阅片期 -->
-            <el-dialog
-              v-if="subjectPeriod.visible"
-              :title="subjectPeriod.title"
-              :visible.sync="subjectPeriod.visible"
-              width="500px"
-              custom-class="base-dialog-wrapper"
-              :close-on-click-modal="false"
-            >
-              <SubjectPR
-                :trial-reading-criterion-id="TrialReadingCriterionId"
-                :trial-id="trialId"
-                :data="param"
-                @close="subjectPeriod.visible = false"
-                @getList="getList"
-              />
+            <el-dialog v-if="subjectPeriod.visible" :title="subjectPeriod.title" :visible.sync="subjectPeriod.visible"
+              width="500px" custom-class="base-dialog-wrapper" :close-on-click-modal="false">
+              <SubjectPR :trial-reading-criterion-id="TrialReadingCriterionId" :trial-id="trialId" :data="param"
+                @close="() => { subjectPeriod.visible = false }" @getList="getList" />
             </el-dialog>
             <!-- 编辑受试者阅片期 -->
-            <el-dialog
-              v-if="subjectPeriodEdit.visible"
-              :title="subjectPeriodEdit.title"
-              :visible.sync="subjectPeriodEdit.visible"
-              width="500px"
-              custom-class="base-dialog-wrapper"
-              :close-on-click-modal="false"
-            >
-              <SubjectPR
-                :type="'edit'"
-                :trial-reading-criterion-id="TrialReadingCriterionId"
-                :trial-id="trialId"
-                :data="param"
-                @close="subjectPeriodEdit.visible = false"
-                @getList="getList"
-              />
+            <el-dialog v-if="subjectPeriodEdit.visible" :title="subjectPeriodEdit.title"
+              :visible.sync="subjectPeriodEdit.visible" width="500px" custom-class="base-dialog-wrapper"
+              :close-on-click-modal="false">
+              <SubjectPR :type="'edit'" :trial-reading-criterion-id="TrialReadingCriterionId" :trial-id="trialId"
+                :data="param" @close="() => { subjectPeriodEdit.visible = false }" @getList="getList" />
             </el-dialog>
           </div>
         </div>
@@ -651,6 +412,7 @@ import {
 import BaseContainer from '@/components/BaseContainer'
 import Pagination from '@/components/Pagination'
 import ReadingPeriod from './components/RPList'
+import ViewPeriod from './components/ViewPeriod'
 import ClinicalData from './components/ClinicalData'
 import SubjectPR from './components/AddSubjectRP'
 const searchDataDefault = () => {
@@ -672,6 +434,7 @@ export default {
     BaseContainer,
     Pagination,
     ReadingPeriod,
+    ViewPeriod,
     ClinicalData,
     SubjectPR,
   },
@@ -702,6 +465,7 @@ export default {
       trialCriterionList: [],
       TrialReadingCriterionId: '0',
       ReadingInfoSignTime: null,
+      activeName: 'ReadingPeriod', // ViewPeriod ReadingPeriod
     }
   },
   watch: {
@@ -719,6 +483,9 @@ export default {
     this.getTrialCriterionList()
   },
   methods: {
+    handleClick(a) {
+      this.activeName = a.name
+    },
     getList() {
       this.searchData.TrialId = this.$route.query.trialId
       this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId
@@ -827,13 +594,13 @@ export default {
     },
     handleExportSubject() {
       getSubjectProgress_Export(this.searchData)
-        .then((res) => {})
-        .catch(() => {})
+        .then((res) => { })
+        .catch(() => { })
     },
     handleExportPeriod() {
       getReadingPeriodList_Export(this.searchData)
-        .then((res) => {})
-        .catch(() => {})
+        .then((res) => { })
+        .catch(() => { })
     },
     getTrialCriterionList() {
       getTrialCriterionList(this.trialId, false)
@@ -842,7 +609,7 @@ export default {
           this.TrialReadingCriterionId =
             this.trialCriterionList[0].TrialReadingCriterionId
         })
-        .catch(() => {})
+        .catch(() => { })
     },
     handleSearch() {
       this.searchData.PageIndex = 1
@@ -926,12 +693,15 @@ export default {
     padding: 0px !important;
   }
 }
+
 ::v-deep .hidden-row {
   display: none;
 }
+
 ::v-deep .el-dialog__body {
   padding: 0px 20px;
 }
+
 ::v-deep .el-dialog__header {
   padding: 10px 20px;
 }