meixioacomponent 0.1.85 → 0.1.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/meixioacomponent.common.js +65 -52
- package/lib/meixioacomponent.umd.js +65 -52
- package/lib/meixioacomponent.umd.min.js +4 -4
- package/package.json +1 -1
- package/packages/components/base/baseTimeLine/baseTimeLine.vue +62 -0
- package/packages/components/base/baseTimeLine/baseTimeLineLeft.vue +144 -0
- package/packages/components/base/baseTimeLine/baseTimeLineRight.vue +56 -0
- package/packages/components/proPageTable/oa_pro_table.vue +15 -1
package/package.json
CHANGED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="base-time-line-wrap">
|
|
3
|
+
<div
|
|
4
|
+
class="base-time-line-item-wrap"
|
|
5
|
+
:key="index"
|
|
6
|
+
v-for="(item, index) in timeLineSource"
|
|
7
|
+
>
|
|
8
|
+
<div class="base-time-line-left">
|
|
9
|
+
<baseTimeLineLeft :timeLineItem="item"></baseTimeLineLeft>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="base-time-line-right">
|
|
12
|
+
<baseTimeLineRight
|
|
13
|
+
:timeLineItem="item"
|
|
14
|
+
:content="item.content"
|
|
15
|
+
:customComponent="customComponent"
|
|
16
|
+
></baseTimeLineRight>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
import baseTimeLineLeft from "./baseTimeLineLeft.vue";
|
|
24
|
+
import baseTimeLineRight from "./baseTimeLineRight.vue";
|
|
25
|
+
export default {
|
|
26
|
+
name: "baseTimeLine",
|
|
27
|
+
data() {
|
|
28
|
+
return {};
|
|
29
|
+
},
|
|
30
|
+
props: {
|
|
31
|
+
hasTimeWeek: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: true,
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
timeLineSource: {
|
|
37
|
+
type: Array,
|
|
38
|
+
require: true,
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
customComponent: {
|
|
42
|
+
default: false,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
components: {
|
|
46
|
+
baseTimeLineLeft,
|
|
47
|
+
baseTimeLineRight,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<style lang="less" scoped>
|
|
53
|
+
.base-time-line-wrap {
|
|
54
|
+
width: auto;
|
|
55
|
+
height: auto;
|
|
56
|
+
.base-time-line-item-wrap {
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: auto;
|
|
59
|
+
display: flex;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="base-time-line-left-wrap"
|
|
4
|
+
:class="{
|
|
5
|
+
'has-time-Week': hasTimeWeek,
|
|
6
|
+
}"
|
|
7
|
+
>
|
|
8
|
+
<div class="time-week-wrap" v-if="hasTimeWeek">
|
|
9
|
+
<span>{{ hasTimeWeekText }}</span>
|
|
10
|
+
</div>
|
|
11
|
+
<div
|
|
12
|
+
class="base-time-line-point-wrap"
|
|
13
|
+
:class="{ 'line-type-icon': timeLineItem.icon }"
|
|
14
|
+
>
|
|
15
|
+
<div class="base-time-line-point">
|
|
16
|
+
<base-icon
|
|
17
|
+
class="line-icon"
|
|
18
|
+
:size="`s`"
|
|
19
|
+
:plain="true"
|
|
20
|
+
:event="false"
|
|
21
|
+
v-if="timeLineItem.icon"
|
|
22
|
+
:name="timeLineItem.icon"
|
|
23
|
+
></base-icon>
|
|
24
|
+
</div>
|
|
25
|
+
<span class="point-line"></span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
export default {
|
|
32
|
+
data() {
|
|
33
|
+
return {};
|
|
34
|
+
},
|
|
35
|
+
props: {
|
|
36
|
+
timeLineItem: {
|
|
37
|
+
require: true,
|
|
38
|
+
},
|
|
39
|
+
hasTimeWeek: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
default: true,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
computed: {
|
|
45
|
+
hasTimeWeekText() {
|
|
46
|
+
let day = new Date(this.$props.timeLineItem.time);
|
|
47
|
+
let weekText = "";
|
|
48
|
+
let week = day.getDay();
|
|
49
|
+
switch (week) {
|
|
50
|
+
case 0:
|
|
51
|
+
weekText = `星期天`;
|
|
52
|
+
break;
|
|
53
|
+
case 1:
|
|
54
|
+
weekText = `星期一`;
|
|
55
|
+
break;
|
|
56
|
+
case 2:
|
|
57
|
+
weekText = `星期二`;
|
|
58
|
+
break;
|
|
59
|
+
case 3:
|
|
60
|
+
weekText = `星期三`;
|
|
61
|
+
break;
|
|
62
|
+
case 4:
|
|
63
|
+
weekText = `星期四`;
|
|
64
|
+
break;
|
|
65
|
+
case 5:
|
|
66
|
+
weekText = `星期五`;
|
|
67
|
+
break;
|
|
68
|
+
case 6:
|
|
69
|
+
weekText = `星期六`;
|
|
70
|
+
break;
|
|
71
|
+
|
|
72
|
+
default:
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
return `${day.getMonth() + 1}月${day.getDate()}日 ${weekText}`;
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
<style lang="less" scoped>
|
|
82
|
+
.base-time-line-left-wrap {
|
|
83
|
+
width: 50px;
|
|
84
|
+
height: 100%;
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-flow: row nowrap;
|
|
87
|
+
align-items: flex-start;
|
|
88
|
+
justify-content: flex-end;
|
|
89
|
+
.time-week-wrap {
|
|
90
|
+
padding: 0px var(--padding-5);
|
|
91
|
+
span {
|
|
92
|
+
color: var(--font-color-d);
|
|
93
|
+
font-size: var(--font-size-s);
|
|
94
|
+
font-weight: var(--font-weight-kg);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
.base-time-line-point-wrap {
|
|
98
|
+
width: auto;
|
|
99
|
+
height: 100%;
|
|
100
|
+
position: relative;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
flex-flow: column nowrap;
|
|
104
|
+
justify-content: flex-start;
|
|
105
|
+
.base-time-line-point {
|
|
106
|
+
width: 18px;
|
|
107
|
+
height: 18px;
|
|
108
|
+
border-radius: 50%;
|
|
109
|
+
background: white;
|
|
110
|
+
border: 5px solid var(--color-primary);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.point-line {
|
|
114
|
+
width: 1px;
|
|
115
|
+
display: block;
|
|
116
|
+
height: calc(100% - 18px);
|
|
117
|
+
background: var(--color-gray-d);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
.line-type-icon {
|
|
121
|
+
.base-time-line-point {
|
|
122
|
+
width: 20px;
|
|
123
|
+
height: 20px;
|
|
124
|
+
border: 0px;
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
flex-flow: row nowrap;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
background: var(--color-primary);
|
|
130
|
+
.line-icon {
|
|
131
|
+
/deep/ i {
|
|
132
|
+
color: var(--text-white) !important;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
.point-line {
|
|
137
|
+
height: calc(100% - 20px);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
.has-time-Week {
|
|
142
|
+
width: 150px;
|
|
143
|
+
}
|
|
144
|
+
</style>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="base-time-line-right-wrap">
|
|
3
|
+
<span class="time-line-content" v-if="!customComponent">{{ content }}</span>
|
|
4
|
+
<div class="time-line-custom-wrap" ref="timeLineCustomWrap"></div>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
export default {
|
|
10
|
+
data() {
|
|
11
|
+
return {};
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
mounted() {
|
|
15
|
+
if (this.$props.customComponent) {
|
|
16
|
+
this.$nextTick(() => {
|
|
17
|
+
this.init();
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
props: {
|
|
22
|
+
customComponent: {
|
|
23
|
+
default: false,
|
|
24
|
+
},
|
|
25
|
+
content: {
|
|
26
|
+
type: String,
|
|
27
|
+
require: true,
|
|
28
|
+
},
|
|
29
|
+
timeLineItem: {},
|
|
30
|
+
},
|
|
31
|
+
methods: {
|
|
32
|
+
init() {
|
|
33
|
+
const meixioacomponent = require("meixioacomponent").default;
|
|
34
|
+
let component = new meixioacomponent.DynamicMountClass({
|
|
35
|
+
vueComponent: this.$props.customComponent,
|
|
36
|
+
mountedDom: this.$refs.timeLineCustomWrap,
|
|
37
|
+
componentProps: this.$props.timeLineItem,
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
component.init();
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<style lang="less" scoped>
|
|
47
|
+
.base-time-line-right-wrap {
|
|
48
|
+
width: auto;
|
|
49
|
+
height: auto;
|
|
50
|
+
padding: 0px var(--padding-5);
|
|
51
|
+
.time-line-content {
|
|
52
|
+
color: var(--font-color-d);
|
|
53
|
+
size: var(--font-size-base);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
@@ -72,7 +72,11 @@
|
|
|
72
72
|
<span></span>
|
|
73
73
|
</template>
|
|
74
74
|
|
|
75
|
-
<el-table-column
|
|
75
|
+
<el-table-column
|
|
76
|
+
type="selection"
|
|
77
|
+
width="60px"
|
|
78
|
+
:selectable="selected"
|
|
79
|
+
></el-table-column>
|
|
76
80
|
<el-table-column
|
|
77
81
|
:key="index"
|
|
78
82
|
:align="align"
|
|
@@ -346,6 +350,9 @@ export default {
|
|
|
346
350
|
return {
|
|
347
351
|
value: [],
|
|
348
352
|
type: "single",
|
|
353
|
+
canSelected: () => {
|
|
354
|
+
return true;
|
|
355
|
+
},
|
|
349
356
|
};
|
|
350
357
|
},
|
|
351
358
|
},
|
|
@@ -687,6 +694,13 @@ export default {
|
|
|
687
694
|
this.tableCheckboxConfig.value = [];
|
|
688
695
|
this.$refs.elTable?.clearSelection();
|
|
689
696
|
},
|
|
697
|
+
// 判断表格的行能否点击
|
|
698
|
+
selected(row, index) {
|
|
699
|
+
let _tableCheckboxConfig = this.$props.tableCheckboxConfig;
|
|
700
|
+
if (!_tableCheckboxConfig.canSelected) return true;
|
|
701
|
+
|
|
702
|
+
return _tableCheckboxConfig.canSelected(row, index);
|
|
703
|
+
},
|
|
690
704
|
},
|
|
691
705
|
watch: {
|
|
692
706
|
fixedList(newValue, oldValue) {
|