<template>
<div class="app-content" style="height: 50vh;overflow: auto;">
<a-spin :spinning="loading" style="width: 100%;height: 100%;">
<div class="page-content">
<a-form-model ref="form" :model="memObject" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">姓名</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="name">
<a-input v-model="memObject.name" :maxLength="20" placeholder="姓名" style="width: 40%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">证件类型</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="certificateType">
<para-select v-model="memObject.certificateType" :typeId="49" :width="120" @changeTitle="(e)=>{ memObject.certificateTypeName = e}" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">证件号码</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="certId">
<a-input v-model="memObject.certId" :maxLength="20" placeholder="证件号" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">性别</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="sex">
<base-select v-model="memObject.sex" :type="16" :isAll="true" :width="120" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">出生年月</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="birthday">
<a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="memObject.birthday" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">民族</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="nation">
<para-select v-model="memObject.nation" :typeId="11" :width="120" @changeTitle="(e)=>{ memObject.nationName = e}" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">国别或地区</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="country">
<a-input v-model="memObject.country" :maxLength="50" placeholder="国别或地区" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">工作单位</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="workUnit">
<a-input v-model="memObject.workUnit" :maxLength="50" placeholder="工作单位" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">最高学位</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="degree">
<para-select v-model="memObject.degree" :typeId="9" :width="120" @changeTitle="(e)=>{ memObject.degreeName = e}" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">从事专业</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="spec">
<para-multi-select v-model="memObject.spec" :typeId="42" :width="120" @changeTitle="(e)=>{ memObject.specName = e}" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">职称</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="title">
<para-multi-select v-model="memObject.title" :typeId="7" :width="120" @changeTitle="(e)=>{ memObject.titleName = e}" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">电子邮箱</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="email">
<a-input v-model="memObject.email" :maxLength="50" placeholder="电子邮箱" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">手机</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="mobile">
<a-input v-model="memObject.mobile" :maxLength="20" placeholder="手机" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<!-- <a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">电话</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="telephone">
<a-input v-model="memObject.telephone" :maxLength="20" placeholder="电话号码" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">传真</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="fax">
<a-input v-model="memObject.fax" :maxLength="20" placeholder="传真" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row> -->
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">项目分工</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="projWork">
<a-input v-model="memObject.projWork" :maxLength="20" placeholder="项目分工" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">每年工作（月）</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="forMonths">
<a-input-number v-model="memObject.forMonths" :min="0" :step="0.1" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
<div class="page-footer">
<a-button style="margin-left: 10px" type="primary" @click="submit">保存</a-button>
</div>
</a-spin>
</div>
</template>
<script>
import { getType } from '@/views/utils/auth'
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'
export default {
name: "memberEdit",
components: {
paraMultiSelect, paraSelect, baseSelect
},
data () {
return {
rules: {
name: [{ required: true, message: '*', trigger: 'blur' },],
sex: [{ required: true, message: '*', trigger: 'change' },],
birthday: [{ required: true, message: '*', trigger: 'change' },],
certificateType: [{ required: true, message: '*', trigger: 'change' },],
certId: [{ required: true, message: '*', trigger: 'blur' },],
nation: [{ required: true, message: '*', trigger: 'change' },],
country: [{ required: true, message: '*', trigger: 'blur' },],
workUnit: [{ required: true, message: '*', trigger: 'blur' },],
title: [{ required: true, message: '*', trigger: 'change' },],
degree: [{ required: true, message: '*', trigger: 'change' },],
email: [{ required: true, message: '*', trigger: 'blur' },],
mobile: [{ required: true, message: '*', trigger: 'blur' },],
telephone: [{ required: true, message: '*', trigger: 'blur' },],
fax: [{ required: true, message: '*', trigger: 'blur' },],
projWork: [{ required: true, message: '*', trigger: 'blur' },],
forMonths: [{ required: true, message: '*', trigger: 'blur' },],
spec: [{ required: true, message: '*', trigger: 'change' },],
},
loading: false,
}
},
props: {
members: {
type: Array,
default: () => {
return []
}
},
memObject: {
type: Object,
default: () => {
return {}
}
},
},
created () {
},
methods: {
submit () {
this.memObject._key = Math.random().toString(16).substring(2, 8)
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('close', this.memObject)
} else {
this.$message.error('项目信息未填写完全！')
return false
}
})
},
},
}
</script>
<style scoped lang="less">
::v-deep .ant-spin-container {
width: 100%;
height: 100%;
}
.page-content {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.page-footer {
width: 100%;
height: 40px;
line-height: 40px;
background: rgb(248, 248, 248);
text-align: center;
}
</style>