Skip to content

B
bigDataSystem
Commit adca658f authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改血缘

parent dbc23aab
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 128 deletions
src/views/kinship/kinshipEdit/data.ts
View file @ adca658f
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 0 → 100644
View file @ adca658f
<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 0 → 100644
View file @ adca658f
<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 0 → 100644
View file @ adca658f
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 0 → 100644
View file @ adca658f
<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
View file @ adca658f
<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 0 → 100644
View file @ adca658f
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',
},
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment