irc_web/.svn/pristine/ba/baae7bd278b439944ccadd97dc8477be3900c1b7.svn-base

<template>
  <el-form
    ref="visitPlanForm"
    :model="form"
    :rules="rules"
    label-width="140px"
    size="small"
  >
    <!-- 访视名称 -->
    <el-form-item :label="$t('trials:visitPlan:table:visitName')" prop="VisitName">
      <el-input v-model="form.VisitName" />
    </el-form-item>
    <!-- 是否基线 -->
    <el-form-item :label="$t('trials:visitPlan:table:isBaseLine')">
      <el-radio-group v-model="form.IsBaseLine">
        <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{item.label}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 访视盲态名称 -->
    <el-form-item v-if="form.Id !== ''" :label="$t('trials:visitPlan:table:blindName')">
      <el-input v-model="form.BlindName" :disabled="form.Id !== ''" />
    </el-form-item>
    <!-- 访视号 -->
    <el-form-item :label="$t('trials:visitPlan:table:viistNum')" prop="VisitNum">
      <el-input-number v-model="form.VisitNum" :disabled="form.Id !== ''" :min="0" :precision="0" style="width: 100%" />
    </el-form-item>
    <!-- 访视间隔 -->
    <el-form-item :label="$t('trials:visitPlan:table:viistDay')" prop="VisitDay">
      <el-input-number v-model="form.VisitDay" :min="0" :precision="0" style="width: 100%" />
    </el-form-item>
    <!-- 窗口 -->
    <el-form-item
      v-if="isHaveFirstGiveMedicineDate"
      :label="$t('trials:visitPlan:table:window')"
      :rules="[

        { validator: validateWindow, trigger: ['blur', 'change'] }
      ]"
      prop="VisitWindowRight"
    >
      <el-col :span="11">
        <el-input v-model.number="form.VisitWindowLeft" type="number" class="input-with-select" style="width: 100%;">
          <template slot="append">{{ $t('trials:visitPlan:table:day') }}</template>
        </el-input>
      </el-col>
      <el-col class="line" :span="2" style="text-align:center;">~</el-col>
      <el-col :span="11">
        <el-input v-model.number="form.VisitWindowRight" type="number" class="input-with-select" style="width: 100%;">
          <template slot="append">{{ $t('trials:visitPlan:table:day') }}</template>
        </el-input>
      </el-col>
    </el-form-item>
    <!-- Description -->
    <el-form-item :label="$t('trials:visitPlan:table:description')" prop="Description">
      <el-input
        v-model="form.Description"
        type="textarea"
        :autosize="{ minRows: 2 }"
      />
    </el-form-item>
    <!-- 是否废除 -->
    <el-form-item v-if="form.Id !== ''" :label="$t('trials:visitPlan:table:isDeleted')">
      <el-radio-group v-model="form.IsDeleted" :disabled="form.IsHaveFirstConfirmed">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item style="text-align:right;">
      <!-- Cancel -->
      <el-button
        type="primary"
        :disabled="isDisabled"
        @click="handleCancel"
      >
        {{ $t('common:button:cancel') }}
      </el-button>
      <!-- Save -->
      <el-button
        type="primary"
        :loading="isDisabled"
        @click="handleSave"
      >
        {{ $t('common:button:save') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { addOrUpdateVisitStage } from '@/api/trials'
export default {
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    },
    isHaveFirstGiveMedicineDate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        TrialId: '',
        Id: '',
        VisitName: '',
        VisitNum: 0,
        VisitDay: 0,
        Description: '',
        IsBaseLine: false,
        BlindName: '',
        VisitWindowLeft: 0,
        VisitWindowRight: 0,
        IsConfirmed: false,
        IsDeleted: false,
        IsHaveFirstConfirmed: false
      },
      isDisabled: false,
      rules: {
        VisitName: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
          { max: 50, message: `${this.$t('common:ruleMessage:maxLength')} 50` }
        ],
        VisitNum: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
        ],
        VisitDay: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
        ],
        // VisitWindowLeft: [
        //   { validator: validateWindowLeft, trigger: 'blur' }
        // ],
        // VisitWindowRight: [
        //   { validator: validateWindow, trigger: 'blur' }
        // ],
        Description: [
          { max: 50, message: `${this.$t('common:ruleMessage:maxLength')} 50` }
        ]
        // NeedGlobal: [
        //   { required: true, message: 'Please specify', trigger: 'blur' }
        // ]
      },
      validateWindow: (rule, value, callback) => {
        if (this.form.VisitWindowLeft > this.form.VisitWindowRight) {
          callback(new Error(this.$t('trials:adjustRecord:formRule:window')))
        } else {
          callback()
        }
      }
    }
  },
  mounted() {
    for (const k in this.form) {
      if (this.row.hasOwnProperty(k)) {
        this.form[k] = this.row[k]
      }
    }
  },
  methods: {
    handleSave() {
      this.$refs.visitPlanForm.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          addOrUpdateVisitStage(this.form).then((res) => {
            this.isDisabled = false
            this.$emit('getList')
            this.$emit('closeDialog')
            if (this.form.Id) {
              this.$message.success(this.$t('common:message:savedSuccessfully'))
            } else {
              this.$message.success(this.$t('common:message:addedSuccessfully'))
            }
          }).catch(() => {
            this.isDisabled = false
          })
        }
      })
    },
    handleCancel() {
      this.$emit('closeDialog')
    }
  }
}
</script>