feat: 完成 redis 增删改查
This commit is contained in:
ssongliu
@@ -1,49 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<Submenu activeName="redis" />
|
||||
<ComplexTable
|
||||
:pagination-config="paginationConfig"
|
||||
v-model:selects="selects"
|
||||
@search="search"
|
||||
style="margin-top: 20px"
|
||||
:data="data"
|
||||
>
|
||||
<template #toolbar>
|
||||
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column :label="$t('commons.table.name')" prop="name" />
|
||||
<el-table-column :label="$t('auth.username')" prop="username" />
|
||||
<el-table-column :label="$t('auth.password')" prop="password" />
|
||||
<el-table-column :label="$t('commons.table.description')" prop="description" />
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
:label="$t('commons.table.date')"
|
||||
:formatter="dateFromat"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<fu-table-operations type="icon" :buttons="buttons" :label="$t('commons.table.operate')" fix />
|
||||
</ComplexTable>
|
||||
<el-card style="margin-top: 20px">
|
||||
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" @click="onOperate">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button type="primary" @click="onCleanAll">{{ $t('database.cleanAll') }}</el-button>
|
||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
</el-button>
|
||||
<el-select v-model="currentDB" @change="search" style="margin-left: 20px">
|
||||
<el-option
|
||||
v-for="item in dbOptions"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column :label="$t('database.key')" prop="key" />
|
||||
<el-table-column :label="$t('database.value')" prop="value" />
|
||||
<el-table-column :label="$t('database.type')" prop="type" />
|
||||
<el-table-column :label="$t('database.length')" prop="length" />
|
||||
<el-table-column :label="$t('database.expiration')" prop="expiration">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.expiration === -1">{{ $t('database.forever') }}</span>
|
||||
<span v-else>{{ row.expiration }} {{ $t('database.second') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
|
||||
</ComplexTable>
|
||||
</el-card>
|
||||
|
||||
<OperatrDialog @search="search" ref="dialogRef" />
|
||||
<el-dialog v-model="redisVisiable" :destroy-on-close="true" width="30%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('database.changePassword') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item prop="db">
|
||||
<el-select v-model="form.db">
|
||||
<el-option
|
||||
v-for="item in dbOptions"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('database.key')" prop="key">
|
||||
<el-input clearable v-model="form.key"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('database.value')" prop="value">
|
||||
<el-input clearable v-model="form.value"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('database.expiration')" prop="expiration">
|
||||
<el-input type="number" clearable v-model.number="form.expiration">
|
||||
<template #append>{{ $t('database.second') }}</template>
|
||||
</el-input>
|
||||
<span class="input-help">{{ $t('database.expirationHelper') }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="redisVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button @click="submit(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ComplexTable from '@/components/complex-table/index.vue';
|
||||
import OperatrDialog from '@/views/database/create/index.vue';
|
||||
import Submenu from '@/views/database/index.vue';
|
||||
import { dateFromat } from '@/utils/util';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { deleteMysqlDB, searchMysqlDBs } from '@/api/modules/database';
|
||||
import { cleanRedisKey, deleteRedisKey, searchRedisDBs, setRedis } from '@/api/modules/database';
|
||||
import i18n from '@/lang';
|
||||
import { Cronjob } from '@/api/interface/cronjob';
|
||||
import { useDeleteData } from '@/hooks/use-delete-data';
|
||||
import { Database } from '@/api/interface/database';
|
||||
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
|
||||
const selects = ref<any>([]);
|
||||
const currentDB = ref(0);
|
||||
const dbOptions = ref([
|
||||
{ label: 'DB0', value: 0 },
|
||||
{ label: 'DB1', value: 1 },
|
||||
{ label: 'DB2', value: 2 },
|
||||
{ label: 'DB3', value: 3 },
|
||||
{ label: 'DB4', value: 4 },
|
||||
{ label: 'DB5', value: 5 },
|
||||
{ label: 'DB6', value: 6 },
|
||||
{ label: 'DB7', value: 7 },
|
||||
{ label: 'DB8', value: 8 },
|
||||
{ label: 'DB9', value: 9 },
|
||||
]);
|
||||
|
||||
const data = ref();
|
||||
const paginationConfig = reactive({
|
||||
@@ -52,39 +110,100 @@ const paginationConfig = reactive({
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const dialogRef = ref();
|
||||
const onOpenDialog = async () => {
|
||||
dialogRef.value!.acceptParams();
|
||||
};
|
||||
type FormInstance = InstanceType<typeof ElForm>;
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
key: '',
|
||||
value: '',
|
||||
db: 0,
|
||||
expiration: 0,
|
||||
});
|
||||
const rules = reactive({
|
||||
db: [Rules.requiredSelect],
|
||||
key: [Rules.requiredInput],
|
||||
value: [Rules.requiredInput],
|
||||
expiration: [Rules.requiredInput, Rules.number],
|
||||
});
|
||||
const redisVisiable = ref(false);
|
||||
|
||||
const search = async () => {
|
||||
let params = {
|
||||
page: paginationConfig.currentPage,
|
||||
pageSize: paginationConfig.pageSize,
|
||||
db: currentDB.value,
|
||||
};
|
||||
const res = await searchMysqlDBs(params);
|
||||
const res = await searchRedisDBs(params);
|
||||
data.value = res.data.items || [];
|
||||
paginationConfig.total = res.data.total;
|
||||
};
|
||||
|
||||
const onBatchDelete = async (row: Cronjob.CronjobInfo | null) => {
|
||||
let ids: Array<number> = [];
|
||||
const onBatchDelete = async (row: Database.RedisData | null) => {
|
||||
let names: Array<string> = [];
|
||||
if (row) {
|
||||
ids.push(row.id);
|
||||
names.push(row.key);
|
||||
} else {
|
||||
selects.value.forEach((item: Cronjob.CronjobInfo) => {
|
||||
ids.push(item.id);
|
||||
selects.value.forEach((item: Database.RedisData) => {
|
||||
names.push(item.key);
|
||||
});
|
||||
}
|
||||
await useDeleteData(deleteMysqlDB, { ids: ids }, 'commons.msg.delete', true);
|
||||
let params = {
|
||||
db: form.db,
|
||||
names: names,
|
||||
};
|
||||
await useDeleteData(deleteRedisKey, params, 'commons.msg.delete', true);
|
||||
search();
|
||||
};
|
||||
|
||||
const onCleanAll = async () => {
|
||||
ElMessageBox.confirm(i18n.global.t('commons.msg.delete') + '?', i18n.global.t('database.cleanAll'), {
|
||||
confirmButtonText: i18n.global.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.global.t('commons.button.cancel'),
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
}).then(async () => {
|
||||
await cleanRedisKey(currentDB.value);
|
||||
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
|
||||
search();
|
||||
});
|
||||
};
|
||||
|
||||
const onOperate = async (row: Database.RedisData | undefined) => {
|
||||
if (row) {
|
||||
form.db = currentDB.value;
|
||||
form.key = row.key;
|
||||
form.value = row.value;
|
||||
form.expiration = row.expiration === -1 ? 0 : row.expiration;
|
||||
} else {
|
||||
form.db = currentDB.value;
|
||||
form.key = '';
|
||||
form.value = '';
|
||||
form.expiration = 0;
|
||||
}
|
||||
redisVisiable.value = true;
|
||||
};
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
await setRedis(form);
|
||||
redisVisiable.value = false;
|
||||
currentDB.value = form.db;
|
||||
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
|
||||
search();
|
||||
});
|
||||
};
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: i18n.global.t('commons.button.edit'),
|
||||
click: (row: Database.RedisData) => {
|
||||
onOperate(row);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('commons.button.delete'),
|
||||
icon: 'Delete',
|
||||
click: (row: Cronjob.CronjobInfo) => {
|
||||
click: (row: Database.RedisData) => {
|
||||
onBatchDelete(row);
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user