HM21St_Page_Manager/src/views/organize_manage/EditPerson.vue

<template>
  <div class="manage-root edit-person" v-if="info">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div
        class="manage-root-contain-right personnel-manage-right"
        :class="[isPhone ? 'manage-root-contain-right-phone' : '']"
      >
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
          :class="[isPhone ? 'breadcrumb-box-phone' : '']"
        ></breadcrumb>
        <setting
          :page="$route.query.page ? $route.query.page : 'editOrgPerson'"
          :info="info"
          @getInfo="getInfo"
          @changeBread="changeBread"
        ></setting>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import Setting from "../../components/Setting.vue";
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, Setting },
  props: {},
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "organize_manage",
      breadcrumbList: [],
      tableHeight: "", // 表格高度
      id: this.$route.query.id ? this.$route.query.id : "",
      info: null,
      isPhone: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 434; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 获取机构信息
    getInfo() {
      let MethodName = "/OrgServer/Manager/PersonManager/GetPersonInfo";
      let data = {
        id: this.id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            let breadcrumb = [
              {
                icon: "school-line",
                url: "",
                text: "",
              },
              {
                icon: "",
                url: "",
                text: "机构管理",
              },
              {
                icon: "",
                url: "",
                text: res.person.org_name,
              },
              {
                icon: "",
                url: "",
                text: "人员信息",
              },
            ];
            this.breadcrumbList = breadcrumb;
            this.info = res.person;
          }
        })
        .catch(() => {});
    },
    // 修改面包屑
    changeBread(list) {
      this.breadcrumbList = list;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
    this.getTableHeight();
    if (this.id) {
      this.getInfo();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.manage-root-contain-right-phone {
  .personal-inner {
    min-height: calc(100vh - 124px);
    height: auto;
  }
}
</style>