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-11-03 09:39:11 +08:00
parent 875aa2476e
commit 0f14968dad
2 changed files with 84 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/views/biz/bizEmployeesInfo/components/BizEmployeesInfoForm.vue
View File

@ -1,74 +1,73 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled"> <JFormContainer :disabled="true">
<template #detail> <template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="EmployeesApplyForm"> name="EmployeesApplyForm">
<a-row> <a-row class="card-class">
<a-col :span="24"> <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
<SectionDivider :title="'基本信息'" /> <SectionDivider :title="'基本信息'" />
</a-col> </a-col>
</a-row> <a-col :span="24">
<a-row> <a-col :span="12">
<a-col :span="6" :push="2"> <a-form-item label="头像" v-bind="validateInfos.headPath"
<a-form-item label="头像" v-bind="validateInfos.headPath" id="BizEmployeesInfoForm-headPath" id="BizEmployeesInfoForm-headPath" name="headPath">
name="headPath"> <j-image-upload :fileMax="1" :bizPath="`employeesHead`" text="头像"
<j-image-upload :fileMax="1" :bizPath="`employeesHead`" text="头像" v-model:value="formData.headPath"></j-image-upload>
v-model:value="formData.headPath"></j-image-upload> </a-form-item>
</a-form-item> </a-col>
</a-col> </a-col>
</a-row>
<a-row>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name" <a-form-item label="姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name"
name="name"> name="name">
<!-- <a-input v-model:value="formData.name" placeholder="请输入姓名" disabled allow-clear></a-input> --> <a-input v-model:value="formData.name" placeholder="请输入姓名" disabled
<span>{{ formData.name }}</span> allow-clear></a-input>
<!-- <span>{{ formData.name }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="联系电话" v-bind="validateInfos.tel" id="EmployeesApplyForm-tel" name="tel"> <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> --> <a-input v-model:value="formData.tel" placeholder="请输入联系电话" disabled
<span>{{ formData.tel }}</span> allow-clear></a-input>
<!-- <span>{{ formData.tel }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="性别" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex"> <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 <!-- <j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别" disabled
allow-clear /> --> allow-clear /> -->
<span>{{ formData.sex }}</span> <!-- <span>{{ formData.sex }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="年龄" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex"> <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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="出生日期" v-bind="validateInfos.dateOfBirth" <a-form-item label="出生日期" v-bind="validateInfos.dateOfBirth"
id="EmployeesApplyForm-dateOfBirth" name="dateOfBirth"> id="EmployeesApplyForm-dateOfBirth" name="dateOfBirth">
<!-- <a-date-picker placeholder="请选择出生日期" v-model:value="formData.dateOfBirth" value-format="YYYY-MM-DD" <a-date-picker placeholder="请选择出生日期" v-model:value="formData.dateOfBirth"
style="width: 100%" disabled allow-clear /> --> value-format="YYYY-MM-DD" style="width: 100%" disabled allow-clear />
<span>{{ formData.dateOfBirth }}</span> <!-- <span>{{ formData.dateOfBirth }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="民族" v-bind="validateInfos.national" id="EmployeesApplyForm-national" <a-form-item label="民族" v-bind="validateInfos.national" id="EmployeesApplyForm-national"
name="national"> name="national">
<!-- <a-input v-model:value="formData.national" placeholder="请输入民族" disabled allow-clear></a-input> --> <a-input v-model:value="formData.national" placeholder="请输入民族" disabled
<span>{{ formData.national }}</span> allow-clear></a-input>
</a-form-item> <!-- <span>{{ formData.national }}</span> -->
</a-col>
<a-col :span="12">
<a-form-item label="家庭住址" v-bind="validateInfos.address" id="EmployeesApplyForm-address"
name="address">
<!-- <a-textarea v-model:value="formData.address" :rows="4" placeholder="请输入家庭住址" disabled /> -->
<span>{{ formData.address }}</span>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="身份证号"> <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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
@ -76,21 +75,25 @@
id="EmployeesApplyForm-marriedOrNot" name="marriedOrNot"> id="EmployeesApplyForm-marriedOrNot" name="marriedOrNot">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.marriedOrNot" dictCode="married_or_not" <!-- <j-dict-select-tag type='radio' v-model:value="formData.marriedOrNot" dictCode="married_or_not"
placeholder="请选择婚否" disabled allow-clear /> --> 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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="身高" v-bind="validateInfos.height" id="EmployeesApplyForm-height" <a-form-item label="身高(cm)" v-bind="validateInfos.height" id="EmployeesApplyForm-height"
name="height"> name="height">
<!-- <a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%" disabled /> --> <a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%"
<span>{{ formData.height }}cm</span> disabled />
<!-- <span>{{ formData.height }}cm</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="体重" v-bind="validateInfos.weight" id="EmployeesApplyForm-weight" <a-form-item label="体重(kg)" v-bind="validateInfos.weight" id="EmployeesApplyForm-weight"
name="weight"> name="weight">
<!-- <a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%" disabled /> --> <a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%"
<span>{{ formData.weight }}kg</span> disabled />
<!-- <span>{{ formData.weight }}kg</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :span="12"> <!-- <a-col :span="12">
@ -106,7 +109,9 @@
id="EmployeesApplyForm-healthStatus" name="healthStatus"> id="EmployeesApplyForm-healthStatus" name="healthStatus">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.healthStatus" dictCode="health_status" disabled <!-- <j-dict-select-tag type='radio' v-model:value="formData.healthStatus" dictCode="health_status" disabled
placeholder="请选择健康状况" allow-clear /> --> 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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
@ -114,37 +119,41 @@
id="EmployeesApplyForm-politicalAppearance" name="politicalAppearance"> id="EmployeesApplyForm-politicalAppearance" name="politicalAppearance">
<!-- <j-dict-select-tag v-model:value="formData.politicalAppearance" dictCode="political_appearance" disabled <!-- <j-dict-select-tag v-model:value="formData.politicalAppearance" dictCode="political_appearance" disabled
placeholder="请选择政治面貌" allow-clear /> --> 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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="户籍所在地" v-bind="validateInfos.houseAddress" <a-form-item label="户籍所在地" v-bind="validateInfos.houseAddress"
id="EmployeesApplyForm-houseAddress" name="houseAddress"> id="EmployeesApplyForm-houseAddress" name="houseAddress">
<!-- <a-input v-model:value="formData.houseAddress" placeholder="请输入户籍所在地" disabled allow-clear></a-input> --> <a-input v-model:value="formData.houseAddress" placeholder="请输入户籍所在地" disabled
<span>{{ formData.houseAddress }}</span> allow-clear></a-input>
<!-- <span>{{ formData.houseAddress }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="紧急联系人" v-bind="validateInfos.emergencyContact" <a-form-item label="紧急联系人" v-bind="validateInfos.emergencyContact"
id="EmployeesApplyForm-emergencyContact" name="emergencyContact"> id="EmployeesApplyForm-emergencyContact" name="emergencyContact">
<!-- <a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" disabled <a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" disabled
allow-clear></a-input> --> allow-clear></a-input>
<span>{{ formData.emergencyContact }}</span> <!-- <span>{{ formData.emergencyContact }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="紧急联系人电话" v-bind="validateInfos.emergencyTel" <a-form-item label="紧急联系人电话" v-bind="validateInfos.emergencyTel"
id="EmployeesApplyForm-emergencyTel" name="emergencyTel"> id="EmployeesApplyForm-emergencyTel" name="emergencyTel">
<!-- <a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话" disabled allow-clear></a-input> --> <a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话" disabled
<span>{{ formData.emergencyTel }}</span> allow-clear></a-input>
<!-- <span>{{ formData.emergencyTel }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="与本人关系" v-bind="validateInfos.emergencyRelationship" <a-form-item label="与本人关系" v-bind="validateInfos.emergencyRelationship"
id="EmployeesApplyForm-emergencyRelationship" name="emergencyRelationship"> id="EmployeesApplyForm-emergencyRelationship" name="emergencyRelationship">
<!-- <a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系" disabled <a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系"
allow-clear></a-input> --> disabled allow-clear></a-input>
<span>{{ formData.emergencyRelationship }}</span> <!-- <span>{{ formData.emergencyRelationship }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
@ -152,13 +161,17 @@
id="EmployeesApplyForm-hukouNature" name="hukouNature"> id="EmployeesApplyForm-hukouNature" name="hukouNature">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.hukouNature" dictCode="hukou_nature" disabled <!-- <j-dict-select-tag type='radio' v-model:value="formData.hukouNature" dictCode="hukou_nature" disabled
placeholder="请选择户口性质" allow-clear /> --> 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-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="现住址" v-bind="validateInfos.currentAddress" <a-form-item label="现住址" v-bind="validateInfos.currentAddress"
id="EmployeesApplyForm-currentAddress" name="currentAddress"> id="EmployeesApplyForm-currentAddress" name="currentAddress">
<span>{{ formData.currentAddress }}</span> <a-input v-model:value="formData.currentAddress" placeholder="请输入现住址" disabled
allow-clear></a-input>
<!-- <span>{{ formData.currentAddress }}</span> -->
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -169,8 +182,8 @@
<template #detail> <template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol2" :wrapperCol="wrapperCol2" <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
name="EmployeesApplyForm"> name="EmployeesApplyForm">
<a-row> <a-row class="card-class">
<a-col :span="24"> <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
<SectionDivider :title="'证件信息'" /> <SectionDivider :title="'证件信息'" />
</a-col> </a-col>
<a-col :span="23" :push="1"> <a-col :span="23" :push="1">
@ -307,6 +320,7 @@ const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
const formRef = ref(); const formRef = ref();
const useForm = Form.useForm; const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']); const emit = defineEmits(['register', 'ok']);
const ageVal = ref()
const formData = reactive<Record<string, any>>({ const formData = reactive<Record<string, any>>({
id: '', id: '',
name: '', name: '',
@ -382,6 +396,7 @@ function add() {
* 编辑 * 编辑
*/ */
function edit(record) { function edit(record) {
ageVal.value = handleComputedAge(record.dateOfBirth)
nextTick(() => { nextTick(() => {
resetFields(); resetFields();
const tmpData = {}; const tmpData = {};
@ -481,4 +496,17 @@ defineExpose({
.antd-modal-form { .antd-modal-form {
// padding: 14px; // padding: 14px;
} }
.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> </style>

2
src/views/biz/bizEmployeesInfo/components/BizEmployeesInfoModal.vue
View File

@ -3,7 +3,7 @@
<BizEmployeesInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></BizEmployeesInfoForm> <BizEmployeesInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></BizEmployeesInfoForm>
</j-modal> --> </j-modal> -->
<a-drawer :title="title" width="70vw" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }" <a-drawer :title="title" width="70vw" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
@close="handleCancel"> :bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer> <template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button> <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>