Skip to content

B
bigDataSystem
Commit 8df0e6ad authored by chenjiahao's avatar chenjiahao
Browse files
Options

数据质量-质量模板编辑页面

parent 1ad2af13
Show whitespace changes
Inline Side-by-side
Showing with 270 additions and 603 deletions
src/views/dataQuality/template/account.data.ts deleted 100644 → 0
View file @ 1ad2af13
import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag, Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user';
// 引入开关组件
type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'fileName',
width: 150,
slots: { customRender: 'fileName' },
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 150,
},
{
title: '拥有者',
dataIndex: 'holder',
width: 150,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入名称',
},
colProps: { span: 7 },
},
];
export const accountFormSchema: any[] = [
{
field: 'fileName',
label: '文件名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true,
},
},
{
field: 'location',
label: '保存位置',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true,
},
},
{
field: 'createDate',
label: '创建时间',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true,
},
},
{
field: 'updateDate',
label: '最近修改',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true,
},
},
];
/**移动*/
export const MoveFormSchema: any[] = [
{
field: 'taskId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
// border: 'none',
fieldNames: {
label: 'fileName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
];
export const resetNameFormSchema: FormSchema[] = [
{
field: 'fileName',
label: '文件名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
colProps: { span: 8 },
},
];
export const createFileFormSchema: FormSchema[] = [
{
field: 'taskId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'fileName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'fileName',
label: '文件名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
},
];
export const createTaskFormSchema: FormSchema[] = [
{
field: 'taskId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'fileName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'fileName',
label: '文件名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
colProps: { lg: 24, md: 24 },
},
{
field: 'name',
label: '文件类型',
component: 'Input',
defaultValue: '任务流',
componentProps: {
disabled: true,
placeholder: '请输入路径',
},
colProps: { lg: 24, md: 24 },
},
];
src/views/dataQuality/template/edit.vue
View file @ 8df0e6ad
......@@ -18,7 +18,7 @@
</div>
<div class="editor">
<textarea placeholder="请输入内容..."></textarea>
<textarea placeholder="请输入内容...">{{ sql }}</textarea>
</div>
<div class="w-full">
<Card style="margin-bottom: 8px">
......@@ -75,20 +75,23 @@
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { PageWrapper } from '@/components/Page';
import { Card, Tabs, TabPane } from 'ant-design-vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { searchFormSchema } from '@/views/system/institution/institutionData';
import { useRoute } from 'vue-router';
import { tableList } from './mock';
const formItem = reactive({
templateName: '',
description: '',
category: '',
});
const route = useRoute();
const businessId = ref();
const sql = ref('');
const formSchemaTemplate: FormSchema[] = [
{
field: 'name',
......@@ -110,7 +113,11 @@
component: 'Input',
colProps: { lg: 12, md: 12 },
componentProps: {
disabled: true,
readonly: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
},
},
{
......@@ -251,6 +258,35 @@
console.log('验证失败:', error);
});
}
/**初始化*/
onMounted(() => {
businessId.value = route.query.id;
const data = tableList.filter((item) => item.businessId == businessId.value);
sql.value = data[0].sql;
if (route.query.disabled !== '0') {
updateSchema([
{
field: 'description',
componentProps: {
readonly: true,
disabled: true,
placeholder: '',
},
},
{
field: 'category',
componentProps: {
readonly: true,
disabled: true,
placeholder: '',
},
},
]);
}
setFieldsValue({
...data[0],
});
});
</script>
<style scoped>
.sql-editor {
......
src/views/dataQuality/template/importModal.vue
View file @ 8df0e6ad
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" minHeight="150">
<div style="display:flex;align-items: center">
<div type="info" style="font-size:12px;cursor: pointer" @click="importTemplate">下载模板</div>
<BasicModal
width="35%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm">
<template #fileMethods="{ model, field }">
<div style="display: flex">
<div>
<a-button>下载模板</a-button>
<a-button type="primary" style="margin-left: 5px">选择文件</a-button>
</div>
<div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
<BasicUpload
:maxSize="20"
:maxNumber="1"
@change="handleChange"
:api="userImport"
class="my-5"
:accept="['.xlsx, .xls']"
/>
<div style="width: 200px; margin-top: 6px; margin-left: 5px"
>数据质量只能导入单个zip文件</div
>
</div>
</template>
</BasicForm>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicUpload } from '@/components/Upload';
import { downloadByData } from '@/utils/file/download';
import { Tag, Row, Col, Upload, Button,Checkbox } from 'ant-design-vue';
import {downImportTemplate,userImport} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { importFormSchema } from './tempalte.data';
import {onMountedOrActivated} from "@vben/hooks";
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: importFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
});
const getTitle = computed(() => ('主体导入'));
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
setFieldsValue({
...data.record,
});
}
});
/** 下载模板*/
function importTemplate() {
// onMounted(){}
}
function handleChange(list: string[]) {
console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',list)
createMessage.success(`文件上传成功`);
}
// const getTitle = computed(() => '新建文件');
const getTitle = '导入文件选择';
async function handleSubmit() {
try {
// const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
/**确定按钮*/
async function handleSubmit() {
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
src/views/dataQuality/template/index.vue
View file @ 8df0e6ad
......@@ -96,7 +96,7 @@
] = useTable({
title: '主体管理列表',
api: async (params) => {
console.log('tableList', tableList);
// console.log('tableList', tableList);
const response = {
pageNu: '1',
pageSize: '10',
......@@ -124,7 +124,7 @@
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
// console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
......@@ -164,7 +164,7 @@
}
/** 移动按钮*/
function handleMove(isMove, record: Recordable) {
console.log('record',record)
// console.log('record',record)
openMoveFileModal(true, {
record,
isMove: isMove,
......@@ -194,7 +194,7 @@
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
// console.log(result);
reload();
} else {
reload();
......@@ -207,11 +207,11 @@
}
function handleEdit(record: Recordable, disabled: number) {
console.log('record', record);
// console.log('record', record.businessId);
router.push({
path: '/dataQuality/template/edit',
query: {
id: record.id,
id: record.businessId,
disabled: String(disabled),
},
});
......@@ -241,7 +241,7 @@
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
console.log('11111111111111111111111111111', params);
// console.log('11111111111111111111111111111', params);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
......@@ -254,8 +254,8 @@
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
console.log('path', from.path);
console.log('params', params);
// console.log('path', from.path);
// console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
......
src/views/dataQuality/template/mainBody.data.ts deleted 100644 → 0
View file @ 1ad2af13
import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user'; // 引入开关组件
type CheckedType = boolean | string | number;
/**
* transform mock data
* {
* 0: '华东分部',
* '0-0': '华东分部-研发部'
* '0-1': '华东分部-市场部',
* ...
* }
*/
export const deptMap = (() => {
const pDept = ['华东分部', '华南分部', '西北分部'];
const cDept = ['研发部', '市场部', '商务部', '财务部'];
return pDept.reduce((map, p, pIdx) => {
map[pIdx] = p;
cDept.forEach((c, cIndex) => (map[`${pIdx}-${cIndex}`] = `${p}-${c}`));
return map;
}, {});
})();
export const columns: BasicColumn[] = [
{
title: '主体名称',
dataIndex: 'name',
width: 120,
slots: { customRender: 'name' },
},
{
title: '描述',
dataIndex: 'des',
width: 120,
},
{
title: '来源',
dataIndex: 'from',
width: 120,
},
{
title: '创建者',
dataIndex: 'creator',
width: 120,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 200,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 200,
},
];
export const formSchemaRemove: any = [
{
field: 'path',
label: '路径',
component: 'TreeSelect',
rules: [
{
required: true,
message: '请选择上级菜单',
},
],
componentProps: {
fieldNames: {
label: 'label',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
},
];
export const formSchemaNewFolder: any = [
{
field: 'path',
label: '路径',
component: 'TreeSelect',
rules: [
{
required: true,
message: '请选择上级菜单',
},
],
componentProps: {
fieldNames: {
label: 'label',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
},
{
field: 'name',
label: '文件夹名称',
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: '输入文件夹名称',
},
},
{
field: 'fileType',
label: '权限模式',
component: 'RadioGroup',
defaultValue: '本级定义',
colProps: { span: 8 },
componentProps: {
options: [
{ label: '本级定义', value: '本级定义' },
{ label: '资源自定义', value: '资源自定义' },
],
placeholder: '输入描述',
},
},
{
field: 'group',
label: '权属工作组',
component: 'Select',
defaultValue: '默认工作组',
colProps: { span: 8 },
componentProps: {
placeholder: '输入描述',
options: [{ label: '默认工作组', value: '默认工作组' }],
},
},
];
export const formSchema: any = [
{
field: 'name',
label: '文件夹名称',
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: '输入文件夹名称',
},
},
{
field: 'path',
label: '路径',
component: 'TreeSelect',
rules: [
{
required: true,
message: '请选择上级菜单',
},
],
componentProps: {
fieldNames: {
label: 'label',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: ' ',
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: '输入关键字搜索',
},
},
{
field: 'flag',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '按来源过滤',
options: [{ label: '指标汇总表', value: '1' }],
},
colProps: { span: 8 },
},
];
export const resetPasswordFormSchema: any[] = [
{
field: 'newPassword',
label: '新密码',
component: 'InputPassword',
componentProps: {
placeholder: '请输入8~16位，由字母和数字混合所组成的新密码',
},
required: true,
// ifShow: false,
},
];
const passwordCheck = (rule, value, callback) => {
const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
if (!pattern.test(value)) {
callback(new Error('新密码必须为数字与字母的组合'));
}
callback();
};
export const accountFormSchema: any[] = [
{
field: 'username',
label: '登录名',
component: 'Input',
// helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
rules: [
{
required: true,
message: '请输入登录名',
},
],
},
{
field: 'password',
label: '密码',
component: 'InputPassword',
rules: [
{
required: true,
message: '请输入用户密码',
},
{ min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
{
validator: passwordCheck,
trigger: 'blur',
},
],
},
{
field: 'name',
label: '姓名',
component: 'Input',
},
{
field: 'nickName',
label: '昵称',
component: 'Input',
},
{
field: 'sex',
label: '性别',
component: 'Select',
componentProps: {
options: [
{ label: '男', value: '1' },
{ label: '女', value: '0' },
],
},
},
{
field: 'phone',
label: '手机号码',
component: 'Input',
rules: [
{ required: false, message: '请输入手机号码', trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
},
{
field: 'idNumber',
label: '身份证号',
component: 'Input',
rules: [
{
required: false,
message: '请输入身份证号',
trigger: 'blur',
},
{ min: 18, max: 18, message: '长度18字符', trigger: 'blur' },
],
},
{
field: 'email',
label: '邮箱',
component: 'Input',
rules: [
{ required: false, message: '请输入邮箱地址', trigger: 'blur' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
],
},
{
field: 'flag',
label: '状态',
component: 'RadioGroup',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: '启用', value: '1' },
{ label: '停用', value: '0' },
],
},
required: true,
},
{
field: 'deptId',
label: '所属部门',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'deptName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'roleList',
label: '角色',
component: 'ApiSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
// placeholder: '公开给',
mode: 'multiple',
api: getAllRoleList,
labelField: 'roleName',
valueField: 'businessId',
resultField: 'data',
},
required: true,
},
{
label: '备注',
field: 'remarks',
component: 'InputTextArea',
colProps: { lg: 24, md: 24 },
},
];
src/views/dataQuality/template/mock.ts
View file @ 8df0e6ad
......@@ -25,6 +25,12 @@ export const tableList: any[] = [
updateTime: '2023/05/23 14:36:05',
owner: 'admin',
workgroup: '默认工作组',
description: '这是模板描述',
category: '规范性',
sql:
'SELECT COUNT(*)\n' +
'FROM $(table a}\n' +
'WHERE ${column a}IS NOT NULL AND ${column a}NOT IN (${range a})',
},
{
businessId: 3,
......
src/views/dataQuality/template/runModal.vue 0 → 100644
View file @ 8df0e6ad
<template>
<BasicModal width="35%" v-bind="$attrs" @register="registerModal" title="运行" @ok="handleSubmit">
<p>请填写当前SQL中引用的参数的值</p>
<BasicTable @register="registerTable" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicTable, useTable } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import { importFormSchema } from './tempalte.data';
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
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 = [
{
title: '参数',
dataIndex: 'parameter',
key: 'parameter',
},
{
title: '参数类型',
dataIndex: 'type',
key: 'type',
edit: true,
// editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '数据表类',
value: '1',
},
{
label: '数据字段类',
value: '2',
},
{
label: '公共代码类',
value: '3',
},
{
label: '全局参数类',
value: '4',
},
],
},
},
{
title: '描述（选填）',
dataIndex: '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',
parameter: 'range_a',
type: '公共代码类',
description: '值域',
},
]);
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
var data = [];
data = tableData.value;
return { ...response, data: data };
},
rowKey: 'key',
columns,
showIndexColumn: false,
showTableSetting: false,
handleSearchInfoFn(info) {
return info;
},
});
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
src/views/dataQuality/template/tempalte.data.ts
View file @ 8df0e6ad
......@@ -211,3 +211,27 @@ export const formSchemaTemplate: any = [
},
},
];
export const importFormSchema: any[] = [
{
field: 'fileMethods',
label: '导入文件选择',
slot: 'fileMethods',
colProps: { lg: 24, md: 24, offset: 3 },
},
{
field: 'fileRename',
label: '文件重名',
component: 'RadioGroup',
required: true,
colProps: { lg: 24, md: 24, offset: 3 },
componentProps: {
options: [
{ label: '全部放弃', value: '1' },
{ label: '全部替换', value: '2' },
{ label: '自动重命名', value: '3' },
],
},
},
];
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