系统数据迁移（系统基础数据导出、导入）功能开发
This commit is contained in:
suguangxu
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>
|
||||
Reference in New Issue
Block a user