vue-apps/com.actionsoft.apps.coe.pal.datamigration/src/views/Home.vue

<template>
  <div class="home">
      <div class="left">
        <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>
                        <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">
        <component ref="component" :is="activeName"></component>
      </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';
import PositionImport from '@/components/position-import.vue';
import ProcessVersionImport from "@/components/process-version-import.vue";
import SystemTextImport from "@/components/system-text-import.vue";
import BatchImportAccessories from "@/components/batch-import-accessories.vue";

export default defineComponent({
  name: 'Home',
  components: {
    DataMigration,
    DataImport,
    DataItImport,
    ModuleChange,
    BatchDataImport,
    FormImport,
    PerformanceImport,
    SystemImport,
    PositionImport,
    ProcessVersionImport,
    SystemTextImport,
    BatchImportAccessories
  },
  setup(){
    // const { proxy: $this } = getCurrentInstance();
    let info = reactive({
      migrationTypes: [{value:"",label:"Aris"}],
      migrationType: "",
      tabPosition: "left",
      tabPanes: [
        {label:"Aris流程导入",name:"dataMigration",icon:"&#xe741;"},// xml
        {label:"流程属性导入",name:"dataImport",icon:"&#xe6a4;"},// word
        {label:"IT系统导入",name:"dataItImport",icon:"&#xe730;"},// excel
        {label:"岗位批处理",name:"positionImport",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
        {label:"版本批处理",name:"processVersionImport",icon:"&#xe730;"},// excel
        {label:"制度正文导入",name:"systemTextImport",icon:"&#xe730;"},// xml
        {label:"附件批量导入",name:"batchImportAccessories",icon:"&#xe730;"},//
      ],
      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>