diff --git a/src/router/index.js b/src/router/index.js index dd40515..09404f6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -172,6 +172,7 @@ Router.prototype.push = function push(location) { export default new Router({ base: process.env.VUE_APP_CONTEXT_PATH, + // mode: 'history', // 去掉url中的# mode: 'hash', // 去掉url中的# scrollBehavior: () => ({ y: 0 }), routes: constantRoutes diff --git a/src/views/school-paper/questionBank/index.vue b/src/views/school-paper/questionBank/index.vue index d39bf79..525e7b1 100644 --- a/src/views/school-paper/questionBank/index.vue +++ b/src/views/school-paper/questionBank/index.vue @@ -1,81 +1,171 @@ <template> <div class="app-container"> - <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> - <el-form-item label="类别id" prop="categoryId"> - <el-input - v-model="queryParams.categoryId" - placeholder="请输入类别id" + <el-form + :model="queryParams" + ref="queryForm" + size="small" + :inline="true" + v-show="showSearch" + label-width="100px" + > + <el-form-item label="题库类别" prop="categoryId"> + <el-select clearable - @keyup.enter.native="handleQuery" - /> + v-model="queryParams.categoryId" + placeholder="请选择题库类别" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '集合', value: '1' }, + { label: '不等式', value: '2' }, + { label: '函数', value: '3' }, + { label: '数列', value: '4' }, + { label: '立体几何', value: '5' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> </el-form-item> - <el-form-item label="习题种类:1填空,2选择,3解答" prop="species"> - <el-input - v-model="queryParams.species" - placeholder="请输入习题种类:1填空,2选择,3解答" + <el-form-item label="习题种类:" prop="species"> + <!-- 1填空,2选择,3解答 --> + <el-select clearable - @keyup.enter.native="handleQuery" - /> + v-model="queryParams.species" + placeholder="请选择习题种类" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '填空', value: '1' }, + { label: '选择', value: '2' }, + { label: '解答', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> </el-form-item> - <el-form-item label="阶段id" prop="phaseId"> - <el-input + <el-form-item label="阶段" prop="phaseId"> + <el-select + clearable v-model="queryParams.phaseId" - placeholder="请输入阶段id" + placeholder="请选择阶段" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '高一', value: '1' }, + { label: '高二', value: '2' }, + { label: '高三', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="类型" prop="type"> + <el-select clearable - @keyup.enter.native="handleQuery" - /> + v-model="queryParams.type" + placeholder="请选择类型" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '典例精讲', value: '1' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> </el-form-item> - <el-form-item label="强度:1基础,2中等,3提高" prop="intensity"> - <el-input - v-model="queryParams.intensity" - placeholder="请输入强度:1基础,2中等,3提高" + <el-form-item label="强度分类:" prop="intensity"> + <!-- 1基础,2中等,3提高 --> + <el-select clearable - @keyup.enter.native="handleQuery" - /> + v-model="queryParams.intensity" + placeholder="请选择强度" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '基础', value: '1' }, + { label: '中等', value: '2' }, + { label: '提高', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> </el-form-item> - <el-form-item label="题目" prop="topic"> + <!-- <el-form-item label="题目" prop="topic"> <el-input v-model="queryParams.topic" placeholder="请输入题目" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> - <el-form-item label="正确答案" prop="rightAnswers"> + </el-form-item> --> + <!-- <el-form-item label="正确答案" prop="rightAnswers"> <el-input v-model="queryParams.rightAnswers" placeholder="请输入正确答案" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> - <el-form-item label="正确答案图片" prop="rightAnswersPic"> + </el-form-item> --> + <!-- <el-form-item label="正确答案图片" prop="rightAnswersPic"> <el-input v-model="queryParams.rightAnswersPic" placeholder="请输入正确答案图片" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> - <el-form-item label="解答过程" prop="resolveCourse"> + </el-form-item> --> + <!-- <el-form-item label="解答过程" prop="resolveCourse"> <el-input v-model="queryParams.resolveCourse" placeholder="请输入解答过程" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> - <el-form-item label="解答视频" prop="resolveVideo"> + </el-form-item> --> + <!-- <el-form-item label="解答视频" prop="resolveVideo"> <el-input v-model="queryParams.resolveVideo" placeholder="请输入解答视频" clearable @keyup.enter.native="handleQuery" /> - </el-form-item> + </el-form-item> --> <el-form-item> - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> + <el-button + type="primary" + icon="el-icon-search" + size="mini" + @click="handleQuery" + >搜索</el-button + > + <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" + >重置</el-button + > </el-form-item> </el-form> @@ -88,9 +178,10 @@ size="mini" @click="handleAdd" v-hasPermi="['school-paper:questionBank:add']" - >新增</el-button> + >新增题目</el-button + > </el-col> - <el-col :span="1.5"> + <!-- <el-col :span="1.5"> <el-button type="success" plain @@ -99,9 +190,10 @@ :disabled="single" @click="handleUpdate" v-hasPermi="['school-paper:questionBank:edit']" - >修改</el-button> - </el-col> - <el-col :span="1.5"> + >修改</el-button + > + </el-col> --> + <!-- <el-col :span="1.5"> <el-button type="danger" plain @@ -110,9 +202,10 @@ :disabled="multiple" @click="handleDelete" v-hasPermi="['school-paper:questionBank:remove']" - >删除</el-button> - </el-col> - <el-col :span="1.5"> + >删除</el-button + > + </el-col> --> + <!-- <el-col :span="1.5"> <el-button type="warning" plain @@ -120,27 +213,74 @@ size="mini" @click="handleExport" v-hasPermi="['school-paper:questionBank:export']" - >导出</el-button> - </el-col> - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> + >导出</el-button + > + </el-col> --> + <right-toolbar + :showSearch.sync="showSearch" + @queryTable="getList" + ></right-toolbar> </el-row> - <el-table v-loading="loading" :data="questionBankList" @selection-change="handleSelectionChange"> + <div class="app-container-list"> + <div + class="app-container-list-item" + v-for="(item, index) in 10" + :key="index" + > + <div class="app-container-list-item-title">选择题</div> + <div + class="app-container-list-item-html" + v-html=" + `<p>1.集合A中有m个元素,若A中增加一个元素,则它的.子集个数将增加( )个.集合A中有m个元素,若A中增加一个元素,则它的.子集个数将增加( )个.集合A中有m个元素,若A中增加一个元素,则它的.子集个数将增加( )个.集合A中有m个元素,若A中增加一个元素,则它的.子集个数将增加( )个.集合A中有m个元素,若A中增加一个元素,则它的.子集个数将增加( )个.</p>` + " + ></div> + <div class="app-container-list-item-footer"> + <el-button icon="el-icon-edit-outline">编辑</el-button> + <el-button icon="el-icon-edit-delete">删除</el-button> + </div> + </div> + </div> + <!-- <el-table + v-loading="loading" + :data="questionBankList" + @selection-change="handleSelectionChange" + > <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="主键id" align="center" prop="id" v-if="true"/> + <el-table-column label="主键id" align="center" prop="id" v-if="true" /> <el-table-column label="类别id" align="center" prop="categoryId" /> - <el-table-column label="习题种类:1填空,2选择,3解答" align="center" prop="species" /> + <el-table-column + label="习题种类:1填空,2选择,3解答" + align="center" + prop="species" + /> <el-table-column label="阶段id" align="center" prop="phaseId" /> <el-table-column label="类型:1典例精讲" align="center" prop="type" /> - <el-table-column label="强度:1基础,2中等,3提高" align="center" prop="intensity" /> + <el-table-column + label="强度:1基础,2中等,3提高" + align="center" + prop="intensity" + /> <el-table-column label="题目" align="center" prop="topic" /> <el-table-column label="正确答案" align="center" prop="rightAnswers" /> - <el-table-column label="正确答案图片" align="center" prop="rightAnswersPic" /> + <el-table-column + label="正确答案图片" + align="center" + prop="rightAnswersPic" + /> <el-table-column label="解答过程" align="center" prop="resolveCourse" /> <el-table-column label="解答视频" align="center" prop="resolveVideo" /> <el-table-column label="备注" align="center" prop="remark" /> - <el-table-column label="状态:0正常,1删除" align="center" prop="status" /> - <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> + <el-table-column + label="状态:0正常,1删除" + align="center" + prop="status" + /> + <el-table-column + label="操作" + align="center" + class-name="small-padding fixed-width" + > <template slot-scope="scope"> <el-button size="mini" @@ -148,20 +288,22 @@ icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['school-paper:questionBank:edit']" - >修改</el-button> + >修改</el-button + > <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['school-paper:questionBank:remove']" - >删除</el-button> + >删除</el-button + > </template> </el-table-column> - </el-table> + </el-table> --> <pagination - v-show="total>0" + v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @@ -169,31 +311,131 @@ /> <!-- 添加或修改题库主对话框 --> - <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> - <el-form ref="form" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="类别id" prop="categoryId"> - <el-input v-model="form.categoryId" placeholder="请输入类别id" /> - </el-form-item> - <el-form-item label="习题种类:1填空,2选择,3解答" prop="species"> - <el-input v-model="form.species" placeholder="请输入习题种类:1填空,2选择,3解答" /> - </el-form-item> - <el-form-item label="阶段id" prop="phaseId"> - <el-input v-model="form.phaseId" placeholder="请输入阶段id" /> - </el-form-item> - <el-form-item label="强度:1基础,2中等,3提高" prop="intensity"> - <el-input v-model="form.intensity" placeholder="请输入强度:1基础,2中等,3提高" /> - </el-form-item> - <el-form-item label="题目" prop="topic"> - <el-input v-model="form.topic" type="textarea" placeholder="请输入内容" /> - </el-form-item> + <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body> + <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="app-container-form"> + <el-row :gutter="24"> + <el-col :span="6"> + <el-form-item label="题库类别" prop="categoryId"> + <el-select + clearable + v-model="form.categoryId" + placeholder="请选择题库类别" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '集合', value: '1' }, + { label: '不等式', value: '2' }, + { label: '函数', value: '3' }, + { label: '数列', value: '4' }, + { label: '立体几何', value: '5' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="年级阶段" prop="phaseId"> + <el-select + clearable + v-model="form.phaseId" + placeholder="请选择阶段" + @change="handleQuery" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '高一', value: '1' }, + { label: '高二', value: '2' }, + { label: '高三', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="强度分类:" prop="intensity"> + <!-- 1基础,2中等,3提高 --> + <el-select + clearable + v-model="form.intensity" + placeholder="请选择强度" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '基础', value: '1' }, + { label: '中等', value: '2' }, + { label: '提高', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="习题种类:" prop="species"> + <!-- 1填空,2选择,3解答 --> + <el-select + clearable + v-model="form.species" + placeholder="请选择习题种类" + > + <el-option + v-for="item in [ + { label: '全部', value: '' }, + { label: '填空', value: '1' }, + { label: '选择', value: '2' }, + { label: '解答', value: '3' }, + ]" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="18"> + <el-form-item label="题目" prop="topic"> + <editor v-model="form.topic" :min-height="192"/> + </el-form-item> + <el-form-item label="选项" prop="checkList"> + <div class="app-container-form-check"> + <i class="el-icon-circle-plus-outline app-container-form-check-add"></i> + <div v-for="(item,index) in form.checkList" :key="index" class="app-container-form-check-item"> + <span class="app-container-form-check-item-type">{{item.type}}</span><i class="el-icon-remove-outline app-container-form-check-item-del"></i><i class="el-icon-circle-plus-outline app-container-form-check-item-add"></i> + <editor v-model="item.html" :min-height="192"/> + </div> + </div> + </el-form-item> + </el-col> + </el-row> + <el-form-item label="正确答案" prop="rightAnswers"> - <el-input v-model="form.rightAnswers" type="textarea" placeholder="请输入内容" /> + <el-input + v-model="form.rightAnswers" + type="textarea" + placeholder="请输入内容" + /> </el-form-item> <el-form-item label="正确答案图片" prop="rightAnswersPic"> - <el-input v-model="form.rightAnswersPic" placeholder="请输入正确答案图片" /> + <el-input + v-model="form.rightAnswersPic" + placeholder="请输入正确答案图片" + /> </el-form-item> <el-form-item label="解答过程" prop="resolveCourse"> - <el-input v-model="form.resolveCourse" type="textarea" placeholder="请输入内容" /> + <el-input + v-model="form.resolveCourse" + type="textarea" + placeholder="请输入内容" + /> </el-form-item> <el-form-item label="解答视频" prop="resolveVideo"> <el-input v-model="form.resolveVideo" placeholder="请输入解答视频" /> @@ -203,7 +445,9 @@ </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button> + <el-button :loading="buttonLoading" type="primary" @click="submitForm" + >确 定</el-button + > <el-button @click="cancel">取 消</el-button> </div> </el-dialog> @@ -211,7 +455,13 @@ </template> <script> -import { listQuestionBank, getQuestionBank, delQuestionBank, addQuestionBank, updateQuestionBank } from "@/api/school-paper/questionBank"; +import { + listQuestionBank, + getQuestionBank, + delQuestionBank, + addQuestionBank, + updateQuestionBank, +} from "@/api/school-paper/questionBank"; export default { name: "QuestionBank", @@ -257,46 +507,56 @@ export default { form: {}, // 表单校验 rules: { - id: [ - { required: true, message: "主键id不能为空", trigger: "blur" } - ], + id: [{ required: true, message: "主键id不能为空", trigger: "blur" }], categoryId: [ - { required: true, message: "类别id不能为空", trigger: "blur" } + { required: true, message: "类别id不能为空", trigger: "blur" }, ], species: [ - { required: true, message: "习题种类:1填空,2选择,3解答不能为空", trigger: "blur" } + { + required: true, + message: "习题种类:1填空,2选择,3解答不能为空", + trigger: "blur", + }, ], phaseId: [ - { required: true, message: "阶段id不能为空", trigger: "blur" } + { required: true, message: "阶段id不能为空", trigger: "blur" }, ], type: [ - { required: true, message: "类型:1典例精讲不能为空", trigger: "change" } + { + required: true, + message: "类型:1典例精讲不能为空", + trigger: "change", + }, ], intensity: [ - { required: true, message: "强度:1基础,2中等,3提高不能为空", trigger: "blur" } - ], - topic: [ - { required: true, message: "题目不能为空", trigger: "blur" } + { + required: true, + message: "强度:1基础,2中等,3提高不能为空", + trigger: "blur", + }, ], + topic: [{ required: true, message: "题目不能为空", trigger: "blur" }], rightAnswers: [ - { required: true, message: "正确答案不能为空", trigger: "blur" } + { required: true, message: "正确答案不能为空", trigger: "blur" }, ], rightAnswersPic: [ - { required: true, message: "正确答案图片不能为空", trigger: "blur" } + { required: true, message: "正确答案图片不能为空", trigger: "blur" }, ], resolveCourse: [ - { required: true, message: "解答过程不能为空", trigger: "blur" } + { required: true, message: "解答过程不能为空", trigger: "blur" }, ], resolveVideo: [ - { required: true, message: "解答视频不能为空", trigger: "blur" } - ], - remark: [ - { required: true, message: "备注不能为空", trigger: "blur" } + { required: true, message: "解答视频不能为空", trigger: "blur" }, ], + remark: [{ required: true, message: "备注不能为空", trigger: "blur" }], status: [ - { required: true, message: "状态:0正常,1删除不能为空", trigger: "change" } + { + required: true, + message: "状态:0正常,1删除不能为空", + trigger: "change", + }, ], - } + }, }; }, created() { @@ -306,7 +566,7 @@ export default { /** 查询题库主列表 */ getList() { this.loading = true; - listQuestionBank(this.queryParams).then(response => { + listQuestionBank(this.queryParams).then((response) => { this.questionBankList = response.rows; this.total = response.total; this.loading = false; @@ -336,7 +596,13 @@ export default { createTime: undefined, updateTime: undefined, createBy: undefined, - updateBy: undefined + updateBy: undefined, + checkList: [ + { + type: 0, + html: '' + }, + ], }; this.resetForm("form"); }, @@ -352,9 +618,9 @@ export default { }, // 多选框选中数据 handleSelectionChange(selection) { - this.ids = selection.map(item => item.id) - this.single = selection.length!==1 - this.multiple = !selection.length + this.ids = selection.map((item) => item.id); + this.single = selection.length !== 1; + this.multiple = !selection.length; }, /** 新增按钮操作 */ handleAdd() { @@ -366,8 +632,8 @@ export default { handleUpdate(row) { this.loading = true; this.reset(); - const id = row.id || this.ids - getQuestionBank(id).then(response => { + const id = row.id || this.ids; + getQuestionBank(id).then((response) => { this.loading = false; this.form = response.data; this.open = true; @@ -376,25 +642,29 @@ export default { }, /** 提交按钮 */ submitForm() { - this.$refs["form"].validate(valid => { + this.$refs["form"].validate((valid) => { if (valid) { this.buttonLoading = true; if (this.form.id != null) { - updateQuestionBank(this.form).then(response => { - this.$modal.msgSuccess("修改成功"); - this.open = false; - this.getList(); - }).finally(() => { - this.buttonLoading = false; - }); + updateQuestionBank(this.form) + .then((response) => { + this.$modal.msgSuccess("修改成功"); + this.open = false; + this.getList(); + }) + .finally(() => { + this.buttonLoading = false; + }); } else { - addQuestionBank(this.form).then(response => { - this.$modal.msgSuccess("新增成功"); - this.open = false; - this.getList(); - }).finally(() => { - this.buttonLoading = false; - }); + addQuestionBank(this.form) + .then((response) => { + this.$modal.msgSuccess("新增成功"); + this.open = false; + this.getList(); + }) + .finally(() => { + this.buttonLoading = false; + }); } } }); @@ -402,24 +672,94 @@ export default { /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; - this.$modal.confirm('是否确认删除题库主编号为"' + ids + '"的数据项?').then(() => { - this.loading = true; - return delQuestionBank(ids); - }).then(() => { - this.loading = false; - this.getList(); - this.$modal.msgSuccess("删除成功"); - }).catch(() => { - }).finally(() => { - this.loading = false; - }); + this.$modal + .confirm('是否确认删除题库主编号为"' + ids + '"的数据项?') + .then(() => { + this.loading = true; + return delQuestionBank(ids); + }) + .then(() => { + this.loading = false; + this.getList(); + this.$modal.msgSuccess("删除成功"); + }) + .catch(() => {}) + .finally(() => { + this.loading = false; + }); }, /** 导出按钮操作 */ handleExport() { - this.download('school-paper/questionBank/export', { - ...this.queryParams - }, `questionBank_${new Date().getTime()}.xlsx`) - } - } + this.download( + "school-paper/questionBank/export", + { + ...this.queryParams, + }, + `questionBank_${new Date().getTime()}.xlsx` + ); + }, + }, }; </script> + +<style lang="scss" scoped> +.app-container { + &-list { + padding: 20px 40px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + &-item { + padding: 15px 20px; + width: calc(33% - 40px); + border-radius: 5px; + background-color: #f1efef; + margin-bottom: 20px; + &-title { + font-size: 18px; + margin-bottom: 10px; + } + &-html { + font-size: 16px; + margin-bottom: 20px; + word-break: break-all; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; /* 超出几行省略 */ + overflow: hidden; + } + &-footer { + display: flex; + justify-content: right; + button { + background: transparent; + border: none; + } + button::after { + border: none; + } + } + } + &-item:last-child { + margin-bottom: 0px; + } + } + &-form { + &-check { + &-add { + font-size: 30px; + color: #409EFF; + cursor: pointer; + } + &-item { + &-type { + display: inline-block; + padding: 4px 10px; + } + } + } + } +} + +</style> diff --git a/vue.config.js b/vue.config.js index bd232bd..bd9bb1e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -35,7 +35,8 @@ module.exports = { proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { - target: `http://192.168.0.132:8080`, + target: `https://farming.nyinhong.com/api`, + // target: `http://192.168.0.169`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: ''