SZYGM1.0/src/views/dataQuery/freightInquiry/index.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader
        :is-Search="true"
        :is-statuser="true"
        :is-Show="true"
        :is-Time="true"
        search-permission="goods_query_search_button"
        column-set-permission="goods_query_column_settings_button"
        @showForm="showForm"
        @searchForm="searchForm"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">货物查询</div>
          </div>
        </template></Minheader
      >
      <div class="app-containers">
        <DataTable
          :tableHeader="tableCols"
          :tableData="tableData"
          :tableProperty="{ rowKey: 'ID' }"
        />
      </div>
      <TableColumnSet
        :dialogVisible="dialogVisible"
        :columnList="tableCols"
        @closeDialog="closeDialog"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import TableColumnSet from "@/components/tableColumnSet/index.vue";
import { Query, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
const page = ref<number>(0); //分页参数
const dataContent = ref<object>({});
const noMore = ref<Boolean>(false);
const rowTitle = ref<String>("");
const tableCols = ref([]); //表头数据
const serviceId = ref<String>("");
const tableObj = ref({}); //增删改数据缓存
const dialogVisible = ref<Boolean>(false); //列设置弹窗开关
//列表
const tableData = ref([]);
//表头
const state = reactive({
  list: [
    { label: "起飞航站", key: "name" },
    { label: "目的航站", key: "china" },
    { label: "航班号", key: "englin" },
    { label: "航班日期", key: "two" },
    { label: "直达/中转", key: "three" },
    { label: "货物牌号", key: "text" },
    { label: "特殊货物类型", key: "text1" },
    { label: "位置（节点）", key: "text2" },
    { label: "状态（节点）", key: "text3" },
    { label: "运单号", key: "text4" },
    { label: "值机号", key: "text5" },
    { label: "安检序号", key: "text6" },
    { label: "货代", key: "text7" },
    { label: "货代等级", key: "text8" },
    { label: "批次号", key: "text9" },
  ],
  listLoading: true,
});
//列设置
const showForm = () => {
  dialogVisible.value = true;
};
//列设置取消
const closeDialog = () => {
  dialogVisible.value = false;
};
//获取表格数据
const getQuery = async (data) => {
  try {
    const { code, returnData } = await Query({
      id: DATACONTENT_ID.goodsTabId,
      needPage: 1,
      dataContent: data,
    });
    if (code === "0") {
      if (returnData.listValues.length === 0) {
        page.value--;
        noMore.value = true;
      }
      const titleColumn = returnData.columnSet.find(
        (item) => item.needShow === 1
      );
      if (titleColumn) {
        rowTitle.value = titleColumn.columnName;
      }
      tableData.value.push(...returnData.listValues);
      tableCols.value = returnData.columnSet;
      tableCols.value.forEach((element) => {
        element.label = element.columnLabel;
        element.key = element.columnName;
        // if (element.columnName === "queryTemplate") {
        //   element.width = "300px";
        // }
      });
      serviceId.value = returnData.submitID;
    } else {
      page.value--;
    }
  } catch (error) {
    page.value--;
  }
};
const searchForm = (data) => {
  tableData.value = [];
  getQuery(data);
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
.app-containers {
  height: calc(100vh - 180px);
}
</style>