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

This commit is contained in:
zhl 2021-05-06 17:30:42 +08:00
parent c44d2dc281
commit 88faf302e8

View File

@ -1,5 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
ref="postForm" ref="postForm"
:model="postForm" :model="postForm"
@ -7,190 +9,224 @@
label-width="121px" label-width="121px"
class="form-container" class="form-container"
> >
<el-form-item label="店铺" prop="key"> <el-tabs v-model="activeName">
<el-select <el-tab-pane label="基本信息" name="first">
v-model="postForm.shop" <el-form-item label="店铺" prop="key">
placeholder="选择店铺" <el-select
name="shop" v-model="postForm.shop"
required placeholder="选择店铺"
class="w100" name="shop"
> required
<el-option class="w100"
v-for="item in allDepts" >
:key="item._id" <el-option
:label="item.name" v-for="item in allDepts"
:value="item._id" :key="item._id"
/> :label="item.name"
</el-select> :value="item._id"
</el-form-item> />
<el-form-item </el-select>
style="margin-bottom: 40px;" </el-form-item>
label="活动名称:" <el-form-item
prop="name" style="margin-bottom: 40px;"
> label="活动名称:"
<el-input prop="name"
v-model="postForm.name" >
placeholder="输入活动名称" <el-input
name="name" v-model="postForm.name"
required placeholder="输入活动名称"
/> name="name"
</el-form-item> required
<el-form-item />
label="激活:" </el-form-item>
prop="active" <el-form-item
> label="激活:"
<el-switch prop="active"
v-model="postForm.active" >
name="active" <el-switch
active-color="#13ce66" v-model="postForm.active"
inactive-color="#ff4949" name="active"
required active-color="#13ce66"
/> inactive-color="#ff4949"
</el-form-item> required
<el-form-item />
prop="desc" </el-form-item>
label="活动简介:" <el-form-item
style="margin-bottom: 30px;" prop="desc"
> label="活动简介:"
<tinymce style="margin-bottom: 30px;"
ref="editor" >
v-model="postForm.desc" <tinymce
:height="600" ref="editor"
/> v-model="postForm.desc"
</el-form-item> :height="600"
<el-form-item label="重复类型" prop="repeatType"> />
<el-select </el-form-item>
v-model="postForm.repeatType" <el-form-item label="重复类型" prop="repeatType">
placeholder="选择" <el-select
name="repeatType" v-model="postForm.repeatType"
required placeholder="选择"
class="w100" name="repeatType"
> required
<el-option class="w100"
v-for="item in repeatTypes" >
:key="item.id" <el-option
:label="item.label" v-for="item in repeatTypes"
:value="item.id" :key="item.id"
/> :label="item.label"
</el-select> :value="item.id"
</el-form-item> />
<el-form-item </el-select>
label="活动时间" </el-form-item>
v-if="postForm.repeatType !== 9" <el-form-item
prop="beginTime"> label="活动时间"
<el-select v-if="postForm.repeatType !== 9"
v-model="selectTime" prop="beginTime">
placeholder="选择或输入时间, 格式 09:15" <el-select
name="beginTime" v-model="selectTime"
required placeholder="选择或输入时间, 格式 09:15"
multiple name="beginTime"
clearable required
filterable multiple
allow-create clearable
style="width: 60%" filterable
default-first-option allow-create
@change="timeChange" style="width: 60%"
> default-first-option
<el-option @change="timeChange"
v-for="item in times" >
:key="item" <el-option
:label="item" v-for="item in times"
:value="item" :key="item"
/> :label="item"
</el-select> :value="item"
</el-form-item> />
<el-form-item </el-select>
label="周几" </el-form-item>
v-if="postForm.repeatType === 2" <el-form-item
prop="weekDays"> label="周几"
<el-select v-if="postForm.repeatType === 2"
v-model="postForm.weekDays" prop="weekDays">
placeholder="选择周几" <el-select
name="weekDays" v-model="postForm.weekDays"
required placeholder="选择周几"
multiple name="weekDays"
clearable required
style="width: 60%" multiple
default-first-option clearable
> style="width: 60%"
<el-option default-first-option
v-for="item in weekDays" >
:key="item.id" <el-option
:label="item.label" v-for="item in weekDays"
:value="item.id" :key="item.id"
/> :label="item.label"
</el-select> :value="item.id"
</el-form-item> />
</el-select>
</el-form-item>
<el-form-item <el-form-item
label="选择天" label="选择天"
v-if="postForm.repeatType === 3" v-if="postForm.repeatType === 3"
prop="monthDays"> prop="monthDays">
<el-select <el-select
v-model="postForm.monthDays" v-model="postForm.monthDays"
placeholder="选择每月中需要运行的日子" placeholder="选择每月中需要运行的日子"
name="monthDays" name="monthDays"
required required
multiple multiple
clearable clearable
style="width: 60%" style="width: 60%"
@change="monthDaysChange" @change="monthDaysChange"
default-first-option default-first-option
> >
<el-option <el-option
v-for="item in monthDays" v-for="item in monthDays"
:key="item.id" :key="item.id"
:label="item.label" :label="item.label"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="指定日期" label="指定日期"
prop="selectDate" prop="selectDate"
v-if="postForm.repeatType === 0" v-if="postForm.repeatType === 0"
> >
<el-date-picker <el-date-picker
v-model="selectDate" v-model="selectDate"
type="dates" type="dates"
align="right" align="right"
@change="dataChange" @change="dataChange"
style="width: 60%" style="width: 60%"
placeholder="选择一个或多个日期" placeholder="选择一个或多个日期"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="开始/结束日期" label="开始/结束日期"
prop="dataRange" prop="dataRange"
v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9" v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9"
> >
<el-date-picker <el-date-picker
v-model="dataRange" v-model="dataRange"
type="daterange" type="daterange"
align="right" align="right"
style="width: 40%" style="width: 40%"
unlink-panels unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="准备时间(分):" label="准备时间(分):"
prop="prepareTime" prop="prepareTime"
v-if="postForm.repeatType !== 9" v-if="postForm.repeatType !== 9"
> >
<el-input <el-input
v-model="postForm.prepareTime" v-model="postForm.prepareTime"
placeholder="提前多少时间可进游戏房间(分钟)" placeholder="提前多少时间可进游戏房间(分钟)"
name="prepareTime" name="prepareTime"
required required
/> />
</el-form-item> </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-form-item>
<el-button <el-button
type="primary" type="primary"
@ -203,11 +239,13 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
<script lang="ts"> <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 { AppModule } from '@/store/modules/app'
import { ITagView, TagsViewModule } from '@/store/modules/tags-view' import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
import MaterialInput from '@/components/MaterialInput/index.vue' import MaterialInput from '@/components/MaterialInput/index.vue'
@ -219,6 +257,7 @@ import Tinymce from '@/components/Tinymce/index.vue'
import { getShops } from '@/api/shop' import { getShops } from '@/api/shop'
import { defaultActivityData, getActivity, saveActivity } from '@/api/activity' import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
import { sec2TimeStr, timeStr2Sec } from '@/utils' import { sec2TimeStr, timeStr2Sec } from '@/utils'
import { getAllCategory } from '@/api/question'
@Component({ @Component({
name: 'ActivityEditor', name: 'ActivityEditor',
@ -250,22 +289,23 @@ export default class extends Vue {
callback() callback()
} }
} }
private activeName = 'first'
private monthDays = [] private monthDays = []
private repeatTypes = [ private repeatTypes = [
{id: 0, label: '指定日期'}, { id: 0, label: '指定日期' },
{id: 1, label: '每日'}, { id: 1, label: '每日' },
{id: 2, label: '每周'}, { id: 2, label: '每周' },
{id: 3, label: '每月'}, { id: 3, label: '每月' },
{id: 9, label: '随时(一般测试用)'}, { id: 9, label: '随时(一般测试用)' }
] ]
private weekDays = [ private weekDays = [
{id: 0, label: '周日'}, { id: 0, label: '周日' },
{id: 1, label: '周一'}, { id: 1, label: '周一' },
{id: 2, label: '周二'}, { id: 2, label: '周二' },
{id: 3, label: '周三'}, { id: 3, label: '周三' },
{id: 4, label: '周四'}, { id: 4, label: '周四' },
{id: 5, label: '周五'}, { id: 5, label: '周五' },
{id: 6, label: '周六'}, { id: 6, label: '周六' }
] ]
private dataRange: Date[] = [] private dataRange: Date[] = []
private selectDate: Date[] = [] private selectDate: Date[] = []
@ -274,12 +314,16 @@ export default class extends Vue {
private postForm = Object.assign({}, defaultActivityData) private postForm = Object.assign({}, defaultActivityData)
private loading = false private loading = false
private querying = false
private allDepts = [] private allDepts = []
private typeOptions: {id: string, label: string, children?: any[]}[] = []
private typeSelected = []
private defaultProps = {
children: 'children',
label: 'label'
}
private rules = { private rules = {
name: [{ validator: this.validateRequire }], name: [{ validator: this.validateRequire }]
} }
private tempTagView?: ITagView private tempTagView?: ITagView
@ -290,14 +334,15 @@ export default class extends Vue {
} }
created() { async created() {
this.initTimes() this.initTimes()
const id = this.$route.params?.id const id = this.$route.params?.id
await this.getRemoteCategory()
await this.getRemoteDeptList()
if (id) { if (id) {
this.fetchData(id) await this.fetchData(id)
} }
this.tempTagView = Object.assign({}, this.$route) this.tempTagView = Object.assign({}, this.$route)
this.getRemoteDeptList()
} }
deactivated() { deactivated() {
@ -327,6 +372,7 @@ export default class extends Vue {
this.dataRange.push(new Date(data.beginDay)) this.dataRange.push(new Date(data.beginDay))
this.dataRange.push(new Date(data.endDay)) this.dataRange.push(new Date(data.endDay))
} }
// Just for test // Just for test
const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity' const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity'
// Set tagsview title // Set tagsview title
@ -341,13 +387,13 @@ export default class extends Vue {
private setTagsViewTitle(title: string) { private setTagsViewTitle(title: string) {
const tagView = this.tempTagView const tagView = this.tempTagView
if (tagView) { if (tagView) {
tagView.title = `${title}-${this.postForm._id}` tagView.title = `${ title }-${ this.postForm._id }`
TagsViewModule.updateVisitedView(tagView) TagsViewModule.updateVisitedView(tagView)
} }
} }
private setPageTitle(title: string) { private setPageTitle(title: string) {
document.title = `${title} - ${this.postForm._id}` document.title = `${ title } - ${ this.postForm._id }`
} }
private async submitForm() { private async submitForm() {
@ -367,6 +413,7 @@ export default class extends Vue {
this.postForm.beginDay = this.dataRange[0].getTime() this.postForm.beginDay = this.dataRange[0].getTime()
this.postForm.endDay = this.dataRange[1].getTime() this.postForm.endDay = this.dataRange[1].getTime()
} }
this.postForm.qtypes = this.$refs.tree.getCheckedKeys()
this.loading = true this.loading = true
const { data } = await saveActivity(this.postForm) const { data } = await saveActivity(this.postForm)
this.postForm = data this.postForm = data
@ -382,6 +429,7 @@ export default class extends Vue {
return false return false
} }
} }
private async onCancel() { private async onCancel() {
try { try {
await this.$confirm('确认不保存当前活动信息?', 'Warning', { await this.$confirm('确认不保存当前活动信息?', 'Warning', {
@ -389,35 +437,38 @@ export default class extends Vue {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}) })
this.$store.dispatch("delView", this.$route) this.$store.dispatch('delView', this.$route)
this.$router.go(-1) this.$router.go(-1)
} catch (e) { } catch (e) {
} }
} }
private async getRemoteDeptList() { private async getRemoteDeptList() {
const { data } = await getShops({ }) const { data } = await getShops({})
if (!data.records) return if (!data.records) return
this.allDepts = data.records this.allDepts = data.records
} }
private dataChange(val: any) { private dataChange(val: any) {
console.log(this.selectDate) console.log(this.selectDate)
} }
private initTimes() { private initTimes() {
for (let i = 0; i < 24; i++) { 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 secs = i * 3600 + j * 15 * 60
let label = sec2TimeStr(secs, false) let label = sec2TimeStr(secs, false)
this.times.push(label) this.times.push(label)
} }
} }
this.monthDays.push({id: 0, label: '全选'}) this.monthDays.push({ id: 0, label: '全选' })
for (let i = 1; i < 32; i++) { 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[]) { private timeChange(vals: string[]) {
if (vals.length > 0) { if (vals.length > 0) {
let lastVal = this.selectTime[this.selectTime.length - 1] let lastVal = this.selectTime[this.selectTime.length - 1]
@ -425,11 +476,12 @@ export default class extends Vue {
this.selectTime.pop() this.selectTime.pop()
} }
lastVal = sec2TimeStr(timeStr2Sec(lastVal), false) 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) console.log(this.selectTime)
} }
} }
private monthDaysChange(days: number[]) { private monthDaysChange(days: number[]) {
if (days.indexOf(0) >= 0) { if (days.indexOf(0) >= 0) {
this.postForm.monthDays.length = 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> </script>