列设置

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    "johnsoncodehk.volar",
-    "johnsoncodehk.vscode-typescript-vue-plugin",
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]

src/components/dialog/index.vue

@@ -35,7 +35,12 @@
         </template>
         <template v-else>
           <div class="airportInfoDialog dialog-public-background">
-            <div class="title">{{ props.msgTitle }}</div>
+            <div class="title">
+              <span>{{ props.msgTitle }}</span>
+              <el-icon class="icon-close" @click="resetForm">
+                <Close style="width: 1em; height: 1em;" />
+              </el-icon>
+            </div>
             <div class="content">
               <slot />
             </div>
@@ -59,6 +64,7 @@
 </template>
 
 <script setup lang="ts">
+import { Close } from '@element-plus/icons-vue'
 const props = defineProps({
   // 弹框开关
   flag: {

src/router/routes/routes-file-six.ts

@@ -4,15 +4,15 @@ const HomeRoutes = {
   path: "/baggageManagement",
   component: Layout,
   name: "baggageManagement",
-  redirect: "/baggageManagement/departureC",
+  redirect: "/baggageManagement/departure",
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
   meta: { title: "综合可视化", elSvgIcon: "Fold" },
   children: [
     {
-      path: "/baggageManagement/departureC",
-      name: "DepartureC",
+      path: "/baggageManagement/departure",
+      name: "Departure",
       meta: { title: "出港相关", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departureC/index.vue"),
+      component: () => import("@/views/baggageManagement/departure/index.vue"),
     },
     {
       path: "/baggageManagement/arrival",

src/styles/index.scss

@@ -51,6 +51,14 @@
       margin-bottom: 24px;
       width: 100%;
       line-height: 15px;
+      display: flex;
+      justify-content: space-between;
+      .icon-close {
+        font-size: 16px;
+        color: #ffffff;
+        margin-right: 16px;
+        cursor: pointer;
+      }
     }
     .foot {
       height: 56px;

src/views/baggageManagement/arrival/index.vue

@@ -1,11 +1,5 @@
 <template>
   <div></div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
-});
-</script>
+<script lang="ts" setup></script>
 <style lang="scss" scoped></style>

src/views/baggageManagement/components/ColumnSet/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-button
+    :icon="Tools"
+    color="#ac014d"
+    class="column-set-button"
+    @click="dialogShow"
+  />
+  <Dialog
+    :flag="dialogFlag"
+    width="1080px"
+    msg-title="列设置"
+    @submit-form="submitHandler"
+    @reset-form="dialogHide"
+  >
+    <div class="dialog-content">
+      <div v-for="columnGroup in columnGroups" :key="columnGroup.title">
+        <div class="group-title">{{ columnGroup.title }}</div>
+        <el-checkbox-group
+          v-model="checkedGroups[columnGroup.title]"
+          size="large"
+        >
+          <el-checkbox
+            v-for="tableColumn in columnGroup.columns"
+            :key="tableColumn.columnProp"
+            :label="tableColumn.columnProp"
+            >{{ tableColumn.columnName }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { Tools } from '@element-plus/icons-vue'
+import Dialog from '@/components/dialog/index.vue'
+
+export interface tableColumn {
+  columnName: string
+  columnProp: string
+  groupTitle: string
+}
+export interface tableColumnGroup {
+  title: string
+  columns: tableColumn[]
+}
+
+const props = defineProps({
+  tableColumns: {
+    type: Array<tableColumn>,
+    required: true,
+  }
+})
+
+const emits = defineEmits(['checkedSubmit'])
+
+const dialogFlag = ref(false)
+const dialogShow = () => {
+  dialogFlag.value = true
+}
+const dialogHide = () => {
+  dialogFlag.value = false
+}
+
+const checkedGroups = computed(() => {
+  const groups = {}
+  props.tableColumns.forEach(({ columnProp, groupTitle }) => {
+    if (groups[groupTitle] && groups[groupTitle] instanceof Array) {
+      groups[groupTitle].push(columnProp)
+    } else {
+      groups[groupTitle] = [columnProp]
+    }
+  })
+  return groups
+})
+const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnGroup[], curr) => {
+  const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
+  if (theGroup) {
+    theGroup.columns.push(curr)
+  } else {
+    pre.push({
+      title: curr.groupTitle,
+      columns: [curr]
+    })
+  }
+  return pre
+}, []))
+const checkedColumnProps = computed<string[]>(() => Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat())
+
+const submitHandler = () => {
+  emits('checkedSubmit', checkedColumnProps.value)
+  dialogHide()
+}
+</script>
+
+<style scoped lang="scss">
+.column-set-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.dialog-content {
+  padding: 0 22px;
+
+  .group-title {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 22px;
+  }
+}
+</style>

src/views/baggageManagement/departure/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="airport-view">
+    <ColumnSet :table-columns="tableColumns" @checked-submit="columnChecked" />
+  </div>
+</template>
+<script lang="ts" setup>
+import ColumnSet from '../components/ColumnSet/index.vue'
+import useTableColumns from '../hooks/useTableColumns'
+import useTableData from '../hooks/useTableData'
+
+const { tableColumns, columnChecked, filteredColumns } = useTableColumns()
+
+const { tableData } = useTableData()
+</script>
+<style lang="scss" scoped></style>

src/views/baggageManagement/departureC/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
-});
-</script>
-<style lang="scss" scoped></style>

src/views/baggageManagement/hooks/useTableColumns.ts

@@ -0,0 +1,31 @@
+import { tableColumn } from '../components/ColumnSet/index.vue'
+export default function useTableColumns() {
+  const tableColumns = ref<tableColumn[]>([])
+  let filterColumnProps: string[] = []
+  const filteredColumns = computed(() =>
+    tableColumns.value.filter(({ columnProp }) =>
+      filterColumnProps.includes(columnProp)
+    )
+  )
+  const getTableColumns = () => {
+    tableColumns.value = [
+      {
+        columnName: '航班号',
+        columnProp: 'flightNO',
+        groupTitle: '航班相关',
+      },
+    ]
+  }
+  const columnChecked = checkedColumnProps => {
+    filterColumnProps = checkedColumnProps
+  }
+  onMounted(() => {
+    getTableColumns()
+  })
+  
+  return {
+    tableColumns,
+    columnChecked,
+    filteredColumns
+  }
+}

src/views/baggageManagement/hooks/useTableData.ts

@@ -0,0 +1,12 @@
+export default function useTableData() {
+  const tableData = ref<any[]>([])
+  const getTableData = () => {
+    tableData.value = []
+  }
+  onMounted(() => {
+    getTableData()
+  })
+  return {
+    tableData
+  }
+}