Skip to content

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

Merge remote-tracking branch 'origin/master'

parents 64583390 2edab1e1
Show whitespace changes
Inline Side-by-side
Showing with 826 additions and 72 deletions
src/views/processCenter/detailsTab1/index.vue 0 → 100644
View file @ b05e844f
<template>
<page-wrapper title="已办事项" content="" content-class="p-4">
<BasicForm @register="registerForm">
<template #menu="{ model, field }"> </template>
</BasicForm>
<div class="table-container">
<BasicTable @register="registerTable" />
</div>
</page-wrapper>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { viewFormSchematab3, viewFormColumntab3 } from './mock';
// import { BasicTree, TreeItem } from '@/components/Tree';
import { roleDetailApi, roleUpdataApi, addRoleApi } from '@/api/system/role/role';
import { getMenuSelect, getRoleMenuSelected } from '@/api/system/menu/menu';
import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const roleId = ref('');
// const treeData = ref<TreeItem[]>([]);
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 90,
baseColProps: { span: 24 },
schemas: viewFormSchematab3,
showActionButtonGroup: false,
});
//table
const [registerTable, { reload }] = useTable({
columns: viewFormColumntab3,
rowKey: 'key',
showIndexColumn: false,
showTableSetting: false,
bordered: true,
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建通知规则' : '编辑通知规则'));
async function handleSubmit() {
try {
const formData = await validate();
setDrawerProps({ confirmLoading: true });
// 编辑
if (unref(isUpdate)) {
formData.businessId = roleId.value;
roleUpdataApi(formData).then((res) => {
if (res.code === 200) {
createMessage.success('编辑成功');
closeDrawer();
emit('success', {
isUpdate: unref(isUpdate),
values: { ...formData, id: roleId.value },
});
}
});
} else {
//新增
const paramsAdd = {
businessId: formData.businessId,
menuIds: formData.menuIds,
remarks: formData.remarks,
roleKey: formData.roleKey,
roleName: formData.roleName,
roleSort: formData.roleSort,
roleStatus: formData.roleStatus,
};
addRoleApi(paramsAdd).then((res) => {
if (res.code === 200) {
createMessage.success('新增成功');
closeDrawer();
emit('success', {
isUpdate: unref(isUpdate),
values: { ...formData, id: roleId.value },
});
}
});
}
} finally {
setDrawerProps({ confirmLoading: false });
}
}
</script>
src/views/processCenter/detailsTab1/mock.ts 0 → 100644
View file @ b05e844f
import { component } from 'vxe-pc-ui';
export const viewFormSchematab3: any[] = [
{
component: 'Divider',
field: 'divider-linked',
label: '申请信息',
},
{
field: 'applyReason',
component: 'Input',
label: '申请理由',
colProps: {
span: 12,
},
componentProps: {
disabled: true,
},
defaultValue: '申请理由',
},
{
field: 'applyTitle',
component: 'Input',
label: '申请标题',
colProps: {
span: 12,
},
componentProps: {
disabled: true,
},
defaultValue: '申请标题',
},
{
field: 'applyUser',
component: 'Input',
label: '申请人',
colProps: {
span: 12,
},
componentProps: {
disabled: true,
},
defaultValue: '申请人',
},
{
field: 'applyOrg',
component: 'Input',
label: '所属机构',
colProps: {
span: 12,
},
componentProps: {
disabled: true,
},
defaultValue: '所属机构',
},
{
field: 'applyTime',
component: 'Input',
label: '申请时间',
colProps: {
span: 12,
},
componentProps: {
disabled: true,
},
defaultValue: '申请时间',
},
{
field: 'applyStatus',
component: 'Select',
label: '申请状态',
colProps: {
span: 12,
},
componentProps: {
defaultValue: '0',
options: [
{ label: '待审批', value: '0' },
{ label: '已通过', value: '1' },
{ label: '已驳回', value: '2' },
],
disabled: true,
},
},
{
component: 'Divider',
field: 'divider-linked',
label: '资源信息',
},
];
export const viewFormColumntab3: any[] = [
{
field: 'resourceName',
title: '资源信息',
width: 100,
},
{
field: 'applyStatus',
title: '处理状态',
width: 100,
},
{
field: 'detail',
title: '详情',
width: 100,
},
];
src/views/processCenter/index.vue
View file @ b05e844f
<template>
<div>
<tabs v-model:value="activeKey" @change="handleTabChange" style="margin-left: 2%">
<Tabs.TabPane key="1" tab="我发起的事项">
<BasicTable @register="registerTable" class="p-2">
<!-- <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
<a-button type="primary" @click="handleExport"> 导出 </a-button>
</template> -->
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '审批',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="我的待办事项">
<Tabs.TabPane key="1" tab="我的待办事项">
<!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 -->
<BasicTable @register="registerTable2">
<template #toolbar>
......@@ -38,7 +17,7 @@
:actions="[
{
icon: 'clarity:search-line',
label: '查看详情',
tooltip: '查看详情',
onClick: handleViewtab2.bind(null, record),
},
// {
......@@ -62,6 +41,33 @@
</template>
</BasicTable>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="我发起的事项">
<BasicTable @register="registerTable">
<!-- <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
<a-button type="primary" @click="handleExport"> 导出 </a-button>
</template> -->
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:search-line',
tooltip: '查看详情',
onClick: handleViewtab1.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
tooltip: '审批',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</Tabs.TabPane>
<Tabs.TabPane key="3" tab="我的已办事项">
<!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 -->
<BasicTable @register="registerTable3">
......@@ -78,7 +84,7 @@
:actions="[
{
icon: 'clarity:search-line',
label: '查看详情',
tooltip: '查看详情',
onClick: handleViewtab3.bind(null, record),
},
// {
......@@ -136,6 +142,7 @@
import { Tabs, Descriptions, Alert, Modal } from 'ant-design-vue';
import { tableListtab1, tableListtab2, tableListtab3 } from './mock';
import { useGo } from '@/hooks/web/usePage';
import { t } from '@/hooks/web/useI18n';
defineOptions({ name: 'RoleManagement' });
const filterStore = useFilterStore();
......@@ -166,16 +173,14 @@
return { ...response };
},
columns,
rowSelection: {
type: 'checkbox',
},
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
......@@ -205,16 +210,14 @@
return { ...response };
},
columns: columnstab2,
rowSelection: {
type: 'checkbox',
},
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
......@@ -244,16 +247,14 @@
return { ...response };
},
columns: columnstab3,
rowSelection: {
type: 'checkbox',
},
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
......@@ -305,6 +306,11 @@
record,
});
}
/**查看详情按钮tab1*/
function handleViewtab1(record: Recordable) {
const businessId = record.businessId;
go('/processCenter/detailsTab1');
}
/**查看详情按钮tab2*/
function handleViewtab2(record: Recordable) {
......
src/views/processCenter/mock.ts
View file @ b05e844f
......@@ -8,7 +8,7 @@ export const tableListtab1: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '未通过',
},
{
title: '申请标题1',
......@@ -17,7 +17,7 @@ export const tableListtab1: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题2',
......@@ -26,7 +26,7 @@ export const tableListtab1: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题1',
......@@ -35,7 +35,7 @@ export const tableListtab1: any[] = [
deptName: '机构2',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '未通过',
},
{
title: '申请标题1',
......@@ -44,7 +44,7 @@ export const tableListtab1: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题1',
......@@ -53,7 +53,7 @@ export const tableListtab1: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
];
export const tableListtab2: any[] = [
......@@ -64,7 +64,7 @@ export const tableListtab2: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
{
title: '申请标题1',
......@@ -73,7 +73,7 @@ export const tableListtab2: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
{
title: '申请标题2',
......@@ -82,7 +82,7 @@ export const tableListtab2: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
{
title: '申请标题1',
......@@ -91,7 +91,7 @@ export const tableListtab2: any[] = [
deptName: '机构2',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
{
title: '申请标题1',
......@@ -100,7 +100,7 @@ export const tableListtab2: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
{
title: '申请标题1',
......@@ -109,7 +109,7 @@ export const tableListtab2: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '待审批',
},
];
export const tableListtab3: any[] = [
......@@ -120,7 +120,7 @@ export const tableListtab3: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题1',
......@@ -129,7 +129,7 @@ export const tableListtab3: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题2',
......@@ -138,7 +138,7 @@ export const tableListtab3: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题1',
......@@ -147,7 +147,7 @@ export const tableListtab3: any[] = [
deptName: '机构2',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '未通过',
},
{
title: '申请标题1',
......@@ -156,7 +156,7 @@ export const tableListtab3: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '通过',
},
{
title: '申请标题1',
......@@ -165,6 +165,6 @@ export const tableListtab3: any[] = [
deptName: '机构1',
type: '申请类型1',
createTime: '2024-10-25 18:04:05',
status: '状态1',
status: '未通过',
},
];
src/views/processCenter/processCenter.data.ts
View file @ b05e844f
......@@ -580,8 +580,8 @@ export const formSchemaEdit: FormSchema[] = [
component: 'Select',
componentProps: {
options: [
{ label: '申请状态1', value: '1' },
{ label: '申请状态2', value: '0' },
{ label: '通过', value: '1' },
{ label: '未通过', value: '0' },
],
disabled: true,
},
......
src/views/scriptDevelopment/shellDevelopment/data.ts
View file @ b05e844f
......@@ -94,6 +94,31 @@ export const formSchema: FormSchema[] = [
defaultValue: 'mysql',
},
];
export const CompareFormSchema: FormSchema[] = [
{
field: 'name',
label: '文件版本',
component: 'Select',
colProps: { span: 8 },
componentProps: {
options: [
{
label: 'V1',
value: 'V1',
},
{
label: 'V2',
value: 'V2',
},
{
label: 'V3',
value: 'V3',
},
],
},
defaultValue: 'V1',
},
];
export const recommendColumns: BasicColumn[] = [
{
title: '参数名',
......
src/views/scriptDevelopment/shellDevelopment/shellExecute/VersionCompare.vue 0 → 100644
View file @ b05e844f
<template>
<PageWrapper
title="shell文件版本对比"
dense
contentFullHeight
fixedHeight
contentClass="flex"
@back="goBack"
>
<!-- <GroupTree @select="handleSelect" class="w-1/4 xl:w-1/5" /> -->
<div class="w-full xl:w-full" style="padding-top: 20px">
<BasicForm @register="registerForm">
<template #formFooter>
<div style="display: flex; justify-content: space-between; margin-left: 500px">
<!-- 新窗口运行-->
<!-- <Tooltip placement="top" title="新窗口运行">
<a-button
type="primary"
style="margin-right: 10px; margin-left: 500px"
@click="handleExecute"
>
<Icon icon="si:play-forward-duotone" :size="20" />
</a-button>
</Tooltip> -->
<!-- 运行-->
<!-- <Tooltip placement="top" title="运行">
<a-button type="primary" style="margin-right: 10px" @click="handleExecute">
<Icon icon="si:play-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 执行记录-->
<!-- <Tooltip placement="top" title="执行记录">
<a-button type="primary" style="margin-right: 10px" @click="handleRecord">
<Icon icon="si:clock-alt-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 提交版本-->
<!-- <Tooltip placement="top" title="提交版本">
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
<Icon icon="majesticons:cloud-upload-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 版本管理-->
<!-- <Tooltip placement="top" title="版本管理">
<a-button type="primary" style="margin-right: 10px" @click="handleVersion">
<Icon icon="majesticons:file-search-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 参数配置-->
<!-- <Tooltip placement="top" title="参数配置">
<a-button type="primary" style="margin-right: 10px" @click="handleOptions">
<Icon icon="majesticons:link-circle-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 格式化-->
<!-- <Tooltip placement="top" title="格式化">
<a-button type="primary" style="margin-right: 10px" @click="handleChange">
<Icon icon="gg:align-left" :size="20" />
</a-button>
</Tooltip> -->
<!-- 保存-->
<Tooltip placement="top" title="保存">
<a-button type="primary" style="margin-right: 10px" @click="handleSave">
<Icon icon="majesticons:save-line" :size="20" />
</a-button>
</Tooltip>
<!-- <Tooltip placement="top" :title="layout === 'single' ? '版本对比' : '结束对比'">
<a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
<Icon
:icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
:size="20"
/>
</a-button>
</Tooltip> -->
</div>
</template>
</BasicForm>
<div style="width: 100%; margin-top: 20px">
<div class="editor-container">
<div class="editor-wrapper" style="height: 600px">
<div
class="editor-left"
ref="editorLeft"
style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false"
>
<CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" />
</div>
<div
class="editor-right"
ref="editorRight"
style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false"
>
<CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" />
</div>
</div>
</div>
</div>
</div>
<optionsModal @register="registerModal" />
<resultModal @register="registerResultModal" />
<PreviewModal @register="registerPreviewModal" />
<RecordModal @register="registerRecordModal" />
<SubmitModal @register="registerSubmitModal" />
<versionManagementModal @register="registerVersionManagementModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue';
import { onMounted, ref, nextTick, watch } from 'vue';
import { PageWrapper } from '@/components/Page';
import GroupTree from '../GroupTree.vue';
import { jsonData } from '../sqlDevelopmentData';
import { CompareFormSchema } 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';
import SubmitModal from './handleSubmit/submitModal.vue';
import { schema } from '@/views/dataIntegration/taskOM/taskOM.data';
import versionManagementModal from './versionManagementModal.vue';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const go = useGo();
const layout = ref('single');
const jsonDataLeft = jsonData;
const jsonDataRight = jsonData;
const editorLeft = ref<HTMLElement | null>(null);
const editorRight = ref<HTMLElement | null>(null);
const toggleLayout = () => {
layout.value = layout.value === 'single' ? 'double' : 'single';
};
const [registerModal, { openModal }] = useModal();
const [registerSubmitModal, { openModal: openSubmitModal }] = useModal();
const [registerResultModal, { openModal: openResultModal }] = useModal();
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
const [registerRecordModal, { openModal: openRecordModal }] = useModal();
const [registerForm] = useForm({
labelWidth: 100,
baseColProps: { lg: 6, md: 4 },
schemas: CompareFormSchema,
showActionButtonGroup: false,
});
/** 部门树的select*/
function handleSelect() {
openPreviewModal(true, {
title: '数据预览',
});
}
function handleOptions() {
openModal(true, {
title: '参数配置',
});
}
function handleExecute() {
openResultModal(true, {
title: '执行结果',
});
}
function handleRecord() {
openRecordModal(true, {
title: '执行记录',
});
}
//提交版本按钮
function handleSubmit() {
openSubmitModal(true, {
title: '提交版本',
});
}
//编辑版本
function handleVersion() {
openVersionManagementModal(true, {
title: '版本管理',
});
}
function handleChange() {
createMessage.success('格式化成功');
}
//保存按钮
function handleSave() {
createMessage.success('保存成功');
}
// 页面左侧点击返回链接时的操作
function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
go('/scriptDevelopment/shellDevelopment/index');
}
//同步滚动
const handleScroll = () => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.scrollTop = editorRight.value.scrollTop;
editorLeft.value.scrollLeft = editorRight.value.scrollLeft;
}
};
watch([editorLeft, editorRight], ([newEditorLeft, newEditorRight]) => {
if (newEditorLeft && newEditorRight) {
newEditorLeft.addEventListener('scroll', handleScroll);
newEditorRight.addEventListener('scroll', handleScroll);
} else {
if (editorLeft.value) {
editorLeft.value.removeEventListener('scroll', handleScroll);
}
if (editorRight.value) {
editorRight.value.removeEventListener('scroll', handleScroll);
}
}
});
onMounted(async () => {
await nextTick(() => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.addEventListener('scroll', handleScroll);
editorRight.value.addEventListener('scroll', handleScroll);
}
});
});
</script>
<style scoped>
.editor-container {
display: flex;
}
.editor-left {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.editor-right {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.editor-wrapper {
display: flex;
justify-content: space-between;
}
.editor-left,
.editor-right {
flex: 1;
overflow: hidden;
}
</style>
src/views/scriptDevelopment/shellDevelopment/shellExecute/VersionDetail.vue 0 → 100644
View file @ b05e844f
<template>
<PageWrapper
title="shell文件查看详情"
dense
contentFullHeight
fixedHeight
contentClass="flex"
@back="goBack"
>
<!-- <GroupTree @select="handleSelect" class="w-1/4 xl:w-1/5" /> -->
<div class="w-full xl:w-full" style="padding-top: 20px">
<BasicForm @register="registerForm">
<template #formFooter>
<div style="display: flex; justify-content: space-between; margin-left: 500px">
<!-- 新窗口运行-->
<!-- <Tooltip placement="top" title="新窗口运行">
<a-button
type="primary"
style="margin-right: 10px; margin-left: 500px"
@click="handleExecute"
>
<Icon icon="si:play-forward-duotone" :size="20" />
</a-button>
</Tooltip> -->
<!-- 运行-->
<!-- <Tooltip placement="top" title="运行">
<a-button type="primary" style="margin-right: 10px" @click="handleExecute">
<Icon icon="si:play-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 执行记录-->
<!-- <Tooltip placement="top" title="执行记录">
<a-button type="primary" style="margin-right: 10px" @click="handleRecord">
<Icon icon="si:clock-alt-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 提交版本-->
<!-- <Tooltip placement="top" title="提交版本">
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
<Icon icon="majesticons:cloud-upload-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 版本管理-->
<!-- <Tooltip placement="top" title="版本管理">
<a-button type="primary" style="margin-right: 10px" @click="handleVersion">
<Icon icon="majesticons:file-search-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 参数配置-->
<!-- <Tooltip placement="top" title="参数配置">
<a-button type="primary" style="margin-right: 10px" @click="handleOptions">
<Icon icon="majesticons:link-circle-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- 格式化-->
<!-- <Tooltip placement="top" title="格式化">
<a-button type="primary" style="margin-right: 10px" @click="handleChange">
<Icon icon="gg:align-left" :size="20" />
</a-button>
</Tooltip> -->
<!-- 保存-->
<!-- <Tooltip placement="top" title="保存">
<a-button type="primary" style="margin-right: 10px" @click="handleSave">
<Icon icon="majesticons:save-line" :size="20" />
</a-button>
</Tooltip> -->
<!-- <Tooltip placement="top" :title="layout === 'single' ? '版本对比' : '结束对比'">
<a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
<Icon
:icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
:size="20"
/>
</a-button>
</Tooltip> -->
</div>
</template>
</BasicForm>
<div style="width: 100%; margin-top: 20px">
<div class="editor-container">
<div>
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div>
</div>
</div>
</div>
<optionsModal @register="registerModal" />
<resultModal @register="registerResultModal" />
<PreviewModal @register="registerPreviewModal" />
<RecordModal @register="registerRecordModal" />
<SubmitModal @register="registerSubmitModal" />
<versionManagementModal @register="registerVersionManagementModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue';
import { onMounted, ref, nextTick, watch } from 'vue';
import { PageWrapper } from '@/components/Page';
import GroupTree from '../GroupTree.vue';
import { jsonData } from '../sqlDevelopmentData';
import { CompareFormSchema } 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';
import SubmitModal from './handleSubmit/submitModal.vue';
import { schema } from '@/views/dataIntegration/taskOM/taskOM.data';
import versionManagementModal from './versionManagementModal.vue';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const go = useGo();
const layout = ref('single');
const jsonDataLeft = jsonData;
const jsonDataRight = jsonData;
const editorLeft = ref<HTMLElement | null>(null);
const editorRight = ref<HTMLElement | null>(null);
const toggleLayout = () => {
layout.value = layout.value === 'single' ? 'double' : 'single';
};
const [registerModal, { openModal }] = useModal();
const [registerSubmitModal, { openModal: openSubmitModal }] = useModal();
const [registerResultModal, { openModal: openResultModal }] = useModal();
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
const [registerRecordModal, { openModal: openRecordModal }] = useModal();
const [registerForm] = useForm({
labelWidth: 100,
baseColProps: { lg: 6, md: 4 },
schemas: CompareFormSchema,
showActionButtonGroup: false,
disabled: true,
});
/** 部门树的select*/
function handleSelect() {
openPreviewModal(true, {
title: '数据预览',
});
}
function handleOptions() {
openModal(true, {
title: '参数配置',
});
}
function handleExecute() {
openResultModal(true, {
title: '执行结果',
});
}
function handleRecord() {
openRecordModal(true, {
title: '执行记录',
});
}
//提交版本按钮
function handleSubmit() {
openSubmitModal(true, {
title: '提交版本',
});
}
//编辑版本
function handleVersion() {
openVersionManagementModal(true, {
title: '版本管理',
});
}
function handleChange() {
createMessage.success('格式化成功');
}
//保存按钮
function handleSave() {
createMessage.success('保存成功');
}
// 页面左侧点击返回链接时的操作
function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
go('/scriptDevelopment/shellDevelopment/index');
}
//同步滚动
const handleScroll = () => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.scrollTop = editorRight.value.scrollTop;
editorLeft.value.scrollLeft = editorRight.value.scrollLeft;
}
};
watch([editorLeft, editorRight], ([newEditorLeft, newEditorRight]) => {
if (newEditorLeft && newEditorRight) {
newEditorLeft.addEventListener('scroll', handleScroll);
newEditorRight.addEventListener('scroll', handleScroll);
} else {
if (editorLeft.value) {
editorLeft.value.removeEventListener('scroll', handleScroll);
}
if (editorRight.value) {
editorRight.value.removeEventListener('scroll', handleScroll);
}
}
});
onMounted(async () => {
await nextTick(() => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.addEventListener('scroll', handleScroll);
editorRight.value.addEventListener('scroll', handleScroll);
}
});
});
</script>
<style scoped>
.editor-container {
display: flex;
}
.editor-left {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.editor-right {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.editor-wrapper {
display: flex;
justify-content: space-between;
}
.editor-left,
.editor-right {
flex: 1;
overflow: hidden;
}
</style>
src/views/scriptDevelopment/shellDevelopment/shellExecute/shellExecute.vue
View file @ b05e844f
......@@ -66,26 +66,23 @@
</Tooltip>
<!-- 保存-->
<Tooltip placement="top" title="保存">
<!-- <Tooltip placement="top" title="保存">
<a-button type="primary" style="margin-right: 10px" @click="handleSave">
<Icon icon="majesticons:save-line" :size="20" />
</a-button>
</Tooltip>
<Tooltip
placement="top"
:title="layout === 'single' ? '切换到对比布局' : '切换到单文件布局'"
>
<Tooltip placement="top" :title="layout === 'single' ? '版本对比' : '结束对比'">
<a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
<Icon
:icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
:size="20"
/>
</a-button>
</Tooltip>
</Tooltip> -->
</div>
</template>
</BasicForm>
<div>
<div style="width: 100%; margin-top: 20px">
<div v-if="layout === 'single'">
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div>
......@@ -94,7 +91,7 @@
<div
class="editor-left"
ref="editorLeft"
style="display: inline-block; width: 50%"
style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false"
>
<CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" />
......@@ -102,7 +99,7 @@
<div
class="editor-right"
ref="editorRight"
style="display: inline-block; width: 50%"
style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false"
>
<CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" />
......@@ -256,4 +253,15 @@
height: 100%;
overflow-y: hidden;
}
.editor-wrapper {
display: flex;
justify-content: space-between;
}
.editor-left,
.editor-right {
flex: 1;
overflow: hidden;
}
</style>
src/views/scriptDevelopment/shellDevelopment/shellExecute/versionManagementModal.vue
View file @ b05e844f
......@@ -48,6 +48,7 @@
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { versionColumns, versionSchema } from './version.data';
import { message } from 'ant-design-vue';
import { router } from '@/router';
const title = ref();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
......@@ -67,10 +68,15 @@
});
function handleDetail() {
console.log('查看详情');
closeModal();
router.push({
path: '/scriptDevelopment/shellDevelopment/shellExecute/versionDetail',
});
}
function modEdit() {
console.log('版本对比');
router.push({
path: '/scriptDevelopment/shellDevelopment/shellExecute/versionCompare',
});
}
function handleVersionRollback() {
message.success('回退成功');
......
src/views/scriptDevelopment/shellDevelopment/sqlDevelopmentData.ts
View file @ b05e844f
......@@ -368,8 +368,8 @@ export const previewData: any[] = [
},
];
export const jsonData = `
#!/bin/bash
# 自动化任务伪代码示例：文件备份、日志清理和服务状态检查
#!/bin/bash
# 自动化任务伪代码示例：文件备份、日志清理和服务状态检查
# 定义变量
BACKUP_DIR="/backup" # 备份目录
......
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