<template>
  <div class="app-container">
    <el-card style="height: 850px;padding: 0">
      <el-row>
        <div style="margin-top: 7px; margin-bottom: 7px; margin-left: 7px">
          <el-select
            v-model="supplierName"
            style="width:150px; text-align: center"
            placeholder="供应商"
            size="small"
            clearable
            filterable
            @change="pageCurrent=1;searchLeftTable();getContract()">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-select
            v-model="contractValue"
            :remote-method="getContract"
            style="width:150px; text-align: center"
            placeholder="合同号"
            size="small"
            clearable
            filterable
            remote
            @change="pageCurrent=1;searchLeftTable()">
            <el-option
              v-for="item in contract"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-select
            v-model="purchaseState"
            style="width:100px;"
            size="small"
            placeholder="采购状态"
            filterable
            clearable
            @change="pageCurrent=1;searchLeftTable()">
            <el-option
              v-for="item in purchaseStates"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-button type="success" size="mini" style="margin-left: 100px" @click="exportExcel()">导出</el-button>
        </div>
        <el-row style="display: flex">
          <el-col style="margin-left: 7px;width: 571px">
            <!--        <el-card>-->
            <div>
              <el-table
                v-loading="loading"
                ref="table1"
                :data="ProductionPick"
                :summary-method="getSummaries1"
                highlight-current-row
                border
                show-summary
                stripe
                size="mini"
                height="750"
                @row-click="searchTable">
                <el-table-column width="60px" label="状态" align="center" show-overflow-tooltip prop="">
                  <template slot-scope="scope">
                    {{ scope.row.采购状态 }}
                  </template>
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="采购合同号"
                  align="center"
                  show-overflow-tooltip
                  prop="采购合同号">
                  <template slot-scope="scope">
                    {{ scope.row.采购合同号 }}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="setColumnWidth('供应商')"
                  label="供应商"
                  align="center"
                  show-overflow-tooltip
                  prop="供应商">
                  <template slot-scope="scope">
                    {{ scope.row.供应商 }}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="setColumnWidth('数量')"
                  label="采购金额"
                  align="center"
                  show-overflow-tooltip
                  prop="采购金额">
                  <template slot-scope="scope">
                    {{ scope.row.采购金额 ? Number(scope.row.采购金额).toFixed(2) : '' }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('姓名')" label="采购员" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.采购员 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('日期')" label="付款时间" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.付款日期 }}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="setColumnWidth('数量')"
                  label="付款金额"
                  align="center"
                  show-overflow-tooltip
                  prop="付款金额">
                  <template slot-scope="scope">
                    {{ scope.row.付款金额 ? Number(scope.row.付款金额).toFixed(2) : '' }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('日期')" label="审核时间" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.审核时间 }}
                  </template>
                </el-table-column>
                <el-table-column width="120px" label="操作" align="center" show-overflow-tooltip fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-printer"
                      @click="exportTable(scope.row)"/>
                    <el-tooltip :open-delay="700" effect="dark" content="删除合同" placement="top">
                      <el-button
                        :disabled="Number(scope.row.是否提交) !== 0 && Number(scope.row.审批情况流水号)===1"
                        type="text"
                        icon="el-icon-delete"
                        size="mini"
                        @click="deleteContract(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip :open-delay="700" effect="dark" content="打回合同" placement="top">
                      <el-button
                        :disabled="!(Number(scope.row.是否提交)===1 && Number(scope.row.审批情况流水号)===3)"
                        type="text"
                        icon="el-icon-right"
                        size="mini"
                        @click="backContract(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip :open-delay="700" effect="dark" content="查看图片" placement="top">
                      <el-button
                        :disabled="Number(scope.row.是否有图片)===0"
                        size="mini"
                        type="text"
                        icon="el-icon-picture-outline"
                        @click="handlePicture(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip :open-delay="700" effect="dark" content="上传图片" placement="top">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-circle-plus-outline"
                        @click="updatePicture(scope.row)"/>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block" style="margin-top: 10px;">
                <el-pagination
                  :current-page="pageCurrent"
                  :page-sizes="[10, 20, 30, 50, 100]"
                  :page-size="pageSize"
                  :total="total"
                  :pager-count="5"
                  layout="total, prev, pager, next"
                  @size-change="handleSizeChanges"
                  @current-change="handleCurrentChanges"/>
              </div>
            </div>
            <!--            </el-card>-->
          </el-col>
          <el-col style="margin-left: 10px;width:1081px ">
            <!--            <el-card>-->
            <div>
              <el-table
                v-loading="loading"
                ref="table"
                :data="tableData"
                :header-cell-style="{background: '#2283D4',color: 'white'}"
                :summary-method="getSummaries"
                highlight-current-row
                show-summary
                border
                stripe
                size="mini"
                style="width: 1071px"
                height="750"
              >
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  align="center"/>
                <el-table-column width="60px" label="状态" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.采购状态 }}
                  </template>
                </el-table-column>
                <el-table-column width="170px" 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"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.图号或型号 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('材料')" label="材料" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.材料 }}
                  </template>
                </el-table-column>
                <el-table-column width="90px" label="到货时间" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.采购到货时间 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('数量')" label="采购数" align="center" prop="采购数">
                  <template slot-scope="scope">
                    {{ scope.row.采购数 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('数量')" label="到货数" align="center" prop="采购数">
                  <template slot-scope="scope">
                    {{ scope.row.到货数 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('数量')" label="退货数" align="center" prop="退货数">
                  <template slot-scope="scope">
                    {{ scope.row.退货数量 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('单位')" label="单位" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.单位 }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('单价')" label="单价（元）" align="center" prop="单价">
                  <template slot-scope="scope">
                    {{ scope.row.单价 ? Number(scope.row.单价).toFixed(2) : '' }}
                  </template>
                </el-table-column>
                <el-table-column width="100px" label="金额" align="center" show-overflow-tooltip prop="金额">
                  <template slot-scope="scope">
                    {{ scope.row.金额 ? Number(scope.row.金额).toFixed(2) : '' }}
                  </template>
                </el-table-column>
                <el-table-column :width="setColumnWidth('图号/规格')" label="工艺" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.工艺 }}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="setColumnWidth('采购备注')"
                  label="采购备注"
                  align="center"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.采购备注 }}
                  </template>
                </el-table-column>
                <el-table-column width="200px" label="产品详情" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.产品详情 }}
                  </template>
                </el-table-column>
                <el-table-column width="150px" label="订单备注" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.订单备注 }}
                  </template>
                </el-table-column>
                <el-table-column width="120px" label="操作" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="editProduct(scope.row)">编辑
                    </el-button>
                    <el-button
                      :disabled="scope.row.图纸 === null"
                      type="text"
                      icon="el-icon-search"
                      size="mini"
                      @click="getNum(scope.row)">图纸
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-card>
    <el-card v-show="false">
      <div style="width:900px;margin-left: 350px">
        <el-card>
          <div id="WGBLD" style="width: 880px;margin: 0 auto">
            <div style="width: 121px;margin: 0 auto">
              <span style="font-size: 25px">采 购 合 同</span>
            </div>
            <table cellspacing="0px" align="center" border="1 solid black" width="100%">
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 14%">供方单位：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ supplier }}</td>
                <td colspan="2" style="text-align: center;width: 10%">供方联系人：</td>
                <td colspan="3" style="text-align: center;width: 14%">{{ supplierPeople }}</td>
                <td colspan="2" style="text-align: center;width: 18%">供方电话/传真：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ supplierPhone }}</td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 14%">需方单位：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ demand }}</td>
                <td colspan="2" style="text-align: center;width: 14%">需方联系人：</td>
                <td colspan="3" style="text-align: center;width: 14%">{{ consignee }}</td>
                <td colspan="2" style="text-align: center;width: 14%">需方电话/传真：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ receiverTelephoneNumber }}</td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 14%">订单编号：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ orderNumber }}</td>
                <td colspan="2" style="text-align: center;width: 14%">下单日期：</td>
                <td colspan="3" style="text-align: center;width: 14%">{{ orderDate }}</td>
                <td colspan="2" style="text-align: center;width: 14%">要求交货日期：</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ deliveryDate }}</td>
              </tr>
              <tr style="height: 35px">
                <td colspan="1" rowspan="1" style="text-align: center;width: 7%">序号</td>
                <td colspan="4" rowspan="1" style="text-align: center;width: 29%">产品名称/图号</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 7%">数量</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 7%">单位</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 7%">单价</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 14%">材质要求</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 14%">到货日期</td>
                <td colspan="3" rowspan="1" style="text-align: center;width: 22%">备注</td>
              </tr>
              <tr v-for="(list, index) in returns" :key="index" style="height: 35px">
                <td colspan="1" style="text-align: center;width: 7%">{{ list.序号 }}</td>
                <td colspan="4" style="text-align: center;width: 29%">{{ list.产品名称 }}&nbsp;&nbsp;/{{
                  list.图号或型号
                }}
                </td>
                <td colspan="1" style="text-align: center;width: 7%">{{ list.数量 }}</td>
                <td colspan="1" style="text-align: center;width: 7%">{{ list.单位 }}</td>
                <td colspan="1" style="text-align: center;width: 7%">{{ list.单价 }}</td>
                <td colspan="2" style="text-align: center;width: 14%">{{ list.材质要求 }}</td>
                <td colspan="2" style="text-align: center;width: 14%">{{ list.采购到货时间 }}</td>
                <td colspan="3" style="text-align: center;width: 22%">{{ list.备注 }}</td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 20%">交货条件</td>
                <td colspan="13" style="width: 80%">
                  供方提供送货单、质检报告单。需方按供方提交的单据完成货物验收。如有异议，及时反馈
                </td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 20%">交货地址</td>
                <td colspan="13" style="width: 80%">联系人：{{ consignee }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;交货地点：浙江省台州市路桥区蓬街镇环镇西路99号<br>联系电话：{{
                  receiverTelephoneNumber
                }}
                </td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 20%">供方确认</td>
                <td colspan="13" style="width: 80%">交货日期：{{ people }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;托运方式：供方陆运<br>此采购订单要求供方于接单后两个工作日内确认回复需方即生效。
                </td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" style="text-align: center;width: 20%">注意事项</td>
                <td colspan="13" style="width: 80%">1.订购的产品工艺要求与需方提供的图纸内注明的要求不一致的，以此采购订单为准。<br>2.此采购订单为供需双方订立购销合同的具体履行方式，未经双方协商并书面确认的变更、取消、推延，一律无效。
                </td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" rowspan="2" style="text-align: center;width: 14%"/>
                <td colspan="1" rowspan="1" style="text-align: center;width: 8%">供方：</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 14%">{{ people }}</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 8%">日期：</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 13%">{{ people }}</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 8%">需方：</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 14%">{{ people }}</td>
                <td colspan="1" rowspan="1" style="text-align: center;width: 8%">日期：</td>
                <td colspan="2" rowspan="1" style="text-align: center;width: 13%">{{ people }}</td>
              </tr>
              <tr style="height: 40px">
                <td colspan="2" rowspan="1" style="text-align: center;width: 17%">签字/盖章</td>
                <td colspan="4" rowspan="1" style="text-align: center;width: 26%"/>
                <td colspan="2" rowspan="1" style="text-align: center;width: 17%">签字/盖章</td>
                <td colspan="4" rowspan="1" style="text-align: center;width: 26%"/>
              </tr>
            </table>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="图片" center style="" width="560px">
      <div v-for="(url, key) in urls" :key="key" style="margin-bottom: 25px">
        <!--        <div class="action">-->
        <!--          <a class="delete" @click="deleteFileData1(url.id)">删除</a>-->
        <!--        </div>-->
        <el-button
          type="danger"
          size="mini"
          style="float: right;margin-bottom: 5px;margin-right: 10px"
          @click="deleteFileData1(url.id)">删除
        </el-button>
        <el-image :key="url.url" :src="url.url" :preview-src-list="urls1" lazy style="width: 500px; height: 500px"/>
      </div>

    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible2"
      title="上传图片"
      center
      style="height: 800px"
      width="30%">
      <el-upload
        id="invoiceScan"
        ref="upload"
        :multiple="true"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-preview="handlePictureCardPreview"
        :before-upload="beforeUpload"
        :on-exceed="warningExceed"
        :limit="limit"
        :data="Data"
        :action="upload"
        style="margin-left: 60px"
        list-type="picture-card">
        <i class="el-icon-plus"/>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2=false">取消</el-button>
        <el-button type="primary" style="width: 70px" @click="submitPicture()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisiblePictureCard">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible3" title="编辑" center width="360px">
      <el-form ref="form" :model="form" label-position="center" label-width="100px" class="demo-ruleForm">
        <el-form-item label="单价">
          <el-input v-model="form.单价" style="width:150px;" type="number" size="small" clearable/>
        </el-form-item>
        <el-form-item label="采购备注">
          <el-input v-model="form.备注" style="width:150px;" size="small" clearable/>
        </el-form-item>
        <el-form-item label="工艺">
          <el-input v-model="form.工艺" style="width:150px;" size="small" clearable/>
        </el-form-item>
        <el-form-item label="采购到货时间">
          <el-date-picker
            v-model="form.采购到货时间"
            size="small"
            align="center"
            style="width: 150px"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible3=false">取消</el-button>
        <el-button type="distribution" size="small" @click="submitUpdate()">确定</el-button>
      </div>
    </el-dialog>
    <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>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $ from 'jquery'
import request, { MESDownloadFile, url } from '@/utils/request'

export default {
  data() {
    return {
      dialogVisible: false,
      hadFile: [],
      dialogVisiblePictureCard: false,
      dialogImageUrl: '',
      purchaseContractID: '', // 采购合同流水号
      supplier: '',
      supplierPeople: '',
      supplierPhone: '',
      demand: '浙江景耀数控科技有限公司',
      demandPeople: '吴新荣',
      demandPhone: '13957667687',
      orderNumber: '',
      orderDate: '',
      deliveryDate: '',
      returns: [],
      people: '',
      purchaseStates: [],
      purchaseState: '',
      suppliers: [],
      supplierName: '',
      contractValue: '',
      contract: [],
      dialogFormVisible: false, // 查看图片
      dialogFormVisible2: false, // 增加图片
      dialogFormVisible3: false, // 查看图片
      materialValue: '',
      purchaseType: '',
      form: {
        单价: '',
        备注: '',
        工艺: '',
        采购到货时间: ''
      },
      urls: [], // 图片数组
      urls1: [], // 图片数组
      limit: 20,
      Data: {},
      upload: url,
      consignee: '',
      receiverTelephoneNumber: '',
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData: [], // 合同信息表
      ProductionPick: [],
      pageCurrent: 1, // 分页当前页
      pageSize: 50, // 分页每页显示条数
      orderName: '', // 排序列名
      purchaseContractSerialNumber: '',
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
    this.$nextTick(() => {
      this.$refs['table1'].doLayout()
    })
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 查看零件图
    getNum(row) {
      this.dialogVisible = true
      this.getFileList(row.图号或型号)
    },
    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
              })
            })
          }
        })
      }
    },
    editProduct(row) {
      this.form.单价 = row.单价
      this.form.备注 = row.采购备注
      this.form.工艺 = row.工艺
      this.form.采购到货时间 = row.采购到货时间
      this.purchaseType = row.是否耗材采购
      this.materialValue = row.采购合同明细流水号
      this.dialogFormVisible3 = true
    },
    submitUpdate() {
      var param = []
      param[0] = ['采购合同明细流水号', this.materialValue]
      param[1] = ['是否耗材采购', this.purchaseType]
      param[2] = ['单价', this.form.单价]
      param[3] = ['备注', this.form.备注]
      param[4] = ['工艺', this.form.工艺]
      param[5] = ['采购到货时间', this.form.采购到货时间]
      var Data = this.CreateData('12', '采购管理_采购合同明细_编辑', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
          var param = []
          param[0] = ['采购合同流水号', this.purchaseContractID]
          var Data = this.CreateData('11', '采购管理_采购合同明细_全部_查询数据', param)
          this.ExecDatabase(Data).then(response => {
            console.log('李显', response.data)
            this.tableData = response.data
            this.orderNumber = response.data[0].订单号
            this.orderDate = response.data[0].采购日期
            this.deliveryDate = response.data[0].交货日期
            this.returns = []
            for (let i = 0; i < response.data.length; i++) {
              this.returns.push({
                序号: i + 1,
                产品名称: response.data[i].采购件,
                图号或型号: response.data[i].图号或型号,
                数量: response.data[i].采购数,
                单位: response.data[i].单位,
                单价: response.data[i].单价,
                材质要求: response.data[i].材料,
                采购到货时间: response.data[i].采购到货时间,
                备注: response.data[i].采购备注
              })
            }
          })
          this.dialogFormVisible3 = false
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    deleteFileData1(id) {
      // console.log(id, '图片iad')
      var param = []
      param[0] = ['id', id]
      var Data = this.CreateData('12', '采购合同查询_图片_删除', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('图片删除成功')
          this.urls = []
          this.urls1 = []
          var param1 = []
          param1[0] = ['采购合同流水号', this.purchaseContractSerialNumber]
          var Data1 = this.CreateData('11', '采购合同查询_图片_查询数据', param1)
          this.ExecDatabase(Data1).then(response => {
            for (let i = 0; i < response.data.length; i++) {
              if (response.data[i].文件内容 !== null) {
                this.urls.push({
                  url: 'data:image/png;base64,' + response.data[i].文件内容,
                  id: response.data[i].id
                })
                this.urls1.push('data:image/png;base64,' + response.data[i].文件内容)
              }
            }
          })
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    handlePicture(row) {
      this.dialogFormVisible = true
      this.purchaseContractSerialNumber = row.采购合同流水号
      this.urls = []
      this.urls1 = []
      var param = []
      param[0] = ['采购合同流水号', row.采购合同流水号]
      var Data = this.CreateData('11', '采购合同查询_图片_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].文件内容 !== null) {
            this.urls.push({
              url: 'data:image/png;base64,' + response.data[i].文件内容,
              id: response.data[i].id
            })
            this.urls1.push('data:image/png;base64,' + response.data[i].文件内容)
          }
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePictureCard = true
    },
    fetchData() {
      this.getSuppliers()
      this.getState()
      this.getContract('')
      this.searchLeftTable()
      this.searchCompanyInformation()
    },
    searchCompanyInformation() {
      var param = []
      var Data = this.CreateData('11', '基础表_公司信息维护表_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.consignee = response.data[0].收货人
        this.receiverTelephoneNumber = response.data[0].收货人电话
      })
    },
    exportExcel() {
      if (this.ProductionPick.length !== 0) {
        let supplierName_check, contractValue_check, purchaseState_check
        this.supplierName ? supplierName_check = 1 : supplierName_check = 0
        this.contractValue ? contractValue_check = 1 : contractValue_check = 0
        this.purchaseState ? purchaseState_check = 1 : purchaseState_check = 0
        var param = []
        param[0] = ['供应商流水号_check', supplierName_check]
        param[1] = ['供应商流水号', this.supplierName]
        param[2] = ['采购合同_check', contractValue_check]
        param[3] = ['采购合同流水号', this.contractValue]
        param[4] = ['采购状态_check', purchaseState_check]
        param[5] = ['采购状态', this.purchaseState]
        param[6] = ['排序名称', this.orderName]
        param[7] = ['排序方式', this.order]
        var Data = this.CreateData('2001', '报表_采购管理_采购合同_全部_查询数据', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    warningExceed() {
      this.$message.error('仅可上传五张照片')
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片。。')
      }
      return isJPG
    },
    uploadSuccess(res) { // 上传成功回调
      this.dialogFormVisible2 = false
      this.$refs.upload.clearFiles()
    },
    updatePicture(row) {
      this.dialogFormVisible2 = true
      this.purchaseContractID = row.采购合同流水号
    },
    submitPicture() {
      var param = []
      param[0] = ['采购合同流水号', this.purchaseContractID]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      var Data1 = this.CreateData('15', '采购合同查询_上传图片', param)
      this.Data.param = Data1
      this.$refs.upload.submit()
      this.dialogFormVisible2 = false
    },
    exportTable(row) {
      this.supplier = row.供应商
      this.supplierPeople = row.供应商联系人
      this.supplierPhone = row.供方电话
      var param = []
      param[0] = ['采购合同流水号', row.采购合同流水号]
      var Data = this.CreateData('11', '采购管理_采购合同明细_全部_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        console.log('李显', response.data)
        this.orderNumber = response.data[0].订单号
        this.orderDate = response.data[0].采购日期
        this.deliveryDate = response.data[0].交货日期
        this.returns = []
        for (let i = 0; i < response.data.length; i++) {
          this.returns.push({
            序号: i + 1,
            产品名称: response.data[i].采购件,
            图号或型号: response.data[i].图号或型号,
            数量: response.data[i].采购数,
            单位: response.data[i].单位,
            单价: response.data[i].单价,
            材质要求: response.data[i].材料,
            采购到货时间: response.data[i].采购到货时间,
            备注: response.data[i].采购备注
          })
        }
      }).then(() => {
        const htmlNode = $('#WGBLD').html()
        const body = $('body')
        body.children().hide()
        const printNode = $(htmlNode)
        body.append(printNode)
        window.print()
        body.children().not('script').show()
        body.children().not('#app').hide()
        printNode.remove()
      })
    },
    getSuppliers() {
      var param = []
      var Data = this.CreateData('11', '供应商_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.suppliers.push({
            label: response.data[i].供应商名称,
            value: response.data[i].供应商流水号
          })
        }
      })
    },
    getContract(query) {
      this.contract = []
      let supplierName_check
      this.supplierName ? supplierName_check = 1 : supplierName_check = 0
      var param = []
      param[0] = ['供应商流水号_check', supplierName_check]
      param[1] = ['供应商流水号', this.supplierName]
      param[2] = ['采购合同编号', query]
      var Data = this.CreateData('11', '仓储管理_采购合同_通过供应商查询_BAK', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.contract.push({
            label: response.data[i].采购合同编号,
            value: response.data[i].采购合同流水号
          })
        }
      })
    },
    getState() {
      var param = []
      var Data = this.CreateData('11', '采购管理_采购合同查询_采购状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.purchaseStates.push({
            label: response.data[i].采购状态名称,
            value: response.data[i].采购状态流水号
          })
        }
      })
    },
    searchLeftTable() {
      this.tableData = []
      let supplierName_check, contractValue_check, purchaseState_check
      this.supplierName ? supplierName_check = 1 : supplierName_check = 0
      this.contractValue ? contractValue_check = 1 : contractValue_check = 0
      this.purchaseState ? purchaseState_check = 1 : purchaseState_check = 0
      var param = []
      param[0] = ['供应商流水号_check', supplierName_check]
      param[1] = ['供应商流水号', this.supplierName]
      param[2] = ['采购合同_check', contractValue_check]
      param[3] = ['采购合同流水号', this.contractValue]
      param[4] = ['采购状态_check', purchaseState_check]
      param[5] = ['采购状态', this.purchaseState]
      param[6] = ['排序名称', this.orderName]
      param[7] = ['排序方式', this.order]
      var Data = this.CreateData('11', '采购管理_采购合同_全部_查询数据', param, this.pageSize, this.pageCurrent)
      this.ExecDatabase(Data).then(response => {
        this.ProductionPick = response.data.rows
        console.log('合同列表查询', this.ProductionPick)
        this.total = response.data.total
      })
    },
    searchTable(row) {
      this.purchaseContractID = row.采购合同流水号
      this.supplier = row.供应商
      this.supplierPeople = row.供应商联系人
      this.supplierPhone = row.供方电话
      var param = []
      param[0] = ['采购合同流水号', row.采购合同流水号]
      var Data = this.CreateData('11', '采购管理_采购合同明细_全部_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        console.log('李显', response.data)
        this.tableData = response.data
        this.orderNumber = response.data[0].订单号
        this.orderDate = response.data[0].采购日期
        this.deliveryDate = response.data[0].交货日期
        this.returns = []
        for (let i = 0; i < response.data.length; i++) {
          this.returns.push({
            序号: i + 1,
            产品名称: response.data[i].采购件,
            数量: response.data[i].采购数,
            单位: response.data[i].单位,
            单价: response.data[i].单价,
            材质要求: response.data[i].材料,
            采购到货时间: response.data[i].采购到货时间,
            备注: response.data[i].采购备注
          })
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 6) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index]
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 7) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 9) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 10) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    getSummaries1(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 3) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 6) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    deleteContract(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['采购合同流水号', row.采购合同流水号]
        var Data = this.CreateData('12', '采购管理_采购合同_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchLeftTable()
            this.tableData = []
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    backContract(row) {
      this.$confirm('是否打回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['采购合同流水号', row.采购合同流水号]
        var Data = this.CreateData('12', '采购管理_采购合同_打回', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('打回成功')
            this.searchLeftTable()
            this.tableData = []
          } else {
            this.$message.error('打回失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    sortChange(column) {
      if (column.prop === '状态') {
        this.orderName = 1
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') {
        this.order = 2
      } else {
        this.order = ''
      }
      this.searchTable()
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchLeftTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchLeftTable()
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-button + .el-button {
  margin-left: 0px !important;
}
</style>
<style scoped>
.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>
