284 lines
7.4 KiB
Vue
284 lines
7.4 KiB
Vue
<template>
|
|
<div class="add">
|
|
<md-app md-waterfall md-mode="fixed">
|
|
<md-app-toolbar class="md-primary toolbar">
|
|
<div class="md-toolbar-section-start">
|
|
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
|
<h3 class="md-title" style="flex: 1">{{id_cache?lang.title[1]:lang.title[0]}}</h3>
|
|
</div>
|
|
</md-app-toolbar>
|
|
<md-app-content>
|
|
<div style="height: 54px;"></div>
|
|
<md-field :class="title_verify? '':'md-invalid'">
|
|
<label>{{lang.subheader[0]}}</label>
|
|
<md-input v-model="title" required></md-input>
|
|
<span class="md-error">{{lang.empty_error[0]}}</span>
|
|
</md-field>
|
|
|
|
<md-field :class="user_name_verify? '':'md-invalid'">
|
|
<label>{{lang.subheader[1]}}</label>
|
|
<md-input v-model="user_name" required></md-input>
|
|
<span class="md-error">{{lang.empty_error[1]}}</span>
|
|
</md-field>
|
|
|
|
<md-field :class="password_verify? '':'md-invalid'">
|
|
<label>{{lang.subheader[2]}}</label>
|
|
<md-input v-model="password" required></md-input>
|
|
<span class="md-error">{{lang.empty_error[2]}}</span>
|
|
</md-field>
|
|
|
|
<md-field>
|
|
<label>{{lang.subheader[3]}}</label>
|
|
<md-input v-model="web_address"></md-input>
|
|
</md-field>
|
|
|
|
<md-field>
|
|
<label>{{lang.subheader[4]}}</label>
|
|
<md-textarea v-model="node"></md-textarea>
|
|
</md-field>
|
|
|
|
<md-button class="md-raised md-primary expand" @click="judgeContent()">{{lang.enter}}</md-button>
|
|
</md-app-content>
|
|
</md-app>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// @ is an alias to /src
|
|
import { mapState, mapActions } from 'vuex';
|
|
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
|
import { lang } from '@/utils/language.js'
|
|
|
|
export default {
|
|
name: 'Add',
|
|
data() {
|
|
return {
|
|
clientHeight: '',
|
|
title: '',
|
|
user_name: '',
|
|
password: '',
|
|
node: '',
|
|
web_address: '',
|
|
id_cache: '',
|
|
open_count_cache:'',
|
|
title_verify: true,
|
|
user_name_verify: true,
|
|
password_verify: true,
|
|
lang:''
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['row_data', 'row_pwd', 'settings'])
|
|
},
|
|
methods: {
|
|
...mapActions(['setRowData', 'setRowPwd']),
|
|
// 修改md-app的最小高度
|
|
changeFixed(clientHeight) {
|
|
//动态修改样式
|
|
// console.log(clientHeight);
|
|
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
|
|
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
|
},
|
|
// 初始化
|
|
init() {
|
|
// 刷新vuex
|
|
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
|
// 判断有无用户密码
|
|
if (Object.keys(this.row_pwd).length != 0) {
|
|
// 有密码，已经输入过了
|
|
let now = new Date().getTime();
|
|
if (now - this.row_pwd.create_time < this.settings.expired_time) {
|
|
// 上次写入时间距离现在在（默认五分钟）之内
|
|
// 判断是否是更新
|
|
this.initLanguage()
|
|
if (this.$route.params.modify_content) {
|
|
// 刷新重置数据
|
|
let content = this.$route.params.modify_content
|
|
this.title = content.title
|
|
this.user_name = content.user_name
|
|
this.password = content.password
|
|
this.node = content.node
|
|
this.web_address = content.web_address
|
|
this.id_cache = content.id
|
|
this.open_count_cache = content.open_count
|
|
}
|
|
return
|
|
} else {
|
|
// 密码超时
|
|
this.turnToHome('密码超时');
|
|
}
|
|
} else {
|
|
// 没有密码
|
|
this.turnToHome('无密码');
|
|
}
|
|
},
|
|
|
|
// 配置语言
|
|
initLanguage() {
|
|
if(this.settings.is_chinese) {
|
|
this.lang = lang().add.CHS
|
|
} else {
|
|
this.lang = lang().add.EN
|
|
}
|
|
console.log('语言配置完成')
|
|
},
|
|
|
|
// 对输入框里边的内容进行判断
|
|
judgeContent() {
|
|
// 设置flag
|
|
let can_continue = true
|
|
// 处理title
|
|
if(!(this.title = this.title.trim())) {
|
|
can_continue = false
|
|
this.title_verify = false
|
|
}
|
|
// 处理user_name
|
|
if(!(this.user_name = this.user_name.trim())) {
|
|
can_continue = false
|
|
this.user_name_verify = false
|
|
}
|
|
// 处理password
|
|
if(!(this.password = this.password.trim())) {
|
|
can_continue = false
|
|
this.password_verify = false
|
|
}
|
|
// 根据flag判断是否提交
|
|
if(can_continue) this.submit()
|
|
},
|
|
|
|
// 校验通过进行提交
|
|
submit() {
|
|
// 覆写拦截器
|
|
if(this.id_cache) {
|
|
console.log('覆写拦截器生效')
|
|
this.reWrite()
|
|
return
|
|
}
|
|
// 正常提交
|
|
let data_list
|
|
// 组织内容
|
|
let code = {
|
|
id: this.createId(),
|
|
open_count:0,
|
|
title:this.title,
|
|
user_name:this.user_name,
|
|
password:this.password,
|
|
node:this.node,
|
|
web_address: this.web_address
|
|
}
|
|
// 解密主密码
|
|
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
|
// 判断是不是第一个
|
|
if(this.row_data) {
|
|
// 不是第一个需要进行加解密
|
|
// 解密密码本
|
|
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
|
// json化
|
|
data_list = JSON.parse(data_decrypt);
|
|
data_list.push(code)
|
|
} else {
|
|
// 是第一个
|
|
data_list = [code]
|
|
}
|
|
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
|
this.setRowData([data_list_aes, this])
|
|
console.log('新加密信息保存成功,返回Home');
|
|
this.back()
|
|
},
|
|
|
|
reWrite() {
|
|
let data_list
|
|
// 组织内容
|
|
let code = {
|
|
id: this.id_cache,
|
|
open_count:this.open_count_cache,
|
|
title:this.title,
|
|
user_name:this.user_name,
|
|
password:this.password,
|
|
node:this.node,
|
|
web_address: this.web_address
|
|
}
|
|
// 解密主密码
|
|
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
|
// 解密密码本
|
|
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
|
// json化
|
|
data_list = JSON.parse(data_decrypt);
|
|
// 遍历所有密码
|
|
for(let i in data_list) {
|
|
// 找到该密码
|
|
if(data_list[i].id == code.id) {
|
|
// 覆写
|
|
data_list[i] = code
|
|
}
|
|
}
|
|
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
|
this.setRowData([data_list_aes, this])
|
|
console.log('新加密信息覆写成功,返回详情');
|
|
this.back()
|
|
},
|
|
//返回上一页
|
|
back() {
|
|
this.$router.go(-1)
|
|
},
|
|
|
|
// 强制返回Home
|
|
turnToHome(msg) {
|
|
console.log(msg)
|
|
this.$router.replace('/')
|
|
},
|
|
|
|
// 创建唯一识别码
|
|
createId() {
|
|
// 获取时间戳
|
|
let time = new Date().getTime()
|
|
// 获取随机数
|
|
let random = Math.floor(Math.random()*100);
|
|
// 小于10填0
|
|
random < 10 ? random = '0' + random.toString() : random = random.toString()
|
|
// 拼接
|
|
let id = time.toString() + random
|
|
return id
|
|
}
|
|
},
|
|
created() {
|
|
this.lang = lang().add.CHS
|
|
console.log('临时语言系统加载完成')
|
|
this.init()
|
|
},
|
|
mounted() {
|
|
// 获取浏览器可视区域高度
|
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
|
//document.body.clientWidth;
|
|
window.onresize = function temp() {
|
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
|
};
|
|
},
|
|
watch: {
|
|
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
|
clientHeight: function() {
|
|
this.changeFixed(this.clientHeight);
|
|
},
|
|
},
|
|
beforeDestroy() {},
|
|
components: {}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
@import '../../style/main';
|
|
.add {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background: #fff;
|
|
.expand {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
min-height: 1.2rem !important;
|
|
}
|
|
.toolbar {
|
|
position: fixed !important;
|
|
}
|
|
}
|
|
</style>
|