Skip to content

B
bigDataSystem
Commit 48538796 authored by zxw's avatar zxw
Browse files
Options

函数管理-页面

parent 1296bfe3
Hide whitespace changes
Inline Side-by-side
Showing with 643 additions and 8 deletions
src/views/scriptDevelopment/functionManagement/DeptTree.vue 0 → 100644
View file @ 48538796
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<div class="m-4 mr-0 overflow-hidden bg-white" style="margin-bottom: -20px">
<BasicTree
ref="treeRef1"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'label'}"
@select="handleSelect"
/>
</div>
<a-input placeholder="" style="margin: 10px 0;">
<template #prefix>
<Icon icon="ant-design:search-outlined" :size="20" />
</template>
</a-input>
<BasicTree
ref="treeRef2"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeDataTwo"
:fieldNames="{ key: 'selectedDeptId', title: 'label' }"
@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 { treeDataList, treeDataListTwo } from './mock';
import Icon from "@/components/Icon/Icon.vue";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeDataTwo = ref<TreeItem[]>([]);
const treeRef1 = ref<Nullable<TreeActionType>>(null);
const treeRef2 = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataList;
treeDataTwo.value = treeDataListTwo;
await nextTick(() => {
getTree(treeRef1).expandAll(true);
getTree(treeRef2).expandAll(true);
});
}
function getTree(treeRef) {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function handleSelect(selectedDeptId) {
emit('select', selectedDeptId[0]);
console.log('selectedDeptId:', selectedDeptId);
}
onMounted(() => {
fetch();
});
</script>
src/views/scriptDevelopment/functionManagement/editAuditRulesModal.vue 0 → 100644
View file @ 48538796
<template >
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex" >
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex flex-col" class="toolbar" style="width: 910px; ">
<div class="toolbar" style="background: white;" >
<div class="tools" >
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0" @click="preservation">保存</a-button>
</div>
</div>
<BasicForm
style="background: white; height: 686px;"
size="middle"
:bordered="false"
:column="2"
:model="info"
@register="registerGuideModeForm"
>
<template #fileSlot>
<div style="display: flex; width: 342px">
<a-button type="primary">文件选择</a-button>
<p style="margin: 5px">仅允许导入单个.jar文件</p>
</div>
<div style="margin-top: 10px">
<a-input style="width: 342px; margin-right: auto" allowClear />
</div>
</template>
</BasicForm>
<SaveSettingsModal @register="saveSettings" />
</PageWrapper>
</PageWrapper>
</template>
<script lang="ts" setup>
import {ref, } from 'vue';
import {PageWrapper} from "@/components/Page";
import {tableList} from "./mock";
import {personSchema} from "./mainBody.data";
import {BasicForm, useForm} from "@/components/Form";
import SaveSettingsModal from "./saveSettingsModal.vue";
import {useModal} from "@/components/Modal";
// 初始化 info 为一个响应式对象
const info = ref({...tableList[0]});
const [saveSettings, { openModal: openModal }] =
useModal(); // 新建质量主体弹窗
function preservation() {
openModal(true, {
isUpdate: false,
});
}
const [registerGuideModeForm] = useForm({
labelWidth: 100,
schemas: personSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
</script>
<style scoped>
</style>
src/views/scriptDevelopment/functionManagement/index.vue 0 → 100644
View file @ 48538796
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex" >
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<editAuditRulesModal
style="background: #cc0000;"
class="w-3/4 xl:w-4/5"
v-if="isSpecificDeptSelected"
:deptId="selectedDeptId"
/>
<BasicTable
@register="registerTable"
class="w-3/4 xl:w-4/5"
:searchInfo="searchInfo"
v-else
>
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:ellipsis-outlined',
},
]"
/>
</template>
</template>
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" placeholder="输入关键字搜索" allowClear />
<a-button type="primary">导入</a-button>
<a-button type="primary">导出</a-button>
<a-button type="primary">删除</a-button>
<a-button type="primary">移动</a-button>
<a-button type="primary">新建文件夹</a-button>
<a-button type="primary">新建</a-button>
</template>
</BasicTable>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue';
import {BasicTable, TableAction, useTable} from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import DeptTree from './DeptTree.vue';
import { ref } from 'vue';
import { tableList } from './mock';
import { columns } from './mainBody.data';
import EditAuditRulesModal from "./editAuditRulesModal.vue";
defineOptions({ name: 'AccountManagement' });
const isSpecificDeptSelected = computed(() => {
return [23, 24, 25].includes(selectedDeptId.value);
});
// 选中的部门ID
const selectedDeptId = ref<string | null>(null);
const searchInfo = reactive<Recordable>({});
const [
registerTable,
{ },
] = useTable({
api: async (params) => {
console.log('tableList', tableList);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response };
},
rowKey: 'businessId',
columns,
formConfig: {
labelWidth: 10,
autoSubmitOnEnter: true,
},
rowSelection: true,
useSearchForm: false,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
},
});
// 处理选择节点事件
const handleSelect = (deptId) => {
selectedDeptId.value = deptId;
console.log('选择节点selectedDeptId:', deptId);
}
</script>
src/views/scriptDevelopment/functionManagement/mainBody.data.ts 0 → 100644
View file @ 48538796
import {BasicColumn, FormSchema} from '@/components/Table';
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'name',
width: 150,
sorter: true,
},
{
title: '规则描述',
dataIndex: 'ruleDescription',
width: 220,
},
{
title: '创建时间',
dataIndex: 'creationTime',
width: 120,
sorter: true,
},
{
title: '更新时间',
dataIndex: 'updateTime',
width: 120,
sorter: true,
},
{
title: '拥有者',
dataIndex: 'owner',
width: 120,
sorter: true,
},
];
export const personSchema: FormSchema[] = [
{
field: 'name',
component: 'Input',
colProps: { lg: 11, md: 11 },
label: '函数名称',
},
{
field: 'dataConnection ',
label: '数据连接',
colProps: { lg: 11, md: 11 },
component: 'Select',
required: true,
componentProps: {
placeholder: '规则处置方式',
options: [
{ label: '建议优化', value: '1' },
{ label: '禁止执行', value: '2' },
{ label: 'admin', value: '3' },
],
},
},
{
field: 'file',
label: '文件',
slot:'fileSlot',
required: true,
},
{
field: 'classPath',
label: 'class路径',
colProps: { lg: 11, md: 11 },
component: 'Input',
required: true,
},
{
field: 'ruleDescription',
label: '描述',
colProps: { lg: 11, md: 11 },
component: 'Input',
},
{
field: 'operator',
label: '操作符',
colProps: { lg: 11, md: 11 },
component: 'Input',
},
{
field: 'giveAnExample',
label: '举例',
colProps: { lg: 11, md: 11 },
component: 'InputTextArea',
},
];
export const sqlConfiguration: FormSchema[] = [
{
field: 'inceptorDataSource',
label: 'Inceptor数据源',
colProps: { lg: 23, md: 23 },
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'Inceptor-35', value: '1' },
{ label: 'Inceptor-idc', value: '2' },
],
},
},
{
field: 'hdfsDataSource ',
label: 'HDFS数据源',
colProps: { lg: 23, md: 23 },
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'hdfs-dc', value: '1' },
],
},
},
{
field: 'hdfsPath',
label: 'HDFS路径',
slot:'hdfsPath',
required: true,
},
];
src/views/scriptDevelopment/functionManagement/mock.ts 0 → 100644
View file @ 48538796
export const tableList: any[] = [
{
selectedDeptId: 23,
name: 'named_struct',
ruleDescription: '返回带有指定数字(number)的日期(date),该数字添加到指定的日期部分',
creationTime: '2019/12/12 21:21:21',
updateTime: '2019/12/12 21:21:21',
owner: 'admin',
},
{
selectedDeptId: 24,
name: 'Aggregate',
ruleDescription: '对其应用的每个行集返回一个值',
creationTime: '2019/12/12 21:21:21',
updateTime: '2019/12/12 21:21:21',
owner: 'admin',
},
{
selectedDeptId: 25,
name: 'Scalar',
ruleDescription: '可用于binary 和varbinary数据类型列,但主要用于char和varchar数据类型',
creationTime: '2019/12/12 21:21:21',
updateTime: '2019/12/12 21:21:21',
owner: 'admin',
},
];
export const treeDataList = [
{
label: '函数',
businessId: 1,
children: [
{
// {
// label: 'admin_个人工作区',
// businessId: 2,
// children: [
// { label: '个人工作区1', businessId: 6 },
// { label: '个人工作区2', businessId: 7 },
// ],
// },
// { label: '共享工作区', businessId: 3 },
// { label: '商城工作区', businessId: 4 },
// { label: '指标工作区', businessId: 5 },
}
],
},
];
export const treeDataListTwo = [
{
label: '预置函数',
selectedDeptId: 21,
children: [
{}
],
},
{
label: '自定义函数',
selectedDeptId: 22,
children: [
{ label: 'named_struct', selectedDeptId: 23 },
{ label: 'Aggregate', selectedDeptId: 24 },
{ label: 'Scalar', selectedDeptId: 25 },
],
},
];
src/views/scriptDevelopment/functionManagement/saveSettingsModal.vue 0 → 100644
View file @ 48538796
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<div style="display: flex;align-items: center;justify-content: space-between">
<div class="choseOB_title">jdbc:hive2://demo15.example.org:10000/default</div>
</div>
<Tabs default-active-key="1" @change="changeTabs">
<Tabs.TabPane >
<div class="addDialogBG" >
<BasicForm
style="margin: 5px"
size="middle"
:bordered="false"
:column="1"
:model="info"
@register="registerGuideModeForm"
>
<template #hdfsPath>
<a-input-search
style="width: 420px"
placeholder="请选择路径"
enter-button="选择"
size="large"
/>
</template>
</BasicForm>
</div>
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
<div class="choseOB_title">jdbc:hive2://node22:10000/default</div>
</div>
<div class="addDialogBG" style="margin-top: 5px">
<div style="margin-top: 5px" />
<BasicForm
style="margin-top: 15px;"
size="middle"
:bordered="false"
:model="info"
@register="registerGuideModeForm"
>
<template #hdfsPath>
<a-input-search
style="width: 420px"
placeholder="请选择路径"
enter-button="选择"
size="large"
/>
</template>
</BasicForm>
</div>
<BasicForm @register="registerForm" />
</Tabs.TabPane>
</Tabs>
</BasicModal>
</template>
<script lang="ts" setup>
import { Tabs } from 'ant-design-vue';
import {ref, computed, unref,} from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {
sqlConfiguration
} from "@/views/scriptDevelopment/functionManagement/mainBody.data";
import {tableList} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const rowId = ref('');
// 初始化 info 为一个响应式对象
const info = ref({...tableList[0]});
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => ('保存设置'));
function changeTabs(activeKey: any) {
console.log('activeKey',activeKey)
}
const [registerGuideModeForm] = useForm({
labelWidth: 100,
schemas: sqlConfiguration,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.choseOB_title{
font-weight: 600;
}
::v-deep.ant-checkbox-group{
display: grid;
}
.checkRow{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 5px;
}
.addDialogBG{
background-color: #E8ECF7;
width: 100%;
}
</style>
src/views/scriptDevelopment/sqlAudit/editAuditRulesModal.vue
View file @ 48538796
......@@ -7,8 +7,6 @@
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0">保存</a-button>
</div>
</div>
<BasicForm
style="background: white"
size="middle"
......@@ -18,8 +16,6 @@
@register="registerGuideModeForm"
>
<template #ruleContentSlot>
<div class="editor">
<CodeEditor v-model:value="sql" />
......@@ -36,12 +32,8 @@
</div>
</template>
</BasicForm>
</PageWrapper>
</PageWrapper>
......
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