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

refactor: 列表操作按钮调整

Browse Source
This commit is contained in:
meilin.huang
2023-11-09 12:11:11 +08:00
parent a1b25e9766
commit 27c53385f2
8 changed files with 83 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,10 +56,10 @@
{{ `${data.host}:${data.port}` }}
</template>
<template #database="{ data }">
<el-popover placement="right" trigger="click" :width="300">
<template #action="{ data }">
<el-popover placement="left" trigger="click" :width="300">
<template #reference>
<el-link type="primary" :underline="false" plain @click="selectDb(data.dbs)">查看 </el-link>
<el-button type="primary" @click="selectDb(data.dbs)" link>库操作</el-button>
</template>
<el-input v-model="filterDb.param" @keyup="filterSchema" class="w-50 m-2" placeholder="搜索" size="small">
<template #prefix>
@@ -80,16 +80,28 @@
</el-link>
</div>
</el-popover>
</template>
<template #more="{ data }">
<el-button @click="showInfo(data)" link>详情</el-button>
<el-button class="ml5" type="primary" @click="onShowSqlExec(data)" link>SQL执行记录</el-button>
</template>
<el-divider direction="vertical" border-style="dashed" />
<el-button type="primary" @click="onShowSqlExec(data)" link>SQL记录</el-button>
<template #action="{ data }">
<el-button v-if="actionBtns[perms.saveDb]" @click="editDb(data)" type="primary" link>编辑</el-button>
<el-button v-if="data.type == 'mysql'" class="ml5" type="primary" @click="onDumpDbs(data)" link>导出</el-button>
<el-divider direction="vertical" border-style="dashed" />
<el-dropdown @command="handleMoreActionCommand">
<span class="el-dropdown-link-more">
更多
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{ type: 'detail', data }"> 详情 </el-dropdown-item>
<el-dropdown-item :command="{ type: 'edit', data }" v-if="actionBtns[perms.saveDb]"> 编辑 </el-dropdown-item>
<el-dropdown-item :command="{ type: 'dumpDb', data }" v-if="data.type == 'mysql'"> 导出 </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</page-table>
@@ -204,14 +216,12 @@ const columns = ref([
TableColumn.new('host', 'ip:port').isSlot().setAddWidth(40),
TableColumn.new('username', 'username'),
TableColumn.new('name', '名称'),
TableColumn.new('database', '数据库').isSlot().setMinWidth(70),
TableColumn.new('remark', '备注'),
TableColumn.new('more', '更多').isSlot().setMinWidth(180).fixedRight(),
]);
// 该用户拥有的的操作列按钮权限
const actionBtns = hasPerms([perms.base, perms.saveDb]);
const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(150).fixedRight().alignCenter();
const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(220).fixedRight().alignCenter();
const pageTableRef: any = ref(null);
@@ -338,6 +348,24 @@ const getInstances = async (instanceName = '') => {
}
};
const handleMoreActionCommand = (commond: any) => {
const data = commond.data;
const type = commond.type;
switch (type) {
case 'detail': {
showInfo(data);
return;
}
case 'edit': {
editDb(data);
return;
}
case 'dumpDb': {
onDumpDbs(data);
}
}
};
const editDb = async (data: any) => {
if (!data) {
state.dbEditDialog.data = null;
@@ -452,4 +480,12 @@ const filterSchema = () => {
}
};
</script>
<style lang="scss"></style>
<style lang="scss">
.el-dropdown-link-more {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
margin-top: 6px;
}
</style>

2
mayfly_go_web/src/views/ops/db/InstanceEdit.vue
View File

@@ -40,7 +40,7 @@
</el-form-item>
<el-form-item prop="remark" label="备注">
<el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
<el-input v-model="form.remark" auto-complete="off" type="textarea"></el-input>
</el-form-item>
</el-tab-pane>

13
mayfly_go_web/src/views/ops/db/InstanceList.vue
View File

@@ -20,11 +20,8 @@
>
</template>
<template #more="{ data }">
<el-button @click="showInfo(data)" link>详情</el-button>
</template>
<template #action="{ data }">
<el-button @click="showInfo(data)" link>详情</el-button>
<el-button v-if="actionBtns[perms.saveInstance]" @click="editInstance(data)" type="primary" link>编辑</el-button>
</template>
</page-table>
@@ -81,11 +78,11 @@ const queryConfig = [TableQuery.text('name', '名称')];
const columns = ref([
TableColumn.new('name', '名称'),
TableColumn.new('host', 'host:port').setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
TableColumn.new('type', '类型'),
TableColumn.new('host', 'host:port').setFormatFunc((data: any) => `${data.host}:${data.port}`),
TableColumn.new('username', '用户名'),
TableColumn.new('params', '连接参数'),
TableColumn.new('remark', '备注'),
TableColumn.new('more', '更多').isSlot().setMinWidth(50).fixedRight(),
]);
// 该用户拥有的的操作列按钮权限
@@ -173,7 +170,9 @@ const deleteInstance = async () => {
await dbApi.deleteInstance.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
ElMessage.success('删除成功');
search();
} catch (err) {}
} catch (err) {
//
}
};
</script>
<style lang="scss"></style>

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

@@ -74,7 +74,7 @@ const columns = ref([
TableColumn.new('uri', '连接uri'),
TableColumn.new('createTime', '创建时间').isTime(),
TableColumn.new('creator', '创建人'),
TableColumn.new('action', '操作').isSlot().setMinWidth(145).fixedRight().alignCenter(),
TableColumn.new('action', '操作').isSlot().setMinWidth(170).fixedRight().alignCenter(),
]);
const state = reactive({
@@ -126,7 +126,9 @@ const deleteMongo = async () => {
await mongoApi.deleteMongo.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
ElMessage.success('删除成功');
search();
} catch (err) {}
} catch (err) {
//
}
};
const search = async () => {

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

@@ -31,14 +31,11 @@
</span>
</template>
<template #more="{ data }">
<el-button @click="showDetail(data)" link>详情</el-button>
<template #action="{ data }">
<el-button v-if="data.mode === 'standalone' || data.mode === 'sentinel'" type="primary" @click="showInfoDialog(data)" link>单机信息</el-button>
<el-button @click="onShowClusterInfo(data)" v-if="data.mode === 'cluster'" type="primary" link>集群信息</el-button>
</template>
<template #action="{ data }">
<el-button @click="showDetail(data)" link>详情</el-button>
<el-button type="primary" link @click="editRedis(data)">编辑</el-button>
</template>
</page-table>
@@ -183,8 +180,7 @@ const columns = ref([
TableColumn.new('host', 'host:port'),
TableColumn.new('mode', 'mode'),
TableColumn.new('remark', '备注'),
TableColumn.new('more', '更多').isSlot().setMinWidth(155).fixedRight(),
TableColumn.new('action', '操作').isSlot().setMinWidth(65).fixedRight().alignCenter(),
TableColumn.new('action', '操作').isSlot().setMinWidth(200).fixedRight().alignCenter(),
]);
const state = reactive({
@@ -246,7 +242,9 @@ const deleteRedis = async () => {
await redisApi.delRedis.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
ElMessage.success('删除成功');
search();
} catch (err) {}
} catch (err) {
//
}
};
const showInfoDialog = async (redis: any) => {

12
server/go.mod
View File

@@ -12,7 +12,7 @@ require (
github.com/go-playground/universal-translator v0.18.1
github.com/go-playground/validator/v10 v10.14.0
github.com/go-sql-driver/mysql v1.7.1
github.com/golang-jwt/jwt/v5 v5.0.0
github.com/golang-jwt/jwt/v5 v5.1.0
github.com/gorilla/websocket v1.5.0
github.com/kanzihuang/vitess/go/vt/sqlparser v0.0.0-20231018071450-ac8d9f0167e9
github.com/lib/pq v1.10.9
@@ -25,8 +25,8 @@ require (
github.com/robfig/cron/v3 v3.0.1 // 定时任务
github.com/stretchr/testify v1.8.4
go.mongodb.org/mongo-driver v1.12.1 // mongo
golang.org/x/crypto v0.14.0 // ssh
golang.org/x/oauth2 v0.13.0
golang.org/x/crypto v0.15.0 // ssh
golang.org/x/oauth2 v0.14.0
gopkg.in/yaml.v3 v3.0.1
// gorm
gorm.io/driver/mysql v1.5.2
@@ -77,10 +77,10 @@ require (
golang.org/x/arch v0.3.0 // indirect
golang.org/x/exp v0.0.0-20230519143937-03e91628a987 // indirect
golang.org/x/image v0.0.0-20220302094943-723b81ca9867 // indirect
golang.org/x/net v0.16.0 // indirect
golang.org/x/net v0.18.0 // indirect
golang.org/x/sync v0.1.0 // indirect
golang.org/x/sys v0.13.0 // indirect
golang.org/x/text v0.13.0 // indirect
golang.org/x/sys v0.14.0 // indirect
golang.org/x/text v0.14.0 // indirect
google.golang.org/appengine v1.6.7 // indirect
google.golang.org/genproto v0.0.0-20230131230820-1c016267d619 // indirect
google.golang.org/grpc v1.52.3 // indirect

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

@@ -14,7 +14,6 @@ type DbSqlExec struct {
func (d *DbSqlExec) DbSqlExecs(rc *req.Ctx) {
queryCond, page := ginx.BindQueryAndPage(rc.GinCtx, new(entity.DbSqlExecQuery))
queryCond.CreatorId = rc.GetLoginAccount().Id
res, err := d.DbSqlExecApp.GetPageList(queryCond, page, new([]entity.DbSqlExec))
biz.ErrIsNil(err)
rc.ResData = res

13
server/internal/machine/mcm/client.go
View File

@@ -46,7 +46,8 @@ func (c *Cli) GetSession() (*ssh.Session, error) {
if err != nil {
// 获取session失败，则关闭cli，重试
DeleteCli(c.Info.Id)
return nil, errorx.NewBiz("请重试...")
logx.Errorf("获取机器客户端session失败: %s", err.Error())
return nil, errorx.NewBiz("获取会话失败, 请重试...")
}
return session, nil
}
@@ -69,11 +70,15 @@ func (c *Cli) Run(shell string) (string, error) {
// 获取机器的所有状态信息
func (c *Cli) GetAllStats() *Stats {
res, _ := c.Run(StatsShell)
infos := strings.Split(res, "-----")
stats := new(Stats)
res, err := c.Run(StatsShell)
if err != nil {
logx.Errorf("执行机器[id=%d, name=%s]运行状态信息脚本失败: %s", c.Info.Id, c.Info.Name, err.Error())
return stats
}
infos := strings.Split(res, "-----")
if len(infos) < 8 {
logx.Warnf("获取机器[id=%d, name=%s]的状态信息失败", c.Info.Id, c.Info.Name)
return stats
}
getUptime(infos[0], stats)