|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div id="tiku">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="add" :span="24">
|
|
|
+ <el-select v-model="type" placeholder="请选择题目类型">
|
|
|
+ <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="status" placeholder="请选择题目状态">
|
|
|
+ <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button size="mini" type="primary" @click="search" style="margin-left:10px;">查询</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="add">添加</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24"
|
|
|
+ ><el-table :data="list" border style="width: 100%">
|
|
|
+ <el-table-column prop="type" label="类型">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.type == '0' ? '单选' : scope.row.type == '1' ? '多选' : scope.row.type == '2' ? '问答' : '未识别' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="topic" label="题目" show-overflow-tooltip> </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.status == '0' ? '弃用' : scope.row.status == '1' ? '正常' : '未识别' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="detailBtn(scope.row)">查看</el-button>
|
|
|
+ <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination background layout="prev, pager, next,total" :total="total" @current-change="handleCurrentChange"> </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ <el-dialog title="添加题目" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form size="mini" :model="form" ref="form" label-width="100px" class="demo-dynamic" :rules="rules">
|
|
|
+ <el-form-item prop="type" label="类型">
|
|
|
+ <el-radio-group v-model="form.type">
|
|
|
+ <el-radio :label="'0'">单选</el-radio>
|
|
|
+ <el-radio :label="'1'">多选</el-radio>
|
|
|
+ <el-radio :label="'2'">问答</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="status" label="状态">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="'0'">弃用</el-radio>
|
|
|
+ <el-radio :label="'1'">正常</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="topic" label="题目">
|
|
|
+ <el-input v-model="form.topic"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-col class="option" v-if="form.type != '2'">
|
|
|
+ <p>选项</p>
|
|
|
+ <el-form-item v-for="(item, index) in form.option" :label="sortNumber(index)" :key="index">
|
|
|
+ <el-input v-model="item.opname"></el-input><el-button @click.prevent="removeDomain(item)">删除</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="addDomain">新增选项</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitFrom">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { createNamespacedHelpers, mapState } from 'vuex';
|
|
|
+const { mapActions: question } = createNamespacedHelpers('question');
|
|
|
+export default {
|
|
|
+ name: 'tiku',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ form: {
|
|
|
+ option: [],
|
|
|
+ },
|
|
|
+ type: null,
|
|
|
+ typeoptions: [
|
|
|
+ { value: '0', label: '单选' },
|
|
|
+ { value: '1', label: '多选' },
|
|
|
+ { value: '2', label: '问答' },
|
|
|
+ ],
|
|
|
+ status: null,
|
|
|
+ statusoptions: [
|
|
|
+ { value: '0', label: '弃用' },
|
|
|
+ { value: '1', label: '正常' },
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ type: { required: true, message: '类型不能为空', trigger: 'blur' },
|
|
|
+ topic: { required: true, message: '题目不能为空', trigger: 'blur' },
|
|
|
+ status: { required: true, message: '状态不能为空', trigger: 'blur' },
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ ...question(['create', 'query', 'update', 'delete']),
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ info = { type: this.type, status: this.status };
|
|
|
+ const list = await this.query({ skip, limit, ...info });
|
|
|
+ this.$set(this, `list`, list.data);
|
|
|
+ this.$set(this, `total`, list.total);
|
|
|
+ },
|
|
|
+ detailBtn(item) {
|
|
|
+ console.log(item);
|
|
|
+ this.$set(this, `form`, item);
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ },
|
|
|
+ async deleteBtn(id) {
|
|
|
+ let res = await this.delete(id);
|
|
|
+ if (res.errcode == 0) this.search();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.search({ skip: (val - 1) * 10, limit: val * 10 });
|
|
|
+ },
|
|
|
+ async submitFrom() {
|
|
|
+ let index = 0;
|
|
|
+ for (const option of this.form.option) {
|
|
|
+ option.number = this.sortNumber(index);
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ if (this.form.type == '2') {
|
|
|
+ delete this.form.option;
|
|
|
+ }
|
|
|
+ let res;
|
|
|
+ if (this.form.id) res = await this.update(this.form);
|
|
|
+ else res = await this.create(this.form);
|
|
|
+ if (res.errcode == 0) {
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeDomain(item) {
|
|
|
+ var index = this.form.option.indexOf(item);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.form.option.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addDomain() {
|
|
|
+ this.form.option.push({
|
|
|
+ opname: '',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sortNumber(index) {
|
|
|
+ return String.fromCharCode(65 + index);
|
|
|
+ },
|
|
|
+ add() {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.form = { status: '1', option: [] };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.add {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+.add .el-button:last-child {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+/deep/.el-dialog {
|
|
|
+ width: 70%;
|
|
|
+}
|
|
|
+.option p {
|
|
|
+ width: 85px;
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 20px 5px 0;
|
|
|
+}
|
|
|
+/deep/.option .el-input {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+}
|
|
|
+</style>
|