| | |
| | | <div :class="{on: dateType == 'date'}" :data-type="'date'" :data-holder="'选择日'"> |
| | | <span :data-type="'date'" :data-holder="'选择日'">日</span> |
| | | </div> |
| | | <div :class="{on: dateType == 'month'}" :data-type="'month'" :data-holder="'选择月'"> |
| | | <div :class="{on: dateType == 'month'}" :data-type="'month'" :data-holder="'选择月'"> |
| | | <span :data-type="'month'" :data-holder="'选择月'">月</span> |
| | | </div> |
| | | <div :class="{on: dateType == 'year'}" :data-type="'year'" :data-holder="'选择年'"> |
| | |
| | | </div> |
| | | |
| | | <el-date-picker |
| | | class="emit-el-date-picker" |
| | | size="small" |
| | | v-model="currentDate" |
| | | :type="dateType" |
| | | :placeholder="datePlaceHolder" |
| | | class="emit-el-date-picker" |
| | | size="small" |
| | | v-model="currentDate" |
| | | @change="selectChange" |
| | | :type="dateType" |
| | | :placeholder="datePlaceHolder" |
| | | ></el-date-picker> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'DateSelect', |
| | | data () { |
| | | return { |
| | | dateType: 'month', |
| | | datePlaceHolder: '选择月', |
| | | currentDate: '' |
| | | } |
| | | }, |
| | | export default { |
| | | name: 'DateSelect', |
| | | |
| | | methods: { |
| | | select (e) { |
| | | console.log(e.target.dataset.holder) |
| | | this.dateType = e.target.dataset.type |
| | | this.datePlaceHolder = e.target.dataset.holder |
| | | props: ['type'], |
| | | |
| | | data () { |
| | | return { |
| | | dateType: 'month', |
| | | datePlaceHolder: '选择月', |
| | | currentDate: '' |
| | | } |
| | | }, |
| | | created () { |
| | | var date = new Date() |
| | | this.currentDate = date |
| | | }, |
| | | methods: { |
| | | select (e) { |
| | | this.dateType = e.target.dataset.type |
| | | this.datePlaceHolder = e.target.dataset.holder |
| | | |
| | | var currentTime = this.gettime(this.currentDate) |
| | | if (this.type == 'taskSelect') { |
| | | this.$parent.getTaskTime(currentTime) |
| | | } else if (this.type == 'ncptrSelect') { |
| | | this.$parent.getNcptrTime(currentTime) |
| | | } else if (this.type == 'nztrSelect') { |
| | | this.$parent.getNztrTime(currentTime) |
| | | } else if (this.type == 'cltjSelect') { |
| | | this.$parent.getCltjTime(currentTime) |
| | | } else if (this.type == 'symSelect') { |
| | | this.$parent.getSymTime(currentTime) |
| | | } else if (this.type == 'ncpjgSelect') { |
| | | this.$parent.productsSupervise(currentTime) |
| | | } |
| | | }, |
| | | selectChange (e) { |
| | | var currentTime = this.gettime(e) |
| | | if (this.type == 'taskSelect') { |
| | | this.$parent.getTaskTime(currentTime) |
| | | } else if (this.type == 'ncptrSelect') { |
| | | this.$parent.getNcptrTime(currentTime) |
| | | } else if (this.type == 'nztrSelect') { |
| | | this.$parent.getNztrTime(currentTime) |
| | | } else if (this.type == 'cltjSelect') { |
| | | this.$parent.getCltjTime(currentTime) |
| | | } else if (this.type == 'symSelect') { |
| | | this.$parent.getSymTime(currentTime) |
| | | } else if (this.type == 'ncpjgSelect') { |
| | | this.$parent.productsSupervise(currentTime) |
| | | } |
| | | }, |
| | | gettime (data) { |
| | | let dateValue = data.getFullYear() |
| | | if (this.dateType == 'date') { |
| | | dateValue += '-' |
| | | dateValue += this.checkTime(data.getMonth() + 1) |
| | | dateValue += '-' |
| | | dateValue += this.checkTime(data.getDate()) |
| | | } else if (this.dateType == 'month') { |
| | | dateValue += '-' |
| | | dateValue += this.checkTime(data.getMonth() + 1) |
| | | } |
| | | |
| | | return dateValue |
| | | }, |
| | | checkTime (i) { |
| | | if (i < 10) { |
| | | i = '0' + i |
| | | } |
| | | return i |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .time-select { |
| | | margin-top: 20px; |
| | | padding: 0 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | height: 34px; |
| | | |
| | | .date-box { |
| | | margin-right: 20px; |
| | | .time-select { |
| | | margin-top: 20px; |
| | | padding: 0 4px; |
| | | display: flex; |
| | | box-sizing: border-box; |
| | | align-items: center; |
| | | height: 100%; |
| | | background: rgba(33, 186, 196, 0.1); |
| | | color: #a9d1d7; |
| | | height: 34px; |
| | | |
| | | & > div { |
| | | .date-box { |
| | | margin-right: 20px; |
| | | display: flex; |
| | | box-sizing: border-box; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 50px; |
| | | height: 100%; |
| | | cursor: pointer; |
| | | } |
| | | background: rgba(33, 186, 196, 0.1); |
| | | color: #a9d1d7; |
| | | |
| | | .on { |
| | | background: rgba(33, 186, 196, 0.5); |
| | | border: 1px solid #66dde9; |
| | | & > div { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 50px; |
| | | height: 100%; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .on { |
| | | background: rgba(33, 186, 196, 0.5); |
| | | border: 1px solid #66dde9; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |