🔨 执行模板页面.
This commit is contained in:
lijiahangmax
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const $vue.moduleConst: AppRouteRecordRaw = {
|
||||
name: '${vue.moduleEntityFirstLower}Module',
|
||||
path: '/${vue.moduleEntityFirstLower}-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -22,7 +22,6 @@ export default function setupPermissionGuard(router: Router) {
|
||||
if (access && to.meta.locale === undefined && menuStore.menuFetched) {
|
||||
to.meta = to.matched[to.matched.length - 1].meta;
|
||||
}
|
||||
|
||||
if (access) {
|
||||
// 正常跳转
|
||||
next();
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const ASSET_AUDIT: AppRouteRecordRaw = {
|
||||
name: 'assetAuditModule',
|
||||
path: '/asset-audit-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const ASSET: AppRouteRecordRaw = {
|
||||
name: 'assetModule',
|
||||
path: '/asset-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const DASHBOARD: AppRouteRecordRaw = {
|
||||
name: 'dashboard',
|
||||
path: '/dashboard',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const EXEC: AppRouteRecordRaw = {
|
||||
name: 'execModule',
|
||||
path: '/exec-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { FULL_LAYOUT } from '../base';
|
||||
|
||||
const HOST: AppRouteRecordRaw = {
|
||||
name: 'hostModule',
|
||||
path: '/host-module',
|
||||
component: FULL_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const SYSTEM: AppRouteRecordRaw = {
|
||||
name: 'systemModule',
|
||||
path: '/system-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
|
||||
|
||||
const USER: AppRouteRecordRaw = {
|
||||
name: 'userModule',
|
||||
path: '/user-module',
|
||||
component: DEFAULT_LAYOUT,
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
:title="title"
|
||||
:width="430"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@cancel="handleClose">
|
||||
<a-spin class="full" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="right"
|
||||
:style="{ width: '380px' }"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
:rules="formRules">
|
||||
<!-- 名称 -->
|
||||
<a-form-item field="name" label="名称">
|
||||
<a-input v-model="formModel.name"
|
||||
placeholder="请输入名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 命令 -->
|
||||
<a-form-item field="command" label="命令">
|
||||
<a-input v-model="formModel.command"
|
||||
placeholder="请输入命令"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 超时时间秒 0不超时 -->
|
||||
<a-form-item field="timeout" label="超时时间秒 0不超时">
|
||||
<a-input-number v-model="formModel.timeout"
|
||||
placeholder="请输入超时时间秒 0不超时"
|
||||
hide-button />
|
||||
</a-form-item>
|
||||
<!-- 参数 -->
|
||||
<a-form-item field="parameter" label="参数">
|
||||
<a-input v-model="formModel.parameter"
|
||||
placeholder="请输入参数"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'execTemplateFormDrawer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ExecTemplateUpdateRequest } from '@/api/exec/exec-template';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import formRules from '../types/form.rules';
|
||||
import {} from '../types/const';
|
||||
import { createExecTemplate, updateExecTemplate } from '@/api/exec/exec-template';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const title = ref<string>();
|
||||
const isAddHandle = ref<boolean>(true);
|
||||
|
||||
const defaultForm = (): ExecTemplateUpdateRequest => {
|
||||
return {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
command: undefined,
|
||||
timeout: undefined,
|
||||
parameter: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const formRef = ref<any>();
|
||||
const formModel = ref<ExecTemplateUpdateRequest>({});
|
||||
|
||||
const emits = defineEmits(['added', 'updated']);
|
||||
|
||||
// 打开新增
|
||||
const openAdd = () => {
|
||||
title.value = '添加执行模板';
|
||||
isAddHandle.value = true;
|
||||
renderForm({ ...defaultForm() });
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 打开修改
|
||||
const openUpdate = (record: any) => {
|
||||
title.value = '修改执行模板';
|
||||
isAddHandle.value = false;
|
||||
renderForm({ ...defaultForm(), ...record });
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 渲染表单
|
||||
const renderForm = (record: any) => {
|
||||
formModel.value = Object.assign({}, record);
|
||||
};
|
||||
|
||||
defineExpose({ openAdd, openUpdate });
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 验证参数
|
||||
const error = await formRef.value.validate();
|
||||
if (error) {
|
||||
return false;
|
||||
}
|
||||
if (isAddHandle.value) {
|
||||
// 新增
|
||||
await createExecTemplate(formModel.value);
|
||||
Message.success('创建成功');
|
||||
emits('added');
|
||||
} else {
|
||||
// 修改
|
||||
await updateExecTemplate(formModel.value);
|
||||
Message.success('修改成功');
|
||||
emits('updated');
|
||||
}
|
||||
// 清空
|
||||
handlerClear();
|
||||
} catch (e) {
|
||||
return false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<query-header :model="formModel"
|
||||
label-align="left"
|
||||
@submit="fetchTableData"
|
||||
@reset="fetchTableData"
|
||||
@keyup.enter="() => fetchTableData()">
|
||||
<!-- id -->
|
||||
<a-form-item field="id" label="id" label-col-flex="50px">
|
||||
<a-input-number v-model="formModel.id"
|
||||
placeholder="请输入id"
|
||||
allow-clear
|
||||
hide-button />
|
||||
</a-form-item>
|
||||
<!-- 名称 -->
|
||||
<a-form-item field="name" label="名称" label-col-flex="50px">
|
||||
<a-input v-model="formModel.name"
|
||||
placeholder="请输入名称"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 命令 -->
|
||||
<a-form-item field="command" label="命令" label-col-flex="50px">
|
||||
<a-input v-model="formModel.command"
|
||||
placeholder="请输入命令"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</query-header>
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧操作 -->
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
执行模板列表
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧操作 -->
|
||||
<div class="table-right-bar-handle">
|
||||
<a-space>
|
||||
<!-- 新增 -->
|
||||
<a-button v-permission="['asset:exec-template:create']"
|
||||
type="primary"
|
||||
@click="emits('openAdd')">
|
||||
新增
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
ref="tableRef"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 修改 -->
|
||||
<a-button v-permission="['asset:exec-template:update']"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="emits('openUpdate', record)">
|
||||
修改
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['asset:exec-template:delete']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'execTemplateTable'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ExecTemplateQueryRequest, ExecTemplateQueryResponse } from '@/api/exec/exec-template';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { deleteExecTemplate, getExecTemplatePage } from '@/api/exec/exec-template';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import columns from '../types/table.columns';
|
||||
import {} from '../types/const';
|
||||
import { usePagination } from '@/types/table';
|
||||
|
||||
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||
|
||||
const tableRenderData = ref<ExecTemplateQueryResponse[]>([]);
|
||||
|
||||
const pagination = usePagination();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const formModel = reactive<ExecTemplateQueryRequest>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
command: undefined,
|
||||
});
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: {
|
||||
id: number
|
||||
}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteExecTemplate(id);
|
||||
Message.success('删除成功');
|
||||
// 重新加载数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加后回调
|
||||
const addedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
// 更新后回调
|
||||
const updatedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addedCallback, updatedCallback
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: ExecTemplateQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getExecTemplatePage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
47
orion-ops-ui/src/views/exec/exec-template/index.vue
Normal file
47
orion-ops-ui/src/views/exec/exec-template/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="layout-container" v-if="render">
|
||||
<!-- 列表-表格 -->
|
||||
<exec-template-table ref="table"
|
||||
@openAdd="() => drawer.openAdd()"
|
||||
@openUpdate="(e) => drawer.openUpdate(e)" />
|
||||
<!-- 添加修改模态框 -->
|
||||
<exec-template-form-drawer ref="drawer"
|
||||
@added="modalAddCallback"
|
||||
@updated="modalUpdateCallback" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'execTemplate'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import ExecTemplateTable from './components/exec-template-table.vue';
|
||||
import ExecTemplateFormDrawer from './components/exec-template-form-drawer.vue';
|
||||
|
||||
const render = ref(false);
|
||||
const table = ref();
|
||||
const drawer = ref();
|
||||
|
||||
// 添加回调
|
||||
const modalAddCallback = () => {
|
||||
table.value.addedCallback();
|
||||
};
|
||||
|
||||
// 修改回调
|
||||
const modalUpdateCallback = () => {
|
||||
table.value.updatedCallback();
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
render.value = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { FieldRule } from '@arco-design/web-vue';
|
||||
|
||||
export const name = [{
|
||||
required: true,
|
||||
message: '请输入名称'
|
||||
}, {
|
||||
maxLength: 64,
|
||||
message: '名称长度不能大于64位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const command = [{
|
||||
required: true,
|
||||
message: '请输入命令'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const timeout = [{
|
||||
required: true,
|
||||
message: '请输入超时时间秒 0不超时'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const parameter = [{
|
||||
required: true,
|
||||
message: '请输入参数'
|
||||
}] as FieldRule[];
|
||||
|
||||
export default {
|
||||
name,
|
||||
command,
|
||||
timeout,
|
||||
parameter,
|
||||
} as Record<string, FieldRule | FieldRule[]>;
|
||||
@@ -0,0 +1,60 @@
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { dateFormat } from '@/utils';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
slotName: 'id',
|
||||
width: 70,
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
}, {
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
slotName: 'name',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '命令',
|
||||
dataIndex: 'command',
|
||||
slotName: 'command',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '超时时间',
|
||||
dataIndex: 'timeout',
|
||||
slotName: 'timeout',
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '参数',
|
||||
dataIndex: 'parameter',
|
||||
slotName: 'parameter',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
slotName: 'updateTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return dateFormat(new Date(record.updateTime));
|
||||
},
|
||||
}, {
|
||||
title: '修改人',
|
||||
dataIndex: 'updater',
|
||||
slotName: 'updater',
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
Reference in New Issue
Block a user