TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 16:00:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 代码重构、分页数据组件支持多选

Browse Source
This commit is contained in:
meilin.huang
2023-07-01 14:34:42 +08:00
parent d423572e01
commit ce32fc7f2c
81 changed files with 937 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
mayfly_go_web/src/components/pagetable/PageTable.vue
View File

@@ -72,7 +72,8 @@
动态表头显示，根据表格每条配置项中的show字段来决定改列是否显示或者隐藏
columns 就是我们表格配置的数组对象
-->
<el-popover placement="bottom" title="表格配置" :width="200" trigger="click">
<el-popover placement="bottom" title="表格配置"
popper-style="max-height: 550px; overflow: auto; max-width: 450px" width="auto" trigger="click">
<div v-for="(item, index) in props.columns" :key="index">
<el-checkbox v-model="item.show" :label="item.label" :true-label="true" :false-label="false" />
</div>
@@ -84,15 +85,10 @@
</div>
</div>
<el-table v-bind="$attrs" max-height="700" @current-change="choose" :data="props.data" border
highlight-current-row show-overflow-tooltip>
<el-table-column v-if="props.showChooseColumn" label="选择" align="center" width="53px">
<template #default="scope">
<el-radio v-model="state.chooseId" :label="scope.row.id">
<i></i>
</el-radio>
</template>
</el-table-column>
<el-table v-bind="$attrs" max-height="700" @selection-change="handleSelectionChange" :data="props.data" border
highlight-current-row show-overflow-tooltip v-loading="loadingData">
<el-table-column v-if="props.showSelection" type="selection" width="40" />
<template v-for="(item, index) in columns">
<el-table-column :key="index" v-if="item.show" :prop="item.prop" :label="item.label" :fixed="item.fixed"
@@ -126,22 +122,17 @@
import { toRefs, watch, reactive, onMounted } from 'vue';
import { TableColumn, TableQuery } from './index';
const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:chooseData', 'pageChange'])
const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:selectionData', 'pageChange'])
const props = defineProps({
// 是否显示选择列
showChooseColumn: {
showSelection: {
type: Boolean,
default: false,
},
// 选择列绑定的主键key字段名
chooseDataIdKey: {
type: String,
default: "id"
},
// 当前选择的数据
chooseData: {
type: Object
selectionData: {
type: Array<any>
},
// 列信息
columns: {
@@ -190,27 +181,20 @@ const state = reactive({
isOpenMoreQuery: false,
defaultQueryCount: 2, // 默认显示的查询参数个数
queryForm: {} as any,
loadingData: false,
})
const {
isOpenMoreQuery,
defaultQueryCount,
queryForm,
loadingData,
} = toRefs(state)
watch(() => props.queryForm, (newValue: any) => {
state.queryForm = newValue
})
watch(() => props.chooseData, (newValue: any) => {
state.chooseData = newValue
if (newValue) {
state.chooseId = state.chooseData[props.chooseDataIdKey]
} else {
state.chooseId = 0;
}
})
watch(() => props.pageNum, (newValue: any) => {
state.pageNum = newValue
})
@@ -227,6 +211,7 @@ watch(() => props.data, (newValue: any) => {
}
})
}
state.loadingData = false;
})
onMounted(() => {
@@ -235,38 +220,44 @@ onMounted(() => {
state.queryForm = props.queryForm;
})
// 处理选中了列表中的某一条数据
const choose = (item: any) => {
if (!item || !props.showChooseColumn) {
return;
}
state.chooseData = item;
state.chooseId = item[props.chooseDataIdKey]
emit('update:chooseData', state.chooseData)
};
const handleSelectionChange = (val: any) => {
emit('update:selectionData', val);
}
const handlePageChange = () => {
emit('update:pageNum', state.pageNum)
emit("pageChange")
execQuery();
}
const handleSizeChange = () => {
emit('update:pageSize', state.pageSize)
emit("pageChange")
emit('update:pageSize', state.pageSize);
execQuery();
}
const queryData = () => {
// 触发重新调用查询接口即可
emit("pageChange")
execQuery();
}
const reset = () => {
// 触发重新调用查询接口即可
state.queryForm = {};
emit('update:queryForm', state.queryForm)
execQuery();
}
const execQuery = () => {
emit("pageChange")
}
/**
* 是否正在加载数据
*/
const loading = (loading: boolean) => {
state.loadingData = loading;
}
defineExpose({ loading })
</script>
<style scoped lang="scss">
.page-table {

2
mayfly_go_web/src/views/login/component/AccountLogin.vue
View File

@@ -61,7 +61,7 @@
<el-dialog title="OTP校验" v-model="otpDialog.visible" @close="loading.signIn = false" :close-on-click-modal="false"
width="350px" :destroy-on-close="true">
<el-form ref="otpFormRef" :model="otpDialog.form" :rules="otpDialog.rules" label-width="65px">
<el-form ref="otpFormRef" :model="otpDialog.form" :rules="otpDialog.rules" @submit.native.prevent label-width="65px">
<el-form-item v-if="otpDialog.otpUrl" label="二维码">
<qrcode-vue :value="otpDialog.otpUrl" :size="200" level="H" />
</el-form-item>

63
mayfly_go_web/src/views/ops/db/DbList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="db-list">
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="datas" :columns="state.columns" :total="total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="state.selectionData" :data="datas" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #tagPathSelect>
@@ -13,9 +13,9 @@
<template #queryRight>
<el-button v-auth="permissions.saveDb" type="primary" icon="plus" @click="editDb(true)">添加</el-button>
<el-button v-auth="permissions.saveDb" :disabled="!chooseData" @click="editDb(false)" type="primary"
icon="edit">编辑</el-button>
<el-button v-auth="permissions.delDb" :disabled="!chooseData" @click="deleteDb(chooseData.id)" type="danger"
<el-button v-auth="permissions.saveDb" :disabled="selectionData.length != 1" @click="editDb(false)"
type="primary" icon="edit">编辑</el-button>
<el-button v-auth="permissions.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger"
icon="delete">删除</el-button>
</template>
@@ -262,7 +262,7 @@
</template>
<script lang='ts' setup>
import { toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
import { ref, toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatByteSize } from '@/common/utils/format';
import { dbApi } from './api';
@@ -286,6 +286,8 @@ const permissions = {
delDb: 'db:del',
}
const pageTableRef: any = ref(null)
const state = reactive({
row: {},
dbId: 0,
@@ -294,7 +296,7 @@ const state = reactive({
/**
* 选中的数据
*/
chooseData: null as any,
selectionData: [],
/**
* 查询条件
*/
@@ -398,7 +400,7 @@ const {
dbId,
db,
tags,
chooseData,
selectionData,
query,
datas,
total,
@@ -443,14 +445,19 @@ const filterTableInfos = computed(() => {
});
const search = async () => {
let res: any = await dbApi.dbs.request(state.query);
// 切割数据库
res.list.forEach((e: any) => {
e.popoverSelectDbVisible = false;
e.dbs = e.database.split(' ');
});
state.datas = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
let res: any = await dbApi.dbs.request(state.query);
// 切割数据库
res.list.forEach((e: any) => {
e.popoverSelectDbVisible = false;
e.dbs = e.database.split(' ');
});
state.datas = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const showInfo = (info: any) => {
@@ -467,27 +474,25 @@ const editDb = async (isAdd = false) => {
state.dbEditDialog.data = null;
state.dbEditDialog.title = '新增数据库资源';
} else {
state.dbEditDialog.data = state.chooseData;
state.dbEditDialog.data = state.selectionData[0];
state.dbEditDialog.title = '修改数据库资源';
}
state.dbEditDialog.visible = true;
};
const valChange = () => {
state.chooseData = null;
search();
};
const deleteDb = async (id: number) => {
const deleteDb = async () => {
try {
await ElMessageBox.confirm(`确定删除该库?`, '提示', {
await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(", ")}】库?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await dbApi.deleteDb.request({ id });
await dbApi.deleteDb.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功');
state.chooseData = null;
search();
} catch (err) { }
};
@@ -626,7 +631,7 @@ const closeTableInfo = () => {
const showColumns = async (row: any) => {
state.chooseTableName = row.tableName;
state.columnDialog.columns = await dbApi.columnMetadata.request({
id: state.chooseData.id,
id: state.dbId,
db: state.db,
tableName: row.tableName,
});
@@ -637,7 +642,7 @@ const showColumns = async (row: any) => {
const showTableIndex = async (row: any) => {
state.chooseTableName = row.tableName;
state.indexDialog.indexs = await dbApi.tableIndex.request({
id: state.chooseData.id,
id: state.dbId,
db: state.db,
tableName: row.tableName,
});
@@ -648,7 +653,7 @@ const showTableIndex = async (row: any) => {
const showCreateDdl = async (row: any) => {
state.chooseTableName = row.tableName;
const res = await dbApi.tableDdl.request({
id: state.chooseData.id,
id: state.dbId,
db: state.db,
tableName: row.tableName,
});
@@ -669,10 +674,10 @@ const dropTable = async (row: any) => {
});
SqlExecBox({
sql: `DROP TABLE ${tableName}`,
dbId: state.chooseData.id,
dbId: state.dbId,
db: state.db,
runSuccessCallback: async () => {
state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.chooseData.id, db: state.db });
state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db });
},
});
} catch (err) { }
@@ -708,12 +713,12 @@ const openEditTable = async (row: any) => {
if (row.tableName) {
state.tableCreateDialog.title = '修改表'
let indexs = await dbApi.tableIndex.request({
id: state.chooseData.id,
id: state.dbId,
db: state.db,
tableName: row.tableName,
});
let columns = await dbApi.columnMetadata.request({
id: state.chooseData.id,
id: state.dbId,
db: state.db,
tableName: row.tableName,
});

5
mayfly_go_web/src/views/ops/db/component/tab/TableData.vue
View File

@@ -6,11 +6,12 @@
</el-link>
<el-divider direction="vertical" border-style="dashed" />
<el-popover placement="bottom" title="表格字段配置" width="auto" trigger="click">
<el-popover popper-style="max-height: 550px; overflow: auto; max-width: 450px" placement="bottom"
width="auto" title="表格字段配置" trigger="click">
<div v-for="(item, index) in columns" :key="index">
<el-checkbox v-model="item.show"
:label="`${!item.columnComment ? item.columnName : item.columnName + ' [' + item.columnComment + ']'}`"
:true-label="true" :false-label="false" />
:true-label="true" :false-label="false" size="small" />
</div>
<template #reference>
<el-link icon="Operation" size="small" :underline="false"></el-link>

34
mayfly_go_web/src/views/ops/machine/FileManage.vue
View File

@@ -7,7 +7,7 @@
</el-button>
</div>
</div>
<el-table :data="fileTable" stripe style="width: 100%">
<el-table :data="fileTable" stripe style="width: 100%" v-loading="loading">
<el-table-column prop="name" label="名称" width>
<template #default="scope">
<el-input v-model="scope.row.name" size="small" :disabled="scope.row.id != null" clearable>
@@ -51,8 +51,8 @@
<el-progress v-if="uploadProgressShow" style="width: 90%; margin-left: 20px" :text-inside="true"
:stroke-width="20" :percentage="progressNum" />
<div style="height: 45vh; overflow: auto">
<el-tree v-if="tree.visible" ref="fileTree" :highlight-current="true" :load="loadNode"
:props="treeProps" lazy node-key="id" :expand-on-click-node="true">
<el-tree v-if="tree.visible" ref="fileTree" :highlight-current="true" :load="loadNode" :props="treeProps"
lazy node-key="id" :expand-on-click-node="true">
<template #default="{ node, data }">
<span class="custom-tree-node">
<el-dropdown size="small" @visible-change="getFilePath(data, $event)" trigger="contextmenu">
@@ -80,8 +80,7 @@
</el-dropdown-item>
<span v-auth="'machine:file:write'">
<el-dropdown-item @click="showCreateFileDialog(node)"
v-if="data.type == 'd'">
<el-dropdown-item @click="showCreateFileDialog(node)" v-if="data.type == 'd'">
<el-link type="primary" icon="document" :underline="false"
style="margin-left: 2px">新建</el-link>
</el-dropdown-item>
@@ -148,8 +147,8 @@
</template>
</el-dialog>
<el-dialog :destroy-on-close="true" :title="fileContent.dialogTitle" v-model="fileContent.contentVisible" :close-on-click-modal="false"
top="5vh" width="70%">
<el-dialog :destroy-on-close="true" :title="fileContent.dialogTitle" v-model="fileContent.contentVisible"
:close-on-click-modal="false" top="5vh" width="70%">
<div>
<monaco-editor :can-change-mode="true" v-model="fileContent.content" :language="fileContent.type" />
</div>
@@ -206,6 +205,7 @@ const state = reactive({
pageNum: 1,
pageSize: 8,
},
loading: false,
form: {
id: null,
type: null,
@@ -250,6 +250,7 @@ const state = reactive({
const {
dialogVisible,
loading,
query,
total,
fileTable,
@@ -261,17 +262,22 @@ const {
} = toRefs(state)
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (newValue.machineId && newValue.visible) {
await getFiles();
}
state.dialogVisible = newValue.visible;
});
const getFiles = async () => {
state.query.id = props.machineId as any;
const res = await files.request(state.query);
state.fileTable = res.list;
state.total = res.total;
try {
state.loading = true;
state.query.id = props.machineId as any;
const res = await files.request(state.query);
state.fileTable = res.list;
state.total = res.total;
} finally {
state.loading = false;
}
};
const handlePageChange = (curPage: number) => {
@@ -589,6 +595,4 @@ const formatFileSize = (size: any) => {
return '-';
};
</script>
<style lang="scss">
</style>
<style lang="scss"></style>

43
mayfly_go_web/src/views/ops/machine/MachineList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="params" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="data.list" :columns="state.columns" :total="data.total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="params" :show-selection="true"
v-model:selection-data="state.selectionData" :data="data.list" :columns="state.columns" :total="data.total"
v-model:page-size="params.pageSize" v-model:page-num="params.pageNum" @pageChange="search()">
<template #tagPathSelect>
@@ -14,9 +14,9 @@
<template #queryRight>
<el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加
</el-button>
<el-button v-auth="'machine:update'" type="primary" icon="edit" :disabled="!chooseData"
@click="openFormDialog(chooseData)" plain>编辑</el-button>
<el-button v-auth="'machine:del'" :disabled="!chooseData" @click="deleteMachine(chooseData.id)"
<el-button v-auth="'machine:update'" type="primary" icon="edit" :disabled="selectionData.length != 1"
@click="openFormDialog(selectionData)" plain>编辑</el-button>
<el-button v-auth="'machine:del'" :disabled="selectionData.length < 1" @click="deleteMachine()"
type="danger" icon="delete">删除</el-button>
</template>
@@ -146,7 +146,7 @@
</template>
<script lang="ts" setup>
import { toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
import { ref, toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { machineApi } from './api';
@@ -165,6 +165,8 @@ const MachineRec = defineAsyncComponent(() => import('./MachineRec.vue'));
const ProcessList = defineAsyncComponent(() => import('./ProcessList.vue'));
const router = useRouter();
const pageTableRef: any = ref(null)
const state = reactive({
tags: [] as any,
params: {
@@ -198,7 +200,7 @@ const state = reactive({
data: null as any,
},
// 当前选中数据
chooseData: null as any,
selectionData: [],
serviceDialog: {
visible: false,
machineId: 0,
@@ -236,7 +238,7 @@ const {
params,
data,
infoDialog,
chooseData,
selectionData,
serviceDialog,
processDialog,
fileDialog,
@@ -278,7 +280,7 @@ const getTags = async () => {
const openFormDialog = async (machine: any) => {
let dialogTitle;
if (machine) {
state.machineEditDialog.data = state.chooseData as any;
state.machineEditDialog.data = state.selectionData[0];
dialogTitle = '编辑机器';
} else {
state.machineEditDialog.data = null;
@@ -289,16 +291,15 @@ const openFormDialog = async (machine: any) => {
state.machineEditDialog.visible = true;
};
const deleteMachine = async (id: number) => {
const deleteMachine = async () => {
try {
await ElMessageBox.confirm(`确定删除该机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(", ")}】机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await machineApi.del.request({ id });
await machineApi.del.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('操作成功');
state.chooseData = null;
search();
} catch (err) { }
};
@@ -329,19 +330,23 @@ const showMachineStats = async (machine: any) => {
};
const submitSuccess = () => {
state.chooseData = null;
search();
};
const showFileManage = (chooseData: any) => {
const showFileManage = (selectionData: any) => {
state.fileDialog.visible = true;
state.fileDialog.machineId = chooseData.id;
state.fileDialog.title = `${chooseData.name} => ${chooseData.ip}`;
state.fileDialog.machineId = selectionData.id;
state.fileDialog.title = `${selectionData.name} => ${selectionData.ip}`;
};
const search = async () => {
const res = await machineApi.list.request(state.params);
state.data = res;
try {
pageTableRef.value.loading(true);
const res = await machineApi.list.request(state.params);
state.data = res;
} finally {
pageTableRef.value.loading(false);
}
};
const showInfo = (info: any) => {

39
mayfly_go_web/src/views/ops/machine/ScriptManage.vue
View File

@@ -10,8 +10,8 @@
</el-select>
</div>
<div style="float: right">
<el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary"
icon="tickets" size="small" plain>查看</el-button>
<el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary" icon="tickets"
size="small" plain>查看</el-button>
<el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus"
size="small" plain>添加</el-button>
<el-button v-auth="'machine:script:del'" :disabled="currentId == null" type="danger"
@@ -19,7 +19,8 @@
</div>
</div>
<el-table :data="scriptTable" @current-change="choose" stripe border size="small" style="width: 100%">
<el-table :data="scriptTable" @current-change="choose" stripe border size="small" v-loading="loading"
style="width: 100%">
<el-table-column label="选择" width="55px">
<template #default="scope">
<el-radio v-model="currentId" :label="scope.row.id">
@@ -39,8 +40,8 @@
<el-button v-if="scope.row.id == null" type="success" icon="el-icon-success" size="small" plain>
确定</el-button>
<el-button v-auth="'machine:script:run'" v-if="scope.row.id != null"
@click="runScript(scope.row)" type="primary" icon="video-play" size="small" plain>执行
<el-button v-auth="'machine:script:run'" v-if="scope.row.id != null" @click="runScript(scope.row)"
type="primary" icon="video-play" size="small" plain>执行
</el-button>
</template>
</el-table-column>
@@ -54,8 +55,8 @@
<el-dialog title="脚本参数" v-model="scriptParamsDialog.visible" width="400px">
<el-form ref="paramsForm" :model="scriptParamsDialog.params" label-width="70px" size="small">
<el-form-item v-for="item in scriptParamsDialog.paramsFormItem as any" :key="item.name"
:prop="item.model" :label="item.name" required>
<el-form-item v-for="item in scriptParamsDialog.paramsFormItem as any" :key="item.name" :prop="item.model"
:label="item.name" required>
<el-input v-if="!item.options" v-model="scriptParamsDialog.params[item.model]"
:placeholder="item.placeholder" autocomplete="off" clearable></el-input>
<el-select v-else v-model="scriptParamsDialog.params[item.model]" :placeholder="item.placeholder"
@@ -80,8 +81,7 @@
<el-dialog v-if="terminalDialog.visible" title="终端" v-model="terminalDialog.visible" width="80%"
:close-on-click-modal="false" :modal="false" @close="closeTermnial">
<ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId"
height="560px" />
<ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId" height="560px" />
</el-dialog>
<script-edit v-model:visible="editDialog.visible" v-model:data="editDialog.data" :title="editDialog.title"
@@ -111,6 +111,7 @@ const state = reactive({
type: 0,
currentId: null,
currentData: null,
loading: false,
query: {
machineId: 0 as any,
pageNum: 1,
@@ -142,6 +143,7 @@ const state = reactive({
const {
dialogVisible,
loading,
type,
currentId,
currentData,
@@ -155,19 +157,24 @@ const {
} = toRefs(state)
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (props.machineId && newValue.visible) {
await getScripts();
}
state.dialogVisible = newValue.visible;
});
const getScripts = async () => {
state.currentId = null;
state.currentData = null;
state.query.machineId = state.type == 0 ? props.machineId : 9999999;
const res = await machineApi.scripts.request(state.query);
state.scriptTable = res.list;
state.total = res.total;
try {
state.loading = true;
state.currentId = null;
state.currentData = null;
state.query.machineId = state.type == 0 ? props.machineId : 9999999;
const res = await machineApi.scripts.request(state.query);
state.scriptTable = res.list;
state.total = res.total;
} finally {
state.loading = false;
}
};
const handlePageChange = (curPage: number) => {

21
mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
View File

@@ -1,14 +1,15 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="authcerts" :columns="state.columns" :total="total"
<page-table :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="authcerts" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #queryRight>
<el-button type="primary" icon="plus" @click="edit(false)">添加</el-button>
<el-button :disabled="!chooseData" @click="edit(chooseData)" type="primary" icon="edit">编辑
<el-button :disabled="selectionData.length !== 1" @click="edit(selectionData)" type="primary" icon="edit">编辑
</el-button>
<el-button :disabled="!chooseData" @click="deleteAc(chooseData)" type="danger" icon="delete">删除
<el-button :disabled="selectionData.length < 1" @click="deleteAc(selectionData)" type="danger"
icon="delete">删除
</el-button>
</template>
@@ -52,7 +53,7 @@ const state = reactive({
],
total: 0,
authcerts: [],
chooseData: null as any,
selectionData: [],
paramsDialog: {
visible: false,
config: null as any,
@@ -70,7 +71,7 @@ const {
query,
total,
authcerts,
chooseData,
selectionData,
editor,
} = toRefs(state)
@@ -86,13 +87,12 @@ const search = async () => {
const editChange = () => {
ElMessage.success('保存成功');
state.chooseData = null;
search();
};
const edit = (data: any) => {
if (data) {
state.editor.authcert = data;
state.editor.authcert = data[0];
} else {
state.editor.authcert = false;
}
@@ -102,14 +102,13 @@ const edit = (data: any) => {
const deleteAc = async (data: any) => {
try {
await ElMessageBox.confirm(`确定删除该授权凭证?`, '提示', {
await ElMessageBox.confirm(`确定删除该【${data.map((x: any) => x.name).join(", ")}授权凭证?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await authCertApi.delete.request({ id: data.id });
await authCertApi.delete.request({ id: data.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功');
state.chooseData = null;
search();
} catch (err) { }

46
mayfly_go_web/src/views/ops/mongo/MongoList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="list" :columns="state.columns" :total="total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="list" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #tagPathSelect>
@@ -13,9 +13,10 @@
<template #queryRight>
<el-button type="primary" icon="plus" @click="editMongo(true)" plain>添加</el-button>
<el-button type="primary" icon="edit" :disabled="!chooseData" @click="editMongo(false)" plain>编辑
<el-button type="primary" icon="edit" :disabled="selectionData.length != 1" @click="editMongo(false)"
plain>编辑
</el-button>
<el-button type="danger" icon="delete" :disabled="!chooseData" @click="deleteMongo" plain>删除
<el-button type="danger" icon="delete" :disabled="selectionData.length < 1" @click="deleteMongo" plain>删除
</el-button>
</template>
@@ -169,7 +170,7 @@
<script lang="ts" setup>
import { mongoApi } from './api';
import { toRefs, reactive, onMounted } from 'vue';
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagApi } from '../tag/api';
import MongoEdit from './MongoEdit.vue';
@@ -178,6 +179,8 @@ import TagInfo from '../component/TagInfo.vue';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const pageTableRef: any = ref(null)
const state = reactive({
tags: [],
dbOps: {
@@ -186,7 +189,7 @@ const state = reactive({
},
list: [],
total: 0,
chooseData: null as any,
selectionData: [],
query: {
pageNum: 1,
pageSize: 10,
@@ -241,7 +244,7 @@ const {
tags,
list,
total,
chooseData,
selectionData,
query,
mongoEditDialog,
databaseDialog,
@@ -264,7 +267,7 @@ const showDatabases = async (id: number) => {
const showDatabaseStats = async (dbName: string) => {
state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.chooseData.id,
id: state.dbOps.dbId,
database: dbName,
command: {
dbStats: 1,
@@ -283,7 +286,7 @@ const showCollections = async (database: string) => {
};
const setCollections = async (database: string) => {
const res = await mongoApi.collections.request({ id: state.chooseData.id, database });
const res = await mongoApi.collections.request({ id: state.dbOps.dbId, database });
const collections = [] as any;
for (let r of res) {
collections.push({ name: r });
@@ -296,7 +299,7 @@ const setCollections = async (database: string) => {
*/
const showCollectionStats = async (collection: string) => {
state.collectionsDialog.statsDialog.data = await mongoApi.runCommand.request({
id: state.chooseData.id,
id: state.dbOps.dbId,
database: state.collectionsDialog.database,
command: {
collStats: collection,
@@ -311,7 +314,7 @@ const showCollectionStats = async (collection: string) => {
*/
const onDeleteCollection = async (collection: string) => {
await mongoApi.runCommand.request({
id: state.chooseData.id,
id: state.dbOps.dbId,
database: state.collectionsDialog.database,
command: {
drop: collection,
@@ -328,7 +331,7 @@ const showCreateCollectionDialog = () => {
const onCreateCollection = async () => {
const form = state.createCollectionDialog.form;
await mongoApi.runCommand.request({
id: state.chooseData.id,
id: state.dbOps.dbId,
database: state.collectionsDialog.database,
command: {
create: form.name,
@@ -342,22 +345,26 @@ const onCreateCollection = async () => {
const deleteMongo = async () => {
try {
await ElMessageBox.confirm(`确定删除该mongo?`, '提示', {
await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(", ")}】mongo信息?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await mongoApi.deleteMongo.request({ id: state.chooseData.id });
await mongoApi.deleteMongo.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功');
state.chooseData = null;
search();
} catch (err) { }
};
const search = async () => {
const res = await mongoApi.mongoList.request(state.query);
state.list = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
const res = await mongoApi.mongoList.request(state.query);
state.list = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const getTags = async () => {
@@ -369,14 +376,13 @@ const editMongo = async (isAdd = false) => {
state.mongoEditDialog.data = null;
state.mongoEditDialog.title = '新增mongo';
} else {
state.mongoEditDialog.data = state.chooseData;
state.mongoEditDialog.data = state.selectionData[0];
state.mongoEditDialog.title = '修改mongo';
}
state.mongoEditDialog.visible = true;
};
const valChange = () => {
state.chooseData = null;
search();
};

2
mayfly_go_web/src/views/ops/redis/DataOperation.vue
View File

@@ -191,7 +191,7 @@ const setHeight = () => {
const instMap: Map<string, any[]> = new Map();
const getInsts = async () => {
const res = await redisApi.redisList.request({});
const res = await redisApi.redisList.request({ pageNum: 1, pageSize: 1000 });
if (!res.total) return
for (const redisInfo of res.list) {
const tagPath = redisInfo.tagPath;

37
mayfly_go_web/src/views/ops/redis/RedisList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="redisTable" :columns="state.columns" :total="total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="redisTable" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #tagPathSelect>
@@ -13,9 +13,10 @@
<template #queryRight>
<el-button type="primary" icon="plus" @click="editRedis(true)" plain>添加</el-button>
<el-button type="primary" icon="edit" :disabled="!chooseData" @click="editRedis(false)" plain>编辑
<el-button type="primary" icon="edit" :disabled="selectionData.length != 1" @click="editRedis(false)"
plain>编辑
</el-button>
<el-button type="danger" icon="delete" :disabled="!chooseData" @click="deleteRedis" plain>删除
<el-button type="danger" icon="delete" :disabled="selectionData.length < 1" @click="deleteRedis" plain>删除
</el-button>
</template>
@@ -142,7 +143,7 @@
<script lang="ts" setup>
import Info from './Info.vue';
import { redisApi } from './api';
import { toRefs, reactive, onMounted } from 'vue';
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagApi } from '../tag/api';
import RedisEdit from './RedisEdit.vue';
@@ -151,11 +152,13 @@ import TagInfo from '../component/TagInfo.vue';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const pageTableRef: any = ref(null)
const state = reactive({
tags: [],
redisTable: [],
total: 0,
chooseData: null as any,
selectionData: [],
query: {
tagPath: null,
pageNum: 1,
@@ -204,7 +207,7 @@ const {
tags,
redisTable,
total,
chooseData,
selectionData,
query,
detailDialog,
clusterInfoDialog,
@@ -224,14 +227,13 @@ const showDetail = (detail: any) => {
const deleteRedis = async () => {
try {
await ElMessageBox.confirm(`确定删除该redis?`, '提示', {
await ElMessageBox.confirm(`确定删除该【${state.selectionData.map((x: any) => x.name).join(", ")}】redis信息?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.delRedis.request({ id: state.chooseData.id });
await redisApi.delRedis.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功');
state.chooseData = null;
search();
} catch (err) { }
};
@@ -256,9 +258,15 @@ const onShowClusterInfo = async (redis: any) => {
};
const search = async () => {
const res = await redisApi.redisList.request(state.query);
state.redisTable = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
console.log(state.query);
const res = await redisApi.redisList.request(state.query);
state.redisTable = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const getTags = async () => {
@@ -270,14 +278,13 @@ const editRedis = async (isAdd = false) => {
state.redisEditDialog.data = null;
state.redisEditDialog.title = '新增redis';
} else {
state.redisEditDialog.data = state.chooseData;
state.redisEditDialog.data = state.selectionData[0];
state.redisEditDialog.title = '修改redis';
}
state.redisEditDialog.visible = true;
};
const valChange = () => {
state.chooseData = null;
search();
};
</script>

19
mayfly_go_web/src/views/ops/tag/TeamList.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="data" :columns="state.columns" :total="total"
<page-table :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="data" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #queryRight>
<el-button v-auth="'team:save'" type="primary" icon="plus" @click="showSaveTeamDialog(false)">添加</el-button>
<el-button v-auth="'team:del'" :disabled="!chooseData" @click="deleteTeam(chooseData)" type="danger"
<el-button v-auth="'team:del'" :disabled="selectionData.length < 1" @click="deleteTeam()" type="danger"
icon="delete">删除</el-button>
</template>
@@ -167,7 +167,7 @@ const state = reactive({
],
total: 0,
data: [],
chooseData: null as any,
selectionData: [],
showMemDialog: {
visible: false,
chooseId: 0,
@@ -209,7 +209,7 @@ const {
addTeamDialog,
total,
data,
chooseData,
selectionData,
showMemDialog,
showTagDialog,
} = toRefs(state)
@@ -252,15 +252,14 @@ const cancelSaveTeam = () => {
teamForm.value.resetFields();
};
const deleteTeam = (data: any) => {
ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
const deleteTeam = () => {
ElMessageBox.confirm(`此操作将删除【${state.selectionData.map((x: any) => x.name).join(", ")}】团队信息, 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await tagApi.delTeam.request({ id: data.id });
await tagApi.delTeam.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功！');
state.chooseData = null;
search();
});
};
@@ -315,7 +314,7 @@ const showAddMemberDialog = () => {
const addMember = async () => {
const memForm = state.showMemDialog.memForm;
memForm.teamId = state.chooseData.id;
memForm.teamId = (state.selectionData[0] as any).id;
notBlank(memForm.accountIds, '请先选择账号');
await tagApi.saveTeamMem.request(memForm);

45
mayfly_go_web/src/views/system/account/AccountList.vue
View File

@@ -1,16 +1,16 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="datas" :columns="state.columns" :total="total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="datas" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #queryRight>
<el-button v-auth="'account:add'" type="primary" icon="plus" @click="editAccount(true)">添加</el-button>
<el-button v-auth="'account:add'" :disabled="state.chooseData == null" @click="editAccount(false)"
<el-button v-auth="'account:add'" :disabled="state.selectionData.length != 1" @click="editAccount(false)"
type="primary" icon="edit">编辑</el-button>
<el-button v-auth="'account:saveRoles'" :disabled="state.chooseData == null" @click="showRoleEdit()"
<el-button v-auth="'account:saveRoles'" :disabled="state.selectionData.length != 1" @click="showRoleEdit()"
type="success" icon="setting">角色分配</el-button>
<el-button v-auth="'account:del'" :disabled="state.chooseData == null" @click="deleteAccount()"
<el-button v-auth="'account:del'" :disabled="state.selectionData.length < 1" @click="deleteAccount()"
type="danger" icon="delete">删除</el-button>
</template>
@@ -70,7 +70,7 @@
</template>
<script lang='ts' setup>
import { toRefs, reactive, onMounted } from 'vue';
import { ref, toRefs, reactive, onMounted } from 'vue';
import RoleEdit from './RoleEdit.vue';
import AccountEdit from './AccountEdit.vue';
import enums from '../enums';
@@ -80,11 +80,13 @@ import { dateFormat } from '@/common/utils/date';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const pageTableRef: any = ref(null)
const state = reactive({
/**
* 选中的数据
*/
chooseData: null as any,
selectionData: [],
/**
* 查询条件
*/
@@ -136,6 +138,7 @@ const state = reactive({
});
const {
selectionData,
query,
datas,
total,
@@ -150,9 +153,14 @@ onMounted(() => {
});
const search = async () => {
let res: any = await accountApi.list.request(state.query);
state.datas = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
let res: any = await accountApi.list.request(state.query);
state.datas = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const showResources = async (row: any) => {
@@ -194,24 +202,16 @@ const resetOtpSecret = async (row: any) => {
row.otpSecret = "-";
};
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
search();
};
const showRoleEdit = () => {
if (!state.chooseData) {
ElMessage.error('请选择账号');
}
state.roleDialog.visible = true;
state.roleDialog.account = state.chooseData;
state.roleDialog.account = state.selectionData[0];
};
const editAccount = (isAdd = false) => {
if (isAdd) {
state.accountDialog.data = null;
} else {
state.accountDialog.data = state.chooseData;
state.accountDialog.data = state.selectionData[0];
}
state.accountDialog.visible = true;
};
@@ -229,14 +229,13 @@ const valChange = () => {
const deleteAccount = async () => {
try {
await ElMessageBox.confirm(`确定删除该账号?`, '提示', {
await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(", ")}】的账号?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await accountApi.del.request({ id: state.chooseData.id });
await accountApi.del.request({ id: state.selectionData.map((x: any) => x.id).join(",") });
ElMessage.success('删除成功');
state.chooseData = null;
search();
} catch (err) { }
};

14
mayfly_go_web/src/views/system/config/ConfigList.vue
View File

@@ -1,13 +1,12 @@
<template>
<div>
<page-table :show-choose-column="true" v-model:choose-data="state.chooseData" :data="configs"
:columns="state.columns" :total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum"
@pageChange="search()">
<page-table :show-selection="true" v-model:selection-data="selectionData" :data="configs" :columns="state.columns"
:total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #queryRight>
<el-button v-auth="'config:save'" type="primary" icon="plus" @click="editConfig(false)">添加</el-button>
<el-button v-auth="'config:save'" :disabled="chooseData == null" @click="editConfig(chooseData)"
type="primary" icon="edit">编辑
<el-button v-auth="'config:save'" :disabled="state.selectionData.length != 1"
@click="editConfig(state.selectionData[0])" type="primary" icon="edit">编辑
</el-button>
</template>
@@ -81,7 +80,7 @@ const state = reactive({
],
total: 0,
configs: [],
chooseData: null as any,
selectionData: [],
paramsDialog: {
visible: false,
config: null as any,
@@ -99,7 +98,7 @@ const {
query,
total,
configs,
chooseData,
selectionData,
paramsDialog,
configEdit,
} = toRefs(state)
@@ -187,7 +186,6 @@ const hasParam = (paramKey: string, paramItems: any) => {
const configEditChange = () => {
ElMessage.success('保存成功');
state.chooseData = null;
search();
};

40
mayfly_go_web/src/views/system/role/RoleList.vue
View File

@@ -1,17 +1,17 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :show-choose-column="true"
v-model:choose-data="state.chooseData" :data="roles" :columns="state.columns" :total="total"
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
v-model:selection-data="selectionData" :data="roles" :columns="state.columns" :total="total"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<template #queryRight>
<el-button v-auth="'role:add'" type="primary" icon="plus" @click="editRole(false)">添加</el-button>
<el-button v-auth="'role:update'" :disabled="chooseData == null" @click="editRole(chooseData)"
<el-button v-auth="'role:update'" :disabled="selectionData.length != 1" @click="editRole(selectionData)"
type="primary" icon="edit">编辑</el-button>
<el-button v-auth="'role:saveResources'" :disabled="chooseData == null" @click="editResource(chooseData)"
type="success" icon="setting">分配菜单&权限</el-button>
<el-button v-auth="'role:del'" :disabled="chooseData == null" @click="deleteRole(chooseData)" type="danger"
icon="delete">删除</el-button>
<el-button v-auth="'role:saveResources'" :disabled="selectionData.length != 1"
@click="editResource(selectionData)" type="success" icon="setting">分配菜单&权限</el-button>
<el-button v-auth="'role:del'" :disabled="selectionData.length < 1" @click="deleteRole(selectionData)"
type="danger" icon="delete">删除</el-button>
</template>
<template #status="{ data }">
@@ -35,7 +35,7 @@
</template>
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { ref, toRefs, reactive, onMounted } from 'vue';
import RoleEdit from './RoleEdit.vue';
import ResourceEdit from './ResourceEdit.vue';
import ShowResource from './ShowResource.vue';
@@ -44,6 +44,8 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const pageTableRef: any = ref(null)
const state = reactive({
query: {
pageNum: 1,
@@ -66,7 +68,7 @@ const state = reactive({
],
total: 0,
roles: [],
chooseData: null as any,
selectionData: [],
resourceDialog: {
visible: false,
role: {},
@@ -89,7 +91,7 @@ const {
query,
total,
roles,
chooseData,
selectionData,
resourceDialog,
roleEditDialog,
showResourceDialog,
@@ -100,20 +102,24 @@ onMounted(() => {
});
const search = async () => {
let res = await roleApi.list.request(state.query);
state.roles = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
let res = await roleApi.list.request(state.query);
state.roles = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const roleEditChange = () => {
ElMessage.success('修改成功！');
state.chooseData = null;
search();
};
const editRole = (data: any) => {
if (data) {
state.roleEditDialog.role = data;
state.roleEditDialog.role = data[0];
} else {
state.roleEditDialog.role = false;
}
@@ -124,7 +130,7 @@ const editRole = (data: any) => {
const deleteRole = async (data: any) => {
try {
await ElMessageBox.confirm(
`此操作将删除 [${data.name}] 该角色，以及与该角色有关的账号角色关联信息和资源角色关联信息, 是否继续?`,
`此操作将删除【${data.map((x: any) => x.name).join(", ")}】该角色，以及与该角色有关的账号角色关联信息和资源角色关联信息, 是否继续?`,
'提示',
{
confirmButtonText: '确定',
@@ -133,7 +139,7 @@ const deleteRole = async (data: any) => {
}
);
await roleApi.del.request({
id: data.id,
id: data.map((x: any) => x.id).join(","),
});
ElMessage.success('删除成功！');
search();

20
mayfly_go_web/src/views/system/syslog/SyslogList.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<page-table :query="state.queryConfig" v-model:query-form="query" :data="logs" :columns="state.columns"
:total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">
<page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :data="logs"
:columns="state.columns" :total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum"
@pageChange="search()">
<template #selectAccount>
<el-select remote :remote-method="getAccount" v-model="query.creatorId" filterable placeholder="请输入并选择账号"
@@ -20,11 +21,13 @@
</template>
<script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue';
import { ref, toRefs, reactive, onMounted } from 'vue';
import { logApi, accountApi } from '../api';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const pageTableRef: any = ref(null);
const state = reactive({
query: {
type: null,
@@ -64,9 +67,14 @@ onMounted(() => {
});
const search = async () => {
let res = await logApi.list.request(state.query);
state.logs = res.list;
state.total = res.total;
try {
pageTableRef.value.loading(true);
let res = await logApi.list.request(state.query);
state.logs = res.list;
state.total = res.total;
} finally {
pageTableRef.value.loading(false);
}
};
const getAccount = (username: any) => {