螺纹钢质量信息追溯管理系统的设计与开发
<template>
<div id="login">
<Form ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80">
<div class="formbox">
<div class="form_title">
<img :src="logoPath"
:title="systemclient + systemname"
:onerror="defaultImg"
alt="" />
<h2>钢铁质量系统登录</h2>
</div>
<FormItem label="登录账号："
prop="userName">
<Input ref='userNameInput'
v-model="formValidate.userName"
type="text"
placeholder="请输入账号"
@keydown.enter.native="userNameEnterFun" />
</FormItem>
<FormItem label="登陆密码："
prop="passWord">
<Input ref='passWordInput'
v-model="formValidate.passWord"
type="password"
placeholder="请输入密码"
@keydown.enter.native="passWordEnterFun" />
</FormItem>
<FormItem :label-width="0"
class="form-btn">
<Button type="primary"
@click="login"
:loading="loginLoading">
<span v-if="!loginLoading">登陆</span>
</Button>
</FormItem>
</div>
</Form>
</div>
</div>
</template>
页面java script模块，主要是定义该页面需要使用的实体模型，该实体即可能本地定义和修改数据，也可通过HTTP协议请求服务端数据，采用<script>标签闭合，简单的登录方法代码如下：
<script>
// import config from '@/config'
import md5 from 'js-md5'
import loginApi from '@/api/login'
import { getLastModel } from '@/api/mngdata/loginlog'
import settingApi from '@/api/mngdata/setting'
import Utils from '@/libs/util'
export default {
name: 'Login',
methods: {
// 登录
login () {
let $this = this
this.$refs.formValidate.validate((valid) => {
if (valid) {
$this.loginLoading = true
let requestDataObject = {
'systemCode': this.formValidate.systemCode,
'userName': this.formValidate.userName,
'passWord': md5(this.formValidate.passWord)
}
let requestData = {
// 'source': 3,
'requestData': requestDataObject
}
$this.$store.dispatch('handleLogin', requestData).then(data => {
if (data != null) {
$this.$store.dispatch('getUserInfo').then(data => {
getLastModel().then(function (res) {
if ((typeof (res) !== 'undefined') && (res.data.status === 200)) {
let loginLogInfo = res.data.responseData
Utils.setLastLoginLog(loginLogInfo)
} else {
console.log(res.data.message)
}
}).catch(function (error) {
$this.$Modal.error({
title: '系统异常',
content: error
})
})
// 登录时将路由事先加入
$this.$router.options.routes = $this.$store.getters.userRoutes
// $this.$router.addRoutes($this.$router.options.routes)
$this.$router.$addRoutes($this.$router.options.routes)
settingApi.getMngSystemInfoModel().then(function (res) {
if ((typeof (res) !== 'undefined') && (res.data.status === 200)) {
let settingInfo = res.data.responseData
Utils.setSystemInfo(settingInfo)
$this.$Message.success('登入成功！')
setTimeout(function () {
$this.loginLoading = false
$this.$router.push({ name: 'Home' })
}, 1000)
} else {
console.log(res.data.message)
$this.loginLoading = false
}
}).catch(function (error) {
$this.$Modal.error({
title: '系统异常',
content: error
})
$this.loginLoading = false
})
}).catch(error => {
$this.$Modal.error({
title: '系统异常',
content: error
})
$this.loginLoading = false
})
} else {
$this.loginLoading = false
}
}, err => {
$this.$Message.warning(err)
$this.loginLoading = false
})
} else {
$this.$Message.error('登录信息输入不完全!')
}
})
}
}
}
}
</script>
CSS样式模块，主要用于丰富界面展示效果，采用<style>标签闭合，代码示例如下：
<style>
.saleSellerlogin .btn.btn-primary.btn_code.ivu-btn[disabled] {
background: rgb(157, 157, 157);
border-color: #dcdee2;
cursor: not-allowed;
opacity: 0.5
}
</style>
运行效果图如下：
参考文献
[1] 王子亮. 螺纹钢生产工艺与技术[M]：冶金工业出版社，2008.
[2] 杨旭，王东鹏. 基于CIMS环境下的质量管理信息系统的设计[J].高技术通讯，2000，10(8).
[3] 徐端，舒真，冯水华. 钢铁企业质量管理系统研究与开发[J].控制工程，2005，12(6).
[4] 杨军，刘艳，杜彦蕊. 关于二维码的研究和应用[J].应用科技，2002，29(11).
