优化

src/components/MdpFieldX/index.vue

@@ -0,0 +1,228 @@
+<template>    
+    
+						<div class="field-box" @click="showSelect">  
+							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>  
+              <div class="field-info" > 
+                <slot name="info">
+                  <span class="field-value">
+                    <slot name="value" :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
+                      <span  v-if="!avaterCpd.isNull">{{avaterCpd.innerText}}</span> 
+                      <span v-else class="label-font-color">无</span>
+                    </slot> 
+                  </span>  
+                    <span class="field-label" >
+                      <slot name="label"> {{label}}</slot> 
+                    </span>  
+                    <span class="oper" ref="operRef">
+                      <slot name="oper"   :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
+
+                      </slot>
+                    </span>
+                </slot>
+							</div>    
+						</div> 
+  </template>
+  
+  <script> 
+
+  
+import util from '@/common/js/util'
+  export default {
+    name: 'mdp-field-x',
+    components: {   },
+    computed: { 
+      avaterCpd(){  
+        var isEmpty=this.isEmpty(this.myVal)
+        var obj={isNull:isEmpty,icon:'el-icon-full-screen',color:'#E4E7ED',innerText:''} 
+          if(this.getColor||this.color){
+            if(this.getColor){
+               obj.color= this.getColor(this.myVal,currentItem,this.dict)
+            }else{
+              obj.color=this.color
+            }
+           
+          }else{
+            if(!isEmpty){ 
+                 obj.color= util.getColor(this.myVal) 
+            } 
+          } 
+          if(this.getIcon||this.icon){
+            if(this.getIcon){
+              obj.icon= this.getIcon(this.myVal,currentItem,this.dict)
+            }else if(this.icon){
+             obj.icon=this.icon
+            }
+          }else {
+            if(!isEmpty){ 
+                obj.icon='' 
+            } 
+          } 
+          if(isEmpty){
+            obj.innerText=''
+          }else{
+             
+              obj.innerText=this.myVal
+          }   
+        return obj;
+      }
+    },
+    data(){
+        return {
+            myVal:'', 
+        }
+    },
+    watch:{ 
+        value:{ 
+          deep:true,
+          handler(){
+             this.initData();
+          }
+           
+        },  
+        
+      myVal(){
+        this.$emit('input',this.myVal)
+      }
+    },
+    props: {
+      
+        disabled:{
+            type:Boolean,
+            default:false,
+        },
+       label:{
+        type:String,
+        default:''
+       },
+        clearable:{
+            type:Boolean,
+            default:false,
+        }, 
+      value: {
+        
+      },   
+      color:{
+        
+         type:String,
+         default:null, 
+      },
+      
+      icon:{
+         type:String,
+         default:null, 
+      },
+      getIcon:{
+         type:Function 
+      },
+      getColor:{
+        type:Function 
+      } ,
+    },
+    methods: { 
+      showSelect(){
+        if(this.disabled){
+          return;
+        }
+        if(this.$refs["operRef"]){
+          if(this.$refs["operRef"].onFieldClick){ 
+            this.$refs["operRef"].onFieldClick();
+          }
+        }
+      },  
+        initData(){
+             this.myVal=this.value
+            
+        }, 
+        
+        onChange(data){  
+          this.$emit('change',data)
+        },
+        isEmpty(v) { 
+          switch (typeof v) {
+          case 'undefined':
+              return true;
+          case 'string':
+              if(v.length == 0) return true;
+              break; 
+          case 'object':
+              if (null === v || v.length === 0) return true;
+              for (var i in v) {
+                  return false;
+              }
+              return true;
+          }
+          return false;
+        }
+    },
+    mounted(){
+        this.initData();
+    }
+  }
+  </script>
+  
+
+<style lang="scss" scoped>
+ 
+
+
+.field-box {  
+    display: flex;
+    margin-right:5px;
+    align-items: center;
+	  cursor: pointer;
+    height: 40px;
+    line-height: 40px;
+    .avater { 
+		  background-color:#FF9F73;
+    }
+
+    .field-info {
+      
+        height: 40px;
+        line-height: 40px;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        .field-value {  
+            height: 20px;
+            line-height: 20px;
+            font-size: 0.75rem; 
+        } 
+        .field-label{   
+          height: 20px;
+          line-height: 20px;
+            font-size: 0.75rem; 
+          color: #C0C4CC;
+        }
+        
+    }
+	.oper{
+    height: 20px;
+    line-height: 20px;
+    margin-left: 5px;
+    margin-right:5px;
+    max-width: 250px;
+    display: none;
+	} 
+	 
+}
+ .field-box:hover .field-label{
+  display: none;
+}
+ .field-box:hover .oper{
+    height: 20px;
+    margin-left: 5px; 
+    display: inline;
+}
+.dashed-circle{ 
+	width:40px;
+	height:40px;
+	border:2px dashed #000000;
+	border-radius:40px/40px;
+}
+.field-box:hover .dashed-circle{
+  
+	border:2px dashed #409EFF;
+}
+</style>
+  

src/main.js

@@ -23,6 +23,7 @@ import VueQriously from 'vue-qriously'
 Vue.use(VueQriously)
 
 
+import MdpFieldX from '@/components/MdpFieldX/index'
 import MdpDateX from '@/components/MdpDateX/index'
 import MdpDateRange from '@/components/MdpDateRange/index'
 import MdpDateRangeX from '@/components/MdpDateRangeX/index'
@@ -35,6 +36,7 @@ import MyInput from '@/components/MDinput/index'
 Vue.prototype.$echarts = echarts
 Vue.use(Print); //注册
 Vue.component('mdp-date-range',MdpDateRange) 
+Vue.component('mdp-field-x',MdpFieldX) 
 Vue.component('mdp-select-dict',MdpSelectDict)
 Vue.component('mdp-select-dict-tag',MdpSelectDictTag)
 Vue.component('mdp-select-dict-x',MdpSelectDictX)

src/views/xm/core/xmTask/XmTaskEdit.vue

@@ -134,28 +134,25 @@
 						
 						<el-row> 
 							<el-col :span="8"> 
-								 <el-form-item label="上级计划" prop="parentTaskname">  
-									<template slot="label"> 
-										<div    class="icon" :style="{backgroundColor:   '#E6A23C'}">
-										<i :class=" 'el-icon-odometer' " ></i>
-										</div> 
-										上级计划
-									</template>
-									<font v-if="editForm.parentTaskid" >{{editForm.parentTaskname?editForm.parentTaskname:editForm.parentTaskid}}</font> 
-									<font v-else>无上级(视为顶级)</font> 
-									
-									<el-button
+								<mdp-field-x v-model="editForm.parentTaskname" label="上级计划" icon="el-icon-odometer" color="#E6A23C">
+									<el-button slot="oper"
 										@click="selectParentTaskVisible=true"  
 										title="更换任务的上级，实现任务搬家功能"
 										icon="el-icon-upload2" 
 									> </el-button> 
-								</el-form-item>
+								</mdp-field-x> 
 							</el-col> 
 							
 							<el-col :span="8">   
-								<el-form-item label="进度">   
-										{{editForm.rate?editForm.rate:0}}%
-								</el-form-item>  
+								<mdp-field-x v-model="editForm.rate" label="进度"> 
+									<div slot="info"><el-progress slot="info" :text-inside="true" :stroke-width="20" :percentage="editForm.rate" status="exception"></el-progress></div>
+								</mdp-field-x> 
+										
+								 
+							</el-col> 
+							
+							<el-col :span="8"> 
+ 									<mdp-select-dict-x label="优先级别" :dict="dicts['priority']" v-model="editForm.level" @change="editXmTaskSomeFields(editForm,'level',$event)"></mdp-select-dict-x>
 							</el-col> 
 						</el-row>
 						<el-row>
@@ -1017,6 +1014,9 @@
 					this.toPayMarketVisible=false;
 				})
 				
+			},
+			getRateColor(rate){
+				return "#F56C6C"
 			}
 		},//end method
 		components: {