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

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>
<div class="app-container">
<el-form
ref="postForm"
:model="postForm"
@ -7,6 +9,8 @@
label-width="121px"
class="form-container"
>
<el-tabs v-model="activeName">
<el-tab-pane label="基本信息" name="first">
<el-form-item label="店铺" prop="key">
<el-select
v-model="postForm.shop"
@ -190,7 +194,39 @@
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>