From c47e02ce2df67fe5426bf186add45d141ddfbc00 Mon Sep 17 00:00:00 2001
From: wangting <wangting@vci-tech.com>
Date: 星期五, 20 十二月 2024 18:18:13 +0800
Subject: [PATCH] 图标管理
---
Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue | 84 ++++++++++++++++++++++++++----------------
1 files changed, 52 insertions(+), 32 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue b/Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue
index 2617ce8..156d397 100644
--- a/Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue
+++ b/Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue
@@ -17,21 +17,21 @@
<span class="tag-group__title">鍒嗙被</span>
<el-tag
v-for="item in types"
- :key="item"
- :type="checkedTypes.includes(item)?'success':'info'" size="small"
- effect="plain" @click="changeType(item)">
- {{ item }}
+ :key="item.value"
+ :type="checkedTypes.includes(item.value)?'success':'info'" size="small"
+ effect="plain" @click="changeType(item.value)">
+ {{ item.label }}
</el-tag>
</div>
- <avue-input v-model="searchText" placeholder="鏌ヨ" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input>
+ <avue-input v-model="searchText" @change="handleSearch" placeholder="鏌ヨ" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input>
</div>
<div style="height: 60vh">
<el-tabs v-model="activeName" @tab-click="handleTabClick">
- <el-tab-pane v-for="item in iconList" :label="item.label" :name="item.label">
+ <el-tab-pane v-for="item in iconList" :label="item.lable" :name="item.lable" style="height: calc(60vh - 80px);;overflow: auto ">
<div class="iconList">
- <div class="iconItem" v-for="svg in item.list" :data-value="svg.name" @click="checkSvg(svg,item.type)">
- <div v-html="svg.svg"></div>
- <span>{{svg.name.split(':')[1]}}</span>
+ <div class="iconItem" v-for="svg in item.list" :data-value="svg.name" @click="checkSvg(svg,item.lable)">
+ <div v-html="svg.content"></div>
+ <!--<span>{{svg.name.split(':')[1]}}</span>-->
</div>
</div>
</el-tab-pane>
@@ -79,11 +79,21 @@
data(){
return {
visible: false,
- types: ['鏍囩涓�' , '鏍囩浜�' , '鏍囩涓�' , '鏍囩鍥�','鏍囩浜�' ],
+ types: [{
+ label:'鎸夐挳',
+ value:0
+ },{
+ label:'鏍囩浜�',
+ value:1
+ },{
+ label:'鏍囩涓�',
+ value:2
+ }],
checkedTypes:[],
searchText:'',
activeName:'',
svgHtml:'',
+ allIconList:[],
iconList:[]
}
},
@@ -100,14 +110,16 @@
} else {
this.iconList = getStore({ name:'icons'});
}
+ this.allIconList=this.iconList;
if(this.iconList && this.iconList.length>0){
- this.activeName=this.iconList[0].label;
+ this.activeName=this.iconList[0].lable;
}else {
getIcons().then(res => {
this.iconList=res.data.data;
+ this.allIconList=this.iconList;
store.dispatch("setIcons", this.iconList);
if(this.iconList&&this.iconList.length>0) {
- this.activeName=this.iconList[0].label;
+ this.activeName=this.iconList[0].lable;
}
})
}
@@ -116,27 +128,10 @@
dialogClose() {
this.visible = false;
},
- handleFocus() {debugger;
+ handleFocus() {
if (!this.disabled) {
if(this.iconList&&this.iconList.length>0) {
- this.activeName=this.iconList[0].label;
- }else {
- if (!validatenull(this.$store.state.icons)) {
- this.iconList = this.$store.state.icons;
- } else {
- this.iconList = getStore({ name:'icons'});
- }
- if(this.iconList && this.iconList.length>0){
- this.activeName=this.iconList[0].label;
- }else {
- getIcons().then(res => {
- this.iconList=res.data.data;
- store.dispatch("setIcons", this.iconList);
- if(this.iconList&&this.iconList.length>0) {
- this.activeName=this.iconList[0].label;
- }
- })
- }
+ this.activeName=this.iconList[0].lable;
}
this.visible = true;
}
@@ -148,16 +143,41 @@
}else {
this.checkedTypes.push(type)
}
+ //鎸夌収鍒嗙被杩囨护鍥炬爣
+ if(this.checkedTypes.length==0){
+ this.iconList=this.allIconList
+ }else{
+ const checkedTypes=JSON.stringify(this.checkedTypes);
+ this.iconList=this.allIconList.filter(item=> {
+ return checkedTypes.indexOf(JSON.stringify(item.groups))!=-1;
+ })
+ }
+ this.activeName=this.iconList[0].lable;
},
handleTabClick(tab, event){
+ },
+ handleSearch(data){
+ if(data.value==''){
+ this.iconList=this.allIconList;
+ }
+ let iconList=[]
+ this.allIconList.forEach(item=> {
+ iconList.push({
+ lable:item.lable,
+ list: item.list.filter(iconItem=>{
+ return iconItem.name.replace(item.lable,'').indexOf(data.value)!=-1;
+ })
+ })
+ })
+ this.iconList=iconList;
},
clearValue(){
this.svgHtml='';
this.$emit('input','')
},
checkSvg(item){
- this.svgHtml=item.svg;
+ this.svgHtml=item.content;
this.$emit('input',item.name)
this.dialogClose();
}
--
Gitblit v1.9.3