update

src/modules/question/components/AddChidren.vue

@@ -22,8 +22,11 @@
         <div class="tips-tit">请选择子题目类型：</div>
         <el-radio v-model="type" label="1">单选题</el-radio>
         <el-radio v-model="type" label="2">多选题</el-radio>
-        <el-radio v-model="type" label="3">判断题</el-radio>
-        <el-radio v-model="type" label="4">问答题</el-radio>
+        <el-radio v-model="type" label="6">判断题</el-radio>
+        <el-radio v-model="type" label="3">简答题</el-radio>
+      </div>
+      <div class="btn-box" style="padding-top:50px;">
+        <el-button type="primary" @click="addQuestionConfirm">&nbsp;&nbsp;&nbsp;&nbsp;确定&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
       </div>
     </template>
   </div>
@@ -83,6 +86,31 @@ export default {
     }
   },
   methods: {
+    addQuestionConfirm() {
+      const params = {
+        question_title: '',
+        child_question_type: this.type,
+        question_content: '',
+        question_analysis: ''
+      }
+      let options = []
+      if (this.type !== '3') {
+        if (this.type === '1' || this.type === '2') {
+          options = [
+            { option: '', checked: true },
+            { option: '', checked: false },
+            { option: '', checked: false }
+          ]
+        } else {
+          options = [
+            { option: '正确', checked: true },
+            { option: '错误', checked: false }
+          ]
+        }
+        params.question_options = options
+      }
+      this.$emit('questionList', params)
+    }
   }
 }
 </script>

src/modules/question/components/Detail.vue

 <template>
   <div>
+    <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
     <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">
+        <el-select @change="questionTypeChange" v-model="ruleForm.question_type" placeholder="请选择活题目类型">
           <el-option v-for="(item, index) in qType" :label="item.label" :value="item.value" :key="index"></el-option>
         </el-select>
       </el-form-item>
@@ -32,7 +32,7 @@
         <!-- 判断题 -->
         <judgment ref="options" v-if="ruleForm.question_type == 6"></judgment>
       </el-form-item>
-      <el-form-item label="标签" prop="type">
+      <el-form-item label="标签" prop="question_tag">
         <el-input v-model="ruleForm.question_tag"></el-input>
       </el-form-item>
       <el-form-item label="题目解析" prop="question_analysis">
@@ -91,7 +91,7 @@ export default {
   components: { VEditor, Radio, Checkbox, Judgment },
   data() {
     return {
-      pointOptions: '',
+      pointOptions: [],
       treeList: [],
       defaultProps: '',
       treeValue: {
@@ -106,7 +106,7 @@ export default {
         question_difficulty: '',
         question_title: '',
         question_content: '',
-        // question_options: [],
+        question_options: [],
         question_analysis: '',
         question_category: '',
         knowledge_point: '',
@@ -142,6 +142,7 @@ export default {
         const isValue = this.$refs.options.datas.find(item => item.option === '')
         if (!isValue) this.ruleForm.question_options = this.$refs.options.datas
       }
+      console.log(this.ruleForm, 'form')
       this.$refs[formName].validate(valid => {
         if (valid) {
           // alert('submit!')
@@ -161,9 +162,6 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields()
     },
-    changeQuestionType() {
-      console.log(this.ruleForm.question_type)
-    },
     // 点击选中tree
     handleNodeClick(data) {
       this.treeValue.name = data.label
@@ -213,8 +211,10 @@ export default {
       console.log(query)
       searchTag({ title: query }).then(res => {
         this.pointOptions = res.data.data
-        console.log(res, 'query')
       })
+    },
+    questionTypeChange() {
+      this.$emit('questionType', this.ruleForm.question_type)
     }
   }
 }

src/modules/question/components/QTypeSituation.vue

@@ -5,29 +5,79 @@
       <el-button type="primary" @click="resetForm('ruleForm')">保存主题目</el-button>
     </div>
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="题目类型" prop="desc">
-        <el-select v-model="ruleForm.desc" placeholder="请选择活动区域">
-          <el-option label="单选题" value="questionType1"></el-option>
-          <el-option label="多选题" value="questionType2"></el-option>
-          <el-option label="判断题" value="questionType3"></el-option>
-          <el-option label="问答题" value="questionType4"></el-option>
+      <el-form-item label="题目类型" prop="question_type">
+        <el-select @change="questionTypeChange" v-model="ruleForm.question_type" placeholder="请选择活题目类型">
+          <el-option v-for="(item, index) in qType" :label="item.label" :value="item.value" :key="index"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="题目标题" prop="data2">
-        <el-input v-model="ruleForm.data2"></el-input>
+      <el-form-item label="难度等级" prop="question_difficulty">
+        <el-select v-model="ruleForm.question_difficulty" placeholder="请选择活难度等级">
+          <el-option label="易" value="1"></el-option>
+          <el-option label="中" value="2"></el-option>
+          <el-option label="难" value="3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="题目标题" prop="question_title">
+        <el-input v-model="ruleForm.question_title"></el-input>
+      </el-form-item>
+      <el-form-item label="公共题干" prop="common_content">
+        <v-editor v-model="ruleForm.common_content"></v-editor>
+      </el-form-item>
+      <!-- </el-form-item> -->
+      <!-- <el-form-item> -->
+      <el-form-item label="标签" prop="question_tag">
+        <el-input v-model="ruleForm.question_tag"></el-input>
       </el-form-item>
-      <el-form-item label="公共题干" prop="data2">
-        <v-editor></v-editor>
+      <el-form-item label="试题分类" prop="question_category">
+        <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>
-        <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
-        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+      <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>
+      <el-form-item label="知识点" prop="knowledge_point">
+        <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-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
+      <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+      <!-- </el-form-item> -->
     </el-form>
-    <questions-chidren></questions-chidren>
-    <!-- <questions-chidren></questions-chidren> -->
+    <!-- <questions-chidren
+      v-for="(item, index) in chidrenList"
+      :key="index"
+      :data="item"
+      :chidrenList="chidrenList"
+      @addChidren="drawer = true"
+      @removeChidren="removeChidren"
+    ></questions-chidren> -->
+    <questions-chidren
+      :chidrenList="chidrenList"
+      @addChidren="drawer = true"
+    ></questions-chidren>
     <el-drawer size="90%" title="新建试题" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
-      <add-chidren></add-chidren>
+      <add-chidren @questionList="questionList" :dataForm="ruleForm"></add-chidren>
     </el-drawer>
   </div>
 </template>
@@ -35,40 +85,65 @@
 import QuestionsChidren from './QuestionsChidren.vue'
 import VEditor from '@/components/tinymce/Index.vue'
 import AddChidren from './AddChidren.vue'
+import { getQuestionCategory, searchTag } from '../api'
 export default {
   components: { AddChidren, VEditor, QuestionsChidren },
+  props: {
+    questionTypeNumber: {
+      type: Number,
+      default: 1
+    }
+  },
   data() {
     return {
+      pointOptions: [],
+      treeList: [],
+      defaultProps: '',
+      treeValue: {
+        name: '',
+        id: ''
+      },
+      dialogVisible: false,
+      chidrenList: [],
       drawer: false,
       ruleForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: '',
-        resource: '',
-        desc: ''
+        permission: '1',
+        question_type: 1,
+        question_title: '1',
+        common_content: '1',
+        question_category: '',
+        question_tag: '',
+        knowledge_point: '',
+        question_difficulty: ''
       },
       rules: {
-        name: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-        ],
-        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
-        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
-        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
-        type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],
-        resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
-        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
-      }
+        question_type: [{ required: true, message: '请选择', trigger: 'change' }],
+        question_difficulty: [{ required: true, message: '请选择难度等级', trigger: 'change' }],
+        question_title: [{ required: true, message: '请填写题目标题', trigger: 'blur' }],
+        common_content: [{ required: true, message: '请填写题干内容', trigger: 'blur' }],
+        question_category: [{ required: true, message: '请选择试题分类', trigger: 'blur' }],
+        knowledge_point: [{ required: true, message: '请输入题目知识点内容', trigger: 'blur' }]
+      },
+      qType: [
+        { label: '单选题', value: 1 },
+        { label: '多选题', value: 2 },
+        { label: '简答题', value: 3 },
+        { label: '案例题', value: 5 },
+        { label: '判断题', value: 6 },
+        { label: '实操题', value: 7 },
+        { label: '情景题', value: 8 }
+      ]
     }
   },
+  mounted() {
+    this.ruleForm.question_type = this.questionTypeNumber
+    this.getTreeList()
+  },
   methods: {
     submitForm(formName) {
+      this.drawer = true
       this.$refs[formName].validate(valid => {
         if (valid) {
-          this.drawer = true
           // alert('submit!')
         } else {
           console.log('error submit!!')
@@ -77,14 +152,75 @@ export default {
       })
     },
     resetForm(formName) {
-      this.$refs[formName].resetFields()
+      // this.$refs[formName].resetFields()
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          console.log(this.chidrenList)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    questionTypeChange() {
+      this.$emit('questionType', 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
     },
-    handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
-          done()
+    // 获取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
         })
-        .catch(_ => {})
+      }
+    },
+    // 知识点搜索
+    remoteMethod(query) {
+      console.log(query)
+      searchTag({ title: query }).then(res => {
+        this.pointOptions = res.data.data
+      })
+    },
+    // 添加子题目
+    questionList(data) {
+      this.chidrenList.push(data)
+      this.drawer = false
+      console.log(this.chidrenList, 'list')
     }
   }
 }

src/modules/question/components/QuestionsChidren.vue

 <template>
   <div>
-    <el-divider content-position="center" class="divider">子题目1</el-divider>
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="子题目类型" prop="desc">
-        <el-select v-model="ruleForm.desc" disabled placeholder="请选择活动区域">
-          <el-option label="单选题" value="questionType1"></el-option>
-          <el-option label="多选题" value="questionType2"></el-option>
-          <el-option label="判断题" value="questionType3"></el-option>
-          <el-option label="问答题" value="questionType4"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="难度等级" prop="desc">
-        <el-select v-model="ruleForm.desc" placeholder="请选择活动区域">
-          <el-option label="单选题" value="questionType1"></el-option>
-          <el-option label="多选题" value="questionType2"></el-option>
-          <el-option label="判断题" value="questionType3"></el-option>
-          <el-option label="问答题" value="questionType4"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="子题目标题" prop="data2">
-        <el-input v-model="ruleForm.data2"></el-input>
-      </el-form-item>
-      <el-form-item label="子题目内容" prop="data2">
-        <v-editor></v-editor>
-      </el-form-item>
-      <el-form-item label="选项">
-        <radio></radio>
-        <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
-        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
-      </el-form-item>
-      <el-form-item label="标签">
-        <el-input v-model="ruleForm.data2"></el-input>
-      </el-form-item>
-      <el-form-item label="子题目解析" prop="data2">
-        <v-editor></v-editor>
-      </el-form-item>
-      <el-form-item label="试题分类" prop="desc">
-        <el-select v-model="ruleForm.desc" disabled placeholder="请选择活动区域">
-          <el-option label="单选题" value="questionType1"></el-option>
-          <el-option label="多选题" value="questionType2"></el-option>
-          <el-option label="判断题" value="questionType3"></el-option>
-          <el-option label="问答题" value="questionType4"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="知识点">
-        <el-input v-model="ruleForm.data2"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm('ruleForm')">保存子题目</el-button>
-        <el-button type="primary" @click="resetForm('ruleForm')">删除子题目</el-button>
-        <!-- <el-input v-model="ruleForm.data2"></el-input> -->
-      </el-form-item>
-    </el-form>
+    <!-- <template v-for="(ruleForm, index) in dataList"> -->
+      <el-form :model="data" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <div v-for="(ruleForm, index) in dataList" :key="index">
+          <el-divider content-position="center" class="divider">子题目{{ index + 1 }}</el-divider>
+          <el-form-item style="text-align: right;">
+            <el-button type="primary" @click="$emit('addChidren')">添加子题目</el-button>
+            <el-button type="primary" @click="removeChidren(index)">删除子题目</el-button>
+          </el-form-item>
+          <el-form-item label="子题目类型" prop="child_question_type">
+            <el-select v-model="ruleForm.child_question_type" placeholder="请选择活动区域">
+              <el-option label="单选题" value="1"></el-option>
+              <el-option label="多选题" value="2"></el-option>
+              <el-option label="判断题" value="6"></el-option>
+              <el-option label="问答题" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="子题目标题" prop="question_title">
+            <el-input v-model="ruleForm.question_title"></el-input>
+          </el-form-item>
+          <el-form-item label="子题目内容" prop="question_content">
+            <v-editor v-model="ruleForm.question_content"></v-editor>
+          </el-form-item>
+          <el-form-item label="选项" prop="question_options" v-if="ruleForm.child_question_type != 3">
+            <!-- 单选题 -->
+            <radio ref="options" v-if="ruleForm.child_question_type == 1"></radio>
+            <!-- 多选题 -->
+            <checkbox ref="options" v-if="ruleForm.child_question_type == 2"></checkbox>
+            <!-- 判断题 -->
+            <judgment ref="options" v-if="ruleForm.child_question_type == 6"></judgment>
+          </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 style="text-align: center;" v-if="index + 1 == dataList.length">
+            <el-button type="primary" @click="submitForm()">保存</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    <!-- </template> -->
   </div>
 </template>
 
 <script>
 import Radio from './QTypeRadio.vue'
+import Checkbox from './QTypeCheckbox.vue'
+import Judgment from './QTypeJudgment.vue'
 import VEditor from '@/components/tinymce/Index.vue'
 export default {
-  components: { VEditor, Radio },
+  components: { VEditor, Radio, Checkbox, Judgment },
+  props: {
+    data: {
+      type: Object
+    },
+    chidrenList: {
+      type: Array
+    }
+  },
   data() {
     return {
-      ruleForm: {}
+      ruleForm: {},
+      dataList: [],
+      rules: {
+        child_question_type: [{ required: true, message: ' ', trigger: 'blur' }],
+        question_difficulty: [{ required: true, message: ' ', trigger: 'blur' }],
+        question_title: [{ required: true, message: ' ', trigger: 'blur' }],
+        question_content: [{ required: true, message: ' ', trigger: 'blur' }],
+        question_analysis: [{ required: true, message: ' ', trigger: 'blur' }],
+        question_options: [{ required: true, message: ' ', trigger: 'blur' }]
+      }
+    }
+  },
+  mounted() {
+    this.dataList = this.chidrenList
+  },
+  methods: {
+    removeChidren(n) {
+      this.dataList.splice(n, 1)
+    },
+    submitForm() {
+      console.log(111, '111')
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          console.log('11')
+        } else {
+          console.log(111, '111')
+          return false
+        }
+      })
     }
   }
 }

src/modules/question/views/Create.vue

 <template>
   <app-card>
-    <detail></detail>
+    <detail @questionType="questionType" v-if="[1, 2, 3, 6].includes(questionTypeNum)"></detail>
+    <situation-question :questionTypeNumber="questionTypeNum" @questionType="questionType" v-else></situation-question>
   </app-card>
 </template>
 
 <script>
 import Detail from '../components/Detail.vue'
+import SituationQuestion from '../components/QTypeSituation.vue'
 // 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'
 export default {
-  components: { Detail }
+  components: { Detail, SituationQuestion },
+  // components: { Detail },
+  data() {
+    return {
+      questionTypeNum: 1
+    }
+  },
+  methods: {
+    questionType(n) {
+      console.log(typeof n, '123')
+      this.questionTypeNum = n
+    }
+  }
 }
 </script>