irc_web/.svn/pristine/db/dbf1f7274344e7576f5cc6e3153ebca166b61d42.svn-base

<template>
  <div class="form-container">
    <div class="title-wrapper">
      <p>Clinical Trial Experience</p>
      <el-button class="add" size="small" @click="handleAddClinicalTrial">Add</el-button>
    </div>
    <div style="padding:0 40px;">
      <el-table
        ref="clinicalTrialTbl"
        v-loading="loading"
        :data="clinicalTrialList"
        class="table"
        size="small"
      >
        <el-table-column type="index" width="40" />
        <el-table-column prop="Phase" label="Phase" min-width="50" />
        <el-table-column prop="EvaluationCriteriaList" label="Review Criteria" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.EvaluationCriteriaList.length>0? scope.row.EvaluationCriteriaList.join(', '):'' }}
          </template>
        </el-table-column>
        <el-table-column prop="Visit Reading Count" label="VisitReadingCount" min-width="70" />
        <el-table-column prop="EvaluationContent" label="Indication" min-width="70" />
        <el-table-column label="Operation" min-width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title-wrapper" style="margin-top:10px;">
      <p>GCP Certificate</p>
    </div>
    <div style="margin-left:40px;width:40%">
      <!-- <el-radio-group v-model="GCP" style="margin-bottom:20px">
        <el-radio :label="1">Yes</el-radio>
        <el-radio :label="0">No</el-radio>
      </el-radio-group>
      <upload-file v-if="GCP" :doctor-id="doctorId" type="GCP" @getFileList="getFileList" />
      <div><el-button type="primary" size="small" style="margin-top:20px" @click="handleSaveGCP">Save</el-button></div> -->
      <gcp-certificate :doctor-id="doctorId" :gcp="GCP" :gcp-id="GCPID" />
    </div>
    <div class="title-wrapper" style="margin-top:10px;">
      <p>Other Relevant Experience</p>
    </div>
    <div style="padding:0 40px;">

      <el-row type="flex" justify="space-between">
        <el-col :span="11">

          <el-input
            v-model="OtherClinicalExperience"
            type="textarea"
            rows="5"
            placeholder="Please specify in English"
            size="small"
          />
        </el-col>
        <el-col :span="11">
          <el-input v-model="OtherClinicalExperienceCN" type="textarea" rows="5" placeholder="请用中文注明" size="small" />
        </el-col>
      </el-row>
      <el-button type="primary" size="small" style="margin-top:20px" :disabled="isBtnDisabled" @click="handleSaveOtherClinical">Save</el-button>
    </div>
    <el-dialog v-if="clinicalTrialDialogVisible" :title="clinicalTrialDialogTitle" :visible.sync="clinicalTrialDialogVisible" width="40%" :close-on-click-modal="false">
      <el-form
        ref="clinicalTrialForm"
        label-width="150px"
        :rules="clinicalTrialRules"
        class="demo-ruleForm"
        :model="clinicalTrialForm"
        size="small"
      >
        <el-form-item label="Phase" prop="PhaseId">
          <el-select v-model="clinicalTrialForm.PhaseId" placeholder="Please select">
            <!-- <el-option
              v-for="(key,value) of dictionaryList.Phase"
              :key="value"
              :label="key"
              :value="value"
            /> -->
            <el-option
              v-for="item of dictionaryList.Trial_Phase"
              :key="item.Id"
              :label="item.Value"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Review Criteria" prop="EvaluationCriteriaIdList">
          <el-select
            v-model="clinicalTrialForm.EvaluationCriteriaIdList"
            placeholder="Please select"
            multiple
          >
            <!-- <el-option v-for="(key,value) of dictionaryList.ReadingStandard" :key="value" :label="key" :value="value" /> -->
            <el-option
              v-for="item of dictionaryList.ReadingStandard"
              :key="item.Id"
              :label="item.Value"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Visit Reading Count" prop="VisitReadingCount">
          <el-input-number style="width: 100%" v-model="clinicalTrialForm.VisitReadingCount" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="Indication" prop="EvaluationContent">
          <el-input v-model="clinicalTrialForm.EvaluationContent" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="isDisabled" @click="handleSave">Save</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import UploadFile from '@/components/UploadFile'
import { getTrialExperience, addOrUpdateTrialExperience, deleteTrialExperience, updateOtherExperience } from '@/api/reviewers'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import GcpCertificate from './GcpCertificate.vue'
const getClinicalTrialDefault = () => {
  return {
    PhaseId: '',
    EvaluationCriteriaIdList: [],
    EvaluationContent: '',
    VisitReadingCount: 0
  }
}
export default {
  name: 'TrialExperience',
  components: { GcpCertificate },
  data() {
    return {
      loading: false,
      clinicalTrialList: [],
      clinicalTrialDialogTitle: '',
      clinicalTrialDialogVisible: false,
      clinicalTrialForm: getClinicalTrialDefault(),
      clinicalTrialRules: {
        PhaseId: [
          { required: true, message: 'Please select', trigger: ['blur', 'change'] }
        ],
        EvaluationCriteriaIdList: [
          { required: true, message: 'Please select', trigger: ['blur', 'change'] }
        ],
        VisitReadingCount: [
          { required: true, message: 'Please specify', trigger: 'blur' },
        ],
        EvaluationContent: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          { max: 300, message: 'The maximum length is 300' }
        ]
      },
      GCP: 0,
      GCPID: '',
      OtherClinicalExperience: '',
      OtherClinicalExperienceCN: '',
      isDisabled: false,
      doctorId: this.$route.query.Id,
      isBtnDisabled: false,
      selectId: '00000000-0000-0000-0000-000000000000',
      dictionaryList: {}
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    async initForm() {
      await this.getDicData()
      const id = this.$route.query.Id
      if (id) {
        this.loading = true
        getTrialExperience(id).then(res => {
          this.clinicalTrialList = res.Result.ClinicalTrialExperienceList
          this.GCP = res.Result.GCP
          this.GCPID = res.Result.GCPId
          this.OtherClinicalExperience = res.Result.OtherClinicalExperience
          this.OtherClinicalExperienceCN = res.Result.OtherClinicalExperienceCN
          this.loading = false
        }).catch(() => { this.loading = false })
      }
    },
    getDicData() {
      getBasicDataSelects(['Trial_Phase', 'ReadingStandard']).then(res => {
        this.dictionaryList = { ...res.Result }
      })
    },
    handleAddClinicalTrial() {
      this.clinicalTrialDialogTitle = 'New'
      this.clinicalTrialDialogVisible = true
      Object.assign(this.clinicalTrialForm, getClinicalTrialDefault())
    },
    handleEdit(row) {
      const { Id, PhaseId, EvaluationCriteriaIdList, EvaluationContent } = row
      this.clinicalTrialDialogTitle = 'Edit'
      this.clinicalTrialDialogVisible = true
      this.clinicalTrialForm.Id = Id
      this.clinicalTrialForm.PhaseId = PhaseId
      this.clinicalTrialForm.EvaluationCriteriaIdList = EvaluationCriteriaIdList
      this.clinicalTrialForm.EvaluationContent = EvaluationContent
    },
    handleSave() {
      this.$refs.clinicalTrialForm.validate(valid => {
        if (valid) {
          this.isDisabled = true
          this.clinicalTrialForm.DoctorId = this.$route.query.Id
          addOrUpdateTrialExperience(this.clinicalTrialForm).then(res => {
            this.isDisabled = false
            this.initForm()
            if (this.clinicalTrialForm.Id) {
              this.$message({
                message: 'Updated successfully',
                type: 'success'
              })
            } else {
              this.$message({
                message: 'Addedd successfully',
                type: 'success'
              })
            }
            this.clinicalTrialDialogVisible = false
          })
            .catch(() => {
              this.isDisabled = false
            })
        }
      })
    },
    handleDel(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteTrialExperience(row.Id)
            .then(res => {
              this.clinicalTrialList.splice(this.clinicalTrialList.findIndex(item => item.Id === row.Id), 1)
              this.$message.success('Deleted successfully !')
            })
        })
        .catch(action => {})
    },
    handleSaveOtherClinical() {
      const param = { DoctorId: this.doctorId, OtherClinicalExperience: this.OtherClinicalExperience, OtherClinicalExperienceCN: this.OtherClinicalExperienceCN }
      updateOtherExperience(param).then(res => {
        if (res.IsSuccess) {
          if (this.id) {
            this.$message.success('Updated successfully')
          } else {
            this.$message.success('Addedd successfully')
          }
        }
      })
    }
  }
}
</script>