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* ...@@ -23,3 +23,4 @@ yarn-error.log*
23 *.sw? 23 *.sw?
24 24
25 package-lock.json 25 package-lock.json
26 /public/config.json
......
1 {
2 "SERVERAPI": "/bdcdj"
3 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0"
3 :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
5 id="dialogBox">
6 <div slot="title">
7 <div class="dialog_title">
8 <b>{{ title }}</b>
9 <div v-if="isFullscreen" class="dialog_full">
10 <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
11 <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
12 </div>
13 </div>
14 </div>
15 <div class="dialogBox-content" :style="{ height: scrollerHeight }">
16 <slot></slot>
17 </div>
18 <div slot="footer" class="dialog_footer" v-if="isButton">
19 <el-button @click="closeDialog" v-if="isReset">取消</el-button>
20 <el-button type="primary" plain @click="submitForm" v-if="isSave" :disabled="btnDisabled" :loading="saveloding">
21 {{ saveButton }}</el-button>
22 </div>
23 </el-dialog>
24 </template>
25 <script>
26 export default {
27 props: {
28 value: { type: Boolean, default: false },
29 isMain: {
30 type: Boolean,
31 default: false
32 },
33 appendToBody: {
34 type: Boolean,
35 default: true
36 },
37 isButton: {
38 type: Boolean,
39 default: true,
40 },
41 width: {
42 type: String,
43 default: '70%',
44 },
45 title: {
46 type: String,
47 default: '',
48 },
49 isFullscreen: {
50 type: Boolean,
51 default: true,
52 },
53 isSave: {
54 type: Boolean,
55 default: true,
56 },
57 saveButton: {
58 type: String,
59 default: '提交',
60 },
61 isReset: {
62 type: Boolean,
63 default: true,
64 },
65 saveloding: {
66 type: Boolean,
67 default: false,
68 },
69 btnDisabled: {
70 type: Boolean,
71 default: false
72 },
73 height: {
74 type: String,
75 default: ''
76 }
77 },
78 data () {
79 return {
80 key: 0,
81 dialogVisible: false,
82 fullscreen: false,
83 scrollerHeight: ''
84 }
85 },
86 watch: {
87 value (val) {
88 this.$nextTick(() => {
89 this.dialogVisible = val
90 })
91 this.height && (this.scrollerHeight = this.height + 'px')
92 }
93 },
94 methods: {
95 handleFullscreen () {
96 this.fullscreen = !this.fullscreen
97 if (!this.fullscreen) {
98 this.scrollerHeight = ''
99 } else {
100 this.scrollerHeight = (window.innerHeight - 120) + 'px'
101 }
102 },
103 submitForm () {
104 if (this.isButton) {
105 this.$emit('submitForm');
106 }
107 },
108 closeDialog () {
109 this.key++
110 this.$emit('input', false)
111 this.$emit('closeDialog')
112 }
113 },
114 }
115 </script>
116 <style rel="stylesheet/scss" lang="scss" >
117 @import "~@/styles/mixin.scss";
118 @import "~@/styles/dialogBox.scss";
119 </style>
120 <style rel="stylesheet/scss" scoped lang="scss" >
121 /deep/.is-fullscreen {
122 position: absolute;
123 top: 50% !important;
124 left: 50% !important;
125 transform: translate(-50%, -50%) !important;
126 }
127 </style>
...\ No newline at end of file ...\ No newline at end of file
1 ## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
2 ### 使用时在组件中引用
1 export default {
2 selection: {
3 renderHeader: (h, { store }) => {
4 return (
5 <el-checkbox
6 disabled={store.states.data && store.states.data.length === 0}
7 indeterminate={
8 store.states.selection.length > 0 && !store.states.isAllSelected
9 }
10 nativeOn-click={store.toggleAllSelection}
11 value={store.states.isAllSelected}
12 />
13 )
14 },
15 renderCell: (h, { row, column, store, $index }) => {
16 return (
17 <el-checkbox
18 nativeOn-click={event => event.stopPropagation()}
19 value={store.isSelected(row)}
20 disabled={
21 column.selectable
22 ? !column.selectable.call(null, row, $index)
23 : false
24 }
25 on-input={() => {
26 store.commit('rowSelectedChanged', row)
27 }}
28 />
29 )
30 },
31 sortable: false,
32 resizable: false
33 },
34 index: {
35 renderHeader: (h, scope) => {
36 return <span>{scope.column.label || '#'}</span>
37 },
38 renderCell: (h, { $index, column }) => {
39 let i = $index + 1
40 const index = column.index
41
42 if (typeof index === 'number') {
43 i = $index + index
44 } else if (typeof index === 'function') {
45 i = index($index)
46 }
47
48 return <div>{i}</div>
49 },
50 sortable: false
51 },
52 expand: {
53 renderHeader: (h, scope) => {
54 return <span>{scope.column.label || ''}</span>
55 },
56 renderCell: (h, { row, store }, proxy) => {
57 const expanded = store.states.expandRows.indexOf(row) > -1
58 return (
59 <div
60 class={
61 'el-table__expand-icon ' +
62 (expanded ? 'el-table__expand-icon--expanded' : '')
63 }
64 on-click={e => proxy.handleExpandClick(row, e)}
65 >
66 <i class='el-icon el-icon-arrow-right' />
67 </div>
68 )
69 },
70 sortable: false,
71 resizable: false,
72 className: 'el-table__expand-column'
73 }
74 }
1 /*
2 * FileName: lb-column.vue
3 * Remark: element-column
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:58:23 am
7 * Last Modified: Tuesday, 19th March 2019 10:14:42 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
13 :index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
14 :fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
15 :sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
16 :resizable="column.resizable || true" :formatter="column.formatter"
17 :show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
18 :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
19 :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
20 :reserve-selection="column.reserveSelection || false" :filters="column.filters"
21 :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
22 :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
23 <template slot="header" slot-scope="scope">
24 <lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
25 </lb-render>
26 <span v-else>{{ scope.column.label }}</span>
27 </template>
28
29 <template slot-scope="scope">
30 <lb-render :scope="scope" :render="column.render">
31 </lb-render>
32 </template>
33
34 <template v-if="column.children">
35 <lb-column v-for="(col, index) in column.children" :key="index" :column="col">
36 </lb-column>
37 </template>
38 </el-table-column>
39 </template>
40
41 <script>
42 import LbRender from './lb-render'
43 import forced from './forced.js'
44 export default {
45 name: 'LbColumn',
46 props: {
47 column: Object,
48 headerAlign: String,
49 align: String
50 },
51 components: {
52 LbRender
53 },
54 methods: {
55 setColumn () {
56 if (this.column.type) {
57 this.column.renderHeader = forced[this.column.type].renderHeader
58 this.column.render = this.column.render || forced[this.column.type].renderCell
59 }
60 if (this.column.formatter) {
61 this.column.render = (h, scope) => {
62 return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
63 }
64 }
65 if (!this.column.render) {
66 this.column.render = (h, scope) => {
67 return <span>{scope.row[scope.column.property]}</span>
68 }
69 }
70 }
71 },
72 watch: {
73 column: {
74 handler () {
75 this.setColumn()
76 },
77 immediate: true
78 }
79 }
80 }
81 </script>
1 /*
2 * FileName: lb-render.vue
3 * Remark: 自定义render
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 10:15:30 am
7 * Last Modified: Tuesday, 19th March 2019 10:15:32 am
8 * Modified By: 任超
9 */
10 <script>
11 export default {
12 name: 'LbRender',
13 functional: true,
14 props: {
15 scope: Object,
16 render: Function
17 },
18 render: (h, ctx) => {
19 return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
20 }
21 }
22 </script>
1 ## 这是对于element-table 进行的二次封装
2
3 ### 文档地址
4
5 <!-- table 已经全局注册不需要每个页面单独注册 -->
6
7 [Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
1 import directive from './src/directive';
2 import service from './src/index';
3
4 export default {
5 install (Vue) {
6 Vue.use(directive);
7 Vue.prototype.$loading = service;
8 },
9 directive,
10 service
11 };
1 import Vue from 'vue';
2 import loadingVue from './loading.vue';
3 import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
4 import { PopupManager } from 'element-ui/src/utils/popup';
5 import afterLeave from 'element-ui/src/utils/after-leave';
6 import merge from 'element-ui/src/utils/merge';
7
8 const LoadingConstructor = Vue.extend(loadingVue);
9
10 const defaults = {
11 text: null,
12 fullscreen: true,
13 body: false,
14 lock: false,
15 customClass: ''
16 };
17
18 let fullscreenLoading;
19
20 LoadingConstructor.prototype.originalPosition = '';
21 LoadingConstructor.prototype.originalOverflow = '';
22
23 LoadingConstructor.prototype.close = function() {
24 if (this.fullscreen) {
25 fullscreenLoading = undefined;
26 }
27 afterLeave(this, _ => {
28 const target = this.fullscreen || this.body
29 ? document.body
30 : this.target;
31 removeClass(target, 'el-loading-parent--relative');
32 removeClass(target, 'el-loading-parent--hidden');
33 if (this.$el && this.$el.parentNode) {
34 this.$el.parentNode.removeChild(this.$el);
35 }
36 this.$destroy();
37 }, 300);
38 this.visible = false;
39 };
40
41 const addStyle = (options, parent, instance) => {
42 let maskStyle = {};
43 if (options.fullscreen) {
44 instance.originalPosition = getStyle(document.body, 'position');
45 instance.originalOverflow = getStyle(document.body, 'overflow');
46 maskStyle.zIndex = PopupManager.nextZIndex();
47 } else if (options.body) {
48 instance.originalPosition = getStyle(document.body, 'position');
49 ['top', 'left'].forEach(property => {
50 let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
51 maskStyle[property] = options.target.getBoundingClientRect()[property] +
52 document.body[scroll] +
53 document.documentElement[scroll] +
54 'px';
55 });
56 ['height', 'width'].forEach(property => {
57 maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
58 });
59 } else {
60 instance.originalPosition = getStyle(parent, 'position');
61 }
62 Object.keys(maskStyle).forEach(property => {
63 instance.$el.style[property] = maskStyle[property];
64 });
65 };
66
67 const Loading = (options = {}) => {
68 if (Vue.prototype.$isServer) return;
69 options = merge({}, defaults, options);
70 if (typeof options.target === 'string') {
71 options.target = document.querySelector(options.target);
72 }
73 options.target = options.target || document.body;
74 if (options.target !== document.body) {
75 options.fullscreen = false;
76 } else {
77 options.body = true;
78 }
79 if (options.fullscreen && fullscreenLoading) {
80 return fullscreenLoading;
81 }
82
83 let parent = options.body ? document.body : options.target;
84 let instance = new LoadingConstructor({
85 el: document.createElement('div'),
86 data: options
87 });
88
89 addStyle(options, parent, instance);
90 if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
91 addClass(parent, 'el-loading-parent--relative');
92 }
93 if (options.fullscreen && options.lock) {
94 addClass(parent, 'el-loading-parent--hidden');
95 }
96 parent.appendChild(instance.$el);
97 Vue.nextTick(() => {
98 instance.visible = true;
99 });
100 if (options.fullscreen) {
101 fullscreenLoading = instance;
102 }
103 return instance;
104 };
105
106 export default Loading;
1 <template>
2 <transition name="el-loading-fade" @after-leave="handleAfterLeave">
3 <div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }"
4 :class="[customClass, { 'is-fullscreen': fullscreen }]">
5 <div class="el-loading-spinner">
6 <img class="img" src="../../../image/progress.gif" alt="">
7 <p v-if="text" class="el-loading-text">{{ text }}</p>
8 </div>
9 </div>
10 </transition>
11 </template>
12
13 <script>
14 export default {
15 data () {
16 return {
17 text: null,
18 spinner: null,
19 background: null,
20 fullscreen: true,
21 visible: false,
22 customClass: ''
23 };
24 },
25
26 methods: {
27 handleAfterLeave () {
28 this.$emit('after-leave');
29 },
30 setText (text) {
31 this.text = text;
32 }
33 }
34 };
35 </script>
36 <style scoped lang="scss">
37 .el-loading-spinner {
38 margin-top: -100px !important;
39
40 .img {
41 width: 80px;
42 height: 80px;
43 }
44 }
45 </style>
...\ No newline at end of file ...\ No newline at end of file