warewms-project-web/src/views/trace/process/view.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="title">
        <span>正生产铜管数量:</span>
        <span style="margin-left: 5px;font-size: 16px;color: #f62e2e">{{ allList.length }}</span>
        <span v-show="processNum>0" style="margin-left: 40px">当前工艺铜管加工数:</span>
        <span v-show="processNum>0" style="margin-left: 5px;font-size: 16px;color: #f62e2e">{{ processNum }}</span>
        <span v-show="activeName=='finish'" style="margin-left: 40px">已完成铜管加工数:</span>
        <span v-show="activeName=='finish'" style="margin-left: 5px;font-size: 16px;color: #f62e2e">{{ completeProductionList.length }}</span>
      </div>
      <div>
        <el-tabs :value="activeName" @tab-click="tabClick" :stretch="true">
          <el-tab-pane label="生产中" name="all">
            <process-table :loading="showTable" @queryTable="getList" :retroactive-list="allList"/>
          </el-tab-pane>
          <el-tab-pane label="倒角工序" name="daoJiao">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="DaojiaoList"/>
          </el-tab-pane>
          <el-tab-pane label="铣面工序" name="xiMian">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="xiMianList"/>
          </el-tab-pane>
          <el-tab-pane label="轧制工序" name="zhaZhi">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="zhaZhiList"/>
          </el-tab-pane>
          <el-tab-pane label="大散盘工序" name="daSanPan">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="daSanPanList"/>
          </el-tab-pane>
          <el-tab-pane label="退火工序" name="tuiHuo">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="tuiHuoList"/>
          </el-tab-pane>
          <el-tab-pane label="完成生产" name="finish">
            <process-table :loading="showTable" @queryTable="getList"  :retroactive-list="completeProductionList"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import ProcessTable from "@/layout/components/processTableView/index.vue";
import {getRetroactiveHistorys, getRetroactiveNowList} from "@/api/trace/process";

export default {
  name: "view",
  components: {ProcessTable},
  data() {
    return {
      activeName: "all",
      allList: [],
      DaojiaoList: [],
      xiMianList: [],
      zhaZhiList: [],
      daSanPanList: [],
      tuiHuoList: [],
      completeProductionList: [],
      processNum: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
      showTable: true,
      tabName:null,
    }
  },
  methods: {
    getList(){
      this.tabClick({name:this.tabName},null)
    },
    tabClick(tab, event) {
      this.tabName = tab.name;
      this.showTable = true
      if (tab.name == "all") {
        getRetroactiveNowList(this.queryParams).then(response => {
          this.allList = response.rows
          this.showTable = false
        })
      }
      if (tab.name == "daoJiao") {
        let params = {...this.queryParams, inStatus: "1,2"}
        getRetroactiveNowList(params).then(response => {
          this.DaojiaoList = response.rows
          this.showTable = false
          this.processNum = response.total
        })
      }
      if (tab.name == "xiMian") {
        let params = {...this.queryParams, inStatus: "3"}
        getRetroactiveNowList(params).then(response => {
          this.xiMianList = response.rows
          this.showTable = false
          this.processNum = response.total
        })
      }
      if (tab.name == "zhaZhi") {
        let params = {...this.queryParams, inStatus: "4"}
        getRetroactiveNowList(params).then(response => {
          this.zhaZhiList = response.rows
          this.showTable = false
          this.processNum = response.total
        })
      }
      if (tab.name == "daSanPan") {
        let params = {...this.queryParams, inStatus: "5"}
        getRetroactiveNowList(params).then(response => {
          this.daSanPanList = response.rows
          this.showTable = false
          this.processNum = response.total
        })
      }
      if (tab.name == "tuiHuo") {
        let params = {...this.queryParams, inStatus: "6"}
        getRetroactiveNowList(params).then(response => {
          this.tuiHuoList = response.rows
          this.showTable = false
          this.processNum = response.total
        })
      }
      if (tab.name == "finish") {
        getRetroactiveHistorys({status: 7}).then(response => {
          this.completeProductionList = response
          this.showTable = false
          this.processNum =0
        })
      }
      this.activeName = tab.name
    }
  },
  mounted() {
    getRetroactiveNowList(this.queryParams).then(response => {
      this.allList = response.rows
      this.showTable = false
    })
  }
}
</script>
<style scoped lang="scss">
.title {
  font-size: 16px;
  height: 40px;
}

::v-deep .el-tabs__content {
  overflow: visible;
}

::v-deep .el-tabs__item {
  color: #636469;
}

::v-deep .el-tabs__item.is-active {
  color: #15cbf3;
}

::v-deep .el-icon-arrow-left {
  color: white;
}

::v-deep .el-icon-arrow-right {
  color: white;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}

::v-deep .el-tabs__active-bar {
  background-color: #15cbf3;
}
</style>