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: 团队成员分配使用pagetable组件重构

Browse Source
This commit is contained in:
meilin.huang
2023-07-07 14:43:51 +08:00
parent 5463ae9d7e
commit 183a6e4905
7 changed files with 220 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
mayfly_go_web/src/common/Enum.ts
View File

@@ -32,6 +32,10 @@ export class EnumValue {
return this; return this;
} }
tagTypeInfo(): EnumValue {
return this.setTagType('info');
}
tagTypeSuccess(): EnumValue { tagTypeSuccess(): EnumValue {
return this.setTagType('success'); return this.setTagType('success');
} }

8
mayfly_go_web/src/components/enumtag/EnumTag.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<el-tag v-bind="$attrs" :type="type" :color="color">{{ enumLabel }}</el-tag> <el-tag v-bind="$attrs" :type="type" :color="color" effect="plain">{{ enumLabel }}</el-tag>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -9,11 +9,11 @@ import EnumValue from '@/common/Enum';
const props = defineProps({ const props = defineProps({
enums: { enums: {
type: Object, // 需要为EnumValue类型 type: Object, // 需要为EnumValue类型
default: {}, required: true,
}, },
value: { value: {
type: Object, type: Object,
default: {}, required: true,
}, },
}); });
@@ -38,7 +38,7 @@ onMounted(() => {
}); });
const convert = (value: any) => { const convert = (value: any) => {
const enumValue = EnumValue.getEnumByValue(Object.values(props.enums) as any, value) as any; const enumValue = EnumValue.getEnumByValue(Object.values(props.enums as any) as any, value) as any;
if (!enumValue) { if (!enumValue) {
state.enumLabel = '-'; state.enumLabel = '-';
state.type = 'danger'; state.type = 'danger';

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

@@ -168,7 +168,7 @@ const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize
const props = defineProps({ const props = defineProps({
size: { size: {
type: String, type: String,
default: "", default: '',
}, },
inputWidth: { inputWidth: {
type: [Number, String], type: [Number, String],
@@ -188,11 +188,13 @@ const props = defineProps({
type: Array<TableColumn>, type: Array<TableColumn>,
default: function () { default: function () {
return []; return [];
} },
required: true,
}, },
// 表格数据 // 表格数据
data: { data: {
type: Array, type: Array,
required: true,
}, },
total: { total: {
type: [Number], type: [Number],
@@ -244,15 +246,15 @@ const {
} = toRefs(state) } = toRefs(state)
watch(() => props.queryForm, (newValue: any) => { watch(() => props.queryForm, (newValue: any) => {
state.queryForm = newValue state.queryForm = newValue;
}) })
watch(() => props.pageNum, (newValue: any) => { watch(() => props.pageNum, (newValue: any) => {
state.pageNum = newValue state.pageNum = newValue;
}) })
watch(() => props.pageSize, (newValue: any) => { watch(() => props.pageSize, (newValue: any) => {
state.pageSize = newValue state.pageSize = newValue;
}) })
watch(() => props.data, (newValue: any) => { watch(() => props.data, (newValue: any) => {
@@ -271,11 +273,11 @@ onMounted(() => {
state.pageNum = props.pageNum; state.pageNum = props.pageNum;
state.pageSize = pageSize; state.pageSize = pageSize;
state.queryForm = props.queryForm; state.queryForm = props.queryForm;
state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4] state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4];
// 如果没传输入框宽度，则根据组件size设置默认宽度 // 如果没传输入框宽度，则根据组件size设置默认宽度
if (!props.inputWidth) { if (!props.inputWidth) {
state.inputWidth = props.size == "small" ? "150px" : "200px" state.inputWidth = props.size == 'small' ? '150px' : '200px';
} else { } else {
state.inputWidth = props.inputWidth; state.inputWidth = props.inputWidth;
} }
@@ -284,13 +286,13 @@ onMounted(() => {
const getRowQueryItem = (row: number) => { const getRowQueryItem = (row: number) => {
// 第一行需要加个查询等按钮列 // 第一行需要加个查询等按钮列
if (row === 1) { if (row === 1) {
const res = props.query.slice(row - 1, defaultQueryCount.value) const res = props.query.slice(row - 1, defaultQueryCount.value);
// 查询等按钮列 // 查询等按钮列
res.push(TableQuery.slot("", "", "queryBtns")) res.push(TableQuery.slot("", "", "queryBtns"));
return res return res
} }
const columnCount = defaultQueryCount.value + 1; const columnCount = defaultQueryCount.value + 1;
return props.query.slice((row - 1) * columnCount - 1, row * columnCount - 1) return props.query.slice((row - 1) * columnCount - 1, row * columnCount - 1);
} }
const handleSelectionChange = (val: any) => { const handleSelectionChange = (val: any) => {
@@ -298,7 +300,7 @@ const handleSelectionChange = (val: any) => {
} }
const handlePageChange = () => { const handlePageChange = () => {
emit('update:pageNum', state.pageNum) emit('update:pageNum', state.pageNum);
execQuery(); execQuery();
} }
@@ -325,11 +327,11 @@ const reset = () => {
const changePageNum = (pageNum: number) => { const changePageNum = (pageNum: number) => {
state.pageNum = pageNum; state.pageNum = pageNum;
emit('update:pageNum', state.pageNum) emit('update:pageNum', state.pageNum);
} }
const execQuery = () => { const execQuery = () => {
emit("pageChange") emit('pageChange');
} }
/** /**

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

@@ -1,20 +1,27 @@
<template> <template>
<div class="db-list"> <div class="db-list">
<page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true" <page-table
v-model:selection-data="state.selectionData" :data="datas" :columns="columns" :total="total" ref="pageTableRef"
v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()"> :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 #tagPathSelect> <template #tagPathSelect>
<el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" @clear="search" filterable clearable <el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" @clear="search" filterable clearable style="width: 200px">
style="width: 200px">
<el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option> <el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
</el-select> </el-select>
</template> </template>
<template #queryRight> <template #queryRight>
<el-button v-auth="perms.saveDb" type="primary" icon="plus" @click="editDb(false)">添加</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>
<template #tagPath="{ data }"> <template #tagPath="{ data }">
@@ -27,8 +34,7 @@
<template #database="{ data }"> <template #database="{ data }">
<el-popover placement="right" trigger="click" :width="300"> <el-popover placement="right" trigger="click" :width="300">
<template #reference> <template #reference>
<el-link type="primary" :underline="false" plain @click="selectDb(data.dbs)">查看 <el-link type="primary" :underline="false" plain @click="selectDb(data.dbs)">查看 </el-link>
</el-link>
</template> </template>
<el-input v-model="filterDb.param" @keyup="filterSchema" class="w-50 m-2" placeholder="搜索" size="small"> <el-input v-model="filterDb.param" @keyup="filterSchema" class="w-50 m-2" placeholder="搜索" size="small">
<template #prefix> <template #prefix>
@@ -37,11 +43,15 @@
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
<div class="el-tag--plain el-tag--success" v-for="db in filterDb.list" :key="db" <div
style="border:1px var(--color-success-light-3) solid; margin-top: 3px;border-radius: 5px; padding: 2px;position: relative"> class="el-tag--plain el-tag--success"
v-for="db in filterDb.list"
:key="db"
style="border: 1px var(--color-success-light-3) solid; margin-top: 3px; border-radius: 5px; padding: 2px; position: relative"
>
<el-link type="success" plain size="small" :underline="false">{{ db }}</el-link> <el-link type="success" plain size="small" :underline="false">{{ db }}</el-link>
<el-link type="primary" plain size="small" :underline="false" @click="showTableInfo(data, db)" <el-link type="primary" plain size="small" :underline="false" @click="showTableInfo(data, db)" style="position: absolute; right: 4px"
style="position: absolute; right: 4px">操作 >操作
</el-link> </el-link>
</div> </div>
</el-popover> </el-popover>
@@ -73,13 +83,10 @@
</el-form-item> </el-form-item>
<el-form-item label="导出表: "> <el-form-item label="导出表: ">
<el-table @selection-change="handleDumpTableSelectionChange" max-height="300" size="small" <el-table @selection-change="handleDumpTableSelectionChange" max-height="300" size="small" :data="tableInfoDialog.infos">
:data="tableInfoDialog.infos">
<el-table-column type="selection" width="45" /> <el-table-column type="selection" width="45" />
<el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip> <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip> </el-table-column>
</el-table-column> <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip> </el-table-column>
<el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip>
</el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
@@ -91,30 +98,40 @@
<el-button type="primary" size="small" @click="openEditTable(false)">创建表</el-button> <el-button type="primary" size="small" @click="openEditTable(false)">创建表</el-button>
</el-row> </el-row>
<el-table v-loading="tableInfoDialog.loading" border stripe :data="filterTableInfos" size="small" <el-table v-loading="tableInfoDialog.loading" border stripe :data="filterTableInfos" size="small" max-height="680">
max-height="680">
<el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip> <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip>
<template #header> <template #header>
<el-input v-model="tableInfoDialog.tableNameSearch" size="small" placeholder="表名: 输入可过滤" <el-input v-model="tableInfoDialog.tableNameSearch" size="small" placeholder="表名: 输入可过滤" clearable />
clearable />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip> <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip>
<template #header> <template #header>
<el-input v-model="tableInfoDialog.tableCommentSearch" size="small" placeholder="备注: 输入可过滤" <el-input v-model="tableInfoDialog.tableCommentSearch" size="small" placeholder="备注: 输入可过滤" clearable />
clearable />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="tableRows" label="Rows" min-width="70" sortable <el-table-column
:sort-method="(a: any, b: any) => parseInt(a.tableRows) - parseInt(b.tableRows)"></el-table-column> prop="tableRows"
<el-table-column property="dataLength" label="数据大小" sortable label="Rows"
:sort-method="(a: any, b: any) => parseInt(a.dataLength) - parseInt(b.dataLength)"> min-width="70"
sortable
:sort-method="(a: any, b: any) => parseInt(a.tableRows) - parseInt(b.tableRows)"
></el-table-column>
<el-table-column
property="dataLength"
label="数据大小"
sortable
:sort-method="(a: any, b: any) => parseInt(a.dataLength) - parseInt(b.dataLength)"
>
<template #default="scope"> <template #default="scope">
{{ formatByteSize(scope.row.dataLength) }} {{ formatByteSize(scope.row.dataLength) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="indexLength" label="索引大小" sortable <el-table-column
:sort-method="(a: any, b: any) => parseInt(a.indexLength) - parseInt(b.indexLength)"> property="indexLength"
label="索引大小"
sortable
:sort-method="(a: any, b: any) => parseInt(a.indexLength) - parseInt(b.indexLength)"
>
<template #default="scope"> <template #default="scope">
{{ formatByteSize(scope.row.indexLength) }} {{ formatByteSize(scope.row.indexLength) }}
</template> </template>
@@ -124,8 +141,13 @@
<template #default="scope"> <template #default="scope">
<el-link @click.prevent="showColumns(scope.row)" type="primary">字段</el-link> <el-link @click.prevent="showColumns(scope.row)" type="primary">字段</el-link>
<el-link class="ml5" @click.prevent="showTableIndex(scope.row)" type="success">索引</el-link> <el-link class="ml5" @click.prevent="showTableIndex(scope.row)" type="success">索引</el-link>
<el-link class="ml5" v-if="tableCreateDialog.enableEditTypes.indexOf(tableCreateDialog.type) > -1" <el-link
@click.prevent="openEditTable(scope.row)" type="warning">编辑表</el-link> class="ml5"
v-if="tableCreateDialog.enableEditTypes.indexOf(tableCreateDialog.type) > -1"
@click.prevent="openEditTable(scope.row)"
type="warning"
>编辑表</el-link
>
<el-link class="ml5" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link> <el-link class="ml5" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link>
</template> </template>
</el-table-column> </el-table-column>
@@ -137,34 +159,48 @@
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-dialog width="90%" :title="`${sqlExecLogDialog.title} - SQL执行记录`" :before-close="onBeforeCloseSqlExecDialog" <el-dialog
:close-on-click-modal="false" v-model="sqlExecLogDialog.visible"> width="90%"
<page-table height="100%" ref="sqlExecDialogPageTableRef" :query="sqlExecLogDialog.queryConfig" :title="`${sqlExecLogDialog.title} - SQL执行记录`"
v-model:query-form="sqlExecLogDialog.query" :data="sqlExecLogDialog.data" :before-close="onBeforeCloseSqlExecDialog"
:columns="sqlExecLogDialog.columns" :total="sqlExecLogDialog.total" :close-on-click-modal="false"
v-model:page-size="sqlExecLogDialog.query.pageSize" v-model:page-num="sqlExecLogDialog.query.pageNum" v-model="sqlExecLogDialog.visible"
@pageChange="searchSqlExecLog()"> >
<page-table
height="100%"
ref="sqlExecDialogPageTableRef"
:query="sqlExecLogDialog.queryConfig"
v-model:query-form="sqlExecLogDialog.query"
:data="sqlExecLogDialog.data"
:columns="sqlExecLogDialog.columns"
:total="sqlExecLogDialog.total"
v-model:page-size="sqlExecLogDialog.query.pageSize"
v-model:page-num="sqlExecLogDialog.query.pageNum"
@pageChange="searchSqlExecLog()"
>
<template #dbSelect> <template #dbSelect>
<el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" style="width: 200px" filterable <el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" style="width: 200px" filterable clearable>
clearable> <el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item"> </el-option>
<el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item">
</el-option>
</el-select> </el-select>
</template> </template>
<template #action="{ data }"> <template #action="{ data }">
<el-link <el-link
v-if="data.type == DbSqlExecTypeEnum.Update.value || data.type == DbSqlExecTypeEnum.Delete.value" v-if="data.type == DbSqlExecTypeEnum.Update.value || data.type == DbSqlExecTypeEnum.Delete.value"
type="primary" plain size="small" :underline="false" @click="onShowRollbackSql(data)"> type="primary"
还原SQL</el-link> plain
size="small"
:underline="false"
@click="onShowRollbackSql(data)"
>
还原SQL</el-link
>
</template> </template>
</page-table> </page-table>
</el-dialog> </el-dialog>
<el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible"> <el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible">
<el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="rollbackSqlDialog.sql" size="small"> <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="rollbackSqlDialog.sql" size="small"> </el-input>
</el-input>
</el-dialog> </el-dialog>
<el-dialog width="40%" :title="`${chooseTableName} 字段信息`" v-model="columnDialog.visible"> <el-dialog width="40%" :title="`${chooseTableName} 字段信息`" v-model="columnDialog.visible">
@@ -182,14 +218,12 @@
<el-table-column prop="columnName" label="列名" min-width="120" show-overflow-tooltip> </el-table-column> <el-table-column prop="columnName" label="列名" min-width="120" show-overflow-tooltip> </el-table-column>
<el-table-column prop="seqInIndex" label="列序列号" show-overflow-tooltip> </el-table-column> <el-table-column prop="seqInIndex" label="列序列号" show-overflow-tooltip> </el-table-column>
<el-table-column prop="indexType" label="类型"> </el-table-column> <el-table-column prop="indexType" label="类型"> </el-table-column>
<el-table-column prop="indexComment" label="备注" min-width="130" show-overflow-tooltip> <el-table-column prop="indexComment" label="备注" min-width="130" show-overflow-tooltip> </el-table-column>
</el-table-column>
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-dialog width="55%" :title="`${chooseTableName} Create-DDL`" v-model="ddlDialog.visible"> <el-dialog width="55%" :title="`${chooseTableName} Create-DDL`" v-model="ddlDialog.visible">
<el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl" <el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl" size="small"> </el-input>
size="small"> </el-input>
</el-dialog> </el-dialog>
<el-dialog v-model="infoDialog.visible"> <el-dialog v-model="infoDialog.visible">
@@ -209,28 +243,31 @@
<el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item> <el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
<el-descriptions-item :span="3" label="数据库">{{ infoDialog.data.database }}</el-descriptions-item> <el-descriptions-item :span="3" label="数据库">{{ infoDialog.data.database }}</el-descriptions-item>
<el-descriptions-item :span="3" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }} <el-descriptions-item :span="3" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }} </el-descriptions-item>
</el-descriptions-item>
<el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data.createTime) }} <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data.createTime) }} </el-descriptions-item>
</el-descriptions-item>
<el-descriptions-item :span="1" label="创建者">{{ infoDialog.data.creator }}</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 :span="2" label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }} </el-descriptions-item>
</el-descriptions-item>
<el-descriptions-item :span="1" label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item> <el-descriptions-item :span="1" label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-dialog> </el-dialog>
<db-edit @val-change="valChange" :title="dbEditDialog.title" v-model:visible="dbEditDialog.visible" <db-edit @val-change="valChange" :title="dbEditDialog.title" v-model:visible="dbEditDialog.visible" v-model:db="dbEditDialog.data"></db-edit>
v-model:db="dbEditDialog.data"></db-edit> <create-table
<create-table :title="tableCreateDialog.title" :active-name="tableCreateDialog.activeName" :dbId="dbId" :db="db" :title="tableCreateDialog.title"
:data="tableCreateDialog.data" v-model:visible="tableCreateDialog.visible" @submit-sql="onSubmitSql"> :active-name="tableCreateDialog.activeName"
:dbId="dbId"
:db="db"
:data="tableCreateDialog.data"
v-model:visible="tableCreateDialog.visible"
@submit-sql="onSubmitSql"
>
</create-table> </create-table>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { ref, toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue'; import { ref, toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from 'element-plus';
import { formatByteSize } from '@/common/utils/format'; import { formatByteSize } from '@/common/utils/format';
@@ -240,11 +277,11 @@ import SqlExecBox from './component/SqlExecBox';
import config from '@/common/config'; import config from '@/common/config';
import { getSession } from '@/common/utils/storage'; import { getSession } from '@/common/utils/storage';
import { isTrue } from '@/common/assert'; import { isTrue } from '@/common/assert';
import { Search as SearchIcon } from '@element-plus/icons-vue' import { Search as SearchIcon } from '@element-plus/icons-vue';
import { tagApi } from '../tag/api'; import { tagApi } from '../tag/api';
import { dateFormat } from '@/common/utils/date'; import { dateFormat } from '@/common/utils/date';
import TagInfo from '../component/TagInfo.vue'; import TagInfo from '../component/TagInfo.vue';
import PageTable from '@/components/pagetable/PageTable.vue' import PageTable from '@/components/pagetable/PageTable.vue';
import { TableColumn, TableQuery } from '@/components/pagetable'; import { TableColumn, TableQuery } from '@/components/pagetable';
import { hasPerms } from '@/components/auth/auth'; import { hasPerms } from '@/components/auth/auth';
@@ -254,28 +291,26 @@ const CreateTable = defineAsyncComponent(() => import('./CreateTable.vue'));
const perms = { const perms = {
saveDb: 'db:save', saveDb: 'db:save',
delDb: 'db:del', delDb: 'db:del',
} };
const queryConfig = [ const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect')];
TableQuery.slot("tagPath", "标签", "tagPathSelect"),
]
const columns = ref([ const columns = ref([
TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20), TableColumn.new('tagPath', '标签路径').isSlot().setAddWidth(20),
TableColumn.new("name", "名称"), TableColumn.new('name', '名称'),
TableColumn.new("host", "host:port").setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`), TableColumn.new('host', 'host:port').setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
TableColumn.new("type", "类型"), TableColumn.new('type', '类型'),
TableColumn.new("database", "数据库").isSlot().setMinWidth(70), TableColumn.new('database', '数据库').isSlot().setMinWidth(70),
TableColumn.new("username", "用户名"), TableColumn.new('username', '用户名'),
TableColumn.new("remark", "备注"), TableColumn.new('remark', '备注'),
TableColumn.new("more", "更多").isSlot().setMinWidth(165).fixedRight(), TableColumn.new('more', '更多').isSlot().setMinWidth(165).fixedRight(),
]) ]);
// 该用户拥有的的操作列按钮权限 // 该用户拥有的的操作列按钮权限
const actionBtns = hasPerms([perms.saveDb,]) const actionBtns = hasPerms([perms.saveDb]);
const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight().alignCenter() const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(65).fixedRight().alignCenter();
const pageTableRef: any = ref(null) const pageTableRef: any = ref(null);
const state = reactive({ const state = reactive({
row: {}, row: {},
@@ -310,20 +345,20 @@ const state = reactive({
// sql执行记录弹框 // sql执行记录弹框
sqlExecLogDialog: { sqlExecLogDialog: {
queryConfig: [ queryConfig: [
TableQuery.slot("db", "数据库", "dbSelect"), TableQuery.slot('db', '数据库', 'dbSelect'),
TableQuery.text("table", "表名"), TableQuery.text('table', '表名'),
TableQuery.select("type", "操作类型").setOptions(Object.values(DbSqlExecTypeEnum)), TableQuery.select('type', '操作类型').setOptions(Object.values(DbSqlExecTypeEnum)),
], ],
columns: [ columns: [
TableColumn.new("db", "数据库"), TableColumn.new('db', '数据库'),
TableColumn.new("table", "表"), TableColumn.new('table', '表'),
TableColumn.new("type", "类型").typeTag(DbSqlExecTypeEnum).setAddWidth(10), TableColumn.new('type', '类型').typeTag(DbSqlExecTypeEnum).setAddWidth(10),
TableColumn.new("creator", "执行人"), TableColumn.new('creator', '执行人'),
TableColumn.new("sql", "SQL"), TableColumn.new('sql', 'SQL'),
TableColumn.new("oldValue", "原值"), TableColumn.new('oldValue', '原值'),
TableColumn.new("createTime", "执行时间").isTime(), TableColumn.new('createTime', '执行时间').isTime(),
TableColumn.new("remark", "备注"), TableColumn.new('remark', '备注'),
TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight().alignCenter(), TableColumn.new('action', '操作').isSlot().setMinWidth(100).fixedRight().alignCenter(),
], ],
title: '', title: '',
visible: false, visible: false,
@@ -374,7 +409,8 @@ const state = reactive({
activeName: '1', activeName: '1',
type: '', type: '',
enableEditTypes: ['mysql'], // 支持"编辑表"的数据库类型 enableEditTypes: ['mysql'], // 支持"编辑表"的数据库类型
data: { // 修改表时，传递修改数据 data: {
// 修改表时，传递修改数据
edit: false, edit: false,
row: {}, row: {},
indexs: [], indexs: [],
@@ -385,7 +421,7 @@ const state = reactive({
param: '', param: '',
cache: [], cache: [],
list: [], list: [],
} },
}); });
const { const {
@@ -409,8 +445,7 @@ const {
dbEditDialog, dbEditDialog,
tableCreateDialog, tableCreateDialog,
filterDb, filterDb,
} = toRefs(state) } = toRefs(state);
onMounted(async () => { onMounted(async () => {
if (Object.keys(actionBtns).length > 0) { if (Object.keys(actionBtns).length > 0) {
@@ -458,7 +493,7 @@ const search = async () => {
const showInfo = (info: any) => { const showInfo = (info: any) => {
state.infoDialog.data = info; state.infoDialog.data = info;
state.infoDialog.visible = true; state.infoDialog.visible = true;
} };
const getTags = async () => { const getTags = async () => {
state.tags = await tagApi.getAccountTags.request(null); state.tags = await tagApi.getAccountTags.request(null);
@@ -481,15 +516,15 @@ const valChange = () => {
const deleteDb = async () => { const deleteDb = async () => {
try { try {
await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(", ")}】库?`, '提示', { await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(', ')}】库?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}); });
await dbApi.deleteDb.request({ id: state.selectionData.map((x: any) => x.id).join(",") }); await dbApi.deleteDb.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
ElMessage.success('删除成功'); ElMessage.success('删除成功');
search(); search();
} catch (err) { } } catch (err) {}
}; };
const onShowSqlExec = async (row: any) => { const onShowSqlExec = async (row: any) => {
@@ -533,9 +568,9 @@ const dump = (db: string) => {
const a = document.createElement('a'); const a = document.createElement('a');
a.setAttribute( a.setAttribute(
'href', 'href',
`${config.baseApiUrl}/dbs/${state.dbId}/dump?db=${db}&type=${state.dumpInfo.type}&tables=${state.dumpInfo.tables.join( `${config.baseApiUrl}/dbs/${state.dbId}/dump?db=${db}&type=${state.dumpInfo.type}&tables=${state.dumpInfo.tables.join(',')}&token=${getSession(
',' 'token'
)}&token=${getSession('token')}` )}`
); );
a.click(); a.click();
state.showDumpInfo = false; state.showDumpInfo = false;
@@ -579,7 +614,7 @@ const getPrimaryKey = (columns: any) => {
return col.columnName; return col.columnName;
} }
return columns[0].columnName; return columns[0].columnName;
} };
/** /**
* 包装值，如果值类型为number则直接返回，其他则需要使用''包装 * 包装值，如果值类型为number则直接返回，其他则需要使用''包装
@@ -596,7 +631,7 @@ const showTableInfo = async (row: any, db: string) => {
state.tableInfoDialog.visible = true; state.tableInfoDialog.visible = true;
try { try {
state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: row.id, db }); state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: row.id, db });
state.tableCreateDialog.type = row.type state.tableCreateDialog.type = row.type;
state.dbId = row.id; state.dbId = row.id;
state.row = row; state.row = row;
state.db = db; state.db = db;
@@ -608,9 +643,9 @@ const showTableInfo = async (row: any, db: string) => {
}; };
const onSubmitSql = async (row: { tableName: string }) => { const onSubmitSql = async (row: { tableName: string }) => {
await openEditTable(row) await openEditTable(row);
state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db }); state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db });
} };
const closeTableInfo = () => { const closeTableInfo = () => {
state.showDumpInfo = false; state.showDumpInfo = false;
@@ -670,38 +705,39 @@ const dropTable = async (row: any) => {
state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db }); state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db });
}, },
}); });
} catch (err) { } } catch (err) {}
}; };
// 点击查看时初始化数据 // 点击查看时初始化数据
const selectDb = (row: any) => { const selectDb = (row: any) => {
state.filterDb.param = '' state.filterDb.param = '';
state.filterDb.cache = row; state.filterDb.cache = row;
state.filterDb.list = row; state.filterDb.list = row;
} };
// 输入字符过滤schema // 输入字符过滤schema
const filterSchema = () => { const filterSchema = () => {
if (state.filterDb.param) { if (state.filterDb.param) {
state.filterDb.list = state.filterDb.cache.filter((a) => { return String(a).toLowerCase().indexOf(state.filterDb.param) > -1 }) state.filterDb.list = state.filterDb.cache.filter((a) => {
return String(a).toLowerCase().indexOf(state.filterDb.param) > -1;
});
} else { } else {
state.filterDb.list = state.filterDb.cache; state.filterDb.list = state.filterDb.cache;
} }
} };
// 打开编辑表 // 打开编辑表
const openEditTable = async (row: any) => { const openEditTable = async (row: any) => {
state.tableCreateDialog.visible = true;
state.tableCreateDialog.visible = true state.tableCreateDialog.activeName = '1';
state.tableCreateDialog.activeName = '1'
if (row === false) { if (row === false) {
state.tableCreateDialog.data = { edit: false, row: {}, indexs: [], columns: [] } state.tableCreateDialog.data = { edit: false, row: {}, indexs: [], columns: [] };
state.tableCreateDialog.title = '创建表' state.tableCreateDialog.title = '创建表';
} }
if (row.tableName) { if (row.tableName) {
state.tableCreateDialog.title = '修改表' state.tableCreateDialog.title = '修改表';
let indexs = await dbApi.tableIndex.request({ let indexs = await dbApi.tableIndex.request({
id: state.dbId, id: state.dbId,
db: state.db, db: state.db,
@@ -712,8 +748,8 @@ const openEditTable = async (row: any) => {
db: state.db, db: state.db,
tableName: row.tableName, tableName: row.tableName,
}); });
state.tableCreateDialog.data = { edit: true, row, indexs, columns } state.tableCreateDialog.data = { edit: true, row, indexs, columns };
} }
} };
</script> </script>
<style lang="scss"></style> <style lang="scss"></style>

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

@@ -89,52 +89,25 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog width="700px" :title="showMemDialog.title" v-model="showMemDialog.visible"> <el-dialog width="50%" :title="showMemDialog.title" v-model="showMemDialog.visible">
<div class="toolbar"> <page-table
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus" size="small">添加</el-button> :query="showMemDialog.queryConfig"
<el-button v-auth="'team:member:del'" @click="deleteMember" :disabled="showMemDialog.chooseId == null" type="danger" icon="delete" size="small" v-model:query-form="showMemDialog.query"
>移除</el-button :data="showMemDialog.members.list"
> :columns="showMemDialog.columns"
<div style="float: right">
<el-input
placeholder="请输入用户名"
class="mr2"
style="width: 150px"
v-model="showMemDialog.query.username"
size="small"
@clear="search"
clearable
></el-input>
<el-button @click="setMemebers" type="success" icon="search" size="small"></el-button>
</div>
</div>
<el-table @current-change="chooseMember" border :data="showMemDialog.members.list" size="small">
<el-table-column label="选择" width="50px">
<template #default="scope">
<el-radio v-model="showMemDialog.chooseId" :label="scope.row.id">
<i></i>
</el-radio>
</template>
</el-table-column>
<el-table-column property="name" label="姓名" width="115"></el-table-column>
<el-table-column property="username" label="账号" width="135"></el-table-column>
<el-table-column property="createTime" label="加入时间">
<template #default="scope">
{{ dateFormat(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column property="creator" label="分配者" width="135"></el-table-column>
</el-table>
<el-pagination
size="small"
@current-change="setMemebers"
style="text-align: center"
background
layout="prev, pager, next, total, jumper"
:total="showMemDialog.members.total" :total="showMemDialog.members.total"
v-model:current-page="showMemDialog.query.pageNum" v-model:page-size="showMemDialog.query.pageSize"
:page-size="showMemDialog.query.pageSize" v-model:page-num="showMemDialog.query.pageNum"
/> @pageChange="setMemebers()"
>
<template #queryRight>
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus">添加</el-button>
</template>
<template #action="{ data }">
<el-button v-auth="'team:member:del'" @click="deleteMember(data)" type="danger" link icon="delete"></el-button>
</template>
</page-table>
<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="auto"> <el-form :model="showMemDialog.memForm" label-width="auto">
@@ -169,7 +142,6 @@ import { ref, toRefs, reactive, onMounted } from 'vue';
import { tagApi } from './api'; import { tagApi } from './api';
import { accountApi } from '../../system/api'; import { accountApi } from '../../system/api';
import { ElMessage, ElMessageBox } from 'element-plus'; import { ElMessage, ElMessageBox } from 'element-plus';
import { dateFormat } from '@/common/utils/date';
import { notBlank } from '@/common/assert'; import { notBlank } from '@/common/assert';
import PageTable from '@/components/pagetable/PageTable.vue'; import PageTable from '@/components/pagetable/PageTable.vue';
import { TableColumn, TableQuery } from '@/components/pagetable'; import { TableColumn, TableQuery } from '@/components/pagetable';
@@ -194,15 +166,21 @@ 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().alignCenter(), TableColumn.new('action', '操作').isSlot().setMinWidth(120).fixedRight().alignCenter(),
], ],
total: 0, total: 0,
data: [], data: [],
selectionData: [], selectionData: [],
showMemDialog: { showMemDialog: {
queryConfig: [TableQuery.text('username', '用户名')],
columns: [
TableColumn.new('name', '姓名'),
TableColumn.new('username', '账号'),
TableColumn.new('createTime', '加入时间').isTime(),
TableColumn.new('creator', '分配者'),
TableColumn.new('action', '操作').isSlot().setMinWidth(80).fixedRight().alignCenter(),
],
visible: false, visible: false,
chooseId: 0,
chooseData: null,
query: { query: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
@@ -211,7 +189,7 @@ const state = reactive({
}, },
members: { members: {
list: [], list: [],
total: null, total: 0,
}, },
title: '', title: '',
addVisible: false, addVisible: false,
@@ -304,19 +282,8 @@ const getAccount = (username: any) => {
} }
}; };
/** const deleteMember = async (data: any) => {
* 选中成员 await tagApi.delTeamMem.request(data);
*/
const chooseMember = (item: any) => {
if (!item) {
return;
}
state.showMemDialog.chooseData = item;
state.showMemDialog.chooseId = item.id;
};
const deleteMember = async () => {
await tagApi.delTeamMem.request(state.showMemDialog.chooseData);
ElMessage.success('移除成功'); ElMessage.success('移除成功');
// 重新赋值成员列表 // 重新赋值成员列表
setMemebers(); setMemebers();
@@ -349,8 +316,6 @@ const addMember = async () => {
const cancelAddMember = () => { const cancelAddMember = () => {
state.showMemDialog.memForm = {} as any; state.showMemDialog.memForm = {} as any;
state.showMemDialog.addVisible = false; state.showMemDialog.addVisible = false;
state.showMemDialog.chooseData = null;
state.showMemDialog.chooseId = 0;
}; };
/********** 标签相关 ***********/ /********** 标签相关 ***********/
@@ -379,7 +344,7 @@ const saveTags = async () => {
closeTagDialog(); closeTagDialog();
}; };
const tagTreeNodeCheck = () => { const tagTreeNodeCheck = (data: any) => {
// const node = tagTreeRef.value.getNode(data.id); // const node = tagTreeRef.value.getNode(data.id);
// console.log(node); // console.log(node);
// // state.showTagDialog.tagTreeTeams = [16] // // state.showTagDialog.tagTreeTeams = [16]

5
mayfly_go_web/src/views/system/enums.ts
View File

@@ -10,6 +10,11 @@ export const AccountStatusEnum = {
Disable: EnumValue.of(-1, '禁用').tagTypeDanger(), Disable: EnumValue.of(-1, '禁用').tagTypeDanger(),
}; };
export const RoleStatusEnum = {
Enable: EnumValue.of(1, '正常').tagTypeSuccess(),
Disable: EnumValue.of(-1, '禁用').tagTypeDanger(),
};
export const LogTypeEnum = { export const LogTypeEnum = {
Success: EnumValue.of(1, '成功').tagTypeSuccess(), Success: EnumValue.of(1, '成功').tagTypeSuccess(),
Error: EnumValue.of(2, '失败').tagTypeDanger(), Error: EnumValue.of(2, '失败').tagTypeDanger(),

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

@@ -20,11 +20,6 @@
> >
</template> </template>
<template #status="{ data }">
<el-tag v-if="data.status == 1" type="success" size="small">正常</el-tag>
<el-tag v-if="data.status == -1" type="danger" size="small">禁用</el-tag>
</template>
<template #showmore="{ data }"> <template #showmore="{ data }">
<el-link @click.prevent="showResources(data)" type="info">菜单&权限</el-link> <el-link @click.prevent="showResources(data)" type="info">菜单&权限</el-link>
</template> </template>
@@ -57,6 +52,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import PageTable from '@/components/pagetable/PageTable.vue'; import PageTable from '@/components/pagetable/PageTable.vue';
import { TableColumn, TableQuery } from '@/components/pagetable'; import { TableColumn, TableQuery } from '@/components/pagetable';
import { hasPerms } from '@/components/auth/auth'; import { hasPerms } from '@/components/auth/auth';
import { RoleStatusEnum } from '../enums';
const pageTableRef: any = ref(null); const pageTableRef: any = ref(null);
@@ -72,7 +68,7 @@ const columns = ref([
TableColumn.new('name', '角色名称'), TableColumn.new('name', '角色名称'),
TableColumn.new('code', '角色code'), TableColumn.new('code', '角色code'),
TableColumn.new('remark', '备注'), TableColumn.new('remark', '备注'),
TableColumn.new('status', '状态').isSlot(), TableColumn.new('status', '状态').typeTag(RoleStatusEnum),
TableColumn.new('creator', '创建账号'), TableColumn.new('creator', '创建账号'),
TableColumn.new('createTime', '创建时间').isTime(), TableColumn.new('createTime', '创建时间').isTime(),
TableColumn.new('modifier', '更新账号'), TableColumn.new('modifier', '更新账号'),