Skip to content

B
bigDataSystem
Commit a5f20afc authored by LiXuyang's avatar LiXuyang
Browse files
Options

数据表-改

parent 738be5b3
Show whitespace changes
Inline Side-by-side
Showing with 271 additions and 34 deletions
src/views/dataQuality/dataSheet/rule/index.vue
View file @ a5f20afc
......@@ -26,7 +26,11 @@
@click="handleEditMore"
>编辑</a-button
>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" danger
<a-button
type="primary"
:disabled="getRowSelection().selectedRowKeys <= 0"
danger
@click="handleDelete"
>删除</a-button
>
<a-button
......@@ -225,6 +229,18 @@
function handleRemove(record) {
createMessage.success('删除成功!');
}
// 批量删除
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('删除成功!');
reload();
},
});
}
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
......
src/views/dataQuality/dataSheet/rule/rule.data.ts
View file @ a5f20afc
......@@ -291,43 +291,43 @@ export const rulePreviewFormSchema: any[] = [
export const rulePreviewColumns = [
{
title: '质量规则',
dataIndex: 'ruleName',
width: 100,
dataIndex: 'rule',
width: 120,
},
{
title: '数据源',
dataIndex: 'dataSource',
width: 100,
width: 120,
},
{
title: '目录',
dataIndex: 'catalog',
width: 100,
width: 120,
},
{
title: '数据库',
dataIndex: 'database',
width: 100,
width: 120,
},
{
title: '数据表',
title: '数据表/主体',
dataIndex: 'dataTable',
width: 100,
width: 120,
},
{
title: '字段',
dataIndex: 'field',
width: 100,
width: 120,
},
{
title: '质量模板',
dataIndex: 'model',
width: 100,
width: 120,
},
{
title: '规则组',
dataIndex: 'ruleGroup',
width: 100,
dataIndex: 'group',
width: 120,
},
{
title: '参数',
......@@ -497,3 +497,42 @@ export const versionFormSchema: FormSchema[] = [
},
},
];
export const ruleAddQualityModalColumn: BasicColumn[] = [
{
title: '名称',
dataIndex: 'name',
width: 120,
slots: { customRender: 'name' },
},
{
title: '数据源',
dataIndex: 'dataSource',
slots: { customRender: 'dataSource' },
width: 150,
},
{
title: '模板编号',
dataIndex: 'templateNumber',
width: 120,
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateTime',
width: 150,
},
{
title: '拥有者',
dataIndex: 'owner',
width: 100,
},
{
title: '权属工作组',
dataIndex: 'workgroup',
width: 120,
},
];
src/views/dataQuality/dataSheet/rule/ruleAddQualityModal.vue 0 → 100644
View file @ a5f20afc
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicTable @register="registerTable">
<template #dataSource="{ record }">
<div v-for="item in record.dataSource" :key="item">{{ item.text }}</div>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@/components/Modal';
import { defineEmits } from 'vue';
import { ruleAddQualityModalColumn } from '@/views/dataQuality/dataSheet/rule/rule.data';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { tableList } from '@/views/dataQuality/dataSheet/template/mock';
// 初始化
const getTitle = '添加质量模板';
const emit = defineEmits(['success']);
/**
* 初始化弹窗
*/
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({
confirmLoading: false,
});
});
// 成功回调
function handleSubmit() {
emit('success', getSelectRows());
closeModal();
}
/**
* 初始化列表
*/
const [registerTable, { getSelectRows }] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: true,
columns: ruleAddQualityModalColumn,
showTableSetting: false,
showIndexColumn: true,
bordered: false,
});
</script>
<style scoped></style>
src/views/dataQuality/dataSheet/rule/ruleEditModel.vue
View file @ a5f20afc
......@@ -155,13 +155,13 @@
});
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
await resetSchema([...ruleEditModelFormSchema]);
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
await setFieldsValue({
...data.record,
});
await resetSchema([...ruleEditModelFormSchema]);
} else {
await resetSchema([...ruleModelFormSchema]);
}
......
src/views/dataQuality/dataSheet/rule/ruleGroupAddModel.vue
View file @ a5f20afc
......@@ -22,7 +22,7 @@
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
......@@ -32,7 +32,7 @@
const isUpdate = ref(true);
const rowId = ref('');
const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
const getTitle = '新建规则组';
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
......
src/views/dataQuality/dataSheet/rule/ruleMoreAdd.vue
View file @ a5f20afc
......@@ -11,21 +11,28 @@
<div style="font-size: 18px; margin-left: 20px">选择数据</div>
<RadioButtonGroup
style="margin-left: 30px"
@change="changeTree"
:options="labelName"
v-model:value="radioGroup"
/>
<BasicTree :treeData="ruleMoreAddData" defaultExpandLevel="4" :checkable="true" />
<BasicTree
ref="tree"
:treeData="ruleMoreAddData"
@change="handleSelect"
defaultExpandLevel="4"
:checkable="true"
/>
</div>
<div style="margin: 0 20px; flex: 4">
<div style="display: flex">
<div style="font-size: 18px; flex: 1">已选择模板</div>
<a-button type="primary">添加质量模板</a-button>
<a-button type="primary" @click="handleAddQualityModal">添加质量模板</a-button>
</div>
<div style="margin: 20px">
<Tag
closable
v-for="item in modelList"
@close="handleClose(item)"
v-for="item in modalListData"
:key="item"
style="
width: 100%;
height: 40px;
......@@ -33,11 +40,11 @@
font-size: 18px;
line-height: 40px;
padding-left: 20px;
background-color: #f4f7fb;
"
color="#55acee"
>
<template #icon>
<PicLeftOutlined />
<PicLeftOutlined style="color: #59c776" />
</template>
{{ item.name }}
</Tag>
......@@ -69,7 +76,10 @@
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
><EditOutlined
/></a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
<a-button
danger
:disabled="getRowSelection().selectedRowKeys <= 0"
@click="handleDelete"
><DeleteOutlined
/></a-button>
</template>
......@@ -99,6 +109,8 @@
</div>
</template>
<RuleGroupAddModel @register="ruleGroupAddModel" />
<RuleAddQualityModal @register="ruleAddQualityModal" @success="addQuality" />
<RuleEditModel :is-add="isAdd" @register="ruleEditModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -115,13 +127,20 @@
import { BasicTree } from '@/components/Tree';
import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
import RuleGroupAddModel from './ruleGroupAddModel.vue';
import { ruleMoreAddData, modelList, ruleMoreData } from './ruleData';
import { ruleMoreAddData, modelList } from './ruleData';
import { rulePreviewColumns, rulePreviewFormSchema } from './rule.data';
import { ref } from 'vue';
import { reactive, ref, unref } from 'vue';
import { useRouter } from 'vue-router';
import { useModal } from '@/components/Modal';
import RuleAddQualityModal from './ruleAddQualityModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { buildUUID } from '@/utils/uuid';
import RuleEditModel from './ruleEditModel.vue';
// 初始化
const router = useRouter();
const { createMessage, createConfirm } = useMessage();
// 数据
const radioGroup = ref('1');
const labelName = [
{
......@@ -133,25 +152,122 @@
value: '2',
},
];
function changeTree() {}
function handleEdit(record) {}
let modalListData = reactive([...modelList]);
const tree = ref();
let fieldList = [];
const isAdd = ref(false);
/**
* 方法
*/
function goback() {
router.back();
}
// 树获取选中全部字段名
function handleSelect() {
fieldList = [];
const keys = unref(tree).getCheckedKeys();
// 获取没有children的全部节点title
keys.forEach((key) => {
const node = unref(tree).getSelectedNode(key);
if (!node.children) {
fieldList.push(node.title);
}
});
// 更新表格
reload();
}
// 添加质量模板
function handleAddQualityModal() {
openRuleAddQualityModal(true, {
isUpdate: false,
});
}
// 添加质量模板-回调
function addQuality(list) {
if (list === []) {
modalListData = [];
}
list.forEach((item) => {
modalListData.push({
name: item.name,
});
});
// 更新表格
reload();
}
// 删除标签
function handleClose(tag) {
const index = modalListData.findIndex((modal) => modal.name === tag.name);
modalListData.splice(index, 1);
// 更新表格
reload();
}
// 新建规则组
function handleAddGroup() {
openRuleGroupAddModel(true, {
isUpdate: false,
});
}
/** 列表删除 */
// 下边列表数据更新
function getBottomTableData() {
// 重置选中
setSelectedRows([]);
let data = [];
if (fieldList.length > 0 && labelName.length > 0) {
fieldList.forEach((field) => {
modalListData.forEach((modal) => {
data.push({
businessId: buildUUID(),
rule: field + modal.name,
dataSource: '014mysql',
catalog: '',
database: 'bc_test',
dataTable: 'city',
field: 'field',
model: modal.name,
group: '测试',
config: 'table_a = city,co...',
});
});
});
} else {
data = [];
}
return data;
}
// 编辑
function handleEdit(record) {
openRuleEditModel(true, {
record,
isUpdate: true,
});
}
// 列表操作- 删除
function handleRemove(record) {
createMessage.success('删除成功!');
}
// 批量删除
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('删除成功!');
reload();
},
});
}
/**
* 初始化模态框
*/
const [ruleAddQualityModal, { openModal: openRuleAddQualityModal }] = useModal();
const [ruleGroupAddModel, { openModal: openRuleGroupAddModel }] = useModal();
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
const [ruleEditModal, { openModal: openRuleEditModel }] = useModal();
/**
* 初始化表格
*/
const [registerTable, { getRowSelection, reload, setSelectedRows }] = useTable({
title: '质量规则预览',
// 定高
scroll: { y: 150 },
......@@ -161,10 +277,10 @@
pageNu: '1',
pageSize: '10',
pages: '1',
total: ruleMoreData.length,
total: getBottomTableData().length,
code: '',
message: '',
data: ruleMoreData,
data: getBottomTableData(),
};
return { ...response };
},
......
src/views/dataQuality/dataSheet/rule/ruleMoreUpdateModel.vue
View file @ a5f20afc
......@@ -17,7 +17,7 @@
const isUpdate = ref(true);
const rowId = ref('');
const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
const getTitle = '批量修改模板参数';
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
......
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