Skip to content

Commit 566298d

Browse files
BingBlogBingBlog
committed
fix fieldDatePicker, fieldInputMultiple, fieldTimePickerMultiple code style
1 parent 4385f45 commit 566298d

6 files changed

Lines changed: 200 additions & 210 deletions

File tree

‎src/fields/fieldDatePicker.vue‎

Lines changed: 52 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,47 @@
2020
import {classPrefix} from '../utils/const';
2121
import {getValue} from '../utils/processValue';
2222
23+
const shortcutsMapList = [
24+
{
25+
type: 'date',
26+
range: false,
27+
list: [0, -1, -2, -7, -30, 1, 2, 7, 30],
28+
},
29+
{
30+
type: 'daterange',
31+
range: true,
32+
list: [-7, -30, -90, -182, -365, 7, 30, 90, 182, 365],
33+
},
34+
{
35+
type: 'datetime',
36+
range: false,
37+
list: [0, -1, -2, -7, -30, 1, 2, 7, 30],
38+
},
39+
{
40+
type: 'ddatetimerangeate',
41+
range: true,
42+
list: [-7, -30, -90, -182, -365, 7, 30, 90, 182, 365],
43+
}
44+
];
45+
46+
const shortcutsLabel = {
47+
'0': '今天',
48+
'-1': '昨天',
49+
'-2': '前天',
50+
'-7': '一周前',
51+
'-30': '一月前',
52+
'-90': '三月前',
53+
'-182': '最近半年',
54+
'-365': '最近一年',
55+
'1': '明天',
56+
'2': '后天',
57+
'7': '一周后',
58+
'30': '一月后',
59+
'90': '三月后',
60+
'182': '半年后',
61+
'365': '一年后'
62+
};
63+
2364
const getDate = function (days = 0) {
2465
const date = new Date();
2566
date.setTime(date.getTime() + 3600 * 1000 * 24 * days);
@@ -44,130 +85,18 @@ export default {
4485
}
4586
},
4687
data() {
47-
let subtypeToShortcuts = {
48-
'date': [
49-
{
50-
text: '今天',
51-
value() {
52-
return getDate(0);
53-
}
54-
},
55-
{
56-
text: '昨天',
57-
value() {
58-
return getDate(-1);
59-
}
60-
},
61-
{
62-
text: '前天',
63-
value() {
64-
return getDate(-2);
65-
}
66-
},
67-
{
68-
text: '7天前',
69-
value() {
70-
return getDate(-7);
71-
}
72-
},
73-
{
74-
text: '30天前',
75-
value() {
76-
return getDate(-30);
77-
}
78-
},
79-
],
80-
'daterange': [
81-
{
82-
text: '最近7天',
83-
value() {
84-
return [getDate(-7), getDate(0)];
85-
}
86-
},
87-
{
88-
text: '最近30天',
89-
value() {
90-
return [getDate(-30), getDate(0)];
91-
}
92-
},
93-
{
94-
text: '最近90天',
88+
let subtypeToShortcuts = {};
89+
shortcutsMapList.forEach(({type, range, list}) => {
90+
subtypeToShortcuts[type] = list.map(item => {
91+
return {
92+
text: shortcutsLabel[item.toString()],
9593
value() {
96-
return [getDate(-90), getDate(0)];
94+
return range ? [getDate(item), getDate(0)] : getDate(item);
9795
}
98-
},
99-
{
100-
text: '最近182天',
101-
value() {
102-
return [getDate(-180), getDate(0)];
103-
}
104-
},
105-
{
106-
text: '最近365天',
107-
value() {
108-
return [getDate(-365), getDate(0)];
109-
}
110-
}
111-
],
112-
'datetime': [
113-
{
114-
text: '昨天',
115-
value() {
116-
return getDate(-1);
117-
}
118-
},
119-
{
120-
text: '前天',
121-
value() {
122-
return getDate(-2);
123-
}
124-
},
125-
{
126-
text: '7天前',
127-
value() {
128-
return getDate(-7);
129-
}
130-
},
131-
{
132-
text: '30天前',
133-
value() {
134-
return getDate(-30);
135-
}
136-
},
137-
],
138-
'datetimerange': [
139-
{
140-
text: '最近7天',
141-
value() {
142-
return [getDate(-7), getDate(0)];
143-
}
144-
},
145-
{
146-
text: '最近30天',
147-
value() {
148-
return [getDate(-30), getDate(0)];
149-
}
150-
},
151-
{
152-
text: '最近90天',
153-
value() {
154-
return [getDate(-90), getDate(0)];
155-
}
156-
},
157-
{
158-
text: '最近182天',
159-
value() {
160-
return [getDate(-182), getDate(0)];
161-
}
162-
},
163-
{
164-
text: '最近365',
165-
value() {
166-
return [getDate(-365), getDate(0)];
167-
}
168-
}
169-
]
170-
};
96+
};
97+
});
98+
});
99+
171100
const disabledDates = this.field.disabledDates || [];
172101
let shortcuts = subtypeToShortcuts[this.field.subtype || 'date'];
173102
if (this.field.options) {
@@ -207,6 +136,7 @@ export default {
207136
}
208137
209138
return !selectedDates.some(item => {
139+
// TODO there should use an dateTime tools solve these transform
210140
if (this.field.format === 'yyyyMMdd') {
211141
initdate = new Date(item.split(/(\d{4})(\d{2})(\d{2})/));
212142
} else {

‎src/fields/fieldInputMultiple.vue‎

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- 按照标签展示多行元素的input组件 -->
22
<template>
3-
<div>
4-
<div class="fg-ivu-inputmultiple-inputwp">
3+
<div :class="classes">
4+
<div :class="inputBoxClasses">
55
<i-input
66
:value="value"
77
:type="field.subtype"
@@ -26,14 +26,14 @@
2626
@on-change="handleChange"
2727
/>
2828
<Button
29-
class="fg-ivu-inputmultiple-addbtn"
29+
:class="addBtnClasses"
3030
icon="md-add"
3131
type="primary"
3232
ghost
3333
@click="handleAdd"
3434
/>
3535
</div>
36-
<div class="member-list">
36+
<div :class="listWrapperClasses">
3737
<Tag
3838
v-for="item in defaultList"
3939
:key="item"
@@ -57,6 +57,7 @@
5757
import {Input, Tag} from 'iview';
5858
import {getValue} from '../utils/processValue';
5959
import schema from 'async-validator';
60+
import {classPrefix} from '../utils/const';
6061
6162
export default {
6263
inject: ['form'],
@@ -83,6 +84,18 @@ export default {
8384
};
8485
},
8586
computed: {
87+
classes() {
88+
return `${classPrefix}-${this.field.type.toLowerCase()}`;
89+
},
90+
inputBoxClasses() {
91+
return `${this.classes}-box`;
92+
},
93+
addBtnClasses() {
94+
return `${this.classes}-add-btn`;
95+
},
96+
listWrapperClasses() {
97+
return `${this.classes}-list-wrapper`;
98+
},
8699
list() {
87100
return getValue({
88101
originModel: this.form.model,
@@ -168,32 +181,3 @@ export default {
168181
}
169182
};
170183
</script>
171-
172-
<style lang="less">
173-
.fg-ivu-inputmultiple {
174-
&-inputwp {
175-
display: flex;
176-
}
177-
&-addbtn {
178-
margin-left: 8px;
179-
}
180-
.member-list {
181-
display: flex;
182-
flex-wrap: wrap;
183-
margin-top: 5px;
184-
line-height: 28px;
185-
.ivu-tag-border {
186-
margin: 10px 10px 0 0;
187-
}
188-
.ivu-tag[disabled] {
189-
cursor: not-allowed;
190-
&, &:hover {
191-
color: #aaa;
192-
}
193-
.ivu-tag-text {
194-
color: #aaa;
195-
}
196-
}
197-
}
198-
}
199-
</style>

0 commit comments

Comments
 (0)