Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue

@@ -2,7 +2,7 @@
  <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"></span>
      <span slot="append" v-html="svgHtml" style="font-size: 18px;padding:3px 10px;width:18px;height:18px;display: block" @click="handleFocus"></span>
    </el-input>
    <el-dialog v-dialogDrag
               v-dialog-resize
@@ -14,23 +14,23 @@
               @close="dialogClose">
      <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
        <div class="tag-group">
          <span class="tag-group__title">分类</span>
          <span class="tag-group__title" v-if="types.length>0">分组</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.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" 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 - 60px);;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>
              <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>
@@ -47,6 +47,7 @@
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",
@@ -79,11 +80,12 @@
  data(){
    return {
      visible: false,
      types: ['标签一' , '标签二' ,  '标签三' , '标签四','标签五'  ],
      types: [],
      checkedTypes:[],
      searchText:'',
      activeName:'',
      svgHtml:'',
      allIconList:[],
      iconList:[]
    }
  },
@@ -95,48 +97,49 @@
    }
  },
  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].label;
      this.activeName=this.iconList[0].lable;
    }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;
        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() {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 +151,48 @@
      }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.svg;
      this.svgHtml=item.content;
      this.$emit('input',item.name)
      this.dialogClose();
    }
@@ -165,7 +200,17 @@
}
</script>

<style scoped>
<style scoped lang="scss">
::v-deep{
  .el-input-group__append, .el-input-group__prepend{
    padding: 0;
  }
  svg{
    font-size: inherit;
    height: 100%;
    width:100%;
  }
}
.tag-group{font-size: 14px;}
.el-tag{
  margin: 0 0 10px 10px;
@@ -177,11 +222,17 @@
  flex-wrap: wrap;
}
.iconList .iconItem{
  width: 65px;
  margin: 6px;
  width: 85px;
  margin: 6px 5px 10px 5px;
  text-align: center;
}
.iconList .iconItem div:hover{
.iconList .iconItem .svgContent{
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.iconList .iconItem .svgContent:hover{
  transform: scale(1.5);
}
.iconList .iconItem span{