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