Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
ac3fafc6 by jiaozeping@pashanhoo.com
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 4628b72f 6a083d25
Inline Side-by-side
Showing 7 changed files with 239 additions and 4 deletions
.dialogBox {
border-radius: 8px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
.dialog_title {
display: flex;
position: relative;
top: -2px;
b {
flex: 1;
width: 100%;
@flex-center();
}
}
.el-dialog__header {
height: 50px;
background: #FCFDFD;
border-radius: 4px 4px 0 0;
position: relative;
}
.dialog_full {
position: absolute;
top: 0;
right: 6%;
}
.el-dialog__body {
max-height: 88vh;
overflow-y: scroll;
overflow-x: hidden;
}
.dialog_footer {
flex-direction: column;
.dialog_button {
margin-top: 8px;
}
}
}
.el-dialog__wrapper {
overflow: hidden;
}
\ No newline at end of file
<template>
<el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)"
:fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false"
custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="dialogBox">
<div slot="title" class="dialog_title" ref="dialogTitle">
<b>{{ title }}</b>
<div v-if="isFullscreen" class="dialog_full">
<i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
<i class="el-icon-full-screen" v-else @click="handleFullscreen" />
</div>
</div>
<div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
<slot></slot>
</div>
<div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
<div class="dialog_button" v-if="normal">
<el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button>
<el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button>
<el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
{{ saveButton }}</el-button>
</div>
<div class="dialog_button" v-else>
<el-button @click="closeDiaActivity(true)">确定</el-button>
<el-button @click="closeDiaActivity(false)">取消</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
activity: {
type: Boolean,
default: false,
},
normal: {
type: Boolean,
default: true,
},
showEnter: {
type: Boolean,
default: true,
},
isButton: {
type: Boolean,
default: true,
},
multiple: {
type: Boolean,
default: false,
},
width: {
type: String,
default: '70%',
},
title: {
type: String,
default: '',
},
customClass: {
type: String,
default: '',
},
topHeight: {
type: String,
default: '0',
},
isFullscreen: {
type: Boolean,
default: true,
},
isSave: {
type: Boolean,
default: true,
},
saveButton: {
type: String,
default: '提交',
},
isReset: {
type: Boolean,
default: true,
},
saveloding: {
type: Boolean,
default: false,
},
},
data () {
return {
key: 0,
dialogVisible: false,
fullscreen: false,
scrollerHeight: '',
}
},
methods: {
isShow () {
this.dialogVisible = true
},
isHide () {
this.dialogVisible = false
this.key++
},
handleFullscreen () {
this.fullscreen = !this.fullscreen
let height = document.getElementById('dialogBox').clientHeight
if (!this.fullscreen) {
this.scrollerHeight = false
} else {
this.scrollerHeight = (window.innerHeight - 180) + 'px'
}
},
submitForm (ruleForm) {
if (!this.multiple) {
this.$parent.submitForm(ruleForm)
} else {
this.$emit('submitForm', ruleForm);
}
},
closeDialog (ruleForm, flag) {
console.log(456789, this.multiple)
this.key++
if (!this.multiple) {
if (this.$parent.closeDialog) {
// console.log(1)
this.$parent.closeDialog(ruleForm)
} else {
// console.log(2)
this.dialogVisible = false;
}
} else {
this.$emit('closeDialog', ruleForm, flag);
}
},
closeDiaActivity (flag) {
this.$emit('closeDialog', flag);
}
},
}
</script>
<style rel="stylesheet/scss" lang="scss" >
@import "./dialogBox.scss";
</style>
\ No newline at end of file
import dialogBox from './dialogBox.vue'
export default {
install: (Vue) => {
Vue.component('dialogBox', dialogBox);
}
}
\ No newline at end of file
## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
### 使用时在组件中引用
```
import dialogBox from '@/components/dialogBox/index'
<dialogBox ref="dialog" title="标题">
**在这里面写弹框内容**
</dialogBox>
*在父组件中使用 的按钮提交方法*
submitForm(ruleForm) {
}
```
##### 如果有多个弹框
```
import dialogBox from '@/components/dialogBox/index'
<dialogBox ref="dialog" @submitForm="自定义方法" title="标题" :multiple="true">
**在这里面写弹框内容**
</dialogBox>
*在父组件中使用 的按钮提交方法*
自定义方法(ruleForm) {
}
```
## 打开该dialog：
this.$refs.dialog.isShow();
## 隐藏该dialog：
this.$refs.dialog.isHide();
\ No newline at end of file
......@@ -6,7 +6,8 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import Element from 'element-ui'
import './styles/element-variables.scss'
import '@/styles/index.scss' // global css
import lbTable from './components/lb-table/index';
import lbTable from './components/lb-table/index'
import dialogBox from './components/dialogBox/index'
import './image/icons' // icon
import store from './store'
......@@ -15,7 +16,8 @@ import _ from 'lodash'
import * as filters from './filters' // global filters
Vue.use(Element, { size: 'small' })
Vue.use(lbTable);
Vue.use(lbTable)
Vue.use(dialogBox)
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
......
......@@ -99,6 +99,7 @@
@include flex;
flex-wrap: wrap;
margin-left: -20px;
justify-content: space-between;
li {
width: 31%;
......
......@@ -23,11 +23,11 @@
<div class="right-situation el-card box-card is-always-shadow">
<div class="right-title">业务列表</div>
<ul>
<li @click="handleCollection(item)" v-for="(item, index) in busList" :key="index">
<li v-for="(item, index) in busList" :key="index">
<p>
{{ item.name }}
</p>
<p :class="item.select ? 'cactive' : ''">
<p :class="item.select ? 'cactive' : ''" @click="handleCollection(item)">
<i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
</p>
</li>
......