logpm_page/src/views/distribution/artery/truckLoadingDetails.vue

<template>
  <basic-container>
    <div class="avue-crud" v-loading="details.loadingObj.pageLoading">
      <!-- 搜索模块 -->
      <el-row v-if="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="el-fr-d">
          <el-form-item label="扫码时间:" class="el-times">
            <el-date-picker
              v-model="stockupDate"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              clearable
            />
          </el-form-item>

          <el-form-item label="卸车时间:" class="el-times">
            <el-date-picker
              v-model="stockupDate"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              clearable
            />
          </el-form-item>

          <!-- 查询按钮 -->
          <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>

      <!-- 控件模块 -->
      <div class="avue-crud__header">
        <!-- 头部左侧按钮模块 -->
        <div class="avue-crud__left">
          <!-- 车辆配载 -->
          <template v-if="details.pageInfo.type === 'VehicleStowage'">
            <el-button type="primary" icon="Edit" @click="handleShowTransfer('add')"
              >计划仓更改
            </el-button>
            <el-button type="primary" icon="List" @click="handleBatchUnLoad">批量卸车</el-button>
          </template>

          <!-- 三方中转 -->
          <template v-if="details.pageInfo.type === 'TripartiteTransfer'">
            <el-button type="primary" icon="Edit" @click="handleShowTransfer('add')">
              中转批量签收
            </el-button>
            <el-button type="primary" icon="List" @click="handleBatchUnLoad">批量卸车</el-button>
          </template>

          <!-- 到车管理 -->
          <template v-if="details.pageInfo.type === 'VehicleArrivalManagement'">
            <el-button type="primary" icon="List" @click="handleBatchUnLoad">批量卸车</el-button>
          </template>

          <el-button type="primary" icon="Delete" @click="handleBatchRemove">删除</el-button>
          <el-button type="primary" icon="Printer" @click="handleBatchBarcode">二维码</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>

      <!-- 列表模块 -->
      <tablecmt
        ref="tableNodeRef"
        :columnList="details.detailsColumnList"
        :tableData="data"
        :loading="loadingObj.list"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @btnCheck="btnsc"
        @selectCheck="selectsc"
        @selection="selectionChange"
        :tableRowClassName="
          (row, index) => {
            if (row.loadingAbnormal || row.unloadAbnormal) return 'Abnormal';
            else return '';
          }
        "
      >
        <template #default="slotProps">
          <!-- 零担 -->
          <template v-if="Number(slotProps.scope.row.type) === 2">
            <el-text
              type="text"
              @click="handleZeroUnLoad(slotProps.scope)"
              v-if="Number(slotProps.scope.row.scanStatus) === 1"
            >
              零担卸车
            </el-text>
          </template>

          <!-- 包件 -->
          <template v-else-if="Number(slotProps.scope.row.type) === 1">
            <el-text
              type="text"
              @click="handleOrderUnLoad(slotProps.scope)"
              v-if="Number(slotProps.scope.row.scanStatus) === 1"
            >
              包件卸车
            </el-text>

            <el-text @click="printOrder(slotProps.scope)"> 二维码 </el-text>
          </template>
        </template>
      </tablecmt>

      <!-- 分页模块 -->
      <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.pageNum"
            :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>
    </div>
  </basic-container>

  <!-- 配置装车目的地 -->
  <el-dialog
    title="零担卸车"
    v-model="details.popUpShow.transferVisited"
    width="30%"
    append-to-body
    class="truckLoadingDetailPopUp"
  >
    <el-form-item label="零担卸车数量" label-width="100px">
      <el-input-number
        style="width: 100%"
        :precision="0"
        :max="details.zeroItem.num"
        readonly
        :controls="false"
        v-model="details.zeroItem.enterNum"
      />
    </el-form-item>

    <!-- 表单按钮 -->
    <div class="flex-c-c">
      <el-button icon="Close" @click="details.popUpShow.transferVisited = false"> 取 消 </el-button>
      <el-button type="primary" icon="Position" @click="handleZeroUnLoadSubmit"> 提 交 </el-button>
    </div>
  </el-dialog>

  <!-- 打印二维码 -->
  <el-dialog
    class="el-dialog-QRCode"
    title="二维码"
    :visible.sync="details.popUpShow.QRCodeVisible"
    width="780px"
    v-model="details.popUpShow.QRCodeVisible"
    :align-center="true"
  >
    <div class="el-dialog-QRCode-container">
      <div v-html="details.html"></div>
    </div>
    <span slot="footer" class="dialog-footer flex-c-c mt10">
      <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
      <el-button type="primary" @click="printTemplate">打 印</el-button>
      <el-button @click="details.popUpShow.QRCodeVisible = false">取 消</el-button>
    </span>
  </el-dialog>

  <!-- 列表配置显示 -->
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.detailsColumnList"
  ></edittablehead>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { getMyCurrentWarehouse } from '@/api/work/work';
import {
  postLoadingDetail,
  postBatchUnload,
  postTransferUnloadPackage,
  postTransferUnloadZero,
  postBatchTransferUnload,
  postRemoveCarsLoadScan,
} from '@/api/distribution/truckLoadingDetails';
import { getShowAdvancePackgeCode } from '@/api/waybill/orderPackageListDetails';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls, getHtmls, debounce } from '@/utils/util';
import { detailsColumnList } from '@/option/distribution/TripartiteTransfer';
import { useRouter, useRoute } from 'vue-router';
import print from '@/utils/print';

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 装车明细表头信息 */
  detailsColumnList,
  /** 列表数据 */
  data: [],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    /** 页面loading */
    pageLoading: false,
    /** 查看二维码 */
    QRCodeVisible: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 装车详情 */
    truckLoadingDetailVisited: false,
    /** 零担补录 */
    transferVisited: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 页面数据 */
  pageInfo: {
    /** 配送ID */
    loadId: '',
    /** 页面类型
     * TripartiteTransfer -- 三方中转
     * VehicleStowage -- 车辆配载
     *  */
    type: '',
  },
  /** 被选中的零担数据 */
  zeroItem: {},
  // 字典
  /** 装卸状态 */
  scanStatusOption: [
    { label: '装车', value: 1 },
    { label: '卸车', value: 2 },
    { label: '签收', value: 3 },
  ],
  /** 有无数据 */
  isDataOption: [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
  ],
  /** 类型 */
  typeOption: [
    { label: '包件', value: 1 },
    { label: '零担', value: 2 },
  ],
  /** 是否装车异常 */
  loadingAbnormalOption: [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
  ],
  /** 是否卸车异常 */
  unloadAbnormalOption: [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
  ],
  /** 是否补录 */
  isSuppleOption: [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
  ],
  /** 个人仓库信息 */
  myWarehouseData: {},
  /** 打印的二维码 */
  html: '',
});

const {
  search,
  query,
  shortcuts,
  stockupDate,
  data,
  loadingObj,
  selectionList,
  drawerShow,
  page,
  trickleLoadingPage,
} = toRefs(details);

// 获取路由实例
const $router = useRouter();
const $route = useRoute();

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

// 表格实例
const tableNodeRef = ref();

/** 初始化表格表头 */
const initTableSelect = () => {
  for (const iterator of details.detailsColumnList) {
    console.log('iterator :>> ', iterator);
    iterator.checkarr = details[iterator.prop.replace('Name', '') + 'Option'] || [];
  }
};

initTableSelect();

getMyCurrentWarehouse({}).then(res => {
  console.log('res :>> ', res);
  const { code, data } = res.data;
  if (code !== 200) return;
  details.myWarehouseData = data;
});

onMounted(() => {
  /**
   * 初始化获取本地缓存的编辑隐藏的列表
   *  固定搭配，不能更改
   */
  let checkListnewarr = functions.getStorage(window.location.pathname + 'checkList');
  let flexListnewarr = functions.getStorage(window.location.pathname + 'flexList');
  let sortlistnewarr = functions.getStorage(window.location.pathname + 'sortlist');
  if (checkListnewarr) {
    details.detailsColumnList.map(item => {
      item.head = false;
    });
    checkListnewarr.map(ite => {
      details.detailsColumnList.map(item => {
        if (ite == item.label) {
          item.head = true;
        }
      });
    });
  } else {
    let arr = [];
    details.detailsColumnList.map(item => {
      if (item.head) {
        arr.push(item.label);
      }
    });
    functions.setStorage(window.location.pathname + 'checkList', arr);
  }
  if (flexListnewarr) {
    details.detailsColumnList.map(item => {
      item.fixed = false;
    });
    flexListnewarr.map(ite => {
      details.detailsColumnList.map(item => {
        if (ite == item.label) {
          if (item.type == 6) {
            item.fixed = 'right';
          } else {
            item.fixed = true;
          }
        }
      });
    });
  } else {
    let arr = [];
    details.detailsColumnList.map(item => {
      if (item.fixed) {
        arr.push(item.label);
      }
    });
    functions.setStorage(window.location.pathname + 'flexList', arr);
  }
  if (sortlistnewarr) {
    details.detailsColumnList.map(item => {
      item.sortable = false;
    });
    sortlistnewarr.map(ite => {
      details.detailsColumnList.map(item => {
        if (ite == item.label) {
          item.sortable = true;
        }
      });
    });
  } else {
    let arr = [];
    details.detailsColumnList.map(item => {
      if (item.sortable) {
        arr.push(item.label);
      }
    });
    functions.setStorage(window.location.pathname + 'sortlist', arr);
  }
});

/** 转译数据 */
const initData = (data, row) => {
  const _item = details[data + 'Option'].find(val => val.value == Number(row[data]));
  row[data + 'Name'] = _item ? _item.label : '暂无数据';
};

/** 请求页面数据 */
const onLoad = debounce(async (params = {}) => {
  try {
    // 开启loading
    details.loadingObj.list = true;

    details.query.loadId = details.pageInfo.loadId;

    // 请求页面数据
    const res = await postLoadingDetail({ ...details.page, ...details.query, ...params });
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data.records;

    for (const iterator of details.data) {
      initData('scanStatus', iterator);
      initData('type', iterator);
      initData('isData', iterator);
      initData('loadingAbnormal', iterator);
      initData('unloadAbnormal', iterator);
      initData('isSupple', iterator);
    }

    details.page.total = data.total;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.list = false;
  }
}, 10);

/** 搜索 */
const searchChange = () => {
  onLoad();
};

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.stockupDate = [];
  details.page.pageNum = 1;
  onLoad();
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean, _type?: string) => {
  switch (_type) {
    case 'truckLoadingDetail':
      details.editColumnList = details.detailsColumnList;
      break;

    default:
      console.log('123 :>> ', 123);
      details.editColumnList = details.columnList;
      break;
    // details.
  }
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  function getWinHight() {
    var windowHight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      windowHight =
        document.body.clientHeight < document.documentElement.clientHeight
          ? document.body.clientHeight
          : document.documentElement.clientHeight;
    } else {
    }
    return document.documentElement.clientHeight;
  }
  details.search = !details.search;
  const timer = setTimeout(() => {
    details.listNode.style.height =
      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
    clearTimeout(timer);
  }, 10);
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;

  if (!index) delete details.query[row.prop];
  onLoad();
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  onLoad();
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index) delete details.query[row.prop];
  if (row.prop === 'certificateTypeName') {
    details.query['certificateType'] = index;
    if (!index) delete details.query['certificateType'];
  }
  onLoad();
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
  details.page.pageSize = pageSize;
  onLoad();
};

/** 页码改变执行的回调 */
const currentChange = pageNum => {
  details.page.pageNum = pageNum;
  onLoad();
};

/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   columnList
 *  */
const setnewcolum = (newarr, headarr, type) => {
  if (type == 1) {
    details.editColumnList = newarr;
    functions.setStorage(window.location.pathname + 'checkList', headarr);
  } else if (type == 2) {
    details.editColumnList = newarr;
    functions.setStorage(window.location.pathname + 'flexList', headarr);
  } else if (type == 3) {
    details.editColumnList = newarr;
    functions.setStorage(window.location.pathname + 'sortlist', headarr);
  }
};

/** 弹出层开启前清除数据 */
const beforeClose = done => {
  done();
  details.form = {};
  details.view = false;
};

/** 新增中转 */
const addTransfer = async () => {
  return null;
};

/** 修改中转 */
const editTransfer = async () => {
  return null;
};

/** 显示新增或修改中转弹窗 */
const handleShowTransfer = async (_type: string) => {
  switch (_type) {
    // 新增
    case 'add':
      await addTransfer();
      break;

    // 修改
    case 'edit':
      await editTransfer();
      break;

    default:
      break;
  }
  details.popUpShow.transferVisited = true;

  nextTick(() => {
    // 获取弹窗内表格元素节点, 并设置高度
    const _nodeList = document.querySelectorAll('.transferPopUp .maboxhi');
    _nodeList.forEach(val => (val.style.height = '300px'));
  });
};

/** 批量卸车 */
const handleBatchUnLoad = async () => {
  try {
    details.loadingObj.pageLoading = true;

    if (details.selectionList.length === 0) return ElMessage.warning('请选择需要卸车的数据');

    if (details.pageInfo.type !== 'TripartiteTransfer') {
      if (!details.myWarehouseData) {
        const res = await getMyCurrentWarehouse();
        details.myWarehouseData = res.data.data;
      }

      if (!details.myWarehouseData) return ElMessage.warning('请先选择一个仓库');

      // 当前登录人的仓库Id
      const myWarehouseId = details.myWarehouseData.id;

      // 包件列表
      const _orderArr = [];
      // 零担列表
      const _zeroArr = [];

      // 是否含有异常
      let isHaveAbnormalData = false;

      for (const iterator of details.selectionList) {
        if (Number(iterator.scanStatus) === 1) {
          // 包件
          if (Number(iterator.type) === 1) {
            _orderArr.push({ orderPackageCode: iterator.scanCode });
          } else {
            _zeroArr.push({
              waybillNo: iterator.waybillNo,
              enterNum: iterator.num,
              orderCode: iterator.orderCode,
            });
          }

          // 不重复判断是否有异常
          if (!isHaveAbnormalData) {
            isHaveAbnormalData = iterator.finalNodeId !== myWarehouseId;
          }
        }
      }

      if ([..._zeroArr, ..._orderArr].length === 0) return ElMessage.warning('没有符合要求的数据');

      // 判断是否含有异常
      if (!isHaveAbnormalData) {
        ElMessageBox.confirm('是否卸车', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        })
          // 异常提交
          .then(async () => {
            try {
              details.loadingObj.pageLoading = true;

              const submitData = {
                loadId: details.pageInfo.loadId,
                unloadPackageList: _orderArr,
                unloadZeroList: _zeroArr,
              };

              const res = await postBatchUnload(submitData);
              const { code } = res.data;

              if (code !== 200) return;
              ElMessage.success('卸车成功');
              onLoad();
            } catch (error) {
              console.log('error :>> ', error);
            } finally {
              details.loadingObj.pageLoading = false;
            }
          });
        return;
      }

      ElMessageBox.confirm('包含已卸车数据或计划不在本节点卸车的数据', '异常提交', {
        confirmButtonText: '提交包含不在本节点数据',
        cancelButtonText: '仅提交装车数据',
        type: 'warning',
        center: true,
        distinguishCancelAndClose: true,
      })
        // 异常提交
        .then(async () => {
          try {
            details.loadingObj.pageLoading = true;

            const submitData = {
              loadId: details.pageInfo.loadId,
              unloadPackageList: _orderArr,
              unloadZeroList: _zeroArr,
            };

            const res = await postBatchUnload(submitData);
            const { code } = res.data;

            if (code !== 200) return;
            ElMessage.success('卸车成功');
            onLoad();
          } catch (error) {
            console.log('error :>> ', error);
          } finally {
            details.loadingObj.pageLoading = false;
          }
        })
        // 仅去除已装车和已签收数据
        .catch(async (action: Action) => {
          if (action !== 'cancel') return;

          try {
            details.loadingObj.pageLoading = true;

            const submitData = {
              loadId: details.pageInfo.loadId,
              unloadPackageList: _orderArr.filter(val => val.finalNodeId === myWarehouseId),
              unloadZeroList: _zeroArr.filter(val => val.finalNodeId === myWarehouseId),
            };

            const res = await postBatchUnload(submitData);
            const { code } = res.data;

            if (code !== 200) return;
            ElMessage.success('卸车成功');
            onLoad();
          } catch (error) {
            console.log('error :>> ', error);
          } finally {
            details.loadingObj.pageLoading = false;
          }
        });
    } else {
      // 三方中转

      // 包件列表
      const _orderArr = [];
      // 零担列表
      const _zeroArr = [];

      for (const iterator of details.selectionList) {
        if (Number(iterator.scanStatus) === 1) {
          // 包件
          if (Number(iterator.type) === 1) {
            _orderArr.push({ orderPackageCode: iterator.scanCode });
          } else {
            _zeroArr.push({
              waybillNo: iterator.waybillNo,
              enterNum: iterator.num,
              orderCode: iterator.orderCode,
            });
          }
        }
      }

      if ([..._zeroArr, ..._orderArr].length === 0) return ElMessage.warning('没有符合要求的数据');

      // 判断是否含有异常
      const submitData = {
        loadId: details.pageInfo.loadId,
        unloadPackageList: _orderArr,
        unloadZeroList: _zeroArr,
      };

      const res = await postBatchTransferUnload(submitData);
      const { code } = res.data;

      if (code !== 200) return;
      ElMessage.success('卸车成功');
      onLoad();
      return;
    }
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 卸车 -- 订单 */
const handleOrderUnLoad = async ({ row }) => {
  if (details.pageInfo.type !== 'TripartiteTransfer') {
    if (!details.myWarehouseData) {
      const res = await getMyCurrentWarehouse();
      details.myWarehouseData = res.data.data;
    }

    if (!details.myWarehouseData) return ElMessage.warning('请先选择一个仓库');

    // 当前登录人的仓库Id
    const myWarehouseId = details.myWarehouseData.id;

    console.log('details.myWarehouseData :>> ', details.myWarehouseData);
    console.log('row.finalNodeId !== myWarehouseId :>> ', row);
    console.log('myWarehouseId :>> ', myWarehouseId);

    if (row.finalNodeId !== myWarehouseId)
      return (
        ElMessageBox.confirm('包含已卸车数据或计划不在本节点卸车的数据', '异常提交', {
          confirmButtonText: '提交包含不在本节点数据',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        })
          // 异常提交
          .then(async () => {
            try {
              details.loadingObj.pageLoading = true;

              const submitData = {
                loadId: details.pageInfo.loadId,
                unloadPackageList: [{ orderPackageCode: row.scanCode }],
                unloadZeroList: [],
              };

              const res = await postBatchUnload(submitData);
              const { code } = res.data;

              if (code !== 200) return;
              ElMessage.success('卸车成功');
              onLoad();
            } catch (error) {
              console.log('error :>> ', error);
            } finally {
              details.loadingObj.pageLoading = false;
            }
          })
          .catch(() => {})
      );

    ElMessageBox.confirm('是否卸车', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }).then(async () => {
      try {
        details.loadingObj.pageLoading = true;

        const submitData = {
          loadId: details.pageInfo.loadId,
          unloadPackageList: [{ orderPackageCode: row.scanCode }],
          unloadZeroList: [],
        };

        const res = await postBatchUnload(submitData);
        const { code } = res.data;

        if (code !== 200) return;
        ElMessage.success('卸车成功');
        onLoad();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    });
  } else {
    // 三方中转
    ElMessageBox.confirm('是否卸车', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }).then(async () => {
      try {
        details.loadingObj.pageLoading = true;

        const submitData = {
          loadId: details.pageInfo.loadId,
          orderPackageCode: row.scanCode,
        };

        const res = await postTransferUnloadPackage(submitData);
        const { code } = res.data;

        if (code !== 200) return;
        ElMessage.success('卸车成功');
        onLoad();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    });
  }
};

/** 卸车 -- 零担 */
const handleZeroUnLoad = async ({ row }) => {
  if (details.pageInfo.type !== 'TripartiteTransfer') {
    if (!details.myWarehouseData) {
      const res = await getMyCurrentWarehouse();
      details.myWarehouseData = res.data.data;
    }

    if (!details.myWarehouseData) return ElMessage.warning('请先选择一个仓库');

    if (details.myWarehouseData.id !== row.finalNodeId)
      return ElMessage.warning('未在目的仓, 无法卸车');
  }

  details.zeroItem = { ...row };
  details.zeroItem.enterNum = row.num;
  details.popUpShow.transferVisited = true;
};

/** 卸车 -- 零担 -- 提交 */
const handleZeroUnLoadSubmit = async () => {
  try {
    details.popUpShow.transferVisited = false;
    details.loadingObj.pageLoading = true;

    let res = {};

    if (details.pageInfo.type !== 'TripartiteTransfer') {
      const submitData = {
        loadId: details.pageInfo.loadId,
        unloadPackageList: [],
        unloadZeroList: [
          {
            waybillNo: details.zeroItem.waybillNo,
            enterNum: details.zeroItem.num,
            orderCode: details.zeroItem.orderCode,
          },
        ],
      };

      res = await postBatchUnload(submitData);
    } else {
      const submitData = {
        loadId: details.pageInfo.loadId,
        waybillNo: details.zeroItem.waybillNo,
        enterNum: details.zeroItem.num,
        orderCode: details.zeroItem.orderCode,
      };

      res = await postTransferUnloadZero(submitData);
    }
    const { code } = res.data;

    if (code !== 200) return;
    ElMessage.success('卸车成功');
    onLoad();
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 单列查看包条码 */
const printOrder = async ({ row }) => {
  try {
    details.loadingObj.pageLoading = true;

    let qr = {
      orderPackageCodes: row.scanCode,
    };

    const res = await getShowAdvancePackgeCode(qr);

    if (res.data.code !== 200) return;
    details.popUpShow.QRCodeVisible = true;
    console.log(res.data);
    details.html = '';
    details.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 批量查看二维码 */
const handleBatchBarcode = async () => {
  if (details.selectionList.length === 0)
    return ElMessage.warning({ message: '请选择需要查看的数据' });

  const _arr = [];
  for (const iterator of details.selectionList) {
    if (Number(iterator.type) === 1) _arr.push(iterator);
  }

  tableNodeRef.value.handleClearSelect();
  tableNodeRef.value.handleCheckSelect(_arr);

  if (_arr.length === 0) return ElMessage.warning('零担无法查看二维码');

  try {
    details.loadingObj.pageLoading = true;

    let qr = {
      orderPackageCodes: _arr.map(val => val.scanCode).join(','),
    };

    const res = await getShowAdvancePackgeCode(qr);

    if (res.data.code !== 200) return;
    details.popUpShow.QRCodeVisible = true;
    console.log(res.data);
    details.html = '';
    details.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};

/** 打印包条码 */
const printTemplate = () => {
  const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
  print(orderNodeList);
};

/** 批量移除 */
const handleBatchRemove = async () => {
  if (details.selectionList.length === 0) return ElMessage.warning('请选择需要删除的数据');

  ElMessageBox.confirm('是否批量删除数据', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true,
  })
    // 异常提交
    .then(async () => {
      try {
        details.loadingObj.pageLoading = true;

        const submitData = { carsLoadScanIds: details.selectionList.map(val => val.id).join(',') };
        const response = await postRemoveCarsLoadScan(submitData);
        const { code, msg } = response.data;

        if (code !== 200) return;
        ElMessage.success({ message: msg });
        onLoad();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        details.loadingObj.pageLoading = false;
      }
    });
};

watch(
  $route,
  (newVal, oldVal) => {
    console.log('newVal :>> ', newVal);
    console.log('oldVal :>> ', oldVal);
    if (newVal.path !== '/distribution/artery/truckLoadingDetails') return;
    details.pageInfo.loadId = $route.query.loadId;
    details.pageInfo.type = $route.query.type;
    console.log('details.pageInfo :>> ', details.pageInfo);
    onLoad();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.fo-fl {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;
}

// 日期选择器
:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 100% !important;
}

:deep(.el-range-editor.el-input__wrapper) {
  height: 100% !important;
}

// 新增行
.add_row {
  display: flex;
  justify-content: space-between;
}

.add_row_title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

// 统计行
.statistics_row {
  margin: 10px 0;
  font-size: 14px;
  zoom: 0.9;
  display: flex;

  > div {
    margin-right: 20px;
  }
}

// 卡片容器
.crad_container {
  display: flex;

  .card_container_item {
    flex: 1;
    // padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;

    &:first-child {
      margin-right: 20px;
    }

    .card_container_item_title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card_container_item_box {
      padding: 10px;
    }
  }
}

.pointer {
  cursor: pointer;
}

.transferPopUp :deep(.el-textarea) {
  width: 500px;
}

:deep(.el-table tr) {
  &.Abnormal {
    background: #e54b4b;

    .tabculconte,
    .el-tooltip,
    .el-button--text,
    .el-text {
      color: #fff !important;
    }
  }

  &.hover-row {
    .tabculconte,
    .el-tooltip,
    .el-button--text {
      color: var(--el-color-primary) !important;
    }
  }
}
</style>