calvin
3 years ago
committed by
GitHub
14 changed files with 2697 additions and 735 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,102 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, h, PropType, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { NDataTable } from 'naive-ui' |
||||||
|
import Modal from '@/components/modal' |
||||||
|
import styles from '../index.module.scss' |
||||||
|
import { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||||
|
|
||||||
|
const props = { |
||||||
|
show: { |
||||||
|
type: Boolean as PropType<boolean>, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: String as PropType<string>, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'ruleInputEntry', |
||||||
|
props, |
||||||
|
emits: ['cancel', 'confirm'], |
||||||
|
setup(props, ctx) { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const ruleInputEntryList = JSON.parse(props.data).ruleInputEntryList |
||||||
|
|
||||||
|
ruleInputEntryList.forEach((item: any) => { |
||||||
|
item.title = t( |
||||||
|
'data_quality.rule.' + item.title.substring(3, item.title.length - 1) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
const columns: TableColumns<any> = [ |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.input_item_title'), |
||||||
|
key: 'title' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.input_item_placeholder'), |
||||||
|
key: 'field' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.input_item_type'), |
||||||
|
key: 'type' |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const onCancel = () => { |
||||||
|
ctx.emit('cancel') |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirm = () => { |
||||||
|
ctx.emit('confirm') |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
onCancel, |
||||||
|
onConfirm, |
||||||
|
columns, |
||||||
|
ruleInputEntryList |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
show={this.$props.show} |
||||||
|
title={t('data_quality.rule.input_item')} |
||||||
|
cancelShow={false} |
||||||
|
onConfirm={this.onConfirm} |
||||||
|
> |
||||||
|
<NDataTable |
||||||
|
columns={this.columns} |
||||||
|
data={this.ruleInputEntryList} |
||||||
|
striped |
||||||
|
size={'small'} |
||||||
|
class={styles.table} |
||||||
|
/> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, PropType } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { NSpace, NTooltip, NButton, NIcon } from 'naive-ui' |
||||||
|
import { InfoCircleFilled } from '@vicons/antd' |
||||||
|
import type { Rule } from '@/service/modules/data-quality/types' |
||||||
|
|
||||||
|
interface ItemRow extends Rule {} |
||||||
|
|
||||||
|
const props = { |
||||||
|
row: { |
||||||
|
type: Object as PropType<ItemRow>, |
||||||
|
default: {} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const TableAction = defineComponent({ |
||||||
|
name: 'TableAction', |
||||||
|
props, |
||||||
|
emits: ['viewRuleEntry'], |
||||||
|
setup(props, { emit }) { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const viewRuleEntryDetails = (detail: string) => { |
||||||
|
emit('viewRuleEntry', detail) |
||||||
|
} |
||||||
|
|
||||||
|
return { t, viewRuleEntryDetails } |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t, viewRuleEntryDetails } = this |
||||||
|
|
||||||
|
return ( |
||||||
|
<NSpace> |
||||||
|
<NTooltip trigger={'hover'}> |
||||||
|
{{ |
||||||
|
default: () => t('data_quality.rule.view_input_item'), |
||||||
|
trigger: () => ( |
||||||
|
<NButton |
||||||
|
size='small' |
||||||
|
type='primary' |
||||||
|
tag='div' |
||||||
|
onClick={() => viewRuleEntryDetails(this.row.ruleJson)} |
||||||
|
circle |
||||||
|
> |
||||||
|
<NIcon> |
||||||
|
<InfoCircleFilled /> |
||||||
|
</NIcon> |
||||||
|
</NButton> |
||||||
|
) |
||||||
|
}} |
||||||
|
</NTooltip> |
||||||
|
</NSpace> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default TableAction |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
.table-card { |
||||||
|
margin-top: 8px; |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin-top: 20px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,157 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue' |
||||||
|
import { |
||||||
|
NSpace, |
||||||
|
NInput, |
||||||
|
NButton, |
||||||
|
NIcon, |
||||||
|
NDataTable, |
||||||
|
NPagination, |
||||||
|
NCard |
||||||
|
} from 'naive-ui' |
||||||
|
import { SearchOutlined } from '@vicons/antd' |
||||||
|
import { useTable } from './use-table' |
||||||
|
import Card from '@/components/card' |
||||||
|
import styles from './index.module.scss' |
||||||
|
import RuleModal from './components/rule-modal' |
||||||
|
|
||||||
|
const TaskResult = defineComponent({ |
||||||
|
name: 'rule', |
||||||
|
setup() { |
||||||
|
const { t, variables, getTableData } = useTable() |
||||||
|
|
||||||
|
const showModalRef = ref(false) |
||||||
|
|
||||||
|
const ruleEntryData = ref('') |
||||||
|
|
||||||
|
const requestTableData = () => { |
||||||
|
getTableData({ |
||||||
|
pageSize: variables.pageSize, |
||||||
|
pageNo: variables.page, |
||||||
|
startDate: '', |
||||||
|
endDate: '', |
||||||
|
searchVal: variables.searchVal |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const onUpdatePageSize = () => { |
||||||
|
variables.page = 1 |
||||||
|
requestTableData() |
||||||
|
} |
||||||
|
|
||||||
|
const onSearch = () => { |
||||||
|
variables.page = 1 |
||||||
|
requestTableData() |
||||||
|
} |
||||||
|
|
||||||
|
const onCancel = () => { |
||||||
|
showModalRef.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirm = () => { |
||||||
|
showModalRef.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const viewRuleEntry = (ruleJson: string) => { |
||||||
|
showModalRef.value = true |
||||||
|
ruleEntryData.value = ruleJson |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
requestTableData() |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
t, |
||||||
|
...toRefs(variables), |
||||||
|
requestTableData, |
||||||
|
onUpdatePageSize, |
||||||
|
showModalRef, |
||||||
|
onCancel, |
||||||
|
onConfirm, |
||||||
|
onSearch, |
||||||
|
ruleEntryData, |
||||||
|
viewRuleEntry |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { |
||||||
|
t, |
||||||
|
showModalRef, |
||||||
|
requestTableData, |
||||||
|
onUpdatePageSize, |
||||||
|
onSearch, |
||||||
|
onCancel, |
||||||
|
onConfirm, |
||||||
|
viewRuleEntry, |
||||||
|
ruleEntryData |
||||||
|
} = this |
||||||
|
|
||||||
|
const { columns } = useTable(viewRuleEntry) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NCard> |
||||||
|
<NSpace justify='end'> |
||||||
|
<NInput |
||||||
|
v-model={[this.searchVal, 'value']} |
||||||
|
size='small' |
||||||
|
placeholder={t('data_quality.rule.name')} |
||||||
|
clearable |
||||||
|
/> |
||||||
|
<NButton size='small' type='primary' onClick={onSearch}> |
||||||
|
{{ |
||||||
|
icon: () => ( |
||||||
|
<NIcon> |
||||||
|
<SearchOutlined /> |
||||||
|
</NIcon> |
||||||
|
) |
||||||
|
}} |
||||||
|
</NButton> |
||||||
|
</NSpace> |
||||||
|
</NCard> |
||||||
|
<Card class={styles['table-card']}> |
||||||
|
<NDataTable columns={columns} data={this.tableData} /> |
||||||
|
<div class={styles.pagination}> |
||||||
|
<NPagination |
||||||
|
v-model:page={this.page} |
||||||
|
v-model:page-size={this.pageSize} |
||||||
|
page-count={this.totalPage} |
||||||
|
show-size-picker |
||||||
|
page-sizes={[10, 30, 50]} |
||||||
|
show-quick-jumper |
||||||
|
onUpdatePage={requestTableData} |
||||||
|
onUpdatePageSize={onUpdatePageSize} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
{showModalRef && ( |
||||||
|
<RuleModal |
||||||
|
show={showModalRef} |
||||||
|
onCancel={onCancel} |
||||||
|
onConfirm={onConfirm} |
||||||
|
data={ruleEntryData} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export default TaskResult |
||||||
@ -0,0 +1,146 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { h, reactive, ref } from 'vue' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { queryRuleListPaging } from '@/service/modules/data-quality' |
||||||
|
import type { Rule, RuleRes } from '@/service/modules/data-quality/types' |
||||||
|
import TableAction from './components/table-action' |
||||||
|
import _ from 'lodash' |
||||||
|
import { format } from 'date-fns' |
||||||
|
import { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||||
|
|
||||||
|
export function useTable(viewRuleEntry = (ruleJson: string): void => {}) { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const variables = reactive({ |
||||||
|
tableData: [], |
||||||
|
page: ref(1), |
||||||
|
pageSize: ref(10), |
||||||
|
state: ref(null), |
||||||
|
searchVal: ref(null), |
||||||
|
totalPage: ref(1) |
||||||
|
}) |
||||||
|
|
||||||
|
const columns: TableColumns<any> = [ |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.name'), |
||||||
|
key: 'ruleName' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.type'), |
||||||
|
key: 'ruleTypeName' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.username'), |
||||||
|
key: 'userName' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.create_time'), |
||||||
|
key: 'createTime' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.update_time'), |
||||||
|
key: 'updateTime' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('data_quality.rule.actions'), |
||||||
|
key: 'actions', |
||||||
|
width: 150, |
||||||
|
render: (row: any) => |
||||||
|
h(TableAction, { |
||||||
|
row, |
||||||
|
onViewRuleEntry: (ruleJson: string) => { |
||||||
|
viewRuleEntry(ruleJson) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const ruleTypeMapping = [ |
||||||
|
{ |
||||||
|
code: -1, |
||||||
|
label: t('data_quality.rule.all') |
||||||
|
}, |
||||||
|
{ |
||||||
|
code: 0, |
||||||
|
label: t('data_quality.rule.single_table') |
||||||
|
}, |
||||||
|
{ |
||||||
|
code: 1, |
||||||
|
label: t('data_quality.rule.custom_sql') |
||||||
|
}, |
||||||
|
{ |
||||||
|
code: 2, |
||||||
|
label: t('data_quality.rule.multi_table_accuracy') |
||||||
|
}, |
||||||
|
{ |
||||||
|
code: 3, |
||||||
|
label: t('data_quality.rule.multi_table_value_comparison') |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const getTableData = (params: any) => { |
||||||
|
const data = { |
||||||
|
pageSize: params.pageSize, |
||||||
|
pageNo: params.pageNo, |
||||||
|
searchVal: params.searchVal, |
||||||
|
startDate: params.startDate, |
||||||
|
endDate: params.endDate |
||||||
|
} |
||||||
|
|
||||||
|
const { state } = useAsyncState( |
||||||
|
queryRuleListPaging(data).then((res: RuleRes) => { |
||||||
|
variables.tableData = res.totalList.map((item, index) => { |
||||||
|
const ruleName = |
||||||
|
'data_quality.rule.' + item.name.substring(3, item.name.length - 1) |
||||||
|
const ruleNameLocale = t(ruleName) |
||||||
|
|
||||||
|
const ruleType = _.find(ruleTypeMapping, { code: item.type }) |
||||||
|
|
||||||
|
let ruleTypeName = '' |
||||||
|
|
||||||
|
if (ruleType) { |
||||||
|
ruleTypeName = ruleType.label |
||||||
|
} |
||||||
|
|
||||||
|
item.createTime = format( |
||||||
|
new Date(item.createTime), |
||||||
|
'yyyy-MM-dd HH:mm:ss' |
||||||
|
) |
||||||
|
item.updateTime = format( |
||||||
|
new Date(item.updateTime), |
||||||
|
'yyyy-MM-dd HH:mm:ss' |
||||||
|
) |
||||||
|
|
||||||
|
return { |
||||||
|
index: index + 1, |
||||||
|
...item, |
||||||
|
ruleName: ruleNameLocale, |
||||||
|
ruleTypeName: ruleTypeName |
||||||
|
} |
||||||
|
}) as any |
||||||
|
}), |
||||||
|
{} |
||||||
|
) |
||||||
|
|
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
return { t, variables, getTableData, columns } |
||||||
|
} |
||||||
Loading…
Reference in new issue