ShortCuts.vue
2.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
<CollapseContainer class="shortcuts" title="快捷入口" :canExpan="false">
<template #action>
<a-button size="small" type="link"> 新建 </a-button>
</template>
<a-row>
<template v-for="item in shortCuts" :key="item.img">
<a-col :span="8" class="p-3 shortcuts__item">
<img :src="item.img" class="mb-2 shortcuts__item-img" />
<br />
<span>{{ item.name }}</span>
</a-col>
</template>
<a-col :span="8" class="p-3 shortcuts__item">
<span class="mb-2 shortcuts__item-all">
<RightOutlined />
</span>
<br />
<span>查看全部</span>
</a-col>
</a-row>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container/index';
import { RightOutlined } from '@ant-design/icons-vue';
import wokbImg1 from '/@/assets/images/dashboard/wokb/attendance.png';
import wokbImg2 from '/@/assets/images/dashboard/wokb/overtime.png';
import wokbImg3 from '/@/assets/images/dashboard/wokb/meal.png';
import wokbImg4 from '/@/assets/images/dashboard/wokb/leave.png';
import wokbImg5 from '/@/assets/images/dashboard/wokb/stamp.png';
import wokbImg6 from '/@/assets/images/dashboard/wokb/travel.png';
import wokbImg7 from '/@/assets/images/dashboard/wokb/performance.png';
import wokbImg8 from '/@/assets/images/dashboard/wokb/approve.png';
const shortCuts = [
{
img: wokbImg1,
name: '考勤记录',
},
{
img: wokbImg2,
name: '加班申请',
},
{
img: wokbImg3,
name: '餐补申请',
},
{
img: wokbImg4,
name: '请假',
},
{
img: wokbImg5,
name: '用章申请',
},
{
img: wokbImg6,
name: '差旅报销',
},
{
img: wokbImg7,
name: '绩效申请',
},
{
img: wokbImg8,
name: '审批',
},
];
export default defineComponent({
components: { [Row.name]: Row, [Col.name]: Col, CollapseContainer, RightOutlined },
setup() {
return { shortCuts };
},
});
</script>
<style lang="less" scoped>
.shortcuts {
&__item {
text-align: center;
&-img {
width: 36px;
}
&-all {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
color: #000;
cursor: pointer;
background: lightgrey;
border-radius: 50%;
}
}
}
</style>