index.vue 4.11 KB
<!--
 * @Author: ljm
 * @Date: 2021-06-22
 * @LastEditTime: 2024-08-07 16:23:30
 * @Description: sqcdp维护
 * @FilePath: applications/dee-mes/src/views/mes/baseData/sqcdp/index.vue
-->
<template>
  <section class="wordCalendar">
    <Header
      ref="header"
      :sqcdp-params="sqcdpParams"
      :year-data="yearData"
      :year="year"
      @getMonth="handleMonth"
      @handleStance="handleStance"
      @getYear="handleYear"
    />
    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
      <el-tab-pane label="S(安全)" name="S">
        <Calender ref="calenderS" :sqcdp-params="sqcdpParams" :unit-no="unitNo" :active-name="activeName" :month="month" :year="year" />
      </el-tab-pane>
      <el-tab-pane label="Q(质量)" name="Q">
        <Calender ref="calenderQ" :sqcdp-params="sqcdpParams" :unit-no="unitNo" :active-name="activeName" :month="month" :year="year" />
      </el-tab-pane>
      <el-tab-pane label="C(成本)" name="C">
        <Calender ref="calenderC" :sqcdp-params="sqcdpParams" :unit-no="unitNo" :active-name="activeName" :month="month" :year="year" />
      </el-tab-pane>
      <el-tab-pane label="D(进度)" name="D">
        <Calender ref="calenderD" :sqcdp-params="sqcdpParams" :unit-no="unitNo" :active-name="activeName" :month="month" :year="year" />
      </el-tab-pane>
      <el-tab-pane label="P(人员)" name="P">
        <Calender ref="calenderP" :sqcdp-params="sqcdpParams" :unit-no="unitNo" :active-name="activeName" :month="month" :year="year" />
      </el-tab-pane>
    </el-tabs>
    <!-- <Calender ref="calender" :unit-no="unitNo" :month="month" :year="year" /> -->

  </section>
</template>

<script>
import Header from './components/header'
import Calender from './components/calendar'
import { post } from '@/utils/http'

export default {
  name: 'SqcdpMaintain',
  componentName: 'Sqcdp维护',
  components: {
    Header,
    Calender
  },
  props: {
    sqcdpParams: {
      type: Object,
      default: () => {
        return {
          query: {}
        }
      }
    }
  },
  data() {
    return {
      activeName: 'S',
      month: null,
      year: null,
      yearData: [],
      unitNo: null
    }
  },
  mounted() {
    if (!this.sqcdpParams.name) {
      this.initYear()
    }
  },
  created() {},
  methods: {
    // 月份下拉框触发
    handleMonth(month) {
      this.month = month
      this.selectTab(this.activeName)
    },
    tabClick($event) {
      this.selectTab($event.name)
    },
    selectTab(activeName) {
      this.$nextTick(() => {
        this.$refs['calender' + activeName].getData(this.year, this.month, this.unitNo)
      })
    },
    // 年份下拉框触发
    handleYear(year) {
      this.year = year
      this.month = new Date().getMonth() + 1
      this.selectTab(this.activeName)
    },
    // 站位下拉框触发
    handleStance(val) {
      if (val === '工厂') {
        this.unitNo = null
      } else {
        this.unitNo = val
      }
      this.selectTab(this.activeName)
    },
    // 初始年份
    initYear() {
      post('/FactoryCalendar/getAllFactoryYear')
        .then((res) => {
          this.yearData = res.items.sort()
          this.year = new Date().getFullYear()
          this.month = new Date().getMonth() + 1
        })
        .catch((err) => console.log(err))
        .finally(() => {
          let name = ''
          let serialNumber = ''
          try {
            name = this.sqcdpParams.query.name
            serialNumber = this.sqcdpParams.query.serialNumber
          } catch (err) {
            console.info(err)
          }
          if (name) {
            this.activeName = name
            this.handleStance(serialNumber)
          } else {
            this.$refs['calender' + this.activeName].getData(this.year, this.month, this.unitNo)
          }
        })
    }

  }
}
</script>
<style lang="scss">
.wordCalendar {
  width: 100%;
  height: 100%;
  .el-tabs{
    width: 100%;
    height: calc(100% - 2px);

  }
  .el-tabs__header{
    margin-top: 20px;
    margin-bottom: 0;
  }
  .el-tabs__content{
    height: calc(100% - 41px);
    .el-tab-pane{
      width: 100%;
      height: 100%;
    }

  }
}
</style>