Commit 2edab1e1 authored by baiyinhao's avatar baiyinhao

修改

parent 1b9556d2
<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>
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,
},
];
<template> <template>
<div> <div>
<tabs v-model:value="activeKey" @change="handleTabChange" style="margin-left: 2%"> <tabs v-model:value="activeKey" @change="handleTabChange" style="margin-left: 2%">
<Tabs.TabPane key="1" tab="我发起的事项"> <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="我的待办事项">
<!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 --> <!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 -->
<BasicTable @register="registerTable2"> <BasicTable @register="registerTable2">
<template #toolbar> <template #toolbar>
...@@ -38,7 +17,7 @@ ...@@ -38,7 +17,7 @@
:actions="[ :actions="[
{ {
icon: 'clarity:search-line', icon: 'clarity:search-line',
label: '查看详情', tooltip: '查看详情',
onClick: handleViewtab2.bind(null, record), onClick: handleViewtab2.bind(null, record),
}, },
// { // {
...@@ -62,6 +41,33 @@ ...@@ -62,6 +41,33 @@
</template> </template>
</BasicTable> </BasicTable>
</Tabs.TabPane> </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="我的已办事项"> <Tabs.TabPane key="3" tab="我的已办事项">
<!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 --> <!-- 未解决问题:原型截图上无法看出在哪里显示通知已读状态 -->
<BasicTable @register="registerTable3"> <BasicTable @register="registerTable3">
...@@ -78,7 +84,7 @@ ...@@ -78,7 +84,7 @@
:actions="[ :actions="[
{ {
icon: 'clarity:search-line', icon: 'clarity:search-line',
label: '查看详情', tooltip: '查看详情',
onClick: handleViewtab3.bind(null, record), onClick: handleViewtab3.bind(null, record),
}, },
// { // {
...@@ -136,6 +142,7 @@ ...@@ -136,6 +142,7 @@
import { Tabs, Descriptions, Alert, Modal } from 'ant-design-vue'; import { Tabs, Descriptions, Alert, Modal } from 'ant-design-vue';
import { tableListtab1, tableListtab2, tableListtab3 } from './mock'; import { tableListtab1, tableListtab2, tableListtab3 } from './mock';
import { useGo } from '@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import { t } from '@/hooks/web/useI18n';
defineOptions({ name: 'RoleManagement' }); defineOptions({ name: 'RoleManagement' });
const filterStore = useFilterStore(); const filterStore = useFilterStore();
...@@ -166,16 +173,14 @@ ...@@ -166,16 +173,14 @@
return { ...response }; return { ...response };
}, },
columns, columns,
rowSelection: {
type: 'checkbox',
},
formConfig: { formConfig: {
labelWidth: 10, labelWidth: 10,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: false,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
actionColumn: { actionColumn: {
...@@ -205,16 +210,14 @@ ...@@ -205,16 +210,14 @@
return { ...response }; return { ...response };
}, },
columns: columnstab2, columns: columnstab2,
rowSelection: {
type: 'checkbox',
},
formConfig: { formConfig: {
labelWidth: 10, labelWidth: 10,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: false,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
actionColumn: { actionColumn: {
...@@ -244,16 +247,14 @@ ...@@ -244,16 +247,14 @@
return { ...response }; return { ...response };
}, },
columns: columnstab3, columns: columnstab3,
rowSelection: {
type: 'checkbox',
},
formConfig: { formConfig: {
labelWidth: 10, labelWidth: 10,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: false,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
actionColumn: { actionColumn: {
...@@ -305,6 +306,11 @@ ...@@ -305,6 +306,11 @@
record, record,
}); });
} }
/**查看详情按钮tab1*/
function handleViewtab1(record: Recordable) {
const businessId = record.businessId;
go('/processCenter/detailsTab1');
}
/**查看详情按钮tab2*/ /**查看详情按钮tab2*/
function handleViewtab2(record: Recordable) { function handleViewtab2(record: Recordable) {
......
...@@ -8,7 +8,7 @@ export const tableListtab1: any[] = [ ...@@ -8,7 +8,7 @@ export const tableListtab1: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '未通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -17,7 +17,7 @@ export const tableListtab1: any[] = [ ...@@ -17,7 +17,7 @@ export const tableListtab1: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题2', title: '申请标题2',
...@@ -26,7 +26,7 @@ export const tableListtab1: any[] = [ ...@@ -26,7 +26,7 @@ export const tableListtab1: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -35,7 +35,7 @@ export const tableListtab1: any[] = [ ...@@ -35,7 +35,7 @@ export const tableListtab1: any[] = [
deptName: '机构2', deptName: '机构2',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '未通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -44,7 +44,7 @@ export const tableListtab1: any[] = [ ...@@ -44,7 +44,7 @@ export const tableListtab1: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -53,7 +53,7 @@ export const tableListtab1: any[] = [ ...@@ -53,7 +53,7 @@ export const tableListtab1: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
]; ];
export const tableListtab2: any[] = [ export const tableListtab2: any[] = [
...@@ -64,7 +64,7 @@ export const tableListtab2: any[] = [ ...@@ -64,7 +64,7 @@ export const tableListtab2: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -73,7 +73,7 @@ export const tableListtab2: any[] = [ ...@@ -73,7 +73,7 @@ export const tableListtab2: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
{ {
title: '申请标题2', title: '申请标题2',
...@@ -82,7 +82,7 @@ export const tableListtab2: any[] = [ ...@@ -82,7 +82,7 @@ export const tableListtab2: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -91,7 +91,7 @@ export const tableListtab2: any[] = [ ...@@ -91,7 +91,7 @@ export const tableListtab2: any[] = [
deptName: '机构2', deptName: '机构2',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -100,7 +100,7 @@ export const tableListtab2: any[] = [ ...@@ -100,7 +100,7 @@ export const tableListtab2: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -109,7 +109,7 @@ export const tableListtab2: any[] = [ ...@@ -109,7 +109,7 @@ export const tableListtab2: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '待审批',
}, },
]; ];
export const tableListtab3: any[] = [ export const tableListtab3: any[] = [
...@@ -120,7 +120,7 @@ export const tableListtab3: any[] = [ ...@@ -120,7 +120,7 @@ export const tableListtab3: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -129,7 +129,7 @@ export const tableListtab3: any[] = [ ...@@ -129,7 +129,7 @@ export const tableListtab3: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题2', title: '申请标题2',
...@@ -138,7 +138,7 @@ export const tableListtab3: any[] = [ ...@@ -138,7 +138,7 @@ export const tableListtab3: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -147,7 +147,7 @@ export const tableListtab3: any[] = [ ...@@ -147,7 +147,7 @@ export const tableListtab3: any[] = [
deptName: '机构2', deptName: '机构2',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '未通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -156,7 +156,7 @@ export const tableListtab3: any[] = [ ...@@ -156,7 +156,7 @@ export const tableListtab3: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '通过',
}, },
{ {
title: '申请标题1', title: '申请标题1',
...@@ -165,6 +165,6 @@ export const tableListtab3: any[] = [ ...@@ -165,6 +165,6 @@ export const tableListtab3: any[] = [
deptName: '机构1', deptName: '机构1',
type: '申请类型1', type: '申请类型1',
createTime: '2024-10-25 18:04:05', createTime: '2024-10-25 18:04:05',
status: '状态1', status: '未通过',
}, },
]; ];
...@@ -580,8 +580,8 @@ export const formSchemaEdit: FormSchema[] = [ ...@@ -580,8 +580,8 @@ export const formSchemaEdit: FormSchema[] = [
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: [ options: [
{ label: '申请状态1', value: '1' }, { label: '通过', value: '1' },
{ label: '申请状态2', value: '0' }, { label: '未通过', value: '0' },
], ],
disabled: true, disabled: true,
}, },
......
...@@ -94,6 +94,31 @@ export const formSchema: FormSchema[] = [ ...@@ -94,6 +94,31 @@ export const formSchema: FormSchema[] = [
defaultValue: 'mysql', 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[] = [ export const recommendColumns: BasicColumn[] = [
{ {
title: '参数名', title: '参数名',
......
<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>
<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>
...@@ -66,26 +66,23 @@ ...@@ -66,26 +66,23 @@
</Tooltip> </Tooltip>
<!-- 保存--> <!-- 保存-->
<Tooltip placement="top" title="保存"> <!-- <Tooltip placement="top" title="保存">
<a-button type="primary" style="margin-right: 10px" @click="handleSave"> <a-button type="primary" style="margin-right: 10px" @click="handleSave">
<Icon icon="majesticons:save-line" :size="20" /> <Icon icon="majesticons:save-line" :size="20" />
</a-button> </a-button>
</Tooltip> </Tooltip>
<Tooltip <Tooltip placement="top" :title="layout === 'single' ? '版本对比' : '结束对比'">
placement="top"
:title="layout === 'single' ? '切换到对比布局' : '切换到单文件布局'"
>
<a-button type="primary" style="margin-right: 10px" @click="toggleLayout"> <a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
<Icon <Icon
:icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'" :icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
:size="20" :size="20"
/> />
</a-button> </a-button>
</Tooltip> </Tooltip> -->
</div> </div>
</template> </template>
</BasicForm> </BasicForm>
<div> <div style="width: 100%; margin-top: 20px">
<div v-if="layout === 'single'"> <div v-if="layout === 'single'">
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" /> <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div> </div>
...@@ -94,7 +91,7 @@ ...@@ -94,7 +91,7 @@
<div <div
class="editor-left" class="editor-left"
ref="editorLeft" ref="editorLeft"
style="display: inline-block; width: 50%" style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false" :scrollbar="false"
> >
<CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" /> <CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" />
...@@ -102,7 +99,7 @@ ...@@ -102,7 +99,7 @@
<div <div
class="editor-right" class="editor-right"
ref="editorRight" ref="editorRight"
style="display: inline-block; width: 50%" style="flex: 1; width: 50%; overflow: hidden"
:scrollbar="false" :scrollbar="false"
> >
<CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" /> <CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" />
...@@ -256,4 +253,15 @@ ...@@ -256,4 +253,15 @@
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
.editor-wrapper {
display: flex;
justify-content: space-between;
}
.editor-left,
.editor-right {
flex: 1;
overflow: hidden;
}
</style> </style>
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { versionColumns, versionSchema } from './version.data'; import { versionColumns, versionSchema } from './version.data';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { router } from '@/router';
const title = ref(); const title = ref();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
...@@ -67,10 +68,15 @@ ...@@ -67,10 +68,15 @@
}); });
function handleDetail() { function handleDetail() {
console.log('查看详情'); console.log('查看详情');
closeModal(); router.push({
path: '/scriptDevelopment/shellDevelopment/shellExecute/versionDetail',
});
} }
function modEdit() { function modEdit() {
console.log('版本对比'); console.log('版本对比');
router.push({
path: '/scriptDevelopment/shellDevelopment/shellExecute/versionCompare',
});
} }
function handleVersionRollback() { function handleVersionRollback() {
message.success('回退成功'); message.success('回退成功');
......
...@@ -368,14 +368,14 @@ export const previewData: any[] = [ ...@@ -368,14 +368,14 @@ export const previewData: any[] = [
}, },
]; ];
export const jsonData = ` export const jsonData = `
#!/bin/bash #!/bin/bash
# 自动化任务伪代码示例:文件备份、日志清理和服务状态检查 # 自动化任务伪代码示例:文件备份、日志清理和服务状态检查
# 定义变量 # 定义变量
BACKUP_DIR="/backup" # 备份目录 BACKUP_DIR="/backup" # 备份目录
SOURCE_DIR="/data" # 源文件目录 SOURCE_DIR="/data" # 源文件目录
LOG_FILE="/var/log/task.log" # 日志文件 LOG_FILE="/var/log/task.log" # 日志文件
DATE=$(date +%Y-%m-%d) # 当前日期 DATE=$(date +%Y-%m-%d) # 当前日期
# 1. 检查备份目录是否存在,不存在则创建 # 1. 检查备份目录是否存在,不存在则创建
if [ ! -d "$BACKUP_DIR" ]; then if [ ! -d "$BACKUP_DIR" ]; then
......
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