<template>
  <div>
    <el-card>
      <div style="padding: 10px;background-color:#F5F5F5">
        <span>关键字:</span>
        <el-input v-model="keyword" style="width: 200px;height: 50px" class="input11" @input="pageCurrent = 1,searchTable()" />
        <el-select v-model="machineShop" style="width:180px;margin-left: 10px" clearable class="select12" placeholder="请选择车间" @change="pageCurrent = 1;searchProductionLine();searchRegion();searchTable()">
          <el-option
            v-for="item in machineShops1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="productionLine" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择产线" @change="pageCurrent = 1;searchRegion();searchTable()">
          <el-option
            v-for="item in productionLines1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="region" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择工序" @change="pageCurrent = 1;searchTable()">
          <el-option
            v-for="item in regions1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <upload-excel-component style="margin-left: 35px;display: inline" @on-selected-file="selected"/>
        <el-button :disabled="worksheet.length === 0" class="button11" icon="el-icon-upload2" style="height: 48px" @click="basicPartsToSQL">导入到数据库</el-button>
        <el-button style="float: right;right:5%;font-size: 30px;position: absolute" type="text" icon="el-icon-circle-plus-outline" @click="addSpareParts('form')"/>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="tableHeaderColor"
        :cell-style="tableColor"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        style="width: 100%"
        height="700px"
        @sort-change="sortChange">
        <el-table-column align="left" label="图片" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="width: 110px;height: 90px">
              <img v-if="scope.row.图片" :src="scope.row.图片" width="100%" height="100%" style="border-radius:5px 5px 5px 5px;overflow:hidden;">
              <img v-else src="static/image.png" width="100%" height="100%" style="border-radius:5px 5px 5px 5px;overflow:hidden;">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="SAP编号" prop="SAP编号" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="cursor: pointer; color: #1e6abc;text-decoration: underline;" @click="searchMaterial(scope.row)">{{ scope.row.SAP编号 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="物料描述" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.物料描述 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="库存地点" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.库存地点 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="库存架位" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.库存架位 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="SAP库存" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.SAP库存数量 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="二级帐库存（备注：领用不发生费用）" width="110" show-overflow-tooltip>
          <template slot-scope="scope">
            <span >{{ scope.row.二级帐 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="单价" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.单价 ? scope.row.单价.toFixed(2) : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="总价值" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.总价值 ? scope.row.总价值.toFixed(2) : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="物料组" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.物料组名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="车间" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.车间 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="产线" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.产线 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="工序" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.工序 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备编号" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.设备编号 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备名称" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.设备名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="editMaterial(scope.row)"/>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :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-dialog :title="title" :visible.sync="dialogFormVisible" center width="60%" >
        <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="700px" label-padding-bottom="0px">
          <el-card>
            <el-row>
              <el-col :span="17">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="SAP编号:" prop="sapNumber">
                      <el-input v-model="form.sapNumber" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="物料描述:" prop="describe">
                      <el-input v-model="form.describe" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存地点:" prop="Location">
                      <el-input v-model="form.Location" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="库存架位:" prop="rackPosition">
                      <el-input v-model="form.rackPosition" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存数量:" prop="stock">
                      <el-input v-model="form.stock" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="二级帐:" prop="stock1">
                      <el-input v-model="form.stock1" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="车间:" prop="workshop">
                      <!--<el-input v-model="form.workshop" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form.workshopValue" style="width:200px" @change="getProductionLine()">
                        <el-option
                          v-for="item in machineShops"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产线:" prop="productionLine">
                      <!--<el-input v-model="form.productionLine" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form.productionLineValue" style="width:200px" @change="getRegion()">
                        <el-option
                          v-for="item in productionLines"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="工序:" prop="procedure">
                      <!--<el-input v-model="form.procedure" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form.procedureValue" style="width:200px" @change="searchEquipment()">
                        <el-option
                          v-for="item in regions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="设备编号:" prop="equipmentNumber">
                      <!--<el-input v-model="form.equipmentNumber" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form.equipmentValue" style="width:200px" @change="changeEquipment()">
                        <el-option
                          v-for="item in equipments"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称:" prop="equipmentName">
                      <el-input v-model="form.equipmentName" readonly style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单价:" prop="unitPrice">
                      <el-input v-model="form.unitPrice" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="物料组:" prop="materialGroup">
                      <el-select v-model="form.materialGroup" style="width:200px">
                        <el-option
                          v-for="item in materialGroups"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="7" align="center">
                <div class="avatar-uploader">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <img v-else src="static/image.png" class="avatar">
                </div>
                <el-upload
                  ref="upload"
                  :action="action"
                  :data="Data"
                  :limit="1"
                  :show-file-list="true"
                  :file-list="fileList"
                  :auto-upload="false"
                  :on-change="fileChange"
                  :on-exceed="fileExceed"
                  :on-remove="fileRemove"
                  :on-success="fileSuccess"
                  accept=".jpg,.png">
                  <el-button slot="trigger" style="margin-top: 10px" size="small" plain type="primary">选取文件</el-button>
                </el-upload>
              </el-col>
            </el-row>
            <el-row>
              <div style="float: right">
                <el-button style="margin-top: 20px" class="button12" @click="callOff('form')">取消</el-button>
                <el-button :disabled="!isMachineValue" class="button11" @click="submit('form')">确 定</el-button>
              </div>
            </el-row>
          </el-card>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="dialogFormVisible4" title="修改设备" center width="60%" >
        <el-form ref="form4" :model="form4" :rules="rules4" label-position="top" label-width="700px" label-padding-bottom="0px">
          <el-card>
            <el-row>
              <el-col :span="17">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="SAP编号:" prop="sapNumber">
                      <el-input v-model="form4.sapNumber" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="物料描述:" prop="describe">
                      <el-input v-model="form4.describe" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存地点:" prop="Location">
                      <el-input v-model="form4.Location" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="库存架位:" prop="rackPosition">
                      <el-input v-model="form4.rackPosition" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存数量:" prop="stock">
                      <el-input v-model="form4.stock" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="二级帐:" prop="stock1">
                      <el-input v-model="form4.stock1" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="车间:" prop="workshop">
                      <!--<el-input v-model="form4.workshop" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form4.workshopValue" style="width:200px" @change="getProductionLine1();form4.productionLineValue='';form4.procedureValue='';form4.equipmentValue=''">
                        <el-option
                          v-for="item in machineShops"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产线:" prop="productionLine">
                      <!--<el-input v-model="form4.productionLine" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form4.productionLineValue" style="width:200px" @change="getRegion1();form4.procedureValue='';form4.equipmentValue=''">
                        <el-option
                          v-for="item in productionLines"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="工序:" prop="procedure">
                      <!--<el-input v-model="form4.procedure" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form4.procedureValue" style="width:200px" @change="searchEquipment1();form4.equipmentValue=''">
                        <el-option
                          v-for="item in regions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="设备编号:" prop="equipmentNumber">
                      <!--<el-input v-model="form4.equipmentNumber" style="width: 200px;margin-left: 0px"/>-->
                      <el-select v-model="form4.equipmentValue" style="width:200px" @change="changeEquipment1()">
                        <el-option
                          v-for="item in equipments"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称:" prop="equipmentName">
                      <el-input v-model="form4.equipmentName" readonly style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单价:" prop="unitPrice">
                      <el-input v-model="form4.unitPrice" type="number" style="width: 200px;margin-left: 0px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="物料组:" prop="materialGroup">
                      <el-select v-model="form4.materialGroup" style="width:200px">
                        <el-option
                          v-for="item in materialGroups"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="7" align="center">
                <div class="avatar-uploader">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <img v-else src="static/image.png" class="avatar">
                </div>
                <el-upload
                  ref="uploadEdit"
                  :action="action"
                  :data="Data"
                  :limit="1"
                  :show-file-list="true"
                  :file-list="imgList"
                  :auto-upload="false"
                  :on-change="fileChange"
                  :on-exceed="fileExceed"
                  :on-remove="fileRemove"
                  :on-success="fileEditSuccess"
                  accept=".jpg,.png">
                  <el-button slot="trigger" style="margin-top: 10px" size="mini" icon="el-icon-edit-outline" circle/>
                  <el-tooltip class="item" effect="light" content="上传" placement="bottom">
                    <el-button style="margin-left: 10px;" size="mini" icon="el-icon-check" circle @click="EditFile"/>
                  </el-tooltip>
                  <el-tooltip class="item" effect="light" content="删除" placement="bottom">
                    <el-button style="margin-left: 10px;" size="mini" icon="el-icon-delete" circle @click="deleteMachineImg"/>
                  </el-tooltip>
                </el-upload>
              </el-col>
            </el-row>
            <div class="machine-divider"/>
            <el-tabs v-model="activeName">
              <el-tab-pane label="入库记录" name="1">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="一级帐数">
                      <el-input v-model="receiptQuantity" type="number" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="二级帐数">
                      <el-input v-model="receiptQuantity1" type="number" style="width: 200px;margin-top: 0px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="入库日期">
                      <el-date-picker
                        v-model="warehousingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-button icon="el-icon-plus" size="small" style="margin-top: 28px" circle @click="addReceipt"/>
                  </el-col>
                </el-row>
                <el-table
                  :data="tableData2"
                  :header-cell-style="tableHeaderColor"
                  :cell-style="tableColor"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300px">
                  <el-table-column align="left" label="SAP编号" prop="SAP编号" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.SAP编号 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="物料描述" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.物料描述 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="数量" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="二级帐数量" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.二级帐 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="入库人员" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.姓名 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="入库日期" width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.入库日期 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="操作" width="80" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <el-button size="small" icon="el-icon-delete" type="text" @click="deleteReceipt(scope.row)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="出库记录" name="2">
                <el-table
                  :data="tableData1"
                  :header-cell-style="tableHeaderColor"
                  :cell-style="tableColor"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300px">
                  <el-table-column align="left" label="SAP编号" prop="SAP编号" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.SAP编号 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="物料描述" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.物料描述 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="数量" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="二级帐数量" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.二级帐数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="领取人员" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.姓名 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="领取日期" width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.使用日期 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
            <el-row>
              <div style="float: right">
                <el-button style="margin-top: 20px" class="button12" @click="callOff4('form4')">取消</el-button>
                <el-button class="button11" @click="submit1('form4')">确 定</el-button>
              </div>
            </el-row>
          </el-card>
        </el-form>
      </el-dialog>
      <el-dialog :title="title2" :visible.sync="dialogFormVisible2" center width="60%" >
        <el-form ref="form2" :model="form2" :rules="rules2" label-position="top" label-width="700px" label-padding-bottom="0px">
          <el-card style="margin-top: 10px">
            <el-row>
              <el-col :span="18">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="SAP编号:" prop="sapNumber">
                      <div class="div">{{ form2.sapNumber }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="物料描述:" prop="describe">
                      <div :title="form2.describe" class="div">{{ form2.describe }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存地点:" prop="Location">
                      <div class="div">{{ form2.Location }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="库存架位:" prop="rackPosition">
                      <div class="div">{{ form2.rackPosition }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存数量:" prop="stock">
                      <div class="div">{{ form2.stock }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="二级帐:" prop="stock1">
                      <div class="div">{{ form2.stock1 }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="车间:" prop="workshop">
                      <div class="div">{{ form2.workshop }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产线:" prop="productionLine">
                      <div class="div">{{ form2.productionLine }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="工序:" prop="procedure">
                      <div class="div">{{ form2.procedure }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="设备编号:" prop="equipmentNumber">
                      <div class="div">{{ form2.equipmentNumber }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称:" prop="equipmentName">
                      <div class="div">{{ form2.equipmentName }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单价:" prop="unitPrice">
                      <div class="div">{{ form2.unitPrice }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="物料组:" prop="materialGroup">
                      <div class="div">{{ form2.materialGroup }}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <div class="avatar-uploader" >
                  <img v-if="form2.imageUrl" :src="form2.imageUrl" class="avatar">
                  <img v-else src="static/image.png" class="avatar">
                </div>
              </el-col>
            </el-row>
            <div class="machine-divider"/>
            <el-tabs v-model="activeName">
              <el-tab-pane label="入库记录" name="1">
                <el-table
                  :data="tableData2"
                  :header-cell-style="tableHeaderColor"
                  :cell-style="tableColor"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300px">
                  <el-table-column align="left" label="SAP编号" prop="SAP编号" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.SAP编号 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="物料描述" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.物料描述 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="一级帐数" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="二级帐数" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.二级帐 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="入库人员" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.姓名 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="入库日期" width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.入库日期 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="出库记录" name="2">
                <el-table
                  :data="tableData1"
                  :header-cell-style="tableHeaderColor"
                  :cell-style="tableColor"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="300px">
                  <el-table-column align="left" label="SAP编号" prop="SAP编号" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.SAP编号 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="物料描述" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.物料描述 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="一级帐数" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="二级帐数" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.二级帐数量 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="领取人员" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.姓名 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="领取日期" width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.使用日期 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { ExecDatabase } from '@/main'
import { action } from '@/utils/request'
import UploadExcelComponent from '@/views/UploadExcel/index.vue'
export default {
  components: { UploadExcelComponent },
  data() {
    return {
      materialGroups: [],
      sapNumberValue: '',
      receiptQuantity: '',
      receiptQuantity1: '',
      warehousingDate: '',
      worksheet: [],
      itemFile: [],
      sapNumberGroup: '',
      describeGroup: '',
      LocationGroup: '',
      rackPositionGroup: '',
      stockGroup: '',
      stock1Group: '',
      unitPriceGroup: '',
      workshopGroup: '',
      productionLineGroup: '',
      procedureGroup: '',
      equipmentNumberGroup: '',
      equipmentNameGroup: '',
      materialGroupGroup: '',
      keyword: '', // 关键词
      keyword_check: 0,
      loading: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      order: '',
      title: '',
      dialogFormVisible: false,
      dialogFormVisible4: false,
      peoples: [], // 人员
      quotas: [], // 指标
      machineShops: [], // 车间
      regions: [], // 工序
      productionLines: [], // 产线
      machineShops1: [], // 车间
      regions1: [], // 工序
      productionLines1: [], // 产线
      machineShop: '', // 车间
      region: '', // 工序
      productionLine: '', // 产线
      equipments: [], // 设备
      machineShop_check: 0,
      region_check: 0,
      productionLine_check: 0,
      action: action,
      imageUrl: '',
      imageUrl1: '',
      fileList: [],
      imgList: [],
      Data: {},
      activeName: '1',
      activeName1: '1',
      activeName2: '1',
      form: {
        materialGroup: '', // 物料组
        sapNumber: '', // sap编号
        describe: '', // 物料描述
        Location: '', // 库存地点
        rackPosition: '', // 库存架位
        stock: '', // 库存数量
        stock1: '', // 二级帐
        unitPrice: '', // 单价
        workshop: '', // 车间
        workshopValue: '', // 车间代码
        productionLine: '', // 产线
        productionLineValue: '', // 产线代码
        procedure: '', // 工序
        procedureValue: '', // 工序代码
        equipmentNumberValue: '', // 设备代码
        equipmentNumber: '', // 设备编号
        equipmentName: '' // 设备名称
      },
      rules: {
        sapNumber: [{ required: true, message: '请输入SAP编号', trigger: 'blur' }],
        describe: [{ required: true, message: '请输入物料描述', trigger: 'blur' }],
        Location: [{ required: true, message: '请输入库存地点', trigger: 'blur' }],
        rackPosition: [{ required: true, message: '请输入库存架位', trigger: 'blur' }],
        stock: [{ required: true, message: '请输入SAP库存数量', trigger: 'blur' }],
        stock1: [{ required: true, message: '请输入二级帐', trigger: 'blur' }],
        unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
        materialGroup: [{ required: true, message: '请选择物料组', trigger: 'blur' }]
      },
      form4: {
        materialGroup: '', // 物料组
        sapNumber: '', // sap编号
        describe: '', // 物料描述
        Location: '', // 库存地点
        rackPosition: '', // 库存架位
        stock: '', // 库存数量
        stock1: '', // 二级帐
        unitPrice: '', // 单价
        workshop: '', // 车间
        workshopValue: '', // 车间代码
        productionLine: '', // 产线
        productionLineValue: '', // 产线代码
        procedure: '', // 工序
        procedureValue: '', // 工序代码
        equipmentNumberValue: '', // 设备代码
        equipmentNumber: '', // 设备编号
        equipmentName: '' // 设备名称
      },
      rules4: {
        sapNumber: [{ required: true, message: '请输入SAP编号', trigger: 'blur' }],
        describe: [{ required: true, message: '请输入物料描述', trigger: 'blur' }],
        Location: [{ required: true, message: '请输入库存地点', trigger: 'blur' }],
        rackPosition: [{ required: true, message: '请输入库存架位', trigger: 'blur' }],
        stock: [{ required: true, message: '请输入SAP库存数量', trigger: 'blur' }],
        stock1: [{ required: true, message: '请输入二级帐', trigger: 'blur' }],
        unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
        materialGroup: [{ required: true, message: '请选择物料组', trigger: 'blur' }]
      },
      aaa: -1,
      machineValue: '',
      title2: '',
      dialogFormVisible2: false,
      form2: {
        materialGroup: '', // 物料组
        sapNumber: '', // sap编号
        describe: '', // 物料描述
        Location: '', // 库存地点
        rackPosition: '', // 库存架位
        stock: '', // 库存数量
        stock1: '', // 二级帐
        unitPrice: '', // 单价
        workshop: '', // 车间
        productionLine: '', // 产线
        procedure: '', // 工序
        equipmentNumber: '', // 设备编号
        equipmentName: '' // 设备名称
      },
      rules2: {},
      title3: '',
      dialogFormVisible3: false,
      form3: {
      },
      isMachineValue: true,
      rules3: {},
      loadingFiles: false,
      tableDataFiles: [],
      spareTableData: [],
      orderTableData: [],
      spareTotal: 0, // 总条数
      sparePageSize: 10, // 每页显示条数
      sparePageCurrent: 1, // 后台获取页
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      total1: 0, // 总条数
      pageSize1: 10, // 每页显示条数
      pageCurrent1: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'cname'
    ])
  },
  created() {
    this.searchTable()
    this.searchMachineShop()
    this.searchMaterialGroup()
  },
  methods: {
    tableHeaderColor() {
      return 'background-color: rgb(250, 250, 250);' +
          'height:20px;' +
          'border-bottom: 4px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);' +
          'font-weight: 5000;' +
          'padding: 5px 10px'
    },
    tableColor() {
      return 'border-color: #E8E8E8;padding: 6px 0px 4px 0px'
    },
    tableColor1() {
      return 'border-color: #E8E8E8;padding: 7px 0px 5px 0px'
    },
    tableColor2() {
      return 'border-color: #E8E8E8;padding: 10px 0px 8px 0px'
    },
    async selected(data) { // 选择需要导入的文件
      this.worksheet = data.worksheet // 获取每个多选文件的表格坐标及值
      this.itemFile = data.itemFile
    },
    basicPartsToSQL() {
      try {
        this.loading = true
        this.err = 0
        console.log(this.worksheet[0])
        for (let j = this.worksheet.length - 1; j >= 0; j--) {
          let sapNumber,
            describe,
            Location,
            rackPosition,
            stock,
            stock1,
            unitPrice,
            workshop,
            productionLine,
            procedure,
            equipmentNumber,
            equipmentName,
            materialGroup
          this.sapNumberGroup = ''
          this.describeGroup = ''
          this.LocationGroup = ''
          this.rackPositionGroup = ''
          this.stockGroup = ''
          this.stock1Group = ''
          this.unitPriceGroup = ''
          this.workshopGroup = ''
          this.productionLineGroup = ''
          this.procedureGroup = ''
          this.equipmentNumberGroup = ''
          this.equipmentNameGroup = ''
          this.materialGroupGroup = ''
          for (let i = 0; i < 1999; i++) {
            const attr = i + 2
            sapNumber = this.worksheet[j][`A${attr}`] ? this.worksheet[j][`A${attr}`].v : ''
            describe = this.worksheet[j][`B${attr}`] ? this.worksheet[j][`B${attr}`].v : ''
            Location = this.worksheet[j][`C${attr}`] ? this.worksheet[j][`C${attr}`].v : ''
            rackPosition = this.worksheet[j][`D${attr}`] ? this.worksheet[j][`D${attr}`].v : ''
            stock = this.worksheet[j][`E${attr}`] ? this.worksheet[j][`E${attr}`].v : ''
            stock1 = this.worksheet[j][`F${attr}`] ? this.worksheet[j][`F${attr}`].v : ''
            unitPrice = this.worksheet[j][`G${attr}`] ? this.worksheet[j][`G${attr}`].v : ''
            workshop = this.worksheet[j][`H${attr}`] ? this.worksheet[j][`H${attr}`].v : ''
            productionLine = this.worksheet[j][`I${attr}`] ? this.worksheet[j][`I${attr}`].v : ''
            procedure = this.worksheet[j][`J${attr}`] ? this.worksheet[j][`J${attr}`].v : ''
            equipmentNumber = this.worksheet[j][`K${attr}`] ? this.worksheet[j][`K${attr}`].v : ''
            equipmentName = this.worksheet[j][`L${attr}`] ? this.worksheet[j][`L${attr}`].v : ''
            materialGroup = this.worksheet[j][`M${attr}`] ? this.worksheet[j][`M${attr}`].v : ''
            if (!sapNumber && !describe && !Location && !rackPosition && !stock && !stock1 && !unitPrice && !workshop && !productionLine && !procedure && !equipmentNumber && !equipmentName && !materialGroup) { // 当数据都为空时，循环终止，防止向数据库中插入多余且无用的数据
              this.sapNumberGroup = this.sapNumberGroup.substr(0, this.sapNumberGroup.length - 1)
              this.describeGroup = this.describeGroup.substr(0, this.describeGroup.length - 1)
              this.LocationGroup = this.LocationGroup.substr(0, this.LocationGroup.length - 1)
              this.rackPositionGroup = this.rackPositionGroup.substr(0, this.rackPositionGroup.length - 1)
              this.stockGroup = this.stockGroup.substr(0, this.stockGroup.length - 1)
              this.stock1Group = this.stock1Group.substr(0, this.stock1Group.length - 1)
              this.unitPriceGroup = this.unitPriceGroup.substr(0, this.unitPriceGroup.length - 1)
              this.workshopGroup = this.workshopGroup.substr(0, this.workshopGroup.length - 1)
              this.productionLineGroup = this.productionLineGroup.substr(0, this.productionLineGroup.length - 1)
              this.procedureGroup = this.procedureGroup.substr(0, this.procedureGroup.length - 1)
              this.equipmentNumberGroup = this.equipmentNumberGroup.substr(0, this.equipmentNumberGroup.length - 1)
              this.equipmentNameGroup = this.equipmentNameGroup.substr(0, this.equipmentNameGroup.length - 1)
              this.materialGroupGroup = this.materialGroupGroup.substr(0, this.materialGroupGroup.length - 1)
              break
            } else if (!sapNumber) { // SAP编号不能为空
              this.$notify.error(`项目不能为空`)
              break
            } else if (!describe) { // 周期不能为空
              this.$notify.error(`物料描述不能为空`)
              break
            } else {
              this.sapNumberGroup = this.sapNumberGroup + sapNumber + '^'
              this.describeGroup = this.describeGroup + describe + '^'
              this.LocationGroup = this.LocationGroup + Location + '^'
              this.rackPositionGroup = this.rackPositionGroup + rackPosition + '^'
              this.stockGroup = this.stockGroup + stock + '^'
              this.stock1Group = this.stock1Group + stock1 + '^'
              this.unitPriceGroup = this.unitPriceGroup + unitPrice + '^'
              this.workshopGroup = this.workshopGroup + workshop + '^'
              this.productionLineGroup = this.productionLineGroup + productionLine + '^'
              this.procedureGroup = this.procedureGroup + procedure + '^'
              this.equipmentNumberGroup = this.equipmentNumberGroup + equipmentNumber + '^'
              this.equipmentNameGroup = this.equipmentNameGroup + equipmentName + '^'
              this.materialGroupGroup = this.materialGroupGroup + materialGroup + '^'
            }
          }
          var param = []
          param[0] = ['SAP编号组', this.sapNumberGroup]
          param[1] = ['物料描述组', this.describeGroup]
          param[2] = ['库存地点组', this.LocationGroup]
          param[3] = ['库存架位组', this.rackPositionGroup]
          param[4] = ['SAP库存数量组', this.stockGroup]
          param[5] = ['二级帐组', this.stock1Group]
          param[6] = ['单价组', this.unitPriceGroup]
          param[7] = ['车间组', this.workshopGroup]
          param[8] = ['产线组', this.productionLineGroup]
          param[9] = ['工序组', this.procedureGroup]
          param[10] = ['设备编号组', this.equipmentNumberGroup]
          param[11] = ['设备名称组', this.equipmentNameGroup]
          param[12] = ['物料组名称组', this.materialGroupGroup]
          param[13] = ['人员编号', this.id]
          var Data = this.CreateData('12', '基础数据_备件信息_导入', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('导入成功')
              this.searchTable()
            } else {
              this.$message.error('导入失败')
            }
          })
          this.itemFile.splice(j, 1)
          this.worksheet.splice(j, 1)
        }
        this.loading = false
      } catch (e) {
        this.err++
        this.loading = false
        this.$notify.error(`导入数据错误,请检查导入文件是否正确`)
        console.log(`导入数据错误${e}`)
      }
    },
    // 获得物料组
    searchMaterialGroup() {
      var param = []
      var Data = this.CreateData('11', '基础数据_物料组_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.materialGroups.push({
            label: v.物料组名称,
            value: v.物料组名称
          })
        })
      }).then(() => {
      })
    },
    // 获得车间
    searchMachineShop() {
      this.machineShops1 = []
      this.machineShop = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops1.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
      })
    },
    // 获得产线
    searchProductionLine() {
      this.productionLines1 = []
      this.productionLine = ''
      var param = []
      param[0] = ['车间代码', this.machineShop]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines1.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
      })
    },
    // 获得工序
    searchRegion() {
      this.regions1 = []
      this.region = ''
      var param = []
      param[0] = ['产线代码', this.productionLine]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions1.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
      })
    },
    // 查询
    searchTable() {
      this.loading = true
      this.tableData = []
      if (this.keyword) { this.keyword_check = 1 } else { this.keyword_check = 0 }
      if (this.machineShop) { this.machineShop_check = 1 } else { this.machineShop_check = 0 }
      if (this.productionLine) { this.productionLine_check = 1 } else { this.productionLine_check = 0 }
      if (this.region) { this.region_check = 1 } else { this.region_check = 0 }
      var param = []
      param[0] = ['关键字', this.keyword]
      param[1] = ['关键字_check', this.keyword_check]
      param[2] = ['排序方式', this.order]
      param[3] = ['PageSize', this.pageSize]
      param[4] = ['PageCurrent', this.pageCurrent]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      param[7] = ['车间', this.machineShop]
      param[8] = ['车间_check', this.machineShop_check]
      param[9] = ['产线', this.productionLine]
      param[10] = ['产线_check', this.productionLine_check]
      param[11] = ['工序', this.region]
      param[12] = ['工序_check', this.region_check]
      var Data = this.CreateData('11', '基础数据_备件_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          if (v.图片 !== null) {
            v.图片 = 'data:image/png;base64,' + v.图片
          }
          this.tableData.push({
            图片: v.图片,
            SAP编号: v.SAP编号,
            物料描述: v.物料描述,
            库存地点: v.库存地点,
            库存架位: v.库存架位,
            SAP库存数量: v.SAP库存数量,
            二级帐: v.二级帐,
            单价: v.单价,
            总价值: v.总价值,
            车间: v.车间,
            工序: v.工序,
            产线: v.产线,
            设备编号: v.设备编号,
            设备名称: v.设备名称,
            物料组名称: v.物料组名称,
            导入ID: v.导入ID,
            车间代码: v.车间代码,
            工序代码: v.工序代码,
            产线代码: v.产线代码,
            设备代码: v.设备代码,
            物料流水号: v.物料流水号
          })
        })
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 出库查询
    searchWarehouse(val) {
      var param = []
      param[0] = ['SAP编号', val]
      var Data = this.CreateData('11', '基础数据_备件使用记录_查询', param)
      ExecDatabase(Data).then(response => {
        this.tableData1 = response.data
      })
    },
    // 入库查询
    searchReceipt(val) {
      var param = []
      param[0] = ['SAP编号', val]
      var Data = this.CreateData('11', '基础数据_备件入库记录_查询', param)
      ExecDatabase(Data).then(response => {
        this.tableData2 = response.data
      })
    },
    /**
     * 新增入库记录
     */
    addReceipt() {
      if (this.receiptQuantity && this.receiptQuantity1 && this.warehousingDate) {
        var param = []
        param[0] = ['数量', this.receiptQuantity]
        param[1] = ['二级帐', this.receiptQuantity1]
        param[2] = ['入库日期', this.warehousingDate]
        param[3] = ['导入ID', this.machineValue]
        param[4] = ['人员编号', this.id]
        var Data = this.CreateData('12', '基础数据_备件入库记录_新增', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '信息增加成功',
              type: 'success'
            })
            this.receiptQuantity = ''
            this.receiptQuantity1 = ''
            this.warehousingDate = ''
            var param = []
            param[0] = ['SAP编号', this.form4.sapNumber]
            var Data = this.CreateData('11', '基础数据_备件入库记录_查询', param)
            ExecDatabase(Data).then(response => {
              this.tableData2 = response.data
            })
          } else {
            this.$message.error('信息增加失败')
          }
        })
      }
    },
    // 入库记录 删除
    deleteReceipt(row) {
      this.$confirm('此操作将永久删除该入库记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['入库记录流水号', row.入库记录流水号]
        var Data = this.CreateData('12', '基础数据_备件入库记录_删除', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            var param = []
            param[0] = ['SAP编号', this.form4.sapNumber]
            var Data = this.CreateData('11', '基础数据_备件入库记录_查询', param)
            ExecDatabase(Data).then(response => {
              this.tableData2 = response.data
            })
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
       * 查询设备信息详情
       */
    searchMaterial(row) {
      this.title2 = '备件信息'
      this.form2.sapNumber = row.SAP编号
      this.form2.describe = row.物料描述
      this.form2.Location = row.库存地点
      this.form2.rackPosition = row.库存架位
      this.form2.stock = row.SAP库存数量
      this.form2.stock1 = row.二级帐
      this.form2.workshop = row.车间
      this.form2.procedure = row.工序
      this.form2.productionLine = row.产线
      this.form2.imageUrl = row.图片
      this.form2.equipmentNumber = row.设备编号
      this.form2.equipmentName = row.设备名称
      this.form2.materialGroup = row.物料组名称
      this.form2.unitPrice = row.单价
      this.machineValue = row.导入ID
      this.activeName1 = '1'
      this.searchWarehouse(this.form2.sapNumber)
      this.searchReceipt(this.form2.sapNumber)
      this.getFileListMachine(1)
      this.getSpare()
      this.getOrder()
      this.dialogFormVisible2 = true
    },
    /**
       * 查询设备文件详情
       */
    getSpare() {
      this.spareTableData = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['PageSize', this.sparePageSize]
      param[2] = ['PageCurrent', this.sparePageCurrent]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '维修工单_历史备件_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.spareTableData.push({
            备件代码: v.备件代码,
            工单号: v.工单号,
            SAP编码: v.SAP编码,
            备件名称: v.备件名称,
            数量: v.数量,
            操作时间: v.操作时间
          })
        })
        this.spareTotal = parseInt(response.data.output[0].ItemCount)
      })
    },
    getOrder() {
      this.orderTableData = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      var Data = this.CreateData('11', '维修工单_工单历史_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.orderTableData.push({
            维修工单代码: v.维修工单代码,
            故障名称: v.故障名称,
            故障现象: v.故障现象,
            工单号: v.工单号,
            状态代码: v.状态代码,
            状态: v.状态,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            设备编号: v.设备编号
          })
        })
      })
    },
    // 点击工单
    orderClick(row) {
      this.$router.push({
        name: 'Test',
        query: {
          jobNumber: row
        }
      })
    },
    getFileListMachine(filesType) {
      this.loadingFiles = true
      this.tableDataFiles = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['文件类型', filesType]
      var Data = this.CreateData('11', '基础数据_设备_文件查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.tableDataFiles.push({
            参考文档名称: v.参考文档名称,
            参考文档类型: v.参考文档类型,
            参考文档代码: v.参考文档代码
          })
        })
        this.loadingFiles = false
      })
    },
    /**
       * 详情页切换标签
       */
    handleClickMachineInfo(tab, event) {
      this.fileList = []
      if (tab.name === '1') {
        this.getFileListMachine(1)
      } else if (tab.name === '2') {
        this.getFileListMachine(2)
      }
    },
    /**
       * 排序查询
       */
    sortChange(column) {
      if (column.order === 'ascending') {
        this.order = column.prop + ' asc'
      } else if (column.order === 'descending') { this.order = column.prop + ' desc' } else {
        this.order = ''
      }
      this.pageCurrent = 1
      this.searchTable()
    },
    /**
       * 点击增加备件
       */
    addSpareParts() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.aaa = 1
      this.title = '新增备件'
      this.dialogFormVisible = true
      this.productionLines = []
      this.regions = []
      this.equipments = []
      this.form.sapNumber = ''
      this.form.describe = ''
      this.form.Location = ''
      this.form.rackPosition = ''
      this.form.stock = ''
      this.form.stock1 = ''
      this.form.unitPrice = ''
      this.form.workshopValue = ''
      this.form.productionLineValue = ''
      this.form.procedureValue = ''
      this.form.equipmentNumberValue = ''
      this.form.equipmentNumber = ''
      this.form.materialGroup = ''
      this.form.equipmentName = ''
      this.imageUrl = ''
      this.fileList = []
      this.isMachineValue = true
      this.getMachineShop()
    },
    /**
       * 获得车间
       */
    getMachineShop() {
      this.machineShops = []
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      })
    },
    /**
       * 获得产线
       */
    getProductionLine() {
      this.productionLines = []
      this.form.productionLineValue = ''
      this.regions = []
      this.form.procedureValue = ''
      this.equipments = []
      this.form.equipmentValue = ''
      this.form.equipmentName = ''
      var param = []
      param[0] = ['车间代码', this.form.workshopValue]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      })
    },
    /**
       * 获得工序
       */
    getRegion() {
      this.regions = []
      this.form.procedureValue = ''
      this.equipments = []
      this.form.equipmentValue = ''
      this.form.equipmentName = ''
      var param = []
      param[0] = ['产线代码', this.form.productionLineValue]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      })
    },
    // 获得设备
    searchEquipment() {
      this.equipments = []
      this.form.equipmentValue = ''
      this.form.equipmentName = ''
      var param = []
      param[0] = ['工序代码', this.form.procedureValue]
      var Data = this.CreateData('11', '基础数据_设备列表_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.equipments.push({
            name: v.设备名称,
            label: v.设备编号,
            value: v.设备代码
          })
        })
      })
    },
    changeEquipment() {
      this.form.equipmentNumber = ''
      this.form.equipmentName = ''
      for (let i = 0; i < this.equipments.length; i++) {
        if (this.form.equipmentValue === this.equipments[i].value) {
          this.form.equipmentNumber = this.equipments[i].label
          this.form.equipmentName = this.equipments[i].name
        }
      }
    },
    /**
       * 图片预览
       */
    fileChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    /**
       * 文件超出限制
       */
    fileExceed() {
      this.$message.warning('当前限制选择 1 个文件')
    },
    /**
       * 文件删除
       */
    fileRemove() {
      this.imageUrl = ''
    },
    /**
       * 确定增加备件
       */
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param1 = []
          param1[0] = ['SAP编号', this.form.sapNumber]
          param1[1] = ['设备编号', this.form.equipmentNumber]
          var Data1 = this.CreateData('11', '基础数据_备件_判断重复', param1)
          ExecDatabase(Data1).then(response => {
            if (Number(response.data[0].条数) === 0) {
              var param = []
              param[0] = ['SAP编号', this.form.sapNumber]
              param[1] = ['物料描述', this.form.describe]
              param[2] = ['库存地点', this.form.Location]
              param[3] = ['库存架位', this.form.rackPosition]
              param[4] = ['SAP库存数量', this.form.stock]
              param[5] = ['二级帐', this.form.stock1]
              param[6] = ['单价', this.form.unitPrice]
              param[7] = ['物料组名称', this.form.materialGroup]
              param[8] = ['车间代码', this.form.workshopValue]
              param[9] = ['产线代码', this.form.productionLineValue]
              param[10] = ['工序代码', this.form.procedureValue]
              param[11] = ['设备代码', this.form.equipmentValue]
              param[12] = ['文件名称', '']
              param[13] = ['文件后缀', '']
              param[14] = ['文件内容', null]
              var Data = this.CreateData('15', '基础数据_备件_增加', param)
              this.Data.param = Data
              this.pageCurrent = 1
              if (this.imageUrl === null || this.imageUrl === '' || this.imageUrl === undefined) {
                ExecDatabase(Data).then(response => {
                  if (!response.data[0][0]) {
                    this.$message.error('信息增加失败')
                  } else {
                    this.$message({
                      message: '信息增加成功',
                      type: 'success'
                    })
                    this.machineValue = response.data[0][0].物料流水号
                    this.isMachineValue = false
                    this.pageCurrent = 1
                    this.searchTable()
                  }
                })
              } else {
                this.$refs.upload.submit()
              }
            } else {
              this.$message.warning('备件信息重复')
            }
          })
        }
      })
    },
    /**
       * 增加设备图片上传成功后
       */
    fileSuccess(res) {
      if (!res[0][0]) {
        this.$message.error('信息增加失败')
      } else {
        this.$message({
          message: '信息增加成功',
          type: 'success'
        })
        this.machineValue = res[0][0].物料流水号
        this.isMachineValue = false
        this.pageCurrent = 1
        this.searchTable()
      }
    },
    /**
       * 增加设备取消
       */
    callOff(formName) {
      this.isMachineValue = true
      this.machineValue = ''
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    /**
       * 点击修改备件
       */
    editMaterial(row) {
      if (this.$refs['form4'] !== undefined) {
        this.$refs['form4'].resetFields()
      }
      this.dialogFormVisible4 = true
      this.machineValue = row.导入ID
      this.form4.sapNumber = row.SAP编号
      this.form4.describe = row.物料描述
      this.form4.Location = row.库存地点
      this.form4.rackPosition = row.库存架位
      this.form4.stock = row.SAP库存数量
      this.form4.stock1 = row.二级帐
      this.form4.imageUrl = row.图片
      this.form4.equipmentNumber = row.设备编号
      this.form4.equipmentName = row.设备名称
      this.form4.materialGroup = row.物料组名称
      this.form4.workshopValue = row.车间代码
      this.form4.procedureValue = row.工序代码
      this.form4.productionLineValue = row.产线代码
      this.form4.equipmentValue = row.设备代码
      this.form4.unitPrice = row.单价
      this.imageUrl = row.图片
      this.imageUrl1 = row.图片
      this.imgList = []
      this.receiptQuantity = ''
      this.receiptQuantity1 = ''
      this.warehousingDate = ''
      this.getMachineShop1()
      this.searchWarehouse(this.form4.sapNumber)
      this.searchReceipt(this.form4.sapNumber)
    },
    /**
       * 获得车间
       */
    getMachineShop1() {
      this.machineShops = []
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
        this.getProductionLine1()
      })
    },
    /**
       * 获得产线
       */
    getProductionLine1() {
      this.productionLines = []
      this.regions = []
      this.equipments = []
      this.form4.equipmentName = ''
      var param = []
      param[0] = ['车间代码', this.form4.workshopValue]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
        this.getRegion1()
      })
    },
    /**
       * 获得工序
       */
    getRegion1() {
      this.regions = []
      this.equipments = []
      this.form4.equipmentName = ''
      var param = []
      param[0] = ['产线代码', this.form4.productionLineValue]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
        this.searchEquipment1()
      })
    },
    // 获得设备
    searchEquipment1() {
      this.equipments = []
      this.form4.equipmentName = ''
      var param = []
      param[0] = ['工序代码', this.form4.procedureValue]
      var Data = this.CreateData('11', '基础数据_设备列表_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.equipments.push({
            name: v.设备名称,
            label: v.设备编号,
            value: v.设备代码
          })
        })
      }).then(() => {
        this.changeEquipment1()
      })
    },
    changeEquipment1() {
      this.form4.equipmentNumber = ''
      this.form4.equipmentName = ''
      for (let i = 0; i < this.equipments.length; i++) {
        if (this.form4.equipmentValue === this.equipments[i].value) {
          this.form4.equipmentNumber = this.equipments[i].label
          this.form4.equipmentName = this.equipments[i].name
        }
      }
    },
    /**
       * 确定修改设备
       */
    submit1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param1 = []
          param1[0] = ['SAP编号', this.form4.sapNumber]
          param1[1] = ['设备编号', this.form4.equipmentNumber]
          param1[2] = ['导入ID', this.machineValue]
          var Data1 = this.CreateData('11', '基础数据_备件_修改_判断重复', param1)
          ExecDatabase(Data1).then(response => {
            if (Number(response.data[0].条数) === 0) {
              var param = []
              param[0] = ['SAP编号', this.form4.sapNumber]
              param[1] = ['物料描述', this.form4.describe]
              param[2] = ['库存地点', this.form4.Location]
              param[3] = ['库存架位', this.form4.rackPosition]
              param[4] = ['SAP库存数量', this.form4.stock]
              param[5] = ['二级帐', this.form4.stock1]
              param[6] = ['单价', this.form4.unitPrice]
              param[7] = ['物料组名称', this.form4.materialGroup]
              param[8] = ['导入ID', this.machineValue]
              param[9] = ['车间代码', this.form4.workshopValue]
              param[10] = ['产线代码', this.form4.productionLineValue]
              param[11] = ['工序代码', this.form4.procedureValue]
              param[12] = ['设备代码', this.form4.equipmentValue]
              var Data = this.CreateData('12', '基础数据_备件_修改', param)
              ExecDatabase(Data).then(response => {
                if (response.data[0].result === '1') {
                  this.$message({
                    message: '信息修改成功',
                    type: 'success'
                  })
                  this.searchTable()
                } else {
                  this.$message.error('信息修改失败')
                }
              })
            } else {
              this.$message.warning('备件信息重复')
            }
          })
        }
      })
    },
    /**
       * 取消编辑
       */
    callOff4(formName) {
      this.isMachineValue = true
      this.machineValue = ''
      this.dialogFormVisible4 = false
      this.$refs[formName].resetFields()
    },
    /**
       * 编辑设备照片
       */
    EditFile() {
      var param = []
      param[0] = ['导入ID', this.machineValue]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      if (this.$refs.uploadEdit.uploadFiles.length > 0) {
        var Data1 = this.CreateData('15', '基础数据_备件_更改图片', param)
        this.Data.param = Data1
        this.$refs.uploadEdit.submit()
      } else {
        console.log('文件为空')
      }
    },
    /**
       * 编辑设备照片成功后
       */
    fileEditSuccess() {
      this.$message({
        message: '照片更改成功',
        type: 'success'
      })
      this.searchTable()
    },
    /**
       * 编辑备件-删除图片
       */
    deleteMachineImg() {
      this.$confirm('此操作将永久删除设备照片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['导入ID', this.machineValue]
        var Data = this.CreateData('12', '基础数据_备件_删除图片', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.imgList = []
            this.imageUrl = ''
            this.searchTable()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
       * 删除备件
       */
    handleDelete(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['导入ID', row.导入ID]
        var Data = this.CreateData('12', '基础数据_备件_删除', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchTable()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
       * 点击上传文件按钮
       */
    openFile() {
      this.fileList = []
      this.activeName2 = '1'
      this.getFileList(1)
    },
    /**
       * 点击上传文件按钮
       */
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    /**
       * 上传设备文件大小限制
       */
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传设备文档大小不能超过 2MB!')
      }
      return isLt2M
    },
    /**
       * 上传设备文件大小限制
       */
    handlePreview(file) {
      console.log(file)
    },
    /**
       * 上传标准文件
       */
    uploadStandFile() {
      var param = []
      var filesType = 1
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['文件类型', filesType]
      param[2] = ['文件名称', '']
      param[3] = ['文件后缀', '']
      param[4] = ['文件内容', null]
      var Data1 = this.CreateData('15', '基础数据_设备_上传文件', param)
      this.Data.param = Data1
      this.$refs.uploadStandFile.submit()
    },
    /**
       * 上传技术文档
       */
    uploadProFile() {
      var param = []
      var filesType = 2
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['文件类型', filesType]
      param[2] = ['文件名称', '']
      param[3] = ['文件后缀', '']
      param[4] = ['文件内容', null]
      var Data1 = this.CreateData('15', '基础数据_设备_上传文件', param)
      this.Data.param = Data1
      this.$refs.uploadProFile.submit()
    },
    /**
       * 上传技术设备文件成功后
       */
    proFileSuccess(res, file) {
      this.fileList = []
      this.getFileList(2)
    },
    /**
       * 上传标准设备文件成功后
       */
    stnFileSuccess(res, file) {
      this.fileList = []
      this.getFileList(1)
    },
    /**
       * 获取设备文件
       */
    getFileList(filesType) {
      this.dialogFormVisible3 = true
      this.loadingFiles = true
      this.tableDataFiles = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['文件类型', filesType]
      var Data = this.CreateData('11', '基础数据_设备_文件查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.tableDataFiles.push({
            参考文档名称: v.参考文档名称,
            参考文档类型: v.参考文档类型,
            参考文档代码: v.参考文档代码
          })
        })
        this.loadingFiles = false
      })
    },
    /**
       * 下载文件
       */
    downloadFiles(row) {
      var param = []
      param[0] = ['参考文档代码', row.参考文档代码]
      var Data = this.CreateData('2004', '基础数据_设备_文件下载', param)
      this.exportExcel_NPOI(Data)
    },
    /**
       * 删除文件
       */
    deleteFile(row, type) {
      this.$confirm('此操作将永久删除此文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['参考文档代码', row.参考文档代码]
        var Data = this.CreateData('12', '基础数据_设备_文件删除', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.getFileList(type)
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
       * 上传文件TAB点击切换
       */
    handleClick(tab, event) {
      this.fileList = []
      if (tab.name === '1') {
        this.getFileList(1)
      } else if (tab.name === '2') {
        this.getFileList(2)
      }
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    handleSizeChange1(val) {
      this.sparePageCurrent = 1
      this.sparePageSize = val
      this.getSpare()
    },
    handleCurrentChange1(val) {
      this.sparePageCurrent = val
      this.getSpare()
    }
  }
}
</script>

<style scoped>
  .machine-divider {
    margin: 5px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .div {
    width: 220px;
    height:45px;
    margin-top: 0px;
    border-bottom: rgb(220,220,220) solid 2px;
    white-space:nowrap;
    word-break:break-all;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
  }
  >>>.el-form--label-top .el-form-item__label {
    padding: 0px;
  }
  >>>.el-dialog__body {
    padding: 0px 30px;
    color: #606266;
    font-size: 20px;
    word-break: break-all;
  }
  >>>.el-tabs__item {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 50px;
  }
</style>

