optim page

This commit is contained in:
bwcx_jzy 2022-02-23 09:03:11 +08:00
parent d96f1065bd
commit d2209af5a0
No known key found for this signature in database
GPG Key ID: 5E48E9372088B9E5
10 changed files with 152 additions and 170 deletions

View File

@ -1,23 +1,8 @@
<template>
<div class="full-content">
<div ref="filter" class="filter">
<a-space>
<a-select v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="node in nodeList" :key="node.id">{{ node.name }}</a-select-option>
</a-select>
<a-select v-model="listQuery.outGivingId" allowClear placeholder="分发项目" class="search-input-item">
<a-select-option v-for="dispatch in dispatchList" :key="dispatch.id">{{ dispatch.name }}</a-select-option>
</a-select>
<a-select v-model="listQuery.status" allowClear placeholder="请选择状态" class="search-input-item">
<a-select-option v-for="(item, key) in dispatchStatusMap" :key="key" :value="key">{{ item }}</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
<!-- <div ref="filter" class="filter"> -->
<!-- <a-button type="primary" @click="handleFilter">刷新</a-button> -->
</div>
<!-- </div> -->
<!-- 数据表格 -->
<a-table
size="middle"
@ -28,6 +13,23 @@
bordered
:rowKey="(record, index) => index"
>
<template slot="title">
<a-space>
<a-select v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="node in nodeList" :key="node.id">{{ node.name }}</a-select-option>
</a-select>
<a-select v-model="listQuery.outGivingId" allowClear placeholder="分发项目" class="search-input-item">
<a-select-option v-for="dispatch in dispatchList" :key="dispatch.id">{{ dispatch.name }}</a-select-option>
</a-select>
<a-select v-model="listQuery.status" allowClear placeholder="请选择状态" class="search-input-item">
<a-select-option v-for="(item, key) in dispatchStatusMap" :key="key" :value="key">{{ item }}</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
</template>
<a-tooltip slot="outGivingId" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
@ -180,7 +182,4 @@ export default {
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
</style>

View File

@ -402,11 +402,11 @@ export default {
this.$store.dispatch("toggleFullScreenFlag").then((flag) => {
if (flag) {
this.$notification.success({
message: "页面全屏,高度 100%",
message: "页面内容自动撑开出现滚动条",
});
} else {
this.$notification.success({
message: "页面内容自动撑开出现滚动条",
message: "页面全屏,高度 100%",
});
}
});

View File

@ -34,9 +34,9 @@
<a-tooltip slot="name" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
<a-switch slot="status" slot-scope="text" :checked="text" disabled checked-children="开启" un-checked-children="关闭" />
<a-switch slot="autoRestart" slot-scope="text" :checked="text" disabled checked-children="" un-checked-children="" />
<a-switch slot="alarm" slot-scope="text" :checked="text" disabled checked-children="报警中" un-checked-children="未报警" />
<a-switch slot="status" size="small" slot-scope="text" :checked="text" disabled checked-children="开启" un-checked-children="关闭" />
<a-switch slot="autoRestart" size="small" slot-scope="text" :checked="text" disabled checked-children="" un-checked-children="" />
<a-switch slot="alarm" size="small" slot-scope="text" :checked="text" disabled checked-children="报警中" un-checked-children="未报警" />
<a-tooltip slot="parent" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
@ -160,7 +160,7 @@ export default {
},
width: 180,
},
{ title: "操作", dataIndex: "operation", ellipsis: true, scopedSlots: { customRender: "operation" }, width: 200 },
{ title: "操作", dataIndex: "operation", ellipsis: true, scopedSlots: { customRender: "operation" }, width: 120 },
],
rules: {
name: [{ required: true, message: "Please input monitor name", trigger: "blur" }],

View File

@ -1,24 +1,6 @@
<template>
<div class="full-content">
<div ref="filter" class="filter">
<a-space>
<a-select v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="(nodeName, key) in nodeMap" :key="key">{{ nodeName }}</a-select-option>
</a-select>
<a-select v-model="listQuery.status" allowClear placeholder="报警状态" class="search-input-item">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="0">异常</a-select-option>
</a-select>
<a-select v-model="listQuery.notifyStatus" allowClear placeholder="请选择通知状态" class="search-input-item">
<a-select-option :value="1">成功</a-select-option>
<a-select-option :value="0">失败</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
</div>
<!-- <div ref="filter" class="filter"></div> -->
<!-- 数据表格 -->
<a-table
:data-source="list"
@ -29,6 +11,25 @@
:rowKey="(record, index) => index"
@change="change"
>
<template slot="title">
<a-space>
<a-select v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="(nodeName, key) in nodeMap" :key="key">{{ nodeName }}</a-select-option>
</a-select>
<a-select v-model="listQuery.status" allowClear placeholder="报警状态" class="search-input-item">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="0">异常</a-select-option>
</a-select>
<a-select v-model="listQuery.notifyStatus" allowClear placeholder="请选择通知状态" class="search-input-item">
<a-select-option :value="1">成功</a-select-option>
<a-select-option :value="0">失败</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
</template>
<a-tooltip slot="nodeId" slot-scope="text" placement="topLeft" :title="text">
<span>{{ nodeMap[text] }}</span>
</a-tooltip>
@ -172,8 +173,4 @@ export default {
},
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
</style>
<style scoped></style>

View File

@ -1,20 +1,8 @@
<template>
<div>
<div ref="filter" class="filter">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="监控名称" class="search-input-item" />
<a-select v-model="listQuery.status" allowClear placeholder="开启状态" class="search-input-item">
<a-select-option :value="1">开启</a-select-option>
<a-select-option :value="0">关闭</a-select-option>
</a-select>
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">新增</a-button>
</a-space>
</div>
<div class="full-content">
<!-- 数据表格 -->
<a-table
size="middle"
:data-source="list"
:columns="columns"
:pagination="this.listQuery.total / this.listQuery.limit > 1 ? (this, pagination) : false"
@ -22,6 +10,19 @@
bordered
:rowKey="(record, index) => index"
>
<template slot="title">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="监控名称" class="search-input-item" />
<a-select v-model="listQuery.status" allowClear placeholder="开启状态" class="search-input-item">
<a-select-option :value="1">开启</a-select-option>
<a-select-option :value="0">关闭</a-select-option>
</a-select>
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">新增</a-button>
</a-space>
</template>
<a-tooltip slot="name" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
@ -33,14 +34,14 @@
</a-tooltip>
<template slot="operation" slot-scope="text, record">
<a-space>
<a-button type="primary" @click="handleEdit(record)">编辑</a-button>
<a-button type="danger" @click="handleDelete(record)">删除</a-button>
<a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
<a-button size="small" type="danger" @click="handleDelete(record)">删除</a-button>
</a-space>
</template>
</a-table>
<!-- 编辑区 -->
<a-modal v-model="editOperateMonitorVisible" width="600px" title="编辑监控" @ok="handleEditOperateMonitorOk" :maskClosable="false">
<a-form-model ref="editMonitorForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
<a-modal v-model="editOperateMonitorVisible" width="50vw" title="编辑监控" @ok="handleEditOperateMonitorOk" :maskClosable="false">
<a-form-model ref="editMonitorForm" :rules="rules" :model="temp" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
<a-form-model-item label="监控名称" prop="name">
<a-input v-model="temp.name" placeholder="监控名称" />
</a-form-model-item>
@ -117,9 +118,9 @@ export default {
methodFeatureKeys: [],
editOperateMonitorVisible: false,
columns: [
{ title: "名称", dataIndex: "name", scopedSlots: { customRender: "name" }, width: 150 },
{ title: "开启状态", dataIndex: "status", scopedSlots: { customRender: "status" }, width: 150 },
{ title: "修改人", dataIndex: "modifyUser", scopedSlots: { customRender: "modifyUser" }, width: 120 },
{ title: "名称", dataIndex: "name", scopedSlots: { customRender: "name" } },
{ title: "开启状态", dataIndex: "status", scopedSlots: { customRender: "status" } },
{ title: "修改人", dataIndex: "modifyUser", scopedSlots: { customRender: "modifyUser" } },
{
title: "修改时间",
dataIndex: "modifyTimeMillis",
@ -132,7 +133,7 @@ export default {
},
width: 180,
},
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, width: 200 },
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, width: 120 },
],
rules: {
name: [{ required: true, message: "Please input monitor name", trigger: "blur" }],
@ -354,8 +355,4 @@ export default {
},
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
</style>
<style scoped></style>

View File

@ -1,21 +1,21 @@
<template>
<div class="full-content">
<div ref="filter" class="filter">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="请输入备份名称" class="search-input-item" />
<a-input v-model="listQuery['%version%']" @pressEnter="loadData" placeholder="请输入版本" class="search-input-item" />
<a-select v-model="listQuery.backupType" allowClear placeholder="请选择备份类型" class="search-input-item">
<a-select-option v-for="backupType in backupTypeList" :key="backupType.key">{{ backupType.value }}</a-select-option>
</a-select>
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">创建备份</a-button>
<a-button type="primary" @click="handleSqlUpload">导入备份</a-button>
</a-space>
</div>
<!-- 表格 -->
<a-table :columns="columns" :data-source="list" bordered rowKey="id" @change="changePage" :pagination="this.listQuery.total / this.listQuery.limit > 1 ? (this, pagination) : false">
<a-table size="middle" :columns="columns" :data-source="list" bordered rowKey="id" @change="changePage" :pagination="this.listQuery.total / this.listQuery.limit > 1 ? (this, pagination) : false">
<template slot="title">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="请输入备份名称" class="search-input-item" />
<a-input v-model="listQuery['%version%']" @pressEnter="loadData" placeholder="请输入版本" class="search-input-item" />
<a-select v-model="listQuery.backupType" allowClear placeholder="请选择备份类型" class="search-input-item">
<a-select-option v-for="backupType in backupTypeList" :key="backupType.key">{{ backupType.value }}</a-select-option>
</a-select>
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button :loading="loading" type="primary" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">创建备份</a-button>
<a-button type="primary" @click="handleSqlUpload">导入备份</a-button>
</a-space>
</template>
<a-tooltip slot="name" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
@ -178,7 +178,7 @@ export default {
dataIndex: "operation",
width: 180,
scopedSlots: { customRender: "operation" },
align: "left",
align: "center",
// fixed: "right",
},
],
@ -394,18 +394,4 @@ export default {
},
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
.btn-add {
margin-left: 10px;
margin-right: 0;
}
.successTag {
height: 32px;
line-height: 30px;
}
</style>
<style scoped></style>

View File

@ -33,13 +33,22 @@
</a-form-model-item>
<a-form-model-item label="邮箱账号" prop="from">
<!-- <a-input v-model="temp.from" type="text" placeholder="发送方邮箱账号" /> -->
<a-auto-complete v-model="temp.from" placeholder="发送方邮箱账号" option-label-prop="value" @search="handleFromSearch">
<template slot="dataSource">
<a-select-option v-for="email in fromResult" :key="email">
{{ email }}
</a-select-option>
<a-tooltip>
<template slot="title">
支持配置发送方遵循RFC-822标准 发件人可以是以下形式
<ul>
<li>1. user@xxx.xx</li>
<li>2. name &lt;user@xxx.xx&gt;</li>
</ul>
</template>
</a-auto-complete>
<a-auto-complete v-model="temp.from" placeholder="发送方邮箱账号" option-label-prop="value" @search="handleFromSearch">
<template slot="dataSource">
<a-select-option v-for="email in fromResult" :key="email">
{{ email }}
</a-select-option>
</template>
</a-auto-complete>
</a-tooltip>
</a-form-model-item>
<a-form-model-item label="SSL 连接" prop="sslEnable">
<a-switch v-model="temp.sslEnable" checked-children="启用" un-checked-children="停用" />

View File

@ -1,33 +1,34 @@
<template>
<div class="full-content">
<div ref="filter" class="filter">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="工作空间名称" allowClear class="search-input-item" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-tooltip>
<template slot="title">
<ul>
<li>工作空间用于隔离数据,工作空间下面可以有不同数据,不同权限,不同菜单等来实现权限控制</li>
<li>工作空间环境变量用于构建命令相关</li>
</ul>
</template>
<a-icon type="question-circle" theme="filled" />
</a-tooltip>
</a-space>
</div>
<!-- 数据表格 -->
<a-table
:data-source="list"
:columns="columns"
size="middle"
:pagination="this.listQuery.total / this.listQuery.limit > 1 ? (this, pagination) : false"
bordered
@change="changePage"
:rowKey="(record, index) => index"
>
<template slot="title">
<a-space>
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="工作空间名称" allowClear class="search-input-item" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-tooltip>
<template slot="title">
<ul>
<li>工作空间用于隔离数据,工作空间下面可以有不同数据,不同权限,不同菜单等来实现权限控制</li>
<li>工作空间环境变量用于构建命令相关</li>
</ul>
</template>
<a-icon type="question-circle" theme="filled" />
</a-tooltip>
</a-space>
</template>
<a-tooltip slot="description" slot-scope="text" placement="topLeft" :title="text">
<span>{{ text }}</span>
</a-tooltip>
@ -36,9 +37,9 @@
</a-tooltip>
<template slot="operation" slot-scope="text, record">
<a-space>
<a-button type="primary" @click="handleEdit(record)">编辑</a-button>
<a-button type="primary" @click="viewEnvVar(record)">变量</a-button>
<a-button type="danger" @click="handleDelete(record)">删除</a-button>
<a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
<a-button size="small" type="primary" @click="viewEnvVar(record)">变量</a-button>
<a-button size="small" type="danger" @click="handleDelete(record)">删除</a-button>
</a-space>
</template>
</a-table>
@ -68,6 +69,7 @@
<!-- 数据表格 -->
<a-table
:data-source="envVarList"
size="middle"
:loading="envVarLoading"
:columns="envVarColumns"
:pagination="this.envVarListQuery.total / this.envVarListQuery.limit > 1 ? (this, envVarPagination) : false"
@ -86,9 +88,8 @@
</a-tooltip>
<template slot="operation" slot-scope="text, record">
<a-space>
<a-button type="primary" @click="handleEnvEdit(record)">编辑</a-button>
<a-button type="danger" @click="handleEnvDelete(record)">删除</a-button>
<a-button size="small" type="primary" @click="handleEnvEdit(record)">编辑</a-button>
<a-button size="small" type="danger" @click="handleEnvDelete(record)">删除</a-button>
</a-space>
</template>
</a-table>
@ -154,7 +155,7 @@ export default {
sorter: true,
width: 180,
},
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, width: 250 },
{ title: "操作", dataIndex: "operation", align: "center", scopedSlots: { customRender: "operation" }, width: 180 },
],
envVarColumns: [
{ title: "名称", dataIndex: "name", ellipsis: true, scopedSlots: { customRender: "name" } },
@ -173,7 +174,7 @@ export default {
sorter: true,
width: 180,
},
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, width: 200 },
{ title: "操作", dataIndex: "operation", align: "center", scopedSlots: { customRender: "operation" }, width: 120 },
],
//
rules: {
@ -361,8 +362,4 @@ export default {
},
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
</style>
<style scoped></style>

View File

@ -1,25 +1,5 @@
<template>
<div class="full-content">
<div ref="filter" class="filter">
<a-space>
<a-select show-search option-filter-prop="children" v-model="listQuery.userId" allowClear placeholder="请选择操作者" class="search-input-item">
<a-select-option v-for="item in userList" :key="item.id">{{ item.name }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="node in nodeList" :key="node.id">{{ node.name }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.classFeature" allowClear placeholder="请选择功能" class="search-input-item">
<a-select-option v-for="item in classFeature" :key="item.value">{{ item.title }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.methodFeature" allowClear placeholder="请选择操作" class="search-input-item">
<a-select-option v-for="item in methodFeature" :key="item.value">{{ item.title }}</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
</div>
<!-- 数据表格 -->
<a-table
size="middle"
@ -30,6 +10,26 @@
:rowKey="(record, index) => index"
@change="change"
>
<template slot="title">
<a-space>
<a-select show-search option-filter-prop="children" v-model="listQuery.userId" allowClear placeholder="请选择操作者" class="search-input-item">
<a-select-option v-for="item in userList" :key="item.id">{{ item.name }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.nodeId" allowClear placeholder="请选择节点" class="search-input-item">
<a-select-option v-for="node in nodeList" :key="node.id">{{ node.name }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.classFeature" allowClear placeholder="请选择功能" class="search-input-item">
<a-select-option v-for="item in classFeature" :key="item.value">{{ item.title }}</a-select-option>
</a-select>
<a-select show-search option-filter-prop="children" v-model="listQuery.methodFeature" allowClear placeholder="请选择操作" class="search-input-item">
<a-select-option v-for="item in methodFeature" :key="item.value">{{ item.title }}</a-select-option>
</a-select>
<a-range-picker class="search-input-item" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" @change="onchangeTime" />
<a-tooltip title="按住 Ctr 或者 Alt 键点击按钮快速回到第一页">
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
</a-tooltip>
</a-space>
</template>
<a-tooltip slot="nodeId" slot-scope="text" placement="topLeft" :title="nodeMap[text]">
<span>{{ nodeMap[text] }}</span>
</a-tooltip>
@ -212,7 +212,4 @@ export default {
};
</script>
<style scoped>
.filter {
margin-bottom: 10px;
}
</style>

View File

@ -28,7 +28,7 @@ const app = {
const cache = rootGetters.getGuideCache;
cache.fullScreenFlag = !(cache.fullScreenFlag === undefined ? true : cache.fullScreenFlag);
commit("setGuideCache", cache);
resolve(cache.menuMultipleFlag);
resolve(cache.fullScreenFlag);
});
},
// 打开多菜单开关