MingGao_vue/minggao/src/page/home/index.vue

<!--  -->
<template>
  <div
    class="indexbox"
    v-loading="indexloading"
    element-loading-text="欢迎登录！加载中，请稍后..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255)"
  >
    <div class="menubox">
      <div class="index_title">
        <img
          v-if="imgurl"
          :src="
            imgurl.indexOf('http') == -1 ? this.$deriveData + imgurl : imgurl
          "
          alt=""
          class="menubox_logo_img"
        />
        <p>{{ headline }}</p>
      </div>
      <div class="index_out" style="display: flex">
        <div
          class="iconfont icon-erweima"
          style="margin-right: 15px; font-size: 22px; color: #666666"
          @click="QRcode"
        ></div>
        <el-dropdown trigger="click" @command="quit">
          <span class="el-dropdown-link" style="cursor: pointer">
            <span>{{ username }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">更改密码</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <p><i class="el-icon-switch-button" @click="quit"></i></p> -->
      </div>
    </div>
    <div class="contentbox">
      <div class="menubox_item">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          background-color="#0D3756"
          text-color="#fff"
          :default-active="menuActiveId"
          active-text-color="#409EFF"
          :unique-opened="true"
        >
          <el-submenu
            v-for="item in infodata"
            :key="item.pur_id"
            :index="item.pur_id.toString()"
          >
            <template slot="title">
              <i :class="icon[item.pur_id]" style="color: #fff"></i>
              <span>{{ item.purview_name }}</span>
            </template>
            <template v-for="items in item.children">
              <el-submenu
                :index="items.pur_id.toString()"
                v-if="items.children"
                :key="items.pur_id"
                @click="skip('/index/' + items.menu)"
              >
                <span slot="title">{{ items.purview_name }}</span>
                <el-menu-item-group>
                  <el-menu-item
                    v-for="item2 in items.children"
                    :index="item2.pur_id.toString()"
                    :key="item2.pur_id"
                    @click="skip('/index/' + item2.menu)"
                  >
                    <span slot="title">{{ item2.purview_name }}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item
                :index="items.pur_id.toString()"
                v-else
                :key="items.pur_id"
                @click="skip('/index/' + items.menu)"
                class="el-menu-item2"
              >
                <span slot="title"> {{ items.purview_name }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </div>
      <div class="contentbox_right">
        <div class="contentbox_crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in routerinfo"
              :key="item.pur_id"
              ><a
                v-if="
                  index == routerinfo.length - 2 &&
                  item.menu != '' &&
                  item.purview_name != '查看图片'
                "
                :href="'/#/index/' + item.menu"
                style="cursor: pointer"
                >{{ item.purview_name }}</a
              ><span v-else>{{ item.purview_name }}</span></el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="contentbox_box">
          <router-view />
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="alterpassTF"
      width="500px"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="原始密码：" prop="oldpass">
            <el-input type="password" v-model="ruleForm.oldpass"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newpass">
            <el-input type="password" v-model="ruleForm.newpass"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码：" prop="newpasstrue">
            <el-input type="password" v-model="ruleForm.newpasstrue"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="扫描下载智网监测" :visible.sync="QRtf" width="300px">
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto"></div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import QRCode from "qrcodejs2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var validatePass = (rule, value, callback) => {
      console.log(value);
      if (value == this.ruleForm.newpass) {
        callback();
      } else {
        callback(new Error("俩次密码不一致，请重新确认密码！"));
      }
    };
    return {
      infodata: [],
      username: "",
      routerdata: [],
      menuActiveId: "1",
      // menuOpeneds:["18"]
      routerinfo: [],
      options: [],
      value: "",
      imgurl: "", //系统logo
      headline: "", //系统标题
      alterpassTF: false, //修改密码框
      ruleForm: {
        oldpass: "",
        newpass: "",
        newpasstrue: "",
      },
      rules: {
        oldpass: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        newpass: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        newpasstrue: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur" },
        ],
      },
      indexloading: false,
      pur_id: "",
      icon: {
        1: "iconfont icon-minggaoshouye",
        4: "iconfont icon-xietongzhihuidaping",
        10: "iconfont icon-didian",
        20: "iconfont icon-gongzuoguanli-dingdanguanli",
        22: "iconfont icon-database-full",
        25: "iconfont icon-shezhi1",
      },
      QRtf: false,
      app_url:""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "$route.path": function (newVal) {
      console.log(newVal);
      this.routemap(this.routerdata);
      // this.menuActiveId = this.$route.path;
    },
  },
  //方法集合
  methods: {
    handleOpen(e) {
      console.log(e);
      // localStorage.setItem("menuActiveId", e);
    },
    handleClose() {},
    // user.login.user_login_info
    getuserinfo() {
      this.indexloading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
      }).then((res) => {
        this.indexloading = false;
        this.app_url = res.data.data.app_url
        this.imgurl = res.data.data.theme_info.logo_url;
        this.headline = res.data.data.theme_info.sys_name;
        this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
        var titleList = [];
        res.data.data.children.forEach((item) => {
          if (item.purview_name !== "APP") {
            titleList.push(item);
          }
        });
        // this.infodata = res.data.data.children;
        this.infodata = titleList;
        console.log(this.routerdata);
        // this.infodata.shift();
        localStorage.setItem("userID", res.data.data.im_user_id); // 存储当前登录账号的ID
        this.username = res.data.data.username;
        localStorage.setItem("username", this.username);
        this.routemap(this.routerdata);
      });
    },
    quit(e) {
      // user.login.logout_user
      console.log(e);
      if (e == "a") {
        this.alterpassTF = true;
      } else if (e == "b") {
        this.outsystem();
      }
    },
    outsystem() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.user_logout",
      }).then((res) => {
        if (res.data.data) {
          localStorage.removeItem("session");
          // localStorage.removeItem("username");
          this.$router.push("/Login");
        }
      });
    },
    skip(path) {
      // console.log(this.$route);ssssss
      if (this.$route.path != path) {
        this.$router.push(path);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=app.my.app_change_pwd",
            data: this.qs.stringify({
              old_password: this.ruleForm.oldpass, //                必传      旧密码
              new_password: this.ruleForm.newpass, //                必传      新密码
              confirm_password: this.ruleForm.newpasstrue, //            必传      再次确认新密码
            }),
          }).then((res) => {
            if (res.data.data) {
              this.alterpassTF = false;
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "修改成功！",
                  type: "success",
                });
              }
              this.outsystem();
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "修改失败！" + res.data.data.message,
                  type: "error",
                });
              }
            }
          });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "请完成信息填写！",
              type: "warning",
            });
          }
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.alterpassTF = false;
    },
    QRcode() {
      this.QRtf = true;
      this.$nextTick(() => {
        console.log(this.$deriveData+this.app_url);
        if (!this.$refs.qrCodeUrl.firstChild) {
          new QRCode(this.$refs.qrCodeUrl, {
            text: this.$deriveData+this.app_url, // 需要转换为二维码的内容
            // text: "http://114.115.147.140:12345"+this.app_url,
            width: 100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        }
      });
    },
    routemap(routerdata) {
      var newrouter = this.$route.path;
      var tf = routerdata.filter((item) => {
        if (item.menu != "") {
          if (newrouter.indexOf(item.menu) != -1) {
            // 第一层菜单是否包含当前路由
            // var arr = [item.menu,item.pur_id]
            // console.log(item.pur_id)
            // return arr
            // var a = '111111111'
            return [item.menu, item.pur_id];
          } else {
            if (item.children) {
              this.routemap(item.children);
            }
          }
        } else {
          if (item.children) {
            this.routemap(item.children);
          }
        }
      });
      // console.log(tf)
      if (tf.length != 0) {
        console.log(tf);
        // this.menuActiveId = tf[0].pur_id.toString();
        this.routerinfo = [];
        this.routerinfo.unshift(tf[0]);
        var newpath = this.routerdata.filter((item) => {
          // console.log(item)
          if (item.pur_id == tf[0].parent_perm_id) {
            return item.pur_id == tf[0].parent_perm_id;
          } else {
            var newpath2 = item.children.filter((items) => {
              if (items.pur_id == tf[0].parent_perm_id) {
                return items.pur_id == tf[0].parent_perm_id;
              } else {
                if (items.children) {
                  var newpath3 = items.children.filter((itemsa) => {
                    // console.log(itemsa.pur_id,tf[0].parent_perm_id)
                    if (itemsa.pur_id == tf[0].parent_perm_id) {
                      return itemsa.pur_id == tf[0].parent_perm_id;
                    } else {
                      // console.log(itemsa)
                      if (itemsa.children) {
                        var newpath4 = itemsa.children.filter((itemsaa) => {
                          if (itemsaa.pur_id == tf[0].parent_perm_id) {
                            return itemsaa.pur_id == tf[0].parent_perm_id;
                          } else {
                          }
                        });
                        console.log(newpath4);
                        if (newpath4.length != 0) {
                          this.routerinfo.unshift(newpath4[0]);
                          return newpath4;
                        }
                      }
                    }
                  });
                  if (newpath3.length != 0) {
                    this.routerinfo.unshift(newpath3[0]);
                    return newpath3;
                  }
                }
              }
              // return items.pur_id == tf[0].parent_perm_id;
            });
            if (newpath2.length != 0) {
              this.routerinfo.unshift(newpath2[0]);
              return newpath2;
            }
          }
        });
        // console.log(newpath)
        this.routerinfo.unshift(newpath[0]);
        console.log(this.routerinfo);
      } else {
        // console.log(this.routerinfo);
        var obj = {
          menu: "",
          parent_perm_id: "88",
          pur_id: "88",
          purview_name: "查看详情",
        };
        if (this.routerinfo[1] && !this.routerinfo[2]) {
          if (this.$route.path == "/index/taskRegulatorDetails") {
            this.routerinfo.push(obj);
          } else if (this.$route.path == "/index/superviseAdminDetails") {
            this.routerinfo.push(obj);
          } else if (this.$route.path == "/index/superviseDetails") {
            this.routerinfo.push(obj);
          } else if (this.$route.path == "/index/superviseLogDetails") {
            this.routerinfo.push(obj);
          }
        }
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.menuActiveId = localStorage.getItem("menuActiveId");
    this.getuserinfo();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
p {
  margin: 0;
}
.indexbox {
  // display: flex;
}
.menubox {
  width: 100%;
  display: flex;
  height: 62px;
  line-height: 62px;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 3px -1px rgb(224, 219, 219); //底部阴影
  .index_title {
    display: flex;
    .menubox_logo_img {
      width: 40px;
      height: 40px;
      margin: 11px;
    }
    p {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
.contentbox {
  // width: calc(100% - 240px);
  display: flex;
  .menubox_item {
    height: calc(100vh - 62px);
    background-color: #0d3756;
    overflow-y: auto;
    width: 226px;
    /deep/.el-menu {
      border: 0;
    }
    /deep/.el-menu-vertical-demo {
      width: 220px;
    }
    /deep/.el-submenu__title {
      text-align: left;
      // padding-left: 67px !important;
    }
    /deep/.el-menu--inline {
      .el-submenu__title {
        text-align: left;
        padding-left: 67px !important;
      }
      .el-menu-item {
        padding-left: 80px !important;
      }
    }
    /deep/.el-submenu__title:hover {
      color: rgb(64, 158, 255) !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.is-opened > .el-submenu__title {
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.is-active {
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.el-menu-item {
      text-align: left;
      // background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.el-menu-item:hover {
      color: rgb(64, 158, 255) !important;
    }
    /deep/.el-menu--inline > .el-menu-item2 {
      padding-left: 67px !important;
      background-color: transparent !important;
    }
    /deep/.el-menu-item-group__title {
      display: none;
    }
    /deep/.el-icon-arrow-down:before {
      content: "\E6DF";
      color: #fff;
      font-size: 16px;
    }
    .firstmenu {
      text-align: left;
      padding-left: 20px !important;
    }
  }
  /*滚动条样式*/
  ::-webkit-scrollbar {
    width: 6px;
    // margin-left: -1px;
    /*height: 4px;*/
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    // border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  .contentbox_right {
    width: calc(100% - 226px);
    margin: 10px auto 0;
    .contentbox_crumbs {
      width: 98%;
      margin: 0;
      /deep/.el-breadcrumb {
        margin: 0 0 0 20px;
        padding: 0 !important;
        background-color: transparent !important;
      }
    }
    .contentbox_box {
      width: 98%;
      height: calc(100vh - 100px);
      // background-color: chartreuse;
      margin: 15px auto 0;
      overflow-y: auto;
    }
  }
}
/deep/.qrcode {
  img {
    margin: 0 auto;
  }
}
</style>