vue版本上线

jshERP-web/src/views/user/Login.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="main">
+    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+      <a-form-item>
+        <a-input
+          size="large"
+          v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules}]"
+          type="text"
+          placeholder="请输入帐户名">
+          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules}]"
+          size="large"
+          type="password"
+          autocomplete="false"
+          placeholder="密码">
+          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item>
+        <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登陆</a-checkbox>
+        <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
+          注册账户
+        </router-link>
+      </a-form-item>
+
+      <a-form-item style="margin-top:24px">
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="login-button"
+          :loading="loginBtn"
+          @click.stop.prevent="handleSubmit"
+          :disabled="loginBtn">确定
+        </a-button>
+      </a-form-item>
+
+      <div class="login-copyright">
+        <a-row>
+          <a-col>
+            © 2015-2030 {{systemTitle}} - Powered By
+            <a style="color:#00458a;" href="http://www.huaxiaerp.com/" target="_blank">官方网站</a>
+          </a-col>
+        </a-row>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script>
+  import md5 from "md5"
+  import api from '@/api'
+  import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+  import { mapActions } from "vuex"
+  import { timeFix } from "@/utils/util"
+  import Vue from 'vue'
+  import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
+  import { putAction,postAction,getAction } from '@/api/manage'
+  import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'
+  import store from '@/store/'
+  import { USER_INFO } from "@/store/mutation-types"
+
+  export default {
+    components: {
+      TwoStepCaptcha
+    },
+    data () {
+      return {
+        customActiveKey: "tab1",
+        systemTitle: window.SYS_TITLE,
+        loginBtn: false,
+        // login type: 0 email, 1 username, 2 telephone
+        loginType: 0,
+        requiredTwoStepCaptcha: false,
+        stepCaptchaVisible: false,
+        form: this.$form.createForm(this),
+        encryptedString:{
+          key:"",
+          iv:"",
+        },
+        state: {
+          time: 60,
+          smsSendBtn: false,
+        },
+        validatorRules:{
+          username:{rules: [{ required: true, message: '请输入用户名!'},{validator: this.handleUsernameOrEmail}]},
+          password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]}
+        },
+        verifiedCode:"",
+        inputCodeContent:"", //20200510 cfm: 为方便测试，不输入验证码可 ""-->"xxxx"
+        inputCodeNull:true,
+        departList:[],
+        departVisible:false,
+        departSelected:"",
+        currentUsername:"",
+        validate_status:"",
+        currdatetime:'',
+        randCodeImage:'',
+        requestCodeSuccess:false
+      }
+    },
+    created () {
+      this.currdatetime = new Date().getTime();
+      Vue.ls.remove(ACCESS_TOKEN)
+      this.getRouterData();
+    },
+    methods: {
+      ...mapActions([ "Login", "Logout","PhoneLogin","ThirdLogin" ]),
+      //第三方登录
+      onThirdLogin(source){
+        let url = window._CONFIG['domianURL']+`/thirdLogin/render/${source}`
+        window.open(url, `login ${source}`, 'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
+        let that = this;
+        let receiveMessage = function(event){
+          var origin = event.origin
+          console.log("origin",origin);
+
+          let token = event.data
+          console.log("event.data",token)
+          that.ThirdLogin(token).then(res=>{
+            if(res.success){
+              that.loginSuccess()
+            }else{
+              that.requestFailed(res);
+            }
+          })
+        }
+        window.addEventListener("message", receiveMessage, false);
+      },
+      // handler
+      handleUsernameOrEmail (rule, value, callback) {
+        const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
+        if (regex.test(value)) {
+          this.loginType = 0
+        } else {
+          this.loginType = 1
+        }
+        callback()
+      },
+      handleTabClick (key) {
+        this.customActiveKey = key
+        // this.form.resetFields()
+      },
+      handleSubmit () {
+        let that = this
+        let loginParams = {};
+        that.loginBtn = true;
+        // 使用账户密码登陆
+        if (that.customActiveKey === 'tab1') {
+          that.form.validateFields([ 'username', 'password','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
+            if (!err) {
+              loginParams.loginName = values.username
+              // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
+              //loginParams.password = md5(values.password)
+              //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
+              loginParams.password = md5(values.password)
+              //loginParams.remember_me = values.rememberMe
+              // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
+              //loginParams.captcha = that.inputCodeContent
+              //loginParams.checkKey = that.currdatetime
+              console.log("登录参数",loginParams)
+              that.Login(loginParams).then((res) => {
+                this.departConfirm(res)
+              }).catch((err) => {
+                that.requestFailed(err);
+              });
+            }else {
+              that.loginBtn = false;
+            }
+          })
+          // 使用手机号登陆
+        } else {
+          that.form.validateFields([ 'mobile', 'captcha', 'rememberMe' ], { force: true }, (err, values) => {
+            if (!err) {
+              loginParams.mobile = values.mobile
+              loginParams.captcha = values.captcha
+              loginParams.remember_me = values.rememberMe
+              that.PhoneLogin(loginParams).then((res) => {
+                console.log(res.result);
+                this.departConfirm(res)
+              }).catch((err) => {
+                that.requestFailed(err);
+              })
+
+            }
+          })
+        }
+      },
+      loginSuccess () {
+        // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
+        // this.loginBtn = false
+        // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
+        this.$router.push({ path: "/dashboard/analysis" })
+        this.$notification.success({
+          message: '欢迎',
+          description: `${timeFix()}，欢迎回来`,
+        });
+        this.initMPropertyShort();
+      },
+      cmsFailed(err){
+        this.$notification[ 'error' ]({
+          message: "登录失败",
+          description:err,
+          duration: 4,
+        });
+      },
+      requestFailed (err) {
+        this.$notification[ 'error' ]({
+          message: '登录失败',
+          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
+          duration: 4,
+        });
+        this.loginBtn = false;
+      },
+      generateCode(value){
+        this.verifiedCode = value.toLowerCase()
+      },
+      departConfirm(res){
+        if(res.code==200){
+          let err = {};
+          if(res.data.msgTip == 'user can login'){
+            this.loginSuccess()
+          } else if(res.data.msgTip == 'user is not exist'){
+            err.message = '用户不存在';
+            this.requestFailed(err)
+            this.Logout();
+          } else if(res.data.msgTip == 'user password error'){
+            err.message = '用户密码不正确';
+            this.requestFailed(err)
+            this.Logout();
+          } else if(res.data.msgTip == 'user is black'){
+            err.message = '用户被禁用';
+            this.requestFailed(err)
+            this.Logout();
+          } else if(res.data.msgTip == 'access service error'){
+            err.message = '查询服务异常';
+            this.requestFailed(err)
+            this.Logout();
+          }
+        }else{
+          this.requestFailed(res)
+          this.Logout();
+        }
+      },
+      getRouterData(){
+        this.$nextTick(() => {
+          if (this.$route.params.username) {
+            this.form.setFieldsValue({
+              'username': this.$route.params.username
+            });
+          }
+        })
+      },
+      //获取密码加密规则
+      getEncrypte(){
+        var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
+        if(encryptedString == null){
+          getEncryptedString().then((data) => {
+            this.encryptedString = data
+          });
+        }else{
+          this.encryptedString = encryptedString;
+        }
+      },
+      initMPropertyShort(){
+        let mPropertyListShort = '';
+        let params = {};
+        params.currentPage = 1;
+        params.pageSize = 100;
+        getAction('/materialProperty/list', params).then((res) => {
+          if(res && res.code === 200){
+            if(res.data) {
+              let thisRows = res.data.rows; //属性列表
+              Vue.ls.set('materialPropertyList', thisRows, 7 * 24 * 60 * 60 * 1000);
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .user-layout-login {
+    label {
+      font-size: 14px;
+    }
+
+    .getCaptcha {
+      display: block;
+      width: 100%;
+      height: 40px;
+    }
+
+    .forge-password {
+      font-size: 14px;
+    }
+
+    button.login-button {
+      padding: 0 15px;
+      font-size: 16px;
+      height: 40px;
+      width: 100%;
+    }
+
+    .user-login-other {
+      text-align: left;
+      margin-top: 24px;
+      line-height: 22px;
+
+      .item-icon {
+        font-size: 24px;
+        color: rgba(0,0,0,.2);
+        margin-left: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color .3s;
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+
+      .register {
+        float: right;
+      }
+    }
+  }
+
+</style>
+<style>
+  .valid-error .ant-select-selection__placeholder{
+    color: #f5222d;
+  }
+  .login-copyright {
+    text-align: center;
+    margin-top: 20px
+  }
+  .login-copyright, .login-copyright a {
+    color: #666
+  }
+</style>

jshERP-web/src/views/user/Register.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="main user-layout-register">
+    <a-form ref="formRegister" :autoFormCreate="(form)=>{this.form = form}" id="formRegister">
+      <a-form-item
+        fieldDecoratorId="username"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '用户名不能为空'}], validateTrigger: ['change', 'blur'], validateFirst: true}">
+        <a-input size="large" type="text" autocomplete="false" placeholder="请输入用户名"></a-input>
+      </a-form-item>
+
+      <a-popover placement="rightTop" trigger="click" :visible="state.passwordLevelChecked">
+        <template slot="content">
+          <div :style="{ width: '240px' }">
+            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
+            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor "/>
+            <div style="margin-top: 10px;">
+              <span>请至少输入 8 个字符。请不要使用容易被猜到的密码。</span>
+            </div>
+          </div>
+        </template>
+        <a-form-item
+          fieldDecoratorId="password"
+          :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur'], validateFirst: true}">
+          <a-input size="large" type="password" @click="handlePasswordInputClick" autocomplete="false" placeholder="至少8位密码，区分大小写"></a-input>
+        </a-form-item>
+      </a-popover>
+
+      <a-form-item
+        fieldDecoratorId="password2"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur'], validateFirst: true}">
+
+        <a-input size="large" type="password" autocomplete="false" placeholder="确认密码"></a-input>
+      </a-form-item>
+
+      <a-row :gutter="0">
+        <a-col :span="16">
+          <a-form-item fieldDecoratorId="inputCode">
+            <!--20200510 cfm: 为方便测试，不输入验证码可： default-value="xxxx"-->
+            <a-input
+              size="large"
+              type="text"
+              default-value=""
+              @change="inputCodeChange"
+              placeholder="请输入验证码">
+              <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8" style="text-align: right">
+          <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
+          <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
+        </a-col>
+      </a-row>
+
+      <a-form-item>
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="register-button"
+          :loading="registerBtn"
+          @click.stop.prevent="handleSubmit"
+          :disabled="registerBtn">注册
+        </a-button>
+        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
+      </a-form-item>
+
+      <div class="login-copyright">
+        <a-row>
+          <a-col>
+            © 2015-2030 {{systemTitle}} - Powered By
+            <a style="color:#00458a;" href="http://www.huaxiaerp.com/" target="_blank">官方网站</a>
+          </a-col>
+        </a-row>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script>
+  import {mixinDevice} from '@/utils/mixin.js'
+  import {getSmsCaptcha} from '@/api/login'
+  import {getAction, postAction} from '@/api/manage'
+  import {checkOnlyUser} from '@/api/api'
+
+  const levelNames = {
+    0: '低',
+    1: '低',
+    2: '中',
+    3: '强'
+  }
+  const levelClass = {
+    0: 'error',
+    1: 'error',
+    2: 'warning',
+    3: 'success'
+  }
+  const levelColor = {
+    0: '#ff0000',
+    1: '#ff0000',
+    2: '#ff7e05',
+    3: '#52c41a',
+  }
+  export default {
+    name: "Register",
+    components: {},
+    mixins: [mixinDevice],
+    data() {
+      return {
+        systemTitle: window.SYS_TITLE,
+        form: null,
+        randCode:'',
+        randCodeImage:'',
+        requestCodeSuccess:false,
+        state: {
+          time: 60,
+          smsSendBtn: false,
+          passwordLevel: 0,
+          passwordLevelChecked: false,
+          percent: 10,
+          progressColor: '#FF0000'
+        },
+        registerBtn: false
+      }
+    },
+    computed: {
+      passwordLevelClass() {
+        return levelClass[this.state.passwordLevel]
+      },
+      passwordLevelName() {
+        return levelNames[this.state.passwordLevel]
+      },
+      passwordLevelColor() {
+        return levelColor[this.state.passwordLevel]
+      }
+    },
+    created () {
+      this.handleChangeCheckCode();
+    },
+    methods: {
+      handleChangeCheckCode(){
+        this.currdatetime = new Date().getTime();
+        getAction(`/user/randomImage/${this.currdatetime}`).then(res=>{
+          if(res.code == 200){
+            this.randCode = res.data.codeNum;
+            this.randCodeImage = res.data.base64;
+            this.requestCodeSuccess=true
+          }else{
+            this.$message.error(res.data)
+            this.requestCodeSuccess=false
+          }
+        }).catch(()=>{
+          this.requestCodeSuccess=false
+        })
+      },
+      handlePasswordLevel(rule, value, callback) {
+
+        let level = 0
+        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
+        if (!reg.test(value)) {
+          callback(new Error('密码由8位数字、大小写字母和特殊符号组成!'))
+        }
+        // 判断这个字符串中有没有数字
+        if (/[0-9]/.test(value)) {
+          level++
+        }
+        // 判断字符串中有没有字母
+        if (/[a-zA-Z]/.test(value)) {
+          level++
+        }
+        // 判断字符串中有没有特殊符号
+        if (/[^0-9a-zA-Z_]/.test(value)) {
+          level++
+        }
+        this.state.passwordLevel = level
+        this.state.percent = level * 30
+        if (level >= 2) {
+          if (level >= 3) {
+            this.state.percent = 100
+          }
+          callback()
+        } else {
+          if (level === 0) {
+            this.state.percent = 10
+          }
+          callback(new Error('密码强度不够'))
+        }
+      },
+
+      handlePasswordCheck(rule, value, callback) {
+        let password = this.form.getFieldValue('password')
+        //console.log('value', value)
+        if (value === undefined) {
+          callback(new Error('请输入密码'))
+        }
+        if (value && password && value.trim() !== password.trim()) {
+          callback(new Error('两次密码不一致'))
+        }
+        callback()
+      },
+
+      handlePhoneCheck(rule, value, callback) {
+        var params = {
+          phone: value,
+        };
+        checkOnlyUser(params).then((res) => {
+          if (res.success) {
+            callback()
+          } else {
+            callback("手机号已存在!")
+          }
+        })
+      },
+
+      handlePasswordInputClick() {
+        if (!this.isMobile()) {
+          this.state.passwordLevelChecked = true
+          return;
+        }
+        this.state.passwordLevelChecked = false
+      },
+
+      handleSubmit() {
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            if(values.inputCode == this.randCode) {
+              let register = {
+                loginName: values.username,
+                password: values.password
+              };
+              postAction("/user/registerUser", register).then((res) => {
+                if(res.code === 200){
+                  this.$notification.success({
+                    message: '提示',
+                    description: "注册成功，请进行登录！",
+                    duration: 2
+                  });
+                  let that = this;
+                  setTimeout(function () {
+                    that.form.resetFields();
+                  },2000);
+                } else {
+                  this.$notification['error']({
+                    message: "提示",
+                    description: "注册失败",
+                    duration: 2
+                  });
+                }
+              })
+            } else {
+              this.$notification['error']({
+                message: "提示",
+                description: "验证码错误",
+                duration: 2
+              });
+            }
+          }
+        })
+      },
+      registerFailed(message) {
+        this.$notification['error']({
+          message: "注册失败",
+          description: message,
+          duration: 2,
+        });
+
+      },
+      requestFailed(err) {
+        this.$notification['error']({
+          message: '错误',
+          description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
+          duration: 4,
+        });
+        this.registerBtn = false;
+      },
+    },
+    watch: {
+      'state.passwordLevel'(val) {
+        console.log(val)
+
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .user-register {
+
+    &.error {
+      color: #ff0000;
+    }
+
+    &.warning {
+      color: #ff7e05;
+    }
+
+    &.success {
+      color: #52c41a;
+    }
+
+  }
+
+  .user-layout-register {
+    .ant-input-group-addon:first-child {
+      background-color: #fff;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .user-layout-register {
+
+    & > h3 {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+
+    .getCaptcha {
+      display: block;
+      width: 100%;
+      height: 40px;
+    }
+
+    .register-button {
+      width: 50%;
+    }
+
+    .login {
+      float: right;
+      line-height: 40px;
+    }
+  }
+  .login-copyright {
+    text-align: center;
+    margin-top: 20px
+  }
+  .login-copyright, .login-copyright a {
+    color: #666
+  }
+</style>

jshERP-web/src/views/user/RegisterResult.vue

@@ -0,0 +1,52 @@
+<template>
+  <result
+    :isSuccess="true"
+    :content="false"
+    :title="email">
+
+    <template slot="action">
+      <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
+    </template>
+
+  </result>
+</template>
+
+<script>
+  import Result from '@/views/result/Result'
+
+  export default {
+    name: "RegisterResult",
+    components: {
+      Result
+    },
+    data () {
+      return {
+        form: {},
+      }
+    },
+    computed: {
+      email () {
+        let v = this.form ? this.form.username || this.form.mobile : ' XXX '
+        let title = `你的账户：${v} 注册成功`
+        this.username = v;
+        return title
+      }
+    },
+    created () {
+      this.form = this.$route.params
+    },
+    methods: {
+      goHomeHandle () {
+        let params={};
+        params.username=this.form.username;
+        params.password=this.form.password;
+        console.log(params);
+        this.$router.push({name:'login',params})
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>