ganttBottom
This commit is contained in:
		
							parent
							
								
									e160894743
								
							
						
					
					
						commit
						d94b9c4827
					
				|  | @ -0,0 +1,200 @@ | ||||||
|  | <template> | ||||||
|  |   <div class="tableMneu"> | ||||||
|  |     <div | ||||||
|  |       class="mask" | ||||||
|  |       v-if="isShowHeaderBox || menuOpen" | ||||||
|  |       @click="maskClick" | ||||||
|  |     ></div> | ||||||
|  |     <el-table | ||||||
|  |       ref="tableMenu" | ||||||
|  |       :data="tableData" | ||||||
|  |       border | ||||||
|  |       fit | ||||||
|  |       style="width: 100%" | ||||||
|  |       row-key="id" | ||||||
|  |       height="100%" | ||||||
|  |       default-expand-all | ||||||
|  |       highlight-current-row | ||||||
|  |       @row-click="handlerRowClick" | ||||||
|  |       @expand-change="handlerExpand" | ||||||
|  |       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" | ||||||
|  |     > | ||||||
|  |       <el-table-column label="名称"> | ||||||
|  |         <template slot-scope="scope">{{ scope.row.name }}</template> | ||||||
|  |       </el-table-column> | ||||||
|  |       <el-table-column label="进度"> | ||||||
|  |         <template slot-scope="scope">{{ scope.row.name }}</template> | ||||||
|  |       </el-table-column> | ||||||
|  |     </el-table> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   props: { | ||||||
|  |     list: Array, | ||||||
|  |     BGScrollTop: Number | ||||||
|  |   }, | ||||||
|  |   computed: { | ||||||
|  |     tableData() { | ||||||
|  |       return this.list; | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     BGScrollTop: { | ||||||
|  |       handler: function(newValue) { | ||||||
|  |         let table = this.$refs.tableMenu.bodyWrapper; | ||||||
|  |         // console.log(newValue, table); | ||||||
|  |         table.scrollTo(0, newValue); | ||||||
|  |         // table.scrollTo({ | ||||||
|  |         //   top: newValue, | ||||||
|  |         //   left: 0, | ||||||
|  |         //   behavior: "smooth" | ||||||
|  |         // }); | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       // tableData: [], | ||||||
|  |       checkList: [], | ||||||
|  |       isShowHeaderBox: false, | ||||||
|  |       menuOpen: false, | ||||||
|  |       //当前点击的row | ||||||
|  |       currentRow: {} | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     handlerWatchScroll() { | ||||||
|  |       let table = this.$refs.tableMenu.bodyWrapper; | ||||||
|  |       table.addEventListener("scroll", e => { | ||||||
|  |         // console.log(e.srcElement.scrollTop); | ||||||
|  |         this.$emit("TableScrollTop", e.srcElement.scrollTop); | ||||||
|  |       }); | ||||||
|  |     }, | ||||||
|  |     handlerSelect(row) { | ||||||
|  |       this.$refs.tableMenu.setCurrentRow(row); | ||||||
|  |     }, | ||||||
|  |     handlerExpand(row, expand) { | ||||||
|  |       // console.log(row, expanded); | ||||||
|  |       this.$emit("handlerExpand", row, expand); | ||||||
|  |     }, | ||||||
|  |     maskClick() { | ||||||
|  |       this.isShowHeaderBox = false; | ||||||
|  |       this.menuOpen = false; | ||||||
|  |       this.currentRow = {}; | ||||||
|  |     }, | ||||||
|  |     handlerRowClick(row) { | ||||||
|  |       this.$emit("handlerRowClick", row); | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   mounted() { | ||||||
|  |     this.handlerWatchScroll(); | ||||||
|  |   } | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .tableMneu { | ||||||
|  |   width: 100%; | ||||||
|  |   position: relative; | ||||||
|  |   height: 100%; | ||||||
|  |   .mask { | ||||||
|  |     position: fixed; | ||||||
|  |     left: 0; | ||||||
|  |     top: 0; | ||||||
|  |     right: 0; | ||||||
|  |     bottom: 0; | ||||||
|  |     background-color: transparent; | ||||||
|  |     z-index: 9999; | ||||||
|  |   } | ||||||
|  |   .icons { | ||||||
|  |     cursor: pointer; | ||||||
|  |     &:hover { | ||||||
|  |       color: #409eff; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .menulist { | ||||||
|  |     width: 100px; | ||||||
|  |     position: absolute; | ||||||
|  |     background-color: rgb(255, 255, 255); | ||||||
|  |     border-radius: 5px; | ||||||
|  |     border: 1px solid #ebeef5; | ||||||
|  |     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | ||||||
|  |     transition: 0.3s; | ||||||
|  |     width: 70px; | ||||||
|  |     z-index: 9999; | ||||||
|  | 
 | ||||||
|  |     .item { | ||||||
|  |       background-color: rgb(255, 255, 255); | ||||||
|  |       line-height: 30px; | ||||||
|  |       text-align: center; | ||||||
|  |       font-size: 12px; | ||||||
|  |       color: rgb(102, 102, 102); | ||||||
|  |       cursor: pointer; | ||||||
|  |       height: 30px; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .item:hover { | ||||||
|  |       color: #409eff; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   .headerBox { | ||||||
|  |     z-index: 9999; | ||||||
|  |     position: absolute; | ||||||
|  |     right: -128px; | ||||||
|  |     top: 50px; | ||||||
|  |     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); | ||||||
|  |     width: 170px; | ||||||
|  |     background-color: #fff; | ||||||
|  |     &::after { | ||||||
|  |       content: " "; | ||||||
|  |       position: absolute; | ||||||
|  |       top: -5px; | ||||||
|  |       left: 16px; | ||||||
|  |       width: 0; | ||||||
|  |       height: 0; | ||||||
|  |       border-right: 7px solid transparent; | ||||||
|  |       border-left: 7px solid transparent; | ||||||
|  |       border-bottom: 7px solid #fff; | ||||||
|  |     } | ||||||
|  |     .title { | ||||||
|  |       margin: 0; | ||||||
|  |       padding: 8px 16px; | ||||||
|  |       min-height: 32px; | ||||||
|  |       border-bottom: 1px solid #e9e9e9; | ||||||
|  |       color: #303030; | ||||||
|  |       font-weight: 500; | ||||||
|  |     } | ||||||
|  |     .main { | ||||||
|  |       .line { | ||||||
|  |         padding: 8px 10px; | ||||||
|  |         display: flex; | ||||||
|  |         flex-direction: row; | ||||||
|  |         align-items: center; | ||||||
|  |         width: 150px; | ||||||
|  |         .pre { | ||||||
|  |           flex: 1 1 auto; | ||||||
|  |           overflow: hidden; | ||||||
|  |           text-overflow: ellipsis; | ||||||
|  |           white-space: nowrap; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | <style lang="scss" > | ||||||
|  | .tableMneu { | ||||||
|  |   .el-table th.gutter { | ||||||
|  |     display: table-cell !important; | ||||||
|  |   } | ||||||
|  |   .el-table td, | ||||||
|  |   .el-table th { | ||||||
|  |     padding: 8px 0; | ||||||
|  |   } | ||||||
|  |   .el-table--border td { | ||||||
|  |     border-right: none; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,156 @@ | ||||||
|  | <template> | ||||||
|  |   <div | ||||||
|  |     class="slider" | ||||||
|  |     ref="slider" | ||||||
|  |   > | ||||||
|  |     <div | ||||||
|  |       class="process" | ||||||
|  |       :style="{ width }" | ||||||
|  |       style="font-size: 12px;color: #ffffff;text-align: right" | ||||||
|  |     > | ||||||
|  |       <span v-if="per">{{ per }}</span> | ||||||
|  |       <span v-else>{{ per }}</span> | ||||||
|  |     </div> | ||||||
|  |     <div class="process1" | ||||||
|  |          :style="{width:process1Width}" | ||||||
|  |          style="font-size: 12px;color: #ffffff;text-align: right" | ||||||
|  |     > | ||||||
|  |       <span v-if="per1"> {{ per1 }}</span> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   props: ["min", "max", "value", "widths", "per1", "id", "parentId"], | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       //滚动条DOM元素 | ||||||
|  |       slider: null, | ||||||
|  |       //拖拽DOM元素 | ||||||
|  |       thunk: null, | ||||||
|  |       //当前值 | ||||||
|  |       per: this.value, | ||||||
|  |       perOk: this.per1, | ||||||
|  |       //当前是否拖拽tip | ||||||
|  |       isMove: false, | ||||||
|  |       // process1Width:'10px', | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     value(newValue, oldValue) { | ||||||
|  |       this.per = newValue; | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     thunkMousedown(e) { | ||||||
|  |       let width = parseInt(this.width); | ||||||
|  |       let disX = e.clientX; | ||||||
|  |       this.$emit("thunkMousedown"); | ||||||
|  |       this.isMove = true; | ||||||
|  |       console.log(this.isMove); | ||||||
|  |       document.onmousemove = e => { | ||||||
|  |         let newWidth = e.clientX - disX + width; | ||||||
|  |         let scale = newWidth / this.slider.offsetWidth; | ||||||
|  |         this.per = Math.ceil((this.max - this.min) * scale + this.min); | ||||||
|  |         this.per = Math.max(this.per, this.min); | ||||||
|  |         this.per = Math.min(this.per, this.max); | ||||||
|  |         this.$emit("thunkMousemove", e, this.index); | ||||||
|  |       }; | ||||||
|  |       document.onmouseup = event => { | ||||||
|  |         this.isMove = false; | ||||||
|  |         this.$emit( | ||||||
|  |           "thunkMouseup", | ||||||
|  |           parseInt(this.scale * 100), | ||||||
|  |           event, | ||||||
|  |           this.id, | ||||||
|  |           this.parentId | ||||||
|  |         ); | ||||||
|  |         document.onmousemove = document.onmouseup = null; | ||||||
|  |       }; | ||||||
|  |       return false; | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   //渲染到页面的时候 | ||||||
|  |   mounted() { | ||||||
|  |     this.slider = this.$refs.slider; | ||||||
|  |     this.thunk = this.$refs.trunk; | ||||||
|  |   }, | ||||||
|  |   computed: { | ||||||
|  |     scale() { | ||||||
|  |       return (this.per - this.min) / (this.max - this.min); | ||||||
|  |     }, | ||||||
|  |     width() { | ||||||
|  |       if (this.slider) { | ||||||
|  |         return this.widths * this.scale + "px"; | ||||||
|  |       } else { | ||||||
|  |         return 0 + "px"; | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     process1Width() { | ||||||
|  |       if (this.slider) { | ||||||
|  |         let scale1 = (this.perOk - this.min) / (this.max - this.min); | ||||||
|  |         return this.widths * scale1 + "px"; | ||||||
|  |       } else { | ||||||
|  |         return 0 + "px"; | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     left() { | ||||||
|  |       if (this.slider) { | ||||||
|  |         return this.widths * this.scale - this.thunk.offsetWidth / 2 + "px"; | ||||||
|  |       } else { | ||||||
|  |         return 0 + "px"; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | <style> | ||||||
|  | 
 | ||||||
|  | .slider { | ||||||
|  |   position: relative; | ||||||
|  |   height: 20px; | ||||||
|  |   background: #e4e7ed; | ||||||
|  |   border-radius: 3px; | ||||||
|  |   cursor: text; | ||||||
|  |   user-select: none; | ||||||
|  |   width: 100%; | ||||||
|  |   display: inline-block | ||||||
|  | } | ||||||
|  | .slider .process { | ||||||
|  |   position: absolute; | ||||||
|  |   left: 0; | ||||||
|  |   top: 0; | ||||||
|  |   width: 112px; | ||||||
|  |   height: 20px; | ||||||
|  |   border-radius: 3px; | ||||||
|  |   background: #409eff; | ||||||
|  | } | ||||||
|  | .slider .process1 { | ||||||
|  |   position: absolute; | ||||||
|  |   left: 0; | ||||||
|  |   top: 0; | ||||||
|  |   width: 10px; | ||||||
|  |   height: 20px; | ||||||
|  |   border-radius: 3px; | ||||||
|  |   background: #11c750; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | .slider .block i { | ||||||
|  |   font-size: 25px; | ||||||
|  |   position: relative; | ||||||
|  |   left: -3px; | ||||||
|  |   top: 15px; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .slider .tips i { | ||||||
|  |   position: absolute; | ||||||
|  |   margin-left: -5px; | ||||||
|  |   left: 50%; | ||||||
|  |   bottom: -9px; | ||||||
|  |   font-size: 16px; | ||||||
|  |   color: #000; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							|  | @ -4,11 +4,12 @@ | ||||||
|       <el-date-picker |       <el-date-picker | ||||||
|         v-model="timeRange" |         v-model="timeRange" | ||||||
|         type="daterange" |         type="daterange" | ||||||
|         start-placeholder="计划开始日期" |         start-placeholder="开始日期" | ||||||
|         end-placeholder="计划结束日期" |         end-placeholder="结束日期" | ||||||
|         format="yyyy 年 MM 月 dd 日" |         format="yyyy 年 MM 月 dd 日" | ||||||
|         value-format="yyyy-MM-dd" |         value-format="yyyy-MM-dd" | ||||||
|       > |       > | ||||||
|  |         <!--   @change="timeRangeChange"--> | ||||||
|       </el-date-picker> |       </el-date-picker> | ||||||
|     </el-row> |     </el-row> | ||||||
|     <div class="chart" ref="chart"> |     <div class="chart" ref="chart"> | ||||||
|  | @ -944,7 +945,7 @@ | ||||||
|         }; |         }; | ||||||
|         this.handlerSelect(); |         this.handlerSelect(); | ||||||
|       }, |       }, | ||||||
|       //获取近三年的所有天数 |       //获取要显示的所有天数 | ||||||
|       getDay() { |       getDay() { | ||||||
|         this.getAllDate(); |         this.getAllDate(); | ||||||
|       }, |       }, | ||||||
|  | @ -959,8 +960,13 @@ | ||||||
|         return false; |         return false; | ||||||
|       }, |       }, | ||||||
|       getAllDate() { |       getAllDate() { | ||||||
|         let obj = {}; |         let obj = {},arr=[]; | ||||||
|         let arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1]; |         let start = new Date(this.timeRange[0]).getFullYear(); | ||||||
|  |         let end = new Date(this.timeRange[1]).getFullYear(); | ||||||
|  |         for(let i=start;i<end+1;i++){ | ||||||
|  |           arr.push(i) | ||||||
|  |         } | ||||||
|  |         arr = [  this.currentYear -1,this.currentYear, this.currentYear + 1]; | ||||||
|         arr.forEach(item => { |         arr.forEach(item => { | ||||||
|           obj.year = item; |           obj.year = item; | ||||||
|           obj.days = this.isLeapYear(item) ? 365 : 366; |           obj.days = this.isLeapYear(item) ? 365 : 366; | ||||||
|  | @ -974,7 +980,6 @@ | ||||||
|         this.allDays.forEach(item => { |         this.allDays.forEach(item => { | ||||||
|           item.month = this.handleMonthDay(item.days, item.year); |           item.month = this.handleMonthDay(item.days, item.year); | ||||||
|         }); |         }); | ||||||
|         // console.log(this.allDays); |  | ||||||
|         this.allDays.forEach(element => { |         this.allDays.forEach(element => { | ||||||
|           if (element.year == this.currentYear) { |           if (element.year == this.currentYear) { | ||||||
|             element.month[0][this.currentMonth].forEach(k => { |             element.month[0][this.currentMonth].forEach(k => { | ||||||
|  | @ -1063,15 +1068,6 @@ | ||||||
|             break; |             break; | ||||||
|         } |         } | ||||||
|       }, |       }, | ||||||
|       setList() { |  | ||||||
|         /*getPlanGantt().then(res=>{ |  | ||||||
|           if(res.code===200){ |  | ||||||
|             this.list = res.data.results; |  | ||||||
|           }else{ |  | ||||||
|             this.$message.error(res.msg); |  | ||||||
|           } |  | ||||||
|         })*/ |  | ||||||
|       }, |  | ||||||
|       //设置里程碑线的高度 |       //设置里程碑线的高度 | ||||||
|       setStoneLine(isFirst) { |       setStoneLine(isFirst) { | ||||||
|         this.$nextTick(() => { |         this.$nextTick(() => { | ||||||
|  | @ -1112,7 +1108,6 @@ | ||||||
|     mounted() { |     mounted() { | ||||||
|       document.addEventListener("scroll", this.handleScroll); |       document.addEventListener("scroll", this.handleScroll); | ||||||
|       this.getDay(); |       this.getDay(); | ||||||
|       this.setList(); |  | ||||||
|       this.setStoneLine(); |       this.setStoneLine(); | ||||||
|     }, |     }, | ||||||
|     beforeDestroy() { |     beforeDestroy() { | ||||||
|  |  | ||||||
|  | @ -1,63 +1,62 @@ | ||||||
| <template> | <template> | ||||||
|   <div class="app-container"> |   <div class="app-container"> | ||||||
|     <el-card class="box-card"> |     <el-card class="box-card"> | ||||||
|      <div slot="header" class="clearfix"> |       <div slot="header" class="clearfix"> | ||||||
|     <span>生产任务列表</span> |         <span>生产任务列表</span> | ||||||
| 
 | 
 | ||||||
|   </div> |       </div> | ||||||
| 
 | 
 | ||||||
|          <el-table |       <el-table | ||||||
|         :data="productionplanList.results" |         :data="productionplanList.results" | ||||||
|        border |         border | ||||||
|         fit |         fit | ||||||
|         stripe |         stripe | ||||||
|         style="width: 100%" |         style="width: 100%" | ||||||
|          height="300" |         height="300" | ||||||
| 
 | 
 | ||||||
|       > |       > | ||||||
|         <el-table-column type="index" width="50" /> |         <el-table-column type="index" width="50"/> | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|          |         <el-table-column label="任务编号" width="110"> | ||||||
|          <el-table-column label="任务编号" width="110">  |  | ||||||
|           <template slot-scope="scope">{{ scope.row.number }}</template> |           <template slot-scope="scope">{{ scope.row.number }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="订单编号" width="110"> |         <el-table-column label="订单编号" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.order_.number }}</template> |           <template slot-scope="scope">{{ scope.row.order_.number }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="合同编号" width="110"> |         <el-table-column label="合同编号" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.order_.contract_.number }}</template> |           <template slot-scope="scope">{{ scope.row.order_.contract_.number }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
| 
 | 
 | ||||||
|          <el-table-column label="产品名称" width="150" show-overflow-tooltip> |         <el-table-column label="产品名称" width="150" show-overflow-tooltip> | ||||||
|           <template slot-scope="scope">{{ scope.row.product_.name }}</template> |           <template slot-scope="scope">{{ scope.row.product_.name }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|        <el-table-column label="产品型号" width="110"> |         <el-table-column label="产品型号" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.product_.specification }}</template> |           <template slot-scope="scope">{{ scope.row.product_.specification }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="产品单位" width="110"> |         <el-table-column label="产品单位" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.product_.unit }}</template> |           <template slot-scope="scope">{{ scope.row.product_.unit }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="生产数量" width="110"> |         <el-table-column label="生产数量" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.count }}</template> |           <template slot-scope="scope">{{ scope.row.count }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="计划开工时间" width="110"> |         <el-table-column label="计划开工时间" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.start_date }}</template> |           <template slot-scope="scope">{{ scope.row.start_date }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="计划完工时间" width="110">  |         <el-table-column label="计划完工时间" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.end_date }}</template> |           <template slot-scope="scope">{{ scope.row.end_date }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|          <el-table-column label="交付截止时间" width="110"> |         <el-table-column label="交付截止时间" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.order_.delivery_date }}</template> |           <template slot-scope="scope">{{ scope.row.order_.delivery_date }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
| 
 | 
 | ||||||
|           <el-table-column label="是否生成子计划" width="120"> |         <el-table-column label="是否生成子计划" width="120"> | ||||||
|           <template slot-scope="scope" > |           <template slot-scope="scope"> | ||||||
|             <el-tag v-if="scope.row.is_planed==false">否</el-tag> |             <el-tag v-if="scope.row.is_planed==false">否</el-tag> | ||||||
|              <el-tag  v-if="scope.row.is_planed==true">是</el-tag> |             <el-tag v-if="scope.row.is_planed==true">是</el-tag> | ||||||
|             </template> |           </template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|   <el-table-column label="创建时间" width="160"> |         <el-table-column label="创建时间" width="160"> | ||||||
|           <template slot-scope="scope">{{ scope.row.create_time }}</template> |           <template slot-scope="scope">{{ scope.row.create_time }}</template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|         <el-table-column |         <el-table-column | ||||||
|  | @ -68,17 +67,19 @@ | ||||||
|         > |         > | ||||||
|           <template slot-scope="scope"> |           <template slot-scope="scope"> | ||||||
|             <el-link type="primary" |             <el-link type="primary" | ||||||
|               v-if="scope.row.is_planed" |                      v-if="scope.row.is_planed" | ||||||
|               @click="handleselectplan(scope)" |                      @click="handleselectplan(scope)" | ||||||
|               >查看子计划</el-link> |             >查看子计划 | ||||||
|            <el-link type="primary" |             </el-link> | ||||||
|               v-else |             <el-link type="primary" | ||||||
|               @click="handleWork(scope)" |                      v-else | ||||||
|               >生成子计划</el-link> |                      @click="handleWork(scope)" | ||||||
|  |             >生成子计划 | ||||||
|  |             </el-link> | ||||||
|           </template> |           </template> | ||||||
|         </el-table-column> |         </el-table-column> | ||||||
|       </el-table> |       </el-table> | ||||||
|     <pagination |       <pagination | ||||||
|         v-show="productionplanList.count > 0" |         v-show="productionplanList.count > 0" | ||||||
|         :total="productionplanList.count" |         :total="productionplanList.count" | ||||||
|         :page.sync="listQuery1.page" |         :page.sync="listQuery1.page" | ||||||
|  | @ -86,270 +87,311 @@ | ||||||
|         @pagination="getplanList" |         @pagination="getplanList" | ||||||
|       /> |       /> | ||||||
|     </el-card> |     </el-card> | ||||||
|     <el-tabs type="border-card"> |     <el-tabs type="border-card" v-model="activeName" @tab-click="activeNameClick"> | ||||||
|   <el-tab-pane label="订单排产"> |       <el-tab-pane label="订单排产" name="订单排产"> | ||||||
|  |         <el-table | ||||||
|  |           :data="orderList.results" | ||||||
|  |           border | ||||||
|  |           fit | ||||||
|  |           stripe | ||||||
|  |           style="width: 100%" | ||||||
|  |           height="250" | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|          <el-table |         > | ||||||
|         :data="orderList.results" |           <el-table-column type="index" width="50"/> | ||||||
|        border |  | ||||||
|         fit |  | ||||||
|         stripe |  | ||||||
|         style="width: 100%" |  | ||||||
|         height="250" |  | ||||||
| 
 | 
 | ||||||
|      |           <el-table-column label="订单编号" width="110"> | ||||||
|       > |             <template slot-scope="scope">{{ scope.row.number }}</template> | ||||||
|         <el-table-column type="index" width="50" /> |           </el-table-column> | ||||||
|          |           <el-table-column label="客户名称" width="110"> | ||||||
|         <el-table-column label="订单编号" width="110"> |             <template slot-scope="scope" show-overflow-tooltip>{{ scope.row.customer_.name }}</template> | ||||||
|           <template slot-scope="scope">{{ scope.row.number }}</template> |           </el-table-column> | ||||||
|         </el-table-column> |  | ||||||
|          <el-table-column label="客户名称" width="110"> |  | ||||||
|           <template slot-scope="scope" show-overflow-tooltip>{{ scope.row.customer_.name }}</template> |  | ||||||
|         </el-table-column> |  | ||||||
| 
 | 
 | ||||||
|           <el-table-column label="合同编号" width="110"> |           <el-table-column label="合同编号" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.contract_.number }}</template> |             <template slot-scope="scope">{{ scope.row.contract_.number }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
|           <el-table-column label="合同名称" show-overflow-tooltip width="110"> |           <el-table-column label="合同名称" show-overflow-tooltip width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.contract_.name }}</template> |             <template slot-scope="scope">{{ scope.row.contract_.name }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
|          <el-table-column label="所需产品" show-overflow-tooltip width="150"> |           <el-table-column label="所需产品" show-overflow-tooltip width="150"> | ||||||
|           <template slot-scope="scope">{{ scope.row.product_.name }}</template> |             <template slot-scope="scope">{{ scope.row.product_.name }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
|           <el-table-column label="产品型号" width="110"> |           <el-table-column label="产品型号" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.product_.specification }}</template> |             <template slot-scope="scope">{{ scope.row.product_.specification }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
|        <el-table-column label="产品数量" width="110"> |           <el-table-column label="产品数量" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.count }}</template> |             <template slot-scope="scope">{{ scope.row.count }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
|          <el-table-column label="已派数量" width="110"> |           <el-table-column label="已派数量" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.planed_count }}</template> |             <template slot-scope="scope">{{ scope.row.planed_count }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
| 
 | 
 | ||||||
|          <el-table-column label="交货日期" width="110"> |           <el-table-column label="交货日期" width="110"> | ||||||
|           <template slot-scope="scope">{{ scope.row.delivery_date }}</template> |             <template slot-scope="scope">{{ scope.row.delivery_date }}</template> | ||||||
|         </el-table-column> |           </el-table-column> | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  |           <el-table-column label="创建时间"> | ||||||
|  |             <template slot-scope="scope">{{ scope.row.create_time }}</template> | ||||||
|  |           </el-table-column> | ||||||
|  |           <el-table-column | ||||||
|  |             align="center" | ||||||
|  |             label="操作" | ||||||
|  |             width="220px" | ||||||
|  |           > | ||||||
|  |             <template slot-scope="scope"> | ||||||
| 
 | 
 | ||||||
|   <el-table-column label="创建时间"> |               <el-link type="primary" | ||||||
|           <template slot-scope="scope">{{ scope.row.create_time }}</template> |                        v-if="checkPermission(['warehouse_update'])" | ||||||
|         </el-table-column> |                        @click="handleclick(scope)" | ||||||
|         <el-table-column |               >排产 | ||||||
|           align="center" |               </el-link | ||||||
|           label="操作" |               > | ||||||
|           width="220px" | 
 | ||||||
|  |             </template> | ||||||
|  |           </el-table-column> | ||||||
|  |         </el-table> | ||||||
|  |         <pagination | ||||||
|  |           v-show="orderList.count > 0" | ||||||
|  |           :total="orderList.count" | ||||||
|  |           :page.sync="listQuery.page" | ||||||
|  |           :limit.sync="listQuery.page_size" | ||||||
|  |           @pagination="getorderList" | ||||||
|  |         /> | ||||||
|  |         <el-dialog | ||||||
|  |           :visible.sync="dialogVisible" | ||||||
|  |           :close-on-click-modal="false" | ||||||
|  |           :title="'排产计划'" | ||||||
|         > |         > | ||||||
|           <template slot-scope="scope"> |           <el-form | ||||||
|  |             ref="Form" | ||||||
|  |             :model="orderplan" | ||||||
|  |             label-width="120px" | ||||||
|  |             label-position="right" | ||||||
|  |             :rules="rule1" | ||||||
|  |           > | ||||||
| 
 | 
 | ||||||
|             <el-link type="primary" |             <el-form-item label="排产数量" prop="count"> | ||||||
|               v-if="checkPermission(['warehouse_update'])" |               <el-input-number v-model="orderplan.count" :min="0"></el-input-number> | ||||||
|               @click="handleclick(scope)" |             </el-form-item> | ||||||
|               >排产</el-link |  | ||||||
|             > |  | ||||||
|             |  | ||||||
|           </template> |  | ||||||
|         </el-table-column> |  | ||||||
|       </el-table> |  | ||||||
|     <pagination |  | ||||||
|         v-show="orderList.count > 0" |  | ||||||
|         :total="orderList.count" |  | ||||||
|         :page.sync="listQuery.page" |  | ||||||
|         :limit.sync="listQuery.page_size" |  | ||||||
|         @pagination="getorderList" |  | ||||||
|       /> |  | ||||||
|     <el-dialog |  | ||||||
|       :visible.sync="dialogVisible" |  | ||||||
|       :close-on-click-modal="false" |  | ||||||
|       :title="'排产计划'" |  | ||||||
|     > |  | ||||||
|       <el-form |  | ||||||
|         ref="Form" |  | ||||||
|         :model="orderplan" |  | ||||||
|         label-width="120px" |  | ||||||
|         label-position="right" |  | ||||||
|         :rules="rule1" |  | ||||||
|       > |  | ||||||
|          |  | ||||||
|         <el-form-item label="排产数量" prop="count"> |  | ||||||
|            <el-input-number v-model="orderplan.count" :min="0"></el-input-number> |  | ||||||
|         </el-form-item> |  | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|          <el-form-item label="计划排产时间" prop="value1"> |             <el-form-item label="计划排产时间" prop="value1"> | ||||||
|  |               <el-date-picker | ||||||
|  |                 v-model="value1" | ||||||
|  |                 type="daterange" | ||||||
|  | 
 | ||||||
|  |                 start-placeholder="计划开始日期" | ||||||
|  |                 end-placeholder="计划结束日期" | ||||||
|  |                 format="yyyy 年 MM 月 dd 日" | ||||||
|  |                 value-format="yyyy-MM-dd" | ||||||
|  |               > | ||||||
|  |               </el-date-picker> | ||||||
|  |             </el-form-item> | ||||||
|  | 
 | ||||||
|  |           </el-form> | ||||||
|  |           <div style="text-align: right"> | ||||||
|  |             <el-button type="danger" @click="dialogVisible = false">取消</el-button> | ||||||
|  |             <el-button type="primary" @click="confirm('Form')">确认</el-button> | ||||||
|  |           </div> | ||||||
|  |         </el-dialog> | ||||||
|  |       </el-tab-pane> | ||||||
|  |       <el-tab-pane label="甘特图" name="甘特图"> | ||||||
|  |         <gantt | ||||||
|  |           v-if="ganttShow" | ||||||
|  |           :proList="proList" | ||||||
|  |         ></gantt> | ||||||
|  |       </el-tab-pane> | ||||||
|  |       <!--<el-row style="position: absolute;z-index: 20000;top: 0;right: 0;"> | ||||||
|         <el-date-picker |         <el-date-picker | ||||||
|       v-model="value1" |           v-model="timeRange" | ||||||
|       type="daterange" |           type="daterange" | ||||||
|       |           start-placeholder="开始日期" | ||||||
|       start-placeholder="计划开始日期" |           end-placeholder="结束日期" | ||||||
|       end-placeholder="计划结束日期" |           format="yyyy 年 MM 月 dd 日" | ||||||
|       format="yyyy 年 MM 月 dd 日" |           value-format="yyyy-MM-dd" | ||||||
|       value-format="yyyy-MM-dd" |         > | ||||||
|      > |           <!–   @change="timeRangeChange"–> | ||||||
|     </el-date-picker> |         </el-date-picker> | ||||||
|          </el-form-item> |       </el-row>--> | ||||||
|          |     </el-tabs> | ||||||
|       </el-form> |  | ||||||
|       <div style="text-align: right"> |  | ||||||
|         <el-button type="danger" @click="dialogVisible = false">取消</el-button> |  | ||||||
|         <el-button type="primary" @click="confirm('Form')">确认</el-button> |  | ||||||
|       </div> |  | ||||||
|     </el-dialog> |  | ||||||
|     </el-tab-pane> |  | ||||||
|        |  | ||||||
|   <el-tab-pane label="甘特图">甘特图</el-tab-pane> |  | ||||||
| </el-tabs> |  | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
|   <script> | <script> | ||||||
|   import { getordertoplan } from "@/api/sam"; |   import gantt  from "@/components/Gantt/index"; | ||||||
|   import { createProductionplan,getProductionplanList,createsubplan} from "@/api/pm"; |   import {getordertoplan} from "@/api/sam"; | ||||||
| import { getMaterialList } from "@/api/mtm"; |   import {createProductionplan, getProductionplanList, createsubplan} from "@/api/pm"; | ||||||
| import checkPermission from "@/utils/permission"; |   import {getMaterialList} from "@/api/mtm"; | ||||||
|  |   import checkPermission from "@/utils/permission"; | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| import { genTree } from "@/utils"; |   import {genTree} from "@/utils"; | ||||||
| import Pagination from "@/components/Pagination"; // secondary package based on el-pagination |   import Pagination from "@/components/Pagination"; // secondary package based on el-pagination | ||||||
| const defaulteorderplan = { |   const defaulteorderplan = {}; | ||||||
| }; |   export default { | ||||||
| export default { |     components: {Pagination,gantt}, | ||||||
|   components: { Pagination }, |     data() { | ||||||
|   data() { |       return { | ||||||
|     return { |  | ||||||
| 
 | 
 | ||||||
|      orderplan: defaulteorderplan, |         orderplan: defaulteorderplan, | ||||||
|       orderList: { |         orderList: { | ||||||
|         count: 0, |           count: 0, | ||||||
|       }, |         }, | ||||||
|       listQuery: { |         listQuery: { | ||||||
|         page: 1, |           page: 1, | ||||||
|         page_size: 20, |           page_size: 20, | ||||||
|       }, |         }, | ||||||
|         productionplanList: { |         productionplanList: { | ||||||
|         count: 0, |           count: 0, | ||||||
|       }, |         }, | ||||||
|       listQuery1: { |         listQuery1: { | ||||||
|         page: 1, |           page: 1, | ||||||
|         page_size: 20, |           page_size: 20, | ||||||
|       }, |         }, | ||||||
|    value1: '', |         value1: '', | ||||||
|       listLoading: true, |         listLoading: true, | ||||||
|       dialogVisible: false, |         ganttShow: false, | ||||||
|       dialogType: "new", |         dialogVisible: false, | ||||||
|       rule1: { |         dialogType: "new", | ||||||
|         number: [{ required: true, message: "请输入", trigger: "blur" }], |         activeName: "订单排产", | ||||||
|  |         rule1: { | ||||||
|  |           number: [{required: true, message: "请输入", trigger: "blur"}], | ||||||
| 
 | 
 | ||||||
|       }, |         }, | ||||||
|       |         timeRange:[], | ||||||
|     }; |         proList:[], | ||||||
|   }, |       }; | ||||||
|   computed: {}, |  | ||||||
|   watch: {}, |  | ||||||
|   created() { |  | ||||||
|       |  | ||||||
|     this.getorderList(); |  | ||||||
|      this.getplanList(); |  | ||||||
|   }, |  | ||||||
|   methods: { |  | ||||||
|     checkPermission, |  | ||||||
|      |  | ||||||
|   //订单列表 |  | ||||||
|     getorderList() { |  | ||||||
|       this.listLoading = true; |  | ||||||
|       getordertoplan(this.listQuery).then((response) => { |  | ||||||
|         if (response.data) { |  | ||||||
|           this.orderList = response.data; |  | ||||||
|         } |  | ||||||
|         this.listLoading = false; |  | ||||||
|       }); |  | ||||||
|     }, |     }, | ||||||
|    //生产计划列表 |     computed: {}, | ||||||
|    //列表 |     watch: {}, | ||||||
|     getplanList() { |     created() { | ||||||
|       this.listLoading = true; | 
 | ||||||
|       getProductionplanList(this.listQuery).then((response) => { |       this.getorderList(); | ||||||
|         if (response.data) { |       this.getplanList(); | ||||||
|           this.productionplanList = response.data; |  | ||||||
|         } |  | ||||||
|         this.listLoading = false; |  | ||||||
|       }); |  | ||||||
|     }, |     }, | ||||||
|      handleclick(scope){ |     methods: { | ||||||
|       this.orderID =  scope.row.id; |       checkPermission, | ||||||
|       this.countsx = scope.row.count; |  | ||||||
|        this.planed_count = scope.row.planed_count; |  | ||||||
|        this.delivery_date = scope.row.delivery_date; |  | ||||||
|       this.dialogVisible = true; |  | ||||||
|       this.$nextTick(() => { |  | ||||||
|         this.$refs["Form"].clearValidate(); |  | ||||||
|       }); |  | ||||||
| 
 | 
 | ||||||
|     }, |       //订单列表 | ||||||
|     async confirm(form) { |       getorderList() { | ||||||
|      |         this.listLoading = true; | ||||||
|        this.orderplan.start_date = this.value1[0]; |         getordertoplan(this.listQuery).then((response) => { | ||||||
|        |           if (response.data) { | ||||||
|        if( this.delivery_date>=this.value1[1]) |             this.orderList = response.data; | ||||||
|        { |           } | ||||||
|           this.orderplan.end_date  = this.value1[1]; |           this.listLoading = false; | ||||||
|        } |         }); | ||||||
|        else{ |       }, | ||||||
|           this.$message.error("计划完成时间超过订单交付日期,请从新选择日期!"); |       //生产计划列表 | ||||||
|        } |       //列表 | ||||||
|          |       getplanList() { | ||||||
|          this.orderplan.order  = this.orderID |         let that = this; | ||||||
|          if( this.orderplan.count<=(this.countsx-this.planed_count)){ |         this.listLoading = true; | ||||||
|                   createProductionplan(this.orderplan).then((res) => { |         getProductionplanList(this.listQuery).then((response) => { | ||||||
|               if (res.code >= 200) { |           if (response.data) { | ||||||
|                 this.getorderList(); |             this.productionplanList = response.data; | ||||||
|                  this.getplanList(); |             let list = response.data.results; | ||||||
|                  this.dialogVisible = false; |             let arr= []; | ||||||
|                 this.$message.success("成功"); |             list.forEach(item => { | ||||||
|  |               if (!item.children || item.children.length < 1) { | ||||||
|  |                 let startTime = new Date(item.start_date).getTime(); | ||||||
|  |                 let endTime = new Date(item.end_date).getTime(); | ||||||
|  |                 let obj = new Object(); | ||||||
|  |                 obj.name = item.number; | ||||||
|  |                 obj.id = item.id; | ||||||
|  |                 obj.top = 20; | ||||||
|  |                 obj.startTime = startTime; | ||||||
|  |                 obj.endTime = endTime; | ||||||
|  |                 obj.planTime = [startTime, endTime]; | ||||||
|  |                 obj.per = item.count; | ||||||
|  |                 obj.type = 1; | ||||||
|  |                 obj.isShow = true; | ||||||
|  |                 arr.push(obj); | ||||||
|               } |               } | ||||||
|  |               that.proList = arr; | ||||||
|             }); |             }); | ||||||
|          } |           } | ||||||
|          else |           this.listLoading = false; | ||||||
|             { |         }); | ||||||
|                this.$message.error("排产数超过所需数,请合理排产!"); |       }, | ||||||
|             } |       handleclick(scope) { | ||||||
|      |         this.orderID = scope.row.id; | ||||||
|     }, |         this.countsx = scope.row.count; | ||||||
|     handleWork(scope) |         this.planed_count = scope.row.planed_count; | ||||||
|     { |         this.delivery_date = scope.row.delivery_date; | ||||||
|        this.$confirm("确认生成子计划?", "提醒", { |         this.dialogVisible = true; | ||||||
|         confirmButtonText: "确认", |         this.$nextTick(() => { | ||||||
|         cancelButtonText: "取消", |           this.$refs["Form"].clearValidate(); | ||||||
|         type: "error", |  | ||||||
|       }) |  | ||||||
|         .then(async () => { |  | ||||||
|           await  createsubplan(scope.row.id).then((res) => { |  | ||||||
|               if (res.code >= 200) { |  | ||||||
|                 this.$message.success("生成子计划成功!"); |  | ||||||
|                  this.$router.push({name: "work", params: { id: scope.row.id }, }) |  | ||||||
|                  this.getplanList() |  | ||||||
|               } |  | ||||||
|             }); |  | ||||||
|         }) |  | ||||||
|         .catch((err) => { |  | ||||||
|           console.error(err); |  | ||||||
|         }); |         }); | ||||||
| 
 | 
 | ||||||
|  |       }, | ||||||
|  |       async confirm(form) { | ||||||
|  | 
 | ||||||
|  |         this.orderplan.start_date = this.value1[0]; | ||||||
|  | 
 | ||||||
|  |         if (this.delivery_date >= this.value1[1]) { | ||||||
|  |           this.orderplan.end_date = this.value1[1]; | ||||||
|  |         } else { | ||||||
|  |           this.$message.error("计划完成时间超过订单交付日期,请从新选择日期!"); | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         this.orderplan.order = this.orderID | ||||||
|  |         if (this.orderplan.count <= (this.countsx - this.planed_count)) { | ||||||
|  |           createProductionplan(this.orderplan).then((res) => { | ||||||
|  |             if (res.code >= 200) { | ||||||
|  |               this.getorderList(); | ||||||
|  |               this.getplanList(); | ||||||
|  |               this.dialogVisible = false; | ||||||
|  |               this.$message.success("成功"); | ||||||
|  |             } | ||||||
|  |           }); | ||||||
|  |         } else { | ||||||
|  |           this.$message.error("排产数超过所需数,请合理排产!"); | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |       }, | ||||||
|  |       handleWork(scope) { | ||||||
|  |         this.$confirm("确认生成子计划?", "提醒", { | ||||||
|  |           confirmButtonText: "确认", | ||||||
|  |           cancelButtonText: "取消", | ||||||
|  |           type: "error", | ||||||
|  |         }) | ||||||
|  |           .then(async () => { | ||||||
|  |             await createsubplan(scope.row.id).then((res) => { | ||||||
|  |               if (res.code >= 200) { | ||||||
|  |                 this.$message.success("生成子计划成功!"); | ||||||
|  |                 this.$router.push({name: "work", params: {id: scope.row.id},}) | ||||||
|  |                 this.getplanList() | ||||||
|  |               } | ||||||
|  |             }); | ||||||
|  |           }) | ||||||
|  |           .catch((err) => { | ||||||
|  |             console.error(err); | ||||||
|  |           }); | ||||||
|  | 
 | ||||||
|  |       }, | ||||||
|  |       activeNameClick(tab, event){ | ||||||
|  |         debugger; | ||||||
|  |         console.log(tab, event); | ||||||
|  |         if(tab.label==='甘特图'){ | ||||||
|  |           this.ganttShow = true; | ||||||
|  |         }else{ | ||||||
|  |           this.ganttShow = false; | ||||||
|  |         } | ||||||
|  |       }, | ||||||
|  |       //查看子计划 | ||||||
|  |       handleselectplan(scope) { | ||||||
|  |         this.$router.push({name: "work", params: {id: scope.row.id},}) | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|     }, |     }, | ||||||
|     //查看子计划 |   }; | ||||||
|     handleselectplan(scope) |  | ||||||
|     { |  | ||||||
|            this.$router.push({name: "work", params: { id: scope.row.id }, }) |  | ||||||
|     } |  | ||||||
| 
 | 
 | ||||||
|   }, | </script> | ||||||
| }; |  | ||||||
|      |  | ||||||
|   </script> |  | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|   <style> | <style> | ||||||
|   .el-table .warning-row { |   .el-table .warning-row { | ||||||
|     background: oldlace; |     background: oldlace; | ||||||
|   } |   } | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue