IntellectIcon.vue

<template>

<!-- 
<c-col :span="24">
        <el-row>
            <el-col :span="spanVal" v-for="(item, idx) in displayIconList" :key="idx" :offset="1">
                <el-card :body-style="{ padding: '0px' }" style="height:100%">
                <img :src="item.src" class="image">
                <div style="padding: 5px;">
                    <span style="text-align:center;font-size:5px">{{item.name}}</span>
                    <el-button type="text" class="button" icon="el-icon-delete" @click="DeleteIcon(item.id)"></el-button>
                </div>
                </el-card>
            </el-col>
            <el-col :span="spanVal" :offset="1">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="require('~/assets/add.png')" class="image" @click="AddIcon">
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="IconDialog" :title="'单据列表'">
            <div style="height:200px">
                <el-col :span="14">
                    <el-col :span="spanVal" v-for="(item, idx) in hideIconList" :key="idx" :offset="1">
                        <el-card :body-style="{ padding: '0px' }" style="height:100%">
                        <img :src="item.src" class="image">
                        <div style="padding: 5px;">
                            <span style="text-align:center;font-size:5px">{{item.name}}</span>
                            <el-button type="text" class="button" icon="el-icon-plus" @click="InsertIcon(item.id)"></el-button>
                        </div>
                        </el-card>
                    </el-col>
                </el-col>
                
            </div>
        </el-dialog>
</c-col>
-->

<c-col :span="24">
        <el-row>
            <el-col :span="spanVal" v-for="(item, idx) in displayIconList" :key="idx" :offset="1">
                <el-card :body-style="{ padding: '0px' }" style="height:100%">
                    <!-- <img :src="item.src" class="image"> -->
                    <div class="image_icon" >
                        <span style="font-size:10px">{{item.name}}</span>
                        <el-button type="text" class="button" icon="el-icon-delete" @click="DeleteIcon(item.id)"></el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="spanVal" :offset="1">
                <el-card :body-style="{ padding: '0px', border:'1px dashed '}" style="height:100%">
                    <div class="image_icon" >
                        <!-- <img :src="require('~/assets/add.png')" class="image" @click="AddIcon"> -->
                        <!-- <span style="text-align:center;font-size:5px">添加</span> -->
                        <el-button type="text" class="button" icon="el-icon-plus" @click="AddIcon"></el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="IconDialog" :title="'单据列表'">
            <div style="height:200px">
                <el-col :span="14">
                    <el-col :span="spanVal" v-for="(item, idx) in hideIconList" :key="idx" :offset="1">
                        <el-card :body-style="{ padding: '0px'}" style="height:100%">
                        <!-- <img :src="item.src" class="image"> -->
                        <div class="image_icon" >
                            <span style="text-align:center;font-size:5px">{{item.name}}</span>
                            <el-button type="text" class="button" icon="el-icon-plus" @click="InsertIcon(item.id)"></el-button>
                        </div>
                        </el-card>
                    </el-col>
                </el-col>
                
            </div>
        </el-dialog>
</c-col>

</template>

<script>
import Api from "~/service/Api"
export default {
  props: {
    IconList: {
      type: [Array],
      default: () => {
        return [];
      },
    },
    spanVal:{
        type : [Number],
        default: () => {
            return 4;
        },
    }
  },
  data(){
    return {
        IconDialog: false,
        IconsData:[
            {
                id:"invoice",
                src: require("~/assets/发票1.png"),
                name:"发票",
            },
            {
                id:"receipt",
                src: require("~/assets/收据1.png"),
                name:"货物收据",
            },
            {
                id:"oceanShipping",
                src: require("~/assets/海运舱单.png"),
                name:"海运提单",
            }
        ],
    }
  },
  computed: {
      displayIconList: function(){
        const arr = []
        for(var i = 0; i < this.IconList.length; i++){
            for(var j = 0; j < this.IconsData.length; j++){
                if(this.IconsData[j].id == this.IconList[i]){
                    arr.push(this.IconsData[j]);
                    continue;
                }
            }
        }
        return arr;
      },
      hideIconList() {
        const arr = []
        for(var j = 0; j < this.IconsData.length; j++){
            if(!this.IconList.includes(this.IconsData[j].id)){
                arr.push(this.IconsData[j]);
                continue;
            }
        }
        return arr;
      }
  },
  methods: {
        DeleteIcon(id){
            this.$emit("deleteIcon", id)
        },
        AddIcon(){
            this.IconDialog = true;
        },
        InsertIcon(id){
            this.$emit("insertIcon", id)
        }
  },
  watch:{
      
  },
  created:function(){
  }
};
</script>

<style>
.icon_card{
    display: flex;
    justify-content: center;
    align-items: center;
}
.image {
    width: 10%;
    display: block;
  }
.image_icon {
    padding: 5px;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>