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

<template>
  <div class="airportInfoDetails">
    <Minheader :is-auth="true" :is-statuser="true" @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.value"
                :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="中文全称"
                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="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<Array>([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "区域设置",
    className: "editBtn",
    param: 4,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]); //单独的编辑
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 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<Array>([
  {
    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({
  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([]);
//表头
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 = reactive([]);
//新增
const addForm = () => {
  msgTitle.value = "新增机场信息维护";
  flag.value = true;
  type.value = "";
  tableForm.event = 1;
  tableForm.companyID = companyID;
};
//取消
const resetForm = () => {
  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 = "";
    tableForm.airportID = index.airportID;
    tableForm.airportName = index.airportName;
    tableForm.IATACode = index.IATACode;
    tableForm.ICAOCode = index.ICAOCode;
    tableForm.abbreviation = index.abbreviation;
    tableForm.englishAbbreviation = index.englishAbbreviation;
    tableForm.fullName = index.fullName;
    tableForm.companyID = index.companyID;
    tableForm.airportTimeZone = index.airportTimeZone;
    tableForm.companyName = index.companyName;
    tableForm.event = index.event;
    tableForm.remarks = index.remarks;
  } else if (param === 3) {
    msgTitle.value = "删除机场信息维护";
    flag.value = true;
    type.value = "del";
    tableForm.event = 3;
    tableForm.airportID = index.airportID;
    tableForm.airportName = index.airportName;
    tableForm.IATACode = index.IATACode;
    tableForm.ICAOCode = index.ICAOCode;
    tableForm.abbreviation = index.abbreviation;
    tableForm.englishAbbreviation = index.englishAbbreviation;
    tableForm.fullName = index.fullName;
    tableForm.companyID = index.companyID;
    tableForm.airportTimeZone = index.airportTimeZone;
    tableForm.companyName = index.companyName;
    tableForm.event = index.event;
  } 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 = [];
      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>