SZYGM1.0/src/views/BasicsData/airportInfo/index.vue

<template>
  <div class="airportInfoDetails">
    <Minheader :is-auth="true" :is-statuser="true" powerData="new_airport_button" @addForm="addForm">
      <template #header>
        <div class="status flex-wrap">
          <div class="manageTitle">机场信息维护</div>
        </div>
      </template>
    </Minheader>
    <div class="airportInfo-content">
      <el-row :gutter="24">
        <el-col :span="6" style="background: #fff">
          <div class="tree_left">
            <el-scrollbar style="height: 100%">
              <div class="corporate">{{ company }}</div>
              <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
              </el-tree>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="app-containers">
            <DataTable :btnGroupWidth="btnGroupWidth" :tableHeader="tableCols" :tableData="tableData" :tableBtnGroup="tableBtnGroup" :tableProperty="{ rowKey: 'ID' }" @btnClick="btnClick" />
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog width="600px" :flag="flag" :type="type" :msgTitle="msgTitle" :delName="tableForm.airportName" @resetForm="resetForm" @delRest="delRest" @submitForm="submitForm" @delRemove="delRemove">
      <div class="diacont">
        <el-form :model="tableForm" :rules="formRules" ref="airportInfoForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="机场ID" size="default" prop="airportID" :rules="formRules.isNotNull">
                <el-input v-model="tableForm.airportID" placeholder="请输入机场ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中文全称" size="default" prop="airportName" :rules="formRules.isNotNull">
                <el-input v-model="tableForm.airportName" placeholder="请输入机场名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中文简称" size="default" prop="abbreviation" :rules="formRules.isNotNull">
                <el-input v-model="tableForm.abbreviation" placeholder="请输入中文简称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文简称" size="default">
                <el-input v-model="tableForm.englishAbbreviation" placeholder="请输入英文简称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文全称" size="default">
                <el-input v-model="tableForm.fullName" placeholder="请输入英文全称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三字码" size="default" prop="IATACode" :rules="formRules.isNotNull">
                <el-input v-model="tableForm.IATACode" placeholder="请输入三字码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="四字码" size="default" prop="ICAOCode" :rules="formRules.isNotNull">
                <el-input v-model="tableForm.ICAOCode" placeholder="请输入四字码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时区" size="default" prop="airportTimeZone" :rules="formRules.isNotNull">
                <!-- <el-input v-model="tableForm.china" /> -->
                <el-select style="width: 100%" v-model="tableForm.airportTimeZone" class="input-shadow" 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="公司名称" size="default" prop="companyName" :rules="formRules.isNotNull">
                <el-input disabled v-model="tableForm.companyName" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司ID" size="default" prop="companyID" :rules="formRules.isNotNull">
                <el-input disabled v-model="tableForm.companyID" placeholder="请输入公司ID" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" size="default">
                <el-input type="textarea" v-model="tableForm.remarks" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { translateDataToTreeAll } from "@/utils/validate";
import { Query, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
const formRules = useElement().formRules;
const router = useRouter();
const tableBtnGroup = ref<any>([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
    is: "airport_editor_button",
  },
  {
    name: "区域设置",
    className: "editBtn",
    param: 4,
    is: "terminal_setting_page",
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
    is: "airport_deletion_button",
  },
]); //单独的编辑
const page = ref<number>(0); //分页参数
const dataContent = ref<object>({});
const noMore = ref<boolean>(false);
const rowTitle = ref<string>("");
const tableCols = ref<any>([]); //表头数据
const serviceId = ref<any>("");
const tableObj = ref({}); //增删改数据缓存
const defaultProps = ref({
  children: "children",
  label: "companyName",
});
const companyID = ref(""); //机场id
const btnGroupWidth = ref<string>("");
const flag = ref<boolean>(false); //弹窗开关
const type = ref<string>(""); //判断是否删除
const msgTitle = ref<string>("新增机场信息维护"); //弹窗标题
const tableOptionser = ref<any>([
  {
    k: "UTC",
    v: "1",
  },
  {
    k: "UTC+1",
    v: "+1",
  },
  {
    k: "UTC+2",
    v: "+2",
  },
  {
    k: "UTC+3",
    v: "+3",
  },
  {
    k: "UTC+4",
    v: "+4",
  },
  {
    k: "UTC+5",
    v: "+5",
  },
  {
    k: "UTC+6",
    v: "+6",
  },
  {
    k: "UTC+7",
    v: "+7",
  },
  {
    k: "UTC+8",
    v: "+8",
  },
  {
    k: "UTC+9",
    v: "+9",
  },
  {
    k: "UTC+10",
    v: "+10",
  },
  {
    k: "UTC+11",
    v: "+11",
  },
  {
    k: "UTC-1",
    v: "-1",
  },
  {
    k: "UTC-2",
    v: "-2",
  },
  {
    k: "UTC-3",
    v: "-3",
  },
  {
    k: "UTC-4",
    v: "-4",
  },
  {
    k: "UTC-5",
    v: "-5",
  },
  {
    k: "UTC-6",
    v: "-6",
  },
  {
    k: "UTC-7",
    v: "-7",
  },
  {
    k: "UTC-8",
    v: "-8",
  },
  {
    k: "UTC-9",
    v: "-9",
  },
  {
    k: "UTC-10",
    v: "-10",
  },
  {
    k: "UTC-11",
    v: "-11",
  },
]); //弹窗下拉
const tableColsCopys = reactive<Object>({}); //弹窗
const tableForm = reactive<any>({
  airportID: "",
  airportName: "",
  IATACode: "",
  ICAOCode: "",
  abbreviation: "",
  englishAbbreviation: "",
  fullName: "",
  companyID: "",
  airportTimeZone: "",
  companyName: "",
  remarks: "",
  event: "",
}); //弹窗内容
const tableColumnProperty = reactive({
  width: "120px",
  fixed: "",
  sortable: false,
  showOverflowTooltip: false,
  align: "center",
  headerAlign: "",
}); //弹窗内容
//列表
const tableData = ref<any>([]);
//表头
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" },
  ],
  listLoading: true,
});
const company = ref("所属公司");
const data = ref([]);
//新增
const addForm = () => {
  msgTitle.value = "新增机场信息维护";
  flag.value = true;
  type.value = "";
  tableForm.event = 1;
  tableForm.companyID = companyID;
};
//取消
const resetForm = () => {
  airportInfoForm.value?.resetFields();
  flag.value = false;
  // tableForm.airportID = "";
  // tableForm.airportName = "";
  // tableForm.IATACode = "";
  // tableForm.ICAOCode = "";
  // tableForm.abbreviation = "";
  // tableForm.englishAbbreviation = "";
  // tableForm.fullName = "";
  // tableForm.companyID = "";
  // tableForm.airportTimeZone = "";
  // tableForm.companyName = "";
  // tableForm.event = "";
  // tableForm.remarks = "";
};
//编辑
const editDialog = (data) => {
  msgTitle.value = "编辑机场信息维护";
  flag.value = true;
  type.value = "";
  tableForm.name = data.name;
  tableForm.china = data.china;
  tableForm.englin = data.englin;
  tableForm.two = data.two;
  tableForm.three = data.three;
  tableForm.text = data.text;
  tableForm.text1 = data.text1;
  tableForm.text2 = data.text2;
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除机场信息维护";
  flag.value = true;
  type.value = "del";
};
//删除取消
const delRest = () => {
  flag.value = false;
};
//区域跳转
const aloneDialog = () => {
  router.push({ path: "/BasicsData/airportInfoChild" });
};
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    msgTitle.value = "编辑机场信息维护";
    flag.value = true;
    type.value = "";
    for (const key in index) {
      tableForm[key] = index[key];
    }
    tableForm.event = 2;
  } else if (param === 3) {
    msgTitle.value = "删除机场信息维护";
    flag.value = true;
    type.value = "del";
    tableForm.event = 3;
    for (const key in index) {
      tableForm[key] = index[key];
    }
    if (tableForm.companyName != undefined) {
      delete tableForm.companyName;
    }
  } else if (param === 4) {
    Cookies.set("IATACode", index.IATACode);
    Cookies.set("abbreviation", index.abbreviation);
    router.push({
      path: "/BasicsData/airportInfoChild",
      query: {
        IATACode: index.IATACode,
        abbreviation: index.abbreviation,
      },
    });
  }
};
//点击树事件
const handleNodeClick = (data) => {
  // console.log(data);
  company.value = data.companyName;
  tableForm.companyName = data.companyName;
  companyID.value = data.companyID;
  tableData.value = [];
  page.value = 0;
  getQuery();
};
//获取表格数据
const getQuery = async () => {
  try {
    const { code, returnData } = await Query({
      id: DATACONTENT_ID.airportTableId,
      needPage: ++page.value,
      dataContent: [JSON.stringify(companyID.value)],
    });
    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);
      if (returnData.columnSet) {
        btnGroupWidth.value = "300px";
      } else {
        btnGroupWidth.value = "";
      }
      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 getAirlines = async () => {
  try {
    const res = await Query({
      id: DATACONTENT_ID.airportTreeId,
      dataContent: [],
    });
    if (res.code === "0") {
      let arr: any = [];
      arr = translateDataToTreeAll(
        res.returnData.listValues,
        "parentID",
        "companyID"
      );
      data.value = arr;
      companyID.value = data.value[0].companyID;
      company.value = data.value[0].companyName;
      tableForm.companyName = data.value[0].companyName;
      getQuery();
      // if (!company.length) {
      //   company.value = arr[0].companyID;
      //   company.value = arr[0].companyName;
      // }
    } else {
      // this.$message.error(res.message ?? "失败");
    }
  } catch (error) {
    // this.$message.error("失败");
  }
};
//确认提交
const airportInfoForm: any = ref(null);
const submitForm = () => {
  airportInfoForm.value.validate((valid: any) => {
    if (valid) {
      generalDataReception(tableForm);
    } else {
      return false;
    }
  });
};
const resetTable = () => {
  page.value = 0;
  noMore.value = false;
  tableData.value = [];
};
//新增-编辑-删除
const generalDataReception = async (data) => {
  try {
    data = {
      ...data,
    };
    const { code } = await GeneralDataReception({
      serviceId: serviceId.value,
      dataContent: JSON.stringify(data),
    });
    if (code == 0) {
      ElMessage.success(`操作成功`);
      // this.$message.success("操作成功");
      resetTable();
      getQuery();
      resetForm();
      flag.value = false;
      // rmFlag.value = false;
      tableObj.value = {};
      // this.$router.go(0);
    } else {
      ElMessage.error(`操作失败`);
      // this.$message.error("操作失败");
      // this.flag = false;
      // this.rmFlag = false;
      tableObj.value = {};
      resetForm();
    }
  } catch (error) {
    flag.value = false;
    //  rmFlag.value = false;
    tableObj.value = {};
    resetForm();
  }
};
const delRemove = () => {
  tableForm.event = 3;
  generalDataReception(tableForm);
};

getAirlines();
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 80px;
}
.airportInfoDetails {
  .airportInfoDetails-head {
    padding: 32px 40px 0px 32px;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .airportInfoDetails-head-content {
      margin-top: 30px;
      .el-input {
        min-width: 240px;
      }
      .el-form--inline .el-form-item {
        margin-bottom: 24px;
        margin-right: 50px;
      }
    }
  }
  .corporate {
    margin-top: 24px;
    margin-left: 24px;
    margin-bottom: 23px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
  }
  .log {
    width: 26px;
    height: 26px;
    background: #eb2f3b;
    border-radius: 50%;
    margin-right: 15px;
    background: url("../../../../assets/index/ic_close_hint.png") no-repeat;
    background-size: 100% 100%;
  }
  .airportInfoDialog {
    ::v-deep .el-form-item__content {
      margin-left: 120px !important;
    }
    ::v-deep .el-form-item__label {
      width: 120px !important;
    }
    ::v-deep .el-form-item {
      margin-bottom: 20px;
    }
  }
  .airportInfo-content {
    margin-top: 30px;
    img {
      margin: 0 auto;
      margin-top: 10%;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      -webkit-box-orient: vertical;
      text-align: center;
    }
    .grid-content {
      padding: 24px;
      margin-bottom: 24px;
      height: 144px;
      .edit_log {
        position: relative;
        // top: -2px;
      }
      .icon {
        cursor: pointer;
      }
      .desc {
        margin-top: 60px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #afb4bf;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  ::v-deep .el-input__suffix {
    right: 30px;
  }
  ::v-deep .el-input__inner {
    height: 32px;
    border-radius: 2px;
  }
  .flxdes {
    padding: 10px 0px 10px 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    height: 36px;
    background: #eb2f3b;
    color: #ffffff;
    margin-bottom: 46px;
    width: 100%;
  }
  .airportInfoDetails-content {
    height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 32px 0x 0 0;
    // background: #ffffff;
    // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    // margin-top: 24px;
    .terminal-info {
      margin-top: 20px;
      margin-bottom: 20px;
      .terminal-info-add {
        width: 216px;
        height: 120px;
        background: #f5f7fa;
        border: 1px dashed #d7dae3;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          font-size: 31px;
          color: #d7dae3;
        }
      }
      .terminal-info-team {
        .terminal-info-list {
          width: 216px;
          height: 120px;
          margin-bottom: 24px;
          background: #f5f7fa;
          box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
          border-radius: 8px;
          padding: 24px;
          position: relative;
          margin-right: 24px;
          cursor: pointer;
          .name {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #303133;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .edit {
            margin-top: 32px;
            .round {
              display: inline-block;
              width: 28px;
              height: 28px;
              background: #6e82a7;
              border-radius: 50%;
              line-height: 28px;
              text-align: center;
              box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              right: 0;
              i {
                color: #fff;
              }
            }
          }
          .close {
            width: 24px;
            height: 24px;
            background: #000000;
            opacity: 0.8;
            border-radius: 50%;
            position: absolute;
            right: -12px;
            line-height: 24px;
            text-align: center;
            top: -12px;
            i {
              color: #fff;
            }
          }
          &:last-child {
            margin-right: 0;
          }
        }
        .active {
          border: 2px solid #9ebbf7;
          .name {
            color: #fff;
          }
          .edit {
            .round {
              background: #fff;
              i {
                color: #6e82a7;
              }
            }
          }
        }
      }
    }

    .locationBox {
      // padding: 0 0 0 32px;
      // background: #ffffff;

      margin-top: 30px;
    }
    .LBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .lbox-add {
      width: 100%;
      height: 144px;
      background: #f5f7fa;
      border: 1px dashed #9ebbf7;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .icon {
        font-size: 31px;
        color: #9ebbf7;
      }
    }
    .forBox {
      width: 230px;
      height: 120px;
      margin-bottom: 24px;
      background: #f5f7fa;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      padding: 24px;
      position: relative;
      margin-right: 24px;
      cursor: pointer;
      .name {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .edit {
        margin-top: 32px;
        .round {
          display: inline-block;
          width: 28px;
          height: 28px;
          // background: #f5f7fa;
          border-radius: 50%;
          line-height: 28px;
          text-align: center;
          // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 20px;
          i {
            color: #fff;
          }
        }
      }
      .close {
        width: 24px;
        height: 24px;
        background: #000000;
        opacity: 0.8;
        border-radius: 50%;
        position: absolute;
        right: -12px;
        line-height: 24px;
        text-align: center;
        top: -12px;
        i {
          color: #fff;
        }
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      // background: #6e82a7;
      border: 2px solid #9ebbf7;
      .name {
        // color: #fff;
      }
      .edit {
        .round {
          background: #fff;
          i {
            color: #6e82a7;
          }
        }
      }
    }
  }
}
</style>