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
Inline Side-by-side
Showing 16 changed files with 1630 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 * @1900-2100区间内的公历、农历互转
3 * @charset UTF-8
4 * @Author Jea杨(JJonline@JJonline.Cn)
5 * @Time 2014-7-21
6 * @Time 2016-8-13 Fixed 2033hex、Attribution Annals
7 * @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
8 * @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
9 * @Version 1.0.3
10 * @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
11 * @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
12 */
13 const calendar = {
14
15 /**
16 * 农历1900-2100的润大小信息表
17 * @Array Of Property
18 * @return Hex
19 */
20 lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,//1900-1909
21 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,//1910-1919
22 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,//1920-1929
23 0x06566, 0x0d4a0, 0x0ea50, 0x16a95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,//1930-1939
24 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,//1940-1949
25 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0,//1950-1959
26 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,//1960-1969
27 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6,//1970-1979
28 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,//1980-1989
29 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0,//1990-1999
30 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,//2000-2009
31 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,//2010-2019
32 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,//2020-2029
33 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,//2030-2039
34 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0,//2040-2049
35 /**Add By JJonline@JJonline.Cn**/
36 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0,//2050-2059
37 0x092e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4,//2060-2069
38 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0,//2070-2079
39 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160,//2080-2089
40 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252,//2090-2099
41 0x0d520],//2100
42
43 /**
44 * 公历每个月份的天数普通表
45 * @Array Of Property
46 * @return Number
47 */
48 solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
49
50 /**
51 * 天干地支之天干速查表
52 * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
53 * @return Cn string
54 */
55 Gan: ["\u7532", "\u4e59", "\u4e19", "\u4e01", "\u620a", "\u5df1", "\u5e9a", "\u8f9b", "\u58ec", "\u7678"],
56
57 /**
58 * 天干地支之地支速查表
59 * @Array Of Property
60 * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
61 * @return Cn string
62 */
63 Zhi: ["\u5b50", "\u4e11", "\u5bc5", "\u536f", "\u8fb0", "\u5df3", "\u5348", "\u672a", "\u7533", "\u9149", "\u620c", "\u4ea5"],
64
65 /**
66 * 天干地支之地支速查表<=>生肖
67 * @Array Of Property
68 * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
69 * @return Cn string
70 */
71 Animals: ["\u9f20", "\u725b", "\u864e", "\u5154", "\u9f99", "\u86c7", "\u9a6c", "\u7f8a", "\u7334", "\u9e21", "\u72d7", "\u732a"],
72
73 /**
74 * 阳历节日
75 */
76 festival: {
77 '1-1': { title: '元旦节' },
78 '2-14': { title: '情人节' },
79 '5-1': { title: '劳动节' },
80 '5-4': { title: '青年节' },
81 '6-1': { title: '儿童节' },
82 '9-10': { title: '教师节' },
83 '10-1': { title: '国庆节' },
84 '12-25': { title: '圣诞节' },
85
86 '3-8': { title: '妇女节' },
87 '3-12': { title: '植树节' },
88 '4-1': { title: '愚人节' },
89 '5-12': { title: '护士节' },
90 '7-1': { title: '建党节' },
91 '8-1': { title: '建军节' },
92 '12-24': { title: '平安夜' },
93 },
94
95 /**
96 * 农历节日
97 */
98 lFestival: {
99 '12-30': { title: '除夕' },
100 '1-1': { title: '春节' },
101 '1-15': { title: '元宵节' },
102 '2-2': { title: '龙抬头' },
103 '5-5': { title: '端午节' },
104 '7-7': { title: '七夕节' },
105 '7-15': { title: '中元节' },
106 '8-15': { title: '中秋节' },
107 '9-9': { title: '重阳节' },
108 '10-1': { title: '寒衣节' },
109 '10-15': { title: '下元节' },
110 '12-8': { title: '腊八节' },
111 '12-23': { title: '北方小年' },
112 '12-24': { title: '南方小年' },
113 },
114
115 /**
116 * 返回默认定义的阳历节日
117 */
118 getFestival () {
119 return this.festival
120 },
121
122 /**
123 * 返回默认定义的内容里节日
124 */
125 getLunarFestival () {
126 return this.lFestival
127 },
128
129 /**
130 *
131 * @param param {Object} 按照festival的格式输入数据，设置阳历节日
132 */
133 setFestival (param = {}) {
134 this.festival = param
135 },
136
137 /**
138 *
139 * @param param {Object} 按照lFestival的格式输入数据，设置农历节日
140 */
141 setLunarFestival (param = {}) {
142 this.lFestival = param
143 },
144
145 /**
146 * 24节气速查表
147 * @Array Of Property
148 * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
149 * @return Cn string
150 */
151 solarTerm: ["\u5c0f\u5bd2", "\u5927\u5bd2", "\u7acb\u6625", "\u96e8\u6c34", "\u60ca\u86f0", "\u6625\u5206", "\u6e05\u660e", "\u8c37\u96e8", "\u7acb\u590f", "\u5c0f\u6ee1", "\u8292\u79cd", "\u590f\u81f3", "\u5c0f\u6691", "\u5927\u6691", "\u7acb\u79cb", "\u5904\u6691", "\u767d\u9732", "\u79cb\u5206", "\u5bd2\u9732", "\u971c\u964d", "\u7acb\u51ac", "\u5c0f\u96ea", "\u5927\u96ea", "\u51ac\u81f3"],
152
153 /**
154 * 1900-2100各年的24节气日期速查表
155 * @Array Of Property
156 * @return 0x string For splice
157 */
158 sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
159 '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
160 '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
161 '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
162 'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
163 '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
164 '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
165 '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
166 '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
167 '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
168 '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
169 '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
170 '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
171 '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
172 '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
173 '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
174 '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
175 '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
176 '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
177 '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
178 '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
179 '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
180 '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
181 '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
182 '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
183 '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
184 '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
185 '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
186 '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
187 '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
188 '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
189 '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
190 '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
191 '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
192 '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
193 '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
194 '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
195 '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
196 '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
197 '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
198 '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
199 '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
200 '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
201 '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
202 '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
203 '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
204 '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
205 '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
206 '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
207 '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
208 '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
209 '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
210 '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
211 '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
212 '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
213 '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
214 '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
215 '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
216 '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
217 '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
218 '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
219 '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
220 '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
221 '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
222 '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
223 '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
224 '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
225
226 /**
227 * 数字转中文速查表
228 * @Array Of Property
229 * @trans ['日','一','二','三','四','五','六','七','八','九','十']
230 * @return Cn string
231 */
232 nStr1: ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341"],
233
234 /**
235 * 日期转农历称呼速查表
236 * @Array Of Property
237 * @trans ['初','十','廿','卅']
238 * @return Cn string
239 */
240 nStr2: ["\u521d", "\u5341", "\u5eff", "\u5345"],
241
242 /**
243 * 月份转农历称呼速查表
244 * @Array Of Property
245 * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
246 * @return Cn string
247 */
248 nStr3: ["\u6b63", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341", "\u51ac", "\u814a"],
249
250 /**
251 * 返回农历y年一整年的总天数
252 * @param y lunar Year
253 * @return Number
254 * @eg:var count = calendar.lYearDays(1987) ;//count=387
255 */
256 lYearDays: function (y) {
257 let i, sum = 348;
258 for (i = 0x8000; i > 0x8; i >>= 1) {
259 sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0;
260 }
261 return (sum + this.leapDays(y));
262 },
263
264 /**
265 * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
266 * @param y lunar Year
267 * @return Number (0-12)
268 * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
269 */
270 leapMonth: function (y) { //闰字编码 \u95f0
271 return (this.lunarInfo[y - 1900] & 0xf);
272 },
273
274 /**
275 * 返回农历y年闰月的天数 若该年没有闰月则返回0
276 * @param y lunar Year
277 * @return Number (0、29、30)
278 * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
279 */
280 leapDays: function (y) {
281 if (this.leapMonth(y)) {
282 return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
283 }
284 return (0);
285 },
286
287 /**
288 * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
289 * @param y lunar Year
290 * @param m lunar Month
291 * @return Number (-1、29、30)
292 * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
293 */
294 monthDays: function (y, m) {
295 if (m > 12 || m < 1) {
296 return -1
297 }//月份参数从1至12，参数错误返回-1
298 return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
299 },
300
301 /**
302 * 返回公历(!)y年m月的天数
303 * @param y solar Year
304 * @param m solar Month
305 * @return Number (-1、28、29、30、31)
306 * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
307 */
308 solarDays: function (y, m) {
309 if (m > 12 || m < 1) {
310 return -1
311 } //若参数错误 返回-1
312 const ms = m - 1;
313 if (ms === 1) { //2月份的闰平规律测算后确认返回28或29
314 return (((y % 4 === 0) && (y % 100 !== 0) || (y % 400 === 0)) ? 29 : 28);
315 } else {
316 return (this.solarMonth[ms]);
317 }
318 },
319
320 /**
321 * 农历年份转换为干支纪年
322 * @param lYear 农历年的年份数
323 * @return Cn string
324 */
325 toGanZhiYear: function (lYear) {
326 var ganKey = (lYear - 3) % 10;
327 var zhiKey = (lYear - 3) % 12;
328 if (ganKey === 0) ganKey = 10;//如果余数为0则为最后一个天干
329 if (zhiKey === 0) zhiKey = 12;//如果余数为0则为最后一个地支
330 return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1];
331
332 },
333
334 /**
335 * 公历月、日判断所属星座
336 * @param cMonth [description]
337 * @param cDay [description]
338 * @return Cn string
339 */
340 toAstro: function (cMonth, cDay) {
341 const s = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
342 const arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];
343 return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + "\u5ea7";//座
344 },
345
346 /**
347 * 传入offset偏移量返回干支
348 * @param offset 相对甲子的偏移量
349 * @return Cn string
350 */
351 toGanZhi: function (offset) {
352 return this.Gan[offset % 10] + this.Zhi[offset % 12];
353 },
354
355 /**
356 * 传入公历(!)y年获得该年第n个节气的公历日期
357 * @param y y公历年(1900-2100)
358 * @param n n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
359 * @return day Number
360 * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
361 */
362 getTerm: function (y, n) {
363 if (y < 1900 || y > 2100) {
364 return -1;
365 }
366 if (n < 1 || n > 24) {
367 return -1;
368 }
369 const _table = this.sTermInfo[y - 1900];
370 const _info = [
371 parseInt('0x' + _table.substr(0, 5)).toString(),
372 parseInt('0x' + _table.substr(5, 5)).toString(),
373 parseInt('0x' + _table.substr(10, 5)).toString(),
374 parseInt('0x' + _table.substr(15, 5)).toString(),
375 parseInt('0x' + _table.substr(20, 5)).toString(),
376 parseInt('0x' + _table.substr(25, 5)).toString()
377 ];
378 const _calcDay = [
379 _info[0].substr(0, 1),
380 _info[0].substr(1, 2),
381 _info[0].substr(3, 1),
382 _info[0].substr(4, 2),
383
384 _info[1].substr(0, 1),
385 _info[1].substr(1, 2),
386 _info[1].substr(3, 1),
387 _info[1].substr(4, 2),
388
389 _info[2].substr(0, 1),
390 _info[2].substr(1, 2),
391 _info[2].substr(3, 1),
392 _info[2].substr(4, 2),
393
394 _info[3].substr(0, 1),
395 _info[3].substr(1, 2),
396 _info[3].substr(3, 1),
397 _info[3].substr(4, 2),
398
399 _info[4].substr(0, 1),
400 _info[4].substr(1, 2),
401 _info[4].substr(3, 1),
402 _info[4].substr(4, 2),
403
404 _info[5].substr(0, 1),
405 _info[5].substr(1, 2),
406 _info[5].substr(3, 1),
407 _info[5].substr(4, 2),
408 ];
409 return parseInt(_calcDay[n - 1]);
410 },
411
412 /**
413 * 传入农历数字月份返回汉语通俗表示法
414 * @param m lunar month
415 * @return Cn string
416 * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
417 */
418 toChinaMonth: function (m) { // 月 => \u6708
419 if (m > 12 || m < 1) {
420 return -1
421 } //若参数错误 返回-1
422 let s = this.nStr3[m - 1];
423 s += "\u6708";//加上月字
424 return s;
425 },
426
427 /**
428 * 传入农历日期数字返回汉字表示法
429 * @param d lunar day
430 * @return Cn string
431 * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
432 */
433 toChinaDay: function (d) { //日 => \u65e5
434 let s;
435 switch (d) {
436 case 10:
437 s = '\u521d\u5341';
438 break;
439 case 20:
440 s = '\u4e8c\u5341';
441 break;
442 case 30:
443 s = '\u4e09\u5341';
444 break;
445 default:
446 s = this.nStr2[Math.floor(d / 10)];
447 s += this.nStr1[d % 10];
448 }
449 return (s);
450 },
451
452 /**
453 * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
454 * @param y year
455 * @return Cn string
456 * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
457 */
458 getAnimal: function (y) {
459 return this.Animals[(y - 4) % 12]
460 },
461
462 /**
463 * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
464 * !important! 公历参数区间1900.1.31~2100.12.31
465 * @param yPara solar year
466 * @param mPara solar month
467 * @param dPara solar day
468 * @return JSON object
469 * @eg:console.log(calendar.solar2lunar(1987,11,01));
470 */
471 solar2lunar: function (yPara, mPara, dPara) {
472 let y = parseInt(yPara);
473 let m = parseInt(mPara);
474 let d = parseInt(dPara);
475 //年份限定、上限
476 if (y < 1900 || y > 2100) {
477 return -1;// undefined转换为数字变为NaN
478 }
479 //公历传参最下限
480 if (y === 1900 && m === 1 && d < 31) {
481 return -1;
482 }
483
484 //未传参 获得当天
485 let objDate;
486 if (!y) {
487 objDate = new Date();
488 } else {
489 objDate = new Date(y, parseInt(m) - 1, d);
490 }
491 let i, leap = 0, temp = 0;
492 //修正ymd参数
493 y = objDate.getFullYear();
494 m = objDate.getMonth() + 1;
495 d = objDate.getDate();
496 let offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000;
497 for (i = 1900; i < 2101 && offset > 0; i++) {
498 temp = this.lYearDays(i);
499 offset -= temp;
500 }
501 if (offset < 0) {
502 offset += temp;
503 i--;
504 }
505
506 //是否今天
507 let isTodayObj = new Date(),
508 isToday = false;
509 if (isTodayObj.getFullYear() === y && isTodayObj.getMonth() + 1 === m && isTodayObj.getDate() === d) {
510 isToday = true;
511 }
512 //星期几
513 let nWeek = objDate.getDay(),
514 cWeek = this.nStr1[nWeek];
515 //数字表示周几顺应天朝周一开始的惯例
516 if (nWeek === 0) {
517 nWeek = 7;
518 }
519 //农历年
520 const year = i;
521 leap = this.leapMonth(i); //闰哪个月
522 let isLeap = false;
523
524 //效验闰月
525 for (i = 1; i < 13 && offset > 0; i++) {
526 //闰月
527 if (leap > 0 && i === (leap + 1) && isLeap === false) {
528 --i;
529 isLeap = true;
530 temp = this.leapDays(year); //计算农历闰月天数
531 } else {
532 temp = this.monthDays(year, i);//计算农历普通月天数
533 }
534 //解除闰月
535 if (isLeap === true && i === (leap + 1)) {
536 isLeap = false;
537 }
538 offset -= temp;
539 }
540 // 闰月导致数组下标重叠取反
541 if (offset === 0 && leap > 0 && i === leap + 1) {
542 if (isLeap) {
543 isLeap = false;
544 } else {
545 isLeap = true;
546 --i;
547 }
548 }
549 if (offset < 0) {
550 offset += temp;
551 --i;
552 }
553 //农历月
554 const month = i;
555 //农历日
556 const day = offset + 1;
557 //天干地支处理
558 const sm = m - 1;
559 const gzY = this.toGanZhiYear(year);
560
561 // 当月的两个节气
562 // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
563 const firstNode = this.getTerm(y, (m * 2 - 1));//返回当月「节」为几日开始
564 const secondNode = this.getTerm(y, (m * 2));//返回当月「节」为几日开始
565
566 // 依据12节气修正干支月
567 let gzM = this.toGanZhi((y - 1900) * 12 + m + 11);
568 if (d >= firstNode) {
569 gzM = this.toGanZhi((y - 1900) * 12 + m + 12);
570 }
571
572 //传入的日期的节气与否
573 let isTerm = false;
574 let Term = null;
575 if (firstNode === d) {
576 isTerm = true;
577 Term = this.solarTerm[m * 2 - 2];
578 }
579 if (secondNode === d) {
580 isTerm = true;
581 Term = this.solarTerm[m * 2 - 1];
582 }
583 //日柱 当月一日与 1900/1/1 相差天数
584 const dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;
585 const gzD = this.toGanZhi(dayCyclical + d - 1);
586 //该日期所属的星座
587 const astro = this.toAstro(m, d);
588
589 const solarDate = y + '-' + m + '-' + d;
590 const lunarDate = year + '-' + month + '-' + day;
591
592 const festival = this.festival;
593 const lFestival = this.lFestival;
594
595 const festivalDate = m + '-' + d;
596 const lunarFestivalDate = month + '-' + day;
597
598 return {
599 date: solarDate,
600 lunarDate: lunarDate,
601 festival: festival[festivalDate] ? festival[festivalDate].title : null,
602 lunarFestival: lFestival[lunarFestivalDate] ? lFestival[lunarFestivalDate].title : null,
603 'lYear': year,
604 'lMonth': month,
605 'lDay': day,
606 'Animal': this.getAnimal(year),
607 'IMonthCn': (isLeap ? "\u95f0" : '') + this.toChinaMonth(month),
608 'IDayCn': this.toChinaDay(day),
609 'cYear': y,
610 'cMonth': m,
611 'cDay': d,
612 'gzYear': gzY,
613 'gzMonth': gzM,
614 'gzDay': gzD,
615 'isToday': isToday,
616 'isLeap': isLeap,
617 'nWeek': nWeek,
618 'ncWeek': "\u661f\u671f" + cWeek,
619 'isTerm': isTerm,
620 'Term': Term,
621 'astro': astro
622 };
623 },
624
625 /**
626 * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
627 * !important! 参数区间1900.1.31~2100.12.1
628 * @param y lunar year
629 * @param m lunar month
630 * @param d lunar day
631 * @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
632 * @return JSON object
633 * @eg:console.log(calendar.lunar2solar(1987,9,10));
634 */
635 lunar2solar: function (y, m, d, isLeapMonth) {
636 y = parseInt(y)
637 m = parseInt(m)
638 d = parseInt(d)
639 isLeapMonth = !!isLeapMonth;
640 const leapOffset = 0;
641 const leapMonth = this.leapMonth(y);
642 const leapDay = this.leapDays(y);
643 if (isLeapMonth && (leapMonth !== m)) {
644 return -1;
645 }//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
646 if (y === 2100 && m === 12 && d > 1 || y === 1900 && m === 1 && d < 31) {
647 return -1;
648 }//超出了最大极限值
649 const day = this.monthDays(y, m);
650 let _day = day;
651 //bugFix 2016-9-25
652 //if month is leap, _day use leapDays method
653 if (isLeapMonth) {
654 _day = this.leapDays(y, m);
655 }
656 if (y < 1900 || y > 2100 || d > _day) {
657 return -1;
658 }//参数合法性效验
659
660 //计算农历的时间差
661 let offset = 0;
662 let i;
663 for (i = 1900; i < y; i++) {
664 offset += this.lYearDays(i);
665 }
666 let leap = 0, isAdd = false;
667 for (i = 1; i < m; i++) {
668 leap = this.leapMonth(y);
669 if (!isAdd) {//处理闰月
670 if (leap <= i && leap > 0) {
671 offset += this.leapDays(y);
672 isAdd = true;
673 }
674 }
675 offset += this.monthDays(y, i);
676 }
677 //转换闰月农历 需补充该年闰月的前一个月的时差
678 if (isLeapMonth) {
679 offset += day;
680 }
681 //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
682 const strap = Date.UTC(1900, 1, 30, 0, 0, 0);
683 const calObj = new Date((offset + d - 31) * 86400000 + strap);
684 const cY = calObj.getUTCFullYear();
685 const cM = calObj.getUTCMonth() + 1;
686 const cD = calObj.getUTCDate();
687
688 return this.solar2lunar(cY, cM, cD);
689 }
690 };
691
692 export default calendar
...\ No newline at end of file ...\ No newline at end of file
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
......