XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-09-09 15:51:08 +08:00
parent 70b9a2fb06
commit 19846ad425
1 changed files with 184 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

482
src/views/system/upgrade/index.vue
View File

@ -1,24 +1,21 @@
<template>
<x-page-header title="系统更新" description="你可以随时检查使用系统是否是最新版本，并进行一键升级" icon="el-icon-setting"></x-page-header>
<div class="x-update">
<el-alert title="当前为更新系统核心架构; 更新前，您需要备份您的数据，防止数据丢失。" type="warning" style="padding: 10px 0;" />
<el-alert title="相关应用请单独更新, 框架更新可能导致部分应用报错。" type="error" style="padding: 10px 0;" />
<!-- 登录状态 -->
<div v-if="isLogin" class="login-box">
<div v-if="userData.uid" class="login-box">
<!-- 头像 -->
<div class="face">
<img v-if="userData.img" :src="userData.img" alt="">
<span v-else>{{ userData.name }}</span>
<img v-if="userData.avatar" :src="userData.avatar" alt="">
<span v-else style="text-transform: capitalize;">{{ userData.username }}</span>
</div>
<!-- 信息 -->
<div class="info">
<span class="name">{{ userData.name }}</span>
<span class="title">{{ userData.title }}</span>
<p>{{ userData.companyName }}</p>
<span class="name" style="text-transform: capitalize;">{{ userData.username }}</span>
<span class="title">授权 {{ name }}</span>
<p>{{ authorizationtime }}</p>
<p>
<i class="el-icon-mobile-phone"/>
{{ userData.mobile }}
@ -30,11 +27,11 @@
</div>
<!-- 按钮 -->
<div>
<el-button type="primary" plain @click="logoutHandle">注销</el-button>
<el-button type="primary" plain @click="logoutHandle">退出</el-button>
</div>
</div>
<!-- 未登录X-PHP账号的提示 -->
<!-- 未登录云平台账号的提示 -->
<div v-else class="login-box">
<!-- 头像 -->
<div class="face">登录</div>
@ -42,7 +39,7 @@
<!-- 提示 -->
<div class="login-box-title">
<span @click="dialogVisible = true">请点击登</span>
<p>更新前需要先登录X-PHP账号</p>
<p>更新前需要先登录云平台账号</p>
</div>
</div>
<!-- 按钮 -->
@ -59,42 +56,66 @@
<div v-if="isNewest" class="version">
<p class="text">您当前是最新版本</p>
当前版本：{{ version }}
当前版本：{{ version }} ({{ release }})
</div>
<!-- 有新版本 -->
<div v-loading="updateLoading" v-else :element-loading-text="progressTooltip" class="version" element-loading-background="#fff">
<div v-else v-loading="updateLoading" class="version">
<p class="text">有新的版本可升级</p>
当前版本：{{ serverVersion }}，您可以升级到
<span>{{ version }}</span>
当前版本：{{ version }} ({{ release }})
<div class="update-wrap">
<el-badge :value="1" class="update-badge">
<el-button :type="isCanUpdate ? 'primary' : 'info'" @click="updateHandle">现在更新</el-button>
</el-badge>
<el-table :data="upgradelist" border style="width:100%">
<el-table-column label="版本" width="160">
<template #default="scope">
<span>{{ scope.row.version }} ({{ scope.row.release }})</span>
</template>
</el-table-column>
<el-table-column label="更新内容">
<template #default="scope">
<input style="cursor: pointer; " class="el-input__inner" type="text" readonly :value="scope.row.message">
</template>
</el-table-column>
<el-table-column label="发布时间" width="160">
<template #default="scope">
<span v-time="scope.row.timestamp"></span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="145" fixed="right">
<template #default="scope">
<el-button :type="isCanUpdate ? 'default' : 'info'" @click="updateHandle(scope.row)">更新到此版本</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 登录X-PHP弹窗 -->
<el-dialog v-model="dialogVisible" class=“ title="" width="500px">
<!-- 登录云平台弹窗 -->
<el-dialog v-model="dialogVisible" class="xlogin" title="" width="500px">
<template #header="{}">
<div class="el-dialog__title">
登录X-PHP账号
<p class="description">您可以登录X-PHP账号来进行一键升级</p>
登录云平台账号
<p class="description">您可以登录云平台账号来进行一键升级,如没有请<a target="_blank" :href="cloudregister">注册</a></p>
</div>
</template>
<!-- 登录表单 -->
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-width="80px" label-position="top" class="login-form">
<div class="form-item">
<el-form-item prop="username">
<i class="wk wk-mobile"/>账号
<el-input v-model="loginForm.username" placeholder="请输入您的X-PHP账号"/>
<el-form-item prop="account">
账号
<el-input v-model="loginForm.account" autocomplete="off" placeholder="请输入您的云平台账号"/>
</el-form-item>
</div>
<div class="form-item password">
<el-form-item prop="password">
<i class="wk wk-lock"/>密码
<el-input v-model="loginForm.password" type="password" placeholder="请输入您的X-PHP账号的密码"/>
密码
<el-input v-model="loginForm.password" autocomplete="off" type="password" placeholder="请输入您的云平台账号的密码"/>
</el-form-item>
</div>
<el-button type="primary" @click="loginHandle('loginRef')">确认登录</el-button>
@ -104,327 +125,193 @@
</template>
<script>
import { ElMessageBox } from 'element-plus';
export default {
/** 系统升级 */
name: 'Update',
components: {
},
data() {
var checkPort = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入数据库端口号'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'))
} else {
if (value > 65535 || value <= 0) {
callback(new Error('请输入0~65535之间的端口号'))
} else {
callback()
}
}
}, 1000)
}
return {
isClick: false,
isCanUpdate: true,
isLogin: false, // 是否登录X-PHP账号
dialogVisible: false, // 登录弹窗
dialogVisibleH: false, // 历史备份弹窗
loginForm: {
username: '',
account: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入X-PHP账号', trigger: 'blur' }
],
account: [{ required: true, message: '请输入云平台账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
userData: {},
isCheckUpdate: true, // 是否检查更新过
userData: {
uid:0
},
name:null,
authorizationtime:null,
cloudregister: null,
isCheckUpdate: false, // 是否检查更新过
isNewest: false, // 是否是最新版本
checkLoading: false, // 检查更新loading
version: '', // 最新版本
serverVersion: '', // 服务器版本
isCustom: -1, // 0: 自定义数据库 1:选择数据库
backupType: 1, // 备份方式 1:本地 2:云端
databaseList: [], // 数据库列表
database: '', // 选中的数据库
databaseRules: {
host: [
{ required: true, message: '请输入数据库地址', trigger: 'blur' }
],
port: [{ validator: checkPort, trigger: 'blur' }],
databaseName: [
{ required: true, message: '请输入数据库名称', trigger: 'blur' }
],
DBUsername: [
{ required: true, message: '请输入数据库账号', trigger: 'blur' }
],
DBPassword: [
{ required: true, message: '请输入数据库密码', trigger: 'blur' }
]
},
customDatabase: {
// 自定义数据库
host: '', // 地址
port: '', // 端口号
databaseName: '', // 数据库名称
DBUsername: '', // 数据库账号
DBPassword: '' // 数据库密码
},
backLoading: false, // 数据库备份loading
isBackSuccess: false,
sql: '', // 数据库备份文件保存路径
backType: 1, // 数据备份方式 1:本地 2:云端
release: '', // 最新版本
serverVersion: {}, // 服务器版本
upgradelist: [], // 可以更新的版本
updateLoading: false,
progressTooltip: '',
progress: 0 // 进度
}
},
created() {
// const _this = this
// async function decorator() {
// var { data } = await xCheckVersionAPI()
// _this.checkIsNewest(data.version, data.serverVersion)
// _this.checkLoading = false
// _this.version = data.version
// _this.serverVersion = data.serverVersion
// _this.isCheckUpdate = true
// }
// decorator()
this.loaddata();
},
methods: {
loaddata(){
this.loading = true;
this.$http.get('admin/upgrade/get').then((res) => {
this.loading = false;
if (res.code == 200) {
this.userData = res.data.user;
this.cloudregister = res.data.cloudregister;
this.name = res.data.name;
this.authorizationtime = res.data.authorizationtime;
return ;
}
this.$alert(res.message, "提示", {type: 'error'});
});
},
loginHandle(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// var param = {
// username: this.loginForm.username,
// password: this.loginForm.password
// }
// loginWKAPI(param).then(res => {
// var { data } = res
// if (res.code === 0) {
// this.userData = data
// this.dialogVisible = false
// this.isLogin = true
// Object.assign(this.userData, this.loginForm)
// }
// }).catch(() => {
// })
this.$http.post('admin/upgrade/login', this.loginForm).then((res) => {
if (res.code == 200) {
this.dialogVisible = false;
this.$message.success(res.message || "操作成功");
this.userData = res.data;
return true;
}
this.$alert(res.message, "提示", {type: 'error'});
});
} else {
return false
}
})
},
logoutHandle() {
this.isLogin = false
this.loginForm.username = ''
this.loginForm.password = ''
ElMessageBox.confirm('退出后无法在线升级系统框架和下载应用.', '正在退出云账号', {
type: 'error',
closeOnClickModal: false,
confirmButtonText: '确认退出',
}).then(() => {
this.$http.post('admin/upgrade/quit', {}).then((res) => {
if (res.code == 200) {
this.userData = {uid:0}
this.loginForm.account = ''
this.loginForm.password = ''
this.$message.success(res.message || "操作成功")
return true;
}
this.$alert(res.message, "提示", {type: 'error'});
});
}).catch(() => {})
},
async checkHandle() {
// this.checkLoading = true
// var { data } = await xCheckVersionAPI()
// this.isNewest = this.checkIsNewest(data.version, data.serverVersion)
// this.checkLoading = false
// this.version = data.version
// this.serverVersion = data.serverVersion
// this.isCheckUpdate = true
// this.isClick = true
},
checkIsNewest(a, b) {
// var a = toNum(a)
// var b = toNum(b)
if (a > b) {
return false
} else {
return true
this.checkLoading = true
var { code, data, message } = await this.$http.post('admin/upgrade/check', {})
this.checkLoading = false
if (code==200) {
// 是否为最新
this.isNewest = !data.upgrade ? true : false;
// 当前版本
this.version = data.version
this.release = data.release
// 可更新版本
this.serverVersion = data.serverVersion
// 可更新的版本
this.upgradelist = data.upgradelist
// 是否检查更新过
this.isCheckUpdate = true
// 已点击
this.isClick = true
return true;
}
// function toNum(a) {
// var a = a.toString()
// var c = a.split('.')
// var num_place = ['', '0', '00', '000', '0000']
// var r = num_place.reverse()
// for (var i = 0; i < c.length; i++) {
// var len = c[i].length
// c[i] = r[len] + c[i]
// }
// var res = c.join('')
// return res
// }
if (code==205) {
this.$message.info(message || "请先登录云平台")
this.dialogVisible = true;
return ;
}
this.$alert(message || '操作失败', "提示", {type: 'error'});
},
async queryDatabaseHandle() {
this.isCustom = 1
// var res = await xQueryDatabaseAPI()
var res = {
data:[
[]
],
code:0
};
this.databaseList = res.data
this.isShowDatabase = res.code === 0
},
submitForm() {
this.$refs.databaseForm.validate((valid) => {
if (valid) {
this.dataBackHandle()
} else {
return false
}
})
},
async dataBackHandle() {
if (!this.isLogin) {
this.$message({
showClose: true,
message: '请登陆X-PHP账号',
type: 'warning'
})
async updateHandle(row) {
if (!this.userData.uid) {
this.$message.info("请先登录云平台")
this.dialogVisible = true;
return
}
this.updateLoading = { visible:true, text:'获取更新信息中' }
var res = await this.$http.post('admin/upgrade/update', {version:row.version, release:row.release, xphphash:row.xphphash})
if (res.code == 200) {
if (this.isCustom && !this.database) {
this.$message({
showClose: true,
message: '请选择要备份的数据库',
type: 'warning'
})
return
}
this.updateLoading = { visible:true, text:res.message || "文件下载成功" }
this.$message.success(res.message || "文件下载成功");
this.backLoading = true
// var data = this.isCustom
// ? {
// backupType: this.backupType,
// databaseName: this.database,
// username: this.loginForm.username,
// password: this.loginForm.password,
// isCustom: this.isCustom
// }
// : Object.assign(this.customDatabase, this.loginForm)
// var res = await xBackupDatabaseAPI(data)
var res = {
code:0
}
this.backLoading = false
if (res.code === 0) {
this.isBackSuccess = true
this.sql = res.data
this.isCanUpdate = true
}
},
async updateHandle() {
if (!this.isLogin) {
this.$message({
message: '未进行登陆',
type: 'warning'
})
// return
}
this.updateLoading = true
// var data = this.isCustom
// ? {
// backupType: this.backupType,
// databaseName: this.database,
// username: this.loginForm.username,
// password: this.loginForm.password,
// isCustom: this.isCustom
// }
// : Object.assign(this.customDatabase, this.loginForm)
// var res = await xUpdateAPI(data)
var res = {code:0}
if (res.code === 0) {
this.progressTooltip = '更新准备中'
var _this = this
var timer = setInterval(function() {
fn()
async function fn() {
// var res = await updateProgressAPI()
var res = {code:0, data:100}
switch (res.data) {
case 5:
_this.progressTooltip = '获取更新信息中'
break
case 15:
_this.progressTooltip = '备份数据库中'
break
case 25:
_this.progressTooltip = '备份文件中'
break
case 50:
_this.progressTooltip = '停止受影响的服务中'
break
case 70:
_this.progressTooltip = '执行升级中'
break
case 100:
_this.progressTooltip = '升级已完成'
setTimeout(function() {
_this.updateLoading = false
_this.isNewest = true
}, 500)
clearInterval(timer)
break
default:
_this.progressTooltip = '升级已完成'
setTimeout(function() {
_this.updateLoading = false
_this.isNewest = true
}, 500)
clearInterval(timer)
break
var _this = this;
setTimeout(async ()=>{
var install = await _this.$http.post('admin/upgrade/install', {token:res.data.token});
if (install.code==200) {
_this.updateLoading = false
_this.$message.success(install.message || "更新成功")
// 查询更新
_this.checkHandle();
return ;
}
}
}, 3000)
this.updateLoading = false
this.$alert(install.message || '操作失败', "提示", {type: 'error'});
}, 1000)
return ;
}
else if (res.code==205) {
this.$message.info(res.message || "请先登录云平台")
this.dialogVisible = true;
return ;
}
this.updateLoading = false
this.$alert(res.message || '操作失败', "提示", {type: 'error'});
},
// 更改每页展示数量
handleSizeChange(val) {
// Lockr.set('xPageSizes', val)
this.pageSize = val
},
// 更改当前页数
handleCurrentChange(val) {
this.currentPage = val
}
}
}
</script>
<style>
.xlogin .el-input__wrapper{
padding: 1px 1px;
}
.xlogin .el-input__inner{
--el-input-inner-height: auto;
padding: 4px 10px;
}
</style>
<style lang="scss" scoped>
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
clear: both;
display: initial;
cursor: pointer;
}
.el-alert {
margin: 10px 0 10px;
}
@ -450,8 +337,7 @@ $linkColor: #3b6ff1;
.x-update {
width: 100%;
min-width: 1200px;
height: 100%;
height: calc(100% - 102px);
padding: 15px 20px 20px;
background: #fff;
overflow: auto;
@ -515,7 +401,7 @@ $linkColor: #3b6ff1;
// 登录展示
.login-box {
width: 600px;
max-width: 800px;
background: #f8f8f8;
padding: 22px;
display: flex;
@ -575,7 +461,7 @@ $linkColor: #3b6ff1;
// 检查更新
.last-time {
margin: 16px 0;
padding: 16px 0;
padding: 16px 0 0;
}
.version {