logpm_page/src/views/waybill/ComparativeStatement.vue

<template>
  <basic-container>
    <div class="avue-crud">
      <!-- 仓库节点 -->
      <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
        isNotSave
        :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
        isNotSave
        :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
        isNotSave
        :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
        isNotSave
        :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
        isNotSave
        :columnList="details.truckLoadingColumnList"
        :tableData="data"
        :loading="loadingObj.list"
      >
      </tablecmt>
    </div>
  </basic-container>
</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, deepClone } from '@/utils/util';
import {
  columnList,
  warehouseNodeColumnList,
  truckLoadingColumnList,
} from '@/option/distribution/VehicleStowage';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

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

const details = reactive<any>({
  /** 列表 */
  columnList: deepClone(columnList),
  warehouseNodeColumnList: deepClone(warehouseNodeColumnList),
  truckLoadingColumnList: deepClone(truckLoadingColumnList),
  /** 列表数据 */
  data: [{}],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    oldListLoading: false,
  },

  /** 分页参数 */
  page: {
    currentPage: 1,
    pageSize: 30,
    total: 0,
  },
});

const { data, loadingObj } = toRefs(details);

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

/** 请求页面数据 */
const onLoad = (page: any) => {};

nextTick(() => {
  // 获取弹窗内表格元素节点, 并设置高度
  const _node = document.querySelectorAll('.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);
  });
};
</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>