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

<template>
  <basic-container>
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <el-row v-if="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="el-fr-d">
          <div class="fo-fl">
            <el-form-item label="车次号:">
              <el-input
                v-model="query.serviceNumber"
                placeholder="请输入车次号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="提货时间:" class="el-times">
              <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
              <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-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
              <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-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
              <el-date-picker
                v-model="stockupDate"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                clearable
              />
            </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="primary" icon="el-icon-printer" @click="searchReset()"
              >打 印</el-button
            >
            <el-button type="primary" icon="el-icon-printer" @click="searchReset()"
              >装载清单</el-button
            >
            <el-button type="primary" icon="el-icon-printer" @click="searchReset()"
              >装载卸车清单(财务)</el-button
            >
            <el-button type="primary" icon="el-icon-van" @click="searchReset()">发 车</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="searchReset()"
              >取消发车</el-button
            >
            <el-button type="primary" icon="el-icon-delete" @click="searchReset()"
              >取消装车</el-button
            >
            <el-button type="primary" icon="el-icon-document" @click="handleComparativeStatement()"
              >对比报表</el-button
            >
            <el-button type="primary" icon="el-icon-document" @click="searchReset()"
              >卸车报告</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>

      <!-- 表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="details.columnList"
          :tableData="data"
          :loading="loadingObj.list"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <template v-if="slotProps.scope.column.label === '批次号'">
              <el-text>123</el-text>
            </template>

            <template v-if="slotProps.scope.column.label === '操作'">
              <el-text @click="handleShowzeroAdditionalRecording(slotProps.scope)">
                零担补录
              </el-text>
              <el-text @click="handleShowTruckLoadingDetails(slotProps.scope)">装车明细</el-text>
              <el-text>编辑</el-text>
              <el-text>数据同步</el-text>
              <el-text>批量装车</el-text>
              <el-text>手动装车</el-text>
              <el-text>节点费用</el-text>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 统计 -->
      <el-row>
        <div>选择数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
        <div>总计: 总数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
      </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.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.truckLoadingDetailVisited"
    width="80%"
    :before-close="beforeClose"
    append-to-body
    :fullscreen="details.fullscreenObj.truckLoadingDetailPopUp"
    :show-close="false"
    class="truckLoadingDetailPopUp"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex-c-sb">
        <h4 :id="titleId" :class="titleClass">装车明细</h4>
        <div class="flex-c-c">
          <!-- 全屏显示按钮 -->
          <el-button type="text" v-if="!details.fullscreenObj.truckLoadingDetailPopUp">
            <el-icon class="" @click="handleFullScrean('open', 'truckLoadingDetailPopUp')"
              ><FullScreen
            /></el-icon>
          </el-button>
          <el-button type="text" v-else>
            <el-icon class="" @click="handleFullScrean('close', 'truckLoadingDetailPopUp')"
              ><CopyDocument
            /></el-icon>
          </el-button>

          <!-- 弹窗关闭按钮 -->
          <el-button type="text">
            <el-icon class="" @click="close"><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </template>
    <el-form :inline="true" :model="query" class="el-fr-d">
      <div class="fo-fl">
        <el-form-item label="预计发车:" class="el-times">
          <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
          <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-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
          <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>
          <el-button type="primary" icon="el-icon-van" @click="searchChange">批量卸车</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchReset()">搜 索</el-button>
          <el-button icon="el-icon-printer" @click="searchReset()">二维码</el-button>
        </el-form-item>
      </div>
    </el-form>
    <tablecmt
      :columnList="details.detailsColumnList"
      :tableData="data"
      :loading="loadingObj.list"
      @inputTxt="inputsc"
      @timeCheck="timesc"
      @btnCheck="btnsc"
      @selectCheck="selectsc"
      @selection="selectionChange"
    >
      <template #default="slotProps"> </template>
    </tablecmt>

    <!-- 分页模块 -->
    <el-pagination
      align="right"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="trickleLoadingPage.pageNum"
      :page-sizes="[30, 50, 80, 120]"
      :page-size="trickleLoadingPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="trickleLoadingPage.total"
    >
    </el-pagination>

    <!-- 表单按钮 -->
    <!--     <template #footer>
      <div v-if="!view" class="dialog-footer">
        <el-button type="primary" icon="el-icon-circle-check" @click="handleEditSubmit"
          >提 交</el-button
        >
        <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
      </div>
    </template> -->
  </el-dialog>

  <!-- 对比报表 (暂时无用) -->
  <el-dialog
    title="对比报表"
    v-model="details.popUpShow.comparativeStatementPopUp"
    width="80%"
    :before-close="beforeClose"
    append-to-body
    :fullscreen="details.fullscreenObj.comparativeStatementPopUp"
    :show-close="false"
    class="comparativeStatementPopUp"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header flex-c-sb">
        <div :id="titleId" :class="titleClass">对比报表</div>
        <div class="flex-c-c">
          <!-- 全屏显示按钮 -->
          <el-button type="text" v-if="!details.fullscreenObj.comparativeStatementPopUp">
            <el-icon class="" @click="handleFullScrean('open', 'comparativeStatementPopUp')"
              ><FullScreen
            /></el-icon>
          </el-button>
          <el-button type="text" v-else>
            <el-icon class="" @click="handleFullScrean('close', 'comparativeStatementPopUp')"
              ><CopyDocument
            /></el-icon>
          </el-button>

          <!-- 弹窗关闭按钮 -->
          <el-button type="text">
            <el-icon class="" @click="close"><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </template>

    <!-- 仓库节点 -->
    <div class="popUp_title">
      车次号: LQFX231127001; 开单总数: <span class="red">21</span>; 发车时间: 2021-11-27 15:25:28
    </div>
    <el-divider content-position="left"> 仓库节点 </el-divider>
    <tablecmt
      :columnList="details.warehouseNodeColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>

    <!-- 总装车 -->
    <div class="popUp_title">
      总装车数: <span class="red">22</span>; (零担装车数据: <span class="red">0</span>;)
      (已匹配配载运单件数: <span class="red">21</span>;) 未匹配配载运单件数:
      <span class="red">1</span>;
    </div>
    <el-divider content-position="left"> 总装车数 <span class="red">(22)</span> </el-divider>
    <tablecmt
      :columnList="details.truckLoadingColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>

    <!-- 零担 -->
    <el-divider content-position="left">
      已匹配配载运单 <b>零担</b>: <span class="red">21</span>;
    </el-divider>
    <div class="red">描述：已匹配配载运单指该车次配载的运单和装车零担数据能匹配上</div>
    <tablecmt
      :columnList="details.truckLoadingColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>

    <!-- 包件 -->
    <el-divider content-position="left">
      已匹配配载运单 <b>包件</b>: <span class="red">21</span>;
    </el-divider>
    <div class="red">描述：已匹配配载运单指该车次配载的运单和装车包条码能匹配上</div>
    <tablecmt
      :columnList="details.truckLoadingColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>

    <!-- 未匹配配载运单 -->
    <el-divider content-position="left"> 未匹配配载运单 : <span class="red">1</span>; </el-divider>
    <div class="red">
      描述：未匹配配载运单指该车次配载的运单和装车包条码尚未匹配上，可能配载的运单和装车的货物有错误
    </div>
    <tablecmt
      :columnList="details.truckLoadingColumnList"
      :tableData="data"
      :loading="loadingObj.list"
    >
    </tablecmt>
  </el-dialog>

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

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls, setNodeHeight } from '@/utils/util';
import {
  columnList,
  detailsColumnList,
  warehouseNodeColumnList,
  truckLoadingColumnList,
} from '@/option/distribution/VehicleStowage';
import { postloadCarsPageList } from '@/api/distribution/VehicleStowage';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

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

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: [],
  /** 列表 */
  columnList,
  detailsColumnList,
  warehouseNodeColumnList,
  truckLoadingColumnList,
  /** 列表数据 */
  data: [{}],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    oldListLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 装车明细分页参数 */
  trickleLoadingPage: {
    pageNum: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 装车详情 */
    truckLoadingDetailVisited: false,
    /** 零担补录 */
    zeroAdditionalRecordingVisited: false,
    /** 对比报表 */
    comparativeStatementPopUp: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 全屏 */
  fullscreenObj: {
    /** 装车明细 */
    truckLoadingDetailPopUp: false,
    comparativeStatementPopUp: false,
  },
});

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

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

onMounted(() => {
  const timer = setTimeout(() => {
    details.listNode = document.querySelector('.maboxhi');
    details.listNode.style.transition = 'all .5s ease-out';
    console.log('details.listNode :>> ', details.listNode);
    clearTimeout(timer);
  }, 100);
});

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

    // 请求页面数据
    const res = await postloadCarsPageList(details.page, { ...details.query, ...params });
    const { code, data } = res.data;
    if (code !== 200) return;
    details.data = data.records;
    details.page.total = data.total;
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.list = false;
  }
};

onLoad(details.page);

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

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

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  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;
  onLoad(details.page);
};

/** 表格表头时间选择 */
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(details.page);
};

/** 表格表头输入框搜索 */
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(details.page);
};

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

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

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

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

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

/** 显示对比报表 */
const handleComparativeStatement = () => {
  if (details.selectionList.length === 0) {
    return ElMessage({
      type: 'warning',
      message: '请选择要对比的数据',
    });
  }

  $router.push('/waybill/ComparativeStatement');
  /* details.popUpShow.comparativeStatementPopUp = true;

  nextTick(() => {
    // 获取弹窗内表格元素节点, 并设置高度
    const _node = document.querySelectorAll('.comparativeStatementPopUp .maboxhi');
    setNodeHeight(_node, 'auto');
  }); */
};

/** 显示装车详情 */
const handleShowTruckLoadingDetails = ({ row }) => {
  details.popUpShow.truckLoadingDetailVisited = true;

  nextTick(() => {
    // 获取弹窗内表格元素节点, 并设置高度
    const _node = document.querySelector('.truckLoadingDetailPopUp .maboxhi');
    _node.style.height = '550px';
    console.log('_node :>> ', _node);
  });
};

/** 显示零担补录 */
const handleShowzeroAdditionalRecording = ({ row }) => {
  // 跳转到零担补录页面
  $router.push('/distribution/artery/zeroAdditionalRecording');
};

/**
 * 是否开启床车明细全屏
 * @params(_type) 开启或关闭
 */
const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
  let _node = '';
  if (_name) _node = document.querySelectorAll(`.${_name} .maboxhi`);
  console.log('_node :>> ', _node);

  switch (_name) {
    case 'comparativeStatementPopUp':
      details.fullscreenObj.comparativeStatementPopUp =
        !details.fullscreenObj.comparativeStatementPopUp;
      break;

    default:
      details.fullscreenObj[_name] = !details.fullscreenObj[_name];
      if (_type === 'close') {
        if (_node) setNodeHeight(_node, '500px');
      } else {
        if (_node) setNodeHeight(_node);
      }
      break;
  }
};

/** 新增配载 */
const handleAdd = () => {
  $router.push({ path: '/distribution/artery/AddVehicleStowage' });
};
</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;
}

.fwb {
  font-weight: bold;
}

// 弹出层标题
.popUp_title {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 20px;
  position: relative;
  margin: 20px 0;

  &:first-child {
    margin-top: 0;
  }

  &::before {
    width: 4px;
    height: 100%;
    background: #172e60;
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.red {
  color: #ff0000;
}
</style>