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,28 +20,25 @@
         </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="
+      <el-form-item v-if="
         (question.ShowQuestion === 1 &&
           !!~question.ParentTriggerValueList.indexOf(
             questionForm[question.ParentId]
           )) ||
         question.ShowQuestion === 0
-        "
-        :label="`${question.QuestionName}`"
-        :prop="question.Id"
-        :rules="[
+      " :label="`${question.QuestionName}`" :prop="question.Id" :rules="[
         {
           required:
             (question.IsRequired === 0 ||
@@ -59,131 +52,71 @@
           message: this.$t('common:ruleMessage:specify'),
           trigger: ['blur', 'change'],
         },
-        ]"
-        :class="[
+      ]" :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="
-            (question.TableQuestionType === 2 ||
+        <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="
+          <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="
+          <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"
-            />
+          ">
+            <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="
+    <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"
-      />
+    ">
+      <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>
             <!-- 保存 -->
@@ -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

@@ -3,223 +3,116 @@
 
     <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':'']"
-    >
+      :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>
@@ -416,26 +309,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;