574 lines
14 KiB
Vue
574 lines
14 KiB
Vue
<template>
|
|
<a-modal class="library_setLabel"
|
|
v-model:visible="setLabelShow"
|
|
:footer="null"
|
|
:title="$t('setLabel.EditTag')"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:keyboard="false"
|
|
:centered="true"
|
|
@cancel="clearSetLabel"
|
|
>
|
|
<div class="setLabel_centent">
|
|
<ul class="optionsItem">
|
|
<li class="optionsItem_title" @click="clearOpenType" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
|
|
<div class="setLabel_text" @click.stop="" :class="{active:optionsItem.checkAll}">
|
|
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
|
|
<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
|
|
<input v-show="optionsItem.openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(optionsIndex,'affirm',optionsItem)">
|
|
<i v-show="optionsItem.openType" @click.stop="putName(optionsIndex,'affirm',optionsItem)" class="fi fi-br-check"></i>
|
|
<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
|
|
</div>
|
|
|
|
<ul class="childrenItem active" v-mousewheel @click.stop="">
|
|
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.childList" :class="{active:childrenItem.checkAll}" :key="childrenItem.id">
|
|
<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
|
|
<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
|
|
<input v-show="childrenItem.openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(childrenIndex,'affirm',childrenItem)">
|
|
<i v-show="childrenItem.openType" @click.stop="putName(childrenIndex,'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 class="newLabel setLabel_text">
|
|
<input v-show="optionsItem.addOpenType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(-1,'affirm',optionsItem)">
|
|
<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
|
|
<div class="addLabel" v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="newLabel setLabel_text optionsItem_title" @click="clearOpenType">
|
|
<div @click.stop="">
|
|
<input v-show="openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(-1,'affirm','')">
|
|
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
|
|
<div class="addLabel" v-show="!openType" @click.stop="newLabel('','')">+</div>
|
|
</div>
|
|
<div class="started_btn" :class="{active:labelBor}" @click="removeLabel(options)">Delete</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</a-modal>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,ref,createVNode,watch,nextTick,inject} from 'vue'
|
|
import { Https } from "@/tool/https";
|
|
// import {dataURLtoFile,base64toFile} from "@/tool/util"
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import 'vue-cropper/dist/index.css'
|
|
import { VueCropper } from "vue-cropper";
|
|
// import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n';
|
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
|
|
|
export default defineComponent({
|
|
components:{
|
|
VueCropper,
|
|
},
|
|
setup() {
|
|
let multiple = ref(false)
|
|
let indeterminate = ref(true)
|
|
let options:any = ref([])//父组件传过来的数据
|
|
let type:any = inject('type')//父组件传过来的数据
|
|
let checkedList = ref([])
|
|
let openType = ref(false)
|
|
let itemName = ref('')
|
|
let {t} = useI18n()
|
|
let labelBor = ref(false)//判断是否选中标签
|
|
return {
|
|
multiple,
|
|
indeterminate,
|
|
value: ref<string[]>([]),
|
|
options,
|
|
checkedList,
|
|
openType,
|
|
type,
|
|
itemName,
|
|
t,
|
|
labelBor
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
setLabelShow:false,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.clearOpenType()
|
|
},
|
|
watch: {
|
|
},
|
|
directives:{
|
|
mousewheel:{
|
|
mounted (el) {
|
|
let bodyDom:any = document.getElementsByClassName('setLabel_centent')[0]
|
|
nextTick().then(()=>{
|
|
let domParent:any = document.getElementsByClassName('childrenItem')
|
|
let mouseover = (event:any)=>{
|
|
event.stopPropagation()
|
|
bodyDom.classList.add('active')
|
|
}
|
|
let mouseleave = (event:any)=>{
|
|
event.stopPropagation()
|
|
bodyDom.classList.remove('active')
|
|
}
|
|
for (let index = 0; index < domParent.length; index++) {
|
|
domParent[index].addEventListener('mouseover',mouseover,false)
|
|
domParent[index].addEventListener('mouseleave',mouseleave,false)
|
|
}
|
|
el.addEventListener('wheel',(e:WheelEvent)=>{
|
|
let num = 0
|
|
if(e.deltaY > 0){
|
|
num = 25
|
|
}else{
|
|
num = -25
|
|
}
|
|
el.scrollBy(num, 0);
|
|
},true)
|
|
})
|
|
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
init(str:any,data:any){
|
|
this.setLabelShow = true
|
|
if(str === 'add'){
|
|
this.multiple = false
|
|
}else{
|
|
this.multiple = true
|
|
}
|
|
this.options = data
|
|
this.clearOpenType()
|
|
},
|
|
clearSetLabel(){
|
|
this.clearOpenType()
|
|
let parent:any = this.$parent
|
|
parent.getClass()
|
|
},
|
|
onCheckAllChange(value:any){
|
|
if(value?.childList){
|
|
value?.childList.forEach((item:any) => {
|
|
item.checkAll = value.checkAll
|
|
});
|
|
}
|
|
this.deleteShow(this.options)
|
|
},
|
|
onCheckAllchildrenItem(value:any){
|
|
let boor = value?.childList.every( (item:any) => item.checkAll )
|
|
if(boor){
|
|
// value.checkAll = true
|
|
}else{
|
|
value.checkAll = false
|
|
}
|
|
this.deleteShow(this.options)
|
|
},
|
|
clearOpenType(){
|
|
this.openType = false
|
|
this.options.forEach((optionsItem:any) => {
|
|
optionsItem.openType = false
|
|
optionsItem.addOpenType = false
|
|
if(optionsItem?.childList){
|
|
optionsItem?.childList?.forEach((childrenItem:any) => {
|
|
childrenItem.openType = false
|
|
});
|
|
}
|
|
});
|
|
},
|
|
putName(index:number,v:string,item:any){
|
|
let e:any = window.event
|
|
let input = e.target.parentNode.querySelectorAll('.inputName')[0]
|
|
let data:any
|
|
if(v == 'put'){
|
|
this.clearOpenType()
|
|
document.addEventListener('click',this.clearOpenType)
|
|
item.openType = true
|
|
this.itemName = item.classificationName
|
|
// this.options[index].openType = true
|
|
// this.itemName = this.workspace.workspaceList[index].workSpaceName
|
|
nextTick().then(()=>{
|
|
input.focus()
|
|
})
|
|
}else if(v == 'affirm'){
|
|
if(this.itemName == ''){
|
|
message.warning(this.t('setLabel.jsContent1'));
|
|
return
|
|
}else{
|
|
if(index == -1){
|
|
if(item){
|
|
item.addOpenType = false
|
|
data = {
|
|
classificationName:this.itemName,
|
|
parentId:item.id
|
|
}
|
|
}else{
|
|
this.openType = false
|
|
data = {
|
|
classificationName:this.itemName,
|
|
parentId:''
|
|
}
|
|
}
|
|
}else{
|
|
data = {
|
|
id:item.id,
|
|
classificationName:this.itemName,
|
|
}
|
|
item.classificationName = this.itemName
|
|
item.openType = false
|
|
}
|
|
|
|
}
|
|
|
|
this.addLabel(data)
|
|
document.removeEventListener('click',this.clearOpenType)
|
|
}
|
|
},
|
|
newLabel(item:any,id:any){
|
|
this.itemName = ''
|
|
this.clearOpenType()
|
|
let e:any = window.event
|
|
let input = e.target.parentNode.querySelectorAll('.inputName')[0]
|
|
if(item){
|
|
item.addOpenType = true
|
|
}else{
|
|
this.openType = true
|
|
}
|
|
nextTick().then(()=>{
|
|
input.focus()
|
|
})
|
|
},
|
|
removeLabel(val:any){
|
|
let data = {
|
|
"classificationIdList": [],
|
|
"deleteConfirm": 0,
|
|
}
|
|
let classificationIdList:any = []
|
|
this.clearOpenType()
|
|
val.forEach((optionsItem:any) => {
|
|
if(optionsItem.checkAll){
|
|
classificationIdList.push(optionsItem.id)
|
|
}else{
|
|
if(optionsItem.childList){
|
|
optionsItem.childList.forEach((childrenItem:any) => {
|
|
if(childrenItem.checkAll){
|
|
classificationIdList.push(childrenItem.id)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
data.classificationIdList = classificationIdList
|
|
this.deleteClass(data)
|
|
},
|
|
addLabel(val:any){
|
|
let data = this.setLabelData()
|
|
if(val.parentId){//新增
|
|
data.parentId = val.parentId
|
|
}
|
|
if(val.id){//修改
|
|
data.id = val.id
|
|
}
|
|
data.classificationName = val.classificationName
|
|
|
|
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
|
(rv: any) => {
|
|
this.getClass()
|
|
}
|
|
).catch((res)=>{
|
|
this.getClass()
|
|
});
|
|
},
|
|
deleteClass(data:any){
|
|
Https.axiosPost(Https.httpUrls.classificationDelete, data).then(
|
|
(rv: any) => {
|
|
this.getClass()
|
|
}
|
|
).catch((res)=>{
|
|
if(res.errCode === 2){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: res.errMsg,
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
zIndex:99999,
|
|
centered:true,
|
|
onOk() {
|
|
data.deleteConfirm = 1
|
|
_this.deleteClass(data)
|
|
},
|
|
onCancel(){
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getClass(){
|
|
let data = this.setLabelData()
|
|
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
|
(rv: any) => {
|
|
this.options = rv
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
},
|
|
setLabelData(){
|
|
let data = {
|
|
"classificationIdList": [],
|
|
"classificationName": "",
|
|
"createTime": "",
|
|
"deleteConfirm": '',
|
|
"id": '',
|
|
"libraryId": '',
|
|
"parentId": '',
|
|
"type": this.type?.selectCode._value,
|
|
"updateTime": "",
|
|
"userId": ''
|
|
}
|
|
|
|
return data
|
|
},
|
|
deleteShow(value:any){
|
|
// this.options
|
|
this.labelBor = false
|
|
for(let index = 0; index<value.length; index++){
|
|
if(value[index].checkAll){
|
|
this.labelBor = true
|
|
// break
|
|
return
|
|
}
|
|
if(value[index].childList != null){
|
|
this.deleteShow(value[index].childList)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.library_setLabel{
|
|
.ant-modal-content{
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
.setLabel_centent{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// height: 300px;
|
|
min-height: 50rem;
|
|
max-height: calc(65rem*1.2);
|
|
overflow-y: auto;
|
|
// border-radius: ;
|
|
position: relative;
|
|
&.setLabel_centent::-webkit-scrollbar{display: none;}
|
|
|
|
&.active{
|
|
overflow: hidden;
|
|
}
|
|
|
|
ul{
|
|
display: flex;
|
|
li{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
i{
|
|
cursor: pointer;
|
|
}
|
|
input{
|
|
border: 0;
|
|
width: 80%;
|
|
background: rgba(0,0,0,0);
|
|
border-bottom: 1px solid #b5b5b5;
|
|
}
|
|
|
|
}
|
|
.setLabel_text{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: .5rem 1rem;
|
|
// width: 16rem;
|
|
width: auto;
|
|
margin: 2rem 1rem;
|
|
border-radius: 1rem;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
font-size: 1.8rem;
|
|
font-weight: 900;
|
|
transition: .3s all;
|
|
i{
|
|
display: flex;
|
|
}
|
|
>span{
|
|
// max-width: 60%;
|
|
margin: 0 2rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
}
|
|
div.setLabel_text{
|
|
>input{
|
|
margin: 0 2rem;
|
|
width: 14rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
.optionsItem{
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
flex: 1;
|
|
|
|
.optionsItem_title{
|
|
margin-bottom: 2rem;
|
|
border-radius: 1rem;
|
|
align-items: flex-start;
|
|
background-color: #f9f9f9;
|
|
border: 0.1rem solid #ebebeb;
|
|
// border-bottom: 2px solid rgba(0,0,0,.2);
|
|
box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);
|
|
>label{
|
|
align-items: center;
|
|
}
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 0;
|
|
transition: .3s all;
|
|
}
|
|
:hover{
|
|
// background: #efefef;
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.active{
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.childrenItem{
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
// padding-bottom: 2rem;
|
|
.setLabel_text{
|
|
font-weight: 300;
|
|
margin: 1rem 1rem;
|
|
background: #f0f0f0;
|
|
// background: #d5d5d5;
|
|
font-size: 1.4rem;
|
|
width: 16rem;
|
|
|
|
label{
|
|
transform: scale(.8);
|
|
}
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 0;
|
|
transition: .3s all;
|
|
}
|
|
}
|
|
.setLabel_text:hover{
|
|
// background: #efefef;
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.active{
|
|
.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.active::-webkit-scrollbar-button:single-button{
|
|
display: none;
|
|
}
|
|
&.active::-webkit-scrollbar {
|
|
/* 竖轴的宽度 */
|
|
width: 1rem;
|
|
/* 横轴的高度 */
|
|
height: 1rem;
|
|
transition: all .3s;
|
|
}
|
|
/* 进度 */
|
|
&.active::-webkit-scrollbar-thumb {
|
|
border-radius: 1rem;
|
|
background: rgba(238, 238, 244, 0);
|
|
}
|
|
/* 轨道 */
|
|
&.active::-webkit-scrollbar-track {
|
|
border-radius: 1rem;
|
|
background: rgba(238, 238, 244, 0);
|
|
}
|
|
&.active:hover {
|
|
// overflow-x: scroll;
|
|
&.active::-webkit-scrollbar-thumb {
|
|
background: #543087;
|
|
}
|
|
/* 轨道 */
|
|
&.active::-webkit-scrollbar-track {
|
|
background: rgba(84, 48, 135,.2);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.newLabel{
|
|
text-align: center;
|
|
justify-content: center;
|
|
width: 16rem;
|
|
&.optionsItem_title{
|
|
width: 100%;
|
|
margin: 0;
|
|
justify-content: space-around;
|
|
border: none;
|
|
background: none;
|
|
position: sticky;
|
|
background: #fff;
|
|
border: none;
|
|
margin-top: auto;
|
|
bottom: 2rem;
|
|
>div{
|
|
}
|
|
.started_btn{
|
|
width: auto;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
opacity: .4;
|
|
pointer-events: none;
|
|
&.active{
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
// margin-right: auto;
|
|
}
|
|
}
|
|
>div{
|
|
display: flex;
|
|
width: 16rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.addLabel{
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
i{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |