添加授权管理
This commit is contained in:
hzz
parent
0d4eef91f0
commit
674198c8b8
34
src/api/activation.js
Normal file
34
src/api/activation.js
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* @FilePath: \wang-vue-work\src\api\activation.js
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-01-16 08:22:42
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取激活文件信息
|
||||
export function getServerInfos(query) {
|
||||
return request({
|
||||
url: '/license/getServerInfos',
|
||||
method: 'post',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
// 获取时间信息
|
||||
export function getLicenceDate() {
|
||||
return request({
|
||||
url: '/license/getLicenceDate',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 上传文件
|
||||
export function uploadLicense(query) {
|
||||
return request({
|
||||
url: '/license/uploadLicense',
|
||||
method: 'post',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
213
src/views/system/license/activation.vue
Normal file
213
src/views/system/license/activation.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="activation">
|
||||
<!-- <el-steps class="steps" :active="active" finish-status="success" align-center>
|
||||
<el-step title="服务器选择"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
<div class="step-content" v-if="active == 0">
|
||||
<Server @next="next"></Server>
|
||||
</div>
|
||||
<div class="step-content" v-if="active == 1">
|
||||
1111
|
||||
</div> -->
|
||||
<el-form ref="form" :model="form" label-width="150px">
|
||||
<el-form-item label="获取服务器信息">
|
||||
<el-select v-model="form.osName" placeholder="请选择服务器">
|
||||
<el-option label="windows" value="windows"></el-option>
|
||||
<el-option label="linux" value="linux"></el-option>
|
||||
</el-select>
|
||||
<el-button @click="getInfos">确定</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<div>
|
||||
<div style="width:400px; margin-top: 10px;">
|
||||
|
||||
<el-upload ref="upload" :limit="1" name="uploadFile" accept=".lic" :action="upload.url"
|
||||
:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
|
||||
:auto-upload="false" drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<!-- <div class="el-upload__tip text-center" slot="tip">
|
||||
<span>仅允许导入txt格式文件。</span>
|
||||
</div> -->
|
||||
</el-upload>
|
||||
<el-button type="primary" @click="submitFileForm">注册</el-button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期">
|
||||
<div class="time-end" v-if="!time.check">
|
||||
<h1>{{ time.issuedTime }}</h1>
|
||||
<span>-</span>
|
||||
<h1>{{ time.expiryTime }}</h1>
|
||||
</div>
|
||||
<div class="time-end" v-else>
|
||||
<h1>尚未注册</h1>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
//例如：import 《组件名称》 from '《组件路径》';
|
||||
// import server from '@/views/activationStepltem/serverInformation.vue'
|
||||
import Server from "./serverInformation.vue";
|
||||
import {
|
||||
getServerInfos,
|
||||
getLicenceDate,
|
||||
uploadLicense,
|
||||
} from "@/api/activation.js";
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
Server,
|
||||
},
|
||||
data() {
|
||||
//这里存放数据
|
||||
return {
|
||||
active: 0,
|
||||
form: {
|
||||
osName: "linux",
|
||||
},
|
||||
fileList: [],
|
||||
//到期时间显示
|
||||
time: {
|
||||
expiryTime: "",
|
||||
issuedTime: "",
|
||||
check: 1,
|
||||
},
|
||||
//激活文件上传
|
||||
upload: {
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/license/uploadLicense"
|
||||
}
|
||||
};
|
||||
},
|
||||
//监听属性 类似于data概念
|
||||
computed: {},
|
||||
//监控data中的数据变化
|
||||
watch: {},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() { },
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() {
|
||||
this.getDate();
|
||||
},
|
||||
//生命周期 - 创建之前
|
||||
beforeCreate() { },
|
||||
//生命周期 - 挂载之前
|
||||
beforeMount() { },
|
||||
//生命周期 - 更新之前
|
||||
beforeUpdate() { },
|
||||
//生命周期 - 更新之后
|
||||
updated() { },
|
||||
//生命周期 - 销毁之前
|
||||
beforeDestroy() { },
|
||||
//生命周期 - 销毁完成
|
||||
destroyed() { },
|
||||
//如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() { },
|
||||
//方法集合
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
getDate() {
|
||||
getLicenceDate().then((res) => {
|
||||
this.time.check = res.check;
|
||||
if (!res.check) {
|
||||
this.time.expiryTime = res.expiryTime;
|
||||
this.time.issuedTime = res.issuedTime;
|
||||
}
|
||||
});
|
||||
},
|
||||
getInfos() {
|
||||
this.$modal.loading("正在导出数据，请稍后...");
|
||||
getServerInfos(this.form).then((res) => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' })
|
||||
this.$download.saveAs(blob, "serverInfo.txt")
|
||||
} else {
|
||||
this.$modal.msgError(res.msg);
|
||||
}
|
||||
this.$modal.closeLoading();
|
||||
})
|
||||
},
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code == 200) {
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.time.check = response.check;
|
||||
this.time.expiryTime = response.expiryTime;
|
||||
this.time.issuedTime = response.issuedTime;
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
} else {
|
||||
this.$modal.msgError(response.msg);
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.activation {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.time-end {
|
||||
color: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
|
||||
font-size: 50px;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.time-end {
|
||||
font-size: 20px;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke: 1px #000;
|
||||
}
|
||||
|
||||
.time-end span {
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
146
src/views/system/license/serverInformation.vue
Normal file
146
src/views/system/license/serverInformation.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @FilePath: \wang-vue-work\src\views\activationStepItem\serverInformation.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-01-14 09:36:04
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class='sever'>
|
||||
|
||||
<ul class="select-box">
|
||||
<li class="select-item windows" @click="okserver('windows')">
|
||||
<div>
|
||||
<!-- <el-image :src="src"></el-image>
|
||||
-->
|
||||
<div class="windows-class">
|
||||
<svg-icon icon-class="windows" class-name='windows-class' />
|
||||
</div>
|
||||
|
||||
<h4>windows</h4>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li class="select-item linux" @click="okserver('linux')">
|
||||
<div>
|
||||
<svg-icon icon-class="linux" class-name='linux-class' />
|
||||
<h4>linux</h4>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
//例如：import 《组件名称》 from '《组件路径》';
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
data() {
|
||||
//这里存放数据
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
//监听属性 类似于data概念
|
||||
computed: {},
|
||||
//监控data中的数据变化
|
||||
watch: {},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() {
|
||||
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() {
|
||||
|
||||
},
|
||||
//生命周期 - 创建之前
|
||||
beforeCreate() {
|
||||
|
||||
},
|
||||
//生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
|
||||
},
|
||||
//生命周期 - 更新之前
|
||||
beforeUpdate() {
|
||||
|
||||
},
|
||||
//生命周期 - 更新之后
|
||||
updated() {
|
||||
|
||||
},
|
||||
//生命周期 - 销毁之前
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
//生命周期 - 销毁完成
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
//如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() {
|
||||
|
||||
},
|
||||
//方法集合
|
||||
methods: {
|
||||
okserver(name){
|
||||
console.log(name);
|
||||
this.$emit('next')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.sever{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.select-box{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
padding: 0;
|
||||
padding-top: 50px;
|
||||
|
||||
}
|
||||
.select-item{
|
||||
padding: 20px;
|
||||
list-style: none;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #8a8a8a;
|
||||
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
|
||||
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
|
||||
}
|
||||
|
||||
.select-item:hover {
|
||||
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
|
||||
border: 1px solid #409EFF;
|
||||
cursor: pointer
|
||||
}
|
||||
.select-item:hover .windows-class,
|
||||
.select-item:hover .linux-class{
|
||||
fill: #409EFF;
|
||||
}
|
||||
.select-item h4{
|
||||
margin: 0;
|
||||
margin-top:30px;
|
||||
text-align: center;
|
||||
}
|
||||
.windows-class{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.linux-class{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user