Commit 1f5a9747 authored by chenjiahao's avatar chenjiahao

数据质量-框架

parent fe628b02
<template>
<div>
<BasicTree
title=""
ref="treeRef"
toolbar
search
:clickRowToExpand="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'fileName' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from '@vben/types';
import { DetailTreeData } from '@/views/commonFile/commonFileData';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
treeData.value = handleTree(DetailTreeData, 'businessId', undefined, undefined, undefined);
await nextTick(() => {
getTree().expandAll(true);
});
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { accountFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { encryptTwo } from '../../../../utils/jsencrypt.js';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/system/institution/institutionData';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
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: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
setModalProps({ showOkBtn: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
setFieldsValue({
...data.record,
});
}
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'institutionId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => '查看属性');
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
</script>
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="质量主体"
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'fileName' }"
@select="handleSelect"
:beforeRightClick="getRightMenuList"
:actionList="actionList"
/>
</div>
<MoveFile @register="registerMoveFile" @success="handleSuccess" />
<CreateFile @register="registerCreateFileModal" @success="handleSuccess" />
<CreateTask @register="registerCreateTaskModal" @success="handleSuccess" />
</template>
<script lang="ts" setup>
import { h, nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, ContextMenuItem, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { TreeData } from '@/views/dataQuality/agentClass/mainBody/dataQualityMainBodyData';
import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { Modal } from 'ant-design-vue';
import { useModal } from '@/components/Modal';
import MoveFile from './moveFile.vue';
import { router } from '@/router';
import CreateTask from './createMainBodyModal.vue';
import CreateFile from './createFile.vue';
defineOptions({ name: 'DeptTree' });
const { createMessage } = useMessage();
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
const [registerCreateTaskModal, { openModal: openCreateTaskModal }] = useModal();
const [registerCreateFileModal, { openModal: openCreateFileModal }] = useModal();
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = TreeData;
treeData.value = handleTree(data, 'businessId', undefined, undefined, undefined);
await nextTick(() => {
getTree().expandAll(true);
});
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
// 树的操作列表
const actionList = [
{
//全部操作按钮
render: (node) => {
return h(EllipsisOutlined, {
class: 'ml-2',
onClick: () => {
getRightMenuList(node);
},
});
},
},
];
function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
const menu = [
{
label: '打开',
handler: () => {
handleOpen(node);
},
icon: 'ant-design:eye-outlined',
},
{
label: '重命名',
handler: () => {
handleResetName(node);
},
icon: 'ant-design:edit-outlined',
},
{
label: '新建任务流',
handler: () => {
createTaskButton();
},
icon: 'bi:plus',
},
{
label: '新建文件夹',
handler: () => {
createFileButton();
},
icon: 'bi:plus',
},
{
label: '复制',
handler: () => {
copyButton();
},
icon: 'ant-design:snippets-outlined',
},
{
label: '粘贴',
handler: () => {
stickButton();
},
icon: 'ant-design:snippets-twotone',
},
{
label: '删除',
handler: () => {
deleteButton();
},
icon: 'ant-design:rest-outlined',
},
{
label: '移动',
handler: () => {
handleMove(node);
},
icon: 'bx:bxs-folder-open',
},
];
return new Promise((resolve) => {
resolve(menu);
});
}
/**打开*/
function handleOpen(data) {
router.push({
path: '/commonFile/fileDetail',
query: {
fileName: data.anotherName,
},
});
}
/**复制按钮*/
function copyButton() {
createMessage.success('复制成功!');
}
/**粘贴按钮*/
function stickButton() {
createMessage.success('粘贴成功!');
}
/**删除按钮*/
function deleteButton() {
Modal.confirm({
title: '确认删除',
content: '确定要删除此节点吗?',
okText: '确认',
cancelText: '取消',
onOk() {
// 执行删除逻辑
createMessage.success('删除成功!');
},
onCancel() {
console.log('取消删除');
createMessage.info('取消删除');
},
});
}
/** 重命名按钮*/
function handleResetName(record: Recordable) {
record.fileName = record.anotherName;
openResetNameModal(true, {
record,
isReset: true,
});
}
/** 移动按钮*/
function handleMove(record: Recordable) {
openMoveFileModal(true, {
record,
isMove: true,
});
}
/**新建文件夹*/
function createFileButton() {
openCreateFileModal(true, {
isAdd: true,
});
}
/**新建任务流*/
function createTaskButton() {
openCreateTaskModal(true, {
isAdd: true,
});
}
/** 成功回调*/
function handleSuccess() {}
</script>
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;
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: {
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: 'name',
label: '质量主体名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入质量主体名称',
},
],
componentProps: {
placeholder: '请输入质量主体名称',
},
colProps: { lg: 24, md: 24 },
},
{
field: 'fileType',
label: '文件类型',
component: 'Input',
defaultValue: '质量主体',
componentProps: {
readonly: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
},
colProps: { lg: 24, md: 24 },
},
];
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { accountFormSchema, resetNameFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { useMessage } from '@/hooks/web/useMessage';
import { createFileFormSchema } from './account.data';
import { TreeData } from '@/views/dataQuality/agentClass/mainBody/dataQualityMainBodyData';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
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: createFileFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const formData = {
taskId: '100',
};
// 塞值
setFieldsValue({
...formData,
});
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'taskId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => '新建文件夹');
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
</script>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { accountFormSchema, resetNameFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/dataQuality/agentClass/mainBody/dataQualityMainBodyData';
import { createTaskFormSchema } from './account.data';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
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: createTaskFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const formData = {
taskId: '100',
};
// 塞值
setFieldsValue({
...formData,
});
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'taskId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => '新建质量主体');
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
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;
export const columns: BasicColumn[] = [
{
title: '姓名',
dataIndex: 'name',
width: 150,
},
{
title: '登录名',
dataIndex: 'username',
width: 150,
},
{
title: '用户角色',
dataIndex: 'roleName',
width: 150,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '姓名',
component: 'Input',
componentProps: {
placeholder: '请输入姓名',
},
colProps: { span: 7 },
},
{
field: 'username',
label: '登录名',
component: 'Input',
componentProps: {
placeholder: '请输入登录名',
},
colProps: { span: 7 },
},
];
export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 100,
fileName: '质量主体',
anotherName: '质量主体',
parentId: 0,
'code:': '001',
ancestors: '0',
orderNum: 0,
selectType: null,
location: '/质量主体',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
icon: 'ant-design:partition-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 101,
fileName: 'DMP_admin-个人工作区',
anotherName: 'DMP_admin-个人工作区',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
selectType: null,
location: '/质量主体/DMP_admin-个人工作区',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
icon: 'ant-design:folder-open-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 102,
fileName: '共享工作区',
anotherName: '共享工作区',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
selectType: null,
location: '/质量主体/共享工作区',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
icon: 'ant-design:folder-open-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 201,
fileName: '贫困毕业生',
anotherName: '贫困毕业生',
parentId: 101,
'code:': '005',
ancestors: '0,100,101',
orderNum: 2,
selectType: null,
location: '/质量主体/DMP_admin-个人工作区/贫困毕业生',
holder: 'admin',
createDate: '2024-10-22 8:04:04',
updateDate: '2024-10-22 8:04:04',
icon: 'ant-design:partition-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 202,
fileName: 'test',
anotherName: 'test',
parentId: 101,
'code:': '006',
ancestors: '0,100,101',
orderNum: 3,
selectType: null,
location: '/质量主体/DMP_admin-个人工作区/test',
holder: 'admin',
createDate: '2024-10-21 9:04:04',
updateDate: '2024-10-21 9:04:04',
icon: 'ant-design:partition-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 203,
fileName: 'sql_test',
anotherName: 'sql_test',
parentId: 101,
'code:': '008',
ancestors: '0,100,101',
orderNum: 5,
selectType: null,
location: '/质量主体/DMP_admin-个人工作区/sql_test',
holder: 'admin',
createDate: '2024-10-23 12:04:04',
updateDate: '2024-10-23 12:04:04',
icon: 'ant-design:partition-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 204,
fileName: '质量主体1',
anotherName: '质量主体1',
parentId: 102,
'code:': '008',
ancestors: '0,100,101',
orderNum: 5,
selectType: null,
location: '/质量主体/共享工作区/质量主体1',
holder: 'admin',
createDate: '2024-10-23 12:04:04',
updateDate: '2024-10-23 12:04:04',
icon: 'ant-design:partition-outlined',
},
];
export const DetailTreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 100,
fileName: '任务',
parentId: 0,
'code:': '001',
ancestors: '0',
orderNum: 0,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 101,
fileName: '代码文件',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 102,
fileName: '数据处理',
parentId: 100,
'code:': '003',
ancestors: '0,100',
orderNum: 2,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 103,
fileName: '任务流',
parentId: 100,
'code:': '003',
ancestors: '0,100',
orderNum: 2,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 401,
fileName: '脚本',
parentId: 101,
'code:': '002',
ancestors: '0,100,101',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 402,
fileName: 'SQL',
parentId: 101,
'code:': '002',
ancestors: '0,100,101',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 403,
fileName: '数据加载',
parentId: 102,
'code:': '002',
ancestors: '0,100,102',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 404,
fileName: '数据同步',
parentId: 102,
'code:': '002',
ancestors: '0,100,102',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 405,
fileName: '数据质量',
parentId: 102,
'code:': '002',
ancestors: '0,100,102',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
flag: '1',
businessId: 406,
fileName: '嵌套任务流',
parentId: 103,
'code:': '002',
ancestors: '0,100,103',
orderNum: 1,
// "children" : [ ],
selectType: null,
fileSize: '1024KB',
location: '位置1',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
];
export const fileData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 300,
username: 'file1',
nickName: '测试文件流1',
name: '测试文件流1',
fileSize: 1024,
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
institutionId: 105,
institutionName: '财务部门',
menuList: [],
},
{
delFlag: '0',
flag: '1',
businessId: 301,
username: 'file2',
nickName: '测试文件流2',
name: '测试文件流2',
fileSize: 1024,
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
institutionId: 105,
institutionName: '财务部门',
menuList: [],
},
{
delFlag: '0',
flag: '1',
businessId: 302,
username: 'file3',
nickName: '测试文件流3',
name: '测试文件流3',
fileSize: 1024,
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
institutionId: 105,
institutionName: '财务部门',
menuList: [],
},
{
delFlag: '0',
flag: '1',
businessId: 303,
username: 'file4',
nickName: '测试文件流4',
name: '测试文件流4',
fileSize: 1024,
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
institutionId: 105,
institutionName: '财务部门',
menuList: [],
},
];
export const addUserData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 400,
username: 'tianjia1',
nickName: '添加用户1',
userType: '1',
name: '添加用户1',
roleName: '工作区访客',
createDate: '2024-10-24 10:04:04',
institutionId: null,
institutionName: '',
code: '123f',
identity: '1',
roleIds: null,
roleNames: '三级用户',
roleList: null,
menuList: [],
},
{
delFlag: '0',
flag: '1',
businessId: 402,
username: 'tianjia2',
nickName: '添加用户2',
userType: '1',
name: '添加用户2',
roleName: '工作区访客',
createDate: '2024-10-25 10:05:05',
sex: '0',
institutionId: null,
institutionName: '',
code: '123a',
identity: '1',
roleIds: null,
roleNames: null,
roleList: null,
menuList: [],
},
{
delFlag: '0',
flag: '1',
businessId: 403,
username: 'tianjia3',
nickName: '添加用户3',
userType: '1',
name: '添加用户3',
roleName: '工作区访客',
createDate: '2024-10-26 10:06:06',
sex: '1',
institutionId: null,
institutionName: '',
code: '123c',
identity: '1',
roleIds: null,
roleNames: '超级管理员',
roleList: null,
menuList: [],
},
];
export const accountFormSchema: any[] = [];
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleSaveManage">存储管理</a-button>
<a-button type="primary" @click="handleMove">移动</a-button>
<a-button type="primary" @click="deleteButton">删除</a-button>
<a-button type="primary" @click="createFileButton">新建文件夹</a-button>
<a-button type="primary" @click="createCreateMainBodyButton">新建质量主体</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
// icon: 'clarity:note-edit-line',
label: '复制',
onClick: copyButton.bind(null, record),
},
{
label: '详情',
onClick: handleEdit.bind(null, record),
},
{
label: '移动',
onClick: handleMove.bind(null, record),
},
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
<template #fileName="{ text, record }">
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable>
<FileModal @register="registerModal" @success="handleSuccess" />
<MoveFile @register="registerMoveFile" @success="handleMoveSuccess" />
<CreateFile @register="registerCreateFileModal" @success="handleAddSuccess" />
<create-main-body @register="registerCreateCreateMainBodyModal" @success="handleAddSuccess" ></create-main-body>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, unref, onDeactivated, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getAccountList, deleteUser, exportUserList } from '@/api/system/user/user';
import { PageWrapper } from '@/components/Page';
import DeptTree from './FileTree.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import FileModal from './FileModal.vue';
import MoveFile from './moveFile.vue';
import CreateFile from './createFile.vue';
import { columns, searchFormSchema } from './account.data';
import { useGo } from '@/hooks/web/usePage';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { useUserStore } from '@/store/modules/user';
import { getMenuListByPage } from '@/api/system/menu/menu';
import { fileData, TreeData } from '@/views/dataQuality/agentClass/mainBody/dataQualityMainBodyData';
import { forEach } from 'lodash-es';
import { router } from '@/router';
defineOptions({ name: 'AccountManagement' });
const { createMessage, createConfirm } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal(); // 查看属性弹窗
const [registerMoveFile, { openModal: openMoveFileModal }] = useModal(); // 移动弹窗
const [registerCreateCreateMainBodyModal, { openModal: openCreateCreateMainBodyModal }] =
useModal(); // 新建质量主体弹窗
const [registerCreateFileModal, { openModal: openCreateFileModal }] = useModal(); // 新建文件夹弹窗
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '',
api: async (params) => {
//过滤掉tableData.value中,businessId等于100的
var data = [];
if (params.taskId == undefined || params.taskId == '') {
data = tableData.value.filter((item) => item.businessId >= 200);
} else if (params.taskId >= 200) {
data = tableData.value.filter((item) => item.businessId == params.taskId);
} else {
data = tableData.value.filter((item) => item.parentId == params.taskId);
}
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: data.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
return { ...response, data: data };
},
rowKey: 'businessId',
columns,
rowSelection: true,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.taskId = '';
},
},
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 280,
title: '操作',
dataIndex: 'action',
},
});
/**查看详情*/
function showDetails(record) {
// router.push({
// path: '/commonFile/fileDetail',
// query: {
// fileName: record.fileName,
// },
// });
openModal(true, {
record,
isUpdate: true,
});
}
/**复制按钮*/
function copyButton() {
createMessage.success('复制成功!');
}
/**粘贴按钮*/
function stickButton() {
createMessage.success('粘贴成功!');
}
/**删除按钮*/
function deleteButton() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗?',
onOk() {
createMessage.success('删除成功!');
reload();
},
});
}
/**新建文件夹*/
function createFileButton() {
openCreateFileModal(true, {
isAdd: true,
});
}
/**新建任务流*/
function createCreateMainBodyButton() {
openCreateCreateMainBodyModal(true, {
isAdd: true,
});
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
//修改表单的值
const result = updateTableDataRecord(values.businessId, values);
reload();
} else {
tableData.value.push(values);
reload();
}
}
/** 添加用户*/
function handleAddSuccess({ isAdd, values, length }) {
if (length > 0) {
//批量添加
for (let i = 0; i < length; i++) {
tableData.value.push(values[i]);
}
}
reload();
}
/** 部门树的select*/
function handleSelect(taskId = '') {
searchInfo.taskId = taskId;
reload();
}
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 重命名按钮*/
function handleResetName(record: Recordable) {
openResetNameModal(true, {
record,
isReset: true,
});
}
/** 删除按钮*/
function handleDelete(record: Recordable) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === record.businessId),
1,
);
createMessage.success('删除成功!');
reload();
}
/** 移动按钮*/
function handleMove(record: Recordable) {
openMoveFileModal(true, {
record,
isMove: true,
});
}
/** 移动*/
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0) {
//批量移动
for (let i = 0; i < rowSelection.length; i++) {
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
} else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
onMounted(() => {
tableData.value = TreeData;
console.log('tableData.value :', tableData.value);
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.institutionId = params.institutionId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script>
<template>
<BasicModal
v-bind="$attrs"
width="80%"
@register="registerDbModal"
:title="title"
:showOkBtn="false"
>
<div>
<div style="display: flex; justify-content: flex-end">
<a-button style="margin-right: 5px" type="primary" @click="handleSave">存储管理</a-button>
<a-button style="margin-right: 5px" type="primary" @click="refresh">基本信息</a-button>
<a-button style="margin-right: 5px" type="primary" @click="handleImport">保存</a-button>
</div>
<Tabs v-model:activeKey="page" size="large">
<a-tab-pane key="1" tab="主体信息">
<div v-if="page === '1'">
<div style="height: 300px; overflow: auto">
<Alert show-icon message="" description="请确保数据库账号拥有系统表的访问权限" />
<BasicForm @register="registerInfoForm" />
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="列信息">
<div v-if="page === '2'"> </div>
</a-tab-pane>
<a-tab-pane key="3" tab="数据预览">
<div v-if="page === '3'"> </div>
</a-tab-pane>
<a-tab-pane key="4" tab="关联规则">
<div v-if="page === '4'"> </div>
</a-tab-pane>
</Tabs>
</div>
</BasicModal>
</template>
<script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { ref } from 'vue';
import { Tabs, Alert } from 'ant-design-vue';
import { useModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const page = ref('1');
const tableData = ref([]);
const title = ref('');
const tableTitle = ref('');
const [registerTable, { reload, getForm }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
columns: dbColumns,
formConfig: {
labelWidth: 120,
schemas: dbSearchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
handleSearchInfoFn(info) {
tableData.value = dbData.filter(
(item) => info.dbName === undefined || item.dbName.includes(info.dbName),
);
return info;
},
});
const [registerInfoForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchemaTemplate,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerDbModal, { closeModal }] = useModalInner(async (data) => {
title.value = data.workSpaceName;
tableTitle.value = data.name;
tableData.value = dbData;
await reload();
});
</script>
<style scoped lang="less"></style>
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" minHeight="50">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {accountFormSchema, MoveFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {resetUserPwd} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from "./dataQualityMainBodyData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const idList = ref([])
const rowData = ref([])
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: MoveFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
//每次点击弹窗 需要清空存储的数据
rowData.value = []
//重置表单数据
resetFields();
setModalProps({ confirmLoading: false });
if (data.idList != null && data.idList != undefined && data.idList.length > 0){
} else {
rowData.value.push(data.record)
//单个移动
rowId.value = data.record.businessId;
data.record.taskId = data.record.businessId
setFieldsValue({
...data.record,
});
}
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([
{
field: 'taskId',
componentProps: {
treeData: treeList
},
},
]);
console.log('treeList:',treeList)
});
const getTitle = computed(() => ('移动'));
/**确定按钮*/
async function handleSubmit() {
createMessage.success('移动成功!')
closeModal()
}
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
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