1.优化项目2.综合看板静态页面初步实现

loulijun2021

2022-07-29 32ec691abab0c837f34ce2c4908a40a10b9dbec7

 src/views/login/index.vue

@@ -61,7 +61,7 @@
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            placeholder="请输入用户编码"
            name="username"
            type="text"
            tabindex="1"
@@ -84,7 +84,7 @@
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            placeholder="请输入用户密码"
            name="password"
            tabindex="2"
            style="width: 100%;"
@@ -116,11 +116,32 @@
      </el-form>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :show-close="false"
      top="5vh"
    >
      <div style="font-size:20px;">
        <!--        <i class="el-icon-warning-outline" style="color: #ffef00" />-->
        当前账号已登录，是否强制下线!
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">否</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">是</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCookie, removeCookie, setCookie } from '@/utils/auth'
import { ForcedOffline } from '@/api/user'

export default {
  name: 'Login',
@@ -134,7 +155,7 @@
      // const mPattern = /^\w+$/ // 正则 等价于[A-Za-z0-9_]

      if (value.length < 1) {
        callback(new Error('账号不能为空！'))
        callback(new Error('用户编码不能为空！'))
      } else {
        callback()
      }
@@ -148,15 +169,15 @@
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('密码长度不能为空！'))
        callback(new Error('用户密码不能为空！'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'Admin', // Admin
        password: '123456'// 123456
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
@@ -166,7 +187,8 @@
      passwordType: 'password',
      redirect: undefined,
      focus1: false,
      focus2: false
      focus2: false,
      dialogVisible: false
    }
  },
  watch: {
@@ -193,7 +215,12 @@
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            console.log(getCookie('code') === '302')
            if (getCookie('code') === '302') {
              this.dialogVisible = true
            } else {
              this.$router.push({ path: this.redirect || '/' })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
@@ -203,6 +230,34 @@
          return false
        }
      })
    },

    dialogVisibleCancel() {
      removeCookie('username')
      removeCookie('admin')
      removeCookie('navTabId')
      removeCookie('usertype')
      removeCookie('userid')
      removeCookie('code')
      this.dialogVisible = false
    },
    async dialogVisibleConfirm() {
      const usercode = getCookie('navTabId')
      const username = getCookie('admin')
      const usertype = getCookie('usertype')
      const userid = getCookie('userid')
      const data = {
        usercode,
        username,
        usertype,
        userid
      }
      const res = await ForcedOffline(data)
      if (res.code === '200') {
        this.$message.success('强制下线成功！')
        this.dialogVisible = false
        this.$router.push({ path: this.redirect || '/' })
      }
    }
  }
}
@@ -393,4 +448,7 @@
    -webkit-text-fill-color: #000 !important;
  }
}
::v-deep .el-dialog__title{
  color: red;
}
</style>