308 lines
		
	
	
		
			9.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			308 lines
		
	
	
		
			9.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						||
  <div v-loading="loading">
 | 
						||
    <div style="padding: 0 20px;">
 | 
						||
      <div class="info-content" v-html="crcMessageInfo.TalkContent" />
 | 
						||
    </div>
 | 
						||
    <div>
 | 
						||
      <div style="padding: 10px;background: #f3f3f3;border-radius: 10px;margin-top: 10px">
 | 
						||
        <div style="display:flex;margin-bottom: 10px;justify-content: space-between;align-items: center">
 | 
						||
          <div>
 | 
						||
            <!-- 请准确核实后录入当前访视的实际影像检查记录: -->
 | 
						||
            {{ $t('trials:consistencyCheck:title:message20') }}
 | 
						||
          </div>
 | 
						||
          <!-- 添加 -->
 | 
						||
          <el-button type="primary" size="mini" @click="addMsg">{{ $t('trials:consistencyCheck:title:add') }}</el-button>
 | 
						||
        </div>
 | 
						||
        <el-table
 | 
						||
          :data="msgList"
 | 
						||
        >
 | 
						||
          <el-table-column type="index" width="40" />
 | 
						||
          <!-- 检查日期 -->
 | 
						||
          <el-table-column
 | 
						||
            prop=""
 | 
						||
            :label="$t('trials:consistencyCheck:title:studyDate')"
 | 
						||
            show-overflow-tooltip
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.StudyDate }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 检查类型 -->
 | 
						||
          <el-table-column
 | 
						||
            prop=""
 | 
						||
            :label="$t('trials:consistencyCheck:title:studyModality')"
 | 
						||
            show-overflow-tooltip
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ scope.row.Modality }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 已提交 -->
 | 
						||
          <el-table-column
 | 
						||
            prop=""
 | 
						||
            :label="$t('trials:consistencyCheck:title:submitted')"
 | 
						||
            show-overflow-tooltip
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              {{ $fd('YesOrNo', scope.row.IsJoin) }}
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <!-- 实际存在 -->
 | 
						||
          <el-table-column
 | 
						||
            prop=""
 | 
						||
            :label="$t('trials:consistencyCheck:title:existed')"
 | 
						||
            show-overflow-tooltip
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              <el-switch
 | 
						||
                v-model="scope.row.IsCheck"
 | 
						||
                :disabled="!scope.row.IsJoin"
 | 
						||
                @change="compareStudy"
 | 
						||
              />
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
          <el-table-column
 | 
						||
            prop=""
 | 
						||
            width="100px"
 | 
						||
            :label="$t('common:action:action')"
 | 
						||
            fixed="right"
 | 
						||
          >
 | 
						||
            <template slot-scope="scope">
 | 
						||
              <!-- 删除 -->
 | 
						||
              <el-button
 | 
						||
                :disabled="scope.row.IsJoin"
 | 
						||
                size="small"
 | 
						||
                type="text"
 | 
						||
                @click="moveMsg(scope.$index)"
 | 
						||
              >
 | 
						||
                {{ $t('trials:consistencyCheck:title:delete') }}
 | 
						||
              </el-button>
 | 
						||
            </template>
 | 
						||
          </el-table-column>
 | 
						||
        </el-table>
 | 
						||
        <el-form
 | 
						||
          ref="revenusForm"
 | 
						||
          size="small"
 | 
						||
          label-width="400px"
 | 
						||
          :label-position="'top'"
 | 
						||
          :rules="rules"
 | 
						||
          :model="form"
 | 
						||
        >
 | 
						||
          <!-- IRC与实际情况影像检查不一致的原因为: -->
 | 
						||
          <el-form-item v-if="isLackOf" :label="$t('trials:consistencyCheck:title:title1')" prop="reason">
 | 
						||
            <el-checkbox-group v-model="form.reason" style="display: flex;flex-direction: column">
 | 
						||
              <el-checkbox style="display: block" :label="$t('trials:consistencyCheck:title:message9')">
 | 
						||
                {{ $t('trials:consistencyCheck:title:message9') }}
 | 
						||
              </el-checkbox>
 | 
						||
              <el-checkbox style="display: block" :label="$t('trials:consistencyCheck:title:message10')">
 | 
						||
                {{ $t('trials:consistencyCheck:title:message10') }}
 | 
						||
              </el-checkbox>
 | 
						||
              <el-checkbox style="display: block" :label="$t('trials:consistencyCheck:title:message11')">
 | 
						||
                {{ $t('trials:consistencyCheck:title:message11') }}
 | 
						||
              </el-checkbox>
 | 
						||
            </el-checkbox-group>
 | 
						||
          </el-form-item>
 | 
						||
        </el-form>
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
    <div class="function">
 | 
						||
      <!-- 发送 -->
 | 
						||
      <el-button
 | 
						||
        type="primary"
 | 
						||
        @click="handleReply"
 | 
						||
      >
 | 
						||
        {{ $t('trials:consistencyCheck:button:sendMessage') }}
 | 
						||
      </el-button>
 | 
						||
    </div>
 | 
						||
    <!-- 添加检查 -->
 | 
						||
    <el-dialog
 | 
						||
      v-if="studyVisible"
 | 
						||
      v-dialogDrag
 | 
						||
      :visible.sync="studyVisible"
 | 
						||
      :close-on-click-modal="false"
 | 
						||
      append-to-body
 | 
						||
      custom-class="base-dialog-wrapper"
 | 
						||
      :width="'500px'"
 | 
						||
      :title="$t('trials:consistencyCheck:title:addStudy')"
 | 
						||
    >
 | 
						||
      <el-form>
 | 
						||
        <div class="base-dialog-body">
 | 
						||
          <!-- 检查日期 -->
 | 
						||
          <el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyDate')">
 | 
						||
            <el-date-picker
 | 
						||
              v-model="typeInfo.StudyDate"
 | 
						||
              style="width: 100%"
 | 
						||
              type="date"
 | 
						||
              value-format="yyyy-MM-dd"
 | 
						||
            />
 | 
						||
          </el-form-item>
 | 
						||
          <!-- 检查类型 -->
 | 
						||
          <el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyModality')">
 | 
						||
            <el-select
 | 
						||
              v-model="typeInfo.Modality"
 | 
						||
              style="width: 100%"
 | 
						||
            >
 | 
						||
              <el-option v-for="item of $d.Modality" :label="item.raw.Value" :value="item.value" />
 | 
						||
            </el-select>
 | 
						||
          </el-form-item>
 | 
						||
        </div>
 | 
						||
        <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
 | 
						||
          <el-form-item style="text-align:right;">
 | 
						||
            <el-button size="small" type="primary" @click="handleCancel"> {{ $t('common:button:cancel') }}</el-button>
 | 
						||
            <el-button size="small" type="primary" @click="handleSave">
 | 
						||
              {{ $t('common:button:save') }}
 | 
						||
            </el-button>
 | 
						||
          </el-form-item>
 | 
						||
        </div>
 | 
						||
      </el-form>
 | 
						||
    </el-dialog>
 | 
						||
  </div>
 | 
						||
</template>
 | 
						||
 | 
						||
<script>
 | 
						||
 | 
						||
export default {
 | 
						||
  name: 'CrcSendMessage',
 | 
						||
  props: {
 | 
						||
    crcMessageInfo: {
 | 
						||
      type: Object,
 | 
						||
      default() {
 | 
						||
        return {
 | 
						||
          TalkContent: null
 | 
						||
        }
 | 
						||
      }
 | 
						||
    }
 | 
						||
  },
 | 
						||
  data() {
 | 
						||
    return {
 | 
						||
      loading: false,
 | 
						||
      msgList: [],
 | 
						||
      studyVisible: false,
 | 
						||
      typeInfo: {
 | 
						||
        StudyDate: null,
 | 
						||
        Modality: null,
 | 
						||
        IsJoin: false,
 | 
						||
        IsCheck: true
 | 
						||
      },
 | 
						||
      isLackOf: false,
 | 
						||
      EDCList: [],
 | 
						||
      IRCList: [],
 | 
						||
      form: {
 | 
						||
        reason: []
 | 
						||
      },
 | 
						||
      rules: {
 | 
						||
        reason: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
 | 
						||
      }
 | 
						||
    }
 | 
						||
  },
 | 
						||
  mounted() {
 | 
						||
    this.crcMessageInfo.ParamInfoList.forEach(v => {
 | 
						||
      this.msgList.push({ ...v, IsJoin: true, Ischeck: false })
 | 
						||
    })
 | 
						||
    this.compareStudy()
 | 
						||
  },
 | 
						||
  methods: {
 | 
						||
    compareStudy() {
 | 
						||
      var isLackOf = false
 | 
						||
      this.IRCList = []
 | 
						||
      this.msgList.forEach(v => {
 | 
						||
        if (v.IsJoin !== v.IsCheck) {
 | 
						||
          isLackOf = true
 | 
						||
          this.IRCList.push(v)
 | 
						||
        }
 | 
						||
      })
 | 
						||
      this.isLackOf = isLackOf
 | 
						||
    },
 | 
						||
    handleCancel() {
 | 
						||
      this.studyVisible = false
 | 
						||
      this.typeInfo = {
 | 
						||
        StudyDate: null,
 | 
						||
        Modality: null
 | 
						||
      }
 | 
						||
    },
 | 
						||
    handleSave() {
 | 
						||
      if (!this.typeInfo.StudyDate || !this.typeInfo.Modality) {
 | 
						||
        this.$alert(this.$t('trials:consistencyCheck:title:title2'))// '请选择检查日期和检查类型'
 | 
						||
        return
 | 
						||
      }
 | 
						||
      this.msgList.push({ ...this.typeInfo })
 | 
						||
      this.compareStudy()
 | 
						||
      this.studyVisible = false
 | 
						||
      this.typeInfo = {
 | 
						||
        StudyDate: null,
 | 
						||
        Modality: null,
 | 
						||
        IsJoin: false,
 | 
						||
        IsCheck: true
 | 
						||
      }
 | 
						||
    },
 | 
						||
    closeLoading() {
 | 
						||
      this.loading = false
 | 
						||
    },
 | 
						||
    addMsg() {
 | 
						||
      this.studyVisible = true
 | 
						||
    },
 | 
						||
    moveMsg(index) {
 | 
						||
      // '确定删除该条检查记录?'
 | 
						||
      this.$confirm(this.$t('trials:consistencyCheck:title:title3')).then(res => {
 | 
						||
        this.msgList.splice(index, 1)
 | 
						||
        this.compareStudy()
 | 
						||
      })
 | 
						||
    },
 | 
						||
    handleReply() {
 | 
						||
      if (this.msgList.length === 0) {
 | 
						||
        // '请录入真实的检查情况'
 | 
						||
        this.$alert(this.$t('trials:consistencyCheck:title:title4'))
 | 
						||
        return
 | 
						||
      }
 | 
						||
      this.$refs.revenusForm.validate((valid) => {
 | 
						||
        if (!valid) return
 | 
						||
        var TalkContent = ''
 | 
						||
        // '经核实,该受试者当前访视的实际影像检查如下:<br>'
 | 
						||
        TalkContent += `${this.$t('trials:consistencyCheck:title:title5')}<br>`
 | 
						||
        this.msgList.forEach((v, i) => {
 | 
						||
          // `${i + 1}.${v.StudyDate}的${v.Modality}影像检查<br>`
 | 
						||
          let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
 | 
						||
          msg = msg.replace('xxx', v.Modality)
 | 
						||
          TalkContent += `${i + 1}. ${msg}<br>`
 | 
						||
        })
 | 
						||
        if (this.isLackOf) {
 | 
						||
          TalkContent += '<br>'
 | 
						||
          // 'IRC与实际情况不一致影像检查如下:<br>'
 | 
						||
          TalkContent += `${this.$t('trials:consistencyCheck:title:title7')}<br>`
 | 
						||
          this.IRCList.forEach((v, i) => {
 | 
						||
            let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
 | 
						||
            msg = msg.replace('xxx', v.Modality)
 | 
						||
            TalkContent += `${i + 1}.${msg}(${v.IsJoin && !v.IsCheck ? this.$t('trials:consistencyCheck:title:title8') : this.$t('trials:consistencyCheck:title:title9')})<br>`
 | 
						||
          })
 | 
						||
          if (this.form.reason.length > 0) {
 | 
						||
            TalkContent += '<br>'
 | 
						||
            // 'IRC与实际情况影像检查不一致的原因为:<br>'
 | 
						||
            TalkContent += `${this.$t('trials:consistencyCheck:title:title10')}<br>`
 | 
						||
 | 
						||
            this.form.reason.forEach((v, i) => {
 | 
						||
              TalkContent += `${i + 1}.${v}<br>`
 | 
						||
            })
 | 
						||
          }
 | 
						||
        } else {
 | 
						||
          // `<br>IRC与实际情况影像检查一致`
 | 
						||
          TalkContent += `<br>${this.$t('trials:consistencyCheck:title:title11')}`
 | 
						||
        }
 | 
						||
        console.log(TalkContent)
 | 
						||
        this.$emit('sendMessage', TalkContent, this.closeLoading)
 | 
						||
      })
 | 
						||
    }
 | 
						||
  }
 | 
						||
}
 | 
						||
</script>
 | 
						||
 | 
						||
<style scoped>
 | 
						||
.function{
 | 
						||
  margin-top: 10px;
 | 
						||
  text-align: right;
 | 
						||
}
 | 
						||
>>>.el-form--label-top .el-form-item__label{
 | 
						||
  padding-bottom: 0;
 | 
						||
  padding-top: 20px;
 | 
						||
}
 | 
						||
</style>
 |