Skip to content

Commit

Permalink
Feat: chang fuzzy timepoint support
Browse files Browse the repository at this point in the history
  • Loading branch information
@LanceZhu
LanceZhu committed Nov 19, 2019
1 parent 530909f commit 269afb3
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 56 deletions.
42 changes: 40 additions & 2 deletions src/page/timeline/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,51 @@ export default {
if (res.data.code === 100) {
that.timeline = res.data.data.timeline
that.timeline = that.timeline.map(time => {
if (time.date_show !== 'null') {
if (time.date_show !== null) {
const dateShow = JSON.parse(time.date_show)
const type = dateShow.type
const date = dateShow.date
switch (type) {
case 100: {
time.date_show = parseDate(date)
break
}
case 0: {
time.date_show = `${date}年`
break
}
case 1: {
time.date_show = `${date[0]}年${date[1]}月`
break
}
case 10: {
time.date_show = `${date[0]}世纪${date[1]}年代`
break
}
case 11: {
time.date_show = `${date[0]}世纪${date[1]}年代初`
break
}
case 12: {
time.date_show = `${date[0]}世纪${date[1]}年代中`
break
}
case 13: {
time.date_show = `${date[0]}世纪${date[1]}年代末`
break
}
case 20: {
time.date_show = `${date[0]}年 - ${date[1]}年`
break
}
default: {}
}
} else {
time.date_show = parseDate(time.date_data)
}
return time
})
that.$store.commit('updateTimeline', that.timeline)
console.log(that.$store.state.timeline)
that.title = res.data.data.post.title
}
})
Expand Down
2 changes: 2 additions & 0 deletions src/page/timeline/view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ export default {

<style scoped>
.title{
position: sticky;
top: 0;
background-color: white;
height: 48px;
line-height: 48px;
Expand Down
20 changes: 14 additions & 6 deletions src/page/timepoint/add.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@change="dateFormatChange"></el-cascader>
<div v-if="dateCategoryNumber === 100">
<el-date-picker
v-model="timepoint"
v-model="date_100"
:type="selectedTimepointType"
format="yyyy/MM/dd"
value-format="yyyy/MM/dd"
Expand Down Expand Up @@ -195,11 +195,18 @@ export default {
}
default: {}
}
console.log(show)
// show 中添加时间点格式类型
const jsonTypeShow = JSON.stringify({
type: this.dateCategoryNumber,
date: this[`date_${this.dateCategoryNumber}`]
})
this.$axios.post(`/api/post/timepoint/${that.id}`, {
time,
title: that.title,
content: that.content,
show
show: jsonTypeShow
}).then(res => {
switch (res.data.code) {
case 100: {
Expand Down Expand Up @@ -268,11 +275,12 @@ export default {
float: left;
text-align: left;
} */
.date .el-date-editor{
width: 150px !important;
}
.date .el-input{
width: 150px;
width: 80px;
height: 40px;
}
.date .el-date-picker{
width: 150px;
margin-right: 10px;
}
</style>
154 changes: 106 additions & 48 deletions src/page/timepoint/edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,21 @@
placeholder="选择时间点">
</el-date-picker>
</div>
<!-- <div class="date">
<div class="date">
<div>时间格式选择</div>
<el-cascader
v-model="dateValue"
:options="dateOptions"
@change="dateFormatChange"></el-cascader>
<div v-if="dateCategoryNumber === 100">
<el-date-picker
v-model="date_100"
:type="selectedTimepointType"
format="yyyy/MM/dd"
value-format="yyyy/MM/dd"
placeholder="选择日期">
</el-date-picker>
</div>
<div v-if="dateCategoryNumber === 0">
<el-input v-model="date_0"></el-input>年
</div>
Expand All @@ -41,7 +50,7 @@
<div v-if="dateCategoryNumber === 20">
<el-input v-model="date_20[0]"></el-input>年 - <el-input v-model="date_20[1]"></el-input>年
</div>
</div> -->
</div>
<el-input placeholder="请输入标题" v-model="title"></el-input>
<quill-editor v-model="content" :editorOption=editorOption>
</quill-editor>
Expand All @@ -61,7 +70,7 @@
import { Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import config from '../../../config'
// import dayjs from 'dayjs'
import dayjs from 'dayjs'
Quill.register('modules/ImageExtend', ImageExtend)
Expand Down Expand Up @@ -101,6 +110,10 @@ export default {
dateValue: '', // 时间点显示值
dateCategoryNumber: 0, // 时间点类别值 计算方法为时间点格式选项 value 求和
dateOptions: [ // 时间点格式选项
{
value: 100,
label: '精确日期'
},
{
value: 0,
label: '年份',
Expand Down Expand Up @@ -142,6 +155,7 @@ export default {
]
}
],
date_100: '',
date_0: 0,
date_1: [0, 0],
date_10: [0, 0],
Expand All @@ -154,54 +168,66 @@ export default {
methods: {
submit () {
const that = this
// const TIME_FORMAT = 'YYYY/MM/DD'
const TIME_FORMAT = 'YYYY/MM/DD'
// let show = ''
// let time = dayjs().format(TIME_FORMAT)
let show = ''
let time = dayjs().format(TIME_FORMAT)
// switch (this.dateCategoryNumber) {
// case 0: {
// show = `${this.date_0}年`
// time = dayjs(new Date(this.date_0, 0, 1)).format(TIME_FORMAT) // 月份 0 开始
// break
// }
// case 1: {
// show = `${this.date_1[0]}年${this.data_1}月`
// time = dayjs(new Date(this.date_1[0], this.date_1[1] - 1, 1)).format(TIME_FORMAT)
// break
// }
// case 10: {
// show = `${this.date_10[0]}世纪${this.date_10[1]}年代`
// time = dayjs(new Date((this.date_10[0] - 1) * 100 + this.date_10[1], 0, 1)).format(TIME_FORMAT)
// break
// }
// case 11: {
// show = `${this.date_11[0]}世纪${this.date_11[1]}年代初`
// time = dayjs(new Date((this.date_11[0] - 1) * 100 + this.date_11[1], 0, 2)).format(TIME_FORMAT)
// break
// }
// case 12: {
// show = `${this.date_12[0]}世纪${this.date_12[1]}年代中`
// time = dayjs(new Date((this.date_12[0] - 1) * 100 + this.date_12[1], 5, 1)).format(TIME_FORMAT)
// break
// }
// case 13: {
// show = `${this.date_13[0]}世纪${this.date_13[1]}年代末`
// time = dayjs(new Date((this.date_13[0] - 1) * 100 + this.date_13[1], 11, 1)).format(TIME_FORMAT)
// break
// }
// case 20: {
// show = `${this.date_20[0]}年 - ${this.date_20[1]}年`
// time = dayjs(new Date(this.date_20[0], 11, 31)).format(TIME_FORMAT)
// break
// }
// default: {}
// }
switch (this.dateCategoryNumber) {
case 100: {
show = dayjs(this.date_100).format('YYYY年MM月DD日')
time = this.date_100
break
}
case 0: {
show = `${this.date_0}年`
time = dayjs(new Date(this.date_0, 0, 1)).format(TIME_FORMAT) // 月份 0 开始
break
}
case 1: {
show = `${this.date_1[0]}年${this.data_1}月`
time = dayjs(new Date(this.date_1[0], this.date_1[1] - 1, 1)).format(TIME_FORMAT)
break
}
case 10: {
show = `${this.date_10[0]}世纪${this.date_10[1]}年代`
time = dayjs(new Date((this.date_10[0] - 1) * 100 + this.date_10[1], 0, 1)).format(TIME_FORMAT)
break
}
case 11: {
show = `${this.date_11[0]}世纪${this.date_11[1]}年代初`
time = dayjs(new Date((this.date_11[0] - 1) * 100 + this.date_11[1], 0, 2)).format(TIME_FORMAT)
break
}
case 12: {
show = `${this.date_12[0]}世纪${this.date_12[1]}年代中`
time = dayjs(new Date((this.date_12[0] - 1) * 100 + this.date_12[1], 5, 1)).format(TIME_FORMAT)
break
}
case 13: {
show = `${this.date_13[0]}世纪${this.date_13[1]}年代末`
time = dayjs(new Date((this.date_13[0] - 1) * 100 + this.date_13[1], 11, 1)).format(TIME_FORMAT)
break
}
case 20: {
show = `${this.date_20[0]}年 - ${this.date_20[1]}年`
time = dayjs(new Date(this.date_20[0], 11, 31)).format(TIME_FORMAT)
break
}
default: {}
}
console.log(show)
// show 中添加时间点格式类型
const jsonTypeShow = JSON.stringify({
type: this.dateCategoryNumber,
date: this[`date_${this.dateCategoryNumber}`]
})
this.$axios.post(`/api/edit/${that.$route.params.id}`, {
time: that.timepoint,
time,
title: that.title,
content: that.content
content: that.content,
show: jsonTypeShow
}).then(res => {
switch (res.data.code) {
case 100: {
Expand Down Expand Up @@ -231,6 +257,33 @@ export default {
acc += cur
return acc
}, 0)
},
dateInitialize (dateInput) {
const date = new Date()
const year = date.getFullYear()
const nextYear = year + 1
const years = Math.floor(year % 100) - Math.floor(year % 10)
const century = Math.floor(year / 100) + 1
const month = date.getMonth() + 1
this.date_100 = dayjs().format('YYYY/MM/DD')
this.date_0 = year // 2020 年
this.date_1[0] = year // 2020 年
this.date_1[1] = month // 1 月
this.date_10[0] = century // 21 世纪
this.date_10[1] = years // 20 年代
this.date_11[0] = century
this.date_11[1] = years
this.date_12[0] = century
this.date_12[1] = years
this.date_13[0] = century
this.date_13[1] = years
this.date_20[0] = year
this.date_20[1] = nextYear
dateInput = JSON.parse(dateInput)
this.dateCategoryNumber = dateInput.type
this[`date_${this.dateCategoryNumber}`] = dateInput.date
}
},
created () {
Expand All @@ -239,6 +292,7 @@ export default {
that.title = res.data.data.post.title
that.content = res.data.data.post.content
that.timepoint = res.data.data.post.date_data
that.dateInitialize(res.data.data.post.date_show)
})
}
}
Expand All @@ -253,10 +307,14 @@ export default {
min-height: 400px;
}
.el-input{
margin-bottom: 10px;
margin: 10px 0;
}
.date .el-date-editor{
width: 150px !important;
}
.date .el-input{
width: 100px;
width: 80px;
height: 40px;
margin-right: 10px;
}
</style>

0 comments on commit 269afb3

Please sign in to comment.