|
@@ -13,7 +13,7 @@ import {
|
|
Menu,
|
|
Menu,
|
|
Popconfirm,
|
|
Popconfirm,
|
|
Icon,
|
|
Icon,
|
|
- Modal
|
|
|
|
|
|
+ Modal, Spin
|
|
} from 'antd'
|
|
} from 'antd'
|
|
import { IClassification, IMetaParam, IQualityTask } from '../types'
|
|
import { IClassification, IMetaParam, IQualityTask } from '../types'
|
|
import { ColumnProps } from 'antd/lib/table'
|
|
import { ColumnProps } from 'antd/lib/table'
|
|
@@ -21,6 +21,8 @@ import MetadataModal from 'containers/DataGovernanceQualityAudit/components/Meta
|
|
import { IViewBase } from 'containers/View/types'
|
|
import { IViewBase } from 'containers/View/types'
|
|
import SubjectModal from 'containers/DataGovernanceQualityAudit/components/SubjectModal'
|
|
import SubjectModal from 'containers/DataGovernanceQualityAudit/components/SubjectModal'
|
|
import { IDataSubject } from 'containers/DataGovernanceMarkRule/types'
|
|
import { IDataSubject } from 'containers/DataGovernanceMarkRule/types'
|
|
|
|
+import request from 'utils/request'
|
|
|
|
+import api from 'utils/api'
|
|
|
|
|
|
interface IQualityTaskFormModalProps {
|
|
interface IQualityTaskFormModalProps {
|
|
pId: number
|
|
pId: number
|
|
@@ -33,32 +35,22 @@ interface IQualityTaskFormModalProps {
|
|
}
|
|
}
|
|
|
|
|
|
const QualityTaskFormModal = ({
|
|
const QualityTaskFormModal = ({
|
|
- formView,
|
|
|
|
- visible,
|
|
|
|
- loading,
|
|
|
|
- onCancel,
|
|
|
|
- pId,
|
|
|
|
- onSave
|
|
|
|
-}: IQualityTaskFormModalProps) => {
|
|
|
|
|
|
+ formView,
|
|
|
|
+ visible,
|
|
|
|
+ loading,
|
|
|
|
+ onCancel,
|
|
|
|
+ pId,
|
|
|
|
+ onSave
|
|
|
|
+ }: IQualityTaskFormModalProps) => {
|
|
const [metaVisible, setMetaVisible] = useState(false)
|
|
const [metaVisible, setMetaVisible] = useState(false)
|
|
|
|
+ const [viewLoading, setViewLoading] = useState(false)
|
|
|
|
|
|
const [taskName, setTaskName] = useState<IQualityTask['taskName']>()
|
|
const [taskName, setTaskName] = useState<IQualityTask['taskName']>()
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
const [selection, setSelection] = useState<IViewBase[]>([])
|
|
const [selection, setSelection] = useState<IViewBase[]>([])
|
|
|
|
|
|
const [tableData, setTableData] = useState<IMetaParam[]>([])
|
|
const [tableData, setTableData] = useState<IMetaParam[]>([])
|
|
-
|
|
|
|
- // const tableData = useMemo<IMetaParam[]>(() => {
|
|
|
|
- // return selection?.map((s) => s?.metadataConfig).reduce((c, n) => {
|
|
|
|
- // let next = []
|
|
|
|
- // try {
|
|
|
|
- // next = JSON.parse(n ?? '[]')
|
|
|
|
- // } catch (e) {
|
|
|
|
- // console.log(e)
|
|
|
|
- // }
|
|
|
|
- // return [...c, ...next]
|
|
|
|
- // }, [] as IMetaParam[])
|
|
|
|
- // }, [selection])
|
|
|
|
|
|
+ const [metaDataConfig, setMateDataConfig] = useState<IMetaParam[]>([])
|
|
|
|
|
|
const [smVisible, setSmVisible] = useState(false)
|
|
const [smVisible, setSmVisible] = useState(false)
|
|
const [smFormView, setSmFormView] = useState<IMetaParam>()
|
|
const [smFormView, setSmFormView] = useState<IMetaParam>()
|
|
@@ -92,12 +84,12 @@ const QualityTaskFormModal = ({
|
|
>
|
|
>
|
|
关联标准
|
|
关联标准
|
|
</a>
|
|
</a>
|
|
- {data.fieldAlias && (
|
|
|
|
|
|
+ {metaDataConfig.find((m) => m.fieldName === data.fieldName) && (
|
|
<>
|
|
<>
|
|
- <Divider type="vertical" />
|
|
|
|
|
|
+ <Divider type='vertical' />
|
|
<Popconfirm
|
|
<Popconfirm
|
|
- title="确定删除?"
|
|
|
|
- placement="bottom"
|
|
|
|
|
|
+ title='确定删除?'
|
|
|
|
+ placement='bottom'
|
|
onConfirm={() => handleResetSmForm(data)}
|
|
onConfirm={() => handleResetSmForm(data)}
|
|
>
|
|
>
|
|
<a>取消关联</a>
|
|
<a>取消关联</a>
|
|
@@ -111,50 +103,80 @@ const QualityTaskFormModal = ({
|
|
|
|
|
|
const handleSave = () => {
|
|
const handleSave = () => {
|
|
onSave({
|
|
onSave({
|
|
|
|
+ taskName,
|
|
viewId: selection?.[0]?.id,
|
|
viewId: selection?.[0]?.id,
|
|
metadataName: selection?.[0]?.name,
|
|
metadataName: selection?.[0]?.name,
|
|
- metadataConfig: JSON.stringify(tableData),
|
|
|
|
|
|
+ metadataConfig: JSON.stringify(metaDataConfig),
|
|
pId
|
|
pId
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
const handleSaveSmForm = (data: IDataSubject) => {
|
|
const handleSaveSmForm = (data: IDataSubject) => {
|
|
- setTableData([
|
|
|
|
- ...tableData.filter((s) => s.fieldName !== smFormView.fieldName),
|
|
|
|
- {
|
|
|
|
- ...smFormView,
|
|
|
|
- fieldAlias: data.id + ''
|
|
|
|
- }
|
|
|
|
- ])
|
|
|
|
|
|
+ setMateDataConfig((meta) => {
|
|
|
|
+ return [
|
|
|
|
+ ...meta.filter((s) => s.fieldName !== smFormView.fieldName),
|
|
|
|
+ {
|
|
|
|
+ ...smFormView
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ })
|
|
|
|
+
|
|
setSmVisible(false)
|
|
setSmVisible(false)
|
|
}
|
|
}
|
|
const handleResetSmForm = (data: IMetaParam) => {
|
|
const handleResetSmForm = (data: IMetaParam) => {
|
|
// selection
|
|
// selection
|
|
- setTableData([
|
|
|
|
- ...tableData.filter((s) => s.fieldName !== data.fieldName),
|
|
|
|
- {
|
|
|
|
- ...data,
|
|
|
|
- fieldAlias: ''
|
|
|
|
|
|
+ setMateDataConfig((meta) => {
|
|
|
|
+ return [
|
|
|
|
+ ...meta.filter((s) => s.fieldName !== smFormView.fieldName)
|
|
|
|
+ ]
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const queryViewByID = async() => {
|
|
|
|
+ try {
|
|
|
|
+ setTaskName(formView?.taskName)
|
|
|
|
+
|
|
|
|
+ setViewLoading(true)
|
|
|
|
+ if (formView?.viewId) {
|
|
|
|
+ const data = await request(api.view + '/' + formView.viewId)
|
|
|
|
+ setSelection(
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ [{
|
|
|
|
+ name: formView?.metadataName,
|
|
|
|
+ metadataConfig: formView?.metadataConfig,
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ model: data.payload.model
|
|
|
|
+ }]
|
|
|
|
+ )
|
|
|
|
+ } else {
|
|
|
|
+ setSelection([])
|
|
}
|
|
}
|
|
- ])
|
|
|
|
|
|
+ } finally {
|
|
|
|
+ setViewLoading(false)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
- setTaskName(formView?.taskName)
|
|
|
|
- setSelection(
|
|
|
|
- // @ts-ignore
|
|
|
|
- formView?.metadataName
|
|
|
|
- ? [
|
|
|
|
- {
|
|
|
|
- name: formView?.metadataName,
|
|
|
|
- metadataConfig: formView?.metadataConfig
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- : []
|
|
|
|
- )
|
|
|
|
|
|
+ queryViewByID()
|
|
}, [formView])
|
|
}, [formView])
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
|
+ const d = selection?.map((s) => s?.model)?.[0] || '{}'
|
|
|
|
+ let next = {}
|
|
|
|
+ try {
|
|
|
|
+ next = JSON.parse(d)
|
|
|
|
+ } catch (e) {
|
|
|
|
+ console.log(e)
|
|
|
|
+ }
|
|
|
|
+ const model = Object.keys(next)?.map((k) => ({
|
|
|
|
+ fieldName: k,
|
|
|
|
+ fieldType: next?.[k]?.visualType
|
|
|
|
+ })) as IMetaParam[] || []
|
|
|
|
+ setTableData(model)
|
|
|
|
+
|
|
|
|
+ }, [selection])
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
const d = selection
|
|
const d = selection
|
|
?.map((s) => s?.metadataConfig)
|
|
?.map((s) => s?.metadataConfig)
|
|
.reduce((c, n) => {
|
|
.reduce((c, n) => {
|
|
@@ -166,7 +188,7 @@ const QualityTaskFormModal = ({
|
|
}
|
|
}
|
|
return [...c, ...next]
|
|
return [...c, ...next]
|
|
}, [] as IMetaParam[])
|
|
}, [] as IMetaParam[])
|
|
- setTableData(d)
|
|
|
|
|
|
+ setMateDataConfig(d)
|
|
}, [selection])
|
|
}, [selection])
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -175,63 +197,65 @@ const QualityTaskFormModal = ({
|
|
visible={visible}
|
|
visible={visible}
|
|
onCancel={onCancel}
|
|
onCancel={onCancel}
|
|
destroyOnClose
|
|
destroyOnClose
|
|
- width="80%"
|
|
|
|
|
|
+ width='80%'
|
|
footer={
|
|
footer={
|
|
<>
|
|
<>
|
|
<Button onClick={onCancel} style={{ marginRight: 6 }}>
|
|
<Button onClick={onCancel} style={{ marginRight: 6 }}>
|
|
取 消
|
|
取 消
|
|
</Button>
|
|
</Button>
|
|
- <Button disabled={loading} type="primary" onClick={handleSave}>
|
|
|
|
|
|
+ <Button disabled={loading} type='primary' onClick={handleSave}>
|
|
保 存
|
|
保 存
|
|
</Button>
|
|
</Button>
|
|
</>
|
|
</>
|
|
}
|
|
}
|
|
// placement={'bottom'}
|
|
// placement={'bottom'}
|
|
>
|
|
>
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- alignItems: 'center',
|
|
|
|
- justifyContent: 'space-between'
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <h3>质量任务</h3>
|
|
|
|
- </div>
|
|
|
|
- <div style={{ margin: '10px 0', display: 'flex', alignItems: 'center' }}>
|
|
|
|
- <label>质量任务名称:</label>
|
|
|
|
- <Input
|
|
|
|
- value={taskName}
|
|
|
|
- onChange={(e) => setTaskName(e.target.value)}
|
|
|
|
- style={{ width: 300 }}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- <div style={{ margin: '10px 0', display: 'flex', alignItems: 'center' }}>
|
|
|
|
- <label>元数据:</label>
|
|
|
|
- <Button onClick={() => setMetaVisible(true)}>选择元数据</Button>
|
|
|
|
|
|
+ <Spin spinning={viewLoading}>
|
|
<div
|
|
<div
|
|
style={{
|
|
style={{
|
|
- margin: '0 10px',
|
|
|
|
display: 'flex',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
alignItems: 'center',
|
|
- flexWrap: 'wrap',
|
|
|
|
- flex: 1
|
|
|
|
|
|
+ justifyContent: 'space-between'
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
- {selection.map((c, idx) => (
|
|
|
|
- <Tag key={c.id || idx} closable onClose={() => setSelection([])}>
|
|
|
|
- {c.name}
|
|
|
|
- </Tag>
|
|
|
|
- ))}
|
|
|
|
|
|
+ <h3>质量任务</h3>
|
|
|
|
+ </div>
|
|
|
|
+ <div style={{ margin: '10px 0', display: 'flex', alignItems: 'center' }}>
|
|
|
|
+ <label>质量任务名称:</label>
|
|
|
|
+ <Input
|
|
|
|
+ value={taskName}
|
|
|
|
+ onChange={(e) => setTaskName(e.target.value)}
|
|
|
|
+ style={{ width: 300 }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div style={{ margin: '10px 0', display: 'flex', alignItems: 'center' }}>
|
|
|
|
+ <label>元数据:</label>
|
|
|
|
+ <Button onClick={() => setMetaVisible(true)}>选择元数据</Button>
|
|
|
|
+ <div
|
|
|
|
+ style={{
|
|
|
|
+ margin: '0 10px',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ flexWrap: 'wrap',
|
|
|
|
+ flex: 1
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {selection.map((c, idx) => (
|
|
|
|
+ <Tag key={c.id || idx} closable onClose={() => setSelection([])}>
|
|
|
|
+ {c.name}
|
|
|
|
+ </Tag>
|
|
|
|
+ ))}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <p style={{ margin: '10px 0' }}>字段映射</p>
|
|
|
|
+ <Table
|
|
|
|
+ columns={paramsColumns}
|
|
|
|
+ rowKey='fieldName'
|
|
|
|
+ dataSource={tableData}
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <p style={{ margin: '10px 0' }}>字段映射</p>
|
|
|
|
- <Table
|
|
|
|
- columns={paramsColumns}
|
|
|
|
- rowKey="fieldName"
|
|
|
|
- dataSource={tableData}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
+ </Spin>
|
|
<MetadataModal
|
|
<MetadataModal
|
|
selection={selection}
|
|
selection={selection}
|
|
onSave={(e) => {
|
|
onSave={(e) => {
|