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-05 22:06:32 +08:00
parent f4ac6d8360
commit dc9a2985f3
23 changed files with 193 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,7 +69,7 @@
</div> </div>
</div> </div>
<el-table v-bind="$attrs" max-height="700" @selection-change="handleSelectionChange" :data="props.data" border <el-table v-bind="$attrs" max-height="700" @selection-change="handleSelectionChange" :data="props.data"
highlight-current-row v-loading="loadingData" :size="props.size"> highlight-current-row v-loading="loadingData" :size="props.size">
<el-table-column v-if="props.showSelection" type="selection" width="40" /> <el-table-column v-if="props.showSelection" type="selection" width="40" />
@@ -96,8 +96,7 @@
<el-pagination :small="props.size == 'small'" @current-change="handlePageChange" <el-pagination :small="props.size == 'small'" @current-change="handlePageChange"
@size-change="handleSizeChange" style="text-align: right" @size-change="handleSizeChange" style="text-align: right"
layout="prev, pager, next, total, sizes, jumper" :total="props.total" layout="prev, pager, next, total, sizes, jumper" :total="props.total"
v-model:current-page="state.pageNum" v-model:page-size="state.pageSize" v-model:current-page="state.pageNum" v-model:page-size="state.pageSize" :page-sizes="pageSizes" />
:page-sizes="[10, 15, 20, 25]" />
</el-row> </el-row>
</el-card> </el-card>
</div> </div>
@@ -167,12 +166,11 @@ const props = defineProps({
}) })
const state = reactive({ const state = reactive({
pageSizes: [] as any, // 可选每页显示的数据量
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
chooseData: null as any,
chooseId: 0 as any,
isOpenMoreQuery: false, isOpenMoreQuery: false,
defaultQueryCount: 2, // 默认显示的查询参数个数，展开后每行显示个数为该值加1。第一行用最后一列来占用按钮 defaultQueryCount: 2, // 默认显示的查询参数个数，展开后每行显示查询条件个数为该值加1。第一行用最后一列来占用按钮
queryForm: {} as any, queryForm: {} as any,
loadingData: false, loadingData: false,
// 输入框宽度 // 输入框宽度
@@ -180,6 +178,7 @@ const state = reactive({
}) })
const { const {
pageSizes,
isOpenMoreQuery, isOpenMoreQuery,
defaultQueryCount, defaultQueryCount,
queryForm, queryForm,
@@ -200,7 +199,7 @@ watch(() => props.pageSize, (newValue: any) => {
}) })
watch(() => props.data, (newValue: any) => { watch(() => props.data, (newValue: any) => {
if (newValue.length > 0) { if (newValue && newValue.length > 0) {
props.columns.forEach(item => { props.columns.forEach(item => {
if (item.autoWidth && item.show) { if (item.autoWidth && item.show) {
item.autoCalculateMinWidth(props.data); item.autoCalculateMinWidth(props.data);
@@ -210,9 +209,12 @@ watch(() => props.data, (newValue: any) => {
}) })
onMounted(() => { onMounted(() => {
const pageSize = props.pageSize;
state.pageNum = props.pageNum; state.pageNum = props.pageNum;
state.pageSize = props.pageSize; state.pageSize = pageSize;
state.queryForm = props.queryForm; state.queryForm = props.queryForm;
state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4]
// 如果没传输入框宽度，则根据组件size设置默认宽度 // 如果没传输入框宽度，则根据组件size设置默认宽度
if (!props.inputWidth) { if (!props.inputWidth) {
@@ -244,6 +246,7 @@ const handlePageChange = () => {
} }
const handleSizeChange = () => { const handleSizeChange = () => {
changePageNum(1);
emit('update:pageSize', state.pageSize); emit('update:pageSize', state.pageSize);
execQuery(); execQuery();
} }

11
mayfly_go_web/src/components/pagetable/index.ts
View File

@@ -43,7 +43,7 @@ export class TableColumn {
fixed: any; fixed: any;
align: string = "center" align: string = "left"
/** /**
* 指定格式化函数对原始值进行格式化，如时间格式化等 * 指定格式化函数对原始值进行格式化，如时间格式化等
@@ -93,6 +93,15 @@ export class TableColumn {
return this; return this;
} }
/**
* 居中对齐
* @returns this
*/
alignCenter(): TableColumn {
this.align = "center";
return this;
}
/** /**
* 标识该列为插槽 * 标识该列为插槽
* @returns this * @returns this

6
mayfly_go_web/src/views/ops/component/TagSelect.vue
View File

@@ -23,9 +23,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { toRefs, reactive, onMounted } from 'vue'; import { useAttrs, toRefs, reactive, onMounted } from 'vue';
import { tagApi } from '../tag/api'; import { tagApi } from '../tag/api';
const attrs = useAttrs()
//定义事件 //定义事件
const emit = defineEmits(['changeTag', 'update:tagPath']) const emit = defineEmits(['changeTag', 'update:tagPath'])
@@ -41,6 +42,9 @@ const {
} = toRefs(state) } = toRefs(state)
onMounted(async () => { onMounted(async () => {
if (attrs.modelValue) {
state.selectTags = attrs.modelValue;
}
state.tags = await tagApi.getTagTrees.request(null); state.tags = await tagApi.getTagTrees.request(null);
}); });

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

@@ -12,7 +12,7 @@
</template> </template>
<template #queryRight> <template #queryRight>
<el-button v-auth="perms.saveDb" type="primary" icon="plus" @click="editDb(true)">添加</el-button> <el-button v-auth="perms.saveDb" type="primary" icon="plus" @click="editDb(false)">添加</el-button>
<el-button v-auth="perms.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger" <el-button v-auth="perms.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger"
icon="delete">删除</el-button> icon="delete">删除</el-button>
</template> </template>
@@ -138,59 +138,47 @@
</el-dialog> </el-dialog>
<el-dialog width="90%" :title="`${sqlExecLogDialog.title} - SQL执行记录`" :before-close="onBeforeCloseSqlExecDialog" <el-dialog width="90%" :title="`${sqlExecLogDialog.title} - SQL执行记录`" :before-close="onBeforeCloseSqlExecDialog"
v-model="sqlExecLogDialog.visible"> :close-on-click-modal="false" v-model="sqlExecLogDialog.visible">
<div class="toolbar"> <page-table height="100%" ref="sqlExecDialogPageTableRef" :query="sqlExecLogDialog.queryConfig"
<el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" filterable clearable> v-model:query-form="sqlExecLogDialog.query" :data="sqlExecLogDialog.data"
<el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item"> :columns="sqlExecLogDialog.columns" :total="sqlExecLogDialog.total"
</el-option> v-model:page-size="sqlExecLogDialog.query.pageSize" v-model:page-num="sqlExecLogDialog.query.pageNum"
</el-select> @pageChange="searchSqlExecLog()">
<el-input v-model="sqlExecLogDialog.query.table" placeholder="请输入表名" clearable class="ml5"
style="width: 180px" /> <template #dbSelect>
<el-select v-model="sqlExecLogDialog.query.type" placeholder="请选择操作类型" clearable class="ml5"> <el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" filterable clearable>
<el-option v-for="item in enums.DbSqlExecTypeEnum as any" :key="item.value" :label="item.label" <el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item">
:value="item.value"> </el-option> </el-option>
</el-select> </el-select>
<el-button class="ml5" @click="searchSqlExecLog" type="success" icon="search"></el-button> </template>
</div>
<el-table border stripe :data="sqlExecLogDialog.data" size="small"> <template #typeSelect>
<el-table-column prop="db" label="数据库" min-width="60" show-overflow-tooltip> </el-table-column> <el-select v-model="sqlExecLogDialog.query.type" placeholder="请选择操作类型" clearable>
<el-table-column prop="table" label="表" min-width="60" show-overflow-tooltip> </el-table-column> <el-option v-for="item in enums.DbSqlExecTypeEnum as any" :key="item.value" :label="item.label"
<el-table-column prop="type" label="类型" width="85" show-overflow-tooltip> :value="item.value"> </el-option>
<template #default="scope"> </el-select>
<el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['UPDATE'].value" color="#E4F5EB" </template>
size="small">UPDATE</el-tag>
<el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['DELETE'].value" color="#F9E2AE" <template #type="{ data }">
size="small">DELETE</el-tag> <el-tag v-if="data.type == enums.DbSqlExecTypeEnum['UPDATE'].value" color="#E4F5EB"
<el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['INSERT'].value" color="#A8DEE0" size="small">UPDATE</el-tag>
size="small">INSERT</el-tag> <el-tag v-if="data.type == enums.DbSqlExecTypeEnum['DELETE'].value" color="#F9E2AE"
<el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['QUERY'].value" color="#A8DEE0" size="small">DELETE</el-tag>
size="small">QUERY</el-tag> <el-tag v-if="data.type == enums.DbSqlExecTypeEnum['INSERT'].value" color="#A8DEE0"
</template> size="small">INSERT</el-tag>
</el-table-column> <el-tag v-if="data.type == enums.DbSqlExecTypeEnum['QUERY'].value" color="#A8DEE0"
<el-table-column prop="sql" label="SQL" min-width="230" show-overflow-tooltip> </el-table-column> size="small">QUERY</el-tag>
<el-table-column prop="oldValue" label="原值" min-width="150" show-overflow-tooltip> </el-table-column> <el-tag v-if="data.type == enums.DbSqlExecTypeEnum['OTHER'].value" color="#F9E2AE"
<el-table-column prop="creator" label="执行人" min-width="60" show-overflow-tooltip> </el-table-column> size="small">OTHER</el-tag>
<el-table-column prop="createTime" label="执行时间" show-overflow-tooltip> </template>
<template #default="scope">
{{ dateFormat(scope.row.createTime) }} <template #action="{ data }">
</template> <el-link
</el-table-column> v-if="data.type == enums.DbSqlExecTypeEnum['UPDATE'].value || data.type == enums.DbSqlExecTypeEnum['DELETE'].value"
<el-table-column prop="remark" label="备注" min-width="60" show-overflow-tooltip> </el-table-column> type="primary" plain size="small" :underline="false" @click="onShowRollbackSql(data)">
<el-table-column label="操作" min-width="50" fixed="right"> 还原SQL</el-link>
<template #default="scope"> </template>
<el-link </page-table>
v-if="scope.row.type == enums.DbSqlExecTypeEnum['UPDATE'].value || scope.row.type == enums.DbSqlExecTypeEnum['DELETE'].value"
type="primary" plain size="small" :underline="false" @click="onShowRollbackSql(scope.row)">
还原SQL</el-link>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-pagination style="text-align: right" @current-change="handleSqlExecPageChange"
:total="sqlExecLogDialog.total" layout="prev, pager, next, total, jumper"
v-model:current-page="sqlExecLogDialog.query.pageNum" :page-size="sqlExecLogDialog.query.pageSize">
</el-pagination>
</el-row>
</el-dialog> </el-dialog>
<el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible"> <el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible">
@@ -304,7 +292,7 @@ const columns = ref([
// 该用户拥有的的操作列按钮权限 // 该用户拥有的的操作列按钮权限
const actionBtns = hasPerms([perms.saveDb,]) const actionBtns = hasPerms([perms.saveDb,])
const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight() const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight().alignCenter()
const pageTableRef: any = ref(null) const pageTableRef: any = ref(null)
@@ -340,6 +328,22 @@ const state = reactive({
}, },
// sql执行记录弹框 // sql执行记录弹框
sqlExecLogDialog: { sqlExecLogDialog: {
queryConfig: [
TableQuery.slot("db", "数据库", "dbSelect"),
TableQuery.text("table", "表名"),
TableQuery.slot("type", "操作类型", "typeSelect"),
],
columns: [
TableColumn.new("db", "数据库"),
TableColumn.new("table", "表"),
TableColumn.new("type", "类型").isSlot().setAddWidth(10),
TableColumn.new("creator", "执行人"),
TableColumn.new("sql", "SQL"),
TableColumn.new("oldValue", "原值"),
TableColumn.new("createTime", "执行时间").isTime(),
TableColumn.new("remark", "备注"),
TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight().alignCenter(),
],
title: '', title: '',
visible: false, visible: false,
data: [], data: [],
@@ -351,7 +355,7 @@ const state = reactive({
table: '', table: '',
type: null, type: null,
pageNum: 1, pageNum: 1,
pageSize: 12, pageSize: 10,
}, },
}, },
rollbackSqlDialog: { rollbackSqlDialog: {
@@ -533,11 +537,6 @@ const searchSqlExecLog = async () => {
state.sqlExecLogDialog.total = res.total; state.sqlExecLogDialog.total = res.total;
}; };
const handleSqlExecPageChange = (curPage: number) => {
state.sqlExecLogDialog.query.pageNum = curPage;
searchSqlExecLog();
};
/** /**
* 选择导出数据库表 * 选择导出数据库表
*/ */

3
mayfly_go_web/src/views/ops/db/enums.ts
View File

@@ -8,5 +8,6 @@ export default {
DbSqlExecTypeEnum: new Enum().add('UPDATE', 'UPDATE', 1) DbSqlExecTypeEnum: new Enum().add('UPDATE', 'UPDATE', 1)
.add('DELETE', 'DELETE', 2) .add('DELETE', 'DELETE', 2)
.add('INSERT', 'INSERT', 3) .add('INSERT', 'INSERT', 3)
.add('QUERY', 'QUERY', 4), .add('QUERY', 'QUERY', 4)
.add('OTHER', 'OTHER', -1),
} }

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="file-manage"> <div class="file-manage">
<el-dialog :title="title" v-model="dialogVisible" :show-close="true" :before-close="handleClose" width="800px"> <el-dialog :title="title" v-model="dialogVisible" :show-close="true" :before-close="handleClose" width="50%">
<div class="toolbar"> <div class="toolbar">
<div style="float: right"> <div style="float: right">
<el-button v-auth="'machine:file:add'" type="primary" @click="add" icon="plus" plain>添加 <el-button v-auth="'machine:file:add'" type="primary" @click="add" icon="plus" plain>添加
@@ -14,7 +14,7 @@
</el-input> </el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="类型" min-width="50px"> <el-table-column prop="name" label="类型" width="130px">
<template #default="scope"> <template #default="scope">
<el-select :disabled="scope.row.id != null" v-model="scope.row.type" style="width: 100px" <el-select :disabled="scope.row.id != null" v-model="scope.row.type" style="width: 100px"
placeholder="请选择"> placeholder="请选择">
@@ -23,25 +23,25 @@
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="path" label="路径" width> <el-table-column prop="path" label="路径" min-width="150px" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.path" :disabled="scope.row.id != null" clearable> <el-input v-model="scope.row.path" :disabled="scope.row.id != null" clearable>
</el-input> </el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width> <el-table-column label="操作" min-wdith="180px">
<template #default="scope"> <template #default="scope">
<el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success"
icon="success-filled" plain>确定</el-button> icon="success-filled" plain></el-button>
<el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets" <el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets"
plain>查看</el-button> plain></el-button>
<el-button v-auth="'machine:file:del'" type="danger" @click="deleteRow(scope.$index, scope.row)" <el-button v-auth="'machine:file:del'" type="danger" @click="deleteRow(scope.$index, scope.row)"
icon="delete" plain>删除</el-button> icon="delete" plain></el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-row style="margin-top: 10px" type="flex" justify="end"> <el-row style="margin-top: 10px" type="flex" justify="end">
<el-pagination small style="text-align: center" :total="total" layout="prev, pager, next, total, jumper" <el-pagination style="text-align: center" :total="total" layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum" :page-size="query.pageSize" @current-change="handlePageChange"> v-model:current-page="query.pageNum" :page-size="query.pageSize" @current-change="handlePageChange">
</el-pagination> </el-pagination>
</el-row> </el-row>

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

@@ -186,7 +186,7 @@ const columns = ref([
TableColumn.new("username", "用户名"), TableColumn.new("username", "用户名"),
TableColumn.new("status", "状态").isSlot().setMinWidth(85), TableColumn.new("status", "状态").isSlot().setMinWidth(85),
TableColumn.new("remark", "备注"), TableColumn.new("remark", "备注"),
TableColumn.new("action", "操作").isSlot().setMinWidth(238).fixedRight(), TableColumn.new("action", "操作").isSlot().setMinWidth(238).fixedRight().alignCenter(),
]) ])
// 该用户拥有的的操作列按钮权限，使用v-if进行判断，v-auth对el-dropdown-item无效 // 该用户拥有的的操作列按钮权限，使用v-if进行判断，v-auth对el-dropdown-item无效
const actionBtns = hasPerms([perms.updateMachine, perms.closeCli]) const actionBtns = hasPerms([perms.updateMachine, perms.closeCli])

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

@@ -1,55 +1,40 @@
<template> <template>
<div class="file-manage"> <div class="file-manage">
<el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" <el-dialog @open="getScripts()" :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true"
:before-close="handleClose" width="60%"> :before-close="handleClose" width="55%">
<div class="toolbar">
<div style="float: left"> <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :data="scriptTable"
<el-select v-model="type" @change="getScripts" placeholder="请选择"> :columns="columns" :total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum"
@pageChange="getScripts()" :show-selection="true" v-model:selection-data="selectionData">
<template #typeSelect>
<el-select v-model="type" placeholder="请选择">
<el-option :key="0" label="私有" :value="0"> </el-option> <el-option :key="0" label="私有" :value="0"> </el-option>
<el-option :key="1" label="公共" :value="1"> </el-option> <el-option :key="1" label="公共" :value="1"> </el-option>
</el-select> </el-select>
</div> </template>
<div style="float: right">
<el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary" icon="tickets" <template #type="{ data }">
plain>查看</el-button> {{ enums.scriptTypeEnum.getLabelByValue(data.type) }}
</template>
<template #queryRight>
<el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus" <el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus"
plain>添加</el-button> plain>添加</el-button>
<el-button v-auth="'machine:script:del'" :disabled="currentId == null" type="danger" <el-button v-auth="'machine:script:del'" :disabled="selectionData.length < 1" type="danger"
@click="deleteRow(currentData)" icon="delete" plain>删除</el-button> @click="deleteRow(selectionData)" icon="delete" plain>删除</el-button>
</div> </template>
</div>
<el-table :data="scriptTable" @current-change="choose" stripe border v-loading="loading" style="width: 100%"> <template #action="{ data }">
<el-table-column label="选择" width="55px"> <el-button v-auth="'machine:script:run'" v-if="data.id != null" @click="runScript(data)" type="primary"
<template #default="scope"> icon="video-play" link>执行
<el-radio v-model="currentId" :label="scope.row.id"> </el-button>
<i></i>
</el-radio> <el-button @click="editScript(data)" type="primary" icon="tickets" link>查看
</template> </el-button>
</el-table-column> </template>
<el-table-column prop="name" label="名称" :min-width="70"> </el-table-column> </page-table>
<el-table-column prop="description" label="描述" :min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" label="类型" :min-width="50">
<template #default="scope">
{{ enums.scriptTypeEnum.getLabelByValue(scope.row.type) }}
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button v-if="scope.row.id == null" type="success" icon="el-icon-success" 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" plain>执行
</el-button>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 10px" type="flex" justify="end">
<el-pagination small style="text-align: center" :total="total" layout="prev, pager, next, total, jumper"
v-model:current-page="query.pageNum" :page-size="query.pageSize" @current-change="handlePageChange">
</el-pagination>
</el-row>
</el-dialog> </el-dialog>
<el-dialog title="脚本参数" v-model="scriptParamsDialog.visible" width="400px"> <el-dialog title="脚本参数" v-model="scriptParamsDialog.visible" width="400px">
@@ -67,7 +52,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button type="primary" @click="hasParamsRun(currentData)">确 定</el-button> <el-button type="primary" @click="hasParamsRun()">确 定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@@ -95,6 +80,8 @@ import SshTerminal from './SshTerminal.vue';
import { machineApi } from './api'; import { machineApi } from './api';
import enums from './enums'; import enums from './enums';
import ScriptEdit from './ScriptEdit.vue'; import ScriptEdit from './ScriptEdit.vue';
import PageTable from '@/components/pagetable/PageTable.vue'
import { TableColumn, TableQuery } from '@/components/pagetable';
const props = defineProps({ const props = defineProps({
visible: { type: Boolean }, visible: { type: Boolean },
@@ -105,16 +92,25 @@ const props = defineProps({
const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']) const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
const paramsForm: any = ref(null); const paramsForm: any = ref(null);
const pageTableRef: any = ref(null);
const state = reactive({ const state = reactive({
dialogVisible: false, dialogVisible: false,
type: 0, type: 0,
currentId: null, selectionData: [],
currentData: null, queryConfig: [
loading: false, TableQuery.slot("type", "类型", "typeSelect"),
],
columns: [
TableColumn.new("name", "名称"),
TableColumn.new("description", "描述"),
TableColumn.new("type", "类型").isSlot().setAddWidth(5),
TableColumn.new("action", "操作").isSlot().setMinWidth(130).alignCenter(),
],
query: { query: {
machineId: 0 as any, machineId: 0 as any,
pageNum: 1, pageNum: 1,
pageSize: 8, pageSize: 6,
}, },
editDialog: { editDialog: {
visible: false, visible: false,
@@ -125,6 +121,7 @@ const state = reactive({
total: 0, total: 0,
scriptTable: [], scriptTable: [],
scriptParamsDialog: { scriptParamsDialog: {
script: null,
visible: false, visible: false,
params: {}, params: {},
paramsFormItem: [], paramsFormItem: [],
@@ -142,10 +139,10 @@ const state = reactive({
const { const {
dialogVisible, dialogVisible,
loading, queryConfig,
columns,
type, type,
currentId, selectionData,
currentData,
query, query,
editDialog, editDialog,
total, total,
@@ -157,36 +154,28 @@ const {
watch(props, async (newValue) => { watch(props, async (newValue) => {
state.dialogVisible = newValue.visible; state.dialogVisible = newValue.visible;
if (props.machineId && newValue.visible) {
await getScripts();
}
}); });
const getScripts = async () => { const getScripts = async () => {
try { try {
state.loading = true; // 通过open事件才开获取到pageTableRef值
state.currentId = null; pageTableRef.value.loading(true)
state.currentData = null;
state.query.machineId = state.type == 0 ? props.machineId : 9999999; state.query.machineId = state.type == 0 ? props.machineId : 9999999;
const res = await machineApi.scripts.request(state.query); const res = await machineApi.scripts.request(state.query);
state.scriptTable = res.list; state.scriptTable = res.list;
state.total = res.total; state.total = res.total;
} finally { } finally {
state.loading = false; pageTableRef.value.loading(false)
} }
}; };
const handlePageChange = (curPage: number) => {
state.query.pageNum = curPage;
getScripts();
};
const runScript = async (script: any) => { const runScript = async (script: any) => {
// 如果存在参数，则弹窗输入参数后执行 // 如果存在参数，则弹窗输入参数后执行
if (script.params) { if (script.params) {
state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params); state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) { if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
state.scriptParamsDialog.visible = true; state.scriptParamsDialog.visible = true;
state.scriptParamsDialog.script = script;
return; return;
} }
} }
@@ -195,14 +184,15 @@ const runScript = async (script: any) => {
}; };
// 有参数的脚本执行函数 // 有参数的脚本执行函数
const hasParamsRun = async (script: any) => { const hasParamsRun = async () => {
// 如果脚本参数弹窗显示，则校验参数表单数据通过后执行 // 如果脚本参数弹窗显示，则校验参数表单数据通过后执行
if (state.scriptParamsDialog.visible) { if (state.scriptParamsDialog.visible) {
paramsForm.value.validate((valid: any) => { paramsForm.value.validate((valid: any) => {
if (valid) { if (valid) {
run(script); run(state.scriptParamsDialog.script);
state.scriptParamsDialog.params = {}; state.scriptParamsDialog.params = {};
state.scriptParamsDialog.visible = false; state.scriptParamsDialog.visible = false;
state.scriptParamsDialog.script = null;
paramsForm.value.resetFields(); paramsForm.value.resetFields();
} else { } else {
return false; return false;
@@ -218,7 +208,7 @@ const run = async (script: any) => {
const res = await machineApi.runScript.request({ const res = await machineApi.runScript.request({
machineId: props.machineId, machineId: props.machineId,
scriptId: script.id, scriptId: script.id,
params: state.scriptParamsDialog.params, params: JSON.stringify(state.scriptParamsDialog.params),
}); });
if (noResult) { if (noResult) {
@@ -261,16 +251,6 @@ const closeTermnial = () => {
state.terminalDialog.machineId = 0; state.terminalDialog.machineId = 0;
}; };
/**
* 选择数据
*/
const choose = (item: any) => {
if (!item) {
return;
}
state.currentId = item.id;
state.currentData = item;
};
const editScript = (data: any) => { const editScript = (data: any) => {
state.editDialog.machineId = props.machineId as any; state.editDialog.machineId = props.machineId as any;
@@ -287,8 +267,8 @@ const submitSuccess = () => {
getScripts(); getScripts();
}; };
const deleteRow = (row: any) => { const deleteRow = (rows: any) => {
ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', { ElMessageBox.confirm(`此操作将删除【${rows.map((x: any) => x.name).join(", ")}】脚本信息, 是否继续?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
@@ -296,7 +276,7 @@ const deleteRow = (row: any) => {
machineApi.deleteScript machineApi.deleteScript
.request({ .request({
machineId: props.machineId, machineId: props.machineId,
scriptId: row.id, scriptId: rows.map((x: any) => x.id).join(","),
}) })
.then(() => { .then(() => {
getScripts(); getScripts();
@@ -312,6 +292,7 @@ const handleClose = () => {
emit('update:visible', false); emit('update:visible', false);
emit('update:machineId', null); emit('update:machineId', null);
emit('cancel'); emit('cancel');
state.type = 0;
state.scriptTable = []; state.scriptTable = [];
state.scriptParamsDialog.paramsFormItem = []; state.scriptParamsDialog.paramsFormItem = [];
}; };

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

@@ -52,7 +52,7 @@ const state = reactive({
TableColumn.new("createTime", "创建时间").isTime(), TableColumn.new("createTime", "创建时间").isTime(),
TableColumn.new("creator", "修改者"), TableColumn.new("creator", "修改者"),
TableColumn.new("createTime", "修改时间").isTime(), TableColumn.new("createTime", "修改时间").isTime(),
TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(65), TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(65).alignCenter(),
], ],
total: 0, total: 0,
authcerts: [], authcerts: [],

8
mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
View File

@@ -10,11 +10,9 @@
<SvgIcon name="iconfont icon-op-mongo" :size="18" /> <SvgIcon name="iconfont icon-op-mongo" :size="18" />
</template> </template>
<template #default> <template #default>
<el-form class="instances-pop-form" label-width="50px" :size="'small'"> <el-form class="instances-pop-form" label-width="auto" :size="'small'">
<el-form class="instances-pop-form" label-width="55px" :size="'small'"> <el-form-item label="名称:">{{ data.params.name }}</el-form-item>
<el-form-item label="名称:">{{ data.params.name }}</el-form-item> <el-form-item label="链接:">{{ data.params.uri }}</el-form-item>
<el-form-item label="链接:">{{ data.params.uri }}</el-form-item>
</el-form>
</el-form> </el-form>
</template> </template>
</el-popover> </el-popover>

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

@@ -189,7 +189,7 @@ const columns = ref([
TableColumn.new("uri", "连接uri"), TableColumn.new("uri", "连接uri"),
TableColumn.new("createTime", "创建时间").isTime(), TableColumn.new("createTime", "创建时间").isTime(),
TableColumn.new("creator", "创建人"), TableColumn.new("creator", "创建人"),
TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight(), TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight().alignCenter(),
]) ])
const state = reactive({ const state = reactive({

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

@@ -35,11 +35,11 @@
<div class="mt10 ml5"> <div class="mt10 ml5">
<el-col> <el-col>
<el-form class="search-form" label-position="right" :inline="true" label-width="auto"> <el-form class="search-form" label-position="right" :inline="true" label-width="auto">
<el-form-item label="key" label-width="40px"> <el-form-item label="key" label-width="auto">
<el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match" <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match"
@clear="clear()" clearable></el-input> @clear="clear()" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="count" label-width="40px"> <el-form-item label="count" label-width="auto">
<el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count"> <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count">
</el-input> </el-input>
</el-form-item> </el-form-item>
@@ -96,7 +96,7 @@
<el-dialog title="新增Key" v-model="newKeyDialog.visible" width="500px" :destroy-on-close="true" <el-dialog title="新增Key" v-model="newKeyDialog.visible" width="500px" :destroy-on-close="true"
:close-on-click-modal="false"> :close-on-click-modal="false">
<el-form ref="keyForm" label-width="50px"> <el-form ref="keyForm" label-width="auto">
<el-form-item prop="key" label="键名"> <el-form-item prop="key" label="键名">
<el-input v-model.trim="keyDetailDialog.keyInfo.key" placeholder="请输入键名"></el-input> <el-input v-model.trim="keyDetailDialog.keyInfo.key" placeholder="请输入键名"></el-input>
</el-form-item> </el-form-item>

4
mayfly_go_web/src/views/ops/redis/RedisEdit.vue
View File

@@ -37,8 +37,8 @@
</template></el-input> </template></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="db" label="库号:" required> <el-form-item prop="db" label="库号:" required>
<el-select @change="changeDb" v-model="dbList" multiple allow-create filterable <el-select @change="changeDb" :disabled="form.mode == 'cluster'" v-model="dbList" multiple
placeholder="请选择可操作库号" style="width: 100%"> allow-create filterable placeholder="请选择可操作库号" style="width: 100%">
<el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db" <el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db"
:label="db" :value="db" /> :label="db" :value="db" />
</el-select> </el-select>

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

@@ -164,7 +164,7 @@ const columns = ref([
TableColumn.new("mode", "mode"), TableColumn.new("mode", "mode"),
TableColumn.new("remark", "备注"), TableColumn.new("remark", "备注"),
TableColumn.new("more", "更多").isSlot().setMinWidth(155).fixedRight(), TableColumn.new("more", "更多").isSlot().setMinWidth(155).fixedRight(),
TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight(), TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight().alignCenter(),
]) ])
const state = reactive({ const state = reactive({

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

@@ -109,7 +109,7 @@
v-model:current-page="showMemDialog.query.pageNum" :page-size="showMemDialog.query.pageSize" /> v-model:current-page="showMemDialog.query.pageNum" :page-size="showMemDialog.query.pageSize" />
<el-dialog width="400px" title="添加成员" :before-close="cancelAddMember" v-model="showMemDialog.addVisible"> <el-dialog width="400px" title="添加成员" :before-close="cancelAddMember" v-model="showMemDialog.addVisible">
<el-form :model="showMemDialog.memForm" label-width="70px"> <el-form :model="showMemDialog.memForm" label-width="auto">
<el-form-item label="账号:"> <el-form-item label="账号:">
<el-select style="width: 100%" remote :remote-method="getAccount" <el-select style="width: 100%" remote :remote-method="getAccount"
v-model="showMemDialog.memForm.accountIds" filterable multiple placeholder="请输入账号模糊搜索并选择"> v-model="showMemDialog.memForm.accountIds" filterable multiple placeholder="请输入账号模糊搜索并选择">
@@ -162,7 +162,7 @@ const state = reactive({
TableColumn.new("remark", "备注"), TableColumn.new("remark", "备注"),
TableColumn.new("createTime", "创建时间").isTime(), TableColumn.new("createTime", "创建时间").isTime(),
TableColumn.new("creator", "创建人"), TableColumn.new("creator", "创建人"),
TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight(), TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight().alignCenter(),
], ],
total: 0, total: 0,
data: [], data: [],

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

@@ -108,7 +108,7 @@ const columns = ref([
// 该用户拥有的的操作列按钮权限 // 该用户拥有的的操作列按钮权限
const actionBtns = hasPerms([perms.addAccount, perms.saveAccountRole, perms.changeAccountStatus]) const actionBtns = hasPerms([perms.addAccount, perms.saveAccountRole, perms.changeAccountStatus])
const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(260).noShowOverflowTooltip() const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(260).noShowOverflowTooltip().alignCenter()
const state = reactive({ const state = reactive({
/** /**

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

@@ -73,7 +73,7 @@ const columns = ref([
TableColumn.new("modifier", "更新账号"), TableColumn.new("modifier", "更新账号"),
TableColumn.new("updateTime", "更新时间").isTime(), TableColumn.new("updateTime", "更新时间").isTime(),
]) ])
const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(130).noShowOverflowTooltip(); const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(130).noShowOverflowTooltip().alignCenter();
const actionBtns = hasPerms([perms.saveConfig]) const actionBtns = hasPerms([perms.saveConfig])
const paramsFormRef: any = ref(null) const paramsFormRef: any = ref(null)

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

@@ -73,7 +73,7 @@ const columns = ref([
]) ])
const actionBtns = hasPerms([perms.updateRole, perms.saveRoleResource]) const actionBtns = hasPerms([perms.updateRole, perms.saveRoleResource])
const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(160).fixedRight() const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(160).fixedRight().alignCenter()
const state = reactive({ const state = reactive({
query: { query: {

1
server/internal/db/application/db_sql_exec.go
View File

@@ -78,6 +78,7 @@ func createSqlExecRecord(execSqlReq *DbSqlExecReq) *entity.DbSqlExec {
func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error) { func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error) {
sql := execSqlReq.Sql sql := execSqlReq.Sql
dbSqlExecRecord := createSqlExecRecord(execSqlReq) dbSqlExecRecord := createSqlExecRecord(execSqlReq)
dbSqlExecRecord.Type = entity.DbSqlExecTypeOther
var execRes *DbSqlExecRes var execRes *DbSqlExecRes
isSelect := false isSelect := false

9
server/internal/db/domain/entity/db_sql_exec.go
View File

@@ -16,8 +16,9 @@ type DbSqlExec struct {
} }
const ( const (
DbSqlExecTypeUpdate int8 = 1 // 更新类型 DbSqlExecTypeOther int8 = -1 // 其他类型
DbSqlExecTypeDelete int8 = 2 // 删除类型 DbSqlExecTypeUpdate int8 = 1 // 更新类型
DbSqlExecTypeInsert int8 = 3 // 插入类型 DbSqlExecTypeDelete int8 = 2 // 删除类型
DbSqlExecTypeQuery int8 = 4 // 查询类型，如select、show等 DbSqlExecTypeInsert int8 = 3 // 插入类型
DbSqlExecTypeQuery int8 = 4 // 查询类型，如select、show等
) )

16
server/internal/machine/api/machine_script.go
View File

@@ -12,6 +12,7 @@ import (
"mayfly-go/pkg/req" "mayfly-go/pkg/req"
"mayfly-go/pkg/utils" "mayfly-go/pkg/utils"
"strconv" "strconv"
"strings"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
) )
@@ -42,12 +43,15 @@ func (m *MachineScript) SaveMachineScript(rc *req.Ctx) {
} }
func (m *MachineScript) DeleteMachineScript(rc *req.Ctx) { func (m *MachineScript) DeleteMachineScript(rc *req.Ctx) {
msa := m.MachineScriptApp idsStr := ginx.PathParam(rc.GinCtx, "scriptId")
sid := GetMachineScriptId(rc.GinCtx) rc.ReqParam = idsStr
ms := msa.GetById(sid) ids := strings.Split(idsStr, ",")
biz.NotNil(ms, "该脚本不存在")
rc.ReqParam = fmt.Sprintf("[scriptId: %d, name: %s, desc: %s, script: %s]", sid, ms.Name, ms.Description, ms.Script) for _, v := range ids {
msa.Delete(sid) value, err := strconv.Atoi(v)
biz.ErrIsNilAppendErr(err, "string类型转换为int异常: %s")
m.MachineScriptApp.Delete(uint64(value))
}
} }
func (m *MachineScript) RunMachineScript(rc *req.Ctx) { func (m *MachineScript) RunMachineScript(rc *req.Ctx) {

4
server/internal/redis/api/redis.go
View File

@@ -115,9 +115,9 @@ func (r *Redis) RedisInfo(rc *req.Ctx) {
var res string var res string
var err error var err error
if section == "" { if section == "" {
res, err = ri.Cli.Info(ctx).Result() res, err = redisCli.Info(ctx).Result()
} else { } else {
res, err = ri.Cli.Info(ctx, section).Result() res, err = redisCli.Info(ctx, section).Result()
} }
biz.ErrIsNilAppendErr(err, "获取redis info失败: %s") biz.ErrIsNilAppendErr(err, "获取redis info失败: %s")

4
server/internal/redis/application/redis.go
View File

@@ -346,13 +346,13 @@ func (r *RedisInstance) Close() {
mode := r.Info.Mode mode := r.Info.Mode
if mode == entity.RedisModeStandalone || mode == entity.RedisModeSentinel { if mode == entity.RedisModeStandalone || mode == entity.RedisModeSentinel {
if err := r.Cli.Close(); err != nil { if err := r.Cli.Close(); err != nil {
global.Log.Errorf("关闭redis单机实例[%d]连接失败: %s", r.Id, err.Error()) global.Log.Errorf("关闭redis单机实例[%s]连接失败: %s", r.Id, err.Error())
} }
r.Cli = nil r.Cli = nil
} }
if mode == entity.RedisModeCluster { if mode == entity.RedisModeCluster {
if err := r.ClusterCli.Close(); err != nil { if err := r.ClusterCli.Close(); err != nil {
global.Log.Errorf("关闭redis集群实例[%d]连接失败: %s", r.Id, err.Error()) global.Log.Errorf("关闭redis集群实例[%s]连接失败: %s", r.Id, err.Error())
} }
r.ClusterCli = nil r.ClusterCli = nil
} }