进港航班查询实时

src/router/modules/compositeSearch.ts

@@ -57,7 +57,7 @@ export default {
       component: () =>
         import('@/views/compositeSearch/inwardFlightInquiry/index.vue'),
       meta: {
-        title: '入港航班查询',
+        title: '进港航班查询(实时)',
       },
     },
     {
@@ -67,7 +67,7 @@ export default {
       component: () =>
         import('@/views/compositeSearch/inwardFlightInquiryHis/index.vue'),
       meta: {
-        title: '入港航班查询_(历史)',
+        title: '进港航班查询(历史)',
       },
     },
   ],

src/views/compositeSearch/inwardFlightInquiry/index.vue

@@ -1,291 +1,307 @@
-<!--
 <template>
-  <div> 入港航班查询 </div>
-</template>
-
-<script lang="ts" setup></script>
--->
+  <div class="page-content">
+    <div class="search-header">
+      <div class="search-header-left">
+        <div class="search-header-left-item" v-if="searchType=='1'">
+          <a-form-item label="航班号">
+            <a-input v-model="formState.flight.flightNo" />
+          </a-form-item>
+        </div>
+        <div class="search-header-left-item" v-if="searchType=='3'">
+          <a-select ref="select" :options="timeTypeOptions" v-model="timeType" style="width: 120px"
+            @change="timeTypeChange()">
+          </a-select>
+        </div>
+        <div class="search-header-left-item" v-if="searchType!='2'">
+          <a-form-item label="航班日期">
+            <a-range-picker v-model="formState.flight.flightDate" />
+          </a-form-item>
+        </div>
+        <div class="search-header-left-item" v-if="searchType=='2'">
+          <a-form-item label="运单号">
+            <a-input v-model="formState.flight.billNo" />
+          </a-form-item>
+        </div>
+      </div>
+      <div class="search-header-right">
+        <div class="search-header-right-item">
+          <a-radio-group v-model="searchType" name="radioGroup" :options="searchTypeOption"
+            @change="searchTypeChange()">
+          </a-radio-group>
+        </div>
+        <div class="search-header-right-item">
+          <a-button type="primary" @click="search()">查询</a-button>
+        </div>
+        <div class="search-header-right-item">
+          <a-button type="primary" @click="downLoad()">导出CSV</a-button>
+        </div>
+      </div>
+    </div>
+    <div class="search-select">
+      <div class="search-select-title">
+        筛选条件
+      </div>
+      <div class="search-select-item">
+        <a-checkbox-group v-model="formState.flight.pickOrder" :options="pickOrderOptions" />
+      </div>
+      <div class="search-select-item">
+        <a-checkbox-group v-model="formState.flight.takeGoods" :options="takeGoodsOptions" />
+      </div>
+      <div class="search-select-item">
+        <a-checkbox-group v-model="formState.flight.damaged" :options="damagedOptions" />
+      </div>
+      <div class="search-select-item">
+        <a-checkbox-group v-model="formState.flight.release" :options="releaseOptions" />
+      </div>
+      <div class="search-select-item">
+        <a-checkbox-group v-model="formState.flight.partType" :options="partTypeOptions" />
+      </div>
+      <div class="search-select-item2">
+        <div>
+          <a-radio-group v-model="formState.flight.orderType" name="radioGroup" :options="orderTypeOption" @change="">
+          </a-radio-group>
+        </div>
+        <div>
+          <a-radio-group v-model="formState.flight.goodsType" name="radioGroup" :options="goodsTypeOption" @change="">
+          </a-radio-group>
+        </div>
+      </div>
+    </div>
 
-<template>
-  <div class="crud-table__wrapper">
-    <CrudTable
-      :api-obj="ApiObj"
-      :search-config="searchConfig"
-      :search-form="searchForm"
-      :columns="columns"
-      :show-details="false"
-      :show-add="false"
-      :show-edit="false"
-      :show-del="false"
-      :dialog-form-config="dialogConfig"
-      :dialog-form-rules="dialogFormRules"
-    >
-      <template #operate-cell="{ record }">
-        <a-button type="text" shape="round" @click="toDetail(record)">
-          详细流程
-        </a-button>
-      </template>
-    </CrudTable>
+    <div class="search-body">
+      <a-table :columns="columns" :data="dataSource"
+        :stripe="true" bordered>
+        <!-- <template #fwb="{ rowIndex }">
+              <a-input v-model="dataSource[rowIndex].fwb" />
+            </template> -->
+        <template #footer>合计：<span style="margin-right: 20px;">30159/894T</span><span>30159/894T</span></template>
+      </a-table>
+    </div>
   </div>
-
-  <a-modal
-    v-model:visible="dictItemDialogVisible"
-    v-bind="dialogFormDefaultSetting"
-    width="80%"
-    title="字典项管理"
-  >
-  </a-modal>
 </template>
-
 <script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router';
-import CrudTable from '@/components/crud-table/index';
-import { SYSTEM_FLAG_MAP } from '@/constant/dict';
-import { dialogFormDefaultSetting } from '@/hooks/table/table';
-import useTableOperate from '@/hooks/tableOperate';
-import { obj2propsList } from '@/utils/common';
-import useTableIndex from '@/hooks/tableIndex';
-import dayjs from 'dayjs';
-import { useUserStore } from '@/store';
-import ApiObj from './api/CurrentPageApi';
-
-const userStore = useUserStore();
-
-// 查询条件
-const searchConfig = [
-  {
-    label: '航班日期',
-    field: 'fltDate',
-    placeholder: '请选择航班日期',
-    type: 'date-picker',
-    componentConfig: {
-      'defaultValue': new Date(),
-      'allow-clear': false,
-    },
-    inline: 'false',
-  },
-  { label: '分运单号', field: 'hawbNo', placeholder: '请输入分运单号' },
-  { label: '航班号', field: 'fltNo', placeholder: '请输入航班号' },
-  {
-    field: 'mawbNo',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '已配航班', value: 0 },
-        { label: '未配航班', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'shouHuo',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '已收货', value: 0 },
-        { label: '未收货', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'tiHuo',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '已提货', value: 0 },
-        { label: '未提货', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'fangXin',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '海关放行', value: 0 },
-        { label: '未放行', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'guoQi',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '过期货', value: 0 },
-        { label: '未过期', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'liHuo',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '已理货', value: 0 },
-        { label: '未理货', value: 1 },
-      ],
-    },
-  },
-  {
-    field: 'suDu',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '普货', value: 0 },
-        { label: '快货', value: 1 },
-        { label: '邮件', value: 2 },
-        { label: '中转', value: 3 },
-      ],
-    },
-  },
-  {
-    field: 'suDu',
-    type: 'checkbox',
-    componentConfig: {
-      max: 1,
-      options: [
-        { label: '鲜活易腐', value: 0 },
-        { label: '生鲜', value: 1 },
-        { label: '危险品', value: 2 },
-        { label: '锂电池', value: 3 },
-        { label: '冷藏冷冻', value: 4 },
-        { label: '高价值', value: 5 },
-        { label: '药品', value: 6 },
-        { label: '提前报关', value: 7 },
-      ],
-    },
-  },
-];
-const router = useRouter();
-// 表格
-const columns = useTableOperate(
-  useTableIndex([
-    {
-      title: '序号',
-      type: 'CHECKBOX',
-    },
+  const timeType = ref('1');
+  const searchType = ref<string>('1');
+  const timeTypeOptions = ref<SelectProps['options']>([
     {
-      title: '代理',
-      dataIndex: 'agtNo',
+      value: '1',
+      label: '理货时间',
     },
     {
-      title: '航班信息',
-      dataIndex: 'hanBanXinXi',
-      width: 90,
+      value: '2',
+      label: '放行时间',
     },
     {
-      title: '运单信息',
-      dataIndex: 'mawbNo',
-      width: 90,
+      value: '3',
+      label: '抵港时间',
     },
+  ]);
+  const searchTypeOption = ref<RadioGroupProps['options']>([
     {
-      title: '运单件重',
-      dataIndex: 'luoDiTime',
-      width: 90,
+      value: '1',
+      label: '按航班',
     },
     {
-      title: '始发地/国家',
-      dataIndex: 'start',
-      width: 110,
+      value: '2',
+      label: '按运单',
     },
     {
-      title: '目的地/国家',
-      dataIndex: 'end',
-      width: 110,
+      value: '3',
+      label: '按时间',
     },
-    {
-      title: '收货时间',
-      dataIndex: 'shouHuoTime',
-      width: 90,
+  ]);
+
+  const pickOrderOptions = [
+    { label: '已取单', value: '1' },
+    { label: '未取单', value: '2' },
+  ];
+
+  const takeGoodsOptions = [
+    { label: '已提货', value: '1' },
+    { label: '未提货', value: '2' },
+  ];
+
+  const damagedOptions = [
+    { label: '有破损', value: '1' },
+    { label: '未破损', value: '2' },
+  ];
+
+  const releaseOptions = [
+    { label: '海关放行', value: '1' },
+    { label: '未放行', value: '2' },
+  ];
+
+  const partTypeOptions = [
+    { label: '普件', value: '1' },
+    { label: '快件', value: '2' },
+  ];
+
+  const orderTypeOption = [
+    { label: '含分运单', value: '1' },
+    { label: '只含运单(不含主单)', value: '2' },
+  ];
+
+  const goodsTypeOption = [
+    { label: '鲜活易腐', value: '1' },
+    { label: '生鲜', value: '2' },
+    { label: '危险品', value: '3' },
+    { label: '锂电池', value: '4' },
+    { label: '冷藏冷冻', value: '5' },
+    { label: '高价值', value: '6' },
+    { label: '药品', value: '7' },
+    { label: '提前报关', value: '8' },
+  ];
+
+  const formState = reactive({
+    flight: {
+      flightNo: '',
+      flightDate: '',
+      billNo: '',
+      pickOrder: [],
+      takeGoods: [],
+      damaged: [],
+      release: [],
+      partType: [],
+      orderType: '',
+      goodsType: ''
     },
+  });
+
+  const columns = [
     {
-      title: '取单时间',
-      dataIndex: 'quDanTime',
-      width: 90,
+      title: '序号',
+      dataIndex: 'order',
     },
     {
-      title: '提货时间',
-      dataIndex: 'getTime',
-      width: 90,
+      title: 'FWB信息',
+      dataIndex: 'fwb',
     },
     {
-      title: '航班落地时间',
-      dataIndex: 'luoDiTime',
-      width: 120,
+      title: '运单信息',
+      dataIndex: 'orderinfo',
     },
     {
-      title: '海关放行',
-      dataIndex: 'fangXing',
-      width: 90,
+      title: '航班号',
+      dataIndex: 'flightNo',
     },
     {
-      title: '品名',
-      dataIndex: 'productName',
-      width: 60,
+      title: '运单件数',
+      dataIndex: 'orderCount',
     },
+  ];
+
+  const dataSource = [
     {
-      title: '特殊货物代码',
-      dataIndex: 'type',
-      width: 130,
+      order: '1',
+      fwb: '正常',
+      orderinfo: '300,000.00',
+      flightNo: 'CA123',
+      orderCount: '1000',
     },
     {
-      title: '破损',
-      dataIndex: 'wtDec',
-      width: 60,
+      order: '2',
+      fwb: '缺失',
+      orderinfo: '300,000.00',
+      flightNo: 'CA123',
+      orderCount: '1000',
     },
     {
-      title: '备注',
-      dataIndex: 'remark',
-      width: 60,
-    },
-  ]),
-  { width: 150, align: 'center' }
-);
+      order: '3',
+      fwb: '正常',
+      orderinfo: '300,000.00',
+      flightNo: 'CA123',
+      orderCount: '1000',
+    }
+  ];
 
-const searchForm = ref({
-  agtNo: userStore.isSuperAdmin ? '' : userStore.userInfo?.tenant?.threeCode,
-  fltDate: dayjs().format('YYYY-MM-DD'),
-});
+  const timeTypeChange = function () {
+    console.log(timeType.value)
+  }
 
-const dialogFormRules = {
-  type: { required: true, message: '必填项不能为空' },
-  systemFlag: { required: true, message: '请选择字典类型' },
-};
+  const searchTypeChange = function () {
+    console.log(searchType.value)
+  }
 
-const dialogConfig: any = [
-  { label: '类型', field: 'type', placeholder: '请输入类型' },
-  {
-    label: '字典类型',
-    field: 'systemFlag',
-    placeholder: '请选择字典类型',
-    type: 'select',
-    options: obj2propsList(SYSTEM_FLAG_MAP, true),
-  },
-  { label: '备注', field: 'remark', placeholder: '请输入备注' },
-];
-const dictItemDialogVisible = ref(false);
+  const search = function () {
 
-const toDetail = (row: any) => {
-  router.push({
-    path: `/composite-search/waybill-follow/detail`,
-    query: {
-      mawbId: row.mawbId,
-      agtNo: row.agtNo,
-    },
-  });
-};
-</script>
+  }
+
+  const downLoad = function () {
 
-<script lang="ts">
-export default {
-  // eslint-disable-next-line vue/component-definition-name-casing
-  name: 'inwardFlightInquiry',
-};
+  }
 </script>
+<style lang="less" scoped>
+  .page-content {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+
+    .search-header {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .search-header-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .search-header-left-item {
+          margin-right: 30px;
+        }
+      }
+
+      .search-header-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .search-header-right-item {
+          margin-right: 30px;
+        }
+      }
+    }
+
+    .search-select {
+      width: 100%;
+      border: 1px solid #e5e7eb;
+      padding: 20px 0;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+
+      .search-select-title {
+        padding: 0 10px;
+        position: absolute;
+        left: 400px;
+        top: -12px;
+        background: #fff;
+        color: rgb(79, 89, 105);
+      }
+
+      .search-select-item {
+        border: 1px solid #e5e7eb;
+        width: 125px;
+        padding: 10px;
+        box-sizing: border-box;
+      }
+
+      .search-select-item2 {
+        border: 1px solid #e5e7eb;
+        padding: 10px;
+        box-sizing: border-box;
+      }
+    }
+
+  }
+  [data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
+    background-color: #fafafa;
+  }
+  [data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
+    background-color: rgb(29, 29, 29);
+  }
+</style>