Commit 6e137f66 authored by 柳 佳乐's avatar 柳 佳乐
Browse files

first

parents
Pipeline #20 failed with stages
in 0 seconds
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
// const valid_map = ['admin', 'editor']
// return valid_map.indexOf(str.trim()) >= 0
return str.trim().length>0
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
});
//Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({
s: {
r: R,
c: outRow.length
},
e: {
r: R + rowspan - 1,
c: outRow.length + colspan - 1
}
});
};
//Handle Value
outRow.push(cellValue !== "" ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out, ranges];
};
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
var oo = generateArray(theTable);
var ranges = oo[1];
/* original data */
var data = oo[0];
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
/* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges;
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), "test.xlsx")
}
export function export_json_to_excel({
multiHeader = [],
header,
data,
filename,
merges = [],
autoWidth = true,
bookType = 'xlsx'
} = {}) {
/* original data */
filename = filename || 'excel-list'
data = [...data]
data.unshift(header);
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(item))
})
}
if (autoWidth) {
/*设置worksheet每列的最大宽度*/
const colWidth = data.map(row => row.map(val => {
/*先判断是否为null/undefined*/
if (val == null) {
return {
'wch': 10
};
}
/*再判断是否为中文*/
else if (val.toString().charCodeAt(0) > 255) {
return {
'wch': val.toString().length * 2
};
} else {
return {
'wch': val.toString().length
};
}
}))
/*以第一行为初始值*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: bookType,
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), `${filename}.${bookType}`);
}
/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
export function export_txt_to_zip(th, jsonData, txtName, zipName) {
const zip = new JSZip()
const txt_name = txtName || 'file'
const zip_name = zipName || 'file'
const data = jsonData
let txtData = `${th}\r\n`
data.forEach((row) => {
let tempStr = ''
tempStr = row.toString()
txtData += `${tempStr}\r\n`
})
zip.file(`${txt_name}.txt`, txtData)
zip.generateAsync({
type: "blob"
}).then((blob) => {
saveAs(blob, `${zip_name}.zip`)
}, (err) => {
alert('导出失败')
})
}
<template>
<div class="container">
<el-form
:model="company"
:rules="rules"
ref="form"
label-width="120px"
class="demo-ruleForm"
>
<el-row :gutter="90">
<!-- 左边 -->
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="title">
<p>公司信息:</p>
</div>
<el-form-item label="公司名称" prop="companyName">
<el-input v-model="company.companyName"></el-input>
</el-form-item>
<el-form-item label="公司地址" prop="companyAddress">
<el-input v-model="company.companyAddress"></el-input>
</el-form-item>
<el-form-item label="公司联系电话" prop="companyPhone">
<el-input v-model="company.companyPhone"></el-input>
</el-form-item>
<el-form-item label="公司其他信息" prop="companyInformation">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8 }"
v-model="company.companyInformation"
></el-input>
</el-form-item>
</el-col>
<!-- 右边 -->
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="title">
<p>管理员:</p>
</div>
<el-form-item label="管理员姓名" prop="userName">
<el-input v-model="company.userName"></el-input>
</el-form-item>
<el-form-item label="管理员性别" prop="userSex">
<el-select v-model="company.userSex" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="管理员账号" prop="userAdmin">
<el-input v-model="company.userAdmin"></el-input>
</el-form-item>
<el-form-item label="管理员密码" prop="userPassword">
<el-input v-model="company.userPassword"></el-input>
</el-form-item>
<el-form-item label="管理员手机号" prop="userPhone">
<el-input v-model="company.userPhone"></el-input>
</el-form-item>
<el-form-item label="管理员身份证" prop="userIdentification">
<el-input v-model="company.userIdentification"></el-input>
</el-form-item>
<el-form-item label="管理员银行卡号" prop="userBankNumber">
<el-input v-model="company.userBankNumber"></el-input>
</el-form-item>
<el-form-item label="银行卡号开户行" prop="userBankAddress">
<el-input v-model="company.userBankAddress"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="footer">
<el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="reset">重置信息</el-button>
</div>
</div>
</template>
<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import {register} from '@/api/company'
export default {
data() {
return {
company: {
companyName:null,
companyAddress:null,
companyPhone:null,
companyInformation:null,
companyCreateTime:null,
userName:null,
userSex:null,
userAdmin:null,
userPassword:null,
userPhone:null,
userIdentification:null,
userBankNumber:null,
userBankAddress:null,
rlId:2,
},
options: [
{
value: 1,
label: ''
},
{
value: 0,
label: ''
},
],
rules: {
companyName:[
{ required: true, message: '请输入公司名称', trigger: 'blur' },
],
companyAddress:[
{ required: true, message: '请输入公司地址', trigger: 'blur' },
],
companyPhone:[
{required:true, validator:checkPhone, trigger: ['blur', 'change']},
],
userName:[
{ required: true, message: '请输入管理员名称', trigger: 'blur' },
],
userSex:[
{ required: true, message: '请选择性别', trigger: 'change' },
],
userAdmin:[
{ required: true, message: '请输入账号', trigger: 'blur' },
],
userPassword:[
{ required: true, message: '请输入密码', trigger: 'blur' },
],
userPhone:[
{required:true, validator:checkPhone, trigger: ['blur', 'change']},
],
userIdentification:[
{required:true, validator:chinaIdentityValid, trigger:'blur'},
],
userBankNumber:[
{required:true, validator:bankAccountValid, trigger:'blur'},
],
userBankAddress:[
{ required: true, message: '请输入开户行', trigger: 'blur' },
],
},
}
},
created(){
},
methods:{
//重置数据
reset(){
this.$refs.form.resetFields()
},
//提交数据
update(){
//先校验
this.$refs.form.validate((valida)=>{
if(valida){
//时间赋值
this.company.companyCreateTime = this.timestampToTime()
//提交
register(this.company).then((res)=>{
if(res.status == "success"){
this.$message.success("添加成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/companyList")
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("添加失败")
})
}
})
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime() {
var date = new Date()
var Y = date.getFullYear() + '-'
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':'
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
return Y+M+D+h+m+s
}
}
};
</script>
<style>
.container {
padding: 10px;
}
.title {
font-size: 20px;
font-weight: 600;
}
.footer{
width: 100%;
text-align: center;
margin-top:20px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="header">
<el-form :inline="true" :model="companyQurey">
<el-form-item label="公司名称">
<el-input v-model="companyQurey.companyName" placeholder="公司名称"></el-input>
</el-form-item>
<el-form-item label="公司地址">
<el-input v-model="companyQurey.companyAddress" placeholder="公司地址"></el-input>
</el-form-item>
<el-form-item label="公司联系电话">
<el-input v-model="companyQurey.companyPhone" placeholder="公司联系电话"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addcompany()">添加公司</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="companyList"
style="width: 100%;text-align: center;"
border>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{ (companyQurey.pageNum - 1) * companyQurey.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="companyName" label="公司名称"/>
<el-table-column prop="companyAddress" label="公司地址"/>
<el-table-column prop="companyPhone" label="公司联系电话"/>
<el-table-column prop="companyCreateTime" label="公司注册时间"/>
<el-table-column prop="companyInformation" label="公司其他信息"/>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="companyQurey.pageNum"
:page-size="companyQurey.pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {select} from '@/api/company'
export default {
data(){
return{
companyQurey:{
companyName:null,
companyAddress:null,
companyPhone:null,
pageSize:10,
pageNum:1,
},
total:0,
companyList:[],
}
},
created(){
this.getCompany()
},
methods:{
//查询公司
getCompany(){
select(this.companyQurey).then((res)=>{
if(res.status = "success"){
this.total = res.data.total
this.companyList = res.data.list
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
console.log(error)
})
},
//换页
handleCurrentChange(val){
this.companyQurey.pageNum = val
this.getCompany();
},
//添加公司
addcompany(){
this.$router.push("/companyadd")
},
//查询
qurey(){
this.companyQurey.pageNum = 1
this.getCompany();
},
//重置
reset(){
this.companyQurey={
companyName:null,
companyAddress:null,
companyPhone:null,
pageSize:10,
pageNum:1,
}
this.getCompany();
}
}
}
</script>
<style scoped>
.container{
padding: 10px;
}
.conter{
margin-bottom: 10px;
}
.footer{
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="errPage-container">
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
返回
</el-button>
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">
Oops!
</h1>
gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
<h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6>
<ul class="list-unstyled">
<li>或者你可以去:</li>
<li class="link-type">
<router-link to="/dashboard">
回首页
</router-link>
</li>
<li class="link-type">
<a href="https://www.taobao.com/">随便看看</a>
</li>
<li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
</ul>
</el-col>
<el-col :span="12">
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
</el-col>
</el-row>
<el-dialog :visible.sync="dialogVisible" title="随便看">
<img :src="ewizardClap" class="pan-img">
</el-dialog>
</div>
</template>
<script>
import errGif from '@/assets/401_images/401.gif'
export default {
name: 'Page401',
data() {
return {
errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false
}
},
methods: {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' })
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss" scoped>
.errPage-container {
width: 800px;
max-width: 100%;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
border: none!important;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
width: 100%;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">All rights reserved
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
<a href="" class="bullshit__return-home">Back to home</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Page404',
computed: {
message() {
return 'The webmaster said that you can not enter this page...'
}
}
}
</script>
<style lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
<template>
<div>我是报销单</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<!-- 登录页面 -->
<div class="login-container">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
label-position="left"
>
<div class="title-container">
<h3 class="title">财务管理后台系统</h3>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="Username"
name="username"
type="text"
tabindex="1"
autocomplete="false"
/>
</el-form-item>
<el-tooltip
v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual
>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="Password"
name="password"
tabindex="2"
autocomplete="false"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>
</el-tooltip>
<!-- <div class="title-container">
<h3 class="content" @click="register">注册新公司</h3>
</div> -->
<el-button
:loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.native.prevent="handleLogin"
>登 录</el-button
>
</el-form>
</div>
</template>
<script>
import { validUsername } from "@/utils/validate";
export default {
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error("请输入账号"));
} else {
callback();
}
};
return {
loginForm: {
username: null,
password: null,
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
},
passwordType: "password",
capsTooltip: false,
loading: false,
redirect: undefined,
otherQuery: {},
};
},
watch: {
$route: {
handler: function (route) {
const query = route.query;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
}
},
immediate: true,
},
},
created() {},
mounted() {
if (this.loginForm.username === "") {
this.$refs.username.focus();
} else if (this.loginForm.password === "") {
this.$refs.password.focus();
}
},
destroyed() {
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
checkCapslock(e) {
const { key } = e;
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
this.$nextTick(() => {
this.$refs.password.focus();
});
},
handleLogin() {
// loginForm表单验证
this.$refs.loginForm.validate((valid) => {
// 验证成功
if (valid) {
this.loading = true;
// 派发到store的user/login action
this.$store
.dispatch("user/login", this.loginForm)
.then((res) => {
// 登录成功
// 路由到首页,指定query参数
if (res.status == "success") {
this.$router.push({
path: "/",
query: this.otherQuery,
});
this.loading = false;
} else {
this.$message({
type: "error",
message: res.data,
});
this.loading = false;
}
})
.catch(() => {
// 异常
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => {
if (cur !== "redirect") {
acc[cur] = query[cur];
}
return acc;
}, {});
},
register(){
this.$router.push("/register")
}
},
};
</script>
<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
}
}
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.content {
font-size: 12px;
color: $dark_gray;
text-align: right;
padding: 0px 10px;
cursor: pointer;
}
.content:hover {
font-size: 13px;
color: $light_gray;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.thirdparty-button {
position: absolute;
right: 0;
bottom: 6px;
}
@media only screen and (max-width: 470px) {
.thirdparty-button {
display: none;
}
}
}
</style>
<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
action="http://127.0.0.1:7080/file/uploadFile"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:data="pram"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
pram:{
status:0,
Id:3
}
};
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment