受试者中止状态，需要填写原因

src/views/trials/trials-panel/subject/subject-list/components/SubjectStatusForm.vue

@@ -1,60 +1,39 @@
 <template>
-  <el-form
+  <el-form ref="subjectStatusForm" v-loading="loading" :model="form" :rules="rules" size="small" label-width="160px">
-    ref="subjectStatusForm"
-    v-loading="loading"
-    :model="form"
-    :rules="rules"
-    size="small"
-    label-width="160px"
-  >
     <div class="base-dialog-body">
       <!-- Status -->
       <el-form-item :label="$t('trials:subject:table:status')" prop="Status">
-        <el-radio-group v-model="form.Status" :disabled="originalStatus === 2">
+        <el-radio-group v-model="form.Status" :disabled="originalStatus === 2" @change="handleChange">
-          <el-radio v-for="item of $d.Subject_Visit_Status" :label="item.value" :key="item.id">{{item.label}}</el-radio>
+          <el-radio v-for="item of $d.Subject_Visit_Status" :label="item.value" :key="item.id">
+            {{ item.label }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <!-- Out Visit Date -->
       <el-form-item v-if="form.Status == 2" :label="$t('trials:subject:table:outVisitDate')" prop="VisitOverTime">
-        <el-date-picker
+        <el-date-picker v-model="form.VisitOverTime" type="date" :picker-options="pickerOption"
-          v-model="form.VisitOverTime"
+          value-format="yyyy-MM-dd" format="yyyy-MM-dd" />
-          type="date"
-          :picker-options="pickerOption"
-          value-format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
-        />
       </el-form-item>
       <!-- 末次访视 -->
-      <el-form-item v-if="form.Status===2" :label="$t('trials:subject:table:finalSubjectVisit')" prop="FinalSubjectVisitId">
+      <el-form-item v-if="form.Status === 2" :label="$t('trials:subject:table:finalSubjectVisit')"
-        <el-select
+        prop="FinalSubjectVisitId">
-          v-model="form.FinalSubjectVisitId"
+        <el-select v-model="form.FinalSubjectVisitId" clearable filterable style="width:100%"
-          clearable
+          :disabled="originalStatus === 2">
-          filterable
+          <el-option v-for="item in subjectVisitOptions" :key="item.Id" :label="item.VisitName" :value="item.Id" />
-          style="width:100%"
-          :disabled="originalStatus === 2"
-        >
-          <el-option
-            v-for="item in subjectVisitOptions"
-            :key="item.Id"
-            :label="item.VisitName"
-            :value="item.Id"
-          />
         </el-select>
       </el-form-item>
       <!-- 结束访视的原因 -->
       <el-form-item v-if="form.Status === 2" :label="$t('trials:subject:table:outVisitReason')" prop="Reason">
         <el-input v-model="form.Reason" type="textarea" autosize />
       </el-form-item>
+      <!-- 访视中止的原因 -->
+      <el-form-item v-if="form.Status === 3" :label="$t('trials:subject:table:outVisitReason')" prop="SuspendReason">
+        <el-input v-model="form.SuspendReason" type="textarea" autosize />
+      </el-form-item>
     </div>
     <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
       <el-form-item style="text-align:right;">
         <!-- 取消 -->
-        <el-button
+        <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancel">
-          :disabled="btnLoading"
-          size="small"
-          type="primary"
-          @click="handleCancel"
-        >
           {{ $t('common:button:cancel') }}
         </el-button>
         <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">
@@ -83,12 +62,14 @@ export default {
         OutEnrollmentTime: '',
         Reason: '',
         VisitOverTime: '',
-        FinalSubjectVisitId: ''
+        FinalSubjectVisitId: '',
+        SuspendReason: ''
       },
       rules: {
         OutEnrollmentTime: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }],
         FinalSubjectVisitId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }],
         Reason: [{ max: 500, message: `${this.$t('common:ruleMessage:maxLength')} 500` }],
+        SuspendReason: [{ max: 500, message: `${this.$t('common:ruleMessage:maxLength')} 500` }],
         VisitOverTime: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }]
       },
       pickerOption: {
@@ -108,6 +89,9 @@ export default {
     this.initForm()
   },
   methods: {
+    handleChange() {
+      if (this.form.Status !== 3) this.form.SuspendReason = ''
+    },
     async initForm() {
       this.loading = true
       const { Result } = await getSubjectVisitSelectOptions(this.data.Id)