添加列设置

src/views/baggageManagement/arrival/goods/index.vue

@@ -11,7 +11,8 @@
         <div class="manageTitle">货物跟踪信息</div>
         <div class="status">正常</div>
       </div>
-      <div class="station-status-search">
+      <div class="station-status-search flex-wrap">
+        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
         <Search @clear="clear" @search="search" />
       </div>
     </div>
@@ -34,13 +35,17 @@
     <div class="station-table">
       <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
+    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } 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 = [
   {
@@ -127,22 +132,22 @@ const datas1 = [
     children: ["A32", "534件", "通过", "10:25"],
   },
 ];
-const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "航班日期", key: "containerNo" },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
-  { label: "目的航站-预计降落时间", key: "dwon1" },
-  { label: "节点名称", key: "return" },
-  { label: "位置码", key: "receipt" },
-  { label: "位置描述", key: "securityCheck" },
-  { label: "处理时间", key: "tally" },
-  { label: "处理结果", key: "dwon2" },
-  { label: "数据来源", key: "waitingArea" },
-  { label: "设备ID", key: "goodSstation1" },
-  { label: "操作人", key: "offBoard1" },
-  { label: "发往位置", key: "installEquipment" },
-  { label: "发往位置描述", key: "unloading" },
-];
+const tableHeader = ref([
+  { 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", isShow: true },
+  { label: "位置描述", key: "securityCheck", isShow: true },
+  { label: "处理时间", key: "tally", isShow: true },
+  { label: "处理结果", key: "dwon2", isShow: true },
+  { label: "数据来源", key: "waitingArea", isShow: true },
+  { label: "设备ID", key: "goodSstation1", isShow: true },
+  { label: "操作人", key: "offBoard1", isShow: true },
+  { label: "发往位置", key: "installEquipment", isShow: true },
+  { label: "发往位置描述", key: "unloading", isShow: true },
+]);
 const tableData = [
   {
     id: 1,
@@ -196,12 +201,32 @@ const tableData = [
     unloading: "货站B12闸口",
   },
 ];
+const groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const dialogVisible = ref(false);
 const search = (val) => {
   ElMessage.success(`搜索成功：${val}`);
 };
 const clear = () => {
   ElMessage.success(`清除`);
 };
+const setColumn = (data) => {
+  tableHeader.value = data;
+  dialogVisible.value = false;
+};
+
+const closeDialog = (data) => {
+  dialogVisible.value = false;
+};
+
+//点击列设置按钮
+const columnSet = (data) => {
+  dialogVisible.value = true;
+};
 </script>
 
 <style lang="scss" scoped>

src/views/baggageManagement/arrival/waybill/index.vue

@@ -11,7 +11,8 @@
         <div class="manageTitle">运单跟踪信息</div>
         <div class="status">正常</div>
       </div>
-      <div class="station-status-search">
+      <div class="station-status-search flex-wrap">
+        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
         <Search @clear="clear" @search="search" />
       </div>
     </div>
@@ -52,13 +53,17 @@
     <div class="station-table">
       <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
+    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } 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 = [
   {
@@ -175,85 +180,97 @@ const datas1 = [
     children: ["A32", "534件", "通过", "10:25"],
   },
 ];
-const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "集装器编号", key: "containerNo" },
-  { label: "货物编码", key: "goodsNo" },
-  { label: "拉下", key: "dwon1" },
-  { label: "退运", key: "return" },
+const tableHeader = ref([
+  { 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: "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,
   },
   {
     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,
   },
-];
+]);
 const tableData = [
   {
     id: 1,
@@ -336,12 +353,32 @@ const tableData = [
     extract: "A203-未通过-15:40",
   },
 ];
+const groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const dialogVisible = ref(false);
 const search = (val) => {
   ElMessage.success(`搜索成功：${val}`);
 };
 const clear = () => {
   ElMessage.success(`清除`);
 };
+const setColumn = (data) => {
+  tableHeader.value = data;
+  dialogVisible.value = false;
+};
+
+const closeDialog = (data) => {
+  dialogVisible.value = false;
+};
+
+//点击列设置按钮
+const columnSet = (data) => {
+  dialogVisible.value = true;
+};
 </script>
 
 <style lang="scss" scoped>

src/views/baggageManagement/departure/goods/index.vue

@@ -12,7 +12,10 @@
         <div class="status">正常</div>
       </div>
       <div class="station-status-search">
-        <Search @clear="clear" @search="search" />
+        <div class="station-status-search flex-wrap">
+          <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
+          <Search @clear="clear" @search="search" />
+        </div>
       </div>
     </div>
     <div class="station-list flex-wrap">
@@ -33,13 +36,17 @@
     <div class="station-table">
       <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
+    <tableColumnSet :dialogVisible="cloumnFlag" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } 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 = [
   {
@@ -126,23 +133,23 @@ const datas1 = [
     children: ["A32", "534件", "通过", "10:25"],
   },
 ];
-const tableHeader = [
-  { label: "航班号", key: "fightNo" },
-  { label: "航班日期", key: "containerNo" },
-  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
-  { label: "目的航站-预计降落时间", key: "dwon1" },
-  { label: "节点名称", key: "return" },
-  { label: "位置码", key: "receipt" },
-  { label: "位置描述", key: "securityCheck" },
-  { label: "处理时间", key: "tally" },
-  { label: "处理结果", key: "dwon2" },
-  { label: "数据来源", key: "waitingArea" },
-  { label: "设备ID", key: "goodSstation1" },
-  { label: "操作人", key: "offBoard1" },
-  { label: "发往位置", key: "installEquipment" },
-  { label: "发往位置描述", key: "unloading" },
-  { label: "集装器编号", key: "demo" },
-];
+const tableHeader = ref([
+  { 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", isShow: true },
+  { label: "位置描述", key: "securityCheck", isShow: true },
+  { label: "处理时间", key: "tally", isShow: true },
+  { label: "处理结果", key: "dwon2", isShow: true },
+  { label: "数据来源", key: "waitingArea", isShow: true },
+  { label: "设备ID", key: "goodSstation1", isShow: true },
+  { label: "操作人", key: "offBoard1", isShow: true },
+  { label: "发往位置", key: "installEquipment", isShow: true },
+  { label: "发往位置描述", key: "unloading", isShow: true },
+  { label: "集装器编号", key: "demo", isShow: true },
+]);
 const tableData = [
   {
     id: 1,
@@ -199,12 +206,30 @@ const tableData = [
     demo: "DOU2329U2",
   },
 ];
+const groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const cloumnFlag = ref(false);
 const search = (val) => {
   ElMessage.success(`搜索成功：${val}`);
 };
 const clear = () => {
   ElMessage.success(`清除`);
 };
+const columnSet = () => {
+  cloumnFlag.value = true;
+};
+const setColumn = (data) => {
+  tableHeader.value = data;
+  cloumnFlag.value = false;
+};
+
+const closeDialog = (data) => {
+  cloumnFlag.value = false;
+};
 </script>
 
 <style lang="scss" scoped>