表单添加回车提交,修改退出用户,修改路由过滤

components/form.md

@@ -14,6 +14,7 @@
 |options|object|`-`|否|标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)|
 |custom|Boolean|`-`|否|是否使用自定义插槽|
 |tip|String|`-`|否|提示语,例如:请输入11位电话号码|
+|labelWidth|String|`120px`|否|表单label宽度,element的,默认120px|
 
 ###### rules
 > object类型 非必填 校验规则,不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以~~(那就厉害了,反正我是不行)~~

components/form.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="add">
-    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form" size="small" @submit.native.prevent :style="styles">
+    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" class="form" size="small" @submit.native.prevent :style="styles">
       <template v-for="(item, index) in fields">
         <template v-if="!loading">
           <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
@@ -49,6 +49,7 @@
                     v-model="form[item.model]"
                     :type="getField('type', item)"
                     :placeholder="getField('placeholder', item)"
+                    :show-password="getField('type', item) === 'password'"
                     v-bind="item.options"
                   ></el-input>
                 </template>
@@ -86,6 +87,8 @@ export default {
     data: null,
     styles: { type: Object, default: () => {} },
     needSave: { type: Boolean, default: true },
+    labelWidth: { type: String, default: '120px' },
+    useEnter: { type: Boolean, default: true },
   },
   components: {
     wangEditor,
@@ -96,7 +99,16 @@ export default {
     dateShow: false,
     loading: true,
   }),
-  created() {},
+  created() {
+    if (this.useEnter) {
+      document.onkeydown = () => {
+        let key = window.event.keyCode;
+        if (key == 13) {
+          this.save();
+        }
+      };
+    }
+  },
   computed: {},
   mounted() {},
   watch: {

layout/admin/navBar.vue

@@ -72,8 +72,7 @@ export default {
       if (type === 'passwd') this.toPasswd();
     },
     async toLogin() {
-      //TODO
-      console.log(`to login page`);
+      this.$router.push({ name: 'login' });
     },
     toPasswd() {
       this.dialog = true;

layout/register/login.vue

@@ -3,19 +3,9 @@
     <el-row>
       <el-col :span="24" class="style" :style="'background: url(' + loginBei + ')no-repeat center center;'">
         <el-col :span="24" class="login">
-          <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tabs v-model="activeName" type="border-card" :stretch="true">
             <el-tab-pane label="账号登录" name="first">
-              <el-form ref="form" :model="form" label-width="80px">
-                <el-form-item label="用户名">
-                  <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
-                </el-form-item>
-                <el-form-item label="密码">
-                  <el-input v-model="form.password" show-password placeholder="请输入用户密码"></el-input>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" @click="onSubmit">登录</el-button>
-                </el-form-item>
-              </el-form>
+              <data-form :data="{}" :fields="fields" :rules="rules" @save="handleSave" :isNew="true" label-width="80px" :styles="{}"> </data-form>
             </el-tab-pane>
             <el-tab-pane label="扫码登录" name="second">
               扫码登录
@@ -28,24 +18,33 @@
 </template>
 
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import dataForm from '@frame/components/form';
+import _ from 'lodash';
+const { mapActions } = createNamespacedHelpers('login');
 export default {
   name: 'login',
-  props: {
-    form: null,
-  },
-  components: {},
+  props: {},
+  components: { dataForm },
   data: () => ({
     loginBei: require('../../assets/bg.jpg'),
     activeName: 'first',
+    fields: [
+      { label: '手机号', required: true, model: 'mobile', options: { maxLength: 11, minLength: 11 } },
+      { label: '密码', required: true, model: 'passwd', type: 'password' },
+    ],
+    rules: {
+      name: [{ required: true, message: '请输入用户名' }],
+      passwd: [{ required: true, message: '请输入密码' }],
+    },
+    form: {},
   }),
   created() {},
   computed: {},
   methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-    onSubmit() {
-      this.$emit('onSubmit', { data: this.form });
+    ...mapActions(['login']),
+    async handleSave({ data }) {
+      let res = await this.login({ user: data, router: this.$router });
     },
   },
 };

store/login.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import _ from 'lodash';
+import { Notification } from 'element-ui';
 const jwt = require('jsonwebtoken');
 Vue.use(Vuex);
 const api = {
@@ -11,15 +12,35 @@ const state = () => ({});
 const mutations = {};
 
 const actions = {
-  async login({ commit }, payload) {
-    const res = await this.$axios.$post(`${api.interface}`, payload);
-    let result = true;
+  async login({ commit }, { user, router }) {
+    const res = await this.$axios.$post(`${api.interface}`, user);
     if (res.errcode === 0) {
-      let info = jwt.decode(res.data);
-      localStorage.setItem('user', JSON.stringify(info));
-      commit('setUser', info, { root: true });
-    } else result = res;
-    return result;
+      let user = jwt.decode(res.data);
+      if (user.type == process.env.VUE_APP_USER_TYPE) {
+        localStorage.setItem('user', JSON.stringify(user));
+        commit('setUser', user, { root: true });
+        Notification({
+          title: '登录成功',
+          message: `欢迎,${user.name}`,
+          type: 'success',
+          duration: 2000,
+        });
+        router.push('/');
+      } else {
+        Notification({
+          title: '请重新登陆',
+          message: `原因:非当前端用户,需要重新登陆`,
+          type: 'warning',
+        });
+        console.warn('非当前端用户,需要重新登陆');
+      }
+    } else {
+      Notification({
+        title: '登录失败',
+        message: `失败原因:${res.errmsg}`,
+        type: 'error',
+      });
+    }
   },
   async update({ commit }, { id, ...info }) {
     let res = await this.$axios.$post(`${api.user(id)}`, info);