irc_web/src/views/reviewers/components/ResearchPublication.vue

<template>
  <div class="form-container" style="width: 80%">
    <el-form
      ref="researchForm"
      v-loading="loading"
      label-width="140px"
      :model="researchForm"
      size="small"
    >
      <div class="title">{{ $t('system:reviewer:title:Research') }}</div>
      <el-form-item :label="$t('system:reviewer:label:Field of Research')">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.Research"
              type="textarea"
              rows="5"
              placeholder="Please specify in English"
              size="small"
            />
          </el-col>
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.ResearchCN"
              type="textarea"
              rows="5"
              placeholder="请用中文注明"
              size="small"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('system:reviewer:label:Grants')">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.Grants"
              type="textarea"
              rows="5"
              placeholder="Please specify in English"
              size="small"
            />
          </el-col>
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.GrantsCN"
              type="textarea"
              rows="5"
              placeholder="请用中文注明"
              size="small"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <div class="title">{{ $t('system:reviewer:title:Publications') }}</div>
      <el-form-item :label="$t('system:reviewer:label:Publications')">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.Publications"
              type="textarea"
              rows="5"
              placeholder="Please specify in English"
              size="small"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <div class="title">{{ $t('system:reviewer:title:AH') }}</div>
      <el-form-item :label="$t('system:reviewer:label:Awards & Honors')">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.AwardsHonors"
              type="textarea"
              rows="5"
              placeholder="Please specify in English"
              size="small"
            />
          </el-col>
          <el-col :span="11">
            <el-input
              :disabled="$route.query.ReviewStatus === '1'"
              v-model="researchForm.AwardsHonorsCN"
              type="textarea"
              rows="5"
              placeholder="请用中文注明"
              size="small"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="$route.query.ReviewStatus === '1'"
          type="primary"
          :loading="isDisabled"
          @click="handleSave"
        >
          {{ $t('common:button:save') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getResearchPublication,
  addOrUpdateResearchPublication,
} from '@/api/reviewers'
export default {
  name: 'ResearchPublication',
  props: {
    id: {
      type: String,
      default() {
        return ''
      },
    },
    reviewerId: {
      type: String,
    },
  },
  data() {
    return {
      researchForm: {
        Research: '',
        ResearchCN: '',
        Grants: '',
        GrantsCN: '',
        Publications: '',
        AwardsHonors: '',
        AwardsHonorsCN: '',
      },
      loading: false,
      isDisabled: false,
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      const id = this.$route.query.Id || this.reviewerId
      if (id) {
        getResearchPublication(id).then((res) => {
          if (res.Result) {
            this.researchForm.Research = res.Result.Research
            this.researchForm.ResearchCN = res.Result.ResearchCN
            this.researchForm.Grants = res.Result.Grants
            this.researchForm.GrantsCN = res.Result.GrantsCN
            this.researchForm.Publications = res.Result.Publications
            this.researchForm.AwardsHonors = res.Result.AwardsHonors
            this.researchForm.AwardsHonorsCN = res.Result.AwardsHonorsCN
            this.researchForm.Id = res.Result.Id
          }
        })
      }
    },
    handleSave() {
      this.loading = true
      this.isDisabled = true
      this.researchForm.DoctorId = this.$route.query.Id || this.reviewerId
      addOrUpdateResearchPublication(this.researchForm)
        .then((res) => {
          this.loading = false
          this.isDisabled = false
          this.$message.success('Saved successfully')
          if (!this.researchForm.Id) {
            this.researchForm.Id = res.Result
          }
        })
        .catch(() => {
          this.loading = false
          this.isDisabled = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  background-color: #eee;
  line-height: 30px;
  padding-left: 10px;
  border-radius: 3px;
  margin-bottom: 20px;
}
</style>