talentEdit.vue

<template>
  <div>
    <a-form-model ref="form" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
      <div v-if="stepsArray[0].showStatus">
        <a-row>
          <a-col :span="24" style="border-top: 0px;text-align: center;">
            <div class="main-title">
              <span>申报人基本情况</span>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>身份证号</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="address">
                  <a-input v-model="formData.certId" @change="onCertIdChange" :maxLength="18"  style="width: 200px;" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>人才类别</div>
            </div>
          </a-col>
          <a-col :span="13">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="talentCategory">
                  <para-select v-model="formData.talentCategory" :typeId="21" :width="180" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>姓名</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="personName">
                  <a-input placeholder="姓名(限10字)" v-model="formData.personName" :maxLength="10" style="width:80%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>性别</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="sex">
                  <base-select v-model="formData.sex" :type="16" :isAll="true" :width="120" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>民族</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="nation">
                  <para-select v-model="formData.nation" :typeId="11" :width="180" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>出生年月</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="birthday">
                  <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.birthday" style="width: 60%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>最高学位</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="degree">
                  <para-select v-model="formData.degree" :typeId="9" :width="120" @changeTitle="(e)=>{ formData.degreeName = e}" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>最高学位授予时间</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="degreeTime">
                  <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.degreeTime" style="width: 60%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>最高学位授予单位</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="degreeUnit">
                  <a-input placeholder="最高学位授予单位(限50字)" v-model="formData.degreeUnit" :maxLength="50" style="width:80%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>目前从事专业</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="spec">
                  <cascader-select v-model="formData.spec" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>是否为研究生导师</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="graduateTeacher">
                  <para-check v-model="formData.graduateTeacher" :typeId="18" :disabled="false" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>专业技术职称</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="title">
                  <para-multi-select v-model="formData.title" :typeId="7" :width="120" @changeTitle="(e)=>{ formData.titleName = e}" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>党派</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="politicalParty">
                  <a-input placeholder="党派(限20字)" v-model="formData.politicalParty" :maxLength="20" style="width:80%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>行政职务</div>
            </div>
          </a-col>
          <a-col :span="5">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="duty">
                  <a-input placeholder="行政职务(限20字)" v-model="formData.duty" :maxLength="20" style="width:80%" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>是否是省级或省级以上人才</div>
            </div>
          </a-col>
          <a-col :span="21">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="talentType">
                  <para-check v-model="formData.talentType" :typeId="16" :disabled="false" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>省级及以上劳动模范、先进工作者等荣誉称号</div>
            </div>
          </a-col>
          <a-col :span="21">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="honoraryTitle">
                  <a-textarea placeholder="荣誉称号(限1000字)" v-model="formData.honoraryTitle" :maxLength="1000" style="width: 80%; height: 160px; margin-top: 12px" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>在国家、省级一级学术团体任职情况（包括任职时间和职务）</div>
            </div>
          </a-col>
          <a-col :span="21">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="holdPost1">
                  <a-textarea placeholder="任职情况(限1000字)" v-model="formData.holdPost1" :maxLength="1000" style="width: 80%; height: 160px; margin-top: 12px" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>担任国内统计源期刊职务情况（包括任职时间和职务）</div>
            </div>
          </a-col>
          <a-col :span="21">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="holdPost2">
                  <a-textarea placeholder="职务情况(限1000字)" v-model="formData.holdPost2" :maxLength="1000" style="width: 80%; height: 160px; margin-top: 12px" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>担任国家或省级重点学科/专科、重点实验室、内设研究机构负责人情况（包括任职时间和职务）</div>
            </div>
          </a-col>
          <a-col :span="21">
            <div class="special-middle">
              <div>
                <a-form-model-item prop="holdPost3">
                  <a-textarea placeholder="机构负责人情况(限1000字)" v-model="formData.holdPost3" :maxLength="1000" style="width: 80%; height: 160px; margin-top: 12px" />
                </a-form-model-item>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="3" class="bg-gray">
            <div class="special-middle">
              <div>联系方式</div>
            </div>
          </a-col>
          <a-col :span="21">
            <a-row>
              <a-col :span="4" class="bg-gray">
                <div style="margin-top: 10px;">电话</div>
              </a-col>
              <a-col :span="8">
                <div>
                  <a-form-model-item prop="mobile">
                    <a-input v-model="formData.mobile" :maxLength="50" style="width:80%" />
                  </a-form-model-item>
                </div>
              </a-col>
              <a-col :span="4" class="bg-gray">
                <div style="margin-top: 10px;">传真</div>
              </a-col>
              <a-col :span="8">
                <div>
                  <a-form-model-item prop="fax">
                    <a-input v-model="formData.fax" :maxLength="50" style="width:80%" />
                  </a-form-model-item>
                </div>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="bg-gray">
                <div style="margin-top: 10px;">Email</div>
              </a-col>
              <a-col :span="20">
                <div>
                  <a-form-model-item prop="email">
                    <a-input v-model="formData.email" :maxLength="50" style="width:40%" />
                  </a-form-model-item>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
      <div v-if="stepsArray[1].showStatus">
      </div>
      <div v-if="stepsArray[2].showStatus">
      </div>
      <div v-if="stepsArray[3].showStatus">
      </div>
      <div v-if="stepsArray[4].showStatus">
      </div>
      <div v-if="stepsArray[5].showStatus">
      </div>
    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment'
import { isEmptyParams } from "@/views/utils/common"
import paraRadio from '@/views/components/common/paraRadio'
import paraCheck from '@/views/components/common/paraCheck'
import cascaderSelect from '@/views/components/common/cascaderSelect'

export default {
  name: "talentEdit",
  components: {
    paraRadio, paraCheck, cascaderSelect
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
    stepsArray: {
      type: Array,
      default () {
        return []
      }
    },
    completeStatus: {
      type: String,
      default () {
        return "0,0,0,0,0,0"
      }
    },
  },
  data() {
    return {
      formData: {
        id: null, 
        reportYear: null,
        certId: null,
        personId: null,
        personName: null,
        nation: null,
        sex: null,
        birthday: null,
        degree: null,
        degreeTime: null,
        degreeUnit: null,
        spec: null,
        graduateTeacher: null,
        title: null,
        politicalParty: null,
        duty: null,
        talentType: null,
        honoraryTitle: null,
        holdPost1: null,
        holdPost2: null,
        holdPost3: null,
        mobile: null,
        fax: null,
        email: null,
        resumeList: [],
        membersList: [],
        budgetList: [],
        scientificList: [],
        fileList: [],
      },
      rules: {
        certId: [{ required: true, message: '*', trigger: 'blur' },],
        personName: [{ required: true, message: '*', trigger: 'blur' },],
        nation: [{ required: true, message: '*', trigger: 'blur' },],
        sex: [{ required: true, message: '*', trigger: 'change' },],
        birthday: [{ required: true, message: '*', trigger: 'change' },],
        degree: [{ required: true, message: '*', trigger: 'change' },],
        degreeTime: [{ required: true, message: '*', trigger: 'change' },],
        degreeUnit: [{ required: true, message: '*', trigger: 'blur' },],
        spec: [{ required: true, message: '*', trigger: 'change' }],
        graduateTeacher: [{ required: true, message: '*', trigger: 'change' }],
        title: [{ required: true, message: '*', trigger: 'change' },],
        politicalParty: [{ required: true, message: '*', trigger: 'blur' },],
        duty: [{ required: true, message: '*', trigger: 'change' }],
        talentType: [{ required: true, message: '*', trigger: 'change' }],
        honoraryTitle: [{ required: true, message: '*', trigger: 'blur' },],
        holdPost1: [{ required: true, message: '*', trigger: 'blur' },],
        holdPost2: [{ required: true, message: '*', trigger: 'blur' },],
        holdPost3: [{ required: true, message: '*', trigger: 'blur' },],
        mobile: [{ required: true, message: '*', trigger: 'blur' }],
        fax: [{ required: true, message: '*', trigger: 'blur' }],
        email: [{ required: true, message: '*', trigger: 'blur' }],
      },
    };
  },
  created () {
    if (this.value)
      this.getTalentApplyById()
    else
      this.getNewTalentApply()
  },
  methods: {
    moment,
    getNewTalentApply() {
      this.$api.talent.getNewTalentApply({ }).then(({ data = {} }) => {
        if (data) {
          this.formData = data
          this.formData.sex = ''
          this.$emit('onStepChange', { step: 0, state: data.completeStatus })
          this.loadList()
        } else {
          this.$emit('close', 'error')
        }
        this.$emit('load', false)
      }).catch(() => {
        this.$emit('close', 'error')
        this.$emit('load', false)
      })
    },
    getTalentApplyById() {
      this.$api.talent.getTalentApplyById({ id: this.value }).then(({ data = {} }) => {
        if (data) {
          this.formData = data
          this.$emit('onStepChange', { step: 0, state: data.completeStatus })
          this.loadList()
        } else {
          this.$emit('close', 'error')
        }
        this.$emit('load', false)
      }).catch(() => {
        this.$emit('close', 'error')
        this.$emit('load', false)
      })
    },
    getPersonByCertId() {
      if (this.formData.certId == "" || this.formData.certId == null)
        return

      this.loading = true
      this.$api.person.getPersonByCertId({ certId: this.formData.certId }).then(({ data = {} }) => {
        if (data) {
          this.formData.personId = data.id
          this.formData.personName = data.personName
          this.formData.sex = data.sex
          this.formData.nation = data.nation
          this.formData.birthday = data.birthday
          this.formData.degree = data.degree
          this.formData.degreeTime = data.degreeTime
          this.formData.degreeUnit = data.degreeUnit
          this.formData.graduateTeacher = data.graduateTeacher
          this.formData.politicalParty = data.politicalParty
          this.formData.title = data.title
          this.formData.spec = data.spec
          this.formData.mobile = data.mobile
          this.formData.email = data.email
          this.formData.fax = data.fax
          console.log(this.formData)
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    loadList () {
      if (!!!this.formData.membersList || this.formData.membersList.length == 0)
        this.formData.membersList = []

      if (!!!this.formData.budgetList || this.formData.budgetList.length == 0)
        this.formData.budgetList = []

      if (!!!this.formData.resumeList || this.formData.resumeList.length == 0)
        this.formData.resumeList = []

      if (!!!this.formData.scientificList || this.formData.scientificList.length == 0)
        this.formData.scientificList = []

      if (!!!this.formData.fileList || this.formData.fileList.length == 0)
        this.formData.fileList = []
    },
    onCertIdChange () {
      this.getPersonByCertId()
    },
    save (step) {
      if (this.checkInfo(step)) {
        var obj = this.getObj(step)
        obj.step = step
        this.$emit('load', true)
        let pars = isEmptyParams(obj)
        let par = { ...pars }
        this.$api.talent.save(par).then(({ data = {} }) => {
          if (data) {
            this.formData.id = data
            this.$message.success('保存成功！')
            this.$emit('close', 'save')
          }
          this.$emit('load', false)
        }).catch(() => {
          this.$emit('load', false)
        })
      }
    },
    submit (step, next) {
      if (this.checkInfo(step)) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$emit('load', true)
            var arr = this.completeStatus.split(',');
            arr[step] = "1";
            this.formData.completeStatus = arr.toString()
            var obj = this.getObj(step)
            obj.step = step
            let state = obj.projState
            if (state != 30 && step == 5)
              obj.projState = 10
            console.log(obj)
            let pars = isEmptyParams(obj)
            let par = { ...pars }
            // this.$api.talent.save(par).then(({ data = {} }) => {
            //   if (data) {
            //     this.formData.id = data
            //     if (next) {
            //       this.$emit('close', 'save')
            //       this.$emit('onStepChange', { step: step + 1, state: arr.toString() })
            //     } else {
            //       this.$message.success('成功！')
            //       this.$emit('close', 'submit')
            //     }
            //   }
            //   this.$emit('load', false)
            // }).catch(() => {
            //   this.$emit('load', false)
            // })
          } else {
            this.$message.error('信息未填写完全！')
            return false
          }
        })
      }
    },
    getObj (step) {
      var obj = null
      switch (step) {
        case 0:
          obj = { 
            id: null, reportYear: null, certId: null, personId: null, personName: null, nation: null, sex: null, birthday: null, degree: null, degreeTime: null,
            degreeUnit: null, spec: null, graduateTeacher: null, title: null, politicalParty: null, duty: null, talentType: null, honoraryTitle: null,
            holdPost1: null, holdPost2: null, holdPost3: null, mobile: null, fax: null, email: null,
          }
          break;
        case 1:
          obj = { id: null, resumeList: [] }
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
        case 5:
          break;
      }
      
      Object.keys(obj).forEach(key => {
        let value = this.formData[key]
        
        if ((key === 'talentType' || key === 'graduateTeacher') && Array.isArray(value)) {
          obj[key] = value.join(',')
        } else {
          obj[key] = value
        }
      })
      
      //console.log('getObj处理后的数据:', obj)
      return obj
    },
    checkInfo (step) {
      switch (step) {
        case 0:
          if (this.formData.certId == "" || this.formData.certId == null) {
            alert('身份证号不能为空')
            return false
          }
          if (this.formData.personName == "" || this.formData.personName == null) {
            alert('人员姓名不能为空')
            return false
          } else return true
          break;
        case 1:
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
        case 5:
          break;
      }
    },
    loadList () {

    },
  }
};
</script>