CABaggageData2.0/src/views/BasicsData/views/airport/airportInfo.vue

<!--
 * @Author: your name
 * @Date: 2021-11-17 13:43:58
 * @LastEditTime: 2021-12-13 16:30:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \CABaggageData\src\views\dashboard\views\info.vue
-->
<template>
  <div class="airportInfo">
    <!--搜索-->
    <!-- <div class="airportInfo-search">
      <Search
        title="机场信息维护"
        @getSearchData="getSearchData"
        :isSearch="false"
      >
        <button @click="handleAdd" class="btnAdd">
          {{ msgType ? "新增" : "编辑" }}
        </button>
      </Search>
    </div> -->
    <!--内容区域-->
    <div class="airportInfo-content">
      <el-row :gutter="24">
        <el-col :span="6">
          <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">
          <DataTable
            :data-id="dataId"
            :rows="12"
            labelWidth="100px"
            :minHeight="70"
            width="800px"
            :withlodSet="true"
            :data-content="{ companyID, companyName }"
            tableHeight="680"
          />
        </el-col>
      </el-row>
    </div>
    <!--删除弹框-->
    <Dialog :flag="flag">
      <div class="airportInfoDialog">
        <div class="del-title">删除机场信息</div>
        <div class="content er">
          <div class="log"></div>
          是否确认删除
          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
            {{ rmObj.name }}
          </p>
          ？
        </div>
        <div class="DelFoot right t30">
          <el-button
            size="medium"
            @click="remove"
            class="r25 buwitch"
            type="danger"
            >删除</el-button
          >
          <el-button size="medium" class="r26" @click="flag = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!--删除航站楼-->
    <Dialog :flag="flaghall">
      <div class="airportInfoDialog">
        <div class="Deltitle">删除机场信息</div>
        <div class="content er">
          <div class="log"></div>
          是否确认删除
          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
            {{ rmhall.name }}
          </p>
          ？
        </div>
        <div class="DelFoot right t30">
          <el-button
            size="medium"
            @click="removeflaghall"
            class="r25 buwitch"
            type="danger"
            >删除</el-button
          >
          <el-button size="medium" class="r26" @click="flaghall = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!--新增机场信息弹框-->
    <Dialog :flag="addFlag" @close="closeForm">
      <div class="airportInfoDialog dialog-public-background">
        <div class="flx">新增机场信息</div>
        <div class="content">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="所属公司" prop="upname">
              <el-input
                size="medium"
                :disabled="true"
                placeholder=""
                v-model="ruleForm.upname"
              ></el-input>
            </el-form-item>
            <el-form-item label="机场中文名称" prop="name">
              <el-input
                size="medium"
                placeholder="请输入机场中文名称（必填）"
                v-model="ruleForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="机场英文简称" prop="name">
              <el-input
                size="medium"
                placeholder="请输入机场英文简称（必填）"
                v-model="ruleForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="机场全称">
              <el-input
                size="medium"
                placeholder="请输入机场全称（必填）"
                v-model="ruleForm.fullName"
              ></el-input>
            </el-form-item>
            <el-form-item label="机场三字码">
              <el-input
                size="medium"
                placeholder="请输入机场三字码（必填）"
                v-model="ruleForm.code3"
              ></el-input>
            </el-form-item>
            <el-form-item label="机场四字码">
              <el-input
                size="medium"
                placeholder="请输入机场四字码（必填）"
                v-model="ruleForm.code3"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button
            size="medium"
            type="primary"
            @click="addSubmit()"
            class="r25 r26"
            >提交</el-button
          >
          <el-button class="r26" size="medium" @click="resetForm()"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <Dialog :flag="addta" @close="closeta">
      <div class="airportInfoDialog dialog-public-background">
        <div class="flx">新增航站楼信息</div>
        <div class="content">
          <el-form
            :model="taForm"
            :rules="ruleta"
            ref="taForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="航站楼名称" prop="name">
              <el-input
                size="medium"
                placeholder="请输入航站楼名称（必填）"
                v-model="ruleForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="航站楼标识" prop="name">
              <el-input
                size="medium"
                placeholder="请输入航站楼标识（必填）"
                v-model="ruleForm.name"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button
            size="medium"
            type="primary"
            @click="addter()"
            class="r25 r26"
            >提交</el-button
          >
          <el-button class="r26" size="medium" @click="addta = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search/index.vue";
import Dialog from "@/layout/components/Dialog/index.vue";
import { AirportsList, AddAriports, DelAriports } from "@/api/SystemSettings";
import { translateDataToTreeAll } from "@/utils/validate";
import { Query } from "@/api/dataIntegration";
import { findarrays } from "@/utils/validate";
import DataTable from "@/components/TableAirport";
export default {
  name: "AirportInfo",
  components: { Search, Dialog, DataTable },
  data() {
    return {
      dataId: DATACONTENT_ID.airportTableId,
      data: [],
      defaultProps: {
        children: "children",
        label: "companyName",
      },
      newUp: false, //新增开关
      newUpname: "",
      msgType: true, //新增/编辑切换
      flag: false, //删除弹框开关
      flaghall: false, //删除航站楼开关
      addFlag: false, //新增机场信息弹框开关
      addta: false, //新增航站楼
      ids: null,
      rmhall: {
        //删除航站楼
        index: 0,
        name: "",
      },
      rmObj: {
        //删除内容
        index: 0,
        name: "",
      },
      ruleForm: {
        //新增机场信息表单
        upname: "",
        name: "",
        fullName: "",
        code: "",
      },
      taForm: {
        //新增航站楼信息表单
      },
      rules: {
        //新增机场信息表单验证
        name: [{ required: true, message: "请输入机场简称", trigger: "blur" }],
        fullName: [
          { required: true, message: "请输入机场全称", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入机场三字码", trigger: "blur" },
        ],
      },
      ruleta: {
        //新增机场信息表单验证
        name: [{ required: true, message: "请输入机场简称", trigger: "blur" }],
        fullName: [
          { required: true, message: "请输入机场全称", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入机场三字码", trigger: "blur" },
        ],
      },
      companyID: "",
      companyName: "",
      company: "所属公司",
    };
  },
  mounted() {
    this.getAirlines();
  },
  methods: {
    //新增航站楼
    newterminal() {
      this.addta = true;
    },
    //点击树状图
    handleNodeClick(data) {
      this.companyID = data.companyID;
      this.companyName = data.companyName;
    },
    closeForm() {
      this.$refs.ruleForm.resetFields();
    },
    closeta() {
      this.$refs.taForm.resetFields();
    },
    // //模糊查询
    // findarrays(ar, feature, v) {
    //   var arr = [];
    //   for (var i = 0; i < ar.length; i++) {
    //     var atxt = ar[i][feature];
    //     var btxt = v;
    //     //		将字符串按某个字符切割成若干个字符串，并以数组形式返回
    //     var atxtarr = atxt.split("");
    //     var btxtarr = btxt.split("");
    //     var type = 0;
    //     for (var k = 0; k < atxtarr.length; k++) {
    //       for (var p = 0; p < btxtarr.length; p++) {
    //         if (atxtarr[k] == btxtarr[p]) {
    //           type = 1;
    //         }
    //       }
    //     }
    //     if (type == 1) {
    //       arr.push(ar[i]);
    //     }
    //   }
    //   return arr;
    // },
    getSearchData(val) {
      if (val) {
        this.arr = findarrays(this.arr, "name", val);
      } else {
        this.getAirlines();
      }
    },
    // 内容跳转
    toTink(item) {
      this.$router.push({
        path: "/BasicsData/airportInfoDetails",
        query: {
          id: item.id,
          name: item.name,
          fullName: item.fullName,
          code3: item.code3,
        },
      });
    },
    //公司列表
    async getAirlines() {
      try {
        const res = await Query({
          id: DATACONTENT_ID.airportTreeId,
          dataContent: [],
        });
        if (res.code === "0") {
          let arr = [];
          arr = translateDataToTreeAll(
            res.returnData.listValues,
            "parentID",
            "companyID"
          );
          this.data = arr;
          if (!this.companyID.length) {
            this.companyID = arr[0].companyID;
            this.company = arr[0].companyName;
          }
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    //删除信息
    handleMove(item) {
      this.ids = item.id;
      this.flag = true;
      this.rmObj = {
        name: item.name,
      };
    },
    //删除航站楼
    Tinkhall(res) {
      this.flaghall = true;
      this.rmhall = {
        name: res.name,
      };
    },
    //搜索
    removeflaghall() {
      this.flaghall = false;
    },
    //提交新增航站楼
    addter() {
      this.addta = false;
    },
    //新增机场信息-弹框
    handleAdd() {
      if (this.newUp) {
        this.addFlag = true;
      } else {
        this.$message.error("请选择所属公司");
      }
    },
    //新增机场信息-弹框-提交
    async addSubmit() {
      let arr = 0;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          arr = 1;
        } else {
          arr = 0;
          return false;
        }
      });
      if (arr == 1) {
        if (this.ruleForm.name != "" && this.ruleForm.fullName != "") {
          const result = await AddAriports({
            id: null,
            code3: this.ruleForm.code3,
            name: this.ruleForm.name,
            fullName: this.ruleForm.fullName,
          });
          if (result.code === 0) {
            this.getAirlines();
            this.addFlag = false;
            this.$message.success("新增成功");
          } else {
            this.$message.error.message;
          }
        } else {
          this.$message.warning("请输入必填信息");
        }
        this.closeForm();
      }
    },
    //新增机场信息-弹框-取消
    resetForm() {
      this.addFlag = false;
    },
    //删除
    async remove() {
      const result = await DelAriports({
        id: this.ids,
      });
      if (result.code === 0) {
        this.flag = false;
        this.getAirlines();
        this.$message.success("删除成功");
      } else {
        this.$message.error.message;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.airportInfo {
  .airportInfo-search {
    margin: 40px 0 30px 0;
  }
  .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%;
  }
  ::v-deep .el-tree-node__children {
    display: block;
  }
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }
  ::v-deep .el-form-item__content {
    margin-left: 120px !important;
  }
  ::v-deep .el-form-item__label {
    width: 120px !important;
  }
  .tree_left {
    width: 100%;
    height: 75.8vh;
    background: #ffffff;
    // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    // border-radius: 4px;
    padding: 24px 24px;
    margin-top: 20px;
    overflow: hidden;
    .corporate {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #101116;
      margin-bottom: 23px;
    }
  }
  .cont_right {
    width: 100%;
    height: 69vh;
  }
  .er {
    display: flex;
    align-items: center;
  }
  .airportInfo-content {
    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 {
      height: 144px;
      padding: 24px;
      margin-bottom: 24px;
      .title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
      }
      .edit_log {
        position: relative;
        // top: -2px;
      }
      .icon {
        cursor: pointer;
      }
      .desc {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #101116;
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .plus {
        width: 20px;
        height: 20px;
        background: #ffffff;
        // background: url("../../../../assets/index/ic_close_s @2x.png") no-repeat;
        border: 1px solid #2d67e3;
        border-radius: 2px;
        margin-right: 8px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2d67e3;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
      }
      .plus_list {
        width: 48px;
        height: 20px;
        background: #2d67e3;
        border-radius: 2px;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        margin-right: 8px;
        font-family: Helvetica;
        font-weight: bold;
        color: #ffffff;
        position: relative;
        padding-left: 8px;
        .logx {
          position: absolute;
          right: 8px;
          top: 6px;
          width: 7px;
          height: 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("../../../../assets/index/ic_close_s @2x.png")
            no-repeat;
          background-size: 100% 100%;
          // background: #fff;
          cursor: pointer;
          color: #ffffff;
        }
      }
    }
  }
}
</style>