<!--操作者工号-->
<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">基本机型：</span>
        <el-select
          v-model="bigEngine"
          placeholder="请选择基本机型"
          clearable
          filterable
          size="small"
          style="width: 200px; margin-left: 13px"
          @change="selectBigEngine">
          <el-option
            v-for="item in bigEngineList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini" />
        </el-select>
        <span style="margin-left: 10px">总成号：</span>
        <el-select
          v-model="smallEngine"
          placeholder="请选择总成号"
          clearable
          filterable
          size="small"
          style="width: 200px; margin-left: 13px">
          <el-option
            v-for="item in smallEngineList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini" />
        </el-select>
        <span style="margin-left: 10px">工位号：</span>
        <el-select
          v-model="stationNumberValue"
          placeholder="请选择工位号"
          clearable
          filterable
          size="small"
          style="width: 200px; margin-left: 13px">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini" />
        </el-select>

        <span style="margin-left: 10px">零件号：</span>
        <el-input
          v-model="partId"
          clearable
          size="small"
          placeholder="请输入零件号"/>

        <span style="margin-left: 10px">零件名称：</span>
        <el-input
          v-model="partName"
          clearable
          size="small"
          placeholder="请输入零件名称"/>
        <br>
        <br>
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="pageSize = 30; pageCurrent = 1; searchOrder()">查询</el-button>
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-circle-plus-outline"
          style="margin-left: 5px"
          @click="addInformation()">新增</el-button>
        <el-button
          type="success"
          size="small"
          plain
          icon="el-icon-document-copy"
          @click="copyBOM('form1')">总成号拷贝</el-button>
        <el-button type="info" size="small" icon="el-icon-download" @click="exportExcel()">Excel</el-button>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :cell-class-name="tableRowClassName"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        class="main"
        tooltip-effect="dark"
        height="640px"
        style="width: 100%;"
        border
        size="mini">
        <el-table-column type="index" width="60" label="序号" align="center" />
        <el-table-column align="center" label="总成号">
          <template slot-scope="scope">
            {{ scope.row.零件号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="基本型号">
          <template slot-scope="scope">
            {{ scope.row.基本型号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位号">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件号">
          <template slot-scope="scope">
            {{ scope.row.零件编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="拷贝来源">
          <template slot-scope="scope">
            {{ scope.row.拷贝来源 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="small" @click="editInformation(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" size="small" @click="deleteInformation(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[15, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <!-- 拷贝图号弹出框 -->
    <el-dialog :visible.sync="dialogFormVisible1" title="总成号拷贝" center style="min-height: 200px" width="400px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="110px">
        <el-form-item label="来源总成号" prop="EngineSource" style="display: inline-block">
          <el-select v-model="form1.EngineSource" placeholder="请选择来源总成号" filterable size="small" @change="selectCopyEngineSourceChange">
            <el-option
              v-for="item in smallEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源福田号" style="display: inline-block">
          <el-input v-model="form1.FoTonPartsCodeSource" size="small" placeholder="" clearable disabled />
        </el-form-item>
        <el-form-item label="目标总成号" prop="EngineTarget" style="display: inline-block">
          <el-input v-model="form1.EngineTarget" size="small" placeholder="请输入目标总成号" clearable />
        </el-form-item>
        <el-form-item label="目标福田号" prop="FoTonPartsCodeTarget" style="display: inline-block">
          <el-input v-model="form1.FoTonPartsCodeTarget" size="small" placeholder="请输入目标福田零件号" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff1()">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd1()">确定</el-button>
      </div>
    </el-dialog>
    <!--  新增修改弹出框  -->
    <el-dialog :visible.sync="dialogFormVisible2" :title="title" center style="min-height: 200px;" width="400px">
      <el-form ref="form1" :model="addForm" :rules="addUpdateRules" label-position="right" label-width="110px">
        <el-form-item label="基本机型:" prop="bigEngine" style="display: inline-block">
          <el-select
            v-model="bigEngine"
            placeholder="请选择基本机型"
            clearable
            filterable
            size="small"
            style="width: 200px; margin-left: 13px"
            @change="selectBigEngine">
            <el-option
              v-for="item in bigEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
        </el-form-item>
        <el-form-item label="总成号:" prop="smallEngine" style="display: inline-block">
          <el-select
            v-model="addForm.smallEngine"
            placeholder="请选择总成号"
            clearable
            filterable
            size="small"
            style="width: 200px; margin-left: 13px">
            <el-option
              v-for="item in smallEngineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
        </el-form-item>
        <el-form-item label="工位号:" prop="opName" style="display: inline-block">
          <el-select
            v-model="addForm.opName"
            placeholder="请选择工位号"
            clearable
            filterable
            size="small"
            style="width: 200px; margin-left: 13px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini" />
          </el-select>
        </el-form-item>
        <el-form-item label="零件名称" prop="partName" style="display: inline-block">
          <el-input v-model="addForm.partName" size="small" placeholder="请输入零件名称" clearable />
        </el-form-item>
        <el-form-item label="零件号" prop="partId" style="display: inline-block">
          <el-input v-model="addForm.partId" size="small" placeholder="请输入零件号" clearable />
        </el-form-item>
        <el-form-item label="数量" prop="size" style="display: inline-block">
          <el-input-number
            v-model="addForm.size"
            :min="0"
            :step="1"
            size="small"
            style="width: 200px;"
            placeholder="请输入使用数量" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff2('addForm')">取消</el-button>
        <el-button v-if="title === '编辑'" type="primary" size="small" @click="submitUpdate('addForm')">确定</el-button>
        <el-button v-if="title === '新增'" type="primary" size="small" @click="submitAdd('addForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<!--<script src="../../../utils/setMethods.js"></script>-->
<script>
export default {
  data() {
    return {
      number: [],
      tableData: [], // 总数据数组
      stationNumberValue: '', // 工位号
      stationNumber: [], // 工位号
      bigEngine: '', // 大机型
      smallEngine: '', // 小机型
      partName: '', // 零件名称
      partId: '', // 零件号
      dateTime: '',
      total: 0, // 总条数
      pageList: 30, // 每页显示条数
      pageSize: 30, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      mid: [], // id
      loading: false,
      timer_1: null,
      MIDGroup: [],
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      title: '',
      form1: {
        FoTonPartsCodeTarget: '', // 目标福田号
        FoTonPartsCodeSource: '', // 来源福田号
        EngineSource: '', // 图号来源
        EngineTarget: '' // 目标图号
      },
      addForm: {
        id: '',
        smallEngine: '',
        partId: '',
        opName: '',
        size: 0,
        partName: ''
      },
      rules1: {
        FoTonPartsCodeTarget: [{ required: true, message: '请选择图号来源', trigger: ['blur', 'change'] }],
        EngineSource: [{ required: true, message: '请选择图号来源', trigger: ['blur', 'change'] }],
        EngineTarget: [{ required: true, message: '请输入目标图号', trigger: ['blur', 'change'] }]
      },
      addUpdateRules: {
        smallEngine: [{ required: true, message: '请选择总成号', trigger: ['blur', 'change'] }],
        partName: [{ required: true, message: '请输入零件名称', trigger: ['blur', 'change'] }],
        partId: [{ required: true, message: '请输入零件号', trigger: ['blur', 'change'] }],
        opName: [{ required: true, message: '请选择工位号', trigger: ['blur', 'change'] }],
        size: [{ required: true, message: '请输入使用数量', trigger: ['blur', 'change'] }]
      },
      smallEngineList: [], // 小机型列表
      bigEngineList: [] // 大机型列表
    }
  },
  created() {
    var year, month, day, audiTime
    this.date = new Date() // 修改数据date
    year = new Date().getFullYear()
    month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    audiTime = year + '-' + month + '-' + day
    console.log(audiTime, 'audiTime')
    this.dateTime = [audiTime, audiTime]
    this.getStationNumber()
    this.getSmallEngine()
    this.getEndStation()
    this.searchOrder()
  },
  mounted() {
  },
  methods: {
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      // console.log(row, rowIndex)
      if (rowIndex % 2 === 0) {
        return 'black'
      } else {
        return 'red'
      }
    },
    // 工位号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    // 选择大机型触发事件
    selectBigEngine() {
      this.addForm.smallEngine = ''
      this.smallEngine = ''
      this.getSmallEngine()
    },
    // 拷贝总成号 机型选中事件 获取福田号
    selectCopyEngineSourceChange() {
      this.form1.FoTonPartsCodeSource = ''
      var param = []
      param[0] = ['零件号', this.form1.EngineSource]
      var Data = this.CreateData('11', '北汽福田_BOM_福田零件号_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.form1.FoTonPartsCodeSource = response.data[0].福田零件号
          this.form1.FoTonPartsCodeTarget = response.data[0].福田零件号
        } else {
          this.$message.error('此总成号无对应福田零件号')
        }
      })
    },
    // 编辑零件
    editInformation(row) {
      this.addForm.id = row.ID
      this.addForm.smallEngine = row.零件号
      this.addForm.opName = row.工位号
      this.addForm.size = row.数量
      this.addForm.partId = row.零件编号
      this.addForm.partName = row.零件名称
      this.title = '编辑'
      this.dialogFormVisible2 = true
    },
    // 新增零件
    addInformation() {
      this.title = '新增'
      // 清空表单
      this.addForm.smallEngine = ''
      this.addForm.partId = ''
      this.addForm.opName = ''
      this.addForm.size = 0
      this.addForm.partName = ''

      this.dialogFormVisible2 = true
    },
    // 删除订单
    deleteInformation(row) {
      this.$confirm('此操作将在所有总成号中删除该零件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['零件编号', row.零件编号]
        var Data = this.CreateData('12', '北汽福田_BOM_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '零件删除成功',
              type: 'success'
            })
            this.searchOrder()
          } else {
            this.$message.error('零件删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 复制图号取消
    callOff1() {
      this.dialogFormVisible1 = false
    },
    // 修改框取消
    callOff2() {
      this.dialogFormVisible2 = false
    },
    // 复制图号提交
    submitAdd1() {
      var param = []
      param[0] = ['零件号', this.form1.EngineSource]
      param[1] = ['新零件号', this.form1.EngineTarget]
      param[2] = ['新福田号', this.form1.FoTonPartsCodeTarget]
      var Data = this.CreateData('11', '北汽福田BOM_复制', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data[0].result === 1) {
          this.$message({
            message: response.data[0].msg,
            type: 'success'
          })
          this.dialogFormVisible1 = false
          this.smallEngine = this.form1.EngineTarget
          this.getSmallEngine()
          this.getEndStation()
          this.searchOrder()
        } else {
          this.$message.error(response.data[0].msg)
        }
      })
    },
    // 修改提交
    submitUpdate() {
      var param = []
      param[0] = ['零件号', this.addForm.smallEngine]
      param[1] = ['工位号', this.addForm.opName]
      param[2] = ['零件名称', this.addForm.partName]
      param[3] = ['零件编号', this.addForm.partId]
      param[4] = ['数量', this.addForm.size]
      param[5] = ['id', this.addForm.id]
      var Data = this.CreateData('11', '北汽福田_BOM_修改', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data[0].result === 1) {
          this.$message({
            message: response.data[0].msg,
            type: 'success'
          })
          this.dialogFormVisible2 = false
          this.searchOrder()
        } else {
          this.$message.error(response.data[0].msg)
        }
      })
    },
    // 新增提交
    submitAdd() {
      var param = []
      param[0] = ['零件号', this.addForm.smallEngine]
      param[1] = ['工位号', this.addForm.opName]
      param[2] = ['零件名称', this.addForm.partName]
      param[3] = ['零件编号', this.addForm.partId]
      param[4] = ['数量', this.addForm.size]
      var Data = this.CreateData('11', '北汽福田_BOM_增加', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        if (response.data[0].result === 1) {
          this.$message({
            message: response.data[0].msg,
            type: 'success'
          })
          this.dialogFormVisible2 = false
          this.searchOrder()
        } else {
          this.$message.error(response.data[0].msg)
        }
      })
    },
    // 获取小机型
    getSmallEngine() {
      this.smallEngineList = []
      var param = []
      this.bigEngine ? param[0] = ['基本型号', this.bigEngine] : ''
      var Data = this.CreateData('11', '北汽福田_BOM_零件号查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.smallEngineList.push({
            label: response.data[i].零件号,
            value: response.data[i].零件号
          })
        }
      })
    },
    // 获取大机型
    getEndStation() {
      this.bigEngine = ''
      this.bigEngineList = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.bigEngineList.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机型号,
            labelName: response.data[i].发动机机型标志
          })
        }
      })
    },
    // 拷贝BOM数据 按钮
    copyBOM(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.dialogFormVisible1 = true
    },
    // 查询订单
    searchOrder() {
      this.tableData = []
      let stationNumberValue_check
      let bigEngine_check
      let smallEngine_check
      let partName_check
      let partId_check

      this.stationNumberValue ? stationNumberValue_check = 1 : (stationNumberValue_check = 0, this.stationNumberValue = '')
      this.bigEngine ? bigEngine_check = 1 : (bigEngine_check = 0, this.bigEngine = '')
      this.smallEngine ? smallEngine_check = 1 : (smallEngine_check = 0, this.smallEngine = '')
      this.partName ? partName_check = 1 : (partName_check = 0, this.partName = '')
      this.partId ? partId_check = 1 : (partId_check = 0, this.partId = '')

      var param = []
      param[0] = ['基本型号_ischeck', bigEngine_check]
      param[1] = ['基本型号', this.bigEngine]
      param[2] = ['工位号_ischeck', stationNumberValue_check]
      param[3] = ['工位号', this.stationNumberValue]
      param[4] = ['PageCurrent', this.pageCurrent]
      param[5] = ['PageSize', this.pageSize]
      param[6] = ['PageCount', '1111', 'int', '1']
      param[7] = ['ItemCount', '1111', 'int', '1']
      param[8] = ['零件号_ischeck', smallEngine_check]
      param[9] = ['零件号', this.smallEngine]
      param[10] = ['零件编号_ischeck', partId_check]
      param[11] = ['零件编号', this.partId]
      param[12] = ['零件名称_ischeck', partName_check]
      param[13] = ['零件名称', this.partName]
      var Data = this.CreateData('11', '北汽福田_BOM_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    exportExcel() {
      if (this.tableData.length !== 0) {
        let stationNumberValue_check
        let bigEngine_check
        let smallEngine_check
        let partName_check
        let partId_check

        // this.engineTypeValue ? engineTypeValue_check = 1 : (engineTypeValue_check = 0, this.engineTypeValue = '')
        this.stationNumberValue ? stationNumberValue_check = 1 : (stationNumberValue_check = 0, this.stationNumberValue = '')
        this.bigEngine ? bigEngine_check = 1 : (bigEngine_check = 0, this.bigEngine = '')
        this.smallEngine ? smallEngine_check = 1 : (smallEngine_check = 0, this.smallEngine = '')
        this.partName ? partName_check = 1 : (partName_check = 0, this.partName = '')
        this.partId ? partId_check = 1 : (partId_check = 0, this.partId = '')
        // this.orderNumberValue ? orderNumberValue_check = 1 : (orderNumberValue_check = 0, this.orderNumberValue = '')
        var param = []
        param[0] = ['基本型号_ischeck', bigEngine_check]
        param[1] = ['基本型号', this.bigEngine]
        param[2] = ['工位号_ischeck', stationNumberValue_check]
        param[3] = ['工位号', this.stationNumberValue]
        param[4] = ['PageCurrent', this.pageCurrent]
        param[5] = ['PageSize', this.pageSize]
        param[6] = ['PageCount', '1111', 'int', '1']
        param[7] = ['ItemCount', '1111', 'int', '1']
        param[8] = ['零件号_ischeck', smallEngine_check]
        param[9] = ['零件号', this.smallEngine]
        param[10] = ['零件编号_ischeck', partId_check]
        param[11] = ['零件编号', this.partId]
        param[12] = ['零件名称_ischeck', partName_check]
        param[13] = ['零件名称', this.partName]
        var Data = this.CreateData('2001', '北汽福田_BOM_查询', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchOrder()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchOrder()
    }
  }
}
</script>

<style scoped>
.topCard {
  margin: 5px;
}

.topDiv {
  margin-bottom: 10px;
}

.el-select {
  width: 200px
}

.el-input {
  width: 200px
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  position: absolute;
  right: 6px;
  top: 80px;
  width: 300px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

