ADD: 模块激活流程

This commit is contained in:
贾同学
2025-10-14 19:00:47 +08:00
parent 7afccb58fd
commit 55ff45f9a9
16 changed files with 976 additions and 811 deletions

View File

@@ -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>