CRF表格-预览时没有展示单位

src/views/trials/trials-panel/setting/reading-unit/components/QuestionFormItem.vue

@@ -6,16 +6,12 @@
     >
       {{ question.GroupName }}
     </div> -->
-    <div
-      v-if="!!question.GroupName && question.Type === 'group'"
-      style="font-weight: bold; font-size: 16px; margin: 5px 0px"
-    >
+    <div v-if="!!question.GroupName && question.Type === 'group'"
+      style="font-weight: bold; font-size: 16px; margin: 5px 0px">
       {{ language === "en" ? question.GroupEnName : question.GroupName }}
     </div>
-    <div
-      v-if="question.Type === 'table' || question.Type === 'basicTable'"
-      style="font-weight: bold; font-size: 14px; margin: 5px 0px"
-    >
+    <div v-if="question.Type === 'table' || question.Type === 'basicTable'"
+      style="font-weight: bold; font-size: 14px; margin: 5px 0px">
       <div style="display: flex; justify-content: space-between">
         <span>{{ question.QuestionName }}</span>
         <!-- 添加 -->
@@ -24,166 +20,103 @@
         </el-button>
       </div>
       <el-table :data="question.TableQuestions.Answers">
-        <el-table-column
-          v-for="item of question.TableQuestions.Questions"
-          :key="item.Id"
-          :prop="item.Id"
-          :label="item.QuestionName"
-          min-width="100"
-          show-overflow-tooltip
-        />
+        <el-table-column v-for="item of question.TableQuestions.Questions" :key="item.Id" :prop="item.Id"
+          :label="item.QuestionName" min-width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="item.Unit">{{ scope.row[item.Id] }}{{ item.Unit !== 4 ? $fd('ValueUnit', item.Unit)
+              : item.ValueType === 2 ? '%' :
+                item.CustomUnit }}</span>
+            <span v-else>{{ scope.row[item.Id] }}</span>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <template v-else>
-      <el-form-item
-        v-if="
-          (question.ShowQuestion === 1 &&
-            !!~question.ParentTriggerValueList.indexOf(
-              questionForm[question.ParentId]
-            )) ||
-          question.ShowQuestion === 0
-        "
-        :label="`${question.QuestionName}`"
-        :prop="question.Id"
-        :rules="[
-          {
-            required:
-              (question.IsRequired === 0 ||
-                (question.IsRequired === 1 &&
-                  question.RelevanceId &&
-                  !!~question.RelevanceValueList.indexOf(
-                    isNaN(parseFloat(questionForm[question.RelevanceId])) ? questionForm[question.RelevanceId] : 
-                  questionForm[question.RelevanceId].toString()))) &&
-              question.Type !== 'group' &&
-              question.Type !== 'summary',
-            message: this.$t('common:ruleMessage:specify'),
-            trigger: ['blur', 'change'],
-          },
-        ]"
-        :class="[
-          question.Type === 'group'
-            ? 'mb'
-            : question.Type === 'upload'
+      <el-form-item v-if="
+        (question.ShowQuestion === 1 &&
+          !!~question.ParentTriggerValueList.indexOf(
+            questionForm[question.ParentId]
+          )) ||
+        question.ShowQuestion === 0
+      " :label="`${question.QuestionName}`" :prop="question.Id" :rules="[
+        {
+          required:
+            (question.IsRequired === 0 ||
+              (question.IsRequired === 1 &&
+                question.RelevanceId &&
+                !!~question.RelevanceValueList.indexOf(
+                  isNaN(parseFloat(questionForm[question.RelevanceId])) ? questionForm[question.RelevanceId] :
+                    questionForm[question.RelevanceId].toString()))) &&
+            question.Type !== 'group' &&
+            question.Type !== 'summary',
+          message: this.$t('common:ruleMessage:specify'),
+          trigger: ['blur', 'change'],
+        },
+      ]" :class="[
+        question.Type === 'group'
+          ? 'mb'
+          : question.Type === 'upload'
             ? 'uploadWrapper'
             : '',
-        ]"
-      >
+      ]">
         <!-- 输入框 -->
-        <el-input
-          v-if="question.Type === 'input'"
-          v-model="questionForm[question.Id]"
-          :disabled="question.TableQuestionType === 2"
-          @change="(val) => { formItemChange(val, question) }"
-        />
+        <el-input v-if="question.Type === 'input'" v-model="questionForm[question.Id]"
+          :disabled="question.TableQuestionType === 2" @change="(val) => { formItemChange(val, question) }" />
         <!-- 多行文本输入框 -->
-        <el-input
-          v-if="question.Type === 'textarea'"
-          v-model="questionForm[question.Id]"
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 4 }"
-          @change="(val) => { formItemChange(val, question) }"
-        />
+        <el-input v-if="question.Type === 'textarea'" v-model="questionForm[question.Id]" type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4 }" @change="(val) => { formItemChange(val, question) }" />
         <!-- 下拉框 -->
-        <el-select
-          v-if="question.Type === 'select'"
-          v-model="questionForm[question.Id]"
-          clearable
-          :disabled="
+        <el-select v-if="question.Type === 'select'" v-model="questionForm[question.Id]" clearable :disabled="(question.TableQuestionType === 2 ||
+          question.QuestionGenre === 2) &&
+          !!question.DictionaryCode
+          " @change="(val) => { formItemChange(val, question) }">
+          <template v-if="question.TableQuestionType === 1">
+            <el-option v-for="item in organList" :key="item.Id" :label="item[question.DataTableColumn]"
+              :value="item[question.DataTableColumn]" />
+          </template>
+          <template v-else-if="
+            question.TableQuestionType === 3 || question.QuestionGenre === 3
+          ">
+            <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
+              :label="item.label" />
+          </template>
+          <template v-else-if="
             (question.TableQuestionType === 2 ||
               question.QuestionGenre === 2) &&
-            !!question.DictionaryCode
-          "
-          @change="(val) => { formItemChange(val, question) }"
-        >
-          <template v-if="question.TableQuestionType === 1">
-            <el-option
-              v-for="item in organList"
-              :key="item.Id"
-              :label="item[question.DataTableColumn]"
-              :value="item[question.DataTableColumn]"
-            />
-          </template>
-          <template
-            v-else-if="
-              question.TableQuestionType === 3 || question.QuestionGenre === 3
-            "
-          >
-            <el-option
-              v-for="item of $d[question.DictionaryCode]"
-              :key="item.id"
-              :value="item.value"
-              :label="item.label"
-            />
-          </template>
-          <template
-            v-else-if="
-              (question.TableQuestionType === 2 ||
-                question.QuestionGenre === 2) &&
-              question.DictionaryCode
-            "
-          >
-            <el-option
-              v-for="item of $d[question.DictionaryCode]"
-              :key="item.id"
-              :value="item.value"
-              :label="item.label"
-            />
+            question.DictionaryCode
+          ">
+            <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
+              :label="item.label" />
           </template>
           <template v-else>
-            <el-option
-              v-for="val in question.TypeValue.split('|')"
-              :key="val"
-              :label="val.trim()"
-              :value="val.trim()"
-            />
+            <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()"
+              :value="val.trim()" />
           </template>
         </el-select>
         <!-- 单选 -->
-        <el-radio-group
-          v-if="question.Type === 'radio'"
-          v-model="questionForm[question.Id]"
-          @change="(val) => { formItemChange(val, question) }"
-        >
+        <el-radio-group v-if="question.Type === 'radio'" v-model="questionForm[question.Id]"
+          @change="(val) => { formItemChange(val, question) }">
           <template v-if="question.DictionaryCode">
-            <el-radio
-              v-for="item of $d[question.DictionaryCode]"
-              :key="item.id"
-              :label="item.value"
-            >
+            <el-radio v-for="item of $d[question.DictionaryCode]" :key="item.id" :label="item.value">
               {{ item.label }}
             </el-radio>
           </template>
           <template v-if="question.TypeValue">
-            <el-radio
-              v-for="val in question.TypeValue.split('|')"
-              :key="val.trim()"
-              :label="val.trim()"
-            >
+            <el-radio v-for="val in question.TypeValue.split('|')" :key="val.trim()" :label="val.trim()">
               {{ val.trim() }}
             </el-radio>
           </template>
         </el-radio-group>
         <!-- 复选框 -->
-        <el-checkbox-group
-          v-if="question.Type === 'checkbox'"
-          v-model="questionForm[question.Id]"
-          @change="(val) => { formItemChange(val, question) }"
-        >
+        <el-checkbox-group v-if="question.Type === 'checkbox'" v-model="questionForm[question.Id]"
+          @change="(val) => { formItemChange(val, question) }">
           <template v-if="question.DictionaryCode">
-            <el-checkbox
-              v-for="item of $d[question.DictionaryCode]"
-              :key="item.id"
-              :label="item.value"
-            >
+            <el-checkbox v-for="item of $d[question.DictionaryCode]" :key="item.id" :label="item.value">
               {{ item.label }}
             </el-checkbox>
           </template>
           <template v-if="question.TypeValue">
-            <el-checkbox
-              v-for="val in question.TypeValue.split('|')"
-              :key="val.trim()"
-              :label="val.trim()"
-            >
+            <el-checkbox v-for="val in question.TypeValue.split('|')" :key="val.trim()" :label="val.trim()">
               {{ val.trim() }}
             </el-checkbox>
           </template>
@@ -191,129 +124,68 @@
 
         <!-- 自动计算 -->
         <!-- :precision="2" :step="0.1" :max="10" -->
-        <el-input
-          v-if="question.Type === 'calculation'"
-          v-model="questionForm[question.Id]"
-          disabled
-        />
+        <el-input v-if="question.Type === 'calculation'" v-model="questionForm[question.Id]" disabled />
         <!-- 自动分类 -->
-        <el-input
-          v-if="question.Type === 'class' && question.ClassifyShowType === 1"
-          v-model="questionForm[question.Id]"
-          :disabled="!question.ClassifyEditType"
-        />
-        <el-select
-          v-if="question.Type === 'class' && question.ClassifyShowType === 2"
-          v-model="questionForm[question.Id]"
-          :disabled="!question.ClassifyEditType"
-          @change="(val) => { formItemChange(val, question) }"
-        >
-          <el-option
-            v-for="val in question.TypeValue.split('|')"
-            :key="val"
-            :label="val.trim()"
-            :value="val.trim()"
-          />
+        <el-input v-if="question.Type === 'class' && question.ClassifyShowType === 1"
+          v-model="questionForm[question.Id]" :disabled="!question.ClassifyEditType" />
+        <el-select v-if="question.Type === 'class' && question.ClassifyShowType === 2"
+          v-model="questionForm[question.Id]" :disabled="!question.ClassifyEditType"
+          @change="(val) => { formItemChange(val, question) }">
+          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()" :value="val.trim()" />
         </el-select>
-        <el-radio-group
-          v-if="question.Type === 'class' && question.ClassifyShowType === 3"
-          v-model="questionForm[question.Id]"
-          :disabled="!question.ClassifyEditType"
-          @change="(val) => { formItemChange(val, question) }"
-        >
-          <el-radio
-            v-for="item of question.TypeValue.split('|')"
-            :key="item.trim()"
-            :label="item.trim()"
-          >
+        <el-radio-group v-if="question.Type === 'class' && question.ClassifyShowType === 3"
+          v-model="questionForm[question.Id]" :disabled="!question.ClassifyEditType"
+          @change="(val) => { formItemChange(val, question) }">
+          <el-radio v-for="item of question.TypeValue.split('|')" :key="item.trim()" :label="item.trim()">
             {{ item.trim() }}
           </el-radio>
         </el-radio-group>
-        <el-input
-          v-if="question.Type === 'class' && question.ClassifyShowType === 4"
-          type="number"
-          :disabled="!question.ClassifyEditType"
-          v-model="questionForm[question.Id]"
-        />
+        <el-input v-if="question.Type === 'class' && question.ClassifyShowType === 4" type="number"
+          :disabled="!question.ClassifyEditType" v-model="questionForm[question.Id]" />
         <!-- 自增 -->
-        <el-input
-          v-if="question.Type === 'increment'"
-          v-model="questionForm[question.Id]"
-          disabled
-        />
+        <el-input v-if="question.Type === 'increment'" v-model="questionForm[question.Id]" disabled />
         <!-- 数值 -->
         <!-- :precision="2" :step="0.1" :max="10" -->
-        <el-select
-          v-if="question.Type === 'number' && question.TypeValue"
-          v-model="questionForm[question.Id]"
-          clearable
-          @change="(val) => { formItemNumberChange(val, question) }"
-        >
-          <el-option
-            v-for="val in question.TypeValue.split('|')"
-            :key="val"
-            :label="val.trim()"
-            :value="val.trim()"
-          />
+        <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]" clearable
+          @change="(val) => { formItemNumberChange(val, question) }">
+          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()" :value="val.trim()" />
+          <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+            question.CustomUnit }}</template>
+          <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
         </el-select>
-        <el-input
-          v-else-if="question.Type === 'number' && question.DataSource !== 1"
-          v-model="questionForm[question.Id]"
-          type="number"
-          @change="(val) => { formItemNumberChange(val, question) }"
-        />
-        <el-input
-          v-else-if="question.Type === 'number' && question.DataSource === 1"
-          v-model="questionForm[question.Id]"
-          type="number"
-          :disabled="question.DataSource === 1"
-        />
+        <el-input v-else-if="question.Type === 'number' && question.DataSource !== 1"
+          v-model="questionForm[question.Id]" type="number" @change="(val) => { formItemNumberChange(val, question) }">
+          <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+            question.CustomUnit }}</template>
+          <template v-else-if="question.ValueType === 2" slot="append">%</template>
+        </el-input>
+        <el-input v-else-if="question.Type === 'number' && question.DataSource === 1"
+          v-model="questionForm[question.Id]" type="number" :disabled="question.DataSource === 1">
+          <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+            question.CustomUnit }}</template>
+          <template v-else-if="question.ValueType === 2" slot="append">%</template>
+        </el-input>
         <!-- 上传图像 -->
-        <el-upload
-          v-if="question.Type === 'upload'"
-          action
-          :accept="question.FileType"
-          :limit="question.ImageCount > 0 ? parseInt(question.ImageCount) : 100"
-          :on-preview="handlePictureCardPreview"
-          :before-upload="handleBeforeUpload"
-          :http-request="uploadScreenshot"
-          list-type="picture-card"
-          :on-remove="handleRemove"
-          :file-list="fileList"
-          :class="{ disabled: fileList.length >= question.ImageCount }"
-        >
+        <el-upload v-if="question.Type === 'upload'" action :accept="question.FileType"
+          :limit="question.ImageCount > 0 ? parseInt(question.ImageCount) : 100" :on-preview="handlePictureCardPreview"
+          :before-upload="handleBeforeUpload" :http-request="uploadScreenshot" list-type="picture-card"
+          :on-remove="handleRemove" :file-list="fileList" :class="{ disabled: fileList.length >= question.ImageCount }">
           <i slot="default" class="el-icon-plus" />
           <div slot="file" slot-scope="{ file }">
-            <img
-              class="el-upload-list__item-thumbnail"
-              :src="OSSclientConfig.basePath + file.url"
-              crossOrigin="Anonymous"
-              alt=""
-            />
+            <img class="el-upload-list__item-thumbnail" :src="OSSclientConfig.basePath + file.url"
+              crossOrigin="Anonymous" alt="" />
             <span class="el-upload-list__item-actions">
-              <span
-                class="el-upload-list__item-preview"
-                @click="handlePictureCardPreview(file)"
-              >
+              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                 <i class="el-icon-zoom-in" />
               </span>
 
-              <span
-                v-if="readingTaskState < 2"
-                class="el-upload-list__item-delete"
-                @click="handleRemove(file)"
-              >
+              <span v-if="readingTaskState < 2" class="el-upload-list__item-delete" @click="handleRemove(file)">
                 <i class="el-icon-delete" />
               </span>
             </span>
           </div>
         </el-upload>
-        <el-dialog
-          v-if="question.Type === 'upload'"
-          append-to-body
-          :visible.sync="imgVisible"
-          width="600px"
-        >
+        <el-dialog v-if="question.Type === 'upload'" append-to-body :visible.sync="imgVisible" width="600px">
           <el-image :src="imageUrl" crossOrigin="Anonymous" width="100%">
             <!-- 加载中 -->
             <div slot="placeholder" class="image-slot">
@@ -324,62 +196,28 @@
         </el-dialog>
       </el-form-item>
     </template>
-    <template
-      v-if="
-        question.Childrens &&
-        question.Childrens.length > 0 &&
-        (question.Type !== 'table' && question.Type !== 'basicTable') && Object.keys(questionForm).length > 0
-      "
-    >
-      <QuestionFormItem
-        v-for="item in question.Childrens"
-        :key="item.Id"
-        :questionForm="questionForm"
-        :question="item"
-        :reading-task-state="readingTaskState"
-        :is-system-criterion="isSystemCriterion"
-        :visit-task-id="visitTaskId"
-        :criterion-id="criterionId"
-        :calculation-list="calculationList"
-        @formItemNumberChange="formItemNumberChange"
-        @setFormItemData="setFormItemData"
-        @resetFormItemData="resetFormItemData"
-      />
+    <template v-if="
+      question.Childrens &&
+      question.Childrens.length > 0 &&
+      (question.Type !== 'table' && question.Type !== 'basicTable') && Object.keys(questionForm).length > 0
+    ">
+      <QuestionFormItem v-for="item in question.Childrens" :key="item.Id" :questionForm="questionForm" :question="item"
+        :reading-task-state="readingTaskState" :is-system-criterion="isSystemCriterion" :visit-task-id="visitTaskId"
+        :criterion-id="criterionId" :calculation-list="calculationList" @formItemNumberChange="formItemNumberChange"
+        @setFormItemData="setFormItemData" @resetFormItemData="resetFormItemData" />
     </template>
-    <el-dialog
-      v-if="addOrEdit.visible"
-      class="my_dialog"
-      :visible.sync="addOrEdit.visible"
-      :close-on-click-modal="false"
-      :title="addOrEdit.title"
-      width="400px"
-      append-to-body
-    >
+    <el-dialog v-if="addOrEdit.visible" class="my_dialog" :visible.sync="addOrEdit.visible"
+      :close-on-click-modal="false" :title="addOrEdit.title" width="400px" append-to-body>
       <el-form ref="tableQsForm" v-loading="loading" size="small">
-        <QuestionTableFormItem
-          v-for="item in QuestionsList"
-          :key="item.Id"
-          :question="item"
-          :reading-task-state="readingTaskState"
-          :is-system-criterion="isSystemCriterion"
-          :question-form="QuestionsForm"
-          :visit-task-id="visitTaskId"
-          :criterion-id="criterionId"
-          @formItemTableNumberChange="formItemTableNumberChange"
-          @setFormItemData="setTblFormItemData"
-          @resetFormItemData="resetTblFormItemData"
-        />
-        <div
-          class="base-dialog-footer"
-          style="text-align: right; margin-top: 10px"
-        >
+        <QuestionTableFormItem v-for="item in QuestionsList" :key="item.Id" :question="item"
+          :reading-task-state="readingTaskState" :is-system-criterion="isSystemCriterion" :question-form="QuestionsForm"
+          :visit-task-id="visitTaskId" :criterion-id="criterionId"
+          @formItemTableNumberChange="formItemTableNumberChange" @setFormItemData="setTblFormItemData"
+          @resetFormItemData="resetTblFormItemData" />
+        <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
           <el-form-item>
             <!-- 取消 -->
-            <el-button
-              size="small"
-              type="primary"
-              @click="addOrEdit.visible = false"
-            >
+            <el-button size="small" type="primary" @click="addOrEdit.visible = false">
               {{ $t("common:button:cancel") }}
             </el-button>
             <!-- 保存 -->
@@ -470,9 +308,9 @@ export default {
         if (this.question.Type === 'class') {
           this.$emit("setFormItemData", { key: this.question.Id, val: v[this.question.Id], question: v })
         }
-        
+
         this.formItemNumberChange(this.question.Id, false);
-        
+
       },
     },
   },
@@ -623,8 +461,8 @@ export default {
                   dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                 }
                 num = dataArr.length === 0 ? 0 : dataArr.reduce((acc, curr) => {
-                    return acc + (typeof curr === "number" ? curr : 0);
-                  }, 0) / dataArr.length;
+                  return acc + (typeof curr === "number" ? curr : 0);
+                }, 0) / dataArr.length;
                 break;
               case 11:
                 if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
@@ -642,7 +480,7 @@ export default {
                 if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                   dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                 }
-                
+
                 num = dataArr.length === 0 ? 0 : dataArr.reduce((acc, curr) => acc && curr) ? 1 : 0
                 break;
               case 14:
@@ -680,7 +518,7 @@ export default {
             var find = v.CalculateQuestionList.filter((o) => {
               return o.TableQuestionId === questionId;
             });
-            
+
             // find的自动计算值number
             if (find) {
               var num = this.logic(v);
@@ -691,7 +529,7 @@ export default {
           });
         }
       }
-      
+
       // this.$emit('formItemNumberChange')
     },
     formItemTableNumberChange() {
@@ -724,8 +562,8 @@ export default {
                     arr.length === 0
                       ? 0
                       : arr.reduce((acc, curr) => {
-                          return acc + (typeof curr === "number" ? curr : 0);
-                        }, 0) / arr.length;
+                        return acc + (typeof curr === "number" ? curr : 0);
+                      }, 0) / arr.length;
                   break;
                 case 8:
                   arr.push(parseFloat(this.QuestionsForm[o.TableQuestionId]));
@@ -749,13 +587,13 @@ export default {
       this.addOrEdit.title =
         row.QuestionName + this.$t("trials:readingUnit:qsList:title:tableQs"); // '表格问题'
       this.QuestionsList = row.TableQuestions.Questions;
-      row.TableQuestions.Questions.map(v=>{
+      row.TableQuestions.Questions.map(v => {
         if (v.Type === 'class') {
-          this.classArr.push({triggerId: v.ClassifyTableQuestionId, classId: v.Id, classifyAlgorithms: v.ClassifyAlgorithms, classifyType: v.ClassifyType})
+          this.classArr.push({ triggerId: v.ClassifyTableQuestionId, classId: v.Id, classifyAlgorithms: v.ClassifyAlgorithms, classifyType: v.ClassifyType })
         }
       })
       // this.AnswersList = row.TableQuestions.Answers;
-      row.TableQuestions.Questions.map(i=>{
+      row.TableQuestions.Questions.map(i => {
         this.$set(this.QuestionsForm, i.Id, null)
       })
       // this.QuestionsForm = {};
@@ -815,7 +653,7 @@ export default {
     },
     setTblFormItemData(obj) {
       this.$set(this.QuestionsForm, obj.key, obj.val)
-      this.classArr.map(i=>{
+      this.classArr.map(i => {
         if (i.triggerId === obj.key) {
           let answer = null
           let list = JSON.parse(i.classifyAlgorithms)
@@ -826,12 +664,12 @@ export default {
                 parseFloat(obj.val) < parseFloat(v.lt)
               )
             })
-            answer = o ? o.label : null 
+            answer = o ? o.label : null
           } else if (i.classifyType === 1) {
             let o = list.find(v => {
               return v.val.includes(obj.val)
             })
-            answer = o ? o.label : null 
+            answer = o ? o.label : null
           }
           this.$set(this.QuestionsForm, i.classId, answer)
         }
@@ -985,26 +823,42 @@ export default {
     }
   }
 }
+
+::v-deep .el-select .el-input__prefix {
+  left: calc(100% - 50px);
+  cursor: pointer;
+}
+
+::v-deep .el-select .el-input__inner {
+  padding-left: 15px;
+  padding-right: 50px;
+}
+
 .criterion-form-item {
   .el-form-item {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
   }
+
   ::v-deep .el-form-item__content {
     width: 500px;
   }
+
   .el-input {
     width: 100%;
   }
+
   .mb {
     margin-bottom: 0px;
   }
+
   .disabled {
     ::v-deep .el-upload--picture-card {
       display: none;
     }
   }
+
   .uploadWrapper {
     display: flex;
     flex-direction: column;

src/views/trials/trials-panel/setting/reading-unit/components/QuestionTableFormItem.vue

@@ -2,224 +2,117 @@
   <div class="criterion-form-item">
 
     <el-form-item
-      v-if="(question.ShowQuestion===1 && !!~question.ParentTriggerValueList.indexOf(questionForm[question.ParentId])) || question.ShowQuestion===0"
-      :label="`${question.QuestionName}`"
-      :prop="questionForm[question.Id]"
-      :rules="[
-        { required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && !!~question.RelevanceValueList.indexOf(questionForm[question.RelevanceId]))) && question.Type!=='group' && question.Type!=='summary',
-          message: $t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
-      ]"
-      :class="[question.Type==='group'?'mb':question.Type==='upload'?'uploadWrapper':'']"
-    >
+      v-if="(question.ShowQuestion === 1 && !!~question.ParentTriggerValueList.indexOf(questionForm[question.ParentId])) || question.ShowQuestion === 0"
+      :label="`${question.QuestionName}`" :prop="questionForm[question.Id]" :rules="[
+        {
+          required: (question.IsRequired === 0 || (question.IsRequired === 1 && question.RelevanceId && !!~question.RelevanceValueList.indexOf(questionForm[question.RelevanceId]))) && question.Type !== 'group' && question.Type !== 'summary',
+          message: $t('common:ruleMessage:specify'), trigger: ['blur', 'change']
+        },
+      ]" :class="[question.Type === 'group' ? 'mb' : question.Type === 'upload' ? 'uploadWrapper' : '']">
       <!-- 输入框 -->
-      <el-input
-        v-if="question.Type==='input'"
-        v-model="questionForm[question.Id]"
-        :disabled="question.TableQuestionType === 2"
-      />
+      <el-input v-if="question.Type === 'input'" v-model="questionForm[question.Id]"
+        :disabled="question.TableQuestionType === 2" />
       <!-- 多行文本输入框 -->
-      <el-input
-        v-if="question.Type==='textarea'"
-        v-model="questionForm[question.Id]"
-        type="textarea"
-        :autosize="{ minRows: 2, maxRows: 4}"
-      />
+      <el-input v-if="question.Type === 'textarea'" v-model="questionForm[question.Id]" type="textarea"
+        :autosize="{ minRows: 2, maxRows: 4 }" />
       <!-- 下拉框 -->
-      <el-select
-        v-if="question.Type==='select'"
-        v-model="questionForm[question.Id]"
-        clearable
+      <el-select v-if="question.Type === 'select'" v-model="questionForm[question.Id]" clearable
         :disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode"
-        @change="((val)=>{formItemChange(val, question)})"
-      >
+        @change="((val) => { formItemChange(val, question) })">
         <template v-if="question.TableQuestionType === 1">
-          <el-option
-            v-for="item in organList"
-            :key="item.Id"
-            :label="item[question.DataTableColumn]"
-            :value="item[question.DataTableColumn]"
-          />
+          <el-option v-for="item in organList" :key="item.Id" :label="item[question.DataTableColumn]"
+            :value="item[question.DataTableColumn]" />
         </template>
         <template v-else-if="question.TableQuestionType === 3 || question.QuestionGenre === 3">
-          <el-option
-            v-for="item of $d[question.DictionaryCode]"
-            :key="item.id"
-            :value="item.value"
-            :label="item.label"
-          />
+          <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
+            :label="item.label" />
         </template>
-        <template v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && question.DictionaryCode">
-          <el-option
-            v-for="item of $d[question.DictionaryCode]"
-            :key="item.id"
-            :value="item.value"
-            :label="item.label"
-          />
+        <template
+          v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && question.DictionaryCode">
+          <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="item.value"
+            :label="item.label" />
         </template>
         <template v-else>
-          <el-option
-            v-for="val in question.TypeValue.split('|')"
-            :key="val"
-            :label="val"
-            :value="val"
-          />
+          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
         </template>
 
       </el-select>
       <!-- 单选 -->
-      <el-radio-group
-        v-if="question.Type==='radio'"
-        v-model="questionForm[question.Id]"
-        @change="((val)=>{formItemChange(val, question)})"
-      >
-        <el-radio
-          v-for="val in question.TypeValue.split('|')"
-          :key="val"
-          :label="val"
-        >
+      <el-radio-group v-if="question.Type === 'radio'" v-model="questionForm[question.Id]"
+        @change="((val) => { formItemChange(val, question) })">
+        <el-radio v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
           {{ val }}
         </el-radio>
       </el-radio-group>
       <!-- 复选框 -->
-      <el-checkbox-group
-        v-if="question.Type==='checkbox'"
-        v-model="questionForm[question.Id]"
-      >
-        <el-checkbox
-          v-for="val in question.TypeValue.split('|')"
-          :key="val"
-          :label="val"
-        >
+      <el-checkbox-group v-if="question.Type === 'checkbox'" v-model="questionForm[question.Id]">
+        <el-checkbox v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
           {{ val }}
         </el-checkbox>
       </el-checkbox-group>
 
       <!-- 自动计算 -->
       <!-- :precision="2" :step="0.1" :max="10" -->
-      <el-input
-        v-if="question.Type==='calculation'"
-        v-model="questionForm[question.Id]"
-        disabled
-      />
+      <el-input v-if="question.Type === 'calculation'" v-model="questionForm[question.Id]" disabled />
       <!-- 自动计算 -->
-      <el-input
-        v-if="question.Type === 'class' && question.ClassifyShowType === 1"
-        v-model="questionForm[question.Id]"
-        :disabled="!question.ClassifyEditType"
-      />
-      <el-select
-        v-if="question.Type === 'class' && question.ClassifyShowType === 2"
-        v-model="questionForm[question.Id]"
-        :disabled="!question.ClassifyEditType"
-        @change="(val) => { formItemChange(val, question) }"
-      >
-        <el-option
-          v-for="val in question.TypeValue.split('|')"
-          :key="val"
-          :label="val.trim()"
-          :value="val.trim()"
-        />
+      <el-input v-if="question.Type === 'class' && question.ClassifyShowType === 1" v-model="questionForm[question.Id]"
+        :disabled="!question.ClassifyEditType" />
+      <el-select v-if="question.Type === 'class' && question.ClassifyShowType === 2" v-model="questionForm[question.Id]"
+        :disabled="!question.ClassifyEditType" @change="(val) => { formItemChange(val, question) }">
+        <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()" :value="val.trim()" />
       </el-select>
-      <el-radio-group
-        v-if="question.Type === 'class' && question.ClassifyShowType === 3"
-        v-model="questionForm[question.Id]"
-        :disabled="!question.ClassifyEditType"
-        @change="(val) => { formItemChange(val, question) }"
-      >
-        <el-radio
-          v-for="item of question.TypeValue.split('|')"
-          :key="item.trim()"
-          :label="item.trim()"
-        >
+      <el-radio-group v-if="question.Type === 'class' && question.ClassifyShowType === 3"
+        v-model="questionForm[question.Id]" :disabled="!question.ClassifyEditType"
+        @change="(val) => { formItemChange(val, question) }">
+        <el-radio v-for="item of question.TypeValue.split('|')" :key="item.trim()" :label="item.trim()">
           {{ item.trim() }}
         </el-radio>
       </el-radio-group>
-      
+
       <!-- 自增 -->
-      <el-input
-        v-if="question.Type==='increment'"
-        v-model="questionForm[question.Id]"
-        disabled
-      />
+      <el-input v-if="question.Type === 'increment'" v-model="questionForm[question.Id]" disabled />
       <!-- 数值 -->
       <!-- :precision="2" :step="0.1" :max="10" -->
-      <el-select
-        v-if="question.Type === 'number' && question.TypeValue"
-        v-model="questionForm[question.Id]"
-        clearable
-        @change="((val)=>{formItemChange(val, question)})"
-      >
-        <el-option
-          v-for="val in question.TypeValue.split('|')"
-          :key="val"
-          :label="val"
-          :value="val"
-        />
+      <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]" clearable
+        @change="((val) => { formItemChange(val, question) })">
+        <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
+        <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+          question.CustomUnit }}</template>
+        <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
       </el-select>
-      <el-input
-        v-else-if="question.Type === 'number' && question.DataSource !== 1"
-        v-model="questionForm[question.Id]"
-        type="number"
-        @change="((val)=>{formItemNumberChange(val, question)})"
-      >
-        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}</template>
+      <el-input v-else-if="question.Type === 'number' && question.DataSource !== 1" v-model="questionForm[question.Id]"
+        type="number" @change="((val) => { formItemNumberChange(val, question) })">
+        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+          question.CustomUnit }}</template>
         <template v-else-if="question.ValueType === 2" slot="append">%</template>
       </el-input>
-      <el-input
-        v-else-if="question.Type === 'number' && question.DataSource === 1"
-        v-model="questionForm[question.Id]"
-        type="number"
-        :disabled="question.DataSource === 1"
-      >
-        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}</template>
+      <el-input v-else-if="question.Type === 'number' && question.DataSource === 1" v-model="questionForm[question.Id]"
+        type="number" :disabled="question.DataSource === 1">
+        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
+          question.CustomUnit }}</template>
         <template v-else-if="question.ValueType === 2" slot="append">%</template>
       </el-input>
       <!-- 上传图像 -->
-      <el-upload
-        v-if="question.Type==='upload'"
-        action
-        :accept="question.FileType"
-        :limit="question.ImageCount > 0 ? parseInt(question.ImageCount) : 100"
-        :on-preview="handlePictureCardPreview"
-        :before-upload="handleBeforeUpload"
-        :http-request="uploadScreenshot"
-        list-type="picture-card"
-        :on-remove="handleRemove"
-        :file-list="fileList"
-        :class="{disabled:fileList.length >= question.ImageCount}"
-      >
+      <el-upload v-if="question.Type === 'upload'" action :accept="question.FileType"
+        :limit="question.ImageCount > 0 ? parseInt(question.ImageCount) : 100" :on-preview="handlePictureCardPreview"
+        :before-upload="handleBeforeUpload" :http-request="uploadScreenshot" list-type="picture-card"
+        :on-remove="handleRemove" :file-list="fileList" :class="{ disabled: fileList.length >= question.ImageCount }">
         <i slot="default" class="el-icon-plus" />
         <div slot="file" slot-scope="{file}">
-          <img
-            class="el-upload-list__item-thumbnail"
-            crossorigin="anonymous"
-            :src="OSSclientConfig.basePath + file.url"
-            alt=""
-          >
+          <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :src="OSSclientConfig.basePath + file.url"
+            alt="">
           <span class="el-upload-list__item-actions">
-            <span
-              class="el-upload-list__item-preview"
-              @click="handlePictureCardPreview(file)"
-            >
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
               <i class="el-icon-zoom-in" />
             </span>
 
-            <span
-              v-if="readingTaskState < 2"
-              class="el-upload-list__item-delete"
-              @click="handleRemove(file)"
-            >
+            <span v-if="readingTaskState < 2" class="el-upload-list__item-delete" @click="handleRemove(file)">
               <i class="el-icon-delete" />
             </span>
           </span>
         </div>
       </el-upload>
-      <el-dialog
-        v-if="question.Type==='upload'"
-        append-to-body
-        :visible.sync="imgVisible"
-        width="600px"
-      >
+      <el-dialog v-if="question.Type === 'upload'" append-to-body :visible.sync="imgVisible" width="600px">
         <el-image :src="imageUrl" crossorigin="anonymous" width="100%">
           <div slot="placeholder" class="image-slot">
             加载中<span class="dot">...</span>
@@ -297,7 +190,7 @@ export default {
         this.question.ClassifyAlgorithms
       );
     }
-    
+
     if (this.question.Type === 'upload') {
       if (this.questionForm[this.question.Id]) {
         this.urls = this.questionForm[this.question.Id].split('|')
@@ -372,7 +265,7 @@ export default {
       this.$emit('setFormItemData', obj)
     },
     uploadScreenshot(param) {
-      
+
     },
     handleBeforeUpload(file) {
       // 检测文件类型是否符合要求
@@ -409,34 +302,50 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.my_dialog{
-  .criterion-form-item{
-    ::v-deep .el-form-item__content{
+.my_dialog {
+  .criterion-form-item {
+    ::v-deep .el-form-item__content {
       width: auto;
     }
   }
 }
-.criterion-form-item{
-  .el-form-item{
+
+::v-deep .el-select .el-input__prefix {
+  left: calc(100% - 50px);
+  cursor: pointer;
+}
+
+::v-deep .el-select .el-input__inner {
+  padding-left: 15px;
+  padding-right: 50px;
+}
+
+.criterion-form-item {
+  .el-form-item {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
   }
-  ::v-deep .el-form-item__content{
+
+  ::v-deep .el-form-item__content {
     width: 500px;
   }
-  .el-input{
-    width:100%;
+
+  .el-input {
+    width: 100%;
   }
-  .mb{
+
+  .mb {
     margin-bottom: 0px;
   }
-  .disabled{
+
+  .disabled {
     ::v-deep .el-upload--picture-card {
       display: none;
     }
   }
-  .uploadWrapper{
+
+  .uploadWrapper {
     display: flex;
     flex-direction: column;
     align-items: flex-start;