irc_web/.svn/pristine/af/af7b632aab05623e904cf6c36a2970f75c0169d9.svn-base

<template>
  <div class="form-container basic-form">
    <el-card class="box-card">
      <div style="width: 1000px">
        <!-- v-loading="loading" -->
        <el-form
          ref="basicInfoForm"
          v-loading="loading"
          :inline="true"
          :rules="rules"
          :model="basicInfo"
          class="demo-ruleForm"
          label-width="120px"
          size="small"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="basicInfo.ReviewerCode" label="ID: ">
                <el-input v-model="basicInfo.ReviewerCode" disabled size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Surname: " prop="LastName">
                <el-input v-model="basicInfo.LastName" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Given Name: " prop="FirstName">
                <el-input v-model="basicInfo.FirstName" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Name CN: " prop="ChineseName">
                <el-input v-model="basicInfo.ChineseName" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Gender: " prop="Sex">
                <el-select
                  v-model="basicInfo.Sex"
                  prop="Sex"
                  placeholder="Please select gender"
                  size="small"
                >
                  <el-option
                    v-for="(item, index) of genderOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Phone: " prop="Phone">
                <el-input v-model="basicInfo.Phone" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Title: " prop="TitleIds">
                <el-select
                  v-model="basicInfo.TitleIds[0]"
                  placeholder="Please select Title"
                  size="small"
                >
                  <!-- <el-option
                    v-for="item of dict.type.Title"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  /> -->
                  <el-option
                    v-for="item of dictionaryList.Title"
                    :key="item.Id"
                    :label="item.Value"
                    :value="item.Id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="EMail: " prop="EMail">
                <el-input v-model="basicInfo.EMail" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="WeChat: " prop="WeChat">
                <el-input v-model="basicInfo.WeChat" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="Payment Type: " prop="Nation">
                <el-radio-group v-model="basicInfo.Nation">
                  <el-radio :label="0">CN</el-radio>
                  <el-radio :label="1">US</el-radio>
                </el-radio-group>
              </el-form-item> -->

              <el-form-item label="Payment Type: " prop="Nation">
                <el-select
                  v-model="basicInfo.Nation"
                  size="small"
                  clearable
                  class="mr"
                >
                  <el-option :value="0" label="CN" />
                  <el-option :value="1" label="Abroad" />

                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item style="margin-left: 120px">
              <el-button
                type="primary"
                :loading="isDisabled"
                size="small"
                @click="handleSave"
              >Save</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getBasicInfo, addOrUpdateDoctorBasicInfo } from '@/api/reviewers'
import { changeURLStatic } from '@/utils/history.js'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
  data() {
    return {
      basicInfo: {
        Id: '',
        ReviewerCode: '',
        FirstName: '',
        LastName: '',
        ChineseName: '',
        Sex: '',
        TitleIds: [],
        Phone: '',
        EMail: '',
        WeChat: '',
        Introduction: '',
        Nation: 0
      },
      rules: {
        FirstName: [
          {
            required: true,
            message: 'Please enter FirstName',
            trigger: 'blur'
          },
          { max: 50, message: 'The maximum length is 50' }
        ],
        LastName: [
          { required: true, message: 'Please enter LastName', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' }
        ],
        ChineseName: [{ max: 50, message: 'The maximum length is 50' }],
        Sex: [
          { required: true, message: 'Please select gender', trigger: 'blur' }
        ],
        TitleIds: [
          { required: true, message: 'Please select Title', trigger: 'blur' }
        ],
        Phone: [
          {
            required: true,
            message: 'Please enter phone number',
            trigger: 'blur'
          },
          { max: 20, min: 7, message: 'The length is 7 to 20' }
        ],
        EMail: [
          {
            required: true,
            message: 'Please input the email address',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: 'Please input the correct email address',
            trigger: 'blur,change'
          },
          { max: 50, message: 'The maximum length is 50' }
        ],
        WeChat: [{ max: 50, message: 'The maximum length is 50' }]
      },
      isDisabled: false,
      loading: false,
      genderOptions: [
        { label: 'Male', value: 0 },
        { label: 'Female', value: 1 }
      ],
      dictionaryList: {}
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    handleSave() {
      this.$refs.basicInfoForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.isDisabled = true

          addOrUpdateDoctorBasicInfo(this.basicInfo)
            .then((res) => {
              this.isDisabled = false
              this.loading = false
              this.$message.success('Saved successfully')
              if (!this.id) {
                this.basicInfo.Id = res.Result.Id
                changeURLStatic('Id', res.Result.Id)
                this.basicInfo.ReviewerCode = res.Result.ReviewerCode
              }
            })
            .catch(() => {
              this.isDisabled = false
              this.loading = false
            })
        }
      })
    },
    async initForm() {
      await this.getDicData()

      const id = this.$route.query.Id
      if (id) {
        this.loading = true
        getBasicInfo(id).then((res) => {
          // eslint-disable-next-line no-unused-vars
          const { TitleList, ...param } = res.Result
          this.basicInfo = param
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    getDicData() {
      getBasicDataSelects(['Title']).then(res => {
        this.dictionaryList = { ...res.Result }
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.basic-form {
  .el-input--small {
    width: 220px !important;
  }
  .el-select--small {
    width: 220px !important;
  }
}
</style>