diff --git a/src/components/Mdp/index.scss b/src/components/Mdp/index.scss
new file mode 100644
index 00000000..be4f063a
--- /dev/null
+++ b/src/components/Mdp/index.scss
@@ -0,0 +1,79 @@
+
+.field-box {
+  display: flex;
+  margin-right: 5px;
+  align-items: center;
+  cursor: pointer;
+  height: 40px;
+  line-height: 40px;
+  .field-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;
+    }
+  }
+  .field-oper {
+    height: 40px;
+    line-height: 40px;
+    margin-left: 5px;
+    margin-right: 5px; 
+    display: none;
+  }
+}
+.field-box:hover .field-info.enabled {
+  display: none;
+}
+.field-box:hover .field-oper.enabled {
+  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;
+}
+
+
+.avatar-container {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  .avatar-wrapper {
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .user-avatar {
+          height: 34px;
+          width: 34px;
+          border-radius: 50%;
+          margin-right: 12px;
+      }
+      .username{
+          color: #7D7D7D;
+          font-size: 0.75rem; 
+      }
+      .el-icon-caret-bottom {
+          font-size: 22px;
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/components/MdpDateRangeX/index.vue b/src/components/MdpDateRangeX/index.vue
index fe572a24..6db8df5d 100644
--- a/src/components/MdpDateRangeX/index.vue
+++ b/src/components/MdpDateRangeX/index.vue
@@ -1,15 +1,19 @@
 <template>   
 <div class="field-box">  
-							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
+							<el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
-              <div class="field-info">
+              <div class="field-info"  :class="{disabled:disabled===true,enabled:disabled!==true}">
                 <slot name="field-info" :value="dateRange">
 								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span> 
 								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
                 <slot name="label">
 								  <span class="field-label">{{label}}</span>
                   
-                  <div v-if="disabled!==true" class="my-select" name="select" :value="dateRange">
+                  
+                </slot>
+                </slot>
+							</div>   
+              <div v-if="disabled!==true" class="field-oper"  :class="{disabled:disabled===true,enabled:disabled!==true}">
                     
                   <el-date-picker :type="type" :style="styleObj"  v-model="dateRange" :value-format="valueFormat" :format="format" 
                       unlink-panels 
@@ -20,17 +24,14 @@
                       @change="onDateRangeChange"
                       :picker-options="pickerOptions"   
                       ></el-date-picker>  
-                  </div>
-                </slot>
-                </slot>
-							</div>   
+              </div>
 						</div>  
 </template>
 
 <script> 
 import util from '@/common/js/util'
 export default {
-  name: 'date-range',
+  name: 'mdp-date-range-x',
   components: {   },
   computed: {
      avaterCpd(){  
@@ -229,68 +230,7 @@ export default {
 }
 </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;
-        }
-        
-    }
-	.my-select{
-    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 .my-select{
-    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>
+<style lang="scss" scoped>  
+    @import '../Mdp/index.scss';
+</style> 
diff --git a/src/components/MdpDateX/index.vue b/src/components/MdpDateX/index.vue
index a29a6ace..b07523d6 100644
--- a/src/components/MdpDateX/index.vue
+++ b/src/components/MdpDateX/index.vue
@@ -3,20 +3,21 @@
 						<div class="field-box">  
 							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
-              <div class="field-info">
+              <div class="field-info"  :class="{disabled:disabled===true,enabled:disabled!==true}">
                 <slot name="field-info" :value="dateRange">
 								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span> 
 								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
                 <slot name="label">
 								  <span class="field-label">{{label}}</span> 
-                  <div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
-                    <el-date-picker    v-model="myVal" :value-format="valueFormat" :format="format"   
-                    @change="onChange"
-                    :picker-options="pickerOptions"></el-date-picker>
-                  </div>
+
                 </slot>
                 </slot>
 							</div>   
+              <div v-if="disabled!==true" class="field-oper"  :class="{disabled:disabled===true,enabled:disabled!==true}">
+                <el-date-picker    v-model="myVal" :value-format="valueFormat" :format="format"   
+                @change="onChange"
+                :picker-options="pickerOptions"></el-date-picker>
+              </div>
 						</div> 
   </template>
   
@@ -160,67 +161,7 @@
   </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;
-        }
-        
-    }
-	.my-select{
-    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 .my-select{
-    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>
+<style lang="scss" scoped>  
+    @import '../Mdp/index.scss';
+</style> 
   
\ No newline at end of file
diff --git a/src/components/MdpFieldX/index.vue b/src/components/MdpFieldX/index.vue
index 4fba9745..817f7545 100644
--- a/src/components/MdpFieldX/index.vue
+++ b/src/components/MdpFieldX/index.vue
@@ -1,8 +1,11 @@
 <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>
+                <slot name="avater" :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
+							    <el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>  
+                </slot>
+              <div class="field-info"  :class="{disabled:disabled===true,enabled:disabled!==true}"> 
                 <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}">
@@ -12,14 +15,16 @@
                   </span>  
                     <span class="field-label" >
                       <slot name="label"> {{label}}</slot> 
-                    </span>  
-                    <span class="oper" ref="operRef">
+                    </span>   
+                </slot>
+							</div>  
+              <div class="field-oper" ref="operRef"  :class="{disabled:disabled===true,enabled:disabled!==true}"> 
                       <slot name="oper"   :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
 
-                      </slot>
-                    </span>
-                </slot>
-							</div>    
+                      </slot>  
+              </div>  
+              
+              </slot>
 						</div> 
   </template>
   
@@ -161,68 +166,7 @@ import util from '@/common/js/util'
   </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>
+<style lang="scss" scoped>  
+    @import '../Mdp/index.scss';
+</style> 
   
\ No newline at end of file
diff --git a/src/components/MdpSelectDictTag/index.vue b/src/components/MdpSelectDictTag/index.vue
index bb9589fc..960754b9 100644
--- a/src/components/MdpSelectDictTag/index.vue
+++ b/src/components/MdpSelectDictTag/index.vue
@@ -1,9 +1,9 @@
 <template>    
-    <div class="item-box">
-        <div :class="{'item-info':disabled!==true}">
-            <el-tag v-if="currentItem"  :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag>
+    <div class="field-box">
+        <div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
+           <div><el-tag   v-if="currentItem"  :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag></div> 
         </div>
-        <div v-if="disabled!==true" class="item-select">
+        <div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
             <mdp-select-dict :dict="dict" v-model="myVal" @change="onChange" :clearable="closable"></mdp-select-dict>
         </div>
     </div>
@@ -78,24 +78,7 @@
     }
   }
   </script>
-  
-  <style rel="stylesheet/scss" lang="scss" scoped> 
-    .item-box{
-        display: flex;
-        cursor: pointer;
-        .item-info{
-            display:inherit; 
-            height: 33px;
-        }
-        .item-select{
-            display: none;
-        }  
-    }
-    .item-box:hover .item-info{
-       display: none;
-    }
-    .item-box:hover .item-select{
-        display:inherit;
-    }
-  </style>
+<style lang="scss" scoped>  
+    @import '../Mdp/index.scss';
+</style> 
   
\ No newline at end of file
diff --git a/src/components/MdpSelectDictX/index.vue b/src/components/MdpSelectDictX/index.vue
index ff6a392d..3c4d361d 100644
--- a/src/components/MdpSelectDictX/index.vue
+++ b/src/components/MdpSelectDictX/index.vue
@@ -1,238 +1,201 @@
-<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" > 
-								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span> 
-								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
-								  <span class="field-label" >{{label}}</span>  
-                  <mdp-select-dict v-if="disabled!==true" :dict="dict" ref="selectRef" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor" :icon="icon"></mdp-select-dict> 
-							</div>    
-						</div> 
-  </template>
-  
-  <script> 
+<template>
+  <div class="field-box" @click="showSelect">
+    <slot name="avater" class="field-avater">
+      <el-avatar
+        :class="{ 'dashed-circle': avaterCpd.isNull }"
+        :icon="avaterCpd.icon"
+        :style="{ backgroundColor: avaterCpd.color }"
+        >{{ avaterCpd.innerText }}</el-avatar
+      >
+    </slot>
 
+    <div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
+      <slot name="info">
+        <span class="field-value" v-if="!avaterCpd.isNull"
+          >{{ avaterCpd.innerText }}
+        </span>
+        <span class="field-value" v-else
+          ><span class="label-font-color">无</span></span
+        >
+        <span class="field-label">{{ label }}</span>
+      </slot>
+    </div>
+    <div class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
+      <slot name="oper">
+        <mdp-select-dict
+          v-if="disabled !== true"
+          :dict="dict"
+          ref="selectRef"
+          v-model="myVal"
+          @change="onChange"
+          :get-icon="getIcon"
+          :get-color="getColor"
+          :icon="icon"
+        ></mdp-select-dict>
+      </slot>
+    </div>
+  </div>
+</template>
   
-import util from '@/common/js/util'
-  export default {
-    name: 'mdp-select-dict-x',
-    components: {   },
-    computed: {
-       currentItem(){
-        if(this.dict){
-           return this.dict.find(k=>k.id==this.myVal) 
-        }else{
-            return null;
-        }
-       },
-      avaterCpd(){ 
-        var currentItem = null
-        if(this.dict){
-          currentItem= this.dict.find(k=>k.id==this.myVal) 
-        }   
-        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){
-              if(currentItem&&currentItem.color){
-                obj.color=currentItem.color
-              }else{
-                 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){
-              if(currentItem && currentItem.icon){
-                obj.icon= currentItem.icon
-              }else{
-                obj.icon=''
-              }
-            } 
-          } 
-          if(isEmpty){
-            obj.innerText=''
-          }else{
-            if(currentItem==null){
-              obj.innerText=this.myVal
-            }else{
-              obj.innerText=currentItem.name
-            }
-          }   
-        return obj;
+  <script>
+import util from "@/common/js/util";
+export default {
+  name: "mdp-select-dict-x",
+  components: {},
+  computed: {
+    currentItem() {
+      if (this.dict) {
+        return this.dict.find((k) => k.id == this.myVal);
+      } else {
+        return null;
       }
     },
-    data(){
-        return {
-            myVal:'', 
+    avaterCpd() {
+      var currentItem = null;
+      if (this.dict) {
+        currentItem = this.dict.find((k) => k.id == this.myVal);
+      }
+      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;
         }
-    },
-    watch:{ 
-        value:{ 
-          deep:true,
-          handler(){
-             this.initData();
+      } else {
+        if (!isEmpty) {
+          if (currentItem && currentItem.color) {
+            obj.color = currentItem.color;
+          } else {
+            obj.color = util.getColor(this.myVal);
           }
-           
-        },  
-        
-      myVal(){
-        this.$emit('input',this.myVal)
+        }
       }
-    },
-    props: {
-      
-        disabled:{
-            type:Boolean,
-            default:false,
-        },
-       label:{
-        type:String,
-        default:''
-       },
-        clearable:{
-            type:Boolean,
-            default:false,
-        },
-      dict:{
-        type:Array,
-        default:function(){return []}
-      },
-      value: {
-        
-      },   
-      
-      icon:{
-         type:String,
-         default:null, 
-      },
-      getIcon:{
-         type:Function 
-      },
-      getColor:{
-        type:Function 
-      } ,
-    },
-    methods: { 
-      showSelect(){
-        if(this.disabled){
-          return;
+      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;
         }
-        if(this.$refs["selectRef"]){
-          if(this.$refs["selectRef"].$refs["selectRef"]){ 
-            this.$refs["selectRef"].$refs["selectRef"].toggleMenu();
+      } else {
+        if (!isEmpty) {
+          if (currentItem && currentItem.icon) {
+            obj.icon = currentItem.icon;
+          } else {
+            obj.icon = "";
           }
         }
-      }, 
-        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;
+      }
+      if (isEmpty) {
+        obj.innerText = "";
+      } else {
+        if (currentItem == null) {
+          obj.innerText = this.myVal;
+        } else {
+          obj.innerText = currentItem.name;
         }
+      }
+      return obj;
     },
-    mounted(){
+  },
+  data() {
+    return {
+      myVal: "",
+    };
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler() {
         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;
-    }
+    myVal() {
+      this.$emit("input", this.myVal);
+    },
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    dict: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    value: {},
 
-    .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;
+    icon: {
+      type: String,
+      default: null,
+    },
+    getIcon: {
+      type: Function,
+    },
+    getColor: {
+      type: Function,
+    },
+  },
+  methods: {
+    showSelect() {
+      if (this.disabled) {
+        return;
+      }
+      if (this.$refs["selectRef"]) {
+        if (this.$refs["selectRef"].$refs["selectRef"]) {
+          this.$refs["selectRef"].$refs["selectRef"].toggleMenu();
         }
-        
-    }
-	.my-select{
-    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 .my-select{
-    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{
+      }
+    },
+    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>
   
-	border:2px dashed #409EFF;
-}
+
+<style lang="scss" scoped>  
+  @import '../Mdp/index.scss';
 </style>
   
\ No newline at end of file
diff --git a/src/components/MdpSelectUserX/index.vue b/src/components/MdpSelectUserX/index.vue
index 6cb00499..5e9fc909 100644
--- a/src/components/MdpSelectUserX/index.vue
+++ b/src/components/MdpSelectUserX/index.vue
@@ -3,13 +3,16 @@
 						<div class="field-box">  
 							<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="field-info" :value="myVal">
+              <div class="field-info"  :class="{disabled:disabled===true,enabled:disabled!==true}">
+                <slot name="info" :value="myVal">
 								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
 								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
                 <slot name="label">
-								  <span class="field-label">{{label}}</span> 
-                  <div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
+								  <span class="field-label">{{label}}</span>  
+                </slot>
+                </slot>
+							</div>  
+              <div v-if="disabled!==true" class="field-oper" :value="myVal"  :class="{disabled:disabled===true,enabled:disabled!==true}">
                     <el-select v-model="myVal" @change="onSelectChange" :clearable="clearable">  
                           <el-option disabled value="" style="margin-bottom:5px;">
                               <el-row><el-button :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button> <el-button :type="deptUserVisible?'primary':''"  @click.stop="deptUserVisible=true">部门用户</el-button><el-button v-if="projectId" :type="projectVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button> </el-row>
@@ -24,10 +27,7 @@
                             </div>
                           </el-option> 
                       </el-select> 
-                  </div>
-                </slot>
-                </slot>
-							</div>   
+                  </div> 
 						</div> 
             <el-dialog :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
                <users-select :visible="deptUserVisible" :isSingleUser="true"  :isSelectByDept="true" @confirm="onConfirmUsers"></users-select>
@@ -258,95 +258,9 @@
   }
   </script>
   
+<style lang="scss" scoped>  
+  @import '../Mdp/index.scss';
+</style>
 
-<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;
-        }
-        
-    }
-	.my-select{
-    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 .my-select{
-    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;
-}
-
-
-.avatar-container {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    .avatar-wrapper {
-        cursor: pointer;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .user-avatar {
-            height: 34px;
-            width: 34px;
-            border-radius: 50%;
-            margin-right: 12px;
-        }
-        .username{
-            color: #7D7D7D;
-            font-size: 0.75rem; 
-        }
-        .el-icon-caret-bottom {
-            font-size: 22px;
-        }
-    }
-}
-</style>
   
\ No newline at end of file
diff --git a/src/views/xm/core/components/MdpSelectUserXm/index.vue b/src/views/xm/core/components/MdpSelectUserXm/index.vue
index f79a2244..e25db1d8 100644
--- a/src/views/xm/core/components/MdpSelectUserXm/index.vue
+++ b/src/views/xm/core/components/MdpSelectUserXm/index.vue
@@ -1,16 +1,18 @@
 <template>    
     <el-row>
 						<div class="field-box">  
-							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
+							<el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
-              <div class="field-info">
-                <slot name="field-info" :value="myVal">
+              <div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
+                <slot name="field-info" :value="myVal"  >
 								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
 								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
                 <slot name="label">
 								  <span class="field-label">{{label}}</span> 
+                </slot> 
                 </slot>
-                  <div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
+							</div>  
+              <div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
                     <el-select v-model="myVal" @change="onSelectChange" :clearable="clearable" filterable>  
                           
                           <el-option :value="myVal" disabled v-if="users && users.length>10">
@@ -30,9 +32,6 @@
                           </el-option>
                       </el-select> 
                   </div>
-                
-                </slot>
-							</div>  
 						</div> 
             <el-dialog v-if="disabled!==true" :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
                <users-select :visible="deptUserVisible" :isSingleUser="true"  :isSelectByDept="true" @confirm="onConfirmUsers"></users-select>
@@ -260,94 +259,8 @@
   }
   </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;
-        }
-        
-    }
-	.my-select{
-    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 .my-select{
-    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;
-}
-
-
-.avatar-container {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    .avatar-wrapper {
-        cursor: pointer;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .user-avatar {
-            height: 34px;
-            width: 34px;
-            border-radius: 50%;
-            margin-right: 12px;
-        }
-        .username{
-            color: #7D7D7D;
-            font-size: 0.75rem; 
-        }
-        .el-icon-caret-bottom {
-            font-size: 22px;
-        }
-    }
-}
+<style lang="scss" scoped>  
+  @import '@/components/Mdp/index.scss';
 </style>
+ 
   
\ No newline at end of file