diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }

diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }
diff --git a/src/assets/json/nation-code.json b/src/assets/json/nation-code.json
new file mode 100644
index 0000000..1aed5ec
--- /dev/null
+++ b/src/assets/json/nation-code.json
@@ -0,0 +1,282 @@
+[
+  {
+      "id": "01",
+      "text": "汉族",
+      "value": "Han"
+  },
+  {
+      "id": "02",
+      "text": "壮族",
+      "value": "Zhuang"
+  },
+  {
+      "id": "03",
+      "text": "回族",
+      "value": "Hui"
+  },
+  {
+      "id": "04",
+      "text": "藏族",
+      "value": "Tibetan"
+  },
+  {
+      "id": "05",
+      "text": "维吾尔族",
+      "value": "Uighur "
+  },
+  {
+      "id": "06",
+      "text": "苗族",
+      "value": "Miao"
+  },
+  {
+      "id": "07",
+      "text": "彝族",
+      "value": "Yi"
+  },
+  {
+      "id": "08",
+      "text": "蒙古族",
+      "value": "Mongol"
+  },
+  {
+      "id": "09",
+      "text": "布依族",
+      "value": "Buyi"
+  },
+  {
+      "id": "10",
+      "text": "朝鲜族",
+      "value": "Korean"
+  },
+  {
+      "id": "11",
+      "text": "满族",
+      "value": "Manchu"
+  },
+  {
+      "id": "12",
+      "text": "侗族",
+      "value": "Dong"
+  },
+  {
+      "id": "13",
+      "text": "瑶族",
+      "value": "Yao"
+  },
+  {
+      "id": "14",
+      "text": "白族",
+      "value": "Bai"
+  },
+  {
+      "id": "15",
+      "text": "土家族",
+      "value": "Tujia"
+  },
+  {
+      "id": "16",
+      "text": "哈尼族",
+      "value": "Hani"
+  },
+  {
+      "id": "17",
+      "text": "哈萨克族",
+      "value": "Kazakh"
+  },
+  {
+      "id": "18",
+      "text": "傣族",
+      "value": "Dai"
+  },
+  {
+      "id": "19",
+      "text": "黎族",
+      "value": "Li"
+  },
+  {
+      "id": "20",
+      "text": "傈僳族",
+      "value": "Lisu"
+  },
+  {
+      "id": "21",
+      "text": "佤族",
+      "value": "Wa"
+  },
+  {
+      "id": "22",
+      "text": "畲族",
+      "value": "She"
+  },
+  {
+      "id": "23",
+      "text": "高山族",
+      "value": "Gaoshan"
+  },
+  {
+      "id": "24",
+      "text": "拉祜族",
+      "value": "Lahu"
+  },
+  {
+      "id": "25",
+      "text": "水族",
+      "value": "Shui"
+  },
+  {
+      "id": "26",
+      "text": "东乡族",
+      "value": "Dongxiang"
+  },
+  {
+      "id": "27",
+      "text": "纳西族",
+      "value": "Naxi"
+  },
+  {
+      "id": "28",
+      "text": "景颇族",
+      "value": "Jingpo"
+  },
+  {
+      "id": "29",
+      "text": "柯尔克孜族",
+      "value": "Kirghiz"
+  },
+  {
+      "id": "30",
+      "text": "土族",
+      "value": "Tu"
+  },
+  {
+      "id": "31",
+      "text": "达斡尔族",
+      "value": "Daur"
+  },
+  {
+      "id": "32",
+      "text": "仫佬族",
+      "value": "Mulam"
+  },
+  {
+      "id": "33",
+      "text": "羌族",
+      "value": "Qiang"
+  },
+  {
+      "id": "34",
+      "text": "布朗族",
+      "value": "Blang"
+  },
+  {
+      "id": "35",
+      "text": "撒拉族",
+      "value": "Salar"
+  },
+  {
+      "id": "36",
+      "text": "毛南族",
+      "value": "Maonan"
+  },
+  {
+      "id": "37",
+      "text": "仡佬族",
+      "value": "Gelao"
+  },
+  {
+      "id": "38",
+      "text": "锡伯族",
+      "value": "Xibe"
+  },
+  {
+      "id": "39",
+      "text": "阿昌族",
+      "value": "Achang"
+  },
+  {
+      "id": "40",
+      "text": "普米族",
+      "value": "Pumi"
+  },
+  {
+      "id": "41",
+      "text": "塔吉克族",
+      "value": "Tajik"
+  },
+  {
+      "id": "42",
+      "text": "怒族",
+      "value": "Nu"
+  },
+  {
+      "id": "43",
+      "text": "乌孜别克族",
+      "value": "Uzbek"
+  },
+  {
+      "id": "44",
+      "text": "俄罗斯族",
+      "value": "Russian"
+  },
+  {
+      "id": "45",
+      "text": "鄂温克族",
+      "value": "Evenki"
+  },
+  {
+      "id": "46",
+      "text": "崩龙族(得昂族)",
+      "value": "Bumloon"
+  },
+  {
+      "id": "47",
+      "text": "保安族",
+      "value": "Bonan"
+  },
+  {
+      "id": "48",
+      "text": "裕固族",
+      "value": "Yugur"
+  },
+  {
+      "id": "49",
+      "text": "京族",
+      "value": "Gin"
+  },
+  {
+      "id": "50",
+      "text": "塔塔尔族",
+      "value": "Tatar"
+  },
+  {
+      "id": "51",
+      "text": "独龙族",
+      "value": "Drung"
+  },
+  {
+      "id": "52",
+      "text": "鄂伦春族",
+      "value": "Oroqin"
+  },
+  {
+      "id": "53",
+      "text": "赫哲族",
+      "value": "Hezhen"
+  },
+  {
+      "id": "54",
+      "text": "门巴族",
+      "value": "Menba"
+  },
+  {
+      "id": "55",
+      "text": "珞巴族",
+      "value": "Lhobo"
+  },
+  {
+      "id": "56",
+      "text": "基诺族",
+      "value": "Jino"
+  }
+]

diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }
diff --git a/src/assets/json/nation-code.json b/src/assets/json/nation-code.json
new file mode 100644
index 0000000..1aed5ec
--- /dev/null
+++ b/src/assets/json/nation-code.json
@@ -0,0 +1,282 @@
+[
+  {
+      "id": "01",
+      "text": "汉族",
+      "value": "Han"
+  },
+  {
+      "id": "02",
+      "text": "壮族",
+      "value": "Zhuang"
+  },
+  {
+      "id": "03",
+      "text": "回族",
+      "value": "Hui"
+  },
+  {
+      "id": "04",
+      "text": "藏族",
+      "value": "Tibetan"
+  },
+  {
+      "id": "05",
+      "text": "维吾尔族",
+      "value": "Uighur "
+  },
+  {
+      "id": "06",
+      "text": "苗族",
+      "value": "Miao"
+  },
+  {
+      "id": "07",
+      "text": "彝族",
+      "value": "Yi"
+  },
+  {
+      "id": "08",
+      "text": "蒙古族",
+      "value": "Mongol"
+  },
+  {
+      "id": "09",
+      "text": "布依族",
+      "value": "Buyi"
+  },
+  {
+      "id": "10",
+      "text": "朝鲜族",
+      "value": "Korean"
+  },
+  {
+      "id": "11",
+      "text": "满族",
+      "value": "Manchu"
+  },
+  {
+      "id": "12",
+      "text": "侗族",
+      "value": "Dong"
+  },
+  {
+      "id": "13",
+      "text": "瑶族",
+      "value": "Yao"
+  },
+  {
+      "id": "14",
+      "text": "白族",
+      "value": "Bai"
+  },
+  {
+      "id": "15",
+      "text": "土家族",
+      "value": "Tujia"
+  },
+  {
+      "id": "16",
+      "text": "哈尼族",
+      "value": "Hani"
+  },
+  {
+      "id": "17",
+      "text": "哈萨克族",
+      "value": "Kazakh"
+  },
+  {
+      "id": "18",
+      "text": "傣族",
+      "value": "Dai"
+  },
+  {
+      "id": "19",
+      "text": "黎族",
+      "value": "Li"
+  },
+  {
+      "id": "20",
+      "text": "傈僳族",
+      "value": "Lisu"
+  },
+  {
+      "id": "21",
+      "text": "佤族",
+      "value": "Wa"
+  },
+  {
+      "id": "22",
+      "text": "畲族",
+      "value": "She"
+  },
+  {
+      "id": "23",
+      "text": "高山族",
+      "value": "Gaoshan"
+  },
+  {
+      "id": "24",
+      "text": "拉祜族",
+      "value": "Lahu"
+  },
+  {
+      "id": "25",
+      "text": "水族",
+      "value": "Shui"
+  },
+  {
+      "id": "26",
+      "text": "东乡族",
+      "value": "Dongxiang"
+  },
+  {
+      "id": "27",
+      "text": "纳西族",
+      "value": "Naxi"
+  },
+  {
+      "id": "28",
+      "text": "景颇族",
+      "value": "Jingpo"
+  },
+  {
+      "id": "29",
+      "text": "柯尔克孜族",
+      "value": "Kirghiz"
+  },
+  {
+      "id": "30",
+      "text": "土族",
+      "value": "Tu"
+  },
+  {
+      "id": "31",
+      "text": "达斡尔族",
+      "value": "Daur"
+  },
+  {
+      "id": "32",
+      "text": "仫佬族",
+      "value": "Mulam"
+  },
+  {
+      "id": "33",
+      "text": "羌族",
+      "value": "Qiang"
+  },
+  {
+      "id": "34",
+      "text": "布朗族",
+      "value": "Blang"
+  },
+  {
+      "id": "35",
+      "text": "撒拉族",
+      "value": "Salar"
+  },
+  {
+      "id": "36",
+      "text": "毛南族",
+      "value": "Maonan"
+  },
+  {
+      "id": "37",
+      "text": "仡佬族",
+      "value": "Gelao"
+  },
+  {
+      "id": "38",
+      "text": "锡伯族",
+      "value": "Xibe"
+  },
+  {
+      "id": "39",
+      "text": "阿昌族",
+      "value": "Achang"
+  },
+  {
+      "id": "40",
+      "text": "普米族",
+      "value": "Pumi"
+  },
+  {
+      "id": "41",
+      "text": "塔吉克族",
+      "value": "Tajik"
+  },
+  {
+      "id": "42",
+      "text": "怒族",
+      "value": "Nu"
+  },
+  {
+      "id": "43",
+      "text": "乌孜别克族",
+      "value": "Uzbek"
+  },
+  {
+      "id": "44",
+      "text": "俄罗斯族",
+      "value": "Russian"
+  },
+  {
+      "id": "45",
+      "text": "鄂温克族",
+      "value": "Evenki"
+  },
+  {
+      "id": "46",
+      "text": "崩龙族(得昂族)",
+      "value": "Bumloon"
+  },
+  {
+      "id": "47",
+      "text": "保安族",
+      "value": "Bonan"
+  },
+  {
+      "id": "48",
+      "text": "裕固族",
+      "value": "Yugur"
+  },
+  {
+      "id": "49",
+      "text": "京族",
+      "value": "Gin"
+  },
+  {
+      "id": "50",
+      "text": "塔塔尔族",
+      "value": "Tatar"
+  },
+  {
+      "id": "51",
+      "text": "独龙族",
+      "value": "Drung"
+  },
+  {
+      "id": "52",
+      "text": "鄂伦春族",
+      "value": "Oroqin"
+  },
+  {
+      "id": "53",
+      "text": "赫哲族",
+      "value": "Hezhen"
+  },
+  {
+      "id": "54",
+      "text": "门巴族",
+      "value": "Menba"
+  },
+  {
+      "id": "55",
+      "text": "珞巴族",
+      "value": "Lhobo"
+  },
+  {
+      "id": "56",
+      "text": "基诺族",
+      "value": "Jino"
+  }
+]
diff --git a/src/views/resource/person/register/component/basic.vue b/src/views/resource/person/register/component/basic.vue
index 4195d65..c25b424 100644
--- a/src/views/resource/person/register/component/basic.vue
+++ b/src/views/resource/person/register/component/basic.vue
@@ -1,104 +1,331 @@
 <!-- 人员登记 基本信息 -->
 <script name="RegisterBasic" lang="ts" setup>
-const props = defineProps({ operation: { type: String, default: '' } })
+import type { FormInstance, UploadProps } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import dayjs from 'dayjs'
+import type { IDictType, IStaffBasicInfo } from '../person-regitster'
+import nationList from '@/assets/json/nation-code.json'
+import { getDictByCode } from '@/api/system/dict'
+import { UploadFile } from '@/api/file'
+import { getPhotoUrl } from '@/api/system/tool'
+import { addStaffBasic } from '@/api/resource/register'
+
+const props = defineProps({
+  operation: { type: String, default: '' },
+})
+
+const emit = defineEmits(['afterAddBasic'])
+
+const staffBasicInfo = reactive<IStaffBasicInfo>({
+  account: 'ty',
+  pictureFile: '',
+  staffNo: '',
+  staffName: '',
+  idCard: '',
+  birthday: '',
+  nativePlace: '',
+  education: '',
+  recordDate: '',
+  officerNo: '',
+  gender: '',
+  genderName: '',
+  graduationDate: '',
+  nation: '',
+  degree: '',
+  deptId: '',
+  station: '',
+  major: '',
+  certificateNumber: '',
+  engageDate: '',
+  workingDate: '',
+  titleInitialDate: '',
+  titleRecentlyDate: '',
+  academicStartDate: '',
+  partyDate: '',
+  enlistmentDate: '',
+  staffType: '',
+  rankLevel: '',
+  rankLevelDate: '',
+  jobLevel: '',
+  jobLevelDate: '',
+  treatmentLevel: '',
+  treatmentLevelDate: '',
+  workingExperience: '',
+  rankExperience: '',
+  titleExperience: '',
+  rewardsPunishments: '',
+  remark: '',
+})
+const educationList = ref<IDictType[]>([])
+const genderList = ref<IDictType[]>([])
+const degreeList = ref<IDictType[]>([])
+const staffTypeList = ref<IDictType[]>([])
+const genderName = ref('')
+
+const basicFormRef = ref()
+
+// 身份证号码验证规则
+const validateIDcard = (rule: any, value: any, callback: any) => {
+  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
+  if (rr.test(value)) {
+    // 校验成功后自动填充出生日期和性别字段
+    // 获取生日
+    const idCardStr = staffBasicInfo.idCard
+    staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`
+
+    // 获取性别 第17位  奇数为男 偶数为女
+    if (Number(idCardStr.substring(16, 17)) % 2) {
+    // 男
+      staffBasicInfo.gender = '1'
+      staffBasicInfo.genderName = '男'
+    }
+    else {
+    //  女
+      staffBasicInfo.gender = '2'
+      staffBasicInfo.genderName = '女'
+    }
+
+    callback()
+  }
+  else {
+    // 校验失败将出生日期和性别字段清除
+    staffBasicInfo.birthday = ''
+    staffBasicInfo.gender = ''
+    staffBasicInfo.genderName = ''
+
+    callback(new Error('验证失败'))
+  }
+}
+
+const staffBasicRules = ref({
+  staffNo: [{ required: true, message: '人员编号不能为空', trigger: 'blur' }],
+  staffName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+  idCard: [{ required: true, message: '身份证号码为空或不符合规范', trigger: 'blur', validator: validateIDcard }],
+  nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
+  education: [{ required: true, message: '学历不能为空，请选择', trigger: 'blur' }],
+  titleRectDate: [{ required: true, message: '职称最近续评时间不能为空，请选择', trigger: 'blur' }],
+  staffType: [{ required: true, message: '人员类别不能为空，请选择', trigger: 'blur' }],
+  jobLevelDate: [{ required: true, message: '职务层级时间不能为空，请选择', trigger: 'blur' }],
+}) // 表单验证规则
+
 // 逻辑
+
+// 查询学历字典值
+const getEducationDict = () => {
+  getDictByCode('bizEducation').then((res) => {
+    if (res.code === 200) {
+      educationList.value = res.data
+    }
+  })
+}
+
+// 查询性别字典值
+const getGenderDict = () => {
+  getDictByCode('sex').then((res) => {
+    if (res.code === 200) {
+      genderList.value = res.data
+    }
+  })
+}
+
+// 查询学位字典值
+const getDegreeDict = () => {
+  getDictByCode('bizDegree').then((res) => {
+    if (res.code === 200) {
+      degreeList.value = res.data
+    }
+  })
+}
+
+// 查询人员类别字典值
+const getStaffTypeDict = () => {
+  getDictByCode('bizStaffType').then((res) => {
+    if (res.code === 200) {
+      staffTypeList.value = res.data
+    }
+  })
+}
+
+// 上传请求
+const uploadQuarterlyEvaluateFile: any = (file: any) => {
+  const fd = new FormData()
+  fd.append('multipartFile', file.file)
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  UploadFile(fd).then((res) => {
+    if (res.code === 200) {
+      console.log(res)
+      ElMessage.success('上传成功')
+      staffBasicInfo.pictureFile = res.data[0]
+      loading.close()
+    }
+  }).catch(() => {
+    loading.close()
+    ElMessage.error('上传失败')
+  })
+}
+
+// 上传之前的验证
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
+    ElMessage.error('只能上传png/jpeg/jpg格式的图片')
+    return false
+  }
+  else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片不能大于2MB')
+    return false
+  }
+  return true
+}
+
+// 保存基本信息
+const saveBasicForm = async () => {
+  if (!basicFormRef) { return }
+
+  if (props.operation === 'create') {
+    await basicFormRef.value.validate((valid: boolean, fields: any) => {
+      if (valid === true) {
+        ElMessageBox.confirm(
+          '确认保存吗？',
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          },
+        ).then(() => {
+          addStaffBasic(staffBasicInfo).then((res) => {
+            console.log(res)
+            if (res.code === 200) {
+              ElMessage.success('保存成功')
+              emit('afterAddBasic', res.data.id)
+            }
+          })
+        })
+      }
+    })
+  }
+}
+
+// 图片预览地址
+const photoUrl = ref('')
+watch(() => staffBasicInfo.pictureFile, (newVal) => {
+  getPhotoUrl(newVal).then((res) => {
+    if (res.code === 200) {
+      photoUrl.value = res.data
+    }
+  })
+})
+
+watch(() => staffBasicInfo.engageDate, (newVal) => {
+  const now = new Date()
+  const intervalDay = dayjs(now).diff(newVal, 'day')
+  staffBasicInfo.workingDate = `${(intervalDay / 365).toFixed(1)}`
+})
+
+onMounted(() => {
+  getEducationDict()
+  getGenderDict()
+  getDegreeDict()
+  getStaffTypeDict()
+})
+
+defineExpose({
+  saveBasicForm,
+})
 </script>
 
 <template>
   <app-container>
-    <el-form ref="ruleFormRef" label-position="right" label-width="110px" border stripe>
+    <el-form ref="basicFormRef" :model="staffBasicInfo" :rules="staffBasicRules" label-position="right" label-width="110px" border stripe>
       <el-row :gutter="24">
+        <!-- 第一行 第一、二列 -->
         <el-col :span="12">
-          <el-form-item prop="minioFileName">
-            <!-- <el-upload
+          <el-form-item>
+            <el-upload
               class="avatar-uploader"
               :show-file-list="false"
               :http-request="uploadQuarterlyEvaluateFile"
               :before-upload="beforeAvatarUpload"
-              :disabled="title === '详情'"
               accept="image/png, image/jpeg,image/jpg"
             >
-              <img v-if="ruleForm.minioFileName" :src="photoUrl" class="avatar">
+              <img v-if="staffBasicInfo.pictureFile" :src="photoUrl" class="avatar">
               <el-icon v-else class="avatar-uploader-icon">
                 <plus />
               </el-icon>
-            </el-upload> -->
+            </el-upload>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第三列 -->
         <el-col :span="6">
-          <el-form-item label="人员编号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+          <el-form-item label="人员编号" prop="staffNo">
+            <el-input v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="姓名" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="姓名" prop="staffName">
+            <el-input v-model="staffBasicInfo.staffName" placeholder="请输入姓名，必填项" :clearable="true" />
+            <el-input v-model="staffBasicInfo.account" type="hidden" />
           </el-form-item>
-          <el-form-item label="身份证号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="身份证号" prop="idCard">
+            <el-input ref="idCard" v-model="staffBasicInfo.idCard" placeholder="请输入身份证号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="出生日期" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="出生日期" prop="birthday">
+            <el-input v-model="staffBasicInfo.birthday" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="学历" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="籍贯" prop="nativePlace">
+            <el-input v-model="staffBasicInfo.nativePlace" placeholder="请输入籍贯" />
           </el-form-item>
-          <el-form-item label="籍贯" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="学历" prop="education">
+            <el-select v-model="staffBasicInfo.education" placeholder="请选择学历" style="width: 100%;">
+              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第四列 -->
         <el-col :span="6">
-          <el-form-item label="建档时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="建档时间">
+            <el-date-picker
+              v-model="staffBasicInfo.recordDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择建档时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军官证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军官证号">
+            <el-input v-model="staffBasicInfo.officerNo" placeholder="请输入军官证号" />
           </el-form-item>
-          <el-form-item label="性别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="性别">
+            <el-input v-model="staffBasicInfo.gender" type="hidden" :readonly="true" />
+            <el-input v-model="staffBasicInfo.genderName" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="毕业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="毕业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.graduationDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择毕业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="民族" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="民族">
+            <el-select v-model="staffBasicInfo.nation" placeholder="请选择民族" style="width: 100%;" :filterable="true" :clearable="true">
+              <el-option v-for="item in nationList" :key="item.id" :label="item.text" :value="item.text" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="学位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="学位">
+            <el-select v-model="staffBasicInfo.degree" placeholder="请选择学位" style="width: 100%;">
+              <el-option v-for="item in degreeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
@@ -107,89 +334,118 @@
       <el-row :gutter="24">
         <!-- 第一列 -->
         <el-col :span="6">
-          <el-form-item label="工作部门" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="工作部门">
+            <dept-select v-model="staffBasicInfo.deptId" placeholder="请选择工作部门" style="width: 100%;" />
           </el-form-item>
-          <el-form-item label="从事专业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="从事专业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.engageDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择从事专业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入学时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="入学时间">
+            <el-date-picker
+              v-model="staffBasicInfo.academicStartDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入学时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军衔等级">
+            <el-input v-model="staffBasicInfo.rankLevel" placeholder="请输入军衔等级" />
           </el-form-item>
-          <el-form-item label="待遇级别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="待遇级别">
+            <el-input v-model="staffBasicInfo.treatmentLevel" placeholder="请输入待遇级别" />
           </el-form-item>
         </el-col>
 
         <!-- 第二列 -->
         <el-col :span="6">
-          <el-form-item label="岗位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="岗位">
+            <el-input v-model="staffBasicInfo.station" placeholder="请输入岗位" />
           </el-form-item>
-          <el-form-item label="干龄" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="干龄">
+            <el-input v-model="staffBasicInfo.workingDate" placeholder="自动计算" readonly>
+              <template #append>
+                年
+              </template>
+            </el-input>
           </el-form-item>
-          <el-form-item label="党团时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="党团时间">
+            <el-date-picker
+              v-model="staffBasicInfo.partyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择党团时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="军衔等级时间">
+            <el-date-picker
+              v-model="staffBasicInfo.rankLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择军衔等级时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="待遇级别时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="待遇级别时间">
+            <el-date-picker
+              v-model="staffBasicInfo.treatmentLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择待遇级别时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
 
         <!-- 第三列 -->
         <el-col :span="6">
-          <el-form-item label="计量专业" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="计量专业">
+            <el-input v-model="staffBasicInfo.major" placeholder="请输入从事计量专业" />
           </el-form-item>
-          <el-form-item label="职称初评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="职称初评">
+            <el-date-picker
+              v-model="staffBasicInfo.titleInitialDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选职称初评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入伍时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="入伍时间">
+            <el-date-picker
+              v-model="staffBasicInfo.enlistmentDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入伍时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="职务层级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级">
+            <el-input v-model="staffBasicInfo.jobLevel" placeholder="请输入职务层级" />
           </el-form-item>
         </el-col>
 
         <!-- 第四列 -->
         <el-col :span="6">
-          <el-form-item label="证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="证号">
+            <el-input v-model="staffBasicInfo.certificateNumber" placeholder="自动获取检定员证书号" readonly />
           </el-form-item>
-          <el-form-item label="职称最近续评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职称最近续评" prop="titleRectDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.titleRecentlyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职称最近续评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="人员类别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="人员类别" prop="staffTypeProp">
+            <el-select v-model="staffBasicInfo.staffType" placeholder="请选择人员类别" style="width: 100%;">
+              <el-option v-for="item in staffTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="职务层级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级时间" prop="jobLevelDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.jobLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职务层级时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -197,8 +453,8 @@
       <!-- 第三行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="工作简历" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="工作简历">
+            <el-input v-model="staffBasicInfo.workingExperience" placeholder="请输入工作简历" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -206,8 +462,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="军衔/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="军衔/时间">
+            <el-input v-model="staffBasicInfo.rankExperience" placeholder="请输入军衔及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -215,8 +471,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="职称/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="职称/时间">
+            <el-input v-model="staffBasicInfo.titleExperience" placeholder="请输入职称及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -224,8 +480,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="奖惩情况" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="奖惩情况">
+            <el-input v-model="staffBasicInfo.rewardsPunishments" placeholder="请输入奖惩情况" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -233,82 +489,42 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="备注" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="1" />
+          <el-form-item label="备注">
+            <el-input v-model="staffBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :rows="1" />
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- <el-form-item label="计量专业" prop="major" class="marg-item"> -->
-      <!-- <el-select
-              v-model.trim="ruleForm.major"
-              clearable
-              :placeholder="title === '详情' ? '' : '请选择'"
-              :disabled="title === '详情'"
-              class="full-width-input"
-            >
-              <el-option
-                v-for="item in measureMajorList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否特操人" prop="specialOperator" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.specialOperator" placeholder="是否特操人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="人员编号" prop="staffNo"> -->
-      <!-- <el-input v-model.trim="ruleForm.staffNo" placeholder="系统自动生成" disabled /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="性别" prop="sex" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.sex" placeholder="请选择性别" disabled style="width: 100%;">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="技术职务" prop="technologyJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.technologyJob" clearable :placeholder="title === '详情' ? ' ' : '技术职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in technologyJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="从事日期" prop="workDate" class="marg-item"> -->
-      <!-- <el-date-picker
-              v-model="ruleForm.workDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :disabled="title === '详情'"
-              placeholder="请选择从事日期" style="width: 100%;"
-            /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否技术考核" prop="technologyExam" class="marg-item" style="width: 100%;"> -->
-      <!-- <el-select v-model="ruleForm.technologyExam" placeholder="技术考核" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="身份证号" prop="idCard"> -->
-      <!-- <el-input ref="cardRef" v-model.trim="ruleForm.idCard" placeholder="身份证号" :disabled="title === '详情'" @blur="getBirthday" /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="文化程度" prop="education" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.education" placeholder="文化程度" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="行政职务" prop="administrationJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.administrationJob" clearable :placeholder="title === '详情' ? ' ' : '行政职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in administrationJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否主考人" prop="mainExaminer" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.mainExaminer" placeholder="是否主考人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item>
-          <el-form-item label="备注" prop="remark" class="marg-item">
-            <el-input placeholder="请输入备注" :disabled="props.operation === 'detail'" />
-          </el-form-item>
-        </el-col> -->
     </el-form>
   </app-container>
 </template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 190px;
+  height: 250px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 190px;
+  height: 250px;
+  text-align: center;
+}
+</style>

diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }
diff --git a/src/assets/json/nation-code.json b/src/assets/json/nation-code.json
new file mode 100644
index 0000000..1aed5ec
--- /dev/null
+++ b/src/assets/json/nation-code.json
@@ -0,0 +1,282 @@
+[
+  {
+      "id": "01",
+      "text": "汉族",
+      "value": "Han"
+  },
+  {
+      "id": "02",
+      "text": "壮族",
+      "value": "Zhuang"
+  },
+  {
+      "id": "03",
+      "text": "回族",
+      "value": "Hui"
+  },
+  {
+      "id": "04",
+      "text": "藏族",
+      "value": "Tibetan"
+  },
+  {
+      "id": "05",
+      "text": "维吾尔族",
+      "value": "Uighur "
+  },
+  {
+      "id": "06",
+      "text": "苗族",
+      "value": "Miao"
+  },
+  {
+      "id": "07",
+      "text": "彝族",
+      "value": "Yi"
+  },
+  {
+      "id": "08",
+      "text": "蒙古族",
+      "value": "Mongol"
+  },
+  {
+      "id": "09",
+      "text": "布依族",
+      "value": "Buyi"
+  },
+  {
+      "id": "10",
+      "text": "朝鲜族",
+      "value": "Korean"
+  },
+  {
+      "id": "11",
+      "text": "满族",
+      "value": "Manchu"
+  },
+  {
+      "id": "12",
+      "text": "侗族",
+      "value": "Dong"
+  },
+  {
+      "id": "13",
+      "text": "瑶族",
+      "value": "Yao"
+  },
+  {
+      "id": "14",
+      "text": "白族",
+      "value": "Bai"
+  },
+  {
+      "id": "15",
+      "text": "土家族",
+      "value": "Tujia"
+  },
+  {
+      "id": "16",
+      "text": "哈尼族",
+      "value": "Hani"
+  },
+  {
+      "id": "17",
+      "text": "哈萨克族",
+      "value": "Kazakh"
+  },
+  {
+      "id": "18",
+      "text": "傣族",
+      "value": "Dai"
+  },
+  {
+      "id": "19",
+      "text": "黎族",
+      "value": "Li"
+  },
+  {
+      "id": "20",
+      "text": "傈僳族",
+      "value": "Lisu"
+  },
+  {
+      "id": "21",
+      "text": "佤族",
+      "value": "Wa"
+  },
+  {
+      "id": "22",
+      "text": "畲族",
+      "value": "She"
+  },
+  {
+      "id": "23",
+      "text": "高山族",
+      "value": "Gaoshan"
+  },
+  {
+      "id": "24",
+      "text": "拉祜族",
+      "value": "Lahu"
+  },
+  {
+      "id": "25",
+      "text": "水族",
+      "value": "Shui"
+  },
+  {
+      "id": "26",
+      "text": "东乡族",
+      "value": "Dongxiang"
+  },
+  {
+      "id": "27",
+      "text": "纳西族",
+      "value": "Naxi"
+  },
+  {
+      "id": "28",
+      "text": "景颇族",
+      "value": "Jingpo"
+  },
+  {
+      "id": "29",
+      "text": "柯尔克孜族",
+      "value": "Kirghiz"
+  },
+  {
+      "id": "30",
+      "text": "土族",
+      "value": "Tu"
+  },
+  {
+      "id": "31",
+      "text": "达斡尔族",
+      "value": "Daur"
+  },
+  {
+      "id": "32",
+      "text": "仫佬族",
+      "value": "Mulam"
+  },
+  {
+      "id": "33",
+      "text": "羌族",
+      "value": "Qiang"
+  },
+  {
+      "id": "34",
+      "text": "布朗族",
+      "value": "Blang"
+  },
+  {
+      "id": "35",
+      "text": "撒拉族",
+      "value": "Salar"
+  },
+  {
+      "id": "36",
+      "text": "毛南族",
+      "value": "Maonan"
+  },
+  {
+      "id": "37",
+      "text": "仡佬族",
+      "value": "Gelao"
+  },
+  {
+      "id": "38",
+      "text": "锡伯族",
+      "value": "Xibe"
+  },
+  {
+      "id": "39",
+      "text": "阿昌族",
+      "value": "Achang"
+  },
+  {
+      "id": "40",
+      "text": "普米族",
+      "value": "Pumi"
+  },
+  {
+      "id": "41",
+      "text": "塔吉克族",
+      "value": "Tajik"
+  },
+  {
+      "id": "42",
+      "text": "怒族",
+      "value": "Nu"
+  },
+  {
+      "id": "43",
+      "text": "乌孜别克族",
+      "value": "Uzbek"
+  },
+  {
+      "id": "44",
+      "text": "俄罗斯族",
+      "value": "Russian"
+  },
+  {
+      "id": "45",
+      "text": "鄂温克族",
+      "value": "Evenki"
+  },
+  {
+      "id": "46",
+      "text": "崩龙族(得昂族)",
+      "value": "Bumloon"
+  },
+  {
+      "id": "47",
+      "text": "保安族",
+      "value": "Bonan"
+  },
+  {
+      "id": "48",
+      "text": "裕固族",
+      "value": "Yugur"
+  },
+  {
+      "id": "49",
+      "text": "京族",
+      "value": "Gin"
+  },
+  {
+      "id": "50",
+      "text": "塔塔尔族",
+      "value": "Tatar"
+  },
+  {
+      "id": "51",
+      "text": "独龙族",
+      "value": "Drung"
+  },
+  {
+      "id": "52",
+      "text": "鄂伦春族",
+      "value": "Oroqin"
+  },
+  {
+      "id": "53",
+      "text": "赫哲族",
+      "value": "Hezhen"
+  },
+  {
+      "id": "54",
+      "text": "门巴族",
+      "value": "Menba"
+  },
+  {
+      "id": "55",
+      "text": "珞巴族",
+      "value": "Lhobo"
+  },
+  {
+      "id": "56",
+      "text": "基诺族",
+      "value": "Jino"
+  }
+]
diff --git a/src/views/resource/person/register/component/basic.vue b/src/views/resource/person/register/component/basic.vue
index 4195d65..c25b424 100644
--- a/src/views/resource/person/register/component/basic.vue
+++ b/src/views/resource/person/register/component/basic.vue
@@ -1,104 +1,331 @@
 <!-- 人员登记 基本信息 -->
 <script name="RegisterBasic" lang="ts" setup>
-const props = defineProps({ operation: { type: String, default: '' } })
+import type { FormInstance, UploadProps } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import dayjs from 'dayjs'
+import type { IDictType, IStaffBasicInfo } from '../person-regitster'
+import nationList from '@/assets/json/nation-code.json'
+import { getDictByCode } from '@/api/system/dict'
+import { UploadFile } from '@/api/file'
+import { getPhotoUrl } from '@/api/system/tool'
+import { addStaffBasic } from '@/api/resource/register'
+
+const props = defineProps({
+  operation: { type: String, default: '' },
+})
+
+const emit = defineEmits(['afterAddBasic'])
+
+const staffBasicInfo = reactive<IStaffBasicInfo>({
+  account: 'ty',
+  pictureFile: '',
+  staffNo: '',
+  staffName: '',
+  idCard: '',
+  birthday: '',
+  nativePlace: '',
+  education: '',
+  recordDate: '',
+  officerNo: '',
+  gender: '',
+  genderName: '',
+  graduationDate: '',
+  nation: '',
+  degree: '',
+  deptId: '',
+  station: '',
+  major: '',
+  certificateNumber: '',
+  engageDate: '',
+  workingDate: '',
+  titleInitialDate: '',
+  titleRecentlyDate: '',
+  academicStartDate: '',
+  partyDate: '',
+  enlistmentDate: '',
+  staffType: '',
+  rankLevel: '',
+  rankLevelDate: '',
+  jobLevel: '',
+  jobLevelDate: '',
+  treatmentLevel: '',
+  treatmentLevelDate: '',
+  workingExperience: '',
+  rankExperience: '',
+  titleExperience: '',
+  rewardsPunishments: '',
+  remark: '',
+})
+const educationList = ref<IDictType[]>([])
+const genderList = ref<IDictType[]>([])
+const degreeList = ref<IDictType[]>([])
+const staffTypeList = ref<IDictType[]>([])
+const genderName = ref('')
+
+const basicFormRef = ref()
+
+// 身份证号码验证规则
+const validateIDcard = (rule: any, value: any, callback: any) => {
+  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
+  if (rr.test(value)) {
+    // 校验成功后自动填充出生日期和性别字段
+    // 获取生日
+    const idCardStr = staffBasicInfo.idCard
+    staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`
+
+    // 获取性别 第17位  奇数为男 偶数为女
+    if (Number(idCardStr.substring(16, 17)) % 2) {
+    // 男
+      staffBasicInfo.gender = '1'
+      staffBasicInfo.genderName = '男'
+    }
+    else {
+    //  女
+      staffBasicInfo.gender = '2'
+      staffBasicInfo.genderName = '女'
+    }
+
+    callback()
+  }
+  else {
+    // 校验失败将出生日期和性别字段清除
+    staffBasicInfo.birthday = ''
+    staffBasicInfo.gender = ''
+    staffBasicInfo.genderName = ''
+
+    callback(new Error('验证失败'))
+  }
+}
+
+const staffBasicRules = ref({
+  staffNo: [{ required: true, message: '人员编号不能为空', trigger: 'blur' }],
+  staffName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+  idCard: [{ required: true, message: '身份证号码为空或不符合规范', trigger: 'blur', validator: validateIDcard }],
+  nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
+  education: [{ required: true, message: '学历不能为空，请选择', trigger: 'blur' }],
+  titleRectDate: [{ required: true, message: '职称最近续评时间不能为空，请选择', trigger: 'blur' }],
+  staffType: [{ required: true, message: '人员类别不能为空，请选择', trigger: 'blur' }],
+  jobLevelDate: [{ required: true, message: '职务层级时间不能为空，请选择', trigger: 'blur' }],
+}) // 表单验证规则
+
 // 逻辑
+
+// 查询学历字典值
+const getEducationDict = () => {
+  getDictByCode('bizEducation').then((res) => {
+    if (res.code === 200) {
+      educationList.value = res.data
+    }
+  })
+}
+
+// 查询性别字典值
+const getGenderDict = () => {
+  getDictByCode('sex').then((res) => {
+    if (res.code === 200) {
+      genderList.value = res.data
+    }
+  })
+}
+
+// 查询学位字典值
+const getDegreeDict = () => {
+  getDictByCode('bizDegree').then((res) => {
+    if (res.code === 200) {
+      degreeList.value = res.data
+    }
+  })
+}
+
+// 查询人员类别字典值
+const getStaffTypeDict = () => {
+  getDictByCode('bizStaffType').then((res) => {
+    if (res.code === 200) {
+      staffTypeList.value = res.data
+    }
+  })
+}
+
+// 上传请求
+const uploadQuarterlyEvaluateFile: any = (file: any) => {
+  const fd = new FormData()
+  fd.append('multipartFile', file.file)
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  UploadFile(fd).then((res) => {
+    if (res.code === 200) {
+      console.log(res)
+      ElMessage.success('上传成功')
+      staffBasicInfo.pictureFile = res.data[0]
+      loading.close()
+    }
+  }).catch(() => {
+    loading.close()
+    ElMessage.error('上传失败')
+  })
+}
+
+// 上传之前的验证
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
+    ElMessage.error('只能上传png/jpeg/jpg格式的图片')
+    return false
+  }
+  else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片不能大于2MB')
+    return false
+  }
+  return true
+}
+
+// 保存基本信息
+const saveBasicForm = async () => {
+  if (!basicFormRef) { return }
+
+  if (props.operation === 'create') {
+    await basicFormRef.value.validate((valid: boolean, fields: any) => {
+      if (valid === true) {
+        ElMessageBox.confirm(
+          '确认保存吗？',
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          },
+        ).then(() => {
+          addStaffBasic(staffBasicInfo).then((res) => {
+            console.log(res)
+            if (res.code === 200) {
+              ElMessage.success('保存成功')
+              emit('afterAddBasic', res.data.id)
+            }
+          })
+        })
+      }
+    })
+  }
+}
+
+// 图片预览地址
+const photoUrl = ref('')
+watch(() => staffBasicInfo.pictureFile, (newVal) => {
+  getPhotoUrl(newVal).then((res) => {
+    if (res.code === 200) {
+      photoUrl.value = res.data
+    }
+  })
+})
+
+watch(() => staffBasicInfo.engageDate, (newVal) => {
+  const now = new Date()
+  const intervalDay = dayjs(now).diff(newVal, 'day')
+  staffBasicInfo.workingDate = `${(intervalDay / 365).toFixed(1)}`
+})
+
+onMounted(() => {
+  getEducationDict()
+  getGenderDict()
+  getDegreeDict()
+  getStaffTypeDict()
+})
+
+defineExpose({
+  saveBasicForm,
+})
 </script>
 
 <template>
   <app-container>
-    <el-form ref="ruleFormRef" label-position="right" label-width="110px" border stripe>
+    <el-form ref="basicFormRef" :model="staffBasicInfo" :rules="staffBasicRules" label-position="right" label-width="110px" border stripe>
       <el-row :gutter="24">
+        <!-- 第一行 第一、二列 -->
         <el-col :span="12">
-          <el-form-item prop="minioFileName">
-            <!-- <el-upload
+          <el-form-item>
+            <el-upload
               class="avatar-uploader"
               :show-file-list="false"
               :http-request="uploadQuarterlyEvaluateFile"
               :before-upload="beforeAvatarUpload"
-              :disabled="title === '详情'"
               accept="image/png, image/jpeg,image/jpg"
             >
-              <img v-if="ruleForm.minioFileName" :src="photoUrl" class="avatar">
+              <img v-if="staffBasicInfo.pictureFile" :src="photoUrl" class="avatar">
               <el-icon v-else class="avatar-uploader-icon">
                 <plus />
               </el-icon>
-            </el-upload> -->
+            </el-upload>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第三列 -->
         <el-col :span="6">
-          <el-form-item label="人员编号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+          <el-form-item label="人员编号" prop="staffNo">
+            <el-input v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="姓名" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="姓名" prop="staffName">
+            <el-input v-model="staffBasicInfo.staffName" placeholder="请输入姓名，必填项" :clearable="true" />
+            <el-input v-model="staffBasicInfo.account" type="hidden" />
           </el-form-item>
-          <el-form-item label="身份证号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="身份证号" prop="idCard">
+            <el-input ref="idCard" v-model="staffBasicInfo.idCard" placeholder="请输入身份证号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="出生日期" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="出生日期" prop="birthday">
+            <el-input v-model="staffBasicInfo.birthday" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="学历" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="籍贯" prop="nativePlace">
+            <el-input v-model="staffBasicInfo.nativePlace" placeholder="请输入籍贯" />
           </el-form-item>
-          <el-form-item label="籍贯" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="学历" prop="education">
+            <el-select v-model="staffBasicInfo.education" placeholder="请选择学历" style="width: 100%;">
+              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第四列 -->
         <el-col :span="6">
-          <el-form-item label="建档时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="建档时间">
+            <el-date-picker
+              v-model="staffBasicInfo.recordDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择建档时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军官证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军官证号">
+            <el-input v-model="staffBasicInfo.officerNo" placeholder="请输入军官证号" />
           </el-form-item>
-          <el-form-item label="性别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="性别">
+            <el-input v-model="staffBasicInfo.gender" type="hidden" :readonly="true" />
+            <el-input v-model="staffBasicInfo.genderName" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="毕业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="毕业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.graduationDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择毕业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="民族" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="民族">
+            <el-select v-model="staffBasicInfo.nation" placeholder="请选择民族" style="width: 100%;" :filterable="true" :clearable="true">
+              <el-option v-for="item in nationList" :key="item.id" :label="item.text" :value="item.text" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="学位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="学位">
+            <el-select v-model="staffBasicInfo.degree" placeholder="请选择学位" style="width: 100%;">
+              <el-option v-for="item in degreeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
@@ -107,89 +334,118 @@
       <el-row :gutter="24">
         <!-- 第一列 -->
         <el-col :span="6">
-          <el-form-item label="工作部门" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="工作部门">
+            <dept-select v-model="staffBasicInfo.deptId" placeholder="请选择工作部门" style="width: 100%;" />
           </el-form-item>
-          <el-form-item label="从事专业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="从事专业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.engageDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择从事专业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入学时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="入学时间">
+            <el-date-picker
+              v-model="staffBasicInfo.academicStartDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入学时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军衔等级">
+            <el-input v-model="staffBasicInfo.rankLevel" placeholder="请输入军衔等级" />
           </el-form-item>
-          <el-form-item label="待遇级别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="待遇级别">
+            <el-input v-model="staffBasicInfo.treatmentLevel" placeholder="请输入待遇级别" />
           </el-form-item>
         </el-col>
 
         <!-- 第二列 -->
         <el-col :span="6">
-          <el-form-item label="岗位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="岗位">
+            <el-input v-model="staffBasicInfo.station" placeholder="请输入岗位" />
           </el-form-item>
-          <el-form-item label="干龄" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="干龄">
+            <el-input v-model="staffBasicInfo.workingDate" placeholder="自动计算" readonly>
+              <template #append>
+                年
+              </template>
+            </el-input>
           </el-form-item>
-          <el-form-item label="党团时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="党团时间">
+            <el-date-picker
+              v-model="staffBasicInfo.partyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择党团时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="军衔等级时间">
+            <el-date-picker
+              v-model="staffBasicInfo.rankLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择军衔等级时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="待遇级别时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="待遇级别时间">
+            <el-date-picker
+              v-model="staffBasicInfo.treatmentLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择待遇级别时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
 
         <!-- 第三列 -->
         <el-col :span="6">
-          <el-form-item label="计量专业" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="计量专业">
+            <el-input v-model="staffBasicInfo.major" placeholder="请输入从事计量专业" />
           </el-form-item>
-          <el-form-item label="职称初评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="职称初评">
+            <el-date-picker
+              v-model="staffBasicInfo.titleInitialDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选职称初评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入伍时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="入伍时间">
+            <el-date-picker
+              v-model="staffBasicInfo.enlistmentDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入伍时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="职务层级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级">
+            <el-input v-model="staffBasicInfo.jobLevel" placeholder="请输入职务层级" />
           </el-form-item>
         </el-col>
 
         <!-- 第四列 -->
         <el-col :span="6">
-          <el-form-item label="证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="证号">
+            <el-input v-model="staffBasicInfo.certificateNumber" placeholder="自动获取检定员证书号" readonly />
           </el-form-item>
-          <el-form-item label="职称最近续评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职称最近续评" prop="titleRectDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.titleRecentlyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职称最近续评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="人员类别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="人员类别" prop="staffTypeProp">
+            <el-select v-model="staffBasicInfo.staffType" placeholder="请选择人员类别" style="width: 100%;">
+              <el-option v-for="item in staffTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="职务层级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级时间" prop="jobLevelDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.jobLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职务层级时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -197,8 +453,8 @@
       <!-- 第三行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="工作简历" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="工作简历">
+            <el-input v-model="staffBasicInfo.workingExperience" placeholder="请输入工作简历" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -206,8 +462,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="军衔/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="军衔/时间">
+            <el-input v-model="staffBasicInfo.rankExperience" placeholder="请输入军衔及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -215,8 +471,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="职称/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="职称/时间">
+            <el-input v-model="staffBasicInfo.titleExperience" placeholder="请输入职称及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -224,8 +480,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="奖惩情况" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="奖惩情况">
+            <el-input v-model="staffBasicInfo.rewardsPunishments" placeholder="请输入奖惩情况" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -233,82 +489,42 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="备注" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="1" />
+          <el-form-item label="备注">
+            <el-input v-model="staffBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :rows="1" />
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- <el-form-item label="计量专业" prop="major" class="marg-item"> -->
-      <!-- <el-select
-              v-model.trim="ruleForm.major"
-              clearable
-              :placeholder="title === '详情' ? '' : '请选择'"
-              :disabled="title === '详情'"
-              class="full-width-input"
-            >
-              <el-option
-                v-for="item in measureMajorList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否特操人" prop="specialOperator" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.specialOperator" placeholder="是否特操人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="人员编号" prop="staffNo"> -->
-      <!-- <el-input v-model.trim="ruleForm.staffNo" placeholder="系统自动生成" disabled /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="性别" prop="sex" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.sex" placeholder="请选择性别" disabled style="width: 100%;">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="技术职务" prop="technologyJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.technologyJob" clearable :placeholder="title === '详情' ? ' ' : '技术职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in technologyJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="从事日期" prop="workDate" class="marg-item"> -->
-      <!-- <el-date-picker
-              v-model="ruleForm.workDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :disabled="title === '详情'"
-              placeholder="请选择从事日期" style="width: 100%;"
-            /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否技术考核" prop="technologyExam" class="marg-item" style="width: 100%;"> -->
-      <!-- <el-select v-model="ruleForm.technologyExam" placeholder="技术考核" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="身份证号" prop="idCard"> -->
-      <!-- <el-input ref="cardRef" v-model.trim="ruleForm.idCard" placeholder="身份证号" :disabled="title === '详情'" @blur="getBirthday" /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="文化程度" prop="education" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.education" placeholder="文化程度" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="行政职务" prop="administrationJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.administrationJob" clearable :placeholder="title === '详情' ? ' ' : '行政职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in administrationJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否主考人" prop="mainExaminer" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.mainExaminer" placeholder="是否主考人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item>
-          <el-form-item label="备注" prop="remark" class="marg-item">
-            <el-input placeholder="请输入备注" :disabled="props.operation === 'detail'" />
-          </el-form-item>
-        </el-col> -->
     </el-form>
   </app-container>
 </template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 190px;
+  height: 250px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 190px;
+  height: 250px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/resource/person/register/detail.vue b/src/views/resource/person/register/detail.vue
index 8e030aa..f6abb88 100644
--- a/src/views/resource/person/register/detail.vue
+++ b/src/views/resource/person/register/detail.vue
@@ -1,21 +1,17 @@
 <!-- 人员登记详情 -->
 <script name="RegisterDetail" lang="ts" setup>
-import type { FormInstance, FormRules, TabPaneName, TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
-import { onMounted, ref } from 'vue'
 import RegisterBasic from './component/basic.vue'
 import RegisterEducation from './component/education.vue'
 import RegisterAuthorize from './component/authorize.vue'
 import RegisterResume from './component/resume.vue'
 import RegisterVerifier from './component/verifier.vue'
 import RegisterTrainning from './component/trainning.vue'
-// import showPhoto from '@/components/showPhoto/index.vue'
 
 // 定义变量
 const $route = useRoute()
 const $router = useRouter()
 const title = ref('')
-const staffId = ref('')
-const ruleFormRef = ref<FormInstance>() // from组件
+const operation = ref('')
 
 const radioItems = ref([
   { name: '基本信息', value: 'register-basic' },
@@ -26,10 +22,14 @@
   { name: '训练情况', value: 'register-trainning' },
 ])
 const current = ref('register-basic')
-const operation = ref('')
+
+const staffId = ref('')
+
+// 子组件的引用
+const refRegisterBasic = ref()
 
 // 逻辑
-// 重置表单内容
+// 重置各个子组件的表单内容
 const resetFormData = () => {
   // ruleForm.value = {
 
@@ -37,26 +37,43 @@
 }
 
 // 关闭
-const resetForm = (formEl: FormInstance | undefined) => {
-  formEl?.resetFields()
-  // changeList.value[0].data = []
+const resetForm = () => {
   $router.go(-1)
   resetFormData()
 }
 
+// 保存
+const saveForm = () => {
+  switch (current.value) {
+    case 'register-basic':
+      refRegisterBasic.value.saveBasicForm()
+      break
+  }
+}
+
 // 弹窗初始化
 const initDialog = (row: any) => {
   operation.value = row.operation
-  if (row.operation === 'create') {
-    title.value = '人员登记'
+  switch (row.operation) {
+    case 'create' :
+      title.value = '人员登记（新增）'
+      break
+    case 'update':
+      title.value = '人员登记（编辑）'
+      break
+    case 'detail':
+      title.value = '人员登记（详情）'
+      break
+    default:
+      title.value = ''
+      break
   }
-  // else {
-
-  // }
 }
 
-const tabItemClickedHandler = (name: TabPaneName) => {
-  console.log(current.value)
+const getStaffId = (id: string) => {
+  console.log('from child comp...', id)
+  staffId.value = id
+  console.log(staffId.value)
 }
 
 onMounted(() => {
@@ -68,19 +85,19 @@
   <app-container style="overflow: hidden;">
     <detail-page :title="`${title}`">
       <template #btns>
-        <el-button v-if="title !== '详情'" type="primary">
+        <el-button v-if="operation !== 'detail'" type="primary" @click="saveForm()">
           保存
         </el-button>
-        <el-button type="info" @click="resetForm(ruleFormRef)">
+        <el-button type="info" @click="resetForm()">
           关闭
         </el-button>
       </template>
 
-      <el-tabs v-model="current" type="card" @tab-change="tabItemClickedHandler">
+      <el-tabs v-model="current" type="card">
         <el-tab-pane v-for="item in radioItems" :key="item.value" :label="item.name" :name="item.value" />
       </el-tabs>
 
-      <register-basic v-show="current === 'register-basic'" ref="register-basic-form" :operation="operation" />
+      <register-basic v-show="current === 'register-basic'" ref="refRegisterBasic" :operation="operation" @after-add-basic="getStaffId" />
       <register-education v-show="current === 'register-education'" ref="register-education-form" :operation="operation" />
       <register-authorize v-show="current === 'register-authorize'" ref="register-education-form" :operation="operation" />
       <register-resume v-show="current === 'register-resume'" ref="register-education-form" :operation="operation" />

diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }
diff --git a/src/assets/json/nation-code.json b/src/assets/json/nation-code.json
new file mode 100644
index 0000000..1aed5ec
--- /dev/null
+++ b/src/assets/json/nation-code.json
@@ -0,0 +1,282 @@
+[
+  {
+      "id": "01",
+      "text": "汉族",
+      "value": "Han"
+  },
+  {
+      "id": "02",
+      "text": "壮族",
+      "value": "Zhuang"
+  },
+  {
+      "id": "03",
+      "text": "回族",
+      "value": "Hui"
+  },
+  {
+      "id": "04",
+      "text": "藏族",
+      "value": "Tibetan"
+  },
+  {
+      "id": "05",
+      "text": "维吾尔族",
+      "value": "Uighur "
+  },
+  {
+      "id": "06",
+      "text": "苗族",
+      "value": "Miao"
+  },
+  {
+      "id": "07",
+      "text": "彝族",
+      "value": "Yi"
+  },
+  {
+      "id": "08",
+      "text": "蒙古族",
+      "value": "Mongol"
+  },
+  {
+      "id": "09",
+      "text": "布依族",
+      "value": "Buyi"
+  },
+  {
+      "id": "10",
+      "text": "朝鲜族",
+      "value": "Korean"
+  },
+  {
+      "id": "11",
+      "text": "满族",
+      "value": "Manchu"
+  },
+  {
+      "id": "12",
+      "text": "侗族",
+      "value": "Dong"
+  },
+  {
+      "id": "13",
+      "text": "瑶族",
+      "value": "Yao"
+  },
+  {
+      "id": "14",
+      "text": "白族",
+      "value": "Bai"
+  },
+  {
+      "id": "15",
+      "text": "土家族",
+      "value": "Tujia"
+  },
+  {
+      "id": "16",
+      "text": "哈尼族",
+      "value": "Hani"
+  },
+  {
+      "id": "17",
+      "text": "哈萨克族",
+      "value": "Kazakh"
+  },
+  {
+      "id": "18",
+      "text": "傣族",
+      "value": "Dai"
+  },
+  {
+      "id": "19",
+      "text": "黎族",
+      "value": "Li"
+  },
+  {
+      "id": "20",
+      "text": "傈僳族",
+      "value": "Lisu"
+  },
+  {
+      "id": "21",
+      "text": "佤族",
+      "value": "Wa"
+  },
+  {
+      "id": "22",
+      "text": "畲族",
+      "value": "She"
+  },
+  {
+      "id": "23",
+      "text": "高山族",
+      "value": "Gaoshan"
+  },
+  {
+      "id": "24",
+      "text": "拉祜族",
+      "value": "Lahu"
+  },
+  {
+      "id": "25",
+      "text": "水族",
+      "value": "Shui"
+  },
+  {
+      "id": "26",
+      "text": "东乡族",
+      "value": "Dongxiang"
+  },
+  {
+      "id": "27",
+      "text": "纳西族",
+      "value": "Naxi"
+  },
+  {
+      "id": "28",
+      "text": "景颇族",
+      "value": "Jingpo"
+  },
+  {
+      "id": "29",
+      "text": "柯尔克孜族",
+      "value": "Kirghiz"
+  },
+  {
+      "id": "30",
+      "text": "土族",
+      "value": "Tu"
+  },
+  {
+      "id": "31",
+      "text": "达斡尔族",
+      "value": "Daur"
+  },
+  {
+      "id": "32",
+      "text": "仫佬族",
+      "value": "Mulam"
+  },
+  {
+      "id": "33",
+      "text": "羌族",
+      "value": "Qiang"
+  },
+  {
+      "id": "34",
+      "text": "布朗族",
+      "value": "Blang"
+  },
+  {
+      "id": "35",
+      "text": "撒拉族",
+      "value": "Salar"
+  },
+  {
+      "id": "36",
+      "text": "毛南族",
+      "value": "Maonan"
+  },
+  {
+      "id": "37",
+      "text": "仡佬族",
+      "value": "Gelao"
+  },
+  {
+      "id": "38",
+      "text": "锡伯族",
+      "value": "Xibe"
+  },
+  {
+      "id": "39",
+      "text": "阿昌族",
+      "value": "Achang"
+  },
+  {
+      "id": "40",
+      "text": "普米族",
+      "value": "Pumi"
+  },
+  {
+      "id": "41",
+      "text": "塔吉克族",
+      "value": "Tajik"
+  },
+  {
+      "id": "42",
+      "text": "怒族",
+      "value": "Nu"
+  },
+  {
+      "id": "43",
+      "text": "乌孜别克族",
+      "value": "Uzbek"
+  },
+  {
+      "id": "44",
+      "text": "俄罗斯族",
+      "value": "Russian"
+  },
+  {
+      "id": "45",
+      "text": "鄂温克族",
+      "value": "Evenki"
+  },
+  {
+      "id": "46",
+      "text": "崩龙族(得昂族)",
+      "value": "Bumloon"
+  },
+  {
+      "id": "47",
+      "text": "保安族",
+      "value": "Bonan"
+  },
+  {
+      "id": "48",
+      "text": "裕固族",
+      "value": "Yugur"
+  },
+  {
+      "id": "49",
+      "text": "京族",
+      "value": "Gin"
+  },
+  {
+      "id": "50",
+      "text": "塔塔尔族",
+      "value": "Tatar"
+  },
+  {
+      "id": "51",
+      "text": "独龙族",
+      "value": "Drung"
+  },
+  {
+      "id": "52",
+      "text": "鄂伦春族",
+      "value": "Oroqin"
+  },
+  {
+      "id": "53",
+      "text": "赫哲族",
+      "value": "Hezhen"
+  },
+  {
+      "id": "54",
+      "text": "门巴族",
+      "value": "Menba"
+  },
+  {
+      "id": "55",
+      "text": "珞巴族",
+      "value": "Lhobo"
+  },
+  {
+      "id": "56",
+      "text": "基诺族",
+      "value": "Jino"
+  }
+]
diff --git a/src/views/resource/person/register/component/basic.vue b/src/views/resource/person/register/component/basic.vue
index 4195d65..c25b424 100644
--- a/src/views/resource/person/register/component/basic.vue
+++ b/src/views/resource/person/register/component/basic.vue
@@ -1,104 +1,331 @@
 <!-- 人员登记 基本信息 -->
 <script name="RegisterBasic" lang="ts" setup>
-const props = defineProps({ operation: { type: String, default: '' } })
+import type { FormInstance, UploadProps } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import dayjs from 'dayjs'
+import type { IDictType, IStaffBasicInfo } from '../person-regitster'
+import nationList from '@/assets/json/nation-code.json'
+import { getDictByCode } from '@/api/system/dict'
+import { UploadFile } from '@/api/file'
+import { getPhotoUrl } from '@/api/system/tool'
+import { addStaffBasic } from '@/api/resource/register'
+
+const props = defineProps({
+  operation: { type: String, default: '' },
+})
+
+const emit = defineEmits(['afterAddBasic'])
+
+const staffBasicInfo = reactive<IStaffBasicInfo>({
+  account: 'ty',
+  pictureFile: '',
+  staffNo: '',
+  staffName: '',
+  idCard: '',
+  birthday: '',
+  nativePlace: '',
+  education: '',
+  recordDate: '',
+  officerNo: '',
+  gender: '',
+  genderName: '',
+  graduationDate: '',
+  nation: '',
+  degree: '',
+  deptId: '',
+  station: '',
+  major: '',
+  certificateNumber: '',
+  engageDate: '',
+  workingDate: '',
+  titleInitialDate: '',
+  titleRecentlyDate: '',
+  academicStartDate: '',
+  partyDate: '',
+  enlistmentDate: '',
+  staffType: '',
+  rankLevel: '',
+  rankLevelDate: '',
+  jobLevel: '',
+  jobLevelDate: '',
+  treatmentLevel: '',
+  treatmentLevelDate: '',
+  workingExperience: '',
+  rankExperience: '',
+  titleExperience: '',
+  rewardsPunishments: '',
+  remark: '',
+})
+const educationList = ref<IDictType[]>([])
+const genderList = ref<IDictType[]>([])
+const degreeList = ref<IDictType[]>([])
+const staffTypeList = ref<IDictType[]>([])
+const genderName = ref('')
+
+const basicFormRef = ref()
+
+// 身份证号码验证规则
+const validateIDcard = (rule: any, value: any, callback: any) => {
+  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
+  if (rr.test(value)) {
+    // 校验成功后自动填充出生日期和性别字段
+    // 获取生日
+    const idCardStr = staffBasicInfo.idCard
+    staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`
+
+    // 获取性别 第17位  奇数为男 偶数为女
+    if (Number(idCardStr.substring(16, 17)) % 2) {
+    // 男
+      staffBasicInfo.gender = '1'
+      staffBasicInfo.genderName = '男'
+    }
+    else {
+    //  女
+      staffBasicInfo.gender = '2'
+      staffBasicInfo.genderName = '女'
+    }
+
+    callback()
+  }
+  else {
+    // 校验失败将出生日期和性别字段清除
+    staffBasicInfo.birthday = ''
+    staffBasicInfo.gender = ''
+    staffBasicInfo.genderName = ''
+
+    callback(new Error('验证失败'))
+  }
+}
+
+const staffBasicRules = ref({
+  staffNo: [{ required: true, message: '人员编号不能为空', trigger: 'blur' }],
+  staffName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+  idCard: [{ required: true, message: '身份证号码为空或不符合规范', trigger: 'blur', validator: validateIDcard }],
+  nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
+  education: [{ required: true, message: '学历不能为空，请选择', trigger: 'blur' }],
+  titleRectDate: [{ required: true, message: '职称最近续评时间不能为空，请选择', trigger: 'blur' }],
+  staffType: [{ required: true, message: '人员类别不能为空，请选择', trigger: 'blur' }],
+  jobLevelDate: [{ required: true, message: '职务层级时间不能为空，请选择', trigger: 'blur' }],
+}) // 表单验证规则
+
 // 逻辑
+
+// 查询学历字典值
+const getEducationDict = () => {
+  getDictByCode('bizEducation').then((res) => {
+    if (res.code === 200) {
+      educationList.value = res.data
+    }
+  })
+}
+
+// 查询性别字典值
+const getGenderDict = () => {
+  getDictByCode('sex').then((res) => {
+    if (res.code === 200) {
+      genderList.value = res.data
+    }
+  })
+}
+
+// 查询学位字典值
+const getDegreeDict = () => {
+  getDictByCode('bizDegree').then((res) => {
+    if (res.code === 200) {
+      degreeList.value = res.data
+    }
+  })
+}
+
+// 查询人员类别字典值
+const getStaffTypeDict = () => {
+  getDictByCode('bizStaffType').then((res) => {
+    if (res.code === 200) {
+      staffTypeList.value = res.data
+    }
+  })
+}
+
+// 上传请求
+const uploadQuarterlyEvaluateFile: any = (file: any) => {
+  const fd = new FormData()
+  fd.append('multipartFile', file.file)
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  UploadFile(fd).then((res) => {
+    if (res.code === 200) {
+      console.log(res)
+      ElMessage.success('上传成功')
+      staffBasicInfo.pictureFile = res.data[0]
+      loading.close()
+    }
+  }).catch(() => {
+    loading.close()
+    ElMessage.error('上传失败')
+  })
+}
+
+// 上传之前的验证
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
+    ElMessage.error('只能上传png/jpeg/jpg格式的图片')
+    return false
+  }
+  else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片不能大于2MB')
+    return false
+  }
+  return true
+}
+
+// 保存基本信息
+const saveBasicForm = async () => {
+  if (!basicFormRef) { return }
+
+  if (props.operation === 'create') {
+    await basicFormRef.value.validate((valid: boolean, fields: any) => {
+      if (valid === true) {
+        ElMessageBox.confirm(
+          '确认保存吗？',
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          },
+        ).then(() => {
+          addStaffBasic(staffBasicInfo).then((res) => {
+            console.log(res)
+            if (res.code === 200) {
+              ElMessage.success('保存成功')
+              emit('afterAddBasic', res.data.id)
+            }
+          })
+        })
+      }
+    })
+  }
+}
+
+// 图片预览地址
+const photoUrl = ref('')
+watch(() => staffBasicInfo.pictureFile, (newVal) => {
+  getPhotoUrl(newVal).then((res) => {
+    if (res.code === 200) {
+      photoUrl.value = res.data
+    }
+  })
+})
+
+watch(() => staffBasicInfo.engageDate, (newVal) => {
+  const now = new Date()
+  const intervalDay = dayjs(now).diff(newVal, 'day')
+  staffBasicInfo.workingDate = `${(intervalDay / 365).toFixed(1)}`
+})
+
+onMounted(() => {
+  getEducationDict()
+  getGenderDict()
+  getDegreeDict()
+  getStaffTypeDict()
+})
+
+defineExpose({
+  saveBasicForm,
+})
 </script>
 
 <template>
   <app-container>
-    <el-form ref="ruleFormRef" label-position="right" label-width="110px" border stripe>
+    <el-form ref="basicFormRef" :model="staffBasicInfo" :rules="staffBasicRules" label-position="right" label-width="110px" border stripe>
       <el-row :gutter="24">
+        <!-- 第一行 第一、二列 -->
         <el-col :span="12">
-          <el-form-item prop="minioFileName">
-            <!-- <el-upload
+          <el-form-item>
+            <el-upload
               class="avatar-uploader"
               :show-file-list="false"
               :http-request="uploadQuarterlyEvaluateFile"
               :before-upload="beforeAvatarUpload"
-              :disabled="title === '详情'"
               accept="image/png, image/jpeg,image/jpg"
             >
-              <img v-if="ruleForm.minioFileName" :src="photoUrl" class="avatar">
+              <img v-if="staffBasicInfo.pictureFile" :src="photoUrl" class="avatar">
               <el-icon v-else class="avatar-uploader-icon">
                 <plus />
               </el-icon>
-            </el-upload> -->
+            </el-upload>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第三列 -->
         <el-col :span="6">
-          <el-form-item label="人员编号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+          <el-form-item label="人员编号" prop="staffNo">
+            <el-input v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="姓名" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="姓名" prop="staffName">
+            <el-input v-model="staffBasicInfo.staffName" placeholder="请输入姓名，必填项" :clearable="true" />
+            <el-input v-model="staffBasicInfo.account" type="hidden" />
           </el-form-item>
-          <el-form-item label="身份证号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="身份证号" prop="idCard">
+            <el-input ref="idCard" v-model="staffBasicInfo.idCard" placeholder="请输入身份证号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="出生日期" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="出生日期" prop="birthday">
+            <el-input v-model="staffBasicInfo.birthday" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="学历" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="籍贯" prop="nativePlace">
+            <el-input v-model="staffBasicInfo.nativePlace" placeholder="请输入籍贯" />
           </el-form-item>
-          <el-form-item label="籍贯" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="学历" prop="education">
+            <el-select v-model="staffBasicInfo.education" placeholder="请选择学历" style="width: 100%;">
+              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第四列 -->
         <el-col :span="6">
-          <el-form-item label="建档时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="建档时间">
+            <el-date-picker
+              v-model="staffBasicInfo.recordDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择建档时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军官证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军官证号">
+            <el-input v-model="staffBasicInfo.officerNo" placeholder="请输入军官证号" />
           </el-form-item>
-          <el-form-item label="性别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="性别">
+            <el-input v-model="staffBasicInfo.gender" type="hidden" :readonly="true" />
+            <el-input v-model="staffBasicInfo.genderName" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="毕业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="毕业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.graduationDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择毕业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="民族" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="民族">
+            <el-select v-model="staffBasicInfo.nation" placeholder="请选择民族" style="width: 100%;" :filterable="true" :clearable="true">
+              <el-option v-for="item in nationList" :key="item.id" :label="item.text" :value="item.text" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="学位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="学位">
+            <el-select v-model="staffBasicInfo.degree" placeholder="请选择学位" style="width: 100%;">
+              <el-option v-for="item in degreeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
@@ -107,89 +334,118 @@
       <el-row :gutter="24">
         <!-- 第一列 -->
         <el-col :span="6">
-          <el-form-item label="工作部门" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="工作部门">
+            <dept-select v-model="staffBasicInfo.deptId" placeholder="请选择工作部门" style="width: 100%;" />
           </el-form-item>
-          <el-form-item label="从事专业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="从事专业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.engageDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择从事专业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入学时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="入学时间">
+            <el-date-picker
+              v-model="staffBasicInfo.academicStartDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入学时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军衔等级">
+            <el-input v-model="staffBasicInfo.rankLevel" placeholder="请输入军衔等级" />
           </el-form-item>
-          <el-form-item label="待遇级别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="待遇级别">
+            <el-input v-model="staffBasicInfo.treatmentLevel" placeholder="请输入待遇级别" />
           </el-form-item>
         </el-col>
 
         <!-- 第二列 -->
         <el-col :span="6">
-          <el-form-item label="岗位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="岗位">
+            <el-input v-model="staffBasicInfo.station" placeholder="请输入岗位" />
           </el-form-item>
-          <el-form-item label="干龄" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="干龄">
+            <el-input v-model="staffBasicInfo.workingDate" placeholder="自动计算" readonly>
+              <template #append>
+                年
+              </template>
+            </el-input>
           </el-form-item>
-          <el-form-item label="党团时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="党团时间">
+            <el-date-picker
+              v-model="staffBasicInfo.partyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择党团时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="军衔等级时间">
+            <el-date-picker
+              v-model="staffBasicInfo.rankLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择军衔等级时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="待遇级别时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="待遇级别时间">
+            <el-date-picker
+              v-model="staffBasicInfo.treatmentLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择待遇级别时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
 
         <!-- 第三列 -->
         <el-col :span="6">
-          <el-form-item label="计量专业" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="计量专业">
+            <el-input v-model="staffBasicInfo.major" placeholder="请输入从事计量专业" />
           </el-form-item>
-          <el-form-item label="职称初评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="职称初评">
+            <el-date-picker
+              v-model="staffBasicInfo.titleInitialDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选职称初评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入伍时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="入伍时间">
+            <el-date-picker
+              v-model="staffBasicInfo.enlistmentDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入伍时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="职务层级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级">
+            <el-input v-model="staffBasicInfo.jobLevel" placeholder="请输入职务层级" />
           </el-form-item>
         </el-col>
 
         <!-- 第四列 -->
         <el-col :span="6">
-          <el-form-item label="证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="证号">
+            <el-input v-model="staffBasicInfo.certificateNumber" placeholder="自动获取检定员证书号" readonly />
           </el-form-item>
-          <el-form-item label="职称最近续评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职称最近续评" prop="titleRectDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.titleRecentlyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职称最近续评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="人员类别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="人员类别" prop="staffTypeProp">
+            <el-select v-model="staffBasicInfo.staffType" placeholder="请选择人员类别" style="width: 100%;">
+              <el-option v-for="item in staffTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="职务层级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级时间" prop="jobLevelDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.jobLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职务层级时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -197,8 +453,8 @@
       <!-- 第三行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="工作简历" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="工作简历">
+            <el-input v-model="staffBasicInfo.workingExperience" placeholder="请输入工作简历" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -206,8 +462,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="军衔/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="军衔/时间">
+            <el-input v-model="staffBasicInfo.rankExperience" placeholder="请输入军衔及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -215,8 +471,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="职称/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="职称/时间">
+            <el-input v-model="staffBasicInfo.titleExperience" placeholder="请输入职称及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -224,8 +480,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="奖惩情况" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="奖惩情况">
+            <el-input v-model="staffBasicInfo.rewardsPunishments" placeholder="请输入奖惩情况" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -233,82 +489,42 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="备注" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="1" />
+          <el-form-item label="备注">
+            <el-input v-model="staffBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :rows="1" />
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- <el-form-item label="计量专业" prop="major" class="marg-item"> -->
-      <!-- <el-select
-              v-model.trim="ruleForm.major"
-              clearable
-              :placeholder="title === '详情' ? '' : '请选择'"
-              :disabled="title === '详情'"
-              class="full-width-input"
-            >
-              <el-option
-                v-for="item in measureMajorList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否特操人" prop="specialOperator" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.specialOperator" placeholder="是否特操人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="人员编号" prop="staffNo"> -->
-      <!-- <el-input v-model.trim="ruleForm.staffNo" placeholder="系统自动生成" disabled /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="性别" prop="sex" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.sex" placeholder="请选择性别" disabled style="width: 100%;">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="技术职务" prop="technologyJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.technologyJob" clearable :placeholder="title === '详情' ? ' ' : '技术职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in technologyJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="从事日期" prop="workDate" class="marg-item"> -->
-      <!-- <el-date-picker
-              v-model="ruleForm.workDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :disabled="title === '详情'"
-              placeholder="请选择从事日期" style="width: 100%;"
-            /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否技术考核" prop="technologyExam" class="marg-item" style="width: 100%;"> -->
-      <!-- <el-select v-model="ruleForm.technologyExam" placeholder="技术考核" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="身份证号" prop="idCard"> -->
-      <!-- <el-input ref="cardRef" v-model.trim="ruleForm.idCard" placeholder="身份证号" :disabled="title === '详情'" @blur="getBirthday" /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="文化程度" prop="education" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.education" placeholder="文化程度" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="行政职务" prop="administrationJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.administrationJob" clearable :placeholder="title === '详情' ? ' ' : '行政职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in administrationJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否主考人" prop="mainExaminer" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.mainExaminer" placeholder="是否主考人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item>
-          <el-form-item label="备注" prop="remark" class="marg-item">
-            <el-input placeholder="请输入备注" :disabled="props.operation === 'detail'" />
-          </el-form-item>
-        </el-col> -->
     </el-form>
   </app-container>
 </template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 190px;
+  height: 250px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 190px;
+  height: 250px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/resource/person/register/detail.vue b/src/views/resource/person/register/detail.vue
index 8e030aa..f6abb88 100644
--- a/src/views/resource/person/register/detail.vue
+++ b/src/views/resource/person/register/detail.vue
@@ -1,21 +1,17 @@
 <!-- 人员登记详情 -->
 <script name="RegisterDetail" lang="ts" setup>
-import type { FormInstance, FormRules, TabPaneName, TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
-import { onMounted, ref } from 'vue'
 import RegisterBasic from './component/basic.vue'
 import RegisterEducation from './component/education.vue'
 import RegisterAuthorize from './component/authorize.vue'
 import RegisterResume from './component/resume.vue'
 import RegisterVerifier from './component/verifier.vue'
 import RegisterTrainning from './component/trainning.vue'
-// import showPhoto from '@/components/showPhoto/index.vue'
 
 // 定义变量
 const $route = useRoute()
 const $router = useRouter()
 const title = ref('')
-const staffId = ref('')
-const ruleFormRef = ref<FormInstance>() // from组件
+const operation = ref('')
 
 const radioItems = ref([
   { name: '基本信息', value: 'register-basic' },
@@ -26,10 +22,14 @@
   { name: '训练情况', value: 'register-trainning' },
 ])
 const current = ref('register-basic')
-const operation = ref('')
+
+const staffId = ref('')
+
+// 子组件的引用
+const refRegisterBasic = ref()
 
 // 逻辑
-// 重置表单内容
+// 重置各个子组件的表单内容
 const resetFormData = () => {
   // ruleForm.value = {
 
@@ -37,26 +37,43 @@
 }
 
 // 关闭
-const resetForm = (formEl: FormInstance | undefined) => {
-  formEl?.resetFields()
-  // changeList.value[0].data = []
+const resetForm = () => {
   $router.go(-1)
   resetFormData()
 }
 
+// 保存
+const saveForm = () => {
+  switch (current.value) {
+    case 'register-basic':
+      refRegisterBasic.value.saveBasicForm()
+      break
+  }
+}
+
 // 弹窗初始化
 const initDialog = (row: any) => {
   operation.value = row.operation
-  if (row.operation === 'create') {
-    title.value = '人员登记'
+  switch (row.operation) {
+    case 'create' :
+      title.value = '人员登记（新增）'
+      break
+    case 'update':
+      title.value = '人员登记（编辑）'
+      break
+    case 'detail':
+      title.value = '人员登记（详情）'
+      break
+    default:
+      title.value = ''
+      break
   }
-  // else {
-
-  // }
 }
 
-const tabItemClickedHandler = (name: TabPaneName) => {
-  console.log(current.value)
+const getStaffId = (id: string) => {
+  console.log('from child comp...', id)
+  staffId.value = id
+  console.log(staffId.value)
 }
 
 onMounted(() => {
@@ -68,19 +85,19 @@
   <app-container style="overflow: hidden;">
     <detail-page :title="`${title}`">
       <template #btns>
-        <el-button v-if="title !== '详情'" type="primary">
+        <el-button v-if="operation !== 'detail'" type="primary" @click="saveForm()">
           保存
         </el-button>
-        <el-button type="info" @click="resetForm(ruleFormRef)">
+        <el-button type="info" @click="resetForm()">
           关闭
         </el-button>
       </template>
 
-      <el-tabs v-model="current" type="card" @tab-change="tabItemClickedHandler">
+      <el-tabs v-model="current" type="card">
         <el-tab-pane v-for="item in radioItems" :key="item.value" :label="item.name" :name="item.value" />
       </el-tabs>
 
-      <register-basic v-show="current === 'register-basic'" ref="register-basic-form" :operation="operation" />
+      <register-basic v-show="current === 'register-basic'" ref="refRegisterBasic" :operation="operation" @after-add-basic="getStaffId" />
       <register-education v-show="current === 'register-education'" ref="register-education-form" :operation="operation" />
       <register-authorize v-show="current === 'register-authorize'" ref="register-education-form" :operation="operation" />
       <register-resume v-show="current === 'register-resume'" ref="register-education-form" :operation="operation" />
diff --git a/src/views/resource/person/register/list.vue b/src/views/resource/person/register/list.vue
index 4cf0f07..3006886 100644
--- a/src/views/resource/person/register/list.vue
+++ b/src/views/resource/person/register/list.vue
@@ -52,7 +52,7 @@
   loadingTable.value = true
   getStaffList(searchQuery).then((res) => {
     if (res.code === 200) {
-      list.value = res.data.records
+      list.value = res.data.rows
       total.value = Number(res.data.total)
     }
     loadingTable.value = false
@@ -75,6 +75,10 @@
   }
   getList()
 }
+
+onMounted(() => {
+  getList()
+})
 </script>
 
 <template>
@@ -139,4 +143,3 @@
     </table-container>
   </app-container>
 </template>
-@/api/resource/register

diff --git a/src/api/resource/register.ts b/src/api/resource/register.ts
index c1d101e..da6a8ca 100644
--- a/src/api/resource/register.ts
+++ b/src/api/resource/register.ts
@@ -1,10 +1,18 @@
 import request from '../index'
 const prefix = 'resource/staff'
 
-export function getStaffList(params: object) {
+export function getStaffList(data: object) {
   return request({
     url: `${prefix}/listPage`,
     method: 'post',
-    params,
+    data,
+  })
+}
+
+export function addStaffBasic(data: object) {
+  return request({
+    url: `${prefix}/base/add`,
+    method: 'post',
+    data,
   })
 }
diff --git a/src/assets/json/nation-code.json b/src/assets/json/nation-code.json
new file mode 100644
index 0000000..1aed5ec
--- /dev/null
+++ b/src/assets/json/nation-code.json
@@ -0,0 +1,282 @@
+[
+  {
+      "id": "01",
+      "text": "汉族",
+      "value": "Han"
+  },
+  {
+      "id": "02",
+      "text": "壮族",
+      "value": "Zhuang"
+  },
+  {
+      "id": "03",
+      "text": "回族",
+      "value": "Hui"
+  },
+  {
+      "id": "04",
+      "text": "藏族",
+      "value": "Tibetan"
+  },
+  {
+      "id": "05",
+      "text": "维吾尔族",
+      "value": "Uighur "
+  },
+  {
+      "id": "06",
+      "text": "苗族",
+      "value": "Miao"
+  },
+  {
+      "id": "07",
+      "text": "彝族",
+      "value": "Yi"
+  },
+  {
+      "id": "08",
+      "text": "蒙古族",
+      "value": "Mongol"
+  },
+  {
+      "id": "09",
+      "text": "布依族",
+      "value": "Buyi"
+  },
+  {
+      "id": "10",
+      "text": "朝鲜族",
+      "value": "Korean"
+  },
+  {
+      "id": "11",
+      "text": "满族",
+      "value": "Manchu"
+  },
+  {
+      "id": "12",
+      "text": "侗族",
+      "value": "Dong"
+  },
+  {
+      "id": "13",
+      "text": "瑶族",
+      "value": "Yao"
+  },
+  {
+      "id": "14",
+      "text": "白族",
+      "value": "Bai"
+  },
+  {
+      "id": "15",
+      "text": "土家族",
+      "value": "Tujia"
+  },
+  {
+      "id": "16",
+      "text": "哈尼族",
+      "value": "Hani"
+  },
+  {
+      "id": "17",
+      "text": "哈萨克族",
+      "value": "Kazakh"
+  },
+  {
+      "id": "18",
+      "text": "傣族",
+      "value": "Dai"
+  },
+  {
+      "id": "19",
+      "text": "黎族",
+      "value": "Li"
+  },
+  {
+      "id": "20",
+      "text": "傈僳族",
+      "value": "Lisu"
+  },
+  {
+      "id": "21",
+      "text": "佤族",
+      "value": "Wa"
+  },
+  {
+      "id": "22",
+      "text": "畲族",
+      "value": "She"
+  },
+  {
+      "id": "23",
+      "text": "高山族",
+      "value": "Gaoshan"
+  },
+  {
+      "id": "24",
+      "text": "拉祜族",
+      "value": "Lahu"
+  },
+  {
+      "id": "25",
+      "text": "水族",
+      "value": "Shui"
+  },
+  {
+      "id": "26",
+      "text": "东乡族",
+      "value": "Dongxiang"
+  },
+  {
+      "id": "27",
+      "text": "纳西族",
+      "value": "Naxi"
+  },
+  {
+      "id": "28",
+      "text": "景颇族",
+      "value": "Jingpo"
+  },
+  {
+      "id": "29",
+      "text": "柯尔克孜族",
+      "value": "Kirghiz"
+  },
+  {
+      "id": "30",
+      "text": "土族",
+      "value": "Tu"
+  },
+  {
+      "id": "31",
+      "text": "达斡尔族",
+      "value": "Daur"
+  },
+  {
+      "id": "32",
+      "text": "仫佬族",
+      "value": "Mulam"
+  },
+  {
+      "id": "33",
+      "text": "羌族",
+      "value": "Qiang"
+  },
+  {
+      "id": "34",
+      "text": "布朗族",
+      "value": "Blang"
+  },
+  {
+      "id": "35",
+      "text": "撒拉族",
+      "value": "Salar"
+  },
+  {
+      "id": "36",
+      "text": "毛南族",
+      "value": "Maonan"
+  },
+  {
+      "id": "37",
+      "text": "仡佬族",
+      "value": "Gelao"
+  },
+  {
+      "id": "38",
+      "text": "锡伯族",
+      "value": "Xibe"
+  },
+  {
+      "id": "39",
+      "text": "阿昌族",
+      "value": "Achang"
+  },
+  {
+      "id": "40",
+      "text": "普米族",
+      "value": "Pumi"
+  },
+  {
+      "id": "41",
+      "text": "塔吉克族",
+      "value": "Tajik"
+  },
+  {
+      "id": "42",
+      "text": "怒族",
+      "value": "Nu"
+  },
+  {
+      "id": "43",
+      "text": "乌孜别克族",
+      "value": "Uzbek"
+  },
+  {
+      "id": "44",
+      "text": "俄罗斯族",
+      "value": "Russian"
+  },
+  {
+      "id": "45",
+      "text": "鄂温克族",
+      "value": "Evenki"
+  },
+  {
+      "id": "46",
+      "text": "崩龙族(得昂族)",
+      "value": "Bumloon"
+  },
+  {
+      "id": "47",
+      "text": "保安族",
+      "value": "Bonan"
+  },
+  {
+      "id": "48",
+      "text": "裕固族",
+      "value": "Yugur"
+  },
+  {
+      "id": "49",
+      "text": "京族",
+      "value": "Gin"
+  },
+  {
+      "id": "50",
+      "text": "塔塔尔族",
+      "value": "Tatar"
+  },
+  {
+      "id": "51",
+      "text": "独龙族",
+      "value": "Drung"
+  },
+  {
+      "id": "52",
+      "text": "鄂伦春族",
+      "value": "Oroqin"
+  },
+  {
+      "id": "53",
+      "text": "赫哲族",
+      "value": "Hezhen"
+  },
+  {
+      "id": "54",
+      "text": "门巴族",
+      "value": "Menba"
+  },
+  {
+      "id": "55",
+      "text": "珞巴族",
+      "value": "Lhobo"
+  },
+  {
+      "id": "56",
+      "text": "基诺族",
+      "value": "Jino"
+  }
+]
diff --git a/src/views/resource/person/register/component/basic.vue b/src/views/resource/person/register/component/basic.vue
index 4195d65..c25b424 100644
--- a/src/views/resource/person/register/component/basic.vue
+++ b/src/views/resource/person/register/component/basic.vue
@@ -1,104 +1,331 @@
 <!-- 人员登记 基本信息 -->
 <script name="RegisterBasic" lang="ts" setup>
-const props = defineProps({ operation: { type: String, default: '' } })
+import type { FormInstance, UploadProps } from 'element-plus'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import dayjs from 'dayjs'
+import type { IDictType, IStaffBasicInfo } from '../person-regitster'
+import nationList from '@/assets/json/nation-code.json'
+import { getDictByCode } from '@/api/system/dict'
+import { UploadFile } from '@/api/file'
+import { getPhotoUrl } from '@/api/system/tool'
+import { addStaffBasic } from '@/api/resource/register'
+
+const props = defineProps({
+  operation: { type: String, default: '' },
+})
+
+const emit = defineEmits(['afterAddBasic'])
+
+const staffBasicInfo = reactive<IStaffBasicInfo>({
+  account: 'ty',
+  pictureFile: '',
+  staffNo: '',
+  staffName: '',
+  idCard: '',
+  birthday: '',
+  nativePlace: '',
+  education: '',
+  recordDate: '',
+  officerNo: '',
+  gender: '',
+  genderName: '',
+  graduationDate: '',
+  nation: '',
+  degree: '',
+  deptId: '',
+  station: '',
+  major: '',
+  certificateNumber: '',
+  engageDate: '',
+  workingDate: '',
+  titleInitialDate: '',
+  titleRecentlyDate: '',
+  academicStartDate: '',
+  partyDate: '',
+  enlistmentDate: '',
+  staffType: '',
+  rankLevel: '',
+  rankLevelDate: '',
+  jobLevel: '',
+  jobLevelDate: '',
+  treatmentLevel: '',
+  treatmentLevelDate: '',
+  workingExperience: '',
+  rankExperience: '',
+  titleExperience: '',
+  rewardsPunishments: '',
+  remark: '',
+})
+const educationList = ref<IDictType[]>([])
+const genderList = ref<IDictType[]>([])
+const degreeList = ref<IDictType[]>([])
+const staffTypeList = ref<IDictType[]>([])
+const genderName = ref('')
+
+const basicFormRef = ref()
+
+// 身份证号码验证规则
+const validateIDcard = (rule: any, value: any, callback: any) => {
+  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
+  if (rr.test(value)) {
+    // 校验成功后自动填充出生日期和性别字段
+    // 获取生日
+    const idCardStr = staffBasicInfo.idCard
+    staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`
+
+    // 获取性别 第17位  奇数为男 偶数为女
+    if (Number(idCardStr.substring(16, 17)) % 2) {
+    // 男
+      staffBasicInfo.gender = '1'
+      staffBasicInfo.genderName = '男'
+    }
+    else {
+    //  女
+      staffBasicInfo.gender = '2'
+      staffBasicInfo.genderName = '女'
+    }
+
+    callback()
+  }
+  else {
+    // 校验失败将出生日期和性别字段清除
+    staffBasicInfo.birthday = ''
+    staffBasicInfo.gender = ''
+    staffBasicInfo.genderName = ''
+
+    callback(new Error('验证失败'))
+  }
+}
+
+const staffBasicRules = ref({
+  staffNo: [{ required: true, message: '人员编号不能为空', trigger: 'blur' }],
+  staffName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+  idCard: [{ required: true, message: '身份证号码为空或不符合规范', trigger: 'blur', validator: validateIDcard }],
+  nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
+  education: [{ required: true, message: '学历不能为空，请选择', trigger: 'blur' }],
+  titleRectDate: [{ required: true, message: '职称最近续评时间不能为空，请选择', trigger: 'blur' }],
+  staffType: [{ required: true, message: '人员类别不能为空，请选择', trigger: 'blur' }],
+  jobLevelDate: [{ required: true, message: '职务层级时间不能为空，请选择', trigger: 'blur' }],
+}) // 表单验证规则
+
 // 逻辑
+
+// 查询学历字典值
+const getEducationDict = () => {
+  getDictByCode('bizEducation').then((res) => {
+    if (res.code === 200) {
+      educationList.value = res.data
+    }
+  })
+}
+
+// 查询性别字典值
+const getGenderDict = () => {
+  getDictByCode('sex').then((res) => {
+    if (res.code === 200) {
+      genderList.value = res.data
+    }
+  })
+}
+
+// 查询学位字典值
+const getDegreeDict = () => {
+  getDictByCode('bizDegree').then((res) => {
+    if (res.code === 200) {
+      degreeList.value = res.data
+    }
+  })
+}
+
+// 查询人员类别字典值
+const getStaffTypeDict = () => {
+  getDictByCode('bizStaffType').then((res) => {
+    if (res.code === 200) {
+      staffTypeList.value = res.data
+    }
+  })
+}
+
+// 上传请求
+const uploadQuarterlyEvaluateFile: any = (file: any) => {
+  const fd = new FormData()
+  fd.append('multipartFile', file.file)
+  const loading = ElLoading.service({
+    lock: true,
+    background: 'rgba(255, 255, 255, 0.8)',
+  })
+  UploadFile(fd).then((res) => {
+    if (res.code === 200) {
+      console.log(res)
+      ElMessage.success('上传成功')
+      staffBasicInfo.pictureFile = res.data[0]
+      loading.close()
+    }
+  }).catch(() => {
+    loading.close()
+    ElMessage.error('上传失败')
+  })
+}
+
+// 上传之前的验证
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
+    ElMessage.error('只能上传png/jpeg/jpg格式的图片')
+    return false
+  }
+  else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片不能大于2MB')
+    return false
+  }
+  return true
+}
+
+// 保存基本信息
+const saveBasicForm = async () => {
+  if (!basicFormRef) { return }
+
+  if (props.operation === 'create') {
+    await basicFormRef.value.validate((valid: boolean, fields: any) => {
+      if (valid === true) {
+        ElMessageBox.confirm(
+          '确认保存吗？',
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          },
+        ).then(() => {
+          addStaffBasic(staffBasicInfo).then((res) => {
+            console.log(res)
+            if (res.code === 200) {
+              ElMessage.success('保存成功')
+              emit('afterAddBasic', res.data.id)
+            }
+          })
+        })
+      }
+    })
+  }
+}
+
+// 图片预览地址
+const photoUrl = ref('')
+watch(() => staffBasicInfo.pictureFile, (newVal) => {
+  getPhotoUrl(newVal).then((res) => {
+    if (res.code === 200) {
+      photoUrl.value = res.data
+    }
+  })
+})
+
+watch(() => staffBasicInfo.engageDate, (newVal) => {
+  const now = new Date()
+  const intervalDay = dayjs(now).diff(newVal, 'day')
+  staffBasicInfo.workingDate = `${(intervalDay / 365).toFixed(1)}`
+})
+
+onMounted(() => {
+  getEducationDict()
+  getGenderDict()
+  getDegreeDict()
+  getStaffTypeDict()
+})
+
+defineExpose({
+  saveBasicForm,
+})
 </script>
 
 <template>
   <app-container>
-    <el-form ref="ruleFormRef" label-position="right" label-width="110px" border stripe>
+    <el-form ref="basicFormRef" :model="staffBasicInfo" :rules="staffBasicRules" label-position="right" label-width="110px" border stripe>
       <el-row :gutter="24">
+        <!-- 第一行 第一、二列 -->
         <el-col :span="12">
-          <el-form-item prop="minioFileName">
-            <!-- <el-upload
+          <el-form-item>
+            <el-upload
               class="avatar-uploader"
               :show-file-list="false"
               :http-request="uploadQuarterlyEvaluateFile"
               :before-upload="beforeAvatarUpload"
-              :disabled="title === '详情'"
               accept="image/png, image/jpeg,image/jpg"
             >
-              <img v-if="ruleForm.minioFileName" :src="photoUrl" class="avatar">
+              <img v-if="staffBasicInfo.pictureFile" :src="photoUrl" class="avatar">
               <el-icon v-else class="avatar-uploader-icon">
                 <plus />
               </el-icon>
-            </el-upload> -->
+            </el-upload>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第三列 -->
         <el-col :span="6">
-          <el-form-item label="人员编号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+          <el-form-item label="人员编号" prop="staffNo">
+            <el-input v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="姓名" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="姓名" prop="staffName">
+            <el-input v-model="staffBasicInfo.staffName" placeholder="请输入姓名，必填项" :clearable="true" />
+            <el-input v-model="staffBasicInfo.account" type="hidden" />
           </el-form-item>
-          <el-form-item label="身份证号" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="身份证号" prop="idCard">
+            <el-input ref="idCard" v-model="staffBasicInfo.idCard" placeholder="请输入身份证号，必填项" :clearable="true" />
           </el-form-item>
-          <el-form-item label="出生日期" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="出生日期" prop="birthday">
+            <el-input v-model="staffBasicInfo.birthday" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="学历" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="籍贯" prop="nativePlace">
+            <el-input v-model="staffBasicInfo.nativePlace" placeholder="请输入籍贯" />
           </el-form-item>
-          <el-form-item label="籍贯" prop="birthday" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <el-date-picker
-              v-model="ruleForm.birthday" type="date" format="YYYY-MM" value-format="YYYY-MM"
-              placeholder="出生年月" disabled
-              style="width: 100%;"
-            /> -->
+
+          <el-form-item label="学历" prop="education">
+            <el-select v-model="staffBasicInfo.education" placeholder="请选择学历" style="width: 100%;">
+              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
+
+        <!-- 第一行 第四列 -->
         <el-col :span="6">
-          <el-form-item label="建档时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="建档时间">
+            <el-date-picker
+              v-model="staffBasicInfo.recordDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择建档时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军官证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军官证号">
+            <el-input v-model="staffBasicInfo.officerNo" placeholder="请输入军官证号" />
           </el-form-item>
-          <el-form-item label="性别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="性别">
+            <el-input v-model="staffBasicInfo.gender" type="hidden" :readonly="true" />
+            <el-input v-model="staffBasicInfo.genderName" placeholder="自动从身份证号获取" :readonly="true" />
           </el-form-item>
-          <el-form-item label="毕业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="毕业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.graduationDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择毕业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="民族" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="民族">
+            <el-select v-model="staffBasicInfo.nation" placeholder="请选择民族" style="width: 100%;" :filterable="true" :clearable="true">
+              <el-option v-for="item in nationList" :key="item.id" :label="item.text" :value="item.text" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="学位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="学位">
+            <el-select v-model="staffBasicInfo.degree" placeholder="请选择学位" style="width: 100%;">
+              <el-option v-for="item in degreeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
@@ -107,89 +334,118 @@
       <el-row :gutter="24">
         <!-- 第一列 -->
         <el-col :span="6">
-          <el-form-item label="工作部门" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="工作部门">
+            <dept-select v-model="staffBasicInfo.deptId" placeholder="请选择工作部门" style="width: 100%;" />
           </el-form-item>
-          <el-form-item label="从事专业时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="从事专业时间">
+            <el-date-picker
+              v-model="staffBasicInfo.engageDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择从事专业时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入学时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="入学时间">
+            <el-date-picker
+              v-model="staffBasicInfo.academicStartDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入学时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="军衔等级">
+            <el-input v-model="staffBasicInfo.rankLevel" placeholder="请输入军衔等级" />
           </el-form-item>
-          <el-form-item label="待遇级别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="待遇级别">
+            <el-input v-model="staffBasicInfo.treatmentLevel" placeholder="请输入待遇级别" />
           </el-form-item>
         </el-col>
 
         <!-- 第二列 -->
         <el-col :span="6">
-          <el-form-item label="岗位" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="岗位">
+            <el-input v-model="staffBasicInfo.station" placeholder="请输入岗位" />
           </el-form-item>
-          <el-form-item label="干龄" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="干龄">
+            <el-input v-model="staffBasicInfo.workingDate" placeholder="自动计算" readonly>
+              <template #append>
+                年
+              </template>
+            </el-input>
           </el-form-item>
-          <el-form-item label="党团时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="党团时间">
+            <el-date-picker
+              v-model="staffBasicInfo.partyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择党团时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="军衔等级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="军衔等级时间">
+            <el-date-picker
+              v-model="staffBasicInfo.rankLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择军衔等级时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="待遇级别时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="待遇级别时间">
+            <el-date-picker
+              v-model="staffBasicInfo.treatmentLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择待遇级别时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
 
         <!-- 第三列 -->
         <el-col :span="6">
-          <el-form-item label="计量专业" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="计量专业">
+            <el-input v-model="staffBasicInfo.major" placeholder="请输入从事计量专业" />
           </el-form-item>
-          <el-form-item label="职称初评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+
+          <el-form-item label="职称初评">
+            <el-date-picker
+              v-model="staffBasicInfo.titleInitialDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选职称初评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="入伍时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="入伍时间">
+            <el-date-picker
+              v-model="staffBasicInfo.enlistmentDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择入伍时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="职务层级" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级">
+            <el-input v-model="staffBasicInfo.jobLevel" placeholder="请输入职务层级" />
           </el-form-item>
         </el-col>
 
         <!-- 第四列 -->
         <el-col :span="6">
-          <el-form-item label="证号" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="证号">
+            <el-input v-model="staffBasicInfo.certificateNumber" placeholder="自动获取检定员证书号" readonly />
           </el-form-item>
-          <el-form-item label="职称最近续评" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职称最近续评" prop="titleRectDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.titleRecentlyDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职称最近续评时间" style="width: 100%;"
+            />
           </el-form-item>
-          <el-form-item label="人员类别" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="人员类别" prop="staffTypeProp">
+            <el-select v-model="staffBasicInfo.staffType" placeholder="请选择人员类别" style="width: 100%;">
+              <el-option v-for="item in staffTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="职务层级时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" />
-            <!-- <dept-select v-model="ruleForm.deptId" :data="PubListTree" :placeholder="title === '详情' ? ' ' : '选择组织机构'" :disabled="title === '详情'" style="width: 100%;" /> -->
+          <el-form-item label="职务层级时间" prop="jobLevelDateProp">
+            <el-date-picker
+              v-model="staffBasicInfo.jobLevelDate" type="date"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择职务层级时间" style="width: 100%;"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -197,8 +453,8 @@
       <!-- 第三行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="工作简历" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="工作简历">
+            <el-input v-model="staffBasicInfo.workingExperience" placeholder="请输入工作简历" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -206,8 +462,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="军衔/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="军衔/时间">
+            <el-input v-model="staffBasicInfo.rankExperience" placeholder="请输入军衔及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -215,8 +471,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="职称/时间" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="职称/时间">
+            <el-input v-model="staffBasicInfo.titleExperience" placeholder="请输入职称及获得时间" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -224,8 +480,8 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="奖惩情况" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="3" />
+          <el-form-item label="奖惩情况">
+            <el-input v-model="staffBasicInfo.rewardsPunishments" placeholder="请输入奖惩情况" type="textarea" :rows="3" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -233,82 +489,42 @@
       <!-- 第四行 -->
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="备注" prop="deptId" class="marg-item">
-            <el-input ref="cardRef" placeholder="身份证号" type="textarea" :rows="1" />
+          <el-form-item label="备注">
+            <el-input v-model="staffBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :rows="1" />
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- <el-form-item label="计量专业" prop="major" class="marg-item"> -->
-      <!-- <el-select
-              v-model.trim="ruleForm.major"
-              clearable
-              :placeholder="title === '详情' ? '' : '请选择'"
-              :disabled="title === '详情'"
-              class="full-width-input"
-            >
-              <el-option
-                v-for="item in measureMajorList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
-              />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否特操人" prop="specialOperator" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.specialOperator" placeholder="是否特操人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="人员编号" prop="staffNo"> -->
-      <!-- <el-input v-model.trim="ruleForm.staffNo" placeholder="系统自动生成" disabled /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="性别" prop="sex" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.sex" placeholder="请选择性别" disabled style="width: 100%;">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="技术职务" prop="technologyJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.technologyJob" clearable :placeholder="title === '详情' ? ' ' : '技术职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in technologyJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="从事日期" prop="workDate" class="marg-item"> -->
-      <!-- <el-date-picker
-              v-model="ruleForm.workDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :disabled="title === '详情'"
-              placeholder="请选择从事日期" style="width: 100%;"
-            /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否技术考核" prop="technologyExam" class="marg-item" style="width: 100%;"> -->
-      <!-- <el-select v-model="ruleForm.technologyExam" placeholder="技术考核" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- </el-col> -->
-      <!-- <el-col :span="6"> -->
-      <!-- <el-form-item label="身份证号" prop="idCard"> -->
-      <!-- <el-input ref="cardRef" v-model.trim="ruleForm.idCard" placeholder="身份证号" :disabled="title === '详情'" @blur="getBirthday" /> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="文化程度" prop="education" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.education" placeholder="文化程度" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="行政职务" prop="administrationJob" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.administrationJob" clearable :placeholder="title === '详情' ? ' ' : '行政职务'" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in administrationJobList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item> -->
-      <!-- <el-form-item label="是否主考人" prop="mainExaminer" class="marg-item"> -->
-      <!-- <el-select v-model="ruleForm.mainExaminer" placeholder="是否主考人" :disabled="title === '详情'" style="width: 100%;">
-              <el-option v-for="item in selectWhether" :key="item.value" :label="item.name" :value="item.value" />
-            </el-select> -->
-      <!-- </el-form-item>
-          <el-form-item label="备注" prop="remark" class="marg-item">
-            <el-input placeholder="请输入备注" :disabled="props.operation === 'detail'" />
-          </el-form-item>
-        </el-col> -->
     </el-form>
   </app-container>
 </template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 190px;
+  height: 250px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 190px;
+  height: 250px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/resource/person/register/detail.vue b/src/views/resource/person/register/detail.vue
index 8e030aa..f6abb88 100644
--- a/src/views/resource/person/register/detail.vue
+++ b/src/views/resource/person/register/detail.vue
@@ -1,21 +1,17 @@
 <!-- 人员登记详情 -->
 <script name="RegisterDetail" lang="ts" setup>
-import type { FormInstance, FormRules, TabPaneName, TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
-import { onMounted, ref } from 'vue'
 import RegisterBasic from './component/basic.vue'
 import RegisterEducation from './component/education.vue'
 import RegisterAuthorize from './component/authorize.vue'
 import RegisterResume from './component/resume.vue'
 import RegisterVerifier from './component/verifier.vue'
 import RegisterTrainning from './component/trainning.vue'
-// import showPhoto from '@/components/showPhoto/index.vue'
 
 // 定义变量
 const $route = useRoute()
 const $router = useRouter()
 const title = ref('')
-const staffId = ref('')
-const ruleFormRef = ref<FormInstance>() // from组件
+const operation = ref('')
 
 const radioItems = ref([
   { name: '基本信息', value: 'register-basic' },
@@ -26,10 +22,14 @@
   { name: '训练情况', value: 'register-trainning' },
 ])
 const current = ref('register-basic')
-const operation = ref('')
+
+const staffId = ref('')
+
+// 子组件的引用
+const refRegisterBasic = ref()
 
 // 逻辑
-// 重置表单内容
+// 重置各个子组件的表单内容
 const resetFormData = () => {
   // ruleForm.value = {
 
@@ -37,26 +37,43 @@
 }
 
 // 关闭
-const resetForm = (formEl: FormInstance | undefined) => {
-  formEl?.resetFields()
-  // changeList.value[0].data = []
+const resetForm = () => {
   $router.go(-1)
   resetFormData()
 }
 
+// 保存
+const saveForm = () => {
+  switch (current.value) {
+    case 'register-basic':
+      refRegisterBasic.value.saveBasicForm()
+      break
+  }
+}
+
 // 弹窗初始化
 const initDialog = (row: any) => {
   operation.value = row.operation
-  if (row.operation === 'create') {
-    title.value = '人员登记'
+  switch (row.operation) {
+    case 'create' :
+      title.value = '人员登记（新增）'
+      break
+    case 'update':
+      title.value = '人员登记（编辑）'
+      break
+    case 'detail':
+      title.value = '人员登记（详情）'
+      break
+    default:
+      title.value = ''
+      break
   }
-  // else {
-
-  // }
 }
 
-const tabItemClickedHandler = (name: TabPaneName) => {
-  console.log(current.value)
+const getStaffId = (id: string) => {
+  console.log('from child comp...', id)
+  staffId.value = id
+  console.log(staffId.value)
 }
 
 onMounted(() => {
@@ -68,19 +85,19 @@
   <app-container style="overflow: hidden;">
     <detail-page :title="`${title}`">
       <template #btns>
-        <el-button v-if="title !== '详情'" type="primary">
+        <el-button v-if="operation !== 'detail'" type="primary" @click="saveForm()">
           保存
         </el-button>
-        <el-button type="info" @click="resetForm(ruleFormRef)">
+        <el-button type="info" @click="resetForm()">
           关闭
         </el-button>
       </template>
 
-      <el-tabs v-model="current" type="card" @tab-change="tabItemClickedHandler">
+      <el-tabs v-model="current" type="card">
         <el-tab-pane v-for="item in radioItems" :key="item.value" :label="item.name" :name="item.value" />
       </el-tabs>
 
-      <register-basic v-show="current === 'register-basic'" ref="register-basic-form" :operation="operation" />
+      <register-basic v-show="current === 'register-basic'" ref="refRegisterBasic" :operation="operation" @after-add-basic="getStaffId" />
       <register-education v-show="current === 'register-education'" ref="register-education-form" :operation="operation" />
       <register-authorize v-show="current === 'register-authorize'" ref="register-education-form" :operation="operation" />
       <register-resume v-show="current === 'register-resume'" ref="register-education-form" :operation="operation" />
diff --git a/src/views/resource/person/register/list.vue b/src/views/resource/person/register/list.vue
index 4cf0f07..3006886 100644
--- a/src/views/resource/person/register/list.vue
+++ b/src/views/resource/person/register/list.vue
@@ -52,7 +52,7 @@
   loadingTable.value = true
   getStaffList(searchQuery).then((res) => {
     if (res.code === 200) {
-      list.value = res.data.records
+      list.value = res.data.rows
       total.value = Number(res.data.total)
     }
     loadingTable.value = false
@@ -75,6 +75,10 @@
   }
   getList()
 }
+
+onMounted(() => {
+  getList()
+})
 </script>
 
 <template>
@@ -139,4 +143,3 @@
     </table-container>
   </app-container>
 </template>
-@/api/resource/register
diff --git a/src/views/resource/person/register/person-regitster.ts b/src/views/resource/person/register/person-regitster.ts
index 00d1d01..dd23d17 100644
--- a/src/views/resource/person/register/person-regitster.ts
+++ b/src/views/resource/person/register/person-regitster.ts
@@ -6,3 +6,54 @@
   sort: string
   order: string
 }
+
+export interface IDictType {
+  name: string
+  id: string
+  value: string
+}
+
+export interface IStaffBasicInfo {
+  account: string
+  staffNo: string
+  staffName: string
+  pictureFile: string
+  idCard: string
+  birthday: string
+  nativePlace: string
+  education: string
+  recordDate: string
+  officerNo: string
+  gender: string
+  genderName: string
+  graduationDate: string
+  nation: string
+  degree: string
+  deptId: string
+  station: string
+  major: string
+  certificateNumber: string
+  engageDate: string
+  workingDate: string
+  titleInitialDate: string
+  titleRecentlyDate: string
+  academicStartDate: string
+  partyDate: string
+  enlistmentDate: string
+  staffType: string
+  rankLevel: string
+  rankLevelDate: string
+  jobLevel: string
+  jobLevelDate: string
+  treatmentLevel: string
+  treatmentLevelDate: string
+  workingExperience: string
+  rankExperience: string
+  titleExperience: string
+  rewardsPunishments: string
+  remark: string
+}
+
+export interface IStaffDetail {
+  staffBasicInfo: IStaffBasicInfo
+}