553 lines
23 KiB
HTML
553 lines
23 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-radio__label {
|
|
display: none;
|
|
}
|
|
|
|
.el-checkbox__label {
|
|
display: none;
|
|
}
|
|
|
|
.el-table__expanded-cell {
|
|
background-color: #F5F7FA !important;
|
|
}
|
|
|
|
.el-table__expanded-cell:hover {
|
|
background-color: #F5F7FA !important;
|
|
}
|
|
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<el-row class="header navbar bg-white shadow">
|
|
<div class="btn-group tool-button mt5">
|
|
<div>
|
|
<el-input placeholder="请输入内容" clearable="true" v-model="pageForm.searchKeyword">
|
|
<template slot="prepend">题目名称</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group tool-button mt5">
|
|
<el-button type="primary" @click="doSearch" icon="el-icon-search"></el-button>
|
|
</div>
|
|
|
|
<div class="pull-right offscreen-right mt5">
|
|
<el-button size="medium" @click="openAdd" type="warning"><i class="el-icon-plus"></i> 添加</el-button>
|
|
</div>
|
|
</el-row>
|
|
<!-- 表格-->
|
|
<el-row class="el-table-container">
|
|
<el-table :data="tableData" size="medium" @sort-change="pageOrder">
|
|
<el-table-column type="expand">
|
|
<template slot-scope="scope">
|
|
<el-table :data="scope.row.options" size="mini" border="true">
|
|
<el-table-column label="" type="index" align="center"></el-table-column>
|
|
<el-table-column prop="option_name" label="选项" align="center"></el-table-column>
|
|
<el-table-column label="答案" align="center" width="150px">
|
|
<template slot-scope="scope_x">
|
|
<span v-if="scope_x.row.option_iswor" style="font-size: 24px;color: #67C23A"><i
|
|
class="el-icon-circle-check"></i></span>
|
|
<span v-else style="font-size: 24px;color: #F56C6C"> <i
|
|
class="el-icon-circle-close"></i></span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="序号" type="index" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{(pageForm.pageNumber - 1) * pageForm.pageSize + scope.$index + 1}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="issue_name" label="题目" align="center"
|
|
></el-table-column>
|
|
<el-table-column prop="issue_multiple" label="是否多选" align="center" width="120px">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.issue_multiple==0" type="danger">否</el-tag>
|
|
<el-tag v-if="scope.row.issue_multiple==1" type="success">是</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" align="center" width="250px">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" @click="openEdit(scope.row._id)">编辑</el-button>
|
|
<el-button size="mini" type="danger" @click="doDelete(scope.row._id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
|
|
<!-- 分页-->
|
|
<el-row class="el-pagination-container">
|
|
<el-pagination
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageNumberChange"
|
|
:current-page="pageForm.pageNumber"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size="pageForm.pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="pageForm.totalCount">
|
|
</el-pagination>
|
|
</el-row>
|
|
|
|
<!-- 新增-->
|
|
<el-dialog
|
|
title="新建题目"
|
|
:visible.sync="addDialogVisible"
|
|
:close-on-click-modal="false"
|
|
width="50%">
|
|
<el-form :model="formData" ref="addForm" label-position="right" :rules="formRules" size="small"
|
|
label-width="80px">
|
|
<el-form-item prop="issue_name" label="题目名称">
|
|
<el-input size="medium" type="textarea" placeholder="请输入题目名称"
|
|
v-model="formData.issue_name"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="issue_multiple" label="是否多选">
|
|
<el-switch
|
|
@change="multipleChange"
|
|
v-model="formData.issue_multiple"
|
|
active-color="#13ce66"
|
|
active-value="true"
|
|
inactive-value="false">
|
|
</el-switch>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row>
|
|
<el-col :span="22">
|
|
<el-divider content-position="left" class="dia"><span style="color: #3ea1ec;">题目选项</span>
|
|
</el-divider>
|
|
</el-col>
|
|
<el-col :span="2" style="text-align: right">
|
|
<el-button @click="formData.options.push({option_name:''})"
|
|
style="margin-top: 10px"
|
|
icon="el-icon-plus"
|
|
type="warning" size="mini"></el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-checkbox-group v-model="checkVal">
|
|
<el-table
|
|
:data="formData.options"
|
|
size="mini"
|
|
header-align="center"
|
|
style="width: 100%"
|
|
|
|
>
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column
|
|
prop="option_name"
|
|
label="选项"
|
|
header-align="center"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-input placeholder="请输入选项名" maxlength="100"
|
|
v-model="scope.row.option_name"
|
|
size="mini"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="wor"
|
|
label="正确答案"
|
|
header-align="center"
|
|
width="100px"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-checkbox :label="scope.$index+1" v-if="formData.issue_multiple=='true'"></el-checkbox>
|
|
<el-radio v-model="radioVal" :label="scope.$index+1"
|
|
v-if="formData.issue_multiple=='false'"></el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
header-align="center"
|
|
width="150px"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-button icon="el-icon-delete" size="mini" type="danger"
|
|
@click="delOptionX(scope)"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-checkbox-group>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="addDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doAdd" :disabled="subDa">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑-->
|
|
<el-dialog
|
|
title="编辑题目"
|
|
:visible.sync="editDialogVisible"
|
|
:close-on-click-modal="false"
|
|
width="50%">
|
|
<el-form :model="formData" ref="editForm" label-position="right" :rules="formRules" size="small"
|
|
label-width="100px">
|
|
<el-form-item prop="issue_name" label="题目名称">
|
|
<el-input size="medium" type="textarea" placeholder="请输入题目名称"
|
|
v-model="formData.issue_name"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="issue_multiple" label="是否多选">
|
|
<el-switch
|
|
@change="multipleChange"
|
|
v-model="formData.issue_multiple"
|
|
active-color="#13ce66"
|
|
active-value="true"
|
|
inactive-value="false">
|
|
</el-switch>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row>
|
|
<el-col :span="22">
|
|
<el-divider content-position="left" class="dia"><span style="color: #3ea1ec;">题目选项</span>
|
|
</el-divider>
|
|
</el-col>
|
|
<el-col :span="2" style="text-align: right">
|
|
<el-button @click="formData.options.push({option_name:''})"
|
|
style="margin-top: 10px"
|
|
icon="el-icon-plus"
|
|
type="warning" size="mini"></el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-checkbox-group v-model="checkVal">
|
|
<el-table
|
|
:data="formData.options"
|
|
size="mini"
|
|
header-align="center"
|
|
style="width: 100%"
|
|
|
|
>
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column
|
|
prop="option_name"
|
|
label="选项"
|
|
header-align="center"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-input placeholder="请输入选项名" maxlength="100"
|
|
v-model="scope.row.option_name"
|
|
size="mini"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="wor"
|
|
label="正确答案"
|
|
header-align="center"
|
|
width="100px"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-checkbox :label="scope.$index+1" v-if="formData.issue_multiple=='true'"></el-checkbox>
|
|
<el-radio v-model="radioVal" :label="scope.$index+1"
|
|
v-if="formData.issue_multiple=='false'"></el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
header-align="center"
|
|
width="150px"
|
|
align="center">
|
|
<template slot-scope="scope">
|
|
<el-button icon="el-icon-delete" size="mini" type="danger"
|
|
@click="delOptionX(scope)"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-checkbox-group>
|
|
</el-row>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="editDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doEdit" :disabled="subDa">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
subDa: false,
|
|
radioVal: '',
|
|
pageForm: {
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
totalCount: 0,
|
|
searchName: "issue_name",
|
|
searchKeyword: "",
|
|
},
|
|
formData: {options: [{}]},
|
|
tableData: [],
|
|
addDialogVisible: false,
|
|
editDialogVisible: false,
|
|
formRules: {
|
|
issue_name: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
|
issue_multiple: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
|
},
|
|
delOption: [],
|
|
checkVal: [],
|
|
}
|
|
},
|
|
methods: {
|
|
multipleChange(val) {
|
|
this.radioVal = ''
|
|
this.checkVal = []
|
|
},
|
|
delOptionX(scope) {
|
|
let self = this
|
|
if (scope.row.option_id != undefined) {
|
|
self.delOption.push(scope.row.option_id)
|
|
}
|
|
self.formData.options.splice(scope.$index, 1)
|
|
},
|
|
doDelete(id) {
|
|
let self = this;
|
|
self.$confirm('您确定要删除吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
callback: function (a, b) {
|
|
if ("confirm" == a) {//确认后再执行
|
|
$.post(base + "/platform/jsz/tkMange/delete", {id: id}
|
|
, function (data) {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: '删除成功！',
|
|
type: 'success'
|
|
});
|
|
self.pageData();
|
|
} else {
|
|
self.$message({
|
|
message: '删除失败！',
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
|
|
}
|
|
}
|
|
});
|
|
},
|
|
doEdit() {
|
|
let self = this;
|
|
if (self.formData.options.length < 0) {
|
|
self.$message({
|
|
message: '请至少添加一个选项！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
for (let i = 0; i < self.formData.options.length; i++) {
|
|
if (self.formData.options[i].option_name == undefined || self.formData.options[i].option_name == '') {
|
|
self.$message({
|
|
message: '第 ' + (i + 1) + " 个选项的名字未填写！",
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
}
|
|
if (self.formData.issue_multiple == 'true' || self.formData.issue_multiple == true) {
|
|
if (self.checkVal.length < 1) {
|
|
self.$message({
|
|
message: '请至少选择一个选项为正确答案！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
} else {
|
|
if (self.radioVal == '' || self.radioVal == undefined) {
|
|
self.$message({
|
|
message: '请选择一个选项为正确答案！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
}
|
|
|
|
self.$refs["editForm"].validate(function (valid) {
|
|
if (valid) {//表单验证通过
|
|
|
|
self.formData.options.forEach(function (value) {
|
|
value.option_iswor = false
|
|
})
|
|
if (self.formData.issue_multiple == 'true' || self.formData.issue_multiple == true) {
|
|
self.checkVal.forEach(function (value) {
|
|
self.formData.options[parseInt([value]) - 1].option_iswor = true
|
|
})
|
|
} else {
|
|
self.formData.options[parseInt([self.radioVal]) - 1].option_iswor = true
|
|
}
|
|
|
|
self.subDa = true
|
|
$.post(base + "/platform/jsz/tkMange/doEdit", {issue: JSON.stringify(self.formData)}, (data) => {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: '修改成功！',
|
|
type: 'success'
|
|
});
|
|
}else {
|
|
self.$message({
|
|
message: '修改失败！',
|
|
type: 'success'
|
|
});
|
|
}
|
|
self.editDialogVisible = false;
|
|
self.pageData();
|
|
self.subDa = false
|
|
}, "json");
|
|
}
|
|
})
|
|
},
|
|
openEdit(id) {
|
|
let self = this
|
|
self.formData = {options: [{}], issue_multiple: 'false'}
|
|
self.radioVal = ''
|
|
self.checkVal = []
|
|
$.post(base + "/platform/jsz/tkMange/findOne", {id: id}, (data) => {
|
|
if (data.code == 0) {
|
|
self.formData = data.data
|
|
if (data.data.issue_multiple) {
|
|
data.data.options.forEach(function (val, idx) {
|
|
if (val.option_iswor) {
|
|
self.checkVal.push(idx + 1)
|
|
}
|
|
})
|
|
} else {
|
|
data.data.options.forEach(function (val, idx) {
|
|
if (val.option_iswor) {
|
|
self.radioVal = idx + 1
|
|
}
|
|
})
|
|
}
|
|
self.formData.issue_multiple = self.formData.issue_multiple + ''
|
|
if (self.$refs["editForm"])
|
|
self.$refs["editForm"].resetFields();
|
|
self.editDialogVisible = true
|
|
}
|
|
}, "json");
|
|
},
|
|
openAdd() {
|
|
let self = this
|
|
self.formData = {options: [{}], issue_multiple: 'false'}
|
|
self.radioVal = ''
|
|
self.checkVal = []
|
|
if (self.$refs["addForm"])
|
|
self.$refs["addForm"].resetFields();
|
|
self.addDialogVisible = true
|
|
},
|
|
doAdd() {
|
|
let self = this;
|
|
|
|
if (self.formData.options.length < 0) {
|
|
self.$message({
|
|
message: '请至少添加一个选项！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
for (let i = 0; i < self.formData.options.length; i++) {
|
|
if (self.formData.options[i].option_name == undefined || self.formData.options[i].option_name == '') {
|
|
self.$message({
|
|
message: '第 ' + (i + 1) + " 个选项的名字未填写！",
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
}
|
|
if (self.formData.issue_multiple == 'true' || self.formData.issue_multiple == true) {
|
|
if (self.checkVal.length < 1) {
|
|
self.$message({
|
|
message: '请至少选择一个选项为正确答案！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
} else {
|
|
if (self.radioVal == '' || self.radioVal == undefined) {
|
|
self.$message({
|
|
message: '请选择一个选项为正确答案！',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
}
|
|
self.$refs["addForm"].validate(function (valid) {
|
|
if (valid) {//表单验证通过
|
|
sublime.showLoadingbar()
|
|
|
|
self.formData.options.forEach(function (value) {
|
|
value.option_iswor = false
|
|
})
|
|
if (self.formData.issue_multiple == 'true' || self.formData.issue_multiple == true) {
|
|
self.checkVal.forEach(function (value) {
|
|
self.formData.options[parseInt([value]) - 1].option_iswor = true
|
|
})
|
|
} else {
|
|
self.formData.options[parseInt([self.radioVal]) - 1].option_iswor = true
|
|
}
|
|
|
|
self.subDa = true
|
|
$.post(base + "/platform/jsz/tkMange/doAdd", {issue: JSON.stringify(self.formData)}, (data) => {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: '添加成功！',
|
|
type: 'success'
|
|
});
|
|
self.addDialogVisible = false;
|
|
self.pageData();
|
|
}
|
|
sublime.closeLoadingbar()
|
|
self.subDa = false
|
|
}, "json");
|
|
}
|
|
})
|
|
},
|
|
doSearch() {
|
|
this.pageForm.pageNumber = 1;
|
|
this.pageData();
|
|
},
|
|
pageData() {
|
|
let self = this;
|
|
sublime.showLoadingbar();
|
|
$.post(base + "/platform/jsz/tkMange/pageData", self.pageForm, function (data) {
|
|
self.tableData = data.data.list;
|
|
self.pageForm.totalCount = data.data.totalCount
|
|
sublime.closeLoadingbar()
|
|
})
|
|
},
|
|
pageOrder(column) {//按字段排序
|
|
if (column == 'ascending') {
|
|
column.order = 'ASC'
|
|
} else {
|
|
column.order = 'DESC'
|
|
}
|
|
this.pageForm.pageOrderName = column.prop;
|
|
this.pageForm.pageOrderBy = column.order;
|
|
this.pageData();
|
|
},
|
|
pageNumberChange(val) {//页码更新操作
|
|
this.pageForm.pageNumber = val;
|
|
this.pageData();
|
|
},
|
|
pageSizeChange(val) {//分页大小更新操作
|
|
this.pageForm.pageSize = val;
|
|
this.pageData();
|
|
},
|
|
},
|
|
created() {
|
|
this.pageData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#--> |