From 92f4769e0ac947146bbc4df04435e8ddbcf3885b Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Tue, 28 Oct 2025 11:01:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=91=98=E5=B7=A5=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E7=94=B3=E8=AF=B7=E5=AE=A1=E6=A0=B8-=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SectionDivider/SectionDivider.vue         |  13 +-
 .../components/EmployeesApplyForm.vue         | 112 +++++++++++-------
 2 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/src/components/SectionDivider/SectionDivider.vue b/src/components/SectionDivider/SectionDivider.vue
index b1a2c39..cf6e801 100644
--- a/src/components/SectionDivider/SectionDivider.vue
+++ b/src/components/SectionDivider/SectionDivider.vue
@@ -2,7 +2,8 @@
   <div class="section-divider">
     <!-- 左侧灰色横线 -->
     <!-- <div class="left-line"></div> -->
-    <img src="./section.svg" class="divider-icon" />
+    <div class="left-icon"></div>
+    <!-- <img src="./section.svg" class="divider-icon" /> -->
     <!-- 标题文字 -->
     <div class="divider-content">
       <slot>{{ title }}</slot>
@@ -26,7 +27,7 @@ export default {
 .section-divider {
   display: flex;
   align-items: center;
-  margin: 5px 0 30px 20px;
+  margin: 5px 0 14px 20px;
 }
 
 /* 蓝色竖线（带圆角） */
@@ -72,4 +73,12 @@ export default {
   background-color: #ddd; /* 灰色 */
   margin-left: 8px; /* 与文字的间距 */
 }
+
+.left-icon{
+  width: 8px;
+  height: 18px;
+  background-color: #1890ff;
+  margin-right: 8px;
+  border-radius: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/admin/employeesapply/components/EmployeesApplyForm.vue b/src/views/admin/employeesapply/components/EmployeesApplyForm.vue
index efbeaf5..52e57ae 100644
--- a/src/views/admin/employeesapply/components/EmployeesApplyForm.vue
+++ b/src/views/admin/employeesapply/components/EmployeesApplyForm.vue
@@ -4,51 +4,55 @@
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="EmployeesApplyForm">
-          <a-row>
-            <a-col :span="24">
+          <a-row class="card-class">
+            <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
               <SectionDivider :title="'基本信息'" />
+              <!-- <span>基本信息</span> -->
             </a-col>
             <a-col :span="12">
               <a-form-item label="姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name" name="name">
-                <!-- <a-input v-model:value="formData.name" placeholder="请输入姓名" disabled allow-clear></a-input> -->
-                <span>{{ formData.name }}</span>
+                <a-input v-model:value="formData.name" placeholder="请输入姓名" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.name }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="联系电话" v-bind="validateInfos.tel" id="EmployeesApplyForm-tel" name="tel">
-                <!-- <a-input v-model:value="formData.tel" placeholder="请输入联系电话" disabled allow-clear></a-input> -->
-                <span>{{ formData.tel }}</span>
+                <a-input v-model:value="formData.tel" placeholder="请输入联系电话" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.tel }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="性别" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
+                <a-input v-model:value="formData.sex" placeholder="请输入性别" disabled allow-clear></a-input>
                 <!-- <j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别" disabled
                 allow-clear /> -->
-                <span>{{ formData.sex }}</span>
+                <!-- <span>{{ formData.sex }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="年龄" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
-                <span> {{ handleComputedAge(formData.dateOfBirth) }}</span>
+                <a-input v-model:value="ageVal" placeholder="请输入年龄" disabled allow-clear></a-input>
+                <!-- <span> {{ handleComputedAge(formData.dateOfBirth) }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="出生日期" v-bind="validateInfos.dateOfBirth" id="EmployeesApplyForm-dateOfBirth"
                 name="dateOfBirth">
-                <!-- <a-date-picker placeholder="请选择出生日期" v-model:value="formData.dateOfBirth" value-format="YYYY-MM-DD"
-                  style="width: 100%" disabled allow-clear /> -->
-                <span>{{ formData.dateOfBirth }}</span>
+                <a-date-picker placeholder="请选择出生日期" v-model:value="formData.dateOfBirth" value-format="YYYY-MM-DD"
+                  style="width: 100%" disabled allow-clear />
+                <!-- <span>{{ formData.dateOfBirth }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="民族" v-bind="validateInfos.national" id="EmployeesApplyForm-national" name="national">
-                <!-- <a-input v-model:value="formData.national" placeholder="请输入民族" disabled allow-clear></a-input> -->
-                <span>{{ formData.national }}</span>
+                <a-input v-model:value="formData.national" placeholder="请输入民族" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.national }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="身份证号">
-                <span>{{ formData.idCard }}</span>
+                <a-input v-model:value="formData.idCard" placeholder="请输入身份证号" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.idCard }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
@@ -56,19 +60,20 @@
                 name="marriedOrNot">
                 <!-- <j-dict-select-tag type='radio' v-model:value="formData.marriedOrNot" dictCode="married_or_not"
                   placeholder="请选择婚否" disabled allow-clear /> -->
-                <span>{{ formData.marriedOrNot }}</span>
+                <a-input v-model:value="formData.marriedOrNot" placeholder="请输入婚否" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.marriedOrNot }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="身高" v-bind="validateInfos.height" id="EmployeesApplyForm-height" name="height">
-                <!-- <a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%" disabled /> -->
-                <span>{{ formData.height }}cm</span>
+                <a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%" disabled />
+                <!-- <span>{{ formData.height }}cm</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="体重" v-bind="validateInfos.weight" id="EmployeesApplyForm-weight" name="weight">
-                <!-- <a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%" disabled /> -->
-                <span>{{ formData.weight }}kg</span>
+                <a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%" disabled />
+                <!-- <span>{{ formData.weight }}kg</span> -->
               </a-form-item>
             </a-col>
             <!-- <a-col :span="12">
@@ -84,7 +89,8 @@
                 name="healthStatus">
                 <!-- <j-dict-select-tag type='radio' v-model:value="formData.healthStatus" dictCode="health_status" disabled
                   placeholder="请选择健康状况" allow-clear /> -->
-                <span>{{ formData.healthStatus }}</span>
+                <a-input v-model:value="formData.healthStatus" placeholder="请输入健康状况" style="width: 100%" disabled />
+                <!-- <span>{{ formData.healthStatus }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
@@ -92,37 +98,39 @@
                 id="EmployeesApplyForm-politicalAppearance" name="politicalAppearance">
                 <!-- <j-dict-select-tag v-model:value="formData.politicalAppearance" dictCode="political_appearance" disabled
                   placeholder="请选择政治面貌" allow-clear /> -->
-                <span>{{ formData.politicalAppearance }}</span>
+                <a-input v-model:value="formData.politicalAppearance" placeholder="请输入政治面貌" style="width: 100%"
+                  disabled />
+                <!-- <span>{{ formData.politicalAppearance }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="户籍所在地" v-bind="validateInfos.houseAddress" id="EmployeesApplyForm-houseAddress"
                 name="houseAddress">
-                <!-- <a-input v-model:value="formData.houseAddress" placeholder="请输入户籍所在地" disabled allow-clear></a-input> -->
-                <span>{{ formData.houseAddress }}</span>
+                <a-input v-model:value="formData.houseAddress" placeholder="请输入户籍所在地" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.houseAddress }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="紧急联系人" v-bind="validateInfos.emergencyContact"
                 id="EmployeesApplyForm-emergencyContact" name="emergencyContact">
-                <!-- <a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" disabled
-                  allow-clear></a-input> -->
-                <span>{{ formData.emergencyContact }}</span>
+                <a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" disabled
+                  allow-clear></a-input>
+                <!-- <span>{{ formData.emergencyContact }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="紧急联系人电话" v-bind="validateInfos.emergencyTel" id="EmployeesApplyForm-emergencyTel"
                 name="emergencyTel">
-                <!-- <a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话" disabled allow-clear></a-input> -->
-                <span>{{ formData.emergencyTel }}</span>
+                <a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.emergencyTel }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="与本人关系" v-bind="validateInfos.emergencyRelationship"
                 id="EmployeesApplyForm-emergencyRelationship" name="emergencyRelationship">
-                <!-- <a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系" disabled
-                  allow-clear></a-input> -->
-                <span>{{ formData.emergencyRelationship }}</span>
+                <a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系" disabled
+                  allow-clear></a-input>
+                <!-- <span>{{ formData.emergencyRelationship }}</span> -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
@@ -130,7 +138,8 @@
                 name="hukouNature">
                 <!-- <j-dict-select-tag type='radio' v-model:value="formData.hukouNature" dictCode="hukou_nature" disabled
                   placeholder="请选择户口性质" allow-clear /> -->
-                <span>{{ formData.hukouNature }}</span>
+                <a-input v-model:value="formData.hukouNature" placeholder="请输入户口性质" disabled allow-clear></a-input>
+                <!-- <span>{{ formData.hukouNature }}</span> -->
               </a-form-item>
             </a-col>
           </a-row>
@@ -141,8 +150,8 @@
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
           name="EmployeesApplyForm">
-          <a-row>
-            <a-col :span="24">
+          <a-row class="card-class">
+            <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
               <SectionDivider :title="'证件信息'" />
             </a-col>
             <a-col :span="23" :push="1">
@@ -234,7 +243,9 @@
                 </a-tab-pane>
               </a-tabs>
             </a-col>
-            <a-col :span="24">
+          </a-row>
+          <a-row class="card-class">
+            <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
               <div v-if="formData.applyType == 0">
                 <SectionDivider :title="'邀请结果'" />
               </div>
@@ -248,15 +259,15 @@
                 <div v-if="disabled">
                   <!-- 被邀请 -->
                   <div v-if="formData.applyType == 0">
-                    <span v-if="formData.status == 1">待确认</span>
-                    <span v-if="formData.status == 2">已接受</span>
-                    <span v-if="formData.status == 3">已拒绝</span>
+                    <span v-if="formData.status == 1"><a-input :value="'待确认'" disabled allow-clear></a-input></span>
+                    <span v-if="formData.status == 2"><a-input :value="'已接受'" disabled allow-clear></a-input></span>
+                    <span v-if="formData.status == 3"><a-input :value="'已拒绝'" disabled allow-clear></a-input></span>
                   </div>
                   <!-- 主动申请 -->
                   <div v-if="formData.applyType == 1">
-                    <span v-if="formData.status == 1">待审核</span>
-                    <span v-if="formData.status == 2">申请通过</span>
-                    <span v-if="formData.status == 3">申请驳回</span>
+                    <span v-if="formData.status == 1"><a-input :value="'待审核'" disabled allow-clear></a-input></span>
+                    <span v-if="formData.status == 2"><a-input :value="'申请通过'" disabled allow-clear></a-input></span>
+                    <span v-if="formData.status == 3"><a-input :value="'申请驳回'" disabled allow-clear></a-input></span>
                   </div>
                 </div>
                 <a-select v-else v-model:value="statusVal" placeholder="请选择审核意见" style="width: 200px" :disabled="false">
@@ -281,7 +292,9 @@
                   name="auditContent">
                   <a-textarea v-if="!disabled" :autosize="{ minRows: 3 }" maxlength="50" show-count
                     v-model:value="formData.auditContent" allow-clear placeholder="请输入驳回原因"></a-textarea>
-                  <span v-else>{{ formData.auditContent }}</span>
+                  <!-- <span v-else>{{ formData.auditContent }}</span> -->
+                  <span v-else><a-textarea v-model:value="formData.auditContent" :autosize="{ minRows: 3 }"
+                      placeholder="请输入紧急联系人电话" disabled allow-clear></a-textarea></span>
                 </a-form-item>
               </div>
             </a-col>
@@ -313,6 +326,7 @@ const formRef = ref();
 const useForm = Form.useForm;
 const emit = defineEmits(['register', 'ok']);
 const activeKey = ref('1')
+const ageVal = ref()
 const formData = reactive<Record<string, any>>({
   id: '',
   openId: '',
@@ -398,6 +412,7 @@ function add() {
  * 编辑
  */
 function edit(record) {
+  ageVal.value = handleComputedAge(record.dateOfBirth)
   nextTick(() => {
     resetFields();
     const tmpData = {};
@@ -508,4 +523,17 @@ defineExpose({
 
 <style lang="less" scoped>
 .antd-modal-form {}
+
+.card-class {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 14px;
+  padding-right: 14px;
+  // background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fcfdff;
+  border-radius: 10px;
+  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+  margin-bottom: 14px;
+
+}
 </style>