selectMonth.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <a-modal
  3. :title="title"
  4. style="top: 20px;"
  5. v-model="visible"
  6. :width="'900px'"
  7. :zIndex="12000"
  8. :footer="null"
  9. @cancel="cancel"
  10. centered
  11. >
  12. <a-row>
  13. <a-col :span="5">
  14. <a-form-item
  15. :labelCol="labelCol"
  16. :wrapperCol="wrapperCol"
  17. label="年份"
  18. >
  19. <a-select
  20. style="width:80px"
  21. :getPopupContainer="triggerNode=>triggerNode.parentNode"
  22. @change="selectTime"
  23. placeholder="请选择"
  24. id="selectMonthModal-OneY"
  25. v-model="OneY" >
  26. <a-select-option v-for="(i,j) in DateList" :key="j" :value="i.TimeYear">{{ i.TimeYear }}</a-select-option>
  27. </a-select>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :span="19">
  31. <div class="conterList">
  32. <a-checkbox-group id="selectMonthModal-queryTime" v-model="optTime[curIndex].queryTime" @change="onChange" >
  33. <a-checkbox
  34. v-for="(item,index) in DateList[curIndex].queryTime"
  35. :key="index"
  36. :value="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"
  37. class="onSelect">
  38. {{ item }}月
  39. </a-checkbox>
  40. </a-checkbox-group>
  41. </div>
  42. </a-col>
  43. </a-row>
  44. <div class="btn-cont">
  45. <a-button @click="cancel" id="selectMonthModal-cancel" style="margin-right: 15px;">取消</a-button>
  46. <a-button type="primary" id="selectMonthModal-submit" @click="handleSubmit">确定</a-button>
  47. </div>
  48. </a-modal>
  49. </template>
  50. <script>
  51. export default {
  52. data () {
  53. return {
  54. visible: false, // 弹窗是否显示
  55. title: '月份选择', // 弹窗标题
  56. DateList: [], // 已选择月份数据
  57. labelCol: {// 调整表单距离
  58. xs: { span: 24 },
  59. sm: { span: 10 }
  60. },
  61. wrapperCol: {
  62. xs: { span: 24 },
  63. sm: { span: 13 }
  64. },
  65. optTime: [], // 月份数据
  66. OneY: null, // 选择年份
  67. curIndex: 0, // 当前选中年份下标值
  68. optTimes: null, // 选中的月份
  69. ctype: null
  70. }
  71. },
  72. created () { // 初始化数据
  73. this.init()
  74. },
  75. methods: {
  76. // 关闭弹窗
  77. cancel () {
  78. this.visible = false
  79. },
  80. // info 选中的数据 type 可传可不传 主要做区分
  81. showModal (info, type) {
  82. this.visible = true
  83. this.ctype = type
  84. this.optTimes = info || null
  85. if (info) this.editTime(info)
  86. },
  87. // 初始化
  88. init () {
  89. const _this = this
  90. const _opt = {}
  91. const _optTime = {}
  92. const arr = new Array(12)
  93. const optDate = this.getDateList()
  94. optDate.map((item, index) => {
  95. _opt[index] = { TimeYear: item, queryTime: [] }
  96. _optTime[index] = { TimeYear: item, queryTime: [] }
  97. for (let i = 1; i <= arr.length; i++) {
  98. _opt[index].queryTime.push(i)
  99. }
  100. })
  101. _this.optTime = _optTime
  102. _this.DateList = _opt
  103. },
  104. // 获取当前年月数据
  105. getDateList () {
  106. const Dates = new Date()
  107. const year = Dates.getFullYear()
  108. this.OneY = year
  109. const optDate = []
  110. for (let i = 2022; i <= year; i++) {
  111. optDate.push(i)
  112. }
  113. return optDate.reverse()
  114. },
  115. // 选中年份
  116. editTime (info) {
  117. const _optTime = this.optTime
  118. const _opt = this.optTimes.map(v => { return v.substring(0, 4) })
  119. for (const item in _optTime) {
  120. _opt.map((items, indexs) => {
  121. if (items == _optTime[item].TimeYear) {
  122. _optTime[item].queryTime.push(this.optTimes[indexs])
  123. }
  124. })
  125. }
  126. // console.log(_optTime,'_optTime_optTime')
  127. },
  128. // 确定提交
  129. handleSubmit () {
  130. const _this = this
  131. _this.visible = false
  132. _this.$emit('ok', _this.optTimes, _this.ctype)
  133. _this.optTimes = []
  134. for (const i in _this.optTime) {
  135. _this.optTime[i].queryTime = []
  136. }
  137. },
  138. // 选择时间
  139. selectTime (info, Node) {
  140. const _this = this
  141. _this.OneY = info
  142. _this.curIndex = parseInt(Node.key)
  143. },
  144. // 选择月份 change
  145. onChange (info) {
  146. const _this = this
  147. const _opt = _this.optTime
  148. const arr = []
  149. for (const item in _opt) {
  150. if (_opt[item].queryTime.length > 0) _opt[item].queryTime.filter(v => { arr.push(v) })
  151. }
  152. _this.optTimes = arr
  153. },
  154. // 关闭时间选择弹窗
  155. closeTime (index, time) {
  156. this.optTime[index].queryTime = this.optTime[index].queryTime.filter(v => {
  157. return v !== time
  158. })
  159. // let _opt = this.optTime;
  160. // let s = {};
  161. // for ( let i in _opt ){
  162. // if(_opt[i].queryTime.length > 0) _opt[i].queryTime.filter(v=>{
  163. // return v !== time
  164. // })
  165. // }
  166. this.optTimes = this.optTimes.filter(v => {
  167. return v !== time
  168. })
  169. }
  170. }
  171. }
  172. </script>
  173. <style lang="less" scoped>
  174. .conterList{
  175. display: block;
  176. width: 100%;
  177. border-radius: 6px;
  178. .onSelect{
  179. width: 110px;
  180. margin: 0 0 10px 0;
  181. }
  182. }
  183. .btn-cont {
  184. text-align: center;
  185. margin: 35px 0 10px;
  186. }
  187. </style>