supplier_system/src/dashoo.cn/frontend_web/src/pages/login.vue

<template>
  <div style="width: 100%; overflow-y: auto; background-color: white">
    <sticky class-name="sub-navbar2" v-if="activeIndex==1 || activeIndex==2">
      <div class="top-wrapper">
          <router-link to="/">
            <img src="../assets/img/title_gongfang.png" style="height:35px; margin-top: 5px;">
          </router-link>


        <div style="float: right;">
          <router-link :to="'/signup'">
            <el-button type="text" round>没有账户？请注册</el-button>
          </router-link>

          <el-button type="info" size="small" round @click="activeIndex=0">登录系统</el-button>
        </div>
      </div>
    </sticky>

    <div v-if="activeIndex==0">
      <div class="top-wrapper">
        <img src="../assets/img/title_login.png" style="height:100px; margin-top: 2px;">
      </div>
      <div class="back-width">
        <div class="login-body">
          <section class="login">
            <!--<header class="login-header">
              <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;"><router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link></h1>
              <el-alert v-if="error" :title="error.title" type="warning" :description="error.message" show-icon/>
            </header>-->

            <el-card class="box-card">
              <!--<div slot="header" class="clearfix">
                <span style="font-weight: bold;">用户登录</span>
              </div>-->
              <el-menu size="small" :default-active="activeIndex+''" @select="handleSelect" mode="horizontal">
                <el-menu-item index="0">
                  <i class="el-icon-tickets"></i>
                  <span>登录</span>
                </el-menu-item>
                <el-menu-item index="1">
                  <i class="el-icon-bell"></i>
                  <span>通知中心</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <i class="el-icon-document"></i>
                  <span>文件下载中心</span>
                </el-menu-item>
              </el-menu>
              <el-row>
                <!--<el-col :span="12">
                  <div class="demo-image__placeholder">
                    <div class="block">
                      <img style="width: 280px; height: 280px; margin-top: 15px" src="../assets/img/login_left.png" />
                    </div>
                  </div>
                </el-col>-->
                <el-col :span="24">
                  <el-form
                    class="login-form"
                    auto-complete="off"
                    :model="model"
                    :rules="rules"
                    ref="user"
                    label-position="top"
                  >
                    <el-form-item label="用户名" prop="username">
                      <el-input type="text" v-model="model.username" placeholder="请输入用户名">
                        <el-select
                          v-model="loginMode"
                          slot="append"
                          placeholder="登录类型"
                          style="width: 110px;"
                        >
                          <el-option label="PTR认证" :value="2"></el-option>
                          <el-option label="普通账户" :value="1"></el-option>
                        </el-select>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input
                        type="password"
                        v-model="model.password"
                        placeholder="请输入密码"
                        @keyup.enter.native="loginall()"
                      />
                    </el-form-item>
                    <el-button
                      type="primary"
                      :loading="loading"
                      @click="loginall()"
                    >{{ loading ? '登录中...' : '登录' }}</el-button>
                    <el-row>
                      <el-col :span="12">
                        <router-link :to="'/signup'">
                          <el-button type="text" round>没有账户？请注册</el-button>
                        </router-link>
                      </el-col>
                      <el-col :span="12">
                        <router-link :to="'/passwordback'">
                          <el-button type="text" round>忘记密码？</el-button>
                        </router-link>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-col>
              </el-row>

            </el-card>
          </section>
        </div>
      </div>
    </div>

    <div v-if="activeIndex==1">
      <div
        class="components-container home-wrapper"
        style="background-color: white;">
        <el-table
          :data="noticeList"
          height="50%"
          style="width: 100%; height: 100vh;"
        >
          <el-table-column prop="Name" label="通知标题">
            <template slot-scope="scope">
              <!--<i class="el-icon-caret-right"></i>-->
              <el-link :href="getDownloadFile(scope.row.FileURL)"  target="_blank" type="primary">{{ scope.row.Name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="CreateOn" label="时间" width="141">
            <template slot-scope="scope">{{ jstimehandle(scope.row.CreateOn+'') }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="activeIndex==2">
      <div
        class="components-container home-wrapper"
        style="background-color: white">
        <el-table
          :data="fileList"
          height="50%"
          style="width: 100%;  height: 100vh;"
        >
          <el-table-column prop="Name" label="文件名">
            <template slot-scope="scope">
              <!--<i class="el-icon-caret-right"></i>-->
              <el-link :href="getDownloadFile(scope.row.FileURL)"  target="_blank" type="primary">{{ scope.row.Name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="CreateOn" label="时间" width="141">
            <template slot-scope="scope">{{ jstimehandle(scope.row.CreateOn+'') }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <footer class="login-footer" style="color:#A9A9A9">
        ©企业法规处 版权所有
      </footer>
    </div>
    <!--<div>
      <footer class="login-footer1">
        <div
          class="foot-wrapper"
          style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right"
        >©企管法规处 版权所有</div>
      </footer>
    </div>-->
  </div>
</template>

<script>
import Vue from "vue";
import Component from "class-component";
import Sticky from "@/components/Sticky";
import api from "@/api/rtxservice/rtx";
@Component({
  data() {
    // form model
    // TODO: remove default values
    const model = {
      username: "",
      password: ""
    };

    // form validate rules
    const rules = {
      username: [
        {
          required: true,
          message: "请输入用户名"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    };

    return {
      loginMode: 2,
      model: model,
      rules: rules,
      error: null,
      loading: false,
      noticeList: [], //通知列表
      fileList: [], //文档列表
      activeName: "first",
      activeIndex: "0",
      flag: 0
    };
  },

  created() {
    this.initNoticeListData();
    this.initFileListData();
  },
  components: {
    Sticky
  },
  methods: {
    //获取通知列表
    initNoticeListData() {
      let _this = this;
      //传递列名
      const params = {
        colName: "NoticeTab"
      };
      _this.$axios
        .get("/document/getdocumentnameandtime", { params })
        .then(function(response) {
          _this.noticeList = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取文件列表
    initFileListData() {
      let _this = this;
      //传递列名
      const params = {
        colName: "DocTab"
      };
      _this.$axios
        .get("/document/getdocumentnameandtime", { params })
        .then(function(response) {
          _this.fileList = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //下载文件
    DownloadFile(row) {
      let val = row.FileURL;
      let urlArr = val.split("|");
      location.href = "http://" + urlArr[0];
    },
    getDownloadFile(val) {
      let urlArr = val.split("|")
      let retUrl = urlArr[0]
      //内网服务器专用
      if (process.client && retUrl.indexOf('/upfile') === 0) {
        const myDomain = window.location.host
        retUrl = myDomain + '/' + retUrl
      }
      return "http://" + retUrl
    },
    //格式化时间
    jstimehandle(val) {
      if (val === "") {
        return "----";
      } else if (val === "0001-01-01T08:00:00+08:00") {
        return "----";
      } else if (val === "5000-01-01T23:59:59+08:00") {
        return "永久";
      } else {
        val = val.replace("T", " ");
        return val.substring(0, 10);
      }
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    isChrome() {
      //取得浏览器的userAgent字符串
      let userAgent = navigator.userAgent;

      //判断是否Chrome浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        return true;
      } else {
        return false;
      }
    },

    loginall() {
      if (this.loginMode == 1) {
        this.login();
      } else {
        this.loginptr();
      }
    },
    loginptr() {
      let params = {
        username: this.model.username,
        password: this.model.password
      };
      api
        .rtxLogin(params, this.$axios)
        .then(res => {
          if (res.data.items === 1) {
            this.flag = 1;
            this.login();
          } else if (res.data.items === 2) {
            this.flag = 2;
            this.login();
          }else if (res.data.items === 3) {
            this.$message.warning("您无权限登陆本系统");
          }else {
            this.$message.warning("账号或密码错误");
          }
        })
        .catch(err => {
          this.$message.warning("账号或密码错误");
          console.error(err);
        });
    }
  }
})
export default class Login extends Vue {
  layout() {
    return "empty";
  }
  login() {
    if (!this.isChrome()) {
      this.$alert(
        "请用谷歌浏览器、360浏览器(极速模式)等，Chrome内核浏览器打开本系统",
        "不支持的浏览器",
        {}
      );
      return false;
    }
    this.logging = true;
    this.$refs.user.validate(async valid => {
      try {
        if (valid) {
          await this.$store.dispatch("auth/login", {
            fields: {
              username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
              password: this.model.password.replace(/(^\s*)|(\s*$)/g, ""),
              flag: this.flag
            }
          });
          if (process.env.appclient == "lims") {
            this.$router.push(this.$route.query.page || "/");
          } else if (process.env.appclient == "cellbank") {
            this.$router.push(this.$route.query.page || "/indexdqm");
          } else {
            this.$router.push(this.$route.query.page || "/");
          }
        }
      } catch (e) {
        if(e.response.status==777){
          this.$message.warning("您无权限登录本系统");
        }else{
          this.$message.warning("账号或密码错误");
        }
      } finally {
        this.logging = false;
      }
    });
  }
  logout() {
    this.$store.dispatch("logout");
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/base/variables";

.components-container div {
  margin-top: 20px;
}

.top-wrapper {
  margin: 0px auto;
  width: 1004px;
  /*text-align: right;
    alignment: right;*/
  flex-direction: row;
}
.home-wrapper {
  margin: 0px auto;
  width: 1004px;
  flex-direction: column;
  margin-bottom: 45px;
}

.foot-wrapper {
  margin: 0px auto;
  width: 1004px;
  display: flex;
  alignment: center;
  align-items: center;
  flex-direction: column;
}

.back-width1 {
  background-color: #2f79f6;
  margin: 0px auto;
  left: 0;
  right: 0;
  top: 20px;
  width: 1004px;
}

.login-footer1 {
  position: fixed;
  background-color: #34393d;
  font-size: 10px;
  clear: both;
  display: block;
  text-align: center;
  margin: 0px auto;
  bottom: 0px;
  width: 100%;
}

/*-----------*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.back-width {
  background-color: white;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 100px;
  width: 100%;
  height: 520px;
}

.login-body {
  background: url("../assets/img/gf.png") no-repeat left;
  font-family: "Open Sans", sans-serif;
  background-color: white; /*#3273FC*/
  background-size: cover;

  /*background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
  /*min-height: 1050px;*/

  position: absolute;
  margin: auto;
  left: 0px;
  right: 0;
  top: 0;
  width: 100%;
  height: 520px;

  /*margin: auto;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 40px);*/
}

.login-footer {
  font-size: 10px;
  clear: both;
  display: block;
  text-align: center;
  margin: 0px auto;
  position: absolute;
  bottom: 10px;
  width: 100%;

  a {
    color: $brand-color;
  }
}

.login {
  /*flex: 1;
  width: 100%;*/
  position: relative;
  max-width: 27rem;
  top: 40px;
  left: 50%;
  margin-left: 100px;
  font-size: 0.875rem;
  opacity: 0.9;

  &-header {
    margin-bottom: 1rem;

    .brand {
      margin: 4.5rem 0 3.5rem;
      text-align: center;
      letter-spacing: 0.125rem;

      a {
        margin: 0;
        color: $brand-color;
        font: 300 3rem sans-serif;

        &:hover {
          color: $brand-hover-color;
          text-shadow: 0 0 1rem $brand-hover-color;
        }
      }
    }
  }

  &-form {
    /*margin-bottom: 2.5rem;
    padding: 1.875rem 1.25rem;
    background: $login-form-background;*/
    color: $login-form-color;

    /*.heading {
      margin: 0 0 1rem;
      font-weight: 400;
      font-size: 1.5rem;
    }*/

    .el-button {
      margin-top: 0.5rem;
      width: 100%;
    }
  }
}
</style>