优化

src/api/mdp/meta/item.js

@@ -63,6 +63,27 @@ export const initSimpleDicts=function(categoryId,itemCodes){
                     data.forEach(dict=>{
                         if(dict.optionList){
                             dict.options=JSON.parse(dict.optionList)
+                            dict.options.forEach(k=>{
+                                var cellValue=k.id
+                                var classNames=['info','primary','success','warning','danger']; 
+                                var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
+                                var cellValueInt=parseInt(cellValue)
+                                if( isNaN(cellValueInt) ){
+                                  cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+                                }
+                                var colorIndex=cellValueInt % 10
+                                if(cellValueInt > 0 && colorIndex==0){
+                                  colorIndex=1
+                                }
+                                var typeIndex=cellValueInt % 5
+                                if(cellValueInt > 0 && typeIndex==0){
+                                  typeIndex=1
+                                }
+                                if(!k.color){
+                                    k.color=colors[colorIndex]
+                                }
+                                k.className=classNames[typeIndex]
+                            })
                         }else{
                         dict.options=[]
                         }

src/common/js/util.js

@@ -39,40 +39,104 @@ export default {
    * 通过字典值获取其名称，返回根值相同的字典,并自动计算其对应显示样式
    * 界面上可以类似使用
    * 显示：
-      <el-tag v-for="(item,index) in formatDictsWithClass(dicts,'xxxx',scope.row.xxxx)" :key="index" :type="item.className" effect="dark">{{item.name}}</el-tag>
+      <el-tag v-for="(item,index) in formatDictsWithClass(dicts,'xxxx',scope.row.xxxx)" :key="index" :type="item.className">{{item.name}}</el-tag>
    
    * 下拉框：
       <el-select v-model="editForm.xxxx" @change="editSomeFields(editForm,'xxxx',$event)">
-      <el-option v-for="(item,index) in dicts['xxxx']" :key="index" :value="item.id" :label="item.name"></el-option>
+        <el-option style="margin-top:5px;" v-for="(item,index) in dicts['xxxx']" :key="index" :value="item.id" :label="item.name">
+           <span :style="{backgroundColor:item.color}"> 
+              <i  v-if="item.icon" :class="item.icon"></i>
+              {{item.name}}
+           </span> 
+        </el-option>
       </el-select>
+
+      0|xx|#909399
+      1|xx|#409EFF
+      2|xx|#67C23A
+      3|xx|#E6A23C
+      4|xx|#F56C6C
+      5|xx|#00ced1
+      6|xx|#c71585
+      7|xx|#ff8c00
+      8|xx|#c7158577
+      9|xx|#ffd700
    * 
    * @param {*} dicts 
    * @param {*} itemCode 
    * @param {*} cellValue 
    * @returns [{id:'',name:'',className:'',color:'',icon:''}]
-   */
+   */ 
   formatDictsWithClass: function(dicts,itemCode,cellValue){ 
     
-    var classNames=['info','primary','success','warning','danger'];
+    var classNames=['info','primary','success','warning','danger']; 
+    var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
+
     let key=itemCode;
     if(!cellValue){
       return [];
     }
+    var cellValueInt=parseInt(cellValue)
+      if( isNaN(cellValueInt) ){
+        cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+      }
+      var colorIndex=cellValueInt % 10
+      if(cellValueInt > 0 && colorIndex==0){
+        colorIndex=1
+      }
+      var typeIndex=cellValueInt % 5
+      if(cellValueInt > 0 && typeIndex==0){
+        typeIndex=1
+      }
     if(dicts[key]==undefined || dicts[key]==null || dicts[key].length==0   ){
-      var className=cellValue%5;
-      return [{id:cellValue,name:cellValue,className:classNames[cellValue%5]}];
+      
+      return [{id:cellValue,name:cellValue,className:classNames[typeIndex],color:colors[colorIndex]}];
     }
-    let data=dicts[key].find(i=>i.id===cellValue)
-    let index=dicts[key].findIndex(i=>i.id===cellValue)
+    let data=dicts[key].find(i=>i.id===cellValue) 
     if(data){ 
-      data['className']=classNames[index%5]
+      data['className']=classNames[typeIndex]
+      if(!data.color){
+        data.color=colors[colorIndex]
+      } 
       return [data];
     }else{
-      return [{id:cellValue,name:cellValue,className:classNames[cellValue%5]}]
+      return [{id:cellValue,name:cellValue,className:classNames[typeIndex],color:colors[colorIndex]}]
     }
 
-  }, 
+  },  
+
+  getColor(cellValue){ 
+    var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
+    if(!cellValue){
+      return colors[0]
+    }
+    var cellValueInt=parseInt(cellValue)
+      if( isNaN(cellValueInt) ){
+        cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+      }
+      var colorIndex=cellValueInt % 10
+      if(cellValueInt > 0 && colorIndex==0){
+        colorIndex=1
+      }
+      return  colors[colorIndex]
+  },
+
+  getType(cellValue){ 
+    var classNames=['info','primary','success','warning','danger']; 
 
+    if(!cellValue){
+      return classNames[0]
+    }
+    var cellValueInt=parseInt(cellValue)
+      if( isNaN(cellValueInt) ){
+        cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+      } 
+      var typeIndex=cellValueInt % 5
+      if(cellValueInt > 0 && typeIndex==0){
+        typeIndex=1
+      }
+      return classNames[typeIndex]
+  },
   calcTableMaxHeight(cssSelector) {     
     var table=cssSelector;
     if(typeof cssSelector == 'string'){

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

@@ -31,11 +31,7 @@
 						
 						<el-col :span="8" class="avater-box">  
 							<div>    
-  								<el-button size="medium " v-if="editForm.execStatus=='0'" type="info" icon="el-icon-arrow-up" circle></el-button>
-  								<el-button size="medium " v-if="editForm.execStatus=='1'" type="success" icon="el-icon-check" circle></el-button>
-  								<el-button size="medium " v-if="editForm.execStatus=='2'" type="warning" icon="el-icon-minus" circle></el-button>
-  								<el-button size="medium " v-if="editForm.execStatus=='3'" type="primary" icon="el-icon-right" circle></el-button>
-  								<el-button size="medium " v-if="editForm.execStatus=='4'" type="danger" icon="el-icon-close" circle></el-button>
+  								<el-button size="medium " :type="getType(editForm.execStatus)" :icon="getExecStatusIcon(editForm.execStatus)" circle></el-button>
 							</div>
 							<div class="msg">
 								<span class="title">{{formatDicts(dicts,'testStepTcode',editForm.execStatus)}} </span>
@@ -132,7 +128,12 @@
 				</el-form-item>  
 				<el-form-item label="优先级" prop="priority">
 					<el-select  v-model="editForm.priority" @change="editSomeFields(editForm,'priority',$event)">
-						<el-option v-for="(item,index) in dicts['priority']" :key="index" :value="item.id" :label="item.name"></el-option>
+						<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-form-item> 
 				<el-form-item label="执行备注" prop="remark">
@@ -142,7 +143,12 @@
 				
 				<el-form-item label="测试结果" prop="execStatus">
 					<el-select v-model="editForm.execStatus" @change="editSomeFields(editForm,'execStatus',$event)">
-						<el-option v-for="(item,index) in dicts['testStepTcode']" :key="index" :value="item.id" :label="item.name"></el-option>
+						<el-option style="margin-top:5px;" v-for="(item,index) in dicts['testStepTcode']" :key="index" :value="item.id" :label="item.name">
+							<span :style="{backgroundColor:item.color,color:'aliceblue'}" class="padding"> 
+								<i  :class="getExecStatusIcon(item.id)"></i>
+								{{item.name}}
+							</span> 
+						</el-option>
 					</el-select>
 				</el-form-item> 
 			</el-form>
@@ -283,11 +289,19 @@ TestStepResult,MyInput,
                     this.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'})
                   }
                 }).catch((e)=>Object.assign(this.editForm,this.editFormBak))
-            },
+            }, 
+
+			getExecStatusIcon(execStatus){
+				var icons=['el-icon-arrow-up','el-icon-right','el-icon-check','el-icon-minus','el-icon-close'];
+				if(!execStatus){
+					return icons[0]
+				}
+				return icons[parseInt(execStatus)]
+			}
 		},//end method
 		mounted() {
 		    this.$nextTick(() => {
-                initDicts(this);
+                initDicts(this);  
                 this.initData()
                 this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el)
             });