Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
c16013c5 by renchao@pashanhoo.com
Options

chaore:更新.gitignore

1 parent a10beefa
Inline Side-by-side
Showing 11 changed files with 1 additions and 478 deletions
......@@ -23,3 +23,4 @@ yarn-error.log*
*.sw?
package-lock.json
/public/config.json
......
{
"SERVERAPI": "/bdcdj"
}
\ No newline at end of file
<template>
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0"
:append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
:custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
id="dialogBox">
<div slot="title">
<div class="dialog_title">
<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>
<div class="dialogBox-content" :style="{ height: scrollerHeight }">
<slot></slot>
</div>
<div slot="footer" class="dialog_footer" v-if="isButton">
<el-button @click="closeDialog" v-if="isReset">取消</el-button>
<el-button type="primary" plain @click="submitForm" v-if="isSave" :disabled="btnDisabled" :loading="saveloding">
{{ saveButton }}</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
value: { type: Boolean, default: false },
isMain: {
type: Boolean,
default: false
},
appendToBody: {
type: Boolean,
default: true
},
isButton: {
type: Boolean,
default: true,
},
width: {
type: String,
default: '70%',
},
title: {
type: String,
default: '',
},
isFullscreen: {
type: Boolean,
default: true,
},
isSave: {
type: Boolean,
default: true,
},
saveButton: {
type: String,
default: '提交',
},
isReset: {
type: Boolean,
default: true,
},
saveloding: {
type: Boolean,
default: false,
},
btnDisabled: {
type: Boolean,
default: false
},
height: {
type: String,
default: ''
}
},
data () {
return {
key: 0,
dialogVisible: false,
fullscreen: false,
scrollerHeight: ''
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.dialogVisible = val
})
this.height && (this.scrollerHeight = this.height + 'px')
}
},
methods: {
handleFullscreen () {
this.fullscreen = !this.fullscreen
if (!this.fullscreen) {
this.scrollerHeight = ''
} else {
this.scrollerHeight = (window.innerHeight - 120) + 'px'
}
},
submitForm () {
if (this.isButton) {
this.$emit('submitForm');
}
},
closeDialog () {
this.key++
this.$emit('input', false)
this.$emit('closeDialog')
}
},
}
</script>
<style rel="stylesheet/scss" lang="scss" >
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";
</style>
<style rel="stylesheet/scss" scoped lang="scss" >
/deep/.is-fullscreen {
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
</style>
\ No newline at end of file
## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
### 使用时在组件中引用
export default {
selection: {
renderHeader: (h, { store }) => {
return (
<el-checkbox
disabled={store.states.data && store.states.data.length === 0}
indeterminate={
store.states.selection.length > 0 && !store.states.isAllSelected
}
nativeOn-click={store.toggleAllSelection}
value={store.states.isAllSelected}
/>
)
},
renderCell: (h, { row, column, store, $index }) => {
return (
<el-checkbox
nativeOn-click={event => event.stopPropagation()}
value={store.isSelected(row)}
disabled={
column.selectable
? !column.selectable.call(null, row, $index)
: false
}
on-input={() => {
store.commit('rowSelectedChanged', row)
}}
/>
)
},
sortable: false,
resizable: false
},
index: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || '#'}</span>
},
renderCell: (h, { $index, column }) => {
let i = $index + 1
const index = column.index
if (typeof index === 'number') {
i = $index + index
} else if (typeof index === 'function') {
i = index($index)
}
return <div>{i}</div>
},
sortable: false
},
expand: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || ''}</span>
},
renderCell: (h, { row, store }, proxy) => {
const expanded = store.states.expandRows.indexOf(row) > -1
return (
<div
class={
'el-table__expand-icon ' +
(expanded ? 'el-table__expand-icon--expanded' : '')
}
on-click={e => proxy.handleExpandClick(row, e)}
>
<i class='el-icon el-icon-arrow-right' />
</div>
)
},
sortable: false,
resizable: false,
className: 'el-table__expand-column'
}
}
/*
* FileName: lb-column.vue
* Remark: element-column
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:58:23 am
* Last Modified: Tuesday, 19th March 2019 10:14:42 am
* Modified By: 任超
*/
<template>
<el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
:index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
:fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
:sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
:resizable="column.resizable || true" :formatter="column.formatter"
:show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
:class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
:reserve-selection="column.reserveSelection || false" :filters="column.filters"
:filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
:filter-method="column.filterMethod" :filtered-value="column.filteredValue">
<template slot="header" slot-scope="scope">
<lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
</lb-render>
<span v-else>{{ scope.column.label }}</span>
</template>
<template slot-scope="scope">
<lb-render :scope="scope" :render="column.render">
</lb-render>
</template>
<template v-if="column.children">
<lb-column v-for="(col, index) in column.children" :key="index" :column="col">
</lb-column>
</template>
</el-table-column>
</template>
<script>
import LbRender from './lb-render'
import forced from './forced.js'
export default {
name: 'LbColumn',
props: {
column: Object,
headerAlign: String,
align: String
},
components: {
LbRender
},
methods: {
setColumn () {
if (this.column.type) {
this.column.renderHeader = forced[this.column.type].renderHeader
this.column.render = this.column.render || forced[this.column.type].renderCell
}
if (this.column.formatter) {
this.column.render = (h, scope) => {
return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
}
}
if (!this.column.render) {
this.column.render = (h, scope) => {
return <span>{scope.row[scope.column.property]}</span>
}
}
}
},
watch: {
column: {
handler () {
this.setColumn()
},
immediate: true
}
}
}
</script>
/*
* FileName: lb-render.vue
* Remark: 自定义render
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 10:15:30 am
* Last Modified: Tuesday, 19th March 2019 10:15:32 am
* Modified By: 任超
*/
<script>
export default {
name: 'LbRender',
functional: true,
props: {
scope: Object,
render: Function
},
render: (h, ctx) => {
return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
}
}
</script>
## 这是对于element-table 进行的二次封装
### 文档地址
<!-- table 已经全局注册不需要每个页面单独注册 -->
[Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
import directive from './src/directive';
import service from './src/index';
export default {
install (Vue) {
Vue.use(directive);
Vue.prototype.$loading = service;
},
directive,
service
};
import Vue from 'vue';
import loadingVue from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
import { PopupManager } from 'element-ui/src/utils/popup';
import afterLeave from 'element-ui/src/utils/after-leave';
import merge from 'element-ui/src/utils/merge';
const LoadingConstructor = Vue.extend(loadingVue);
const defaults = {
text: null,
fullscreen: true,
body: false,
lock: false,
customClass: ''
};
let fullscreenLoading;
LoadingConstructor.prototype.originalPosition = '';
LoadingConstructor.prototype.originalOverflow = '';
LoadingConstructor.prototype.close = function() {
if (this.fullscreen) {
fullscreenLoading = undefined;
}
afterLeave(this, _ => {
const target = this.fullscreen || this.body
? document.body
: this.target;
removeClass(target, 'el-loading-parent--relative');
removeClass(target, 'el-loading-parent--hidden');
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
this.$destroy();
}, 300);
this.visible = false;
};
const addStyle = (options, parent, instance) => {
let maskStyle = {};
if (options.fullscreen) {
instance.originalPosition = getStyle(document.body, 'position');
instance.originalOverflow = getStyle(document.body, 'overflow');
maskStyle.zIndex = PopupManager.nextZIndex();
} else if (options.body) {
instance.originalPosition = getStyle(document.body, 'position');
['top', 'left'].forEach(property => {
let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
maskStyle[property] = options.target.getBoundingClientRect()[property] +
document.body[scroll] +
document.documentElement[scroll] +
'px';
});
['height', 'width'].forEach(property => {
maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
});
} else {
instance.originalPosition = getStyle(parent, 'position');
}
Object.keys(maskStyle).forEach(property => {
instance.$el.style[property] = maskStyle[property];
});
};
const Loading = (options = {}) => {
if (Vue.prototype.$isServer) return;
options = merge({}, defaults, options);
if (typeof options.target === 'string') {
options.target = document.querySelector(options.target);
}
options.target = options.target || document.body;
if (options.target !== document.body) {
options.fullscreen = false;
} else {
options.body = true;
}
if (options.fullscreen && fullscreenLoading) {
return fullscreenLoading;
}
let parent = options.body ? document.body : options.target;
let instance = new LoadingConstructor({
el: document.createElement('div'),
data: options
});
addStyle(options, parent, instance);
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
addClass(parent, 'el-loading-parent--relative');
}
if (options.fullscreen && options.lock) {
addClass(parent, 'el-loading-parent--hidden');
}
parent.appendChild(instance.$el);
Vue.nextTick(() => {
instance.visible = true;
});
if (options.fullscreen) {
fullscreenLoading = instance;
}
return instance;
};
export default Loading;
<template>
<transition name="el-loading-fade" @after-leave="handleAfterLeave">
<div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }"
:class="[customClass, { 'is-fullscreen': fullscreen }]">
<div class="el-loading-spinner">
<img class="img" src="../../../image/progress.gif" alt="">
<p v-if="text" class="el-loading-text">{{ text }}</p>
</div>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
text: null,
spinner: null,
background: null,
fullscreen: true,
visible: false,
customClass: ''
};
},
methods: {
handleAfterLeave () {
this.$emit('after-leave');
},
setText (text) {
this.text = text;
}
}
};
</script>
<style scoped lang="scss">
.el-loading-spinner {
margin-top: -100px !important;
.img {
width: 80px;
height: 80px;
}
}
</style>
\ No newline at end of file