From d73970117db91eb374fbc969f85fc6a0ffd272b4 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Thu, 29 May 2025 09:57:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms3D/components/ReadPage.vue  |    6 +-
 .../components/customize/QuestionFormItem.vue | 1146 +++++++++++++++++
 .../components/customize/QuestionList.vue     |   62 +-
 .../customize/QuestionTableFormItem.vue       |  576 +++++++++
 4 files changed, 1786 insertions(+), 4 deletions(-)
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionFormItem.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionTableFormItem.vue

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index b019dd7a..c2ae67f1 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -1427,8 +1427,9 @@ export default {
           }
           this.saveCustomAnnotation(annotation)
         }
+        this.$refs[`ecrf_${series.TaskInfo.VisitTaskId}`][0].bindAnnotationToQuestion(annotation)
       }
-
+      
       this.setToolsPassive()
     },
     validMarkName(markName) {
@@ -1468,6 +1469,7 @@ export default {
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
         this.saveCustomAnnotation(annotation)
+        this.$refs[`ecrf_${series.TaskInfo.VisitTaskId}`][0].updateAnnotationToQuestion(annotation)
       }
       this.setToolsPassive()
     },
@@ -1501,7 +1503,7 @@ export default {
         } else {
           throw 'annotation Not allowed to operate'
         }
-      }catch(e){
+      } catch (e) {
         cornerstoneTools.annotation.state.addAnnotation(annotation)
         const renderingEngine = getRenderingEngine(renderingEngineId)
         for (let i = 0; i < this.cells.length; i++) {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionFormItem.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionFormItem.vue
new file mode 100644
index 00000000..add002a1
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionFormItem.vue
@@ -0,0 +1,1146 @@
+<template>
+  <div class="criterion-form-item">
+    <div
+      v-if="!!question.GroupName && question.Type==='group'"
+      style="font-weight: bold;font-size: 16px;margin: 5px 0px;color:#fff;"
+    >
+      {{ question.GroupName }}
+    </div>
+    <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;align-items: center;color:#fff;margin: 10px 0 5px">
+        <span>{{ question.QuestionName }}</span>
+        <el-button size="mini" v-if="readingTaskState<2" @click="openAddTableCol(question)">
+          {{ $t('common:button:add') }}
+        </el-button>
+      </div>
+      <el-table
+        :data="questionForm[question.Id]">
+        <el-table-column :label="$t('CustomizeQuestionFormItem:label:OrderMark')" width="60px" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{question.OrderMark}}{{scope.$index + 1}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :prop="item.Id"
+          :label="item.QuestionName"
+          :key="item.Id"
+          v-for="item of question.TableQuestions.Questions"
+          show-overflow-tooltip
+          :render-header="renderHeader"
+        >
+          <template slot-scope="scope">
+            <span v-if="item.Type === 'upload'">
+              {{scope.row[item.Id] === '' ? '' : scope.row[item.Id] ? scope.row[item.Id].split('|').length : ''}}
+            </span>
+            <span v-else-if="item.Type === 'number'">
+              {{scope.row[item.Id] ? parseFloat(scope.row[item.Id]).toFixed(digitPlaces) : null}}
+            </span>
+            <span v-else>
+              {{scope.row[item.Id]}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+            :label="$t('common:action:action')"
+            show-overflow-tooltip
+            width="100px"
+            v-if="readingTaskState < 2"
+            fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="openAddTableCol(question, scope.$index)">
+              {{$t('common:button:edit')}}
+            </el-button>
+            <el-button type="text" size="mini" v-if="scope.row.IsCurrentTaskAdd === 'True' || !question.IsCopyLesions || isBaseline" @click="deleteTableCol(question, scope.$index)">
+              {{$t('common:button:delete')}}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template v-else>
+      <el-form-item
+        v-if="(question.ShowQuestion===1 && question.ParentTriggerValueList.includes(questionForm[question.ParentId])) || question.ShowQuestion===0"
+        :label="`${question.QuestionName}`"
+        :prop="question.Id"
+        :rules="[
+          { required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && (question.RelevanceValueList.includes(isNaN(parseFloat(questionForm[question.RelevanceId])) ? questionForm[question.RelevanceId] : questionForm[question.RelevanceId].toString())))) && 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 || readingTaskState === 2"
+        />
+        <!-- 多行文本输入框 -->
+        <el-input
+          v-if="question.Type==='textarea'"
+          v-model="questionForm[question.Id]"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          :disabled="readingTaskState === 2"
+        />
+        <!-- 下拉框 -->
+        <el-select
+          v-if="question.Type==='select'"
+          v-model="questionForm[question.Id]"
+          clearable
+          :disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode || readingTaskState === 2"
+          @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"
+            />
+          </template>
+          <template v-else>
+            <el-option
+              v-for="val in question.TypeValue.split('|')"
+              :key="val.trim()"
+              :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)})"
+          :disabled="readingTaskState === 2"
+        >
+          <el-radio
+            v-for="val in question.TypeValue.split('|')"
+            :key="val.trim()"
+            :label="val.trim()"
+          >
+            {{ val.trim() }}
+          </el-radio>
+        </el-radio-group>
+        <!-- 复选框 -->
+        <el-checkbox-group
+          v-if="question.Type==='checkbox'"
+          v-model="questionForm[question.Id]"
+          :disabled="readingTaskState === 2"
+        >
+          <el-checkbox
+            v-for="val in question.TypeValue.split('|')"
+            :key="val"
+            :label="val.trim()"
+          >
+            {{ val.trim() }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <!-- 自动分类 -->
+        <el-input
+          v-if="question.Type === 'class' && question.ClassifyShowType === 1"
+          v-model="questionForm[question.Id]"
+          :disabled="!question.ClassifyEditType || readingTaskState === 2"
+        />
+        <el-select
+          v-if="question.Type === 'class' && question.ClassifyShowType === 2"
+          v-model="questionForm[question.Id]"
+          :disabled="!question.ClassifyEditType || readingTaskState === 2"
+          @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 || readingTaskState === 2"
+          @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 || readingTaskState === 2"
+          v-model="questionForm[question.Id]"
+          @change="(val) => { formItemNumberChange(val, question) }"
+        />
+        <!-- 自动计算 -->
+        <!-- :precision="2" :step="0.1" :max="10" -->
+        <el-input
+          v-if="question.Type==='calculation'"
+          v-model="questionForm[question.Id]"
+          @input="value=value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, '$1')"
+          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) }"
+          :disabled="readingTaskState === 2"
+        >
+          <el-option
+            v-for="val in question.TypeValue.split('|')"
+            :key="val"
+            :label="val.trim()"
+            :value="val.trim()"
+          />
+        </el-select>
+        <template v-if="question.Type === 'number' && (question.ImageMarkEnum === 1 || question.ImageMarkEnum === 2)">
+          <div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
+            <el-input
+              type="number"
+              @change="(val) => { formItemNumberChange(val, question) }"
+              v-model="questionForm[question.Id]"
+              :disabled="readingTaskState === 2"
+              style="width: 150px;"
+            >
+              <template v-if="question.Unit !== 0" slot="append">
+                {{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}
+              </template>
+            </el-input>
+            <!-- 标记 -->
+            <!-- <el-button 
+              v-if="readingTaskState!== 2" 
+              size="mini" 
+              type="text"
+              @click="operateImageMarker({operateStateEnum: 1, question})"
+            >
+              标记
+            </el-button> -->
+            <!-- 查看 -->
+            <!-- <el-button 
+              size="mini" 
+              type="text"
+              @click="operateImageMarker({operateStateEnum: 2, question})"
+            >
+              查看
+            </el-button> -->
+            <!-- 更改 -->
+            <!-- <el-button 
+              v-if="readingTaskState!== 2" 
+              size="mini" 
+              type="text"
+              @click="operateImageMarker({operateStateEnum: 3, question})"
+            >
+              更改
+            </el-button> -->
+            <!-- 移除 -->
+            <!-- <el-button 
+              v-if="readingTaskState!== 2" 
+              size="mini" 
+              type="text"
+              @click="operateImageMarker({operateStateEnum: 4, question})"
+            > 
+              移除
+            </el-button> -->
+            <!-- 保存 -->
+            <!-- <el-button 
+              v-if="readingTaskState!== 2" 
+              size="mini" 
+              type="text"
+              @click="operateImageMarker({operateStateEnum: 5, question})"
+            >
+              保存
+            </el-button> -->
+          </div>
+        </template>
+        <template v-else-if="question.Type === 'number'">
+          <el-input
+            type="number"
+            v-if="question.Type === 'number' && !question.TypeValue && question.DataSource !== 1"
+            @change="(val) => { formItemNumberChange(val, question) }"
+            @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+            v-model="questionForm[question.Id]"
+            :disabled="readingTaskState === 2"
+          >
+            <!-- <template slot="append">1</template> -->
+            <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
+            <template slot="append" v-else-if="question.ValueType === 2">%</template>
+
+          </el-input>
+          <el-input
+            type="number"
+            v-if="question.Type === 'number' && !question.TypeValue && question.DataSource === 1"
+            @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+            :disabled="question.DataSource === 1 || readingTaskState === 2"
+            v-model="questionForm[question.Id]"
+          >
+            <!-- <template slot="append">2</template> -->
+            <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
+            <template slot="append" v-else-if="question.ValueType === 2">%</template>
+          </el-input>
+        </template>
+        <!-- 上传图像 -->
+        <el-upload
+          v-if="question.Type==='upload'"
+          :disabled="readingTaskState === 2"
+          action
+          :accept="question.FileType"
+          :limit="question.ImageCount === 0 ? 100 : question.ImageCount"
+          :on-preview="handlePictureCardPreview"
+          :before-upload="(file) => {return handleBeforeUpload(file, question.FileType)}"
+          :http-request="uploadScreenshot"
+          :on-remove="handleRemove"
+          :file-list="fileList"
+          :class="{disabled:question.ImageCount === 0 ? false : fileList.length >= question.ImageCount}"
+        >
+          <el-button slot="default" class="el-icon-plus" v-if="readingTaskState < 2">
+            {{this.$t('common:button:upload')}}
+          </el-button>
+        </el-upload>
+        <viewer
+          v-if="question.Type==='upload' && imgVisible"
+          :ref="imageUrl"
+          style="margin:0 10px;"
+          :images="[imageUrl]"
+        >
+          <img
+            v-show="false"
+            crossorigin="anonymous"
+            :src="imageUrl"
+            alt="Image"
+          >
+        </viewer>
+      </el-form-item>
+    </template>
+
+    <template v-if="question.Childrens && question.Childrens.length>0 && question.Type !== 'table' && question.Type !== 'basicTable'">
+      <QuestionFormItem
+        v-for="(item) in question.Childrens"
+        :key="item.Id"
+        :question="item"
+        :isBaseline="isBaseline"
+        :reading-task-state="readingTaskState"
+        :question-form="questionForm"
+        :visit-task-id="visitTaskId"
+        :criterion-id="criterionId"
+        :calculationList="calculationList"
+        :questionMarkInfoList="questionMarkInfoList"
+        @formItemNumberChange="formItemNumberChange"
+        @setFormItemData="setFormItemData"
+        @resetFormItemData="resetFormItemData"
+        @getQuestions="getQuestions"
+        @operateImageMarker="operateImageMarker"
+      />
+    </template>
+    <base-model :config="addOrEdit"
+      class="my_dialog"
+      :close-on-click-modal="false"
+      width="400px"
+      append-to-body
+    >
+      <template slot="dialog-body">
+        <el-form
+            ref="tableQsForm"
+            :model="QuestionsForm"
+            v-loading="loading"
+            size="small"
+        >
+          <QuestionTableFormItem
+              v-for="(item) in QuestionsList"
+              :key="item.Id"
+              :question="item"
+              :isBaseline="isBaseline"
+              :reading-task-state="readingTaskState"
+              :question-form="QuestionsForm"
+              :visit-task-id="visitTaskId"
+              :criterion-id="criterionId"
+              :type="addOrEdit.type"
+              :calculationList="calculationList"
+              @formItemTableNumberChange="formItemTableNumberChange"
+              @resetFormItemData="resetTableFormItemData"
+              @setFormItemData="setFormTableItemData" 
+          />
+        </el-form>
+      </template>
+      <template slot="dialog-footer">
+        <el-button
+            size="small"
+            @click="addOrEdit.visible = false"
+        >
+          {{ $t('common:button:cancel') }}
+        </el-button>
+        <!-- 保存 -->
+        <el-button size="small" class="my_upload_btn" @click="handleSave">
+          {{ $t('common:button:save') }}
+        </el-button>
+      </template>
+    </base-model>
+    <!-- 预览文件 -->
+    <el-dialog
+      v-if="previewVisible"
+      :visible.sync="previewVisible"
+      :title="$t('common:button:preview')"
+      :fullscreen="true"
+      append-to-body
+      custom-class="base-dialog-wrapper"
+    >
+      <div
+        class="base-modal-body"
+        style="border: 2px solid #ccc; padding: 10px"
+      >
+        <PreviewFile
+          v-if="previewVisible"
+          :file-path="currentPath"
+          :file-type="currentType"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { deleteReadingRowAnswer, getQuestionCalculateRelation, submitTableQuestion } from '@/api/trials'
+import QuestionTableFormItem from './QuestionTableFormItem'
+import BaseModel from '@/components/BaseModel'
+import PreviewFile from '@/components/PreviewFile/index'
+export default {
+  name: 'QuestionFormItem',
+  components: { QuestionTableFormItem, BaseModel, PreviewFile },
+  props: {
+    isBaseline: {
+      type: Boolean,
+      required: true
+    },
+    questionForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    question: {
+      type: Object,
+      default() {
+        return []
+      }
+    },
+    criterionId: {
+      type: String,
+      required: true
+    },
+    readingTaskState: {
+      type: Number,
+      required: true
+    },
+    visitTaskId: {
+      type: String,
+      default: ''
+    },
+    calculationList: {
+      type: Array,
+      default: []
+    },
+    questionMarkInfoList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      addOrEdit: { visible: false, title: '', width: '400px' },
+      fileList: [],
+      accept: '.png,.jpg,.jpeg',
+      imgVisible: false,
+      imageUrl: '',
+      urls: [],
+      organList: [],
+      QuestionsList: [],
+      QuestionsForm: {},
+      AnswersList: [],
+      loading: false,
+      RowIndex: 0,
+      RowId: null,
+      digitPlaces: 2,
+      CalculationTabelList: [],
+      classArr: [],
+      previewVisible: false,
+      currentPath: '',
+      currentType: ''
+    }
+  },
+  watch: {
+    questionForm: {
+      deep: true,
+      immediate: true,
+      handler(v, oldv) {
+        // try {
+        //   if (!v[this.question.Id] || !oldv[this.question.Id]) return
+        // } catch (e) {
+        // }
+        try {
+          if (!v || !v[this.question.Id] || !oldv || !oldv[this.question.Id])
+            return
+        } catch (e) {
+          console.log(e, v)
+        }
+        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)
+      }
+    },
+    readingTaskState: {
+      deep: true,
+      immediate: true,
+      handler(v, oldv) {
+        // console.log(v)
+      }
+    }
+  },
+  mounted() {
+    var digitPlaces = Number(localStorage.getItem('digitPlaces'))
+    this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
+    // if (this.question.Type === 'class') {
+    //   this.ClassifyAlgorithmsList = JSON.parse(this.question.ClassifyAlgorithms)
+    // }
+    // setInterval(()=> {
+    //   if (this.question.Type === 'class') {
+    //     let o = this.ClassifyAlgorithmsList.find(v => {
+    //       return this.questionForm[this.question.ClassifyQuestionId] >= v.gt && this.questionForm[this.question.ClassifyQuestionId] < v.lt
+    //     })
+    //     if (this.questionForm[this.question.ClassifyQuestionId]) {
+    //       this.questionForm[this.question.Id] = o ? o.label : null
+    //     } else {
+    //       this.questionForm[this.question.Id] = null
+    //     }
+    //   }
+    // }, 300)
+    if (this.question.Type === 'upload') {
+      if (this.questionForm[this.question.Id]) {
+        this.urls = this.questionForm[this.question.Id].split('|')
+        this.fileList = []
+        this.urls.map((url, index) => {
+          this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}`, url: `${url}` })
+        })
+      }
+    }
+    if (this.question.Type === 'table' || this.question.Type === 'baiscTable') {
+      this.getQuestionCalculateRelation()
+      if (this.questionForm[this.question.Id]) {
+        this.QuestionsForm = {}
+        this.question.TableQuestions.Questions.forEach(v => {
+          if (v.Type === 'number') {
+            this.$set(this.QuestionsForm, v.Id, 0)
+          } else {
+            this.$set(this.QuestionsForm, v.Id, '')
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    limitInput(value, a, b) {
+      if (value.indexOf('.') > -1) {
+        if (value.split('.')[1].length >= this.digitPlaces) {
+          this.$set(a, b, parseFloat(value).toFixed(this.digitPlaces))
+        }
+      }
+    },
+    handleBlur(value, a, b) {
+      this.$set(a, b, parseFloat(value).toFixed(this.digitPlaces))
+    },
+    deleteTableCol(row, index) {
+      this.$confirm(this.$t('trials:uploadNonDicoms:message:msg1')).then(() => {
+        const loading = this.$loading({ fullscreen: true })
+        var param = {
+          visitTaskId: this.visitTaskId,
+          questionId: row.Id,
+          rowId: this.questionForm[row.Id][index].RowId
+        }
+        deleteReadingRowAnswer(param)
+          .then(async res => {
+            if (res.IsSuccess) {
+              this.$message.success(this.$t('common:message:deletedSuccessfully'))
+              this.$emit('getQuestions')
+            }
+            loading.close()
+          }).catch(() => {
+          loading.close()
+        })
+      })
+
+    },
+    setFormTableItemData(obj) {
+      this.$set(this.QuestionsForm, obj.key, obj.val)
+      this.classArr.map(i=>{
+        if (i.triggerId === obj.key) {
+          let answer = null
+          let list = JSON.parse(i.classifyAlgorithms)
+          if (i.classifyType === 0) {
+            let o = list.find(v => {
+              return (
+                parseFloat(obj.val) >= parseFloat(v.gt) &&
+                parseFloat(obj.val) < parseFloat(v.lt)
+              )
+            })
+            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 
+          }
+          this.$set(this.QuestionsForm, i.classId, answer)
+        }
+      })
+      // if (this.classArr.length > 0) {
+      //   let qs = this.classArr.find(i=>i.triggerId === obj.key)
+      //   if (!qs) return
+      //   let answer = null
+      //   let list = JSON.parse(qs.classifyAlgorithms)
+      //   if (qs.classifyType === 0) {
+      //     let o = list.find(v => {
+      //       return (
+      //         parseFloat(obj.val) >= parseFloat(v.gt) &&
+      //         parseFloat(obj.val) < parseFloat(v.lt)
+      //       )
+      //     })
+      //     answer = o ? o.label : null 
+      //   } else if (qs.classifyType === 1) {
+      //     let o = list.find(v => {
+      //       return v.val.includes(obj.val)
+      //     })
+      //     answer = o ? o.label : null 
+      //   }
+      //   if (answer !== null) {
+      //     this.$set(this.QuestionsForm, qs.classId, answer)
+      //   }
+      // }
+    },
+    resetTableFormItemData(obj) {
+      this.$set(this.QuestionsForm, obj.key, null)
+    },
+    getQuestions() {
+      this.$emit('getQuestions')
+    },
+    handleSave() {
+      this.$refs.tableQsForm.validate(valid => {
+        if (!valid) return
+        const loading = this.$loading({ fullscreen: true })
+        var answers = []
+        var reg = new RegExp(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/)
+        for (const k in this.QuestionsForm) {
+          if (reg.test(k)) {
+            if (answers.findIndex(i => i.tableQuestionId === k) === -1) {
+              answers.push({ tableQuestionId: k, answer: this.QuestionsForm[k] })
+            }
+          }
+        }
+        if (this.addOrEdit.type === 'edit') {
+          var params = {
+            questionId: this.question.Id,
+            RowIndex: parseInt(this.QuestionsForm.RowIndex),
+            RowId: this.QuestionsForm.RowId,
+            visitTaskId: this.visitTaskId,
+            trialId: this.$route.query.trialId,
+            answerList: answers,
+          }
+        } else {
+          var params = {
+            questionId: this.question.Id,
+            RowIndex: this.questionForm[this.question.Id].length + 1,
+            visitTaskId: this.visitTaskId,
+            trialId: this.$route.query.trialId,
+            answerList: answers,
+          }
+          this.QuestionsForm.RowIndex = this.questionForm[this.question.Id].length + 1
+        }
+        submitTableQuestion(params).then(async res => {
+          this.$message.success(this.$t('common:message:savedSuccessfully'))
+          this.QuestionsForm.RowId = res.Result.RowId
+          this.save()
+          loading.close()
+        }).catch(() => { loading.close() })
+      })
+    },
+    renderHeader(h, obj) {
+      let span = document.createElement('span')
+      span.style.fontSize = '14px'
+      span.innerText = obj.column.label
+      document.body.appendChild(span)
+      obj.column.realWidth = span.getBoundingClientRect().width + 40
+      document.body.removeChild(span)
+      return h('span', obj.column.label)
+    },
+    getQuestionCalculateRelation() {
+      getQuestionCalculateRelation({
+        ReadingQuestionId: this.question.Id
+      }).then(res => {
+        this.CalculationTabelList = res.Result
+      })
+    },
+    save() {
+      this.$refs['tableQsForm'].validate((valid) => {
+        if (!valid) return
+        if (this.addOrEdit.type === 'add') {
+          this.AnswersList.push(this.QuestionsForm)
+        } else {
+          var index = this.AnswersList.findIndex(v => v.RowId === this.QuestionsForm.RowId)
+          this.AnswersList.splice(index, 1, this.QuestionsForm)
+        }
+        this.$emit('setFormItemData', {key: this.question.Id, val: this.AnswersList, question: this.question})
+        this.formItemNumberChange(this.question.Id, true)
+        this.addOrEdit.visible = false
+      })
+    },
+    logic(rules, num = 0) {
+      try {
+        if (rules.CalculateQuestionList.length === 0) {
+          return false
+        }
+        let dataArr = []
+        rules.CalculateQuestionList.forEach((o, i) => {
+          if (i === 0) {
+            if (rules.CustomCalculateMark > 4 && rules.CustomCalculateMark < 10) {
+              switch (rules.CustomCalculateMark) {
+                case 5:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num *= parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  break;
+                case 6:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num += parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  break;
+                case 7:
+                  this.questionForm[o.QuestionId].forEach((q, qi) => {
+                    if (qi === 0) {
+                      num = parseFloat(q[o.TableQuestionId])
+                    } else {
+                      num += parseFloat(q[o.TableQuestionId])
+                    }
+                  })
+                  num = this.questionForm[o.QuestionId].length === 0 ? 0 : num / this.questionForm[o.QuestionId].length
+                  break;
+                case 8:
+                  var arr = []
+                  this.questionForm[o.QuestionId].forEach(q => {
+                    arr.push(q[o.TableQuestionId])
+                  })
+                  num = arr.length === 0 ? 0 : Math.max(...arr)
+                  break;
+                case 9:
+                  var arr = []
+                  this.questionForm[o.QuestionId].forEach(q => {
+                    arr.push(q[o.TableQuestionId])
+                  })
+                  num = arr.length === 0 ? 0 : Math.min(...arr)
+                  break;
+              }
+            } else {
+              num = parseFloat(this.questionForm[o.TableQuestionId])
+              if (!isNaN(num)) {
+                dataArr.push(num)
+              }
+            }
+          } else {
+            switch (rules.CustomCalculateMark) {
+              case 1:
+                num += parseFloat(this.questionForm[o.TableQuestionId])
+                break;
+              case 2:
+                num -= parseFloat(this.questionForm[o.TableQuestionId])
+                break;
+              case 3:
+                num *= parseFloat(this.questionForm[o.TableQuestionId])
+                break;
+              case 4:
+                if (parseFloat(this.questionForm[o.TableQuestionId]) === 0) {
+                  num = 0
+                } else {
+                  num /= parseFloat(this.questionForm[o.TableQuestionId])
+                }
+                break;
+              case 10:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  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;
+                break;
+              case 11:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
+                }
+                num = Math.max(...dataArr);
+                break;
+              case 12:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
+                }
+                num = Math.min(...dataArr);
+                break;
+              case 13:
+               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:
+                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, 0) ? 1 : 0;
+                break;
+            }
+          }
+        })
+      } catch (e) {
+        console.log(e)
+      }
+      if (rules.ValueType === 2) {
+        num = num * 100
+      }
+      if (rules.CustomCalculateMark === 13 || rules.CustomCalculateMark === 14) {
+        return num
+      } else {
+        return num.toFixed(this.digitPlaces)
+      }
+      
+    },
+    formItemNumberChange(questionId, isTable) {
+      if (typeof isTable === 'object') {
+        this.$emit("setFormItemData", { key: isTable.Id, val: questionId, question: isTable });
+      } else {
+        if (isTable) {
+          this.calculationList.forEach((v, i) => {
+            var find = v.CalculateQuestionList.filter(o => {
+              return o.QuestionId === questionId
+            })
+            // find的自动计算值number
+            if (find) {
+              var num = this.logic(v)
+              if (num !== false) {
+                this.$emit('setFormItemData', { key: v.QuestionId, val: num, question: v })
+              }
+            }
+          })
+        } else {
+          this.calculationList.forEach(v => {
+            var find = v.CalculateQuestionList.filter(o => {
+              return o.TableQuestionId === questionId
+            })
+            // find的自动计算值number
+            if (find) {
+              var num = this.logic(v)
+              if (num !== false) {
+                this.$emit('setFormItemData', { key: v.QuestionId, val: num, question: v })
+              }
+            }
+          })
+        }
+      }
+      // this.$emit('formItemNumberChange')
+    },
+    formItemTableNumberChange() {
+      this.question.TableQuestions.Questions.forEach((v) => {
+        if (v.Type === "number" && v.DataSource === 1) {
+          var CalculateQuestions = JSON.parse(v.CalculateQuestions);
+          var num,
+            arr = [];
+          CalculateQuestions.forEach((o, i) => {
+            if (i === 0) {
+              num = parseFloat(this.QuestionsForm[o.TableQuestionId]);
+              arr = [num];
+            } else {
+              switch (v.CustomCalculateMark) {
+                case 1:
+                  num += parseFloat(this.QuestionsForm[o.TableQuestionId]);
+                  break;
+                case 2:
+                  num -= parseFloat(this.QuestionsForm[o.TableQuestionId]);
+                  break;
+                case 3:
+                  num *= parseFloat(this.QuestionsForm[o.TableQuestionId]);
+                  break;
+                case 4:
+                  num /= parseFloat(this.QuestionsForm[o.TableQuestionId]);
+                  break;
+                case 7:
+                  arr.push(parseFloat(this.QuestionsForm[o.TableQuestionId]));
+                  num =
+                    arr.length === 0
+                      ? 0
+                      : arr.reduce((acc, curr) => {
+                          return acc + (typeof curr === "number" ? curr : 0);
+                        }, 0) / arr.length;
+                  break;
+                case 8:
+                  arr.push(parseFloat(this.QuestionsForm[o.TableQuestionId]));
+                  num = arr.length === 0 ? 0 : Math.max(...arr);
+                  break;
+                case 9:
+                  arr.push(parseFloat(this.QuestionsForm[o.TableQuestionId]));
+                  num = arr.length === 0 ? 0 : Math.min(...arr);
+                  // console.log('min', this.questionForm[o.QuestionId], arr, num)
+                  break;
+              }
+            }
+          });
+          this.$set(this.QuestionsForm, v.Id, num.toString());
+        }
+      });
+    },
+    openAddTableCol(row, index) {
+      this.addOrEdit.visible = true
+      this.addOrEdit.title = row.QuestionName + this.$t('trials:readingUnit:qsList:title:tableQs')
+      this.QuestionsList = row.TableQuestions.Questions
+      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.AnswersList = row.TableQuestions.Answers
+      if (!index && index !== 0) {
+        this.addOrEdit.type = 'add'
+        this.QuestionsForm = {}
+      } else {
+        this.addOrEdit.type = 'edit'
+        this.QuestionsForm = Object.assign({}, this.questionForm[row.Id][index])
+      }
+    },
+    formNumberItemChange(v) {
+      this.$emit('setFormItemData', { key: v.QuestionId, val: num, question: v })
+    },
+    formItemChange(v, question) {
+      if (question.Childrens.length > 0) {
+        this.resetChild(question.Childrens)
+      }
+      if (question.TableQuestionType === 1 && question.RelationQuestions.length > 0) {
+        var index = this.organList.findIndex(item => item[question.DataTableColumn] === v)
+        if (index < 0) return
+        var selected = this.organList[index]
+        this.question.RelationQuestions.map(qs => {
+          var val = selected[qs.DataTableColumn]
+          // if (typeof val === 'boolean') {
+          //   // val = String(val)
+          // }
+          this.$emit('setFormItemData', { key: qs.Id, val: val, question: qs })
+        })
+      } else {
+        this.$emit('setFormItemData', { key: question.Id, val: v, question: question })
+      }
+    },
+    resetChild(obj) {
+      obj.forEach(i => {
+        this.$emit('resetFormItemData', i.Id)
+        if (i.Childrens && i.Childrens.length > 0) {
+          this.resetChild(i.Childrens)
+        }
+      })
+    },
+    resetFormItemData(v) {
+      this.$emit('resetFormItemData', v)
+    },
+    setFormItemData(obj) {
+      this.$emit('setFormItemData', obj)
+    },
+    operateImageMarker(obj) {
+      this.$emit('operateImageMarker', obj)
+    },
+    async uploadScreenshot(param) {
+      if (!this.visitTaskId) return
+      const loading = this.$loading({
+        target: document.querySelector('.ecrf-wrapper'),
+        fullscreen: false,
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading'
+      })
+      var fileName = param.file.name
+      let file = await this.fileToBlob(param.file)
+      let res = await this.OSSclient.put(`/${this.$route.query.trialId}/Customize/${this.visitTaskId}/${fileName}`, file)
+      this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${this.fileList.length + 1}`, url: this.$getObjectName(res.url) })
+      this.urls.push(this.$getObjectName(res.url))
+      this.$emit("setFormItemData", { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
+      this.$set(this.QuestionsForm, this.question.Id, this.urls.length > 0 ? this.urls.join('|') : '')
+      loading.close()
+      // uploadReadingAnswerImage(this.$route.query.trialId, this.visitTaskId, formData).then(res => {
+      //   if (res.IsSuccess) {
+      //     this.fileList.push({ url: `/api/${res.Result.Path}` })
+      //     this.urls.push(res.Result.Path)
+      //     this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
+      //   }
+      //   loading.close()
+      // }).catch(() => {
+      //   loading.close()
+      // })
+    },
+    handleBeforeUpload(file, accept) {
+      // 检测文件类型是否符合要求
+      if (this.checkFileSuffix(file.name, accept) || accept === '-1') {
+        return true
+      } else {
+        const msg = this.$t('trials:adReview:title:msg4').replace('xxx', accept)
+        this.$alert(msg)
+        return false
+      }
+    },
+    checkFileSuffix(fileName, accept) {
+      var index = fileName.lastIndexOf('.')
+      var suffix = fileName.substring(index + 1, fileName.length)
+      if (accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
+        return false
+      } else {
+        return true
+      }
+    },
+    // 预览图片
+    handlePictureCardPreview(file) {
+      var suffix = file.url.substring(file.url.lastIndexOf(".")+1)
+      suffix = suffix ? suffix.toLowerCase() : ''
+      if (suffix === 'doc' || suffix === 'docx' || suffix === 'pdf'){
+        // window.open(this.OSSclientConfig.basePath + file.url,'_blank')
+        this.currentPath = file.url
+        this.currentType = suffix
+        this.previewVisible = true
+      }else{
+        this.imageUrl = this.OSSclientConfig.basePath + file.url
+        this.imgVisible = true
+        this.$nextTick(()=>{
+          this.$refs[this.imageUrl].$viewer.show()
+        })
+      }
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      if (file && file.status === "success") {
+        this.imageUrl = ''
+        this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
+        this.fileList.forEach((i,index)=>{
+          i.name = `${this.$t('trials:emailManageCfg:title:fileName')}${index+ 1}`
+        })
+        this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
+        this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
+        this.$set(this.QuestionsForm, this.question.Id, this.urls.length > 0 ? this.urls.join('|') : '')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.my_dialog{
+  .criterion-form-item{
+    width: 100%;
+    ::v-deep .el-form-item__content{
+      width: auto;
+    }
+    //::v-deep .el-input-goup__append{
+    //  background-color: transparent;
+    //  color: #ddd;
+    //  border: 1px solid #5e5e5e;
+    //}
+  }
+}
+::v-deep .el-form-item__label{
+  color: #c3c3c3;
+}
+::v-deep .el-radio__label{
+  color: #c3c3c3;
+}
+::v-deep .el-input-group__append{
+  background: #000;
+  color: #ddd;
+  border: 1px solid #5e5e5e;
+}
+::v-deep .el-input .el-input__inner{
+  background-color: transparent;
+  color: #ddd;
+  border: 1px solid #5e5e5e;
+}
+.criterion-form-item{
+  ::v-deep .criterion-form-item .el-form-item{
+    display: block;
+    .el-form-item__label{
+      display: block;
+      color: #c8c8c8;
+      float: none;
+      text-align: left;
+    }
+  }
+  .el-form-item{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .el-input{
+    width:100%;
+  }
+.mb{
+  margin-bottom: 0px;
+}
+.disabled{
+  ::v-deep .el-upload--picture-card {
+    display: none;
+  }
+}
+.uploadWrapper{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar{
+  height: 10px!important;
+}
+::v-deep .el-table__fixed-right::before{
+  display: none;
+}
+::v-deep .el-upload-list__item-name{
+  color: #0a84ff;
+  .el-icon-document{
+    color: #0a84ff;
+  }
+}
+</style>
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList.vue
index e4b1d01c..dd1fe0b9 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList.vue
@@ -32,9 +32,12 @@
             :reading-task-state="readingTaskState"
             :criterion-id="criterionId"
             :calculation-list="calculationList"
+            :questionMarkInfoList="questionMarkInfoList"
             :is-baseline="isBaseLineTask"
             @resetFormItemData="resetFormItemData"
             @setFormItemData="setFormItemData"
+            @getQuestions="getQuestions"
+            @operateImageMarker="operateImageMarker"
           />
         </template>
 
@@ -77,7 +80,7 @@
 import { getCustomTableQuestionAnswer, changeDicomReadingQuestionAnswer, submitVisitTaskQuestionsInDto, getQuestionCalculateRelation } from '@/api/trials'
 import { setSkipReadingCache, resetReadingTask } from '@/api/reading'
 import const_ from '@/const/sign-code'
-import QuestionFormItem from '@/views/trials/trials-panel/reading/dicoms/customize/CustomizeQuestionFormItem'
+import QuestionFormItem from './QuestionFormItem'
 import SignForm from '@/views/trials/components/newSignForm'
 export default {
   name: 'EcrfList',
@@ -112,7 +115,11 @@ export default {
       calculationList: [],
       taskInfo: null,
       isBaseLineTask: false,
-      rerender: true
+      rerender: true,
+      questionMarkInfoList: [],
+      operateStateEnum: null, // 1：标记；2：查看；3：更改；4：移除；5：保存
+      operateQuestionId: '',
+      operateRowId: ''
     }
   },
   mounted() {
@@ -153,6 +160,7 @@ export default {
             }
           })
           this.questions = res.Result.SinglePage
+          this.questionMarkInfoList = res.OtherInfo.QuestionMarkInfoList
           this.loading = false
         }
       } catch (e) {
@@ -325,6 +333,56 @@ export default {
         }
       })
     },
+    operateImageMarker(obj) {
+      if (obj.operateStateEnum === 1) {
+        // 添加标记
+
+      } else if (obj.operateStateEnum === 2) {
+        // 查看标记
+        this.$emit('')
+      } else if (obj.operateStateEnum === 3) {
+        // 更改标记
+      } else if (obj.operateStateEnum === 4) {
+        // 移除标记
+      } else if (obj.operateStateEnum === 5) {
+        // 保存标记
+      }
+      this.operateStateEnum = obj.operateStateEnum
+      this.operateQuestionId = obj.question.Id
+    },
+    bindAnnotationToQuestion(annotation) {
+      console.log('bindAnnotationToQuestion', annotation)
+      if (this.operateStateEnum === 1 && this.operateQuestionId) {
+        let i = this.questionMarkInfoList.findIndex(i=>i.questionId === this.operateQuestionId)
+        if (i === -1) {
+          let markInfo = {
+            id: '',
+            questionId: this.operateQuestionId,
+            instanceId: annotation.instanceId,
+            seriesId: annotation.seriesId,
+            studyId: annotation.studyId,
+            markTool: '',
+            picturePath: '',
+            numberOfFrames: '',
+            measureData: annotation
+          }
+          this.questionMarkInfoList.push(markInfo)
+        } else {
+          this.questionMarkInfoList[i].instanceId = annotation.instanceId
+          this.questionMarkInfoList[i].seriesId = annotation.seriesId
+          this.questionMarkInfoList[i].studyId = annotation.studyId
+          this.questionMarkInfoList[i].markTool = ''
+          this.questionMarkInfoList[i].picturePath = ''
+          this.questionMarkInfoList[i].numberOfFrames = ''
+          this.questionMarkInfoList[i].measureData = annotation
+        }
+      }
+    },
+    updateAnnotationToQuestion(annotation) {
+      let i = this.questionMarkInfoList.findIndex(i=>i.measureData && i.measureData.annotationUID === annotation.annotationUID)
+      if (i === -1) return
+      this.questionMarkInfoList[i].measureData = annotation
+    },
     async resetForm() {
       const confirm = await this.$confirm(
         this.$t('trials:dicomReading:message:confirmReset1'),
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionTableFormItem.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionTableFormItem.vue
new file mode 100644
index 00000000..547c1f0f
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionTableFormItem.vue
@@ -0,0 +1,576 @@
+<template>
+  <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="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:select'), 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 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+        />
+        <!-- 多行文本输入框 -->
+        <el-input
+          v-if="question.Type==='textarea'"
+          v-model="questionForm[question.Id]"
+          type="textarea"
+          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+          :autosize="{ minRows: 2, maxRows: 4}"
+        />
+        <!-- 下拉框 -->
+        <el-select
+          v-if="question.Type==='select'"
+          v-model="questionForm[question.Id]"
+          clearable
+          :disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+          @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"
+            />
+          </template>
+          <template v-else>
+            <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]"
+          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+          @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'"
+          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+          v-model="questionForm[question.Id]"
+        >
+          <el-checkbox
+            v-for="val in question.TypeValue.split('|')"
+            :key="val"
+            :label="val"
+          >
+            {{ val }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <!-- 自动分类 -->
+        <el-input
+          v-if="question.Type === 'class' && question.ClassifyShowType === 1"
+          v-model="questionForm[question.Id]"
+        />
+        <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()"
+          >
+            {{ item.trim() }}
+          </el-radio>
+        </el-radio-group>
+        <!-- 自动计算 -->
+        <!-- :precision="2" :step="0.1" :max="10" -->
+        <el-input
+          v-if="question.Type==='calculation'"
+          v-model="questionForm[question.Id]"
+          oninput="value=value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, '$1')"
+          disabled
+        />
+        <!-- 自增 -->
+        <el-input
+          v-if="question.Type==='increment'"
+          v-model="questionForm[question.Id]"
+          disabled
+        />
+        <!-- 数值 -->
+        <!-- :precision="2" :step="0.1" :max="10" -->
+        <el-input
+          type="number"
+          v-if="question.Type === 'number' && question.DataSource !== 1"
+          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')"
+          @change="((val)=>{formItemNumberChange(val, question)})"
+          @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+          v-model="questionForm[question.Id]"
+        >
+          <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
+        </el-input>
+        <el-input
+          type="number"
+          v-if="question.Type === 'number' && question.DataSource === 1"
+          :disabled="question.DataSource === 1"
+          @blur="handleCalculationBlur(calculationValue)"
+          v-model="calculationValue"
+        >
+          <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
+        </el-input>
+        <!-- 上传图像 -->
+        <el-upload
+          v-if="question.Type==='upload'"
+          action
+          :accept="question.FileType"
+          :limit="question.ImageCount === 0 ? 100 : question.ImageCount"
+          :on-preview="handlePictureCardPreview"
+          :before-upload="handleBeforeUpload"
+          :http-request="uploadScreenshot"
+          list-type="picture-card"
+          :on-remove="handleRemove"
+          :file-list="fileList"
+          :class="{disabled: question.ImageCount === 0 ? false : fileList.length >= question.ImageCount}"
+        >
+          <i slot="default" class="el-icon-plus" />
+          <div slot="file" slot-scope="{file}">
+            <viewer
+              :ref="file.url"
+              :images="[imageUrl]"
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+              "
+            >
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="OSSclientConfig.basePath + file.url"
+                crossOrigin="anonymous"
+                alt=""
+                style="max-width: 100%; max-height: 100%"
+              />
+              <span class="el-upload-list__item-actions">
+                <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)"
+                >
+                  <i class="el-icon-delete" />
+                </span>
+              </span>
+            </viewer>
+          </div>
+        </el-upload>
+        <el-dialog
+          v-if="question.Type==='upload'"
+          append-to-body
+          :visible.sync="imgVisible"
+          width="600px"
+        >
+          <el-image :src="imageUrl" width="100%">
+            <div slot="placeholder" class="image-slot">
+              {{$t('trials:readingUnit:qsList:message:loading')}}<span class="dot">...</span>
+            </div>
+          </el-image>
+        </el-dialog>
+      </el-form-item>
+  </div>
+</template>
+<script>
+export default {
+  name: 'QuestionTableFormItem',
+  props: {
+    isBaseline: {
+      type: Boolean,
+      required: true
+    },
+    questionForm: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    question: {
+      type: Object,
+      default() {
+        return []
+      }
+    },
+    criterionId: {
+      type: String,
+      required: true
+    },
+    calculationList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    readingTaskState: {
+      type: Number,
+      required: true
+    },
+    visitTaskId: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+  computed: {
+    calculationValue: {
+      get() {
+        return this.questionForm[this.question.Id]
+      },
+      set() {
+
+      }
+    }
+  },
+  data() {
+    return {
+      addOrEdit: { visible: false, title: '' },
+      fileList: [],
+      accept: '.png,.jpg,.jpeg',
+      imgVisible: false,
+      imageUrl: '',
+      urls: [],
+      organList: [],
+      QuestionsList: [],
+      QuestionsForm: {},
+      digitPlaces: 2
+    }
+  },
+  watch: {
+    questionForm: {
+      deep: true,
+      immediate: true,
+      handler(v, oldv) {
+        // try {
+        //   if (!v[this.question.Id] || !oldv[this.question.Id]) return
+        // } catch (e) {
+        // }
+        // this.formItemNumberChange(this.question.Id, false)
+      }
+    },
+  },
+  mounted() {
+    var digitPlaces = Number(localStorage.getItem('digitPlaces'))
+    this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
+    if (this.question.Type === 'upload') {
+      if (this.questionForm[this.question.Id]) {
+        this.urls = this.questionForm[this.question.Id].split('|')
+        this.fileList = []
+        this.urls.map(url => {
+          this.fileList.push({ name: '', url: `${url}` })
+        })
+      }
+    }
+    if (this.type === 'edit') return
+  },
+  methods: {
+    save() {
+    },
+    openAddTableCol(row) {
+      this.addOrEdit.visible = true
+      this.addOrEdit.title = row.QuestionName + this.$t('trials:readingUnit:qsList:title:tableQs')
+      this.QuestionsList = row.TableQuestions.Questions
+      this.AnswersList = row.TableQuestions.Answers
+      this.QuestionsForm = {}
+    },
+    formItemChange(v, question) {
+      if (question.Childrens && question.Childrens.length > 0) {
+        this.resetChild(question.Childrens)
+      }
+      if (question.TableQuestionType === 1 && question.RelationQuestions.length > 0) {
+        var index = this.organList.findIndex(item => item[question.DataTableColumn] === v)
+        if (index < 0) return
+        var selected = this.organList[index]
+        this.question.RelationQuestions.map(qs => {
+          var val = selected[qs.DataTableColumn]
+          // if (typeof val === 'boolean') {
+          //   // val = String(val)
+          // }
+          this.$emit('setFormItemData', { key: qs.Id, val: val, question: qs })
+        })
+      } else {
+        this.$emit('setFormItemData', { key: question.Id, val: v, question: question })
+      }
+    },
+    handleBlur(value, a, b) {
+      this.$set(a, b, parseFloat(value).toFixed(this.digitPlaces))
+    },
+    handleCalculationBlur(v) {
+      this.calculationValue = parseFloat(v).toFixed(this.digitPlaces)
+    },
+    limitInput(value, q) {
+      if (value.indexOf('.') > -1) {
+        if (value.split('.')[1].length >= this.digitPlaces) {
+          this.$set(this.questionForm, q.Id, parseFloat(value).toFixed(this.digitPlaces))
+        }
+      } else {
+      }
+    },
+    logic(rules, num = 0) {
+      try {
+        if (rules.CalculateQuestionList.length === 0) {
+          return false
+        }
+        let dataArr = []
+        var count = 0
+        var maxList = [], minList = []
+        rules.CalculateQuestionList.forEach((o, i) => {
+          if (rules.CustomCalculateMark > 4 && rules.CustomCalculateMark < 10) {
+            if (i !== 0) {
+              switch (rules.CustomCalculateMark) {
+                case 7:
+                  count += parseFloat(this.questionForm[o.TableQuestionId])
+                  if (i === rules.CalculateQuestionList.length - 1) {
+                    num = count / rules.CalculateQuestionList.length
+                  }
+                  break;
+                case 8:
+                  maxList.push(this.questionForm[o.TableQuestionId])
+                  if (i === rules.CalculateQuestionList.length - 1) {
+                    num = Math.max(...maxList)
+                  }
+                  break;
+                case 9:
+                  minList.push(this.questionForm[o.TableQuestionId])
+                  if (i === rules.CalculateQuestionList.length - 1) {
+                    num = Math.min(...minList)
+                  }
+                  break;
+              }
+            } else {
+              maxList.push(this.questionForm[o.TableQuestionId])
+              minList.push(this.questionForm[o.TableQuestionId])
+              count = parseFloat(this.questionForm[o.TableQuestionId])
+              num = parseFloat(this.questionForm[o.TableQuestionId])
+              dataArr.push(num)
+            }
+          } else {
+            if (i !== 0) {
+              switch (rules.CustomCalculateMark) {
+                case 1:
+                  num += parseFloat(this.questionForm[o.TableQuestionId])
+                  break;
+                case 2:
+                  num -= parseFloat(this.questionForm[o.TableQuestionId])
+                  break;
+                case 3:
+                  num *= parseFloat(this.questionForm[o.TableQuestionId])
+                  break;
+                case 4:
+                  if (parseFloat(this.questionForm[o.TableQuestionId]) === 0) {
+                    num = 0
+                  } else {
+                    num /= parseFloat(this.questionForm[o.TableQuestionId])
+                  }
+                  break;
+                case 10:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  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;
+                break;
+              case 11:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
+                }
+                num = Math.max(...dataArr);
+                break;
+              case 12:
+                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
+                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
+                }
+                num = Math.min(...dataArr);
+                break;
+              }
+            } else {
+              num = parseFloat(this.questionForm[o.TableQuestionId])
+            }
+          }
+        })
+      } catch (e) {
+        console.log(e)
+      }
+      if (rules.ValueType === 2) {
+        num = num * 100
+      }
+      return num.toFixed(this.digitPlaces)
+    },
+    formItemNumberChange(v, question) {
+      this.$emit('formItemTableNumberChange', v, question)
+      // this.$emit('formItemTableNumberChange', v, question)
+    },
+    resetChild(obj) {
+      obj.forEach(i => {
+        this.$emit('resetFormItemData', i.Id)
+        if (i.Childrens && i.Childrens.length > 0) {
+          this.resetChild(i.Childrens)
+        }
+      })
+    },
+    resetFormItemData(v) {
+      this.$emit('resetFormItemData', v)
+    },
+    setFormItemData(obj) {
+      this.$emit('setFormItemData', obj)
+    },
+    async uploadScreenshot(param) {
+      if (!this.visitTaskId) return
+      const loading = this.$loading({
+        target: document.querySelector('.el-dialog'),
+        fullscreen: false,
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading'
+      })
+      var trialId = this.$route.query.trialId
+      var subjectId = this.$route.query.trialId
+      var file = await this.fileToBlob(param.file)
+      const res = await this.OSSclient.put(`/${trialId}/Read/${subjectId}/Visit/${param.file.name}`, file)
+      this.fileList.push({ name: param.file.name, path: this.$getObjectName(res.url), url: this.$getObjectName(res.url)})
+      this.urls.push(this.$getObjectName(res.url))
+      this.$emit('setFormItemData', { key:this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
+      loading.close()
+    },
+    handleBeforeUpload(file) {
+      // 检测文件类型是否符合要求
+      if (this.checkFileSuffix(file.name)) {
+        // this.fileList = []
+        return true
+      } else {
+        let msg = this.$t(
+          "trials:readingUnit:qsList:message:imageFormat"
+        ).replace("xxx", this.question.FileType)
+        this.$alert(msg)
+        return false
+      }
+    },
+    checkFileSuffix(fileName) {
+      var index = fileName.lastIndexOf('.')
+      var suffix = fileName.substring(index + 1, fileName.length)
+      if (this.question.FileType.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
+        return false
+      } else {
+        return true
+      }
+    },
+    // 预览图片
+    handlePictureCardPreview(file) {
+      var suffix = file.url.substring(file.url.lastIndexOf(".")+1)
+      suffix = suffix ? suffix.toLowerCase() : ''
+      if (suffix === 'doc' || suffix === 'docx' || suffix === 'pdf'){
+        window.open(this.OSSclientConfig.basePath + file.url,'_blank')
+      }else{
+        this.imageUrl = this.OSSclientConfig.basePath + file.url
+        // this.imgVisible = true
+        this.$refs[file.url].$viewer.show()
+      }
+      
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      this.imageUrl = ''
+      this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
+      this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
+      this.$emit('setFormItemData', { key:this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.my_dialog{
+  .criterion-form-item{
+    ::v-deep .el-form-item__content{
+      width: auto;
+    }
+  }
+}
+.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;
+    align-items: flex-start;
+  }
+}
+</style>