优化配置管理

This commit is contained in:
Dragon
2023-10-25 17:55:15 +08:00
parent 8c1cd51293
commit c51d205a42
4 changed files with 366 additions and 336 deletions

1
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "peko-admin-web",
"version": "0.1.0",
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"admin-lte": "^2.3.2",
"axios": "^1.5.0",
"bootstrap": "^3.3.5",

View File

@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"admin-lte": "^2.3.2",
"axios": "^1.5.0",
"bootstrap": "^3.3.5",

View File

@@ -0,0 +1,28 @@
import request from '@/utils/request';
import qs from 'qs';
// 获取列表
export const getList = query => {
return request({
url: '/admin/sysConf/getList',
method: 'get',
params: query
});
};
// 保存新增
export const sysConfSave = query => {
return request({
url: '/admin/sysConf/save',
method: 'post',
params: query
});
};
// 删除
export const sysConfDel = query => {
return request({
url: '/admin/sysConf/del',
headers:{"Content-Type": 'application/x-www-form-urlencoded'},
method: 'post',
data: query
});
};

View File

@@ -1,350 +1,350 @@
<!-- eslint-disable vue/no-unused-components -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<!-- .content -->
<section class="content">
<div id="table"></div>
<div id="toolbar">
<button id="sysConf-add" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>增加
</button>
<button id="sysConf-multiDel" class="btn btn-default">
<i class="glyphicon glyphicon-wrench"></i>批量删除
</button>
</div>
</section><!-- .content -->
</div>
</div>
</section>
<div class="modal fade" id="sysConfModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="modalLabel">字典信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="sysConfForm">
<div class="form-group">
<label for="configId" class="col-sm-2 control-label">id</label>
<div class="col-sm-10">
<input type="text" class="form-control validate[required]" name="configId" id="configId">
</div>
</div>
<div class="form-group">
<label for="configName" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control validate[required]" name="configName"
id="configName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">状态</label>
<div class="col-sm-10">
<label class="radio-inline"><input type="radio" name="configStatus" value="1"
checked>有效</label>
<label class="radio-inline"><input type="radio" name="configStatus" value="2">无效</label>
</div>
</div>
<div class="form-group">
<label for="configValue" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="configValue" id="configValue">
</div>
</div>
<div class="form-group">
<label for="nameSpace" class="col-sm-2 control-label">命名空间</label>
<div class="col-sm-10">
<input type="text" class="form-control validate[required]" name="nameSpace" id="nameSpace">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">提示信息</h4>
</div>
<div class="modal-body" id="tipMsg"></div>
</div>
</div>
<div class="box">
<!-- 按钮 -->
<div class="but">
<el-button @click="addConfig()" type="primary" class="primary butIn"
>添加</el-button
>
<el-button @click="multipleDel()" type="danger" class="danger butIn"
>批量删除</el-button
>
<el-input
@input="handlerChange"
v-model="valsen"
type="text"
placeholder="请输入关键字进行搜索配置"
class="inputs"
/>
</div>
<!-- 表格 -->
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
tooltip-effect="dark"
style="margin-top: 25px; width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection"> </el-table-column>
<el-table-column align="center" prop="configId" label="ID"> </el-table-column>
<el-table-column
show-overflow-tooltip="true"
align="center"
prop="configName"
label="名称"
></el-table-column>
<el-table-column
show-overflow-tooltip="true"
align="center"
prop="configValue"
label="值"
></el-table-column>
<el-table-column
show-overflow-tooltip="true"
align="center"
prop="nameSpace"
label="命名空间"
></el-table-column>
<el-table-column align="center" label="状态">
<template v-slot="scope">{{
scope.row.configStatus == 1 ? "有效" : "无效"
}}</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template v-slot="scope">
<el-button @click="modifyTible(scope.row)" type="primary" class="primary"
>编辑</el-button
>
<el-button @click="delTible(scope.row)" type="danger" class="danger"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
class="paginationClass"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 25px"
/>
<!-- 弹窗 -->
<el-dialog
v-model="dialogTableVisible"
:title="dialogTableVisibleTitle"
width="500px"
>
<div class="userId">
<span>id</span>
<el-input
v-model="configId"
style="width: 75%"
class="input"
:disabled="disabledPub"
></el-input>
</div>
<div class="userId">
<span>名称</span>
<el-input v-model="configName" style="width: 75%" class="input"></el-input>
</div>
<div class="userId">
<span>状态</span>
<el-radio-group v-model="radio" class="ml-4">
<el-radio :label="1" size="large">有效</el-radio>
<el-radio :label="2" size="large">无效</el-radio>
</el-radio-group>
</div>
<div class="userId">
<span></span>
<el-input v-model="configValue" style="width: 75%" class="input"></el-input>
</div>
<div class="userId">
<span>命名空间</span>
<el-input v-model="nameSpace" style="width: 75%" class="input"></el-input>
</div>
<el-button
class="dialogTableVisibleBut"
type="info"
@click="dialogTableVisible = false"
>
关闭
</el-button>
<el-button class="dialogTableVisibleBut" type="primary" @click="saveBut()">
保存
</el-button>
</el-dialog>
<!-- 二次确认解除风险弹窗 -->
<el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
<span> 你确定删除该记录吗? 删除后再也不能找回请谨慎操作! ! ! </span>
<template #footer>
<span class="dialog-footer">
<el-button @click="centerDialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogClick()"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getSysConfList } from '@/api/system/sysconf';
import {
getList,
sysConfSave,
sysConfDel,
} from "@/api/sysconfAdminView/sysconfAdminView";
import { ElMessage } from "element-plus";
import qs from "qs";
export default {
name: "SysconfAdminView",
setup() {
function showText(obj) {
let text = unescape($(obj).prop('title'));
$("#tipMsg").text(text);
$("#tipModal").modal('show');
}
window.showText = showText;
return {
showText
};
name: "SysconfAdminView",
data() {
return {
valsen: "",
loading: false,
multipleSelection: null, //选中表格存储
tableData: [], //表格数据
tableData2: [], //表格数据
tableData3: [], //表格数据
//分页
totals: 0,
currentPage: 1,
pageSize: 10,
dialogTableVisibleTitle: "字典信息", //弹窗标题
dialogTableVisible: false, //弹窗控制
configId: "", //弹窗id
configName: "", //弹窗名称
radio: 1, //弹窗参单选
configValue: "", //弹窗值
nameSpace: "", //弹窗命名空间
disabledPub: true, //控制弹窗id是否禁用
type: null, // 控制是新增或者编辑 type 1新增2保存
delArr: [], //删除暂存
centerDialogVisible: false, //二次删除确认
};
},
created() {
this.getData();
},
methods: {
// 获取列表
getData() {
this.loading = true;
getList().then((res) => {
console.log(res);
this.totals = res.total;
this.tableData = res.rows;
this.tableData3 = res.rows;
this.loading = false;
});
},
created() {
this.$nextTick(function () {
this.initData();
this.getSysConf();
// 添加按钮
addConfig() {
this.type = 1;
this.disabledPub = false;
this.configId = "";
this.configName = "";
this.radio = 1;
this.configValue = "";
this.nameSpace = "";
this.dialogTableVisible = true;
},
// 表格编辑按钮
modifyTible(row) {
this.type = 2;
this.disabledPub = true;
this.configId = row.configId;
this.configName = row.configName;
this.radio = row.configStatus;
this.configValue = row.configValue;
this.nameSpace = row.nameSpace;
this.dialogTableVisible = true;
},
// 保存按钮
saveBut() {
if (this.type == 1) {
if (this.configId == "") {
ElMessage({
showClose: true,
message: "请输入id",
type: "error",
});
return;
} else if (this.configName == "") {
ElMessage({
showClose: true,
message: "请输入名称",
type: "error",
});
return;
} else if (this.configValue == "") {
ElMessage({
showClose: true,
message: "请输入值",
type: "error",
});
return;
}
this.sysConfSaveFun();
} else {
this.sysConfSaveFun();
}
this.dialogTableVisible = false;
},
// 保存接口函数
sysConfSaveFun() {
this.loading = true;
sysConfSave({
configId: this.configId,
configName: this.configName,
configStatus: this.radio,
configValue: this.configValue,
nameSpace: this.nameSpace,
}).then((res) => {
this.getData();
});
},
// 表格选中处理
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
methods: {
getSysConf() {
getSysConfList().then(res => {
$('#table').bootstrapTable('load', res.rows);
});
},
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{field: 'tmp', title: 'ID', align: 'center', width: '5%', checkbox: true},
{
field: 'configId',
title: 'id',
align: 'center',
width: '5%',
},
{
field: 'configName',
title: '名称',
align: 'center',
width: '5%',
formatter: function (val, row, index) {
return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
}
},
{
field: 'configValue',
title: '值',
align: 'center',
width: '5%',
formatter: function (val, row, index) {
return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
}
},
{
field: 'configStatus',
title: '状态',
align: 'center',
width: '5%',
formatter: function (val, row, index) {
if (val == 1) {
return '有效';
}
else if (val == 2) {
return '无效';
}
}
},
{
field: 'nameSpace',
title: '命名空间',
align: 'center',
width: '5%',
formatter: function (val, row, index) {
return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
}
},
{
field: 'configId',
title: '操作',
align: 'center',
width: '5%',
formatter: function (val, row, index) {
return '<button class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
'<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
'&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
cache: false,
striped: true,
showRefresh: true,
pageNumber: 1,
pageSize: 10,
pagination: true,
pageList: [10, 25, 50, 100],
search: true,
sidePagination: "client",
toolbar: '#toolbar'
});
$("#table").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除该记录吗?" +
"\r\n删除后再也不能找回请谨慎操作")) {
$.ajax({
type: 'post',
url: "/admin/sysConf/del.action",
data: { 'ids': JSON.stringify([id]) },
dataType: "json",
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
getSysConfList().then(res => {
$('#table').bootstrapTable('load', res.rows);
});
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
$("#sysConf-add").click(function () {
// 打开编辑弹窗
$("#sysConfModal").modal('show');
$("#sysConfForm")[0].reset();
$("#configId").val('');
$("#configId").attr('readonly', false);
});
$("#sysConf-multiDel").click(function () {
var rows = $("#table").bootstrapTable("getSelections");
if (rows.length == 0) {
alert("请先选择要删除的记录");
return;
}
console.log("rows: " + rows.length);
var idArr = [];
for (var i = 0; i < rows.length; i++) {
idArr.push(rows[i]['configId']);
}
console.log(idArr);
if (confirm("你确认批量删除该记录吗?" +
"\r\n删除后再也不能找回请谨慎操作")) {
$.ajax({
type: 'post',
url: "/admin/sysConf/del.action",
data: { 'ids': JSON.stringify(idArr) },
dataType: "json",
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
getSysConfList().then(res => {
$('#table').bootstrapTable('load', res.rows);
});
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
$("#cancel").click(function () {
TableHelper.unCheckAll("#table");
});
$("#table").on("click", '.opt-edit', function () {
$("#configId").attr('readonly', true);
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/sysConf/get.action",
data: { id: id },
dataType: "json",
success: function (json) {
if (json.entity) {
$("#configId").val(json.entity.configId);
$("#configName").val(json.entity.configName);
$("#configValue").val(json.entity.configValue);
$("#nameSpace").val(json.entity.nameSpace);
var status = json.entity.configStatus - 1;
$("input:radio[name='configStatus']")[status].checked = true;
// 打开编辑弹窗
$("#sysConfModal").modal('show');
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
$("#save").click(function () {
if ($("#sysConfForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/sysConf/save.action",
data: $('#sysConfForm').serialize(),
dataType: "json",
success: function (json) {
if (json.success == 'true') {
$("#sysConfModal").modal('hide');
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
getSysConfList().then(res => {
$('#table').bootstrapTable('load', res.rows);
});
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("保存失败");
$("#tipModal").modal('show');
}
}
});
}
});
});
}
// 表格选中处理
handleSelectionChange(val) {
val.forEach((res, i) => {
this.delArr[i] = res.configId;
});
},
unmounted() {
$('#table').bootstrapTable('destroy');
}
// 单个删除按钮
delTible(row) {
this.delArr = [row.configId];
this.centerDialogVisible = true;
},
// 多个删除按钮
multipleDel(row) {
console.log(this.delArr);
this.centerDialogVisible = true;
},
// 删除函数
delFun() {
this.loading = true;
sysConfDel({ ids: JSON.stringify(this.delArr) }).then((res) => {
this.getData();
});
this.centerDialogVisible = false;
},
// 二次确认删除按钮
dialogClick() {
this.delFun();
},
// 分页导航
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
handlerChange() {
// console.log(this.fillist());
},
},
watch: {
valsen: {
immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
handler(val) {
this.tableData = this.tableData3.filter((p) => {
return (
p.configId.indexOf(val) !== -1 ||
p.configName.indexOf(val) !== -1 ||
p.configValue.indexOf(val) !== -1 ||
p.nameSpace.indexOf(val) !== -1
);
});
},
},
},
};
</script>
<style scoped>
.table_line {
word-break: break-all;
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.userId {
margin-bottom: 20px;
span {
width: 60px;
margin-right: 30px;
display: inline-block;
text-align: right;
}
}
.but {
width: 100%;
margin-bottom: 20px;
height: 30px;
.butIn {
float: left;
}
.inputs {
float: right;
width: 15%;
margin-right: 20px;
}
}
}
.td_center {
vertical-align: middle !important;
}
.table_line {
word-break: break-all;
}
.td_center {
vertical-align: middle !important;
}
</style>
</style>