Skip to content

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

修改SQL开发模块

parent 6a4694ea
Hide whitespace changes
Inline Side-by-side
Showing with 466 additions and 89 deletions
src/views/scriptDevelopment/sqlDevelopment/data.ts
View file @ bed0c4ec
import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
export const columns: BasicColumn[] = [
{
......@@ -109,3 +110,52 @@ export const recommendColumns: BasicColumn[] = [
width: 120,
},
];
export const recordColumns: BasicColumn[] = [
{
title: '执行人',
dataIndex: 'user',
width: 120,
},
{
title: '执行时间',
dataIndex: 'date',
width: 120,
},
{
title: '执行结果',
dataIndex: 'result',
width: 120,
},
{
title: '执行耗时',
dataIndex: 'cost',
width: 120,
},
{
title: '影响行数',
dataIndex: 'log',
width: 120,
},
];
export const refundSchema: DescItem[] = [
{
field: 'result',
label: '执行结果',
},
{
field: 'cost',
label: '执行耗时',
},
{
field: 'user',
label: '执行人',
},
{
field: 'date',
label: '执行时间',
},
{
field: 'log',
label: '影响行数',
},
];
src/views/scriptDevelopment/sqlDevelopment/sqlDevelopmentData.ts
View file @ bed0c4ec
......@@ -389,3 +389,37 @@ export const jsonData = `
) ENGINE=MyISAM AUTO_INCREMENT=103 DEFAULT CHARSET=utf8mb3 ROW_FORMAT=DYNAMIC;
`;
export const cardList: any[] = [
{
title: `CREATE TABLE access_token ( token_id INT U...`,
icon: 'weui:done2-outlined',
percent: 100,
color: 'green',
description: '8行结果',
datetime: '15:22:12 55毫秒',
},
{
title: `) ENGINE=MyISAM AUTO_INCREMENT=10...`,
icon: 'weui:close2-outlined',
percent: 10,
color: 'red',
description: '0行结果',
datetime: '15:27:49 126毫秒',
},
];
export const recordData: any[] = [
{
user: 'admin',
date: '2024-10-24 10:04:04',
result: '成功',
cost: '55毫秒',
log: '8行结果',
},
];
export const refundData = {
user: 'admin',
date: '2024-10-24 10:04:04',
result: '成功',
cost: '55毫秒',
log: '8行结果',
};
src/views/scriptDevelopment/sqlDevelopment/sqlExecute/dataPreviewModal.vue 0 → 100644
View file @ bed0c4ec
<template>
<BasicModal
width="55%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<!-- 下载-->
<a-button type="primary" @click="handleDownload"
><Icon icon="bxs:download" :size="20"
/></a-button>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import Icon from '@/components/Icon/Icon.vue';
import { previewData } from '../sqlDevelopmentData';
import { previewColumns } from '../data';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
tableData.value = [];
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
const [registerTable, { reload }] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
total: previewData.length,
data: previewData,
};
return { ...response };
},
rowKey: 'id',
rowSelection: true,
columns: previewColumns,
showIndexColumn: false,
pagination: false,
formConfig: {
labelWidth: 10,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.res = '';
},
},
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
});
function handleDownload() {
createMessage.success('下载成功');
}
async function handleSubmit() {
closeModal();
}
onMounted(() => {});
</script>
src/views/scriptDevelopment/sqlDevelopment/sqlExecute/executeRecordModal.vue 0 → 100644
View file @ bed0c4ec
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'uil:file-search-alt',
onClick: handleDetail.bind(null),
},
]"
/>
</template>
</template>
</BasicTable>
<recordDetailModal @register="registerDetailModal" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { recordColumns } from '../data';
import { recordData } from '../sqlDevelopmentData';
import recordDetailModal from './recordDetailModal.vue';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const title = ref();
const tableData = ref([]);
const [registerDetailModal, { openModal }] = useModal();
//初始化表单
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: recordColumns,
useSearchForm: false,
showTableSetting: false,
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
showIndexColumn: false,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
}
function handleDetail() {
openModal(true, {
title: '执行记录详情',
});
}
onMounted(() => {
tableData.value = recordData;
});
</script>
src/views/scriptDevelopment/sqlDevelopment/sqlExecute/recordDetailModal.vue 0 → 100644
View file @ bed0c4ec
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<Description
size="middle"
:bordered="false"
:column="3"
:data="refundData"
:schema="refundSchema"
/>
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { jsonData, refundData } from '../sqlDevelopmentData';
import { CodeEditor, MODE } from '@/components/CodeEditor';
import { refundSchema } from '../data';
import Description from '@/components/Description/src/Description.vue';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const title = ref();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
}
onMounted(() => {});
</script>
src/views/scriptDevelopment/sqlDevelopment/sqlExecute/resultModal.vue
View file @ bed0c4ec
<template>
<BasicModal
width="55%"
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicTable @register="registerTable" />
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<div :class="`${prefixCls}__content`">
<List>
<template v-for="item in cardList" :key="item.id">
<List.Item class="list">
<List.Item.Meta>
<template #title>
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
<span class="title">{{ item.title }}</span>
</template>
<template #description>
<div class="description">
{{ item.description }}
</div>
<div class="info">
<div><span>运行时间</span>{{ item.datetime }}</div>
</div>
<div class="progress">
<Progress :percent="item.percent" :color="item.color" status="active" />
</div>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import { recommendColumns } from '@/views/metadata/data';
import { recommendData } from '@/views/metadata/metadataData';
import { Progress, List } from 'ant-design-vue';
import { cardList } from '../sqlDevelopmentData';
import Icon from '@/components/Icon/Icon.vue';
const prefixCls = 'list-basic';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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: recommendColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
}
onMounted(() => {
tableData.value = recommendData;
});
onMounted(() => {});
</script>
<style lang="less" scoped>
.list-basic {
&__top {
padding: 24px;
background-color: @component-background;
text-align: center;
&-col {
&:not(:last-child) {
border-right: 1px dashed @border-color-base;
}
div {
margin-bottom: 12px;
color: @text-color-base;
font-size: 14px;
line-height: 22px;
}
p {
margin: 0;
color: @text-color-base;
font-size: 24px;
line-height: 32px;
}
}
}
&__content {
margin-top: 12px;
padding: 24px;
background-color: @component-background;
.list {
position: relative;
}
.icon {
font-size: 20px !important;
margin-right: 10px;
margin-top: 10px;
}
.extra {
position: absolute;
top: 20px;
right: 15px;
color: @primary-color;
font-weight: normal;
cursor: pointer;
}
.description {
display: inline-block;
width: 40%;
}
.info {
display: inline-block;
width: 30%;
text-align: center;
div {
display: inline-block;
padding: 0 20px;
span {
display: block;
}
}
}
.progress {
display: inline-block;
width: 15%;
vertical-align: top;
}
}
}
</style>
src/views/scriptDevelopment/sqlDevelopment/sqlExecute/sqlExecute.vue
View file @ bed0c4ec
......@@ -11,85 +11,77 @@
<div class="w-3/4 xl:w-4/5" style="padding-top: 20px">
<BasicForm @register="registerForm">
<template #formFooter>
<!-- 新窗口运行-->
<a-button
type="primary"
style="margin-right: 10px; margin-left: 300px"
style="margin-right: 10px; margin-left: 500px"
@click="handleExecute"
>新窗口运行</a-button
>
<a-button type="primary" style="margin-right: 10px" @click="handleExecute">运行</a-button>
<Icon icon="si:play-forward-duotone" :size="20"
/></a-button>
<!-- 运行-->
<a-button type="primary" style="margin-right: 10px" @click="handleExecute"
><Icon icon="si:play-line" :size="20"
/></a-button>
<!-- 执行记录-->
<a-button type="primary" style="margin-right: 10px" @click="handleRecord"
><Icon icon="si:clock-alt-line" :size="20"
/></a-button>
<!-- 提交版本-->
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
>执行记录</a-button
>
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
>提交版本</a-button
>
><Icon icon="majesticons:file-plus-line" :size="20"
/></a-button>
<!-- 版本管理-->
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
>版本管理</a-button
>
><Icon icon="majesticons:file-line" :size="20"
/></a-button>
<!-- 参数配置-->
<a-button type="primary" style="margin-right: 10px" @click="handleOptions"
>参数配置</a-button
>
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit">保存</a-button>
><Icon icon="majesticons:link-circle-line" :size="20"
/></a-button>
<!-- 格式化-->
<a-button type="primary" style="margin-right: 10px" @click="handleChange"
><Icon icon="gg:align-left" :size="20"
/></a-button>
<!-- 保存-->
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
><Icon icon="majesticons:save-line" :size="20"
/></a-button>
</template>
</BasicForm>
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" style="height: 50%" />
<BasicTable @register="registerTable" :searchInfo="searchInfo" style="height: 50%" />
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div>
<optionsModal @register="registerModal" />
<resultModal @register="registerResultModal" />
<PreviewModal @register="registerPreviewModal" />
<RecordModal @register="registerRecordModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { onMounted } from 'vue';
import { PageWrapper } from '@/components/Page';
import GroupTree from '../GroupTree.vue';
import { previewData, jsonData } from '../sqlDevelopmentData';
import { previewColumns, formSchema } from '../data';
import { jsonData } from '../sqlDevelopmentData';
import { formSchema } from '../data';
import { useGo } from '@/hooks/web/usePage';
import { CodeEditor, MODE } from '@/components/CodeEditor';
import { BasicForm, useForm } from '@/components/Form';
import optionsModal from './optionsModal.vue';
import { useModal } from '@/components/Modal';
import resultModal from './resultModal.vue';
import PreviewModal from './dataPreviewModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import Icon from '@/components/Icon/Icon.vue';
import RecordModal from './executeRecordModal.vue';
defineOptions({ name: 'AccountManagement' });
const searchInfo = reactive<Recordable>({});
const { createMessage } = useMessage();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerResultModal, { openModal: openResultModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '数据预览',
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
total: previewData.length,
data: previewData,
};
return { ...response };
},
columns: previewColumns,
showIndexColumn: false,
pagination: false,
formConfig: {
labelWidth: 10,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.res = '';
},
},
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
});
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
const [registerRecordModal, { openModal: openRecordModal }] = useModal();
const [registerForm] = useForm({
labelWidth: 100,
baseColProps: { lg: 6, md: 4 },
......@@ -97,9 +89,10 @@
showActionButtonGroup: false,
});
/** 部门树的select*/
function handleSelect(workSpaceName = '') {
searchInfo.res = workSpaceName;
reload();
function handleSelect() {
openPreviewModal(true, {
title: '数据预览',
});
}
function handleOptions() {
openModal(true, {
......@@ -111,9 +104,17 @@
title: '执行结果',
});
}
function handleRecord() {
openRecordModal(true, {
title: '执行记录',
});
}
function handleSubmit() {
createMessage.success('保存成功');
}
function handleChange() {
createMessage.success('格式化成功');
}
// 页面左侧点击返回链接时的操作
function goBack() {
......
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