|
@@ -0,0 +1,192 @@
|
|
|
+<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="请选择"
|
|
|
+ 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 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>
|
|
|
+ <!-- <a-row style="margin-top:5px;">
|
|
|
+ <a-col :span="24">
|
|
|
+ <div><label style="margin: 5px 5px 0 0;display:inline-block;"><span style="color:#f00">*</span>已选择:</label>
|
|
|
+ <a-tag
|
|
|
+ color="#40a9ff"
|
|
|
+ style="margin-bottom: 3px;"
|
|
|
+ closable
|
|
|
+ @close="()=>closeTime(curIndex,v)"
|
|
|
+ v-for="v in optTimes"
|
|
|
+ :key="v + '-1'">{{ v }}</a-tag>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row> -->
|
|
|
+ <div class="btn-cont">
|
|
|
+ <a-button @click="cancel" style="margin-right: 15px;">取消</a-button>
|
|
|
+ <a-button type="primary" @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)
|
|
|
+ },
|
|
|
+ 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>
|