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

refactor: redis hash类型使用hscan获取数据

Browse Source
This commit is contained in:
meilin.huang
2022-08-05 21:41:21 +08:00
parent e1afb1ed54
commit f2d9e7786d
10 changed files with 727 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mayfly_go_web/src/store/modules/themeConfig.ts
View File

@@ -107,11 +107,11 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
layout: 'classic',
// ssh终端字体颜色
terminalForeground: '#d0d0d0',
terminalForeground: '#c5c8c6',
// ssh终端背景色
terminalBackground: '#1c1c1c',
terminalBackground: '#121212',
// ssh终端cursor色
terminalCursor: '#e4c9af',
terminalCursor: '#f0cc09',
terminalFontSize: 15,

6
mayfly_go_web/src/views/ops/machine/SshTerminal.vue
View File

@@ -65,9 +65,9 @@ export default defineComponent({
// cursorStyle: 'underline', //光标样式
disableStdin: false,
theme: {
foreground: getThemeConfig.value.terminalForeground || '#d0d0d0', //字体
background: getThemeConfig.value.terminalBackground || '#1c1c1c', //背景色
cursor: getThemeConfig.value.terminalCursor || '#e4c9af', //设置光标
foreground: getThemeConfig.value.terminalForeground || '#c5c8c6', //字体
background: getThemeConfig.value.terminalBackground || '#121212', //背景色
cursor: getThemeConfig.value.terminalCursor || '#f0cc09', //设置光标
} as any,
});
const fitAddon = new FitAddon();

313
mayfly_go_web/src/views/ops/redis/DataEdit.vue
View File

@@ -1,313 +0,0 @@
<template>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="750px" :destroy-on-close="true">
<el-form label-width="85px">
<el-form-item prop="key" label="key:">
<el-input :disabled="operationType == 2" v-model="key.key"></el-input>
</el-form-item>
<el-form-item prop="timed" label="过期时间:">
<el-input v-model.number="key.timed" type="number"></el-input>
</el-form-item>
<el-form-item prop="dataType" label="数据类型:">
<el-select :disabled="operationType == 2" style="width: 100%" v-model="key.type" placeholder="请选择数据类型">
<el-option key="string" label="string" value="string"> </el-option>
<el-option key="hash" label="hash" value="hash"> </el-option>
<el-option key="set" label="set" value="set"> </el-option>
</el-select>
</el-form-item>
<el-form-item v-if="key.type == 'string'" prop="value" label="内容:">
<div id="string-value-text" style="width: 100%">
<el-input class="json-text" v-model="string.value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
<el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
<el-option key="text" label="text" value="text"> </el-option>
<el-option key="json" label="json" value="json"> </el-option>
</el-select>
</div>
</el-form-item>
<span v-if="key.type == 'hash'">
<el-button @click="onAddHashValue" icon="plus" size="small" plain class="mt10">添加</el-button>
<el-table :data="hash.value" stripe style="width: 100%">
<el-table-column prop="key" label="key" width>
<template #default="scope">
<el-input v-model="scope.row.key" clearable size="small"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input
v-model="scope.row.value"
clearable
type="textarea"
:autosize="{ minRows: 2, maxRows: 10 }"
size="small"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button type="danger" @click="hash.value.splice(scope.$index, 1)" icon="delete" size="small" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</span>
<span v-if="key.type == 'set'">
<el-button @click="onAddSetValue" icon="plus" size="small" plain class="mt10">添加</el-button>
<el-table :data="set.value" stripe style="width: 100%">
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input
v-model="scope.row.value"
clearable
type="textarea"
:autosize="{ minRows: 2, maxRows: 10 }"
size="small"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button type="danger" @click="set.value.splice(scope.$index, 1)" icon="delete" size="small" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</span>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
import { formatJsonString } from '@/common/utils/format';
export default defineComponent({
name: 'DateEdit',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
stringValue: {
type: [String],
},
setValue: {
type: [Array, Object],
},
hashValue: {
type: [Array, Object],
},
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
key: {
key: '',
type: 'string',
timed: -1,
},
string: {
type: 'text',
value: '',
},
hash: {
value: [
{
key: '',
value: '',
},
],
},
set: {
value: [{ value: '' }],
},
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.string.value = '';
state.string.type = 'text';
state.hash.value = [
{
key: '',
value: '',
},
];
}, 500);
};
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
watch(
() => props.redisId,
(val) => {
state.redisId = val;
}
);
watch(
() => props.operationType,
(val) => {
state.operationType = val;
}
);
watch(
() => props.keyInfo,
(val) => {
if (val) {
state.key = { ...val };
}
},
{
deep: true, // 深度监听的参数
}
);
watch(
() => props.stringValue,
(val) => {
if (val) {
state.string.value = val;
}
},
{
deep: true, // 深度监听的参数
}
);
watch(
() => props.setValue,
(val) => {
if (val) {
state.set.value = val;
}
},
{
deep: true, // 深度监听的参数
}
);
watch(
() => props.hashValue,
(val) => {
if (val) {
state.hash.value = val;
}
},
{
deep: true, // 深度监听的参数
}
);
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
if (state.key.type == 'string') {
notEmpty(state.string.value, 'value不能为空');
const sv = { value: formatJsonString(state.string.value, true), id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveStringValue.request(sv);
}
if (state.key.type == 'hash') {
isTrue(state.hash.value.length > 0, 'hash内容不能为空');
const sv = { value: state.hash.value, id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveHashValue.request(sv);
}
if (state.key.type == 'set') {
isTrue(state.set.value.length > 0, 'set内容不能为空');
const sv = { value: state.set.value.map((x) => x.value), id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveSetValue.request(sv);
}
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
const onAddHashValue = () => {
state.hash.value.push({ key: '', value: '' });
};
const onAddSetValue = () => {
state.set.value.push({ value: '' });
};
// 更改文本类型
const onChangeTextType = (val: string) => {
if (val == 'json') {
state.string.value = formatJsonString(state.string.value, false);
return;
}
if (val == 'text') {
state.string.value = formatJsonString(state.string.value, true);
}
};
return {
...toRefs(state),
saveValue,
cancel,
onAddHashValue,
onAddSetValue,
onChangeTextType,
};
},
});
</script>
<style lang="scss">
#string-value-text {
flex-grow: 1;
display: flex;
position: relative;
.text-type-select {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
max-width: 70px;
}
}
</style>

168
mayfly_go_web/src/views/ops/redis/DataOperation.vue
View File

@@ -23,7 +23,7 @@
<el-form class="search-form" label-position="right" :inline="true" label-width="60px">
<el-form-item label="key" label-width="40px">
<el-input
placeholder="支持*模糊key"
placeholder="match 支持*模糊key"
style="width: 240px"
v-model="scanParam.match"
@clear="clear()"
@@ -36,7 +36,14 @@
<el-form-item>
<el-button @click="searchKey()" type="success" icon="search" plain></el-button>
<el-button @click="scan()" icon="bottom" plain>scan</el-button>
<el-button type="primary" icon="plus" @click="onAddData(false)" plain></el-button>
<el-popover placement="right" :width="200" trigger="click">
<template #reference>
<el-button type="primary" icon="plus" plain></el-button>
</template>
<el-tag @click="onAddData('string')" :color="getTypeColor('string')" style="cursor: pointer">string</el-tag>
<el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5" style="cursor: pointer">hash</el-tag>
<el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5" style="cursor: pointer">set</el-tag>
</el-popover>
</el-form-item>
<div style="float: right">
<span>keys: {{ dbsize }}</span>
@@ -69,17 +76,32 @@
<div style="text-align: center; margin-top: 10px"></div>
<!-- <value-dialog v-model:visible="valueDialog.visible" :keyValue="valueDialog.value" /> -->
<hash-value
v-model:visible="hashValueDialog.visible"
:operationType="dataEdit.operationType"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
@cancel="onCancelDataEdit"
@valChange="searchKey"
/>
<data-edit
v-model:visible="dataEdit.visible"
<string-value
v-model:visible="stringValueDialog.visible"
:operationType="dataEdit.operationType"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
@cancel="onCancelDataEdit"
@valChange="searchKey"
/>
<set-value
v-model:visible="setValueDialog.visible"
:title="dataEdit.title"
:keyInfo="dataEdit.keyInfo"
:redisId="scanParam.id"
:operationType="dataEdit.operationType"
:stringValue="dataEdit.stringValue"
:setValue="dataEdit.setValue"
:hashValue="dataEdit.hashValue"
@valChange="searchKey"
@cancel="onCancelDataEdit"
/>
@@ -91,13 +113,17 @@ import { redisApi } from './api';
import { toRefs, reactive, defineComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
import DataEdit from './DataEdit.vue';
import HashValue from './HashValue.vue';
import StringValue from './StringValue.vue';
import SetValue from './SetValue.vue';
import { isTrue, notBlank, notNull } from '@/common/assert';
export default defineComponent({
name: 'DataOperation',
components: {
DataEdit,
StringValue,
HashValue,
SetValue,
ProjectEnvSelect,
},
setup() {
@@ -113,10 +139,6 @@ export default defineComponent({
count: 10,
cursor: {},
},
valueDialog: {
visible: false,
value: {},
},
dataEdit: {
visible: false,
title: '新增数据',
@@ -126,9 +148,15 @@ export default defineComponent({
timed: -1,
key: '',
},
stringValue: '',
hashValue: [{ key: '', value: '' }],
setValue: [{ value: '' }],
},
hashValueDialog: {
visible: false,
},
stringValueDialog: {
visible: false,
},
setValueDialog: {
visible: false,
},
keys: [],
dbsize: 0,
@@ -158,10 +186,15 @@ export default defineComponent({
const scan = async () => {
isTrue(state.scanParam.id != null, '请先选择redis');
notBlank(state.scanParam.count, 'count不能为空');
isTrue(state.scanParam.count < 20001, 'count不能超过20000');
const match = state.scanParam.match;
if (!match || match == '*') {
isTrue(state.scanParam.count <= 200, 'match为空或者*时, count不能超过200');
} else {
isTrue(state.scanParam.count <= 20000, 'count不能超过20000');
}
state.loading = true;
try {
const res = await redisApi.scan.request(state.scanParam);
state.keys = res.keys;
@@ -207,60 +240,43 @@ export default defineComponent({
const getValue = async (row: any) => {
const type = row.type;
const key = row.key;
let res: any;
const reqParam = {
key: row.key,
id: state.scanParam.id,
};
switch (type) {
case 'string':
res = await redisApi.getStringValue.request(reqParam);
break;
case 'hash':
res = await redisApi.getHashValue.request(reqParam);
break;
case 'set':
res = await redisApi.getSetValue.request(reqParam);
break;
default:
res = null;
break;
}
notNull(res, '暂不支持该类型数据查看');
if (type == 'string') {
state.dataEdit.stringValue = res;
}
if (type == 'set') {
state.dataEdit.setValue = res.map((x: any) => {
return {
value: x,
};
});
}
if (type == 'hash') {
const hash = [];
//遍历key和value
const keys = Object.keys(res);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = res[key];
hash.push({
key,
value,
});
}
state.dataEdit.hashValue = hash;
}
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = row.ttl;
state.dataEdit.keyInfo.key = key;
state.dataEdit.keyInfo.key = row.key;
state.dataEdit.operationType = 2;
state.dataEdit.title = '修改数据';
state.dataEdit.visible = true;
state.dataEdit.title = '查看数据';
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onAddData = (type: string) => {
notNull(state.scanParam.id, '请先选择redis');
state.dataEdit.operationType = 1;
state.dataEdit.title = '新增数据';
state.dataEdit.keyInfo.type = type;
state.dataEdit.keyInfo.timed = -1;
if (type == 'hash') {
state.hashValueDialog.visible = true;
} else if (type == 'string') {
state.stringValueDialog.visible = true;
} else if (type == 'set') {
state.setValueDialog.visible = true;
} else {
ElMessage.warning('暂不支持该类型');
}
};
const onCancelDataEdit = () => {
state.dataEdit.keyInfo = {} as any;
};
const del = (key: string) => {
@@ -331,20 +347,6 @@ export default defineComponent({
}
};
const onAddData = () => {
notNull(state.scanParam.id, '请先选择redis');
state.dataEdit.operationType = 1;
state.dataEdit.title = '新增数据';
state.dataEdit.visible = true;
};
const onCancelDataEdit = () => {
state.dataEdit.keyInfo = {} as any;
state.dataEdit.stringValue = '';
state.dataEdit.setValue = [];
state.dataEdit.hashValue = [];
};
return {
...toRefs(state),
changeProjectEnv,

254
mayfly_go_web/src/views/ops/redis/HashValue.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
<el-form label-width="85px">
<el-form-item prop="key" label="key:">
<el-input :disabled="operationType == 2" v-model="key.key"></el-input>
</el-form-item>
<el-form-item prop="timed" label="过期时间:">
<el-input v-model.number="key.timed" type="number"></el-input>
</el-form-item>
<el-form-item prop="dataType" label="数据类型:">
<el-input v-model="key.type" disabled></el-input>
</el-form-item>
<el-row class="mt10">
<el-form label-position="right" :inline="true">
<el-form-item label="field" label-width="40px" v-if="operationType == 2">
<el-input placeholder="支持*模糊field" style="width: 140px" v-model="scanParam.match" clearable size="small"></el-input>
</el-form-item>
<el-form-item label="count" v-if="operationType == 2">
<el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count" size="small"></el-input>
</el-form-item>
<el-form-item>
<el-button v-if="operationType == 2" @click="reHscan()" type="success" icon="search" plain size="small"></el-button>
<el-button v-if="operationType == 2" @click="hscan()" icon="bottom" plain size="small">scan</el-button>
<el-button @click="onAddHashValue" icon="plus" size="small" plain>添加</el-button>
</el-form-item>
<div v-if="operationType == 2" class="mt10" style="float: right">
<span>fieldSize: {{ keySize }}</span>
</div>
</el-form>
</el-row>
<el-table :data="hashValues" stripe style="width: 100%">
<el-table-column prop="field" label="field" width>
<template #default="scope">
<el-input v-model="scope.row.field" clearable size="small"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check" size="small" plain></el-button>
<el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small" plain></el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer v-if="operationType == 1">
<div class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
export default defineComponent({
name: 'HashValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
require: true,
},
redisId: {
type: [Number],
require: true,
},
keyInfo: {
type: [Object],
},
hashValue: {
type: [Array, Object],
},
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: 0,
key: {
key: '',
type: 'hash',
timed: -1,
},
scanParam: {
key: '',
id: 0,
cursor: 0,
match: '',
count: 10,
},
keySize: 0,
hashValues: [
{
field: '',
value: '',
},
],
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.hashValues = [];
state.key = {} as any;
}, 500);
};
watch(props, async (newValue) => {
const visible = newValue.visible;
state.redisId = newValue.redisId;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
if (visible && state.operationType == 2) {
state.scanParam.id = props.redisId;
state.scanParam.key = state.key.key;
await reHscan();
}
state.dialogVisible = visible;
});
const reHscan = async () => {
state.scanParam.id = state.redisId;
state.scanParam.cursor = 0;
hscan();
};
const hscan = async () => {
const match = state.scanParam.match;
if (!match || match == '' || match == '*') {
if (state.scanParam.count > 100) {
ElMessage.error('match为空或者*时, count不能超过100');
return;
}
} else {
if (state.scanParam.count > 1000) {
ElMessage.error('count不能超过1000');
return;
}
}
const scanRes = await redisApi.hscan.request(state.scanParam);
state.scanParam.cursor = scanRes.cursor;
state.keySize = scanRes.keySize;
const keys = scanRes.keys;
const hashValue = [];
const fieldCount = keys.length / 2;
let nextFieldIndex = 0;
for (let i = 0; i < fieldCount; i++) {
hashValue.push({ field: keys[nextFieldIndex++], value: keys[nextFieldIndex++] });
}
state.hashValues = hashValue;
};
const hdel = async (field: any, index: any) => {
// 如果是新增操作，则直接数组移除即可
if (state.operationType == 1) {
state.hashValues.splice(index, 1);
return;
}
await ElMessageBox.confirm(`确定删除[${field}]?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await redisApi.hdel.request({
id: state.redisId,
key: state.key.key,
field,
});
ElMessage.success('删除成功');
reHscan();
};
const hset = async (row: any) => {
await redisApi.saveHashValue.request({
id: state.redisId,
key: state.key.key,
timed: state.key.timed,
value: [
{
field: row.field,
value: row.value,
},
],
});
ElMessage.success('保存成功');
};
const onAddHashValue = () => {
state.hashValues.push({ field: '', value: '' });
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.hashValues.length > 0, 'hash内容不能为空');
const sv = { value: state.hashValues, id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveHashValue.request(sv);
ElMessage.success('保存成功');
cancel();
emit('valChange');
};
return {
...toRefs(state),
reHscan,
hscan,
cancel,
hdel,
hset,
onAddHashValue,
saveValue,
};
},
});
</script>
<style lang="scss">
#string-value-text {
flex-grow: 1;
display: flex;
position: relative;
.text-type-select {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
max-width: 70px;
}
}
</style>

157
mayfly_go_web/src/views/ops/redis/SetValue.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
<el-form label-width="85px">
<el-form-item prop="key" label="key:">
<el-input :disabled="operationType == 2" v-model="key.key"></el-input>
</el-form-item>
<el-form-item prop="timed" label="过期时间:">
<el-input v-model.number="key.timed" type="number"></el-input>
</el-form-item>
<el-form-item prop="dataType" label="数据类型:">
<el-input v-model="key.type" disabled></el-input>
</el-form-item>
<el-button @click="onAddSetValue" icon="plus" size="small" plain class="mt10">添加</el-button>
<el-table :data="value" stripe style="width: 100%">
<el-table-column prop="value" label="value" min-width="200">
<template #default="scope">
<el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button type="danger" @click="set.value.splice(scope.$index, 1)" icon="delete" size="small" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { isTrue, notEmpty } from '@/common/assert';
export default defineComponent({
name: 'SetValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
setValue: {
type: [Array, Object],
},
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
key: {
key: '',
type: 'string',
timed: -1,
},
value: [{ value: '' }],
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.value = [];
}, 500);
};
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType;
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getSetValue();
}
});
const getSetValue = async () => {
const res = await redisApi.getSetValue.request({
id: state.redisId,
key: state.key.key,
});
state.value = res.map((x: any) => {
return {
value: x,
};
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
isTrue(state.value.length > 0, 'set内容不能为空');
const sv = { value: state.value.map((x) => x.value), id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveSetValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
const onAddSetValue = () => {
state.value.push({ value: '' });
};
return {
...toRefs(state),
saveValue,
cancel,
onAddSetValue,
};
},
});
</script>
<style lang="scss">
#string-value-text {
flex-grow: 1;
display: flex;
position: relative;
.text-type-select {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
max-width: 70px;
}
}
</style>

169
mayfly_go_web/src/views/ops/redis/StringValue.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
<el-form label-width="85px">
<el-form-item prop="key" label="key:">
<el-input :disabled="operationType == 2" v-model="key.key"></el-input>
</el-form-item>
<el-form-item prop="timed" label="过期时间:">
<el-input v-model.number="key.timed" type="number"></el-input>
</el-form-item>
<el-form-item prop="dataType" label="数据类型:">
<el-input v-model="key.type" disabled></el-input>
</el-form-item>
<div id="string-value-text" style="width: 100%">
<el-input class="json-text" v-model="string.value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
<el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
<el-option key="text" label="text" value="text"> </el-option>
<el-option key="json" label="json" value="json"> </el-option>
</el-select>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import { notEmpty } from '@/common/assert';
import { formatJsonString } from '@/common/utils/format';
export default defineComponent({
name: 'StringValue',
components: {},
props: {
visible: {
type: Boolean,
},
title: {
type: String,
},
redisId: {
type: [Number],
require: true,
},
keyInfo: {
type: [Object],
},
// 操作类型，1：新增，2：修改
operationType: {
type: [Number],
},
},
emits: ['valChange', 'cancel', 'update:visible'],
setup(props: any, { emit }) {
const state = reactive({
dialogVisible: false,
operationType: 1,
redisId: '',
key: {
key: '',
type: 'string',
timed: -1,
},
string: {
type: 'text',
value: '',
},
});
const cancel = () => {
emit('update:visible', false);
emit('cancel');
setTimeout(() => {
state.key = {
key: '',
type: 'string',
timed: -1,
};
state.string.value = '';
state.string.type = 'text';
}, 500);
};
watch(
() => props.visible,
(val) => {
state.dialogVisible = val;
}
);
watch(
() => props.redisId,
(val) => {
state.redisId = val;
}
);
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
state.key = newValue.key;
state.redisId = newValue.redisId;
state.key = newValue.keyInfo;
state.operationType = newValue.operationType
// 如果是查看编辑操作，则获取值
if (state.dialogVisible && state.operationType == 2) {
getStringValue();
}
});
const getStringValue = async () => {
state.string.value = await redisApi.getStringValue.request({
id: state.redisId,
key: state.key.key,
});
};
const saveValue = async () => {
notEmpty(state.key.key, 'key不能为空');
notEmpty(state.string.value, 'value不能为空');
const sv = { value: formatJsonString(state.string.value, true), id: state.redisId };
Object.assign(sv, state.key);
await redisApi.saveStringValue.request(sv);
ElMessage.success('数据保存成功');
cancel();
emit('valChange');
};
// 更改文本类型
const onChangeTextType = (val: string) => {
if (val == 'json') {
state.string.value = formatJsonString(state.string.value, false);
return;
}
if (val == 'text') {
state.string.value = formatJsonString(state.string.value, true);
}
};
return {
...toRefs(state),
saveValue,
cancel,
onChangeTextType,
};
},
});
</script>
<style lang="scss">
#string-value-text {
flex-grow: 1;
display: flex;
position: relative;
.text-type-select {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
max-width: 70px;
}
}
</style>

3
mayfly_go_web/src/views/ops/redis/api.ts
View File

@@ -12,6 +12,9 @@ export const redisApi = {
getStringValue: Api.create("/redis/{id}/string-value", 'get'),
saveStringValue: Api.create("/redis/{id}/string-value", 'post'),
getHashValue: Api.create("/redis/{id}/hash-value", 'get'),
hscan: Api.create("/redis/{id}/hscan", 'get'),
hget: Api.create("/redis/{id}/hget", 'get'),
hdel: Api.create("/redis/{id}/hdel", 'delete'),
saveHashValue: Api.create("/redis/{id}/hash-value", 'post'),
getSetValue: Api.create("/redis/{id}/set-value", 'get'),
saveSetValue: Api.create("/redis/{id}/set-value", 'post'),

53
server/internal/devops/api/redis.go
View File

@@ -285,13 +285,6 @@ func (r *Redis) GetStringValue(rc *ctx.ReqCtx) {
rc.ResData = str
}
func (r *Redis) GetHashValue(rc *ctx.ReqCtx) {
ri, key := r.checkKey(rc)
res, err := ri.GetCmdable().HGetAll(context.TODO(), key).Result()
biz.ErrIsNilAppendErr(err, "获取hash值失败: %s")
rc.ResData = res
}
func (r *Redis) SetStringValue(rc *ctx.ReqCtx) {
g := rc.GinCtx
keyValue := new(form.StringValue)
@@ -305,6 +298,45 @@ func (r *Redis) SetStringValue(rc *ctx.ReqCtx) {
rc.ResData = str
}
func (r *Redis) Hscan(rc *ctx.ReqCtx) {
ri, key := r.checkKey(rc)
g := rc.GinCtx
count := ginx.QueryInt(g, "count", 10)
match := g.Query("match")
cursor := ginx.QueryInt(g, "cursor", 0)
contextTodo := context.TODO()
cmdable := ri.GetCmdable()
keys, nextCursor, err := cmdable.HScan(contextTodo, key, uint64(cursor), match, int64(count)).Result()
biz.ErrIsNilAppendErr(err, "hcan err: %s")
keySize, err := cmdable.HLen(contextTodo, key).Result()
biz.ErrIsNilAppendErr(err, "hlen err: %s")
rc.ResData = map[string]interface{}{
"keys": keys,
"cursor": nextCursor,
"keySize": keySize,
}
}
func (r *Redis) Hdel(rc *ctx.ReqCtx) {
ri, key := r.checkKey(rc)
field := rc.GinCtx.Query("field")
delRes, err := ri.GetCmdable().HDel(context.TODO(), key, field).Result()
biz.ErrIsNilAppendErr(err, "hdel err: %s")
rc.ResData = delRes
}
func (r *Redis) Hget(rc *ctx.ReqCtx) {
ri, key := r.checkKey(rc)
field := rc.GinCtx.Query("field")
res, err := ri.GetCmdable().HGet(context.TODO(), key, field).Result()
biz.ErrIsNilAppendErr(err, "hget err: %s")
rc.ResData = res
}
func (r *Redis) SetHashValue(rc *ctx.ReqCtx) {
g := rc.GinCtx
hashValue := new(form.HashValue)
@@ -315,13 +347,12 @@ func (r *Redis) SetHashValue(rc *ctx.ReqCtx) {
cmd := ri.GetCmdable()
key := hashValue.Key
// 简单处理->先删除，后新增
cmd.Del(context.TODO(), key)
contextTodo := context.TODO()
for _, v := range hashValue.Value {
res := cmd.HSet(context.TODO(), key, v["key"].(string), v["value"])
res := cmd.HSet(contextTodo, key, v["field"].(string), v["value"])
biz.ErrIsNilAppendErr(res.Err(), "保存hash值失败: %s")
}
if hashValue.Timed != -1 {
if hashValue.Timed != 0 && hashValue.Timed != -1 {
cmd.Expire(context.TODO(), key, time.Second*time.Duration(hashValue.Timed))
}
}

14
server/internal/devops/router/redis.go
View File

@@ -64,9 +64,17 @@ func InitRedisRouter(router *gin.RouterGroup) {
ctx.NewReqCtxWithGin(c).Handle(rs.SetStringValue)
})
// 获取hash类型值
redis.GET(":id/hash-value", func(c *gin.Context) {
ctx.NewReqCtxWithGin(c).Handle(rs.GetHashValue)
// hscan
redis.GET(":id/hscan", func(c *gin.Context) {
ctx.NewReqCtxWithGin(c).Handle(rs.Hscan)
})
redis.GET(":id/hget", func(c *gin.Context) {
ctx.NewReqCtxWithGin(c).Handle(rs.Hget)
})
redis.DELETE(":id/hdel", func(c *gin.Context) {
ctx.NewReqCtxWithGin(c).Handle(rs.Hdel)
})
// 设置hash类型值