系统数据迁移（系统基础数据导出、导入）功能开发
This commit is contained in:
suguangxu
45
src/api/system/dataMigration/index.ts
Normal file
45
src/api/system/dataMigration/index.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { ErrorMessageMode } from '/#/axios';
|
||||
|
||||
enum Api {
|
||||
ExportDatas= '/system/dataMigration/exportDatas',
|
||||
DownloadDatas='/system/dataMigration/downloadDatas',
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 系统配置迁移-导出资源
|
||||
*/
|
||||
export async function exportDatas(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.post(
|
||||
{
|
||||
url: Api.ExportDatas,
|
||||
data:params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description: 根据uuid(目录名称)下载数据
|
||||
*/
|
||||
export async function downloadDatas(
|
||||
params?: object,
|
||||
mode: ErrorMessageMode = 'modal'
|
||||
) {
|
||||
return defHttp.download(
|
||||
{
|
||||
url: Api.DownloadDatas+"/"+params.uuid,
|
||||
method: 'GET',
|
||||
responseType: 'blob',
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
src/views/system/dataMigration/assets/sysconfig_import.png
Normal file
BIN
src/views/system/dataMigration/assets/sysconfig_import.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
262
src/views/system/dataMigration/components/export/index.vue
Normal file
262
src/views/system/dataMigration/components/export/index.vue
Normal file
@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="export">
|
||||
<div class="l-export" ><span @click.stop="openConfirmDialog">导出所选项目{{configType}}</span></div>
|
||||
<div class="list-wrapper">
|
||||
<a-list size="small" bordered :data-source="state.options">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item><a-checkbox style="margin-right:30px" v-model:checked="item.checked"/>{{ item.name }}</a-list-item>
|
||||
</template>
|
||||
<template #header>
|
||||
<a-checkbox
|
||||
style="margin-right:30px"
|
||||
v-model:checked="state.checkAll"
|
||||
:indeterminate="state.indeterminate"
|
||||
@change="onCheckAllChange">
|
||||
</a-checkbox>
|
||||
选择全部
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,watch,reactive,h} from 'vue';
|
||||
import {useMessage} from "/@/hooks/web/useMessage";
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { exportDatas,downloadDatas} from '/@/api/system/dataMigration';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import { dateUtil } from '/@/utils/dateUtil';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const state = reactive({
|
||||
indeterminate: false,
|
||||
checkAll: false,
|
||||
options:[
|
||||
{
|
||||
checked:false,
|
||||
code:"租户",
|
||||
name:'租户'
|
||||
},
|
||||
/* {
|
||||
checked:false,
|
||||
code:"用户",
|
||||
name:'用户'
|
||||
}, */
|
||||
{
|
||||
checked:false,
|
||||
code:'角色',
|
||||
name:'角色'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'岗位',
|
||||
name:'岗位'
|
||||
},
|
||||
/* {
|
||||
checked:false,
|
||||
code:'部门',
|
||||
name:'部门'
|
||||
}, */
|
||||
{
|
||||
checked:false,
|
||||
code:'用户组',
|
||||
name:'用户组'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'菜单',
|
||||
name:'菜单'
|
||||
},
|
||||
|
||||
{
|
||||
checked:false,
|
||||
code:'表单',
|
||||
name:'表单'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'流程定义',
|
||||
name:'流程定义'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'系统变量',
|
||||
name:'系统变量'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'数据字典',
|
||||
name:'数据字典'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'桌面配置',
|
||||
name:'桌面配置'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'自定义接口',
|
||||
name:'自定义接口'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'角色-菜单授权',
|
||||
name:'权限：角色-菜单授权(菜单、按钮、列表、表单)'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'角色-自定义接口授权',
|
||||
name:'权限：角色-自定义接口授权'
|
||||
},
|
||||
/* {
|
||||
checked:false,
|
||||
code:'用户-角色授权',
|
||||
name:'权限：用户-角色授权'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'用户-用户组授权',
|
||||
name:'权限：用户-用户组授权'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'用户-岗位授权',
|
||||
name:'权限：用户-岗位授权'
|
||||
},
|
||||
{
|
||||
checked:false,
|
||||
code:'用户-部门授权',
|
||||
name:'权限：用户-部门授权'
|
||||
}, */
|
||||
{
|
||||
checked:false,
|
||||
code:'租户-菜单授权',
|
||||
name:'权限：租户-菜单授权'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
function onCheckAllChange(e: any){
|
||||
if(e.target.checked){
|
||||
state.options.forEach((item)=>{
|
||||
item.checked=true;
|
||||
});
|
||||
}else{
|
||||
state.options.forEach((item)=>{
|
||||
item.checked=false;
|
||||
});
|
||||
}
|
||||
state.indeterminate=false;
|
||||
}
|
||||
|
||||
|
||||
watch(
|
||||
() => state.options,
|
||||
val => {
|
||||
const checkedList=val.filter((item)=>item.checked);
|
||||
if(checkedList.length>0){
|
||||
if(checkedList.length< val.length){
|
||||
state.indeterminate=true;
|
||||
}else{
|
||||
state.checkAll=true;
|
||||
state.indeterminate=false;
|
||||
}
|
||||
|
||||
}else{
|
||||
state.indeterminate=false;
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
function openConfirmDialog(){
|
||||
const { notification,createConfirm} = useMessage();
|
||||
const checkedList=state.options.filter((item)=>item.checked);
|
||||
if(checkedList.length==0){
|
||||
notification.warning({
|
||||
message: '提示',
|
||||
description: '未选择任何项目'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
createConfirm({
|
||||
iconType: 'warning',
|
||||
title: () => h('span', t('温馨提示')),
|
||||
content: () => t('确定导出所选项目吗?'),
|
||||
width:'500px',
|
||||
onOk: async () => {
|
||||
handleExport();
|
||||
},
|
||||
okText: () => t('确认'),
|
||||
cancelText: () => t('取消'),
|
||||
});
|
||||
}
|
||||
|
||||
async function handleExport(){
|
||||
try {
|
||||
const checkedCodeList=state.options.filter((item)=>item.checked).map(item => item.code);
|
||||
let currentTime=dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
|
||||
let result= await exportDatas({
|
||||
items:checkedCodeList
|
||||
});
|
||||
|
||||
if(result){
|
||||
const fileName=dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
|
||||
const res = await downloadDatas({uuid:result});
|
||||
downloadByData(
|
||||
res.data,
|
||||
fileName+".zip"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.export{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
width:100%;
|
||||
padding:30px 30px 30px 100px;
|
||||
border:1px solid #d6d6d6;
|
||||
border-radius:8px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.l-export{
|
||||
display:block;
|
||||
margin-left:20px;
|
||||
margin-bottom:20px;
|
||||
color: rgba(0,0,255,0.8);
|
||||
text-decoration:underline rgba(#0000ff,0.8);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: rgba(0,0,255,1);
|
||||
text-decoration:underline #0000ff;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper{
|
||||
height:calc(100% - 50px);
|
||||
.ant-list{
|
||||
width:100%;
|
||||
height:calc(100% - 30px);
|
||||
overflow:hidden;
|
||||
border:0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<span @click.stop="open">
|
||||
<slot></slot>
|
||||
<a-modal
|
||||
v-model:visible="data.visible"
|
||||
:title="t(`导入数据[${coverType=='override'?'覆盖模式':'新增模式'}]`)"
|
||||
:maskClosable="false"
|
||||
@ok="doUpload"
|
||||
@cancel="close"
|
||||
@click.stop=""
|
||||
>
|
||||
<div class="upload-box">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-box"
|
||||
name="file"
|
||||
accept=".json,.zip"
|
||||
:headers="data.headers"
|
||||
:max-count="1"
|
||||
@change="handleChange"
|
||||
:before-upload="beforeUpload"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<img :src="BgImg" />
|
||||
<div class="a-upload__text">{{ t('将文件拖到此处，或') }}<em>{{ t('点击上传') }}</em></div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</a-modal>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive,ref} from 'vue';
|
||||
import BgImg from '../../assets/sysconfig_import.png';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const props = defineProps({
|
||||
coverType: {
|
||||
type: Boolean
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const globSetting = useGlobSetting();
|
||||
const { notification } = useMessage();
|
||||
|
||||
const data: {
|
||||
visible: boolean;
|
||||
} = reactive({
|
||||
visible: false
|
||||
});
|
||||
|
||||
const fileList=ref([]);
|
||||
|
||||
|
||||
|
||||
async function open() {
|
||||
if(props.coverType!=='override'){
|
||||
alert("新增模式导入暂时不可用");
|
||||
return;
|
||||
}
|
||||
data.visible = true;
|
||||
}
|
||||
function close() {
|
||||
data.visible = false;
|
||||
fileList.value=[];
|
||||
}
|
||||
|
||||
|
||||
function handleRemove(file){
|
||||
const index = fileList.value.indexOf(file);
|
||||
const newFileList = fileList.value.slice();
|
||||
newFileList.splice(index, 1);
|
||||
fileList.value = newFileList;
|
||||
};
|
||||
|
||||
function beforeUpload(file){
|
||||
fileList.value = [...(fileList.value || []), file];
|
||||
return false;
|
||||
};
|
||||
|
||||
function doUpload(){
|
||||
if(fileList==undefined||fileList.value.length==0){
|
||||
notification.error({
|
||||
message: '提示',
|
||||
description: t('请选择文件'),
|
||||
});
|
||||
return;
|
||||
}
|
||||
const files=[];
|
||||
fileList.value.forEach(file => {
|
||||
files.push(file.originFileObj);
|
||||
});
|
||||
|
||||
const url="/system/dataMigration/importDatas";
|
||||
defHttp.uploadFile(
|
||||
{
|
||||
baseURL: globSetting.apiUrl,
|
||||
url:url,
|
||||
method: 'POST',
|
||||
},
|
||||
{
|
||||
name: 'file',
|
||||
file: files,
|
||||
data:{
|
||||
configType:props.configType,
|
||||
cover:props.coverType=='override'?true:false
|
||||
}
|
||||
}
|
||||
).then((data) => {
|
||||
notification.success({
|
||||
message: '提示',
|
||||
description: t('导入中...请稍后确认导入结果！'),
|
||||
});
|
||||
close();
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
}).finally(()=>{
|
||||
// close();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.upload-box {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.a-upload-dragger {
|
||||
width: 615px;
|
||||
height: 370px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.a-upload__text {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
right: 100px;
|
||||
font-weight: bold;
|
||||
color: #1d2027;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #4f83fd;
|
||||
}
|
||||
</style>
|
||||
43
src/views/system/dataMigration/components/import/index.vue
Normal file
43
src/views/system/dataMigration/components/import/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="import">
|
||||
<ImportSystemConfig coverType="new">
|
||||
<span class="item-action">新增模式导入</span>
|
||||
</ImportSystemConfig>
|
||||
<ImportSystemConfig coverType="override">
|
||||
<span class="item-action">覆盖模式导入</span>
|
||||
</ImportSystemConfig>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ImportSystemConfig from './ImportSystemConfig.vue';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.import{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
gap:100px;
|
||||
border:1px solid #d6d6d6;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
.item-action {
|
||||
border:1px solid rgba(206, 206, 206, 1);
|
||||
padding:6px 8px;
|
||||
border-radius:8px;
|
||||
color:rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.item-action:hover {
|
||||
cursor: pointer;
|
||||
background:rgba(22, 119, 224, 1);
|
||||
color:white;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
91
src/views/system/dataMigration/index.vue
Normal file
91
src/views/system/dataMigration/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="system-data-migration">
|
||||
<a-tabs v-model:activeKey="tabActiveKey" class="main-tabs">
|
||||
<a-tab-pane key="import" tab="导出工作区">
|
||||
<Export/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="outport" tab="导入工作区" force-render>
|
||||
<Import/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onUnmounted, createVNode} from 'vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import Export from './components/export/index.vue';
|
||||
import Import from './components/import/index.vue';
|
||||
|
||||
const tabActiveKey = ref('import');
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.system-data-migration{
|
||||
position:absolute;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background-color:white;
|
||||
padding-top:10px;
|
||||
}
|
||||
|
||||
.main-tabs {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav){
|
||||
border-bottom:0px;
|
||||
}
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab) {
|
||||
min-width: 200px !important;
|
||||
width:calc(50% - 2px);
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
font-size:16px;
|
||||
padding:8px 0px;
|
||||
&.ant-tabs-tab-active{
|
||||
// box-shadow: 10px 10px 100px rgba(#1677ff, 1) inset;
|
||||
.ant-tabs-tab-btn{
|
||||
// color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab:first-child) {
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab + .ant-tabs-tab){
|
||||
margin:0px 0px 0px 0px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-content) {
|
||||
height: 100% !important;
|
||||
overflow-y: auto;
|
||||
padding:10px 10px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-tabs-tabpane) {
|
||||
padding: 0 8px;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user