yangjun
/
nursing_unit_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整员工管理-申请审核-详情页样式

This commit is contained in:
1378012178@qq.com 2025-10-28 11:01:53 +08:00
parent 89a6923f5c
commit 92f4769e0a
2 changed files with 81 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/SectionDivider/SectionDivider.vue
View File

@ -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>

112
src/views/admin/employeesapply/components/EmployeesApplyForm.vue
View File

@ -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>