Skip to content

bdc / bdcdj-web

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

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

2 parents c09117fc e377d71b
Expand all
Inline Side-by-side
Showing 16 changed files with 938 additions and 3 deletions
1 import dialogBox from '@/components/DialogBox/dialogBox.vue' 1 import dialogBox from '@/components/DialogBox/dialogBox.vue'
2 import lbTable from '@/components/lbTable/lb-table.vue' 2 import LbTable from '@/components/LbTable/lb-table.vue'
3 import Theme from '@/components/Theme/theme.vue' 3 import Theme from '@/components/Theme/theme.vue'
4 import Popup from '@/components/Popup/index' 4 import Popup from '@/components/Popup/index'
5 export default { 5 export default {
6 install: (Vue) => { 6 install: (Vue) => {
7 Vue.component('dialogBox', dialogBox); 7 Vue.component('dialogBox', dialogBox);
8 Vue.component('lbTable', lbTable); 8 Vue.component('lbTable', LbTable);
9 Vue.component('Theme', Theme); 9 Vue.component('Theme', Theme);
10 Vue.prototype.$popup = Popup.install 10 Vue.prototype.$popup = Popup.install
11 } 11 }
......
1
2 <template>
3 <el-calendar v-model="date">
4 <template slot="dateCell" slot-scope="{date, data}">
5 <div :class="{ selected: isSelected(date, data) }">
6 <div class="solar">{{ data.day.split('-')[2] }}</div>
7 <div class="lunar" :class="{ festival: isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
8 </div>
9 </template>
10 </el-calendar>
11 </template>
12
13 <script>
14 import calendar from './calendar'
15 export default {
16 name: 'calendar',
17 data () {
18 return {
19 date: new Date(),
20 // 根据selectedDates设置选中日期
21 selectedDates: []
22 }
23 },
24 methods: {
25 // 是否选中日期
26 isSelected: function (slotDate, slotData) {
27 return this.selectedDates.includes(slotData.day)
28 },
29 // 是否节假日
30 isFestival (slotDate, slotData) {
31 let solarDayArr = slotData.day.split('-');
32 let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
33
34 // 公历节日\农历节日\农历节气
35 let festAndTerm = [];
36 festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
37 festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
38 festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
39 festAndTerm = festAndTerm.join('')
40
41 return festAndTerm != ''
42 },
43 // 公历转农历
44 solarToLunar (slotDate, slotData) {
45 let solarDayArr = slotData.day.split('-');
46 let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
47
48 // 农历日期
49 let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
50
51 // 公历节日\农历节日\农历节气
52 let festAndTerm = [];
53 festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
54 festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
55 festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
56 festAndTerm = festAndTerm.join('')
57
58 return festAndTerm == '' ? lunarMD : festAndTerm
59 }
60 }
61 }
62 </script>
63
64 <style scoped>
65 /**隐藏上一月、本月、下一月*/
66 .el-calendar__button-group {
67 display: none;
68 }
69
70 /deep/.el-calendar__body {
71 padding: 12px !important;
72 }
73
74 /deep/.el-calendar-table .el-calendar-day {
75 height: auto;
76 padding: 5px;
77 }
78
79 /**月份居中*/
80 .el-calendar__title {
81 width: 100%;
82 text-align: center;
83 }
84
85 /**日期div的样式*/
86 .el-calendar-table tr td:first-child {
87 border-left: 0px;
88 }
89
90 .el-calendar-table td {
91 min-height: 110px;
92 min-width: 110px;
93 border-right: 0px;
94 }
95
96 .el-calendar-table td.is-selected {
97 background-color: white;
98 }
99
100 .el-calendar-table .el-calendar-day {
101 padding: 0px;
102 text-align: center;
103 }
104
105 .el-calendar-table .el-calendar-day>div {
106 text-align: center
107 }
108
109 /**日期div的样式-公历*/
110 .el-calendar-table .el-calendar-day>div .solar {
111 text-align: center
112 }
113
114 /**日期div的样式-农历*/
115 .el-calendar-table .el-calendar-day>div .lunar {
116 padding-top: 5px;
117 font-size: 12px;
118 text-align: center
119 }
120
121 /**日期div的样式-选中*/
122 .el-calendar-table .el-calendar-day>div.selected {
123 background-color: #fef2f2;
124 border: 3px solid #fb0;
125 border-radius: 20px;
126 text-align: center
127 }
128
129 /**本月周末设置为红色*/
130 .el-calendar-table .current:nth-last-child(-n+2) .solar {
131 color: red;
132 }
133
134 /**本月农历设置为灰色*/
135 .el-calendar-table .current .lunar {
136 color: #606266;
137 font-size: 12px;
138 }
139
140 /**本月农历节日设置为红色*/
141 .el-calendar-table .current .lunar.festival {
142 color: red;
143 }
144
145 .el-calendar-table td {
146 border-right: none !important;
147 }
148
149 /**禁用点击效果*/
150 /*.el-calendar-table td {*/
151 /*pointer-events: none;*/
152 /*}*/
153 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .dialogBox {
2 border-radius: 8px;
3 overflow: hidden;
4 background: #FFFFFF;
5 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
6
7 .dialog_title {
8 display: flex;
9 position: relative;
10 top: -2px;
11
12 b {
13 @include flex-center;
14 flex: 1;
15 width: 100%;
16 }
17 }
18
19 .dialog_full {
20 position: absolute;
21 top: 0;
22 right: 30px;
23 }
24
25 .el-dialog__body {
26 max-height: 88vh;
27 overflow-x: hidden;
28 overflow-y: hidden;
29 }
30
31 .dialog_footer {
32 margin-top: 8px;
33 @include flex-center;
34 }
35
36
37 }
38
39 .dialog_title {
40 @include flex;
41 justify-content: space-between;
42 width: 100%;
43 }
44
45 .el-dialog__header {
46 margin-bottom: 10px;
47 color: #4A4A4A;
48 background-color: #FCFDFD;
49 border-bottom: 1px solid #E4EBF4;
50 }
51
52 .el-dialog__body {
53 padding-top: 10px;
54 padding-bottom: 0;
55 }
56
57 .el-dialog__headerbtn .el-dialog__close {
58 color: #6B7A99 !important;
59 position: relative;
60 top: -2px;
61 }
62
63
64 .el-form-item {
65 @include flex;
66 width: 100%;
67 }
68
69 .el-dialog__wrapper {
70 width: 100%;
71 height: 100%;
72 overflow: hidden;
73 }
74
75 .contentCenter {
76 position: absolute;
77 top: 50%;
78 left: 50%;
79 transform: translate(calc(-50% + 85px), -50%);
80 }
81
82 .mainCenter {
83 position: absolute;
84 top: 50%;
85 left: 50%;
86 transform: translate(-50%, -50%);
87 }
...\ 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 ? scrollerHeight : 'auto' }">
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 },
74 data () {
75 return {
76 key: 0,
77 dialogVisible: false,
78 fullscreen: false,
79 scrollerHeight: false,
80 }
81 },
82 watch: {
83 value (val) {
84 this.dialogVisible = val
85 }
86 },
87 methods: {
88 handleFullscreen (val) {
89 this.fullscreen = !this.fullscreen
90 let height = document.getElementById('dialogBox').clientHeight
91 if (!this.fullscreen) {
92 this.scrollerHeight = false
93 } else {
94 this.scrollerHeight = (window.innerHeight - 180) + 'px'
95 }
96 },
97 submitForm () {
98 if (this.isButton) {
99 this.$emit('submitForm');
100 }
101 },
102 closeDialog () {
103 this.key++
104 this.$emit('input', false)
105 this.$emit('closeDialog')
106 }
107 },
108 }
109 </script>
110 <style rel="stylesheet/scss" lang="scss" >
111 @import "~@/styles/mixin.scss";
112 @import "./dialogBox.scss";
113 </style>
114 <style rel="stylesheet/scss" scoped lang="scss" >
115 /deep/.is-fullscreen {
116 position: absolute;
117 top: 50% !important;
118 left: 50% !important;
119 transform: translate(-50%, -50%) !important;
120 }
121 </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"
13 v-on="$listeners"
14 :prop="column.prop"
15 :label="column.label"
16 :type="column.type"
17 :index="column.index"
18 :column-key="column.columnKey"
19 :width="column.width"
20 :min-width="column.minWidth"
21 :fixed="column.fixed"
22 :scoped-slot="column.renderHeader"
23 :sortable="column.sortable || false"
24 :sort-method="column.sortMethod"
25 :sort-by="column.sortBy"
26 :sort-orders="column.sortOrders"
27 :resizable="column.resizable || true"
28 :formatter="column.formatter"
29 :show-overflow-tooltip="column.showOverflowTooltip || false"
30 :align="column.align || align || 'center'"
31 :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
32 :class-name="column.className"
33 :label-class-name="column.labelClassName"
34 :selectable="column.selectable"
35 :reserve-selection="column.reserveSelection || false"
36 :filters="column.filters"
37 :filter-placement="column.filterPlacement"
38 :filter-multiple="column.filterMultiple"
39 :filter-method="column.filterMethod"
40 :filtered-value="column.filteredValue">
41 <template slot="header"
42 slot-scope="scope">
43 <lb-render v-if="column.renderHeader"
44 :scope="scope"
45 :render="column.renderHeader">
46 </lb-render>
47 <span v-else>{{ scope.column.label }}</span>
48 </template>
49
50 <template slot-scope="scope">
51 <lb-render :scope="scope"
52 :render="column.render">
53 </lb-render>
54 </template>
55
56 <template v-if="column.children">
57 <lb-column v-for="(col, index) in column.children"
58 :key="index"
59 :column="col">
60 </lb-column>
61 </template>
62 </el-table-column>
63 </template>
64
65 <script>
66 import LbRender from './lb-render'
67 import forced from './forced.js'
68 export default {
69 name: 'LbColumn',
70 props: {
71 column: Object,
72 headerAlign: String,
73 align: String
74 },
75 components: {
76 LbRender
77 },
78 methods: {
79 setColumn () {
80 if (this.column.type) {
81 this.column.renderHeader = forced[this.column.type].renderHeader
82 this.column.render = this.column.render || forced[this.column.type].renderCell
83 }
84 if (this.column.formatter) {
85 this.column.render = (h, scope) => {
86 return <span>{ scope.column.formatter(scope.row, scope.column, scope.row, scope.$index) }</span>
87 }
88 }
89 if (!this.column.render) {
90 this.column.render = (h, scope) => {
91 return <span>{ scope.row[scope.column.property] }</span>
92 }
93 }
94 }
95 },
96 watch: {
97 column: {
98 handler () {
99 this.setColumn()
100 },
101 immediate: true
102 }
103 }
104 }
105 </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 /*
2 * FileName: lb-table.vue
3 * Remark: element table
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:55:27 am
7 * Last Modified: Tuesday, 19th March 2019 9:55:34 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <div :class="['lb-table', customClass]">
13 <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
14 :border='border' :row-class-name="tableRowClassName" :show-header='showHeader'
15 :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
16 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
17 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
18 </lb-column>
19 </el-table>
20
21 <el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
22 :row-class-name="tableRowClassName" :show-header='showHeader'
23 :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
24 v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
25 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
26 </lb-column>
27 </el-table>
28
29 <br>
30 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
31 :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
32 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
33 </el-pagination>
34 </div>
35 </template>
36
37 <script>
38 import LbColumn from './lb-column'
39 export default {
40 props: {
41 column: Array,
42 data: Array,
43 spanMethod: Function,
44 pagination: {
45 type: Boolean,
46 default: true,
47 },
48 border: {
49 type: Boolean,
50 default: true,
51 },
52 showHeader: {
53 type: Boolean,
54 default: true,
55 },
56 paginationTop: {
57 type: String,
58 default: '0',
59 },
60 heightNum: {
61 type: Number,
62 default: 265,
63 },
64 maxHeight: {
65 type: Number,
66 default: 500
67 },
68 heightNumSetting: {
69 type: Boolean,
70 default: false,
71 },
72 customClass: {
73 type: String,
74 default: '',
75 },
76 paginationAlign: {
77 type: String,
78 default: 'left',
79 },
80 merge: Array,
81 },
82 components: {
83 LbColumn,
84 },
85 data () {
86 return {
87 tableHeight: '',
88 mergeLine: {},
89 mergeIndex: {},
90 }
91 },
92 created () {
93 this.getMergeArr(this.data, this.merge)
94 this.getHeight()
95 },
96 computed: {
97 dataLength () {
98 return [] || this.data.length
99 },
100 },
101 methods: {
102 tableRowClassName ({ row, rowIndex }) {
103 if (rowIndex % 2 === 1) {
104 return 'interlaced';
105 }
106 },
107 getHeight () {
108 if (!this.heightNumSetting) {
109 this.tableHeight = window.innerHeight - this.heightNum
110 }
111 },
112 clearSelection () {
113 this.$refs.elTable.clearSelection()
114 },
115 toggleRowSelection (row, selected) {
116 this.$refs.elTable.toggleRowSelection(row, selected)
117 },
118 toggleAllSelection () {
119 this.$refs.elTable.toggleAllSelection()
120 },
121 toggleRowExpansion (row, expanded) {
122 this.$refs.elTable.toggleRowExpansion(row, expanded)
123 },
124 setCurrentRow (row) {
125 this.$refs.elTable.setCurrentRow(row)
126 },
127 clearSort () {
128 this.$refs.elTable.clearSort()
129 },
130 clearFilter (columnKey) {
131 this.$refs.elTable.clearFilter(columnKey)
132 },
133 doLayout () {
134 this.$refs.elTable.doLayout()
135 },
136 sort (prop, order) {
137 this.$refs.elTable.sort(prop, order)
138 },
139 paginationCurrentChange (val) {
140 this.$emit('p-current-change', val)
141 },
142 getMergeArr (tableData, merge) {
143 if (!merge) return
144 this.mergeLine = {}
145 this.mergeIndex = {}
146 merge.forEach((item, k) => {
147 tableData.forEach((data, i) => {
148 if (i === 0) {
149 this.mergeIndex[item] = this.mergeIndex[item] || []
150 this.mergeIndex[item].push(1)
151 this.mergeLine[item] = 0
152 } else {
153 if (data[item] === tableData[i - 1][item]) {
154 this.mergeIndex[item][this.mergeLine[item]] += 1
155 this.mergeIndex[item].push(0)
156 } else {
157 this.mergeIndex[item].push(1)
158 this.mergeLine[item] = i
159 }
160 }
161 })
162 })
163 },
164 mergeMethod ({ row, column, rowIndex, columnIndex }) {
165 const index = this.merge.indexOf(column.property)
166 if (index > -1) {
167 const _row = this.mergeIndex[this.merge[index]][rowIndex]
168 const _col = _row > 0 ? 1 : 0
169 return {
170 rowspan: _row,
171 colspan: _col,
172 }
173 }
174 },
175 },
176 watch: {
177 merge () {
178 this.getMergeArr(this.data, this.merge)
179 },
180 dataLength () {
181 this.getMergeArr(this.data, this.merge)
182 }
183 },
184 }
185 </script>
186 <style rel="stylesheet/scss" scoped lang="scss">
187 .lb-table {
188 margin-top: 1px;
189
190 .interlaced {
191 background: #fafcff;
192 border: 1px solid #ebf2fa;
193 }
194 }
195
196 /deep/.el-table .cell {
197 padding-left: 3px;
198 padding-right: 3px;
199 }
200 </style>
1 ## 这是对于element-table 进行的二次封装
2
3 ### 文档地址
4
5 <!-- table 已经全局注册不需要每个页面单独注册 -->
6
7 [Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
1 import service from './src/index';
2
3 export default {
4 install (Vue) {
5 Vue.prototype.$loading = service;
6 },
7 service
8 };
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 <!-- <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
7 <circle class="path" cx="50" cy="50" r="20" fill="none" />
8 </svg>
9 <i v-else :class="spinner"></i> -->
10 <img class="img" src="../../../image/progress.gif" alt="">
11 <p v-if="text" class="el-loading-text">{{ text }}</p>
12 </div>
13 </div>
14 </transition>
15 </template>
16
17 <script>
18 export default {
19 data () {
20 return {
21 text: null,
22 spinner: null,
23 background: null,
24 fullscreen: true,
25 visible: false,
26 customClass: ''
27 };
28 },
29
30 methods: {
31 handleAfterLeave () {
32 this.$emit('after-leave');
33 },
34 setText (text) {
35 this.text = text;
36 }
37 }
38 };
39 </script>
40 <style scoped lang="scss">
41 .el-loading-spinner {
42 margin-top: -100px !important;
43
44 .img {
45 width: 80px;
46 height: 80px;
47 }
48 }
49 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -24,6 +24,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -24,6 +24,7 @@ router.beforeEach(async (to, from, next) => {
24 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData) 24 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
25 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }]) 25 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
26 const routeTo = Cookies.get('routerTo') 26 const routeTo = Cookies.get('routerTo')
27 console.log(routeTo)
27 if (routeTo && routeTo !== '/') { 28 if (routeTo && routeTo !== '/') {
28 next({ ...to, replace: true }) 29 next({ ...to, replace: true })
29 } else { 30 } else {
......
1 import Loading from '@/components/loading/index.js'; 1 import Loading from '@/components/Loading/index.js';
2 // 定义 loading 2 // 定义 loading
3 let loading 3 let loading
4 4
......