feat: 网元安装授权页面

This commit is contained in:
TsMask
2024-04-30 20:02:24 +08:00
parent 2f7f0e9e20
commit c50b3add95

View File

@@ -0,0 +1,220 @@
<script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib';
import { defineAsyncComponent, onMounted, reactive, ref, toRaw } from 'vue';
import { fnToStepName, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n';
import { getNeLicenseByTypeAndID } from '@/api/ne/neLicense';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n();
const EditModal = defineAsyncComponent(
() => import('../../../ne/neLicense/components/EditModal.vue')
);
/**对象信息信息状态类型 */
type StateType = {
/**是否可以下一步 */
stepNext: boolean;
/**文件上传 */
visibleByFile: boolean;
/**授权信息数据 */
from: {
id: undefined | string;
neType: string;
neId: string;
activationRequestCode: string;
licensePath: string;
reload: boolean;
};
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对象信息状态 */
let state: StateType = reactive({
stepNext: false,
optionType: 'option',
visibleByFile: false,
from: {
id: undefined,
neType: '',
neId: '',
activationRequestCode: '',
licensePath: '',
reload: true,
},
confirmLoading: false,
});
/**对话框弹出确认执行函数*/
function fnModalOk(e: any) {
Object.assign(state.from, e);
}
/**对话框弹出关闭执行函数*/
function fnModalCancel() {
state.visibleByFile = false;
}
/**启动服务验证 */
function fnRunCheck() {
if (state.confirmLoading) return;
const form = toRaw(state.from);
// if (form.licensePath === '') {
// message.error(t('common.errorFields', { num: 1 }), 3);
// return;
// }
state.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
// changeNeLicense(form)
// .then(res => {
// if (res.code === RESULT_CODE_SUCCESS) {
// message.success('网元开始进行校验', 3);
// fnVerifyTask();
// } else {
// message.error(res.msg, 3);
// }
// })
// .finally(() => {
// hide();
// state.confirmLoading = false;
// });
}
/**
* 对话框弹出显示为 新增或者修改
* @param id id
*/
function fnModalVisibleByTypeAndId(neType: string, neId: string) {
const hide = message.loading(t('common.loading'), 0);
getNeLicenseByTypeAndID(neType, neId)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(state.from, res.data);
} else {
message.error(res.msg, 3);
}
})
.finally(() => {
state.confirmLoading = false;
hide();
});
}
/**返回上一步 */
function fnStepPrev() {
Modal.confirm({
title: t('common.tipTitle'),
content: '确认要放弃当前变更返回上一步吗?',
onOk() {
fnToStepName('NeInfoSoftwareInstall');
},
});
}
/**下一步操作 */
function fnStepNext(stepName: 'Done') {
if (stepName === 'Done') {
Modal.confirm({
title: t('common.tipTitle'),
content: '确认要结束网元安装吗?',
onOk() {
fnToStepName('Done');
},
});
}
}
onMounted(() => {
const { neType, neId } = stepState.neInfo;
if (neId) {
state.from.neType = neType;
state.from.neId = neId;
}
});
</script>
<template>
<div class="ne">
<a-form
name="modalStateFrom"
layout="horizontal"
autocomplete="off"
:validate-on-rule-change="false"
:validateTrigger="[]"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 12 }"
:label-wrap="true"
>
<a-form-item label="授权申请码" name="comment" :required="true">
<a-input-group compact>
<a-input
v-model:value="state.from.activationRequestCode"
:disabled="true"
style="width: calc(100% - 64px)"
/>
<a-tooltip title="复制">
<a-button type="default">
<template #icon><CopyOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip title="下载">
<a-button type="primary">
<template #icon><DownloadOutlined /></template>
</a-button>
</a-tooltip>
</a-input-group>
</a-form-item>
<a-form-item name="check" :wrapper-col="{ span: 14, offset: 3 }">
<div style="align-items: center">
<a-button
type="primary"
shape="round"
@click="fnRunCheck()"
:loading="state.confirmLoading"
>
<template #icon><LinkOutlined /></template>
授权校验
</a-button>
</div>
</a-form-item>
</a-form>
<!-- 文件上传框 -->
<EditModal
v-model:visible="state.visibleByFile"
:ne-type="state.from.neType"
:ne-id="state.from.neId"
@ok="fnModalOk"
@cancel="fnModalCancel"
></EditModal>
<div class="ne-oper">
<a-space direction="horizontal" :size="18">
<a-button type="default" danger :loading="state.confirmLoading">
<template #icon><ReloadOutlined /></template>
Refresh State
</a-button>
<a-button type="ghost" :loading="state.confirmLoading">
<template #icon><DownloadOutlined /></template>
Download Activation Code
</a-button>
<a-button type="dashed" @click="fnStepNext('Done')"> 结束 </a-button>
</a-space>
</div>
</div>
</template>
<style lang="less" scoped>
.ne {
padding-top: 12px;
&-oper {
padding-top: 24px;
text-align: end;
}
}
</style>