<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <el-row>
        <div style="margin-top: 7px; margin-bottom: 7px">
          <el-select :disabled="checked" v-model="orderNumberTypeValue" style="width:170px;margin-left: 10px" placeholder="订单号" size="small" filterable clearable @change="getproductName()">
            <el-option
              v-for="item in orderNumberType"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-select v-show="!checked" v-model="productNameValue" style="width:200px;margin-left: 10px" placeholder="产品名称" size="small" filterable clearable @change="getpartName()">
            <el-option
              v-for="item in productName"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-select v-show="!checked" v-model="partNameValue" style="width:200px;margin-left: 10px" placeholder="零件名称" size="small" filterable clearable @change="changePart();searchTable()">
            <el-option
              v-for="item in partName"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <b style="float: left">{{ item.label }}</b>
              <b style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;{{ item.name }}</b>
            </el-option>
          </el-select>
          <el-cascader v-show="checked" ref="cascader" :options="product1" :show-all-levels="false" placeholder="产品名称" style="margin-left: 10px" size="small" @change="getData"/>
          <el-select v-show="checked" v-model="partNameValue1" style="width:200px;margin-left: 10px" placeholder="零件名称" size="small" filterable clearable @change="changePart1();searchTable1();">
            <el-option
              v-for="item in partName1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <b style="float: left">{{ item.label }}</b>
              <b style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;{{ item.name }}</b>
            </el-option>
          </el-select>
          <el-button v-show="!checked" icon="el-icon-search" type="primary" plain size="small" style="margin-left: 10px" @click="searchTable()">查询</el-button>
          <el-button v-show="checked" icon="el-icon-search" type="primary" plain size="small" style="margin-left: 10px" @click="searchTable1()">查询</el-button>
          <el-button :disabled="tableData5.length === 0 || state === 1" icon="el-icon-document-copy" type="warning" plain size="small" style="margin-left: 10px" @click="copyData()">拷贝</el-button>
          <el-button :disabled="tableData5.length === 0 " icon="el-icon-search" type="primary" plain size="small" style="margin-left: 50px" @click="getNum()">图纸</el-button>
          <el-button v-show="!checked" type="success" plain icon="el-icon-check" size="small" style="margin-left: 10px" @click="preservation()">保存</el-button>
          <el-button v-show="checked" type="success" plain icon="el-icon-check" size="small" style="margin-left: 10px" @click="preservation1()">保存</el-button>
          <el-checkbox v-model="checked" style="margin-left: 10px" @change="checkChange">零件</el-checkbox>
          <el-button v-show="checked" :disabled="tableData5.length !== 0" type="warning" plain icon="el-icon-plus" size="small" style="margin-left: 10px" @click="insertAll()">插入</el-button>
          <!--          <el-button type="success" plain icon="el-icon-download" size="small" style="margin-left: 760px" @click="exportExcel()">导出</el-button>-->
        </div>
        <el-col style="margin-left: 7px;width: 158px">
          <!--        <el-card>-->
          <div style="margin-top: 10px">
            <el-input
              v-model="processSearchName"
              placeholder="请输入工序名称"
              size="small"
              clearable
              style="width: 158px; margin-bottom: 10px"
              @input="filterProcess"
            />
            <el-table :data="filteredTableData4" :header-cell-style="{background: '#2283D4',color: 'white'}" highlight-current-row border size="mini" style="width: 158px;margin-top: 10px" height="510" @row-click="editProcedure">
              <el-table-column :width="setColumnWidth('日期时间')" label="工序" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.工艺名称 }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-col style="width: 1035px">
          <div style="margin-top: 10px">
            <el-table v-loading="loading" v-if="!checked" :data="tableData5" :header-cell-style="{background: '#19466E',color: 'white'}" highlight-current-row border size="mini" style="width: 1031px;margin-top: 10px" height="550">
              <el-table-column :width="setColumnWidth('序号')" label="序号" align="center" prop="工序" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.工序顺序 }}
                </template>
              </el-table-column>
              <el-table-column :width="setColumnWidth('工序名称')" label="工序名称" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.工艺名称 }}
                  <!--                  <el-input v-model="scope.row.工序名称" size="mini" style="margin: 0;width: 100%"/>-->
                </template>
              </el-table-column>
              <el-table-column width="330px" label="工序说明" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" v-model="scope.row.工艺要求" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column width="90px" label="定额工时" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" v-model="scope.row.定额工时" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column width="90px" label="准结工时" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" v-model="scope.row.准结工时" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column label="是否变更" align="center" width="100px">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.是否变更" size="mini" style="width: 80px" @change="changeAllow(scope.row)">
                    <el-option label="允许" :value="1"/>
                    <el-option label="不许" :value="0"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                  <el-tooltip :open-delay="700" effect="dark" content="下移工序" placement="top">
                    <el-button :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" type="text" icon="el-icon-bottom" size="mini" style="margin-right: 5px" @click="downOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="上移工序" placement="top">
                    <el-button :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" type="text" icon="el-icon-top" size="mini" style="margin-right: 5px" @click="upOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="插入工序" placement="top">
                    <el-button :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1" type="text" icon="el-icon-plus" size="mini" style="margin-right: 5px" @click="insertOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="删除工序" placement="top">
                    <el-button :disabled="scope.row.加工状态 === 1 || Number(scope.row.是否选进外协单中) === 1 || Number(scope.row.已外协数) > 0" type="text" icon="el-icon-minus" size="mini" style="margin-right: 5px" @click="deleteOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="上传工艺指导" placement="top">
                    <el-button :disabled="!scope.row.工艺名称" type="text" icon="el-icon-upload2" size="mini" style="margin-right: 5px" @click="ProcessTool(scope.row)"/>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-loading="loading" v-if="checked" :data="tableData5" :header-cell-style="{background: '#19466E',color: 'white'}" highlight-current-row border size="mini" style="width: 1031px;margin-top: 10px" height="550">
              <el-table-column :width="setColumnWidth('序号')" label="序号" align="center" prop="工序" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.工序顺序 }}
                </template>
              </el-table-column>
              <el-table-column :width="setColumnWidth('工序名称')" label="工序名称" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.工艺名称 }}
                  <!--                  <el-input v-model="scope.row.工序名称" size="mini" style="margin: 0;width: 100%"/>-->
                </template>
              </el-table-column>
              <el-table-column width="330px" label="工序说明" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.工艺要求" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column width="130px" label="定额工时" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.定额工时" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column width="130px" label="准结工时" align="center" prop="" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.准结工时" size="mini" style="margin: 0;width: 100%" @change="updateProcess(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column label="是否变更" align="center" width="100px">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.是否变更" size="mini" style="width: 80px" @change="changeAllow(scope.row)">
                    <el-option label="允许" :value="1"/>
                    <el-option label="不许" :value="0"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="230px">
                <template slot-scope="scope">
                  <el-tooltip :open-delay="700" effect="dark" content="下移工序" placement="top">
                    <el-button type="text" icon="el-icon-bottom" size="mini" style="margin-right: 5px" @click="downOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="上移工序" placement="top">
                    <el-button type="text" icon="el-icon-top" size="mini" style="margin-right: 5px" @click="upOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="插入工序" placement="top">
                    <el-button type="text" icon="el-icon-plus" size="mini" style="margin-right: 5px" @click="insertOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="删除工序" placement="top">
                    <el-button type="text" icon="el-icon-minus" size="mini" style="margin-right: 5px" @click="deleteOne(scope.row)"/>
                  </el-tooltip>
                  <el-tooltip :open-delay="700" effect="dark" content="上传工艺指导" placement="top">
                    <el-button :disabled="!scope.row.工艺名称" type="text" icon="el-icon-upload2" size="mini" style="margin-right: 5px" @click="ProcessTool(scope.row)"/>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" width="350px">
      <div v-for="(file, key) in hadFile" :key="key">
        <div class="wrapper">
          <div class="content">
            <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
            <div v-else class="icon"><svg-icon icon-class="file" /></div>
            <a id="appUrl" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogVisible1"
      :center="dialogName"
      title="工艺指导"
      width="20%">
      <div v-for="(file, key) in hadFile1" :key="key">
        <div class="wrapper">
          <div class="content">
            <div class="action">
              <a class="delete" @click="deleteFileData(file.id)">删除</a>
            </div>
            <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
            <div v-else class="icon"><svg-icon icon-class="file" /></div>
            <a id="appUrl1" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
          </div>
        </div>
      </div>
      <div style="margin-left: 37%">
        <el-upload
          :action="action"
          :on-success="uploadSuccess"
          :on-error="uploadFailure"
          :show-file-list="showFileList"
          :file-list="fileList"
          class="upload-demo"
          multiple>
          <el-button size="small" type="shengcheng" @click="batchImportOfDrawings">点击上传</el-button>
        </el-upload>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="工艺拷贝" center style="min-height: 300px;" width="880px">
      <el-row style="margin-bottom: 10px">
        <el-input v-model="partTool" clearable placeholder="零件图号或零件名称筛选" size="small" style="width:260px">
          <el-button slot="append" icon="el-icon-right" @click="partNumValue='';searchPartsGroup();"/>
        </el-input>
        <el-select v-model="partNameValue2" style="width:200px;margin-left: 10px" placeholder="零件名称" size="small" filterable clearable @change="searchTable2()">
          <el-option
            v-for="item in partName2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <b style="float: left">{{ item.label }}</b>
            <b style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;{{ item.name }}</b>
          </el-option>
        </el-select>
      </el-row>
      <el-table :data="tableData6" :header-cell-style="{background: '#383E4B',color: 'white'}" size="mini" style="width: 100%;margin-top:15px" height="500px" border highlight-current-row>
        <el-table-column :width="setColumnWidth('序号')" label="序号" align="center" prop="工序" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工序顺序 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('工序名称')" label="工序名称" align="center" prop="" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工艺名称 }}
            <!--                  <el-input v-model="scope.row.工序名称" size="mini" style="margin: 0;width: 100%"/>-->
          </template>
        </el-table-column>
        <el-table-column label="工序说明" align="center" prop="" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工艺要求 }}
          </template>
        </el-table-column>
        <el-table-column width="130px" label="定额工时" align="center" prop="" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.定额工时 }}
          </template>
        </el-table-column>
        <el-table-column width="130px" label="准结工时" align="center" prop="" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.准结工时 }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitCopy">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { MESUploadFileProcess, MESDownloadFile } from '@/utils/request'
import request from '@/utils/request'
export default {
  data() {
    return {
      partTool: '',
      state: 1,
      orderNumberTypeValue: '', // 订单号
      orderNumberType: [], // 订单号数组
      productNameValue: '', // 产品部件名称
      productName: [], // 产品部件名称数组
      partNameValue: '', // 零件名称
      partNameLabel: '', // 零件名称
      partName: [], // 零件名称数组
      partNameValue1: '', // 零件名称
      partNameLabel1: '', // 零件名称
      productValue1: '',
      partName1: [], // 零件名称数组
      partName2: [], // 零件名称数组
      partNameValue2: '', // 零件名称
      partNameLabel2: '',
      dateRange: '', // 提交日期
      dialogVisible: false,
      dialogVisible1: false,
      dialogFormVisible: false,
      disabled: true,
      checked: false,
      hadFile: [],
      fileList: [],
      hadFile1: [],
      processValue: '',
      dialogName: true,
      showFileList: false,
      action: '',
      product1: [], // 产品名称数组
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData4: [], // 工艺列表
      filteredTableData4: [], // 过滤后的工艺列表
      processSearchName: '', // 工序搜索框内容
      tableData5: [], // 工艺内容
      tableData6: [],
      pageCurrent: 1, // 分页当前页
      pageSize: 100, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  watch: {
    partNameValue(val) {
      if (val) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  },
  watch: {
    '$route': {
      handler(route) {
        if (this.$route.query.订单流水号) {
          this.contractQueryJump(this.$route.query.订单流水号, this.$route.query.工艺计划流水号, this.$route.query.零件名称)
        }
      },
      immediate: true
    }
  },
  created() {
    this.searchTable()
    this.getOrderNumberType()
    this.getpartName()
    this.getProcess()
    this.getTreeData()
  },

  methods: {
    async contractQueryJump(订单编号, 工艺计划流水号, 零件名称) {
      console.log(订单编号, 工艺计划流水号, 零件名称)
      // this.partName.push({
      //   label:零件名称,
      //   value:Number(工艺计划流水号)
      // })

      this.orderNumberTypeValue = Number(订单编号)
      this.getproductName()
      // this.partNameValue = Number(工艺计划流水号)
      // this.searchTable()
    },
    searchPartsGroup() {
      this.tableData5 = []
      this.partName2 = []
      this.partNameValue2 = ''
      this.partNameLabel2 = ''
      let check
      this.partTool ? check = 1 : check = 0
      var param = []
      param[0] = ['零件图号_check', check]
      param[1] = ['零件图号', this.partTool]
      var Data = this.CreateData('11', '精工车间_制定工艺_零件名称_查询_工艺拷贝', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.partName2.push({
            label: response.data[i].零件名称,
            name: response.data[i].零件图号,
            value: response.data[i].零件图号
          })
        }
      })
    },
    searchTable2() {
      if (this.partNameValue2) {
        var param = []
        param[0] = ['零件图号', this.partNameValue2]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param)
        this.ExecDatabase(Data).then(response => {
          this.tableData6 = response.data
        })
      } else {
        this.tableData6 = []
      }
    },
    submitCopy() {
      if (this.tableData6.length === 0) {
        this.$message.warning('请先选择零件')
        return
      }
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['零件图号', this.partNameValue2]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('12', '精工车间_工艺拷贝', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('拷贝成功')
            this.searchTable()
            this.dialogFormVisible = false
          } else {
            this.$message.error('拷贝失败')
          }
        })
      } else {
        var param1 = []
        param1[0] = ['原零件图号', this.partNameLabel1]
        param1[1] = ['零件图号', this.partNameValue2]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('12', '精工车间_工艺拷贝_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('拷贝成功')
            this.searchTable1()
            this.dialogFormVisible = false
          } else {
            this.$message.error('拷贝失败')
          }
        })
      }
    },
    getTreeData() {
      var param = []
      param[0] = ['子节点', 0]
      var Data = this.CreateData('11', '产品关系_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        const data = response.data
        this.product1 = this.tree(data, 0)
      })
    },
    tree(data, pid) {
      const result = []
      let temp
      for (let i = 0; i < data.length; i++) {
        if (data[i].父节点 === pid) {
          const obj = { label: data[i].节点名称, value: data[i].子节点 }
          temp = this.tree(data, data[i].子节点)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    },
    getData(val) {
      this.tableData5 = []
      this.partName1 = []
      this.partNameValue1 = ''
      this.productValue1 = val[val.length - 1]
      if (this.productValue1) {
        var param = []
        param[0] = ['产品流水号', this.productValue1]
        var Data = this.CreateData('11', '精工车间_制定工艺_零件名称_查询_工艺库', param)
        this.ExecDatabase(Data).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.partName1.push({
              label: response.data[i].零件名称,
              name: response.data[i].图号或型号,
              value: response.data[i].图号或型号
            })
          }
        })
      }
    },
    checkChange() {
      if (this.checked) {
        this.searchTable1()
      } else {
        this.searchTable()
      }
    },
    insertAll() {
      if (this.partNameLabel1 && this.tableData5.length === 0) {
        var param = []
        param[0] = ['零件图号', this.partNameLabel1]
        var Data = this.CreateData('12', '车间生产管理工艺_零件工序_插入_工艺库', param)
        this.ExecDatabase(Data).then(response => {
          this.searchTable1()
        })
      }
    },
    changePart() {
      this.partNameLabel = ''
      for (let i = 0; i < this.partName.length; i++) {
        if (this.partName[i].value === this.partNameValue) {
          this.partNameLabel = this.partName[i].name
        }
      }
    },
    changePart1() {
      this.partNameLabel1 = ''
      for (let i = 0; i < this.partName1.length; i++) {
        if (this.partName1[i].value === this.partNameValue1) {
          this.partNameLabel1 = this.partName1[i].name
        }
      }
    },
    changePart2() {
      console.log(this.partNameValue1, this.partNameLabel1)
      for (let i = 0; i < this.partName2.length; i++) {
        if (this.partName2[i].value === this.partNameValue2) {
          this.partNameLabel2 = this.partName2[i].name
        }
      }
    },
    copyData() {
      this.dialogFormVisible = true
    },
    // 查看零件图
    getNum() {
      this.dialogVisible = true
      if (this.checked) {
        this.getFileList(this.partNameLabel1)
      } else {
        this.getFileList(this.partNameLabel)
      }
    },
    async getFileList(value) {
      this.hadFile = []
      if (value) {
        await request({
          url: '',
          method: 'post',
          data: {
            type: '3',
            name: `select * from 机加工MES_零件图PDF表 where 是否启用 = 1 and name = '${value}'`
          }
        }).then(data => {
          this.suffix = data.data
          if (data.data.length > 0) {
            const server = `${MESDownloadFile}`.split('/')
            data.data.map(item => {
              this.hadFile.push({
                url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
                name: `${item.name}.${item.suffix}`,
                suffix: item.suffix,
                id: item.uid
              })
            })
          }
        })
      }
    },
    ProcessTool(row) {
      this.processValue = row.零件图号 + '-' + row.工序顺序 + '-' + row.工艺名称
      this.hadFile1 = []
      var param = []
      param[0] = ['name', this.processValue]
      var Data = this.CreateData('11', '车间生产管理工艺_零件工序_指导图_查询数据', param)
      this.ExecDatabase(Data).then(res => {
        this.suffix = res.data
        if (res.data.length > 0) {
          const server = `${MESDownloadFile}`.split('/')
          res.data.map(item => {
            this.hadFile1.push({
              url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
              name: `${item.name}.${item.suffix}`,
              suffix: item.suffix,
              id: item.num
            })
          })
        }
      })
      this.dialogVisible1 = true
    },
    deleteFileData(id) {
      var param = []
      param[0] = ['num', id]
      var Data = this.CreateData('12', '车间生产管理工艺_零件工序_指导图_删除数据', param)
      this.ExecDatabase(Data).then(res => {
        if (res.data[0].result === '1') {
          this.$message.success('删除成功')
          this.hadFile1 = []
          var param = []
          param[0] = ['name', this.processValue]
          var Data = this.CreateData('11', '车间生产管理工艺_零件工序_指导图_查询数据', param)
          this.ExecDatabase(Data).then(res => {
            this.suffix = res.data
            if (res.data.length > 0) {
              const server = `${MESDownloadFile}`.split('/')
              res.data.map(item => {
                this.hadFile1.push({
                  url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
                  name: `${item.name}.${item.suffix}`,
                  suffix: item.suffix,
                  id: item.num
                })
              })
            }
          })
        } else {
          this.$message.success('删除失败')
        }
      })
    },
    batchImportOfDrawings() {
      this.action = `${MESUploadFileProcess}?&num=1&tableName=车间生产管理工艺_零件工序_指导图&type=1&UploaderName=${this.id}`
    },
    uploadSuccess(res, file, fileList) {
      if (res[0].result === '1') {
        const index = fileList.indexOf(file)
        fileList.splice(index, 1)
      } else {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      }
      if (fileList.length === 0) {
        this.hadFile1 = []
        var param = []
        param[0] = ['name', this.processValue]
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_指导图_查询数据', param)
        this.ExecDatabase(Data).then(res => {
          this.suffix = res.data
          if (res.data.length > 0) {
            const server = `${MESDownloadFile}`.split('/')
            res.data.map(item => {
              this.hadFile1.push({
                url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
                name: `${item.name}.${item.suffix}`,
                suffix: item.suffix,
                id: item.num
              })
            })
          }
        })
        this.$message.success('文件上传成功')
      }
    },
    uploadFailure(res, file, fileList) {
      fileList.map(file => {
        this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
      })
    },
    getOrderNumberType() {
      var param = []
      var Data = this.CreateData('11', '精工车间_制定工艺_订单查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.orderNumberType.push({
            label: response.data[i].订单号,
            value: response.data[i].订单流水号
          })
        }

        console.log('流水哈', this.orderNumberTypeValue)
      })
    },
    getproductName() {
      this.productNameValue = ''
      this.productName = []
      this.partName = []
      this.partNameValue = ''
      this.tableData5 = []
      var param = []
      param[0] = ['订单流水号', this.orderNumberTypeValue]
      var Data = this.CreateData('11', '订单信息_产品信息_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.productName.push({
            label: response.data[i].产品名称,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    getpartName() {
      this.tableData5 = []
      this.partName = []
      this.partNameValue = ''
      if (this.productNameValue) {
        var param = []
        param[0] = ['组件流水号', this.productNameValue]
        var Data = this.CreateData('11', '精工车间_制定工艺_零件名称_查询', param)
        this.ExecDatabase(Data).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.partName.push({
              label: response.data[i].零件名称,
              name: response.data[i].零件图号,
              value: response.data[i].工艺计划流水号
            })
          }
        })
      }
    },
    getProcess() {
      var param = []
      // 参数数量与名称要与存储过程对应
      var Data = this.CreateData('11', '工艺名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData4 = response.data
        this.filteredTableData4 = response.data
      })
    },
    // 过滤工序
    filterProcess() {
      if (this.processSearchName) {
        this.filteredTableData4 = this.tableData4.filter(item => {
          return item.工艺名称.includes(this.processSearchName)
        })
      } else {
        this.filteredTableData4 = this.tableData4
      }
    },
    searchTable() {
      if (this.partNameValue) {
        this.loading = true
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param)
        this.ExecDatabase(Data).then(response => {
          this.tableData5 = response.data
          this.loading = false
          for (let i = 0; i < response.data.length; i++) {
            if (response.data[i].加工状态 === 1) {
              this.state = 1
              return
            } else {
              this.state = 0
            }
          }
        })
      } else {
        this.tableData5 = []
      }
    },
    searchTable1() {
      this.state = 0
      if (this.partNameLabel1) {
        this.loading = true
        var param = []
        param[0] = ['零件图号', this.partNameLabel1]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param)
        this.ExecDatabase(Data).then(response => {
          this.tableData5 = response.data
          this.loading = false
        })
      } else {
        this.tableData5 = []
      }
    },
    editProcedure(row) {
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['工艺编号', row.工艺编号]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_修改数据', param)
        this.ExecDatabase(Data).then(response => {
          var param1 = []
          param1[0] = ['工艺计划流水号', this.partNameValue]
          var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param1)
          this.ExecDatabase(Data1).then(response => {
            this.tableData5 = response.data
          })
        })
      } else {
        var param1 = []
        param1[0] = ['零件图号', this.partNameLabel1]
        param1[1] = ['工艺编号', row.工艺编号]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_修改数据_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          var param = []
          param[0] = ['零件图号', this.partNameLabel1]
          var Data = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param)
          this.ExecDatabase(Data).then(response => {
            this.tableData5 = response.data
          })
        })
      }
    },
    preservation() {
      var param = []
      param[0] = ['工艺计划流水号', this.partNameValue]
      param[1] = ['人员编号', this.id]
      // 参数数量与名称要与存储过程对应
      var Data = this.CreateData('12', '精工车间_工艺保存_派工', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('保存成功')
          this.tableData5 = []
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    preservation1() {
      var param = []
      param[0] = ['零件图号', this.partNameLabel1]
      param[1] = ['人员编号', this.id]
      // 参数数量与名称要与存储过程对应
      var Data = this.CreateData('12', '精工车间_工艺保存_派工_工艺库', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('保存成功')
          this.tableData5 = []
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    sortChange(column) {
      console.log(column)
      if (column.prop === '零件名称') {
        this.orderName = 1
      } else if (column.prop === '订单编号') {
        this.orderName = 2
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') { this.order = 2 } else {
        this.order = ''
      }
      this.searchTable()
    },
    changeAllow(row) {
      var param = []
      param[0] = ['工艺计划流水号', row.工艺计划流水号]
      param[1] = ['工序顺序', row.工序顺序]
      param[2] = ['是否变更', row.是否变更]
      var Data = this.CreateData('12', '车间生产管理工艺_零件工序_变更允许', param)
      this.ExecDatabase(Data)
    },
    updateProcess(row) {
      if (!this.checked) {
        var param = []
        param[0] = ['工序流水号', row.工序流水号]
        param[1] = ['工艺要求', row.工艺要求]
        param[2] = ['定额工时', row.定额工时]
        param[3] = ['准结工时', row.准结工时]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('12', '车间生产管理工艺_零件工序_编辑及派工', param)
        this.ExecDatabase(Data)
      } else {
        var param1 = []
        param1[0] = ['idd', row.idd]
        param1[1] = ['工艺要求', row.工艺要求]
        param1[2] = ['定额工时', row.定额工时]
        param1[3] = ['准结工时', row.准结工时]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('12', '车间生产管理工艺_零件工序_编辑_工艺库', param1)
        this.ExecDatabase(Data1)
      }
    },
    insertOne(row) { // 插入行
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['工序流水号', row.工序流水号]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_插入工序', param)
        this.ExecDatabase(Data).then(response => {
          var param2 = []
          param2[0] = ['工艺计划流水号', this.partNameValue]
          // 参数数量与名称要与存储过程对应
          var Data2 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param2)
          this.ExecDatabase(Data2).then(response => {
            this.tableData5 = response.data
          })
        })
      } else {
        var param1 = []
        param1[0] = ['零件图号', this.partNameLabel1]
        param1[1] = ['idd', row.idd]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_插入工序_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          var param3 = []
          param3[0] = ['工艺计划流水号', this.partNameValue]
          // 参数数量与名称要与存储过程对应
          var Data3 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param3)
          this.ExecDatabase(Data3).then(response => {
            this.tableData5 = response.data
          })
        })
      }
    },
    deleteOne(row) { // 删除行
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['工序流水号', row.工序流水号]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_删除工序', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].结果 === '成功') {
            var param1 = []
            param1[0] = ['工艺计划流水号', this.partNameValue]
            // 参数数量与名称要与存储过程对应
            var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param1)
            this.ExecDatabase(Data1).then(response => {
              this.tableData5 = response.data
            })
          } else {
            this.$message.error('此工序已加工，无法删除')
          }
        })
      } else {
        var param1 = []
        param1[0] = ['零件图号', this.partNameLabel1]
        param1[1] = ['idd', row.idd]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_删除工序_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          if (response.data[0].result === '1') {
            var param1 = []
            param1[0] = ['零件图号', this.partNameLabel1]
            // 参数数量与名称要与存储过程对应
            var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param1)
            this.ExecDatabase(Data1).then(response => {
              this.tableData5 = response.data
            })
          }
        })
      }
    },
    upOne(row) { // 上移
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['工序流水号', row.工序流水号]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_上移工序', param)
        this.ExecDatabase(Data).then(response => {
          var param1 = []
          param1[0] = ['工艺计划流水号', this.partNameValue]
          // 参数数量与名称要与存储过程对应
          var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param1)
          this.ExecDatabase(Data1).then(response => {
            this.tableData5 = response.data
          })
        })
      } else {
        var param1 = []
        param1[0] = ['零件图号', this.partNameLabel1]
        param1[1] = ['idd', row.idd]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_上移工序_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          var param1 = []
          param1[0] = ['零件图号', this.partNameLabel1]
          // 参数数量与名称要与存储过程对应
          var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param1)
          this.ExecDatabase(Data1).then(response => {
            this.tableData5 = response.data
          })
        })
      }
    },
    downOne(row) { // 下移
      if (!this.checked) {
        var param = []
        param[0] = ['工艺计划流水号', this.partNameValue]
        param[1] = ['工序流水号', row.工序流水号]
        // 参数数量与名称要与存储过程对应
        var Data = this.CreateData('11', '车间生产管理工艺_零件工序_下移工序', param)
        this.ExecDatabase(Data).then(response => {
          var param1 = []
          param1[0] = ['工艺计划流水号', this.partNameValue]
          // 参数数量与名称要与存储过程对应
          var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息', param1)
          this.ExecDatabase(Data1).then(response => {
            this.tableData5 = response.data
          })
        })
      } else {
        var param1 = []
        param1[0] = ['零件图号', this.partNameLabel1]
        param1[1] = ['idd', row.idd]
        // 参数数量与名称要与存储过程对应
        var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_下移工序_工艺库', param1)
        this.ExecDatabase(Data1).then(response => {
          var param1 = []
          param1[0] = ['零件图号', this.partNameLabel1]
          // 参数数量与名称要与存储过程对应
          var Data1 = this.CreateData('11', '车间生产管理工艺_零件工序_查询工序信息_工艺库', param1)
          this.ExecDatabase(Data1).then(response => {
            this.tableData5 = response.data
          })
        })
      }
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
  .el-form--label-left >>> .el-form-item__label {
    text-align: right;
  }
  >>>.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 20px 30px 20px
  }
  >>>.el-dialog__header {
    padding: 20px 20px 0px;
  }
  >>>.el-dialog__footer {
    padding: 0px 20px 20px;
    /*text-align: right;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  >>>.el-form-item {
    margin-bottom: 13px;
  }
  .wrapper{
    width: 90%;
    height: 50px;
    overflow: hidden;
    border: 1px solid #b8c7d9;
    /*float: left;*/
    margin: 10px;
  }
  .content{
    position: relative;
    padding: 8px 8px 0 8px;
  }
  .action{
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .delete{
    padding: 0 5px;
    border-radius: 3px;
    color: #0f84b0;
    font-size: 12px;
  }
  .delete:hover{
    background: -webkit-linear-gradient(top,#0ba9e3,#0099d3);
    color: #fff;
  }
  a{
    text-decoration: none;
  }
  .icon{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 7px;
    margin-top: 2px;
    font-size: 26px;
  }
  .info{
    width: 160px;
    height: 50px;
    position: absolute;
    left: 44px;
    line-height: 30px;
    display: inline-block;
    color: #999;
  }
</style>
