Skip to content

B
bigDataSystem
Commit 1853393b authored by chenjiahao's avatar chenjiahao
Browse files
Options

数据质量-质量模板

parent 81b6a215
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 154 deletions
src/views/dataQuality/template/edit.vue
View file @ 1853393b
This diff is collapsed.
src/views/dataQuality/template/findPath.vue 0 → 100644
View file @ 1853393b
<template>
<BasicModal
width="60%"
v-bind="$attrs"
@register="registerModal"
title="查找路径"
@ok="handleSubmit"
>
<div class="path-selector">
<a-cascader
style="width: 60%"
v-model:value="value"
placeholder="Please select"
showSearch
change-on-select
:options="options"
@change="onChange"
/>
</div>
<template #footer>
<p> {{ text }} &nbsp; </p>
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleSubmit">确定</a-button>
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useTable } from '@/components/Table';
import { Cascader as ACascader, CascaderProps } from 'ant-design-vue';
import { tableList } from './mock';
const emit = defineEmits(['success', 'register']);
const businessId = ref<number | undefined>();
// const popupVisible = ref(true);
// 初始化模态对话框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
businessId.value = data.businessId;
setModalProps({ confirmLoading: false });
});
/** 确定按钮 */
async function handleSubmit() {
closeModal();
emit('success', text.value);
}
function handleCancel() {
closeModal();
}
const options: CascaderProps['options'] = [
{
value: '数据库对象资源',
label: '数据库对象资源',
children: [
{
value: '数据中台工作区01',
label: '数据中台工作区01',
children: [
{
value: 'ArgoDB_Dev01',
label: 'ArgoDB_Dev01',
children: [
{
value: 'dmtp01',
label: 'dmtp01',
children: [
{
value: 'eligible_graduates_list',
label: 'eligible_graduates_list',
},
{
value: 'graduates_info',
label: 'graduates_info',
},
{
value: 'graduates_info_id_masked',
label: 'graduates_info_id_masked',
},
{
value: 'landing_graduates_info',
label: 'landing_graduates_info',
},
{
value: 'landing_member_relationship_info',
label: 'landing_member_relationship_info',
},
{
value: 'lowincome_family_children_list',
label: 'lowincome_family_children_list',
},
{
value: 'lowincome_family_info',
label: 'lowincome_family_info',
},
{
value: 'lowincome_graduates_area_ratio',
label: 'lowincome_graduates_area_ratio',
},
{
value: 'lowincome_graduates_cnt',
label: 'lowincome_graduates_cnt',
},
{
value: 'lowincome_graduates_employment_cls',
label: 'lowincome_graduates_employment_cls',
},
{
value: 'lowincome_graduates_employment_rat',
label: 'lowincome_graduates_employment_rat',
},
{
value: 'test',
label: 'test',
},
],
},
],
},
],
},
],
},
];
const value = ref<string[]>([]);
const text = ref('');
const onChange: CascaderProps['onChange'] = (_value, selectedOptions) => {
text.value = selectedOptions.map((o) => o.label).join('/ ');
};
</script>
<style scoped>
.path-selector {
margin-bottom: 20px;
}
</style>
src/views/dataQuality/template/mock.ts
View file @ 1853393b
...@@ -31,6 +31,29 @@ export const tableList: any[] = [ ...@@ -31,6 +31,29 @@ export const tableList: any[] = [
'SELECT COUNT(*)\n' + 'SELECT COUNT(*)\n' +
'FROM $(table a}\n' + 'FROM $(table a}\n' +
'WHERE ${column a}IS NOT NULL AND ${column a}NOT IN (${range a})', 'WHERE ${column a}IS NOT NULL AND ${column a}NOT IN (${range a})',
params: [
{
key: '1',
parameter: 'table_a',
type: '数据表类',
description: '数据表',
value: '默认工作组/数据库a/数据表a',
},
{
key: '2',
parameter: 'column_a',
type: '数据字段类',
description: '数据字段',
value: '默认工作组/数据库a/数据表a/字段a',
},
{
key: '3',
parameter: 'range_a',
type: '公共代码类',
description: '值域',
value: '公共代码/数据范围a',
},
],
}, },
{ {
businessId: 3, businessId: 3,
......
src/views/dataQuality/template/runModal.vue
View file @ 1853393b
<template> <template>
<BasicModal width="35%" v-bind="$attrs" @register="registerModal" title="运行" @ok="handleSubmit"> <BasicModal width="40%" v-bind="$attrs" @register="registerModal" title="运行" @ok="handleSubmit">
<p>请填写当前SQL中引用的参数的值</p> <p>请填写当前SQL中引用的参数的值</p>
<BasicTable @register="registerTable" /> <BasicTable @register="registerTable" style="height: 370px">
<template #value="{ text, record }">
<div class="control-group">
<AInput style="width: 220px; border-radius: 5px 0 0 5px" :value="text" />
<a-button type="primary" @click="handleChose()" style="border-radius: 0 5px 5px 0"
>选择</a-button
>
</div>
</template>
</BasicTable>
<div style="width: 100%; margin-top: 20px; height: 120px" v-show="isRun">
<span>运行结果：0</span>
</div>
<template #footer>
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleRun">运行</a-button>
</template>
</BasicModal> </BasicModal>
<FindPath @register="registerFindPathModal" @success="handleSuccess" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, unref } from 'vue'; import { ref, onMounted } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
import { tableList } from './mock';
import FindPath from '@/views/dataQuality/template/findPath.vue';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { importFormSchema } from './tempalte.data'; import { importFormSchema } from './tempalte.data';
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true); const businessId = ref();
const isMove = ref(false); const isRun = ref(false);
const rowId = ref('');
//初始化弹框 //初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields(); console.log(data);
businessId.value = data.businessId;
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
setFieldsValue({
...data.record,
});
}
}); });
const columns = [ const columns = [
...@@ -41,78 +50,37 @@ ...@@ -41,78 +50,37 @@
title: '参数类型', title: '参数类型',
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
edit: true,
// editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '数据表类',
value: '1',
},
{
label: '数据字段类',
value: '2',
},
{
label: '公共代码类',
value: '3',
},
{
label: '全局参数类',
value: '4',
},
],
},
}, },
{ {
title: '描述（选填）', title: '模板描述',
dataIndex: 'description', dataIndex: 'description',
key: 'description', key: 'description',
edit: true,
editable: true,
editComponent: 'Input',
},
];
const tableData = ref([
{
key: '1',
parameter: 'table_a',
type: '数据表类',
description: '数据表',
},
{
key: '2',
parameter: 'column_a',
type: '数据字段类',
description: '数据字段',
}, },
{ {
key: '3', title: '值',
parameter: 'range_a', dataIndex: 'value',
type: '公共代码类', key: 'value',
description: '值域', // edit: true,
// editable: true,
// editComponent: 'Input',
width: 250,
slots: { customRender: 'value' },
}, },
]); ];
const [ const [registerTable] = useTable({
registerTable, api: async () => {
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection }, const data = tableList.filter((item) => item.businessId == businessId.value);
] = useTable({
api: async (params) => {
const response = { const response = {
pageNu: '1', pageNu: '1',
pageSize: '10', pageSize: '10',
pages: '1', pages: '1',
total: tableData.value.length, total: data[0].params.length,
code: '', code: '',
message: '', message: '',
data: [], data: data[0].params,
}; };
var data = []; return { ...response };
data = tableData.value;
return { ...response, data: data };
}, },
rowKey: 'key', rowKey: 'key',
columns, columns,
...@@ -127,4 +95,28 @@ ...@@ -127,4 +95,28 @@
async function handleSubmit() { async function handleSubmit() {
closeModal(); closeModal();
} }
function handleCancel() {
closeModal();
}
function handleRun() {
isRun.value = true;
}
const [registerFindPathModal, { openModal: openFindPathModal }] = useModal();
function handleChose() {
openFindPathModal(true);
// console.log('record', record);
}
const selectedPath = ref('');
function handleSuccess(path) {
selectedPath.value = path;
console.log('Selected Path:', selectedPath.value);
// 在这里处理接收到的路径信息
}
</script> </script>
<style scoped>
.control-group {
display: flex;
align-items: center;
}
</style>
src/views/dataQuality/template/selectDatasourceModal.vue 0 → 100644
View file @ 1853393b
<template>
<BasicModal
width="500px"
v-bind="$attrs"
@register="registerModal"
title="选择数据源类型"
@ok="handleSubmit"
@cancel="handleCancel"
>
<div class="modal-content">
<p>当前数据源类型:</p>
<span>{{ currentDataSource }}</span>
<br />
<p>选择需要转换的数据类型</p>
<ACheckboxGroup v-model:value="selectedDataTypes" class="checkbox-group">
<ACheckbox :value="'DB2'">DB2</ACheckbox>
<ACheckbox :value="'HIVE'">HIVE</ACheckbox>
<ACheckbox :value="'IMPALA'">IMPALA</ACheckbox>
<ACheckbox :value="'INCEPTOR'">INCEPTOR</ACheckbox>
<ACheckbox :value="'MYSQL'">MYSQL</ACheckbox>
<ACheckbox :value="'ORACLE'">ORACLE</ACheckbox>
<ACheckbox :value="'SQL_SERVER'">SQL_SERVER</ACheckbox>
</ACheckboxGroup>
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { Checkbox as ACheckbox, CheckboxGroup as ACheckboxGroup } from 'ant-design-vue';
// 定义发射的事件
const emit = defineEmits(['success', 'register']);
// 当前数据源类型
const currentDataSource = ref('ARGODB');
// 已选择的数据类型
const selectedDataTypes = ref<string[]>(['INCEPTOR', 'MYSQL']);
// 初始化模态框
const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
if (data && data.currentDataSource) {
currentDataSource.value = data.currentDataSource;
}
setModalProps({ confirmLoading: false });
});
// 提交处理
const handleSubmit = () => {
// 发射 success 事件，并附带已选择的数据类型
emit('success', selectedDataTypes.value);
closeModal();
};
// 取消处理
const handleCancel = () => {
closeModal();
};
</script>
<style scoped>
.modal-content {
padding: 20px;
}
.checkbox-group {
display: flex;
flex-direction: column;
}
.checkbox-item {
margin-bottom: 10px;
}
</style>
src/views/dataQuality/template/tempalte.data.ts
View file @ 1853393b
...@@ -211,8 +211,6 @@ export const formSchemaTemplate: any = [ ...@@ -211,8 +211,6 @@ export const formSchemaTemplate: any = [
}, },
}, },
]; ];
export const importFormSchema: any[] = [ export const importFormSchema: any[] = [
{ {
field: 'fileMethods', field: 'fileMethods',
......
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