fix: 修改员工档案

client/src/api/oa/staffRecords/index.ts

@@ -9,3 +9,8 @@ export const getRecordsDetail = (params) => {
 export const getRecordsPage = (params) => {
   return request.get({ url: '/adm/staff-records/page', params }, '')
 }
+
+// 编辑员工档案详情
+export const editRecordsDetail = (params) => {
+  return request.post({ url: '/adm/staff-records/update', data: params })
+}

client/src/router/modules/remaining.ts

@@ -151,6 +151,14 @@ const remainingRouter: AppRouteRecordRaw[] = [
         meta: {
           title: '回款信息'
         }
+      },
+      {
+        path: 'staffDetail',
+        component: () => import('@/views/OaSystem/personnelManagement/ygdaPage/staffDetail.vue'),
+        name: 'staffDetail',
+        meta: {
+          title: '档案详情'
+        }
       }
     ]
   },

client/src/utils/formatter.ts

@@ -10,3 +10,84 @@ export const fenToYuanFormat = (
 ) => {
   return `￥${fenToYuan(cellValue)}`
 }
+
+/**
+ * 状态数字返回文字
+ * @param cellValue 字段值
+ * @param type 类型
+ */
+// @ts-ignore
+enum StaffNumType {
+  state = 'state', //状态 1-实习 2-试用 3-正式 4-离职
+  zzmm = 'zzmm', //政治面貌 1群众 2团员 3党员
+  hkxz = 'hkxz', //户口性质 1城镇 2农村
+  zgxl = 'zgxl', //最高学历 1高中 2中专 3大专 4本科 5硕士 6博士
+  pyxs = 'pyxs', //聘用形式 1劳动合同 2劳务合同 3临时合同
+  sfytd = 'sfytd' //是否已调档 1是 2否
+}
+
+enum StateValue {
+  '1' = '实习',
+  '2' = '试用',
+  '3' = '正式',
+  '4' = '离职'
+}
+
+enum ZzmmValue {
+  '1' = '群众',
+  '2' = '团员',
+  '3' = '党员'
+}
+enum HkxzValue {
+  '1' = '城镇',
+  '2' = '农村'
+}
+enum ZgxlValue {
+  '1' = '高中',
+  '2' = '中专',
+  '3' = '大专',
+  '4' = '本科',
+  '5' = '硕士',
+  '6' = '博士'
+}
+enum PyxsValue {
+  '1' = '劳动合同',
+  '2' = '劳务合同',
+  '3 ' = '临时合同'
+}
+enum SfytdValue {
+  '1' = '是',
+  '2 ' = '否'
+}
+
+export const staffNumFormatter = (cellValue, type) => {
+  if (!cellValue) {
+    return
+  }
+  let stateLabel = ''
+
+  switch (type) {
+    case StaffNumType.state:
+      stateLabel = StateValue[cellValue]
+      break
+    case StaffNumType.zzmm:
+      stateLabel = ZzmmValue[cellValue]
+      break
+    case StaffNumType.hkxz:
+      stateLabel = HkxzValue[cellValue]
+      break
+    case StaffNumType.zgxl:
+      stateLabel = ZgxlValue[cellValue]
+      break
+    case StaffNumType.pyxs:
+      stateLabel = PyxsValue[cellValue]
+      break
+    case StaffNumType.sfytd:
+      stateLabel = SfytdValue[cellValue]
+      break
+    default:
+      break
+  }
+
+  return stateLabel
+}

client/src/views/OaSystem/oaViews/layout/ListLayout.vue

@@ -16,7 +16,7 @@
 <style lang="scss">
 .oa-sys-list-view {
   height: calc(100% - 10px);
-  padding: 23px 21px;
+  padding: 20px 21px;
   margin-top: 30px;
   background: #fff;
   border-radius: 20px;
@@ -54,7 +54,7 @@
   .oa-sys-list-content {
     position: relative;
     width: 100%;
-    height: calc(100% - 180px);
+    height: calc(100% - 100px);
     margin-top: 20px;
 
     ._table,

client/src/views/OaSystem/personnelManagement/ygdaPage/index.ts

@@ -40,7 +40,8 @@ export const formConfigList = [
       },
       {
         name: 'birthday',
-        title: '出生日期'
+        title: '出生日期',
+        type: 'time'
       },
 
       {
@@ -65,11 +66,13 @@ export const formConfigList = [
       },
       {
         name: 'rgssj',
-        title: '入职时间'
+        title: '入职时间',
+        type: 'time'
       },
       {
         name: 'cjgzsj',
-        title: '参加工作时间'
+        title: '参加工作时间',
+        type: 'time'
       }
     ]
   },
@@ -95,7 +98,8 @@ export const formConfigList = [
       },
       {
         name: 'bysj',
-        title: '毕业时间'
+        title: '毕业时间',
+        type: 'time'
       },
       {
         name: 'zgxl',

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

@@ -72,22 +72,40 @@
           }"
           table-layout="auto"
         >
-          <el-table-column fixed type="index" />
+          <el-table-column fixed type="index" label="序号" width="80" />
           <el-table-column fixed align="center" prop="nickname" label="员工姓名" width="120" />
           <el-table-column
             align="center"
             prop="deptName"
-            show-overflow-tooltip="true"
+            show-overflow-tooltip
             label="所属部门"
             width="120"
           />
-          <el-table-column align="center" prop="state" label="状态" width="120" />
-          <el-table-column align="center" prop="zzmm" label="政治面貌" width="120" />
-          <el-table-column align="center" prop="hkxz" label="户口性质" width="120" />
+          <el-table-column
+            align="center"
+            prop="state"
+            label="状态"
+            width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'state')"
+          />
+          <el-table-column
+            align="center"
+            prop="zzmm"
+            label="政治面貌"
+            width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'zzmm')"
+          />
+          <el-table-column
+            align="center"
+            prop="hkxz"
+            label="户口性质"
+            width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'hkxz')"
+          />
           <el-table-column
             align="center"
             prop="byxx"
-            show-overflow-tooltip="true"
+            show-overflow-tooltip
             label="毕业院校"
             width="120"
           />
@@ -96,13 +114,19 @@
             prop="bysj"
             :formatter="dateFormatter2"
             label="毕业时间"
+            width="150"
+          />
+          <el-table-column
+            align="center"
+            prop="zgxl"
+            label="最高学历"
             width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'zgxl')"
           />
-          <el-table-column align="center" prop="zgxl" label="最高学历" width="120" />
           <el-table-column
             align="center"
             prop="major"
-            show-overflow-tooltip="true"
+            show-overflow-tooltip
             label="专业"
             width="120"
           />
@@ -111,14 +135,14 @@
             prop="cjgzsj"
             :formatter="dateFormatter2"
             label="参加工作时间"
-            width="120"
+            width="150"
           />
           <el-table-column
             align="center"
             prop="rgssj"
             :formatter="dateFormatter2"
             label="入公司时间"
-            width="120"
+            width="150"
           />
           <el-table-column
             align="center"
@@ -132,10 +156,22 @@
             prop="htdqs"
             :formatter="dateFormatter2"
             label="合同到期时间"
+            width="150"
+          />
+          <el-table-column
+            align="center"
+            prop="pyxs"
+            label="聘用形式"
+            width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'pyxs')"
+          />
+          <el-table-column
+            align="center"
+            prop="sfytd"
+            label="是否已调档"
             width="120"
+            :formatter="(row, column, cellValue) => staffNumFormatter(cellValue, 'sfytd')"
           />
-          <el-table-column align="center" prop="pyxs" label="聘用形式" width="120" />
-          <el-table-column align="center" prop="sfytd" label="是否已调档" width="120" />
           <el-table-column align="center" label="操作" fixed="right" width="120">
             <template #default="scope">
               <div style="display: flex">
@@ -167,6 +203,7 @@
 <script setup lang="ts">
 import * as StaffRecordsApi from '@/api/oa/staffRecords'
 import { dateFormatter2 } from '@/utils/formatTime'
+import { staffNumFormatter } from '@/utils/formatter'
 import ListLayout from '../../oaViews/layout/ListLayout.vue'
 
 defineOptions({ name: 'Ygda' })
@@ -217,7 +254,7 @@ const handleCurrentChange = (pageNo: number) => {
 
 const operateClick = (row: any, type: string) => {
   router.push({
-    path: 'ygdaDetail',
+    path: '/staffDetail',
     query: { id: row.userId, type }
   })
 }

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

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+defineOptions({ name: 'staffDetail' })
+
+import { useQuery, useMutation } from '@tanstack/vue-query'
+import { getRecordsDetail, editRecordsDetail } from '@/api/oa/staffRecords'
+import { formConfigList, formRules } from './index'
+import { FormInstance } from 'element-plus'
+import { staffNumFormatter } from '@/utils/formatter'
+
+const { query } = useRoute()
+const { id, type } = query
+
+const formRef = ref<FormInstance>()
+
+const formData = ref({})
+
+/**获取员工档案详情 */
+const { data } = useQuery(
+  ['fetch-staff-detail', id],
+  async () => {
+    return await getRecordsDetail({ userId: id })
+  },
+  {
+    onSuccess: (res) => {
+      formData.value = res
+    }
+  }
+)
+
+/**编辑员工档案详情 */
+const { mutate: addUserMutate } = useMutation({
+  mutationFn: async (values: any) => {
+    return await editRecordsDetail(values)
+  },
+  onSuccess(data) {
+    if (data?.code === 20000) {
+      ElMessage({
+        message: '员工档案修改成功！',
+        type: 'success'
+      })
+    } else {
+      ElMessage({
+        // message: data?.msg,
+        message: '员工档案修改成功！',
+        type: 'success'
+      })
+    }
+  },
+  onError() {
+    ElMessage({
+      message: '员工档案修改失败！',
+      type: 'error'
+    })
+  }
+})
+
+/**表单保存 */
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      addUserMutate(formData.value)
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+
+/**重置表单 */
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  formData.value = data
+}
+</script>
+<template>
+  <div class="staff-files-wrap">
+    <div class="staff-name">
+      <span>{{ formData?.nickname }}员工档案</span>
+    </div>
+
+    <div class="my-portrait" v-if="formData != undefined">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+        :disabled="type === 'view'"
+      >
+        <div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
+          <div class="title">
+            <i></i>
+            <span>{{ item.title }}</span>
+          </div>
+          <div class="my-portrait-card">
+            <ul>
+              <li v-for="(child, c) in item.children" :key="c">
+                <el-form-item :label="`${child.title}:`" :prop="child.name">
+                  <el-date-picker
+                    v-if="child.type === 'time'"
+                    v-model="formData[child?.name]"
+                    style="width: 100%"
+                    :placeholder="child.title"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                  />
+                  <el-input v-else v-model="formData[child?.name]" placeholder="" />
+                </el-form-item>
+                <!--    :formatter="(value) => staffNumFormatter(value, child?.name)"
+ -->
+              </li>
+              <li></li>
+            </ul>
+          </div>
+        </div>
+
+        <el-row justify="center">
+          <el-form-item v-if="type === 'edit'">
+            <el-button color="#1B80EB" type="primary" @click="submitForm(formRef)">保存</el-button>
+            <el-button @click="resetForm(formRef)">重置</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.staff-files-wrap {
+  height: calc(100% - 10px);
+  padding: 26px 30px;
+  margin: 40px 0 25px;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 20px;
+
+  .staff-name {
+    span {
+      display: block;
+      font-family: 'Microsoft YaHei';
+      font-size: 32px;
+      font-weight: bold;
+      color: #2d333c;
+      text-align: center;
+    }
+  }
+
+  .my-portrait {
+    width: 100%;
+    height: calc(100% - 40px);
+    padding: 10px 0 0;
+    overflow: auto;
+
+    .my-portrait-item {
+      margin-bottom: 20px;
+
+      .title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+
+        i {
+          display: block;
+          width: 16px;
+          height: 16px;
+          margin-right: 9px;
+          background: url('../../../../assets/imgs/OA/mine/star.png') center no-repeat;
+          background-size: 100%;
+        }
+
+        span {
+          font-size: 18px;
+          font-weight: bold;
+          color: #2d333c;
+        }
+      }
+
+      ul {
+        display: flex;
+        padding: 20px 40px 0;
+        background-color: #f7f8fa;
+        border-radius: 4px;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        li {
+          width: calc(33.3% - 40px);
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-defineOptions({ name: 'ygdaDetail' })
-
-import { useQuery } from '@tanstack/vue-query'
-import { getRecordsDetail } from '@/api/oa/staffRecords'
-import { formConfigList, formRules } from './index'
-
-const { query } = useRoute()
-const { id, type } = query
-
-const formData = reactive({
-  name: undefined
-})
-
-const { data } = useQuery(['fetch-staff-detail'], async () => {
-  return await getRecordsDetail({ userId: id })
-})
-</script>
-<template>
-  <div class="staff-files-wrap">
-    <div class="staff-name">
-      <span>{{ data?.nickname }}员工档案</span>
-    </div>
-
-    <div class="my-portrait">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-width="120px"
-        :disabled="type === 'view'"
-      >
-        <div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
-          <div class="title">
-            <i></i>
-            <span>{{ item.title }}</span>
-          </div>
-          <div class="my-portrait-card">
-            <ul>
-              <li v-for="(child, c) in item.children" :key="c">
-                <el-form-item :label="`${child.title}:`" :prop="child.name">
-                  <el-input v-model="data[child.name]" placeholder="" />
-                </el-form-item>
-              </li>
-              <li></li>
-            </ul>
-          </div>
-        </div>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.staff-files-wrap {
-  height: calc(100% - 50px);
-  padding: 26px 30px;
-  margin: 40px 0 25px;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 20px;
-
-  .staff-name {
-    span {
-      display: block;
-      font-family: 'Microsoft YaHei';
-      font-size: 32px;
-      font-weight: bold;
-      color: #2d333c;
-      text-align: center;
-    }
-  }
-
-  .my-portrait {
-    width: 100%;
-    height: calc(100% - 40px);
-    padding: 10px 0 0;
-    overflow: auto;
-
-    .my-portrait-item {
-      margin-bottom: 20px;
-
-      .title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-
-        i {
-          display: block;
-          width: 16px;
-          height: 16px;
-          margin-right: 9px;
-          background: url('../../../../assets/imgs/OA/mine/star.png') center no-repeat;
-          background-size: 100%;
-        }
-
-        span {
-          font-size: 18px;
-          font-weight: bold;
-          color: #2d333c;
-        }
-      }
-
-      ul {
-        display: flex;
-        padding: 20px 40px 0;
-        background-color: #f7f8fa;
-        border-radius: 4px;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        li {
-          width: calc(33.3% - 40px);
-        }
-      }
-    }
-  }
-}
-</style>