web-base-admin/src/components/Delivery/yihandeled.vue

<template>
  <div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            v-hasButtons="['DeliveryHandledPrint']"
            size="small"
            class="thebtn2"
            :disabled="multiple"
            @click="getPrintCheck"
          >{{ '生成打印' }}</el-button>
          <el-button
            v-hasButtons="['DeliveryHandledBind']"
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="codeBind(true)"
          >{{ '绑定追溯' }}</el-button>
          <el-button
            v-hasButtons="['DeliveryHandledUnBind']"
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="codeBind(false)"
          >{{ '解绑追溯' }}</el-button>
          <el-button
            v-hasButtons="['DeliveryHandledDelete']"
            size="small"
            class="thebtn4"
            :disabled="multiple"
            @click="deleteDelivery"
          >{{ '批量删除' }}</el-button>
          <el-button
            v-hasButtons="['DeliveryHandledExport']"
            size="small"
            class="thebtn1"
            @click="handleExport"
          >{{ '导出' }}</el-button>
          <el-button
            v-hasButtons="['DeliveryHandledExport']"
            size="small"
            class="thebtn1"
            @click="handleWaresExport"
          >仓储导出</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        height="540px"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        :span-method="objectSpanMethod"
        @selection-change="handleSelectionChange"
      >
        <!-- :row-class-name="tableRowClassName"
         -->
        <el-table-column prop="colsele" type="selection" width="55" />

        <el-table-column
          align="center"
          width="80px"
          prop="dayBatch"
          label="批次"
        />
        <el-table-column
          align="center"
          width="60px"
          prop="batchNumber"
          label="序号"
        />

        <el-table-column
          align="center"
          width="200px"
          prop="deliverCode"
          :label="'发货单号'"
        />
        <el-table-column
          width="200px"
          align="center"
          prop="orderCode"
          :label="'订单编号'"
        />
        <el-table-column
          align="center"
          prop="orderTypeVal"
          :label="'订单类型'"
        />
        <el-table-column
          align="center"
          prop="orderStatusVal"
          :label="'订单状态'"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatusVal }}</span>
            <span
              style="font-size: 18px; cursor: pointer; margin-left: 10px"
              @click="deleteOrderRow(scope.row)"
            ><i class="el-icon-delete" /></span>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="memberCode"
          :label="'会员编号'"
        />

        <el-table-column
          align="center"
          prop="memberName"
          :label="'会员姓名'"
        />
        <el-table-column
          width="150px"
          align="center"
          prop="phone"
          :label="'联系方式'"
        />
        <el-table-column
          align="center"
          min-width="120px"
          prop="productCode"
          :label="'产品编号'"
        />
        <el-table-column
          width="150px"
          align="center"
          prop="productName"
          :label="'产品名称'"
        />

        <el-table-column
          width="150px"
          align="center"
          prop="specsName"
          :label="'产品规格'"
        />
        <el-table-column align="center" prop="unitName" :label="'产品单位'" />

        <el-table-column align="center" prop="quantity" :label="'产品数量'" />
        <el-table-column align="center" prop="isBarCodeVal" label="是否追溯" />
        <el-table-column align="center" prop="barCode" :label="'追溯编号'" />
        <el-table-column align="center" prop="scanTime" :label="'扫码日期'" />

        <el-table-column align="center" prop="recName" :label="'收货人'" />
        <el-table-column
          width="150px"
          align="center"
          prop="recPhone"
          :label="'收货电话'"
        />
        <el-table-column
          width="180px"
          align="center"
          prop="recAddress"
          :formatter="formatAddress"
          :label="'收货地址'"
        />
        <el-table-column
          align="center"
          prop="shippingChannelVal"
          :label="'发货类型'"
        />
        <el-table-column
          min-width="100px"
          align="center"
          prop="storehouseName"
          :label="'发货仓库'"
        />
        <el-table-column
          align="center"
          prop="printStatusVal"
          :label="'打印状态'"
        />
        <el-table-column
          width="150px"
          align="center"
          prop="payTime"
          :label="'支付日期'"
        />

        <el-table-column
          align="center"
          prop="deliveryWayVal"
          :label="'发货方式'"
        />

        <el-table-column
          align="center"
          prop="operateScopeVal"
          :label="'供应方式'"
        />

        <el-table-column
          align="center"
          prop="tranTypeVal"
          :label="'运输方式'"
        />
        <el-table-column
          align="center"
          prop="preSaleStatusVal"
          :label="'预售状态'"
        />

        <el-table-column
          align="center"
          prop="logisticsCompany"
          :label="'物流公司'"
        />
        <el-table-column
          align="center"
          prop="logisticsCode"
          :label="'物流单号'"
        />
        <el-table-column align="center" prop="remark" :label="'备注'" />
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          prop="systemType"-->
        <!--          :label="$t('系统类型')"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div-->
        <!--              v-for="item in systemTypes"-->
        <!--              :key="item.value"-->
        <!--              v-if="scope.row.systemType == item.value"-->
        <!--            >-->
        <!--              {{ item.label }}-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          width="150px"
          align="center"
          prop="creationTime"
          :label="'创建日期'"
        />
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />

    <!-- 打印货单1版 -->
    <!-- <el-dialog
      :close-on-click-modal="false"
      :visible.sync="scdyShow2"
      width="800px"
      center
      append-to-body
      class="fhd_dialog"
    >
      <div class="fhdbox" v-for="(item, index) in dyhdData" :key="index">
        <div class="fhdtop">
          <el-row>
            <el-col :span="12">
              <div>【条形码】</div>
            </el-col>
            <el-col :span="12">
              <span class="col_title">打印时间</span>
              <span class="col-content">2022-11-03 12:12:00</span>
            </el-col>
          </el-row>
          <el-row class="mainrow">
            <el-col :span="12">
              <span class="col_title">发货单号</span>
              <span class="col-content">{{ item.deliverCode }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="fhdtop">
          <el-row>
            <el-col :span="12">
              <span class="col_title">收货人</span>
              <span class="col-content">{{ item.recName }}</span>
            </el-col>
            <el-col :span="12">
              <span class="col_title">收货电话</span>
              <span>{{ item.recPhone }}</span>
            </el-col>
          </el-row>
          <el-row class="mainrow">
            <el-col :span="10">
              <div class="fhd_flex">
                <span class="col_title">收货地址</span>
                <span class="col-content">
                  <el-input v-model="item.recAddress" disabled></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="14">
              <el-input type="textarea" :rows="3"></el-input>
            </el-col>
          </el-row>
        </div>

        <el-table
          :data="item.itemList"
          :header-cell-style="{ background: '#EEEEEE' }"
          border
        >
          <el-table-column align="center" prop="productName" :label="'产品名称'">
          </el-table-column>
          <el-table-column align="center" prop="specsName" :label="'产品规格'">
          </el-table-column>
          <el-table-column align="center" prop="quantity" :label="'产品数量'">
          </el-table-column>
          <el-table-column align="center" prop="price" :label="'订单金额'">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog> -->

    <el-dialog
      :title="zsTitle"
      :close-on-click-modal="false"
      :visible.sync="bdzsShow"
      width="70%"
      append-to-body
    ><div>
      <el-table
        ref="singleTable"
        :data="codeData"
        height="500px"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        border
        @current-change="handleCurrentChange"
      >
        <el-table-column
          align="center"
          prop="orderCode"
          :label="'订单编号'"
        />
        <el-table-column
          align="center"
          prop="productName"
          :label="'产品名称'"
        />
        <el-table-column
          align="center"
          prop="specsName"
          :label="'产品规格'"
        />
        <el-table-column
          align="center"
          prop="productNum"
          :label="'产品数量'"
        />
        <el-table-column align="center" prop="barCode" :label="'追溯编号'">
          <template slot-scope="scope">
            <el-input
              :ref="'mark' + scope.$index"
              v-model="scope.row.barCode"
              :disabled="!ifcodebind"
              tabindex="1"
              @keydown.enter.native="nextFocus"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" :label="'操作'">
          <template slot-scope="scope">
            <div
              v-if="ifcodebind"
              style="cursor: pointer; color: #409eff"
              @click="reCz(scope.row)"
            >
              {{ '重置' }}
            </div>
            <div
              style="color: #c73030; cursor: pointer"
              @click="handleDelete(scope.row, scope.$index, codeData)"
            >
              {{ '删除' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" style="text-align: center; margin-top: 20px">
        <el-button @click="bdzsShow = false">
          {{ '取消' }}</el-button>
        <el-button type="primary" @click="sureBd">{{
          '确定'
        }}</el-button>
      </div>
    </div>
    </el-dialog>

    <!-- 国内打印 -->
    <div v-show="false" id="print-content">
      <div v-for="(item, index) in dyhdData" :key="index" class="fhdbox2">
        <div>
          <div
            class="fhdTitle"
            style="
              font-weight: 600;
              font-size: 16px;
              margin-bottom: 5px;
              text-align: center;
            "
          >
            出库单汇总
          </div>

          <div
            class="mainrow2"
            style="
              font-weight: 400;
              font-size: 14px;
              margin-bottom: 5px;
              margin-right: 20px;
              text-align: right;
            "
          >
            序号：{{ item.batchNumber }} / {{ item.batchCount }}
          </div>

          <div style="padding-right: 20px">
            <img :id="'barcode' + index">
          </div>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 400px">
              发货单编号：{{ item.deliverCode }}
            </div>
            <div class="rowcontent" style="width: 400px">
              <!-- 出货仓库：{{ item.houseName }} -->
            </div>
            <div class="rowcontent" style="width: 400px">
              {{ '支付时间' }}：{{ item.payTime }}
            </div>
          </div>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 400px">
              收货人：{{ item.recName }}
            </div>
            <div class="rowcontent" style="width: 400px">
              收货电话：{{ item.recPhone }}
            </div>
            <div class="rowcontent" style="width: 400px">
              {{ '打印时间' }}：{{ item.printTime }}
            </div>
          </div>

          <div class="mainrow2" style="font-size: 12px">
            <div>
              <span> {{ '收货地址' }}:</span>
              <span>
                {{ item.recProvinceVal }}{{ item.recCityVal
                }}{{ item.recCountyVal || "" }}{{ item.recAddress }}</span>
            </div>
          </div>

          <table
            class="tables"
            style="
              margin-top: 10px;
              width: 100%;
              background: #fff;
              border-collapse: collapse;
              border: 1px solid #cccccc;
              border-spacing: 0;
              table-layout: fixed;
              font-size:12px;!important
              border-collapse: collapse;
            "
            border
            :data="item.itemList"
          >
            <tr>
              <td colspan="3">{{ '产品编码' }}</td>
              <td colspan="5">{{ '产品名称' }}</td>
              <td colspan="4">{{ '产品规格' }}</td>
              <td colspan="1">{{ '单位' }}</td>
              <td colspan="1">{{ '数量' }}</td>
              <td colspan="2">{{ '金额' }}</td>
              <!-- <td colspan="2">{{ '金额' }}</td> -->
              <!-- <td colspan="2">{{ '备注' }}</td> -->
            </tr>
            <tr v-for="(aitem, aindex) in item.itemList" :key="aindex">
              <td colspan="3">{{ aitem.productCode }}</td>
              <td colspan="5">{{ aitem.productName }}</td>
              <td colspan="4">{{ aitem.specsName }}</td>
              <td colspan="1">{{ aitem.unitTransactionVal }}</td>
              <td colspan="1">{{ aitem.quantity }}</td>
              <td colspan="2">{{ aitem.price | decimalFormat }}</td>
              <!-- <td colspan="2">{{ aitem.price * aitem.quantity }}</td> -->
              <!-- <td colspan="2">{{ aitem.remarks }}</td> -->
            </tr>
          </table>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              margin-top: 20px;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 260px">制单人：</div>
            <div class="rowcontent" style="width: 260px">出库人：</div>
            <div class="rowcontent" style="width: 260px">出库时间：</div>
            <div class="rowcontent" style="width: 260px">
              客服热线：4001112818
            </div>
          </div>
          <div>
            <span style="font-weight: bold; font-size: 12px">温馨提示：</span>
            <span
              style="font-size:10px;!important"
            >尊敬的各位家人，感谢您长期以来对海之圣的支持与厚爱，当您收到货物时，请检查货物是否有破损，当场开箱验货确认无误后再签收哦，如有问题请第一时间致电公司客服热线，我们将一如既往的为您提供优质、快捷的物流服务。</span>
          </div>
          <div style="page-break-after: always" />
        </div>

        <div
          v-for="(titem, tindex) in item.orderList"
          :key="tindex"
          style="font-size: 12px"
        >
          <div
            class="fhdTitle"
            style="
              font-weight: 600;
              font-size: 16px;
              margin-bottom: 5px;
              text-align: center;
            "
          >
            出库单明细
          </div>
          <div
            class="mainrow2"
            style="display: flex; align-items: center; font-size: 12px"
          >
            <div class="rowcontent" style="width: 400px">
              会员编号：{{ titem.memberCode }}
            </div>
            <div class="rowcontent" style="width: 400px">
              会员姓名：{{ titem.memberName }}
            </div>
            <div class="rowcontent" style="width: 400px">
              {{ '支付时间' }}：{{ titem.payTime }}
            </div>
          </div>
          <div
            class="mainrow2"
            style="display: flex; align-items: center; font-size: 12px"
          >
            <!-- <div class="rowcontent" style="width: 400px">
              出货仓库：{{ titem.houseName }}
            </div> -->
            <!-- <div class="rowcontent" style="width: 400px">
              订单类型：{{ titem.orderTypeVal }}
            </div> -->
            <div class="rowcontent" style="width: 400px">
              {{ '打印时间' }}：{{ titem.printTime }}
            </div>
            <div class="rowcontent" style="width: 400px">
              <!-- 订单类型：{{ titem.orderTypeVal }} -->
            </div>
          </div>
          <div
            class="mainrow2"
            style="display: flex; align-items: center; font-size: 12px"
          >
            <div class="rowcontent" style="width: 400px">
              收货人：{{ titem.recName }}
            </div>
            <div class="rowcontent" style="width: 400px">
              收货电话：{{ titem.recPhone }}
            </div>
            <div class="rowcontent" style="width: 400px">
              收货地址：{{ titem.recProvinceVal }}{{ titem.recCityVal
              }}{{ titem.recCountyVal || "" }}{{ titem.recAddress }}
            </div>
          </div>

          <!-- <div class="mainrow2" style="font-size:12px;">
            <div>
              <span> {{ '收货地址' }}:</span>
              <span>
                {{ titem.recProvinceVal }}{{ titem.recCityVal
                }}{{ titem.recCountyVal || "" }}{{ titem.recAddress }}</span
              >
            </div>
          </div> -->

          <table
            class="tables"
            style="
              margin-top: 10px;
              width: 100%;
              background: #fff;
              border-collapse: collapse;
              border: 1px solid #cccccc;
              border-spacing: 0;
              table-layout: fixed;
              border-collapse: collapse;
              font-size: 12px;
            "
            border
            :data="titem.orderItemsList"
          >
            <tr>
              <td colspan="5">订单编号</td>
              <td colspan="4">{{ '产品编码' }}</td>
              <td colspan="4">{{ '产品名称' }}</td>
              <td colspan="4">{{ '产品规格' }}</td>
              <td colspan="1">{{ '单位' }}</td>
              <td colspan="1">{{ '数量' }}</td>
              <td colspan="2">{{ '金额' }}</td>
              <!-- <td colspan="2">{{ '金额' }}</td> -->
              <!-- <td colspan="2">{{ '备注' }}</td> -->
            </tr>
            <tr v-for="(aitem, aindex) in titem.orderItemsList" :key="aindex">
              <td colspan="5">{{ aitem.orderCode }}</td>
              <td colspan="4">{{ aitem.productCode }}</td>
              <td colspan="4">{{ aitem.productName }}</td>
              <td colspan="4">{{ aitem.specsName }}</td>
              <td colspan="1">{{ aitem.unitTransactionVal }}</td>
              <td colspan="1">{{ aitem.quantity }}</td>
              <td colspan="2">{{ aitem.price | decimalFormat }}</td>
            </tr>
          </table>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              margin-top: 20px;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 260px">制单人：</div>
            <div class="rowcontent" style="width: 260px">出库人：</div>

            <div class="rowcontent" style="width: 260px">
              客服热线：4001112818
            </div>
            <div class="rowcontent" style="width: 260px" />
          </div>
          <div>
            <span style="font-weight: bold; font-size: 12px">温馨提示：</span>
            <span
              style="font-size:10px;!important"
            >尊敬的各位家人，感谢您长期以来对海之圣的支持与厚爱，当您收到货物时，请检查货物是否有破损，当场开箱验货确认无误后再签收哦，如有问题请第一时间致电公司客服热线，我们将一如既往的为您提供优质、快捷的物流服务。</span>
          </div>
          <div style="page-break-after: always" />
        </div>
      </div>
    </div>
    <!-- 海外打印 -->
    <div v-show="false" id="print-content2">
      <div
        v-for="(item, index) in dyhdData"
        :key="index"
        class="fhdbox2"
        style="min-height: 100vh"
      >
        <div
          class="fhdTitle"
          style="
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 5px;
          "
        >
          {{ '出库单' }}
        </div>
        <div style="text-align: right; line-height: 24px">
          （{{ '快递发货' }}）
        </div>
        <div
          style="
            text-align: right;
            line-height: 24px;
            border-bottom: 2px solid #000000;
            padding-bottom: 10px;
          "
        >
          {{ '订单日期' }} {{ item.printTime }}
        </div>
        <div
          class="mainrow2"
          style="padding: 5px 0; display: flex; align-items: center"
        >
          <div
            class="rowcontent"
            style="border-bottom: 2px solid #000000; padding-bottom: 10px"
          >
            {{ '发货单号' }} {{ item.deliverCode }}
          </div>
          <!-- <div class="rowcontent">订单类型{{ item.deliverCode }}</div> -->
        </div>
        <div
          class="mainrow2"
          style="padding: 5px 0; display: flex; align-items: center"
        >
          <div
            class="rowcontent"
            style="
              width: 46%;
              border-top: 2px solid #000000;
              margin-right: 10px;
              padding-top: 10px;
            "
          >
            {{ '收货人'
            }}<span style="margin-left: 20px">{{ item.recName }}</span>
          </div>
          <div
            class="rowcontent"
            style="width: 46%; border-top: 2px solid #000000; padding-top: 10px"
          >
            {{ '联系电话'
            }}<span style="margin-left: 20px">{{ item.recPhone }}</span>
          </div>
        </div>

        <div class="mainrow2">
          <div>
            <span> {{ '收货地址' }}</span>
            <span style="margin-left: 30px"> {{ item.recAddress }}</span>
          </div>
        </div>
        <!-- <div
          class="mainrow2"
          style="
            padding: 5px 0;
            display: flex;
            align-items: center;
            border-top: 2px solid #000000;
            border-bottom: 2px solid #000000;
          "
        >
          <div
            class="rowcontent"
            style="width: 50%; display: flex; align-items: center"
          >
            <div style="padding-right: 20px; border-right: 2px solid #000000">
              会员编号
            </div>
            <span style="margin-left: 20px">{{ item.recName }}</span>
          </div>
          <div
            class="rowcontent"
            style="width: 50%; display: flex; align-items: center"
          >
            <div style="padding-right: 20px; border-right: 2px solid #000000">
              会员姓名
            </div>
            <span style="margin-left: 20px">{{ item.recPhone }}</span>
          </div>
        </div> -->

        <table
          class="tables"
          style="
            margin-top: 10px;
            width: 100%;
            background: #fff;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            border-collapse: collapse;
          "
          :data="item.itemList"
        >
          <tr style="border-bottom: 2px solid #000000; padding-bottom: 10px">
            <td colspan="3" style="border-left: none; border-right: none">
              {{ '产品名称' }}
            </td>
            <td colspan="1">{{ '单位' }}</td>
            <td colspan="2">{{ '销售数量' }}</td>
            <td colspan="2">{{ '产品单价' }}</td>
            <td colspan="2">{{ '总金额' }}</td>
            <td colspan="2">{{ '产品规格' }}</td>
            <td colspan="2">{{ '赠品数量' }}</td>
            <td colspan="2">{{ '出库数量' }}</td>
          </tr>
          <tr v-for="(aitem, aindex) in item.itemList" :key="aindex">
            <td colspan="3">{{ aitem.productName }}</td>
            <td colspan="1">{{ aitem.unitTran }}</td>
            <td colspan="2">{{ aitem.quantity }}</td>
            <td colspan="2">{{ aitem.price }}</td>
            <td colspan="2">{{ aitem.price * aitem.quantity }}</td>
            <td colspan="2">{{ aitem.specsName }}</td>
            <td colspan="2" />
            <td colspan="2" />
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as del from '@/api/delivery'
import JsBarcode from 'jsbarcode'
export default {
  name: 'Yihandeled',
  filters: {
    decimalFormat(value) {
      return Number(value).toFixed(2)
    }
  },
  props: {
    params: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      idList: [],
      orderIdList: [],
      multiple: true,
      bdzsShow: false,
      zsTitle: '',
      ifcodebind: '', // true绑定false解绑
      codeData: [],
      delIdList: [], // 存放删除
      delIdList2: [], // 存放解绑
      pageSizes: [100, 200, 500, 1000, 2000],
      // 需要合并项的列
      needMergeArr: [
        {
          colName: 'colsele',
          mergeCheckNames: ['deliverCode']
        },
        {
          colName: 'deliverCode',
          mergeCheckNames: ['deliverCode']
        },
        {
          colName: 'orderCode',
          mergeCheckNames: ['deliverCode', 'orderCode']
        },
        {
          colName: 'orderTypeVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'orderTypeVal']
        },
        {
          colName: 'memberCode',
          mergeCheckNames: ['deliverCode', 'orderCode', 'memberCode']
        },
        {
          colName: 'memberName',
          mergeCheckNames: ['deliverCode', 'orderCode', 'memberName']
        },
        {
          colName: 'phone',
          mergeCheckNames: ['deliverCode', 'orderCode', 'phone']
        },
        {
          colName: 'recName',
          mergeCheckNames: ['deliverCode', 'orderCode', 'recName']
        },
        {
          colName: 'recPhone',
          mergeCheckNames: ['deliverCode', 'orderCode', 'recPhone']
        },

        {
          colName: 'recAddress',
          mergeCheckNames: ['deliverCode', 'orderCode', 'recAddress']
        },
        {
          colName: 'operateScopeVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'operateScopeVal']
        },
        {
          colName: 'isLandTransVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'isLandTransVal']
        },
        {
          colName: 'deliveryWayVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'deliveryWayVal']
        },
        {
          colName: 'preSaleStatusVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'preSaleStatusVal']
        },
        {
          colName: 'printStatusVal',
          mergeCheckNames: ['deliverCode', 'orderCode', 'printStatusVal']
        },
        {
          colName: 'remark',
          mergeCheckNames: ['deliverCode', 'orderCode', 'remark']
        },
        {
          colName: 'creationTime',
          mergeCheckNames: ['deliverCode', 'orderCode', 'creationTime']
        },
        {
          colName: 'payTime',
          mergeCheckNames: ['deliverCode', 'orderCode', 'payTime']
        },
        {
          colName: 'logisticsCompany',
          mergeCheckNames: ['deliverCode', 'orderCode', 'logisticsCompany']
        },
        {
          colName: 'logisticsCode',
          mergeCheckNames: ['deliverCode', 'orderCode', 'logisticsCode']
        }
      ],
      rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
      dyhdTable: [],
      dyhdData: [],
      pkCountry: '',
      currentRow: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    this.getList()
    this.pkCountry = this.user.pkCountry
  },
  methods: {
    formatAddress(row) {
      return (
        row.recProvinceVal +
        row.recCityVal +
        (row.recCountyVal || '') +
        row.recAddress
      )
    },
    // 条码枪回车
    handleCurrentChange(val) {
      this.currentRow = val
    },
    // 条码枪回车
    nextFocus() {
      const len = this.codeData.length
      const val = this.currentRow
      this.codeData.forEach((v, i) => {
        if (v === val) {
          if (i < len - 1) {
            this.setCurrent(this.codeData[i + 1])
            this.$refs['mark' + (i + 1)].focus()
          } else {
            this.setCurrent(this.codeData[0])
            this.$refs['mark' + 0].focus()
          }
        }
      })
    },
    // 条码枪回车
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    totalAmount(row) {
      let total2 = ''

      total2 = row.price * row.quantity
      return total2
    },
    // 解决多列行列合并，根据某一列 合并其他列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const needMerge = this.needMergeArr.some((item) => {
        return item.colName === column.property
      })
      if (needMerge === true) {
        return this.mergeAction(column.property, rowIndex, column)
      }
    },
    mergeAction(val, rowIndex, colData) {
      const _row = this.rowMergeArrs[val].rowArr[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return [_row, _col]
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false
      if (!Array.isArray(data) && !data.length) return false
      const needMerge = {}

      arr.forEach((mergeItem) => {
        // 创建合并管理对象
        needMerge[mergeItem.colName] = {
          rowArr: [],
          rowMergeNum: 0
        }
        const currentMergeItemData = needMerge[mergeItem.colName]

        // 进行合并管理对象数据的遍历整理
        data.forEach((item, index) => {
          if (index === 0) {
            currentMergeItemData.rowArr.push(1)
            currentMergeItemData.rowMergeNum = 0
          } else {
            const currentRowData = data[index]
            const preRowData = data[index - 1]

            if (
              this.colMergeCheck(
                currentRowData,
                preRowData,
                mergeItem.mergeCheckNames
              )
            ) {
              currentMergeItemData.rowArr[
                currentMergeItemData.rowMergeNum
              ] += 1
              currentMergeItemData.rowArr.push(0)
            } else {
              currentMergeItemData.rowArr.push(1)
              currentMergeItemData.rowMergeNum = index
            }
          }
        })
      })
      return needMerge
    },
    colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
      if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length) { return false }
      let result = true
      for (let index = 0; index < mergeCheckNames.length; index++) {
        const mergeCheckName = mergeCheckNames[index]
        if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
          result = false
          break
        }
      }
      return result
    },
    // 删除行内订单状态列
    deleteOrderRow(row) {
      this.$confirm('是否删除' + '?').then((_) => {
        del.deleteDeliverItems({ id: row.pkId || null }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()
          }
        })
      })
    },
    // 重置
    reCz(row) {
      this.$confirm('是否重置?').then((_) => {
        row.barCode = ''
        // del
        //   .codeReset({ barCodeId: row.deliverBarCodeId || null })
        //   .then((res) => {
        //     if (res.code == 200) {
        //       this.$message({
        //         message: res.msg,
        //         type: "success",
        //       });
        //     }
        //   });
      })
    },
    // 列表删除
    deleteDelivery() {
      this.$confirm('是否删除' + '?').then((_) => {
        del.deleteDeliver({ idList: this.idList.join() }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()
          }
        })
      })
    },
    // 删除
    handleDelete(row, index, rows) {
      if (this.ifcodebind) {
        // 绑定-删除
        this.$confirm('是否删除' + '?').then((_) => {
          if (row.deliverBarCodeId) {
            del.codeReset({ barCodeId: row.deliverBarCodeId }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                rows.splice(index, 1)
              }
            })
          } else {
            this.$message({
              message: '没有绑定过追溯码',
              type: 'warning'
            })
          }
        })
      } else {
        // 解绑-删除

        this.$confirm('是否删除' + '?').then((_) => {
          if (row.deliverBarCodeId) {
            del.codeReset({ barCodeId: row.deliverBarCodeId }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
              }
            })
            const thedel1 = []
            thedel1.push(row.deliverBarCodeId)
            this.delIdList = thedel1
            rows.splice(index, 1)
          } else {
            this.$message({
              message: '没有绑定过追溯码',
              type: 'warning'
            })
          }
        })
      }
    },
    getList() {
      this.params.pkDeliverList = []
      del.getDeliveryHandledList(this.params).then((res) => {
        this.tableData = res.rows
        this.total = res.total
        this.rowMergeArrs = this.rowMergeHandle(
          this.needMergeArr,
          this.tableData
        )
      })
    },

    // 绑定/解绑
    sureBd() {
      if (this.ifcodebind == true) {
        // 绑定
        del.savCodeBind(this.codeData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.bdzsShow = false
            this.getList()
          }
        })
      } else {
        if (this.codeData.length > 0) {
          // 解绑确定
          del.codeUnbind(this.delIdList2).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.bdzsShow = false
              this.getList()
            }
          })
        } else {
          this.bdzsShow = false
        }
      }
    },
    codeBind(index) {
      this.delIdList = []
      this.ifcodebind = index

      if (index == true) {
        // 绑定追溯
        this.zsTitle = '绑定追溯码'
        del
          .getCodeBindData({ deliverIdList: this.idList.join() })
          .then((res) => {
            res.data.forEach((element) => {
              element.productNum = 1
            })
            this.codeData = res.data
          })
      } else if (index == false) {
        // 解绑追溯
        this.zsTitle = '解绑追溯码'

        del
          .getCodeUnbindData({
            deliverIdList: this.idList.join(),
            orderIdList: this.orderIdList.join()
          })
          .then((res) => {
            res.data.forEach((element) => {
              element.productNum = 1
            })
            this.codeData = res.data
            const thedel2 = []
            res.data.forEach((ele) => {
              thedel2.push(ele.deliverBarCodeId)
            })
            this.delIdList2 = thedel2
          })
      }
      this.bdzsShow = true
    },
    // 生成打印
    getPrintCheck() {
      del
        .deliverHandledPrint({ deliverIdList: this.idList.join() })
        .then((res) => {
          this.dyhdData = res.data
        })
        .finally(() => {
          // 在接口请求完成后，循环生成条形码并展示在页面上

          // 循环生成条形码并展示在页面上
          this.dyhdData.forEach((item, index) => {
            // 使用JsBarcode生成条形码图片
            JsBarcode('#barcode' + index, item.deliverCode, {
              format: 'CODE128',
              lineColor: '#000',
              background: '#EBEEF5',
              width: 2,
              height: 20,
              displayValue: false
            })
          })
        })
        .then(() => {
          if (this.pkCountry == 1) {
            const printContent = document.getElementById('print-content')
            const printWindow = window.open('', '_blank') // 这句解决edge浏览器打不开的问题
            printWindow.document.write(printContent.innerHTML)
            printWindow.document.close()
            printWindow.focus()
            printWindow.print()
            // printWindow.close()
          } else {
            const printContent = document.getElementById('print-content2')
            const printWindow = window.open('', '_blank') // 这句解决edge浏览器打不开的问题
            printWindow.document.write(printContent.innerHTML)
            printWindow.document.close()
            printWindow.focus()
            printWindow.print()
            // printWindow.close()
          }
        })
    },
    handleSelectionChange(selection) {
      this.idList = selection.map((item) => item.pkDeliver)
      this.orderIdList = selection.map((item) => item.pkOrder)
      this.multiple = !selection.length
    },
    // 导出
    handleExport() {
      this.params.pkDeliverList = this.idList
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/sale/manage/deliver-handled/export',
          { ...this.params },
          `${'已合单'}${new Date().getTime()}.xlsx`
        )
      })
    },
    handleWaresExport() {
      this.params.pkDeliverList = this.idList
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/sale/manage/deliver-handled/wms-export',
          { ...this.params },
          `${'已合单-仓储导出'}${new Date().getTime()}.xlsx`
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@media print {
  table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
    //   合并内外边距
    // (去除表格单元格默认的2个像素内外边距*/
  }
  .fhdbox2 {
    background: #ffffff;
    padding: 20px;
    margin-top: 10px;
  }
  .fhdbox2 .fhdTitle {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .fhdbox2 .mainrow2 {
    padding: 5px 0;
    display: flex;
    align-items: center;
  }
}
.tables {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
::v-deep .fhdDialog2 .el-dialog__header {
  padding: 0;
  border: 0;
}
::v-deep .fhdDialog2 .el-dialog--center .el-dialog__body {
  padding: 0;
}
::v-deep .fhdDialog2 .el-dialog {
  background: rgba(0, 0, 0, 0);
  // padding: 10px 0;
  margin: 5vh auto !important;
  // margin-top: 0!important;
}

::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}

.fhdbox {
  background: #ffffff;
  .mainrow {
    margin-top: 20px;
  }
  .fhdtop {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    .fhd_flex {
      display: flex;
      align-items: center;
    }
    .col_title {
      font-weight: bold;
      margin-right: 20px;
    }
  }
}

.fhdbox2 {
  background: #ffffff;
  padding: 20px;
  margin-top: 20px;
  .fhdTitle {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .mainrow2 {
    padding: 5px 0;
    display: flex;
    align-items: center;
    .rowcontent {
      width: 500px;
    }
  }
}

.main {
  // margin-top: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

  .main_content {
    padding: 20px 25px;
  }

  .maintop {
    display: flex;
    // padding: 10px 20px;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn1 {
        color: #ffffff;
        background: rgba(243, 169, 0, 1);
      }
      .thebtn2 {
        color: #ffffff;
        background: rgba(16, 142, 233, 1);
      }
      .thebtn3 {
        color: #ffffff;
        background: rgba(83, 177, 30, 1);
      }
      .thebtn4 {
        color: #ffffff;
        background: rgba(199, 48, 48, 1);
      }
      .thebtn5 {
        color: #ffffff;
        background: rgba(0, 155, 88, 1);
      }
      .thebtn6 {
        color: #ffffff;
        background: rgba(236, 108, 0, 1);
      }
    }
  }
}
</style>