123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- <template>
- <a-modal
- :title="title"
- style="top: 20px;"
- v-model="visible"
- :width="'900px'"
- :zIndex="12000"
- :footer="null"
- @cancel="cancel"
- centered
- >
- <a-row>
- <a-col :span="5">
- <a-form-item
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- label="年份"
- >
- <a-select
- style="width:80px"
- :getPopupContainer="triggerNode=>triggerNode.parentNode"
- @change="selectTime"
- placeholder="请选择"
- id="selectMonthModal-OneY"
- v-model="OneY" >
- <a-select-option v-for="(i,j) in DateList" :key="j" :value="i.TimeYear">{{ i.TimeYear }}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :span="19">
- <div class="conterList">
- <a-checkbox-group id="selectMonthModal-queryTime" v-model="optTime[curIndex].queryTime" @change="onChange" >
- <a-checkbox
- v-for="(item,index) in DateList[curIndex].queryTime"
- :key="index"
- :value="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"
- class="onSelect">
- {{ item }}月
- </a-checkbox>
- </a-checkbox-group>
- </div>
- </a-col>
- </a-row>
- <div class="btn-cont">
- <a-button @click="cancel" id="selectMonthModal-cancel" style="margin-right: 15px;">取消</a-button>
- <a-button type="primary" id="selectMonthModal-submit" @click="handleSubmit">确定</a-button>
- </div>
- </a-modal>
- </template>
- <script>
- export default {
- data () {
- return {
- visible: false, // 弹窗是否显示
- title: '月份选择', // 弹窗标题
- DateList: [], // 已选择月份数据
- labelCol: {// 调整表单距离
- xs: { span: 24 },
- sm: { span: 10 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 13 }
- },
- optTime: [], // 月份数据
- OneY: null, // 选择年份
- curIndex: 0, // 当前选中年份下标值
- optTimes: null, // 选中的月份
- ctype: null
- }
- },
- created () { // 初始化数据
- this.init()
- },
- methods: {
- // 关闭弹窗
- cancel () {
- this.visible = false
- },
- // info 选中的数据 type 可传可不传 主要做区分
- showModal (info, type) {
- this.visible = true
- this.ctype = type
- this.optTimes = info || null
- if (info) this.editTime(info)
- },
- // 初始化
- init () {
- const _this = this
- const _opt = {}
- const _optTime = {}
- const arr = new Array(12)
- const optDate = this.getDateList()
- optDate.map((item, index) => {
- _opt[index] = { TimeYear: item, queryTime: [] }
- _optTime[index] = { TimeYear: item, queryTime: [] }
- for (let i = 1; i <= arr.length; i++) {
- _opt[index].queryTime.push(i)
- }
- })
- _this.optTime = _optTime
- _this.DateList = _opt
- },
- // 获取当前年月数据
- getDateList () {
- const Dates = new Date()
- const year = Dates.getFullYear()
- this.OneY = year
- const optDate = []
- for (let i = 2022; i <= year; i++) {
- optDate.push(i)
- }
- return optDate.reverse()
- },
- // 选中年份
- editTime (info) {
- const _optTime = this.optTime
- const _opt = this.optTimes.map(v => { return v.substring(0, 4) })
- for (const item in _optTime) {
- _opt.map((items, indexs) => {
- if (items == _optTime[item].TimeYear) {
- _optTime[item].queryTime.push(this.optTimes[indexs])
- }
- })
- }
- // console.log(_optTime,'_optTime_optTime')
- },
- // 确定提交
- handleSubmit () {
- const _this = this
- _this.visible = false
- _this.$emit('ok', _this.optTimes, _this.ctype)
- _this.optTimes = []
- for (const i in _this.optTime) {
- _this.optTime[i].queryTime = []
- }
- },
- // 选择时间
- selectTime (info, Node) {
- const _this = this
- _this.OneY = info
- _this.curIndex = parseInt(Node.key)
- },
- // 选择月份 change
- onChange (info) {
- const _this = this
- const _opt = _this.optTime
- const arr = []
- for (const item in _opt) {
- if (_opt[item].queryTime.length > 0) _opt[item].queryTime.filter(v => { arr.push(v) })
- }
- _this.optTimes = arr
- },
- // 关闭时间选择弹窗
- closeTime (index, time) {
- this.optTime[index].queryTime = this.optTime[index].queryTime.filter(v => {
- return v !== time
- })
- // let _opt = this.optTime;
- // let s = {};
- // for ( let i in _opt ){
- // if(_opt[i].queryTime.length > 0) _opt[i].queryTime.filter(v=>{
- // return v !== time
- // })
- // }
- this.optTimes = this.optTimes.filter(v => {
- return v !== time
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .conterList{
- display: block;
- width: 100%;
- border-radius: 6px;
- .onSelect{
- width: 110px;
- margin: 0 0 10px 0;
- }
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- </style>
|