SZYGM1.0/src/views/realTime/departure/waybill/index.vue

<template>
  <div class="station scroll-y">
    <div class="station-head">
      <div class="station-head-title">运单基本信息</div>
      <div class="station-head-content flex">
        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
      </div>
    </div>
    <div class="station-status flex">
      <div class="station-status-info flex-wrap">
        <div class="manageTitle">运单跟踪信息</div>
        <div class="status">正常</div>
      </div>
      <div class="station-status-search flex-wrap">
        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
        <Search @clear="clear" @search="search" />
      </div>
    </div>
    <div class="station-list flex-wrap">
      <div class="station-list-left">
        <div class="title flex-wrap">
          <div class="title-list">航班号CA1001</div>
          <div class="title-list">出港: 深圳机场</div>
          <div class="title-list">日期：2022/09/10</div>
        </div>
        <Steps :datas="datas" />
      </div>
      <div class="station-list-right">
        <div class="title flex-wrap">
          <div class="title-list">出港: 深圳机场</div>
          <div class="title-list">日期：2022/09/10</div>
        </div>
        <Steps :datas="datas1" />
      </div>
    </div>
    <div class="station-list flex-wrap">
      <div class="station-list-left">
        <div class="title flex-wrap">
          <div class="title-list">航班号CA1001</div>
          <div class="title-list">出港: 深圳机场</div>
          <div class="title-list">日期：2022/09/10</div>
        </div>
        <Steps :datas="datas" />
      </div>
      <div class="station-list-right">
        <div class="title flex-wrap">
          <div class="title-list">出港: 深圳机场</div>
          <div class="title-list">日期：2022/09/10</div>
        </div>
        <Steps :datas="datas1" />
      </div>
    </div>
    <div class="station-table">
      <Table height="calc(100vh - 700px)" :tableHeader="state.waybillTableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
    </div>
    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import Search from "@/components/search/index.vue";
import Steps from "@/components/steps/index.vue";
import Table from "@/components/tableTemp/index.vue";
import TBtnGroup from "@/components/TBtnGroup/index.vue";
import tableColumnSet from "@/components/tableColumnSet/index.vue";
import { ElMessage } from "element-plus";
const dataInfo = [
  {
    id: 1,
    name: "运单",
    value: "FA56888829",
  },
  {
    id: 2,
    name: "货代公司",
    value: "深圳市联运通货有限公司",
  },
  {
    id: 3,
    name: "品名",
    value: "电路板、手机外壳",
  },
  {
    id: 4,
    name: "特货信息",
    value: "特",
  },
  {
    id: 5,
    name: "始发机场",
    value: "SZX",
  },
  {
    id: 6,
    name: "目的机场",
    value: "CTU",
  },
  {
    id: 7,
    name: "货物数量",
    value: "7件",
  },
  {
    id: 8,
    name: "货物总重",
    value: "82KG",
  },
];
const datas = [
  {
    id: 1,
    name: "收货核单",
    flag: true,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 2,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 3,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 4,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 5,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 6,
    name: "安检",
    flag: false,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 7,
    name: "安检安检",
    flag: false,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
];
const datas1 = [
  {
    id: 1,
    name: "收货核单",
    flag: true,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 2,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 3,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 4,
    name: "安检",
    flag: false,
    children: ["A32", "534件", "通过", "10:25"],
  },
];
const groupSet = {
  isUtc: false,
  isRefresh: false,
  isDownLoad: true,
  isColumnSet: true,
};
const tableHeader = [
  { label: "航班号", key: "fightNo" },
  { label: "集装器编号", key: "containerNo" },
  { label: "货物编码", key: "goodsNo" },
  { label: "拉下", key: "dwon1" },
  { label: "退运", key: "return" },
  {
    label: "收货核单",
    key: "receipt",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "安检",
    key: "securityCheck",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "理货",
    key: "tally",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "拉下",
    key: "dwon2",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "待运区",
    key: "waitingArea",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "货站交接",
    key: "goodSstation1",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "机下交接",
    key: "offBoard1",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "装机",
    key: "installEquipment",
    lableClass: "scoreColumn",
    columnClassName: "scoreColumn",
  },
  {
    label: "卸机",
    key: "unloading",
    lableClass: "scoreColumn2",
    columnClassName: "scoreColumn2",
  },
  {
    label: "机下交接",
    key: "offBoard2",
    lableClass: "scoreColumn2",
    columnClassName: "scoreColumn2",
  },
  {
    label: "货站交接",
    key: "goodSstation2",
    lableClass: "scoreColumn2",
    columnClassName: "scoreColumn2",
  },
  {
    label: "提取",
    key: "extract",
    lableClass: "scoreColumn2",
    columnClassName: "scoreColumn2",
  },
];
const tableData = [
  {
    id: 1,
    fightNo: "CA1001",
    containerNo: "DOU2424U2",
    goodsNo: "56888829",
    dwon1: "Y",
    return: "Y",
    receipt: "A203-未通过-15:40",
    securityCheck: "A203-未通过-15:40",
    tally: "A203-未通过-15:40",
    dwon2: "A203-未通过-15:40",
    waitingArea: "A203-未通过-15:40",
    goodSstation1: "A203-未通过-15:40",
    offBoard1: "A203-未通过-15:40",
    installEquipment: "A203-未通过-15:40",
    unloading: "A203-未通过-15:40",
    offBoard2: "A203-未通过-15:40",
    goodSstation2: "A203-未通过-15:40",
    extract: "A203-未通过-15:40",
  },
  {
    id: 2,
    fightNo: "CA1001",
    containerNo: "DOU2424U2",
    goodsNo: "56888829",
    dwon1: "Y",
    return: "Y",
    receipt: "A203-未通过-15:40",
    securityCheck: "A203-未通过-15:40",
    tally: "A203-未通过-15:40",
    dwon2: "A203-未通过-15:40",
    waitingArea: "A203-未通过-15:40",
    goodSstation1: "A203-未通过-15:40",
    offBoard1: "A203-未通过-15:40",
    installEquipment: "A203-未通过-15:40",
    unloading: "A203-未通过-15:40",
    offBoard2: "A203-未通过-15:40",
    goodSstation2: "A203-未通过-15:40",
    extract: "A203-未通过-15:40",
  },
  {
    id: 3,
    fightNo: "CA1001",
    containerNo: "DOU2424U2",
    goodsNo: "56888829",
    dwon1: "Y",
    return: "Y",
    receipt: "A203-未通过-15:40",
    securityCheck: "A203-未通过-15:40",
    tally: "A203-未通过-15:40",
    dwon2: "A203-未通过-15:40",
    waitingArea: "A203-未通过-15:40",
    goodSstation1: "A203-未通过-15:40",
    offBoard1: "A203-未通过-15:40",
    installEquipment: "A203-未通过-15:40",
    unloading: "A203-未通过-15:40",
    offBoard2: "A203-未通过-15:40",
    goodSstation2: "A203-未通过-15:40",
    extract: "A203-未通过-15:40",
  },
  {
    id: 4,
    fightNo: "CA1001",
    containerNo: "DOU2424U2",
    goodsNo: "56888829",
    dwon1: "Y",
    return: "Y",
    receipt: "A203-未通过-15:40",
    securityCheck: "A203-未通过-15:40",
    tally: "A203-未通过-15:40",
    dwon2: "A203-未通过-15:40",
    waitingArea: "A203-未通过-15:40",
    goodSstation1: "A203-未通过-15:40",
    offBoard1: "A203-未通过-15:40",
    installEquipment: "A203-未通过-15:40",
    unloading: "A203-未通过-15:40",
    offBoard2: "A203-未通过-15:40",
    goodSstation2: "A203-未通过-15:40",
    extract: "A203-未通过-15:40",
  },
];
const state = reactive({
  dialogVisible: false,
  waybillTableHeader: [
    { label: "航班号", key: "fightNo", isShow: true },
    { label: "集装器编号", key: "containerNo", isShow: true },
    { label: "货物编码", key: "goodsNo", isShow: true },
    { label: "拉下", key: "dwon1", isShow: true },
    { label: "退运", key: "return", isShow: true },
    {
      label: "收货核单",
      key: "receipt",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "安检",
      key: "securityCheck",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "理货",
      key: "tally",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "拉下",
      key: "dwon2",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "待运区",
      key: "waitingArea",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "货站交接",
      key: "goodSstation1",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "机下交接",
      key: "offBoard1",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "装机",
      key: "installEquipment",
      lableClass: "scoreColumn",
      columnClassName: "scoreColumn",
      isShow: true,
    },
    {
      label: "卸机",
      key: "unloading",
      lableClass: "scoreColumn2",
      columnClassName: "scoreColumn2",
      isShow: true,
    },
    {
      label: "机下交接",
      key: "offBoard2",
      lableClass: "scoreColumn2",
      columnClassName: "scoreColumn2",
      isShow: true,
    },
    {
      label: "货站交接",
      key: "goodSstation2",
      lableClass: "scoreColumn2",
      columnClassName: "scoreColumn2",
      isShow: true,
    },
    {
      label: "提取",
      key: "extract",
      lableClass: "scoreColumn2",
      columnClassName: "scoreColumn2",
      isShow: true,
    },
  ],
});
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
const setColumn = (data) => {
  state.waybillTableHeader = data;
  state.dialogVisible = false;
};

const closeDialog = (data) => {
  state.dialogVisible = false;
};

//点击列设置按钮
const columnSet = (data) => {
  state.dialogVisible = true;
};

const router = useRouter()
const route = useRoute()
const cellClickHandler = (row, column, cell, event) => {
  switch(column.property) {
    case 'goodsNo':
      router.push({
        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
        query: {
          goodsNo: row.goodsNo
        },
      })
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
.station {
  &-head {
    height: 144px;
    background: #410425;
    padding: 24px 30px;
    color: #ffffff;
    &-title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 40px;
    }
  }
  &-status {
    margin: 24px 0;
    line-height: 32px;
    .status {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #519f6b;
    }
  }
  &-list {
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #101116;
      margin-bottom: 10px;
      &-list {
        margin-right: 50px;
      }
    }
    &-left {
      background: #ffffff;
      padding: 24px 24px 12px 24px;
      width: 1090px;
      margin-right: 8px;
    }
    &-right {
      flex: 1;
      background: #ffffff;
      padding: 24px 24px 12px 24px;
    }
  }
  :deep &-table {
    margin-top: 16px;
    .scoreColumn {
      background: #eef3d6 !important;
    }
    .scoreColumn2 {
      background: #d6e6f3 !important;
    }
  }
}
</style>