浏览代码

【ID1005230】首次登陆,强制更换密码

chenrui 4 年之前
父节点
当前提交
549925275c
共有 5 个文件被更改,包括 189 次插入144 次删除
  1. 1 0
      src/store/getters.js
  2. 6 0
      src/store/modules/user.js
  3. 28 3
      src/views/Home.vue
  4. 8 141
      src/views/user/ChangePwd.vue
  5. 146 0
      src/views/user/ResetPwd.vue

+ 1 - 0
src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   avatar: state => state.user.avatar,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,
   nickname: state => state.user.name,
   salesChannelName: state => state.user.salesChannelName,
   salesChannelName: state => state.user.salesChannelName,
+  mustChangePwd: state => state.user.mustChangePwd,
   welcome: state => state.user.welcome,
   welcome: state => state.user.welcome,
   roles: state => state.user.roles,
   roles: state => state.user.roles,
   userInfo: state => state.user.info,
   userInfo: state => state.user.info,

+ 6 - 0
src/store/modules/user.js

@@ -8,6 +8,7 @@ const user = {
     token: '',
     token: '',
     name: '',
     name: '',
     salesChannelName: '',
     salesChannelName: '',
+    mustChangePwd: null,
     welcome: '',
     welcome: '',
     avatar: '',
     avatar: '',
     roles: { permissionList: [] },
     roles: { permissionList: [] },
@@ -27,6 +28,9 @@ const user = {
     SET_CHANNELNAME: (state, name) => {
     SET_CHANNELNAME: (state, name) => {
       state.salesChannelName = name
       state.salesChannelName = name
     },
     },
+    SET_MUSTCHANGEPWD: (state, status) => {
+      state.mustChangePwd = status
+    },
     SET_AVATAR: (state, avatar) => {
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar
       state.avatar = avatar
     },
     },
@@ -53,6 +57,7 @@ const user = {
               commit('SET_TOKEN', res.access_token)
               commit('SET_TOKEN', res.access_token)
               commit('SET_NAME', { name: users.userNameCN, welcome: welcome() })
               commit('SET_NAME', { name: users.userNameCN, welcome: welcome() })
               commit('SET_CHANNELNAME', users.extInfo.channel.salesChannelName)
               commit('SET_CHANNELNAME', users.extInfo.channel.salesChannelName)
+              commit('SET_MUSTCHANGEPWD', users.mustChangePwd)
               Vue.ls.set('rolesAccess', { permissionList: users.permCodes }, 7 * 24 * 60 * 60 * 1000)
               Vue.ls.set('rolesAccess', { permissionList: users.permCodes }, 7 * 24 * 60 * 60 * 1000)
               commit('SET_AVATAR', res.avatar ? res.avatar : '')
               commit('SET_AVATAR', res.avatar ? res.avatar : '')
               // 记住密码
               // 记住密码
@@ -94,6 +99,7 @@ const user = {
         }).finally(() => {
         }).finally(() => {
           commit('SET_NAME', { name: '', welcome: '' })
           commit('SET_NAME', { name: '', welcome: '' })
           commit('SET_CHANNELNAME', '')
           commit('SET_CHANNELNAME', '')
+          commit('SET_MUSTCHANGEPWD', '')
           commit('SET_AVATAR', '')
           commit('SET_AVATAR', '')
           commit('SET_TOKEN', '')
           commit('SET_TOKEN', '')
           commit('SET_ROLES', { permissionList: [] })
           commit('SET_ROLES', { permissionList: [] })

+ 28 - 3
src/views/Home.vue

@@ -137,10 +137,26 @@
         </a-row>
         </a-row>
       </a-card>
       </a-card>
     </div>
     </div>
+    <!-- 重置密码 -->
+    <a-modal
+      class="resetPwdModal"
+      title="重置密码"
+      width="60%"
+      centered
+      :footer="null"
+      :closable="false"
+      :maskClosable="false"
+      :destroyOnClose="true"
+      @cancel="openResetPwd=false"
+      v-model="openResetPwd">
+      <ResetPwd />
+    </a-modal>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
+import ResetPwd from '@/views/user/ResetPwd.vue'
+import { mapGetters } from 'vuex'
 import {
 import {
   ChartPie,
   ChartPie,
   ChartBar,
   ChartBar,
@@ -155,7 +171,8 @@ export default {
   components: {
   components: {
     ChartPie,
     ChartPie,
     ChartBar,
     ChartBar,
-    ChartLine
+    ChartLine,
+    ResetPwd
   },
   },
   watch: {
   watch: {
     screenWidth (val) {
     screenWidth (val) {
@@ -173,6 +190,7 @@ export default {
     }
     }
   },
   },
   computed: {
   computed: {
+    ...mapGetters(['mustChangePwd']),
     resize () {
     resize () {
       console.log(this.screenWidth, 'this.screenWidth')
       console.log(this.screenWidth, 'this.screenWidth')
       if (this.screenWidth < 1640) {
       if (this.screenWidth < 1640) {
@@ -207,7 +225,6 @@ export default {
       return data
       return data
     }
     }
   },
   },
-
   data () {
   data () {
     return {
     return {
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
@@ -303,7 +320,8 @@ export default {
         couponChartData: [],
         couponChartData: [],
         washTypePieData: [],
         washTypePieData: [],
         chartData: {}
         chartData: {}
-      }
+      },
+      openResetPwd: false //  重置密码是否显示
     }
     }
   },
   },
   methods: {
   methods: {
@@ -424,6 +442,13 @@ export default {
   },
   },
   beforeRouteEnter (to, from, next) {
   beforeRouteEnter (to, from, next) {
     next(vm => {
     next(vm => {
+      //  判断登录用户是否重置过密码(首次登陆需强制重置密码)
+      if (vm.mustChangePwd == 0) {
+        vm.openResetPwd = false
+      } else {
+        vm.openResetPwd = true
+      }
+      console.log(vm.mustChangePwd, '-------是否需要重置密码')
       vm.pageInit()
       vm.pageInit()
       vm.curentType = 'thisWeek'
       vm.curentType = 'thisWeek'
       vm.getCurentSearchTime()
       vm.getCurentSearchTime()

+ 8 - 141
src/views/user/ChangePwd.vue

@@ -1,154 +1,21 @@
 <template>
 <template>
-
   <a-card :bordered="false" class="change-pwd-card">
   <a-card :bordered="false" class="change-pwd-card">
-    <a-row :gutter="24" class="change-pwd">
-      <a-col span="8" offset="8">
-        <a-form @submit="handleSubmit" :form="form">
-          <!-- 原始密码 -->
-          <a-form-item
-            label="原始密码"
-            prop="oldPwd"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.oldPwd',
-                { initialValue: formCustom.oldPwd,
-                  rules: [
-                    { required: true, message: '请输入原始密码' },
-                  ]
-                },
-              ]">
-            </a-input>
-          </a-form-item>
-          <!-- 新密码 -->
-          <a-form-item
-            label="新密码"
-            prop="passwd"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.passwd',
-                { initialValue: formCustom.passwd,
-                  rules: [
-                    { required: true, message: '请输入新密码' }
-                  ]
-                },
-              ]">
-            </a-input>
-          </a-form-item>
-          <!-- 再次确认 -->
-          <a-form-item
-            label="再次确认"
-            prop="passwdCheck"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.passwdCheck',
-                { initialValue: formCustom.passwdCheck,
-                  rules: [
-                    { required: true, message: '请再次输入密码' },
-                    { validator: compareToFirstPassword }
-                  ]
-                },
-              ]">
-            </a-input>
-          </a-form-item>
-          <a-col span="16" offset="8">
-            <a-form-item>
-              <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
-              <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
-            </a-form-item>
-          </a-col>
-        </a-form>
-      </a-col>
-    </a-row>
+    <ResetPwd />
   </a-card>
   </a-card>
-
 </template>
 </template>
 
 
 <script>
 <script>
-import { changePwd } from '@/api/login.js'
-import { mapActions, mapGetters } from 'vuex'
-
+import ResetPwd from '@/views/user/ResetPwd.vue'
 export default {
 export default {
   name: 'ChangePwd',
   name: 'ChangePwd',
-  data () {
-    return {
-      formLayout: {
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 6 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 18 }
-        }
-      },
-      form: this.$form.createForm(this),
-      loading: false,
-      formCustom: {
-        passwd: '',
-        passwdCheck: '',
-        oldPwd: ''
-      }
-    }
-  },
-  methods: {
-    ...mapActions(['Logout']),
-    // 密码校验
-    compareToFirstPassword (rule, value, callback) {
-      const form = this.form
-      if (value && value !== form.getFieldValue('formCustom.passwd')) {
-        callback('两次输入的密码不一致, 请重新输入!')
-      } else {
-        callback()
-      }
-    },
-    handleSubmit (e) {
-      e.preventDefault()
-      const _this = this
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          changePwd({
-            oldPassword: values.formCustom.oldPwd,
-            password: values.formCustom.passwd
-          }).then(res => {
-            if (res.status === '200') {
-              _this.$message.success('修改成功, 请重新登录')
-              _this.logout()
-            }
-          })
-        }
-      })
-    },
-    logout () {
-      this.Logout({}).then(() => {
-        setTimeout(() => {
-          this.$router.push({ path: '/user/login' })
-        }, 16)
-      })
-    },
-    handleReset () {
-      this.form.resetFields()
-    }
+  components: {
+    ResetPwd
   }
   }
-
 }
 }
 </script>
 </script>
 
 
-<style scoped>
-  .change-pwd {
-    margin-top: 15vh;
-  }
-
-  .change-pwd-card {
-    height: 70vh;
-    /* border-top: 2px solid #FFB01B; */
-  }
+<style lang="less" scoped>
+.change-pwd-card {
+  padding-top: 50px;
+}
 </style>
 </style>

+ 146 - 0
src/views/user/ResetPwd.vue

@@ -0,0 +1,146 @@
+<template>
+  <a-row :gutter="24" class="change-pwd">
+    <a-col span="8" offset="8">
+      <a-form @submit="handleSubmit" :form="form">
+        <!-- 原始密码 -->
+        <a-form-item
+          label="原始密码"
+          prop="oldPwd"
+          :label-col="formLayout.labelCol"
+          :wrapper-col="formLayout.wrapperCol">
+          <a-input
+            type="password"
+            :maxLength="12"
+            placeholder="请输入原始密码(6~12位)"
+            v-decorator="[
+              'formCustom.oldPwd',
+              { initialValue: formCustom.oldPwd,
+                rules: [
+                  { required: true, message: '请输入原始密码' },
+                ]
+              },
+            ]">
+          </a-input>
+        </a-form-item>
+        <!-- 新密码 -->
+        <a-form-item
+          label="新密码"
+          prop="passwd"
+          :label-col="formLayout.labelCol"
+          :wrapper-col="formLayout.wrapperCol">
+          <a-input
+            type="password"
+            :maxLength="12"
+            placeholder="请输入新密码(6~12位)"
+            v-decorator="[
+              'formCustom.passwd',
+              { initialValue: formCustom.passwd,
+                rules: [
+                  { required: true, message: '请输入新密码' }
+                ]
+              },
+            ]">
+          </a-input>
+        </a-form-item>
+        <!-- 再次确认 -->
+        <a-form-item
+          label="再次确认"
+          prop="passwdCheck"
+          :label-col="formLayout.labelCol"
+          :wrapper-col="formLayout.wrapperCol">
+          <a-input
+            type="password"
+            :maxLength="12"
+            placeholder="请再次输入新密码(6~12位)"
+            v-decorator="[
+              'formCustom.passwdCheck',
+              { initialValue: formCustom.passwdCheck,
+                rules: [
+                  { required: true, message: '请再次输入密码' },
+                  { validator: compareToFirstPassword }
+                ]
+              },
+            ]">
+          </a-input>
+        </a-form-item>
+        <a-col span="16" offset="8">
+          <a-form-item>
+            <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
+            <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
+          </a-form-item>
+        </a-col>
+      </a-form>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { changePwd } from '@/api/login.js'
+import { mapActions } from 'vuex'
+export default {
+  name: 'ResetPwd',
+  data () {
+    return {
+      formLayout: {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 18 }
+        }
+      },
+      form: this.$form.createForm(this),
+      loading: false,
+      formCustom: {
+        passwd: '',
+        passwdCheck: '',
+        oldPwd: ''
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['Logout']),
+    // 密码校验
+    compareToFirstPassword (rule, value, callback) {
+      const form = this.form
+      if (value && value !== form.getFieldValue('formCustom.passwd')) {
+        callback('两次输入的密码不一致, 请重新输入!')
+      } else {
+        callback()
+      }
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          changePwd({
+            oldPassword: values.formCustom.oldPwd,
+            password: values.formCustom.passwd
+          }).then(res => {
+            if (res.status === '200') {
+              _this.$message.success('修改成功, 请重新登录')
+              _this.logout()
+            }
+          })
+        }
+      })
+    },
+    logout () {
+      this.Logout({}).then(() => {
+        setTimeout(() => {
+          this.$router.push({ path: '/user/login' })
+        }, 16)
+      })
+    },
+    handleReset () {
+      this.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style>
+</style>