supply-front/src/views/supply/pickup/components/pickup_form.vue

<template>
  <div class="detail-container">
    <el-page-header :content="listItem ? (flag ? '详情' : '编辑') : '新增'" @back="goBack" />
    <el-divider />

    <div>
      <el-form
        ref="mainForm"
        :model="mainForm"
        :rules="mainFormRules"
        label-width="80px"
        size="small"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="选择仓库" prop="warehouse">
              <el-select
                v-model="mainForm.warehouse"
                placeholder="请选择仓库"
                style="width: 100%"
                :disabled="!!listItem"
              >
                <el-option
                  v-for="(item, index) in warehouseList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-button size="small" type="primary" :disabled="!!listItem" @click="getDeliverList">确定</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="8" style="height: 51px">
            <el-form-item label="预约日期" prop="date">
              <el-date-picker
                v-model="mainForm.date"
                :disabled="flag"
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                :picker-options="setDisabled"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" style="height: 51px">
            <el-form-item label="预约时段" prop="timeSlot">
              <el-radio-group v-model="mainForm.timeSlot" :disabled="flag">
                <el-radio :label="1">上午</el-radio>
                <el-radio :label="2">下午</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="提货方式" prop="pickupWay">
              <el-radio-group v-model="mainForm.pickupWay" :disabled="flag">
                <el-radio
                  v-for="(item, index) in pickupWayList"
                  :key="index"
                  :label="item.dictCode"
                  :disabled="item.disabled"
                >{{ item.dictValue }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item v-if="mainForm.pickupWay == '1'" label="提货人" prop="pickupMan">
              <el-select v-model="mainForm.pickupMan" placeholder="全部" :disabled="flag" style="width: 100%">
                <el-option
                  v-for="(item, index) in pickupManList"
                  :key="index"
                  :label="item.takerName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="mainForm.pickupWay == '1'" :xs="24" :sm="12" :lg="8">
            <el-form-item label="提货车辆" prop="pickupCar">
              <el-select v-model="mainForm.pickupCar" placeholder="全部" style="width: 100%" :disabled="flag">
                <el-option
                  v-for="(item, index) in pickupCarList"
                  :key="index"
                  :label="item.carBrand"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="mainForm.pickupWay == '2'">
            <el-col :xs="24" :sm="12" :lg="8">
              <el-form-item label="物流公司" prop="company">
                <el-select
                  v-model="mainForm.logisticsId"
                  placeholder="全部"
                  style="width: 100%"
                  :disabled="flag"
                  @change="getLogisticsId"
                >
                  <el-option
                    v-for="(item, index) in companyList"
                    :key="index"
                    :label="item.logisticsCompany"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="pd-lr" :span="16">
              <el-col :xs="24" :sm="12" :lg="12">
                <el-form-item label="是否上楼" prop="isUp">
                  <el-radio-group v-model="mainForm.isUp" :disabled="flag">
                    <el-radio label="YES"> 是 </el-radio>
                    <el-radio label="NO"> 否 </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="12">
                <el-form-item label="是否卸货" prop="isDischarge">
                  <el-radio-group v-model="mainForm.isDischarge" :disabled="flag">
                    <el-radio label="YES"> 是 </el-radio>
                    <el-radio label="NO"> 否 </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-col>
          </template>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="mainForm.remark" placeholder="请输入备注" :disabled="flag" />
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-row :gutter="20">-->
        <!--          <template v-if="logisticsNumber === '001'">-->
        <!--            <el-col :xs="24" :sm="8" :lg="8">-->
        <!--              <el-form-item label="收货客户" :prop="logisticsNumber === '001' ? 'receivingName' : ''">-->
        <!--                <el-input v-model="mainForm.receivingName" :disabled="flag" placeholder="请输入收货客户"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :xs="24" :sm="8" :lg="8">-->
        <!--              <el-form-item label="电话" :prop="logisticsNumber === '001' ? 'phone' : ''">-->
        <!--                <el-input v-model="mainForm.phone" :disabled="flag" placeholder="请输入电话"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :xs="24" :sm="8" :lg="8">-->
        <!--              <el-form-item label="收货地址" :prop="logisticsNumber === '001' ? 'address' : ''">-->
        <!--                <el-input v-model="mainForm.address" :disabled="flag" placeholder="请输入收货地址"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--          </template>-->
        <!--          <el-col :xs="24" :sm="24" :lg="24">-->
        <!--            <el-form-item label="备注内容" prop="remark">-->
        <!--              <el-input v-model="mainForm.remark" :disabled="flag" placeholder="请输入备注内容"></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </el-form>
    </div>

    <div class="mymain-container">
      <div class="table">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="deliverList"
          element-loading-text="Loading"
          border
          fit
          height="520"
          highlight-current-row
          stripe
          @select="handleSelect"
          @select-all="handleSelectAll"
        >
          <el-table-column align="center" type="selection" width="55" />

          <template v-if="logisticsNumber === '001' && mainForm.pickupWay == 2">
            <el-table-column align="left" label="仓库" prop="invoiceId" min-width="160" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-select
                  v-model="row.warehouseFlag"
                  value-key=""
                  placeholder=""
                  :disabled="flag"
                  filterable
                  size="mini"
                  @change="storeChange($event, row)"
                >
                  <el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="left" label="收货客户" prop="orderTime" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input
                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
                  v-model="scope.row.receivingName"
                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                  size="mini"
                  @input="handleInput($event, scope.row.invoiceId, 1)"
                />
                <template v-else>
                  <template v-if="listItem">
                    <el-input
                      v-model="scope.row.receivingName"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                  <template v-else>
                    <el-input
                      v-model="scope.row.refLinkman"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column align="left" label="电话" prop="orderTime" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input
                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
                  v-model="scope.row.phone"
                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                  size="mini"
                  @input="handleInput($event, scope.row.invoiceId, 2)"
                />
                <template v-else>
                  <template v-if="listItem">
                    <el-input
                      v-model="scope.row.phone"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                  <template v-else>
                    <el-input
                      v-model="scope.row.refPhone"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column align="left" label="收货地址" prop="orderTime" min-width="200" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input
                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
                  v-model="scope.row.address"
                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                  size="mini"
                  @input="handleInput($event, scope.row.invoiceId, 3)"
                />
                <template v-else>
                  <template v-if="listItem">
                    <el-input
                      v-model="scope.row.address"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                  <template v-else>
                    <el-input
                      v-model="scope.row.refInstallAddress"
                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
                      size="mini"
                    />
                  </template>
                </template>
              </template>
            </el-table-column>
          </template>
          <el-table-column
            align="left"
            label="经销商订单"
            prop="customerOrderId"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.customerOrderId" placeholder="请输入" size="mini" clearable @input="handleOrderIdChange($event, scope.row)" />
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="发货申请单"
            prop="invoiceId"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="right"
            label="数量"
            prop="refundableQty"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column align="left" label="单据日期" prop="orderTime" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.orderTime | dateToDayFilter }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="工程登录编号"
            prop="refEnginRecordNo"
            min-width="160"
            show-overflow-tooltip
          >
            <template v-if="scope.row" slot-scope="scope">
              <CopyButton
                :copy-text="scope.row.refEnginRecordNo"
              />
              <span>{{
                scope.row.refEnginRecordNo
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="销售订单号" min-width="160" show-overflow-tooltip>
            <template v-if="scope.row" slot-scope="scope">
              <CopyButton
                :copy-text="
                  scope.row.orderType === 'TRADE' ||
                    scope.row.orderType === 'HOME' ||
                    scope.row.orderType === 'REQUISITION_TRADE' ||
                    scope.row.orderType === 'REQUISITION_HOME'
                    ? scope.row.enginOrderNo
                    : scope.row.mainOrderId
                "
              />
              <span>{{
                (scope.row.orderType === 'TRADE' ||
                  scope.row.orderType === 'HOME' ||
                  scope.row.orderType === 'REQUISITION_TRADE' ||
                  scope.row.orderType === 'REQUISITION_HOME')
                  ? scope.row.enginOrderNo
                  : scope.row.mainOrderId
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="left" label="工程编号" prop="enginOrderNo" min-width="140" show-overflow-tooltip></el-table-column> -->
          <el-table-column
            align="left"
            label="销售类型"
            prop="saleTypeName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="物料编码"
            prop="materialCode"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="产品名称"
            prop="materialName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="规格型号"
            prop="specification"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="单位"
            prop="unit"
            min-width="100"
            show-overflow-tooltip
          />

          <el-table-column v-if="flag && mainForm.pickupWay == '2'" fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handLogistics(scope.row)">物流信息</el-button>
              <el-button type="text" size="small" @click="getListCostBillV2(scope.row)">物流费用</el-button>
              <el-button type="text" size="small" @click="getListCodeV2(scope.row)">出库条码</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button
          v-if="!flag"
          type="primary"
          :loading="formLoading"
          @click="clickSubmitForm"
        >{{ formLoading ? '提交中 ...' : '提 交' }}
        </el-button>
        <el-popconfirm v-if="!listItem" title="确定重置吗？" style="margin-left: 10px" @onConfirm="resetForm">
          <el-button slot="reference">重 置</el-button>
        </el-popconfirm>
      </div>
    </div>
    <el-dialog
      title="物流信息"
      append-to-body
      :visible.sync="visible"
      width="60%"
      :close-on-click-modal="false"
      @close="onClose"
    >
      <el-timeline v-if="logisticsDetail.length" class="logistics" :reverse="false">
        <el-timeline-item
          v-for="(item, index) in logisticsDetail"
          :key="index"
          placement="top"
          type="success"
          :timestamp="item.time"
        >
          <el-row :gutter="20">
            <el-col class="logistics-title"> {{ item.status }} </el-col>
            <el-col>
              <div class="flex">
                <div>{{ item.context }}</div>
                <!-- <div>{{ item.createTime }}</div> -->
              </div>
            </el-col>
          </el-row>
        </el-timeline-item>
      </el-timeline>
      <div v-else class="tip">暂无物流信息</div>
    </el-dialog>
    <el-dialog
      title="物流费用"
      append-to-body
      :visible.sync="logisticsVisible"
      width="60%"
      :close-on-click-modal="false"
      @close="onClose"
    >
      <zj-table
        :table-attributes="defaultTableAttributes"
        :is-drop="true"
        :columns="formLogistics"
        :table-data="logisticsData"
      />
    </el-dialog>
    <el-dialog
      title="出库条码"
      append-to-body
      :visible.sync="outboundVisible"
      width="60%"
      :close-on-click-modal="false"
      @close="onClose"
    >
      <zj-table
        :table-attributes="defaultTableAttributes"
        :is-drop="true"
        :columns="formOutbound"
        :table-data="outboundData"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getWarehouseList,
  getDeliverList,
  getPickupManList,
  getPickupCarList,
  getCompanyList,
  addPickupBook,
  editPickupBook,
  getDetail,
  checkStock,
  getListOrderTrack
} from '@/api/supply/pickup'
import { getListCostBillV2 } from '@/api/logisticsBill'
import { getListCodeV2 } from '@/api/barcode'
import { getDictList } from '@/api/common'
import { mapGetters } from 'vuex'
export default {
  name: 'PickupForm',
  componentName: 'PickupForm',
  props: ['listItem', 'flag'],
  data() {
    return {
      deliverList: null, // 列表数据
      listLoading: false, // 列表加载loading
      mainForm: {
        // 筛选表单数据
        warehouse: '',
        date: '',
        timeSlot: '',
        pickupWay: '',
        pickupMan: '',
        pickupCar: '',
        company: '',
        remark: '',
        logisticsId: '',
        receivingName: '',
        phone: '',
        address: '',
        isUp: 'NO',
        isDischarge: 'NO'
      },
      mainFormRules: {
        date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
        timeSlot: [{ required: true, message: '请选择预约时段', trigger: 'change' }],
        pickupWay: [{ required: true, message: '请选择提货方式', trigger: 'change' }],
        pickupMan: [{ required: true, message: '请选择提货人', trigger: 'change' }],
        company: [{ required: true, message: '请选择物流公司', trigger: 'change' }]
        // receivingName: [{ required: true, message: '请填写收货客户', trigger: 'change' }],
        // phone: [{ required: true, message: '请填写电话', trigger: 'change' }]
        // address: [{ required: true, message: '请填写收货地址', trigger: 'change' }]
      },
      formLoading: false,
      tableSelection: [],
      warehouseList: [],
      pickupWayList: [],
      pickupManList: [],
      pickupCarList: [],
      companyList: [],
      defaultTableAttributes: {
        border: true,
        headerCellClassName: 'headerRowColor',
        size: 'mini',
        'summary-method': this.$getSummaries,
        'show-summary': true
      },
      logisticsNumber: '',
      storeList: [
        {
          label: '前置仓',
          value: 0
        },
        {
          label: '工程机',
          value: 1
        },
        {
          label: '商家仓',
          value: 2
        }
      ],
      setDisabled: {
        disabledDate: time => {
          return time.getTime() < new Date() - 24 * 3600 * 1000
        }
      },
      visible: false,
      logisticsVisible: false,
      outboundVisible: false,
      orderId: '',
      logisticsDetail: [],
      frontPickType: null,
      isFront: null,
      isPick: null,
      isPickUpGoods: false,
      logisticsData: [],
      outboundData: []
    }
  },

  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    },
    ...mapGetters(['userInfo']),
    formLogistics() {
      return [
        {
          columnAttributes: {
            label: '补贴费用',
            prop: 'allowanceCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '所属销售公司类型',
            prop: 'belongCompanyType',
            width: 200
          },
          render: (h, { row }) => {
            const { belongCompanyType } = row
            const typeObj = {
              GE_JIANG: '格匠',
              GUANG_ZHOU: '广州销售公司',
              FO_SHAN: '佛山销售公司',
              OTHER: '其他销售公司'
            }
            return <div>{typeObj[belongCompanyType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '运费结算系数',
            prop: 'coefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'comment',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '最终运费',
            prop: 'cost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '客户名称',
            prop: 'customerName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '客户电话',
            prop: 'customerPhone',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '无法生成的原因',
            prop: 'errorResult',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '是否已经对过帐',
            prop: 'isAccountChecking',
            width: 200
          },
          render: (h, { row }) => {
            const { isAccountChecking } = row
            return <div>{+isAccountChecking ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否已经审核',
            prop: 'isAudit',
            width: 200
          },
          render: (h, { row }) => {
            const { isAudit } = row
            return <div>{+isAudit ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否完结',
            prop: 'isFinish',
            width: 200
          },
          render: (h, { row }) => {
            const { isFinish } = row
            return <div>{+isFinish ? '已经完结' : '未完结'}</div>
          }
        },
        {
          columnAttributes: {
            label: '实际是否卸货',
            prop: 'isRealUnload',
            width: 200
          },
          render: (h, { row }) => {
            const { isRealUnload } = row
            return <div>{+isRealUnload ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '实际是否上楼',
            prop: 'isRealUpstairs',
            width: 200
          },
          render: (h, { row }) => {
            const { isRealUpstairs } = row
            return <div>{+isRealUpstairs ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否卸货',
            prop: 'isUnload',
            width: 200
          },
          render: (h, { row }) => {
            const { isUnload } = row
            return <div>{+isUnload ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '是否上楼',
            prop: 'isUpstairs',
            width: 200
          },
          render: (h, { row }) => {
            const { isUpstairs } = row
            return <div>{+isUpstairs ? '是' : '否'}</div>
          }
        },
        {
          columnAttributes: {
            label: '物料名称',
            prop: 'materialCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '计费分类',
            prop: 'materialCostType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'materialName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'materialSpecification',
            width: 350
          }
        },
        {
          columnAttributes: {
            label: '物料类型',
            prop: 'materialType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家编码',
            prop: 'merchantCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家名称',
            prop: 'merchantName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单号',
            prop: 'orderCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单时间',
            prop: 'orderDate',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '订单类型',
            prop: 'orderType',
            width: 200
          },
          render: (h, { row }) => {
            const { orderType } = row
            const typeObj = {
              TOB: '商家机工程机类型',
              ALL: '所有类型，广州的订单统一 开单价',
              TOC: '佛山销售销售订单类型公司'
            }
            return <div>{typeObj[orderType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '订单类型细分',
            prop: 'orderTypeDetail',
            width: 200
          },
          render: (h, { row }) => {
            const { orderType } = row
            const typeObj = {
              PICKING_UP_ORDER: '前置仓提货订单',
              SALE_ORDER: '销售订单',
              MERCHANT_WAREHOUSE_ORDER: '商家仓订单',
              PROJECT_ORDER: '工程机订单',
              SALE_RETURN_ORDER: '销售退货单'
            }
            return <div>{typeObj[orderType]}</div>
          }
        },
        {
          columnAttributes: {
            label: '收货送货地址',
            prop: 'receiptAddress',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '退货单号',
            prop: 'returnOrderCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '补贴结算系数',
            prop: 'subsidyCoefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '嘉贤创建时间',
            prop: 'time',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '费用汇总',
            prop: 'totalCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '单价计算',
            prop: 'unitPrice',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '卸货上楼结算系数',
            prop: 'unloadUpstairsCoefficient',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '上楼卸货费用',
            prop: 'unloadUpstairsCost',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库编码',
            prop: 'warehouseCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库名称',
            prop: 'warehouseName',
            width: 200
          }
        }
      ]
    },
    formOutbound() {
      return [
        {
          columnAttributes: {
            label: '条码',
            prop: 'barCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '出库时间',
            prop: 'consignerTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '出库时间',
            prop: 'consignerTimeV2',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '创建人',
            prop: 'createBy',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '创建时间',
            prop: 'createTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '送货时间',
            prop: 'deliveryTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '送货时间',
            prop: 'deliveryTimeV2',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '条码唯一id',
            prop: 'id',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '物料代码',
            prop: 'materialCode',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '物料类型',
            prop: 'materialType',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '销售订单号',
            prop: 'orderNumber',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '收货人',
            prop: 'receiptCompany',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商家名称',
            prop: 'salesCompany',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '规格',
            prop: 'specification',
            width: 350
          }
        },
        {
          columnAttributes: {
            label: '更新人',
            prop: 'updateBy',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '修改时间',
            prop: 'updateTime',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '发货仓库名称',
            prop: 'warehouse',
            width: 200
          }
        }
      ]
    }
  },

  created() {
    this.getWarehouseList()
    this.getPickupWayList()
    this.getPickupManList()
    this.getPickupCarList()
    this.getCompanyList()
    if (this.listItem) {
      this.getDetail()
    }
  },

  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0;
      return true
    },

    // 返回列表
    goBack() {
      this.$emit('backListFormDetail')
    },

    storeChange(e, row) {
      console.log(e, row)
      this.deliverList.forEach(item => {
        if (item.invoiceId === row.invoiceId) {
          this.$set(item, 'warehouseFlag', e)
          if (e == 0) {
            if (!(item.orderType === 'TRADE' || item.orderType === 'HOME')) {
              if (item.receivingName && item.phone && item.address) {
                item.copyReceivingName = item.receivingName
                item.copyPhone = item.phone
                item.copyAddress = item.address
                item.receivingName = ''
                item.phone = ''
                item.address = ''
              }
            } else {
              if (item.refLinkman && item.refPhone && item.refInstallAddress) {
                item.copyRefLinkman = item.refLinkman
                item.copyRefPhone = item.refPhone
                item.copyRefInstallAddress = item.refInstallAddress
                item.refLinkman = ''
                item.refPhone = ''
                item.refInstallAddress = ''
              }
            }
          }
          if (e == 1) {
            item.refLinkman = item.copyRefLinkman || item.copyReceivingName || item.refLinkman
            item.refPhone = item.copyRefPhone || item.copyPhone || item.refPhone
            item.refInstallAddress = item.copyRefInstallAddress || item.copyAddress || item.refInstallAddress
          }
          if (e == 2) {
            item.receivingName = item.copyReceivingName
            item.phone = item.copyPhone
            item.address = item.copyAddress
          }
        }
      })
    },
    handleOrderIdChange(e, row) {
      this.deliverList.forEach(item => {
        if (item.invoiceId === row.invoiceId) {
          this.$set(item, 'customerOrderId', e)
        }
      })
    },
    handleInput(e, id, type) {
      console.log(e)
      this.deliverList.forEach(k => {
        if (k.invoiceId === id) {
          switch (type) {
            case 1:
              k.receivingName = e
              break
            case 2:
              k.phone = e
              break
            default:
              k.address = e
          }
        }
      })
    },
    // 获取详情
    getDetail() {
      getDetail({ id: this.listItem.id }).then(res => {
        const data = res.data
        this.mainForm.warehouse = data.correspondId
        this.mainForm.date = data.pickTime.slice(0, 10)
        this.mainForm.timeSlot = Number(data.pickStatus)
        this.mainForm.pickupWay = String(data.pickType)
        this.mainForm.pickupMan = data.takerId
        this.mainForm.pickupCar = data.takerCarId
        this.mainForm.company = data.pickLogistics
        this.mainForm.remark = data.remark
        this.mainForm.logisticsId = data.logisticsId
        this.mainForm.isUp = data.isUp
        this.mainForm.isDischarge = data.isDischarge
        if (this.mainForm.pickupWay == 2) {
          const item = this.companyList.find(k => k.id === data.logisticsId)
          this.logisticsNumber = item.logisticsNumber
        }
        data.invoicePickBeans.forEach(k => {
          if (k.warehouseFlag == 0) {
            if (!(k.orderType === 'TRADE' || k.orderType === 'HOME')) {
              if (k.receivingName && k.phone && k.address) {
                k.copyReceivingName = k.receivingName
                k.copyPhone = k.phone
                k.copyAddress = k.address
                k.receivingName = ''
                k.phone = ''
                k.address = ''
              }
            } else {
              if (k.refLinkman && k.refPhone && k.refInstallAddress) {
                k.copyRefLinkman = k.refLinkman
                k.copyRefPhone = k.refPhone
                k.copyRefInstallAddress = k.refInstallAddress
                k.refLinkman = ''
                k.refPhone = ''
                k.refInstallAddress = ''
              }
            }
          }
        })
        this.deliverList = data.invoicePickBeans
      })
    },

    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },

    // 获取提货方式列表
    getPickupWayList() {
      getDictList({ sysDictEnum: 'PICK' }).then(res => {
        console.log(this.userInfo)
        this.frontPickType = this.userInfo.frontPickType
        this.isFront = this.userInfo.isFront
        this.isPick = this.userInfo.isPick
        res.data.forEach(k => {
          if (this.frontPickType) {
            if (!this.isFront && k.dictCode == 2) {
              k.disabled = true
            }
            if (!this.isPick && k.dictCode == 1) {
              k.disabled = true
            }
          }
        })
        this.pickupWayList = res.data

        // if (this.isFront === true) {
        //   this.mainForm.pickupWay = '2'
        //   this.mainForm.logisticsId = '1574563841707114498'
        //   getCompanyList({
        //     pageNum: 1,
        //     pageSize: -1
        //   }).then(res => {
        //     this.companyList = res.data.records
        //     const item = this.companyList.find(k => k.id === this.mainForm.logisticsId)
        //     this.mainForm.company = item.logisticsCompany
        //     this.logisticsNumber = item.logisticsNumber
        //     if (this.logisticsNumber === '001' && this.deliverList && this.deliverList.length) {
        //       if (!this.listItem) {
        //         this.deliverList.forEach(k => {
        //           this.$set(k, 'receivingName', '')
        //           this.$set(k, 'phone', '')
        //           this.$set(k, 'address', '')
        //         })
        //       }
        //     }
        //   })
        // } else if (this.isFront === false) {
        //   this.mainForm.pickupWay = '1'
        // }
      })
    },

    // 获取提货人列表
    getPickupManList() {
      getPickupManList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.pickupManList = res.data.records
      })
    },

    // 获取提货车辆列表
    getPickupCarList() {
      getPickupCarList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.pickupCarList = res.data.records
      })
    },

    // 获取物流公司列表
    getCompanyList() {
      getCompanyList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.companyList = res.data.records
        console.log(this.companyList)
      })
    },
    getLogisticsId(e) {
      console.log(this.companyList)
      const item = this.companyList.find(k => k.id === e)
      this.mainForm.company = item.logisticsCompany
      this.logisticsNumber = item.logisticsNumber
      if (this.logisticsNumber === '001' && this.deliverList && this.deliverList.length) {
        this.deliverList.forEach(k => {
          this.$set(k, 'receivingName', '')
          this.$set(k, 'phone', '')
          this.$set(k, 'address', '')
        })
      } else {
        if (this.deliverList && !this.deliverList.length) return
        this.deliverList.forEach(k => {
          delete k.receivingName
          delete k.phone
          delete k.address
        })
      }
      this.deliverList.forEach(k => {
        if (!k.warehouseFlag) {
          this.$set(k, 'warehouseFlag', null)
          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001') {
            // 注释默认不选择仓库
            // if (k.refLinkman || k.refPhone || k.refInstallAddress) {
            //   this.$set(k, 'warehouseFlag', 1)
            // } else {
            //   this.$set(k, 'warehouseFlag', 0)
            // }
          }
        }
      })
    },
    // 查询列表
    getDeliverList() {
      if (!this.mainForm.warehouse) {
        return this.$errorMsg('请选择仓库')
      }
      this.listLoading = true
      getDeliverList({ correspondId: this.mainForm.warehouse }).then(res => {
        this.deliverList = res.data
        this.deliverList.forEach(k => {
          this.$set(k, 'warehouseFlag', null)
          this.$set(k, 'customerOrderId', k.customerOrderId || null)
          // 注释默认不选择仓库
          // if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001') {
          //   if (k.refLinkman || k.refPhone || k.refInstallAddress) {
          //     this.$set(k, 'warehouseFlag', 1)
          //   } else {
          //     this.$set(k, 'warehouseFlag', 0)
          //   }
          // }
        })
        this.listLoading = false
      })
    },

    handleSelect(selection, row) {
      this.$refs.table.toggleRowSelection(row)
      this.deliverList.forEach(item => {
        if (item.invoiceId === row.invoiceId) {
          this.$refs.table.toggleRowSelection(item)
        }
      })
      this.tableSelection = this.$refs.table.selection
      // this.tableSelection = this.$refs.table.selection;
    },

    handleSelectAll(selection) {
      this.tableSelection = this.$refs.table.selection
    },

    clickSubmitForm() {
      this.$refs.mainForm.validate(valid => {
        if (valid) {
          if (this.tableSelection.length < 1) {
            return this.$errorMsg('请选择发货申请单')
          }
          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001') {
            for (let i = 0; i < this.tableSelection.length; i++) {
              if (this.tableSelection[i].warehouseFlag == null) {
                this.$errorMsg('仓库必选')
                return
              }
            }
          }
          for (let i = 0; i < this.tableSelection.length; i++) {
            if (this.tableSelection[i].warehouseFlag == 2) {
              const el = this.tableSelection[i]
              if (!(el.orderType === 'TRADE' || el.orderType === 'HOME')) {
                if (!(el.receivingName && el.phone && el.address)) {
                  return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
                }
              } else {
                if (this.listItem) {
                  if (!(el.receivingName && el.phone && el.address)) {
                    return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
                  }
                } else {
                  if (!(el.refLinkman && el.refPhone && el.refInstallAddress)) {
                    return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
                  }
                }
              }
            }
          }

          const orderList = []
          this.tableSelection.forEach(item => {
            orderList.push(item.invoiceOrderId)
          })
          const params = {
            correspondId: this.mainForm.warehouse,
            pickTime: this.mainForm.date + ' 00:00:00',
            invoiceOrderIds: orderList.join(',')
          }
          checkStock(params).then(res => {
            if (res.data) {
              this.$confirm(res.data, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(() => {
                  this.submitForm()
                })
                .catch(() => {})
            } else {
              this.submitForm()
            }
          })
        }
      })
    },

    submitForm() {
      this.formLoading = true
      let takerName
      if (this.mainForm.pickupWay == '1') {
        takerName = this.pickupManList.find(o => o.id == this.mainForm.pickupMan).takerName
      }
      // let correspondName = this.warehouseList.find(o => o.id == this.mainForm.warehouse).name;

      const orderList = []

      this.tableSelection.forEach(item => {
        if (!(item.orderType === 'TRADE' || item.orderType === 'HOME')) {
        } else {
          if (this.listItem) {
          } else {
            if (item.refLinkman && item.refPhone && item.refInstallAddress) {
              item.receivingName = item.refLinkman
              item.phone = item.refPhone
              item.address = item.refInstallAddress
            }
          }
        }
        orderList.push({
          warehouseFlag: item.warehouseFlag,
          customerOrderId: item.customerOrderId,
          address: item.address,
          id: this.listItem ? item.id : '',
          invoiceOrderId: item.invoiceOrderId,
          materialCode: item.materialCode,
          materialId: item.materialId,
          materialName: item.materialName,
          materialOldNumber: item.materialOldNumber,
          phone: item.phone,
          pickActualTime: item.pickActualTime,
          pickId: item.pickId,
          printNum: item.printNum,
          printTime: item.printTime,
          receivingName: item.receivingName,
          status: item.status
        })
      })
      const params = {
        correspondId: this.mainForm.warehouse,
        // correspondName,
        pickTime: this.mainForm.date + ' 00:00:00',
        pickStatus: Number(this.mainForm.timeSlot),
        pickType: Number(this.mainForm.pickupWay),
        takerId: this.mainForm.pickupMan,
        takerName: takerName || '',
        remark: this.mainForm.remark,
        invoiceOrderIds: orderList
      }
      if (this.mainForm.pickupWay == '1') {
        params.takerCarId = this.mainForm.pickupCar
      }
      if (this.mainForm.pickupWay == '2') {
        params.pickLogistics = this.mainForm.company
        params.logisticsId = this.mainForm.logisticsId
        params.isUp = this.mainForm.isUp
        params.isDischarge = this.mainForm.isDischarge
        // params.receivingName = this.mainForm.receivingName
        // params.phone = this.mainForm.phone
        // params.address = this.mainForm.address
      }
      if (this.listItem) {
        params.id = this.listItem.id
        editPickupBook(params)
          .then(res => {
            this.$successMsg('提交成功')
            this.goBack()
          })
          .finally(res => {
            this.formLoading = false
          })
      } else {
        addPickupBook(params)
          .then(res => {
            this.$successMsg('提交成功')
            this.goBack()
          })
          .finally(res => {
            this.formLoading = false
          })
      }
    },
    getListCostBillV2(row) {
      this.logisticsVisible = true
      getListCostBillV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_code',
            compare: '=',
            value: row.invoiceId
          }
        ]
      }).then(res => {
        res.data.records.forEach(item => {
          item.sums1 = ['orderHasSendQty', 'subsidyCoefficient', 'unloadUpstairsCoefficient', 'coefficient']
          item.sums2 = ['cost', 'unitPrice', 'totalCost', 'allowanceCost']
        })
        this.logisticsData = res.data.records
      })
    },
    getListCodeV2(row) {
      this.outboundVisible = true
      getListCodeV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_number',
            compare: '=',
            value: row.invoiceId
          }
        ]
      }).then(res => {
        this.outboundData = res.data.records
      })
    },
    resetForm() {
      this.$refs.mainForm.resetFields()
      // if (this.isFront === true) {
      //   this.mainForm.pickupWay = '2'
      // }
      // if (this.isFront === false) {
      //   this.mainForm.pickupWay = '1'
      // }
      this.deliverList = []
    },
    handLogistics(row) {
      getListOrderTrack({ orderId: row.invoiceId }).then(res => {
        this.logisticsDetail = res.data
      })
      this.orderId = row.id
      this.visible = true
    },
    onClose() {
      this.logisticsDetail = []
      this.outboundData = []
      this.logisticsData = []
      this.orderId = ''
      this.visible = false
      this.logisticsVisible = false
      this.outboundVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  div {
    flex: 1;
  }
}
::v-deep .el-timeline-item__tail {
  border-left: 2px solid #67c23a;
}
::v-deep .el-form-item__content {
  line-height: 33px;
}
.logistics-title {
  padding: 10px;
}
.tip {
  height: 200px;
  text-align: center;
  line-height: 200px;
}
.pd-lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>