imcs_yj_fe/imcs-ui/src/views/zuihou/runManageCenter/orderMgr/Index.vue

<template>
  <div 
  	class="app-container" 
  >
  	<!-- 统计数据区域 -->
    <el-row :gutter="20" class="rowCls">
      <el-col :xs="12" :sm="8" :lg="5">
        <div class="blockDiv blockBg1">
          <h1><countTo :duration="3000" :end-val="topTongjiData.sourceCount" :start-val="0"/><span class="danweiSpan">{{$t("runCenter.common.lit")}}</span></h1>
          <p>{{$t("runCenter.common.shelvesCount")}}</p>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
      	<div class="blockDiv blockBg2">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.auditCount" :start-val="0"/><span class="danweiSpan">{{$t("runCenter.common.lit")}}</span></h1>
	          <p>{{$t("runCenter.common.storgeCount")}}</p>
      	</div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
         <div class="blockDiv blockBg3">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.schedulingCount" :start-val="0"/><span class="danweiSpan">{{$t("runCenter.common.lit")}}</span></h1>
      			<p>{{$t("runCenter.common.instockCount")}}</p>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
        <div class="blockDiv blockBg4">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.orderSuspendCount" :start-val="0"/><span class="danweiSpan">{{$t("runCenter.common.lit")}}</span></h1>
      			<p>{{$t("runCenter.common.freestockCount")}}</p>
        </div>
      </el-col>
      <!-- 进行中订单 -->
      <el-col :xs="12" :sm="8" :lg="4">
         <div class="blockDiv blockBg5">
          <h1><countTo :duration="3000" :end-val="topTongjiData.orderConductCount" :start-val="0"/><span class="danweiSpan">{{$t("runCenter.common.lit")}}</span></h1>
          <p>{{$t("runCenter.common.lockstockCount")}}</p>
        </div>
      </el-col>
    </el-row>
    
    <!-- 订单主要模块区域 -->
    <el-tabs class="noTabPadding" v-model="activeTab" type="border-card" @tab-click="tabClick">
		  <el-tab-pane name="runningOrder" :label='$t("runCenter.common.tab1")+"("+tabNum.tab1+")"'>
		  	<!-- 【进行中订单】 -->
		  	<running-order ref="runningOrder" @setTabNums="setTabNums" @audioStatus="frashAudioStatus"></running-order>
		  </el-tab-pane>
		  <el-tab-pane name="reviewedOrder" :label='$t("runCenter.common.tab2")+"("+tabNum.tab2+")"'>
		  	<!-- 待审核 -->
		  	<reviewed-order ref="reviewedOrder" @setTabNums="setTabNums" @audioStatus="frashAudioStatus"></reviewed-order>
		  </el-tab-pane>
		  <el-tab-pane name="failAuditOrder" :label='$t("runCenter.common.tab3")+"("+tabNum.tab3+")"'>
		  	<!--审核不通过-->
		  	<fail-audit-order ref="failAuditOrder" @setTabNums="setTabNums" @audioStatus="frashAudioStatus"></fail-audit-order>
		  </el-tab-pane>
		  <el-tab-pane name="draftOrder" :label='$t("runCenter.common.tab4")+"("+tabNum.tab4+")"'>
		  	<!--新建订单-->
		  	<draft-order ref="draftOrder" @setTabNums="setTabNums" @audioStatus="frashAudioStatus"></draft-order>
		  </el-tab-pane>
		  <el-tab-pane name="outNewOrder" :label='$t("runCenter.common.tab5")+"("+tabNum.tab5+")"'>
		  	<!--外面新订单-->
		  	<out-new-order ref="outNewOrder" @setTabNums="setTabNums" @audioStatus="frashAudioStatus"></out-new-order>
		  </el-tab-pane>
		  <el-tab-pane name="finishedOrder" :label='$t("runCenter.common.tab6")+"("+tabNum.tab6+")"'>
		  	<!--已完成-->
		  	<finished-order ref="finishedOrder" @setTabNums="setTabNums"></finished-order>
		  </el-tab-pane>
		</el-tabs>
		
  </div>
</template>

<script>
	//【进行中订单】组件
	import RunningOrder from "./components/runningOrder"
	//【待审核】组件
	import ReviewedOrder from "./components/reviewedOrder"
	//【审核不通过】组件
	import FailAuditOrder from "./components/failAuditOrder"
	//【草稿】组件
	import DraftOrder from "./components/draftOrder"
	//【外面新订单】组件
	import OutNewOrder from "./components/outNewOrder"
	//【已完成】组件
	import FinishedOrder from "./components/finishedOrder"
	// 【仓库类型管理】-API
	import warehouseTypeMgrApi from "@/api/modelingCenter/warehouseTypeMgr"
	// 加载动态数字组件
	import countTo from 'vue-count-to'
	// 【订单管理】-API
	import orderMgrApi from "@/api/runManageCenter/orderMgr"
	import elDragDialog from '@/directive/el-drag-dialog'
	import { initDicts, initQueryParams } from '@/utils/commons'
	import axios from 'axios'
	export default {
	  name: "OrderMgr",
	  directives: { elDragDialog },
	  components: { RunningOrder, ReviewedOrder, FailAuditOrder, DraftOrder, OutNewOrder, FinishedOrder, countTo },
	  props: {
	  },
	  data () {
	    return {
	    	tabNum: {tab1: 0, tab2: 0, tab3: 0, tab4: 0, tab5: 0, tab6: 0},
	    	activeTab: "runningOrder",  // 默认选择的tab（进行中）
	    	topTongjiData: {"sourceCount": 0, "auditCount": 0,"schedulingCount": 0,"orderSuspendCount": 0,"orderConductCount": 0},
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 获取统计数据
	  	this.getCounts()
		},
		// 监听数据的变化
	  watch: {
	  	  /*$route(){
	  	  	// 如果是点击了【订单管理】菜单
	  	  	if(this.$route.path == "/runManageCenter/orderMgr"){
	  	  		console.log("本路由的数据222：", this.$route)
	  	  	}
	      },*/
	  },
	  computed: {
	  },
	  mounted () {
	    
	  },
	  methods: {
	  	tabClick(e){
	  		console.log("被选择的tab:", e.index)
	  		// 进行中-tab
	  		if(e.index == 0){
	  			this.$refs.runningOrder.search()
	  		}
	  		// 待审核-tab
	  		if(e.index == 1){
	  			this.$refs.reviewedOrder.search()
	  		}
	  		// 审核不通过-tab
	  		if(e.index == 2){
	  			this.$refs.failAuditOrder.search()
	  		}
	  		// 草稿-tab
	  		if(e.index == 3){
	  			this.$refs.draftOrder.search()
	  		}
	  		// 外面新订单-tab
	  		if(e.index == 4){
	  			this.$refs.outNewOrder.search()
	  		}
	  		// 已完成-tab
	  		if(e.index == 5){
	  			this.$refs.finishedOrder.search()
	  		}
	  	},
	  	// 每一个Tab的值变化，设置总Tabs的数量
	  	setTabNums(val, field){
	  		// 统计数量
	  		this.tabNum[field] = val
	  	},
	  	// Tab直接的相互影响-函数（主要审核状态的变化）
	  	frashAudioStatus(val){
	  		console.log("是不是高级或者一键排产传值：", val)
	  		// val的值：1、待审核；2、审核通过；3、审核失败
	  		if(val == "1"){
	  			//console.log("Tab直接的相互影响-函数（主要审核状态的变化）: ", val)
	  			this.$refs.reviewedOrder.search()
	  		}
	  		if(val == "2"){
	  			//console.log("Tab直接的相互影响-函数（主要审核状态的变化）: ", val)
	  			this.$refs.runningOrder.search()
	  		}
	  		if(val == "3"){
	  			this.$refs.failAuditOrder.search()
	  		}
	  		// 获取统计数据-审核数据变化，更新统计
	  		this.getCounts()
	  	},
	  	// 获取统计数据-函数
	    getCounts(){
	    	orderMgrApi.getOrderStatusCount({}).then(res => {
	    		res = res.data 
	    		console.log("统计数据22：", res)
	    		if(res.isSuccess){
	    			res = res.data
	    			// 赋值
	    			this.topTongjiData = {
	    				sourceCount: parseInt(res.sourceCount), //新增外部订单
	    				auditCount: parseInt(res.auditCount), //待审核订单
	    				schedulingCount: parseInt(res.schedulingCount), //待排产订单
	    				orderSuspendCount: parseInt(res.orderSuspendCount), //暂停中订单
							orderConductCount: parseInt(res.orderConductCount) //进行中订单
	    			}
	    		}
	    	})
	    },
	  }
	}
</script>
<style type="text/css">
	.noTabPadding .el-tabs__content{
		padding: 0;
	}
</style>
<style lang="scss" scoped>
	.blockDiv{
		position: relative;
		border: 1px solid #EEEEEE;
		padding-left: 15px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		text-align: center;
		color: white;
		-moz-box-shadow: 1px 5px 5px #c0b7b7;
		webkit-box-shadow: 1px 5px 5px #c0b7b7;
		box-shadow: 1px 5px 5px #c0b7b7;
		h1{
			margin: 20px;
			font-size: 45px;
		}
		p{
			text-align: left;
			color: #FFFFFF;
		}
	}
	.danweiSpan{
		display: inline-block;
		font-size: 16px;
		color: black;
	}
	.blockBg1{
		background: #009999;
		border: 1px solid #009999;
	}
	.blockBg2{
		background: #CC9966;
		border: 1px solid #CC9966;
	}
	.blockBg3{
		background: #BD987A;
		border: 1px solid #BD987A;
	}
	.blockBg4{
		background: #FF9999;
		border: 1px solid #FF9999;
	}
	.blockBg5{
		background: #33CCCC;
		border: 1px solid #33CCCC;
	}
	.blockBg6{
		background: #E37B3D;
		border: 1px solid #E37B3D;
	}
	.rowCls{
		background: white;
		box-sizing: border-box;
		border-bottom: 2px dotted #AAAAAA;
		margin-bottom: 15px;
	}
	.rowCls .el-col{
		margin-bottom: 20px;
	}
</style>