|
@@ -4,20 +4,30 @@
|
|
|
<el-collapse v-model="activeNames" accordion>
|
|
|
<el-collapse-item title="进阶筛选" name="1">
|
|
|
<div class="filtratebox">
|
|
|
+ <!--学段-->
|
|
|
<div class="filtratebox-phase">
|
|
|
- <span class="filtratebox-phase-title">学段:</span>
|
|
|
+ <span class="filtratebox-phase-title">{{filters.pahse.name}}:</span>
|
|
|
<div class="filtratebox-phase-content">
|
|
|
- <div class="phase-item">小学</div>
|
|
|
- <div class="phase-item">中学</div>
|
|
|
+ <div class="phase-item" v-for="(items,index) in filters.pahse.option" :key="items.value" :class="[index ===clickNum.pahse ? 'filter-click':'' ]" @click="clickNum.pahse=index">{{items.name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--学段end-->
|
|
|
+ <!--科目-->
|
|
|
<div class="filtratebox-phase">
|
|
|
- <span class="filtratebox-phase-title">年级:</span>
|
|
|
+ <span class="filtratebox-phase-title">{{filters.subject.name}}:</span>
|
|
|
<div class="filtratebox-phase-content">
|
|
|
- <div class="phase-item">小学</div>
|
|
|
- <div class="phase-item">中学</div>
|
|
|
+ <div class="phase-item" v-for="(items,index) in filters.subject.option" :key="items.value" :class="[index ===clickNum.subject ? 'filter-click':'' ]" @click="clickNum.subject=index">{{items.name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--科目end-->
|
|
|
+ <!--年级-->
|
|
|
+ <div class="filtratebox-phase">
|
|
|
+ <span class="filtratebox-phase-title">{{filters.grade.name}}:</span>
|
|
|
+ <div class="filtratebox-phase-content">
|
|
|
+ <div class="phase-item" v-for="(items,index) in filters.grade.option" :key="items.value" :class="[index ===clickNum.grade ? 'filter-click':'' ]" @click="clickNum.grade=index">{{items}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--年级end-->
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
@@ -89,9 +99,16 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+import { useStore } from 'vuex'
|
|
|
export default {
|
|
|
- setup () {
|
|
|
+ props: {
|
|
|
+ detailsSchool: {
|
|
|
+ default: {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup (props) {
|
|
|
+ const store = useStore()
|
|
|
let activeNames = ref([])
|
|
|
let findbox = ref({
|
|
|
tagValue: '',
|
|
@@ -120,11 +137,38 @@ export default {
|
|
|
},
|
|
|
]
|
|
|
let filters = ref({
|
|
|
- pahse: { name: '学段', option: [{ name: '小学', value: '11-1' }, { name: '中学', value: '11-2' }] },
|
|
|
- subject: { name: '科目', option: [{ name: '语文', value: 'yw' }, { name: '数学', value: 'sx' }, { name: '英语', value: 'yy' }] },
|
|
|
- grade: { name: '年级', option: [{ name: '一年级', value: '1' }, { name: '一年级', value: '2' }] },
|
|
|
+ pahse: { name: '学段', option: [] },
|
|
|
+ subject: { name: '科目', option: [] },
|
|
|
+ grade: { name: '年级', option: [] },
|
|
|
+ }
|
|
|
+ )
|
|
|
+ let clickNum = ref({
|
|
|
+ pahse: 0,
|
|
|
+ subject: 0,
|
|
|
+ grade: 0,
|
|
|
})
|
|
|
- return { activeNames, findbox, options, filters }
|
|
|
+ let filterperiod = ref([])
|
|
|
+ let allperiod = ref()
|
|
|
+ //处理筛选
|
|
|
+ function filterInt (data) {
|
|
|
+ console.log(data, '试卷数据')
|
|
|
+ allperiod.value = data.period
|
|
|
+ let schoolPeriod = data.period
|
|
|
+ for (let i in schoolPeriod) {
|
|
|
+ filters.value.pahse.option.push({ name: schoolPeriod[i].name, id: schoolPeriod[i].id })
|
|
|
+ }
|
|
|
+ filters.value.subject.option = schoolPeriod[0].subjects
|
|
|
+ filters.value.grade.option = schoolPeriod[0].grades
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ props,
|
|
|
+ (newdata, olddata) => {
|
|
|
+ console.log(newdata, '试卷数据')
|
|
|
+ newdata.detailsSchool !== undefined && newdata !== olddata ? filterInt(newdata.detailsSchool) : ''
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+ )
|
|
|
+ return { activeNames, findbox, options, filters, clickNum, filterInt, filterperiod, allperiod }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -263,6 +307,7 @@ export default {
|
|
|
padding: 10px 20px;
|
|
|
padding-bottom: 20px;
|
|
|
background: #fff;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
}
|
|
|
.filtratebox-phase {
|
|
|
width: 100%;
|
|
@@ -294,6 +339,12 @@ export default {
|
|
|
.phase-item:hover {
|
|
|
color: #409eff;
|
|
|
}
|
|
|
+.filter-click {
|
|
|
+ background: #10abe7;
|
|
|
+ box-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.header-filter .el-collapse-item__header {
|