toesbieya
6 years ago
parent
d491804416
commit
20a8aa9ed1
@ -0,0 +1,220 @@ |
||||
<script type="text/jsx"> |
||||
import FormAnchor from "@/component/AbstractForm/FormAnchor" |
||||
import FormValidateInfo from "@/component/AbstractForm/FormValidateInfo" |
||||
|
||||
const renderHeader = (h, title, description, extra, close) => ( |
||||
<div class="detail-page-header"> |
||||
<el-page-header on-back={close} content={title}/> |
||||
|
||||
<el-row> |
||||
<el-row class="detail-page-header-left"> |
||||
{description.map(({label, content}) => ( |
||||
<el-col key={label} xs={24} sm={12}> |
||||
<span class="detail-page-header-description-label">{label}</span> |
||||
<span class="detail-page-header-description-content">{content}</span> |
||||
</el-col> |
||||
))} |
||||
</el-row> |
||||
|
||||
<div class="detail-page-header-extra"> |
||||
<div> |
||||
{extra.map(({title, content}) => ( |
||||
<div key={title}> |
||||
<div class="detail-page-header-extra-title">{title}</div> |
||||
<div class="detail-page-header-extra-content">{content}</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</el-row> |
||||
</div> |
||||
) |
||||
|
||||
const renderFooter = (h, form, buttons, close) => ( |
||||
<div class="detail-page-footer"> |
||||
<div class="detail-page-footer-left"> |
||||
<slot name="left"/> |
||||
</div> |
||||
<div class="detail-page-footer-right"> |
||||
<FormValidateInfo form={form}/> |
||||
{renderButtons(h, buttons, close)} |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
const renderButtons = (h, buttons, close) => { |
||||
const list = buttons.map(({type, content, e}) => |
||||
<el-button size="small" type={type} on-click={e}>{content}</el-button> |
||||
) |
||||
list.unshift(<el-button plain size="small" on-click={close}>关 闭</el-button>) |
||||
return list |
||||
} |
||||
|
||||
export default { |
||||
name: "DetailForm", |
||||
|
||||
functional: true, |
||||
|
||||
props: { |
||||
loading: Boolean, |
||||
reference: Function, |
||||
anchors: {type: Array, default: () => []}, |
||||
title: String, |
||||
description: {type: Array, default: () => []}, |
||||
extra: {type: Array, default: () => []}, |
||||
buttons: {type: Array, default: () => []}, |
||||
}, |
||||
|
||||
render(h, context) { |
||||
const { |
||||
props: {loading, reference, anchors, title, description, extra, buttons}, |
||||
listeners: {close}, |
||||
children |
||||
} = context |
||||
|
||||
const getFormRef = () => { |
||||
if (!reference) return null |
||||
const ref = reference() |
||||
if (!ref) return null |
||||
return ref.form |
||||
} |
||||
|
||||
return ( |
||||
<div v-loading={loading} class="detail-page"> |
||||
{renderHeader(h, title, description, extra, close)} |
||||
<FormAnchor reference={reference} data={anchors}/> |
||||
{children} |
||||
{renderFooter(h, getFormRef, buttons, close)} |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "~@/asset/style/variables.scss"; |
||||
|
||||
.detail-page { |
||||
&.el-loading-parent--relative { |
||||
position: static !important; |
||||
} |
||||
|
||||
&-header { |
||||
margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin}; |
||||
padding: 16px 32px 0 32px; |
||||
background: #fff; |
||||
border-bottom: 1px solid #e8eaec; |
||||
|
||||
> .el-page-header { |
||||
padding: 0 0 24px 0; |
||||
|
||||
.el-page-header__left:hover { |
||||
color: $--color-primary; |
||||
} |
||||
} |
||||
|
||||
> .el-row { |
||||
display: flex; |
||||
width: 100%; |
||||
margin-bottom: 12px; |
||||
|
||||
@media (max-width: 768px) { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
&-left { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
.el-col { |
||||
margin-bottom: 16px; |
||||
} |
||||
} |
||||
|
||||
&-extra { |
||||
min-width: 242px; |
||||
margin-left: 88px; |
||||
|
||||
@media (max-width: 1200px) { |
||||
margin-left: 44px; |
||||
} |
||||
|
||||
@media (max-width: 992px) { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
> div { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 200px; |
||||
} |
||||
|
||||
&-title { |
||||
margin-bottom: 4px; |
||||
color: rgba(0, 0, 0, .45); |
||||
font-size: 14px; |
||||
} |
||||
|
||||
&-content { |
||||
margin-top: 12px; |
||||
color: rgba(0, 0, 0, .85); |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
|
||||
&-description { |
||||
span { |
||||
display: inline-flex; |
||||
align-items: baseline; |
||||
} |
||||
|
||||
&-label { |
||||
color: rgba(0, 0, 0, .85); |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
line-height: 1.5715; |
||||
text-align: start; |
||||
} |
||||
|
||||
&-content { |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 14px; |
||||
line-height: 1.5715; |
||||
} |
||||
} |
||||
} |
||||
|
||||
> .el-form > .el-row > .el-card { |
||||
margin-top: 16px; |
||||
} |
||||
|
||||
&-footer { |
||||
@include clearfix; |
||||
position: absolute; |
||||
width: 100%; |
||||
right: 0; |
||||
bottom: 0; |
||||
z-index: 99; |
||||
transition: all 0.3s ease 0s; |
||||
height: 56px; |
||||
padding: 0 24px; |
||||
line-height: 56px; |
||||
border-top: 1px solid #f0f0f0; |
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05); |
||||
backdrop-filter: blur(3px); |
||||
|
||||
&-left { |
||||
float: left; |
||||
} |
||||
|
||||
&-right { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,16 +0,0 @@ |
||||
<template functional> |
||||
<div class="detail-page-footer"> |
||||
<div class="detail-page-footer-left"> |
||||
<slot name="left"/> |
||||
</div> |
||||
<div class="detail-page-footer-right"> |
||||
<slot/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "DocDetailFooter" |
||||
} |
||||
</script> |
||||
@ -1,34 +0,0 @@ |
||||
<template functional> |
||||
<div class="detail-page-header"> |
||||
<el-page-header @back="listeners.close" :content="props.title"/> |
||||
|
||||
<el-row> |
||||
<el-row class="detail-page-header-left"> |
||||
<el-col v-for="i in props.description" :key="i.label" :xs="24" :sm="12"> |
||||
<span class="detail-page-header-description-label">{{ i.label }}</span> |
||||
<span class="detail-page-header-description-content">{{ i.content }}</span> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="detail-page-header-extra"> |
||||
<div> |
||||
<div v-for="i in props.extra" :key="i.title"> |
||||
<div class="detail-page-header-extra-title">{{ i.title }}</div> |
||||
<div class="detail-page-header-extra-content">{{ i.content }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "DocDetailHeader", |
||||
|
||||
props: { |
||||
title: String, |
||||
description: {type: Array, default: () => []}, |
||||
extra: {type: Array, default: () => []} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue