增加店铺挑战的管理
This commit is contained in:
zhl
parent
be24b9489d
commit
7aa1492f9d
2
.env
2
.env
@ -1 +1 @@
|
||||
VUE_APP_BASE_API = 'http://192.168.100.24:2900'
|
||||
VUE_APP_BASE_API = 'http://127.0.0.1:2900'
|
||||
|
||||
56
src/api/exam.ts
Normal file
56
src/api/exam.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import request from '@/utils/request'
|
||||
import { IRewardData } from '@/api/activity'
|
||||
|
||||
export interface IExamData {
|
||||
_id?: string
|
||||
shop: string
|
||||
name: string
|
||||
desc?: string
|
||||
qtypes: string[]
|
||||
qcount: number
|
||||
timeone: number
|
||||
beginTime: number
|
||||
endTime: number
|
||||
active: number
|
||||
rewardInfo: IRewardData[]
|
||||
}
|
||||
|
||||
export const defaultExamData: IExamData = {
|
||||
active: 0,
|
||||
beginTime: 0,
|
||||
endTime: 1924963201000,
|
||||
timeone: 5,
|
||||
name: '',
|
||||
qcount: 0,
|
||||
qtypes: [],
|
||||
shop: '',
|
||||
rewardInfo: []
|
||||
|
||||
}
|
||||
|
||||
export const getExams = (params: any) =>
|
||||
request({
|
||||
url: '/exams',
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
|
||||
export const getExam = (id: string, params: any) =>
|
||||
request({
|
||||
url: `/exam/${id}`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
|
||||
export const saveExam = (data: any) =>
|
||||
request({
|
||||
url: '/exam/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
export const deleteExam = (id: string) =>
|
||||
request({
|
||||
url: `/exam/${id}/delete`,
|
||||
method: 'post'
|
||||
})
|
||||
@ -88,6 +88,9 @@ export default {
|
||||
activity_list: 'Activity List',
|
||||
create_activity: 'New Activity',
|
||||
edit_activity: 'Edit Activity',
|
||||
exam_list: 'Exam List',
|
||||
create_exam: 'New Exam',
|
||||
edit_exam: 'Edit Exam',
|
||||
password: 'Password'
|
||||
},
|
||||
navbar: {
|
||||
|
||||
@ -88,6 +88,9 @@ export default {
|
||||
activity_list: '活动列表',
|
||||
create_activity: '新建活动',
|
||||
edit_activity: '编辑活动',
|
||||
exam_list: '挑战列表',
|
||||
create_exam: '新建挑战',
|
||||
edit_exam: '编辑挑战',
|
||||
password: '修改密码'
|
||||
},
|
||||
navbar: {
|
||||
|
||||
@ -62,6 +62,38 @@ const shopRoutes: RouteConfig = {
|
||||
elicon: 'el-icon-arrow-right',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'exam_list',
|
||||
component: () => import('@/views/exam/list.vue'),
|
||||
name: 'ExamList',
|
||||
meta: {
|
||||
title: 'exam_list',
|
||||
permissions: ['shopexam:read'],
|
||||
icon: 'list'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'exam_new',
|
||||
component: () => import('@/views/exam/edit.vue'),
|
||||
name: 'CreateExam',
|
||||
meta: {
|
||||
title: 'create_exam',
|
||||
icon: 'edit',
|
||||
permissions: ['shopexam:edit'],
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'exam_edit/:id',
|
||||
component: () => import('@/views/exam/edit.vue'),
|
||||
name: 'ExamEditor',
|
||||
meta: {
|
||||
title: 'edit_exam',
|
||||
permissions: ['shopexam:read'],
|
||||
elicon: 'el-icon-arrow-right',
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
594
src/views/exam/edit.vue
Normal file
594
src/views/exam/edit.vue
Normal file
@ -0,0 +1,594 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-form
|
||||
ref="postForm"
|
||||
:model="postForm"
|
||||
:rules="rules"
|
||||
label-width="121px"
|
||||
class="form-container"
|
||||
>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="first">
|
||||
<el-form-item label="店铺" prop="key" v-if="userLevel === 1">
|
||||
<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="dataRange"
|
||||
>
|
||||
<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-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="每题答题时间:"
|
||||
prop="timeone"
|
||||
>
|
||||
<el-input
|
||||
v-model="postForm.timeone"
|
||||
placeholder="每一题的答题时间(单位: 秒)"
|
||||
name="timeone"
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="题库分类"
|
||||
>
|
||||
<el-tree
|
||||
:data="typeOptions"
|
||||
show-checkbox
|
||||
accordion
|
||||
node-key="id"
|
||||
ref="typeTree"
|
||||
highlight-current
|
||||
:default-checked-keys="typeSelected"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="奖励设置" name="third">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="handleCreateReward"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
<el-table
|
||||
:data="postForm.rewardInfo"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
label="排名"
|
||||
prop="rank"
|
||||
:formatter="formatRank"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="奖励"
|
||||
prop="coupon"
|
||||
:formatter = "formatCoupon"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
width="180"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
@click="deleteRank(scope)"
|
||||
>
|
||||
{{ $t('permission.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="onCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="编辑奖励"
|
||||
>
|
||||
<el-form
|
||||
:model="record"
|
||||
ref="modalForm"
|
||||
:rules="modalRules"
|
||||
label-width="80px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="排名" prop="rank">
|
||||
第
|
||||
<el-input
|
||||
v-model="record.rank"
|
||||
placeholder="排名"
|
||||
type="number"
|
||||
style="width: 30%"
|
||||
/>
|
||||
名至
|
||||
<el-input
|
||||
v-model="record.rankEnd"
|
||||
placeholder="可不填"
|
||||
type="number"
|
||||
style="width: 30%"
|
||||
/>
|
||||
名
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="奖励" prop="coupon">
|
||||
<el-select
|
||||
v-model="record.coupon"
|
||||
placeholder="选择奖励"
|
||||
name="coupon"
|
||||
required
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in coupons"
|
||||
:key="item._id"
|
||||
:label="item.name"
|
||||
:value="item._id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="count">
|
||||
<el-input
|
||||
v-model="record.count"
|
||||
placeholder="数量"
|
||||
type="number"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="saveReward"
|
||||
v-permission="['shopexam:edit']"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="closeModal">
|
||||
取消
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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'
|
||||
import Sticky from '@/components/Sticky/index.vue'
|
||||
import UploadImage from '@/components/UploadImage/index.vue'
|
||||
import RegionPicker from '@/components/RegionPicker/index.vue'
|
||||
import Tinymce from '@/components/Tinymce/index.vue'
|
||||
import { getMyShop, getShops } from '@/api/shop'
|
||||
import {
|
||||
defaultExamData,
|
||||
getExam,
|
||||
saveExam
|
||||
} from '@/api/exam'
|
||||
import { getAllCategory } from '@/api/question'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { getCoupons, ICouponData } from '@/api/coupon'
|
||||
import { IShopData } from '@/api/types'
|
||||
import { ElTree } from 'element-ui/types/tree'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
import { defaultRewardData, IRewardData } from '@/api/activity'
|
||||
|
||||
@Component({
|
||||
name: 'ExamEditor',
|
||||
components: {
|
||||
MaterialInput,
|
||||
Sticky,
|
||||
UploadImage,
|
||||
RegionPicker,
|
||||
Tinymce
|
||||
}
|
||||
})
|
||||
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 activeName = 'first'
|
||||
|
||||
private dataRange: Date[] = []
|
||||
|
||||
private postForm = Object.assign({}, defaultExamData)
|
||||
private loading = false
|
||||
private allDepts: IShopData[] = []
|
||||
private typeOptions: {id: string, label: string, children?: any[]}[] = []
|
||||
private typeSelected: string[] = []
|
||||
private defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
|
||||
private rules = {
|
||||
name: [{ validator: this.validateRequire }]
|
||||
}
|
||||
|
||||
private tempTagView?: ITagView
|
||||
|
||||
private dialogType = 'new'
|
||||
private record: IRewardData = {}
|
||||
private dialogVisible = false
|
||||
private modalRules = {
|
||||
rank: [{ required: true, message: '请输入排名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
private coupons: ICouponData[] = []
|
||||
|
||||
$refs!: {
|
||||
modalForm: HTMLFormElement
|
||||
postForm: HTMLFormElement
|
||||
typeTree: ElTree<any, any>
|
||||
}
|
||||
|
||||
get userLevel() {
|
||||
return UserModule.level
|
||||
}
|
||||
|
||||
get lang() {
|
||||
return AppModule.language
|
||||
}
|
||||
|
||||
async created() {
|
||||
const id = this.$route.params?.id
|
||||
await this.getRemoteCategory()
|
||||
if (id) {
|
||||
await this.fetchData(id)
|
||||
}
|
||||
if (UserModule.level === 1) {
|
||||
await this.getRemoteDeptList()
|
||||
} else {
|
||||
this.postForm.shop = UserModule.department
|
||||
await this.fetchMyShop()
|
||||
}
|
||||
|
||||
this.tempTagView = Object.assign({}, this.$route)
|
||||
}
|
||||
|
||||
private async fetchData(id: string) {
|
||||
try {
|
||||
const { data } = await getExam(id, { /* Your params here */ })
|
||||
console.log(data)
|
||||
this.postForm = data
|
||||
if (data.beginTime !== undefined && data.endTime !== undefined) {
|
||||
this.dataRange.push(new Date(data.beginTime))
|
||||
this.dataRange.push(new Date(data.endTime))
|
||||
}
|
||||
|
||||
// Just for test
|
||||
const title = this.lang === 'zh' ? '编辑挑战' : 'Edit Exam'
|
||||
// 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() {
|
||||
try {
|
||||
await this.$refs.postForm.validate()
|
||||
if (this.dataRange.length > 1) {
|
||||
this.postForm.beginTime = this.dataRange[0].getTime()
|
||||
this.postForm.endTime = this.dataRange[1].getTime()
|
||||
}
|
||||
this.postForm.qtypes = this.$refs.typeTree.getCheckedKeys()
|
||||
this.loading = true
|
||||
const { data } = await saveExam(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
|
||||
}
|
||||
|
||||
private async fetchMyShop() {
|
||||
const { data } = await getMyShop()
|
||||
this.typeSelected = data.qtypes
|
||||
console.log(this.typeSelected)
|
||||
this.$refs.typeTree.setCheckedKeys(this.typeSelected)
|
||||
}
|
||||
|
||||
@Watch('postForm.shop')
|
||||
private onShopChange() {
|
||||
if (this.postForm.shop) {
|
||||
this.getCouponList(this.postForm.shop)
|
||||
}
|
||||
|
||||
if (this.postForm.qtypes?.length > 0) {
|
||||
this.typeSelected = this.postForm.qtypes
|
||||
} else if (this.postForm.shop) {
|
||||
let currentShop
|
||||
for (const p of this.allDepts) {
|
||||
if (p._id === this.postForm.shop) {
|
||||
currentShop = p
|
||||
break
|
||||
}
|
||||
}
|
||||
if (currentShop) {
|
||||
this.typeSelected = currentShop.qtypes
|
||||
} else {
|
||||
this.typeSelected = []
|
||||
}
|
||||
}
|
||||
this.$refs.typeTree.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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// begin of award list
|
||||
private async getCouponList(shop: string) {
|
||||
const { data } = await getCoupons({ shop })
|
||||
this.coupons = data.records
|
||||
}
|
||||
|
||||
private formatCoupon(row: number, column: number, cellValue: string, index: number) {
|
||||
let result = `未知(${cellValue})`
|
||||
const data = this.postForm.rewardInfo[index]
|
||||
for (const dep of this.coupons) {
|
||||
if (dep._id === cellValue) {
|
||||
result = dep.name
|
||||
break
|
||||
}
|
||||
}
|
||||
return `${result} x ${data.count}`
|
||||
}
|
||||
|
||||
private formatRank(row: number, column: number, cellValue: string, index: number) {
|
||||
const data = this.postForm.rewardInfo[index]
|
||||
let result = `第 ${data.rank} 名`
|
||||
if (data.rankEnd) {
|
||||
result = `第 ${data.rank} 至 ${data.rankEnd} 名`
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
private async deleteRank(scope: any) {
|
||||
const { $index } = scope
|
||||
try {
|
||||
await this.$confirm('Confirm to remove the record?', 'Warning', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
this.postForm.rewardInfo.splice($index, 1)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功, 请点击保存'
|
||||
})
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private handleCreateReward() {
|
||||
this.record = Object.assign({}, defaultRewardData)
|
||||
this.record.id = this.postForm.rewardInfo.length
|
||||
this.dialogType = 'new'
|
||||
this.dialogVisible = true
|
||||
}
|
||||
|
||||
private handleEdit(scope: any) {
|
||||
this.dialogType = 'edit'
|
||||
this.dialogVisible = true
|
||||
this.record = cloneDeep(scope.row)
|
||||
}
|
||||
|
||||
private closeModal() {
|
||||
this.dialogVisible = false
|
||||
this.$refs.modalForm.clearValidate()
|
||||
}
|
||||
|
||||
private saveReward() {
|
||||
const isEdit = this.dialogType === 'edit';
|
||||
(this.$refs.modalForm as HTMLFormElement).validate(async(valid: boolean) => {
|
||||
if (!valid) {
|
||||
this.$message.error('请按要求填写表单')
|
||||
return false
|
||||
}
|
||||
if (isEdit) {
|
||||
for (let index = 0; index < this.postForm.rewardInfo.length; index++) {
|
||||
if (this.postForm.rewardInfo[index].id === this.record.id) {
|
||||
this.postForm.rewardInfo.splice(index, 1, Object.assign({}, this.record))
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.postForm.rewardInfo.push(this.record)
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `
|
||||
奖励成功保存, 请点击保存
|
||||
`,
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
280
src/views/exam/list.vue
Normal file
280
src/views/exam/list.vue
Normal file
@ -0,0 +1,280 @@
|
||||
<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" v-if="userLevel === 1">
|
||||
<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/exam_new">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
v-permission="['shopexam:edit']"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
</router-link>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
stripe
|
||||
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"
|
||||
v-if="userLevel === 1"
|
||||
:formatter = "formatDept"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="200px"
|
||||
label="名称"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<router-link
|
||||
:to="'/shop/exam_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/exam_edit/'+scope.row._id">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
v-permission="['shopexam:edit']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</router-link>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
v-permission="['shopexam:delete']"
|
||||
@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 { getShops } from '@/api/shop'
|
||||
import { parseTime } from '@/utils'
|
||||
import { getAllCategory, getAllTags, IQuestionData } from '@/api/question'
|
||||
import { deleteExam, getExams } from '@/api/exam'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
|
||||
@Component({
|
||||
name: 'ExamList',
|
||||
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: IShopData[] = []
|
||||
private listQuery = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: '',
|
||||
shop: ''
|
||||
}
|
||||
|
||||
private typeOptions: any[] = []
|
||||
private tagSet: Set<string> = new Set()
|
||||
private tagOptions: string[] = []
|
||||
private filterForm = {
|
||||
key: '',
|
||||
shop: ''
|
||||
}
|
||||
|
||||
$refs!: {
|
||||
filterForm: HTMLFormElement
|
||||
}
|
||||
|
||||
get userLevel() {
|
||||
return UserModule.level
|
||||
}
|
||||
|
||||
async created() {
|
||||
if (UserModule.level === 1) {
|
||||
await this.getRemoteDeptList()
|
||||
} else {
|
||||
this.filterForm.shop = UserModule.department
|
||||
this.listQuery.shop = UserModule.department
|
||||
}
|
||||
await this.getRemoteCategory()
|
||||
await this.getList()
|
||||
}
|
||||
|
||||
private async getList() {
|
||||
this.listLoading = true
|
||||
const { data } = await getExams(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 deleteExam(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() {
|
||||
this.$refs.filterForm.resetFields()
|
||||
}
|
||||
|
||||
private async getRemoteDeptList() {
|
||||
const { data } = await getShops({ })
|
||||
if (!data.records) return
|
||||
this.allDepts = data.records
|
||||
}
|
||||
|
||||
private async getRemoteTags() {
|
||||
const { data } = await getAllTags()
|
||||
console.log(data)
|
||||
this.tagSet = new Set(data)
|
||||
this.tagOptions = data
|
||||
}
|
||||
|
||||
private async getRemoteCategory() {
|
||||
const { data } = await getAllCategory()
|
||||
for (const cat of data) {
|
||||
const subArr = []
|
||||
for (const 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) {
|
||||
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) {
|
||||
return cellValue ? '是' : '否'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -7,9 +7,9 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="审核状态">
|
||||
<el-select
|
||||
v-model="filterForm.publish"
|
||||
placeholder="所有"
|
||||
class="w100"
|
||||
v-model="filterForm.publish"
|
||||
placeholder="所有"
|
||||
class="w100"
|
||||
>
|
||||
<el-option value="all">所有</el-option>
|
||||
<el-option value="true">已审核</el-option>
|
||||
@ -216,9 +216,9 @@ export default class extends Vue {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await updateShopPublish({id: row._id, publish: !row.publish})
|
||||
await updateShopPublish({ id: row._id, publish: !row.publish })
|
||||
row.publish = !row.publish
|
||||
} catch(err) {
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user