update

src/modules/question/components/AddChidren.vue

@@ -9,13 +9,13 @@
     <template v-if="source == 1">
       <div class="radio-box">
         <div class="tips-tit index">请选择题库：</div>
-        <el-radio @change="radioChange" v-model="questionBank" label="1">我的题库</el-radio>
-        <el-radio @change="radioChange" v-model="questionBank" label="2" style="text-indent: 1.5em">公共题库</el-radio>
+        <el-radio @change="refetchList" v-model="questionBank" label="1">我的题库</el-radio>
+        <el-radio @change="refetchList" v-model="questionBank" label="2" style="text-indent: 1.5em">公共题库</el-radio>
       </div>
       <app-list v-bind="tableOptions" ref="list" class="app-list" @selection-change="handleSelectionChange">
-        <template v-slot:input-filter>
+        <template v-slot:filter-category="{ params }">
           <div class="filter-input">
-            <question-type-cascader v-model="filterInput"></question-type-cascader>
+            <question-type-cascader v-model="params.question_category" @change="refetchList"></question-type-cascader>
           </div>
         </template>
       </app-list>
@@ -40,7 +40,7 @@
 
 <script>
 import { getAppList } from '../api'
-import QuestionTypeCascader from '@/components/base/QuestionTypeCascader.vue'
+import QuestionTypeCascader from '@/components/base/QuestionTypeTreeselect.vue'
 export default {
   components: {
     QuestionTypeCascader
@@ -56,6 +56,9 @@ export default {
     }
   },
   computed: {
+    activeProject() {
+      return this.$store.state.activeProject || {}
+    },
     tableOptions() {
       return {
         limit: 10,
@@ -92,7 +95,7 @@ export default {
             ]
           },
           {
-            slots: 'input-filter',
+            slots: 'filter-category',
             prop: 'question_category',
             type: 'input',
             label: '试题分类:'
@@ -108,8 +111,8 @@ export default {
           params: {
             question_types: [1, 2, 3, 6],
             permission: this.questionBank,
-            project_prefix: 'x1',
-            question_category: this.filterInput
+            project_prefix: this.activeProject.tag,
+            question_category: ''
           },
           callback(data) {
             const questionType = {
@@ -150,7 +153,7 @@ export default {
     }
   },
   mounted() {
-    this.getTreeList()
+    // this.getTreeList()
   },
   methods: {
     // 列表checked点击 重整数据：组合成与题对应的数据
@@ -167,7 +170,7 @@ export default {
       }, [])
     },
     // 筛选更新列表
-    radioChange() {
+    refetchList() {
       this.$refs.list.refetch()
     },
     // 添加题型

src/modules/question/components/Detail.vue

@@ -39,12 +39,7 @@
         <v-editor :disabled="!!($route.query.type === 'view')" v-model="ruleForm.question_analysis"></v-editor>
       </el-form-item>
       <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>
+        <question-type-cascader v-model="ruleForm.question_category"></question-type-cascader>
       </el-form-item>
       <el-form-item label="知识点">
         <el-select
@@ -65,21 +60,8 @@
         <template v-else>
           <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
         </template>
-        <!-- <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>
@@ -87,9 +69,10 @@ 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, updateQuestion } from '../api'
+import QuestionTypeCascader from '@/components/base/QuestionTypeTreeselect.vue'
+import { searchTag, addQuestion, updateQuestion } from '../api'
 export default {
-  components: { VEditor, Radio, Checkbox, Judgment },
+  components: { VEditor, Radio, Checkbox, Judgment, QuestionTypeCascader },
   props: {
     detailData: {
       type: Object
@@ -98,13 +81,6 @@ export default {
   data() {
     return {
       pointOptions: [],
-      treeList: [],
-      defaultProps: '',
-      treeValue: {
-        name: '',
-        id: ''
-      },
-      dialogVisible: false,
       ruleForm: {
         permission: '1',
         project_prefix: 'x1',
@@ -146,16 +122,11 @@ export default {
   created() {
     if (this.detailData) {
       this.ruleForm = this.detailData
-      this.treeValue.name = this.detailData.question_category.category_name
-      this.treeValue.id = this.detailData.question_category.id
       this.ruleForm.question_category = this.detailData.question_category.id
       this.pointOptions.push(this.detailData.knowledge_point)
       this.ruleForm.knowledge_point = this.detailData.knowledge_point.id
     }
   },
-  mounted() {
-    this.getTreeList()
-  },
   computed: {
     activeProject() {
       return this.$store.state.activeProject || {}
@@ -187,50 +158,6 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields()
     },
-    // 点击选中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) {
       searchTag({ project_prefix: this.activeProject.tag, title: query }).then(res => {

src/modules/question/components/QTypeSituation.vue

@@ -31,25 +31,8 @@
         <el-input v-model="ruleForm.question_tag"></el-input>
       </el-form-item>
       <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>
+        <question-type-cascader v-model="ruleForm.question_category"></question-type-cascader>
       </el-form-item>
-      <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="知识点">
         <el-select
           v-model="ruleForm.knowledge_point"
@@ -77,9 +60,10 @@
 import QuestionsChidren from './QuestionsChidren.vue'
 import VEditor from '@/components/tinymce/Index.vue'
 import AddChidren from './AddChidren.vue'
-import { getQuestionCategory, searchTag, addQuestion, updateQuestion } from '../api'
+import QuestionTypeCascader from '@/components/base/QuestionTypeTreeselect.vue'
+import { searchTag, addQuestion, updateQuestion } from '../api'
 export default {
-  components: { AddChidren, VEditor, QuestionsChidren },
+  components: { AddChidren, VEditor, QuestionsChidren, QuestionTypeCascader },
   props: {
     questionTypeNumber: {
       type: Number,
@@ -92,13 +76,6 @@ export default {
   data() {
     return {
       pointOptions: [],
-      treeList: [],
-      defaultProps: '',
-      treeValue: {
-        name: '',
-        id: ''
-      },
-      dialogVisible: false,
       chidrenList: [],
       drawer: false,
       ruleForm: {
@@ -136,8 +113,6 @@ export default {
     this.ruleForm.question_type = this.questionTypeNumber
     if (this.detailData) {
       this.ruleForm = this.detailData
-      this.treeValue.name = this.detailData.question_category.category_name
-      this.treeValue.id = this.detailData.question_category.id
       this.ruleForm.question_category = this.detailData.question_category.id
       this.pointOptions.push(this.detailData.knowledge_point)
       this.ruleForm.knowledge_point = this.detailData.knowledge_point.id
@@ -146,7 +121,6 @@ export default {
       const cacheData = window.localStorage.cacheQuestion
       if (cacheData) {
         this.ruleForm = JSON.parse(cacheData).form
-        this.treeValue = JSON.parse(cacheData).tree
         this.pointOptions = JSON.parse(cacheData).pointOptions
         this.chidrenList = JSON.parse(cacheData).children
       }
@@ -157,9 +131,6 @@ export default {
       return this.$store.state.activeProject || {}
     }
   },
-  mounted() {
-    this.getTreeList()
-  },
   methods: {
     // 添加子题 drawer关闭
     handleCloseDrawer() {
@@ -201,50 +172,6 @@ export default {
     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
-    },
-    // 获取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) {
       searchTag({ project_prefix: this.activeProject.tag, title: query }).then(res => {

src/modules/question/views/Create.vue

 <template>
   <app-card>
-    <template v-if="[1, 2, 3, 6].includes(questionTypeNum) && !cacheData">
+    <template v-if="[1, 2, 3, 6].includes(questionTypeNum) && !cache">
       <template v-if="$route.query.id">
         <detail v-if="Object.keys(detailData).length" :detailData="detailData" @questionType="questionType"></detail>
       </template>
@@ -24,12 +24,8 @@ export default {
   data() {
     return {
       questionTypeNum: 1,
-      detailData: {}
-    }
-  },
-  computed: {
-    cacheData() {
-      return window.localStorage.cacheQuestion
+      detailData: {},
+      cache: window.localStorage.cacheQuestion
     }
   },
   mounted() {
@@ -44,6 +40,7 @@ export default {
   },
   methods: {
     questionType(n) {
+      this.cache = ''
       this.questionTypeNum = n
     }
   }

src/modules/question/views/List.vue

 <template>
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
-      <template v-slot:radio-filter>
-        <el-radio @change="radioChange" v-model="filterRadio" :label=1>我的题库</el-radio>
-        <el-radio @change="radioChange" v-model="filterRadio" :label=2>公共题库</el-radio>
+      <template v-slot:radio-filter="{ params }">
+        <el-radio @change="refetchList" v-model="params.permission" :label=1>我的题库</el-radio>
+        <el-radio @change="refetchList" v-model="params.permission" :label=2>公共题库</el-radio>
       </template>
-      <template v-slot:input-filter>
-        <question-type-cascader v-model="filterInput"></question-type-cascader>
+      <template v-slot:filter-category="{ params }">
+        <question-type-cascader v-model="params.question_category" @change="refetchList"></question-type-cascader>
       </template>
       <div class="operate-btn">
         <el-button type="primary" icon="el-icon-plus" @click="$router.push({ path: '/question/create' })"
@@ -28,7 +28,7 @@
 <script>
 import { getAppList, deleteQuestion } from '../api'
 import importQuestion from '../components/importQuestion.vue'
-import QuestionTypeCascader from '@/components/base/QuestionTypeCascader.vue'
+import QuestionTypeCascader from '@/components/base/QuestionTypeTreeselect.vue'
 export default {
   components: { importQuestion, QuestionTypeCascader },
   data() {
@@ -42,6 +42,9 @@ export default {
     }
   },
   computed: {
+    activeProject() {
+      return this.$store.state.activeProject || {}
+    },
     tableOptions() {
       return {
         limit: 10,
@@ -86,7 +89,7 @@ export default {
             ]
           },
           {
-            slots: 'input-filter',
+            slots: 'filter-category',
             prop: 'question_category',
             type: 'input',
             label: '试题分类:'
@@ -100,9 +103,9 @@ export default {
         remote: {
           httpRequest: getAppList,
           params: {
-            permission: this.filterRadio,
-            project_prefix: 'x1',
-            question_category: this.filterInput
+            permission: 1,
+            project_prefix: this.activeProject.tag,
+            question_category: ''
           },
           callback(data) {
             const questionType = {
@@ -176,6 +179,11 @@ export default {
     },
     radioChange() {
       this.$refs.list.refetch()
+    },
+    // 刷新列表
+    refetchList() {
+      // 刷新列表
+      this.$refs.list.refetch()
     }
   }
 }