2023-11-9-dist
This commit is contained in:
X1627315083
@@ -248,6 +248,21 @@ export default defineComponent({
|
||||
this.getMannequins()
|
||||
}
|
||||
},
|
||||
// 'workspaceItem.sex':{
|
||||
// handler(newVal:any,oldVal:any){
|
||||
// console.log(oldVal);
|
||||
|
||||
// if(oldVal){
|
||||
// console.log(oldVal);
|
||||
|
||||
// if(newVal != oldVal){
|
||||
// console.log(this.workspaceItem.position);
|
||||
|
||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
workspaceItem:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
this.store.commit("setWorkspace", this.workspaceItem);
|
||||
@@ -259,9 +274,8 @@ export default defineComponent({
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
mounted() {
|
||||
this.getworkspace()
|
||||
this.getSex()
|
||||
},
|
||||
directives:{
|
||||
fade:{
|
||||
@@ -299,8 +313,8 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getSex(){
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
||||
async getSex(){
|
||||
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
let arr:any = []
|
||||
rv.forEach((item:any) => {
|
||||
@@ -311,19 +325,18 @@ export default defineComponent({
|
||||
arr.push(obj)
|
||||
});
|
||||
this.sex = arr
|
||||
this.getPosition()
|
||||
}
|
||||
})
|
||||
|
||||
this.getPosition('')
|
||||
},
|
||||
getPosition(){
|
||||
async getPosition(str:any){
|
||||
let params
|
||||
if(this.workspaceItem.sex == 'Female'){
|
||||
params = 'FemalePosition'
|
||||
}else{
|
||||
params = 'MalePosition'
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
|
||||
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
let arr:any = []
|
||||
rv.forEach((item:any) => {
|
||||
@@ -334,12 +347,15 @@ export default defineComponent({
|
||||
arr.push(obj)
|
||||
});
|
||||
this.singleTypeList = arr
|
||||
if(this.workspaceItem.overallSingle){
|
||||
if(str == 'sex'){
|
||||
this.workspaceItem.position = this.singleTypeList[0].label
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
setPosition(){
|
||||
this.workspaceItem.position = this.singleTypeList[0].label
|
||||
},
|
||||
getworkspace(){
|
||||
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
|
||||
// if (rv) {
|
||||
@@ -367,7 +383,7 @@ export default defineComponent({
|
||||
});
|
||||
this.workspace.id = rv.id
|
||||
this.workspace.workspaceList = rv.page.content
|
||||
|
||||
this.getSex()
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -420,6 +436,7 @@ export default defineComponent({
|
||||
setOverallSingle(){
|
||||
if(this.workspaceItem.overallSingle){
|
||||
this.workspaceItem.position = this.singleTypeList[0].label
|
||||
|
||||
}else{
|
||||
this.workspaceItem.position = 'Overall'
|
||||
}
|
||||
@@ -514,7 +531,8 @@ export default defineComponent({
|
||||
this.workspaceItem.sex = v
|
||||
this.getMannequins()
|
||||
this.setMannequinsSex()
|
||||
this.getPosition()
|
||||
this.getPosition('sex')
|
||||
|
||||
},
|
||||
//设置single & overall
|
||||
setSingle(v:string){
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList('')">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,7 +145,7 @@ export default defineComponent({
|
||||
function callback(entries:any, observer:any) {
|
||||
entries.forEach((entry:any) => {
|
||||
if (entry.isIntersecting) {
|
||||
this_.getLibraryList()
|
||||
this_.getLibraryList('di')
|
||||
} else {
|
||||
}
|
||||
});
|
||||
@@ -193,7 +193,7 @@ export default defineComponent({
|
||||
// entries.forEach((entry:any) => {
|
||||
// if (entry.isIntersecting) {
|
||||
// console.log(111);
|
||||
// // this_.getLibraryList()
|
||||
// // this_.getLibraryList('')
|
||||
// } else {
|
||||
// }
|
||||
// });
|
||||
@@ -251,7 +251,7 @@ export default defineComponent({
|
||||
init(code:any){
|
||||
this.selectCode = code
|
||||
// this.myMaterialModalShow = true
|
||||
this.getLibraryList()
|
||||
this.getLibraryList('')
|
||||
|
||||
},
|
||||
selectImgItem(imgData:any){
|
||||
@@ -267,21 +267,24 @@ export default defineComponent({
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
this.getLibraryList('')
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
this.getLibraryList('')
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
getLibraryList(){
|
||||
getLibraryList(str:any){
|
||||
let workspace = this.store.state.Workspace.workspace
|
||||
if(str == 'di'){
|
||||
this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
|
||||
}
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
// level2Type:this.designType,
|
||||
modelSex:workspace?.sex,
|
||||
page: this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1,
|
||||
page: this.currentPage,
|
||||
// page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
@@ -317,7 +320,12 @@ export default defineComponent({
|
||||
}
|
||||
aa.push(item)
|
||||
});
|
||||
this.imgList.push(...aa)
|
||||
if(aa[aa.length-1].id == this.imgList[this.imgList.length-1]?.id){
|
||||
|
||||
}else{
|
||||
this.imgList.push(...aa)
|
||||
}
|
||||
// this.imgList = aa
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
|
||||
344
src/component/LibraryPage/labelList.vue
Normal file
344
src/component/LibraryPage/labelList.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<a-modal class="library_setLabel"
|
||||
v-model:visible="setLabelShow"
|
||||
:footer="null"
|
||||
title="Edit tag"
|
||||
width="65%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@onCancel="clearSetLabel"
|
||||
>
|
||||
<div class="setLabel_centent">
|
||||
<ul class="optionsItem">
|
||||
<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
|
||||
<div class="setLabel_text">
|
||||
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
|
||||
<span v-show="!optionsItem.openType">{{ optionsItem.label }}</span>
|
||||
<input v-show="optionsItem.openType" type="text" v-model="itemName">
|
||||
<i v-show="optionsItem.openType" @click.stop="putName(index,'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>
|
||||
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.children" :key="childrenItem.id">
|
||||
<a-checkbox v-model:checked="childrenItem.checkAll"></a-checkbox>
|
||||
<span v-show="!childrenItem.openType">{{ childrenItem.label }}</span>
|
||||
<input v-show="childrenItem.openType" type="text" v-model="itemName">
|
||||
<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="newWorkspace(optionsItem)" class="newWorkspace 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>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li @click="newWorkspace('')" class="newWorkspace setLabel_text optionsItem_title">
|
||||
<input v-show="openType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="openType" class="fi fi-br-check"></i>
|
||||
<div v-show="!openType">+</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,createVNode,watch,nextTick} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import {dataURLtoFile,base64toFile} from "@/tool/util"
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
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)
|
||||
const options:any = ref([
|
||||
{
|
||||
label: 'Light',
|
||||
value: 'light',
|
||||
checkAll:false,
|
||||
children: new Array(10)
|
||||
.fill(null)
|
||||
.map((_, index) => ({ label: `Number ${index}`, value: index })),
|
||||
},
|
||||
{
|
||||
label: 'Bamboo',
|
||||
value: 'bamboo',
|
||||
checkAll:false,
|
||||
children: [
|
||||
{
|
||||
label: 'Little',
|
||||
checkAll:false,
|
||||
value: 'little',
|
||||
children: [
|
||||
{
|
||||
label: `'Toy Fish'`,
|
||||
value: 'fish',
|
||||
},
|
||||
{
|
||||
label: 'Toy Cards',
|
||||
value: 'cards',
|
||||
},
|
||||
{
|
||||
label: 'Toy Bird',
|
||||
value: 'bird',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
let checkedList = ref([])
|
||||
let openType = ref(false)
|
||||
let itemName = ref('')
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
multiple,
|
||||
indeterminate,
|
||||
value: ref<string[]>([]),
|
||||
options,
|
||||
checkedList,
|
||||
openType,
|
||||
itemName,
|
||||
t
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
setLabelShow:false,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
let bodyDom:any = document.getElementsByClassName('optionsItem')[0]
|
||||
nextTick().then(()=>{
|
||||
let dom:any = document.getElementsByClassName('childrenItem')
|
||||
let domParent:any = document.getElementsByClassName('optionsItem_title')
|
||||
let mouseover = ()=>{
|
||||
bodyDom.classList.add('active')
|
||||
}
|
||||
let mouseleave = ()=>{
|
||||
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)
|
||||
}
|
||||
|
||||
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){
|
||||
this.setLabelShow = true
|
||||
if(str === 'add'){
|
||||
this.multiple = false
|
||||
}else{
|
||||
this.multiple = true
|
||||
}
|
||||
|
||||
},
|
||||
clearSetLabel(){
|
||||
this.setLabelShow = false
|
||||
},
|
||||
onCheckAllChange(value:any){
|
||||
value.children.forEach((item:any) => {
|
||||
item.checkAll = value.checkAll
|
||||
});
|
||||
},
|
||||
putName(index:number,v:string,item:any){
|
||||
if(v == 'put'){
|
||||
this.options.forEach((optionsItem:any) => {
|
||||
optionsItem.openType = false
|
||||
optionsItem.addOpenType = false
|
||||
optionsItem.children.forEach((childrenItem:any) => {
|
||||
childrenItem.openType = false
|
||||
});
|
||||
});
|
||||
item.openType = true
|
||||
this.itemName = item.label
|
||||
|
||||
|
||||
// this.options[index].openType = true
|
||||
// this.itemName = this.workspace.workspaceList[index].workSpaceName
|
||||
}else if(v == 'affirm'){
|
||||
|
||||
if(index == -1){
|
||||
if(this.itemName == ''){
|
||||
message.warning(this.t('Habit.jsContent2'));
|
||||
}else{
|
||||
console.log(this.itemName);
|
||||
item.addOpenType = false
|
||||
}
|
||||
}else{
|
||||
item.label = this.itemName
|
||||
item.openType = false
|
||||
}
|
||||
}
|
||||
},
|
||||
newWorkspace(item:any){
|
||||
// console.log(index);
|
||||
|
||||
if(item){
|
||||
this.itemName = ''
|
||||
item.addOpenType = true
|
||||
}else{
|
||||
this.openType = true
|
||||
}
|
||||
// console.log(item.addOpenType);
|
||||
|
||||
// this.options.forEach((optionsItem:any) => {
|
||||
// optionsItem.openType = false
|
||||
// optionsItem.children.forEach((childrenItem:any) => {
|
||||
// childrenItem.openType = false
|
||||
// });
|
||||
// });
|
||||
// this.itemName = ''
|
||||
// item.openType = true
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.library_setLabel{
|
||||
.setLabel_centent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: 300px;
|
||||
max-height: 65rem;
|
||||
overflow-y: auto;
|
||||
// border-radius: ;
|
||||
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);
|
||||
}
|
||||
}
|
||||
.setLabel_text{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 2rem;
|
||||
width: 12rem;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
i{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.optionsItem{
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
}
|
||||
>li{
|
||||
>label{
|
||||
align-items: center;
|
||||
}
|
||||
.childrenItem{
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
height: 7rem;
|
||||
margin: 2rem 0;
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.newWorkspace{
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
div{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -9,26 +9,43 @@
|
||||
@onCancel="clearSetLabel"
|
||||
>
|
||||
<div class="setLabel_centent">
|
||||
<ul class="setLabel_label1" v-for="item1 in options" :key="item1.id">
|
||||
<li class="label1_title">
|
||||
<a-checkbox
|
||||
v-model:checked="item1.checkAll"
|
||||
:indeterminate="indeterminate"
|
||||
@change="onCheckAllChange(item1.children,$event)"
|
||||
>
|
||||
{{ item1.label }}
|
||||
</a-checkbox>
|
||||
<ul class="setLabel_label2" >
|
||||
<a-checkbox-group v-model:value="checkedList" :options="item1.children" />
|
||||
<ul class="optionsItem">
|
||||
<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
|
||||
<div class="setLabel_text">
|
||||
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
|
||||
<span v-show="!optionsItem.openType">{{ optionsItem.classificationName }}</span>
|
||||
<input v-show="optionsItem.openType" type="text" v-model="itemName">
|
||||
<i v-show="optionsItem.openType" @click.stop="putName(index,'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>
|
||||
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.children" :key="childrenItem.id">
|
||||
<a-checkbox v-model:checked="childrenItem.checkAll"></a-checkbox>
|
||||
<span v-show="!childrenItem.openType">{{ childrenItem.classificationName }}</span>
|
||||
<input v-show="childrenItem.openType" type="text" v-model="itemName">
|
||||
<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)" 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>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li @click="newLabel('')" 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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,createVNode,watch,reactive} from 'vue'
|
||||
import { defineComponent,ref,createVNode,watch,nextTick,inject} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import {dataURLtoFile,base64toFile} from "@/tool/util"
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
@@ -43,47 +60,13 @@ export default defineComponent({
|
||||
VueCropper,
|
||||
},
|
||||
setup() {
|
||||
let cropperTime:any = ref()
|
||||
let multiple = ref(false)
|
||||
let indeterminate = ref(true)
|
||||
const options: CascaderProps['options'] = [
|
||||
{
|
||||
label: 'Light',
|
||||
value: 'light',
|
||||
checkAll:false,
|
||||
children: new Array(20)
|
||||
.fill(null)
|
||||
.map((_, index) => ({ label: `Number ${index}`, value: index })),
|
||||
},
|
||||
{
|
||||
label: 'Bamboo',
|
||||
value: 'bamboo',
|
||||
checkAll:false,
|
||||
children: [
|
||||
{
|
||||
label: 'Little',
|
||||
checkAll:false,
|
||||
value: 'little',
|
||||
children: [
|
||||
{
|
||||
label: `'Toy Fish'`,
|
||||
value: 'fish',
|
||||
},
|
||||
{
|
||||
label: 'Toy Cards',
|
||||
value: 'cards',
|
||||
},
|
||||
{
|
||||
label: 'Toy Bird',
|
||||
value: 'bird',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let options:any = inject('options')//父组件传过来的数据
|
||||
let type:any = inject('type')//父组件传过来的数据
|
||||
let checkedList = ref([])
|
||||
|
||||
let openType = ref(false)
|
||||
let itemName = ref('')
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
multiple,
|
||||
@@ -91,6 +74,9 @@ export default defineComponent({
|
||||
value: ref<string[]>([]),
|
||||
options,
|
||||
checkedList,
|
||||
openType,
|
||||
type,
|
||||
itemName,
|
||||
t
|
||||
}
|
||||
},
|
||||
@@ -104,6 +90,42 @@ export default defineComponent({
|
||||
watch: {
|
||||
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
let bodyDom:any = document.getElementsByClassName('optionsItem')[0]
|
||||
nextTick().then(()=>{
|
||||
let dom:any = document.getElementsByClassName('childrenItem')
|
||||
let domParent:any = document.getElementsByClassName('optionsItem_title')
|
||||
let mouseover = ()=>{
|
||||
bodyDom.classList.add('active')
|
||||
}
|
||||
let mouseleave = ()=>{
|
||||
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)
|
||||
}
|
||||
|
||||
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){
|
||||
this.setLabelShow = true
|
||||
@@ -117,16 +139,108 @@ export default defineComponent({
|
||||
clearSetLabel(){
|
||||
this.setLabelShow = false
|
||||
},
|
||||
onCheckAllChange(item:any,e:any){
|
||||
console.log(this.checkedList);
|
||||
this.checkedList = item
|
||||
// this.checkedList.forEach((item)=>{
|
||||
// item.
|
||||
// })
|
||||
this.checkedList= e.target.checked ? item : [];
|
||||
this.indeterminate= false;
|
||||
}
|
||||
|
||||
onCheckAllChange(value:any){
|
||||
value.children.forEach((item:any) => {
|
||||
item.checkAll = value.checkAll
|
||||
});
|
||||
},
|
||||
putName(index:number,v:string,item:any){
|
||||
if(v == 'put'){
|
||||
this.options.forEach((optionsItem:any) => {
|
||||
optionsItem.openType = false
|
||||
optionsItem.addOpenType = false
|
||||
optionsItem.children.forEach((childrenItem:any) => {
|
||||
childrenItem.openType = false
|
||||
});
|
||||
});
|
||||
item.openType = true
|
||||
this.itemName = item.label
|
||||
|
||||
|
||||
// this.options[index].openType = true
|
||||
// this.itemName = this.workspace.workspaceList[index].workSpaceName
|
||||
}else if(v == 'affirm'){
|
||||
|
||||
if(index == -1){
|
||||
if(this.itemName == ''){
|
||||
message.warning(this.t('Habit.jsContent2'));
|
||||
}else{
|
||||
console.log(this.itemName);
|
||||
let data:any = {
|
||||
label:this.itemName,
|
||||
value:this.itemName,
|
||||
}
|
||||
if(item){
|
||||
item.addOpenType = false
|
||||
item.children.push(data)
|
||||
}else{
|
||||
this.openType = false
|
||||
data.children = []
|
||||
this.options.push(data)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
item.label = this.itemName
|
||||
item.openType = false
|
||||
}
|
||||
}
|
||||
},
|
||||
newLabel(item:any){
|
||||
// console.log(index);
|
||||
this.itemName = ''
|
||||
this.options.forEach((optionsItem:any) => {
|
||||
optionsItem.openType = false
|
||||
optionsItem.addOpenType = false
|
||||
optionsItem.children.forEach((childrenItem:any) => {
|
||||
childrenItem.openType = false
|
||||
});
|
||||
});
|
||||
this.openType = false
|
||||
|
||||
if(item){
|
||||
item.addOpenType = true
|
||||
}else{
|
||||
this.openType = true
|
||||
}
|
||||
// console.log(item.addOpenType);
|
||||
|
||||
// this.options.forEach((optionsItem:any) => {
|
||||
// optionsItem.openType = false
|
||||
// optionsItem.children.forEach((childrenItem:any) => {
|
||||
// childrenItem.openType = false
|
||||
// });
|
||||
// });
|
||||
// this.itemName = ''
|
||||
// item.openType = true
|
||||
this.addLabel()
|
||||
},
|
||||
addLabel(){
|
||||
let data = this.setLabelData()
|
||||
console.log(data);
|
||||
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
||||
(rv: any) => {
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
},
|
||||
setLabelData(){
|
||||
let data = {
|
||||
"classificationIdList": [],
|
||||
"classificationName": "123221",
|
||||
"createTime": "",
|
||||
"deleteConfirm": '',
|
||||
"id": '',
|
||||
"libraryId": '',
|
||||
"parentId": '',
|
||||
"type": this.type?.selectCode._value,
|
||||
"updateTime": "",
|
||||
"userId": ''
|
||||
}
|
||||
return data
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -135,6 +249,10 @@ export default defineComponent({
|
||||
.setLabel_centent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: 300px;
|
||||
max-height: 65rem;
|
||||
overflow-y: auto;
|
||||
// border-radius: ;
|
||||
ul{
|
||||
display: flex;
|
||||
li{
|
||||
@@ -143,6 +261,93 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
input{
|
||||
border: 0;
|
||||
width: 80%;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
.setLabel_text{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 2rem;
|
||||
width: 12rem;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
i{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.optionsItem{
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
}
|
||||
>li{
|
||||
>label{
|
||||
align-items: center;
|
||||
}
|
||||
.childrenItem{
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
height: 7rem;
|
||||
margin: 2rem 0;
|
||||
&.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;
|
||||
cursor: pointer;
|
||||
|
||||
div{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user