yudao-init/src/views/produce/target/add-or-updata.vue

<!--
 * @Author: zhp
 * @Date: 2024-04-17 16:31:51
 * @LastEditTime: 2024-06-17 16:55:04
 * @LastEditors: DY
 * @Description:
-->
<template>
  <el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
    <small-title slot="title" :no-padding="true">
      {{ dataForm.id ? '编辑' : '新增' }}
    </small-title>
    <div class="detailBox">
      <el-form ref="form" :model="dataForm" label-width="80px" :rules="dataRule" label-position="top">
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="8">
            <el-form-item v-if="ftype === 0" label="工厂名称" prop="factory">
              <el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
                <el-option v-for="(item, index) in dhgfactoryList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-else label="工厂名称" prop="factory">
              <el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
                <el-option v-for="(item, index) in tyjxfactoryList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间维度" prop="targetType">
              <el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime">
                <!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> -->
                <el-option label="日" :value="0" />
                <el-option label="周" :value="1" />
                <el-option label="月" :value="2" />
                <el-option label="年" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-show="dataForm.targetType === 0 || dataForm.targetType === ''" label="时间" prop="reportTime">
              <el-date-picker v-model="dataForm.reportTime" value-format="yyyyMMdd" type="date" placeholder="选择日">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="reportTime">
              <el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周" @change="setReportTime">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="dataForm.targetType === 2" label="时间" prop="reportTime">
              <el-date-picker v-model="dataForm.reportTime" value-format="yyyyMM" type="month" placeholder="选择月份">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="dataForm.targetType === 3" label="时间" prop="reportTime">
              <el-date-picker clearable v-model="dataForm.reportTime" value-format="yyyy" type="year" placeholder="开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
          {{ '芯片' }}
        </small-title>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="芯片产量(片)" prop="chipYield">
              <el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片良率(%)" prop="chipYieldRate">
              <el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片BOM" prop="chipBom">
              <el-input-number v-model="dataForm.chipBom" :precision="2" controls-position="right" placeholder="请输入芯片BOM" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片总功率(MW)" prop="chipTotalPower">
              <el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item v-if="ftype === 0" label="FTO投入量(片)" prop="ftoInput">
              <el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
            </el-form-item>
            <el-form-item v-else label="钼电极投入量(片)" prop="molybdenumElectrodeInput">
              <el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="ftype === 0" label="CSS稼动率(%)" prop="chipCssMarriageRate">
              <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
            </el-form-item>
            <el-form-item v-else label="PID6稼动率(%)" prop="chipCssMarriageRate">
              <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片段OEE(%)" prop="chipOee">
              <el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片平均功率(W)" prop="chipAveragePower">
              <el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="芯片人均产量(片/人)" prop="chipAnnualAverageProduction">
              <el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片产能利用率(%)" prop="chipCapacityUtilizationRate">
              <el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
          {{ '标准组件' }}
        </small-title>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="封装BOM" prop="componentBom">
              <el-input-number v-model="dataForm.componentBom" :precision="2" controls-position="right" placeholder="请输入封装BOM" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="封装线OEE(%)" prop="componentOee">
              <el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准组件良率(%)" prop="componentYieldRate">
              <el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准组件产量(片)" prop="componentYield">
              <el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="标准组件总功率(MW)" prop="componentTotalPower">
              <el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="封装产能利用率(%)" prop="componentCapacityUtilizationRate">
              <el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准组件人均产量(片/人)" prop="componentAnnualAverageProduction">
              <el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准组件平均功率(W)" prop="componentAveragePower">
              <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准组件转化效率" prop="componentConversionEfficiency">
              <el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
          {{ 'BIPV产品' }}
        </small-title>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="产品产量(㎡)" prop="bipvProductOutput">
              <el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="人均产量(㎡/人)" prop="bipvAnnualAverageProduction">
              <el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片使用量(片)" prop="bipvChipUsage">
              <el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="芯片利用率(%)" prop="bipvChipUtilizationRate">
              <el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="padding: 0 32px;">
          <el-col :span="6">
            <el-form-item label="内部材料成本(元/㎡)" prop="bipvInsideMaterialCost">
              <el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="OEM及委外材料成本(元/㎡)" prop="bipvOeeMaterialCost">
              <el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="综合材料成本(元/㎡)" prop="bipvComprehensiveMaterialCost">
              <el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleClose()">确 定</el-button>
    </div>
  </el-drawer>

</template>

<script>
// import basicAdd from './basic-add';
// import {
//   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList,
//   getTeamList, getDetList, getLineList
// } from "@/api/base/qualityScrapLog";
// import { getList, } from "@/api/base/qualityScrapType";
import SmallTitle from './SmallTitle';
import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData';
import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants";
import moment from 'moment'

export default {
  components: {
    SmallTitle,
  },
  // mixins: [basicAdd],
  props: {
    ftype: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      factoryList,
      dhgfactoryList,
      tyjxfactoryList,
      lineList: [],
      typeList: [],
      workOrderList: [],
      detList: [],
      teamList: [],
      sectionList: [],
      visible: false,
      // reportTime: undefined,
      week: undefined,
      dataForm: {
        reportTime: undefined,
        factoryType: 0,
        id: undefined,
        factory: undefined,
        targetTime: undefined,
        targetType: 0,
        chipYield: undefined,
        chipYieldRate: undefined,
        chipBom: undefined,
        chipTotalPower: undefined,
        ftoInput: undefined,
        chipCssMarriageRate: undefined,
        chipOee: undefined,
        chipAveragePower: undefined,
        chipAnnualAverageProduction: undefined,
        chipCapacityUtilizationRate: undefined,
        componentBom: undefined,
        componentOee: undefined,
        componentYieldRate: undefined,
        componentYield: undefined,
        componentTotalPower: undefined,
        componentCapacityUtilizationRate: undefined,
        componentAnnualAverageProduction: undefined,
        componentAveragePower: undefined,
        bipvProductOutput: undefined,
        bipvAnnualAverageProduction: undefined,
        bipvChipUsage: undefined,
        bipvChipUtilizationRate: undefined,
        bipvInsideMaterialCost: undefined,
        bipvOeeMaterialCost: undefined,
        bipvComprehensiveMaterialCost: undefined,
        molybdenumElectrodeInput: undefined,
        componentConversionEfficiency: undefined
      },
      // materialList: [],
      dataRule: {
        factory: [{ required: true, message: "工厂名称不能为空", trigger: "chnage" }],
        reportTime: [{ required: true, message: "时间不能为空", trigger: "change" }],
        targetType: [{ required: true, message: "时间维度不能为空", trigger: "change" }]
        // detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],

        // logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
      }
    };
  },
  mounted() {
    // this.getCurrentTime()
  },
  methods: {
    setReportTime() {
      this.dataForm.reportTime = this.week
    },
    clearTime() {
      this.week = undefined
      this.dataForm.reportTime = undefined
    },
    formClear() {
      if (this.$refs.dataForm !== undefined) {
        this.$refs.dataForm.resetFields()
      }
    },
    // clearTime() {
    //   this.dataForm.targetTime = undefined
    // }, 
    handleClose() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 新增
          if (this.dataForm.targetType === 1) {
            this.dataForm.targetTime = this.week ? Number(moment(this.week.getTime()).format('YYYYWW')) : ''
          } else {
            this.dataForm.targetTime = this.dataForm.reportTime ? Number(this.dataForm.reportTime) : ''
          }
          if (this.dataForm.id) {
            // 修改
            updateProduceTarget({
              ...this.dataForm,
              reportTime: undefined
            }).then(res => {
              if (res.code === 0) {
                this.$message.success('修改成功！')
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            // 新增
            createProduce({
              ...this.dataForm,
              reportTime: undefined
            }).then(res => {
              if (res.code === 0) {
                this.$message.success('新增成功！')
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          }
        }
      })
    },
    init(id) {
      this.dataForm.id = id || undefined
      this.dataForm.factoryType = this.ftype
      this.visible = true
      if (this.dataForm.id) {
        getProduceTargetDetail(this.dataForm.id).then(res => {
          this.dataForm = res.data
          if (this.dataForm.targetType === 0 || this.dataForm.targetType === 2 || this.dataForm.targetType === 3) {
            // this.dataForm.reportTime = String(this.dataForm.targetTime)
            this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetTime))
          }
          if (this.dataForm.targetType === 1) {
            const date = new Date()
            date.setFullYear(String(this.dataForm.targetTime).slice(0, 4))
            date.setMonth(0)
            date.setDate((Number(String(this.dataForm.targetTime).slice(4)) - 1)* 7 + 1)
            // console.log('你好', date, moment(date).format('yyyyWW'), String(this.dataForm.targetTime).slice(4))
            this.week = date
            this.$set(this.dataForm, 'reportTime', date)
          }
        })
      }
    }
  }
};
</script>
<style scoped>
.footer {
  position: absolute;
  bottom: 1%;
  right: 2%;
  z-index: 999;
}
.drawer-footer {
  width: 100%;
  margin-top: 50px;
  border-top: 1px solid #e8e8e8;
  padding: 10px 50px;
  text-align: left;
  background: #fff;
}
.el-divider--horizontal{
  margin: 0;
}
  .drawer >>> .el-drawer {
  border-radius: 8px 0 0 8px;
}

.drawer >>> .el-form-item__label {
  padding: 0;
}

.drawer >>> .el-drawer__header {
  margin: 0;
  padding: 32px 32px 24px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 30px;
}
.detailBox p {
  margin: 0;
  padding: 0 32px;
}
.detailBox .title {
  /* width: 56px; */
  /* height: 14px; */
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.detailBox .text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102,102,102,0.75);
  padding-bottom: 20px;
}

</style>