client/src/views/OaSystem/oaLayout/index.vue

@@ -47,29 +47,34 @@ onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 ._layout {
+  display: flex;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  display: flex;
   align-items: center;
   justify-content: space-between;
+
   .layout-left {
     width: 184px;
     height: 100%;
     background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
   }
+
   .layout-right {
     width: calc(100% - 184px);
     height: 100%;
+    padding: 15px;
     background: #eaf1f9;
-    padding: 15px 15px;
+
     .layout-header {
       width: 100%;
       height: 100px;
     }
+
     .layout-content {
       width: 100%;
-      height: calc(100% - 100px);
+      height: calc(100% - 140px);
+      margin-top: 40px;
     }
   }
 }

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="oa-sys-list-view">
+    <div class="oa-sys-top-search">
+      <slot name="oaSearchSlot"></slot>
+    </div>
+    <slot name="oAmiddleSlot">
+      <div> </div>
+    </slot>
+
+    <div class="oa-sys-list-content">
+      <slot name="oaListSlot"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.oa-sys-list-view {
+  height: calc(100% - 10px);
+  padding: 23px 21px;
+  margin-top: 30px;
+  background: #fff;
+  border-radius: 20px;
+
+  .oa-sys-top-search {
+    display: flex;
+    width: 100%;
+    padding: 10px 30px;
+    background: #eaf5fd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .form {
+      display: flex;
+      width: 240px;
+      margin-right: 16px;
+      align-items: center;
+
+      .formSpan {
+        width: 80px;
+        font-size: 16px;
+        color: #505a69;
+        white-space: nowrap;
+      }
+
+      .btnBox {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .oa-sys-list-content {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 180px);
+    margin-top: 20px;
+
+    ._table,
+    .table {
+      width: 100%;
+      height: calc(100% - 40px);
+
+      .operateBtn {
+        display: flex;
+        width: 54px;
+        height: 24px;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+
+        span {
+          color: #2e77e6;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .pageBox {
+      position: absolute;
+      right: 20px;
+      bottom: 10px;
+      text-align: right;
+    }
+  }
+
+  :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;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,129 @@
+export const formConfigList = [
+  {
+    title: '基本信息',
+    children: [
+      {
+        name: 'nickname',
+        title: '员工名称'
+      },
+      {
+        name: 'sex',
+        title: '性别'
+      },
+      {
+        name: 'mobilePhone',
+        title: '手机'
+      },
+      {
+        name: 'state',
+        title: '状态'
+      },
+      {
+        name: 'drzw',
+        title: '在岗职位'
+      },
+      {
+        name: 'nation',
+        title: '民族'
+      },
+      {
+        name: 'qdgsid',
+        title: '员工工号'
+      },
+      {
+        name: 'ssbm',
+        title: '所属部门'
+      },
+      {
+        name: 'qdgs',
+        title: '签订公司'
+      },
+      {
+        name: 'birthday',
+        title: '出生日期'
+      },
+
+      {
+        name: 'hyzk',
+        title: '婚姻状况'
+      },
+      {
+        name: 'hkxz',
+        title: '户口性质'
+      },
+      {
+        name: 'zzmm',
+        title: '政治面貌'
+      },
+      {
+        name: 'xjzdz',
+        title: '现居住地址'
+      },
+      {
+        name: 'hkszd',
+        title: '户口所在地'
+      },
+      {
+        name: 'rgssj',
+        title: '入职时间'
+      },
+      {
+        name: 'cjgzsj',
+        title: '参加工作时间'
+      }
+    ]
+  },
+  {
+    title: '工资卡信息',
+    children: [
+      {
+        name: '',
+        title: '开户行'
+      },
+      {
+        name: '',
+        title: '银行卡号'
+      }
+    ]
+  },
+  {
+    title: '教育信息',
+    children: [
+      {
+        name: 'byxx',
+        title: '毕业院校'
+      },
+      {
+        name: 'bysj',
+        title: '毕业时间'
+      },
+      {
+        name: 'zgxl',
+        title: '最高学历'
+      },
+      {
+        name: 'major',
+        title: '专业'
+      }
+    ]
+  },
+  {
+    title: '紧急联系人信息',
+    children: [
+      {
+        name: 'jjlxrxm',
+        title: '紧急联系人姓名'
+      },
+      {
+        name: 'jjlxrhm',
+        title: '紧急联系人电话'
+      },
+      {
+        name: 'jjlxrgx',
+        title: '紧急联系人关系'
+      }
+    ]
+  }
+]
+
+export const formRules = { name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }] }

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

@@ -1,23 +1,13 @@
 <template>
-  <div class="_ptbxBook">
-    <div class="searchBox">
+  <ListLayout>
+    <template #oaSearchSlot>
       <div class="form">
         <span class="formSpan">员工姓名：</span>
-        <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入员工姓名"
-          style="width: 210px"
-        />
+        <el-input v-model="queryParams.nickname" placeholder="请输入员工姓名" />
       </div>
       <div class="form">
         <span class="formSpan">所属部门：</span>
-        <el-select
-          width="160px"
-          v-model="queryParams.deptId"
-          class="m-2"
-          placeholder="请选择部门"
-          size="large"
-        >
+        <el-select v-model="queryParams.deptId" class="m-2" placeholder="请选择部门">
           <el-option
             v-for="item in industryListAll"
             :key="item.value"
@@ -28,31 +18,31 @@
       </div>
       <div class="form">
         <span class="formSpan">状态：</span>
-        <el-input v-model="queryParams.state" style="width: 160px" />
+        <el-input v-model="queryParams.state" />
       </div>
       <div class="form">
         <span class="formSpan">政治面貌：</span>
-        <el-input v-model="queryParams.zzmm" style="width: 160px" />
+        <el-input v-model="queryParams.zzmm" />
       </div>
       <div class="form">
         <span class="formSpan">户口性质：</span>
-        <el-input v-model="queryParams.hkxz" style="width: 160px" />
+        <el-input v-model="queryParams.hkxz" />
       </div>
       <div class="form">
         <span class="formSpan">最高学历：</span>
-        <el-input v-model="queryParams.zgxl" style="width: 160px" />
+        <el-input v-model="queryParams.zgxl" />
       </div>
       <div class="form">
         <span class="formSpan">专业：</span>
-        <el-input v-model="queryParams.major" style="width: 160px" />
+        <el-input v-model="queryParams.major" />
       </div>
       <div class="form">
         <span class="formSpan">聘用形式：</span>
-        <el-input v-model="queryParams.pyxs" style="width: 160px" />
+        <el-input v-model="queryParams.pyxs" />
       </div>
       <div class="form">
-        <span class="formSpan">是否已调档：</span>
-        <el-input v-model="queryParams.sfytd" style="width: 160px" />
+        <span class="formSpan">是否调档：</span>
+        <el-input v-model="queryParams.sfytd" />
       </div>
       <div class="from">
         <div class="btnBox">
@@ -66,16 +56,18 @@
           >
         </div>
       </div>
-    </div>
-    <div class="tableBox">
+    </template>
+    <template #oaListSlot>
       <div class="_table" ref="tableRef">
         <el-table
           v-loading="loading"
           :data="list"
-          max-height="550"
+          style="width: 100%; height: 100%"
+          :style="{ height: tableHeight + 'px' }"
+          stripe
           :header-cell-style="{
-            background: '#F7F8FA',
-            color: '#121518',
+            background: '#E5F0FB',
+            color: '#233755',
             height: '50px'
           }"
           table-layout="auto"
@@ -144,10 +136,15 @@
           />
           <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="80">
+          <el-table-column align="center" label="操作" fixed="right" width="120">
             <template #default="scope">
-              <div class="operateBtn" @click="operateClick(scope.row)">
-                <span>查看</span>
+              <div style="display: flex">
+                <div class="operateBtn" @click="operateClick(scope.row, 'view')">
+                  <span>查看</span>
+                </div>
+                <div class="operateBtn" @click="operateClick(scope.row, 'edit')">
+                  <span>编辑</span>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -163,14 +160,14 @@
           @current-change="handleCurrentChange"
         />
       </div>
-    </div>
-  </div>
+    </template>
+  </ListLayout>
 </template>
 
 <script setup lang="ts">
 import * as StaffRecordsApi from '@/api/oa/staffRecords'
 import { dateFormatter2 } from '@/utils/formatTime'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import ListLayout from '../../oaViews/layout/ListLayout.vue'
 
 defineOptions({ name: 'Ygda' })
 const queryParams = reactive({
@@ -189,6 +186,10 @@ const queryParams = reactive({
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
+const tableHeight: any = ref(0)
+const tableRef: any = ref(null)
+
+const router = useRouter()
 
 /** 查询列表 */
 const getList = async () => {
@@ -214,12 +215,17 @@ const handleCurrentChange = (pageNo: number) => {
   getList()
 }
 
+const operateClick = (row: any, type: string) => {
+  router.push({
+    path: 'ygdaDetail',
+    query: { id: row.userId, type }
+  })
+}
+
 /** 初始化 */
 onMounted(() => {
+  tableHeight.value = tableRef.value.clientHeight
+
   getList()
 })
 </script>
-
-<style lang="scss" scoped>
-@import url('./ygdaBook.scss');
-</style>

client/src/views/OaSystem/personnelManagement/ygdaPage/ygdaBook.scss

@@ -1,98 +0,0 @@
-._ptbxBook {
-  width: calc(100% - 30px);
-  height: calc(100% - 30px);
-  background: #FFFFFF;
-  border-radius: 4px 4px 4px 4px;
-  border: 1px solid #DEE0E3;
-  margin: 15px;
-
-  .searchBox {
-    width: 100%;
-    height: 125px;
-    background: #F7F8FA;
-    border-radius: 4px 4px 0 0;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 0 20px;
-    box-sizing: border-box;
-
-    .form {
-      display: flex;
-      align-items: center;
-      margin-right: 20px;
-
-      .formSpan {
-        font-size: 16px;
-      }
-
-      .btnBox {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .infoBox {
-    width: 100%;
-    height: 55px;
-    background: #EDF2FB;
-
-    ul {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-
-      li {
-        list-style: none;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .tableBox {
-    width: 100%;
-    height: calc(100% - 180px);
-    padding: 15px 20px;
-    position: relative;
-
-    ._table {
-      width: 100%;
-      height: calc(100% - 40px);
-
-      .operateBtn {
-        width: 54px;
-        height: 24px;
-        background: #EBF2FF;
-        border-radius: 16px 16px 16px 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-
-        span {
-          color: #2E77E6;
-        }
-      }
-    }
-
-    .pageBox {
-      position: absolute;
-      right: 20px;
-      bottom: 10px;
-      text-align: right;
-    }
-  }
-  :deep(.el-radio__label),
-  :deep(.el-checkbox__label){
-      font-size: 16px;
-  }
-  :deep(.el-radio-group){
-    label {
-      margin-right: 10px;
-    }
-  }
-}

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

@@ -0,0 +1,119 @@
+<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>

client/src/views/OaSystem/projectCenter/projectBook/projectBook.scss

@@ -1,5 +1,5 @@
 ._ProjectCenterBook {
-  height: calc(100% - 30px);
+  height: calc(100% - 10px);
   background: #ffffff;
   border-radius: 20px;
   margin-top: 30px;

client/src/views/OaSystem/projectCenter/purchaseContract/purchaseContract.scss

@@ -1,5 +1,5 @@
 ._PurchaseContractBox {
-  height: calc(100% - 30px);
+  height: calc(100% - 10px);
   background: #ffffff;
   border-radius: 20px;
   margin-top: 30px;