<!--
|
人体器官潜在捐献者登记表（纸质表格风）
|
每一项：标题格(灰底) + 内容格(白底)，行列用边框拼成完整网格，像纸质登记表。
|
布局模式：
|
col-1-3 三分之一列（3列并列）
|
col-half 二分之一列（2列）
|
col-2-3 三分之二列（非对称2列）
|
col-full 满行（多选/单选/上传）
|
-->
|
<template>
|
<div class="donor-register">
|
<!-- 标题区 -->
|
<div class="register-header">
|
<h2 class="register-title">人体器官潜在捐献者登记表</h2>
|
<p class="register-tip">（ <span class="required-star">*</span> ）为必须填写的项</p>
|
</div>
|
|
<el-card class="register-card" shadow="never">
|
<el-form
|
ref="registerForm"
|
:model="form"
|
:rules="rules"
|
label-width="120px"
|
class="register-form"
|
>
|
<!-- 第1行：省份 / 所在医疗机构 / 科室 -->
|
<div class="form-row">
|
<el-form-item label="省份" prop="province" class="col-1-3">
|
<el-input v-model="form.province" placeholder="请输入省份" />
|
</el-form-item>
|
<el-form-item label="所在医疗机构" prop="treatmentHospitalName" class="col-1-3">
|
<el-input v-model="form.treatmentHospitalName" placeholder="请输入所在医疗机构" />
|
</el-form-item>
|
<el-form-item label="科室" class="col-1-3">
|
<el-input v-model="form.department" placeholder="请输入科室" />
|
</el-form-item>
|
</div>
|
|
<!-- 第2行：捐献编号 / 首诊医疗机构 / 科室 -->
|
<div class="form-row">
|
<el-form-item label="捐献编号" class="col-1-3">
|
<el-input v-model="form.donationNo" placeholder="由省捐献原始表信息生成" disabled />
|
</el-form-item>
|
<el-form-item label="首诊医疗机构" prop="firstTreatmentHospitalName" class="col-1-3">
|
<el-input v-model="form.firstTreatmentHospitalName" placeholder="请输入首诊医疗机构" />
|
</el-form-item>
|
<el-form-item label="科室" class="col-1-3">
|
<el-input v-model="form.firstDepartment" placeholder="请输入科室" />
|
</el-form-item>
|
</div>
|
|
<!-- 第3行：姓名 / 性别 / 证件号码 -->
|
<div class="form-row">
|
<el-form-item label="姓名" prop="name" class="col-1-3">
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="性别" prop="sex" class="col-1-3">
|
<el-radio-group v-model="form.sex">
|
<el-radio label="1">男</el-radio>
|
<el-radio label="2">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="证件号码" prop="idCardNo" class="col-1-3">
|
<el-input v-model="form.idCardNo" placeholder="请输入证件号码" maxlength="18" />
|
</el-form-item>
|
</div>
|
|
<!-- 第4行：国籍 / 证件类型 / 出生日期 -->
|
<div class="form-row">
|
<el-form-item label="国籍" prop="nationality" class="col-1-3">
|
<el-select v-model="form.nationality" placeholder="请选择国籍" style="width: 100%">
|
<el-option v-for="dict in nationalityOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件类型" prop="idCardType" class="col-1-3">
|
<el-select v-model="form.idCardType" placeholder="请选择证件类型" style="width: 100%">
|
<el-option v-for="dict in idCardTypeOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出生日期" prop="birthDate" class="col-1-3">
|
<el-date-picker v-model="form.birthDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期" style="width: 100%" />
|
</el-form-item>
|
</div>
|
|
<!-- 第5行：住址（省市区联动 + 详细地址，满行） -->
|
<div class="form-row">
|
<el-form-item label="住址" prop="addressArr" class="col-full">
|
<el-cascader v-model="form.addressArr" :options="regionData" :props="{ expandTrigger: 'hover' }" placeholder="请选择省/市/区" style="width: 280px" />
|
<el-input v-model="form.addressDetail" placeholder="xx路xx号xx室（同证件所写地址一致）" style="flex: 1; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第6行：现居住地（满行） -->
|
<div class="form-row">
|
<el-form-item label="现居住地" prop="currentAddressArr" class="col-full">
|
<el-cascader v-model="form.currentAddressArr" :options="regionData" :props="{ expandTrigger: 'hover' }" placeholder="请选择省/市/区" style="width: 280px" />
|
<el-input v-model="form.currentAddressDetail" placeholder="xx路xx号xx室" style="flex: 1; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第7行：血型+RH / 住院号 / 疾病诊断 -->
|
<div class="form-row">
|
<el-form-item label="血型" prop="bloodType" class="col-1-3">
|
<el-select v-model="form.bloodType" placeholder="请选择" style="flex: 1">
|
<el-option label="A" value="A" />
|
<el-option label="B" value="B" />
|
<el-option label="AB" value="AB" />
|
<el-option label="O" value="O" />
|
</el-select>
|
<el-select v-model="form.rhType" placeholder="请选择" style="flex: 1; margin-left: 8px">
|
<el-option label="RH阳性" value="1" />
|
<el-option label="RH阴性" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="住院号" prop="hospitalNo" class="col-1-3">
|
<el-input v-model="form.hospitalNo" placeholder="请输入住院号" />
|
</el-form-item>
|
<el-form-item label="疾病诊断" prop="diagnosisName" class="col-1-3">
|
<el-input v-model="form.diagnosisName" placeholder="请输入疾病诊断" />
|
</el-form-item>
|
</div>
|
|
<!-- 第8行：疾病类型（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="疾病类型" prop="diseaseType" class="col-full">
|
<el-checkbox-group v-model="form.diseaseType">
|
<el-checkbox v-for="item in diseaseTypeOptions" :key="item" :label="item">{{ item }}</el-checkbox>
|
</el-checkbox-group>
|
<el-input v-if="form.diseaseType.includes('其他')" v-model="form.diseaseTypeOther" placeholder="请输入其他疾病类型" style="width: 300px; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第9行：传染病情情况（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="传染病情情况" prop="infectiousDisease" class="col-full">
|
<el-checkbox-group v-model="form.infectiousDisease">
|
<el-checkbox v-for="item in infectiousOptions" :key="item" :label="item">{{ item }}</el-checkbox>
|
</el-checkbox-group>
|
<el-input v-if="form.infectiousDisease.includes('其他')" v-model="form.infectiousDiseaseOther" placeholder="如有请勾选或填写相应项" style="width: 300px; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第10行：病人状况（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="病人状况" prop="patientStatus" class="col-full">
|
<el-checkbox-group v-model="form.patientStatus">
|
<el-checkbox label="深度昏迷">深度昏迷</el-checkbox>
|
<el-checkbox label="无自主呼吸">无自主呼吸</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
|
<!-- 第11行：其他情况（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="其他情况" prop="otherSituation" class="col-full">
|
<el-checkbox-group v-model="form.otherSituation">
|
<el-checkbox v-for="item in otherSituationOptions" :key="item" :label="item">{{ item }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
|
<!-- 第12行：本人捐献意愿(2/3) + 登记编号(1/3) -->
|
<div class="form-row">
|
<el-form-item label="本人捐献意愿" prop="donationWill" class="col-2-3">
|
<el-radio-group v-model="form.donationWill">
|
<el-radio label="1">志愿登记同意</el-radio>
|
<el-radio label="2">书面同意（遗属）</el-radio>
|
<el-radio label="3">未表示不同意</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="登记编号" class="col-1-3">
|
<el-link type="primary" :underline="false" @click="handleGetRegisterNo">
|
{{ form.registerNo || '志愿登记同意获取志愿登记信息' }}
|
</el-link>
|
</el-form-item>
|
</div>
|
|
<!-- 第13行：亲属关系状况（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="亲属关系状况" prop="relativeRelation" class="col-full">
|
<el-checkbox-group v-model="form.relativeRelation">
|
<el-checkbox v-for="item in relativeRelationOptions" :key="item" :label="item">{{ item }}</el-checkbox>
|
</el-checkbox-group>
|
<el-input v-if="form.relativeRelation.includes('其他')" v-model="form.relativeRelationOther" placeholder="请输入其他亲属关系" style="width: 300px; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第14行：主要亲属（签字）(1/2) + 与潜在捐献者关系(1/2) -->
|
<div class="form-row">
|
<el-form-item label="主要亲属（签字）" prop="mainRelativeName" class="col-half">
|
<el-input v-model="form.mainRelativeName" placeholder="请输入主要亲属姓名" />
|
</el-form-item>
|
<el-form-item label="与潜在捐献者关系" prop="mainRelativeRelation" class="col-half">
|
<el-select v-model="form.mainRelativeRelation" placeholder="请选择关系" style="width: 100%">
|
<el-option label="配偶" value="配偶" />
|
<el-option label="子女" value="子女" />
|
<el-option label="父亲" value="父亲" />
|
<el-option label="母亲" value="母亲" />
|
<el-option label="其他" value="其他" />
|
</el-select>
|
</el-form-item>
|
</div>
|
|
<!-- 第15行：信息来源（满行单选） -->
|
<div class="form-row">
|
<el-form-item label="信息来源" prop="infoSource" class="col-full">
|
<el-radio-group v-model="form.infoSource">
|
<el-radio v-for="item in infoSourceOptions" :key="item" :label="item">{{ item }}</el-radio>
|
</el-radio-group>
|
<el-input v-if="form.infoSource === '其他信息来源'" v-model="form.infoSourceOther" placeholder="请输入其他信息来源" style="width: 300px; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
|
<!-- 第16行：人体器官获取组织（满行，可删除标签） -->
|
<div class="form-row">
|
<el-form-item label="人体器官获取组织" prop="opoOrg" class="col-full">
|
<el-tag v-if="form.opoOrg" closable type="info" @close="form.opoOrg = ''">{{ form.opoOrg }}</el-tag>
|
<el-button v-else type="text" icon="el-icon-plus" @click="form.opoOrg = '青岛大学附属医院'">选择获取组织</el-button>
|
</el-form-item>
|
</div>
|
|
<!-- 第17行：登记表（满行上传） -->
|
<div class="form-row">
|
<el-form-item label="登记表" prop="registerFormFile" class="col-full">
|
<el-upload action="#" :auto-upload="false" :file-list="form.registerFormFile" list-type="picture-card" :on-change="(f, fl) => handleUploadChange('registerFormFile', f, fl)" :on-remove="(f, fl) => handleUploadRemove('registerFormFile', f, fl)" accept=".jpg,.jpeg,.png,.pdf">
|
<el-button size="small" type="success" icon="el-icon-upload2">上传图片</el-button>
|
</el-upload>
|
<span class="upload-tip">请上传《人体器官潜在捐献者登记表》（原始签字表），必填。</span>
|
</el-form-item>
|
</div>
|
|
<!-- 第18行：证件照（满行上传） -->
|
<div class="form-row">
|
<el-form-item label="证件照" prop="idPhotoFile" class="col-full">
|
<el-upload action="#" :auto-upload="false" :file-list="form.idPhotoFile" list-type="picture-card" :on-change="(f, fl) => handleUploadChange('idPhotoFile', f, fl)" :on-remove="(f, fl) => handleUploadRemove('idPhotoFile', f, fl)" accept=".jpg,.jpeg,.png,.pdf">
|
<el-button size="small" type="success" icon="el-icon-upload2">上传图片</el-button>
|
</el-upload>
|
<span class="upload-tip">请上传潜在捐献者法定身份证件照片或复印件，必填。</span>
|
</el-form-item>
|
</div>
|
|
<!-- 第19行：疾病诊断资料（满行上传） -->
|
<div class="form-row">
|
<el-form-item label="疾病诊断资料" prop="diagnosisFile" class="col-full">
|
<el-upload action="#" :auto-upload="false" :file-list="form.diagnosisFile" list-type="picture-card" :on-change="(f, fl) => handleUploadChange('diagnosisFile', f, fl)" :on-remove="(f, fl) => handleUploadRemove('diagnosisFile', f, fl)" accept=".jpg,.jpeg,.png,.pdf">
|
<el-button size="small" type="success" icon="el-icon-upload2">上传图片</el-button>
|
</el-upload>
|
<span class="upload-tip">请上传潜在捐献者疾病诊断资料（复印件）等。</span>
|
</el-form-item>
|
</div>
|
|
<!-- 第20行：报告人 / 联系电话 / 报告日期 -->
|
<div class="form-row">
|
<el-form-item label="报告人" prop="reporter" class="col-1-3">
|
<el-input v-model="form.reporter" placeholder="请输入报告人" />
|
</el-form-item>
|
<el-form-item label="联系电话" prop="reportPhone" class="col-1-3">
|
<el-input v-model="form.reportPhone" placeholder="请输入联系电话" maxlength="11" />
|
</el-form-item>
|
<el-form-item label="报告日期" prop="reportDate" class="col-1-3">
|
<el-date-picker v-model="form.reportDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择报告日期" style="width: 100%" />
|
</el-form-item>
|
</div>
|
|
<!-- 第21行：中止原因（满行多选） -->
|
<div class="form-row">
|
<el-form-item label="中止原因" prop="stopReason" class="col-full">
|
<el-checkbox-group v-model="form.stopReason">
|
<el-checkbox v-for="item in stopReasonOptions" :key="item" :label="item">{{ item }}</el-checkbox>
|
</el-checkbox-group>
|
<el-input v-if="form.stopReason.includes('其他中止原因')" v-model="form.stopReasonOther" placeholder="请输入其他中止原因" style="width: 300px; margin-left: 10px" />
|
</el-form-item>
|
</div>
|
</el-form>
|
</el-card>
|
|
<!-- 底部操作按钮 -->
|
<div class="register-footer">
|
<el-button type="primary" :loading="saveLoading" @click="handleSave">保存</el-button>
|
<el-button type="success" :loading="submitLoading" @click="handleSubmit">提交信息</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { regionData } from "element-china-area-data";
|
|
export default {
|
name: "PotentialDonorRegister",
|
data() {
|
return {
|
// 省市区联动数据源
|
regionData,
|
saveLoading: false,
|
submitLoading: false,
|
|
// 下拉/多选 选项
|
nationalityOptions: [
|
{ value: "1", label: "中国大陆" },
|
{ value: "2", label: "中国香港" },
|
{ value: "3", label: "中国澳门" },
|
{ value: "4", label: "中国台湾" },
|
{ value: "5", label: "其他" }
|
],
|
idCardTypeOptions: [
|
{ value: "1", label: "居民身份证" },
|
{ value: "2", label: "护照" },
|
{ value: "3", label: "军官证" },
|
{ value: "4", label: "其他" }
|
],
|
diseaseTypeOptions: ["脑血管外", "脑外伤", "缺血缺氧性脑病", "脑肿瘤", "心血管疾病", "其他"],
|
infectiousOptions: ["乙肝", "丙肝", "梅毒", "艾滋病", "其他"],
|
otherSituationOptions: ["交通事故", "刑事案件", "工伤事故", "其他意外事故"],
|
relativeRelationOptions: ["配偶", "子女", "父亲", "母亲", "其他"],
|
infoSourceOptions: ["红十字会", "医疗机构", "亲属", "交通", "公安", "其他信息来源"],
|
stopReasonOptions: ["亲属反对", "经治疗病情好转", "错过捐献时机", "其他中止原因"],
|
|
form: {
|
// 第1行
|
province: "山东省",
|
treatmentHospitalName: "青岛大学附属医院",
|
department: "急诊科",
|
// 第2行
|
donationNo: "SD-2026-00258",
|
firstTreatmentHospitalName: "青岛市市立医院",
|
firstDepartment: "神经外科",
|
// 第3行
|
name: "张三",
|
sex: "1",
|
idCardNo: "370202198805151234",
|
// 第4行
|
nationality: "1",
|
idCardType: "1",
|
birthDate: "1988-05-15",
|
// 第5行 住址（山东省青岛市市北区）
|
addressArr: ["370000", "370200", "370203"],
|
addressDetail: "人民路123号5号楼201室",
|
// 第6行 现居住地（同上）
|
currentAddressArr: ["370000", "370200", "370203"],
|
currentAddressDetail: "台东路88号3单元602室",
|
// 第7行
|
bloodType: "A",
|
rhType: "1",
|
hospitalNo: "20260815-032",
|
diagnosisName: "脑出血",
|
// 第8行
|
diseaseType: ["脑血管外"],
|
diseaseTypeOther: "",
|
// 第9行
|
infectiousDisease: ["乙肝"],
|
infectiousDiseaseOther: "",
|
// 第10行
|
patientStatus: ["深度昏迷"],
|
// 第11行
|
otherSituation: ["交通事故"],
|
// 第12行
|
donationWill: "1",
|
registerNo: "ZYDJ-2026-00258",
|
// 第13行
|
relativeRelation: ["配偶"],
|
relativeRelationOther: "",
|
// 第14行
|
mainRelativeName: "李四",
|
mainRelativeRelation: "配偶",
|
// 第15行
|
infoSource: "医疗机构",
|
infoSourceOther: "",
|
// 第16行
|
opoOrg: "青岛大学附属医院",
|
// 第17~19行 文件（假数据，仅用于展示已上传缩略图）
|
registerFormFile: [{ name: "登记表.jpg", url: "https://picsum.photos/200/200?random=8" }],
|
idPhotoFile: [{ name: "身份证.jpg", url: "https://picsum.photos/200/200?random=9" }],
|
diagnosisFile: [{ name: "诊断证明.jpg", url: "https://picsum.photos/200/200?random=10" }],
|
// 第20行
|
reporter: "王协调员",
|
reportPhone: "18661808259",
|
reportDate: "2026-08-20",
|
// 第21行
|
stopReason: [],
|
stopReasonOther: ""
|
},
|
rules: {
|
province: [{ required: true, message: "请输入省份", trigger: "blur" }],
|
treatmentHospitalName: [{ required: true, message: "请输入所在医疗机构", trigger: "blur" }],
|
firstTreatmentHospitalName: [{ required: true, message: "请输入首诊医疗机构", trigger: "blur" }],
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
idCardNo: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
|
nationality: [{ required: true, message: "请选择国籍", trigger: "change" }],
|
idCardType: [{ required: true, message: "请选择证件类型", trigger: "change" }],
|
birthDate: [{ required: true, message: "请选择出生日期", trigger: "change" }],
|
addressArr: [{ required: true, message: "请选择住址省/市/区", trigger: "change" }],
|
currentAddressArr: [{ required: true, message: "请选择现居住地省/市/区", trigger: "change" }],
|
bloodType: [{ required: true, message: "请选择血型", trigger: "change" }],
|
hospitalNo: [{ required: true, message: "请输入住院号", trigger: "blur" }],
|
diagnosisName: [{ required: true, message: "请输入疾病诊断", trigger: "blur" }],
|
donationWill: [{ required: true, message: "请选择本人捐献意愿", trigger: "change" }],
|
relativeRelation: [{ required: true, message: "请选择亲属关系状况", trigger: "change" }],
|
mainRelativeName: [{ required: true, message: "请输入主要亲属姓名", trigger: "blur" }],
|
mainRelativeRelation: [{ required: true, message: "请选择与潜在捐献者关系", trigger: "change" }],
|
infoSource: [{ required: true, message: "请选择信息来源", trigger: "change" }],
|
registerFormFile: [{ required: true, message: "请上传登记表", trigger: "change" }],
|
idPhotoFile: [{ required: true, message: "请上传证件照", trigger: "change" }],
|
diagnosisFile: [{ required: true, message: "请上传疾病诊断资料", trigger: "change" }],
|
reporter: [{ required: true, message: "请输入报告人", trigger: "blur" }],
|
reportPhone: [
|
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
|
],
|
reportDate: [{ required: true, message: "请选择报告日期", trigger: "change" }]
|
}
|
};
|
},
|
methods: {
|
// 文件上传变化
|
handleUploadChange(field, file, fileList) {
|
this.form[field] = fileList;
|
this.$refs.registerForm.validateField(field);
|
},
|
handleUploadRemove(field, file, fileList) {
|
this.form[field] = fileList;
|
this.$refs.registerForm.validateField(field);
|
},
|
|
// 志愿登记编号（占位）
|
handleGetRegisterNo() {
|
this.form.registerNo = "ZYDJ-" + Date.now();
|
this.$message.success("已获取志愿登记编号");
|
},
|
|
// 保存（纯前端假数据，不调后端）
|
handleSave() {
|
this.saveLoading = true;
|
setTimeout(() => {
|
this.saveLoading = false;
|
this.$message.success("保存成功（假数据，未提交后端）");
|
}, 500);
|
},
|
|
// 提交（纯前端假数据，不调后端）
|
handleSubmit() {
|
this.submitLoading = true;
|
setTimeout(() => {
|
this.submitLoading = false;
|
this.$message.success("提交成功（假数据，未提交后端）");
|
}, 500);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.donor-register {
|
padding: 20px;
|
}
|
|
/* 标题区 */
|
.register-header {
|
text-align: center;
|
margin-bottom: 20px;
|
}
|
.register-title {
|
font-size: 20px;
|
font-weight: bold;
|
color: #303133;
|
margin: 0 0 8px 0;
|
}
|
.register-tip {
|
font-size: 13px;
|
color: #909399;
|
margin: 0;
|
}
|
.required-star {
|
color: #f56c6c;
|
}
|
|
.register-card {
|
margin-bottom: 20px;
|
}
|
.register-card >>> .el-card__body {
|
padding: 16px;
|
}
|
|
/* ===== 纸质表格网格核心样式 ===== */
|
/* 容器只画「上、左」两条外边框，配合每个单元格的「右、下」边框拼成完整网格 */
|
.register-form {
|
border-left: 1px solid #d0d3db;
|
background: #fff;
|
/* 超宽屏限制表单最大宽度，右侧留白，避免字段分布过开 */
|
max-width: 1400px;
|
}
|
|
/* 每一行为 flex 行，自带上边框保证网格连续性 */
|
.register-form >>> .form-row {
|
display: flex;
|
width: 100%;
|
border-top: 1px solid #d0d3db;
|
/* 上移1px与上一行的border-bottom重叠，两行之间只显示一条1px细线 */
|
margin-top: -1px;
|
}
|
.register-form >>> .form-row:first-child {
|
margin-top: 0;
|
}
|
|
/* 行尾空白填充：不满整行的右侧自动补一个空白格子，网格保持闭合（右侧适当留白） */
|
.register-form >>> .form-row::after {
|
content: "";
|
flex: 1 1 0;
|
min-height: 42px;
|
background: linear-gradient(to left, #d0d3db 1px, transparent 1px),
|
linear-gradient(to top, #d0d3db 1px, transparent 1px);
|
background-color: #fff;
|
}
|
|
/* 单元格：默认三分之一列，画右、下两条边 */
|
.register-form >>> .el-form-item {
|
flex: 0 0 33.3333%;
|
display: flex;
|
margin: 0;
|
background: #fff;
|
border-right: 1px solid #d0d3db;
|
border-bottom: 1px solid #d0d3db;
|
}
|
.register-form >>> .el-form-item::after,
|
.register-form >>> .el-form-item::before {
|
display: none;
|
}
|
|
/* 列宽控制 */
|
.register-form >>> .col-1-3 { flex: 0 0 33.3333%; }
|
.register-form >>> .col-half { flex: 0 0 50%; }
|
.register-form >>> .col-2-3 { flex: 0 0 66.6666%; }
|
.register-form >>> .col-full { flex: 0 0 100%; }
|
|
/* 标题格：灰底、居中、加粗，右边一条分隔线 */
|
.register-form >>> .el-form-item__label {
|
flex: 0 0 150px;
|
width: 150px !important;
|
float: none;
|
padding: 0 8px !important;
|
background: #ecf5ff;
|
border-right: 1px solid #d0d3db;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
font-size: 13px;
|
font-weight: 600;
|
color: #2c3038;
|
line-height: 1.3;
|
white-space: nowrap;
|
}
|
/* 必填项星号红色 */
|
.register-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
|
color: #f56c6c;
|
margin-right: 2px;
|
}
|
|
/* 内容格：白底、垂直居中、自适应内容 */
|
.register-form >>> .el-form-item__content {
|
flex: 1;
|
margin-left: 0 !important;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 6px 10px;
|
background: #fff;
|
min-height: 42px;
|
line-height: 1.4;
|
}
|
|
/* 控件宽度适中，不铺满整格（内容短时输入框不再拉得很长） */
|
.register-form >>> .el-form-item__content .el-input,
|
.register-form >>> .el-form-item__content .el-select,
|
.register-form >>> .el-form-item__content .el-cascader {
|
width: 220px;
|
max-width: 100%;
|
}
|
.register-form >>> .el-form-item__content .el-date-editor {
|
width: 240px;
|
max-width: 100%;
|
}
|
.register-form >>> .el-form-item__content .el-range-editor {
|
width: 360px;
|
max-width: 100%;
|
}
|
|
/* 校验出错时标题格不变红，仅内容区文字提示即可 */
|
.register-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label {
|
background: #ecf5ff;
|
}
|
|
/* 上传提示文字 */
|
.upload-tip {
|
font-size: 12px;
|
color: #909399;
|
margin-left: 12px;
|
}
|
|
/* 底部按钮 */
|
.register-footer {
|
text-align: center;
|
margin: 20px 0;
|
}
|
.register-footer .el-button {
|
min-width: 120px;
|
margin: 0 10px;
|
}
|
</style>
|
