<template>
|
<div>
|
<el-input :width="width" :class="inputClass" :style="inputStyle" :clearable="true" :value="value"
|
:disabled="disabled" :placeholder="placeholder" type="text" :size="size" @clear="clearValue" @focus="handleFocus">
|
<span slot="append" v-html="svgHtml" style="font-size: 18px;height:18px;display: block"></span>
|
</el-input>
|
<el-dialog v-dialogDrag
|
v-dialog-resize
|
title="请选择图标"
|
:visible.sync="visible"
|
width="90%"
|
:append-to-body="true"
|
class="avue-dialog avue-dialog--top"
|
@close="dialogClose">
|
<div style="display: flex;justify-content: space-between;flex-wrap: wrap">
|
<div class="tag-group">
|
<span class="tag-group__title">分类</span>
|
<el-tag
|
v-for="item in types"
|
:key="item.key"
|
:type="checkedTypes.includes(item.key)?'success':'info'" size="small"
|
effect="plain" @click="changeType(item.key)">
|
{{ item.value }}
|
</el-tag>
|
</div>
|
<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.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.lable)">
|
<div class="svgContent" v-html="svg.content"></div>
|
<span>{{svg.name.split(':')[1]}}</span>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {validatenull} from "@/util/validate";
|
import {getStore} from "@/util/store";
|
import func from "@/util/func";
|
import store from "@/store";
|
import {getIcons} from "@/api/UI/Icons";
|
import {getDicts} from "@/api/system/dict";
|
|
export default {
|
name: "input-icon",
|
props: {
|
value: {
|
type: String,
|
default: ''
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
width: {
|
type: String,
|
default:'100%'
|
},
|
size: {
|
type: String,
|
default:'small'
|
},
|
inputClass:{
|
type: String,
|
default:''
|
},
|
inputStyle:{
|
type: String,
|
default:''
|
}
|
},
|
data(){
|
return {
|
visible: false,
|
types: [],
|
checkedTypes:[],
|
searchText:'',
|
activeName:'',
|
svgHtml:'',
|
allIconList:[],
|
iconList:[]
|
}
|
},
|
watch:{
|
value:{
|
handler(val) {
|
this.svgHtml=func.getSVGByName(val);
|
}
|
}
|
},
|
created(){
|
this.getGroups();
|
if (!validatenull(this.$store.state.icons)) {
|
this.iconList = this.$store.state.icons;
|
} else {
|
this.iconList = getStore({ name:'icons'});
|
}
|
this.allIconList=this.iconList;
|
if(this.iconList && this.iconList.length>0){
|
this.activeName=this.iconList[0].lable;
|
}else {
|
getIcons().then(res => {
|
if (res.data.success) {
|
this.iconList = res.data.data;
|
this.allIconList = this.iconList;
|
store.dispatch("setIcons", this.iconList);
|
if (this.iconList.length > 0) {
|
this.activeName = this.iconList[0].lable;
|
}
|
} else {
|
this.$message.error(res.data.msg);
|
}
|
})
|
}
|
|
this.svgHtml=func.getSVGByName(this.value);
|
},
|
methods:{
|
getGroups() {
|
getDicts('EnumIconGroups').then(res => {
|
if (res.data.success) {
|
this.types = res.data.obj;
|
} else {
|
this.$message.error(res.data.msg);
|
}
|
})
|
},
|
dialogClose() {
|
this.visible = false;
|
},
|
handleFocus() {
|
if (!this.disabled) {
|
if(this.iconList&&this.iconList.length>0) {
|
this.activeName=this.iconList[0].lable;
|
}
|
this.visible = true;
|
}
|
},
|
//选择类型查询
|
changeType(type){
|
if(this.checkedTypes.includes(type)){
|
this.checkedTypes=this.checkedTypes.filter(item=> item!=type)
|
}else {
|
this.checkedTypes.push(type)
|
}
|
//按照分类过滤图标
|
if(this.checkedTypes.length==0){
|
this.iconList=this.allIconList
|
}else{
|
const checkedTypes=JSON.stringify(this.checkedTypes);
|
const iconList=[];
|
this.allIconList.forEach(item=>{
|
iconList.push({
|
lable:item.lable,
|
list:item.list.filter(iconitem=> {
|
return checkedTypes.indexOf(iconitem.groups)!=-1;
|
})
|
})
|
})
|
this.iconList=iconList;
|
}
|
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.content;
|
this.$emit('input',item.name)
|
this.dialogClose();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tag-group{font-size: 14px;}
|
.el-tag{
|
margin: 0 0 10px 10px;
|
cursor: pointer;
|
}
|
.iconList{
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.iconList .iconItem{
|
width: 85px;
|
margin: 6px 5px 10px 5px;
|
text-align: center;
|
}
|
.iconList .iconItem .svgContent{
|
font-size: 24px;
|
}
|
.iconList .iconItem .svgContent:hover{
|
transform: scale(1.5);
|
}
|
.iconList .iconItem span{
|
font-size: 12px;
|
}
|
</style>
|
