优化

src/components/DictField/index.vue

@@ -1,11 +1,11 @@
 <template>    
     
 						<div class="field-box">  
-							<el-avatar class="avater" :icon="getMyIcon(currentItem)" :style="{backgroundColor:getMyColor(currentItem)}">{{currentItem && currentItem.icon?'':currentItem.name}}</el-avatar> 
+							<el-avatar class="avater" :icon="getMyIcon(currentItem)" :style="{backgroundColor:getMyColor(currentItem)}">{{getMyAvaterInfo(currentItem)}}</el-avatar> 
 							
               <div class="field-info">
                 <slot name="field-info" :dict="dict" :item="currentItem">
-								<span class="field-value">{{currentItem.name}} </span>
+								<span class="field-value">{{currentItem?currentItem.name:''}} </span>
                 <slot name="label" :dict="dict" :item="currentItem">
 								  <span class="field-label">{{label}}</span>
                 </slot>
@@ -73,8 +73,17 @@
       } ,
     },
     methods: { 
-        
+        getMyAvaterInfo(item){
+          if(!item){
+            return ""
+          }else{
+            return item.icon?"":item.name
+          }
+        },
         getMyColor(item){
+          if(!item){
+            return ""
+          }
             if(this.getColor){
                 return this.getColor(item.id)
             }
@@ -84,6 +93,9 @@
             return ""
         },
         getMyIcon(item){
+          if(!item){
+            return ""
+          }
             if(this.getIcon){
                 return this.getIcon(item.id)
             }

src/components/DictSelect/index.vue

@@ -69,6 +69,9 @@
             
         },
         getMyColor(item){
+            if(!item){
+                return "";
+            }
             if(this.getColor){
                 return this.getColor(item.id)
             }
@@ -78,6 +81,9 @@
             return ""
         },
         getMyIcon(item){
+            if(!item){
+                return "";
+            }
             if(this.getIcon){
                 return this.getIcon(item.id)
             }

src/components/DictTag/index.vue

@@ -1,11 +1,19 @@
 <template>    
-    <el-tag v-if="currentItem"  :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag>
+    <div class="item-box">
+        <div class="item-info">
+            <el-tag v-if="currentItem"  :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag>
+        </div>
+        <div class="item-select">
+            <dict-select :dict="dict" v-model="myVal" @change="onChange"></dict-select>
+        </div>
+    </div>
+    
   </template>
   
-  <script>  
+  <script> 
   export default {
     name: 'dict-tag',
-    components: {   },
+    components: {  },
     computed: {
        currentItem(){
         if(this.dict){
@@ -45,9 +53,14 @@
       value: {
         
       },   
+      
+        
     },
     methods: { 
         
+        onChange(data){  
+          this.$emit('change',data)
+        },
         initData(){
              this.myVal=this.value
             
@@ -60,5 +73,22 @@
   </script>
   
   <style rel="stylesheet/scss" lang="scss" scoped> 
+    .item-box{
+        display: flex;
+        cursor: pointer;
+        .item-info{
+            display:inherit; 
+            height: 60px;
+        }
+        .item-select{
+            display: none;
+        }  
+    }
+    .item-box:hover .item-info{
+       display: none;
+    }
+    .item-box:hover .item-select{
+        display:inherit;
+    }
   </style>