<template>
  <div class="app-container">

    <el-card>
      <el-row>
        <span>项目名称:</span>
        <el-select v-model="project" size="small" filterable clearable placeholder="项目名称" @change="getMachine">
          <el-option
            v-for="item in projects"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>机床号:</span>
        <el-select v-model="Machine" size="small" clearable placeholder="机床号" @change="getGroup">
          <el-option
            v-for="item in Machines"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>组号:</span>
        <el-select v-model="Group" size="small" clearable placeholder="组号">
          <el-option
            v-for="item in Groups"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>零件号:</span>
        <el-input v-model="number" placeholder="零件号" clearable size="small" style="width: 200px;"/>
        <el-button type="success" class="el-icon-search" size="small" style="margin: 10px 0 0 10px" @click="pageCurrent=1;pageSize=10;total = 0;getTableData();">查询</el-button>
      </el-row>
    </el-card>

    <el-card>
      <el-table
        v-loading="listLoading1"
        :data="tableData1"
        class="table"
        border
        height="650">
        <el-table-column
          label="序号"
          align="center"
          width="50"
          type="index"/>
        <el-table-column
          align="center"
          label="零件图号"
          width="200px">
          <template slot-scope="scope">{{ 零件图号[scope.$index] }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="零件名称"
          width="120px">
          <template slot-scope="scope"> {{ 零件名称[scope.$index] }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="数量">
          <template slot-scope="scope">{{ 投产数量[scope.$index] }}</template>
        </el-table-column>
        <el-table-column label="零件加工计划进度(工艺名称,计划完成时间,实际完成时间,员工名称)" >
          <el-table-column label="[1]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][0]" @click="handleChange1(scope.$index, scope.row, 'form', 0)">
                <h4>{{ process[scope.$index][0] }}</h4><h4>{{ planDate[scope.$index][0] }} </h4><h4> {{ realDate[scope.$index][0] }}</h4><h4> {{ worker[scope.$index][0] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[2]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][1]" @click="handleChange1(scope.$index, scope.row, 'form', 1)">
                <h4>{{ process[scope.$index][1] }}</h4><h4>{{ planDate[scope.$index][1] }} </h4><h4> {{ realDate[scope.$index][1] }}</h4><h4> {{ worker[scope.$index][1] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[3]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][2]" @click="handleChange1(scope.$index, scope.row, 'form', 2)">
                <h4>{{ process[scope.$index][2] }}</h4><h4>{{ planDate[scope.$index][2] }} </h4><h4> {{ realDate[scope.$index][2] }}</h4><h4> {{ worker[scope.$index][2] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[4]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][3]" @click="handleChange1(scope.$index, scope.row, 'form', 3)">
                <h4>{{ process[scope.$index][3] }}</h4><h4>{{ planDate[scope.$index][3] }} </h4><h4> {{ realDate[scope.$index][3] }}</h4><h4> {{ worker[scope.$index][3] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[5]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][4]" @click="handleChange1(scope.$index, scope.row, 'form', 4)">
                <h4>{{ process[scope.$index][4] }}</h4><h4>{{ planDate[scope.$index][4] }} </h4><h4> {{ realDate[scope.$index][4] }}</h4><h4> {{ worker[scope.$index][4] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[6]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][5]" @click="handleChange1(scope.$index, scope.row, 'form', 5)">
                <h4>{{ process[scope.$index][5] }}</h4><h4>{{ planDate[scope.$index][5] }} </h4><h4> {{ realDate[scope.$index][5] }}</h4><h4> {{ worker[scope.$index][5] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[7]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][6]" @click="handleChange1(scope.$index, scope.row, 'form', 6)">
                <h4>{{ process[scope.$index][6] }}</h4><h4>{{ planDate[scope.$index][6] }} </h4><h4> {{ realDate[scope.$index][6] }}</h4><h4> {{ worker[scope.$index][6] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[8]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][7]" @click="handleChange1(scope.$index, scope.row, 'form', 7)">
                <h4>{{ process[scope.$index][7] }}</h4><h4>{{ planDate[scope.$index][7] }} </h4><h4> {{ realDate[scope.$index][7] }}</h4><h4> {{ worker[scope.$index][7] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[9]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][8]" @click="handleChange1(scope.$index, scope.row, 'form', 8)">
                <h4>{{ process[scope.$index][8] }}</h4><h4>{{ planDate[scope.$index][8] }} </h4><h4> {{ realDate[scope.$index][8] }}</h4><h4> {{ worker[scope.$index][8] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[10]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][9]" @click="handleChange1(scope.$index, scope.row, 'form', 9)">
                <h4>{{ process[scope.$index][9] }}</h4><h4>{{ planDate[scope.$index][9] }} </h4><h4> {{ realDate[scope.$index][9] }}</h4><h4> {{ worker[scope.$index][9] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[11]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][10]" @click="handleChange1(scope.$index, scope.row, 'form', 10)">
                <h4>{{ process[scope.$index][10] }}</h4><h4>{{ planDate[scope.$index][10] }} </h4><h4> {{ realDate[scope.$index][10] }}</h4><h4> {{ worker[scope.$index][10] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[12]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][11]" @click="handleChange1(scope.$index, scope.row, 'form', 11)">
                <h4>{{ process[scope.$index][11] }}</h4><h4>{{ planDate[scope.$index][11] }} </h4><h4> {{ realDate[scope.$index][11] }}</h4><h4> {{ worker[scope.$index][11] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[13]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][12]" @click="handleChange1(scope.$index, scope.row, 'form', 12)">
                <h4>{{ process[scope.$index][12] }}</h4><h4>{{ planDate[scope.$index][12] }} </h4><h4> {{ realDate[scope.$index][12] }}</h4><h4> {{ worker[scope.$index][12] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[14]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][13]" @click="handleChange1(scope.$index, scope.row, 'form', 13)">
                <h4>{{ process[scope.$index][13] }}</h4><h4>{{ planDate[scope.$index][13] }} </h4><h4> {{ realDate[scope.$index][13] }}</h4><h4> {{ worker[scope.$index][13] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[15]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][14]" @click="handleChange1(scope.$index, scope.row, 'form', 14)">
                <h4>{{ process[scope.$index][14] }}</h4><h4>{{ planDate[scope.$index][14] }} </h4><h4> {{ realDate[scope.$index][14] }}</h4><h4> {{ worker[scope.$index][14] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[16]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][15]" @click="handleChange1(scope.$index, scope.row, 'form', 15)">
                <h4>{{ process[scope.$index][15] }}</h4><h4>{{ planDate[scope.$index][15] }} </h4><h4> {{ realDate[scope.$index][15] }}</h4><h4> {{ worker[scope.$index][15] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[17]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][16]" @click="handleChange1(scope.$index, scope.row, 'form', 16)">
                <h4>{{ process[scope.$index][16] }}</h4><h4>{{ planDate[scope.$index][16] }} </h4><h4> {{ realDate[scope.$index][16] }}</h4><h4> {{ worker[scope.$index][16] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[18]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][17]" @click="handleChange1(scope.$index, scope.row, 'form', 17)">
                <h4>{{ process[scope.$index][17] }}</h4><h4>{{ planDate[scope.$index][17] }} </h4><h4> {{ realDate[scope.$index][17] }}</h4><h4> {{ worker[scope.$index][17] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[19]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][18]" @click="handleChange1(scope.$index, scope.row, 'form', 18)">
                <h4>{{ process[scope.$index][18] }}</h4><h4>{{ planDate[scope.$index][18] }} </h4><h4> {{ realDate[scope.$index][18] }}</h4><h4> {{ worker[scope.$index][18] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[20]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][19]" @click="handleChange1(scope.$index, scope.row, 'form', 19)">
                <h4>{{ process[scope.$index][19] }}</h4><h4>{{ planDate[scope.$index][19] }} </h4><h4> {{ realDate[scope.$index][19] }}</h4><h4> {{ worker[scope.$index][19] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[21]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][20]" @click="handleChange1(scope.$index, scope.row, 'form', 20)">
                <h4>{{ process[scope.$index][20] }}</h4><h4>{{ planDate[scope.$index][20] }} </h4><h4> {{ realDate[scope.$index][20] }}</h4><h4> {{ worker[scope.$index][20] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[22]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][21]" @click="handleChange1(scope.$index, scope.row, 'form', 21)">
                <h4>{{ process[scope.$index][21] }}</h4><h4>{{ planDate[scope.$index][21] }} </h4><h4> {{ realDate[scope.$index][21] }}</h4><h4> {{ worker[scope.$index][21] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[23]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][22]" @click="handleChange1(scope.$index, scope.row, 'form', 22)">
                <h4>{{ process[scope.$index][22] }}</h4><h4>{{ planDate[scope.$index][22] }} </h4><h4> {{ realDate[scope.$index][22] }}</h4><h4> {{ worker[scope.$index][22] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[24]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][23]" @click="handleChange1(scope.$index, scope.row, 'form', 23)">
                <h4>{{ process[scope.$index][23] }}</h4><h4>{{ planDate[scope.$index][23] }} </h4><h4> {{ realDate[scope.$index][23] }}</h4><h4> {{ worker[scope.$index][23] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[25]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][24]" @click="handleChange1(scope.$index, scope.row, 'form', 24)">
                <h4>{{ process[scope.$index][24] }}</h4><h4>{{ planDate[scope.$index][24] }} </h4><h4> {{ realDate[scope.$index][24] }}</h4><h4> {{ worker[scope.$index][24] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[26]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][25]" @click="handleChange1(scope.$index, scope.row, 'form', 25)">
                <h4>{{ process[scope.$index][25] }}</h4><h4>{{ planDate[scope.$index][25] }} </h4><h4> {{ realDate[scope.$index][25] }}</h4><h4> {{ worker[scope.$index][25] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[27]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][26]" @click="handleChange1(scope.$index, scope.row, 'form', 26)">
                <h4>{{ process[scope.$index][26] }}</h4><h4>{{ planDate[scope.$index][26] }} </h4><h4> {{ realDate[scope.$index][26] }}</h4><h4> {{ worker[scope.$index][26] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[28]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][27]" @click="handleChange1(scope.$index, scope.row, 'form', 27)">
                <h4>{{ process[scope.$index][27] }}</h4><h4>{{ planDate[scope.$index][27] }} </h4><h4> {{ realDate[scope.$index][27] }}</h4><h4> {{ worker[scope.$index][27] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[29]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][28]" @click="handleChange1(scope.$index, scope.row, 'form', 28)">
                <h4>{{ process[scope.$index][28] }}</h4><h4>{{ planDate[scope.$index][28] }} </h4><h4> {{ realDate[scope.$index][28] }}</h4><h4> {{ worker[scope.$index][28] }}</h4>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="[30]" align="center" width="120px">
            <template slot-scope="scope">
              <div :class="colorCode[scope.$index][29]" @click="handleChange1(scope.$index, scope.row, 'form', 29)">
                <h4>{{ process[scope.$index][29] }}</h4><h4>{{ planDate[scope.$index][29] }} </h4><h4> {{ realDate[scope.$index][29] }}</h4><h4> {{ worker[scope.$index][29] }}</h4>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 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 :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="90px" class="demo-ruleForm">
        <el-row width="200px">
          <el-form-item label="操作员" prop="人员" >
            <el-input v-model="form.人员" placeholder="操作员" readonly size="small" style="width: 80%" @focus="dialogTableVisible" />
          </el-form-item>
          <el-form-item label="考勤编号" prop="考勤编号" >
            <el-input v-model="form.考勤编号" placeholder="考勤编号" disabled size="small" style="width: 80%" />
          </el-form-item>
          <el-form-item label="完成日期" prop="完成时间">
            <el-date-picker
              v-model="form.完成时间"
              style="width: 80%"
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="选择日期"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff('form')">取消</el-button>
        <el-button type="primary" @click="submit('form')" >确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible1" title="人员信息" center width="750px">
      <div style="height: 500px">
        <div style="float: left;margin-top: 10px;margin-left: 20px;overflow-y: scroll;height: 400px">
          <el-tree
            :data="data2"
            node-key="id"
            style="width: 150px;float: left"
            height="400"
            accordion
            @node-click="handleNodeClick"
          />
        </div>
        <el-table :data="List1" highlight-current-row height="400" style="width: 400px;float: left;margin-left: 30px" @row-click="handleCurrentChange2">
          <el-table-column label="考勤编号" align="center" >
            <template slot-scope="scope">
              {{ scope.row.考勤编号 }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" >
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              {{ scope.row.性别 }}
            </template>
          </el-table-column>
          <el-table-column label="工作岗位" align="center">
            <template slot-scope="scope">
              {{ scope.row.岗位名称 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button style="margin-left: 260px" @click="dialogFormVisible1 = false">取消</el-button>
      <el-button type="primary" style="margin-top: 20px" @click="getName">确认</el-button>
    </el-dialog>

  </div>
</template>
<script>
import { handlechange3, getTable8, getTree, fn, dialogtablevisible, getNames, getMachines, getGroups, getTable, getTable2, handlechange, handlechange2 } from '@/api/ManufacturingCenter/ProcessingStatusEdit'

export default {
  data() {
    return {
      midd: 0,
      ssks: '',
      cjscgy: '',
      List1: [],
      data2: [],
      dialogFormVisible1: false,
      Name: '',
      person: '',
      title: '',
      Num: '',
      form: {
        人员: '',
        考勤编号: '',
        完成时间: ''
      },
      rules: {
        人员: [{ required: true, message: '请选择操作员', trigger: 'change' }],
        考勤编号: [{ required: true, message: '考勤编号', trigger: 'change' }],
        完成时间: [{ required: true, message: '请选择实际完成时间', trigger: 'change' }]
      },
      Number1: '',
      dialogFormVisible: false,
      count1: 0,
      liushuihao: '',
      radioList: '0',
      length: 0,
      listLoading1: false,
      tableData1: [],
      project: '',
      projects: [],
      Machine: '',
      Machines: [],
      Group: '',
      Groups: [],
      Speed: '',
      Speeds: [{
        value: 5,
        label: '全部'
      }, {
        value: 1,
        label: '拖期'
      }, {
        value: 2,
        label: '即将拖期'
      }, {
        value: 3,
        label: '如期'
      }, {
        value: 4,
        label: '工序外协'
      }],
      number: '',
      checkbox_project: false,
      checkbox_Machine: false,
      checkbox_Group: false,
      checkbox_number: false,
      零件图号: [],
      零件名称: [],
      投产数量: [],
      result: [],
      kaoqinbianhao: [[]],
      gongxuliushuihao: [[]],
      process: [[]],
      planDate: [[]],
      worker: [[]],
      colorCode: [[]],
      realDate: [[]],
      total: 0, // 总条数
      pageSize: 10,
      pageCurrent: 1
    }
  },
  created() {
    this.fetchData()
    this.fetchData3()
  },
  methods: {
    handleCurrentChange2(row) { // 获取当前行人员信息
      this.ssks = row.节点名称
      this.Number1 = row.考勤编号
      this.Name = row.姓名
    },
    getName() { // 提交人员
      this.dialogFormVisible1 = false
      this.form.人员 = this.Name
      this.form.考勤编号 = this.Number1
    },
    handleNodeClick(data) { // 树节点点击
      this.ssks = data.label
      getTable8(data.id).then(response => {
        this.List1 = response.data
      })
    },
    fetchData3() {
      getTree().then(response => { // 获取人员信息树
        const data = response.data
        this.data2 = fn(data, 0)
      })
    },
    dialogTableVisible() {
      this.dialogFormVisible1 = true
      dialogtablevisible()
    },
    // 查询供应商名称
    fetchData() {
      this.projects = []
      getNames().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.projects.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
    },
    getMachine() {
      this.Machine = ''
      this.Machines = []
      this.Group = ''
      this.Groups = []
      if (this.project !== '') {
        getMachines(this.project).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.Machines.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号
            })
          }
        })
      }
    },
    getGroup() {
      this.Group = ''
      this.Groups = []
      getGroups(this.Machine).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Groups.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    // 按条件查询
    // CASE  WHEN datediff(day , 计划日期 , 完成日期) <= 2 THEN 'lightgreen'
    // WHEN datediff(day , 计划日期 , 完成日期) > 2 THEN 'red'
    // WHEN datediff(day , 计划日期 , isnull(完成日期 , getdate())) > 1 THEN 'yellow' END
    getTableData() {
      this.listLoading1 = true
      if (this.project === '') {
        this.checkbox_project = false
      } else {
        this.checkbox_project = true
      }
      if (this.Machine === '') {
        this.checkbox_Machine = false
      } else {
        this.checkbox_Machine = true
      }
      if (this.Group === '') {
        this.checkbox_Group = false
      } else {
        this.checkbox_Group = true
      }
      if (this.number === '') {
        this.checkbox_number = false
      } else {
        this.checkbox_number = true
      }
      this.tableData1 = []
      this.零件图号 = []
      this.零件名称 = []
      this.投产数量 = []
      this.result = []
      this.kaoqinbianhao = [[]]
      this.gongxuliushuihao = [[]]
      this.process = [[]]
      this.planDate = [[]]
      this.worker = [[]]
      this.colorCode = [[]]
      this.realDate = [[]]
      this.length = 0
      getTable(this.checkbox_project, this.project, this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.checkbox_number, this.number, this.pageCurrent, this.pageSize).then(response => {
        if (response.data.rows.length === 0) {
          this.listLoading1 = false
        } else {
          this.length = parseInt(response.data.total)
          for (let i = 0; i < response.data.rows.length; i++) { // 声明二维数组
            this.零件图号.push(response.data.rows[i].零件图号)
            this.零件名称.push(response.data.rows[i].零件名称)
            this.投产数量.push(response.data.rows[i].投产数量)
            this.kaoqinbianhao[i] = []
            this.gongxuliushuihao[i] = []
            this.process[i] = []
            this.planDate[i] = []
            this.worker[i] = []
            this.colorCode[i] = []
            this.realDate[i] = []
            this.result.push(response.data.rows[i])
          }
          if (this.零件图号.length !== 0) {
            for (let i = 0; i < this.零件图号.length; i++) {
              getTable2(this.checkbox_project, this.project, this.checkbox_Machine, this.Machine, this.checkbox_Group, this.Group, this.零件图号[i]).then(response => {
                this.liushuihao = response.data[0].工艺计划流水号
                for (let k = 0; k < response.data.length; k++) {
                  if (response.data[k].工艺计划流水号 === this.liushuihao) {
                    this.kaoqinbianhao[i][k] = response.data[k].工作者考勤编号
                    this.gongxuliushuihao[i][k] = response.data[k].工序流水号
                    this.process[i][k] = response.data[k].工艺名称简称
                    this.planDate[i][k] = response.data[k].计划日期_短
                    this.worker[i][k] = response.data[k].员工姓名
                    this.realDate[i][k] = response.data[k].完成日期_短
                    if (response.data[k].工序状态 === 5) { // 灰色:停产，不允许修改，重新投产
                      this.colorCode[i][k] = 'grey'
                    } else {
                      this.colorCode[i][k] = response.data[k].进度颜色
                    }
                    if (response.data[k].工序间是否外协 === 2) {
                      this.colorCode[i][k] = 'lightblue'
                    }
                  }
                }
              }).then(() => {
                this.tableData1.push(this.result[i])
                this.listLoading1 = false
                this.total = this.length
              })
            }
          } else {
            this.tableData1 = []
            this.listLoading1 = false
            this.total = 0
          }
        }
      })
    },
    // 编辑打开
    handleChange1(index, row, formName, a) {
      if (this.process[index][a] !== '' && this.process[index][a] !== null && this.process[index][a] !== undefined && this.colorCode[index][a] !== 'grey') {
        this.count1 = this.count1 + 1
        if (this.count1 !== 1) {
          this.$refs[formName].resetFields()
        }
        this.midd = 0
        this.form.完成时间 = ''
        this.form.人员 = ''
        this.form.考勤编号 = ''
        if (this.worker[index][a] !== '超级管理员') {
          this.midd = 1
          this.form.人员 = this.worker[index][a]
        }
        if (this.kaoqinbianhao[index][a] !== 0) {
          this.form.考勤编号 = this.kaoqinbianhao[index][a]
        }
        this.title = this.process[index][a]
        this.Num = this.gongxuliushuihao[index][a]
        this.dialogFormVisible = true
      }
    },
    // 编辑确定
    handleChange() {
      if (this.midd === 0) {
        handlechange2(this.Num, this.form.考勤编号).then(response => {
          if (response.data[0].result === '1') {
            handlechange(this.Num, this.form.完成时间).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('信息编辑成功')
              } else {
                this.$message.error('信息编辑失败')
              }
            })
          } else {
            this.$message.error('信息编辑失败')
          }
        })
        this.getTableData()
      } else {
        handlechange3(this.Num, this.form.考勤编号).then(response => {
          if (response.data[0].result === '1') {
            handlechange(this.Num, this.form.完成时间).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success('信息编辑成功')
                this.getTableData()
              } else {
                this.$message.error('信息编辑失败')
              }
            })
          } else {
            this.$message.error('信息编辑失败')
          }
        })
      }
      this.dialogFormVisible = false
    },
    // 提交添加或者修改
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleChange()
        } else {
          return false
        }
      })
    },
    // 重置表单
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getTableData()
    }
  }
}
</script>

<style>
  .white{
    background-color: ghostwhite;
    border: 1px solid #1f2d3d;
  }
  .grey{
    background-color: grey;
    border: 1px solid #1f2d3d;
  }
  .red{
    background-color: orangered;
    border: 1px solid #1f2d3d;
  }
  .lightblue{
    background-color: deepskyblue;
    border: 1px solid #1f2d3d;
  }
  .yellow{
    background-color: yellow;
    border: 1px solid #1f2d3d;
  }
  .blank{
    background-color: transparent;
    border: 0px solid white;
  }
  .lightgreen{
    background-color: lightgreen;
    border: 1px solid #1f2d3d;
  }
</style>
<style scoped>
  .el-form-item{
    margin-bottom: 22px;
  }
  .el-card{
    margin-bottom: 15px;
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .table h4{
    border: 1px solid transparent;
    margin: 0;
    font-weight: normal;
    width: 100px;
    height: 24px;
  }
</style>
