diff --git a/src/api/trials.js b/src/api/trials.js
index a07d282a..d3e0b4c0 100644
--- a/src/api/trials.js
+++ b/src/api/trials.js
@@ -286,10 +286,11 @@ export function trialSiteUserSummaryListExport(param) {
   })
 }
 
-export function getVisitStageList(trialId) {
+export function getVisitStageList(data) {
   return request({
-    url: `/visitPlan/getVisitStageList/${trialId}`,
-    method: 'get'
+    url: `/visitPlan/getVisitStageList`,
+    method: 'post',
+    data
   })
 }
 
diff --git a/src/views/trials/trials-panel/setting/visit-plan/index.vue b/src/views/trials/trials-panel/setting/visit-plan/index.vue
index 783c2bd4..e2cfab9a 100644
--- a/src/views/trials/trials-panel/setting/visit-plan/index.vue
+++ b/src/views/trials/trials-panel/setting/visit-plan/index.vue
@@ -1,8 +1,7 @@
 <template>
   <BaseContainer v-loading="listLoading">
     <template slot="search-container">
-
-      <span style="margin-left:auto;">
+      <span style="margin-left: auto">
         <!-- Add -->
         <el-button
           v-hasPermi="['trials:trials-panel:setting:visit-plan:add']"
@@ -48,11 +47,11 @@
     </template>
     <template slot="main-container">
       <el-table
-        v-adaptive="{bottomOffset:60}"
-
+        v-adaptive="{ bottomOffset: 60 }"
         :data="list"
         height="100"
         stripe
+        @sort-change="handleSortByColumn"
       >
         <!-- Visit Name -->
         <el-table-column
@@ -60,6 +59,7 @@
           :label="$t('trials:visitPlan:table:visitName')"
           show-overflow-tooltip
           min-width="60"
+          sortable="custom"
         />
         <!-- 是否基线 -->
         <el-table-column
@@ -67,6 +67,7 @@
           :label="$t('trials:visitPlan:table:isBaseLine')"
           show-overflow-tooltip
           min-width="60"
+          sortable="custom"
         >
           <template slot-scope="scope">
             {{ $fd('YesOrNo', scope.row.IsBaseLine) }}
@@ -85,6 +86,7 @@
           :label="$t('trials:visitPlan:table:viistNum')"
           show-overflow-tooltip
           min-width="60"
+          sortable="custom"
         />
         <!-- 访视间隔 -->
         <el-table-column
@@ -92,6 +94,7 @@
           :label="$t('trials:visitPlan:table:viistDay')"
           show-overflow-tooltip
           min-width="60"
+          sortable="custom"
         />
         <!-- 窗口 -->
         <el-table-column
@@ -102,8 +105,19 @@
           min-width="60"
         >
           <template slot-scope="scope">
-            <span v-show="scope.row.VisitWindowLeft!==0 || scope.row.VisitWindowRight!==0">
-              {{ `${scope.row.VisitWindowLeft} ${$t('trials:visitPlan:table:day')} ~ ${scope.row.VisitWindowRight} ${$t('trials:visitPlan:table:day')}` }}
+            <span
+              v-show="
+                scope.row.VisitWindowLeft !== 0 ||
+                scope.row.VisitWindowRight !== 0
+              "
+            >
+              {{
+                `${scope.row.VisitWindowLeft} ${$t(
+                  'trials:visitPlan:table:day'
+                )} ~ ${scope.row.VisitWindowRight} ${$t(
+                  'trials:visitPlan:table:day'
+                )}`
+              }}
             </span>
           </template>
         </el-table-column>
@@ -115,9 +129,12 @@
           min-width="80"
         >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.IsConfirmed" type="primary">{{ $fd('YesOrNo', scope.row.IsConfirmed) }}</el-tag>
-            <el-tag v-else type="danger">{{ $fd('YesOrNo', scope.row.IsConfirmed) }}</el-tag>
-
+            <el-tag v-if="scope.row.IsConfirmed" type="primary">{{
+              $fd('YesOrNo', scope.row.IsConfirmed)
+            }}</el-tag>
+            <el-tag v-else type="danger">{{
+              $fd('YesOrNo', scope.row.IsConfirmed)
+            }}</el-tag>
           </template>
         </el-table-column>
         <!-- 是否废除 -->
@@ -128,8 +145,12 @@
           min-width="80"
         >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.IsDeleted">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
-            <el-tag v-else type="danger">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
+            <el-tag v-if="scope.row.IsDeleted">{{
+              $fd('YesOrNo', scope.row.IsDeleted)
+            }}</el-tag>
+            <el-tag v-else type="danger">{{
+              $fd('YesOrNo', scope.row.IsDeleted)
+            }}</el-tag>
           </template>
         </el-table-column>
         <!-- Description -->
@@ -163,11 +184,24 @@
           </template>
         </el-table-column>
       </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        class="page"
+        :total="total"
+        :page.sync="searchData.PageIndex"
+        :limit.sync="searchData.PageSize"
+        @pagination="getList"
+      />
     </template>
 
     <base-model v-if="visit_model.visible" :config="visit_model">
       <template slot="dialog-body">
-        <VisitPlanForm :row="row" :is-have-first-give-medicine-date="isHaveFirstGiveMedicineDate" @closeDialog="closeDialog" @getList="getList" />
+        <VisitPlanForm
+          :row="row"
+          :is-have-first-give-medicine-date="isHaveFirstGiveMedicineDate"
+          @closeDialog="closeDialog"
+          @getList="getList"
+        />
       </template>
     </base-model>
     <!-- 调整记录 -->
@@ -200,23 +234,37 @@
       >
         <div class="base-dialog-body">
           <!-- 基线盲态标识 -->
-          <el-form-item :label="$t('trials:visitPlan:button:bsBlindFlag')" prop="BlindBaseLineName">
+          <el-form-item
+            :label="$t('trials:visitPlan:button:bsBlindFlag')"
+            prop="BlindBaseLineName"
+          >
             <el-input
               v-model="form.BlindBaseLineName"
               :disabled="isHaveGeneratedTask"
             />
           </el-form-item>
           <!-- 随访盲态标识前缀 -->
-          <el-form-item :label="$t('trials:visitPlan:button:visitBlindFlag')" prop="BlindFollowUpPrefix">
+          <el-form-item
+            :label="$t('trials:visitPlan:button:visitBlindFlag')"
+            prop="BlindFollowUpPrefix"
+          >
             <el-input
               v-model="form.BlindFollowUpPrefix"
               :disabled="isHaveGeneratedTask"
             />
           </el-form-item>
         </div>
-        <div v-if="!isHaveGeneratedTask" class="base-dialog-footer" style="text-align:right;margin-top:10px;">
+        <div
+          v-if="!isHaveGeneratedTask"
+          class="base-dialog-footer"
+          style="text-align: right; margin-top: 10px"
+        >
           <el-form-item>
-            <el-button v-hasPermi="['trials:trials-panel:setting:visit-plan:add']" type="primary" @click="handleSaveBlindName">
+            <el-button
+              v-hasPermi="['trials:trials-panel:setting:visit-plan:add']"
+              type="primary"
+              @click="handleSaveBlindName"
+            >
               {{ $t('common:button:save') }}
             </el-button>
           </el-form-item>
@@ -226,17 +274,37 @@
   </BaseContainer>
 </template>
 <script>
-import { getVisitStageList, confirmTrialVisitPlan, updateVisitBlindName } from '@/api/trials'
+import {
+  getVisitStageList,
+  confirmTrialVisitPlan,
+  updateVisitBlindName,
+} from '@/api/trials'
 import BaseContainer from '@/components/BaseContainer'
 import BaseModel from '@/components/BaseModel'
 import VisitPlanForm from './components/visitPlanForm'
 import VisitPlanAdjust from './components/visitPlanAdjust'
-
+import Pagination from '@/components/Pagination'
+const searchDataDefault = () => {
+  return {
+    PageIndex: 1,
+    PageSize: 20,
+    Asc: true,
+    SortField: '',
+  }
+}
 export default {
   name: 'VisitPlan',
-  components: { BaseContainer, BaseModel, VisitPlanForm, VisitPlanAdjust },
+  components: {
+    BaseContainer,
+    BaseModel,
+    VisitPlanForm,
+    VisitPlanAdjust,
+    Pagination,
+  },
   data() {
     return {
+      searchData: searchDataDefault(),
+      total: 0,
       list: [],
       trialId: '',
       listLoading: false,
@@ -252,15 +320,26 @@ export default {
       form: { TrialId: '', BlindBaseLineName: '', BlindFollowUpPrefix: '' },
       rules: {
         BlindBaseLineName: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
         ],
         BlindFollowUpPrefix: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
-        ]
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
+        ],
       },
-      config_model: { visible: false, title: this.$t('trials:visitPlan:button:blindFlag') }, // '盲态标识'
+      config_model: {
+        visible: false,
+        title: this.$t('trials:visitPlan:button:blindFlag'),
+      }, // '盲态标识'
       formLoading: false,
-      isHaveGeneratedTask: false
+      isHaveGeneratedTask: false,
     }
   },
   mounted() {
@@ -270,23 +349,49 @@ export default {
   methods: {
     getList() {
       this.listLoading = true
-      getVisitStageList(this.trialId)
+      this.searchData.TrialId = this.trialId
+      getVisitStageList(this.searchData)
         .then((res) => {
           this.listLoading = false
-          this.list = res.Result.VisitPlanList
+          this.list = res.Result.VisitPlanList.CurrentPageData
+          this.total = res.Result.VisitPlanList.TotalCount
           this.visitPlanConfirmed = res.Result.VisitPlanConfirmed
-          this.isHaveFirstGiveMedicineDate = res.Result.IsHaveFirstGiveMedicineDate
+          this.isHaveFirstGiveMedicineDate =
+            res.Result.IsHaveFirstGiveMedicineDate
           this.isHaveGeneratedTask = res.Result.IsHaveGeneratedTask
           this.form.BlindBaseLineName = res.Result.BlindBaseLineName
           this.form.BlindFollowUpPrefix = res.Result.BlindFollowUpPrefix
-          this.isConfirm = res.Result.VisitPlanList.some(item => { return item.IsConfirmed === false })
+          this.isConfirm = res.Result.VisitPlanList.CurrentPageData.some(
+            (item) => {
+              return item.IsConfirmed === false
+            }
+          )
         })
         .catch(() => {
           this.listLoading = false
         })
     },
+    // 排序
+    handleSortByColumn(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()
+    },
     handleAdd() {
-      this.row = { TrialId: this.trialId, Id: '', IsBaseLine: false, BlindName: '', VisitWindowLeft: -5, VisitWindowRight: 5, Description: '' }
+      this.row = {
+        TrialId: this.trialId,
+        Id: '',
+        IsBaseLine: false,
+        BlindName: '',
+        VisitWindowLeft: -5,
+        VisitWindowRight: 5,
+        Description: '',
+      }
       this.timer = new Date().getTime()
       if (this.list.length === 0) {
         this.row.VisitName = 'Baseline'
@@ -297,12 +402,23 @@ export default {
         this.row.VisitNum = this.list[0].VisitNum + 1
       } else {
         console.log(1)
-        this.row.VisitName = this.list[this.list.length - 1].VisitName.split(' ')[0] + ' ' + (this.list[this.list.length - 1].VisitNum + 1)
+        this.row.VisitName =
+          this.list[this.list.length - 1].VisitName.split(' ')[0] +
+          ' ' +
+          (this.list[this.list.length - 1].VisitNum + 1)
         this.row.VisitNum = this.list[this.list.length - 1].VisitNum + 1
-        this.row.VisitDay = this.list[this.list.length - 1].VisitDay - this.list[this.list.length - 2].VisitDay + this.list[this.list.length - 1].VisitDay
-        if (this.list[this.list.length - 1].VisitWindowLeft && this.list[this.list.length - 1].VisitWindowRight) {
-          this.row.VisitWindowLeft = this.list[this.list.length - 1].VisitWindowLeft
-          this.row.VisitWindowRight = this.list[this.list.length - 1].VisitWindowRight
+        this.row.VisitDay =
+          this.list[this.list.length - 1].VisitDay -
+          this.list[this.list.length - 2].VisitDay +
+          this.list[this.list.length - 1].VisitDay
+        if (
+          this.list[this.list.length - 1].VisitWindowLeft &&
+          this.list[this.list.length - 1].VisitWindowRight
+        ) {
+          this.row.VisitWindowLeft =
+            this.list[this.list.length - 1].VisitWindowLeft
+          this.row.VisitWindowRight =
+            this.list[this.list.length - 1].VisitWindowRight
         }
       }
       this.visit_model.title = this.$t('common:button:add')
@@ -317,16 +433,22 @@ export default {
       const msg = this.$t('trials:adjustRecord:message:confirm')
       this.$confirm(msg, {
         type: 'warning',
-        distinguishCancelAndClose: true
-      }).then(() => {
-        this.confirmLoading = true
-        confirmTrialVisitPlan(this.trialId).then((res) => {
-          this.confirmLoading = false
-          if (res.IsSuccess) {
-            this.getList()
-          }
-        }).catch(() => { this.confirmLoading = false })
-      }).catch(() => {})
+        distinguishCancelAndClose: true,
+      })
+        .then(() => {
+          this.confirmLoading = true
+          confirmTrialVisitPlan(this.trialId)
+            .then((res) => {
+              this.confirmLoading = false
+              if (res.IsSuccess) {
+                this.getList()
+              }
+            })
+            .catch(() => {
+              this.confirmLoading = false
+            })
+        })
+        .catch(() => {})
     },
     closeDialog() {
       this.visit_model.visible = false
@@ -336,19 +458,21 @@ export default {
         if (valid) {
           this.formLoading = true
           this.form.TrialId = this.trialId
-          updateVisitBlindName(this.form).then((res) => {
-            this.formLoading = false
-            this.config_model.visible = false
-            this.$message.success(this.$t('common:message:savedSuccessfully'))
-          }).catch(() => {
-            this.formLoading = false
-          })
+          updateVisitBlindName(this.form)
+            .then((res) => {
+              this.formLoading = false
+              this.config_model.visible = false
+              this.$message.success(this.$t('common:message:savedSuccessfully'))
+            })
+            .catch(() => {
+              this.formLoading = false
+            })
         }
       })
     },
     handleConfig() {
       this.config_model.visible = true
-    }
-  }
+    },
+  },
 }
 </script>