feat: 软件包上传组件
This commit is contained in:
TsMask
328
src/views/ne/neSoftware/components/EditModal.vue
Normal file
328
src/views/ne/neSoftware/components/EditModal.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, toRaw, watch } from 'vue';
|
||||
import { message, Form, Upload } from 'ant-design-vue/lib';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { NE_TYPE_LIST } from '@/constants/ne-constants';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
import {
|
||||
addNeSoftware,
|
||||
getNeSoftware,
|
||||
updateNeSoftware,
|
||||
} from '@/api/ne/neSoftware';
|
||||
import { FileType } from 'ant-design-vue/lib/upload/interface';
|
||||
import { uploadFileChunk } from '@/api/tool/file';
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
editId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: {
|
||||
id: string;
|
||||
neType: string;
|
||||
name: string;
|
||||
path: string;
|
||||
version: string;
|
||||
description: string;
|
||||
};
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
/**上传文件 */
|
||||
uploadFiles: any[];
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByEdit: false,
|
||||
title: '软件包文件',
|
||||
from: {
|
||||
id: '',
|
||||
neType: '',
|
||||
name: '',
|
||||
path: '',
|
||||
version: '',
|
||||
description: '',
|
||||
},
|
||||
confirmLoading: false,
|
||||
uploadFiles: [],
|
||||
});
|
||||
|
||||
/**对话框内表单属性和校验规则 */
|
||||
const modalStateFrom = Form.useForm(
|
||||
modalState.from,
|
||||
reactive({
|
||||
neType: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 32,
|
||||
message: t('views.configManage.softwareManage.neTypePlease'),
|
||||
},
|
||||
],
|
||||
version: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 64,
|
||||
message: t('views.configManage.softwareManage.versionPlease'),
|
||||
},
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.configManage.softwareManage.updateFilePlease'),
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalOk() {
|
||||
if (modalState.confirmLoading) return;
|
||||
modalStateFrom
|
||||
.validate()
|
||||
.then(e => {
|
||||
modalState.confirmLoading = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
const from = toRaw(modalState.from);
|
||||
const software = from.id ? updateNeSoftware(from) : addNeSoftware(from);
|
||||
software.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.operateOk'),
|
||||
duration: 3,
|
||||
});
|
||||
emit('ok');
|
||||
fnModalCancel();
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.confirmLoading = false;
|
||||
modalStateFrom.resetFields();
|
||||
modalState.uploadFiles = [];
|
||||
emit('cancel');
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
/**表单上传前检查或转换压缩 */
|
||||
function fnBeforeUploadFile(file: FileType) {
|
||||
if (modalState.confirmLoading) return false;
|
||||
const fileName = file.name;
|
||||
const suff = fileName.substring(fileName.lastIndexOf('.'));
|
||||
if (!['.deb', '.rpm'].includes(suff)) {
|
||||
message.error(
|
||||
t('views.configManage.softwareManage.onlyAble', {
|
||||
fileText: '(.deb、.rpm)',
|
||||
}),
|
||||
3
|
||||
);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
// 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
|
||||
const matches = fileName.match(/([0-9.]+[0-9x]+)/);
|
||||
if (matches) {
|
||||
modalState.from.version = matches[0];
|
||||
}
|
||||
const neTypeIndex = fileName.indexOf('-');
|
||||
if (neTypeIndex !== -1) {
|
||||
modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**表单上传文件 */
|
||||
function fnUploadFile(up: UploadRequestOption) {
|
||||
// 发送请求
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
modalState.confirmLoading = true;
|
||||
uploadFileChunk(up.file as File, 5, 'software')
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success('上传成功', 3);
|
||||
// 改为完成状态
|
||||
const file = modalState.uploadFiles[0];
|
||||
file.percent = 100;
|
||||
file.status = 'done';
|
||||
// 预置到表单
|
||||
const { fileName, originalFileName } = res.data;
|
||||
modalState.from.name = originalFileName;
|
||||
modalState.from.path = fileName;
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出显示为 新增或者修改
|
||||
* @param id id
|
||||
*/
|
||||
function fnModalVisibleByEdit(id?: string) {
|
||||
if (id) {
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
getNeSoftware(id)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
Object.assign(modalState.from, res.data);
|
||||
modalState.title = 'Update Software';
|
||||
modalState.visibleByEdit = true;
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
modalState.confirmLoading = false;
|
||||
hide();
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
modalState.title = 'Upload Software';
|
||||
modalState.visibleByEdit = true;
|
||||
}
|
||||
|
||||
/**监听是否显示，初始数据 */
|
||||
watch(
|
||||
() => props.visible,
|
||||
val => {
|
||||
if (val) fnModalVisibleByEdit(props.editId);
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
width="800px"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form
|
||||
name="modalStateFrom"
|
||||
layout="horizontal"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-form-item
|
||||
label="Upload File"
|
||||
name="file"
|
||||
v-bind="modalStateFrom.validateInfos.path"
|
||||
v-if="modalState.from.id === ''"
|
||||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
v-model:file-list="modalState.uploadFiles"
|
||||
accept=".rpm,.deb"
|
||||
list-type="text"
|
||||
:max-count="1"
|
||||
:show-upload-list="{
|
||||
showPreviewIcon: false,
|
||||
showRemoveIcon: false,
|
||||
showDownloadIcon: false,
|
||||
}"
|
||||
:before-upload="fnBeforeUploadFile"
|
||||
:custom-request="fnUploadFile"
|
||||
:disabled="modalState.confirmLoading"
|
||||
>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="NeType"
|
||||
name="neType"
|
||||
v-bind="modalStateFrom.validateInfos.neType"
|
||||
>
|
||||
<a-auto-complete
|
||||
v-model:value="modalState.from.neType"
|
||||
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
|
||||
:disabled="modalState.from.id !== ''"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="32"
|
||||
:disabled="modalState.from.id !== ''"
|
||||
>
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="Version"
|
||||
name="version"
|
||||
v-bind="modalStateFrom.validateInfos.version"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.version"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Description" name="description">
|
||||
<a-textarea
|
||||
v-model:value="modalState.from.description"
|
||||
:maxlength="500"
|
||||
:show-count="true"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -1,31 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import {
|
||||
Form,
|
||||
Modal,
|
||||
TableColumnsType,
|
||||
Upload,
|
||||
message,
|
||||
} from 'ant-design-vue/lib';
|
||||
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
|
||||
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { NE_TYPE_LIST } from '@/constants/ne-constants';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import {
|
||||
listNeSoftware,
|
||||
addNeSoftware,
|
||||
delNeSoftware,
|
||||
getNeSoftware,
|
||||
updateNeSoftware,
|
||||
} from '@/api/ne/neSoftware';
|
||||
import { listNeSoftware, delNeSoftware } from '@/api/ne/neSoftware';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
import { uploadFileChunk } from '@/api/tool/file';
|
||||
import { FileType } from 'ant-design-vue/lib/upload/interface';
|
||||
import { downloadFile } from '@/api/tool/file';
|
||||
import { saveAs } from 'file-saver';
|
||||
const { t } = useI18n();
|
||||
// 异步加载组件
|
||||
const EditModal = defineAsyncComponent(
|
||||
() => import('./components/EditModal.vue')
|
||||
);
|
||||
|
||||
/**网元参数 */
|
||||
let neOtions = ref<Record<string, any>[]>([]);
|
||||
@@ -206,195 +197,47 @@ function fnGetList(pageNum?: number) {
|
||||
type ModalStateType = {
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: {
|
||||
id: string;
|
||||
neType: string;
|
||||
name: string;
|
||||
path: string;
|
||||
version: string;
|
||||
description: string;
|
||||
};
|
||||
/**新增框或修改框ID */
|
||||
editId: string;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
/**上传文件 */
|
||||
uploadFiles: any[];
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByEdit: false,
|
||||
title: '软件包文件',
|
||||
from: {
|
||||
id: '',
|
||||
neType: '',
|
||||
name: '',
|
||||
path: '',
|
||||
version: '',
|
||||
description: '',
|
||||
},
|
||||
editId: '',
|
||||
confirmLoading: false,
|
||||
uploadFiles: [],
|
||||
});
|
||||
|
||||
/**对话框内表单属性和校验规则 */
|
||||
const modalStateFrom = Form.useForm(
|
||||
modalState.from,
|
||||
reactive({
|
||||
neType: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 32,
|
||||
message: t('views.configManage.softwareManage.neTypePlease'),
|
||||
},
|
||||
],
|
||||
version: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 64,
|
||||
message: t('views.configManage.softwareManage.versionPlease'),
|
||||
},
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.configManage.softwareManage.updateFilePlease'),
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* 对话框弹出显示为 新增或者修改
|
||||
* @param id id
|
||||
* @param noticeId 网元id, 不传为新增
|
||||
*/
|
||||
function fnModalVisibleByEdit(id?: string) {
|
||||
if (id) {
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
getNeSoftware(id)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
Object.assign(modalState.from, res.data);
|
||||
modalState.title = 'Update Software';
|
||||
modalState.visibleByEdit = true;
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
modalState.confirmLoading = false;
|
||||
hide();
|
||||
});
|
||||
|
||||
return;
|
||||
if (!id) {
|
||||
modalState.editId = '';
|
||||
} else {
|
||||
modalState.editId = id;
|
||||
}
|
||||
modalState.title = 'Upload Software';
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.visibleByEdit = !modalState.visibleByEdit;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalOk() {
|
||||
if (modalState.confirmLoading) return;
|
||||
modalStateFrom
|
||||
.validate()
|
||||
.then(e => {
|
||||
modalState.confirmLoading = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
const from = toRaw(modalState.from);
|
||||
const software = from.id ? updateNeSoftware(from) : addNeSoftware(from);
|
||||
software.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.operateOk'),
|
||||
duration: 3,
|
||||
});
|
||||
fnModalCancel();
|
||||
// 获取列表数据
|
||||
fnGetList();
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
});
|
||||
function fnModalEditOk() {
|
||||
fnGetList(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
function fnModalEditCancel() {
|
||||
modalState.editId = '';
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.confirmLoading = false;
|
||||
modalStateFrom.resetFields();
|
||||
modalState.uploadFiles = [];
|
||||
}
|
||||
|
||||
/**表单上传前检查或转换压缩 */
|
||||
function fnBeforeUploadFile(file: FileType) {
|
||||
if (modalState.confirmLoading) return false;
|
||||
const fileName = file.name;
|
||||
const suff = fileName.substring(fileName.lastIndexOf('.'));
|
||||
if (!['.deb', '.rpm'].includes(suff)) {
|
||||
message.error(
|
||||
t('views.configManage.softwareManage.onlyAble', {
|
||||
fileText: '(.deb、.rpm)',
|
||||
}),
|
||||
3
|
||||
);
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
// 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
|
||||
const matches = fileName.match(/([0-9.]+[0-9x]+)/);
|
||||
if (matches) {
|
||||
modalState.from.version = matches[0];
|
||||
}
|
||||
const neTypeIndex = fileName.indexOf('-');
|
||||
if (neTypeIndex !== -1) {
|
||||
modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**表单上传文件 */
|
||||
function fnUploadFile(up: UploadRequestOption) {
|
||||
// 发送请求
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
modalState.confirmLoading = true;
|
||||
uploadFileChunk(up.file as File, 5, 'software')
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success('上传成功', 3);
|
||||
// 改为完成状态
|
||||
const file = modalState.uploadFiles[0];
|
||||
file.percent = 100;
|
||||
file.status = 'done';
|
||||
// 预置到表单
|
||||
const { fileName, originalFileName } = res.data;
|
||||
modalState.from.name = originalFileName;
|
||||
modalState.from.path = fileName;
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**删除软件包 */
|
||||
@@ -423,6 +266,53 @@ function fnRecordDelete(id: string) {
|
||||
});
|
||||
}
|
||||
|
||||
/**下载软件包 */
|
||||
function fnDownloadFile(row: Record<string, any>) {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.configManage.softwareManage.downloadTip', {
|
||||
fileName: row.name,
|
||||
}),
|
||||
onOk() {
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
downloadFile(row.path)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.msgSuccess', {
|
||||
msg: t('common.downloadText'),
|
||||
}),
|
||||
duration: 2,
|
||||
});
|
||||
saveAs(res.data, `${row.name}`);
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录更多操作
|
||||
*/
|
||||
function fnRecordMore(type: string | number, row: Record<string, any>) {
|
||||
if (type === 'download') {
|
||||
fnDownloadFile(row);
|
||||
return;
|
||||
}
|
||||
if (type === 'delete') {
|
||||
fnRecordDelete(row.id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取网元网元列表
|
||||
useNeInfoStore()
|
||||
@@ -605,14 +495,26 @@ onMounted(() => {
|
||||
<template #icon> <ProfileOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title> {{ t('common.deleteText') }}</template>
|
||||
<a-button
|
||||
type="link"
|
||||
@click.prevent="fnRecordDelete(record.id)"
|
||||
>
|
||||
<template #icon> <DeleteOutlined /></template>
|
||||
</a-button>
|
||||
|
||||
<a-tooltip placement="left">
|
||||
<template #title>{{ t('common.moreText') }}</template>
|
||||
<a-dropdown placement="bottomRight" trigger="click">
|
||||
<a-button type="link">
|
||||
<template #icon><EllipsisOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="({ key }:any) => fnRecordMore(key, record)">
|
||||
<a-menu-item key="download">
|
||||
<DownloadOutlined />
|
||||
{{ t('common.downloadText') }}
|
||||
</a-menu-item>
|
||||
<a-menu-item key="delete">
|
||||
<DeleteOutlined />
|
||||
{{ t('common.deleteText') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
@@ -620,96 +522,13 @@ onMounted(() => {
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 上传框 -->
|
||||
<a-modal
|
||||
width="800px"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form
|
||||
name="modalStateFrom"
|
||||
layout="horizontal"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-form-item
|
||||
label="Upload File"
|
||||
name="file"
|
||||
v-bind="modalStateFrom.validateInfos.path"
|
||||
v-if="modalState.from.id === ''"
|
||||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
v-model:file-list="modalState.uploadFiles"
|
||||
accept=".rpm,.deb"
|
||||
list-type="text"
|
||||
:max-count="1"
|
||||
:show-upload-list="{
|
||||
showPreviewIcon: false,
|
||||
showRemoveIcon: false,
|
||||
showDownloadIcon: false,
|
||||
}"
|
||||
:before-upload="fnBeforeUploadFile"
|
||||
:custom-request="fnUploadFile"
|
||||
:disabled="modalState.confirmLoading"
|
||||
>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="NeType"
|
||||
name="neType"
|
||||
v-bind="modalStateFrom.validateInfos.neType"
|
||||
>
|
||||
<a-auto-complete
|
||||
v-model:value="modalState.from.neType"
|
||||
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
|
||||
:disabled="modalState.from.id !== ''"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="32"
|
||||
:disabled="modalState.from.id !== ''"
|
||||
>
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="Version"
|
||||
name="version"
|
||||
v-bind="modalStateFrom.validateInfos.version"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.version"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Description" name="description">
|
||||
<a-textarea
|
||||
v-model:value="modalState.from.description"
|
||||
:maxlength="500"
|
||||
:show-count="true"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<!-- 新增框或修改框 -->
|
||||
<EditModal
|
||||
v-model:visible="modalState.visibleByEdit"
|
||||
:edit-id="modalState.editId"
|
||||
@ok="fnModalEditOk"
|
||||
@cancel="fnModalEditCancel"
|
||||
></EditModal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { TableColumnsType, message } from 'ant-design-vue/lib';
|
||||
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
|
||||
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
@@ -12,6 +12,11 @@ import { listNeVersion } from '@/api/ne/neVersion';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
const { t } = useI18n();
|
||||
|
||||
// 异步加载组件
|
||||
const EditModal = defineAsyncComponent(
|
||||
() => import('../neSoftware/components/EditModal.vue')
|
||||
);
|
||||
|
||||
/**网元参数 */
|
||||
let neOtions = ref<Record<string, any>[]>([]);
|
||||
|
||||
@@ -99,16 +104,16 @@ let tableColumns = ref<TableColumnsType>([
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'preVersion',
|
||||
title: 'Previous Version',
|
||||
dataIndex: 'preVersion',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
width: 150,
|
||||
resizable: true,
|
||||
minWidth: 100,
|
||||
minWidth: 150,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: 'newVersion',
|
||||
title: 'New Version',
|
||||
dataIndex: 'newVersion',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
@@ -208,6 +213,93 @@ function fnGetList(pageNum?: number) {
|
||||
});
|
||||
}
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByEdit: false,
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
/**
|
||||
* 对话框弹出显示为 新增或者修改
|
||||
* @param noticeId 网元id, 不传为新增
|
||||
*/
|
||||
function fnModalVisibleByEdit() {
|
||||
modalState.visibleByEdit = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalEditOk() {
|
||||
fnGetList(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalEditCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
}
|
||||
|
||||
/**升级到新版本 */
|
||||
function fnRecordUpdate(id: string) {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: 'Removing software packages?',
|
||||
onOk() {
|
||||
if (modalState.confirmLoading) return;
|
||||
modalState.confirmLoading = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
// installNeSoftware({
|
||||
// software: from,
|
||||
// preinput: {},
|
||||
// action: 'install',
|
||||
// })
|
||||
// .then(res => {
|
||||
// if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// installState.setp = 'log';
|
||||
// installState.setpLog = res.data;
|
||||
// message.success('软件安装成功', 3);
|
||||
// // 记录当前步骤状态信息
|
||||
// stepState.states[stepState.current] = {
|
||||
// from: from,
|
||||
// preinput: preinput,
|
||||
// };
|
||||
// stepState.stepNext = true;
|
||||
// } else {
|
||||
// message.error(res.msg, 3);
|
||||
// }
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hide();
|
||||
// installState.confirmLoading = false;
|
||||
// });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录更多操作
|
||||
*/
|
||||
function fnRecordMore(type: string | number, row: Record<string, any>) {
|
||||
if (type === 'download') {
|
||||
return;
|
||||
}
|
||||
if (type === 'delete') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取网元网元列表
|
||||
useNeInfoStore()
|
||||
@@ -287,7 +379,12 @@ onMounted(() => {
|
||||
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title> </template>
|
||||
<template #title>
|
||||
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
Upload Software
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
@@ -360,7 +457,13 @@ onMounted(() => {
|
||||
<template v-if="column.key === 'id'">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.viewText') }}</template>
|
||||
<template #title>Update To Previous version</template>
|
||||
<a-button type="link" @click.prevent="">
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>Update To New Version</template>
|
||||
<a-button type="link" @click.prevent="">
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
</a-button>
|
||||
@@ -370,6 +473,13 @@ onMounted(() => {
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增框或修改框 -->
|
||||
<EditModal
|
||||
v-model:visible="modalState.visibleByEdit"
|
||||
@ok="fnModalEditOk"
|
||||
@cancel="fnModalEditCancel"
|
||||
></EditModal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user