ADD: 模块激活流程
This commit is contained in:
@@ -1,55 +1,281 @@
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="程序激活" v-bind="dialogSmall">
|
||||
<el-form :model="formContent">
|
||||
<el-form-item label="程序版本号" prop="id" :label-width="100">
|
||||
<el-input v-model='formContent.id' disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模拟式模块" prop="type" :label-width="100">
|
||||
<el-checkbox v-model="formContent.type" label="已激活"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数字式模块" prop="type" :label-width="100">
|
||||
<el-checkbox v-model="formContent.type" label="未激活"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="比对式模块" prop="type" :label-width="100">
|
||||
<el-checkbox v-model="formContent.type" label="未激活"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="序列号" prop="code" :label-width="100">
|
||||
<el-input v-model='formContent.code' placeholder="请输入序列号" :rows="2" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册码" prop="licenseKey" :label-width="100">
|
||||
<el-input v-model='formContent.licenseKey' placeholder="请输入注册码" :rows="2" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="程序激活"
|
||||
width="450px"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
:before-close="beforeClose"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form :label-width="100" label-position="left">
|
||||
<el-form-item label="程序版本号">
|
||||
<el-text style="margin-left: 82%">{{ 'v' + versionNumber }}</el-text>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">激活</el-button>
|
||||
</span>
|
||||
</template>
|
||||
<el-descriptions
|
||||
class="mode-descriptions"
|
||||
v-if="!hadActivationCode"
|
||||
title="模块激活状态"
|
||||
size="small"
|
||||
></el-descriptions>
|
||||
<el-form
|
||||
ref="applicationFormRef"
|
||||
v-if="!hadActivationCode"
|
||||
:model="applicationForm"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.simulate.apply !== 1 || activateInfo.simulate.permanently !== 1"
|
||||
label="模拟式模块"
|
||||
prop="simulate.apply"
|
||||
>
|
||||
<el-tag disable-transitions type="danger">未激活</el-tag>
|
||||
<el-checkbox
|
||||
:false-value="0"
|
||||
:true-value="1"
|
||||
class="apply-checkbox"
|
||||
v-model="applicationForm.simulate.apply"
|
||||
label="激活"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.simulate.apply === 1 && activateInfo.simulate.permanently === 1"
|
||||
label="模拟式模块"
|
||||
>
|
||||
<el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.digital.apply !== 1 || activateInfo.digital.permanently !== 1"
|
||||
label="数字式模块"
|
||||
prop="digital.apply"
|
||||
>
|
||||
<el-tag disable-transitions type="danger">未激活</el-tag>
|
||||
<el-checkbox
|
||||
:false-value="0"
|
||||
:true-value="1"
|
||||
class="apply-checkbox"
|
||||
v-model="applicationForm.digital.apply"
|
||||
label="激活"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.digital.apply === 1 && activateInfo.digital.permanently === 1"
|
||||
label="数字式模块"
|
||||
>
|
||||
<el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.contrast.apply !== 1 || activateInfo.contrast.permanently !== 1"
|
||||
label="比对式模块"
|
||||
prop="contrast.apply"
|
||||
>
|
||||
<el-tag disable-transitions type="danger">未激活</el-tag>
|
||||
<el-checkbox
|
||||
:false-value="0"
|
||||
:true-value="1"
|
||||
class="apply-checkbox"
|
||||
v-model="applicationForm.contrast.apply"
|
||||
label="激活"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="mode-item"
|
||||
v-if="activateInfo.contrast.apply === 1 && activateInfo.contrast.permanently === 1"
|
||||
label="比对式模块"
|
||||
>
|
||||
<el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row v-if="applicationCode">
|
||||
<el-descriptions class="mode-descriptions" title="设备申请码" size="small"></el-descriptions>
|
||||
<el-tooltip placement="top-end" effect="light">
|
||||
<el-input
|
||||
v-model="applicationCode"
|
||||
:rows="5"
|
||||
type="textarea"
|
||||
readonly
|
||||
resize="none"
|
||||
class="code-display"
|
||||
/>
|
||||
<template #content>
|
||||
<el-button size="small" @click="copyCode" icon="DocumentCopy">复制</el-button>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-row v-if="applicationCode || hadActivationCode">
|
||||
<el-descriptions class="mode-descriptions" title="设备激活码" size="small"></el-descriptions>
|
||||
<el-input
|
||||
placeholder="请输入设备激活码"
|
||||
v-model="activationCode"
|
||||
:rows="5"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
class="code-input"
|
||||
/>
|
||||
</el-row>
|
||||
<template #footer v-if="!activatedAll">
|
||||
<div v-if="!applicationCode && !hadActivationCode">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="getApplicationCode">获取申请码</el-button>
|
||||
<el-button type="primary" @click="hadActivationCode = true">已有激活码</el-button>
|
||||
</div>
|
||||
<div v-if="applicationCode || hadActivationCode">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button :disabled="!activationCode" type="primary" @click="submitActivation">激活</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type VersionRegister } from "@/api/system/versionRegister/interface";
|
||||
import { ref } from "vue";
|
||||
import { dialogSmall } from '@/utils/elementBind'
|
||||
const formContent = ref<VersionRegister.ResSys_Reg_Res>({
|
||||
id: '', //版本注册表Id
|
||||
type: '', //版本类型(模拟式、数字式、比对式)
|
||||
code: '', //注册码
|
||||
licenseKey: '', //密钥
|
||||
expireDate: '', //到期时间
|
||||
waveRecord: 0,
|
||||
realTime: 20,
|
||||
statistics: 5,
|
||||
flicker: 1,
|
||||
state: 1, //状态
|
||||
})
|
||||
const dialogVisible = ref(false);
|
||||
const openDialog = () => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ openDialog });
|
||||
</script>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { version } from '../../../../package.json'
|
||||
import type { Activate } from '@/api/activate/interface'
|
||||
import { generateApplicationCode, verifyActivationCode } from '@/api/activate'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const activateInfo = authStore.activateInfo
|
||||
const versionNumber = ref(version)
|
||||
const applicationForm = reactive<Activate.ApplicationCodePlaintext>({
|
||||
simulate: { apply: 0 },
|
||||
digital: { apply: 0 },
|
||||
contrast: { apply: 0 }
|
||||
})
|
||||
const activatedAll = computed(() => {
|
||||
return (
|
||||
activateInfo.simulate.apply === 1 &&
|
||||
activateInfo.simulate.permanently === 1 &&
|
||||
activateInfo.digital.apply === 1 &&
|
||||
activateInfo.digital.permanently === 1 &&
|
||||
activateInfo.contrast.apply === 1 &&
|
||||
activateInfo.contrast.permanently === 1
|
||||
)
|
||||
})
|
||||
const applicationFormRef = ref()
|
||||
const hadActivationCode = ref(false)
|
||||
const applicationCode = ref('')
|
||||
const activationCode = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
// 获取申请码
|
||||
const getApplicationCode = async () => {
|
||||
if (
|
||||
applicationForm.simulate.apply == 0 &&
|
||||
applicationForm.digital.apply == 0 &&
|
||||
applicationForm.contrast.apply == 0
|
||||
) {
|
||||
ElMessage.warning('请选择需要激活的模块')
|
||||
return
|
||||
}
|
||||
if (activateInfo.simulate.apply === 1) {
|
||||
applicationForm.simulate.apply = 1
|
||||
}
|
||||
if (activateInfo.digital.apply === 1) {
|
||||
applicationForm.digital.apply = 1
|
||||
}
|
||||
if (activateInfo.contrast.apply === 1) {
|
||||
applicationForm.contrast.apply = 1
|
||||
}
|
||||
|
||||
const res = await generateApplicationCode(applicationForm)
|
||||
if (res.code == 'A0000') {
|
||||
applicationCode.value = res.data as string
|
||||
}
|
||||
}
|
||||
// 复制申请码
|
||||
const copyCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(applicationCode.value)
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败,请手动选择内容')
|
||||
}
|
||||
}
|
||||
const openDialog = () => {
|
||||
hadActivationCode.value = false
|
||||
activationCode.value = ''
|
||||
applicationCode.value = ''
|
||||
applicationForm.simulate.apply = 0
|
||||
applicationForm.digital.apply = 0
|
||||
applicationForm.contrast.apply = 0
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const beforeClose = (done: Function) => {
|
||||
applicationFormRef.value.resetFields()
|
||||
done()
|
||||
}
|
||||
const cancel = () => {
|
||||
applicationFormRef.value.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const submitActivation = async () => {
|
||||
const res = await verifyActivationCode(activationCode.value)
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('激活成功')
|
||||
await authStore.setActivateInfo()
|
||||
window.location.reload()
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
}
|
||||
}
|
||||
defineExpose({ openDialog })
|
||||
</script>
|
||||
<style scoped>
|
||||
.apply-checkbox {
|
||||
margin-left: 62%;
|
||||
}
|
||||
.activated-tag {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.code-display,
|
||||
.code-input {
|
||||
font-family: consolas;
|
||||
}
|
||||
:deep(.el-tag) {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
:deep(.el-divider__text) {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.mode-descriptions {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
margin-top: 15px;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
margin-right: 0 !important;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 10px 0 !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
.mode-item {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.mode-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user