136 lines
4.9 KiB
Vue
136 lines
4.9 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="left">
|
|
<div class="migration-type-box">
|
|
<span>迁移类型</span>
|
|
<el-select v-model="info.migrationType" placeholder="请选择迁移类型">
|
|
<el-option
|
|
v-for="item in info.migrationTypes"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<el-divider />
|
|
<div class="tabs-box">
|
|
<el-tabs v-model="activeName" :tab-position="info.tabPosition" @tab-click="tabChange">
|
|
<el-tab-pane v-for="tab in info.tabPanes" :name="tab.name">
|
|
<template #label>
|
|
<span class="custom-tabs-label">
|
|
<i class="awsui-iconfont" v-html="tab.icon"></i>
|
|
<span>{{ tab.label }}</span>
|
|
</span>
|
|
</template>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<data-migration v-if="activeName === 'dataMigration'"></data-migration>
|
|
<data-import v-if="activeName === 'dataImport'"></data-import>
|
|
<data-it-import v-if="activeName === 'dataItImport'"></data-it-import>
|
|
<module-change v-if="activeName === 'moduleChange'"></module-change>
|
|
<batch-data-import v-if="activeName === 'batchDataImport'"></batch-data-import>
|
|
<form-import v-if="activeName === 'formImport'"></form-import>
|
|
<performance-import v-if="activeName === 'performanceImport'"></performance-import>
|
|
<system-import v-if="activeName === 'systemImport'"></system-import>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,getCurrentInstance,reactive,ref } from 'vue';
|
|
import DataMigration from '@/components/data-migration.vue';
|
|
import DataImport from '@/components/data-import.vue';
|
|
import DataItImport from '@/components/data-It-import.vue';
|
|
import ModuleChange from '@/components/module-change.vue';
|
|
|
|
import BatchDataImport from '@/components/batch-data-import.vue';
|
|
import FormImport from '@/components/form-import.vue';
|
|
import PerformanceImport from '@/components/Performance-import.vue';
|
|
import SystemImport from '@/components/system-import.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'Home',
|
|
components: {
|
|
DataMigration,
|
|
DataImport,
|
|
DataItImport,
|
|
ModuleChange,
|
|
BatchDataImport,
|
|
FormImport,
|
|
PerformanceImport,
|
|
SystemImport
|
|
},
|
|
setup(){
|
|
// const { proxy: $this } = getCurrentInstance();
|
|
let info = reactive({
|
|
migrationTypes: [{value:"",label:"Aris"}],
|
|
migrationType: "",
|
|
tabPosition: "left",
|
|
tabPanes: [{label:"数据迁移",name:"dataMigration",icon:""},{label:"流程属性数据导入",name:"dataImport",icon:""},{label:"IT系统数据导入",name:"dataItImport",icon:""},{label:"模型转换",name:"moduleChange",icon:""},{label:"制度导入",name:"systemImport",icon:""},{label:"表单导入",name:"formImport",icon:""},{label:"批处理工具",name:"batchDataImport",icon:""},{label:"绩效导入",name:"performanceImport",icon:""}],
|
|
flagBit: 1
|
|
});
|
|
const activeName = ref('dataMigration')
|
|
const tabChange = (tabPaneName: any) => {
|
|
// console.log(tabPaneName,activeName)
|
|
}
|
|
return {
|
|
info,
|
|
tabChange,
|
|
activeName
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.home {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
.left {
|
|
width: 240px;
|
|
height: 100%;
|
|
margin-right: 5px;
|
|
box-shadow: 5px 0 5px rgba(236,236,241,0.9);
|
|
.migration-type-box {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
span {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
:deep(.el-select) {
|
|
width: 150px;
|
|
height: 30px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.tabs-box {
|
|
:deep(.el-tabs--left .el-tabs__item.is-left) {
|
|
text-align: center;
|
|
width: 240px;
|
|
height: 50px;
|
|
font-size: 15px;
|
|
font-weight: 32;
|
|
}
|
|
.custom-tabs-label {
|
|
.awsui-iconfont {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
height: 100%;
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
</style>
|