| | |
| | | <template> |
| | | <div class="particularsdiv"> |
| | | <div class="left-course"> |
| | | <div class="left-course" :class="{ 'left-collapsed': isLeftCollapsed }"> |
| | | <div class="postfilx"> |
| | | <div class="title">工作进程</div> |
| | | <div> |
| | | <div class="title"> |
| | | 工作进程 |
| | | <el-button |
| | | class="collapse-btn" |
| | | @click="toggleLeftCollapse" |
| | | :icon=" |
| | | isLeftCollapsed ? 'el-icon-arrow-right' : 'el-icon-arrow-left' |
| | | " |
| | | size="mini" |
| | | > |
| | | </el-button> |
| | | </div> |
| | | <div v-show="!isLeftCollapsed"> |
| | | <el-steps direction="vertical" :active="workflow"> |
| | | <el-step title="潜在捐献" icon="el-icon-user"> |
| | | <template slot="description" v-if="donatebaseinfo.createtime"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 右侧数据 --> |
| | | <div style="background: #fff; width: 80%;"> |
| | | <div class="right-content" :class="{ 'right-expanded': isLeftCollapsed }"> |
| | | <!-- 顶部数据 --> |
| | | <div class="boxdiv"> |
| | | <div class="top-text">捐献案例信息</div> |
| | |
| | | <org-selecter |
| | | ref="tranHosSelect" |
| | | :org-type="'4'" |
| | | :filterable="true" |
| | | :dataList="dataList" |
| | | v-model="scope.row.transplanthospitalno" |
| | | /> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-row v-if="accomplishform.isbodydonation"> |
| | | <el-col :span="6"> |
| | | <el-form-item align="left" label="遗体捐献" prop="isbodydonation"> |
| | | <el-radio-group v-model="accomplishform.isbodydonation"> |
| | |
| | | return { |
| | | infoid: 736, |
| | | drawer: false, |
| | | isLeftCollapsed: false, |
| | | form: { |
| | | donorno: "", |
| | | reporterno: "", |
| | |
| | | ], |
| | | sex: [{ required: true, message: "性别不能为空", trigger: "blur" }], |
| | | age: [{ required: true, message: "请输入年龄", trigger: "blur" }], |
| | | treatmenthospitalno: [ |
| | | { required: true, message: "请选择医疗机构", trigger: "blur" } |
| | | ], |
| | | // treatmenthospitalno: [ |
| | | // { required: true, message: "请选择医疗机构", trigger: "blur" } |
| | | // ], |
| | | bloodtype: [ |
| | | { required: true, message: "请选择ABO血型", trigger: "blur" } |
| | | ], |
| | |
| | | ] |
| | | }, |
| | | // 各级明细效验 |
| | | medicinerules: {}, |
| | | medicinerules: { |
| | | illnessoverview: [ |
| | | { required: true, message: "请输入病情概况", trigger: "blur" } |
| | | ], |
| | | diagnosisname: [ |
| | | { required: true, message: "请输入疾病诊断", trigger: "blur" } |
| | | ], |
| | | hospitalassessdoctor: [ |
| | | { required: true, message: "请输入院级评估医生", trigger: "blur" } |
| | | ], |
| | | provincialassessdoctor: [ |
| | | { required: true, message: "请输入省级评估医生", trigger: "blur" } |
| | | ], |
| | | coreteamassessdoctor: [ |
| | | { required: true, message: "请输入核心成员评估医生", trigger: "blur" } |
| | | ], |
| | | }, |
| | | affirmrules: { |
| | | name: [ |
| | | { required: true, message: "亲属姓名不能为空", trigger: "blur" } |
| | |
| | | }); |
| | | } |
| | | }, |
| | | // 切换侧边隐藏 |
| | | toggleLeftCollapse() { |
| | | this.isLeftCollapsed = !this.isLeftCollapsed; |
| | | }, |
| | | /** 保存主表按钮 */ |
| | | |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | console.log("提交的数据们:", this.form); |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .particularsdiv { |
| | | display: -webkit-box; |
| | | display: flex; |
| | | background-color: #f5f7fa; |
| | | height: 100%; |
| | | height: 100vh; |
| | | overflow: hidden; |
| | | transition: all 0.3s ease; |
| | | |
| | | // 左侧工作进程栏 |
| | | .left-course { |
| | | background: #fff; |
| | | width: 14vw; |
| | | width: 220px; |
| | | min-width: 220px; |
| | | text-align: center; |
| | | margin: 20px 10px; |
| | | padding: 10px; |
| | | margin-top: 0; |
| | | min-height: 888px; |
| | | margin: 0; |
| | | padding: 0; |
| | | height: 100%; |
| | | box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); |
| | | transition: all 0.3s ease; |
| | | position: relative; |
| | | z-index: 100; |
| | | |
| | | .postfilx { |
| | | width: 12vw; |
| | | text-align: center; |
| | | margin: 20px 10px; |
| | | padding: 10px; |
| | | margin-top: 0; |
| | | // z-index: 999; |
| | | // position: -webkit-sticky; |
| | | // position: fixed; |
| | | // top: 50; |
| | | &.left-collapsed { |
| | | width: 64px; // 改为固定宽度,而不是0 |
| | | min-width: 64px; // 保持最小宽度 |
| | | transform: translateX(0); // 移除平移 |
| | | |
| | | // 折叠状态下隐藏步骤内容,只显示标题和按钮 |
| | | .postfilx > div:last-child { |
| | | opacity: 0; |
| | | visibility: hidden; |
| | | pointer-events: none; // 禁用交互 |
| | | } |
| | | |
| | | .title { |
| | | padding: 15px 5px; // 调整内边距适应窄宽度 |
| | | |
| | | .collapse-btn { |
| | | margin: 0 auto; // 按钮居中 |
| | | } |
| | | } |
| | | } |
| | | |
| | | .postfilx { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 0; |
| | | margin: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .title { |
| | | background: #22a2c3; |
| | | margin-bottom: 20px; |
| | | padding: 10px 0; |
| | | margin-bottom: 0; |
| | | padding: 15px 10px; |
| | | color: #fff; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | min-height: 54px; // 确保标题区域有固定高度 |
| | | box-sizing: border-box; |
| | | |
| | | .collapse-btn { |
| | | background: rgba(255, 255, 255, 0.2); |
| | | border: none; |
| | | color: #fff; |
| | | width: 32px; // 稍微增大确保可点击区域 |
| | | height: 32px; |
| | | padding: 0; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | transition: all 0.3s ease; |
| | | flex-shrink: 0; // 防止按钮被压缩 |
| | | |
| | | &:hover { |
| | | background: rgba(255, 255, 255, 0.3); |
| | | transform: scale(1.1); |
| | | } |
| | | |
| | | // 确保图标居中显示 |
| | | .el-icon { |
| | | margin: 0; |
| | | } |
| | | } |
| | | |
| | | .upload-demo { |
| | | text-align: center; |
| | | // 折叠状态下调整标题文字 |
| | | |
| | | } |
| | | |
| | | .pdfimg { |
| | | display: flex; // text-align: center; |
| | | width: 100%; |
| | | height: 600px; |
| | | |
| | | .box-pdf { |
| | | width: 400px; |
| | | margin-right: 30px; |
| | | border: 1px solid #dcdfe6; |
| | | -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), |
| | | 0 0 6px 0 rgba(0, 0, 0, 0.04); |
| | | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); // <- Add this to fix. |
| | | } |
| | | |
| | | .pdftit { |
| | | width: 200px; |
| | | padding: 20px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .pdftit:hover { |
| | | background: #c0cef7; |
| | | } |
| | | |
| | | .pdfimgmin { |
| | | width: 60%; |
| | | |
| | | img { |
| | | width: 100%; |
| | | // 折叠状态下隐藏完整标题文字 |
| | | &.left-collapsed .title { |
| | | &:after { |
| | | opacity: 0; |
| | | } |
| | | } |
| | | |
| | | .pdfimgmins { |
| | | font-size: 28px; |
| | | width: 60%; |
| | | text-align: center; |
| | | > div:last-child { |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | padding: 20px 15px; |
| | | transition: all 0.3s ease; |
| | | } |
| | | } |
| | | |
| | | } |
| | | .Ticket-button { |
| | | margin-top: 10px; |
| | | text-align: right; |
| | | padding-right: 66px; |
| | | margin-right: 50px; |
| | | } |
| | | // 右侧内容区域 |
| | | .right-content { |
| | | flex: 1; |
| | | background: #fff; |
| | | transition: all 0.3s ease; |
| | | overflow-y: auto; |
| | | margin: 0; |
| | | |
| | | &.right-expanded { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .boxdiv { |
| | | max-width: 85vw; |
| | | width: 100%; |
| | | max-width: none; |
| | | font-size: 18px; |
| | | padding: 0 30px; |
| | | padding-bottom: 10px; |
| | | margin-top: 10px; |
| | | padding-bottom: 20px; |
| | | margin-top: 0; |
| | | |
| | | .top-text { |
| | | text-align: center; |
| | |
| | | font-weight: 600; |
| | | margin: 20px 0; |
| | | margin-bottom: 30px; |
| | | padding-top: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-step__head.is-finish { |
| | | // 步骤样式优化 |
| | | ::v-deep .el-steps { |
| | | &.el-steps--vertical { |
| | | height: 100%; |
| | | |
| | | .el-step { |
| | | margin-bottom: 15px; |
| | | |
| | | .el-step__head { |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | border-color: #22a2c3; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-step__title.is-finish { |
| | | .el-step__title { |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | } |
| | | } |
| | | |
| | | .el-step__description { |
| | | font-size: 12px; |
| | | color: #666; |
| | | line-height: 1.5; |
| | | |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | } |
| | | |
| | | ::v-deep .el-step__description.is-finish { |
| | | color: #22a2c3; |
| | | p { |
| | | margin: 4px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | :v-deep .el-select { |
| | | display: inline-block; |
| | | position: relative; |
| | | width: 80%; |
| | | // 响应式设计 |
| | | @media (max-width: 768px) { |
| | | .particularsdiv { |
| | | flex-direction: column; |
| | | |
| | | .left-course { |
| | | width: 100%; |
| | | height: auto; |
| | | max-height: 300px; |
| | | |
| | | &.left-collapsed { |
| | | width: 100%; // 移动端保持全宽 |
| | | min-width: 100%; |
| | | height: 60px; // 只显示标题栏高度 |
| | | max-height: 60px; |
| | | |
| | | .postfilx > div:last-child { |
| | | display: none; // 完全隐藏内容而不是透明 |
| | | } |
| | | :v-deep .el-tabs__nav-scroll { |
| | | overflow: auto; |
| | | } |
| | | |
| | | .postfilx { |
| | | .title { |
| | | .collapse-btn { |
| | | transform: rotate(0deg); // 保持正常方向 |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right-content { |
| | | margin-left: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 滚动条样式优化 |
| | | .left-course ::-webkit-scrollbar { |
| | | width: 4px; |
| | | } |
| | | |
| | | .left-course ::-webkit-scrollbar-track { |
| | | background: #f1f1f1; |
| | | } |
| | | |
| | | .left-course ::-webkit-scrollbar-thumb { |
| | | background: #c1c1c1; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .left-course ::-webkit-scrollbar-thumb:hover { |
| | | background: #a8a8a8; |
| | | } |
| | | </style> |