web-base-admin/src/views/logistics/delivery/index.vue

<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="80px">
        <template v-if="activeName == 0">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'订单编号'" prop="orderCode">
                <el-input v-model="queryParams.orderCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input v-model="queryParams.phone" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="'订单类型'" prop="orderType">
                <el-select
                  v-model="queryParams.orderType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'订单状态'" prop="orderStatus">
                <el-select
                  v-model="queryParams.orderStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'预售状态'" prop="preSaleStatus">
                <el-select
                  v-model="queryParams.preSaleStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in presaleStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'发货方式'" prop="deliveryWay">
                <el-select
                  v-model="queryParams.deliveryWay"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'运输方式'" prop="transportType">
                <el-select
                  v-model="queryParams.transportType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'支付方式'" prop="payType">
                <el-select
                  v-model="queryParams.payType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderPayTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'供应方式'" prop="operateScope">
                <el-select
                  v-model="queryParams.operateScope"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'产品分类'" prop="pkClassify">
                <el-select
                  v-model="queryParams.pkClassify"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in classifyAllList"
                    :key="index"
                    :label="item.name"
                    :value="item.pkId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'销售类型'" prop="isGift">
                    <el-select
                      v-model="queryParams.isGift"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in saleTypeList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="'发货类型'"
                    prop="shippingChannel"
                  >
                    <el-select
                      v-model="queryParams.shippingChannel"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in shippingChannelList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'发货仓库'" prop="orderType">
                    <el-select
                      v-model="queryParams.pkStorehouse"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'产品名称'" prop="productName">
                    <el-input v-model="queryParams.productName" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'产品规格'" prop="specsName">
                    <el-input v-model="queryParams.specsName" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'收货人'" prop="recName">
                    <el-input v-model="queryParams.recName" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'收货电话'" prop="recPhone">
                    <el-input v-model="queryParams.recPhone" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'原单号'" prop="code">
                    <el-input
                      v-model="queryParams.originalOrderCode"
                    /> </el-form-item></el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('选择产品')" prop="productIdList">
                    <el-input
                      v-model="productLists"
                      clearable
                      @clear="clearProduct"
                      @focus="openDig"
                    />
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="4">-->
                <!--                  <el-form-item :label="$t('系统类型')">-->
                <!--                    <el-select clearable v-model="queryParams.systemType">-->
                <!--                      <el-option-->
                <!--                        v-for="item in systemTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.label"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                  <el-form-item :label="'创建日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'支付日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="dizhi"
                    :label="'详细地址'"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      v-model="queryParams.shoppingAddress"
                      style="width: 100%"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="10px">
                    <el-input
                      v-model="queryParams.recAddress"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 1">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'发货单号'" prop="deliverCode">
                <el-input
                  v-model="queryParams.deliverCode"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'订单编号'" prop="orderCode">
                <el-input v-model="queryParams.orderCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input v-model="queryParams.phone" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="'订单类型'" prop="orderType">
                <el-select
                  v-model="queryParams.orderType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'订单状态'" prop="orderStatus">
                <el-select
                  v-model="queryParams.orderStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'预售状态'" prop="preSaleStatus">
                <el-select
                  v-model="queryParams.preSaleStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in presaleStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'发货方式'" prop="deliveryWay">
                <el-select
                  v-model="queryParams.deliveryWay"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'运输方式'" prop="transportType">
                <el-select
                  v-model="queryParams.transportType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'供应方式'" prop="operateScope">
                <el-select
                  v-model="queryParams.operateScope"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'打印状态'" prop="printStatus">
                <el-select
                  v-model="queryParams.printStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in printStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'收货人'" prop="recName">
                    <el-input v-model="queryParams.recName" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'收货电话'" prop="recPhone">
                    <el-input v-model="queryParams.recPhone" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="dizhi"
                    :label="'详细地址'"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      v-model="queryParams.shoppingAddress"
                      style="width: 100%"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="recAddress" label-width="40px">
                    <el-input
                      v-model="queryParams.recAddress"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'产品名称'" prop="productName">
                    <el-input
                      v-model="queryParams.productName"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'追溯编号'" prop="barCode">
                    <el-input
                      v-model="queryParams.barCode"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="是否追溯" prop="isBarCode">
                    <el-select
                      v-model="queryParams.isBarCode"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="item in yesornoList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="'发货类型'"
                    prop="shippingChannel"
                  >
                    <el-select
                      v-model="queryParams.shippingChannel"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="item in shippingChannelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'发货仓库'" prop="orderType">
                    <el-select
                      v-model="queryParams.pkStorehouse"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="4">-->
                <!--                  <el-form-item :label="$t('系统类型')">-->
                <!--                    <el-select clearable v-model="queryParams.systemType">-->
                <!--                      <el-option-->
                <!--                        v-for="item in systemTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.label"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="4">
                  <el-form-item label="批次" prop="dayBatch">
                    <el-input
                      v-model="queryParams.dayBatch"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'创建日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'支付日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 2">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'发货单号'" prop="deliverCode">
                <el-input
                  v-model="queryParams.deliverCode"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'订单编号'" prop="orderCode">
                <el-input v-model="queryParams.orderCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input v-model="queryParams.phone" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'发货状态'" prop="deliveryStatus">
                <el-select
                  v-model="queryParams.deliveryStatus"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in deliveryStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'发货方式'" prop="deliveryWay">
                <el-select
                  v-model="queryParams.deliveryWay"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'运输方式'" prop="transportType">
                <el-select
                  v-model="queryParams.transportType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="'供应方式'" prop="operateScope">
                <el-select
                  v-model="queryParams.operateScope"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'产品名称'" prop="productName">
                <el-autocomplete
                  v-model="queryParams.productName"
                  class="inline-input"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容或选择"
                  @select="handleSelect"
                />
                <!-- <el-select
                  clearable
                  v-model="queryParams.productName"
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in productAllList"
                    :key="index"
                    :label="item.productName"
                    :value="item.pkId"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'产品规格'" prop="specsName">
                <el-input v-model="queryParams.specsName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'物流公司'" prop="logisticsCompany">
                <el-input
                  v-model="queryParams.logisticsCompany"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'物流单号'" prop="logisticsCode">
                    <el-input
                      v-model="queryParams.logisticsCode"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'收货人'" prop="recName">
                    <el-input v-model="queryParams.recName" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'发货仓库'" prop="orderType">
                    <el-select
                      v-model="queryParams.pkStorehouse"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    class="dizhi"
                    :label="'详细地址'"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      v-model="queryParams.shoppingAddress"
                      style="width: 100%"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="recAddress" label-width="40px">
                    <el-input
                      v-model="queryParams.recAddress"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'收货电话'" prop="recPhone">
                    <el-input v-model="queryParams.recPhone" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="是否追溯" prop="isBarCode">
                    <el-select
                      v-model="queryParams.isBarCode"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="item in yesornoList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'追溯编号'" prop="barCode">
                    <el-input v-model="queryParams.barCode" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="'发货类型'"
                    prop="shippingChannel"
                  >
                    <el-select
                      v-model="queryParams.shippingChannel"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in shippingChannelList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item :label="'创建日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'支付日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'打印日期'" prop="printTime">
                    <el-date-picker
                      v-model="queryParams.printTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'发货日期'" prop="deliverTime">
                    <el-date-picker
                      v-model="queryParams.deliverTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 3">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'订单编号'" prop="orderCode">
                <el-input v-model="queryParams.orderCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员编号'" prop="memberCode">
                <el-input v-model="queryParams.memberCode" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'" prop="memberName">
                <el-input v-model="queryParams.memberName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'联系方式'" prop="phone">
                <el-input v-model="queryParams.phone" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'订单类型'" prop="orderType">
                <el-select
                  v-model="queryParams.orderType"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'发货方式'" prop="deliveryWay">
                <el-select
                  v-model="queryParams.deliveryWay"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'收货人'" prop="recName">
                <el-input v-model="queryParams.recName" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'收货电话'" prop="recPhone">
                <el-input v-model="queryParams.recPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="dizhi"
                :label="'详细地址'"
                prop="shoppingAddress"
              >
                <el-cascader
                  v-model="queryParams.shoppingAddress"
                  style="width: 100%"
                  :options="areaData"
                  :props="regionParams"
                  @change="handleChange1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="recAddress" label-width="0">
                <el-input v-model="queryParams.recAddress" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="'支付方式'" prop="payType">
                    <el-select
                      v-model="queryParams.payType"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in orderPayTypeList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'发货仓库'" prop="orderType">
                    <el-select
                      v-model="queryParams.pkStorehouse"
                      clearable
                      :placeholder="'请选择'"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'创建日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="'支付日期'" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="'开始日期'"
                      :end-placeholder="'结束日期'"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <el-row>
          <el-col :span="4">
            <div class="searchbox" style="margin-left: 20px">
              <el-button class="searchbtn" @click="getSearch(1)">
                {{ '搜索' }}</el-button>
              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
          <div class="openClose" @click="changeActive">
            <i
              :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
            <div>{{ isActive ? '点击收起' : '点击展开' }}</div>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <el-tabs
        v-model="activeName"
        style="padding: 10px 20px"
        @tab-click="handleClick"
      >
        <el-tab-pane v-if="menu1" :label="'未合单'" name="0">
          <unhandeled ref="unhandeled" :params="queryParams" />
        </el-tab-pane>
        <el-tab-pane v-if="menu2" :label="'已合单'" name="1">
          <yihandeled ref="yihandeled" :params="queryParams" />
        </el-tab-pane>
        <el-tab-pane v-if="menu3" name="2" :label="'立即发货'">
          <nowdelivery ref="nowdelivery" :params="queryParams" />
        </el-tab-pane>

      </el-tabs>
    </div>
    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-input
          v-model="select.productName"
          :placeholder="'请输入'"
          prefix-icon="el-icon-search"
          @keyup.enter.native="getDataList"
        />
        <div style="height: 10px" />
        <el-table
          ref="lessonTableRef"
          :data="dialogList"
          style="width: 100%"
          :row-key="
            (row) => {
              return row.pkProduct;
            }
          "
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="dialogChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          />
          <el-table-column align="center" prop="cover" :label="'产品主图'">
            <template slot-scope="scope">
              <img class="bgImg" :src="scope.row.cover" alt="">
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          />
          <el-table-column
            align="center"
            prop="productCode"
            :label="'产品编号'"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button type="primary" @click="onSubmit('form')">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/site.js'
import * as log from '@/api/logistics'
import unhandeled from '@/components/Delivery/unhandeled.vue'
import yihandeled from '@/components/Delivery/yihandeled.vue'
import nowdelivery from '@/components/Delivery/nowdelivery.vue'
import * as del from '@/api/delivery.js'
import { getRouters } from '@/api/settle'
import { productList } from '@/api/product'
export default {
  name: 'Fhqd',
  components: {
    topBar,
    unhandeled,
    yihandeled,
    nowdelivery
  },
  data() {
    return {
      moren: 'fhqd',
      topList: [
        {
          name: '发货清单',
          path: 'fhqd'
        }
      ],
      dialogVisible: false,
      dialogList: [],
      lsArr: [],
      tableData: [],
      productLists: [],
      select: {},
      orderTypeList: [], // 订单类型
      orderStatusList: [], // 订单状态
      presaleStatusList: [], // 预售状态
      deliveryWayList: [], // 发货方式
      transportTypeList: [], // 运输方式
      orderPayTypeList: [], // 支付方式
      supplyWayList: [], // 供应方式
      saleTypeList: [], // 销售类型
      deliveryStatusList: [], // 发货状态
      shippingChannelList: [], // 发货类型
      classifyAllList: [], // 产品分类
      printStatusList: [], // 打印状态
      productAllList: [], // 产品名称
      yesornoList: [], // 二次发货
      storehouseList: [], // 发货仓库
      total: '',
      queryParams: {
        pageNum: 1,
        pageSize: 500,
        deliverCode: '', // 发货单号12
        printStatus: '', // 打印状态1
        productName: '', // 产品名称2
        specsName: '', // 产品规格2
        logisticsCompany: '', // 物流公司2
        logisticsCode: '', // 物流单号2
        secondDeliver: '', // 二次发货2
        orderCode: '',
        memberCode: '',
        memberName: '',
        phone: '',
        orderType: '',
        orderStatus: '',
        preSaleStatus: '',
        deliveryWay: '',
        transportType: '',
        payType: '',
        operateScope: '',
        recName: '',
        recPhone: '',
        recProvince: '',
        recCity: '',
        recCounty: '',
        recAddress: '',
        isGift: '',
        shippingChannel: '',
        shoppingAddress: [],
        creationTime: [],
        payTime: [],
        printTime: [], // 打印时间2
        deliverTime: [], // 发货时间2
        productIdList: []
      },
      isActive: true,
      areaData: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      activeName: 0,
      menu1: false,
      menu2: false,
      menu3: false,
      menu4: false
    }
  },
  created() {
    this.getData()
    this.getSearch()
    this.getUserRoute()
  },
  methods: {
    clearProduct() {
      this.tableData = []
      this.lsArr = []
      this.queryParams.productIdList = []
      this.productLists = []
    },
    openDig() {
      this.select = {}
      productList(Object.assign({ isPutOn: 0 }, this.queryParams)).then(
        (res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
            item.pkProduct = item.pkProduct
            item.isGift = 0
          })
          this.dialogList = res.rows
          this.total = res.total
        }
      )
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    getDataList() {
      productList(
        Object.assign({ isPutOn: 0 }, this.queryParams, this.select)
      ).then((res) => {
        res.rows.forEach((item) => {
          item.quantity = 1
          item.pkProduct = item.pkProduct
          item.isGift = 0
        })
        this.dialogList = res.rows
        this.total = res.total
      })
    },
    dialogChange(val) {
      this.lsArr = val
    },
    onSubmit() {
      // this.tableData = []
      this.lsArr.forEach((item) => {
        this.tableData.push(item)
      })
      // this.tableData = this.clearArr(this.tableData)
      this.dialogVisible = false
      this.dialogList.forEach((row) => {
        this.$refs.lessonTableRef.toggleRowSelection(row, false)
      })
      // 判断重复
      const arr = this.tableData
      let isTrue = false
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].productCode == arr[j].productCode) {
            if (arr[i].isGift == arr[j].isGift) {
              isTrue = true
            }
          }
        }
      }
      if (isTrue) {
        this.$message.error('请勿选择重复的商品')
        this.tableData = []
        this.lsArr = []
        this.queryParams.productIdList = []
        this.productLists = []
        return
      }
      this.queryParams.productIdList = []
      this.productLists = []
      this.tableData.forEach((item) => {
        this.queryParams.productIdList.push(item.pkId)
        this.productLists.push(item.productName)
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          // 未合单
          if (item.routeName == 'DeliveryUnhandled') {
            this.menu1 = true
          }
          // 已合单
          if (item.routeName == 'DeliveryHandled') {
            this.menu2 = true
          }
          // 立即发货
          if (item.routeName == 'DeliveryImmediate') {
            this.menu3 = true
          }
          // 二次发货
          if (item.routeName == 'DeliverySecond') {
            this.menu4 = true
          }
        })
      })
    },
    // 带输入建议的产品名称
    querySearch(queryString, cb) {
      // console.log('queryString??',queryString)
      var productAllList = this.productAllList
      var results = queryString
        ? productAllList.filter(this.createFilter(queryString))
        : productAllList
      // 调用 callback 返回建议列表的数据

      cb(results)
    },
    createFilter(queryString) {
      return (product) => {
        return (
          product.productName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect(item) {
      this.queryParams.productName = item.pkId
      // console.log('🌈a???',item)
    },
    handleClick(tab) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 500,
        orderStatus: ''
      }
      // this.activeName = tab.name
      this.getSearch(0)
      // console.log('🌈',tab.name)
    },
    getData() {
      api.areaList().then((res) => {
        this.areaData = res.data
      })
      log.getOrderType().then((res) => {
        this.orderTypeList = res.data
      })
      del.getDeliveryStatus().then((res) => {
        this.deliveryStatusList = res.data
      })
      del.getOrderStatus().then((res) => {
        this.orderStatusList = res.data
      })
      del.getPresaleStatus().then((res) => {
        this.presaleStatusList = res.data
      })
      del.getDeliveryWayList().then((res) => {
        this.deliveryWayList = res.data
      })
      del.getTransportType().then((res) => {
        this.transportTypeList = res.data
      })
      del.getOrderPayType().then((res) => {
        this.orderPayTypeList = res.data
      })
      del.getSupplyWay().then((res) => {
        this.supplyWayList = res.data
      })
      del.getSaleTypeList().then((res) => {
        this.saleTypeList = res.data
      })
      del.getShippingChannelList().then((res) => {
        this.shippingChannelList = res.data
      })
      del.getClassifyAll().then((res) => {
        this.classifyAllList = res.data
      })
      del.getPrintStatus().then((res) => {
        this.printStatusList = res.data
      })
      del.getProductAll().then((res) => {
        res.data.forEach((element) => {
          element.value = element.productName
        })
        this.productAllList = res.data
      })
      del.getDealerYesNo().then((res) => {
        this.yesornoList = res.data
      })
      del.getStorehouseList().then((res) => {
        this.storehouseList = res.rows
      })
    },
    handleChange1() {},
    // 搜索
    getSearch(index) {
      if (this.queryParams.shoppingAddress) {
        this.queryParams.recProvince = this.queryParams.shoppingAddress[0]
        this.queryParams.recCity = this.queryParams.shoppingAddress[1]
        this.queryParams.recCounty = this.queryParams.shoppingAddress[2]
      } else {
        this.queryParams.recAddress = ''
      }

      this.$nextTick(() => {
        console.log('this.$refs', this.$refs)
        if (this.activeName == 0) {
          this.$refs.unhandeled.getList()
        } else if (this.activeName == 1) {
          this.$refs.yihandeled.getList()
        } else if (this.activeName == 2) {
          this.$refs.nowdelivery.getList()
        } else if (this.activeName == 3) {
          if (index && index == 1) {
            this.$refs.twoSend.getList()
          }
        }
      })
    },
    // 重置
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 500,
        orderStatus: 1
      }
      this.getSearch()
    },
    // 展开折叠
    changeActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style lang="scss" scoped>
.bgImg {
  width: 48px;
  height: 48px;
}
.cpHeight {
  height: 60vh;
  overflow-y: auto;
}
.el-range-editor.el-input__inner {
  width: 100%;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #c8161d;
        color: #ffffff;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .main_title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .bluekuai {
        width: 5px;
        height: 19px;
        background: #4391fd;
        margin-right: 20px;
      }
      .title_word {
        font-size: 14px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .main_content {
      padding: 20px 25px;
    }

    .maintop {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(243, 169, 0, 1);
        }
        .thebtn2 {
          color: #ffffff;

          background: rgba(72, 178, 253, 1);
        }
        .thebtn3 {
          color: #ffffff;

          background: rgba(1, 143, 243, 1);
        }
        .thebtn4 {
          color: #ffffff;
          background: rgba(167, 116, 176, 1);
        }
        .thebtn5 {
          color: #ffffff;
          background: rgba(0, 155, 88, 1);
        }
        .thebtn6 {
          color: #ffffff;
          background: rgba(236, 108, 0, 1);
        }
      }
    }
  }
}
</style>