|  |  |  | 
|---|
|  |  |  | :close-on-press-escape="false" | 
|---|
|  |  |  | :wrapper-closable="false" | 
|---|
|  |  |  | :append-to-body="true" | 
|---|
|  |  |  | :destroy-on-close="true" | 
|---|
|  |  |  | :modal="true" | 
|---|
|  |  |  | @close="close" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div slot="title" class="window__header"> | 
|---|
|  |  |  | <span class="header__btn-back" @click="close"><i class="el-icon-arrow-left"></i></span>{{title}} | 
|---|
|  |  |  | <!-- {{title}} --> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="window__body"> | 
|---|
|  |  |  | <slot></slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="withFooter" class="window__footer"> | 
|---|
|  |  |  | <slot name="footer"> | 
|---|
|  |  |  | <el-button v-if="showConfirm" @click="confirm" :loading="confirmWorking" type="primary">{{text}}</el-button> | 
|---|
|  |  |  | <slot name="btns" /> | 
|---|
|  |  |  | <el-button type="primary" v-if="isDownload" @click="downloadFile">下载催缴通知单</el-button> | 
|---|
|  |  |  | <el-button @click="close">{{ backText }}</el-button> | 
|---|
|  |  |  | <el-button @click="confirm" :loading="confirmWorking" type="primary">{{confirmText}}</el-button> | 
|---|
|  |  |  | <el-button @click="close">{{cancelText}}</el-button> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-drawer> | 
|---|
|  |  |  | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | width: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '100%' | 
|---|
|  |  |  | default: '36%' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 是否包含底部操作 | 
|---|
|  |  |  | withFooter: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 提交按钮文字 | 
|---|
|  |  |  | text: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '确定' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | backText: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '返回' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 确认按钮loading状态 | 
|---|
|  |  |  | confirmWorking: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: false | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | showConfirm: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: true | 
|---|
|  |  |  | // 确认按钮文案 | 
|---|
|  |  |  | confirmText: { | 
|---|
|  |  |  | default: '确定' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 取消按钮文案 | 
|---|
|  |  |  | cancelText: { | 
|---|
|  |  |  | default: '取消' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 标题 | 
|---|
|  |  |  | title: { | 
|---|
|  |  |  | 
|---|
|  |  |  | visible: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | required: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 是否显示下载按钮 | 
|---|
|  |  |  | isDownload: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | required: false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 确认 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | this.$emit('confirm') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 关闭 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | close () { | 
|---|
|  |  |  | this.$emit('close') | 
|---|
|  |  |  | this.$emit('update:visible', false) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | downloadFile() { | 
|---|
|  |  |  | this.$emit('downloadFile') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | // 输入框高度 | 
|---|
|  |  |  | $input-height: 32px; | 
|---|
|  |  |  | .global-window { | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | left: 250px !important; | 
|---|
|  |  |  | // 头部标题 | 
|---|
|  |  |  | ::v-deep .el-drawer__header { | 
|---|
|  |  |  | /deep/ .el-drawer__header { | 
|---|
|  |  |  | padding: 0 10px 0 0; | 
|---|
|  |  |  | line-height: 40px; | 
|---|
|  |  |  | border-bottom: 1px solid #eee; | 
|---|
|  |  |  | // text-align: center; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | color: #222; | 
|---|
|  |  |  | // 返回按钮 | 
|---|
|  |  |  | .header__btn-back { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 主体 | 
|---|
|  |  |  | ::v-deep .el-drawer__body { | 
|---|
|  |  |  | /deep/ .el-drawer__body { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | // background-color: #f7f7f7; | 
|---|
|  |  |  | // 内容 | 
|---|
|  |  |  | .window__body { | 
|---|
|  |  |  | // width: 1100px; | 
|---|
|  |  |  | // margin: 0 auto; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | overflow-y: auto; | 
|---|
|  |  |  | padding: 0 16px 12px 16px; | 
|---|
|  |  |  | padding: 12px 16px; | 
|---|
|  |  |  | // 标签 | 
|---|
|  |  |  | // .el-form-item__label { | 
|---|
|  |  |  | //   float: none; | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | .el-form-item__label { | 
|---|
|  |  |  | float: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 元素宽度为100% | 
|---|
|  |  |  | .el-form-item__content > *{ | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | .el-form-item__content{ | 
|---|
|  |  |  | & > * { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 开关表单项 | 
|---|
|  |  |  | .form-item-switch { | 
|---|
|  |  |  | .el-form-item__content > * { | 
|---|
|  |  |  | width: auto !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .switch-text { | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | margin-left: 6px; | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | vertical-align: middle; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 尾部 | 
|---|