Skip to content

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

修改自助建表

parent 1ee13cad
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 870 additions and 562 deletions
src/views/scriptDevelopment/selfServiceTableCreation/DeptTree.vue
View file @ 7e711a75
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<div class="overflow-hidden bg-white">
<BasicTree
ref="treeRef"
toolbar
......@@ -8,7 +8,7 @@
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'selectedDeptId', title: 'name', }"
:fieldNames="{ key: 'selectedDeptId', title: 'name' }"
@select="handleSelect"
/>
</div>
......
src/views/scriptDevelopment/selfServiceTableCreation/addFieldsModal.vue
View file @ 7e711a75
<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" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref} from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './mainBody.data';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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(() => ('添加字段'));
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 {
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './mainBody.data';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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(() => '添加字段');
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%;
height: 400px;
}
.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%;
height: 400px;
}
</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/generateTableBuildingStatementsMode.vue
View file @ 7e711a75
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm">
<template #ruleContentSlot>
<div class="editor">
<CodeEditor
v-model:value="sql"
/>
</div>
</template>
</BasicForm>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div class="flex">
<span style="font-size: 20px; font-weight: bold">SQL</span>
<textarea v-model="sql" style="width: 70%; height: 250px; margin-left: 30px"></textarea>
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref} from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './mainBody.data';
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(() => ('生成建表语句'));
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { tableList } from './mock';
import { useMessage } from '@/hooks/web/useMessage';
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 values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
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>
<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%;
height: 400px;
}
.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%;
height: 400px;
}
</style>
src/views/scriptDevelopment/selfServiceTableCreation/index.vue
View file @ 7e711a75
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex" >
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<editAuditRulesModal
style="background: #cc0000;"
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:form-outlined',
},
{
icon: 'ant-design:exclamation-circle-outlined',
<div class="w-3/4 xl:w-4/5" v-else>
<div style="display: flex; align-items: center; background-color: white">
<Icon icon="majesticons:table-plus-line" :size="40" :color="'#e9a064'" />
<div style="margin-left: 10px">
<span class="title">test</span>
<div>
<span class="path">自助建表文件/test</span>
</div>
</div>
<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>
<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>
<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 #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>
<a-button type="primary">新建文件夹</a-button>
<a-button type="primary">新建文件</a-button>
</template>
</BasicTable>
</BasicTable>
</div>
<MoveFile @register="registerMoveFile" />
<AddFile @register="registerAddFile" />
<Rename @register="registerRename" />
</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: 170,
title: '操作',
dataIndex: 'action',
},
});
// 处理选择节点事件
const handleSelect = (deptId) => {
selectedDeptId.value = deptId;
console.log('选择节点selectedDeptId:', deptId);
}
import { reactive, computed, ref } from 'vue';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import DeptTree from './DeptTree.vue';
import { tableList } from './mock';
import { columns } from './mainBody.data';
import editAuditRulesModal from './editAuditRulesModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import MoveFile from './moveFile.vue';
import AddFile from './addFile.vue';
import Rename from './renameModal.vue';
import Icon from '@/components/Icon/Icon.vue';
defineOptions({ name: 'AccountManagement' });
const isSpecificDeptSelected = computed(() => {
return [23, 24, 25].includes(selectedDeptId.value);
});
const { createMessage, createConfirm } = useMessage();
const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
const [registerAddFile, { openModal: openAddFileModal }] = useModal();
const [registerRename, { openModal: openRenameModal }] = useModal();
// 选中的部门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: 170,
title: '操作',
dataIndex: 'action',
},
});
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '删除',
content: '确定要删除吗？',
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>
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[] = [
{
......@@ -8,7 +6,6 @@ export const columns: BasicColumn[] = [
dataIndex: 'name',
width: 150,
sorter: true,
},
{
title: '数据库',
......@@ -40,7 +37,6 @@ export const columns: BasicColumn[] = [
width: 120,
sorter: true,
},
];
export const fieldConfiguration: BasicColumn[] = [
......@@ -48,8 +44,7 @@ export const fieldConfiguration: BasicColumn[] = [
title: '排序',
dataIndex: 'sort',
width: 50,
slots:{ customRender:'sort'}
slots: { customRender: 'sort' },
},
{
title: '字段中文名',
......@@ -102,10 +97,8 @@ export const fieldConfiguration: BasicColumn[] = [
dataIndex: 'nonEmpty',
width: 100,
editComponent: 'Checkbox',
slots:{ customRender:'nonEmpty'}
slots: { customRender: 'nonEmpty' },
},
];
export const personSchemaTwo: FormSchema[] = [
......@@ -131,7 +124,6 @@ export const personSchemaTwo: FormSchema[] = [
label: '范围分区',
value: '2',
},
],
},
},
......@@ -168,7 +160,6 @@ export const personSchemaTwo: FormSchema[] = [
{
label: 'varchar',
value: '2',
},
],
},
......@@ -207,7 +198,6 @@ export const personSchemaTwo: FormSchema[] = [
{
label: 'varchar',
value: '2',
},
],
},
......@@ -221,23 +211,19 @@ export const personSchemaTwo: FormSchema[] = [
field: 'partitionKeyDeletion',
slot: 'delete',
},
]
];
export const personSchema: FormSchema[] = [
{
field: 'tableConfiguration',
slot: 'tableConfiguration',
colProps: { lg: 24, md: 24 },
},
{
field: 'disclosure',
component: 'RadioGroup',
label: '表所有权',
colProps: {
span: 16,
},
colProps: { lg: 24, md: 24 },
// itemProps: {
// extra: '客户、邀评人默认被分享',
// },
......@@ -251,7 +237,6 @@ export const personSchema: FormSchema[] = [
label: '外表',
value: '2',
},
],
},
},
......@@ -263,14 +248,10 @@ export const personSchema: FormSchema[] = [
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'orc', value: '1' },
],
options: [{ label: 'orc', value: '1' }],
},
},
{
field: 'classPath',
label: '表中文名',
......@@ -284,7 +265,6 @@ export const personSchema: FormSchema[] = [
label: '表英文名',
colProps: { lg: 11, md: 11 },
component: 'Input',
},
{
field: 'operator',
......@@ -292,19 +272,14 @@ export const personSchema: FormSchema[] = [
colProps: { lg: 11, md: 11 },
component: 'Input',
},
];
export const formSchema: FormSchema[] = [
{
field: 'classPath',
label: '表中文名',
colProps: { lg: 22, md: 22 },
component: 'Input',
},
{
......@@ -313,18 +288,16 @@ export const formSchema: FormSchema[] = [
colProps: { lg: 22, md: 22 },
component: 'Input',
required: true,
},
{
field: 'ruleHandling',
label: '字段类型',
colProps: { lg: 22, md: 22, },
colProps: { lg: 22, md: 22 },
component: 'Select',
componentProps: {
options: [
{ label: 'String', value: '1' },
{ label: 'varchar', value: '2' },
],
},
},
......@@ -333,8 +306,44 @@ export const formSchema: FormSchema[] = [
label: 'not null',
colProps: { lg: 22, md: 22 },
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[] = [
{
selectedDeptId: 23,
name: 'text',
database: 'customerdb',
tableType:'ORC',
tableType: 'ORC',
creationTime: '2019/11/17 10:34:48',
updateTime: '2019/11/17 11:17:00',
owner: 'admin',
sql:
'CREATE TABLE `customerdb.customertable`{\n' +
' `ID` STRING COMMENT `用户ID`NOT NULL,\n' +
' `name` VARCHAR(255) COMMENT `姓名`,\n' +
'} COMMENT `客户信息表`\n' +
'PARTITIONED BY RANGE {\n' +
' `phone` STRING,\n' +
' `email` VARCHAR(255),\n' +
'}\n'+
'CLUSTERED BY (`ID`) INTO 3 BUCKETS\n'+
'STORED AS ORC;'
'CREATE TABLE `customerdb.customertable`{\n' +
' `ID` STRING COMMENT `用户ID`NOT NULL,\n' +
' `name` VARCHAR(255) COMMENT `姓名`,\n' +
'} COMMENT `客户信息表`\n' +
'PARTITIONED BY RANGE {\n' +
' `phone` STRING,\n' +
' `email` VARCHAR(255),\n' +
'}\n' +
'CLUSTERED BY (`ID`) INTO 3 BUCKETS\n' +
'STORED AS ORC;',
},
];
export const fieldConfigurationList: any[] = [
......@@ -31,10 +28,8 @@ export const fieldConfigurationList: any[] = [
tableType: 'string',
fieldType: '',
fieldAccuracy: '',
},
{
fieldChineseName: '姓名',
fieldEnglishName: 'name',
tableType: 'varchar',
......@@ -48,17 +43,44 @@ export const fieldConfigurationList: any[] = [
fieldType: '',
fieldAccuracy: '',
},
];
export const treeDataList = [
{
name: '自助建表文件',
selectedDeptId: 21,
children: [
{selectedDeptId: 23 },
],
children: [{ 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