node/pyxis-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动编辑增加题目分类选择

Browse Source
This commit is contained in:
zhl 2021-05-06 17:30:42 +08:00
parent c44d2dc281
commit 88faf302e8
1 changed files with 302 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

510
src/views/activity/edit.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="app-container">
<el-form
ref="postForm"
:model="postForm"
@ -7,190 +9,224 @@
label-width="121px"
class="form-container"
>
<el-form-item label="店铺" prop="key">
<el-select
v-model="postForm.shop"
placeholder="选择店铺"
name="shop"
required
class="w100"
>
<el-option
v-for="item in allDepts"
:key="item._id"
:label="item.name"
:value="item._id"
/>
</el-select>
</el-form-item>
<el-form-item
style="margin-bottom: 40px;"
label="活动名称:"
prop="name"
>
<el-input
v-model="postForm.name"
placeholder="输入活动名称"
name="name"
required
/>
</el-form-item>
<el-form-item
label="激活:"
prop="active"
>
<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-tabs v-model="activeName">
<el-tab-pane label="基本信息" name="first">
<el-form-item label="店铺" prop="key">
<el-select
v-model="postForm.shop"
placeholder="选择店铺"
name="shop"
required
class="w100"
>
<el-option
v-for="item in allDepts"
:key="item._id"
:label="item.name"
:value="item._id"
/>
</el-select>
</el-form-item>
<el-form-item
style="margin-bottom: 40px;"
label="活动名称:"
prop="name"
>
<el-input
v-model="postForm.name"
placeholder="输入活动名称"
name="name"
required
/>
</el-form-item>
<el-form-item
label="激活:"
prop="active"
>
<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="选择天"
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
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-tab-pane>
<el-tab-pane label="题库设置" name="second">
<el-form-item
label="题目数量:"
prop="qcount"
>
<el-input
v-model="postForm.qcount"
placeholder="本次活动题目数量"
name="qcount"
type="number"
required
/>
</el-form-item>
<el-form-item
label="题库分类"
>
<el-tree
:data="typeOptions"
show-checkbox
accordion
node-key="id"
ref="tree"
highlight-current
:default-checked-keys="typeSelected"
:props="defaultProps">
</el-tree>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="奖励设置" name="third">
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button
type="primary"
@ -203,11 +239,13 @@
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
import MaterialInput from '@/components/MaterialInput/index.vue'
@ -219,6 +257,7 @@ import Tinymce from '@/components/Tinymce/index.vue'
import { getShops } from '@/api/shop'
import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
import { sec2TimeStr, timeStr2Sec } from '@/utils'
import { getAllCategory } from '@/api/question'
@Component({
name: 'ActivityEditor',
@ -250,22 +289,23 @@ export default class extends Vue {
callback()
}
}
private activeName = 'first'
private monthDays = []
private repeatTypes = [
{id: 0, label: '指定日期'},
{id: 1, label: '每日'},
{id: 2, label: '每周'},
{id: 3, label: '每月'},
{id: 9, label: '随时(一般测试用)'},
{ 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: '周六'},
{ 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[] = []
@ -274,12 +314,16 @@ export default class extends Vue {
private postForm = Object.assign({}, defaultActivityData)
private loading = false
private querying = false
private allDepts = []
private typeOptions: {id: string, label: string, children?: any[]}[] = []
private typeSelected = []
private defaultProps = {
children: 'children',
label: 'label'
}
private rules = {
name: [{ validator: this.validateRequire }],
name: [{ validator: this.validateRequire }]
}
private tempTagView?: ITagView
@ -290,14 +334,15 @@ export default class extends Vue {
}
created() {
async created() {
this.initTimes()
const id = this.$route.params?.id
await this.getRemoteCategory()
await this.getRemoteDeptList()
if (id) {
this.fetchData(id)
await this.fetchData(id)
}
this.tempTagView = Object.assign({}, this.$route)
this.getRemoteDeptList()
}
deactivated() {
@ -327,6 +372,7 @@ export default class extends Vue {
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
@ -341,13 +387,13 @@ export default class extends Vue {
private setTagsViewTitle(title: string) {
const tagView = this.tempTagView
if (tagView) {
tagView.title = `${title}-${this.postForm._id}`
tagView.title = `${ title }-${ this.postForm._id }`
TagsViewModule.updateVisitedView(tagView)
}
}
private setPageTitle(title: string) {
document.title = `${title} - ${this.postForm._id}`
document.title = `${ title } - ${ this.postForm._id }`
}
private async submitForm() {
@ -367,6 +413,7 @@ export default class extends Vue {
this.postForm.beginDay = this.dataRange[0].getTime()
this.postForm.endDay = this.dataRange[1].getTime()
}
this.postForm.qtypes = this.$refs.tree.getCheckedKeys()
this.loading = true
const { data } = await saveActivity(this.postForm)
this.postForm = data
@ -382,6 +429,7 @@ export default class extends Vue {
return false
}
}
private async onCancel() {
try {
await this.$confirm('确认不保存当前活动信息?', 'Warning', {
@ -389,35 +437,38 @@ export default class extends Vue {
cancelButtonText: '取消',
type: 'warning'
})
this.$store.dispatch("delView", this.$route)
this.$store.dispatch('delView', this.$route)
this.$router.go(-1)
} catch (e) {
}
}
private async getRemoteDeptList() {
const { data } = await getShops({ })
const { data } = await getShops({})
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 ++) {
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: '全选'})
this.monthDays.push({ id: 0, label: '全选' })
for (let i = 1; i < 32; i++) {
this.monthDays.push({id: i, label: i})
this.monthDays.push({ id: i, label: i })
}
}
private timeChange(vals: string[]) {
if (vals.length > 0) {
let lastVal = this.selectTime[this.selectTime.length - 1]
@ -425,11 +476,12 @@ export default class extends Vue {
this.selectTime.pop()
}
lastVal = sec2TimeStr(timeStr2Sec(lastVal), false)
this.selectTime.splice(this.selectTime.length - 1,1, lastVal)
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
@ -439,6 +491,48 @@ export default class extends Vue {
}
}
@Watch('postForm.shop')
private onShopChange() {
if (this.postForm.qtypes?.length > 0) {
this.typeSelected = this.postForm.qtypes
return
}
if (this.postForm.shop) {
let currentShop
for (let p of this.allDepts) {
if (p._id == this.postForm.shop) {
currentShop = p
break
}
}
if (currentShop) {
this.typeSelected = currentShop.qtypes
} else {
this.typeSelected = []
}
this.$refs.tree.setCheckedKeys(this.typeSelected)
}
}
// begin of set puzzle types
private async getRemoteCategory() {
const { data } = await getAllCategory()
for (const cat of data) {
const subArr = []
for (const s of cat.children) {
subArr.push({
id: s._id,
label: s.name
})
}
this.typeOptions.push({
id: cat._id,
label: cat.name,
children: subArr
})
}
}
}
</script>