irc_web/.svn/pristine/3c/3c0089abb779fe8a9d405ff78d82b944021f5979.svn-base

<template>
  <div>
    <el-form
      ref="trialStatusForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <div class="base-dialog-body">
        <el-form-item :label="$t('trials:trials-list:table:status')" prop="trialStatusStr">
          <el-radio-group v-model="form.trialStatusStr" @change="handleTrialStatusChange">
            <el-radio label="Initializing" disabled>{{ $fd('TrialStatusEnum', 'Initializing') }}</el-radio>
            <el-radio label="Ongoing">{{ $fd('TrialStatusEnum', 'Ongoing') }}</el-radio>
            <el-radio
              label="Stopped"
              :disabled="originalStatus === 'Completed' || originalStatus === 'Initializing'"
            >
              {{ $fd('TrialStatusEnum', 'Stopped') }}
            </el-radio>
            <el-radio
              label="Completed"
              :disabled="originalStatus === 'Stopped' || originalStatus === 'Initializing'"
            >
              {{ $fd('TrialStatusEnum', 'Completed') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="(originalStatus === 'Completed' || originalStatus === 'Stopped') && form.trialStatusStr === 'Ongoing'"
          :label="$t('trials:trials-list:label:reason')"
          prop="reason"
        >
          <el-input v-model="form.reason" type="textarea" autosize />
        </el-form-item>
        <el-form-item v-if="warningMessage" label="">
          <span style="color:red">{{ warningMessage }}</span>
        </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" :disabled="btnLoading" @click="handleCancel">
            {{ $t('common:button:cancel') }}
          </el-button>
          <el-button
            size="small"
            type="primary"
            :disabled="originalStatus === form.trialStatusStr"
            :loading="btnLoading"
            @click="handleSave"
          >
            {{ $t('common:button:save') }}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 签名 -->
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
    >
      <div slot="title">
        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
      </div>
      <SignForm ref="signForm" :trial-id="trialId" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { updateTrialState } from '@/api/trials/trials'
import SignForm from './SignForm'
import const_ from '@/const/sign-code'
export default {
  name: 'TrialStatusForm',
  components: { SignForm },
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },

  data() {
    return {
      form: {
        trialStatusStr: '',
        trialId: '',
        reason: ''
      },
      originalStatus: '',
      rules: {
        trialStatusStr: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] }],
        reason: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }]
      },
      btnLoading: false,
      signVisible: false,
      currentUser: zzSessionStorage.getItem('userName'),
      signCode: const_.processSignature.TrialStatusChange,
      warningMessage: '',
      trialId: ''
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      if (Object.keys(this.data).length > 0) {
        const { Id, TrialStatusStr } = { ...this.data }
        this.form.trialId = Id
        this.form.trialStatusStr = TrialStatusStr
        this.originalStatus = TrialStatusStr
        this.form.reason = ''
        this.trialId = Id
      }
    },
    handleTrialStatusChange(val) {
      this.warningMessage = ''
      if (this.originalStatus === 'Initializing' && val === 'Ongoing') {
        this.warningMessage = this.$t('trials:trials-list:message:changeStatusMes1')
      } else if (this.originalStatus === 'Ongoing' && val === 'Completed') {
        this.warningMessage = this.$t('trials:trials-list:message:changeStatusMes2')
      } else if (this.originalStatus === 'Ongoing' && val === 'Stopped') {
        this.warningMessage = this.$t('trials:trials-list:message:changeStatusMes3')
      }
    },
    handleSave() {
      this.$refs.trialStatusForm.validate(valid => {
        if (!valid) return
        this.signVisible = true
      })
    },
    changeStatus(signInfo) {
      this.btnLoading = true
      var params = {
        data: {
          trialId: this.form.trialId,
          trialStatusStr: this.form.trialStatusStr,
          reason: this.form.reason
        },
        signInfo: signInfo
      }
      updateTrialState(params).then(res => {
        this.btnLoading = false
        this.$refs['signForm'].btnLoading = false
        this.signVisible = false
        this.$emit('getList')
        this.$message.success(this.$t('common:message:savedSuccessfully'))
        this.$emit('closeDialog')
      }).catch(() => {
        this.btnLoading = false
        this.$refs['signForm'].btnLoading = false
      })
    },
    handleCancel() {
      this.$emit('closeDialog')
    },
    closeSignDialog(isSign, signInfo) {
      if (isSign) {
        this.changeStatus(signInfo)
      } else {
        this.signVisible = false
      }
    }
  }
}
</script>