需求分析
选择本年某月某天(可多选不同月份,不同日期)
实现效果
HTML代码
<Modal
v-model="showYearTaskTime"
:mask-closable="false"
title="生成任务日期"
@on-ok="exportYearData"
width="900"
@on-cancel="cancelAddPeopleCard"
>
<div class="selectTitle">选择日期(月)</div>
<Tabs v-model="tabName" @on-click="changeNum">
<TabPane
v-for="(item, index) in tabDatas"
:label="item.label"
:name="item.name"
:key="index"
>
<div class="addPeopleCardStyle">
<div
@click="chooseTemplate(index, item)"
class="onePeopleCard"
v-for="(item, index) in yearMonthTaskTime"
:key="index"
:class="{ clickOnePeopleCard: selectedYear.indexOf(item.value) != -1 }"
>
{{ item.label }}
</div>
</div>
</TabPane>
</Tabs>
</Modal>
JS代码
showYearTaskTime: false,
tabDatas: [
{
label: '1月',
name: '01',
},
{
label: '2月',
name: '02',
},
{
label: '3月',
name: '003',
},
{
label: '4月',
name: '04',
},
{
label: '5月',
name: '05',
},
{
label: '6月',
name: '06',
},
{
label: '7月',
name: '07',
},
{
label: '8月',
name: '08',
},
{
label: '9月',
name: '09',
},
{
label: '10月',
name: '10',
},
{
label: '11月',
name: '11',
},
{
label: '12月',
name: '12',
},
],
tabName: '01',
yearMonthTaskTime: [],
setYearList: [],
yearTaskDate: [],
selectedYear: [],
//弹框
getYearTaskTime() {
this.showYearTaskTime = true
this.selectedYear = []
this.form.taskDate = ''
},
//切换tab获取当月日期
changeNum() {
this.getDaysInMonth(this.tabName)
},
//获取本月日期
getDaysInMonth(month) {
var date = new Date()
var year = date.getFullYear()
month = parseInt(month, 10)
var temp = new Date(year, month, 0)
let n = +temp.getDate()
let dataTimes = []
for (var i = 1; i < n + 1; i++) {
const m = month < 10 ? '0' + month : month
const d = i < 10 ? '0' + i : i
dataTimes.push({
value: m + '-' + d,
label: i,
})
}
this.yearMonthTaskTime = dataTimes
},
//选择日期
chooseTemplate(index, item) {
if (this.selectedYear.indexOf(item.value) !== -1) {
// 匹配到数据, 取消
this.selectedYear.splice(this.selectedYear.indexOf(item.value), 1)
} else {
// 匹配不到, 添加到数组中
this.selectedYear.push(item.value)
}
},
//根据接口接收数据类型处理数据(按需)
exportYearData() {
this.form.taskDate = this.selectedYear.toString()
},
CSS代码
.addPeopleCardStyle {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.onePeopleCard {
width: 76px;
height: 32px;
line-height: 30px;
text-align: center;
background-color: #ffffff;
border-radius: 5px;
color: #17181d;
font-size: 0.14rem;
border: 1px solid #dcdcdc;
opacity: 1;
border-radius: 4px;
margin-bottom: 10px;
margin-left: 10px;
}
.onePeopleCard:hover {
cursor: pointer;
}
.clickOnePeopleCard {
width: 76px;
height: 32px;
line-height: 30px;
text-align: center;
background: rgba(18, 141, 255, 0.1);
border: 1px solid #128dff;
border-radius: 5px;
color: #128dff;
font-size: 0.14rem;
margin-bottom: 10px;
margin-left: 10px;
opacity: 1;
border-radius: 4px;
}
.clickOnePeopleCard:hover {
cursor: pointer;
}``