生成器相关
This commit is contained in:
yulixing
parent
336b590c2b
commit
2a2677227d
33
src/api/maker.js
Normal file
33
src/api/maker.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getMaker(params) {
|
||||
return request({
|
||||
url: '/mps/maker',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function saveMaker(data) {
|
||||
return request({
|
||||
url: '/mps/maker',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateMaker(data) {
|
||||
return request({
|
||||
url: '/mps/maker',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function delMaker(data) {
|
||||
return request({
|
||||
url: '/mps/maker',
|
||||
method: 'delete',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -75,7 +75,6 @@ const gamesRouter = {
|
||||
name: 'GameDetailsSettings',
|
||||
meta: { title: '配置' }
|
||||
},
|
||||
|
||||
{
|
||||
path: 'settings/achievement',
|
||||
component: () => import('@/views/games/details/settings/achievement'),
|
||||
@ -196,6 +195,18 @@ const gamesRouter = {
|
||||
component: () => import('@/views/games/details/others/mpTest'),
|
||||
name: 'GameDetailsMpTest',
|
||||
meta: { title: '心理测试' }
|
||||
},
|
||||
{
|
||||
path: 'maker',
|
||||
component: () => import('@/views/games/details/maker/index'),
|
||||
name: 'GameDetailsMakerEdit',
|
||||
meta: { title: '生成器列表' }
|
||||
},
|
||||
{
|
||||
path: 'maker/edit',
|
||||
component: () => import('@/views/games/details/maker/edit'),
|
||||
name: 'GameDetailsMakerEdit',
|
||||
meta: { title: '生成器编辑' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
352
src/views/games/details/maker/edit.vue
Normal file
352
src/views/games/details/maker/edit.vue
Normal file
@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="main-content">
|
||||
<el-form :model="makerForm" :rules="makerFormRules" label-width="170px" ref="makerForm">
|
||||
<el-form-item label="测验题目" prop="title">
|
||||
<el-input style="width: 70%" v-model="makerForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="测验描述" prop="desc">
|
||||
<el-input style="width: 70%" v-model="makerForm.desc" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文本模板" prop="template">
|
||||
<el-input rows="10" style="width: 70%" type="textarea" v-model="makerForm.template" />
|
||||
<span class="ipt-tip">模板说明：</span>
|
||||
<span class="ipt-tip">[n0]~[n9]表示用户填写内容</span>
|
||||
<span class="ipt-tip">[i0]~[i9]表示清单中随机一项</span>
|
||||
<span class="ipt-tip">[%]表示百分比，所有[%]合计起来是100</span>
|
||||
<span class="ipt-tip">[0]~[00000000]表示随机数字，每个零表示一位数</span>
|
||||
<span class="ipt-tip">例：[n0]的猫咪吃了[0]个[i0]。</span>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:key="key"
|
||||
:label="`清单(i${key})`"
|
||||
prop="list"
|
||||
v-for="(val, key) in makerForm.list"
|
||||
>
|
||||
<el-input rows="5" style="width: 70%" type="textarea" v-model="val.text" />
|
||||
<span class="ipt-tip">多项使用','分隔。</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="save" type="primary">保存</el-button>
|
||||
<el-button @click="preview" type="warning">预览</el-button>
|
||||
<el-button @click="reset('makerForm')" type="success">重置</el-button>
|
||||
<el-button @click="del" type="danger" v-if="makerForm._id">删除</el-button>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<el-dialog :before-close="closeModal" :visible.sync="modalVisible" title="预览" width="30%">
|
||||
<p>{{previewText}}</p>
|
||||
<span class="dialog-footer" slot="footer">
|
||||
<el-button @click="modalVisible = false" type="primary">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { getMaker, saveMaker, updateMaker, delMaker } from '@/api/maker'
|
||||
const regList = /\[i(\d+)\]/g
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsMakerEdit',
|
||||
data() {
|
||||
return {
|
||||
makerId: '',
|
||||
makerForm: {
|
||||
title: '',
|
||||
desc: '',
|
||||
template: '',
|
||||
list: {}
|
||||
},
|
||||
makerFormRules: {
|
||||
title: [{ required: true, message: '请填写测试标题', trigger: 'blur' }],
|
||||
desc: [{ required: true, message: '请填写测试描述', trigger: 'blur' }],
|
||||
template: [
|
||||
{ required: true, message: '请填写内容模板文字', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
modalVisible: false,
|
||||
previewText: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.query.id) {
|
||||
this.makerId = this.$route.query.id
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// makerForm() {
|
||||
// this.getBreadcrumb()
|
||||
// }
|
||||
'makerForm.template': {
|
||||
handler: function(val) {
|
||||
let key = 0
|
||||
let res = regList.exec(val)
|
||||
let list = JSON.parse(JSON.stringify(this.makerForm.list))
|
||||
let newList = {}
|
||||
while (res) {
|
||||
key = res[1]
|
||||
if (!list[key]) {
|
||||
newList[key] = { text: '' }
|
||||
} else {
|
||||
newList[key] = list[key]
|
||||
}
|
||||
res = regList.exec(val)
|
||||
}
|
||||
this.makerForm.list = JSON.parse(JSON.stringify(newList))
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// api
|
||||
getMaker(params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getMaker(params)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
saveMaker(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
saveMaker(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
updateMaker(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
updateMaker(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
delMaker(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
delMaker(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
// methods
|
||||
async getData() {
|
||||
try {
|
||||
const data = await this.getMaker({ _id: this.makerId })
|
||||
this.makerForm = data.result
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
async save() {
|
||||
try {
|
||||
const isValid = await this.validate('makerForm')
|
||||
if (!isValid) {
|
||||
this.$message.error('请按要求填写表单!')
|
||||
return
|
||||
}
|
||||
if (this.makerForm._id) {
|
||||
// 更新
|
||||
const data = await this.updateMaker({
|
||||
_id: this.makerForm._id,
|
||||
title: this.makerForm.title,
|
||||
desc: this.makerForm.desc,
|
||||
template: this.makerForm.template,
|
||||
list: this.makerForm.list
|
||||
})
|
||||
this.$message.success('数据更新成功！')
|
||||
} else {
|
||||
// 保存
|
||||
const data = await this.saveMaker({
|
||||
title: this.makerForm.title,
|
||||
desc: this.makerForm.desc,
|
||||
template: this.makerForm.template,
|
||||
list: this.makerForm.list
|
||||
})
|
||||
console.log('成功保存')
|
||||
this.makerId = data.result._id
|
||||
this.$message.success('数据保存成功！')
|
||||
}
|
||||
this.clearValidate('makerForm')
|
||||
this.getData()
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
async del() {
|
||||
try {
|
||||
this.$confirm('是否确认删除该测试?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
const data = await this.delMaker({
|
||||
_id: this.makerId
|
||||
})
|
||||
this.$message.success('数据已删除！')
|
||||
this.goBack()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
reset(formName) {
|
||||
this.$confirm('是否确认清空表单?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
this.$refs[formName].resetFields()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消重置！')
|
||||
})
|
||||
},
|
||||
validate(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs[formName].validate(valid => {
|
||||
resolve(valid)
|
||||
})
|
||||
})
|
||||
},
|
||||
clearValidate(formName) {
|
||||
this.$refs[formName].clearValidate()
|
||||
},
|
||||
templateChange() {
|
||||
let key = 0
|
||||
let res = regList.exec(this.makerForm.template)
|
||||
let list = JSON.parse(JSON.stringify(this.makerForm.list))
|
||||
let newList = {}
|
||||
while (res) {
|
||||
key = res[1]
|
||||
if (!list[key]) {
|
||||
newList[key] = { text: '' }
|
||||
} else {
|
||||
newList[key] = list[key]
|
||||
}
|
||||
res = regList.exec(this.makerForm.template)
|
||||
}
|
||||
this.makerForm.list = JSON.parse(JSON.stringify(newList))
|
||||
},
|
||||
preview() {
|
||||
this.makeText()
|
||||
this.openModal()
|
||||
},
|
||||
makeText() {
|
||||
let text = this.makerForm.template
|
||||
// 模拟用户输入
|
||||
const users = [
|
||||
'妲己',
|
||||
'蔡文姬',
|
||||
'小乔',
|
||||
'孙尚香',
|
||||
'鲁班七号',
|
||||
'李白',
|
||||
'兰陵王',
|
||||
'嫦娥',
|
||||
'武则天',
|
||||
'王昭君'
|
||||
]
|
||||
const regUser = /\[n(\d+)\]/g
|
||||
const regList = /\[i(\d+)\]/g
|
||||
const regPer1 = /\[%\]/g
|
||||
const regPer2 = /\[∞\]/g
|
||||
const regNum = /\[(0+)\]/g
|
||||
|
||||
// 替换用户输入
|
||||
while (regUser.test(text)) {
|
||||
text = text.replace(regUser, (match, p1) => {
|
||||
return users[p1] || '天外来客'
|
||||
})
|
||||
}
|
||||
|
||||
// 替换清单
|
||||
while (regList.test(text)) {
|
||||
text = text.replace(regList, (match, p1) => {
|
||||
const list = this.makerForm.list[p1].text.split(',')
|
||||
const idx = Math.floor(Math.random() * list.length)
|
||||
return list[idx] || '天外来客'
|
||||
})
|
||||
}
|
||||
|
||||
//替换百分比
|
||||
let countP = 0
|
||||
while (regPer1.test(text)) {
|
||||
text = text.replace(regPer1, (match, p1) => {
|
||||
countP++
|
||||
return '[∞]'
|
||||
})
|
||||
}
|
||||
const nums = this.randomNum(countP, 100)
|
||||
let idx = 0
|
||||
while (regPer2.test(text)) {
|
||||
text = text.replace(regPer2, (match, p1) => {
|
||||
return nums[idx++] + '%'
|
||||
})
|
||||
}
|
||||
|
||||
// 替换随机数字
|
||||
while (regNum.test(text)) {
|
||||
text = text.replace(regNum, (match, p1) => {
|
||||
return Math.floor(Math.random() * Math.pow(10, p1.length))
|
||||
})
|
||||
}
|
||||
this.previewText = text
|
||||
},
|
||||
// 生成随机数
|
||||
randomNum(n, v) {
|
||||
var i,
|
||||
s = 0,
|
||||
r = [],
|
||||
x = v
|
||||
for (i = 1; i < n; i++) {
|
||||
x = Math.random() * x
|
||||
r.push(x.toFixed(0))
|
||||
s += x
|
||||
x = v - s
|
||||
}
|
||||
r.push(x.toFixed(0))
|
||||
console.log('4', s, x, r)
|
||||
return r
|
||||
},
|
||||
openModal() {
|
||||
this.modalVisible = true
|
||||
},
|
||||
closeModal() {
|
||||
this.modalVisible = false
|
||||
},
|
||||
goBack() {
|
||||
this.$router.push('/games/details/maker')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
190
src/views/games/details/maker/index.vue
Normal file
190
src/views/games/details/maker/index.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- filter -->
|
||||
<!-- <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
|
||||
<el-form-item label="姓名" prop="fullname">
|
||||
<el-input v-model="filterForm.fullname" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型" prop="type">
|
||||
<el-select v-model="filterForm.type" placeholder="请选择操作类型">
|
||||
<el-option v-for="(item,index) in types" :key="index" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="reset('filterForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>-->
|
||||
<!-- toolbar -->
|
||||
<div class="toolbar clearfix">
|
||||
<div class="l fl">
|
||||
<el-button @click="create" type="primary">新增</el-button>
|
||||
</div>
|
||||
|
||||
<div class="r fr">
|
||||
<el-button @click="refresh" type="primary">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- table -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@row-click="rowClick"
|
||||
class="table mgt-20 mgb-20"
|
||||
style="width: 100%"
|
||||
v-loading="isLoaded"
|
||||
>
|
||||
<el-table-column label="测试名称" prop="title" show-overflow-tooltip />
|
||||
<el-table-column label="测试描述" prop="desc" show-overflow-tooltip />
|
||||
<el-table-column fixed="right" label="操作" prop="name" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="view(scope.row)" size="small" type="text">查看</el-button>
|
||||
<el-button @click.stop="del(scope.row)" size="small" type="text">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- pagination -->
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:hide-on-single-page="true"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="pageChange"
|
||||
@size-change="sizeChange"
|
||||
class="al-r"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMaker, saveMaker, updateMaker, delMaker } from '@/api/maker'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsMakerList',
|
||||
|
||||
data() {
|
||||
return {
|
||||
// filter
|
||||
// filterForm: {
|
||||
// fullname: '',
|
||||
// type: ''
|
||||
// },
|
||||
// toolbar
|
||||
// batch: {
|
||||
// show: false,
|
||||
// txt: '批量操作'
|
||||
// },
|
||||
// table
|
||||
isLoaded: false,
|
||||
tableData: [],
|
||||
// pagination
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// filter
|
||||
// search() {
|
||||
// this.getData()
|
||||
// },
|
||||
// reset(formName) {
|
||||
// this.$refs[formName].resetFields()
|
||||
// },
|
||||
// toolbar
|
||||
getMaker(params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getMaker(params)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
console.log('ddddddddd', data)
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
delMaker(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
delMaker(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) resolve(data)
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
// toolbar
|
||||
create() {
|
||||
this.$router.push('/games/details/maker/edit')
|
||||
},
|
||||
refresh() {
|
||||
this.getData()
|
||||
},
|
||||
// table
|
||||
rowClick(row, column, event) {
|
||||
this.view(row)
|
||||
},
|
||||
// table
|
||||
async getData() {
|
||||
try {
|
||||
this.isLoaded = true
|
||||
const data = await this.getMaker({
|
||||
pageSize: this.pageSize,
|
||||
currentPage: this.currentPage
|
||||
})
|
||||
console.log('da ta', data)
|
||||
this.tableData = data.result
|
||||
console.log(this.tableData)
|
||||
this.total = data.total
|
||||
this.isLoaded = false
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
view(row) {
|
||||
this.$router.push(`/games/details/maker/edit?id=${row._id}`)
|
||||
},
|
||||
async del(row) {
|
||||
try {
|
||||
this.$confirm('是否确认删除该测试?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
const data = await this.delMaker({
|
||||
_id: row._id
|
||||
})
|
||||
this.$message.success('数据已删除！')
|
||||
this.getData()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
rowClick(row) {
|
||||
this.view(row)
|
||||
},
|
||||
// pagination
|
||||
sizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
pageChange(val) {
|
||||
this.currentPage = val
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user