feature: 实现数据库实例管理

mayfly_go_web/src/views/ops/db/InstanceEdit.vue

@@ -0,0 +1,213 @@
+<template>
+    <div>
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
+            <el-form :model="form" ref="dbForm" :rules="rules" label-width="auto">
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="name" label="别名:" required>
+                            <el-input v-model.trim="form.name" placeholder="请输入数据库别名" auto-complete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="type" label="类型:" required>
+                            <el-select style="width: 100%" v-model="form.type" placeholder="请选择数据库类型">
+                                <el-option key="item.id" label="mysql" value="mysql"> </el-option>
+                                <el-option key="item.id" label="postgres" value="postgres"> </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item prop="host" label="host:" required>
+                            <el-col :span="18">
+                                <el-input :disabled="form.id !== undefined" v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
+                            </el-col>
+                            <el-col style="text-align: center" :span="1">:</el-col>
+                            <el-col :span="5">
+                                <el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
+                            </el-col>
+                        </el-form-item>
+                        <el-form-item prop="username" label="用户名:" required>
+                            <el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="password" label="密码:">
+                            <el-input
+                                type="password"
+                                show-password
+                                v-model.trim="form.password"
+                                placeholder="请输入密码，修改操作可不填"
+                                autocomplete="new-password"
+                            >
+                                <template v-if="form.id && form.id != 0" #suffix>
+                                    <el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
+                                        <template #reference>
+                                            <el-link @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码 </el-link>
+                                        </template>
+                                    </el-popover>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="remark" label="备注:">
+                            <el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
+
+                    <el-tab-pane label="其他配置" name="other">
+                        <el-form-item prop="params" label="连接参数:">
+                            <el-input v-model.trim="form.params" placeholder="其他连接参数，形如: key1=value1&key2=value2">
+                                <template #suffix>
+                                    <el-link
+                                        target="_blank"
+                                        href="https://github.com/go-sql-driver/mysql#parameters"
+                                        :underline="false"
+                                        type="primary"
+                                        class="mr5"
+                                        >参数参考</el-link
+                                    >
+                                </template>
+                            </el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="sshTunnelMachineId" label="SSH隧道:">
+                            <ssh-tunnel-select v-model="form.sshTunnelMachineId" />
+                        </el-form-item>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
+import { dbApi } from './api';
+import { ElMessage } from 'element-plus';
+import { notBlank } from '@/common/assert';
+import { RsaEncrypt } from '@/common/rsa';
+import TagSelect from '../component/TagSelect.vue';
+import SshTunnelSelect from '../component/SshTunnelSelect.vue';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    db: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入别名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    type: [
+        {
+            required: true,
+            message: '请选择数据库类型',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    host: [
+        {
+            required: true,
+            message: '请输入主机ip和port',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+};
+
+const dbForm: any = ref(null);
+
+const state = reactive({
+    dialogVisible: false,
+    tabActiveName: 'basic',
+    form: {
+        id: null,
+        type: null,
+        name: null,
+        host: '',
+        port: 3306,
+        username: null,
+        password: null,
+        params: null,
+        remark: '',
+        sshTunnelMachineId: null as any,
+    },
+    // 原密码
+    pwd: '',
+    btnLoading: false,
+});
+
+const { dialogVisible, tabActiveName, form, pwd, btnLoading } = toRefs(state);
+
+watch(props, (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!state.dialogVisible) {
+        return;
+    }
+    state.tabActiveName = 'basic';
+    if (newValue.db) {
+        state.form = { ...newValue.db };
+    } else {
+        state.form = { port: 3306 } as any;
+    }
+});
+
+const getDbPwd = async () => {
+    state.pwd = await dbApi.getInstancePwd.request({ id: state.form.id });
+};
+
+const btnOk = async () => {
+    if (!state.form.id) {
+        notBlank(state.form.password, '新增操作，密码不可为空');
+    }
+    dbForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const reqForm = { ...state.form };
+            reqForm.password = await RsaEncrypt(reqForm.password);
+            if (!state.form.sshTunnelMachineId) {
+                reqForm.sshTunnelMachineId = -1;
+            }
+            dbApi.saveInstance.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+
+                cancel();
+            });
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/InstanceList.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="db-list">
+        <page-table
+            ref="pageTableRef"
+            :query="queryConfig"
+            v-model:query-form="query"
+            :show-selection="true"
+            v-model:selection-data="state.selectionData"
+            :data="datas"
+            :columns="columns"
+            :total="total"
+            v-model:page-size="query.pageSize"
+            v-model:page-num="query.pageNum"
+            @pageChange="search()"
+        >
+            <template #queryRight>
+                <el-button v-auth="perms.saveInstance" type="primary" icon="plus" @click="editInstance(false)">添加</el-button>
+                <el-button v-auth="perms.delInstance" :disabled="selectionData.length < 1" @click="deleteInstance()" type="danger" icon="delete">删除</el-button>
+            </template>
+
+            <template #more="{ data }">
+                <el-button @click="showInfo(data)" link>详情</el-button>
+            </template>
+
+            <template #action="{ data }">
+                <el-button v-if="actionBtns[perms.saveInstance]" @click="editInstance(data)" type="primary" link>编辑</el-button>
+            </template>
+        </page-table>
+
+        <el-dialog v-model="infoDialog.visible">
+            <el-descriptions title="详情" :column="3" border>
+                <el-descriptions-item :span="2" label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="id">{{ infoDialog.data.id }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="主机">{{ infoDialog.data.host }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="端口">{{ infoDialog.data.port }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="用户名">{{ infoDialog.data.username }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="类型">{{ infoDialog.data.type }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="连接参数">{{ infoDialog.data.params }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }} </el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data.createTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="创建者">{{ infoDialog.data.creator }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
+            </el-descriptions>
+        </el-dialog>
+
+        <instance-edit @val-change="valChange" :title="instanceEditDialog.title" v-model:visible="instanceEditDialog.visible" v-model:db="instanceEditDialog.data"></instance-edit>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { dbApi } from './api';
+import { dateFormat } from '@/common/utils/date';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';
+
+const InstanceEdit = defineAsyncComponent(() => import('./InstanceEdit.vue'));
+
+const perms = {
+    saveInstance: 'instance:save',
+    delInstance: 'instance:del',
+};
+
+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('username', '用户名'),
+    TableColumn.new('remark', '备注'),
+    TableColumn.new('more', '更多').isSlot().setMinWidth(50).fixedRight(),
+]);
+
+// 该用户拥有的的操作列按钮权限
+const actionBtns = hasPerms([perms.saveInstance]);
+const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(65).fixedRight().alignCenter();
+
+const pageTableRef: any = ref(null);
+
+const state = reactive({
+    row: {},
+    dbId: 0,
+    db: '',
+    /**
+     * 选中的数据
+     */
+    selectionData: [],
+    /**
+     * 查询条件
+     */
+    query: {
+        name: null,
+        pageNum: 1,
+        pageSize: 10,
+    },
+    datas: [],
+    total: 0,
+    infoDialog: {
+        visible: false,
+        data: null as any,
+    },
+    instanceEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '新增数据库实例',
+    },
+});
+
+const {
+    dbId,
+    db,
+    selectionData,
+    query,
+    datas,
+    total,
+    infoDialog,
+    instanceEditDialog,
+} = toRefs(state);
+
+onMounted(async () => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.value.push(actionColumn);
+    }
+    search();
+});
+
+const search = async () => {
+    try {
+        pageTableRef.value.loading(true);
+        let res: any = await dbApi.instances.request(state.query);
+        state.datas = res.list;
+        state.total = res.total;
+    } finally {
+        pageTableRef.value.loading(false);
+    }
+};
+
+const showInfo = (info: any) => {
+    state.infoDialog.data = info;
+    state.infoDialog.visible = true;
+};
+
+const editInstance = async (data: any) => {
+    if (!data) {
+        state.instanceEditDialog.data = null;
+        state.instanceEditDialog.title = '新增数据库实例';
+    } else {
+        state.instanceEditDialog.data = data;
+        state.instanceEditDialog.title = '修改数据库实例';
+    }
+    state.instanceEditDialog.visible = true;
+};
+
+const valChange = () => {
+    search();
+};
+
+const deleteInstance = async () => {
+    try {
+        await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(', ')}】实例?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await dbApi.deleteInstance.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
+        ElMessage.success('删除成功');
+        search();
+    } catch (err) {}
+};
+
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/api.ts

@@ -26,4 +26,10 @@ export const dbApi = {
     deleteDbSql: Api.newDelete('/dbs/{id}/sql'),
     // 获取数据库sql执行记录
     getSqlExecs: Api.newGet('/dbs/{dbId}/sql-execs'),
+
+    // 获取权限列表
+    instances: Api.newGet('/instances'),
+    saveInstance: Api.newPost('/instances'),
+    getInstancePwd: Api.newGet('/instances/{id}/pwd'),
+    deleteInstance: Api.newDelete('/instances/{id}'),
 };