holiday-table.vue
3.95 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<el-card class="setting-card" shadow="never">
<div slot="header" class="card-header">
<div class="card-header__left">
<span>公休时间设置</span>
<el-select v-model="selectedYear" size="mini" class="year-select" placeholder="选择年份">
<el-option v-for="item in yearOptions" :key="item" :label="`${item}年`" :value="item" />
</el-select>
</div>
<el-button type="primary" size="mini" icon="el-icon-plus" @click="addRow">新增日期</el-button>
</div>
<NCC-table :data="filteredRows" border size="mini" height="260">
<el-table-column label="公休日期" min-width="160" align="left">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.holidayDate"
type="date"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 100%"
/>
</template>
</el-table-column>
<el-table-column label="节假日名称" min-width="180" align="left">
<template slot-scope="scope">
<el-input v-model="scope.row.holidayName" placeholder="例如：春节公休" />
</template>
</el-table-column>
<el-table-column label="备注" min-width="220" align="left">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" placeholder="无" />
</template>
</el-table-column>
<el-table-column label="操作" width="110" align="left">
<template slot-scope="scope">
<el-popconfirm
title="确认删除当前配置吗？"
confirm-button-text="确认删除"
cancel-button-text="取消"
@confirm="removeRow(scope.row)"
>
<el-button slot="reference" type="text" class="danger-text">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</NCC-table>
<el-empty v-if="!filteredRows.length" :image-size="56" description="当前年份暂无公休时间配置" />
</el-card>
</template>
<script>
export default {
name: 'HolidayTable',
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
selectedYear: String(new Date().getFullYear())
}
},
computed: {
yearOptions() {
const yearSet = new Set([String(new Date().getFullYear())])
;(this.value || []).forEach(item => {
if (item.holidayDate) {
yearSet.add(String(item.holidayDate).slice(0, 4))
}
})
return Array.from(yearSet).filter(Boolean).sort((a, b) => Number(b) - Number(a))
},
filteredRows() {
return (this.value || []).filter(item => {
if (!item.holidayDate) return this.selectedYear === String(new Date().getFullYear())
return String(item.holidayDate).slice(0, 4) === this.selectedYear
})
}
},
watch: {
yearOptions: {
handler(options) {
if (!options.includes(this.selectedYear)) {
this.selectedYear = options[0] || String(new Date().getFullYear())
}
},
immediate: true
}
},
methods: {
addRow() {
this.$emit('input', [
...this.value,
{
holidayDate: `${this.selectedYear}-01-01`,
holidayName: '',
remark: ''
}
])
},
removeRow(row) {
const list = this.value.slice()
const index = list.indexOf(row)
if (index > -1) {
list.splice(index, 1)
this.$emit('input', list)
}
}
}
}
</script>
<style lang="scss" scoped>
.setting-card {
border-radius: 12px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.card-header__left {
display: flex;
align-items: center;
gap: 10px;
}
.year-select {
width: 110px;
}
.danger-text {
color: #f56c6c;
}
::v-deep .el-card__header {
padding: 12px 16px;
}
::v-deep .el-card__body {
padding: 12px 14px;
}
</style>