增加基本的活动编辑页面
This commit is contained in:
zhl
parent
13bd3063e7
commit
c44d2dc281
@ -9,16 +9,21 @@ export interface IActivityData {
|
||||
qtypes: string[]
|
||||
qcount: number
|
||||
repeatType: number
|
||||
eventDays: number[]
|
||||
monthDays: number[]
|
||||
weekDays: number[]
|
||||
beginTime: number[]
|
||||
prepareTime: number
|
||||
active: number
|
||||
active: number,
|
||||
beginDays?: number[],
|
||||
beginDay?: number,
|
||||
endDay?: number
|
||||
}
|
||||
|
||||
export const defaultActivityData: IActivityData = {
|
||||
active: 0,
|
||||
beginTime: [],
|
||||
eventDays: [],
|
||||
monthDays: [],
|
||||
weekDays: [],
|
||||
name: '',
|
||||
prepareTime: 0,
|
||||
qcount: 0,
|
||||
|
||||
@ -45,6 +45,33 @@ export const parseTime = (
|
||||
})
|
||||
return timeStr
|
||||
}
|
||||
/**
|
||||
* 将秒数格式化成 小时:分钟:秒
|
||||
* @param {number} sec
|
||||
* @param showSeconds 是否显示秒
|
||||
*/
|
||||
export const sec2TimeStr= (sec: number, showSeconds: boolean = true) => {
|
||||
showSeconds = typeof showSeconds !== 'undefined' ? showSeconds : true;
|
||||
let t = sec % 60
|
||||
let i = (sec % 3600 - t) / 60
|
||||
let n = Math.floor(sec / 3600)
|
||||
if (showSeconds) {
|
||||
return (n > 9 ? '' + n : '0' + n) + ':' + (i > 9 ? i : '0' + i) + ':' + (t > 9 ? t : '0' + t)
|
||||
} else {
|
||||
return (n > 9 ? '' + n : '0' + n) + ':' + (i > 9 ? i : '0' + i)
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 将 小时:分钟:秒 格式的字符串转换为秒数
|
||||
* @param {string} str
|
||||
*/
|
||||
export const timeStr2Sec = (str: string) => {
|
||||
const vals = str.split(':')
|
||||
const h = vals.length > 0 ? +vals[0] : 0
|
||||
const m = vals.length > 1 ? +vals[1] : 0
|
||||
const s = vals.length > 2 ? +vals[2] : 0
|
||||
return h * 3600 + m * 60 + s
|
||||
}
|
||||
|
||||
// Format and filter json data using filterKeys array
|
||||
export const formatJson = (filterKeys: any, jsonData: any) =>
|
||||
|
||||
@ -36,17 +36,161 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label="活动简介:"
|
||||
prop="desc"
|
||||
label="激活:"
|
||||
prop="active"
|
||||
>
|
||||
<el-input
|
||||
v-model="postForm.desc"
|
||||
placeholder="输入活动简介"
|
||||
name="desc"
|
||||
<el-switch
|
||||
v-model="postForm.active"
|
||||
name="active"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
required
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="desc"
|
||||
label="活动简介:"
|
||||
style="margin-bottom: 30px;"
|
||||
>
|
||||
<tinymce
|
||||
ref="editor"
|
||||
v-model="postForm.desc"
|
||||
:height="600"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="重复类型" prop="repeatType">
|
||||
<el-select
|
||||
v-model="postForm.repeatType"
|
||||
placeholder="选择"
|
||||
name="repeatType"
|
||||
required
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in repeatTypes"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="活动时间"
|
||||
v-if="postForm.repeatType !== 9"
|
||||
prop="beginTime">
|
||||
<el-select
|
||||
v-model="selectTime"
|
||||
placeholder="选择或输入时间, 格式 09:15"
|
||||
name="beginTime"
|
||||
required
|
||||
multiple
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
style="width: 60%"
|
||||
default-first-option
|
||||
@change="timeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in times"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="周几"
|
||||
v-if="postForm.repeatType === 2"
|
||||
prop="weekDays">
|
||||
<el-select
|
||||
v-model="postForm.weekDays"
|
||||
placeholder="选择周几"
|
||||
name="weekDays"
|
||||
required
|
||||
multiple
|
||||
clearable
|
||||
style="width: 60%"
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in weekDays"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="选择天"
|
||||
v-if="postForm.repeatType === 3"
|
||||
prop="monthDays">
|
||||
<el-select
|
||||
v-model="postForm.monthDays"
|
||||
placeholder="选择每月中需要运行的日子"
|
||||
name="monthDays"
|
||||
required
|
||||
multiple
|
||||
clearable
|
||||
style="width: 60%"
|
||||
@change="monthDaysChange"
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in monthDays"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="指定日期"
|
||||
prop="selectDate"
|
||||
v-if="postForm.repeatType === 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
type="dates"
|
||||
align="right"
|
||||
@change="dataChange"
|
||||
style="width: 60%"
|
||||
placeholder="选择一个或多个日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="开始/结束日期"
|
||||
prop="dataRange"
|
||||
v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="dataRange"
|
||||
type="daterange"
|
||||
align="right"
|
||||
style="width: 40%"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="准备时间(分):"
|
||||
prop="prepareTime"
|
||||
v-if="postForm.repeatType !== 9"
|
||||
>
|
||||
<el-input
|
||||
v-model="postForm.prepareTime"
|
||||
placeholder="提前多少时间可进游戏房间(分钟)"
|
||||
name="prepareTime"
|
||||
required
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@ -65,15 +209,16 @@
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
|
||||
import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
|
||||
import MaterialInput from '@/components/MaterialInput/index.vue'
|
||||
import Sticky from '@/components/Sticky/index.vue'
|
||||
import UploadImage from '@/components/UploadImage/index.vue'
|
||||
import RegionPicker from '@/components/RegionPicker/index.vue'
|
||||
import { Form } from 'element-ui'
|
||||
import { defaultShopData, getShop, getShops, saveShop } from '@/api/shop'
|
||||
import { addressToLoc, IAreaData, queryArea } from '@/api/map'
|
||||
import Tinymce from '@/components/Tinymce/index.vue'
|
||||
import { getShops } from '@/api/shop'
|
||||
import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
|
||||
import { sec2TimeStr, timeStr2Sec } from '@/utils'
|
||||
|
||||
@Component({
|
||||
name: 'ActivityEditor',
|
||||
@ -81,7 +226,8 @@ import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
|
||||
MaterialInput,
|
||||
Sticky,
|
||||
UploadImage,
|
||||
RegionPicker
|
||||
RegionPicker,
|
||||
Tinymce
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
@ -104,12 +250,34 @@ export default class extends Vue {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
private monthDays = []
|
||||
private repeatTypes = [
|
||||
{id: 0, label: '指定日期'},
|
||||
{id: 1, label: '每日'},
|
||||
{id: 2, label: '每周'},
|
||||
{id: 3, label: '每月'},
|
||||
{id: 9, label: '随时(一般测试用)'},
|
||||
]
|
||||
private weekDays = [
|
||||
{id: 0, label: '周日'},
|
||||
{id: 1, label: '周一'},
|
||||
{id: 2, label: '周二'},
|
||||
{id: 3, label: '周三'},
|
||||
{id: 4, label: '周四'},
|
||||
{id: 5, label: '周五'},
|
||||
{id: 6, label: '周六'},
|
||||
]
|
||||
private dataRange: Date[] = []
|
||||
private selectDate: Date[] = []
|
||||
private times = []
|
||||
private selectTime: string[] = []
|
||||
|
||||
private postForm = Object.assign({}, defaultActivityData)
|
||||
private loading = false
|
||||
private querying = false
|
||||
private allDepts = []
|
||||
|
||||
|
||||
private rules = {
|
||||
name: [{ validator: this.validateRequire }],
|
||||
}
|
||||
@ -123,6 +291,7 @@ export default class extends Vue {
|
||||
|
||||
|
||||
created() {
|
||||
this.initTimes()
|
||||
const id = this.$route.params?.id
|
||||
if (id) {
|
||||
this.fetchData(id)
|
||||
@ -142,6 +311,22 @@ export default class extends Vue {
|
||||
const { data } = await getActivity(id, { /* Your params here */ })
|
||||
console.log(data)
|
||||
this.postForm = data
|
||||
this.selectTime = []
|
||||
if (data.beginTime) {
|
||||
for (let str of data.beginTime) {
|
||||
this.selectTime.push(sec2TimeStr(str, false))
|
||||
}
|
||||
}
|
||||
this.selectDate = []
|
||||
if (data.beginDays) {
|
||||
for (let sub of data.beginDays) {
|
||||
this.selectDate.push(new Date(sub))
|
||||
}
|
||||
}
|
||||
if (data.beginDay && data.endDay) {
|
||||
this.dataRange.push(new Date(data.beginDay))
|
||||
this.dataRange.push(new Date(data.endDay))
|
||||
}
|
||||
// Just for test
|
||||
const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity'
|
||||
// Set tagsview title
|
||||
@ -169,6 +354,19 @@ export default class extends Vue {
|
||||
const form = <Form>this.$refs.postForm
|
||||
try {
|
||||
await form.validate()
|
||||
let times = []
|
||||
for (let str of this.selectTime) {
|
||||
times.push(timeStr2Sec(str))
|
||||
}
|
||||
this.postForm.beginTime = times
|
||||
this.postForm.beginDays.length = 0
|
||||
for (let d of this.selectDate) {
|
||||
this.postForm.beginDays.push(d.getTime())
|
||||
}
|
||||
if (this.dataRange.length > 1) {
|
||||
this.postForm.beginDay = this.dataRange[0].getTime()
|
||||
this.postForm.endDay = this.dataRange[1].getTime()
|
||||
}
|
||||
this.loading = true
|
||||
const { data } = await saveActivity(this.postForm)
|
||||
this.postForm = data
|
||||
@ -203,7 +401,43 @@ export default class extends Vue {
|
||||
if (!data.records) return
|
||||
this.allDepts = data.records
|
||||
}
|
||||
private dataChange(val: any) {
|
||||
console.log(this.selectDate)
|
||||
}
|
||||
|
||||
private initTimes() {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
for (let j = 0; j < 4; j ++) {
|
||||
let secs = i * 3600 + j * 15 * 60
|
||||
let label = sec2TimeStr(secs, false)
|
||||
this.times.push(label)
|
||||
}
|
||||
}
|
||||
this.monthDays.push({id: 0, label: '全选'})
|
||||
for (let i = 1; i < 32; i++) {
|
||||
this.monthDays.push({id: i, label: i})
|
||||
}
|
||||
}
|
||||
private timeChange(vals: string[]) {
|
||||
if (vals.length > 0) {
|
||||
let lastVal = this.selectTime[this.selectTime.length - 1]
|
||||
if (!/^\d{1,2}:\d{1,2}$/.test(lastVal)) {
|
||||
this.selectTime.pop()
|
||||
}
|
||||
lastVal = sec2TimeStr(timeStr2Sec(lastVal), false)
|
||||
this.selectTime.splice(this.selectTime.length - 1,1, lastVal)
|
||||
console.log(this.selectTime)
|
||||
}
|
||||
|
||||
}
|
||||
private monthDaysChange(days: number[]) {
|
||||
if (days.indexOf(0) >= 0) {
|
||||
this.postForm.monthDays.length = 0
|
||||
for (let i = 1; i < 32; i++) {
|
||||
this.postForm.monthDays.push(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user