<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="采购部采购" name="first">
        <el-card>
          <span>采购合同编号:</span>
          <el-select v-model="ContractValue" filterable clearable size="small" placeholder="采购合同" style="width: 200px">
            <el-option
              v-for="item in Contract"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span class="demonstration">入库日期</span>
          <el-date-picker
            v-model="InboundDate"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"/>
          <span>仓库:</span>
          <el-select v-model="InventoryValue" filterable clearable size="small" placeholder="仓库" style="width: 200px">
            <el-option
              v-for="item in Inventory"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchPartinfo()">查询</el-button>
        </el-card>
        <el-card>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            size="mini"
            border
            style="width: 100%;"
            height="400"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55"/>
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50"/>
            <el-table-column label="存货名称" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料名称 }}
              </template>
            </el-table-column>
            <el-table-column label="物料规格" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料规格 }}
              </template>
            </el-table-column>
            <el-table-column label="物料型号" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料型号 }}
              </template>
            </el-table-column>
            <el-table-column label="零件图号" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.实际到货数量 }}
              </template>
            </el-table-column>
            <el-table-column label="本币单价" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.单价 }}
              </template>
            </el-table-column>
            <el-table-column label="本币总价" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.单价 * scope.row.实际到货数量 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="车间采购" name="second">
        <el-card>
          <span>采购合同编号:</span>
          <el-select v-model="ShopContractValue" filterable clearable size="small" placeholder="采购合同" style="width: 200px">
            <el-option
              v-for="item in ShopContract"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span class="demonstration">入库日期</span>
          <el-date-picker
            v-model="InboundDate"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"/>
          <span>仓库:</span>
          <el-select v-model="InventoryValue" filterable clearable size="small" placeholder="仓库" style="width: 200px">
            <el-option
              v-for="item in Inventory"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchShopinfo()">查询</el-button>
        </el-card>
        <el-card>
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            size="mini"
            border
            style="width: 100%;"
            height="400"
            @selection-change="handleSelectionChange2">
            <el-table-column type="selection" align="center" width="55"/>
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50"/>
            <el-table-column label="存货名称" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料名称 }}
              </template>
            </el-table-column>
            <el-table-column label="物料规格" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料规格 }}
              </template>
            </el-table-column>
            <el-table-column label="物料型号" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.物料型号 }}
              </template>
            </el-table-column>
            <el-table-column label="零件图号" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.实际到货数量 }}
              </template>
            </el-table-column>
            <el-table-column label="本币单价" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.单价 }}
              </template>
            </el-table-column>
            <el-table-column label="本币金额" align="center" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.单价 * scope.row.实际到货数量 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card>
      <span style="margin: 5px">入库单编号</span>
      <el-input v-model="inboundCardNumber" clearable size="small" style="width:200px" />
      <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchInboundCard1()">查询</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" style="margin: 0 0 0 10px" @click="addCard()">创建</el-button>
      <el-button size="small" type="primary" icon="el-icon-arrow-down" style="margin: 0 0 0 10px" @click="InboundCardDetail()">选入</el-button>
    </el-card>
    <el-card>
      <el-table
        v-loading="listLoading3"
        :data="tableData3"
        border
        style="width: 100%;"
        size="mini"
        height="200"
        @row-click = "searchDetail">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column label="入库单号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.入库单号 }}
          </template>
        </el-table-column>
        <el-table-column label="入库日期" align="center" min-width="100" >
          <template slot-scope="scope" value-format="yyyy-MM-dd">
            {{ scope.row.入库日期 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="合同编号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.采购合同编号 }}
          </template>
        </el-table-column>
        <el-table-column label="到货单号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.到货单号 }}
          </template>
        </el-table-column>
        <el-table-column label="到货日期" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.到货日期 }}
          </template>
        </el-table-column>
        <el-table-column label="业务号" align="center" min-width="60">
          <template slot-scope="scope">
            {{ scope.row.业务号 }}
          </template>
        </el-table-column>
        <el-table-column label="供应商" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.供应商名称 }}
          </template>
        </el-table-column>
        <el-table-column label="业务员" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="业务类型" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.业务类型 }}
          </template>
        </el-table-column>
        <el-table-column label="采购类型" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.采购类型 }}
          </template>
        </el-table-column>
        <el-table-column label="入库类别" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.入库类别 }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="300px">
          <template slot-scope="scope" align="center">
            <el-button size="small" type="primary" icon="el-icon-edit" style="margin: 0 0 0 10px" @click="editInboundCardInfor(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" style="margin: 0 0 0 10px" @click="dropCard(scope.row)">删除</el-button>
            <el-button size="small" type="warning" icon="el-icon-download" style="margin: 0 0 0 10px" @click="exportCard(scope.row)">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent3"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :total="total3"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"/>
      </div>
      <el-table
        v-loading="listLoading4"
        id = "cardDetail"
        :data="tableData4"
        :summary-method="calculateContractSum"
        :show-summary="true"
        border
        style="width: 100%;"
        size="mini"
        height="200">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column label="名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.名称 }}
          </template>
        </el-table-column>
        <el-table-column label="物料型号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.型号 }}
          </template>
        </el-table-column>
        <el-table-column label="物料规格" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.规格 }}
          </template>
        </el-table-column>
        <el-table-column label="零件图号" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.图号 }}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" min-width="100" prop="数量">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column label="本币单价" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.本币单价 }}
          </template>
        </el-table-column>
        <el-table-column label="本币金额" align="center" min-width="100" prop="sum">
          <template slot-scope="scope">
            {{ scope.row.sum = scope.row.本币单价 * scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="80">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.是否出库" size="small" type="danger" icon="el-icon-delete" style="margin: 0 0 10px 10px" @click="dropCarddetail(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisibleExport" center style="min-height: 300px" width="60%">
      <el-card>
        <div id="print">
          <div style="text-align: center">
            <h2>采 购 入 库 单</h2>
            <hr>
            <table class="tgClass" style="table-layout: fixed; width: 820px;margin: auto">
              <colgroup>
                <col style="width: 120px">
                <col style="width: 250px">
                <col style="width: 110px">
                <col style="width: 100px">
                <col style="width: 120px">
                <col style="width: 120px">
              </colgroup>
              <tr>
                <td class="tg-s268">入库单号:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[0] }}</td>
                <td class="tg-0lax">入库日期:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[1] }}</td>
                <td class="tg-0lax">仓库名称:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[2] }}</td>
              </tr>
              <tr>
                <td class="tg-0lax">订单编号:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[3] }}</td>
                <td class="tg-0lax">到货单号:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[4] }}</td>
                <td class="tg-0lax">业务编号:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[5] }}</td>
              </tr>
              <tr>
                <td class="tg-0lax">供货单位:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[6] }}</td>
                <td class="tg-0lax">部门名称:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[7] }}</td>
                <td class="tg-0lax">业务人员:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[8] }}</td>
              </tr>
              <tr>
                <td class="tg-0lax">到货日期:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[9] }}</td>
                <td class="tg-0lax">业务类型:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[10] }}</td>
                <td class="tg-0lax">采购类型:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[11] }}</td>
              </tr>
              <tr>
                <td class="tg-0lax">入库类别:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[12] }}</td>
                <td class="tg-0lax">备注信息:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[13] }}</td>
                <td class="tg-0lax"/>
                <td class="tg-0lax"/>
              </tr>
            </table>
          </div>
          <div style="margin-top: 10px">
            <table class="tg" style="table-layout: fixed; width: 820px; margin: auto">
              <colgroup>
                <col style="width: 150px">
                <col style="width: 150px">
                <col style="width: 120px">
                <col style="width: 100px">
                <col style="width: 100px">
                <col style="width: 100px">
                <col style="width: 100px">
              </colgroup>
              <tr>
                <th class="tg-c3ow">存货编码</th>
                <th class="tg-c3ow">存货名称</th>
                <th class="tg-c3ow">规格型号</th>
                <th class="tg-baqh">零件图号</th>
                <th class="tg-c3ow">数量</th>
                <th class="tg-c3ow">本币单价</th>
                <th class="tg-c3ow">本币金额</th>
              </tr>
              <tr v-for="(list, index) in tableData4" :key="index">
                <td class="tg-c3ow">{{ index + 1 }}</td>
                <td class="tg-c3ow">{{ list.名称 }}</td>
                <td class="tg-c3ow">{{ list.规格 }}</td>
                <td class="tg-baqh">{{ list.零件图号 }}</td>
                <td class="tg-c3ow">{{ list.数量 }}</td>
                <td class="tg-c3ow">{{ list.本币单价 }}</td>
                <td class="tg-c3ow">{{ list.本币单价 * parseInt(list.数量) }}</td>
              </tr>
              <tr>
                <td class="tg-c3ow"/>
                <td class="tg-c3ow"/>
                <td class="tg-c3ow"/>
                <td class="tg-baqh">合计</td>
                <td class="tg-c3ow">{{ inbondCard[14] }}</td>
                <td class="tg-c3ow">总价</td>
                <td class="tg-c3ow">{{ inbondCard[15] }}</td>
              </tr>
            </table>
          </div>
          <div style="margin-top: 20px; text-align: right">
            <span style="margin-right: 50px">制单人:{{ '李鑫' }}</span>
            <span style="margin-right: 50px">审核人:{{ '李鑫' }}</span>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleExport=false">取消</el-button>
        <el-button type="primary" size="small" @click="printCard">打印</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" title="增加采购入库单" center style="min-height: 300px" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contract">
              <el-select v-model="form.contract" filterable clearable size="small" placeholder="采购合同" style="width: 200px">
                <el-option
                  v-for="item in Contract"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="house">
              <el-select v-model="form.house" filterable clearable size="small" placeholder="仓库" style="width: 200px">
                <el-option
                  v-for="item in Inventory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库日期" prop="inboundDay">
              <el-date-picker v-model="form.inboundDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" style="width: 200px" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到货单号" prop="到货单号">
              <el-input v-model="form.arrive" placeholder="到货单号" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务号" prop="业务号">
              <el-input v-model="form.affair" placeholder="业务号" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员" prop="业务员">
              <el-select v-model="form.affairPeople" filterable clearable style="width: 200px" size="small" placeholder="业务员">
                <el-option
                  v-for="item in People"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="到货日期" prop="到货日期">
              <el-date-picker v-model="form.arriveDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 200px" size="small" type="date" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="业务类型">
              <el-input v-model="form.affirType" placeholder="业务类型" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购类型" prop="采购类型">
              <el-input v-model="form.purchaseType" placeholder="采购类型" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="备注">
              <el-input v-model="form.note" placeholder="备注" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库类别" prop="入库类别">
              <el-input v-model="form.inboundType" placeholder="入库类别" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitCard('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" title="修改采购入库单" center style="min-height: 300px" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contract">
              <el-select v-model="form.contract" filterable clearable size="small" placeholder="采购合同" style="width: 200px">
                <el-option
                  v-for="item in Contract"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="house">
              <el-select v-model="form.house" filterable clearable size="small" placeholder="仓库" style="width: 200px">
                <el-option
                  v-for="item in Inventory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库日期" prop="inboundDay">
              <el-date-picker v-model="form.inboundDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" style="width: 200px" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到货单号" prop="到货单号">
              <el-input v-model="form.arrive" placeholder="到货单号" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务号" prop="业务号">
              <el-input v-model="form.affair" placeholder="业务号" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员" prop="业务员">
              <el-select v-model="form.affairPeople" filterable clearable style="width: 200px" size="small" placeholder="业务员">
                <el-option
                  v-for="item in People"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="到货日期" prop="到货日期">
              <el-date-picker v-model="form.arriveDay" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 200px" size="small" type="date" placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="业务类型">
              <el-input v-model="form.affirType" placeholder="业务类型" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购类型" prop="采购类型">
              <el-input v-model="form.purchaseType" placeholder="采购类型" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库类型" prop="入库类型">
              <el-input v-model="form.inboundType" placeholder="入库类型" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="备注">
              <el-input v-model="form.note" placeholder="备注" style="width: 200px" size="small" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible2=false">取消</el-button>
        <el-button type="primary" size="small" @click="submitInboundCardInfor('form')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchContract, searchInventory, searchInbound, searchShopInbound, searchInboundCard, addInboundCard, searchAffairPeople, addInboundCardDetail, searchInboundCardDetail, deleteInboundCardDetail, searchShopContract, editInboundCard, deleteInboundCard } from '@/api/Inventory/InboundCard'
import { mapGetters } from 'vuex'
import $ from 'jquery'

export default {
  data() {
    return {
      Contract: [], // 采购合同
      ShopContract: [], // 车间采购合同
      ContractValue: '',
      ShopContractValue: '', // 车间采购合同流水号
      Inventory: [],
      InventoryValue: '',
      InboundDate: '',
      listLoading: '',
      tableData: [],
      activeName: 'first',
      listLoading2: '',
      tableData2: [],
      listLoading3: '',
      CardNumber: '', // 采购入库单流水号
      inboundCardNumber: '',
      inboundCardNumber_check: '',
      tableData3: [],
      listLoading4: '',
      tableData4: [],
      dialogVisible1: false,
      dialogVisible2: false,
      People: [],
      form: {
        contract: '',
        house: '',
        inboundDay: '',
        arrive: '',
        affair: '',
        affairPeople: '',
        arriveDay: '',
        affirType: '',
        purchaseType: '',
        inboundType: '',
        note: ''
      },
      rules: { // 表单验证规则
        contract: [{ required: true, message: '请选择合同', trigger: 'blur' }],
        house: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
        inboundDay: [{ required: true, message: '请输入入库日期', trigger: 'blur' }]
      },
      nameGroup: [],
      modelGroup: [],
      specificationGroup: [],
      paintGroup: [],
      numberGroup: [],
      priceGroup: [],
      DetailNumber: '',
      CardDetailNumber: '', // 入库单明细流水号
      contractSum: '',
      total: 0,
      pageCurrent: 1,
      pageSize: 10,
      total2: 0,
      pageCurrent2: 1,
      pageSize2: 10,
      total3: 0,
      pageCurrent3: 1,
      pageSize3: 10,
      dialogVisibleExport: false,
      inbondCard: []
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchContractData()
    this.searchInventoryData()
  },
  methods: {
    searchContractData() { // 查询合同
      searchContract().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Contract.push({
            label: response.data[i].采购合同编号,
            value: response.data[i].采购合同流水号
          })
        }
      })
      // 查询车间合同
      searchShopContract().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.ShopContract.push({
            label: response.data[i].采购合同编号,
            value: response.data[i].采购合同流水号
          })
        }
      })
      searchAffairPeople(this.token).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.People.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    searchInventoryData() { // 查询仓库
      searchInventory().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Inventory.push({
            label: response.data[i].仓库名称,
            value: response.data[i].仓库流水号
          })
        }
      })
    },
    searchPartinfo() {
      this.tableData = []
      this.listLoading = true
      searchInbound(this.ContractValue, this.InboundDate, this.InventoryValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].组件零件流水号 === 0) {
            response.data[i].物料名称 = response.data[i].零件名称
          }
        }
        this.tableData = response.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    searchShopinfo() {
      this.tableData2 = []
      this.listLoading2 = true
      searchShopInbound(this.ShopContractValue, this.InboundDate, this.InventoryValue).then(response => {
        this.tableData2 = response.data
        this.total = response.data.total
        this.listLoading2 = false
      })
    },
    searchInboundCard1() {
      if (this.inboundCardNumber === '') {
        this.inboundCardNumber_check = 0
      } else {
        this.inboundCardNumber_check = 1
      }
      this.tableData3 = []
      this.listLoading3 = true
      searchInboundCard(this.inboundCardNumber_check, this.inboundCardNumber).then(response => {
        this.tableData3 = response.data
        this.listLoading3 = false
      })
    },
    addCard() {
      this.dialogVisible1 = true
    },
    // 增加入库单
    submitCard(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addInboundCard(this.form.inboundDay, this.form.house, this.form.contract, this.form.arrive, this.form.affairPeople, this.form.affair, this.form.arriveDay, this.form.affirType, this.form.purchaseType, this.form.inboundType, this.form.note).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('增加成功')
              this.dialogVisible1 = false
            } else {
              this.$message.error('增加失败')
            }
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.nameGroup = []
      this.modelGroup = []
      this.specificationGroup = []
      this.paintGroup = []
      this.numberGroup = []
      this.priceGroup = []
      for (let i = 0; i < val.length; i++) {
        this.nameGroup.push(val[i].物料名称)
        this.modelGroup.push(val[i].物料规格)
        this.specificationGroup.push(val[i].物料型号)
        this.paintGroup.push(val[i].零件图号)
        this.numberGroup.push(val[i].实际到货数量)
        this.priceGroup.push(val[i].单价)
      }
    },
    handleSelectionChange2(val) {
      this.nameGroup = []
      this.modelGroup = []
      this.specificationGroup = []
      this.paintGroup = []
      this.numberGroup = []
      this.priceGroup = []
      for (let i = 0; i < val.length; i++) {
        this.nameGroup.push(val[i].物料名称)
        this.modelGroup.push(val[i].物料规格)
        this.specificationGroup.push(val[i].物料型号)
        this.paintGroup.push(val[i].零件图号)
        this.numberGroup.push(val[i].实际到货数量)
        this.priceGroup.push(val[i].单价)
      }
    },
    InboundCardDetail() {
      addInboundCardDetail(this.DetailNumber, this.nameGroup, this.modelGroup, this.specificationGroup, this.paintGroup, this.numberGroup, this.priceGroup).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('增加成功')
          this.dialogVisible1 = false
          searchInboundCardDetail(this.DetailNumber).then(response => {
            this.tableData4 = response.data
          })
        } else {
          this.$message.error('增加失败')
        }
      })
    },
    // 修改入库单
    editInboundCardInfor(row) {
      this.DetailNumber = row.采购入库单流水号
      this.dialogVisible2 = true
      this.form.contract = row.合同流水号
      this.form.house = row.仓库流水号
      this.form.inboundDay = row.入库日期
      this.form.arrive = row.到货单号
      this.form.affair = row.业务号
      this.form.affairPeople = row.业务员
      this.form.arriveDay = row.到货日期
      this.form.affirType = row.业务类型
      this.form.purchaseType = row.采购类型
      this.form.inboundType = row.入库类别
      this.form.note = row.备注
    },
    submitInboundCardInfor(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          editInboundCard(this.DetailNumber, this.form.inboundDay, this.form.house, this.form.contract, this.form.arrive, this.form.affairPeople, this.form.affair, this.form.arriveDay, this.form.affirType, this.form.purchaseType, this.form.inboundType, this.form.note).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('修改成功')
              this.dialogVisible2 = false
            } else {
              this.$message.error('修改失败')
            }
          })
        }
      })
    },
    // 查询采购入库单明细
    searchDetail(row) {
      this.DetailNumber = row.采购入库单流水号
      searchInboundCardDetail(this.DetailNumber).then(response => {
        const data = response.data
        for (let i = 0; i < data[i].length; i++) {
          data[i].数量 = parseInt(data[i].数量)
        }
        this.tableData4 = data
      })
    },
    // 删除领料单
    dropCard(row) {
      this.CardNumber = row.采购入库单流水号
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteInboundCard(this.CardNumber).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchInboundCard1()
          } else {
            this.$message.error('数据占用')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除领料单明细
    dropCarddetail(row) {
      this.CardDetailNumber = row.采购入库单明细流水号
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteInboundCardDetail(this.CardDetailNumber).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            searchInboundCardDetail(this.DetailNumber).then(response => {
              this.tableData4 = response.data
            })
          } else {
            this.$message.error('数据占用')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    calculateContractSum(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        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[7] += ' 元'
        } else if (index === 4) {
          sums[index] = '合计'
          return
        } else if (index === 6) {
          sums[index] = '总价'
          return
        }
      })
      return sums
    },
    handleSizeChange(val) { // 询价单列表分页
      this.pageSize = val
    },
    handleCurrentChange(val) { // 询价单列表分页
      this.pageCurrent = val
    },
    handleSizeChange2(val) { // 询价单列表分页
      this.pageSize2 = val
    },
    handleCurrentChange2(val) { // 询价单列表分页
      this.pageCurrent2 = val
    },
    handleSizeChange3(val) { // 询价单列表分页
      this.pageSize2 = val
    },
    handleCurrentChange3(val) { // 询价单列表分页
      this.pageCurrent2 = val
    },
    editCard() {
      editInboundCard(this.CardDetailNumber).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('删除成功')
          searchInboundCardDetail(this.DetailNumber).then(response => {
            this.tableData4 = response.data
          })
        } else {
          this.$message.error('数据占用')
        }
      })
    },
    exportCard(row) {
      this.dialogVisibleExport = true
      this.inbondCard[0] = row.入库单号
      this.inbondCard[1] = row.入库日期.substring(0, row.入库日期.length - 8)
      this.inbondCard[2] = row.仓库名称
      this.inbondCard[3] = row.采购合同编号
      this.inbondCard[4] = row.到货单号
      this.inbondCard[5] = row.业务号
      this.inbondCard[6] = row.供应商名称
      this.inbondCard[7] = '库存'
      this.inbondCard[8] = row.姓名
      this.inbondCard[9] = row.到货日期.substring(0, row.到货日期.length - 8)
      this.inbondCard[10] = row.业务类型
      this.inbondCard[11] = row.采购类型
      this.inbondCard[12] = row.入库类别
      this.inbondCard[13] = row.备注
      this.DetailNumber = row.采购入库单流水号
      searchInboundCardDetail(this.DetailNumber).then(response => {
        this.tableData4 = response.data
        return this.tableData4
      }).then(data => {
        var sum = 0
        var total = 0
        for (let i = 0; i < data.length; i++) {
          sum += parseInt(data[i].数量)
          total += data[i].本币单价 * parseInt(data[i].数量)
        }
        this.inbondCard[14] = sum
        this.inbondCard[15] = total
      })
    },
    printCard() {
      const htmlNode = $('#print').html() // #print为需要打印的dom节点id
      const body = $('body')
      body.children().hide()
      const printNode = $(htmlNode)
      body.append(printNode)
      window.print()
      body.children().not('script').show()
      printNode.remove()
    }
  }
}
</script>

<style scoped>
  .tg  {border-collapse:collapse;border-spacing:0;}
  .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg .tg-baqh{text-align:center;vertical-align:top}
  .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}

  .tgClass  {border-collapse:collapse;border-spacing:0;}
  .tgtgClass td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
  .tgtgClass th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
  .tgtgClass .tg-s268{text-align:left}
  .tgtgClass .tg-0lax{text-align:left;vertical-align:top}
</style>
