机场-航站楼-位置

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

@@ -26,6 +26,22 @@ const HomeRoutes = {
       meta: { title: "机场信息维护", elSvgIcon: "Fold", icon: "table" },
       component: () => import("@/views/BasicsData/airportInfo/index.vue"),
     },
+    {
+      path: "/BasicsData/airportInfoChild",
+      name: "AirportInfoChild",
+      hidden: true,
+      meta: { title: "航站楼设置", elSvgIcon: "Fold", icon: "table" },
+      component: () =>
+        import("@/views/BasicsData/airportInfo/airportInfoChild/index.vue"),
+    },
+    {
+      path: "/BasicsData/positionSetting",
+      name: "PositionSetting",
+      hidden: true,
+      meta: { title: "位置设置", elSvgIcon: "Fold", icon: "table" },
+      component: () =>
+        import("@/views/BasicsData/airportInfo/positionSetting/index.vue"),
+    },
     {
       path: "/BasicsData/deployNode",
       name: "DeployNode",

src/views/BasicsData/airportInfo/airportInfoChild/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="airportInfo">
+    <div class="wrap">
+      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">航站楼设置</div>
+          </div>
+        </template></Minheader
+      >
+      <DataTable
+        :tableBtnGroup="tableBtnGroup"
+        @editDialog="editDialog"
+        @eleDialog="eleDialog"
+        @aloneDialog="aloneDialog"
+      />
+      <Dialog
+        :flag="flag"
+        :type="type"
+        :msgTitle="msgTitle"
+        @resetForm="resetForm"
+        @delRest="delRest"
+      >
+        <div class="diacont">
+          <el-form :model="tableForm">
+            <el-row :gutter="24">
+              <el-col>
+                <el-form-item label="ID">
+                  <el-input v-model="tableForm.name" placeholder="请输入ID" />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航站名称">
+                  <el-input
+                    v-model="tableForm.china"
+                    placeholder="请输入航站名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="机场三字码">
+                  <el-input
+                    v-model="tableForm.englin"
+                    placeholder="请输入机场三字码"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import DataTable from "@/views/table/index.vue";
+import Minheader from "@/components/minheader/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const router = useRouter();
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增航站楼"); //弹窗标题
+const tableColsCopys = reactive<Object>({}); //弹窗
+const tableBtnGroup = ref<Array>([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "位置设置",
+    className: "editBtn",
+    param: 4,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]); //单独的编辑
+const tableForm = reactive<Object>({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
+//新增
+const addForm = () => {
+  msgTitle.value = "新增航站楼";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+};
+//编辑
+const editDialog = () => {
+  msgTitle.value = "编辑航站楼";
+  flag.value = true;
+  type.value = "";
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除航站楼";
+  flag.value = true;
+  type.value = "del";
+};
+//删除取消
+const delRest = () => {
+  flag.value = false;
+};
+//位置跳转
+const aloneDialog = () => {
+  router.push({ path: "/BasicsData/positionSetting" });
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 100px;
+}
+</style>

src/views/BasicsData/airportInfo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="airportInfoDetails">
-    <Minheader :is-auth="true" :is-statuser="true">
+    <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
       <template #header>
         <div class="status flex-wrap">
           <div class="manageTitle">机场信息维护</div>
@@ -13,20 +13,149 @@
           <div class="tree_left">
             <el-scrollbar style="height: 100%">
               <div class="corporate">{{ company }}</div>
-              <el-tree :data="data2"> </el-tree>
+              <el-tree :data="data2" accordion @node-click="handleNodeClick">
+              </el-tree>
             </el-scrollbar>
           </div>
         </el-col>
         <el-col :span="18">
-          <DataTable />
+          <DataTable
+            :tableBtnGroup="tableBtnGroup"
+            @editDialog="editDialog"
+            @eleDialog="eleDialog"
+            @aloneDialog="aloneDialog"
+          />
         </el-col>
       </el-row>
     </div>
+    <Dialog
+      width="600px"
+      :flag="flag"
+      :type="type"
+      :msgTitle="msgTitle"
+      @resetForm="resetForm"
+      @delRest="delRest"
+    >
+      <div class="diacont">
+        <el-form :model="tableForm">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="机场名称">
+                <el-input
+                  v-model="tableForm.name"
+                  placeholder="请输入机场名称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="三字码">
+                <el-input
+                  v-model="tableForm.china"
+                  placeholder="请输入三字码"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="四字码">
+                <el-input
+                  v-model="tableForm.china"
+                  placeholder="请输入四字码"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="中文简称">
+                <el-input
+                  v-model="tableForm.china"
+                  placeholder="请输入中文简称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="英文简称">
+                <el-input
+                  v-model="tableForm.china"
+                  placeholder="请输入英文简称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="全称">
+                <el-input v-model="tableForm.china" placeholder="请输入全称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="时区">
+                <!-- <el-input v-model="tableForm.china" /> -->
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForm.china"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择时区"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="描述">
+                <el-input
+                  v-model="tableForm.text"
+                  placeholder="请输入机场三字码"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </Dialog>
   </div>
 </template>
 <script setup lang="ts">
 import Minheader from "@/components/minheader/index.vue";
 import DataTable from "@/views/table/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const router = useRouter();
+const tableBtnGroup = ref<Array>([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "航站楼设置",
+    className: "editBtn",
+    param: 4,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]); //单独的编辑
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增机场信息维护"); //弹窗标题
+const tableOptionser = ref<Array>([]); //弹窗下拉
+const tableColsCopys = reactive<Object>({}); //弹窗
+const tableForm = reactive<Object>({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
 const company = ref("所属公司");
 const data2 = reactive([
   {
@@ -78,8 +207,43 @@ const data2 = reactive([
     ],
   },
 ]);
+//新增
+const addForm = () => {
+  msgTitle.value = "新增机场信息维护";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+};
+//编辑
+const editDialog = () => {
+  msgTitle.value = "编辑机场信息维护";
+  flag.value = true;
+  type.value = "";
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除机场信息维护";
+  flag.value = true;
+  type.value = "del";
+};
+//删除取消
+const delRest = () => {
+  flag.value = false;
+};
+//航站楼跳转
+const aloneDialog = () => {
+  router.push({ path: "/BasicsData/airportInfoChild" });
+};
+//点击树事件
+const handleNodeClick = () => {};
 </script>
 <style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 80px;
+}
 .airportInfoDetails {
   .airportInfoDetails-head {
     padding: 32px 40px 0px 32px;

src/views/BasicsData/airportInfo/positionSetting/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="airportInfo">
+    <div class="wrap">
+      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">位置设置</div>
+          </div>
+        </template></Minheader
+      >
+      <DataTable @editDialog="editDialog" @eleDialog="eleDialog" />
+      <Dialog
+        :flag="flag"
+        :type="type"
+        :msgTitle="msgTitle"
+        @resetForm="resetForm"
+        @delRest="delRest"
+      >
+        <div class="diacont">
+          <el-form :model="tableForm">
+            <el-row :gutter="24">
+              <el-col>
+                <el-form-item label="位置名称">
+                  <el-input
+                    v-model="tableForm.name"
+                    placeholder="请输入位置名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="位置所属节点">
+                  <el-input
+                    v-model="tableForm.china"
+                    placeholder="请输入位置所属节点"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="位置标识">
+                  <el-input
+                    v-model="tableForm.englin"
+                    placeholder="请输入位置标识"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="位置编码">
+                  <el-input
+                    v-model="tableForm.two"
+                    placeholder="请输入位置编码"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="位置描述">
+                  <el-input
+                    type="textarea"
+                    v-model="tableForm.text"
+                    placeholder="请输入位置描述"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import DataTable from "@/views/table/index.vue";
+import Minheader from "@/components/minheader/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增位置设置"); //弹窗标题
+const tableColsCopys = reactive<Object>({}); //弹窗
+const tableForm = reactive<Object>({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+}); //弹窗内容
+//新增
+const addForm = () => {
+  msgTitle.value = "新增位置";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+};
+//编辑
+const editDialog = () => {
+  msgTitle.value = "编辑位置";
+  flag.value = true;
+  type.value = "";
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除位置";
+  flag.value = true;
+  type.value = "del";
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 100px;
+}
+</style>

src/views/table/index.vue

@@ -14,7 +14,24 @@
 <script setup lang="ts">
 import tableTemp from "@/components/tableTemp/index.vue";
 import { ref } from "vue";
-
+const props = defineProps({
+  //单独的编辑新增
+  tableBtnGroup: {
+    type: Array,
+    default: () => [
+      {
+        name: "编辑",
+        className: "editBtn",
+        param: 2,
+      },
+      {
+        name: "删除",
+        className: "delBtn",
+        param: 3,
+      },
+    ],
+  },
+});
 const state = reactive({
   list: [
     { label: "序号", key: "ID", sortable: true },
@@ -143,25 +160,30 @@ const tableData = ref([
     rowClass: "warning-row",
   },
 ]);
-const tableBtnGroup = ref([
-  {
-    name: "编辑",
-    className: "editBtn",
-    param: 2,
-  },
-  {
-    name: "删除",
-    className: "delBtn",
-    param: 3,
-  },
-]);
-const emits = defineEmits(["editDialog", "eleDialog"]);
+// if () {
+
+// }
+// const tableBtnGroup = ref([
+//   {
+//     name: "编辑",
+//     className: "editBtn",
+//     param: 2,
+//   },
+//   {
+//     name: "删除",
+//     className: "delBtn",
+//     param: 3,
+//   },
+// ]);
+const emits = defineEmits(["editDialog", "eleDialog", "aloneDialog"]);
 //编辑-删除
 const btnClick = (row, index, param) => {
   if (param === 2) {
     emits("editDialog");
   } else if (param === 3) {
     emits("eleDialog");
+  } else if (param === 4) {
+    emits("aloneDialog"); //单独项
   }
   console.log(row);
   console.log(index);