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

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

client/src/views/OaSystem/mineCenter/components/leftInfo.vue

@@ -21,13 +21,13 @@
           <img src="@/assets/imgs/OA/mine/man.png" alt="" />
         </p>
         <h4>
-          <span>工号：0961</span>
+          <span>工号：{{ data?.loginName }}</span>
           <div></div>
-          <span>工龄：30年</span>
+          <span>司龄：{{ data?.sl }}年</span>
         </h4>
         <div class="phoneBox">
           <img src="@/assets/imgs/OA/mine/phone.png" alt="" />
-          <span>联系电话：182-0000-0000</span>
+          <span>联系电话：{{ data?.mobilePhone }}</span>
         </div>
       </div>
       <div class="contentList">
@@ -38,7 +38,7 @@
             </div>
             <div class="textBox">
               <p>{{ item.name }}</p>
-              <p>{{ item.value }}</p>
+              <p>{{ data?.[item.value] }}</p>
             </div>
           </li>
         </ul>
@@ -57,6 +57,9 @@ import CopperModal from './CopperModal.vue'
 import avatarImg from '@/assets/imgs/avatar.gif'
 import { uploadAvatar } from '@/api/system/user/profile'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useQuery } from '@tanstack/vue-query'
+import { getRecordsDetail } from '@/api/oa/staffRecords'
+
 const { wsCache } = useCache()
 const user = wsCache.get(CACHE_KEY.USER)
 const message = useMessage()
@@ -64,6 +67,12 @@ const avatar = user.user.avatar ? user.user.avatar : avatarImg
 const sourceValue = ref('')
 const cropperModelRef = ref()
 const userName = user.user.nickname ? user.user.nickname : 'Admin'
+
+const userId = user.user.id // 当前登录的编号
+
+const { data } = useQuery(['fetch-staff-detail-left', userId], async () => {
+  return await getRecordsDetail({ userId })
+})
 // 获取assets静态资源
 const getAssetURL = (url: string) => {
   return new URL(`../../../../assets/imgs/OA/mine/${url}.png`, import.meta.url).href
@@ -72,22 +81,22 @@ const contentList = ref([
   {
     icon: 'zgzw',
     name: '在岗职位',
-    value: '项目经理'
+    value: 'drzw'
   },
   {
     icon: 'ssbm',
     name: '所属部门',
-    value: '自然资源产品部'
+    value: 'ssbm'
   },
   {
     icon: 'synj',
     name: '剩余年假',
-    value: '2天'
+    value: 'synj'
   },
   {
     icon: 'rzsj',
     name: '入职时间',
-    value: '2020-02-02'
+    value: 'rgssj'
   },
   {
     icon: 'qdgs',
@@ -113,38 +122,41 @@ onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 .mineCenterLeft {
+  position: relative;
   width: 350px;
   height: 100%;
   background-color: #fff;
   border-radius: 10px;
-  position: relative;
+
   .leftImgs {
     position: absolute;
-    left: -3px;
     top: -3px;
+    left: -3px;
   }
 
   .headImgs {
+    position: absolute;
+    top: 64px;
+    left: 50%;
+    display: flex;
     width: 92px;
     height: 92px;
-    border-radius: 50%;
-    background-color: #fff;
     padding: 5px;
-    position: absolute;
-    left: 50%;
     margin-left: -46px;
-    top: 64px;
-    display: flex;
+    background-color: #fff;
+    border-radius: 50%;
     align-items: center;
     justify-content: center;
+
     .userIcon {
       width: 100%;
       height: 100%;
     }
+
     .imgsChange {
       position: absolute;
-      right: 0px;
       top: 64px;
+      right: 0;
       cursor: pointer;
     }
   }
@@ -153,61 +165,69 @@ onMounted(() => {})
     width: 100%;
     height: 100%;
     margin-top: 165px;
+
     .contentBox {
-      width: 100%;
       display: flex;
+      width: 100%;
+      padding-bottom: 25px;
+      border-bottom: 1px solid #dee0e3;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
-      border-bottom: 1px solid #dee0e3;
-      padding-bottom: 25px;
+
       p {
-        color: #2d333c;
+        position: relative;
+        margin-bottom: 15px;
         font-size: 20px;
         font-weight: 600;
-        margin-bottom: 15px;
-        position: relative;
+        color: #2d333c;
+
         img {
           position: absolute;
-          right: -17px;
           top: 0;
+          right: -17px;
         }
       }
+
       h4 {
+        display: flex;
         width: 100%;
-        text-align: center;
+        margin-bottom: 15px;
+        font-size: 16px;
         font-weight: 400;
         color: #dee0e3;
-        font-size: 16px;
-        display: flex;
+        text-align: center;
         align-items: center;
         justify-content: center;
-        margin-bottom: 15px;
+
         span {
-          font-weight: 400;
           font-size: 16px;
+          font-weight: 400;
           color: #2d333c;
         }
+
         div {
           width: 1px;
           height: 16px;
-          opacity: 1;
-          background-color: #dee0e3;
           margin: 0 20px;
+          background-color: #dee0e3;
+          opacity: 1;
         }
       }
+
       .phoneBox {
+        display: flex;
         width: 260px;
         height: 36px;
-        border-radius: 4px 4px 4px 4px;
         border: 1px solid #2e77e6;
-        display: flex;
+        border-radius: 4px;
         align-items: center;
         justify-content: center;
+
         span {
-          color: #2e77e6;
-          font-size: 16px;
           margin-left: 10px;
+          font-size: 16px;
+          color: #2e77e6;
         }
       }
     }
@@ -216,31 +236,37 @@ onMounted(() => {})
       width: 100%;
       height: calc(100% - 345px);
       overflow-y: auto;
+
       ul {
         width: 100%;
         padding: 0 20px;
+
         li {
-          width: 100%;
           display: flex;
-          align-items: center;
+          width: 100%;
           margin: 25px 0;
+          align-items: center;
+
           .iconBox {
+            display: flex;
             width: 48px;
             height: 48px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             border: 1px solid #dee0e3;
             border-radius: 50%;
+            align-items: center;
+            justify-content: center;
           }
+
           .textBox {
             margin-left: 15px;
+
             p {
               font-size: 16px;
             }
+
             p:nth-child(1) {
-              color: #626b70;
               margin-bottom: 10px;
+              color: #626b70;
             }
           }
         }

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

@@ -5,32 +5,32 @@ import { useUserStore } from '@/store/modules/user'
 
 const userId = useUserStore().getUser.id // 当前登录的编号
 
-const { data } = useQuery(['fetch-staff-detail'], async () => {
-  return await getRecordsDetail({ userId: 'e62bbc36-1892-41ef-a84d-75706a062ccf' })
+const { data } = useQuery(['fetch-staff-detail', userId], async () => {
+  return await getRecordsDetail({ userId })
 })
 /** 初始化 **/
 onMounted(() => {})
 
 const tableData = [
-  {
-    date: '2016-05-03',
-    name: '测绘质量检测技术',
-    level: '高级',
-    organization: '浙江省测绘与地理信息行业协会'
-  },
-  {
-    date: '2016-05-02',
-    name: '职称证书',
-    level: '中级',
-    organization: '浙江省测绘与地理信息行业协会'
-  }
+  // {
+  //   date: '2016-05-03',
+  //   name: '测绘质量检测技术',
+  //   level: '高级',
+  //   organization: '浙江省测绘与地理信息行业协会'
+  // },
+  // {
+  //   date: '2016-05-02',
+  //   name: '职称证书',
+  //   level: '中级',
+  //   organization: '浙江省测绘与地理信息行业协会'
+  // }
 ]
 </script>
 <template>
   <div class="my-portrait">
     <!-- <ElResult  title="加载中">
     </ElResult> -->
-    <div v-if="data">
+    <div>
       <div class="my-portrait-item">
         <div class="title">
           <i></i>

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;
@@ -34,6 +34,7 @@
     .form {
       display: flex;
       width: 240px;
+      margin: 5px 0;
       margin-right: 16px;
       align-items: center;
 
@@ -54,7 +55,7 @@
   .oa-sys-list-content {
     position: relative;
     width: 100%;
-    height: calc(100% - 180px);
+    height: calc(100% - 100px);
     margin-top: 20px;
 
     ._table,
@@ -85,33 +86,29 @@
     }
   }
 
-  :deep(.el-table) {
-    .el-table__inner-wrapper::before {
-      display: none;
-    }
-
-    .el-table__header-wrapper {
-      border-radius: 4px;
-    }
-
-    tr.el-table__row--striped td.el-table__cell {
-      background: #f7f7f7;
-    }
-  }
-
-  :deep(.el-input) {
-    width: 160px;
-  }
-
-  :deep(.el-radio__label),
-  :deep(.el-checkbox__label) {
-    font-size: 16px;
-  }
-
-  :deep(.el-radio-group) {
-    label {
-      margin-right: 10px;
-    }
-  }
+  // :deep(.el-table) {
+  //   .el-table__inner-wrapper::before {
+  //     display: none;
+  //   }
+
+  //   .el-table__header-wrapper {
+  //     border-radius: 4px;
+  //   }
+
+  //   tr.el-table__row--striped td.el-table__cell {
+  //     background: #f7f7f7;
+  //   }
+  // }
+
+  // :deep(.el-radio__label),
+  // :deep(.el-checkbox__label) {
+  //   font-size: 16px;
+  // }
+
+  // :deep(.el-radio-group) {
+  //   label {
+  //     margin-right: 10px;
+  //   }
+  // }
 }
 </style>

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

@@ -8,7 +8,18 @@ export const formConfigList = [
       },
       {
         name: 'sex',
-        title: '性别'
+        title: '性别',
+        type: 'select',
+        options: [
+          {
+            value: 0,
+            label: '女'
+          },
+          {
+            value: 1,
+            label: '男'
+          }
+        ]
       },
       {
         name: 'mobilePhone',
@@ -16,7 +27,26 @@ export const formConfigList = [
       },
       {
         name: 'state',
-        title: '状态'
+        title: '状态',
+        type: 'select',
+        options: [
+          {
+            value: 1,
+            label: '实习'
+          },
+          {
+            value: 2,
+            label: '试用'
+          },
+          {
+            value: 3,
+            label: '正式'
+          },
+          {
+            value: 4,
+            label: '离职'
+          }
+        ]
       },
       {
         name: 'drzw',
@@ -27,7 +57,7 @@ export const formConfigList = [
         title: '民族'
       },
       {
-        name: 'qdgsid',
+        name: 'loginName',
         title: '员工工号'
       },
       {
@@ -40,7 +70,8 @@ export const formConfigList = [
       },
       {
         name: 'birthday',
-        title: '出生日期'
+        title: '出生日期',
+        type: 'time'
       },
 
       {
@@ -49,11 +80,37 @@ export const formConfigList = [
       },
       {
         name: 'hkxz',
-        title: '户口性质'
+        title: '户口性质',
+        type: 'select',
+        options: [
+          {
+            value: 1,
+            label: '城镇'
+          },
+          {
+            value: 2,
+            label: '农村'
+          }
+        ]
       },
       {
         name: 'zzmm',
-        title: '政治面貌'
+        title: '政治面貌',
+        type: 'select',
+        options: [
+          {
+            value: 1,
+            label: '群众'
+          },
+          {
+            value: 2,
+            label: '团员'
+          },
+          {
+            value: 3,
+            label: '党员'
+          }
+        ]
       },
       {
         name: 'xjzdz',
@@ -65,11 +122,13 @@ export const formConfigList = [
       },
       {
         name: 'rgssj',
-        title: '入职时间'
+        title: '入职时间',
+        type: 'time'
       },
       {
         name: 'cjgzsj',
-        title: '参加工作时间'
+        title: '参加工作时间',
+        type: 'time'
       }
     ]
   },
@@ -77,11 +136,11 @@ export const formConfigList = [
     title: '工资卡信息',
     children: [
       {
-        name: '',
+        name: 'khyh',
         title: '开户行'
       },
       {
-        name: '',
+        name: 'yhzh',
         title: '银行卡号'
       }
     ]
@@ -95,11 +154,39 @@ export const formConfigList = [
       },
       {
         name: 'bysj',
-        title: '毕业时间'
+        title: '毕业时间',
+        type: 'time'
       },
       {
         name: 'zgxl',
-        title: '最高学历'
+        title: '最高学历',
+        type: 'select',
+        options: [
+          {
+            value: 1,
+            label: '高中'
+          },
+          {
+            value: 2,
+            label: '中专'
+          },
+          {
+            value: 3,
+            label: '大专'
+          },
+          {
+            value: 4,
+            label: '本科'
+          },
+          {
+            value: 5,
+            label: '硕士'
+          },
+          {
+            value: 6,
+            label: '博士'
+          }
+        ]
       },
       {
         name: 'major',
@@ -127,3 +214,142 @@ export const formConfigList = [
 ]
 
 export const formRules = { name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }] }
+
+export const tableColumnConfigList = [
+  {
+    name: 'ssbm',
+    title: '所属部门'
+  },
+  {
+    name: 'state',
+    title: '状态',
+    type: 'select',
+    options: [
+      {
+        value: 1,
+        label: '实习'
+      },
+      {
+        value: 2,
+        label: '试用'
+      },
+      {
+        value: 3,
+        label: '正式'
+      },
+      {
+        value: 4,
+        label: '离职'
+      }
+    ]
+  },
+  {
+    name: 'zzmm',
+    title: '政治面貌',
+    type: 'select',
+    options: [
+      {
+        value: 1,
+        label: '群众'
+      },
+      {
+        value: 2,
+        label: '团员'
+      },
+      {
+        value: 3,
+        label: '党员'
+      }
+    ]
+  },
+  {
+    name: 'hkxz',
+    title: '户口性质',
+    type: 'select',
+    options: [
+      {
+        value: 1,
+        label: '城镇'
+      },
+      {
+        value: 2,
+        label: '农村'
+      }
+    ]
+  },
+  {
+    name: 'byxx',
+    title: '毕业院校'
+  },
+  {
+    name: 'bysj',
+    title: '毕业时间',
+    type: 'time'
+  },
+  {
+    name: 'zgxl',
+    title: '最高学历',
+    type: 'select',
+    options: [
+      {
+        value: 1,
+        label: '高中'
+      },
+      {
+        value: 2,
+        label: '中专'
+      },
+      {
+        value: 3,
+        label: '大专'
+      },
+      {
+        value: 4,
+        label: '本科'
+      },
+      {
+        value: 5,
+        label: '硕士'
+      },
+      {
+        value: 6,
+        label: '博士'
+      }
+    ]
+  },
+  {
+    name: 'major',
+    title: '专业'
+  },
+
+  {
+    name: 'cjgzsj',
+    title: '参加工作时间',
+    type: 'time'
+  },
+  {
+    name: 'rgssj',
+    title: '入职时间',
+    type: 'time'
+  },
+  {
+    name: 'htdqsj',
+    title: '合同到期时间',
+    type: 'time'
+  },
+  {
+    name: 'zdsj',
+    title: '转正时间',
+    type: 'time'
+  },
+  {
+    name: 'yyxs',
+    title: '聘用形式',
+    type: 'time'
+  },
+  {
+    name: 'sfytd',
+    title: '是否已调档',
+    type: 'time'
+  }
+]

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

@@ -7,7 +7,7 @@
       </div>
       <div class="form">
         <span class="formSpan">所属部门：</span>
-        <el-select v-model="queryParams.deptId" class="m-2" placeholder="请选择部门">
+        <el-select v-model="queryParams.deptId" placeholder="请选择部门">
           <el-option
             v-for="item in industryListAll"
             :key="item.value"
@@ -72,70 +72,42 @@
           }"
           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"
-            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="byxx"
-            show-overflow-tooltip="true"
-            label="毕业院校"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="bysj"
-            :formatter="dateFormatter2"
-            label="毕业时间"
-            width="120"
-          />
-          <el-table-column align="center" prop="zgxl" label="最高学历" width="120" />
-          <el-table-column
-            align="center"
-            prop="major"
-            show-overflow-tooltip="true"
-            label="专业"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="cjgzsj"
-            :formatter="dateFormatter2"
-            label="参加工作时间"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="rgssj"
-            :formatter="dateFormatter2"
-            label="入公司时间"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="zzsj"
-            :formatter="dateFormatter2"
-            label="转正时间"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="htdqs"
-            :formatter="dateFormatter2"
-            label="合同到期时间"
-            width="120"
-          />
-          <el-table-column align="center" prop="pyxs" label="聘用形式" width="120" />
-          <el-table-column align="center" prop="sfytd" label="是否已调档" width="120" />
+
+          <template v-for="(item, index) in tableColumnConfigList" :key="index">
+            <el-table-column
+              v-if="item.type === undefined"
+              align="center"
+              show-overflow-tooltip
+              :prop="item.name"
+              :label="item.title"
+              width="120"
+            />
+            <el-table-column
+              v-if="item.type === 'select'"
+              align="center"
+              :prop="item.name"
+              :label="item.title"
+              width="120"
+              :formatter="
+                (row, column, cellValue) => {
+                  return item.options?.find((e) => {
+                    return e.value === cellValue
+                  })?.label
+                }
+              "
+            />
+            <el-table-column
+              v-if="item.type === 'time'"
+              align="center"
+              :prop="item.name"
+              :label="item.title"
+              :formatter="dateFormatter2"
+              width="150"
+            />
+          </template>
+
           <el-table-column align="center" label="操作" fixed="right" width="120">
             <template #default="scope">
               <div style="display: flex">
@@ -168,6 +140,7 @@
 import * as StaffRecordsApi from '@/api/oa/staffRecords'
 import { dateFormatter2 } from '@/utils/formatTime'
 import ListLayout from '../../oaViews/layout/ListLayout.vue'
+import { tableColumnConfigList } from './index'
 
 defineOptions({ name: 'Ygda' })
 const queryParams = reactive({
@@ -217,7 +190,7 @@ const handleCurrentChange = (pageNo: number) => {
 
 const operateClick = (row: any, type: string) => {
   router.push({
-    path: 'ygdaDetail',
+    path: '/staffDetail',
     query: { id: row.userId, type }
   })
 }
@@ -229,3 +202,9 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-input) {
+  width: 160px;
+}
+</style>

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

@@ -0,0 +1,245 @@
+<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'
+
+const { query } = useRoute()
+const { id, type } = query
+
+const formRef = ref<FormInstance>()
+
+const formData = ref({})
+
+/**获取员工档案详情 */
+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 isEdit = computed(() => {
+  return type === 'edit'
+})
+</script>
+<template>
+  <div class="staff-files-wrap">
+    <div class="staff-name">
+      <span>{{ formData?.['nickname'] }}员工档案</span>
+    </div>
+
+    <div
+      v-if="formData != undefined"
+      :class="isEdit ? 'my-portrait' : 'my-portrait form-unable-edit'"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="150px"
+        :disabled="!isEdit"
+      >
+        <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="isEdit ? child.title : ''"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                  />
+
+                  <el-select
+                    v-if="child.type === 'select'"
+                    v-model="formData[child?.name]"
+                    style="width: 100%"
+                    placeholder=""
+                  >
+                    <el-option
+                      v-for="item in child.options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+
+                  <el-input
+                    v-if="child?.type === undefined"
+                    v-model="formData[child?.name]"
+                    placeholder=""
+                  />
+                </el-form-item>
+              </li>
+              <li></li>
+            </ul>
+          </div>
+        </div>
+        <el-row justify="end">
+          <el-form-item v-if="isEdit">
+            <el-button color="#1B80EB" type="primary" @click="submitForm(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: 0 0 10px;
+    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: #f7f8fa;
+        border-radius: 4px;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        li {
+          width: calc(33.3% - 40px);
+        }
+      }
+    }
+  }
+
+  .form-unable-edit {
+    .my-portrait-item {
+      ul {
+        background: linear-gradient(90deg, #f2f7ff 0%, rgb(245 249 255 / 0%) 100%);
+        border: 1px solid #e4e9f1;
+      }
+    }
+
+    :deep(.el-form) {
+      .el-input.is-disabled .el-input__wrapper {
+        background-color: unset;
+        box-shadow: none;
+      }
+
+      .el-form-item__label {
+        font-size: 16px;
+        color: #455773;
+      }
+
+      .el-form-item--default {
+        margin-bottom: 10px;
+      }
+
+      .el-input__inner {
+        font-family: 'Microsoft YaHei';
+        font-size: 16px;
+        font-weight: 500;
+        color: #2d333c;
+      }
+
+      .el-input__suffix {
+        display: none;
+      }
+    }
+  }
+}
+</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>