Commit 8df0e6ad authored by chenjiahao's avatar chenjiahao

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

parent 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 },
},
];
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<div class="editor"> <div class="editor">
<textarea placeholder="请输入内容..."></textarea> <textarea placeholder="请输入内容...">{{ sql }}</textarea>
</div> </div>
<div class="w-full"> <div class="w-full">
<Card style="margin-bottom: 8px"> <Card style="margin-bottom: 8px">
...@@ -75,20 +75,23 @@ ...@@ -75,20 +75,23 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Card, Tabs, TabPane } from 'ant-design-vue'; import { Card, Tabs, TabPane } from 'ant-design-vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import BasicTable from '@/components/Table/src/BasicTable.vue'; import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table'; import { useTable } from '@/components/Table';
import { searchFormSchema } from '@/views/system/institution/institutionData'; import { useRoute } from 'vue-router';
import { tableList } from './mock';
const formItem = reactive({ const formItem = reactive({
templateName: '', templateName: '',
description: '', description: '',
category: '', category: '',
}); });
const route = useRoute();
const businessId = ref();
const sql = ref('');
const formSchemaTemplate: FormSchema[] = [ const formSchemaTemplate: FormSchema[] = [
{ {
field: 'name', field: 'name',
...@@ -110,7 +113,11 @@ ...@@ -110,7 +113,11 @@
component: 'Input', component: 'Input',
colProps: { lg: 12, md: 12 }, colProps: { lg: 12, md: 12 },
componentProps: { componentProps: {
disabled: true, readonly: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
}, },
}, },
{ {
...@@ -251,6 +258,35 @@ ...@@ -251,6 +258,35 @@
console.log('验证失败:', error); 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> </script>
<style scoped> <style scoped>
.sql-editor { .sql-editor {
......
<template> <template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" minHeight="150"> <BasicModal
<div style="display:flex;align-items: center"> width="35%"
<div type="info" style="font-size:12px;cursor: pointer" @click="importTemplate">下载模板</div> v-bind="$attrs"
</div> @register="registerModal"
<div slot="tip" class="el-upload__tip" style="color:red">提示:仅允许导入“xls”或“xlsx”格式文件!</div> :title="getTitle"
<BasicUpload @ok="handleSubmit"
:maxSize="20" >
:maxNumber="1" <BasicForm @register="registerForm">
@change="handleChange" <template #fileMethods="{ model, field }">
:api="userImport" <div style="display: flex">
class="my-5" <div>
:accept="['.xlsx, .xls']" <a-button>下载模板</a-button>
/> <a-button type="primary" style="margin-left: 5px">选择文件</a-button>
</div>
<div style="width: 200px; margin-top: 6px; margin-left: 5px"
>数据质量只能导入单个zip文件</div
>
</div>
</template>
</BasicForm>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicUpload } from '@/components/Upload'; import { BasicForm, useForm } from '@/components/Form';
import { downloadByData } from '@/utils/file/download'; import { importFormSchema } from './tempalte.data';
import { Tag, Row, Col, Upload, Button,Checkbox } from 'ant-design-vue'; import {onMountedOrActivated} from "@vben/hooks";
import {downImportTemplate,userImport} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage'; const emit = defineEmits(['success', 'register']);
defineOptions({ name: 'AccountModal' }); const isUpdate = ref(true);
const isMove = ref(false);
const emit = defineEmits(['success', 'register']); const rowId = ref('');
const { createMessage } = useMessage(); //获取接口数据并放在下拉框里(这里是打开了一个弹框)
const isUpdate = ref(true); //初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
//初始化弹框 baseColProps: { lg: 12, md: 24 },
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { schemas: importFormSchema,
setModalProps({ confirmLoading: false }); showActionButtonGroup: false,
}); actionColOptions: {
span: 23,
const getTitle = computed(() => ('主体导入')); },
});
//初始化弹框
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,
});
}
});
/** 下载模板*/ // onMounted(){}
function importTemplate() {
}
function handleChange(list: string[]) { // const getTitle = computed(() => '新建文件');
console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',list) const getTitle = '导入文件选择';
createMessage.success(`文件上传成功`);
}
async function handleSubmit() { /**确定按钮*/
try { async function handleSubmit() {
// const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal(); closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
} }
}
</script> </script>
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
] = useTable({ ] = useTable({
title: '主体管理列表', title: '主体管理列表',
api: async (params) => { api: async (params) => {
console.log('tableList', tableList); // console.log('tableList', tableList);
const response = { const response = {
pageNu: '1', pageNu: '1',
pageSize: '10', pageSize: '10',
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
handleSearchInfoFn(info) { handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info); // console.log('handleSearchInfoFn', info);
return info; return info;
}, },
actionColumn: { actionColumn: {
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
} }
/** 移动按钮*/ /** 移动按钮*/
function handleMove(isMove, record: Recordable) { function handleMove(isMove, record: Recordable) {
console.log('record',record) // console.log('record',record)
openMoveFileModal(true, { openMoveFileModal(true, {
record, record,
isMove: isMove, isMove: isMove,
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
// 演示不刷新表格直接更新内部数据。 // 演示不刷新表格直接更新内部数据。
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中 // 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values); const result = updateTableDataRecord(values.id, values);
console.log(result); // console.log(result);
reload(); reload();
} else { } else {
reload(); reload();
...@@ -207,11 +207,11 @@ ...@@ -207,11 +207,11 @@
} }
function handleEdit(record: Recordable, disabled: number) { function handleEdit(record: Recordable, disabled: number) {
console.log('record', record); // console.log('record', record.businessId);
router.push({ router.push({
path: '/dataQuality/template/edit', path: '/dataQuality/template/edit',
query: { query: {
id: record.id, id: record.businessId,
disabled: String(disabled), disabled: String(disabled),
}, },
}); });
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
if (filterStore.getSearchParams[path]) { if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) { if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]); const params = JSON.parse(filterStore.getSearchParams[path]);
console.log('11111111111111111111111111111', params); // console.log('11111111111111111111111111111', params);
getForm().setFieldsValue({ getForm().setFieldsValue({
page: params.page, page: params.page,
pageSize: params.pageSize, pageSize: params.pageSize,
...@@ -254,8 +254,8 @@ ...@@ -254,8 +254,8 @@
}); });
onBeforeRouteLeave((to, from, next) => { onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue()); const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
console.log('path', from.path); // console.log('path', from.path);
console.log('params', params); // console.log('params', params);
filterStore.setSearchParams({ filterStore.setSearchParams({
path: from.path, path: from.path,
param: { param: {
......
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 },
},
];
...@@ -25,6 +25,12 @@ export const tableList: any[] = [ ...@@ -25,6 +25,12 @@ export const tableList: any[] = [
updateTime: '2023/05/23 14:36:05', updateTime: '2023/05/23 14:36:05',
owner: 'admin', owner: 'admin',
workgroup: '默认工作组', 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, businessId: 3,
......
<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>
...@@ -211,3 +211,27 @@ export const formSchemaTemplate: any = [ ...@@ -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