数据迁移应用调整前端样式

This commit is contained in:
446052889@qq.com 2022-07-04 13:36:20 +08:00
parent 69a05b8ee4
commit 62d6a316d1
9 changed files with 48 additions and 40 deletions

View File

@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Word文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Word格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div class="data-import">
<div class="top-box">
<div class="title-box">批处理工具导入</div>
<div class="title-box">批处理工具</div>
<div class="step-box">
<el-steps :active="info.activeStep" finish-status="success">
<el-step :title="item.title" v-for="item in info.steps" />
@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Word文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Word格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div class="data-import">
<div class="top-box">
<div class="title-box">IT系统导入</div>
<div class="title-box">IT系统导入</div>
<div class="step-box">
<el-steps :active="info.activeStep" finish-status="success">
<el-step :title="item.title" v-for="item in info.steps" />
@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Excel文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Excel文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Excel格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Word文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Word格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div class="data-migration">
<div class="top-box">
<div class="title-box">数据迁移</div>
<div class="title-box">Aris流程导入</div>
</div>
<div class="bottom-box">
<div class="empty-box" v-if="info.fileList.length === 0">
@ -18,7 +18,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入ARIS XML文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入ARIS XML文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持XML格式文本
@ -35,7 +35,7 @@
</el-scrollbar>
</div>
<div class="action-box" v-if="info.fileList.length > 0">
<el-button style="cursor: pointer" type="primary" @click="next">执行导入</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">执行导入</awsui-button>
</div>
</div>
</div>

View File

@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Word文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Word格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -23,7 +23,7 @@
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
<awsui-button type="primary" @click="handleUploadBtn">导入Word文件</awsui-button>
<template #tip>
<div class="el-upload__tip">
仅支持Word格式文本
@ -40,7 +40,7 @@
</el-scrollbar>
</div>
<div class="action-box">
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
<awsui-button style="cursor: pointer" type="primary" @click="next">下一步</awsui-button>
</div>
</div>
</div>

View File

@ -6,6 +6,8 @@ import store from './store'
/* eslint-disable */
import awsui from "../lib/awsui.es"; //注意awsui组件库根据情况指定路径
import "../lib/awsui.css";
import '../static/common/common.css';
import '../static/common/theme1.css';// 主题颜色配置
const app = createApp(App);

View File

@ -1,40 +1,37 @@
<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="migration-type-box"></div>
<!-- <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>
<div style="width: 100%;height: 100%;text-align: left;padding-left: 30px;">
<span class="custom-tabs-label" style="font-size: 18px;">
<i class="awsui-iconfont" v-html="tab.icon" style="font-size: 18px;"></i>
<span>{{ tab.label }}</span>
</span>
</div>
</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>
<component ref="component" :is="activeName"></component>
</div>
</div>
</template>
@ -69,7 +66,16 @@ export default defineComponent({
migrationTypes: [{value:"",label:"Aris"}],
migrationType: "",
tabPosition: "left",
tabPanes: [{label:"数据迁移",name:"dataMigration",icon:"&#xe751;"},{label:"流程属性数据导入",name:"dataImport",icon:"&#xe784;"},{label:"IT系统数据导入",name:"dataItImport",icon:"&#xe784;"},{label:"模型转换",name:"moduleChange",icon:"&#xe839;"},{label:"制度导入",name:"systemImport",icon:"&#xe839;"},{label:"表单导入",name:"formImport",icon:"&#xe839;"},{label:"批处理工具",name:"batchDataImport",icon:"&#xe839;"},{label:"绩效导入",name:"performanceImport",icon:"&#xe839;"}],
tabPanes: [
{label:"Aris流程导入",name:"dataMigration",icon:"&#xe741;"},// xml
{label:"流程属性导入",name:"dataImport",icon:"&#xe6a4;"},// word
{label:"IT系统导入",name:"dataItImport",icon:"&#xe730;"},// excel
{label:"模型转换",name:"moduleChange",icon:"&#xe677;"},
{label:"制度导入",name:"systemImport",icon:"&#xe6a4;"},// word
{label:"表单导入",name:"formImport",icon:"&#xe6a4;"},// word
{label:"批处理工具",name:"batchDataImport",icon:"&#xe6a4;"},// word
{label:"绩效导入",name:"performanceImport",icon:"&#xe6a4;"}// word
],
flagBit: 1
});
const activeName = ref('dataMigration')