提交 219fbccc authored 作者: lihuihui's avatar lihuihui

错题,收藏,已做试题全选优化

上级 25a9cf03
......@@ -14,7 +14,7 @@
<div class="question-box" id="bottom-view">
<ul>
<template v-for="(item, index) in question.list">
<li :key="index" @click="listClick(item.question_id)">
<li :data-id="item.question_id" :key="index" @click="listClick(item.question_id)" ref="liDom">
<img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
<img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
<img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
......@@ -49,14 +49,14 @@
/>
</div>
</div>
<div class="btn-box">
<div class="btn-box" id="btn-box">
<template v-if="!batchDel.selectShow">
<div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
<div class="w-btn col">删除</div>
</template>
<template v-else>
<div class="z-btn" @click="batchDel.selectShow = false">返回</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
<div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
</template>
</div>
......@@ -78,7 +78,8 @@ export default {
batchDel: {
selectShow: false,
isDelBtn: false,
countData: []
countData: [],
isAllSelect: false
},
screen: {
isShow: false,
......@@ -107,19 +108,78 @@ export default {
batchDelClick() {
this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
},
lookup(array, value) {
const arr = array.concat([])
arr.push(value)
arr.sort((a, b) => {
return a - b
})
const index = arr.indexOf(value)
if (index === 0) {
return arr[index + 1]
} else if (index === array.length - 1) {
return arr[index - 1]
}
const resultIndex =
arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
? index + 1
: index - 1
return arr[resultIndex]
},
allSelect() {
if (this.batchDel.countData.length === this.question.list.length) {
const topView = document.getElementById('top-view')
const btnBox = document.getElementById('btn-box')
const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
let countNum = 0
const cumulativeValue = []
const cumulativeObj = {}
this.$refs.liDom.map((item, index) => {
countNum += item.clientHeight
cumulativeObj[countNum] = item.getAttribute('data-id')
cumulativeValue.push(countNum)
})
if (countNum < clientDomH) {
// 直接全选
if (this.batchDel.countData.length === this.question.list.length) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
this.batchDel.isAllSelect = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
this.batchDel.isDelBtn = true
this.batchDel.isAllSelect = true
}
return false
}
if (this.batchDel.isAllSelect) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
const listItem = this.question.list
for (let i = 0; i < listItem.length; i++) {
if (listItem[i].question_id === getId) {
this.batchDel.countData.push(listItem[i].question_id)
break
} else {
this.batchDel.countData.push(listItem[i].question_id)
}
}
this.batchDel.isDelBtn = true
}
this.batchDel.isAllSelect = !this.batchDel.isAllSelect
},
computedStyle(dom, style) {
return parseInt(window.getComputedStyle(dom, null)[style])
},
listClick(id, index) {
this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
},
goDetails(id, index) {
const pageCount = (index / 50).toString()
let num = 1
pageCount.indexOf('.') === -1 ? num = pageCount : num = parseInt(pageCount) + 1
......@@ -128,7 +188,7 @@ export default {
path: '/my/questionsDetails',
query: {
page: parseInt(num) === 0 ? 1 : num,
type: 2,
type: this.activeClass === '0' ? 1 : 3,
questionType: this.screen.screenVal
}
})
......@@ -177,6 +237,7 @@ export default {
}
this.batchDel.isDelBtn = false
Toast('删除成功')
this.batchDel.isAllSelect = false
this.question.list.length ? this.initData(true) : this.initData()
}
})
......
......@@ -24,7 +24,7 @@
<div class="question-box" id="bottom-view">
<ul>
<template v-for="(item, index) in question.list">
<li :key="index" @click="listClick(item.question_id, index)">
<li :data-id="item.question_id" :key="index" @click="listClick(item.question_id, index)" ref="liDom">
<img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
<img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
<img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
......@@ -59,14 +59,14 @@
/>
</div>
</div>
<div class="btn-box">
<div class="btn-box" id="btn-box">
<template v-if="!batchDel.selectShow">
<div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
<div class="w-btn col">删除</div>
</template>
<template v-else>
<div class="z-btn" @click="batchDel.selectShow = false">返回</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
<div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
</template>
</div>
......@@ -88,7 +88,8 @@ export default {
batchDel: {
selectShow: false,
isDelBtn: false,
countData: []
countData: [],
isAllSelect: false
},
screen: {
isShow: false,
......@@ -117,17 +118,73 @@ export default {
batchDelClick() {
this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
},
lookup(array, value) {
const arr = array.concat([])
arr.push(value)
arr.sort((a, b) => {
return a - b
})
const index = arr.indexOf(value)
if (index === 0) {
return arr[index + 1]
} else if (index === array.length - 1) {
return arr[index - 1]
}
const resultIndex =
arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
? index + 1
: index - 1
return arr[resultIndex]
},
allSelect() {
if (this.batchDel.countData.length === this.question.list.length) {
const topView = document.getElementById('top-view')
const btnBox = document.getElementById('btn-box')
const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
let countNum = 0
const cumulativeValue = []
const cumulativeObj = {}
this.$refs.liDom.map((item, index) => {
countNum += item.clientHeight
cumulativeObj[countNum] = item.getAttribute('data-id')
cumulativeValue.push(countNum)
})
if (countNum < clientDomH) {
// 直接全选
if (this.batchDel.countData.length === this.question.list.length) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
this.batchDel.isAllSelect = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
this.batchDel.isDelBtn = true
this.batchDel.isAllSelect = true
}
return false
}
if (this.batchDel.isAllSelect) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
const listItem = this.question.list
for (let i = 0; i < listItem.length; i++) {
if (listItem[i].question_id === getId) {
this.batchDel.countData.push(listItem[i].question_id)
break
} else {
this.batchDel.countData.push(listItem[i].question_id)
}
}
this.batchDel.isDelBtn = true
}
this.batchDel.isAllSelect = !this.batchDel.isAllSelect
},
computedStyle(dom, style) {
return parseInt(window.getComputedStyle(dom, null)[style])
},
listClick(id, index) {
this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
......@@ -173,12 +230,6 @@ export default {
this.initData()
}
},
// scrollDom() {
// const topViewH = document.getElementById('top-view').offsetHeight
// const clientHeight = document.documentElement.clientHeight
// const bottomView = document.getElementById('bottom-view')
// bottomView.style.height = (clientHeight - topViewH) + 'px'
// },
del(ids) {
const idGroup = Array.isArray(ids) ? ids : [ids]
const param = {
......@@ -196,6 +247,7 @@ export default {
}
this.batchDel.isDelBtn = false
Toast('删除成功')
this.batchDel.isAllSelect = false
this.question.list.length ? this.initData(true) : this.initData()
}
})
......@@ -470,9 +522,9 @@ export default {
}
.opt{
position: absolute;
top: 50%;
top: 0.4rem;
right: 0;
-webkit-transform: translateY(-50%);
// -webkit-transform: translateY(-50%);
width:.44rem;
height:.44rem;
background:rgba(204,204,204,1);
......
......@@ -24,7 +24,7 @@
<div class="question-box" id="bottom-view">
<ul>
<template v-for="(item, index) in question.list">
<li :key="index" @click="listClick(item.question_id, index)" :data-id="item.question_id">
<li :data-id="item.question_id" :key="index" @click="listClick(item.question_id, index)" ref="liDom">
<img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
<img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
<img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
......@@ -59,14 +59,14 @@
/>
</div>
</div>
<div class="btn-box">
<div class="btn-box" id="btn-box">
<template v-if="!batchDel.selectShow">
<div :class="question.list.length != 0 ? 'w-btn' : 'w-btn col2'" @click="batchToolShow">批量管理</div>
<div class="w-btn col">删除</div>
</template>
<template v-else>
<div class="z-btn" @click="batchDel.selectShow = false">返回</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.isAllSelect ? '取消全选' : '全选' }}</div>
<div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
</template>
</div>
......@@ -89,7 +89,8 @@ export default {
batchDel: {
selectShow: false,
isDelBtn: false,
countData: []
countData: [],
isAllSelect: false
},
screen: {
isShow: false,
......@@ -118,18 +119,86 @@ export default {
batchDelClick() {
this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
},
lookup(array, value) {
const arr = array.concat([])
arr.push(value)
arr.sort((a, b) => {
return a - b
})
const index = arr.indexOf(value)
if (index === 0) {
return arr[index + 1]
} else if (index === array.length - 1) {
return arr[index - 1]
}
const resultIndex =
arr[index] - arr[index - 1] > arr[index + 1] - arr[index]
? index + 1
: index - 1
return arr[resultIndex]
},
allSelect() {
if (this.batchDel.countData.length === this.question.list.length) {
const topView = document.getElementById('top-view')
const btnBox = document.getElementById('btn-box')
const scrollH = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight
const clientDomH = scrollH - (this.computedStyle(topView, 'height') + this.computedStyle(btnBox, 'height'))
let countNum = 0
const cumulativeValue = []
const cumulativeObj = {}
this.$refs.liDom.map((item, index) => {
countNum += item.clientHeight
cumulativeObj[countNum] = item.getAttribute('data-id')
cumulativeValue.push(countNum)
})
if (countNum < clientDomH) {
// 直接全选
if (this.batchDel.countData.length === this.question.list.length) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
this.batchDel.isAllSelect = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
this.batchDel.isDelBtn = true
this.batchDel.isAllSelect = true
}
return false
}
if (this.batchDel.isAllSelect) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
const getId = cumulativeObj[this.lookup(cumulativeValue, clientDomH)]
const listItem = this.question.list
for (let i = 0; i < listItem.length; i++) {
if (listItem[i].question_id === getId) {
this.batchDel.countData.push(listItem[i].question_id)
break
} else {
this.batchDel.countData.push(listItem[i].question_id)
}
}
this.batchDel.isDelBtn = true
}
this.batchDel.isAllSelect = !this.batchDel.isAllSelect
},
computedStyle(dom, style) {
return parseInt(window.getComputedStyle(dom, null)[style])
},
// allSelect() {
// if (this.batchDel.countData.length === this.question.list.length) {
// this.batchDel.countData = []
// this.batchDel.isDelBtn = false
// } else {
// this.batchDel.countData = []
// this.question.list.map(item => {
// this.batchDel.countData.push(item.question_id)
// })
// this.batchDel.isDelBtn = true
// }
// },
listClick(id, index) {
this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
},
......@@ -197,6 +266,7 @@ export default {
}
this.batchDel.isDelBtn = false
Toast('删除成功')
this.batchDel.isAllSelect = false
this.question.list.length ? this.initData(true) : this.initData()
}
})
......@@ -270,6 +340,7 @@ export default {
this.initData()
},
clear() {
this.batchDel.isAllSelect = false
this.batchDel.selectShow = false
this.batchDel.isDelBtn = false
this.batchDel.countData = []
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论