第一次发布
This commit is contained in:
caolc
361
src/views/system/redis/RedisManageList.vue
Normal file
361
src/views/system/redis/RedisManageList.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="table-header table-div el-scrollbar">
|
||||
<ListLayout>
|
||||
<div slot="search" style="margin-top: 5px">
|
||||
<el-form
|
||||
slot="search"
|
||||
label-width="100px"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="listQuery.key"
|
||||
placeholder="RedisKey"
|
||||
style="width: 200px"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div slot="button-group" style="marign-top: 5px" />
|
||||
<el-row slot="button-group" style="margin-top: 5px">
|
||||
<el-col :span="16" class="tal">
|
||||
<!--这里放添加导出等按钮-->
|
||||
<el-button
|
||||
type="primary"
|
||||
class="filter-item"
|
||||
style="margin-left: 10px"
|
||||
icon="el-icon-edit"
|
||||
@click="dialogFormVisible = true"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="$store.getters.size"
|
||||
icon="el-icon-search"
|
||||
@click="handleFilter"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
:size="$store.getters.size"
|
||||
icon="el-icon-refresh"
|
||||
@click="listQuery.key = {}"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div slot="table">
|
||||
<el-table :key="tableKey" stripe :data="list" fit>
|
||||
<el-table-column
|
||||
label="key"
|
||||
prop="key"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="value"
|
||||
prop="value"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="过期时间"
|
||||
prop="time"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="230"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="primary" size="mini" @click="setUpdate(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" @click="deletedRedis(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</ListLayout>
|
||||
|
||||
<el-dialog title="新增Redis键值对" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="add">
|
||||
<el-form-item label="KEY" label-width="100px">
|
||||
<el-input v-model="add.key" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="VALUE" label-width="100px">
|
||||
<el-input v-model="add.value" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="TIME" label-width="100px">
|
||||
<el-input
|
||||
v-model="add.time"
|
||||
type="number"
|
||||
placeholder="请输入时间"
|
||||
/>
|
||||
秒 ( -1 代表永不过期)
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addRedis">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog title="修改Redis键值对" :visible.sync="dialogFUpdateVisible">
|
||||
<el-form :model="updateListQuery">
|
||||
<el-form-item label="KEY" disabled label-width="100px">
|
||||
<el-input v-model="updateListQuery.key" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="VALUE" label-width="100px">
|
||||
<el-input v-model="updateListQuery.value" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="TIME" label-width="100px">
|
||||
<el-input
|
||||
v-model="updateListQuery.time"
|
||||
type="number"
|
||||
placeholder="请输入时间"
|
||||
/>
|
||||
秒 ( -1 代表永不过期)
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFUpdateVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="updateRedis">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
likeRedis,
|
||||
addRedis,
|
||||
updateRedis,
|
||||
deletedRedis,
|
||||
} from "@/api/redis/RedisManage";
|
||||
|
||||
export default {
|
||||
name: "ComplexTable",
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: undefined,
|
||||
dialogFormVisible: false,
|
||||
dialogFUpdateVisible: false,
|
||||
listQuery: {
|
||||
key: undefined,
|
||||
value: undefined,
|
||||
time: undefined,
|
||||
},
|
||||
add: {
|
||||
key: undefined,
|
||||
value: undefined,
|
||||
time: undefined,
|
||||
},
|
||||
deleteparams: {
|
||||
key: undefined,
|
||||
value: undefined,
|
||||
time: undefined,
|
||||
},
|
||||
updateListQuery: {
|
||||
key: undefined,
|
||||
value: undefined,
|
||||
time: undefined,
|
||||
oldKey: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
likeRedis(this.listQuery).then((response) => {
|
||||
console.log(response);
|
||||
if (response.data.size === 0) {
|
||||
this.$message.warning("没有查询到数据!");
|
||||
}
|
||||
this.list = response.data;
|
||||
});
|
||||
},
|
||||
setUpdate(row) {
|
||||
this.updateListQuery.key = row.key;
|
||||
this.updateListQuery.value = row.value;
|
||||
this.updateListQuery.time = row.time;
|
||||
this.updateListQuery.oldKey = row.key;
|
||||
this.dialogFUpdateVisible = true;
|
||||
},
|
||||
deletedRedis(row) {
|
||||
this.deleteparams.key = row.key;
|
||||
this.$confirm("确定删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deletedRedis(this.deleteparams).then((response) => {
|
||||
console.log(response);
|
||||
if (response.code === 20000) {
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
this.list = response.data;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消",
|
||||
});
|
||||
});
|
||||
},
|
||||
updateRedis() {
|
||||
if (!this.updateListQuery.key) {
|
||||
this.$message.warning("key值不能为空!");
|
||||
return;
|
||||
}
|
||||
// if (this.listQuery.value) {
|
||||
// this.$message.warning('value值不能为空!')
|
||||
// }
|
||||
if (!this.updateListQuery.time) {
|
||||
this.$message.warning("time值不能为空!");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确定修改?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
updateRedis(this.updateListQuery).then((response) => {
|
||||
console.log(response);
|
||||
if (response.code === 20000) {
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
this.updateListQuery.key = undefined;
|
||||
this.updateListQuery.value = undefined;
|
||||
this.updateListQuery.time = undefined;
|
||||
this.updateListQuery.oldKey = undefined;
|
||||
this.dialogFUpdateVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
this.list = response.data;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.updateListQuery.key = undefined;
|
||||
this.updateListQuery.value = undefined;
|
||||
this.updateListQuery.time = undefined;
|
||||
this.dialogFUpdateVisible = false;
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消",
|
||||
});
|
||||
});
|
||||
},
|
||||
addRedis() {
|
||||
if (!this.add.key) {
|
||||
this.$message.warning("key值不能为空!");
|
||||
return;
|
||||
}
|
||||
// if (this.listQuery.value) {
|
||||
// this.$message.warning('value值不能为空!')
|
||||
// }
|
||||
if (!this.add.time) {
|
||||
this.$message.warning("time值不能为空!");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确定添加?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
addRedis(this.add).then((response) => {
|
||||
console.log(response);
|
||||
if (response.code === 20000) {
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
this.listQuery.key = this.add.key;
|
||||
|
||||
this.add.key = undefined;
|
||||
this.add.value = undefined;
|
||||
this.add.time = undefined;
|
||||
this.dialogFormVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.listQuery.key = undefined;
|
||||
this.listQuery.value = undefined;
|
||||
this.listQuery.time = undefined;
|
||||
this.dialogFormVisible = false;
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleFilter() {
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.handle-button-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.table-div {
|
||||
min-height: calc(100vh - 150px);
|
||||
max-height: calc(100vh - 110px);
|
||||
position: relative;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-div >>> .header-container {
|
||||
position: sticky;
|
||||
top: 0rem;
|
||||
min-height: 152px;
|
||||
z-index: 4;
|
||||
background: #fff;
|
||||
}
|
||||
.table-div .el-table__footer-wrapper {
|
||||
position: fixed !important;
|
||||
}
|
||||
.page-div {
|
||||
/* position: fixed; */
|
||||
background: #fff;
|
||||
bottom: 0rem;
|
||||
z-index: 4;
|
||||
min-width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user