增加活动编辑页面(未完成)
This commit is contained in:
zhl
parent
3f1b287057
commit
13bd3063e7
58
src/api/activity.ts
Normal file
58
src/api/activity.ts
Normal file
@ -0,0 +1,58 @@
|
||||
|
||||
import request from '@/utils/request'
|
||||
|
||||
export interface IActivityData {
|
||||
_id?: string
|
||||
shop: string
|
||||
name: string
|
||||
desc?: string
|
||||
qtypes: string[]
|
||||
qcount: number
|
||||
repeatType: number
|
||||
eventDays: number[]
|
||||
beginTime: number[]
|
||||
prepareTime: number
|
||||
active: number
|
||||
}
|
||||
|
||||
export const defaultActivityData: IActivityData = {
|
||||
active: 0,
|
||||
beginTime: [],
|
||||
eventDays: [],
|
||||
name: '',
|
||||
prepareTime: 0,
|
||||
qcount: 0,
|
||||
qtypes: [],
|
||||
repeatType: 0,
|
||||
shop: ''
|
||||
|
||||
}
|
||||
|
||||
export const getActivitys = (params: any) =>
|
||||
request({
|
||||
url: '/activitys',
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
|
||||
export const getActivity = (id: string, params: any) =>
|
||||
request({
|
||||
url: `/activity/${id}`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
|
||||
|
||||
export const saveActivity = (data: any) =>
|
||||
request({
|
||||
url: '/activity/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
export const deleteActivity = (id: string) =>
|
||||
request({
|
||||
url: `/activity/${id}/delete`,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
@ -84,7 +84,10 @@ export default {
|
||||
game_setting: 'Game Setting',
|
||||
game: 'Game',
|
||||
game_list: 'Game List',
|
||||
game_edit: 'Game Info'
|
||||
game_edit: 'Game Info',
|
||||
activity_list: 'Activity List',
|
||||
create_activity: 'New Activity',
|
||||
edit_activity: 'Edit Activity'
|
||||
},
|
||||
navbar: {
|
||||
logOut: 'Log Out',
|
||||
|
||||
@ -84,7 +84,10 @@ export default {
|
||||
game_setting: '游戏设置',
|
||||
game: '游戏信息',
|
||||
game_list: '游戏列表',
|
||||
game_edit: '编辑游戏'
|
||||
game_edit: '编辑游戏',
|
||||
activity_list: '活动列表',
|
||||
create_activity: '新建活动',
|
||||
edit_activity: '编辑活动'
|
||||
},
|
||||
navbar: {
|
||||
logOut: '退出登录',
|
||||
|
||||
@ -29,7 +29,38 @@ const shopRoutes: RouteConfig = {
|
||||
permissions: ['question:read'],
|
||||
icon: 'game'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'activity_list',
|
||||
component: () => import('@/views/activity/list.vue'),
|
||||
name: 'ActivityList',
|
||||
meta: {
|
||||
title: 'activity_list',
|
||||
permissions: ['activity:read'],
|
||||
icon: 'list'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'activity_new',
|
||||
component: () => import('@/views/activity/edit.vue'),
|
||||
name: 'CreateActivity',
|
||||
meta: {
|
||||
title: 'create_activity',
|
||||
icon: 'edit',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'activity_edit/:id',
|
||||
component: () => import('@/views/activity/edit.vue'),
|
||||
name: 'ActivityEditor',
|
||||
meta: {
|
||||
title: 'edit_activity',
|
||||
permissions: ['question:read'],
|
||||
elicon: 'el-icon-arrow-right',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
236
src/views/activity/edit.vue
Normal file
236
src/views/activity/edit.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
ref="postForm"
|
||||
:model="postForm"
|
||||
:rules="rules"
|
||||
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
|
||||
style="margin-bottom: 40px;"
|
||||
label="活动简介:"
|
||||
prop="desc"
|
||||
>
|
||||
<el-input
|
||||
v-model="postForm.desc"
|
||||
placeholder="输入活动简介"
|
||||
name="desc"
|
||||
required
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="onCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 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 { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
|
||||
|
||||
@Component({
|
||||
name: 'ActivityEditor',
|
||||
components: {
|
||||
MaterialInput,
|
||||
Sticky,
|
||||
UploadImage,
|
||||
RegionPicker
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
|
||||
private validateRequire = (rule: any, value: string, callback: Function) => {
|
||||
if (value === '') {
|
||||
if (rule.field === 'imageURL') {
|
||||
this.$message({
|
||||
message: 'Upload cover image is required',
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: rule.field + ' 是必填的',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
callback(new Error(rule.field + ' 是必填的'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private postForm = Object.assign({}, defaultActivityData)
|
||||
private loading = false
|
||||
private querying = false
|
||||
private allDepts = []
|
||||
private rules = {
|
||||
name: [{ validator: this.validateRequire }],
|
||||
}
|
||||
|
||||
private tempTagView?: ITagView
|
||||
|
||||
|
||||
get lang() {
|
||||
return AppModule.language
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
const id = this.$route.params?.id
|
||||
if (id) {
|
||||
this.fetchData(id)
|
||||
}
|
||||
this.tempTagView = Object.assign({}, this.$route)
|
||||
this.getRemoteDeptList()
|
||||
}
|
||||
|
||||
deactivated() {
|
||||
}
|
||||
|
||||
activated() {
|
||||
}
|
||||
|
||||
private async fetchData(id: string) {
|
||||
try {
|
||||
const { data } = await getActivity(id, { /* Your params here */ })
|
||||
console.log(data)
|
||||
this.postForm = data
|
||||
// Just for test
|
||||
const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity'
|
||||
// Set tagsview title
|
||||
this.setTagsViewTitle(title)
|
||||
// Set page title
|
||||
this.setPageTitle(title)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
private setTagsViewTitle(title: string) {
|
||||
const tagView = this.tempTagView
|
||||
if (tagView) {
|
||||
tagView.title = `${title}-${this.postForm._id}`
|
||||
TagsViewModule.updateVisitedView(tagView)
|
||||
}
|
||||
}
|
||||
|
||||
private setPageTitle(title: string) {
|
||||
document.title = `${title} - ${this.postForm._id}`
|
||||
}
|
||||
|
||||
private async submitForm() {
|
||||
const form = <Form>this.$refs.postForm
|
||||
try {
|
||||
await form.validate()
|
||||
this.loading = true
|
||||
const { data } = await saveActivity(this.postForm)
|
||||
this.postForm = data
|
||||
this.loading = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'The post save successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Submit Error!')
|
||||
return false
|
||||
}
|
||||
}
|
||||
private async onCancel() {
|
||||
try {
|
||||
await this.$confirm('确认不保存当前活动信息?', 'Warning', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
this.$store.dispatch("delView", this.$route)
|
||||
this.$router.go(-1)
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
private async getRemoteDeptList() {
|
||||
const { data } = await getShops({ })
|
||||
if (!data.records) return
|
||||
this.allDepts = data.records
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.createPost-container {
|
||||
position: relative;
|
||||
|
||||
.createPost-main-container {
|
||||
padding: 40px 45px 20px 50px;
|
||||
|
||||
.postInfo-container {
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.postInfo-container-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.word-counter {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
src/views/activity/list.vue
Normal file
279
src/views/activity/list.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- filter -->
|
||||
<el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
|
||||
<el-form-item label="关键字" prop="key">
|
||||
<el-input v-model="filterForm.key" placeholder="关键字"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺" prop="key">
|
||||
<el-select
|
||||
v-model="filterForm.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>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetFilterForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<router-link to="/shop/activity_new">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
</router-link>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%;margin-top:30px;"
|
||||
>
|
||||
<el-table-column
|
||||
width="180px"
|
||||
align="center"
|
||||
label="添加时间"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.createdAt | parseTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="店铺"
|
||||
prop="shop"
|
||||
:formatter = "formatDept"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="200px"
|
||||
label="名称"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<router-link
|
||||
:to="'/shop/activity_edit/'+row._id"
|
||||
class="link-type"
|
||||
>
|
||||
<span>{{ row.name }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="是否启用"
|
||||
prop="active"
|
||||
:formatter="formatBool"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
width="180"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="'/shop/activity_edit/'+scope.row._id">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</router-link>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
@click="handleDelete(scope)"
|
||||
>
|
||||
{{ $t('permission.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { IShopData } from '@/api/types'
|
||||
import Pagination from '@/components/Pagination/index.vue'
|
||||
import { deleteShop, getShops } from '@/api/shop'
|
||||
import { parseTime } from '@/utils'
|
||||
import { Form } from 'element-ui'
|
||||
import {
|
||||
deleteQuestion, getAllCategory,
|
||||
getAllTags,
|
||||
getQuestions,
|
||||
IQuestionData
|
||||
} from '@/api/question'
|
||||
import { deleteActivity, getActivitys } from '@/api/activity'
|
||||
|
||||
@Component({
|
||||
name: 'ActivityList',
|
||||
components: {
|
||||
Pagination
|
||||
},
|
||||
filters: {
|
||||
parseTime: (timestamp: string) => {
|
||||
return parseTime(timestamp)
|
||||
},
|
||||
parseDate: (timestamp: string) => {
|
||||
if (!timestamp) {
|
||||
return '-'
|
||||
}
|
||||
return parseTime(timestamp, '{y}-{m}-{d}')
|
||||
},
|
||||
formatCount: (count: string) => {
|
||||
if (!count) {
|
||||
return 0
|
||||
}
|
||||
return count
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue {
|
||||
private total = 0
|
||||
private list: IQuestionData[] = []
|
||||
private listLoading = true
|
||||
private allDepts = []
|
||||
private listQuery = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: '',
|
||||
shop: '',
|
||||
}
|
||||
private typeOptions: any[] = []
|
||||
private tagSet: Set<string> = new Set()
|
||||
private tagOptions: string[] = []
|
||||
private filterForm = {
|
||||
key: '',
|
||||
shop: ''
|
||||
}
|
||||
|
||||
created() {
|
||||
this.getList()
|
||||
this.getRemoteDeptList()
|
||||
this.getRemoteCategory()
|
||||
}
|
||||
|
||||
|
||||
private async getList() {
|
||||
this.listLoading = true
|
||||
const { data } = await getActivitys(this.listQuery)
|
||||
this.listLoading = false
|
||||
this.list = data.records
|
||||
this.total = data.total
|
||||
}
|
||||
|
||||
private async handleDelete(scope: any) {
|
||||
const { $index, row } = scope
|
||||
await this.$confirm('确认删除该记录?', 'Warning', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteActivity(row._id)
|
||||
this.list.splice($index, 1)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
}
|
||||
|
||||
private search() {
|
||||
this.filterData()
|
||||
}
|
||||
|
||||
private filterData() {
|
||||
this.listQuery.key = this.filterForm.key
|
||||
this.listQuery.shop = this.filterForm.shop
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}
|
||||
|
||||
private resetFilterForm() {
|
||||
const ref = <Form>this.$refs.filterForm
|
||||
ref.resetFields()
|
||||
}
|
||||
private async getRemoteDeptList() {
|
||||
const { data } = await getShops({ })
|
||||
if (!data.records) return
|
||||
this.allDepts = data.records
|
||||
}
|
||||
private async getRemoteTags() {
|
||||
let { data } = await getAllTags()
|
||||
console.log(data)
|
||||
this.tagSet = new Set(data)
|
||||
this.tagOptions = data
|
||||
}
|
||||
|
||||
private async getRemoteCategory() {
|
||||
let {data} = await getAllCategory()
|
||||
for (let cat of data) {
|
||||
let subArr = []
|
||||
for (let s of cat.children) {
|
||||
subArr.push({
|
||||
value: s._id,
|
||||
label: s.name
|
||||
})
|
||||
}
|
||||
this.typeOptions.push({
|
||||
value: cat._id,
|
||||
label: cat.name,
|
||||
children: subArr
|
||||
})
|
||||
}
|
||||
}
|
||||
private formatDept(row: number, column: number, cellValue: string, index: number) {
|
||||
let result = '未指定'
|
||||
for (const dep of this.allDepts) {
|
||||
if (dep._id == cellValue) {
|
||||
result = dep.name
|
||||
break
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
private formatBool(row: number, column: number, cellValue: boolean, index: number) {
|
||||
return cellValue? '是' : '否'
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user