优化

src/components/DictField/index.vue

@@ -0,0 +1,149 @@
+<template>    
+    
+						<div class="field-box"> 
+							<el-avatar class="avater" icon="el-icon-top" :style="{backgroundColor:getMyColor(currentItem)}"></el-avatar> 
+							<div class="msg">
+								<span class="field-value">{{currentItem.name}} </span>
+								<span class="field-label">{{label}}</span>
+							</div>   
+							<slot name="select" :dict="dict" :value="myVal">
+                <dict-select :dict="dict" v-model="myVal" @change="onChange"></dict-select>
+              </slot>
+						</div> 
+  </template>
+  
+  <script>  
+  export default {
+    name: 'dict-field',
+    components: {   },
+    computed: {
+       currentItem(){
+        if(this.dict){
+           return this.dict.find(k=>k.id==this.myVal)
+        }else{
+            return null;
+        }
+       }
+    },
+    data(){
+        return {
+            myVal:'', 
+        }
+    },
+    watch:{ 
+        value:{ 
+          deep:true,
+          handler(){
+             this.initData();
+          }
+           
+        },  
+        
+      myVal(){
+        this.$emit('input',this.myVal)
+      }
+    },
+    props: {
+       label:{
+        type:String,
+        default:''
+       },
+        clearable:{
+            type:Boolean,
+            default:false,
+        },
+      dict:{
+        type:Array,
+        default:function(){return []}
+      },
+      value: {
+        
+      },   
+      
+      getIcon:{
+         type:Function 
+      },
+      getColor:{
+        type:Function 
+      } ,
+    },
+    methods: { 
+        
+        getMyColor(item){
+            if(this.getColor){
+                return this.getColor(item.id)
+            }
+            if(item.color){
+                return item.color
+            }
+            return ""
+        },
+        getMyIcon(item){
+            if(this.getIcon){
+                return this.getIcon(item.id)
+            }
+            if(item.icon){
+                return item.icon
+            }
+            return "";
+        },
+        initData(){
+             this.myVal=this.value
+            
+        }, 
+        
+        onChange(data){  
+          this.$emit('change',data)
+        }
+    },
+    mounted(){
+        this.initData();
+    }
+  }
+  </script>
+  
+
+<style lang="scss" scoped>
+ 
+
+
+.field-box {  
+    display: flex;
+    align-items: center;
+	cursor: pointer;
+    .avater { 
+		background-color:#FF9F73;
+    }
+
+    .msg {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        .title { 
+			margin-top: 5px;
+            font-size: 16px; 
+        } 
+		.field-label{  
+			margin-top: -10px;
+			 font-size: 14px;
+			 color: #C0C4CC;
+		}
+        
+    }
+	.my-select{
+		visibility:hidden;  
+	}
+	.btn{
+		margin-top: 0px;
+		visibility:hidden; 
+	} 
+	 
+}
+ .field-box:hover .btn{
+		visibility: visible !important;
+}
+ .field-box:hover .my-select{
+		visibility: visible !important;
+} 
+</style>
+  

src/main.js

@@ -26,12 +26,14 @@ Vue.use(VueQriously)
 import DateRange from '@/components/dateRange/index'
 import DictSelect from '@/components/DictSelect/index'
 import DictTag from '@/components/DictTag/index'
+import DictField from '@/components/DictField/index'
 
 Vue.prototype.$echarts = echarts
 Vue.use(Print); //注册
 Vue.component('date-range',DateRange) 
 Vue.component('dict-select',DictSelect)
 Vue.component('dict-tag',DictTag)
+Vue.component('dict-field',DictField)
 Vue.use(Element, {
   size: 'small', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/views/xm/core/xmTestPlanCase/XmTestPlanCaseEdit.vue

@@ -19,20 +19,8 @@
 								<span class="field-label">执行人</span>
 							</div>   
 						</el-col> 
-						<el-col :span="8" class="field-box"> 
-							<el-avatar class="avater" icon="el-icon-top" :style="{backgroundColor:getColor(editForm.priority)}"></el-avatar> 
-							<div class="msg">
-								<span class="field-value">{{formatDicts(dicts,'priority',editForm.priority)}} </span>
-								<span class="field-label">优先级</span>
-							</div>   
-							<el-select class="my-select" v-model="editForm.priority" @change="editSomeFields(editForm,'priority',$event)" clearable>
-								<el-option style="margin-top:5px;" v-for="(item,index) in dicts['priority']" :key="index" :value="item.id" :label="item.name">
-									<span :style="{backgroundColor:item.color,color:'aliceblue'}" class="padding"> 
-										<i  v-if="item.icon" :class="item.icon"></i>
-										{{item.name}}
-									</span> 
-								</el-option>
-							</el-select>
+						<el-col :span="8">  
+							<dict-field label="优先级" :dict="dicts['priority']" v-model="editForm.priority"></dict-field>
 						</el-col> 
 						
 						<el-col :span="8" class="field-box">