2023-11-9-2
This commit is contained in:
@@ -6,10 +6,10 @@
|
||||
width="65%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@onCancel="clearSetLabel"
|
||||
@cancel="clearSetLabel"
|
||||
>
|
||||
<div class="setLabel_centent">
|
||||
<div @click="removeLabel(options)">删除</div>
|
||||
<div class="started_btn" @click="removeLabel(options)">删除</div>
|
||||
<ul class="optionsItem">
|
||||
<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
|
||||
<div class="setLabel_text">
|
||||
@@ -28,17 +28,17 @@
|
||||
<i v-show="childrenItem.openType" @click.stop="putName(index,'affirm',childrenItem)" class="fi fi-br-check"></i>
|
||||
<i v-show="!childrenItem.openType" @click.stop="putName(childrenIndex,'put',childrenItem)" class="fi fi-rr-edit"></i>
|
||||
</li>
|
||||
<li @click="newLabel(optionsItem,optionsItem.id)" class="newLabel setLabel_text">
|
||||
<li class="newLabel setLabel_text">
|
||||
<input v-show="optionsItem.addOpenType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
|
||||
<div v-show="!optionsItem.addOpenType">+</div>
|
||||
<div v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li @click="newLabel('')" class="newLabel setLabel_text optionsItem_title">
|
||||
<li class="newLabel setLabel_text optionsItem_title">
|
||||
<input v-show="openType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
|
||||
<div v-show="!openType">+</div>
|
||||
<div v-show="!openType" @click="newLabel('')">+</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -94,25 +94,21 @@ export default defineComponent({
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
let bodyDom:any = document.getElementsByClassName('optionsItem')[0]
|
||||
let bodyDom:any = document.getElementsByClassName('setLabel_centent')[0]
|
||||
nextTick().then(()=>{
|
||||
let dom:any = document.getElementsByClassName('childrenItem')
|
||||
let domParent:any = document.getElementsByClassName('optionsItem_title')
|
||||
let mouseover = ()=>{
|
||||
let domParent:any = document.getElementsByClassName('childrenItem')
|
||||
let mouseover = (event:any)=>{
|
||||
event.stopPropagation()
|
||||
bodyDom.classList.add('active')
|
||||
}
|
||||
let mouseleave = ()=>{
|
||||
let mouseleave = (event:any)=>{
|
||||
event.stopPropagation()
|
||||
bodyDom.classList.remove('active')
|
||||
}
|
||||
// domParent?.forEach((item:any) => {
|
||||
// item.addEventListener('mouseover',mouseover)
|
||||
// item.addEventListener('mouseleave',mouseleave)
|
||||
// });
|
||||
for (let index = 0; index < domParent.length; index++) {
|
||||
domParent[index].addEventListener('mouseover',mouseover)
|
||||
domParent[index].addEventListener('mouseover',mouseleave)
|
||||
domParent[index].addEventListener('mouseover',mouseover,false)
|
||||
domParent[index].addEventListener('mouseleave',mouseleave,false)
|
||||
}
|
||||
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
@@ -139,8 +135,9 @@ export default defineComponent({
|
||||
this.options = data
|
||||
},
|
||||
clearSetLabel(){
|
||||
this.setLabelShow = false
|
||||
this.clearOpenType()
|
||||
let parent:any = this.$parent
|
||||
parent.getClass()
|
||||
},
|
||||
onCheckAllChange(value:any){
|
||||
if(value?.childList){
|
||||
@@ -219,28 +216,26 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
removeLabel(val:any){
|
||||
let data:any = []
|
||||
let data = {
|
||||
"classificationIdList": [],
|
||||
"deleteConfirm": 0,
|
||||
}
|
||||
let classificationIdList:any = []
|
||||
this.clearOpenType()
|
||||
val.forEach((optionsItem:any) => {
|
||||
if(optionsItem.checkAll){
|
||||
data.push(optionsItem)
|
||||
classificationIdList.push(optionsItem.id)
|
||||
}else{
|
||||
if(optionsItem.childList){
|
||||
let boor = false
|
||||
let dataChild:any = []
|
||||
optionsItem.childList.forEach((childrenItem:any) => {
|
||||
if(childrenItem.checkAll){
|
||||
boor = true
|
||||
dataChild.push(childrenItem)
|
||||
classificationIdList.push(childrenItem.id)
|
||||
}
|
||||
});
|
||||
if(boor){
|
||||
optionsItem.childList = dataChild
|
||||
data.push(optionsItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
data.classificationIdList = classificationIdList
|
||||
this.deleteClass(data)
|
||||
},
|
||||
addLabel(val:any){
|
||||
@@ -255,7 +250,6 @@ export default defineComponent({
|
||||
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
||||
(rv: any) => {
|
||||
console.log(rv);
|
||||
this.getClass()
|
||||
}
|
||||
).catch((res)=>{
|
||||
@@ -264,7 +258,7 @@ export default defineComponent({
|
||||
deleteClass(data:any){
|
||||
Https.axiosPost(Https.httpUrls.classificationDelete, data).then(
|
||||
(rv: any) => {
|
||||
console.log(rv);
|
||||
this.getClass()
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
@@ -273,8 +267,6 @@ export default defineComponent({
|
||||
let data = this.setLabelData()
|
||||
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
||||
(rv: any) => {
|
||||
console.log(rv);
|
||||
|
||||
this.options = rv
|
||||
}
|
||||
).catch((res)=>{
|
||||
@@ -307,6 +299,17 @@ export default defineComponent({
|
||||
max-height: 65rem;
|
||||
overflow-y: auto;
|
||||
// border-radius: ;
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
}
|
||||
.started_btn{
|
||||
position: absolute;
|
||||
width: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
margin-right: auto;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
li{
|
||||
@@ -328,21 +331,27 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 2rem;
|
||||
width: 12rem;
|
||||
padding: .5rem 1rem;
|
||||
width: 16rem;
|
||||
margin: 1rem 1rem;
|
||||
border-radius: 1rem;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
i{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.setLabel_text:hover{
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
.optionsItem{
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
}
|
||||
>li{
|
||||
|
||||
.optionsItem_title{
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 1rem;
|
||||
// border-bottom: 2px solid rgba(0,0,0,.2);
|
||||
>label{
|
||||
align-items: center;
|
||||
}
|
||||
@@ -350,8 +359,7 @@ export default defineComponent({
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
height: 7rem;
|
||||
margin: 2rem 0;
|
||||
padding-bottom: 2rem;
|
||||
&.active::-webkit-scrollbar-button:single-button{
|
||||
display: none;
|
||||
}
|
||||
@@ -388,8 +396,10 @@ export default defineComponent({
|
||||
.newLabel{
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.optionsItem_title{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
div{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
@@ -398,6 +408,7 @@ export default defineComponent({
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
i{
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user