修改血缘

src/views/kinship/kinshipEdit/data.ts

-import {FormSchema} from "@/components/Form";
-import {BasicColumn} from "@/components/Table";
+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
 
 export const formSchema: FormSchema[] = [
   {

src/views/kinship/kinshipParse/Step1.vue

+<template>
+  <div class="step1">
+    <div >
+      <Description size="middle" title="SQL脚本解析器" :bordered="false" />
+      <BasicForm @register="registerForm" />
+      <div style="padding-left: 100px">
+        <a-button type="primary" @click="handleSubmit">提交</a-button>
+      </div>
+      <Description size="middle" title="日志" :bordered="false" />
+      <img src="../../../assets/images/config.png" style="width: 100%" alt="Logo" />
+      <div style="display: flex; justify-content: flex-end; margin-top: 20px">
+        <a-button style="margin-right: 50px" type="primary" @click="customSubmitFunc">下一步</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './data';
+
+  import { Description } from '@/components/Description';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const emit = defineEmits(['next']);
+
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    showActionButtonGroup: false,
+  });
+
+  function customSubmitFunc() {
+    try {
+      const values = validate();
+      emit('next', values);
+    } catch (error) {
+      //
+    }
+  }
+  function handleSubmit() {
+    createMessage.success('提交成功');
+  }
+</script>
+<style lang="less" scoped>
+  .step1 {
+    &-form {
+      width: 450px;
+      margin: 0 auto;
+    }
+
+    h3 {
+      margin: 0 0 12px;
+      color: @text-color-base;
+      font-size: 16px;
+      line-height: 32px;
+    }
+
+    h4 {
+      margin: 0 0 4px;
+      color: @text-color-base;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    p {
+      color: @text-color-base;
+    }
+  }
+
+  .pay-select {
+    width: 20%;
+  }
+
+  .pay-input {
+    width: 70%;
+  }
+</style>

src/views/kinship/kinshipParse/Step2.vue

+<template>
+  <div class="step1">
+    <div>
+      <Description size="middle" title="库表同步" :bordered="false" />
+      <BasicForm @register="registerEditForm" />
+      <div style="padding-left: 100px">
+        <a-button type="primary" @click="handleSubmit">确定</a-button>
+      </div>
+      <Description size="middle" title="血缘解析表" :bordered="false" />
+      <BasicTable @register="registerTable">
+        <template #bodyCell="{ column }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  //详情
+                  icon: 'clarity:note-edit-line',
+                  label: '',
+                  onClick: handleEdit.bind(null),
+                },
+                {
+                  icon: 'ant-design:delete-outlined',
+                  color: 'error',
+                  label: '',
+                  popConfirm: {
+                    title: '是否确认删除',
+                    placement: 'left',
+                    confirm: handleDelete.bind(null),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+      <div style="display: flex; justify-content: flex-end">
+        <a-button style="margin-right: 20px" type="primary" @click="customResetFunc"
+          >上一步</a-button
+        >
+        <a-button style="margin-right: 100px" type="primary" @click="customSubmitFunc"
+          >提交</a-button
+        >
+      </div>
+    </div>
+    <detailModal @register="registerModal"/>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Description } from '@/components/Description';
+  import { editColumns, formEditSchema, SearchFormSchema } from '@/views/kinship/kinshipParse/data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { editData } from './kinshipParseData';
+  import { useModal } from '@/components/Modal';
+  import detailModal from './detailModal.vue';
+
+  const emit = defineEmits(['next', 'prev']);
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerEditForm] = useForm({
+    labelWidth: 100,
+    schemas: formEditSchema,
+    showActionButtonGroup: false,
+  });
+  const [registerTable] = useTable({
+    dataSource: editData,
+    columns: editColumns,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: SearchFormSchema,
+      autoSubmitOnEnter: true,
+      resetFunc: () => {},
+    },
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  async function customResetFunc() {
+    emit('prev');
+  }
+
+  async function customSubmitFunc() {
+    createMessage.success('提交成功');
+  }
+  function handleSubmit() {
+    createMessage.success('提交成功');
+  }
+  function handleDelete() {
+    createMessage.success('删除成功');
+  }
+  function handleEdit() {
+    openModal(true, {
+      title: '血缘导入结果'
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .step1 {
+    &-form {
+      width: 450px;
+      margin: 0 auto;
+    }
+
+    h3 {
+      margin: 0 0 12px;
+      color: @text-color-base;
+      font-size: 16px;
+      line-height: 32px;
+    }
+
+    h4 {
+      margin: 0 0 4px;
+      color: @text-color-base;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    p {
+      color: @text-color-base;
+    }
+  }
+
+  .pay-select {
+    width: 20%;
+  }
+
+  .pay-input {
+    width: 70%;
+  }
+</style>

src/views/kinship/kinshipParse/data.ts

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'file',
+    component: 'Upload',
+    label: '文件上传',
+    colProps: { lg: 24, md: 24 },
+    rules: [{ required: true, message: '请选择上传文件' }],
+  },
+];
+export const columns: BasicColumn[] = [
+  {
+    title: '工作表名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '编号',
+    dataIndex: 'code',
+    width: 120,
+  },
+  {
+    title: '错误类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+];
+export const formEditSchema: FormSchema[] = [
+  {
+    field: 'root',
+    label: '源端连接',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'v1', value: '1' },
+        { label: 'v2', value: '2' },
+        { label: 'v3', value: '3' },
+      ],
+    },
+    colProps: { span: 12 },
+  },
+  {
+    field: 'flag',
+    label: '数据库选择',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '全部', value: '0' },
+        { label: '自选', value: '1' },
+      ],
+    },
+  },
+  {
+    field: 'dataBase',
+    label: '',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '数据库1', value: '1' },
+        { label: '数据库2', value: '2' },
+        { label: '数据库3', value: '3' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'path',
+    label: '目标端连接',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'v1', value: '1' },
+        { label: 'v2', value: '2' },
+        { label: 'v3', value: '3' },
+      ],
+    },
+    colProps: { span: 12 },
+  },
+];
+export const editColumns: BasicColumn[] = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+];
+export const SearchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+export const detailColumns: BasicColumn[] = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 60,
+  }
+];

src/views/kinship/kinshipParse/detailModal.vue

+<template>
+  <BasicModal width="55%" v-bind="$attrs" @register="registerModal" :title="title">
+    <template #footer>
+      <a-button type="primary" @click="handleDownload">下载导入结果</a-button>
+      <a-button type="primary" @click="handleSubmit">完成</a-button>
+    </template>
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'status'">
+          <Tag color="error" v-if="record.status === '0'">失败</Tag>
+        </template>
+        <template v-if="column.key === 'status'">
+          <Tag color="success" v-if="record.status === '1'">成功</Tag>
+        </template>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { detailColumns } from '@/views/kinship/kinshipParse/data';
+  import { editData } from '@/views/kinship/kinshipParse/kinshipParseData';
+  import { Tag } from 'ant-design-vue';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  //初始化表单
+  const [registerTable, { reload }] = useTable({
+    dataSource: editData,
+    columns: detailColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await reload();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+  }
+  function handleDownload() {
+    createMessage.success('下载成功');
+  }
+</script>

src/views/kinship/kinshipParse/index.vue

 <template>
   <PageWrapper title="血缘解析" class="content-padding" contentBackground>
-    <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'">
-        <BasicForm @register="registerForm" />
-        <div style="padding-left: 100px">
-          <a-button type="primary" @click="handleSubmit">提交</a-button>
-        </div>
-        <BasicTable @register="registerTable" />
-      </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 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 { onMounted, ref } from 'vue';
+  import { reactive, ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import { Tabs, Tag } from 'ant-design-vue';
-  import { BasicTable, TableAction, useTable } from '@/components/Table';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { BasicForm, useForm } from '@/components/Form';
-  import {
-    formSchema,
-    columns,
-    historyColumns,
-    SearchFormSchema,
-  } from '@/views/kinship/kinshipEdit/data';
-  import { editData, historyData } from '@/views/kinship/kinshipEdit/kinshipEditData';
+  import { Steps } from 'ant-design-vue';
+  import Step1 from './Step1.vue';
+  import Step2 from './Step2.vue';
 
   defineOptions({ name: 'AccountDetail' });
 
-  const tableData = ref([]);
-  const { createMessage, createConfirm } = useMessage();
-  const ATabs = Tabs;
-  const ATabPane = Tabs.TabPane;
-  const currentKey = ref('1');
-
-  const [registerTable, { reload }] = useTable({
-    title: '错误列表',
-    api: async () => {
-      const response = {
-        pageNum: '1',
-        pageSize: '10',
-        pages: '1',
-        total: tableData.value.length,
-        code: '',
-        message: '',
-        data: [],
-      };
-      //过滤data中的数据，取出等于params.deptId的数据
-      var data = [];
-      data = tableData.value;
-      return { ...response, data: data };
-    },
-    pagination: false,
-    columns,
-    useSearchForm: false,
-    showTableSetting: false,
-    bordered: true,
-    showIndexColumn: false,
-  });
-  const [registerForm, { resetFields }] = useForm({
-    labelWidth: 100,
-    baseColProps: { lg: 12, md: 24 },
-    schemas: formSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
-  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 },
+  const current = ref(0);
+  const state = reactive({
+    initStep2: false,
   });
-  function handleSubmit() {
-    createMessage.success('提交成功');
+  function handleStep1Next(step1Values: any) {
+    current.value++;
+    state.initStep2 = true;
+    console.log(step1Values);
   }
-  function handleDownload() {
-    createMessage.success('下载成功');
-  }
-  function handleDelete() {
-    createMessage.success('删除成功');
+
+  function handleStepPrev() {
+    current.value--;
   }
-  onMounted(() => {
-    resetFields();
-    tableData.value = editData;
-  });
 </script>
+<style lang="less" scoped>
+  .step-form-content {
+    padding: 24px;
+    background-color: @component-background;
+  }
+
+  .step-form-form {
+    width: 750px;
+    margin: 0 auto;
+  }
+</style>

src/views/kinship/kinshipParse/kinshipParseData.ts

+export const editData: any[] = [
+  {
+    name: 'Sheet0',
+    code: 'C2',
+    type: '数据源不存在',
+    status: '1',
+  },
+  {
+    name: 'Sheet1',
+    code: 'C3',
+    type: '数据源不存在',
+    status: '1',
+  },
+  {
+    name: 'Sheet2',
+    code: 'C4',
+    type: '数据源不存在',
+    status: '0',
+  },
+  {
+    name: 'Sheet3',
+    code: 'C5',
+    type: '数据源不存在',
+    status: '0',
+  },
+  {
+    name: 'Sheet4',
+    code: 'C6',
+    type: '数据源不存在',
+    status: '1',
+  },
+  {
+    name: 'Sheet5',
+    code: 'C7',
+    type: '数据源不存在',
+    status: '1',
+  },
+  {
+    name: 'Sheet6',
+    code: 'C8',
+    type: '数据源不存在',
+    status: '1',
+  },
+];