Commit 66527512 authored by baiyinhao's avatar baiyinhao

修改质量任务运维界面

parent 4985b28a
<template> <template>
<div class="m-4 mr-0 overflow-hidden bg-white"> <div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree <BasicTree
title="质量主体" title=" "
ref="treeRef" ref="treeRef"
toolbar toolbar
search search
......
import { getAllRoleList } from '@/api/system/role/role'; import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table'; import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue'; import { h } from 'vue';
import { Tag } from 'ant-design-vue'; import { Tag, Switch } from 'ant-design-vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user'; // 引入开关组件 import { changeFlagApi } from '@/api/system/user/user';
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight';
// 引入开关组件
type CheckedType = boolean | string | number; type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ // {
title: '质量主体名称', // title: '质量主体名称',
dataIndex: 'fileName', // dataIndex: 'fileName',
width: 150, // width: 150,
slots: { customRender: 'fileName' }, // slots: { customRender: 'fileName' },
}, // },
{ // {
title: '描述', // title: '描述',
dataIndex: 'descripe', // dataIndex: 'descripe',
width: 150, // width: 150,
}, // },
{ // {
title: '创建者', // title: '创建者',
dataIndex: 'holder', // dataIndex: 'holder',
width: 150, // width: 150,
}, // },
{ // {
title: '创建时间', // title: '创建时间',
dataIndex: 'createDate', // dataIndex: 'createDate',
width: 150, // width: 150,
}, // },
{ // {
title: '更新时间', // title: '更新时间',
dataIndex: 'updateDate', // dataIndex: 'updateDate',
width: 150, // width: 150,
}, // },
{ // {
title: '原始主体', // title: '原始主体',
dataIndex: 'originalPrincipal', // dataIndex: 'originalPrincipal',
slots: { customRender: 'originalPrincipal' }, // slots: { customRender: 'originalPrincipal' },
width: 150, // width: 150,
}, // },
]; ];
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{ {
...@@ -49,7 +50,7 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -49,7 +50,7 @@ export const searchFormSchema: FormSchema[] = [
componentProps: { componentProps: {
placeholder: '请输入名称', placeholder: '请输入名称',
}, },
colProps: { span: 7 }, colProps: { span: 4 },
}, },
]; ];
export const accountFormSchema: any[] = [ export const accountFormSchema: any[] = [
...@@ -94,18 +95,74 @@ export const accountFormSchema: any[] = [ ...@@ -94,18 +95,74 @@ export const accountFormSchema: any[] = [
/**移动*/ /**移动*/
export const MoveFormSchema: any[] = [ export const MoveFormSchema: any[] = [
{ {
field: 'taskId', field: 'titleName1',
label: '路径', label: 'oracle数据源/TEST/CHANGE_ORACLE_TEST0',
component: 'TreeSelect', component: 'BasicTitle',
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
componentProps: { componentProps: {
fieldNames: { style: {
label: 'fileName', fontSize: '18px',
value: 'businessId',
}, },
getPopupContainer: () => document.body,
}, },
required: true, },
{
field: 'titleName2',
label: '增量标识列',
component: 'BasicTitle',
colProps: { lg: 24, md: 24 },
componentProps: {
style: {
fontSize: '16px',
fontWeight: '200',
},
},
},
{
field: 'titleName3',
label: '',
component: 'Select',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: 'NOTICE_DT', value: '1' },
{ label: 'PUBLISH_DT', value: '2' },
{ label: 'CREATE_DT', value: '3' },
{ label: 'UPDT_DT', value: '4' },
],
},
},
{
field: 'titleName4',
label: '筛选条件',
component: 'BasicTitle',
colProps: { lg: 24, md: 24 },
componentProps: {},
},
{
field: 'description',
label: '',
component: 'InputTextArea',
required: false,
colProps: { lg: 24, md: 24, span: 24 },
},
{
field: 'titleName6',
label: '筛选描述',
component: 'BasicTitle',
colProps: { lg: 24, md: 24 },
componentProps: {
style: {
fontSize: '16px',
fontWeight: '200',
},
},
},
{
field: 'description2',
label: '',
component: 'InputTextArea',
required: false,
colProps: { lg: 24, md: 24, span: 24 },
}, },
]; ];
......
<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>
</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 { router } from '@/router';
defineOptions({ name: 'DeptTree' });
const { createMessage } = useMessage();
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() {
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: () => {
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 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: 'descripe',
width: 150,
},
{
title: '创建者',
dataIndex: 'holder',
width: 150,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 150,
},
{
title: '原始主体',
dataIndex: 'originalPrincipal',
slots: { customRender: 'originalPrincipal' },
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 StorageSchema: FormSchema[] = [
{
field: 'isStorage',
label: '存储主体问题数据明细',
component: 'Checkbox',
colProps: { lg: 12, md: 24 },
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
formActionType.updateSchema([{ field: 'isStorageInHDFS', ifShow: formModel.isStorage }]);
formActionType.updateSchema([{ field: 'handle', ifShow: formModel.isStorage }]);
formActionType.updateSchema([{ field: 'isAutoClear', ifShow: formModel.isStorage }]);
formActionType.updateSchema([{ field: 'clear', ifShow: formModel.isStorage }]);
formActionType.updateSchema([{ field: 'divider', ifShow: formModel.isStorage }]);
},
}),
},
{
field: 'isStorageInHDFS',
label: '存储到HDFS',
labelWidth: 85,
component: 'Checkbox',
colProps: { lg: 12, md: 24 },
ifShow: false,
},
{
field: 'handle',
label: '手动清理',
component: 'BasicTitle',
ifShow: false,
colProps: { lg: 24, md: 24 },
},
{
field: 'clear',
label: '清理',
component: 'Input',
labelWidth: 30,
colProps: { lg: 24, md: 24 },
ifShow: false,
slot: 'clear',
},
{
field: 'divider',
component: 'Divider',
ifShow: false,
colProps: { lg: 24, md: 24 },
},
{
field: 'isAutoClear',
label: '自动清理',
labelWidth: 70,
component: 'Checkbox',
colProps: { lg: 12, md: 24 },
ifShow: false,
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
formActionType.updateSchema([{ field: 'maxRetentionTime', ifShow: formModel.isAutoClear }]);
formActionType.updateSchema([{ field: 'inspectionCycle', ifShow: formModel.isAutoClear }]);
formActionType.updateSchema([{ field: 'inspectionTime', ifShow: formModel.isAutoClear }]);
},
}),
},
{
field: 'maxRetentionTime',
label: '最长保留时间',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
addonAfter: '天',
},
ifShow: false,
},
{
field: 'inspectionCycle',
label: '检查周期',
component: 'Select',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: '每天', value: '每天' },
{ label: '每周', value: '每周' },
{ label: '每月', value: '每月' },
{ label: '每年', value: '每年' },
],
},
ifShow: false,
},
{
field: 'inspectionTime',
label: '检查时间',
component: 'Input',
colProps: { lg: 24, md: 24 },
ifShow: false,
slot: 'isStorageInHDFS',
},
];
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="80%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<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>
</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),
},
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
<template #fileName="{ text, record }">
<a @click="handleMainBodyEdit(record)"> {{ text }}</a>
</template>
<template #originalPrincipal="{ text, record }">
<a @click="handleMainBodyEdit(record)"> {{ text }}</a>
</template>
</BasicTable>
<StorageManageModal @register="registerStorageManageModal" />
</PageWrapper>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner, useModal } from '@/components/Modal';
import { reactive, unref, onDeactivated, onMounted, ref, computed } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { fileData, TreeData } from './dataQualityMainBodyData';
import StorageManageModal from './storageManageModal.vue';
import DeptTree from './FileTree.vue';
import { columns, searchFormSchema } from './account.data';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage, createConfirm } = useMessage();
const title = ref();
const isRunning = ref(false);
const [registerStorageManageModal, { openModal: openStorageManageModal }] = useModal(); // 存储管理弹窗
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const getTitle = computed(() => (!unref(isRunning) ? '配置质量文件' : '配置质量文件'));
//初始化表单
const [registerTable, { reload }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
var data = [];
data = tableData.value;
return { ...response, data: data };
},
pagination: false,
columns: columns,
useSearchForm: true,
showTableSetting: false,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
rowKey: 'id',
// rowSelection: true,
bordered: true,
showIndexColumn: false,
// actionColumn: {
// width: 150,
// title: '操作',
// dataIndex: 'action',
// },
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
// 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,
// },
// useSearchForm: true,
// showTableSetting: false,
// showIndexColumn: false,
// bordered: true,
// handleSearchInfoFn(info) {
// return info;
// },
// actionColumn: {
// width: 280,
// title: '操作',
// dataIndex: 'action',
// },
// });
/**复制按钮*/
function copyButton() {
createMessage.success('复制成功!');
}
/**粘贴按钮*/
function stickButton() {
createMessage.success('粘贴成功!');
}
/**删除按钮*/
function deleteButton() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗?',
onOk() {
createMessage.success('删除成功!');
reload();
},
});
}
/** 部门树的select*/
function handleSelect(taskId = '') {
searchInfo.taskId = taskId;
reload();
}
function handleSaveManage(record: Recordable) {
openStorageManageModal(true, {
record,
});
}
/**确定按钮*/
function handleSubmit() {
closeModal();
}
onMounted(() => {
tableData.value = TreeData;
console.log('tableData.value :', tableData.value);
});
</script>
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="存储管理"
@ok="handleSubmit"
minHeight="50"
>
<BasicForm @register="registerForm">
<template #clear="{ model, field }">
<DatePicker style="width: 55%" />之前所有的执行记录
<a-button v-model="model.clear" @click="handleClear" style="margin-left: 5px" type="error"
>清理</a-button
>
</template>
<template #isStorageInHDFS="{ model, field }">
<a-input style="width: 60px; margin-right: 5px" /><a-input
style="width: 60px; margin-right: 5px"
/>
</template>
</BasicForm>
</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 { StorageSchema } from './account.data';
import { useMessage } from '@/hooks/web/useMessage';
import { DatePicker } from 'ant-design-vue';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 160,
labelAlign: 'left',
baseColProps: { span: 24 },
schemas: StorageSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
});
/**确定按钮*/
function handleSubmit() {
createMessage.success('保存成功!');
closeModal();
}
/**确定按钮*/
function handleClear() {
createMessage.success('清理成功!');
closeModal();
}
</script>
<template> <template>
<BasicModal <BasicModal
width="80%" width="50%"
v-bind="$attrs" v-bind="$attrs"
@register="registerModal" @register="registerModal"
:title="getTitle" :title="getTitle"
@ok="handleSubmit" @ok="handleSubmit"
> >
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> <DeptTree width="60%" class="w-2/5 xl:w-2/5" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar> <div class="w-3/5 xl:w-3/5">
<a-button type="primary" @click="handleSaveManage">存储管理</a-button> <Select
</template> width="60%"
<template #bodyCell="{ column, record }"> v-model:value="value"
<template v-if="column.key === 'action'"> show-search
<TableAction placeholder="input search text"
:actions="[ style="width: 200px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px"
{ :default-active-first-option="false"
// icon: 'clarity:note-edit-line', :show-arrow="false"
label: '复制', :filter-option="false"
onClick: copyButton.bind(null, record), :not-found-content="null"
}, :options="data"
{ @search="handleSearch"
label: '属性',
onClick: handleEdit.bind(null, record),
},
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/> />
</template> <BasicForm @register="registerForm" />
</template> </div>
<template #fileName="{ text, record }">
<a @click="handleMainBodyEdit(record)"> {{ text }}</a> <!-- <StorageManageModal @register="registerStorageManageModal" /> -->
</template>
<template #originalPrincipal="{ text, record }">
<a @click="handleMainBodyEdit(record)"> {{ text }}</a>
</template>
</BasicTable>
<StorageManageModal @register="registerStorageManageModal" />
</PageWrapper> </PageWrapper>
</BasicModal> </BasicModal>
</template> </template>
...@@ -56,11 +36,16 @@ ...@@ -56,11 +36,16 @@
import { reactive, unref, onDeactivated, onMounted, ref, computed } from 'vue'; import { reactive, unref, onDeactivated, onMounted, ref, computed } from 'vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicForm, useForm, FormActionType } from '@/components/Form';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { fileData, TreeData } from './dataQualityMainBodyData'; import { fileData, TreeData } from './dataQualityMainBodyData';
import StorageManageModal from './storageManageModal.vue'; import StorageManageModal from './storageManageModal.vue';
import DeptTree from './FileTree.vue'; import DeptTree from './FileTree.vue';
import { columns, searchFormSchema } from './account.data'; import { columns, searchFormSchema, MoveFormSchema } from './account.data';
import { Select } from 'ant-design-vue';
let timeout: any;
let currentValue = '';
defineOptions({ name: 'KnowledgeModal' }); defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
...@@ -71,7 +56,7 @@ ...@@ -71,7 +56,7 @@
const [registerStorageManageModal, { openModal: openStorageManageModal }] = useModal(); // 存储管理弹窗 const [registerStorageManageModal, { openModal: openStorageManageModal }] = useModal(); // 存储管理弹窗
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const tableData = ref([]); const tableData = ref([]);
const getTitle = computed(() => (!unref(isRunning) ? '配置质量文件' : '配置质量文件')); const getTitle = computed(() => (!unref(isRunning) ? '添加检查范围' : '添加检查范围'));
//初始化表单 //初始化表单
const [registerTable, { reload }] = useTable({ const [registerTable, { reload }] = useTable({
api: async () => { api: async () => {
...@@ -92,6 +77,7 @@ ...@@ -92,6 +77,7 @@
pagination: false, pagination: false,
columns: columns, columns: columns,
useSearchForm: true, useSearchForm: true,
showTableSetting: false, showTableSetting: false,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
...@@ -114,54 +100,12 @@ ...@@ -114,54 +100,12 @@
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
title.value = data.title; title.value = data.title;
}); });
// const [ //初始化表单
// registerTable, const [registerForm, { setFieldsValue }] = useForm({
// { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection }, labelWidth: 120,
// ] = useTable({ schemas: MoveFormSchema,
// title: '', showActionButtonGroup: false,
// 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,
// },
// useSearchForm: true,
// showTableSetting: false,
// showIndexColumn: false,
// bordered: true,
// handleSearchInfoFn(info) {
// return info;
// },
// actionColumn: {
// width: 280,
// title: '操作',
// dataIndex: 'action',
// },
// });
/**复制按钮*/ /**复制按钮*/
function copyButton() { function copyButton() {
...@@ -205,4 +149,48 @@ ...@@ -205,4 +149,48 @@
tableData.value = TreeData; tableData.value = TreeData;
console.log('tableData.value :', tableData.value); console.log('tableData.value :', tableData.value);
}); });
//搜索栏/
function fetch(value: string, callback: any) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const params = new URLSearchParams({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${params}`)
.then((response) => response.json())
.then((d) => {
if (currentValue === value) {
const result = d.result;
const data: any[] = [];
result.forEach((r: any) => {
data.push({
value: r[0],
label: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
const data = ref<any[]>([]);
const value = ref();
const handleSearch = (val: string) => {
fetch(val, (d: any[]) => (data.value = d));
};
const handleChange = (val: string) => {
console.log(val);
value.value = val;
fetch(val, (d: any[]) => (data.value = d));
};
</script> </script>
...@@ -281,7 +281,7 @@ ...@@ -281,7 +281,7 @@
} }
/** 跳转运维 未完成 应为跳转到运维界面*/ /** 跳转运维 未完成 应为跳转到运维界面*/
function handleQualityTaskService() { function handleQualityTaskService() {
go('/dataQuality/dataQuality/task/taskOperation'); go('/dataQuality/dataSheet/task/taskOperation');
} }
/** 编辑按钮*/ /** 编辑按钮*/
......
...@@ -3,15 +3,47 @@ import { DescItem } from '@/components/Description'; ...@@ -3,15 +3,47 @@ import { DescItem } from '@/components/Description';
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '血缘插件名称', title: ' ',
dataIndex: 'name', dataIndex: 'name',
width: 120, width: 120,
}, },
// {
// title: '插件状态',
// dataIndex: 'status',
// width: 120,
// },
];
export const columnsRight: BasicColumn[] = [
{
title: '调度时间',
dataIndex: 'operationTime',
width: 120,
},
{
title: '执行时间',
dataIndex: 'executeTime',
width: 120,
},
{
title: '执行时长',
dataIndex: 'executeRange',
width: 120,
},
{ {
title: '插件状态', title: '运行状态',
dataIndex: 'status', dataIndex: 'status',
width: 120, width: 120,
}, },
{
title: '执行模式',
dataIndex: 'executeMode',
width: 120,
},
{
title: '检查结果',
dataIndex: 'Result',
width: 120,
},
]; ];
export const modEditColumns: BasicColumn[] = [ export const modEditColumns: BasicColumn[] = [
{ {
......
<template> <template>
<PageWrapper title="所有数据质量任务" contentFullHeight fixedHeight contentClass="flex"> <PageWrapper title="所有数据质量任务" contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :searchInfo="searchInfo"> <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-2/5 xl:w-2/5">
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="refresh">刷新</a-button> <!-- <a-button type="primary" @click="refresh">刷新</a-button> -->
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'"> <template v-if="column.key === 'status'">
...@@ -34,25 +34,50 @@ ...@@ -34,25 +34,50 @@
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
<modEditModal @register="registerModal" /> <div class="w-3/5 xl:w-3/5">
<ruleModal @register="registerRuleModal" /> <BasicForm @register="registerForm" />
<detailModal @register="registerDetailModal" /> <BasicTable @register="registerTableRight" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="refresh">刷新</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<Tag color="error" v-if="record.status === '0'">失败</Tag>
</template>
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">成功</Tag>
</template>
<template v-if="column.key === 'result'">
<Tag color="error" v-if="record.status === '0'">不合格</Tag>
</template>
<template v-if="column.key === 'result'">
<Tag color="success" v-if="record.status === '1'">合格</Tag>
</template>
</template>
</BasicTable>
</div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue'; import { reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { Tag } from 'ant-design-vue'; import { Tag, Switch } from 'ant-design-vue';
import { columns } from './data'; import { columns, columnsRight } from './data';
import { Data } from './kinshipOperationsData'; import { Data, DataRight, searchFormSchema, formSchemaRight } from './kinshipOperationsData';
import modEditModal from './modEditModal.vue'; import modEditModal from './modEditModal.vue';
import ruleModal from './ruleModal.vue'; import ruleModal from './ruleModal.vue';
import detailModal from './detailModal.vue'; import detailModal from './detailModal.vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { formSchema } from '../mainBody.data';
defineOptions({ name: 'KnowledgeBase' }); defineOptions({ name: 'KnowledgeBase' });
const state = reactive({
checked1: true,
});
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerRuleModal, { openModal: openRuleModal }] = useModal(); const [registerRuleModal, { openModal: openRuleModal }] = useModal();
...@@ -60,15 +85,49 @@ ...@@ -60,15 +85,49 @@
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const [registerTable, { reload }] = useTable({ const [registerTable, { reload }] = useTable({
dataSource: Data, dataSource: Data,
striped: false, useSearchForm: true,
columns, columns,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
actionColumn: { formConfig: {
width: 120, labelWidth: 10,
title: '操作', schemas: searchFormSchema,
dataIndex: 'action', },
rowSelection: {
type: 'checkbox',
},
// actionColumn: {
// width: 120,
// title: '操作',
// dataIndex: 'action',
// },
});
const [registerTableRight, { reload: reloadRight }] = useTable({
dataSource: DataRight,
title: '执行记录',
striped: false,
columns: columnsRight,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
rowSelection: {
type: 'checkbox',
},
// actionColumn: {
// width: 120,
// title: '操作',
// dataIndex: 'action',
// },
});
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
// baseColProps: { lg: 12, md: 12 },
schemas: formSchemaRight,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
}, },
}); });
function modEdit() { function modEdit() {
......
import { colProps } from 'ant-design-vue/es/grid/Col';
import { result } from 'lodash-es';
import { l, s } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
export const Data: any[] = [ export const Data: any[] = [
{ {
name: 'quark1', name: 'quark1',
...@@ -20,6 +24,43 @@ export const Data: any[] = [ ...@@ -20,6 +24,43 @@ export const Data: any[] = [
status: '0', status: '0',
}, },
]; ];
export const DataRight: any[] = [
{
name: 'quark1',
status: '1',
result: '1',
},
{
name: 'quark2',
status: '0',
result: '1',
},
{
name: 'quark3',
status: '1',
result: '0',
},
{
name: 'quark4',
status: '1',
result: '1',
},
{
name: 'quark5',
status: '0',
result: '0',
},
];
export const searchFormSchema: any[] = [
{
field: 'name',
component: 'Input',
label: ' ',
componentProps: {
placeholder: '关键字搜索',
},
},
];
export const modEditData: any[] = [ export const modEditData: any[] = [
{ {
name: 'quark1', name: 'quark1',
...@@ -95,3 +136,69 @@ export const KafkaData: any[] = [ ...@@ -95,3 +136,69 @@ export const KafkaData: any[] = [
Lag: '0', Lag: '0',
}, },
]; ];
export const formSchemaRight: any[] = [
{
field: 'schedulingCycle',
component: 'Input',
label: '调度周期',
componentProps: {
placeholder: '调度周期',
disabled: true,
colProps: {
lg: 24,
},
},
},
{
field: 'publishStatus',
component: 'Input',
label: '发布状态',
componentProps: {
placeholder: '发布状态',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'creator',
component: 'Input',
label: '创建人',
componentProps: {
placeholder: '创建人',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'createTime',
component: 'Input',
label: '创建时间',
componentProps: {
placeholder: '创建时间',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'businessTag',
component: 'Input',
label: '业务标签',
componentProps: {
placeholder: '-',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
];
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