1.产能规划日历部分实现

loulijun2021

2022-10-17 d3129c5d9af88192c43e7d2a529adf68f7433d9e

 src/components/DatePicker/index.vue

@@ -1,5 +1,5 @@
<template>
  <div v-click-outside onselectstart="return false" style="-moz-user-select : none">
  <div v-click-outside onselectstart="return false" style="-moz-user-select : none;">
    <input type="text" :value="value" :rowData="rowData" class="input__inner">
    <div v-if="isVisible" :class="[{pannel:true},{top_yes:topStyle}]">
      <div class="pannel-nav">
@@ -64,6 +64,7 @@
        }}年{{ dblTime.month + 1 }}月</span><span class="samllText">星期{{ getweekday(handleDatetime(dblDate)) }}</span>
        </div>
        <div class="pannelTo_nav">

          <el-select v-model="schemeDate" size="small" style="width:240px;" @change="changeScheme">
            <el-option v-for="item in projectList" :key="item.CapCode" :value="item.CapCode" :label="item.CapName" />
          </el-select>
@@ -120,7 +121,13 @@
</template>
<script>
import * as funsdates from '@/utils/funsdate'
// import capacityPlanning from '@/api/capacityPlanning'
import {
  CapacityPlanningCalendar,
  CapacityPlanningGivePlanSubmit,
  CapacityPlanningOnclickSelect,
  CapacityPlanningSetupSearch
} from '@/api/scgl'

var time = null
export default {
  directives: {
@@ -147,20 +154,24 @@
  },
  props: {
    value: {
      // type:Date,
      // default:()=> new Date
      type: String,
      type: Array,
      default: null
    },
    defArr: {
      type: Array,
      default: Array
    },
    rowData: {
      type: String,
      type: Object,
      default: null
    },
    CapacityPlanningSearch: {
      type: Function,
      default: null
    }

  },

  data() {
    const { year, month } = funsdates.getYearMonthDay(new Date())
    return {
@@ -181,14 +192,15 @@
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      changeTime: '',
      changeTimeArr: [],
      defArr: [],
      // defArr: [],
      dm_top: '',
      topStyle: false,
      form: {
        rows: 100,
        rows: 1000,
        page: 1
      },
      projectDef: []

    }
  },
  computed: {
@@ -210,7 +222,6 @@
    }
  },
  mounted() {

  },
  methods: {
    getDblTime() {
@@ -227,13 +238,13 @@
      let name = ''
      if (this.isDblDate(date)) {
        for (const i in this.defArr) {
          if (this.defArr[i].name == this.handleDatetime(date)) {
          if (this.defArr[i].name === this.handleDatetime(date)) {
            code = this.defArr[i].key
          }
        }
      }
      for (const i in this.projectDef) {
        if (this.projectDef[i].CapSetupCode == code) {
        if (this.projectDef[i].CapSetupCode === code) {
          name = this.projectDef[i].CapSetupName
        }
      }
@@ -249,6 +260,7 @@
      }

      const e = event || window.event
      // console.log(e.clientY, 7)
      const nowHeigth = e.clientY
      if (nowHeigth >= 500) {
        this.topStyle = true
@@ -273,13 +285,13 @@
    changeScheme() {
      let toList = []
      for (const i in this.projectList) {
        if (this.schemeDate == this.projectList[i].CapCode) {
        if (this.schemeDate === this.projectList[i].CapCode) {
          toList = this.projectList[i].list
        }
      }

      for (const i in this.defArr) {
        if (this.defArr[i].name == this.changeTime) {
        if (this.defArr[i].name === this.changeTime) {
          this.defArr[i].key = this.schemeDate
        }
      }
@@ -288,13 +300,16 @@
    },
    focus() {
      this.isVisible = true
      this.CapacityPlanningCalendar()

      this.getCapacityPlanningCalendar()
      this.getHeight()
      this.CapacityPlanningSetupSearch()
      this.CapacityPlanningSearch()
    },
    blur() {
      this.isVisible = false
      this.isDbl = false // 右侧面板关闭
      this.isVisible = false// 主面板关闭
      this.$emit('over', true)// 给父组件发出请求，告诉他已经完成操作，可调用获取列表接口
    },
    isCurrentMonth(date) {
      const { year, month } = funsdates.getYearMonthDay(new Date(this.time.year,
@@ -310,33 +325,34 @@
    // 过期时间
    isPastDue(date) {
      const newDate = this.handleDatetime(new Date())
      if (new Date(newDate) > date && this.handleDatetime(date) != newDate) {
        return true
      } else {
        return false
      }
      return new Date(newDate) > date && this.handleDatetime(date) !== newDate
    },
    chooseDate(date) {
      clearTimeout(time) // 首先清除计时器
      time = setTimeout(() => {
        this.time = funsdates.getYearMonthDay(date)
        const timeDate = ''
        // const timeDate = ''
        this.isDbl = false
        // 可以点击的日期
        if (!this.isPastDue(date)) {
          if ((this.value.indexOf(this.handleDatetime(date)) < 0 && this.value != '') || this.value == '') { // 数组添加
          if ((this.value.indexOf(this.handleDatetime(date)) < 0 && this.value !== '') || this.value === '') { // 数组添加
            if (typeof this.value === 'string') {
              this.value = this.value.split(',')
            }
            this.value.push(this.handleDatetime(date)) // 新增到input里
            const data = {
              name: this.handleDatetime(date),
              key: this.rowData.CaptPlanWorkShiftCode
            }

            this.defArr.push(data) // 新增到 默认数组里
          } else if (this.value.indexOf(this.handleDatetime(date)) >= 0) { // 数组减去
            const indexV = this.value.indexOf(this.handleDatetime(date))
            if (typeof this.value === 'string') {
              this.value = this.value.split(',')
            }
            this.value.splice(indexV, 1)
            for (const i in this.defArr) {
              if (this.defArr[i].name == this.handleDatetime(date)) {
              if (this.defArr[i].name === this.handleDatetime(date)) {
                this.defArr.splice(i, 1)
              }
            }
@@ -351,14 +367,19 @@
        this.dblDate = date
        this.isDbl = true
        this.changeTime = this.handleDatetime(date)
        this.CapacityPlanningOnclickSelect({ CaptPlanId: this.rowData.CaptPlanId, DateTime: this.handleDatetime(date) })

        this.CapacityPlanningOnclickSelect({
          CaptPlanWorkShiftCode: this.rowData.CaptPlanWorkShiftCode,
          captplanid: this.rowData.CaptPlanId,
          datetime: this.handleDatetime(date)
        })
        this.getDblTime()
      }
    },
    isDblDate(date) {
      for (const i in this.defArr) {
        if (this.defArr[i].key != '') {
          if (this.defArr[i].name == this.handleDatetime(date) && this.defArr[i].key != this.rowData.CaptPlanWorkShiftCode) {
        if (this.defArr[i].key !== '') {
          if (this.defArr[i].name === this.handleDatetime(date) && this.defArr[i].key !== this.rowData.CaptPlanWorkShiftCode) {
            return true
          }
        }
@@ -418,75 +439,65 @@
    // },
    // 双击请求数据
    CapacityPlanningOnclickSelect(data) {
      // capacityPlanning.CapacityPlanningOnclickSelect(data).then((res) =>{
      //     this.projectList = res.List
      //     for(let i in this.defArr){
      //         if(this.defArr[i].name == data.DateTime){
      //             this.schemeDate = this.defArr[i].key
      //         }
      //     }
      //     this.changeScheme()
      // })
      CapacityPlanningOnclickSelect(data).then((res) => {
        this.projectList = res.data

        // for (const i in this.defArr) {
        //   console.log(this.defArr[i].name === data.DateTime, 6)
        //   if (this.defArr[i].name === data.DateTime) {
        //     this.schemeDate = this.defArr[i].key
        //   }
        // }

        this.schemeDate = data.CaptPlanWorkShiftCode

        this.changeScheme()
      })
    },
    // 工作日历提交
    CapacityPlanningGivePlanSubmit() {
      const data = {
        CaptPlanId: this.rowData.CaptPlanId,
        WkshopCode: this.rowData.CaptPlanWorkShopid,
        CapUnitCode: this.rowData.CaptPlanDeviceTypeid,
        CapSetupCode: this.rowData.CaptPlanWorkShiftCode,
        CaptPlanType: this.rowData.CaptPlanType,
        WorkList: JSON.stringify(this.defArr)
      }
      // capacityPlanning.CapacityPlanningGivePlanSubmit(data).then((res) =>{
      //      if (res.statusCode == 300) {
      //         this.$message({
      //        showClose:true,
      //             message: res.message,
      //             type: "error"
      //         });
      //         } else {
      //         this.$message({
      //        showClose:true,
      //             message: res.message,
      //             type: "success"
      //         });
      //         this.blur()
      //         this.CapacityPlanningSearch()
      //         }
      // })
      const formData = new FormData()
      formData.append('wkshopcode', this.rowData.CaptPlanWorkShopid)// 车间编码
      formData.append('capunitcode', this.rowData.CaptPlanDeviceTypeid)// 生产单元编码（产线编码）
      formData.append('captplanid', this.rowData.CaptPlanId)// 产能资源id
      formData.append('capsetupcode', this.rowData.CaptPlanWorkShiftCode) // 默认方案编码
      formData.append('captplantype', this.rowData.CaptPlanType)// 资源类型
      formData.append('worklist', JSON.stringify(this.defArr))// 工作日历数据集
      // for (const [a, b] of formData.entries()) {
      //   console.log(a, ':', b)
      // }
      CapacityPlanningGivePlanSubmit(formData).then(res => {
        if (res.code === '200') {
          this.$message.success('保存成功！')
          this.blur()
          this.CapacityPlanningSearch()
        }
      })
    },
    CapacityPlanningCalendar() {
      // capacityPlanning.CapacityPlanningCalendar({CaptPlanId:this.rowData.CaptPlanId}).then((res) =>{
      //
      //     for(let i in res.List){
      //
      //         if(res.List[i].key == ''){
      //             res.List[i].key = this.rowData.CaptPlanWorkShiftCode
      //         }
      //     }
      //     this.defArr = res.List
      // })
    getCapacityPlanningCalendar() {
      CapacityPlanningCalendar({ captplanid: this.rowData.CaptPlanId }).then((res) => {
        this.defArr = res.data
      })
    },
    closeCapacityPlanningCalendar() {
      // capacityPlanning.CapacityPlanningCalendar({CaptPlanId:this.rowData.CaptPlanId}).then((res) =>{
      //     let nameList = []
      //     for(let i in res.List){
      //          nameList.push(res.List[i].name)
      //         if(res.List[i].key == ''){
      //             res.List[i].key = this.rowData.CaptPlanWorkShiftCode
      //         }
      //     }
      //     for(let i in this.defArr){
      //         for(let j in res.List){
      //         if(this.defArr[i].name == this.changeTime && res.List[j].name == this.changeTime){
      //             this.defArr[i].key = res.List[j].key
      //         } else if(this.defArr[i].name == this.changeTime && nameList.indexOf(this.changeTime)==-1){
      //             this.defArr[i].key = this.rowData.CaptPlanWorkShiftCode
      //         }
      //         }
      //
      //     }
      // })
      CapacityPlanningCalendar({ captplanid: this.rowData.CaptPlanId }).then((res) => {
        const nameList = []
        for (const i in res.List) {
          nameList.push(res.List[i].name)
          if (res.List[i].key === '') {
            res.List[i].key = this.rowData.CaptPlanWorkShiftCode
          }
        }
        for (const i in this.defArr) {
          for (const j in res.List) {
            if (this.defArr[i].name === this.changeTime && res.List[j].name === this.changeTime) {
              this.defArr[i].key = res.List[j].key
            } else if (this.defArr[i].name === this.changeTime && nameList.indexOf(this.changeTime) === -1) {
              this.defArr[i].key = this.rowData.CaptPlanWorkShiftCode
            }
          }
        }
      })
    },
    close() {
      setTimeout(() => {
@@ -495,9 +506,9 @@
      }, 300)
    },
    CapacityPlanningSetupSearch() {
      // capacityPlanning.CapacityPlanningSetupSearch(this.form).then((res) => {
      //   this.projectDef = res.rows
      // })
      CapacityPlanningSetupSearch(this.form).then((res) => {
        this.projectDef = res.rows
      })
    }

  }
@@ -572,6 +583,8 @@
  border-radius: 4px;
  line-height: 30px;
  margin: 5px 0;
  //overflow: visible !important;
  //box-sizing: border-box;

  .pannel-nav {
    position: relative;
@@ -643,7 +656,8 @@
    border-top: 1px solid #E7E7EA;
    padding: 10px;
    overflow: hidden;
    height: 58px;;
    height: 58px;

  }
}