updata

src/components/tinymce/Index.vue

@@ -12,8 +12,8 @@ export default {
   data() {
     return {
       init: {
-        min_height: 400,
-        max_height: 400,
+        min_height: 200,
+        max_height: 200,
         menubar: false,
         statusbar: false,
         plugins: 'table autoresize charmap fullscreen hr lists link code preview quickbars',

src/modules/question/api.js

@@ -25,11 +25,17 @@ export function updateQuestionCategory(id, data) {
   return httpRequest.put(`/api/qbs/admin/v1/question-category/${id}`, data)
 }
 /**
- * 获取应用列表
+ * 知识点标签搜索
  */
 export function searchTag(params) {
   return httpRequest.get('/api/qbs/admin/v1/knowledge-point/search/x1', { params })
 }
+/**
+ * 新建试题
+ */
+export function addQuestion(data) {
+  return httpRequest.post('/api/qbs/admin/v1/question', data)
+}
 
 /**
  * 获取应用详情

src/modules/question/components/Detail.vue

 <template>
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="题库范围" prop="permission">
+        <el-radio v-model="ruleForm.permission" label="1">我的题库</el-radio>
+        <el-radio v-model="ruleForm.permission" label="2">公共题库</el-radio>
+      </el-form-item>
       <el-form-item label="题目类型" prop="question_type">
         <!-- <el-input v-model="ruleForm.name"></el-input> -->
         <el-select v-model="ruleForm.question_type" placeholder="请选择活题目类型" @change="changeQuestionType">
@@ -20,34 +24,61 @@
       <el-form-item label="题干内容" prop="question_content" required>
         <v-editor v-model="ruleForm.question_content"></v-editor>
       </el-form-item>
-      <el-form-item label="选项" prop="delivery" required>
+      <el-form-item label="选项" prop="question_options" v-if="ruleForm.question_type != 3">
         <!-- 单选题 -->
-        <radio v-if="ruleForm.question_type == 1"></radio>
+        <radio ref="options" v-if="ruleForm.question_type == 1"></radio>
         <!-- 多选题 -->
-        <checkbox v-if="ruleForm.question_type == 2"></checkbox>
+        <checkbox ref="options" v-if="ruleForm.question_type == 2"></checkbox>
         <!-- 判断题 -->
-        <judgment v-if="ruleForm.question_type == 6"></judgment>
+        <judgment ref="options" v-if="ruleForm.question_type == 6"></judgment>
       </el-form-item>
       <el-form-item label="标签" prop="type">
-        <el-input v-model="ruleForm.type"></el-input>
+        <el-input v-model="ruleForm.question_tag"></el-input>
       </el-form-item>
       <el-form-item label="题目解析" prop="question_analysis">
         <v-editor v-model="ruleForm.question_analysis"></v-editor>
       </el-form-item>
       <el-form-item label="试题分类" prop="question_category">
-        <el-select v-model="ruleForm.question_category" placeholder="请选择试题分类">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
+        <div class="filter-input">
+          <el-select v-model="ruleForm.question_category" placeholder="请选择试题分类">
+            <el-option v-if="!dialogVisible" :label="treeValue.name" :value="treeValue.id"></el-option>
+          </el-select>
+          <div class="pop" @click="dialogVisible = true"></div>
+        </div>
       </el-form-item>
       <el-form-item label="知识点" prop="knowledge_point">
-        <el-input v-model="ruleForm.knowledge_point"></el-input>
+        <el-select
+          v-model="ruleForm.knowledge_point"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入关键词"
+          :remote-method="remoteMethod">
+          <el-option
+            v-for="item in pointOptions"
+            :key="item.id"
+            :label="item.title"
+            :value="item.id">
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-        <el-button @click="resetForm('ruleForm')">重置</el-button>
+        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
       </el-form-item>
     </el-form>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+      >
+      <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -55,20 +86,31 @@ import VEditor from '@/components/tinymce/Index.vue'
 import Radio from '../components/QTypeRadio.vue'
 import Checkbox from '../components/QTypeCheckbox.vue'
 import Judgment from '../components/QTypeJudgment.vue'
+import { getQuestionCategory, searchTag, addQuestion } from '../api'
 export default {
   components: { VEditor, Radio, Checkbox, Judgment },
   data() {
     return {
+      pointOptions: '',
+      treeList: [],
+      defaultProps: '',
+      treeValue: {
+        name: '',
+        id: ''
+      },
+      dialogVisible: false,
       ruleForm: {
+        permission: '1',
         project_prefix: 'x1',
         question_type: 1,
         question_difficulty: '',
         question_title: '',
         question_content: '',
-        question_options: [],
+        // question_options: [],
         question_analysis: '',
         question_category: '',
-        knowledge_point: ''
+        knowledge_point: '',
+        question_tag: ''
       },
       qType: [
         { label: '单选题', value: 1 },
@@ -86,15 +128,30 @@ export default {
         question_content: [{ required: true, message: '请填写题干内容', trigger: 'blur' }],
         question_analysis: [{ required: true, message: '请填写题干内容', trigger: 'blur' }],
         question_category: [{ required: true, message: '请选择试题分类', trigger: 'change' }],
-        knowledge_point: [{ required: true, message: '请输入题目知识点内容', trigger: 'blur' }]
+        knowledge_point: [{ required: true, message: '请输入题目知识点内容', trigger: 'blur' }],
+        question_options: [{ required: true, message: ' ', trigger: 'blur' }]
       }
     }
   },
+  mounted() {
+    this.getTreeList()
+  },
   methods: {
     submitForm(formName) {
+      if (parseInt(this.ruleForm.question_type) !== 3) {
+        const isValue = this.$refs.options.datas.find(item => item.option === '')
+        if (!isValue) this.ruleForm.question_options = this.$refs.options.datas
+      }
       this.$refs[formName].validate(valid => {
         if (valid) {
-          alert('submit!')
+          // alert('submit!')
+          addQuestion(this.ruleForm).then(res => {
+            if (res.code === 0) {
+              this.$router.push({
+                path: '/question/list'
+              })
+            }
+          })
         } else {
           console.log('error submit!!')
           return false
@@ -106,10 +163,73 @@ export default {
     },
     changeQuestionType() {
       console.log(this.ruleForm.question_type)
+    },
+    // 点击选中tree
+    handleNodeClick(data) {
+      this.treeValue.name = data.label
+      this.treeValue.id = data.id
+    },
+    // 关闭选择tree弹窗
+    handleClose() {
+      this.dialogVisible = false
+    },
+    // tree确认选择
+    dialogConfirm() {
+      this.dialogVisible = false
+      this.ruleForm.question_category = this.treeValue.id
+    },
+    // 获取tree列表
+    getTreeList() {
+      getQuestionCategory('x1').then(res => {
+        if (Array.isArray(res.data)) {
+          this.initTree(res.data)
+        }
+      })
+    },
+    // 过滤数据 变成tree组件需要的数据
+    initTree(data) {
+      this.treeList = data.reduce((a, b) => {
+        b.label = b.category_name
+        if (b.children.length) {
+          setData(b.children)
+        }
+        a.push(b)
+        return a
+      }, [])
+      function setData(item) {
+        return item.map(element => {
+          if (element.children.length) {
+            setData(element.children)
+            element.label = element.category_name
+          } else {
+            element.label = element.category_name
+          }
+          return element
+        })
+      }
+    },
+    // 知识点搜索
+    remoteMethod(query) {
+      console.log(query)
+      searchTag({ title: query }).then(res => {
+        this.pointOptions = res.data.data
+        console.log(res, 'query')
+      })
     }
   }
 }
 </script>
 
 <style lang="scss">
+.filter-input {
+  position: relative;
+  .pop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 100%;
+    cursor: pointer;
+  }
+}
 </style>

src/modules/question/components/QTypeCheckbox.vue

 <template>
   <div class="radio-box">
-    <template v-for="(item, index) in radioList">
+    <template v-for="(item, index) in datas">
       <div class="opt" :key="index">
-        <el-checkbox v-model="radioValue" :label="index">
+        <el-checkbox v-model="checkboxValue" :label="index" @change="checkboxChange">
           <el-tag>{{ A_Z()[index] }}</el-tag>
-          <el-input v-model="item.value" maxlength="80" show-word-limit></el-input>
+          <el-input v-model="item.option" maxlength="80" show-word-limit></el-input>
         </el-checkbox>
-        <i class="el-icon-remove-outline icon-style" v-if="index != radioList.length - 1" @click="remove(index)"></i>
+        <i class="el-icon-remove-outline icon-style" v-if="index != datas.length - 1" @click="remove(index)"></i>
         <i class="el-icon-circle-plus-outline icon-style" v-else @click="add"></i>
       </div>
     </template>
@@ -17,27 +17,33 @@
 export default {
   data() {
     return {
-      radioValue: [],
-      radioList: [
+      checkboxValue: [0],
+      datas: [
         {
-          value: ''
+          checked: true,
+          option: ''
         },
         {
-          value: ''
+          checked: false,
+          option: ''
         },
         {
-          value: ''
+          checked: false,
+          option: ''
+        },
+        {
+          checked: false,
+          option: ''
         }
-      ],
-      ruleForm: ''
+      ]
     }
   },
   methods: {
     add() {
-      this.radioList.push({ value: '' })
+      this.datas.push({ option: '', checked: false })
     },
     remove(index) {
-      this.radioList.splice(index, 1)
+      this.datas.splice(index, 1)
     },
     A_Z() {
       const result = []
@@ -45,6 +51,16 @@ export default {
         result.push(String.fromCharCode(65 + i))
       }
       return result
+    },
+    checkboxChange() {
+      this.datas.map(item => {
+        item.checked = false
+        return item
+      })
+      this.checkboxValue.forEach(item => {
+        this.datas[item].checked = true
+      })
+      console.log(this.datas)
     }
   }
 }

src/modules/question/components/QTypeJudgment.vue

 <template>
   <div>
-      <el-radio v-model="radio" label="1"><i class="el-icon-check"></i></el-radio>
-      <el-radio v-model="radio" label="2"><i class="el-icon-close"></i></el-radio>
+    <el-radio v-model="radio" label="0" @change="radioChange"><i class="el-icon-check"></i></el-radio>
+    <el-radio v-model="radio" label="1" @change="radioChange"><i class="el-icon-close"></i></el-radio>
   </div>
 </template>
 
@@ -9,7 +9,27 @@
 export default {
   data() {
     return {
-      radio: '1'
+      radio: '0',
+      datas: [
+        {
+          option: '正确',
+          checked: true
+        },
+        {
+          option: '错误',
+          checked: false
+        }
+      ]
+    }
+  },
+  methods: {
+    radioChange() {
+      this.datas.map(item => {
+        item.checked = false
+        this.datas[this.radio].checked = true
+        return item
+      })
+      console.log(this.datas, 'datas')
     }
   }
 }

src/modules/question/components/QTypeRadio.vue

 <template>
   <div class="radio-box">
-    <template v-for="(item, index) in radioList">
+    <template v-for="(item, index) in datas">
       <div class="opt" :key="index">
-        <el-radio v-model="radioValue" :label="index">
+        <el-radio v-model="radioValue" :label="index" @change="radioChange">
           <el-tag>{{ A_Z()[index] }}</el-tag>
-          <el-input v-model="item.value" maxlength="80" show-word-limit></el-input>
+          <el-input v-model="item.option" maxlength="80" show-word-limit></el-input>
         </el-radio>
-        <i class="el-icon-remove-outline icon-style" v-if="index != radioList.length - 1" @click="remove(index)"></i>
+        <i class="el-icon-remove-outline icon-style" v-if="index != datas.length - 1" @click="remove(index)"></i>
         <i class="el-icon-circle-plus-outline icon-style" v-else @click="add"></i>
       </div>
     </template>
@@ -19,15 +19,18 @@ export default {
   data() {
     return {
       radioValue: 0,
-      radioList: [
+      datas: [
         {
-          value: ''
+          checked: true,
+          option: ''
         },
         {
-          value: ''
+          checked: false,
+          option: ''
         },
         {
-          value: ''
+          checked: false,
+          option: ''
         }
       ],
       ruleForm: ''
@@ -35,10 +38,10 @@ export default {
   },
   methods: {
     add() {
-      this.radioList.push({ value: '' })
+      this.datas.push({ option: '', checked: false })
     },
     remove(index) {
-      this.radioList.splice(index, 1)
+      this.datas.splice(index, 1)
     },
     A_Z() {
       const result = []
@@ -46,6 +49,13 @@ export default {
         result.push(String.fromCharCode(65 + i))
       }
       return result
+    },
+    radioChange() {
+      this.datas.map(item => {
+        item.checked = false
+        this.datas[this.radioValue].checked = true
+        return item
+      })
     }
   }
 }

src/modules/question/views/Create.vue

 <template>
   <app-card>
-    <detail>
-      <!-- 单选题 -->
-      <!-- <radio></radio> -->
-      <!-- 多选题 -->
-      <!-- <checkbox></checkbox> -->
-      <!-- 判断题 -->
-      <!-- <judgment></judgment> -->
-    </detail>
-    <!-- <v-editor></v-editor> -->
+    <detail></detail>
   </app-card>
 </template>
 

src/modules/question/views/List.vue

@@ -8,7 +8,7 @@
       <template v-slot:input-filter>
         <div class="filter-input">
           <el-input v-model="filterInput" placeholder="请选择"></el-input>
-          <div class="pop"></div>
+          <div class="pop" @click="dialogVisible = true"></div>
         </div>
       </template>
       <div class="operate-btn">
@@ -23,6 +23,18 @@
         <el-button type="text" @click="handleSettings(row)">查看详情</el-button>
         <el-button type="text" @click="handleSettings(row)">删除</el-button>
       </template>
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="handleClose"
+        >
+        <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
+        </span>
+      </el-dialog>
     </app-list>
   </app-card>
 </template>
@@ -33,9 +45,16 @@ import { getAppList, getQuestionCategory } from '../api'
 export default {
   data() {
     return {
+      dialogVisible: false,
       visible: false,
       radio: '1',
-      filterInput: ''
+      filterInput: '',
+      treeList: [],
+      defaultProps: '',
+      treeValue: {
+        name: '',
+        id: ''
+      }
     }
   },
   computed: {
@@ -97,27 +116,81 @@ export default {
           httpRequest: getAppList,
           params: {
             permission: this.radio,
-            project_prefix: 'x1'
+            project_prefix: 'x1',
+            question_category: this.treeValue.id
+          },
+          callback(data) {
+            const questionType = {
+              1: '单选题',
+              2: '多选题',
+              3: '简答题',
+              5: '案例题',
+              6: '判断题',
+              7: '实操题',
+              8: '情景题'
+            }
+            const questionDifficulty = {
+              1: '易',
+              2: '中',
+              3: '难'
+            }
+            return data.data.reduce((a, b) => {
+              b.question_type = questionType[b.question_type]
+              b.question_difficulty = questionDifficulty[b.question_difficulty]
+              a.push(b)
+              return a
+            }, [])
           }
         },
         columns: [
-          { label: '序号', prop: 'order' },
-          { label: '题目类型', prop: 'type' },
-          { label: '试题分类', prop: 'sort' },
-          { label: '题目目标', prop: 'title' },
-          { label: '知识点', prop: 'points' },
-          { label: '等级难度', prop: 'grade' },
-          { label: '更新人', prop: 'update_people' },
-          { label: '更新时间', prop: 'update_time' },
+          { type: 'selection', minWidth: '50px', fixed: 'left' },
+          { label: '序号', prop: 'question_order' },
+          { label: '题目类型', prop: 'question_type' },
+          { label: '试题分类', prop: 'question_category.category_name' },
+          { label: '题目标题', prop: 'question_title' },
+          { label: '知识点', prop: 'knowledge_point.title' },
+          { label: '等级难度', prop: 'question_difficulty' },
+          { label: '更新人', prop: 'operator.nickname' },
+          { label: '更新时间', prop: 'updated_at' },
           { label: '操作', slots: 'table-x', align: 'right' }
         ]
       }
     }
   },
   mounted() {
-    getQuestionCategory('x1').then()
+    this.getTreeList()
   },
   methods: {
+    // 获取tree列表
+    getTreeList() {
+      getQuestionCategory('x1').then(res => {
+        if (Array.isArray(res.data)) {
+          this.initTree(res.data)
+        }
+      })
+    },
+    // 过滤数据 变成tree组件需要的数据
+    initTree(data) {
+      this.treeList = data.reduce((a, b) => {
+        b.label = b.category_name
+        if (b.children.length) {
+          setData(b.children)
+        }
+        a.push(b)
+        return a
+      }, [])
+      function setData(item) {
+        return item.map(element => {
+          if (element.children.length) {
+            setData(element.children)
+            element.label = element.category_name
+          } else {
+            element.label = element.category_name
+          }
+          return element
+        })
+      }
+    },
     // 创建成功刷新列表
     handleCreateSuccess() {
       this.$refs.list.refetch()
@@ -129,6 +202,20 @@ export default {
     handleSettings(row) {
       // tan ~~~~~
       this.$router.push({ path: '/settings/users', query: { appid: row.id } })
+    },
+    handleNodeClick(data) {
+      this.treeValue.name = data.label
+      this.treeValue.id = data.id
+    },
+    handleClose() {
+      this.treeValue.name = ''
+      this.treeValue.id = ''
+      this.dialogVisible = false
+    },
+    dialogConfirm() {
+      this.dialogVisible = false
+      this.filterInput = this.treeValue.name
+      this.$refs.list.refetch()
     }
   },
   watch: {