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" @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,7 +79,16 @@
  data(){
    return {
      visible: false,
      types: ['标签一' , '标签二' ,  '标签三' , '标签四','标签五'  ],
      types: [{
        label:'按钮',
        value:0
      },{
        label:'标签二',
        value:1
      },{
        label:'标签三',
        value:2
      }],
      checkedTypes:[],
      searchText:'',
      activeName:'',
@@ -103,16 +112,16 @@
    }
    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 => {
      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;
        }
      })*/
      })
    }
  },
  methods:{
@@ -122,26 +131,7 @@
    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'});
          }
          this.allIconList=this.iconList;
          if(this.iconList && this.iconList.length>0){
            this.activeName=this.iconList[0].label;
          }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;
        }
        this.visible = true;
      }
@@ -157,11 +147,12 @@
      if(this.checkedTypes.length==0){
        this.iconList=this.allIconList
      }else{
        const checkedTypes=JSON.stringify(this.checkedTypes);
        this.iconList=this.allIconList.filter(item=> {
          return this.checkedTypes.includes(item.type);
          return checkedTypes.indexOf(JSON.stringify(item.groups))!=-1;
        })
      }
      this.activeName=this.iconList[0].label;
      this.activeName=this.iconList[0].lable;
    },
    handleTabClick(tab, event){

@@ -173,10 +164,9 @@
      let iconList=[]
      this.allIconList.forEach(item=> {
        iconList.push({
          label:item.label,
          type:item.type,
          lable:item.lable,
          list: item.list.filter(iconItem=>{
            return iconItem.name.replace(item.label,'').indexOf(data.value)!=-1;
            return iconItem.name.replace(item.lable,'').indexOf(data.value)!=-1;
          })
        })
      })
@@ -187,7 +177,7 @@
      this.$emit('input','')
    },
    checkSvg(item){
      this.svgHtml=item.svg;
      this.svgHtml=item.content;
      this.$emit('input',item.name)
      this.dialogClose();
    }