logpm_page/src/views/distribution/reservation/reservation.vue

<template>
  <basic-container>
    <div class="avue-crud">
      <el-row v-if="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="queryA">
          <div class="fo-rl">
            <el-form-item label="预约单编号:">
              <el-input v-model="queryA.reservationCode" placeholder="请输入预约单编号"></el-input>
            </el-form-item>
            <el-form-item label="订单自编号:">
              <el-input v-model="queryA.stockArticleId" placeholder="请输入订单自编号"></el-input>
            </el-form-item>
            <el-form-item label="收货人:">
              <el-input v-model="queryA.consignee" placeholder="请输入收货人"></el-input>
            </el-form-item>
            <el-form-item label="收货地址:">
              <el-input v-model="queryA.deliveryAddress" placeholder="请输入收货地址"></el-input>
            </el-form-item>
            <el-form-item label="收件人电话:">
              <el-input v-model="queryA.deliveryPhone" placeholder="请输入收件人电话"></el-input>
            </el-form-item>

            <!--                        <el-form-item label="顾客姓名:">-->
            <!--                            <el-input v-model="query.customerName" placeholder="请输入服务类型"></el-input>-->
            <!--                        </el-form-item>-->
            <!-- 查询按钮 -->
          </div>
          <el-form-item class="fo-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-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="待确认" name="nocheck">
          <el-row>
            <el-button-group>
              <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
            </el-button-group>
            <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="handleConfirmReservations"
                  plain
                  >批量确认
                </el-button>
                <el-button type="danger" icon="el-icon-download" @click="handleExportInfo(1)" plain
                  >导出
                </el-button>
              </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>
          <!-- <template v-if="this.activename === 'nocheck'"> -->
          <!-- 列表模块 -->
          <tablecmt
            ref="unconfirmedList"
            :columnList="columnList"
            :tableData="data"
            :loading="loading"
            @inputTxt="inputscA"
            @timeCheck="timescA"
            @btnCheck="btnsc"
            @selectCheck="selectscA"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <el-text
                size="small"
                type="primary"
                link
                icon="el-icon-view"
                @click="viewReservation(slotProps.scope)"
                >查看
              </el-text>
              <el-text
                size="small"
                type="primary"
                link
                icon="el-icon-view"
                @click="editsolt(slotProps.scope)"
                >编辑
              </el-text>
              <el-text
                size="small"
                type="primary"
                link
                icon="el-icon-view"
                @click="cancelReservation(slotProps.scope)"
                >取消预约
              </el-text>
              <el-text
                v-if="this.queryA.reservationStatus === '1' ? true : false"
                size="small"
                @click="confirmReservation(slotProps.scope)"
                >确认预约
              </el-text>
            </template>
          </tablecmt>
          <!-- </template> -->
        </el-tab-pane>

        <el-tab-pane label="已确认" name="yescheck">
          <div style="display: flex">
            <el-tabs
              v-model="orderStatus"
              tab-position="left"
              style="height: 100%; width: fit-content; flex: none"
              class="demo-tabs"
              @tab-click="handleClickAll"
            >
              <el-tab-pane name="all" label="全部"></el-tab-pane>
              <el-tab-pane name="PickerClip" label="挑单夹"></el-tab-pane>
            </el-tabs>

            <div class="overflow">
              <el-row>
                <el-button-group>
                  <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
                </el-button-group>
                <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="handleStockUp()" plain
                      >批量转备货
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDeliverys" plain
                      >批量转配送
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="batchPrintData" plain
                      >批量打印
                    </el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-download"
                      @click="handleExportInfo(2)"
                      plain
                      >导出
                    </el-button>
                    <el-button
                      type="primary"
                      icon="Plus"
                      @click="handleAddPickerClipData"
                      v-if="orderStatus === 'all'"
                      >加入调单夹
                    </el-button>
                    <el-button
                      v-else
                      type="primary"
                      icon="Delete"
                      @click="handleRemovePickerClipData"
                      >移除调单夹
                    </el-button>
                  </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>
              <!-- 列表模块 -->
              <tablecmt
                ref="confirmList"
                :columnList="columnList"
                :tableData="data"
                :loading="loading"
                @inputTxt="inputscB"
                @timeCheck="timescB"
                @btnCheck="btnsc"
                @selectCheck="selectscB"
                @selection="selectionChange"
              >
                <template #default="slotProps">
                  <el-text
                    size="small"
                    type="primary"
                    link
                    icon="el-icon-view"
                    @click="viewReservation(slotProps.scope)"
                    >查看
                  </el-text>
                  <el-text
                    size="small"
                    type="primary"
                    link
                    icon="el-icon-view"
                    @click="editsolt(slotProps.scope)"
                    >编辑
                  </el-text>
                  <el-text
                    size="small"
                    type="primary"
                    link
                    icon="el-icon-view"
                    @click="cancelReservation(slotProps.scope)"
                    >取消预约
                  </el-text>
                  <el-text
                    v-if="this.queryB.reservationStatus === '1' ? true : false"
                    size="small"
                    @click="confirmReservation(slotProps.scope)"
                    >确认预约
                  </el-text>
                  <el-text
                    size="small"
                    type="primary"
                    link
                    icon="el-icon-view"
                    @click="printData(slotProps.scope)"
                    >打印
                  </el-text>
                </template>
              </tablecmt>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-row>
        <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="二维码" :visible.sync="dialogVisible" width="780px" v-model="dialogVisible">
        <div>
          <div v-html="html"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
          <el-button type="primary" @click="printTemplate">打 印</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </basic-container>
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
  ></edittablehead>
  <el-dialog v-model="dialogFormCustomer" title="指派叉车">
    <el-form :model="info">
      <el-form-item label="备货时间:">
        <el-date-picker v-model="info.stockupDate" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="装卸班组" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="form.loader" clearable placeholder="请选择装卸班组">-->
      <!--          <el-option-->
      <!--                  v-for="item in loaderData"-->
      <!--                  :key="item.dictKey"-->
      <!--                  :label="item.dictValue"-->
      <!--                  :value="item.dictKey">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="备货区域:">
        <el-select v-model="info.stockupArea" clearable placeholder="请选择备货区编号">
          <el-option
            v-for="item in goodsAreaIdData"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormCustomer = false">取消</el-button>
        <!--        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>-->
        <el-button type="primary" @click="callFordelivery('3')"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog title="预约取消" v-model="dialogCancelReservation" style="width: 30%; height: 40%">
    <el-form :model="cancel">
      <el-form-item label="原因:">
        <el-input v-model="cancel.message" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancelReservation = false">取 消</el-button>
      <el-button type="primary" @click="cancelReservationConfirm(row)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  confirms,
  addReservations,
  cancelReservation,
  patchPrintList,
  reservationExport,
} from '@/api/distribution/distributionReservation';
import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';
import { addAssign, getListUser } from '@/api/distribution/distributionStockup';
import { getPostList } from '@/api/system/post';
import { getListOwn } from '@/api/system/user';
import { getListTeam } from '@/api/basicdata/basicdataTeamGroup';
import { getStockUpArea, stockUp } from '@/api/basicdata/basicdataGoodsArea';
import dayjs from 'dayjs';
import print from '@/utils/print';
import { downloadXls, setNodeHeight, getWinHeight } from '@/utils/util';

export default {
  data() {
    return {
      // 弹出框是否显示
      dialogVisible: false,
      // 打印模版的html
      html: '',
      columnList: [
        {
          prop: '',
          label: '序号',
          type: 0,
          values: '',
          width: 55,
          checkarr: [],
          fixed: true,
        },
        {
          prop: 'reservationCode',
          label: '预约单编号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'stockArticleId',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '260',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'serviceNumber',
          label: '服务号',
          type: 2,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'warehouseName',
          label: '仓库',
          type: 2,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'mallName',
          label: '收货单位',
          type: 2,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'storeName',
          label: '门店',
          type: 2,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consignee',
          label: '收货人',
          type: 2,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryAddress',
          label: '收货地址',
          type: 2,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryPhone',
          label: '收件人电话',
          type: 2,
          values: '',
          width: '160',
          fixed: false,
          sortable: true,
        },
        {
          prop: 'reservationDate',
          label: '预约时间',
          type: 4,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   prop: 'periodOfTime',
        //   label: '时段1',
        //   type: 3,
        //   values: '',
        //   width: '180',
        //   checkarr: [
        //     {
        //       label: '上午',
        //       value: '1'
        //     },
        //     {
        //       label: '下午',
        //       value: '2'
        //     },
        //     {
        //       label: '全天',
        //       value: '3'
        //     },
        //   ],
        //   fixed: false,
        //   sortable: true,
        //   head:true,
        // },
        {
          prop: 'periodOfTimeName',
          label: '时段',
          type: 3,
          values: '',
          width: '140',
          checkarr: [
            {
              label: '上午',
              value: '1',
            },
            {
              label: '下午',
              value: '2',
            },
            {
              label: '全天',
              value: '3',
            },
          ],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryWay',
          label: '配送方式',
          type: 3,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: true,
        },
        // {
        //   prop: 'deliveryType',
        //   label: '配送类型',
        //   type: 3,
        //   values: '',
        //   width: '150',
        //   checkarr: [
        //     {
        //       label: '商配',
        //       value: '1',
        //     },
        //     {
        //       label: '市配',
        //       value: '2'
        //     },
        //   ],
        //   fixed: false,
        //   sortable: true
        // },
        // {
        //   prop: 'serveType',
        //   label: '服务类型1',
        //   type: 2,
        //   values: '',
        //   width: '150',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        //   hide:true,
        // },
        {
          prop: 'serveTypeName',
          label: '服务类型',
          type: 3,
          values: '',
          width: '140',
          checkarr: [
            {
              label: '上楼',
              value: '1',
            },
            {
              label: '超区',
              value: '2',
            },
            {
              label: '拆样',
              value: '3',
            },
            {
              label: '返货',
              value: '4',
            },
            {
              label: '平移',
              value: '5',
            },
            {
              label: '分拣',
              value: '6',
            },
            {
              label: '专车',
              value: '7',
            },
          ],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'reservationNum',
          label: '预约包件数',
          type: 1,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
          isshowSummary: true,
        },
        {
          prop: 'reservationStockListNum',
          label: '预约库存品数',
          type: 1,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'collectionFee',
          label: '待收货款',
          type: 1,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'otherFee',
          label: '其他费用',
          type: 1,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'replaceFee',
          label: '代收运费',
          type: 1,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   prop: 'fee',
        //   label: '总费用',
        //   type: 2,
        //   values: '',
        //   width: '150',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        // {
        //   prop: 'reservationStatus',
        //   label: '预约信息状态1',
        //   type: 4,
        //   values: '',
        //   width: '180',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        //   hide: true,
        //
        // },
        {
          prop: 'reservationStatusName',
          label: '预约信息状态',
          type: 1,
          values: '',
          width: '150',
          checkarr: [
            //   {
            //   label: '待确认',
            //   value: '1'
            // },
            //   {
            //     label: '已确认',
            //     value: '2'
            //   },
          ],
          fixed: false,
          sortable: true,
        },
        // {
        //   prop: 'orderSource',
        //   label: '订单来源',
        //   type: 4,
        //   values: '',
        //   width: '180',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        // {
        //   prop: 'stockupStatus',
        //   label: '备货状态',
        //   type: 3,
        //   values: '',
        //   width: '150',
        //   checkarr: [
        //         {
        //           label: '待备货',
        //           value: '1',
        //         },{
        //           label: '已备货',
        //           value: '2',
        //         },
        //         {
        //           label: '部分备货',
        //           value: '3'
        //         },
        //   ],
        //   fixed: false,
        //   sortable: true
        // },
        {
          prop: 'stockupStatusName',
          label: '备货状态',
          type: 3,
          values: '',
          width: '140',
          checkarr: [
            {
              label: '待备货',
              value: '10',
            },
            {
              label: '部分备货',
              value: '20',
            },
            {
              label: '已备货',
              value: '30',
            },
          ],
          fixed: false,
          sortable: true,
        },

        // {
        //   prop: 'goodsAreaName',
        //   label: '备货区',
        //   type: 2,
        //   values: '',
        //   width: '140',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        // {
        //   prop: 'goodsAreaId',
        //   label: '备货区编号',
        //   type: 2,
        //   values: '',
        //   width: '140',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        //   hide:true,
        // },
        // {
        //   prop: 'signingType',
        //   label: '签收类型',
        //   type: 2,
        //   values: '',
        //   width: '140',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        // },

        {
          prop: 'operator',
          label: '操作人',
          type: 1,
          values: '',
          width: '140',
          checkarr: [],
          fixed: false,
          sortable: false,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '200',
          checkarr: [],
          fixed: 'right',
          hide: true,
        },
        // 更多列的配置...
      ],
      drawerShow: false,
      dialogFormCustomer: false,
      height: 0,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      // 是否显示查询
      search: true,
      // 加载中
      loading: true,
      // 是否为查看模式
      view: false,
      // 查询信息
      queryA: {},
      queryB: {},
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单数据
      form: {},
      info: {},
      cancel: {},
      // 选择行
      selectionList: [],
      // 表单列表
      data: [],
      /** 全部数据 */
      allListData: [],
      /** 挑单夹内数据 */
      pickerClipData: [],
      dialogCancelReservation: false,
      //配送方式字典列表
      deliveryTypeData: [],
      //配送类型字典列表
      resvervationStatusData: [],
      stockupStatusData: [],
      orderSourceData: [],
      periodOfTimeData: [],
      deliveryWayData: [],
      //控制编辑弹窗是否可编辑
      isUpdate: false,
      addvalueServeTypeData: [],
      forkliftData: [],
      loaderData: [],
      goodsAreaIdData: [],
      deptId: '',
      cancelReservationRow: {},
      activeName: 'nocheck',
      activename: 'nocheck',
      orderStatus: 'all',
      unconfirmedList: null,
      confirmedList: null,
    };
  },
  watch: {
    // '$route.query.reservationId': {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
      // this.fetchData();
      this.onLoad(this.page);
    },
    deep: false,
    immediate: true,
    // }
  },
  mounted() {
    this.init();
    this.onLoad(this.page);
    this.getDictionary();

    /**
     * 初始化获取本地缓存的编辑隐藏的列表
     *  固定搭配，不能更改
     */
    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);
    }

    this.setListHeight();

    // console.log('bbbb', this.confirmedList);
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    /**
     * 导出
     * */
    handleExportInfo(type) {
      let row = {};
      if (!!this.ids) {
        row.ids = this.ids;
      }
      let nulName;
      if (type === 1) {
        // 未
        nulName = '待确定预约单数据.xlsx';
        row = { ...row, ...this.queryA };
        row.reservationStatus = '1';
      } else {
        // 已
        nulName = '已确定预约单数据.xlsx';
        row = { ...row, ...this.queryB };
        row.reservationStatus = '2';
      }
      reservationExport(row).then(res => {
        console.log(res.data);
        downloadXls(res.data, nulName);
      });
    },
    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);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    cancelReservation(scope) {
      const { row } = scope;
      this.dialogCancelReservation = true;
      this.cancelReservationRow = row;
      console.log(row);
    },
    editsolt(scope) {
      const { row } = scope;
      this.$router.push({
        path: '/distribution/reservation/reservationAddFrom',
        query: {
          reservationId: row.id,
          name: '编辑预约单',
        },
      });
      console.log(row);
    },
    viewReservation(scope) {
      const { row } = scope;
      this.$router.push({
        path: '/distribution/reservation/reservationDetails',
        query: {
          id: row.id,
        },
      });
      console.log(row);
    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectscA(index, row) {
      console.log(index, row);
      if (row.prop === 'periodOfTimeName') {
        this.queryA['periodOfTime'] = index;
      } else if (row.prop === 'stockupStatusName') {
        this.queryA['stockupStatus'] = index;
      } else if (row.prop === 'serveTypeName') {
        this.queryA['serveType'] = index;
        console.log(this.queryA, '----------->');
      } else {
        this.queryA[row.prop] = index;
      }
      this.onLoad(this.page);
    },
    selectscB(index, row) {
      console.log(index, row);
      if (row.prop === 'periodOfTimeName') {
        this.queryB['periodOfTime'] = index;
      } else if (row.prop === 'stockupStatusName') {
        this.queryB['stockupStatus'] = index;
      } else if (row.prop === 'serveTypeName') {
        this.queryB['serveType'] = index;
        console.log(this.queryB, '----------->');
      } else {
        this.queryB[row.prop] = index;
      }
      this.onLoad(this.page);
    },
    timescA(index, row) {
      console.log(index, row);
      console.log(index, row);
      if (!!index) {
        index = dayjs(index).format('YYYY-MM-DD');
      }
      this.queryA[row.prop] = index;
      if (!index) {
        delete this.queryA[row.prop];
      }
      this.onLoad(this.page);
    },
    timescB(index, row) {
      console.log(index, row);
      console.log(index, row);
      if (!!index) {
        index = dayjs(index).format('YYYY-MM-DD');
      }
      this.queryB[row.prop] = index;
      if (!index) {
        delete this.queryB[row.prop];
      }
      this.onLoad(this.page);
    },
    inputscA(index, row) {
      console.log(index, row);
      this.queryA[row.prop] = index;
      if (!index) delete this.queryA[row.prop];
      this.onLoad(this.page);
    },
    inputscB(index, row) {
      console.log(index, row);
      this.queryB[row.prop] = index;
      if (!index) delete this.queryB[row.prop];
      this.onLoad(this.page);
    },
    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    async handleClick(e) {
      // 切换选项卡时, 清空备选中的数组
      this.selectionList = [];
      this.activename = e.props.name;
      await this.onLoad(this.page);
      this.setListHeight();
    },
    handleClickAll(e) {
      const _name = e.props.name;
      if (_name === 'all') this.data = this.allListData;
      else this.data = this.pickerClipData;
    },
    cancelReservationConfirm() {
      if (!this.cancel.message) {
        this.$message.warning('请输入取消原因!!');
        return;
      }
      let data = {};
      if (this.cancelReservationRow) {
        data = this.cancelReservationRow;
        data.cancelReason = this.cancel.message;
      } else {
        this.$message.error('请稍后再试!!');
        return;
      }
      cancelReservation(data).then(res => {
        this.onLoad(this.page);
        this.cancelReservationRow = {};
        this.dialogCancelReservation = false;
      });
    },
    ddd() {
      this.form.deliveryType === '';
      console.log(' this.form.deliveryType===', this.form.deliveryType);
    },
    //数据字典数据获取
    getDictionary() {
      //服务内容
      getDictionaryBiz('addvalue_serve_type').then(res => {
        this.addvalueServeTypeData = res.data.data;
      });
      getDictionaryBiz('distribution_type').then(res => {
        this.deliveryTypeData = res.data.data;
      });
      //订单来源
      getDictionaryBiz('order_source').then(res => {
        this.orderSourceData = res.data.data;
      });
      //预约状态
      getDictionaryBiz('resvervation_status').then(res => {
        this.resvervationStatusData = res.data.data;
      });
      //备货状态
      getDictionaryBiz('stockup_status').then(res => {
        this.stockupStatusData = res.data.data;
      });
      //时段
      getDictionaryBiz('period_of_time').then(res => {
        this.periodOfTimeData = res.data.data;
      });
      getDictionaryBiz('delivery_way').then(res => {
        this.deliveryWayData = res.data.data;
      });
    },
    //查询叉车人员
    async getFork() {
      let ides = '';
      let ide = {};
      await getListUser().then(res => {
        // console.log("res>>>",res.data.data);
        ides = res.data.data.tenantId;
        this.deptId = res.data.data.deptId;
      });
      await getPostList(ides).then(res => {
        // console.log(">>>>",res.data.data);
        res.data.data.forEach(i => {
          if (i.postName == '叉车') {
            ide = i;
          }
        });
      });
      // console.log("ied>>>>>",ide);
      let params = {
        postId: ide.id, //岗位
        deptId: this.deptId, //部门
        // roleId: '', //角色
      };
      getListOwn(Object.assign(params, this.query)).then(res => {
        // console.log(".............",res.data.data);
        let fo = [];
        res.data.data.forEach(i => {
          let a = {
            dictKey: i.id,
            dictValue: i.name,
          };
          fo.push(a);
        });
        this.forkliftData = fo;
      });
      await this.getStorageArea();
      await this.getTeam();
    },
    //查询班组
    async getTeam() {
      let params = {
        department: this.deptId,
      };
      getListTeam(
        this.page.currentPage,
        this.page.pageSize,
        Object.assign(params, this.queryB)
      ).then(res => {
        // console.log(">><><",res.data.data.records);
        let fo = [];
        res.data.data.records.forEach(i => {
          let a = {
            dictKey: i.id,
            dictValue: i.name + '-' + i.groupName,
          };
          fo.push(a);
        });
        this.loaderData = fo;
      });
    },
    //备货区
    async getStorageArea() {
      let params = {
        department: this.deptId,
      };
      getStockUpArea().then(res => {
        // console.log("res>>>",res.data.data);
        let fo = [];
        res.data.data.forEach(i => {
          let v = {
            dictKey: i.id,
            dictValue: i.name + '-' + i.headline,
          };
          fo.push(v);
        });
        this.goodsAreaIdData = fo;
      });
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.queryA = {};
      this.queryB = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleConfirmReservations() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      let param = {};
      param.ids = this.ids.toString();
      addReservations(param).then(res => {
        this.selectionClear();
        this.onLoad(this.page);
        this.$message({
          type: 'success',
          message: '操作成功!',
        });
      });
    },
    confirmReservation(scope) {
      const { row } = scope;
      let param = {};
      param.ids = row.id;
      addReservations(param).then(res => {
        this.selectionClear();
        this.onLoad(this.page);
        this.$message({
          type: 'success',
          message: '操作成功!',
        });
      });
    },
    handleSubmit() {
      this.form.serveType = this.form.serveType.join(',');
      update(this.form).then(() => {
        this.box = false;
        this.onLoad(this.page);
        this.$message({
          type: 'success',
          message: '操作成功!',
        });
      });
    },
    handleAdd() {
      this.$router.push({
        path: '/distribution/reservation/reservationAddFrom',
      });
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push({
        path: '/distribution/reservation/reservationAddFrom',
        query: {
          reservationId: row.id,
        },
      });
    },
    aaa() {
      this.queryA.reservationStatus = '1';
      this.onLoad(this.page);
    },
    bbb() {
      this.queryB.reservationStatus = '2';
      this.onLoad(this.page);
    },
    handleView(row) {
      this.title = '查看';
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    /**
     * 批量转配送
     */
    handleDeliverys() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      let ids = [];
      this.selectionList.forEach(item => {
        if (item.id) {
          ids.push(item.id);
        }
      });
      ids = ids.join(',');

      this.$router.push({
        path: '/distribution/turndelivery/deliveryMarket',
        query: {
          id: ids,
          name: '市配计划',
        },
      });

      // this.$router.push({
      //   path: '/distribution/reservation/atlas',
      //   query: {
      //     id: ids,
      //     type: '1',
      //   },
      // });
      // console.log(">>>>>>>>>>",ids);
    },
    //批量转备货
    handleStockUp() {
      this.info = {};
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      let data = this.selectionList;
      let a = [];
      let b = [];
      console.log('>>>>>>>>>>>>>', data);
      data.forEach(d => {
        if (d.stockupStatus === '20' || d.stockupStatusName === '待备货') {
          a.push(d.reservationCode);
        }
        if (d.stockupStatus === '30' || d.stockupStatusName === '已备货') {
          b.push(d.reservationCode);
        }
      });
      if (a.length >= 1) {
        this.$message.warning(a.join(',') + '预约单存在备货任务,请勿重复添加');
        return;
      }
      if (b.length >= 1) {
        this.$message.warning(a.join(',') + '预约单备货任务已完成,请勿重复添加');
        return;
      }
      this.dialogFormCustomer = true;
      this.info.stockupDate = dayjs().format('YYYY-MM-DD HH:mm:ss');

      this.getFork();
      this.getTeam();
    },
    //确定指派
    callFordelivery() {
      this.info.ids = this.ids;
      this.goodsAreaIdData.forEach(item => {
        console.log(item);
        if (this.info.stockupArea === item.dictKey) {
          this.info.goodsAreaName = item.dictValue;
        }
      });
      confirms(this.info).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功！',
        });
        this.onLoad(this.page);
        this.dialogFormCustomer = false;
      });
    },
    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);
    },

    async onLoad(page, params = {}) {
      try {
        this.loading = true;
        // if (!this.query.reservationStatus) {
        //   this.query.reservationStatus = '1';
        // }
        let query = this.queryB;
        query.reservationStatus = '2';
        console.log('this.activename :>> ', this.activename);
        if (this.activename === 'nocheck') {
          console.log('123123 :>> ', 123123);
          query = this.queryA;
          query.reservationStatus = this.queryA.reservationStatus || '1';
        } else query.excludeId = this.pickerClipData.map(val => val.id).join(',');
        // if (this.queryA.reservationStatus)
        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, query));
        const data = res.data.data;
        console.log('>>>>>>>', data);
        if (data.records) {
          data.records.forEach(item => {
            this.orderSourceData.forEach(a => {
              if (item.orderSource === a.dictKey) {
                item.orderSource = a.dictValue;
              }
            });
            // this.stockupStatusData.forEach(b => {
            //   if (item.stockupStatus === b.dictKey) {
            //     item.stockupStatus = b.dictValue;
            //   }
            // });
            this.resvervationStatusData.forEach(e => {
              if (item.reservationStatus === e.dictKey) {
                item.reservationStatus = e.dictValue;
              }
            });
            this.deliveryTypeData.forEach(c => {
              if (item.deliveryType === c.dictKey) {
                item.deliveryType = c.dictValue;
              }
            });

            this.deliveryWayData.forEach(c => {
              if (item.deliveryWay === c.dictKey) {
                item.deliveryWay = c.dictValue;
              }
            });
            this.periodOfTimeData.forEach(d => {
              console.log('11111111111');
              if (item.periodOfTime === d.dictKey) {
                item.periodOfTime = d.dictValue;
              }
            });
            let pa = [];
            if (item.serveType.length > 1) {
              pa = item.serveType.split(',');
            } else {
              pa.push(item.serveType);
            }
            this.addvalueServeTypeData.forEach(f => {
              pa.forEach((p, index) => {
                if (p === f.dictKey) {
                  pa[index] = f.dictValue;
                }
              });
            });
            item.serveType = pa.join(',');
          });
        }
        this.page.total = data.total;
        if (this.activename === 'nocheck') this.data = data.records;
        else {
          this.allListData = data.records;
          if (this.orderStatus === 'all') this.data = data.records;
        }
        this.selectionClear();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loading = false;
        return null;
      }
    },

    initPage() {
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },

    /**
     * 请求打印模版
     */
    async batchPrint(ids) {
      const res = await patchPrintList({ ids: ids.join(',') });
      return res;
    },

    /**
     * 批量打印
     */
    async batchPrintData() {
      if (this.selectionList.length === 0) {
        this.$message({
          type: 'error',
          message: '最少选择一条数据哦',
        });
        return;
      }
      const ids = this.selectionList.map(item => item.id);
      this.html = '';
      const res = await this.batchPrint(ids);
      const { code, data } = res.data;
      if (code === 200) {
        this.dialogVisible = true;
        console.log('data :>> ', data);
        data.forEach(item => {
          return (this.html += item.templateHtml);
        });
        this.html;
      }
    },

    /**
     * 单独打印
     */
    async printData(rowData) {
      this.html = '';
      const res = await this.batchPrint([rowData.row.id]);
      const { code, data } = res.data;
      if (code === 200) {
        this.dialogVisible = true;
        console.log('data :>> ', data);
        data.forEach(item => {
          return (this.html += item.templateHtml);
        });
        this.html;
      }
    },

    /**
     * 调用打印机
     */
    printTemplate() {
      const orderNodeList = document.querySelectorAll('.el-dialog__body>div>div>div');
      print(orderNodeList);
    },

    /** 设置列表高度 */
    async setListHeight() {
      // 等待子组件渲染完毕
      await this.$nextTick();
      const _nodeArr = [this.$refs.confirmList.$el, this.$refs.unconfirmedList.$el];
      const winHeight = getWinHeight();
      for (let item of _nodeArr) {
        const _height = winHeight - item.getBoundingClientRect().top - 80 + 'px';
        console.log('_height :>> ', _height);
        setNodeHeight(item, _height);
      }
    },

    /** 挑单夹添加 */
    handleAddPickerClipData() {
      this.pickerClipData = [...this.pickerClipData, ...this.selectionList];
      this.$refs.confirmList.handleCheckSelect([]);
      this.initPage();
    },
    /** 挑单夹移除 */
    handleRemovePickerClipData() {
      for (let item of this.selectionList) {
        const index = this.pickerClipData.indexOf(item);
        this.pickerClipData.splice(index, 1);
      }
      this.initPage();
    },
  },
};
</script>
<style lang="scss" scoped>
// .el-tab-pane{
//   margin-top: -20px;
// }
:deep(.el-dialog) {
  width: fit-content !important;
}
.el-input__inner {
  font-weight: normal;
}
:deep(.el-pager li.is-active) {
  font-weight: normal !important;
}
.el-input {
  margin-left: 8px;
}
.el-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.fo-rl {
  .el-form-item {
    margin-right: 10px !important;
  }
}
.fo-btn {
  margin-right: 0;
}
:deep(.el-form-item__label) {
  padding: 0;
}

.overflow {
  overflow: hidden;
}
</style>