feat: 个人档案增加工作经历、家庭成员、学习经历

client/src/views/OaSystem/mineCenter/rightChild/wdda.vue

@@ -4,6 +4,10 @@ import { getRecordsDetail } from '@/api/oa/staffRecords'
 import { useUserStore } from '@/store/modules/user'
 import { getConfigDict } from './index'
 import TechCertificate from '../../personnelManagement/ygdaPage/TechCertificate.vue'
+import WorkTable from '../../personnelManagement/ygdaPage/WorkTable.vue'
+import FamilyTable from '../../personnelManagement/ygdaPage/familyTable.vue'
+import SchoolTable from '../../personnelManagement/ygdaPage/SchoolTable.vue'
+
 /**
  * @description 我的档案
  */
@@ -11,12 +15,32 @@ const formConfigList = getConfigDict()
 
 const userId = useUserStore().getUser.id // 当前登录的编号
 
-const { data } = useQuery(['fetch-staff-detail', userId], async () => {
-  return await getRecordsDetail({ userId })
-})
+const data = ref<any>({})
+useQuery(
+  ['fetch-staff-detail', userId],
+  async () => {
+    return await getRecordsDetail({ userId })
+  },
+  {
+    onSuccess: (res) => {
+      console.log('res', res)
+      data.value = res
+    }
+  }
+)
+
+const router = useRouter()
+const editDetail = () => {
+  router.push({
+    path: '/staffDetail',
+    query: { id: data.value.userId, type: 'edit' }
+  })
+}
 </script>
 <template>
   <div class="form-unable-edit my-portrait">
+    <div class="edit-button"><el-button type="primary" @click="editDetail">编辑</el-button></div>
+
     <el-form ref="formRef" v-if="data" :model="data" label-width="150px" :disabled="true">
       <div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
         <div class="title">
@@ -73,6 +97,27 @@ const { data } = useQuery(['fetch-staff-detail', userId], async () => {
         <TechCertificate />
       </div>
     </div>
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>工作经历</span>
+      </div>
+      <WorkTable :defaultData="data['workList'] ?? []" :onlyRead="true" />
+    </div>
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>家庭成员</span>
+      </div>
+      <FamilyTable :defaultData="data['familyList'] ?? []" :onlyRead="true" />
+    </div>
+    <div class="my-portrait-item">
+      <div class="title">
+        <i></i>
+        <span>学习经历</span>
+      </div>
+      <SchoolTable :defaultData="data['schoolList'] ?? []" :onlyRead="true" />
+    </div>
   </div>
 </template>
 
@@ -83,6 +128,10 @@ const { data } = useQuery(['fetch-staff-detail', userId], async () => {
   padding: 30px 30px 0;
   overflow: auto;
 
+  .edit-button {
+    text-align: right;
+  }
+
   .my-portrait-item {
     margin-bottom: 30px;
 

client/src/views/OaSystem/personnelManagement/ygdaPage/SchoolTable.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-tag
+    type="primary"
+    size="large"
+    effect="plain"
+    v-if="!tableData.length && !onlyRead"
+    @click="onAddItem(0)"
+    >增加一行</el-tag
+  >
+  <el-table
+    class="detail-table"
+    :header-cell-style="{
+      background: '#F2F4F8',
+      color: '#000000'
+    }"
+    :data="tableData"
+    v-else
+  >
+    <el-table-column prop="major" label="专业">
+      <template #default="scope">
+        <el-input v-model="scope.row.major" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.major }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="byxx" label="毕业学校">
+      <template #default="scope">
+        <el-input v-model="scope.row.byxx" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.byxx }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="bysj" label="毕业时间">
+      <template #default="scope">
+        <el-date-picker
+          v-model="scope.row.bysj"
+          type="date"
+          value-format="YYYY-MM-DD"
+          v-if="scope.row.isEdit"
+        />
+        <span v-else>{{ scope.row.bysj }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="xl" label="学历">
+      <template #default="scope">
+        <el-input v-model="scope.row.xl" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.xl }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="filePath" label="附件地址">
+      <template #default="scope">
+        <el-input v-model="scope.row.filePath" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.filePath }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column fixed="right" label="操作" width="140">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click="onSaveItem(scope.$index)"
+          v-if="scope.row.isEdit"
+        >
+          保存
+        </el-button>
+        <el-button link type="primary" size="small" @click="onEditItem(scope.$index)" v-else>
+          编辑
+        </el-button>
+        <el-button
+          v-if="tableData.length > 1"
+          link
+          type="primary"
+          size="small"
+          @click="deleteRow(scope.$index)"
+        >
+          删除
+        </el-button>
+        <el-button
+          v-if="scope.$index < 4 && tableData.length < 5"
+          link
+          type="primary"
+          size="small"
+          @click="onAddItem(scope.$index)"
+        >
+          新增
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+/**
+ * @description 学习经历
+ */
+interface ITable {
+  id?: string
+  userId?: string
+  major?: string // 专业
+  byxx?: string // 毕业学校
+  bysj?: string // 毕业时间
+  xl?: string // 学历
+  filePath?: string // 附件地址
+  isEdit?: boolean // 是否可编辑
+}
+const tableData = ref<ITable[]>([])
+
+const $emit = defineEmits<{
+  (e: 'onSave', v: any): void
+}>()
+
+interface IProps {
+  defaultData: any[]
+  onlyRead?: boolean
+}
+const props = defineProps<IProps>()
+const { defaultData, onlyRead } = props
+onMounted(() => {
+  if (defaultData && defaultData.length) {
+    tableData.value = defaultData.map((item: any) => {
+      return {
+        ...item,
+        isEdit: false
+      }
+    })
+  }
+})
+
+// 新增行
+const onAddItem = (index: number) => {
+  tableData.value.splice(index - 1, 0, {
+    major: '',
+    byxx: '',
+    bysj: '',
+    xl: '',
+    filePath: '',
+    isEdit: true
+  })
+}
+
+// 保存行
+const onSaveItem = (index: number) => {
+  tableData.value[index].isEdit = false
+  const changeData = tableData.value.map((item: any) => {
+    delete item.isEdit
+    return item
+  })
+  $emit('onSave', changeData)
+}
+
+// 编辑行
+const onEditItem = (index: number) => {
+  tableData.value[index].isEdit = true
+}
+
+// 删除
+const deleteRow = (index: number) => {
+  tableData.value.splice(index, 1)
+}
+</script>
+<style scoped lang="scss">
+.detail-table {
+  width: 100%;
+  min-height: 100px;
+}
+</style>

client/src/views/OaSystem/personnelManagement/ygdaPage/WorkTable.vue

@@ -1,4 +1,12 @@
 <template>
+  <el-tag
+    type="primary"
+    size="large"
+    effect="plain"
+    v-if="!tableData.length && !onlyRead"
+    @click="onAddItem(0)"
+    >增加一行</el-tag
+  >
   <el-table
     class="detail-table"
     :header-cell-style="{
@@ -6,14 +14,94 @@
       color: '#000000'
     }"
     :data="tableData"
+    v-else
   >
-    <el-table-column prop="workLocation" label="工作单位" />
-    <el-table-column prop="post" label="职位" />
-    <el-table-column prop="startTime" label="开始时间" />
-    <el-table-column prop="endTime" label="结束时间" />
-    <el-table-column prop="resignReason" label="离职原因" />
-    <el-table-column prop="jyxy" label="是否有竞业限制/未尽法律事宜" />
-    <el-table-column prop="competitionDetail" label="具体条款" />
+    <el-table-column prop="workLocation" label="工作单位">
+      <template #default="scope">
+        <el-input v-model="scope.row.workLocation" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.workLocation }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="post" label="职位">
+      <template #default="scope">
+        <el-input v-model="scope.row.post" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.post }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="startTime" label="开始时间">
+      <template #default="scope">
+        <el-date-picker
+          v-model="scope.row.startTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          v-if="scope.row.isEdit"
+        />
+        <span v-else>{{ scope.row.startTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="endTime" label="结束时间">
+      <template #default="scope">
+        <el-date-picker
+          v-model="scope.row.endTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          v-if="scope.row.isEdit"
+        />
+        <span v-else>{{ scope.row.endTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="resignReason" label="离职原因">
+      <template #default="scope">
+        <el-input v-model="scope.row.resignReason" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.resignReason }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="jyxy" label="是否有竞业限制/未尽法律事宜">
+      <template #default="scope">
+        <el-input v-model="scope.row.jyxy" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.jyxy }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="competitionDetail" label="具体条款">
+      <template #default="scope">
+        <el-input v-model="scope.row.competitionDetail" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.competitionDetail }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column fixed="right" label="操作" width="140">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click="onSaveItem(scope.$index)"
+          v-if="scope.row.isEdit"
+        >
+          保存
+        </el-button>
+        <el-button link type="primary" size="small" @click="onEditItem(scope.$index)" v-else>
+          编辑
+        </el-button>
+        <el-button
+          v-if="tableData.length > 1"
+          link
+          type="primary"
+          size="small"
+          @click="deleteRow(scope.$index)"
+        >
+          删除
+        </el-button>
+        <el-button
+          v-if="scope.$index < 4 && tableData.length < 5"
+          link
+          type="primary"
+          size="small"
+          @click="onAddItem(scope.$index)"
+        >
+          新增
+        </el-button>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 <script lang="ts" setup>
@@ -23,66 +111,76 @@
 interface ITable {
   id?: string
   userId?: string
-  workLocation: string
-  post: string
-  startTime: string
-  endTime: string
-  resignReason: string
-  jyxy: string
-  competitionDetail: string
+  workLocation?: string // 工作单位
+  post?: string // 职位
+  startTime?: string // 开始时间
+  endTime?: string // 结束时间
+  resignReason?: string // 离职原因
+  jyxy?: string // 是否有竞业限制/未尽法律事宜
+  competitionDetail?: string // 具体条款
+  isEdit?: boolean // 是否可编辑
 }
 const tableData = ref<ITable[]>([])
-const tableData2 = ref<ITable[]>([
-  {
-    workLocation: '',
-    post: '',
-    startTime: '',
-    endTime: '',
-    resignReason: '',
-    jyxy: '',
-    competitionDetail: ''
-  },
-  {
-    workLocation: '',
-    post: '',
-    startTime: '',
-    endTime: '',
-    resignReason: '',
-    jyxy: '',
-    competitionDetail: ''
-  },
-  {
-    workLocation: '',
-    post: '',
-    startTime: '',
-    endTime: '',
-    resignReason: '',
-    jyxy: '',
-    competitionDetail: ''
-  },
-  {
-    workLocation: '',
-    post: '',
-    startTime: '',
-    endTime: '',
-    resignReason: '',
-    jyxy: '',
-    competitionDetail: ''
-  },
-  {
+
+const $emit = defineEmits<{
+  (e: 'onSave', v: any): void
+}>()
+
+interface IProps {
+  defaultData: any[]
+  onlyRead?: boolean
+}
+const props = defineProps<IProps>()
+const { defaultData, onlyRead } = props
+onMounted(() => {
+  if (defaultData && defaultData.length) {
+    tableData.value = defaultData.map((item: any) => {
+      return {
+        ...item,
+        isEdit: false
+      }
+    })
+  }
+})
+
+// 新增行
+const onAddItem = (index: number) => {
+  tableData.value.splice(index - 1, 0, {
     workLocation: '',
     post: '',
     startTime: '',
     endTime: '',
     resignReason: '',
     jyxy: '',
-    competitionDetail: ''
-  }
-])
+    competitionDetail: '',
+    isEdit: true
+  })
+}
+
+// 保存行
+const onSaveItem = (index: number) => {
+  tableData.value[index].isEdit = false
+  // console.log('tableData.value', tableData.value)
+  const changeData = tableData.value.map((item: any) => {
+    delete item.isEdit
+    return item
+  })
+  $emit('onSave', changeData)
+}
+
+// 编辑行
+const onEditItem = (index: number) => {
+  tableData.value[index].isEdit = true
+}
+
+// 删除
+const deleteRow = (index: number) => {
+  tableData.value.splice(index, 1)
+}
 </script>
 <style scoped lang="scss">
 .detail-table {
   width: 100%;
-  height: auto;
+  min-height: 100px;
 }
 </style>

client/src/views/OaSystem/personnelManagement/ygdaPage/familyTable.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-tag
+    type="primary"
+    size="large"
+    effect="plain"
+    v-if="!tableData.length && !onlyRead"
+    @click="onAddItem(0)"
+    >增加一行</el-tag
+  >
+  <el-table
+    class="detail-table"
+    :header-cell-style="{
+      background: '#F2F4F8',
+      color: '#000000'
+    }"
+    :data="tableData"
+    v-else
+  >
+    <el-table-column prop="name" label="姓名">
+      <template #default="scope">
+        <el-input v-model="scope.row.name" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="xb" label="性别">
+      <template #default="scope">
+        <el-input v-model="scope.row.xb" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.xb }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="gzdw" label="工作单位">
+      <template #default="scope">
+        <el-input v-model="scope.row.gzdw" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.gzdw }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="zz" label="家庭住址">
+      <template #default="scope">
+        <el-input v-model="scope.row.zz" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.zz }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="lxdh" label="联系电话">
+      <template #default="scope">
+        <el-input v-model="scope.row.lxdh" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.lxdh }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="gx" label="与本人关系">
+      <template #default="scope">
+        <el-input v-model="scope.row.gx" v-if="scope.row.isEdit" />
+        <span v-else>{{ scope.row.gx }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column fixed="right" label="操作" width="140">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click="onSaveItem(scope.$index)"
+          v-if="scope.row.isEdit"
+        >
+          保存
+        </el-button>
+        <el-button link type="primary" size="small" @click="onEditItem(scope.$index)" v-else>
+          编辑
+        </el-button>
+        <el-button
+          v-if="tableData.length > 1"
+          link
+          type="primary"
+          size="small"
+          @click="deleteRow(scope.$index)"
+        >
+          删除
+        </el-button>
+        <el-button
+          v-if="scope.$index < 4 && tableData.length < 5"
+          link
+          type="primary"
+          size="small"
+          @click="onAddItem(scope.$index)"
+        >
+          新增
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+/**
+ * @description 家庭成员
+ */
+interface ITable {
+  id?: string
+  userId?: string
+  name?: string // 姓名
+  xb?: string // 性别
+  gzdw?: string // 工作单位
+  zz?: string // 家庭住址
+  lxdh?: string // 联系电话
+  gx?: string // 与本人关系
+  isEdit?: boolean // 是否可编辑
+}
+const tableData = ref<ITable[]>([])
+
+const $emit = defineEmits<{
+  (e: 'onSave', v: any): void
+}>()
+
+interface IProps {
+  defaultData: any[]
+  onlyRead?: boolean
+}
+const props = defineProps<IProps>()
+const { defaultData, onlyRead } = props
+onMounted(() => {
+  if (defaultData && defaultData.length) {
+    tableData.value = defaultData.map((item: any) => {
+      return {
+        ...item,
+        isEdit: false
+      }
+    })
+  }
+})
+
+// 新增行
+const onAddItem = (index: number) => {
+  tableData.value.splice(index - 1, 0, {
+    name: '',
+    xb: '',
+    gzdw: '',
+    zz: '',
+    lxdh: '',
+    gx: '',
+    isEdit: true
+  })
+}
+
+// 保存行
+const onSaveItem = (index: number) => {
+  tableData.value[index].isEdit = false
+  const changeData = tableData.value.map((item: any) => {
+    delete item.isEdit
+    return item
+  })
+  $emit('onSave', changeData)
+}
+
+// 编辑行
+const onEditItem = (index: number) => {
+  tableData.value[index].isEdit = true
+}
+
+// 删除
+const deleteRow = (index: number) => {
+  tableData.value.splice(index, 1)
+}
+</script>
+<style scoped lang="scss">
+.detail-table {
+  width: 100%;
+  min-height: 100px;
+}
+</style>

client/src/views/OaSystem/personnelManagement/ygdaPage/staffDetail.vue

@@ -9,11 +9,13 @@ import { useQuery, useMutation } from '@tanstack/vue-query'
 import { getRecordsDetail, editRecordsDetail, generateStaffNum } from '@/api/oa/staffRecords'
 import { getConfigDict } from './index'
 import { ElRow, FormInstance } from 'element-plus'
-import TechCertificate from './TechCertificate.vue'
+// import TechCertificate from './TechCertificate.vue'
 import avatarImg from '@/assets/imgs/avatar.jpg'
 import DeptSelect from '@/components/DeptSelect/index.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import WorkTable from './WorkTable.vue'
+import FamilyTable from './familyTable.vue'
+import SchoolTable from './SchoolTable.vue'
 
 const formConfigList = getConfigDict()
 
@@ -32,6 +34,9 @@ useQuery(
   {
     onSuccess: (res) => {
       formData.value = res
+      // if (Array.isArray(formData.value['bysj'])) {
+      //   formData.value['bysj'] = res.bysj.join('-')
+      // }
       avatar = res.avatar ? res.avatar : avatar
     }
   }
@@ -74,12 +79,13 @@ const { mutate: generateStaffNumber } = useMutation({
 
 /**表单保存 */
 const submitForm = (formEl: FormInstance | undefined) => {
+  // console.log('formData.value', formData.value)
+  // return
   if (!formEl) return
   formEl.validate((valid) => {
     if (valid) {
       addUserMutate(formData.value)
     } else {
-      console.log('error submit!')
       return false
     }
   })
@@ -102,6 +108,22 @@ const imagePreview = (imgUrl: string) => {
 const isEdit = computed(() => {
   return type === 'edit'
 })
+
+// 修改并保存工作经历
+const saveWorkList = (data: any[]) => {
+  // console.log('data', data)
+  formData.value['workList'] = data
+}
+// 修改并保存家庭成员
+const saveFamilyList = (data: any[]) => {
+  // console.log('data', data)
+  formData.value['familyList'] = data
+}
+// 修改并保存学习经历
+const saveSchoolList = (data: any[]) => {
+  // console.log('data', data)
+  formData.value['schoolList'] = data
+}
 </script>
 <template>
   <div class="staff-files-wrap">
@@ -138,7 +160,7 @@ const isEdit = computed(() => {
                     style="width: 100%"
                     :placeholder="isEdit ? child.title : ''"
                     type="date"
-                    value-format="x"
+                    format="YYYY-MM-DD"
                   />
 
                   <DeptSelect
@@ -188,7 +210,21 @@ const isEdit = computed(() => {
             <i></i>
             <span>工作经历</span>
           </div>
-          <TechCertificate />
+          <WorkTable :defaultData="formData['workList']" @onSave="saveWorkList" />
+        </div>
+        <div class="my-portrait-item">
+          <div class="title">
+            <i></i>
+            <span>家庭成员</span>
+          </div>
+          <FamilyTable :defaultData="formData['familyList']" @onSave="saveFamilyList" />
+        </div>
+        <div class="my-portrait-item">
+          <div class="title">
+            <i></i>
+            <span>学习经历</span>
+          </div>
+          <SchoolTable :defaultData="formData['schoolList']" @onSave="saveSchoolList" />
         </div>
         <el-row justify="end">
           <el-form-item v-if="isEdit">