优化

src/views/xm/core/components/XmItSelect.vue

@@ -1,7 +1,67 @@
-<template> 
-	<el-select v-model="iterationId" placeholder="迭代" @focus="focus" :clearable="clearable">
-		<el-option v-for="(item,index) in xmIterations" :label="item.iterationName" :value="item.id" :key="index" ></el-option>
-	</el-select>
+<template>
+	<section>  
+		<el-popover style="display:inline;"
+			placement="bottom"
+			width="400"
+			v-model="tableVisible"
+			trigger="manual" >  
+			<el-row>
+				<el-table ref="table" :height="maxTableHeight" :data="xmIterations" row-key="id"    @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
+ 					<el-table-column prop="iterationName" label="迭代" >
+						<template slot="header" slot-scope="scope">
+						迭代 &nbsp;&nbsp;&nbsp;
+						<span style="float:right;">
+						<el-button v-if="clearable!==false && editForm && editForm.id" type="text" @click="clearSelectIteration">清空</el-button> &nbsp;&nbsp;<el-button type="text" @click="close">关闭</el-button>&nbsp;&nbsp;
+						<el-popover 
+							placement="top-start"
+							title=""
+							v-model="moreVisible"
+							width="400"
+							trigger="manual" >
+							<el-row>   
+								<el-col :span="24"  style="padding-top:5px;"> 
+									<font class="more-label-font">迭代编号:</font><el-input  v-model="filters.id"   placeholder="输入迭代编号">  
+									</el-input> 
+								</el-col>
+								<el-col  :span="24"  style="padding-top:5px;">
+									<font class="more-label-font">上线时间:</font>
+									<el-date-picker 
+										v-model="dateRangerOnline"
+										type="daterange"
+										align="right"
+										unlink-panels
+										range-separator="至"
+										start-placeholder="开始日期"
+										end-placeholder="完成日期"
+										value-format="yyyy-MM-dd HH:mm:ss"
+										:default-time="['00:00:00','23:59:59']"
+										:picker-options="pickerOptions"
+									></el-date-picker>
+								</el-col>
+								<el-col :span="24" style="padding-top:5px;">
+										<font class="more-label-font">迭代名称:</font><el-input  v-model="filters.key"  placeholder="模糊查询"></el-input>
+								</el-col> 
+								<el-col :span="24" style="padding-top:5px;">
+									<el-button  type="text"   @click="moreVisible=false">关闭</el-button>
+									<el-button  type="primary" icon="el-icon-search" @click="searchXmIterations">查询</el-button>
+								</el-col> 
+							</el-row>
+							<el-button type="text" slot="reference" style="float:right;" @click="moreVisible=!moreVisible"  icon="el-icon-search">更多条件</el-button>
+						</el-popover>
+						</span>
+					</template>
+						<template slot-scope="scope">
+
+							{{scope.row.iterationName}}  <font   :color="calcFinishRate(scope.row)==100?'green':'#FF8C00'">{{calcFinishRate(scope.row)}}%</font>
+						</template>
+					</el-table-column> 
+				</el-table>
+				<el-pagination  layout="total, prev,  next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination>
+
+			</el-row>
+			<el-link title="点击选中迭代" @click="tableVisible=!tableVisible"  type="warning" slot="reference" icon="el-icon-search"><font style="font-size:14px;">{{editForm&&editForm.id?editForm.iterationName:'选择迭代'}}</font></el-link> 
+		</el-popover> 
+	</section>
 </template>
 
 <script>
@@ -10,9 +70,8 @@
 	import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询
 	import { listXmIteration,listXmIterationWithState, delXmIteration, batchDelXmIteration,loadTasksToXmIterationState } from '@/api/xm/core/xmIteration';
   
-	const map={};
-
-	import { mapGetters } from 'vuex'
+	const map=new Map();
+	import { mapGetters } from 'vuex' 
 
 	export default {
 		computed: {
@@ -20,108 +79,204 @@
 		      'userInfo','roles'
 			]), 
 		},
-		props:[ 'clearable', 'value', 'productId','linkProjectId','autoSelect'],
+		props:['clearable', 'productId', 'linkProjectId','autoSelect'],
 		watch:{ 
 			productId:function(){
-				this.initData();
-			},
-			
-			linkProjectId:function(){
-				this.initData();
-			},
-			value(){
-				this.iterationId=this.value;
+				this.getXmIterations();
 			},
-			iterationId(){
-				this.$emit("input",this.iterationId)
-				if(!this.iterationId){
-					this.$emit("change",null)
-					return;
-				}
-				if(this.xmIterations){
-					var iteration=this.xmIterations.find(i=>i.id==this.iterationId)
-					this.$emit("change",iteration)
-				}else{
-					var iteration={id:this.iterationId}
-					this.$emit("change",iteration)
-				}
-				
+			iterationId:function(){
+				this.getXmIterations();
 			}
 		},
-		data() { 
+		data() {
+			const beginDate = new Date();
+			const endDate = new Date();
+			beginDate.setTime(beginDate.getTime() - 3600 * 1000 * 24 * 7 * 4 * 12 ); 
+			endDate.setTime(endDate.getTime() + 3600 * 1000 * 24 * 7 * 4 * 12 ); 
 			return {
-				load:{list:false,},
-				 iterationId:null,
-				 xmIterations:null,
+				filters: {
+					key: '',
+					queryScope:'',//迭代查询范围 iterationId\branchId\compete\''
+					id:'',//迭代编号
+				},
+				pickerOptions:  util.pickerOptions('datarange'), 
+				dateRangerOnline: [ 
+				],//上线时间选择范围
+				xmIterations: [],//查询结果
+				pageInfo:{//分页数据
+					total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
+					pageSize:10,//每页数据
+					count:false,//是否需要重新计算总记录数
+					pageNum:1,//当前页码、从1开始计算
+					orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
+					orderDirs:[]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
+				},
+				load:{ list: false, edit: false, del: false, add: false },//查询中...
+				sels: [],//列表选中数据
+				dicts:{
+					//sex:[],
+				},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]}
+
+ 				//新增xmIteration界面初始化数据
+				addForm: {
+					id:'',branchId:'',iterationName:'',startTime:'',endTime:'',onlineTime:'',pid:'',adminUserid:'',adminUsername:'',ctime:'',budgetCost:'',budgetWorkload:'',distBudgetCost:'',distBudgetWorkload:'',actCost:'',actWorkload:'',actStaffNum:'',seqNo:'',
+				}, 
+				//编辑xmIteration界面初始化数据
+				editForm: {
+					id:'',branchId:'',iterationName:'',startTime:'',endTime:'',onlineTime:'',pid:'',adminUserid:'',adminUsername:'',ctime:'',budgetCost:'',budgetWorkload:'',distBudgetCost:'',distBudgetWorkload:'',actCost:'',actWorkload:'',actStaffNum:'',seqNo:'',
+				}, 
+
+				editFormInit: {
+					id:'',branchId:'',iterationName:'',startTime:'',endTime:'',onlineTime:'',pid:'',adminUserid:'',adminUsername:'',ctime:'',budgetCost:'',budgetWorkload:'',distBudgetCost:'',distBudgetWorkload:'',actCost:'',actWorkload:'',actStaffNum:'',seqNo:'',
+				},
+				/**begin 自定义属性请在下面加 请加备注**/ 
+				maxTableHeight:300, 
+				tableVisible:false,
+				moreVisible:false,
 				/**end 自定义属性请在上面加 请加备注**/
 			}
 		},//end data
 		methods: {
-			focus(){
-				if(!this.xmIterations){
-					this.initData()
-				}
+			handleSizeChange(pageSize) {
+				this.pageInfo.pageSize=pageSize;
+				this.getXmIterations();
 			},
-			 
-			searchXmIterations(){ 
-				 this.getXmIterations();
+			handleCurrentChange(pageNum) {
+				this.pageInfo.pageNum = pageNum;
+				this.getXmIterations();
+			},
+			// 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
+			sortChange( obj ){
+				var dir='asc';
+				if(obj.order=='ascending'){
+					dir='asc'
+				}else{
+					dir='desc';
+				}
+				if(obj.prop=='xxx'){
+					this.pageInfo.orderFields=['xxx'];
+					this.pageInfo.orderDirs=[dir];
+				}
+				this.getXmIterations();
+			}, 
+			searchXmIterations(){
+				 this.pageInfo.count=true;
+				 this.getXmIterations(); 
 			},
 			//获取列表 XmIteration 迭代定义
-			getXmIterations() {
-				 var params={};
-				 if(this.productId){
-					 params.productId=this.productId
-				 }
-				 if(this.linkProjectId){
-					 params.linkProjectId=this.linkProjectId
-				 }
+			getXmIterations() { 
+				let params = {
+					pageSize: this.pageInfo.pageSize,
+					pageNum: this.pageInfo.pageNum,
+					total: this.pageInfo.total,
+					count:this.pageInfo.count
+				}; 
+				if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
+					let orderBys=[];
+					for(var i=0;i<this.pageInfo.orderFields.length;i++){
+						orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
+					}
+					params.orderBy= orderBys.join(",")
+				}
+				if(this.filters.key){
+					params.key= "%"+this.filters.key+"%"
+				}
+				if(this.productId){
+					params.productId=this.productId
+				} 
+				 
+				if(this.linkProjectId){
+					params.linkProjectId=this.linkProjectId
+				} 
+				
+				if(this.dateRangerOnline && this.dateRangerOnline.length==2){
+					params.onlineTimeStart=this.dateRangerOnline[0] 
+					params.onlineTimeEnd=this.dateRangerOnline[1] 
+				}
 				this.load.list = true;
 				listXmIterationWithState(params).then((res) => {
 					var tips=res.data.tips;
 					if(tips.isOk){
+						this.pageInfo.total = res.data.total;
+						this.pageInfo.count=false;
 						this.xmIterations = res.data.data;
 						if(this.productId){
-							map['pd'+this.productId]=res.data.data
-						}else{
-							map['pj'+this.linkProjectId]=res.data.data
+							 map.set(this.productId,this.xmIterations)
+						}else if(this.linkProjectId){
+							 map.set(this.linkProjectId,this.xmIterations)
 						}
-						
 						if(this.autoSelect===true&&this.xmIterations.length>0){ 
-							var row=this.xmIterations[0];  
-							this.iterationId=row.id
+							var row=this.xmIterations[0];
+							this.$refs.table.setCurrentRow(row);
+							this.rowClick(row);
 						}
 					}else{
 						this.$notify({showClose: true, message: tips.msg, type: 'error' });
 					}
 					this.load.list = false;
 				}).catch( err => this.load.list = false );
+			},
+ 
+			//选择行xmIteration
+			selsChange: function (sels) {
+				this.sels = sels;
+			},  
+			rowClick: function(row, event, column){
+				var oldId=this.editForm.id
+				this.editForm=row
+				this.tableVisible=false;
+				if(oldId!=this.editForm.id){
+					this.$emit("change",row)
+				}
+				this.$emit('row-click',row, event, column);//  @row-click="rowClick"
+			}, 
+			/**end 自定义函数请在上面加**/
+			calcFinishRate(row){
+				if(row.finishRate){
+					return parseInt(row.finishRate);
+				}else{
+					return 0;
+				}
+			},
+			close(){
+				this.tableVisible=false;
+				this.$emit("close")
 			}, 
 			initData(){
-				if(this.productId){ 
-					var xmIterations=map['pd'+this.productId]
-					if(!xmIterations){ 
-						this.getXmIterations();
-					}else{
+				if(this.productId){
+					var xmIterations=map.get(this.productId);
+					if(xmIterations){
 						this.xmIterations=xmIterations;
 					}
-				}else{
-					if(this.linkProjectId){
-						var xmIterations=map['pj'+this.linkProjectId]
-						if(!xmIterations){ 
-							this.getXmIterations();
-						}else{
-							this.xmIterations=xmIterations;
-						}
+				}else if(this.linkProjectId){
+					var xmIterations=map.get(this.linkProjectId);
+					if(xmIterations){
+						this.xmIterations=xmIterations;
 					}
+				}else{
+					this.searchXmIterations();
 				}
-			}
+			},
+			
+
+			clearSelectIteration(){
+				var oldId=this.editForm.id
+				this.editForm=this.editFormInit 
+				this.$refs.table.setCurrentRow();
+				if(oldId!=this.editForm.id){
+					this.$emit("change",null)
+				}
+				this.tableVisible=false;
+				this.$emit('clear',null );//  @row-click="rowClick"
+			},
 		},//end methods
 		components: { 
 		    //在下面添加其它组件
 		},
 		mounted() {
 			this.$nextTick(() => {  
-				//this.initData();
+				this.initData();
+				this.maxTableHeight =  util.calcTableMaxHeight(this.$refs.table.$el); 
         	});
            
 		}
@@ -129,5 +284,17 @@
 
 </script>
 
-<style   lang="scss" scoped> 
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .more-label-font{
+  	text-align:center;
+  	float:left;
+  	padding-top:5px; 
+  }
+  .font-class{
+	  color: rgba(116, 85, 85, 0.493);
+  }
+  
+.align-right{
+	float: right; 
+}
 </style>

src/views/xm/core/xmMenu/XmMenuMng.vue

@@ -13,7 +13,7 @@
 								<el-link title="产品，点击选择、清除选择" @click="productVisible=true" type="warning" slot="reference" v-if="!xmProduct" icon="el-icon-search"><font style="font-size:14px;">{{filters.product?filters.product.productName:'选择产品'}}</font></el-link> 
 						</el-popover>   
 						
-						<xm-it-select style="width: 120px;" clearable :product-id="filters.product?filters.product.id:null" :link-project-id="selProject?selProject.id:null"   placeholder="迭代"  @change="onIterationSelected" @clear="onIterationClearSelect">
+						<xm-it-select style="display:inline;"  :product-id="filters.product?filters.product.id:null" :link-project-id="selProject?selProject.id:null"   placeholder="迭代"  @row-click="onIterationSelected" @clear="onIterationClearSelect">
 					    </xm-it-select> 
 						<el-select  v-model="filters.taskFilterType" placeholder="已分配任务的需求？" clearable style="width: 160px;">
 							<el-option   value="not-join-any-project"  label="未分配过任务的需求"></el-option>