logpm_page/src/views/warehouse/warehouseWaybill.vue

<template>
  <basic-container v-loading="loadingObj.pageLoading">
    <div class="avue-crud">
      <el-row v-if="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="fr-fo">
          <div>
            <el-form-item label="运单号:">
              <el-input v-model="query.waybillNo" placeholder="请输入运单号"></el-input>
            </el-form-item>
            <el-form-item label="客户车次号:">
              <el-input v-model="query.customerTrain" placeholder="请输入客户车次号"></el-input>
            </el-form-item>
          </div>
          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <!-- <div class="avue-crud__left">
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>
          </div> -->

          <el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain
            >导出
          </el-button>

          <div></div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="columnList"
          :tableData="data"
          :loading="loading"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <el-text type="primary" text icon="el-icon-view" @click="handleView(slotProps.scope)"
              >查看</el-text
            >
            <el-text type="primary" text icon="el-icon-edit" @click="handleEdit(slotProps.scope)"
              >编辑</el-text
            >
            <el-text
              type="primary"
              v-if="slotProps.scope.row.waybillType === 2"
              text
              icon="el-icon-edit"
              @click="showcd(slotProps.scope)"
              >拆单</el-text
            >
            <el-text type="primary" text icon="el-icon-delete" @click="rowDel(slotProps.scope)"
              >删除</el-text
            >
          </template>
        </tablecmt>
      </el-row>
      <el-row class="el-fy">
        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
          <!-- 分页模块 -->
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="[30, 50, 80, 120]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-row>
      <!-- 表单模块 -->
      <el-dialog
        :title="title"
        v-model="box"
        width="50%"
        :before-close="beforeClose"
        append-to-body
      >
        <el-form :disabled="view" ref="form" :model="form" label-width="80px">
          <!-- 表单字段 -->
          <el-form-item label="运单号" prop="waybillNo">
            <el-input v-model="form.waybillNo" placeholder="请输入运单号" />
          </el-form-item>
          <el-form-item label="目的仓" prop="destinationWarehouse">
            <el-input v-model="form.destinationWarehouse" placeholder="请输入目的仓" />
          </el-form-item>
          <el-form-item label="发站仓" prop="departureWarehouse">
            <el-input v-model="form.departureWarehouse" placeholder="请输入发站仓" />
          </el-form-item>
          <el-form-item label="客户车次" prop="customerTrain">
            <el-input v-model="form.customerTrain" placeholder="请输入客户车次" />
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="form.brand" placeholder="请输入品牌" />
          </el-form-item>
          <el-form-item label="发货单位" prop="shipper">
            <el-input v-model="form.shipper" placeholder="请输入发货单位" />
          </el-form-item>
          <el-form-item label="发货人" prop="shipperName">
            <el-input v-model="form.shipperName" placeholder="请输入发货人" />
          </el-form-item>
          <el-form-item label="发货方手机号" prop="shipperMobile">
            <el-input v-model="form.shipperMobile" placeholder="请输入发货方手机号" />
          </el-form-item>
          <el-form-item label="发货方地址" prop="shipperAddress">
            <el-input v-model="form.shipperAddress" placeholder="请输入发货方地址" />
          </el-form-item>
          <el-form-item label="收货单位" prop="consignee">
            <el-input v-model="form.consignee" placeholder="请输入收货单位" />
          </el-form-item>
          <el-form-item label="收货人" prop="consigneeName">
            <el-input v-model="form.consigneeName" placeholder="请输入收货人" />
          </el-form-item>
          <el-form-item label="收货方手机号" prop="consigneeMobile">
            <el-input v-model="form.consigneeMobile" placeholder="请输入收货方手机号" />
          </el-form-item>
          <el-form-item label="收货方地址" prop="consigneeAddress">
            <el-input v-model="form.consigneeAddress" placeholder="请输入收货方地址" />
          </el-form-item>
          <el-form-item label="到站" prop="destination">
            <el-input v-model="form.destination" placeholder="请输入到站" />
          </el-form-item>
          <el-form-item label="货物名称" prop="goodsName">
            <el-input v-model="form.goodsName" placeholder="请输入货物名称" />
          </el-form-item>
          <el-form-item label="总数" prop="totalCount">
            <el-input v-model="form.totalCount" placeholder="请输入总数" />
          </el-form-item>
          <el-form-item label="在库数" prop="stockCount">
            <el-input v-model="form.stockCount" placeholder="请输入在库数" />
          </el-form-item>
          <el-form-item label="总重量" prop="totalWeight">
            <el-input v-model="form.totalWeight" placeholder="请输入总重量" />
          </el-form-item>
          <el-form-item label="总体积" prop="totalVolume">
            <el-input v-model="form.totalVolume" placeholder="请输入总体积" />
          </el-form-item>
          <el-form-item label="送货方式" prop="deliveryMethod">
            <el-input v-model="form.deliveryMethod" placeholder="请输入送货方式" />
          </el-form-item>
          <el-form-item label="紧急度" prop="urgency">
            <el-input v-model="form.urgency" placeholder="请输入紧急度" />
          </el-form-item>
          <el-form-item label="回单数" prop="receiptCount">
            <el-input v-model="form.receiptCount" placeholder="请输入回单数" />
          </el-form-item>
          <el-form-item label="回单要求" prop="receiptRequirement">
            <el-input v-model="form.receiptRequirement" placeholder="请输入回单要求" />
          </el-form-item>
          <el-form-item label="经办人" prop="agent">
            <el-input v-model="form.agent" placeholder="请输入经办人" />
          </el-form-item>
          <el-form-item label="经办人id" prop="agentId">
            <el-input v-model="form.agentId" placeholder="请输入经办人id" />
          </el-form-item>
          <el-form-item label="收货单位id" prop="consigneeId">
            <el-input v-model="form.consigneeId" placeholder="请输入收货单位id" />
          </el-form-item>
          <el-form-item label="发货单位id" prop="shipperId">
            <el-input v-model="form.shipperId" placeholder="请输入发货单位id" />
          </el-form-item>
          <el-form-item label="制单时间" prop="documentMakingTime">
            <el-input v-model="form.documentMakingTime" placeholder="请输入制单时间" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
          <el-form-item label="批次号" prop="batchNo">
            <el-input v-model="form.batchNo" placeholder="请输入批次号" />
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceType">
            <el-input v-model="form.serviceType" placeholder="请输入服务类型" />
          </el-form-item>
          <el-form-item label="服务号" prop="serviceNo">
            <el-input v-model="form.serviceNo" placeholder="请输入服务号" />
          </el-form-item>
          <el-form-item label="冻结状态" prop="freezeStatus">
            <el-input v-model="form.freezeStatus" placeholder="请输入冻结状态" />
          </el-form-item>
          <!-- <el-form-item label="预留1" prop="reserve1">
            <el-input v-model="form.reserve1" placeholder="请输入预留1" />
          </el-form-item>
          <el-form-item label="预留2" prop="reserve2">
            <el-input v-model="form.reserve2" placeholder="请输入预留2" />
          </el-form-item>
          <el-form-item label="预留3" prop="reserve3">
            <el-input v-model="form.reserve3" placeholder="请输入预留3" />
          </el-form-item>
          <el-form-item label="预留4" prop="reserve4">
            <el-input v-model="form.reserve4" placeholder="请输入预留4" />
          </el-form-item>
          <el-form-item label="预留5" prop="reserve5">
            <el-input v-model="form.reserve5" placeholder="请输入预留5" /> -->
          <!-- </el-form-item> -->
        </el-form>
        <!-- 表单按钮 -->
        <template #footer>
          <span v-if="!view" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit"
              >提 交</el-button
            >
            <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </basic-container>
  <el-dialog
    v-model="dialogTableVisible"
    width="65%"
    title="运单信息"
    :show-close="false"
    :lock-scroll="false"
    :align-center="true"
  >
    <div class="topbox">
      <div class="titlxbx">
        <div>
          <div>运单号</div>
          <div>{{ rowobj.waybillNo }}</div>
        </div>
        <div>
          <div>品牌</div>
          <div>{{ rowobj.brand }}</div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="titlxbx">
        <div>
          <div>发货单位</div>
          <div>{{ rowobj.shipper }}</div>
        </div>
        <div>
          <div>发货人</div>
          <div>{{ rowobj.shipperName }}</div>
        </div>
        <div>
          <div>发货方电话</div>
          <div>{{ rowobj.shipperMobile }}</div>
        </div>
      </div>
      <div class="titlxbx">
        <div>
          <div>发货方地址</div>
          <div>{{ rowobj.shipperAddress }}</div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="titlxbx">
        <div>
          <div>收货单位</div>
          <div>{{ rowobj.consignee }}</div>
        </div>
        <div>
          <div>收货人</div>
          <div>{{ rowobj.consigneeName }}</div>
        </div>
        <div>
          <div>收货电话</div>
          <div>{{ rowobj.consigneeMobile }}</div>
        </div>
      </div>
      <div class="titlxbx">
        <div>
          <div>收货地址</div>
          <div>{{ rowobj.consigneeAddress }}</div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div>在库件数</div>
          <div>{{ rowobj.handleNum }}</div>
        </div>
      </div>
      <div class="titlxbx">
        <div>
          <div>货物类型</div>
          <div>{{ rowobj.goodsName }}</div>
        </div>
        <div>
          <div>件数</div>
          <div>{{ rowobj.totalCount }}</div>
        </div>
        <div>
          <div>剩余件数</div>
          <div>{{ rowobj.stockCount }}</div>
        </div>
      </div>
    </div>
    <div class="maxitembxlist">
      <div class="items" v-for="(item, index) in orderlist" :key="item">
        <div class="titltophead">
          <div>订单{{ index + 1 }}</div>
          <div>
            <el-icon class="icons" @click="addorder"><CirclePlusFilled /></el-icon>
            <el-icon v-if="orderlist.length > 1" class="icons" @click="rmvorder(index)"
              ><RemoveFilled
            /></el-icon>
          </div>
        </div>
        <div class="contbx">
          <div class="tabitem">
            <div>货物名称</div>
            <div>分配数量</div>
          </div>
          <div class="contentitem" v-for="itemlimit in item.goods" :key="itemlimit">
            <div>
              {{ itemlimit.productName }}
            </div>
            <div class="numbinput">
              <el-input-number
                class="w100"
                :min="0"
                :max="itemlimit.splitNum + rowobj.handleNum - totalNum"
                :value-on-clear="0"
                v-model="itemlimit.splitNum"
                :controls="false"
                :precision="0"
                placeholder="请输入数量"
              />
            </div>
          </div>
        </div>
        <div class="editinput">
          <div class="inputitem">
            <div class="inpts">
              <span>收货人：</span>
              <div>
                <el-input v-model="item.name" placeholder="请输入收货人" />
              </div>
            </div>
            <div class="inpts">
              <span>收货人电话：</span>
              <div>
                <el-input v-model="item.phone" placeholder="请输入收货人电话" />
              </div>
            </div>
          </div>
          <div class="inputitem">
            <div class="inpts">
              <span>收货人地址：</span>
              <div>
                <el-input v-model="item.addres" placeholder="请输入收货人地址" />
              </div>
            </div>
            <div class="inpts">
              <span>备注：</span>
              <div>
                <el-input v-model="item.rak" type="textarea" placeholder="请输入备注" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btsbx">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="hidedial">确认</el-button>
    </div>
  </el-dialog>
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
  ></edittablehead>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  splitOrder,
  getWarehouseWaybillExport,
} from '@/api/warehouse/warehouseWaybill';
import option from '@/option/warehouse/warehouseWaybill';
import { mapGetters } from 'vuex';
import { downloadXls, isNumber } from '@/utils/util';

export default {
  data() {
    return {
      columnList: [
        {
          prop: '',
          label: '序号',
          type: 0,
          values: '',
          width: 55,
          checkarr: [],
          fixed: true,
        },
        {
          prop: 'waybillNo',
          label: '运单号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'orderNo',
          label: '订单号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'destinationWarehouseName',
          label: '目的仓',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'departureWarehouseName',
          label: '发站仓',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'customerTrain',
          label: '客户车次',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'brand',
          label: '品牌',
          type: 3,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'shipper',
          label: '发货单位',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'shipperName',
          label: '发货人',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'shipperMobile',
          label: '发货方手机号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'shipperAddress',
          label: '发货方地址',
          type: 1,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consignee',
          label: '收货单位',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consigneeName',
          label: '收货人',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consigneeMobile',
          label: '收货方手机号',
          type: 1,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consigneeAddress',
          label: '收货方地址',
          type: 1,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'destination',
          label: '到站',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'goodsName',
          label: '货物名称',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'totalCount',
          label: '总数',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          isshowSummary: true,
          sortable: true,
        },
        {
          prop: 'stockCount',
          label: '在库数',
          type: 4,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          isshowSummary: true,
          sortable: true,
        },
        {
          prop: 'handleNum',
          label: '可用数量',
          type: 4,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          isshowSummary: true,
          sortable: true,
        },
        {
          prop: 'totalWeight',
          label: '总重量',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          isshowSummary: true,
          head: false,
        },
        {
          prop: 'totalVolume',
          label: '总体积',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          isshowSummary: true,
          head: false,
        },
        {
          prop: 'deliveryMethodStr',
          label: '送货方式',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'urgencyStr',
          label: '紧急度',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'receiptCount',
          label: '回单数',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          isshowSummary: true,
          head: false,
        },
        {
          prop: 'receiptRequirement',
          label: '回单要求',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'agent',
          label: '经办人',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'documentMakingTime',
          label: '制单时间',
          type: 5,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'remark',
          label: '备注',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'batchNo',
          label: '批次号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'serviceTypeStr',
          label: '服务类型',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'serviceNo',
          label: '服务号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: 'freezeStatusStr',
          label: '冻结状态',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: false,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '200',
          checkarr: [],
          fixed: 'right',
          hide: true,
        },
        // 更多列的配置...
      ],
      columnListedit: [],
      drawerShow: false,
      height: 0,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      // 是否显示查询
      search: true,
      // 加载中
      loading: true,
      // 是否为查看模式
      view: false,
      // 查询信息
      query: {},
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单数据
      form: {},
      // 选择行
      selectionList: [],
      // 表单配置
      option: option,
      // 表单列表
      data: [],
      dialogTableVisible: false,
      orderlist: [
        {
          name: '',
          phone: '',
          addres: '',
          rak: '',
          goods: [
            {
              productName: '',
              splitNum: 0,
            },
          ],
        },
      ],
      orderobj: {
        name: '',
        phone: '',
        addres: '',
        rak: '',
        goods: [
          {
            productName: '',
            splitNum: '',
          },
        ],
      },
      rowobj: {},
      goodsAll: [],
      loadingObj: {
        pageLoading: false,
      },
    };
  },
  mounted() {
    this.init();
    this.onLoad(this.page);
    /**
     * 初始化获取本地缓存的编辑隐藏的列表
     *  固定搭配，不能更改
     */
    let checkListnewarr = this.$functions.getStorage(window.location.pathname + 'checkList');
    let flexListnewarr = this.$functions.getStorage(window.location.pathname + 'flexList');
    let sortlistnewarr = this.$functions.getStorage(window.location.pathname + 'sortlist');
    if (checkListnewarr) {
      this.columnList.map(item => {
        item.head = false;
      });
      checkListnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            item.head = true;
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.head) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'checkList', arr);
    }
    if (flexListnewarr) {
      this.columnList.map(item => {
        item.fixed = false;
      });
      flexListnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            if (item.type == 6) {
              item.fixed = 'right';
            } else {
              item.fixed = true;
            }
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.fixed) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'flexList', arr);
    }
    if (sortlistnewarr) {
      this.columnList.map(item => {
        item.sortable = false;
      });
      sortlistnewarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            item.sortable = true;
          }
        });
      });
    } else {
      let arr = [];
      this.columnList.map(item => {
        if (item.sortable) {
          arr.push(item.label);
        }
      });
      this.$functions.setStorage(window.location.pathname + 'sortlist', arr);
    }
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
    totalNum() {
      let number = 0;

      for (let index = 0; index < this.orderlist.length; index++) {
        const element = this.orderlist[index];

        for (let i = 0; i < element.goods.length; i++) {
          const item = element.goods[i];
          number += item.splitNum || 0;
        }
      }

      return number;
    },
  },
  methods: {
    /**
     * 导出
     * */
    handleExportInfo() {
      let row = {};
      if (!!this.ids) {
        row.ids = this.ids;
      }
      // const ids = this.selectionList.join(',');
      // row.ids = ids;
      row = { ...row, ...this.query };
      console.log('<><><>>', row.ids);
      getWarehouseWaybillExport(row).then(res => {
        // console.log(res.data);
        downloadXls(res.data, '在库运单数据.xlsx');
      });
    },
    showdrawer(value) {
      this.drawerShow = value;
    },
    /**
     * 弹窗的勾选回调，用于更改头部数组
     * 固定搭配，只需要更换   columnList
     */
    setnewcolum(newarr, headarr, type) {
      // console.log(newarr,'+++++++++++')
      if (type == 1) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'checkList', headarr);
      } else if (type == 2) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'flexList', headarr);
      } else if (type == 3) {
        this.columnList = newarr;
        this.$functions.setStorage(window.location.pathname + 'sortlist', headarr);
      }
    },
    selectionsc(value) {
      console.log(value);
      this.selectionList = value.map(item => item.id);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    editsolt(scope) {
      const { row } = scope;
      console.log('row>>>>>>>>>>>>>>>>>>>', row);
      this.$router.push({
        path: '/distribution/signfor/distributionSignforedt',
        query: {
          id: row.id,
          name: '签收查看',
        },
      });
    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectsc(index, row) {
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    timesc(index, row) {
      if (!!index) {
        index = dayjs(index).format('YYYY-MM-DD');
      }
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    inputsc(index, row) {
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleSubmit() {
      if (!this.form.id) {
        add(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      } else {
        update(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
      }
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      this.title = '查看';
      this.view = true;
      this.box = true;
      getDetail(row.row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      // this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    showcd({ row }) {
      if (row.handleNum === 0) return this.$message.warning('可用数量为0，暂无法拆单');

      this.dialogTableVisible = true;
      this.rowobj = row;
      this.orderlist.splice(1);
      this.orderlist[0].goods = this.splitName(this.rowobj.goodsName);
    },

    /**
     *
     * @param {拆分名称} goodName
     */
    splitName(goodName) {
      var t = goodName.split(',');
      var arr = [];
      for (let i = 0; i < t.length; i++) {
        var proN = t[i];
        var o = {};
        o.productName = proN;
        o.splitNum = 0;
        arr[i] = o;
      }
      return arr;
    },
    // inputChange(e){//验证输入饰品件数
    //     var self = this
    //     var o = e.target
    //     o.value=o.value.replace(/[^\d.]/g,'')
    //     o.value = o.value.replace(/[^\d.]/g,"");  // 清除“数字”和“.”以外的字符
    //       o.value = o.value.replace(/\./g,""); // 只保留第一个. 清除多余的
    //       if(o.value.indexOf(".")< 0 && o.value !=""){// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    //         o.value= parseFloat(o.value);
    //       }
    //       if(o.value.toString().split(".")[0].length>8){  // 整数部分大于8的时候，限制只能输入8位
    //           if(o.value.toString().indexOf(".")>-1){
    //                 o.value = o.value.toString().split(".")[0].substr(0,8)+"."+o.value.toString().split(".")[1]
    //           }
    //           else{
    //                 o.value = o.value.toString().split(".")[0].substr(0,8)
    //           }
    //     }
    //     //o.value  //这个就是最后过来之后的值
    //     this.value = o.value
    // },
    async hidedial() {
      try {
        this.loadingObj.pageLoading = true;

        let _arr = [];

        for (let index = 0; index < this.orderlist.length; index++) {
          const value = this.orderlist[index];

          let _flag = false;
          for (let i = 0; i < value.goods.length; i++) {
            const item = value.goods[i];

            console.log('item :>> ', item);
            if (isNumber(item.splitNum) && item.splitNum > 0) _flag = true;
          }

          if (!_flag) continue;
          let obj = {
            waybillNo: this.rowobj.waybillNo,
            customerPerson: value.name,
            customerMobile: value.phone,
            customerAddress: value.addres,
            products: value.goods,
          };
          _arr.push(obj);
        }

        console.log('_arr :>> ', _arr);

        if (_arr.length === 0) return this.$message.error('请选择需要拆单的数据');

        this.dialogTableVisible = false;

        const res = await splitOrder(_arr);

        const { code, data } = res.data;

        if (code !== 200) return this.$message.error('拆单失败');
        this.$message.success('拆单成功');

        this.page.currentPage = 1;
        this.onLoad(this.page);

        // splitOrder(row).then(res => {
        //   const data = res.data.data;
        //   this.page.total = data.total;
        //   this.data = data.records;
        //   this.loading = false;
        //   this.orderlist = [];
        //   this.selectionClear();
        // });
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        console.log('111 :>> ', 111);
        this.loadingObj.pageLoading = false;
      }
    },
    close() {
      this.dialogTableVisible = false;
    },

    addorder() {
      // 实现对对象内包含的元素进行copy

      let obsj = JSON.parse(JSON.stringify(this.orderobj));
      obsj.goods = this.splitName(this.rowobj.goodsName);

      this.orderlist.push(obsj);
    },
    rmvorder(index) {
      if (this.orderlist.length <= 1) {
        this.$message.error('最少一条数据');
        return;
      }
      this.orderlist.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.numbinput {
  margin: auto;
  width: 80% !important;
  .el-input {
    width: 80% !important;
    input {
      height: 28px !important;
    }
  }
}
.btsbx {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  > button {
    width: 120px;
    height: 40px;
  }
}
.maxitembxlist {
  display: flex;
  flex-direction: column;
  // padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
  font-size: 12px;
  > .items {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fcfcfc;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e2e0e0;
    border-radius: 2px;
    font-size: 12px;
    margin-bottom: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
    > .contbx {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 10px;
      > .tabitem {
        display: flex;
        align-items: center;
        > div {
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f3f3f3;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
        }
      }
      > .contentitem {
        display: flex;
        align-items: center;
        > div {
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #ffffff;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
          input {
            font-size: 12px !important;
          }
          textarea {
            font-size: 12px !important;
          }
        }
      }
    }
    > .titltophead {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icons {
        font-size: 27px;
        &:nth-of-type(1) {
          margin-right: 8px;
        }
      }
    }
    > .editinput {
      display: flex;
      flex-direction: column;
      padding: 20px 0;
      > .inputitem {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 10px;
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .inpts {
          display: flex;
          align-items: flex-start;

          flex: 1;
          padding-right: 10px;
          input {
            font-size: 12px !important;
          }
          textarea {
            font-size: 12px !important;
          }
          > span {
            width: 90px;
          }
          > div:nth-of-type(1) {
            flex: 1;
          }
        }
      }
    }
  }
}
.topbox {
  display: flex;
  flex-direction: column;
  > .titlxbx {
    font-size: 12px;
    display: flex;
    align-items: center;
    > div {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12px;
      > div {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e0e0;
        margin-bottom: -1px;
        margin-right: -1px;
        word-break: break-all;
        font-size: 12px;
        &:nth-of-type(1) {
          background-color: #f3f3f3;
        }
      }
    }
  }
}
</style>

<style scoped lang="scss">
.el-form-item__label {
  justify-content: flex-start;
}
.fr-fo {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.el-btn {
  margin-right: 0;
}
:deep(.avue-crud) {
  display: flex;
  height: 100%;
  flex-direction: column;
}
:deep(.el-card__body) {
  height: 100%;
}
:deep(.el-card) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-fy {
  display: flex;
  align-items: flex-end;
}

.w100 {
  width: 100%;
}
</style>