1

src/views/trials/trials-list/components/TrialForm.vue

@@ -1,72 +1,33 @@
 <!-- eslint-disable -->
 <template>
-  <el-form
+  <el-form ref="trialForm" v-loading="loading" label-width="250px" :rules="trialFormRules"
-    ref="trialForm"
+    class="demo-ruleForm trial-Form" :model="trialForm" label-position="right" :inline="true">
-    v-loading="loading"
-    label-width="250px"
-    :rules="trialFormRules"
-    class="demo-ruleForm trial-Form"
-    :model="trialForm"
-    label-position="right"
-    :inline="true"
-  >
     <el-row>
       <!-- 项目编号 -->
-      <el-form-item
+      <el-form-item v-if="trialForm.Id !== ''" :label="$t('trials:trials-list:form:trialId')" prop="TrialCode">
-        v-if="trialForm.Id !== ''"
+        <el-input v-model="trialForm.TrialCode" @keyup.native="trialCodekeyUp" />
-        :label="$t('trials:trials-list:form:trialId')"
-        prop="TrialCode"
-      >
-        <el-input
-          v-model="trialForm.TrialCode"
-          @keyup.native="trialCodekeyUp"
-        />
       </el-form-item>
       <!-- 项目类型 -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:trialType')" prop="TrialType">
-        :label="$t('trials:trials-list:form:trialType')"
+        <el-radio-group v-model="trialForm.TrialType" :disabled="trialForm.Id !== ''">
-        prop="TrialType"
+          <el-radio v-for="item of $d.TrialType" :disabled="isTestUser && (item.value === 1 || item.value === 2)"
-      >
+            :key="item.id" :label="item.value">{{ item.label }}</el-radio>
-        <el-radio-group
-          v-model="trialForm.TrialType"
-          :disabled="trialForm.Id !== ''"
-        >
-          <el-radio
-            v-for="item of $d.TrialType"
-            :disabled="isTestUser && (item.value === 1 || item.value === 2)"
-            :key="item.id"
-            :label="item.value"
-            >{{ item.label }}</el-radio
-          >
         </el-radio-group>
       </el-form-item>
     </el-row>
     <el-row>
       <!-- 试验名称 -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:experimentName')" prop="ExperimentName">
-        :label="$t('trials:trials-list:form:experimentName')"
+        <el-input v-model="trialForm.ExperimentName" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" />
-        prop="ExperimentName"
-      >
-        <el-input
-          v-model="trialForm.ExperimentName"
-          type="textarea"
-          :autosize="{ minRows: 1, maxRows: 4 }"
-        />
       </el-form-item>
       <!-- 研究方案号 -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:researchNumber')" prop="ResearchProgramNo">
-        :label="$t('trials:trials-list:form:researchNumber')"
-        prop="ResearchProgramNo"
-      >
         <el-input v-model="trialForm.ResearchProgramNo" />
       </el-form-item>
     </el-row>
     <el-row>
       <!-- 主研单位 -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:researchUnit')" prop="MainResearchUnit">
-        :label="$t('trials:trials-list:form:researchUnit')"
-        prop="MainResearchUnit"
-      >
         <el-input v-model="trialForm.MainResearchUnit" />
       </el-form-item>
       <!-- 负责人PI -->
@@ -77,65 +38,28 @@
     <el-row>
       <!-- 申办方 -->
       <el-form-item :label="$t('trials:trials-list:form:sponsor')">
-        <el-select
+        <el-select v-model="trialForm.SponsorId" filterable allow-create default-first-option clearable
-          v-model="trialForm.SponsorId"
+          @change="(value) => handleSelectChange(value, 'sponsor')" @visible-change="
-          filterable
-          allow-create
-          default-first-option
-          clearable
-          @change="(value) => handleSelectChange(value, 'sponsor')"
-          @visible-change="
             (flag) => handleSelectVisibbleChange(flag, 'sponsor')
-          "
+          ">
-        >
+          <el-option v-for="item in sponsorList" :key="item.Id" :label="item.SponsorName" :value="item.Id" />
-          <el-option
-            v-for="item in sponsorList"
-            :key="item.Id"
-            :label="item.SponsorName"
-            :value="item.Id"
-          />
         </el-select>
       </el-form-item>
       <!-- CRO -->
       <el-form-item :label="$t('trials:trials-list:form:cro')">
-        <el-select
+        <el-select v-model="trialForm.CROId" filterable allow-create default-first-option clearable
-          v-model="trialForm.CROId"
-          filterable
-          allow-create
-          default-first-option
-          clearable
           @change="(value) => handleSelectChange(value, 'cro')"
-          @visible-change="(flag) => handleSelectVisibbleChange(flag, 'cro')"
+          @visible-change="(flag) => handleSelectVisibbleChange(flag, 'cro')">
-        >
+          <el-option v-for="item of croList" :key="item.Id" :label="item.CROName" :value="item.Id" />
-          <el-option
-            v-for="item of croList"
-            :key="item.Id"
-            :label="item.CROName"
-            :value="item.Id"
-          />
         </el-select>
       </el-form-item>
     </el-row>
     <el-row>
       <!-- DeclarationType -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:declarationType')" prop="DeclarationTypeEnumList">
-        :label="$t('trials:trials-list:form:declarationType')"
+        <el-select v-model="trialForm.DeclarationTypeEnumList" size="small" multiple clearable
-        prop="DeclarationTypeEnumList"
+          @change="handleDeclarationTypeChange" style="width: 100%">
-      >
+          <el-option v-for="item of $d.DeclarationType" :key="item.value" :value="item.value" :label="item.label" />
-        <el-select
-          v-model="trialForm.DeclarationTypeEnumList"
-          size="small"
-          multiple
-          clearable
-          @change="handleDeclarationTypeChange"
-          style="width: 100%"
-        >
-          <el-option
-            v-for="item of $d.DeclarationType"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
         </el-select>
       </el-form-item>
       <!-- Phase -->
@@ -147,79 +71,41 @@
             :label="item.Value"
             :value="item.Id"
           /> -->
-          <el-option
+          <el-option v-for="item of $d.Trial_Phase" :key="item.id" :label="item.label" :value="item.id" />
-            v-for="item of $d.Trial_Phase"
-            :key="item.id"
-            :label="item.label"
-            :value="item.id"
-          />
         </el-select>
       </el-form-item>
     </el-row>
     <el-row>
       <!-- 适应症类型 IndicationType -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:indicationType')" prop="IndicationTypeId">
-        :label="$t('trials:trials-list:form:indicationType')"
+        <el-select v-model="trialForm.IndicationTypeId" @change="handleIndicationTypeChange">
-        prop="IndicationTypeId"
-      >
-        <el-select
-          v-model="trialForm.IndicationTypeId"
-          @change="handleIndicationTypeChange"
-        >
           <!-- <el-option
             v-for="item of dictionaryList.IndicationType"
             :key="item.Id"
             :label="item.Value"
             :value="item.Id"
           /> -->
-          <el-option
+          <el-option v-for="item of $d.IndicationType" :key="item.id" :label="item.label" :value="item.id" />
-            v-for="item of $d.IndicationType"
-            :key="item.id"
-            :label="item.label"
-            :value="item.id"
-          />
         </el-select>
       </el-form-item>
       <!-- Indication -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:indication')" prop="IndicationEnum">
-        :label="$t('trials:trials-list:form:indication')"
-        prop="IndicationEnum"
-      >
         <!--        <el-input v-model="trialForm.Indication" />-->
-        <el-select
+        <el-select :disabled="!trialForm.IndicationTypeId" v-if="![37, 38, 39].includes(trialForm.IndicationEnum)"
-          :disabled="!trialForm.IndicationTypeId"
+          v-model="trialForm.IndicationEnum">
-          v-if="![37, 38, 39].includes(trialForm.IndicationEnum)"
+          <el-option v-for="item of $d.Indication" v-show="indicationGrouping === item.raw.ChildGroup" :key="item.id"
-          v-model="trialForm.IndicationEnum"
+            :label="item.label" :value="item.value" />
-        >
-          <el-option
-            v-for="item of $d.Indication"
-            v-show="indicationGrouping === item.raw.ChildGroup"
-            :key="item.id"
-            :label="item.label"
-            :value="item.value"
-          />
         </el-select>
         <el-row v-if="[37, 38, 39].includes(trialForm.IndicationEnum)">
           <el-col :span="12">
-            <el-select
+            <el-select :disabled="!trialForm.IndicationTypeId" v-model="trialForm.IndicationEnum"
-              :disabled="!trialForm.IndicationTypeId"
+              style="width: 100%; margin-right: 10px">
-              v-model="trialForm.IndicationEnum"
+              <el-option v-for="item of $d.Indication" v-show="indicationGrouping === item.raw.ChildGroup"
-              style="width: 100%; margin-right: 10px"
+                :key="item.id" :label="item.label" :value="item.value" />
-            >
-              <el-option
-                v-for="item of $d.Indication"
-                v-show="indicationGrouping === item.raw.ChildGroup"
-                :key="item.id"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </el-col>
           <el-col :span="12">
-            <el-input
+            <el-input :disabled="!trialForm.IndicationTypeId" v-model="trialForm.Indication" />
-              :disabled="!trialForm.IndicationTypeId"
-              v-model="trialForm.Indication"
-            />
           </el-col>
         </el-row>
       </el-form-item>
@@ -234,99 +120,54 @@
             :label="item.Value"
             :value="item.Id"
           /> -->
-          <el-option
+          <el-option v-for="item of $d.Modality" :key="item.id" :label="item.label" :value="item.id" />
-            v-for="item of $d.Modality"
-            :key="item.id"
-            :label="item.label"
-            :value="item.id"
-          />
         </el-select>
       </el-form-item>
       <!-- Sites -->
       <el-form-item :label="$t('trials:trials-list:form:siteCount')">
-        <el-input-number
+        <el-input-number v-model="trialForm.PlanSiteCount" controls-position="right" :min="0" />
-          v-model="trialForm.PlanSiteCount"
-          controls-position="right"
-          :min="0"
-        />
       </el-form-item>
     </el-row>
     <el-row>
       <!-- Expected Patients Num -->
       <el-form-item :label="$t('trials:trials-list:form:patientsNum')">
-        <el-input-number
+        <el-input-number v-model="trialForm.ExpectedPatients" controls-position="right" :min="0"
-          v-model="trialForm.ExpectedPatients"
+          @change="handleExpectedPatientsChange" />
-          controls-position="right"
-          :min="0"
-          @change="handleExpectedPatientsChange"
-        />
       </el-form-item>
       <!-- Timepoints Per Patient -->
       <el-form-item :label="$t('trials:trials-list:form:timePointsPerPatient')">
-        <el-input-number
+        <el-input-number v-model="trialForm.TimePointsPerPatient" controls-position="right" :min="0"
-          v-model="trialForm.TimePointsPerPatient"
+          @change="handleTpPerPatientChange" />
-          controls-position="right"
-          :min="0"
-          @change="handleTpPerPatientChange"
-        />
       </el-form-item>
     </el-row>
     <el-row>
       <!-- Visits -->
       <el-form-item :label="$t('trials:trials-list:form:visitCount')">
-        <el-input-number
+        <el-input-number v-model="trialForm.PlanVisitCount" controls-position="right" :min="0" />
-          v-model="trialForm.PlanVisitCount"
-          controls-position="right"
-          :min="0"
-        />
       </el-form-item>
     </el-row>
     <el-row>
       <!-- Expedited -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:expedited')" prop="Expedited">
-        :label="$t('trials:trials-list:form:expedited')"
-        prop="Expedited"
-      >
         <el-select v-model="trialForm.Expedited">
-          <el-option
+          <el-option v-for="item in expeditedOption" :key="item.value" :label="item.label" :value="item.value" />
-            v-for="item in expeditedOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
         </el-select>
       </el-form-item>
       <!-- Turnaround Time -->
-      <el-form-item
+      <el-form-item :label="$t('trials:trials-list:form:projectCycle')" prop="ProjectCycle">
-        :label="$t('trials:trials-list:form:projectCycle')"
-        prop="ProjectCycle"
-      >
         <el-input v-model="trialForm.ProjectCycle" />
       </el-form-item>
     </el-row>
     <el-row>
       <!-- Total Reviewers -->
       <el-form-item :label="$t('trials:trials-list:form:totalReviewers')">
-        <el-input-number
+        <el-input-number v-model="trialForm.TotalReviewers" controls-position="right" :min="0" />
-          v-model="trialForm.TotalReviewers"
-          controls-position="right"
-          :min="0"
-        />
       </el-form-item>
       <!-- Type of Reviewers -->
       <el-form-item :label="$t('trials:trials-list:form:typeofReviewers')">
-        <el-select
+        <el-select v-model="trialForm.AttendedReviewerTypeEnumList" size="small" multiple clearable>
-          v-model="trialForm.AttendedReviewerTypeEnumList"
+          <el-option v-for="item of $d.AttendedReviewerType" :key="item.value" :value="item.value"
-          size="small"
+            :label="item.label" />
-          multiple
-          clearable
-        >
-          <el-option
-            v-for="item of $d.AttendedReviewerType"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
         </el-select>
         <!--        <el-row v-if="trialForm.AttendedReviewerTypeEnumList.includes(2)">-->
         <!--          <el-col :span="12">-->
@@ -559,6 +400,7 @@ export default {
     },
     // 申办方与CRO新增
     async handleSelectChange(value, key) {
+      if (!value) return false
       let arr = key == "sponsor" ? this.sponsorList : this.croList;
       let has = arr.some((item) => item.Id === value);
       if (!has) {
@@ -790,6 +632,7 @@ export default {
 .trial-Form .el-textarea {
   width: 340px;
 }
+
 .trial-Form .el-col .el-input {
   width: 165px;
   margin-right: 10px;