TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 23:40:24 +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;
}
tagTypeInfo(): EnumValue {
return this.setTagType('info');
}
tagTypeSuccess(): EnumValue {
return this.setTagType('success');
}

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

@@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>
@@ -9,11 +9,11 @@ import EnumValue from '@/common/Enum';
const props = defineProps({
enums: {
type: Object, // 需要为EnumValue类型
default: {},
required: true,
},
value: {
type: Object,
default: {},
required: true,
},
});
@@ -38,7 +38,7 @@ onMounted(() => {
});
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) {
state.enumLabel = '-';
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({
size: {
type: String,
default: "",
default: '',
},
inputWidth: {
type: [Number, String],
@@ -188,11 +188,13 @@ const props = defineProps({
type: Array<TableColumn>,
default: function () {
return [];
}
},
required: true,
},
// 表格数据
data: {
type: Array,
required: true,
},
total: {
type: [Number],
@@ -244,15 +246,15 @@ const {
} = toRefs(state)
watch(() => props.queryForm, (newValue: any) => {
state.queryForm = newValue
state.queryForm = newValue;
})
watch(() => props.pageNum, (newValue: any) => {
state.pageNum = newValue
state.pageNum = newValue;
})
watch(() => props.pageSize, (newValue: any) => {
state.pageSize = newValue
state.pageSize = newValue;
})
watch(() => props.data, (newValue: any) => {
@@ -271,11 +273,11 @@ onMounted(() => {
state.pageNum = props.pageNum;
state.pageSize = pageSize;
state.queryForm = props.queryForm;
state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4]
state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4];
// 如果没传输入框宽度，则根据组件size设置默认宽度
if (!props.inputWidth) {
state.inputWidth = props.size == "small" ? "150px" : "200px"
state.inputWidth = props.size == 'small' ? '150px' : '200px';
} else {
state.inputWidth = props.inputWidth;
}
@@ -284,13 +286,13 @@ onMounted(() => {
const getRowQueryItem = (row: number) => {
// 第一行需要加个查询等按钮列
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
}
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) => {
@@ -298,7 +300,7 @@ const handleSelectionChange = (val: any) => {
}
const handlePageChange = () => {
emit('update:pageNum', state.pageNum)
emit('update:pageNum', state.pageNum);
execQuery();
}
@@ -325,11 +327,11 @@ const reset = () => {
const changePageNum = (pageNum: number) => {
state.pageNum = pageNum;
emit('update:pageNum', state.pageNum)
emit('update:pageNum', state.pageNum);
}
const execQuery = () => {
emit("pageChange")
emit('pageChange');
}
/**

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

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

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

@@ -89,52 +89,25 @@
</template>
</el-dialog>
<el-dialog width="700px" :title="showMemDialog.title" v-model="showMemDialog.visible">
<div class="toolbar">
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus" size="small">添加</el-button>
<el-button v-auth="'team:member:del'" @click="deleteMember" :disabled="showMemDialog.chooseId == null" type="danger" icon="delete" size="small"
>移除</el-button
>
<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"
<el-dialog width="50%" :title="showMemDialog.title" v-model="showMemDialog.visible">
<page-table
:query="showMemDialog.queryConfig"
v-model:query-form="showMemDialog.query"
:data="showMemDialog.members.list"
:columns="showMemDialog.columns"
:total="showMemDialog.members.total"
v-model:current-page="showMemDialog.query.pageNum"
:page-size="showMemDialog.query.pageSize"
/>
v-model: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-form :model="showMemDialog.memForm" label-width="auto">
@@ -169,7 +142,6 @@ import { ref, toRefs, reactive, onMounted } from 'vue';
import { tagApi } from './api';
import { accountApi } from '../../system/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { dateFormat } from '@/common/utils/date';
import { notBlank } from '@/common/assert';
import PageTable from '@/components/pagetable/PageTable.vue';
import { TableColumn, TableQuery } from '@/components/pagetable';
@@ -194,15 +166,21 @@ const state = reactive({
TableColumn.new('remark', '备注'),
TableColumn.new('createTime', '创建时间').isTime(),
TableColumn.new('creator', '创建人'),
TableColumn.new('action', '操作').isSlot().setMinWidth(100).fixedRight().alignCenter(),
TableColumn.new('action', '操作').isSlot().setMinWidth(120).fixedRight().alignCenter(),
],
total: 0,
data: [],
selectionData: [],
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,
chooseId: 0,
chooseData: null,
query: {
pageSize: 10,
pageNum: 1,
@@ -211,7 +189,7 @@ const state = reactive({
},
members: {
list: [],
total: null,
total: 0,
},
title: '',
addVisible: false,
@@ -304,19 +282,8 @@ const getAccount = (username: any) => {
}
};
/**
* 选中成员
*/
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);
const deleteMember = async (data: any) => {
await tagApi.delTeamMem.request(data);
ElMessage.success('移除成功');
// 重新赋值成员列表
setMemebers();
@@ -349,8 +316,6 @@ const addMember = async () => {
const cancelAddMember = () => {
state.showMemDialog.memForm = {} as any;
state.showMemDialog.addVisible = false;
state.showMemDialog.chooseData = null;
state.showMemDialog.chooseId = 0;
};
/********** 标签相关 ***********/
@@ -379,7 +344,7 @@ const saveTags = async () => {
closeTagDialog();
};
const tagTreeNodeCheck = () => {
const tagTreeNodeCheck = (data: any) => {
// const node = tagTreeRef.value.getNode(data.id);
// console.log(node);
// // 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(),
};
export const RoleStatusEnum = {
Enable: EnumValue.of(1, '正常').tagTypeSuccess(),
Disable: EnumValue.of(-1, '禁用').tagTypeDanger(),
};
export const LogTypeEnum = {
Success: EnumValue.of(1, '成功').tagTypeSuccess(),
Error: EnumValue.of(2, '失败').tagTypeDanger(),

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

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