<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="出货指示">
        <el-card :body-style="cardBodyStyle">
          <el-form :model="query" label-width="auto" label-position="right">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item label="合同号" style="margin-bottom: 5px;" prop="type">
                  <el-input v-model="query.contrNo" placeholder="请输入合同号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="对方合同号" style="margin-bottom: 5px;" prop="code">
                  <el-input v-model="query.khContrNo" placeholder="请输入对方合同号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="物料名称" style="margin-bottom: 5px;" prop="name">
                  <el-input v-model="query.itemNm" placeholder="请输入物料名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="添加时间" style="margin-bottom: 0px;">
                  <el-date-picker v-model="query.addTime" type="datetimerange" align="right" unlink-panels
                                  range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                  :picker-options="pickerOptions" style="width: 350px;"
                                  value-format="YYYY-MM-DD HH:mm:ss"
                                  format="YYYY-MM-DD HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <ButtonBar @search="handleSearch"></ButtonBar>

        <el-card :body-style="cardBodyStyle">
          <el-table :data="tableData" border highlight-current-row height="300">
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="true" prop="dordNo" label="出货指示号" width="140" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="tradePartnerName" label="客户名称" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="contrNo" label="合同编号" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="contrLineNo" label="合同行号" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="khContrNo" label="对方合同编号" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="itemCd" label="物料编码" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="itemNm" label="物料名称" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="specType" label="规格型号" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="qty" label="发货指示数量" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="storeNm" label="库房" width="200" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="uom" label="计量单位" width="120" header-align="center" align="center"
                             :formatter="formatter"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="dordPrice" label="发货单价" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="dordAmt" label="金额" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="taxRate" label="税率" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="remark" label="发货备注信息" header-align="center" width="220"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="id" label="主键" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="processInstanceId" label="流程id" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="processInstanceStatus" label="流程状态" width="240"
                             header-align="center" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addId" label="添加人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addCode" label="添加人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addName" label="添加人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptId" label="添加部门id" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptCode" label="添加部门编码" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptName" label="添加部门名称" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addTime" label="添加时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyId" label="修改人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyCode" label="修改人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyName" label="修改人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyTime" label="修改时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelId" label="作废人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelCode" label="作废人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelName" label="作废人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelTime" label="作废时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelFlag" label="作废标记" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="belongId" label="BELONG_ID" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="100px" fixed="right">
              <template #default="scope">
                <el-button plain type="warning" @click="handleEdit(scope.row)">出库</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                         background="background" layout="total, sizes, prev, pager, next, jumper"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-tabs type="border-card">
      <el-tab-pane label="出货信息">
        <el-card :body-style="cardBodyStyle">
          <el-form :model="queryRecord" label-width="auto" label-position="right"  ref="queryFormRef">
            <el-row :gutter="10" style="margin-bottom: 5px;">
              <el-col :span="5">
                <el-form-item label="发货指示" style="margin-bottom: 0px;margin-left: 32px" prop="contrNo">
                  <el-input v-model="queryRecord.dordNo" placeholder="发货指示" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="合同编号" style="margin-bottom: 0px;margin-left: 32px" prop="contrNo">
                  <el-input v-model="queryRecord.contrNo" placeholder="合同编号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="客户名称" style="margin-bottom: 0px;margin-left: 32px" prop="type">
                  <el-input v-model="queryRecord.tradePartnerName" placeholder="客户名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="物料名称" style="margin-bottom: 0px;margin-left: 32px" prop="type">
                  <el-input v-model="queryRecord.itemNm" placeholder="物料名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" link @click="reset(queryFormRef)">重置</el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" link @click="queryShow = !queryShow">
                  高级查询
                  <el-icon v-if="queryShow">
                    <ArrowUp/>
                  </el-icon>
                  <el-icon v-else>
                    <ArrowDown/>
                  </el-icon>
                </el-button>
              </el-col>
              <el-col :span="5" v-if="queryShow">
                <el-form-item label="车号" style="margin-bottom: 0px;margin-top: 10px;margin-left: 32px" prop="type">
                  <el-input v-model="queryRecord.carNo" placeholder="车号" clearable></el-input>
                </el-form-item>
              </el-col>
                    </el-row>
          </el-form>
        </el-card>
<!--        <el-card :body-style="cardBodyStyle">-->
<!--          <el-button type="primary" @click="handleSearchRecord" plain>查询</el-button>-->
<!--        </el-card>-->
        <ButtonBar @recordSearch="handleSearchRecord" area="bottom" @fujian="fujian"></ButtonBar>

        <el-card :body-style="cardBodyStyle">
          <el-table :data="tableDataRecord" border highlight-current-row height="300" ref="recordMupli" @select="salOuthandlerSelect" >
            <el-table-column type="selection" fixed></el-table-column>
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                <span>{{ scope.$index + (currentPageRecord - 1) * pageSizeRecord + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="true" prop="dordNo" label="出货指示号" width="140" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="stoOutNo" label="出库单号" width="140" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="tradePartnerName" label="客户名称" width="180" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>


            <el-table-column v-if="true" prop="itemCd" label="物料编码" width="140" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="itemNm" label="物料名称" width="140" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="specType" label="规格型号" width="120" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="qty" label="干基量" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="qtyWet" label="湿基量" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="transTasteSci" label="品位" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="transWaterSci" label="水分" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="carNo" label="车号" width="140" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="uom" label="计量单位" width="120" header-align="center" align="center"
                             :formatter="formatter"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="stoOutDt" label="出库业务日期时间" width="180" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="contrNo" label="合同编号" width="120" header-align="center"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="remark" label="备注" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="id" label="主键" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="processInstanceId" label="流程id" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="processInstanceStatus" label="流程状态" width="240"
                             header-align="center" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addId" label="添加人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addCode" label="添加人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addName" label="添加人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptId" label="添加部门id" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptCode" label="添加部门编码" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addDeptName" label="添加部门名称" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="addTime" label="添加时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyId" label="修改人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyCode" label="修改人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyName" label="修改人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="modifyTime" label="修改时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelId" label="作废人id" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelCode" label="作废人编码" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelName" label="作废人名称" width="300" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelTime" label="作废时间" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="cancelFlag" label="作废标记" width="240" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="belongId" label="BELONG_ID" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="100px" fixed="right">
              <template #default="scope">
                <el-button plain type="danger" @click="handleBack(scope.row)">退回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-pagination :current-page="currentPageRecord" :page-size="pageSizeRecord" :page-sizes="pageSizesRecord"
                         :total="totalRowsRecord"
                         background="background" layout="total, sizes, prev, pager, next, jumper"
                         @size-change="handleSizeChangeRecord"
                         @current-change="handleCurrentChangeRecord">
          </el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1200px" top="5vh"
               @open="openDialog">
      <el-form ref="formRef" :model="form" label-width="130px" label-position="right" inline :rules="rules">

        <el-form-item label="出库时间" prop="stoOutDt">
          <el-date-picker v-model="form.stoOutDt" type="date" style="width: 200px;" value-format="YYYY-MM-DD"
                          format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item label="出库车号" prop="carNo">
          <el-input v-model="form.carNo" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="指示量">
          <el-input v-model="form.qty" disabled style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="实际已发货量">
          <el-input v-model="form.outQty" disabled style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="还需发货量">
          <el-input v-model="form.needQty" disabled style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="本次已选出库量" prop="thisQty">
          <el-input v-model="form.thisQty" disabled style="width: 200px"></el-input>
        </el-form-item>


        <el-table :data="tableDataOut" border highlight-current-row ref="multipleTableRef" @select="handlerSelect"
                  >
          <el-table-column type="selection" fixed></el-table-column>
          <el-table-column type="index" label="序号" align="center" width="60">
            <template #default="scope">
              <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="true" prop="outquantity" label="出库量" width="180" header-align="center"
                           align="center" show-overflow-tooltip>
            <template #default="scope">
							<span>
                <el-input-number v-model="scope.row.outquantity" min="0" @change="inputNumberChange">
<!--								<el-input v-model="scope.row.outquantity" @input="outquantityInput(scope.row ,scope.$index)">-->
<!--                          @change="outquantityChange( scope.row ,scope.$index)"-->
								</el-input-number>
							</span>
            </template>
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.isShow">
                <el-input size="mini" v-model="scope.row.outquantity" @input="outquantityChange"></el-input>
              </span>
              <span v-else>{{scope.row.outquantity}}</span>
            </template> -->
          </el-table-column>
          <el-table-column v-if="true" prop="qty" label="库存量" width="120" header-align="center" align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="itemCd" label="物料编码" width="120" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="itemNm" label="物料名称" width="120" header-align="center"
                           align="right" show-overflow-tooltip>
          </el-table-column>

          <el-table-column v-if="true" prop="storeCd" label="库房代码" width="120" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="storeNm" label="库房名称" width="120" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="areaCd" label="区号" width="120" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>

          <el-table-column v-if="true" prop="stackCd" label="垛位号" width="120" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="storeType" label="库房类型" width="120" header-align="center"
                           :formatter="formatter"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <!--<el-table-column v-if="true" prop="qty" label="发货指示数量" width="120" header-align="center"
            align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="uom" label="计量单位" width="120" header-align="center"
            align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="dordPrice" label="发货单价" width="120" header-align="center"
            align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="dordAmt" label="金额" width="120" header-align="center"
            align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="true" prop="remark" label="发货备注信息" width="120" header-align="center"
            align="center" show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column v-if="false" prop="id" label="主键" width="120" header-align="center" align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="processInstanceId" label="流程id" width="240"
                           header-align="center" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="processInstanceStatus" label="流程状态" width="240"
                           header-align="center" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addId" label="添加人id" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addCode" label="添加人编码" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addName" label="添加人名称" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addDeptId" label="添加部门id" width="360" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addDeptCode" label="添加部门编码" width="360" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addDeptName" label="添加部门名称" width="360" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="addTime" label="添加时间" width="240" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="modifyId" label="修改人id" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="modifyCode" label="修改人编码" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="modifyName" label="修改人名称" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="modifyTime" label="修改时间" width="240" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="cancelId" label="作废人id" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="cancelCode" label="作废人编码" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="cancelName" label="作废人名称" width="300" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="cancelTime" label="作废时间" width="240" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="cancelFlag" label="作废标记" width="240" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="false" prop="belongId" label="BELONG_ID" width="540" header-align="center"
                           align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" plain @click="handleSave(formRef)" :loading="ckbcLoading">出库保存</el-button>
          <el-button type="danger" plain @click="handleCancelSave">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()

import tools from '@/tools'

const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

onMounted(() => {
  getTableData()
  getTableDataRecord()
  dictData()
})

//弹框表格查询
const tableDataOut = ref([])
const handleSearchOut = () => {
  getTableDataOut()
}
const getTableDataOut = () => {
  var url = 'sto/Onhand/queryDelvOut'
  var param = {
    params: JSON.stringify(form.value)
  }
  console.log(form.value)
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableDataOut.value = response.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const getSumQty = (val) => {
  var url = 'sal/StoOutRecord/querySumQty'
  var param = {
    dordNo: val,
    qty: Number(form.value.qty)
  }

  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      form.value.outQty = response.data.data.outQty
      // var qty = Number(form.value.qty)
      // var outQty = Number(form.value.outQty)
      form.value.needQty = response.data.data.needQty
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
const inputNumberChange = () =>{

  if (multipleSelectionOut.value.outquantity != null){
    form.value.thisQty = Number(multipleSelectionOut.value.outquantity).toFixed(2)
  }

}
const outquantityChange = (row, index) => {
  form.value.thisQty = 0
  for (let item of tableDataOut.value) {
    if (!Number.isNaN(Number(item.outquantity))) {
      form.value.thisQty += Number(item.outquantity)
    }
  }

  form.value.thisQty = form.value.thisQty.toFixed(2)
  let num = Number(row.outquantity)
  tableDataOut.value[index].outquantity = num

  console.log(tableDataOut.value)
  // 选中当前行（如果 num 不为 0 或空字符串）
  if (num !== 0 && num !== '') {

    nextTick(() => {
      multipleTableRef.value.toggleRowSelection(row, true);
    })
  }
  // tableDataOut.value[index].outquantity = num
  console.log(tableDataOut.value)
}
const outquantityInput = (row, index) => {

  // 只允许数字和小数点
  const filteredValue = row.outquantity
      .replace(/[^\d.]/g, '')               // 只允许数字和小数点
      .replace(/^\./, '')                   // 防止以小数点开头
      .replace(/\.{2,}/, '.')               // 防止出现多个小数点
      .replace(/(\.\d*?)\./g, '$1');        // 只保留第一个小数点

  tableDataOut.value[index].outquantity = filteredValue
  // tableDataOut.value[index].outquantity = Number(filteredValue)
}
/**
 *   查询
 */
const query = ref({
  contrNo: '',
  khContrNo: '',
  itemNm: '',
  addTime: ['2024-10-01 00:00:00', proxy.$dayjs().format('YYYY-MM-DD') +
  ' 23:59:59'
    //proxy.$dayjs().format('YYYY-MM-DD') + ' 00:00:00'
  ]
})
const queryRecord = ref({
  contrNo: '',
  khContrNo: '',
  itemNm: '',
  addTime: ['2024-10-01 00:00:00', proxy.$dayjs().format('YYYY-MM-DD') +
  ' 23:59:59'
    //proxy.$dayjs().format('YYYY-MM-DD') + ' 00:00:00'
  ]
})
const tableData = ref([])
const tableDataRecord = ref([])
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}
const handleSearchRecord = () => {
  currentPageRecord.value = 1
  getTableDataRecord()
}

const getTableData = () => {
  var url = 'sal/Delv/queryOutbound'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
const getTableDataRecord = () => {
  var url = 'sal/StoOutRecord/query'
  var param = {
    page: currentPageRecord.value,
    rows: pageSizeRecord.value,
    params: JSON.stringify(queryRecord.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableDataRecord.value = response.data.data.records
      totalRowsRecord.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
/**
 *   查询
 */

/**
 * 分页
 */
const currentPage = ref(1)
const currentPageRecord = ref(1)
const totalRows = ref(0)
const totalRowsRecord = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSizesRecord = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const pageSizeRecord = ref(5)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleSizeChangeRecord = (val) => {
  pageSizeRecord.value = val
  getTableDataRecord()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}

const handleCurrentChangeRecord = (val) => {
  currentPageRecord.value = val
  getTableDataRecord()
}

const dialogVisible = ref(false)
const form = ref({
  stoOutDt: proxy.$dayjs(),
  carNo: '',
  qty: '',
  outQty: '',
  needQty: '',
  thisQty: '0',
  itemCd: '',

})

const validatorThisQty = (rule, value, callback) => {
  if (!value) { // 自定义验证条件，返回错误提示文字
    if (value === 0 || value === '0') {
      callback(new Error('不允许为0'))
    }
    callback(new Error('不允许为空'))
  } else {
    if (Number(form.value.thisQty) > Number(form.value.needQty)) {
      callback(new Error('本次出库量超出发货量'))
    }
    if (value == 0 || value == '0') {
      callback(new Error('不允许为0'))
    }
    callback()
  }
}
const ruleFormRef = ref()
const rules = ref({
  stoOutDt: [{
    required: true,
    message: '请选择出库日期',
    trigger: 'change' | 'blur'
  }],
  carNo: [{
    required: true,
    message: '请输入车号',
    trigger: 'change' | 'blur'
  }],
  thisQty: [
    {required: true, validator: validatorThisQty, trigger: 'change'},
  ],
})

const openDialog = () => {
}
const formRef = ref(null);
const outquantity = ref()
const handleSave = (formRef) => {

  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      if (Number(form.value.thisQty) > 0) {
        if (Number(form.value.thisQty) > Number(form.value.needQty)) {
          ElMessage({
            type: 'warning',
            message: '本次出库量超出发货量，不允许该操作！',
          })
          return false
        }
        ElMessageBox.confirm(
            '本次出库量为：' + form.value.thisQty + "。是否确认出库保存？",
            '提示', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
              draggable: true,
            }
        )
            .then(() => {
              console.log('submit!')
              ckbcLoading.value = true
              form.value.areaCd = multipleSelectionOut.value.areaCd
              form.value.stackCd = multipleSelectionOut.value.stackCd

              var url = 'sal/StoOutRecord/saveOut'
              var param = {
                json: JSON.stringify(form.value),
                jsons: JSON.stringify([multipleSelectionOut.value])
              }
              proxy.$axios.post(url, param).then(response => {
                if (response.data.code == 0) {
                  //form.value = response.data.data
                  ElMessage({
                    message: '保存成功',
                    type: 'success',
                  })
                  getTableData()
                  getTableDataRecord()
                  dialogVisible.value = false
                } else {
                  // ElMessage.error('操作失败！' + response.data.msg)
                  ElMessage({
                    message: '操作失败' + response.data.msg,
                    type: 'error'
                  })
                }
                ckbcLoading.value = false
              })
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消',
              })
            })
      } else {
        ElMessage({
          type: 'warning',
          message: '本次出库量不允许为0！',
        })
      }
    } else {
      console.log('error submit!')
      return false
    }
  })

}
const multipleSelectionOut = ref([])
const recordSelection = ref([])
const handleSelectionChangeOut = (val) => {
  form.value.thisQty = 0
  form.value.thisQty = Number(form.value.thisQty)
  for (let item of tableDataOut.value) {
    form.value.thisQty += Number(item.outquantity)
  }
  form.value.thisQty = form.value.thisQty.toFixed(2)

  if (val.length == 0) {
    for (let item of tableDataOut.value) {
      form.value.thisQty = 0
      item.outquantity = 0
    }
  }
  if (val.length == tableDataOut.length) {
    form.value.thisQty = 0
    form.value.thisQty = Number(form.value.thisQty)
    for (let item of tableDataOut.value) {
      form.value.thisQty += Number(item.outquantity)
    }
    form.value.thisQty = form.value.thisQty.toFixed(2)
  }
  multipleSelectionOut.value = val
}


function handlerSelect(selection, row) {

  // 清除 所有勾选项
  multipleTableRef.value.clearSelection()
  multipleSelectionOut.value = null
  if(selection.length == 0){
    form.value.thisQty = 0
    return
  }
  multipleTableRef.value.toggleRowSelection(row,true)
  multipleSelectionOut.value = row


  form.value.thisQty = Number(row.outquantity).toFixed(2)



}


function salOuthandlerSelect(selection, row) {

  // 清除 所有勾选项
  recordMupli.value.clearSelection()
  recordSelection.value = null
  if(selection.length == 0){
    return
  }
  recordMupli.value.toggleRowSelection(row,true)
  recordSelection.value = row

}

// 当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
  console.log('表格的选中 可以获得当前选中的数据',val);
  multipleSelectionOut.value = val
}

const handleCancelSave = () => {
  dialogVisible.value = false
}
const handleEdit = (row) => {
  form.value = row
  form.value.stoOutDt = proxy.$dayjs()
  form.value.itemCd = row.itemCd
  form.value.storeCd = row.storeCd

  ckbcLoading.value = false

  // carNo: '',
  // qty: '',
  // outQty: '',
  // needQty: '',
  form.value.thisQty = 0

  // form.specification = row.specType
  // form.steelGrade = row.stlGrd
  // form.matName = row.matName
  // form.prodZlOut = row.dordNo
  // form.salOrderOut = row.ordNo
  // form.salLine = row.lineNo
  // form.custId = row.custId
  // form.custName = row.custName
  // form.code = row.id
  // form.suv = Number(row.quantity).toFixed(6)
  // form.sud = Number(row.actQuantity).toFixed(6)
  // form.contractCd = row.khContrNo
  getTableDataOut()
  getSumQty(row.dordNo)
  dialogVisible.value = true

}

const multipleTableRef = ref(null)
const recordMupli = ref(null)

const toggleSelection = (index) => {
  console.log(tableDataOut.value[index])
  multipleTableRef.value.toggleRowSelection(tableDataOut.value[index])
  console.log(tableDataOut.value[index])
}

const dictList = ref({})
const dictData = () => {
  var url = 'framework/Common/querySelectorList'
  var param = {
    type: JSON.stringify(['STORE_TYPE', 'MEASURING_UNIT'])
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dictList.value = response.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const formatter = (row, column, cellValue, index) => {
  if (!cellValue || cellValue == null || cellValue == '') {
    return cellValue
  }
  switch (column.property) {
    case 'storeType':
      cellValue = dictList.value.STORE_TYPE.find(item => item.dicCode == cellValue).dicName
      break;
    case 'uom':
      cellValue = dictList.value.MEASURING_UNIT.find(item => item.dicCode == cellValue).dicName
      break;

  }
  return cellValue

}


// 退回
const handleBack = (row) => {
  ElMessageBox.confirm(
      '该出货确定退回吗?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        var url = 'sal/StoOutRecord/saveOutBack'
        var param = {
          id: row.id,
        }
        proxy.$axios.post(url, param).then(response => {
          if (response.data.code == 0) {
            //form.value = response.data.data
            ElMessage({
              message: '保存成功',
              type: 'success',
            })
            getTableDataRecord()
          } else {
            // ElMessage.error('操作失败！' + response.data.msg)
            ElMessage({
              message: '操作失败' + response.data.msg,
              type: 'error'
            })
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}

const ckbcLoading =ref(false)

const fujian = () =>{
  if (recordSelection.value.id !=null){
    if (recordSelection.value.transIdSci == null || recordSelection.value.transIdSci == "" ){
      ElMessage({
        message: '当前数据检化验编号不存在，无法进行复检！'  ,
        type: 'warning'
      })
      return
    }
    ElMessageBox.confirm(
        '当前检化验编号为：'+recordSelection.value.transIdSci +',是否进行复检?',
        '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          draggable: true,
        }
    )
        .then(() => {
          var url = 'sal/StoOutRecord/saveOutBackFujian'
          var param = {
            id: recordSelection.value.transIdSci,
          }
          proxy.$axios.post(url, param).then(response => {
            if (response.data.code == 0) {
              //form.value = response.data.data
              ElMessage({
                message: '保存成功',
                type: 'success',
              })
              getTableDataRecord()
            } else {
              // ElMessage.error('操作失败！' + response.data.msg)
              ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
  } else {
    ElMessage({
      message: '请先选择一条数据！'  ,
      type: 'warning'
    })
  }

}
const queryShow = ref(false)
const queryFormRef = ref()
const reset = (queryFormRef) => {
  if (!queryFormRef) return
  queryFormRef.resetFields()
}

</script>

<style scoped>
::v-deep .el-table th.el-table__cell:nth-child(1) .cell {
  visibility: hidden;
}
</style>
