Skip to content

B
bigDataSystem
Commit 7e711a75 authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改自助建表

parent 1ee13cad
Hide whitespace changes
Inline Side-by-side
Showing with 870 additions and 562 deletions
src/views/scriptDevelopment/selfServiceTableCreation/DeptTree.vue
View file @ 7e711a75
<template> <template>
<div class="m-4 mr-0 overflow-hidden bg-white"> <div class="overflow-hidden bg-white">
<BasicTree <BasicTree
ref="treeRef" ref="treeRef"
toolbar toolbar
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:clickRowToExpand="false" :clickRowToExpand="false"
:defaultExpandAll="true" :defaultExpandAll="true"
:treeData="treeData" :treeData="treeData"
:fieldNames="{ key: 'selectedDeptId', title: 'name', }" :fieldNames="{ key: 'selectedDeptId', title: 'name' }"
@select="handleSelect" @select="handleSelect"
/> />
</div> </div>
......
src/views/scriptDevelopment/selfServiceTableCreation/addFieldsModal.vue
View file @ 7e711a75
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref} from 'vue'; import { ref, computed, unref } from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './mainBody.data'; import { formSchema } from './mainBody.data';
defineOptions({ name: 'AccountModal' });
defineOptions({ name: 'AccountModal' }); const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const emit = defineEmits(['success', 'register']); const rowId = ref('');
const isUpdate = ref(true);
const rowId = ref(''); //获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
//获取接口数据并放在下拉框里（这里是打开了一个弹框） schemas: formSchema,
//初始化表单 showActionButtonGroup: false,
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ actionColOptions: {
labelWidth: 100, span: 23,
baseColProps: { lg: 24, md: 24 }, },
schemas: formSchema, });
showActionButtonGroup: false, //初始化弹框
actionColOptions: { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
span: 23, resetFields();
},
});
//初始化弹框
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(() => ('添加字段'));
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 }); setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => '添加字段');
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.choseOB_title{ .choseOB_title {
font-weight: 600; font-weight: 600;
} }
::v-deep.ant-checkbox-group{ ::v-deep.ant-checkbox-group {
display: grid; display: grid;
} }
.checkRow{ .checkRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 5px; padding-bottom: 5px;
} }
.addDialogBG{ .addDialogBG {
background-color: #e8ecf7;
background-color: #E8ECF7; width: 100%;
width: 100%; height: 400px;
height: 400px; }
}
</style> </style>
src/views/scriptDevelopment/selfServiceTableCreation/addFile.vue 0 → 100644
View file @ 7e711a75
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { addFileFormSchema } from './mainBody.data';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from './mock';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
let isBucket = ref();
const title = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { updateSchema, resetFields }] = useForm({
baseColProps: { span: 24 },
schemas: addFileFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
isBucket.value = data.isBacket;
title.value = data.title;
// //重置表单数据
resetFields();
setModalProps({ confirmLoading: false });
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'taskId',
componentProps: {
treeData: treeList,
},
},
]);
});
/**确定按钮*/
async function handleSubmit() {
if (isBucket.value === 1) {
createMessage.success('新建文件夹成功！');
} else {
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>
src/views/scriptDevelopment/selfServiceTableCreation/editAuditRulesModal.vue
View file @ 7e711a75
<template > <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex flex-col" class="mt-4 ml-3">
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex flex-col" class="mt-4 ml-3"> <div class="toolbar" style="background: white">
<div class="toolbar" style="background: white; " > <div style="display: flex; align-items: center">
<div class="tools" > <Icon icon="majesticons:table-plus-line" :size="40" :color="'#e9a064'" />
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0" >保存</a-button> <div style="margin-left: 10px">
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0" @click="sqlStatement">生成建表语句</a-button> <span class="title">test</span>
<div>
<span class="path">自助建表文件/test</span>
</div>
</div> </div>
</div> </div>
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0" @click="handleSave"
<div> >保存</a-button
>
<a-button type="primary" style="float: right; margin: 10px 15px 10px 0" @click="sqlStatement"
>生成建表语句</a-button
>
<BasicForm <BasicForm
style="background: white; margin-top: -50px" style="background: white; margin-top: 20px"
size="middle" size="middle"
:bordered="false" :bordered="false"
:column="2" :column="2"
@register="registerGuideModeForm" @register="registerGuideModeForm"
> >
<template #tableConfiguration> <template #tableConfiguration>
<h1 class="title-text">表配置</h1> <h1 class="title-text">表配置</h1>
</template> </template>
</BasicForm> </BasicForm>
</div> </div>
<div class="mt-2">
<div class="mt-2"> <BasicTable @register="registerTable">
<BasicTable
@register="registerTable"
>
<template #sort> <template #sort>
<Icon icon="material-symbols:holder" /> <Icon icon="icon-park-outline:drag" />
</template> </template>
<template #nonEmpty="{ text , record }"> <template #nonEmpty="{ record }">
<Checkbox v-model:checked="record.nonEmpty"> <Checkbox v-model:checked="record.nonEmpty" />
</Checkbox>
</template> </template>
<template #bodyCell="{ column }"> <template #bodyCell="{ column }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
},
}, ]"
]"
/> />
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
</div>
<div>
<div style="background: white">
<a-button type="primary" style="margin-left: 5px" @click="addFields">添加字段</a-button>
</div> </div>
<div>
<div style=" background: white; ">
<a-button type="primary" style="margin-left: 5px;" @click="addFields">添加字段</a-button>
</div>
<BasicForm <BasicForm
style="background: white;" style="background: white"
size="middle" size="middle"
:bordered="false" :bordered="false"
:column="2" :column="2"
class="mt-2" class="mt-2"
@register="partitionConfigurationTemplate" @register="partitionConfigurationTemplate"
> >
<template #tableConfiguration> <template #tableConfiguration>
<h1 class="title-text" style="width: 525px;margin-bottom:-30px;margin-top: 3px;">分区配置</h1> <h1 class="title-text" style="width: 525px; margin-bottom: -30px; margin-top: 3px"
<h1 class="title-text" style="margin-bottom:-30px; margin-top: 10px; margin-left: 520px;">分桶配置</h1> >分区配置</h1
>
<h1 class="title-text" style="margin-bottom: -30px; margin-top: 10px; margin-left: 520px"
>分桶配置</h1
>
</template> </template>
<template #delete> <template #delete>
<Icon icon="ant-design:delete-outlined" :size="25"/> <Icon icon="ant-design:delete-outlined" :size="25" />
</template> </template>
</BasicForm> </BasicForm>
<div style="background: white">
<div style=" background: white;"> <a-button type="primary" style="margin-left: 5px; margin-top: -10px">添加分区键</a-button>
<a-button type="primary" style="margin-left: 5px; margin-top: -10px; ">添加分区键</a-button>
</div>
</div> </div>
<generateTableBuildingStatementsMode @register="registerModal" /> </div>
<addFieldsModal @register="FieldsModal" /> <generateTableBuildingStatementsMode @register="registerModal" />
</PageWrapper> <addFieldsModal @register="FieldsModal" />
</PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, } from 'vue'; import { ref } from 'vue';
import {PageWrapper} from "@/components/Page"; import { PageWrapper } from '@/components/Page';
import {fieldConfigurationList} from "./mock"; import { fieldConfigurationList } from './mock';
import {fieldConfiguration, personSchema, personSchemaTwo} from "./mainBody.data"; import { fieldConfiguration, personSchema, personSchemaTwo } from './mainBody.data';
import {BasicForm, useForm} from "@/components/Form"; import { BasicForm, useForm } from '@/components/Form';
import {BasicTable, TableAction, useTable} from "@/components/Table"; import { BasicTable, TableAction, useTable } from '@/components/Table';
import Icon from "@/components/Icon/Icon.vue"; import Icon from '@/components/Icon/Icon.vue';
import {useModal} from "@/components/Modal"; import { useModal } from '@/components/Modal';
import generateTableBuildingStatementsMode from './generateTableBuildingStatementsMode.vue'; import generateTableBuildingStatementsMode from './generateTableBuildingStatementsMode.vue';
import addFieldsModal from './addFieldsModal.vue'; import addFieldsModal from './addFieldsModal.vue';
import {Checkbox} from "ant-design-vue"; import { Checkbox } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
let fieldConfigurationL = ref(fieldConfigurationList);
let fieldConfigurationL = ref(fieldConfigurationList);
// 初始化 info 为一个响应式对象
const info = ref({...fieldConfigurationList[0]}); const { createMessage } = useMessage();
// 初始化 info 为一个响应式对象
const [registerModal, { openModal }] = useModal(); const info = ref({ ...fieldConfigurationList[0] });
const [FieldsModal, { openModal:addFieldConfiguration }] = useModal();
const [registerModal, { openModal }] = useModal();
const [ const [FieldsModal, { openModal: addFieldConfiguration }] = useModal();
registerTable,
{ }, const [registerTable] = useTable({
] = useTable({ api: async () => {
const response = {
api: async (params) => { pageNu: '1',
const response = { pageSize: '10',
pageNu: "1", pages: '1',
pageSize: "10", total: fieldConfigurationL.value.length,
pages: "1", code: '',
total: fieldConfigurationL.value.length, message: '',
code:'', data: fieldConfigurationL.value,
message:'', };
data: fieldConfigurationL.value,
}; //过滤data中的数据，取出等于params.deptId的数据
return { ...response };
//过滤data中的数据，取出等于params.deptId的数据
return { ...response};
},
title: '字段配置',
rowKey: 'businessId',
columns: fieldConfiguration,
formConfig: {
labelWidth: 10,
autoSubmitOnEnter: false,
},
canResize:false,
useSearchForm: false,
showIndexColumn: false,
showTableSetting: false,
bordered: false,
pagination:false,
customRow: customRow,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 60,
title: '操作',
dataIndex: 'action',
},
});
let source = 0; // 源目标数据序号
let target = 0; // 目标数据序号
function customRow(record, index) {
console.log(record, index); // 这里输出是表格全部的数据
return {
props: {
// draggable: 'true'
}, },
style: { title: '字段配置',
cursor: 'pointer', rowKey: 'businessId',
columns: fieldConfiguration,
formConfig: {
labelWidth: 10,
autoSubmitOnEnter: false,
}, },
// 鼠标移入 canResize: false,
onMouseenter: (event) => { useSearchForm: false,
// 兼容IE showIndexColumn: false,
let ev = event || window.event; showTableSetting: false,
ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以 bordered: false,
pagination: false,
customRow: customRow,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
}, },
// 开始拖拽 actionColumn: {
onDragstart: (event) => { width: 60,
// 兼容IE title: '操作',
let ev = event || window.event; dataIndex: 'action',
// 阻止冒泡
ev.stopPropagation();
// 得到源目标数据序号
source = index;
console.log(record, index, 'source');
}, },
// 拖动元素经过的元素
onDragover: (event) => {
// 兼容 IE
let ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
},
// 鼠标松开
onDrop: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到目标数据序号
target = index;
// 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
console.log(fieldConfigurationL);
// [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
const temp = ref();
temp.value = fieldConfigurationL.value[source];
fieldConfigurationL.value[source] = fieldConfigurationL.value[target];
fieldConfigurationL.value[target] = temp.value;
console.log(record, index, 'target', source, target);
},
};
}
function sqlStatement() {
openModal(true, {
isUpdate: false,
}); });
}
function addFields() { let source = 0; // 源目标数据序号
addFieldConfiguration(true, { let target = 0; // 目标数据序号
isUpdate: false, function customRow(record, index) {
console.log(record, index); // 这里输出是表格全部的数据
return {
props: {
// draggable: 'true'
},
style: {
cursor: 'pointer',
},
// 鼠标移入
onMouseenter: (event) => {
// 兼容IE
let ev = event || window.event;
ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
},
// 开始拖拽
onDragstart: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到源目标数据序号
source = index;
console.log(record, index, 'source');
},
// 拖动元素经过的元素
onDragover: (event) => {
// 兼容 IE
let ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
},
// 鼠标松开
onDrop: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到目标数据序号
target = index;
// 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
console.log(fieldConfigurationL);
// [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
const temp = ref();
temp.value = fieldConfigurationL.value[source];
fieldConfigurationL.value[source] = fieldConfigurationL.value[target];
fieldConfigurationL.value[target] = temp.value;
console.log(record, index, 'target', source, target);
},
};
}
function sqlStatement() {
openModal(true, {
isUpdate: false,
});
}
function addFields() {
addFieldConfiguration(true, {
isUpdate: false,
});
}
function handleSave() {
createMessage.success('保存成功!');
}
const [registerGuideModeForm] = useForm({
labelWidth: 100,
schemas: personSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
}); });
}
const [registerGuideModeForm] = useForm({
labelWidth: 100,
schemas: personSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [partitionConfigurationTemplate] = useForm({
labelWidth: 100,
schemas: personSchemaTwo,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [partitionConfigurationTemplate] = useForm({
labelWidth: 100,
schemas: personSchemaTwo,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
</script> </script>
<style scoped> <style scoped>
.title-text {
.title-text{ font-weight: bold;
margin-top: 0;
font-weight: bold; color: #1a1a1a;
margin-top: 0; width: 313px;
color: #1a1a1a; margin-left: 38px;
width: 313px; }
margin-left: 38px; .title {
} font-size: 16px;
font-weight: 500;
}
.path {
font-size: 14px;
color: gray;
}
</style> </style>
src/views/scriptDevelopment/selfServiceTableCreation/generateTableBuildingStatementsMode.vue
View file @ 7e711a75
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
<BasicForm @register="registerForm"> @register="registerModal"
<template #ruleContentSlot> :title="getTitle"
<div class="editor"> @ok="handleSubmit"
<CodeEditor >
v-model:value="sql" <div class="flex">
/> <span style="font-size: 20px; font-weight: bold">SQL</span>
</div> <textarea v-model="sql" style="width: 70%; height: 250px; margin-left: 30px"></textarea>
</template> </div>
</BasicForm>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref} from 'vue'; import { ref, computed, unref } from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { tableList } from './mock';
import { formSchema } from './mainBody.data'; import { useMessage } from '@/hooks/web/useMessage';
import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue";
import {tableList} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const rowId = ref('');
const sql = ref(tableList[0].sql);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
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(() => ('生成建表语句'));
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const sql = ref(tableList[0].sql);
const { createMessage } = useMessage();
async function handleSubmit() { //初始化弹框
try { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
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 }); setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
});
const getTitle = computed(() => '生成建表语句');
async function handleSubmit() {
try {
setModalProps({ confirmLoading: true });
closeModal();
createMessage.success('生成成功');
emit('success', { isUpdate: unref(isUpdate) });
} finally {
setModalProps({ confirmLoading: false });
}
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.choseOB_title{ .choseOB_title {
font-weight: 600; font-weight: 600;
} }
::v-deep.ant-checkbox-group{ ::v-deep.ant-checkbox-group {
display: grid; display: grid;
} }
.checkRow{ .checkRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 5px; padding-bottom: 5px;
} }
.addDialogBG{ .addDialogBG {
background-color: #e8ecf7;
background-color: #E8ECF7; width: 100%;
width: 100%; height: 400px;
height: 400px; }
}
</style> </style>
src/views/scriptDevelopment/selfServiceTableCreation/index.vue
View file @ 7e711a75
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex" > <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<editAuditRulesModal <editAuditRulesModal
style="background: #cc0000;" style="background: #cc0000"
class="w-3/4 xl:w-4/5" class="w-3/4 xl:w-4/5"
v-if="isSpecificDeptSelected" v-if="isSpecificDeptSelected"
:deptId="selectedDeptId" :deptId="selectedDeptId"
/> />
<BasicTable <div class="w-3/4 xl:w-4/5" v-else>
@register="registerTable" <div style="display: flex; align-items: center; background-color: white">
class="w-3/4 xl:w-4/5" <Icon icon="majesticons:table-plus-line" :size="40" :color="'#e9a064'" />
:searchInfo="searchInfo" <div style="margin-left: 10px">
v-else <span class="title">test</span>
> <div>
<template #bodyCell="{ column }"> <span class="path">自助建表文件/test</span>
<template v-if="column.key === 'action'"> </div>
<TableAction </div>
:actions="[ <a-button style="margin-left: 500px" type="primary" @click="handleMove(0)">复制到</a-button>
{ <a-button style="margin-left: 10px" type="primary" @click="handleDeleteIds">删除</a-button>
icon: 'ant-design:form-outlined', <a-button style="margin-left: 10px" type="primary" @click="handleMove(1)">移动</a-button>
<a-button style="margin-left: 10px" type="primary">导出</a-button>
}, <a-button style="margin-left: 10px" type="primary">导出模版</a-button>
{ <a-button style="margin-left: 10px" type="primary">导入</a-button>
icon: 'ant-design:exclamation-circle-outlined', <a-button style="margin-left: 10px" type="primary" @click="handleNewFolder"
>新建文件夹</a-button
>
<a-button style="margin-left: 10px" type="primary" @click="handleNewFile"
>新建文件</a-button
>
</div>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'bx:rename',
tooltip: '重命名',
onClick: resetName.bind(null, record),
},
{
icon: 'tdesign:folder-move',
tooltip: '移动',
onClick: handleMove.bind(null, 1),
},
{
icon: 'material-symbols-light:delete-outline',
tooltip: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null),
}, },
{ },
icon: 'ant-design:ellipsis-outlined', ]"
}, />
]" </template>
</template>
<template #toolbar>
<a-input
style="width: 200px; margin-right: auto"
placeholder="输入关键字搜索"
allowClear
/> />
</template> </template>
</template> </BasicTable>
</div>
<template #toolbar> <MoveFile @register="registerMoveFile" />
<a-input style="width: 200px; margin-right: auto" placeholder="输入关键字搜索" allowClear /> <AddFile @register="registerAddFile" />
<a-button type="primary">复制到</a-button> <Rename @register="registerRename" />
<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>
<a-button type="primary">新建文件</a-button>
</template>
</BasicTable>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, computed } from 'vue'; import { reactive, computed, ref } from 'vue';
import {BasicTable, TableAction, useTable} from '@/components/Table'; import { BasicTable, TableAction, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import DeptTree from './DeptTree.vue'; import DeptTree from './DeptTree.vue';
import { ref } from 'vue'; import { tableList } from './mock';
import { tableList } from './mock'; import { columns } from './mainBody.data';
import { columns } from './mainBody.data'; import editAuditRulesModal from './editAuditRulesModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import EditAuditRulesModal from "./editAuditRulesModal.vue"; import { useModal } from '@/components/Modal';
import MoveFile from './moveFile.vue';
defineOptions({ name: 'AccountManagement' }); import AddFile from './addFile.vue';
import Rename from './renameModal.vue';
import Icon from '@/components/Icon/Icon.vue';
const isSpecificDeptSelected = computed(() => {
return [23, 24, 25].includes(selectedDeptId.value); defineOptions({ name: 'AccountManagement' });
});
const isSpecificDeptSelected = computed(() => {
return [23, 24, 25].includes(selectedDeptId.value);
// 选中的部门ID });
const selectedDeptId = ref<string | null>(null); const { createMessage, createConfirm } = useMessage();
const searchInfo = reactive<Recordable>({}); const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
const [ const [registerAddFile, { openModal: openAddFileModal }] = useModal();
registerTable, const [registerRename, { openModal: openRenameModal }] = useModal();
{ },
] = useTable({ // 选中的部门ID
const selectedDeptId = ref<string | null>(null);
api: async (params) => {
console.log('tableList', tableList); const searchInfo = reactive<Recordable>({});
const response = { const [registerTable, {}] = useTable({
pageNu: '1', api: async (params) => {
pageSize: '10', console.log('tableList', tableList);
pages: '1', const response = {
total: tableList.length, pageNu: '1',
code: '', pageSize: '10',
message: '', pages: '1',
data: tableList, total: tableList.length,
}; code: '',
message: '',
return { ...response }; data: tableList,
}, };
rowKey: 'businessId',
return { ...response };
},
columns, rowKey: 'businessId',
formConfig: {
labelWidth: 10, columns,
autoSubmitOnEnter: true, formConfig: {
labelWidth: 10,
}, autoSubmitOnEnter: true,
rowSelection: true, },
useSearchForm: false, rowSelection: true,
showIndexColumn: false, useSearchForm: false,
showTableSetting: false, showIndexColumn: false,
bordered: true, showTableSetting: false,
handleSearchInfoFn(info) { bordered: true,
console.log('handleSearchInfoFn', info); handleSearchInfoFn(info) {
return info; console.log('handleSearchInfoFn', info);
}, return info;
actionColumn: { },
actionColumn: {
width: 170, width: 170,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
}, },
}); });
function handleDeleteIds() {
// 处理选择节点事件 createConfirm({
const handleSelect = (deptId) => { iconType: 'warning',
selectedDeptId.value = deptId; title: '删除',
content: '确定要删除吗？',
console.log('选择节点selectedDeptId:', deptId); onOk: async () => {
} createMessage.success('删除成功');
},
});
}
/** 移动按钮*/
function handleMove(isMove) {
openMoveFileModal(true, {
isMove: isMove,
});
}
function handleDelete() {
createMessage.success('删除成功!');
}
function handleNewFolder(isBucket) {
openAddFileModal(true, {
isBucket: isBucket,
title: '新建文件夹',
});
}
function handleNewFile(isBucket) {
openAddFileModal(true, {
isBucket: isBucket,
title: '新建文件',
});
}
function resetName(record) {
openRenameModal(true, {
name: record.name,
title: '重命名',
});
}
// 处理选择节点事件
const handleSelect = (deptId) => {
selectedDeptId.value = deptId;
console.log('选择节点selectedDeptId:', deptId);
};
</script> </script>
src/views/scriptDevelopment/selfServiceTableCreation/mainBody.data.ts
View file @ 7e711a75
import {BasicColumn, FormSchema} from '@/components/Table'; import { BasicColumn, FormSchema } from '@/components/Table';
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
...@@ -8,7 +6,6 @@ export const columns: BasicColumn[] = [ ...@@ -8,7 +6,6 @@ export const columns: BasicColumn[] = [
dataIndex: 'name', dataIndex: 'name',
width: 150, width: 150,
sorter: true, sorter: true,
}, },
{ {
title: '数据库', title: '数据库',
...@@ -40,7 +37,6 @@ export const columns: BasicColumn[] = [ ...@@ -40,7 +37,6 @@ export const columns: BasicColumn[] = [
width: 120, width: 120,
sorter: true, sorter: true,
}, },
]; ];
export const fieldConfiguration: BasicColumn[] = [ export const fieldConfiguration: BasicColumn[] = [
...@@ -48,8 +44,7 @@ export const fieldConfiguration: BasicColumn[] = [ ...@@ -48,8 +44,7 @@ export const fieldConfiguration: BasicColumn[] = [
title: '排序', title: '排序',
dataIndex: 'sort', dataIndex: 'sort',
width: 50, width: 50,
slots:{ customRender:'sort'} slots: { customRender: 'sort' },
}, },
{ {
title: '字段中文名', title: '字段中文名',
...@@ -102,10 +97,8 @@ export const fieldConfiguration: BasicColumn[] = [ ...@@ -102,10 +97,8 @@ export const fieldConfiguration: BasicColumn[] = [
dataIndex: 'nonEmpty', dataIndex: 'nonEmpty',
width: 100, width: 100,
editComponent: 'Checkbox', editComponent: 'Checkbox',
slots:{ customRender:'nonEmpty'} slots: { customRender: 'nonEmpty' },
}, },
]; ];
export const personSchemaTwo: FormSchema[] = [ export const personSchemaTwo: FormSchema[] = [
...@@ -131,7 +124,6 @@ export const personSchemaTwo: FormSchema[] = [ ...@@ -131,7 +124,6 @@ export const personSchemaTwo: FormSchema[] = [
label: '范围分区', label: '范围分区',
value: '2', value: '2',
}, },
], ],
}, },
}, },
...@@ -168,7 +160,6 @@ export const personSchemaTwo: FormSchema[] = [ ...@@ -168,7 +160,6 @@ export const personSchemaTwo: FormSchema[] = [
{ {
label: 'varchar', label: 'varchar',
value: '2', value: '2',
}, },
], ],
}, },
...@@ -207,7 +198,6 @@ export const personSchemaTwo: FormSchema[] = [ ...@@ -207,7 +198,6 @@ export const personSchemaTwo: FormSchema[] = [
{ {
label: 'varchar', label: 'varchar',
value: '2', value: '2',
}, },
], ],
}, },
...@@ -221,23 +211,19 @@ export const personSchemaTwo: FormSchema[] = [ ...@@ -221,23 +211,19 @@ export const personSchemaTwo: FormSchema[] = [
field: 'partitionKeyDeletion', field: 'partitionKeyDeletion',
slot: 'delete', slot: 'delete',
}, },
];
]
export const personSchema: FormSchema[] = [ export const personSchema: FormSchema[] = [
{ {
field: 'tableConfiguration', field: 'tableConfiguration',
slot: 'tableConfiguration', slot: 'tableConfiguration',
colProps: { lg: 24, md: 24 },
}, },
{ {
field: 'disclosure', field: 'disclosure',
component: 'RadioGroup', component: 'RadioGroup',
label: '表所有权', label: '表所有权',
colProps: { colProps: { lg: 24, md: 24 },
span: 16,
},
// itemProps: { // itemProps: {
// extra: '客户、邀评人默认被分享', // extra: '客户、邀评人默认被分享',
// }, // },
...@@ -251,7 +237,6 @@ export const personSchema: FormSchema[] = [ ...@@ -251,7 +237,6 @@ export const personSchema: FormSchema[] = [
label: '外表', label: '外表',
value: '2', value: '2',
}, },
], ],
}, },
}, },
...@@ -263,14 +248,10 @@ export const personSchema: FormSchema[] = [ ...@@ -263,14 +248,10 @@ export const personSchema: FormSchema[] = [
component: 'Select', component: 'Select',
required: true, required: true,
componentProps: { componentProps: {
options: [ options: [{ label: 'orc', value: '1' }],
{ label: 'orc', value: '1' },
],
}, },
}, },
{ {
field: 'classPath', field: 'classPath',
label: '表中文名', label: '表中文名',
...@@ -284,7 +265,6 @@ export const personSchema: FormSchema[] = [ ...@@ -284,7 +265,6 @@ export const personSchema: FormSchema[] = [
label: '表英文名', label: '表英文名',
colProps: { lg: 11, md: 11 }, colProps: { lg: 11, md: 11 },
component: 'Input', component: 'Input',
}, },
{ {
field: 'operator', field: 'operator',
...@@ -292,19 +272,14 @@ export const personSchema: FormSchema[] = [ ...@@ -292,19 +272,14 @@ export const personSchema: FormSchema[] = [
colProps: { lg: 11, md: 11 }, colProps: { lg: 11, md: 11 },
component: 'Input', component: 'Input',
}, },
]; ];
export const formSchema: FormSchema[] = [ export const formSchema: FormSchema[] = [
{ {
field: 'classPath', field: 'classPath',
label: '表中文名', label: '表中文名',
colProps: { lg: 22, md: 22 }, colProps: { lg: 22, md: 22 },
component: 'Input', component: 'Input',
}, },
{ {
...@@ -313,18 +288,16 @@ export const formSchema: FormSchema[] = [ ...@@ -313,18 +288,16 @@ export const formSchema: FormSchema[] = [
colProps: { lg: 22, md: 22 }, colProps: { lg: 22, md: 22 },
component: 'Input', component: 'Input',
required: true, required: true,
}, },
{ {
field: 'ruleHandling', field: 'ruleHandling',
label: '字段类型', label: '字段类型',
colProps: { lg: 22, md: 22, }, colProps: { lg: 22, md: 22 },
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: [ options: [
{ label: 'String', value: '1' }, { label: 'String', value: '1' },
{ label: 'varchar', value: '2' }, { label: 'varchar', value: '2' },
], ],
}, },
}, },
...@@ -333,8 +306,44 @@ export const formSchema: FormSchema[] = [ ...@@ -333,8 +306,44 @@ export const formSchema: FormSchema[] = [
label: 'not null', label: 'not null',
colProps: { lg: 22, md: 22 }, colProps: { lg: 22, md: 22 },
component: 'Checkbox', component: 'Checkbox',
}, },
];
] export const MoveFormSchema: any[] = [
{
field: 'taskId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'workSpaceName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
];
export const addFileFormSchema: any[] = [
{
field: 'taskId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'workSpaceName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'name',
component: 'Input',
label: '名称',
required: true,
colProps: { lg: 24, md: 24 },
},
];
src/views/scriptDevelopment/selfServiceTableCreation/mock.ts
View file @ 7e711a75
export const tableList: any[] = [ export const tableList: any[] = [
{ {
selectedDeptId: 23, selectedDeptId: 23,
name: 'text', name: 'text',
database: 'customerdb', database: 'customerdb',
tableType:'ORC', tableType: 'ORC',
creationTime: '2019/11/17 10:34:48', creationTime: '2019/11/17 10:34:48',
updateTime: '2019/11/17 11:17:00', updateTime: '2019/11/17 11:17:00',
owner: 'admin', owner: 'admin',
sql: sql:
'CREATE TABLE `customerdb.customertable`{\n' + 'CREATE TABLE `customerdb.customertable`{\n' +
' `ID` STRING COMMENT `用户ID`NOT NULL,\n' + ' `ID` STRING COMMENT `用户ID`NOT NULL,\n' +
' `name` VARCHAR(255) COMMENT `姓名`,\n' + ' `name` VARCHAR(255) COMMENT `姓名`,\n' +
'} COMMENT `客户信息表`\n' + '} COMMENT `客户信息表`\n' +
'PARTITIONED BY RANGE {\n' + 'PARTITIONED BY RANGE {\n' +
' `phone` STRING,\n' + ' `phone` STRING,\n' +
' `email` VARCHAR(255),\n' + ' `email` VARCHAR(255),\n' +
'}\n'+ '}\n' +
'CLUSTERED BY (`ID`) INTO 3 BUCKETS\n'+ 'CLUSTERED BY (`ID`) INTO 3 BUCKETS\n' +
'STORED AS ORC;' 'STORED AS ORC;',
}, },
]; ];
export const fieldConfigurationList: any[] = [ export const fieldConfigurationList: any[] = [
...@@ -31,10 +28,8 @@ export const fieldConfigurationList: any[] = [ ...@@ -31,10 +28,8 @@ export const fieldConfigurationList: any[] = [
tableType: 'string', tableType: 'string',
fieldType: '', fieldType: '',
fieldAccuracy: '', fieldAccuracy: '',
}, },
{ {
fieldChineseName: '姓名', fieldChineseName: '姓名',
fieldEnglishName: 'name', fieldEnglishName: 'name',
tableType: 'varchar', tableType: 'varchar',
...@@ -48,17 +43,44 @@ export const fieldConfigurationList: any[] = [ ...@@ -48,17 +43,44 @@ export const fieldConfigurationList: any[] = [
fieldType: '', fieldType: '',
fieldAccuracy: '', fieldAccuracy: '',
}, },
]; ];
export const treeDataList = [ export const treeDataList = [
{ {
name: '自助建表文件', name: '自助建表文件',
selectedDeptId: 21, selectedDeptId: 21,
children: [ children: [{ selectedDeptId: 23 }],
{selectedDeptId: 23 }, },
];
], export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 100,
parentWorkSpaceName: '自助建表文件',
workSpaceName: '自助建表文件',
parentId: 0,
'code:': '001',
ancestors: '0',
orderNum: 0,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 101,
parentWorkSpaceName: 'test',
workSpaceName: 'test',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
}, },
]; ];
src/views/scriptDevelopment/selfServiceTableCreation/moveFile.vue 0 → 100644
View file @ 7e711a75
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { MoveFormSchema } from './mainBody.data';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from './mock';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const rowData = ref([]);
let isMove = ref(1);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { updateSchema, resetFields }] = useForm({
baseColProps: { span: 24 },
schemas: MoveFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
rowData.value = [];
isMove.value = data.isMove;
// //重置表单数据
resetFields();
setModalProps({ confirmLoading: false });
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'taskId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => (isMove.value === 1 ? '移动' : '复制'));
/**确定按钮*/
async function handleSubmit() {
if (isMove.value === 1) {
createMessage.success('移动成功！');
} else {
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>
src/views/scriptDevelopment/selfServiceTableCreation/renameModal.vue 0 → 100644
View file @ 7e711a75
<template>
<BasicModal
width="30%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicForm, useForm } from '@/components/Form';
import { renameSchema } from '@/views/scriptDevelopment/sqlAudit/mainBody.data';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, resetFields }] = useForm({
schemas: renameSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
const name = data.name;
setFieldsValue({ name });
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
resetFields;
}
onMounted(() => {});
</script>
src/views/scriptDevelopment/selfServiceTableCreation/sqlStatementModal.vue 0 → 100644
View file @ 7e711a75
<template>
<BasicModal
width="55%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { recommendData } from '@/views/metadata/metadataData';
import { BasicForm, useForm } from '@/components/Form';
import { quotationSchema } from '@/views/metadata/data';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: quotationSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields;
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
resetFields;
}
onMounted(() => {
tableData.value = recommendData;
});
</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