修改血缘

src/router/routes/index.ts

@@ -433,6 +433,30 @@ export const QualityRuleRoute: AppRouteRecordRaw = {
     },
   ],
 };
+
+/**血缘解析*/
+export const kinshipParseRoute: AppRouteRecordRaw = {
+  path: '/kinship/kinshipParse',
+  name: 'kinshipParse',
+  component: LAYOUT,
+  meta: {
+    title: '血缘解析',
+    icon: '',
+    hidden: true,
+    currentActiveMenu: '/kinship/kinshipParse',
+  },
+  children: [
+    {
+      path: 'parse',
+      name: 'Parse',
+      component: () => import('@/views/kinship/kinshipParse/parse.vue'),
+      meta: {
+        title: '脚本解析',
+        icon: '',
+      },
+    },
+  ],
+};
 // Basic routing without permission
 // 没有权限要求的基本路由
 export const basicRoutes = [
@@ -445,6 +469,7 @@ export const basicRoutes = [
   ModelRoute,
   DataSourceRoute,
   DataStandardRoute,
+  kinshipParseRoute,
   // RootRoute,
   ...mainOutRoutes,
   REDIRECT_ROUTE,

src/views/kinship/kinshipParse/index.vue

 <template>
   <PageWrapper title="血缘解析" class="content-padding" contentBackground>
-    <div class="step-form-form">
-      <Steps :current="current">
-        <Steps.Step title="上传解析文件" />
-        <Steps.Step title="编辑血缘" />
-      </Steps>
+    <template #footer>
+      <a-tabs default-active-key="1" v-model:activeKey="currentKey">
+        <a-tab-pane key="1" tab="脚本解析" />
+        <a-tab-pane key="2" tab="血缘映射" />
+      </a-tabs>
+    </template>
+    <div class="pt-4 m-4 desc-wrap">
+      <template v-if="currentKey == '1'">
+        <div :class="`${prefixCls}__content`">
+          <List>
+            <Row :gutter="16">
+              <template v-for="item in cardData" :key="item.title">
+                <Col :span="6">
+                  <List.Item>
+                    <Card :hoverable="true" :class="`${prefixCls}__card`" @click="handleParse">
+                      <div>
+                        <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+                        <div :class="`${prefixCls}__card-title`">
+                          {{ item.title }}
+                        </div>
+                      </div>
+                      <div :class="`${prefixCls}__card-detail`">
+                        适用版本： {{ item.version }}
+                      </div>
+                      <div :class="`${prefixCls}__card-detail`"> 描述： {{ item.remark }}</div>
+                    </Card>
+                  </List.Item>
+                </Col>
+              </template>
+            </Row>
+          </List>
+        </div>
+      </template>
+      <template v-if="currentKey == '2'">
+        <BasicTable @register="registerHistoryTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'type'">
+              <Tag color="error" v-if="record.type === '0'">导入失败</Tag>
+            </template>
+            <template v-if="column.key === 'type'">
+              <Tag color="success" v-if="record.type === '1'">导入成功</Tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:download-line',
+                    label: '',
+                    onClick: handleDownload.bind(null),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    color: 'error',
+                    label: '',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleDelete.bind(null),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
     </div>
-    <Step1 @next="handleStep1Next" v-show="current === 0" />
-    <Step2 @prev="handleStepPrev" v-show="current === 1" v-if="state.initStep2" />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import { Steps } from 'ant-design-vue';
-  import Step1 from './Step1.vue';
-  import Step2 from './Step2.vue';
+  import { Card, Col, List, Row, Tabs, Tag } from 'ant-design-vue';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { historyColumns, SearchFormSchema } from '@/views/kinship/kinshipEdit/data';
+  import { editData, historyData } from '@/views/kinship/kinshipEdit/kinshipEditData';
+  import { cardData } from '@/views/kinship/kinshipParse/kinshipParseData';
+  import Icon from '@/components/Icon/Icon.vue';
+  import {router} from "@/router";
 
   defineOptions({ name: 'AccountDetail' });
 
-  const current = ref(0);
-  const state = reactive({
-    initStep2: false,
+  const tableData = ref([]);
+  const { createMessage, createConfirm } = useMessage();
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+  const currentKey = ref('1');
+  const prefixCls = 'list-card';
+
+  const [registerHistoryTable] = useTable({
+    dataSource: historyData,
+    columns: historyColumns,
+    pagination: true,
+    showIndexColumn: false,
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: SearchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    scroll: { y: 400 },
   });
-  function handleStep1Next(step1Values: any) {
-    current.value++;
-    state.initStep2 = true;
-    console.log(step1Values);
+  function handleParse() {
+    router.push({
+      path: '/kinship/kinshipParse/parse',
+    });
   }
-
-  function handleStepPrev() {
-    current.value--;
+  function handleDownload() {
+    createMessage.success('下载成功');
+  }
+  function handleDelete() {
+    createMessage.success('删除成功');
   }
+  onMounted(() => {
+    tableData.value = editData;
+  });
 </script>
 <style lang="less" scoped>
-  .step-form-content {
-    padding: 24px;
-    background-color: @component-background;
-  }
+  .list-card {
+    &__link {
+      margin-top: 10px;
+      font-size: 14px;
+
+      a {
+        margin-right: 30px;
+      }
+
+      span {
+        margin-left: 5px;
+      }
+    }
+
+    &__card {
+      width: 100%;
+      margin-bottom: -8px;
+
+      .ant-card-body {
+        padding: 16px;
+      }
+
+      &-title {
+        margin-bottom: 5px;
+        color: @text-color-base;
+        font-size: 16px;
+        font-weight: 500;
+
+        .icon {
+          margin-top: -5px;
+          margin-right: 10px;
+          font-size: 38px !important;
+        }
+      }
 
-  .step-form-form {
-    width: 750px;
-    margin: 0 auto;
+      &-detail {
+        padding-top: 10px;
+        color: @text-color-secondary;
+        font-size: 14px;
+      }
+    }
   }
 </style>

src/views/kinship/kinshipParse/kinshipParseData.ts

@@ -42,3 +42,19 @@ export const editData: any[] = [
     status: '1',
   },
 ];
+export const cardData: any[] = [
+  {
+    title: 'KETTLE脚本解析',
+    version: 'kettle-1.0',
+    remark: 'kettle',
+    color: 'blue',
+    icon: 'ant-design:file-text-outlined',
+  },
+  {
+    title: 'ORACLE_SQL脚本解析',
+    version: 'oracle_sql_1.0',
+    remark: 'oracle_sql',
+    color: 'blue',
+    icon: 'ant-design:file-text-outlined',
+  },
+];

src/views/kinship/kinshipParse/parse.vue

+<template>
+  <PageWrapper title="血缘解析" class="content-padding" contentBackground>
+    <div class="step-form-form">
+      <Steps :current="current">
+        <Steps.Step title="上传解析文件" />
+        <Steps.Step title="编辑血缘" />
+      </Steps>
+    </div>
+    <Step1 @next="handleStep1Next" v-show="current === 0" />
+    <Step2 @prev="handleStepPrev" v-show="current === 1" v-if="state.initStep2" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { Steps } from 'ant-design-vue';
+  import Step1 from './Step1.vue';
+  import Step2 from './Step2.vue';
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const current = ref(0);
+  const state = reactive({
+    initStep2: false,
+  });
+  function handleStep1Next(step1Values: any) {
+    current.value++;
+    state.initStep2 = true;
+    console.log(step1Values);
+  }
+
+  function handleStepPrev() {
+    current.value--;
+  }
+</script>
+<style lang="less" scoped>
+  .step-form-content {
+    padding: 24px;
+    background-color: @component-background;
+  }
+
+  .step-form-form {
+    width: 750px;
+    margin: 0 auto;
+  }
+</style>