fix: 修改员工档案

client/src/utils/formatter.ts

@@ -10,84 +10,3 @@ 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/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

@@ -34,6 +34,7 @@
     .form {
       display: flex;
       width: 240px;
+      margin: 5px 0;
       margin-right: 16px;
       align-items: center;
 
@@ -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: '员工工号'
       },
       {
@@ -50,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',
@@ -80,11 +136,11 @@ export const formConfigList = [
     title: '工资卡信息',
     children: [
       {
-        name: '',
+        name: 'khyh',
         title: '开户行'
       },
       {
-        name: '',
+        name: 'yhzh',
         title: '银行卡号'
       }
     ]
@@ -103,7 +159,34 @@ export const formConfigList = [
       },
       {
         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',
@@ -131,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"
@@ -74,104 +74,40 @@
         >
           <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
-            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
-            label="毕业院校"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            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="major"
-            show-overflow-tooltip
-            label="专业"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            prop="cjgzsj"
-            :formatter="dateFormatter2"
-            label="参加工作时间"
-            width="150"
-          />
-          <el-table-column
-            align="center"
-            prop="rgssj"
-            :formatter="dateFormatter2"
-            label="入公司时间"
-            width="150"
-          />
-          <el-table-column
-            align="center"
-            prop="zzsj"
-            :formatter="dateFormatter2"
-            label="转正时间"
-            width="120"
-          />
-          <el-table-column
-            align="center"
-            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')"
-          />
+
+          <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">
@@ -203,8 +139,8 @@
 <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'
+import { tableColumnConfigList } from './index'
 
 defineOptions({ name: 'Ygda' })
 const queryParams = reactive({
@@ -266,3 +202,9 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-input) {
+  width: 160px;
+}
+</style>

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

@@ -5,7 +5,6 @@ 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
@@ -15,7 +14,7 @@ const formRef = ref<FormInstance>()
 const formData = ref({})
 
 /**获取员工档案详情 */
-const { data } = useQuery(
+useQuery(
   ['fetch-staff-detail', id],
   async () => {
     return await getRecordsDetail({ userId: id })
@@ -67,32 +66,33 @@ const submitForm = (formEl: FormInstance | undefined) => {
   })
 }
 
-/**重置表单 */
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  formData.value = data
-}
+const isEdit = computed(() => {
+  return type === 'edit'
+})
 </script>
 <template>
   <div class="staff-files-wrap">
     <div class="staff-name">
-      <span>{{ formData?.nickname }}员工档案</span>
+      <span>{{ formData?.['nickname'] }}员工档案</span>
     </div>
 
-    <div class="my-portrait" v-if="formData != undefined">
+    <div
+      v-if="formData != undefined"
+      :class="isEdit ? 'my-portrait' : 'my-portrait form-unable-edit'"
+    >
       <el-form
         ref="formRef"
         :model="formData"
         :rules="formRules"
-        label-width="120px"
-        :disabled="type === 'view'"
+        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">
@@ -101,24 +101,39 @@ const resetForm = (formEl: FormInstance | undefined) => {
                     v-if="child.type === 'time'"
                     v-model="formData[child?.name]"
                     style="width: 100%"
-                    :placeholder="child.title"
+                    :placeholder="isEdit ? child.title : ''"
                     type="date"
                     value-format="YYYY-MM-DD"
                   />
-                  <el-input v-else v-model="formData[child?.name]" placeholder="" />
+
+                  <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>
-                <!--    :formatter="(value) => staffNumFormatter(value, child?.name)"
- -->
               </li>
               <li></li>
             </ul>
           </div>
         </div>
-
-        <el-row justify="center">
-          <el-form-item v-if="type === 'edit'">
+        <el-row justify="end">
+          <el-form-item v-if="isEdit">
             <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>
@@ -149,7 +164,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
   .my-portrait {
     width: 100%;
     height: calc(100% - 40px);
-    padding: 10px 0 0;
+    padding: 0 0 10px;
     overflow: auto;
 
     .my-portrait-item {
@@ -179,7 +194,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
       ul {
         display: flex;
         padding: 20px 40px 0;
-        background-color: #f7f8fa;
+        background: #f7f8fa;
         border-radius: 4px;
         flex-wrap: wrap;
         justify-content: space-between;
@@ -190,5 +205,41 @@ const resetForm = (formEl: FormInstance | undefined) => {
       }
     }
   }
+
+  .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>