260 lines
12 KiB
Vue
260 lines
12 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<!-- .content -->
|
||
<section class="content">
|
||
<div id="table"></div>
|
||
<div id="toolbar">
|
||
名称:<input type="text" name="name" id="name" placeholder="请输入app名称">
|
||
|
||
状态:
|
||
<select name="status" id="seachStatus" class="input-m">
|
||
<option value="">--全部--</option>
|
||
<option value="1">有效</option>
|
||
<option value="2">无效</option>
|
||
</select>
|
||
|
||
<button class="btn btn-default" id="search">
|
||
<i class="glyphicon glyphicon-wrench"></i>查询
|
||
</button>
|
||
|
||
<button class="btn btn-primary" id="add">
|
||
<i class="glyphicon glyphicon-plus"></i>增加
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 弹窗 -->
|
||
<div class="modal fade" id="appNameModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">x</span>
|
||
</button>
|
||
|
||
<div class="modal-title" id="appNameModalLabel">app配置</div>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<form action="" id="addForm" class="form-horizontal">
|
||
<input type="hidden" id="modal_id">
|
||
<div class="form-group">
|
||
<label for="modal_app" class="col-sm-3 control-label">app：</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="app" id="modal_app"
|
||
placeholder="app">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal_appName" class="col-sm-3 control-label">app名称：</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="app" id="modal_appName"
|
||
placeholder="请输入app名称">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal_remark" class="col-sm-3 control-label">备注：</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[minlength: 200]" name="remark"
|
||
id="modal_remark" placeholder="不超过200个字符">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal_status" class="col-sm-3 control-label">状态：</label>
|
||
<div class="col-sm-8">
|
||
<select id="modal_status" name="status" class="form-control validate[required]">
|
||
<option value="">请选择...</option>
|
||
<option value="1">有效</option>
|
||
<option value="2">无效</option>
|
||
</select>
|
||
</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" data-primary="addSave" id="save">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
|
||
export default {
|
||
name: "AppAdminView",
|
||
setup() {
|
||
return {};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{ field: 'id', title: 'ID', align: 'center', valign: 'middle', width: '5%' },
|
||
{ field: 'app', title: 'app', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'appName', title: '名称', align: 'center', valign: 'middle', width: '10%' },
|
||
{ field: 'remark', title: '备注', align: 'center', valign: 'middle', width: '10%' },
|
||
{
|
||
field: 'status', title: '状态', align: 'center', valign: 'middle', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (null == val) {
|
||
return '-';
|
||
}
|
||
if (val == 1) {
|
||
return '<span class="label label-success">有效</span>';
|
||
} else if (val == 2) {
|
||
return '<span class="label label-danger">无效</span>';
|
||
} else {
|
||
return val;
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
field: 'createTime', title: '创建时间', align: 'center', valign: 'middle', width: '10%',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
var date = new Date(val);
|
||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||
} else {
|
||
return '-';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'tmp', title: '操作', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
|
||
var key = row.id;
|
||
var str = '<button class="btn btn-primary btn-sm opt-edit" data-id="' + key + '">编辑</button>';
|
||
return str;
|
||
}
|
||
}
|
||
],
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 10,
|
||
pagination: true,
|
||
pageList: [10, 20, 30, 50],
|
||
sidePagination: 'server',
|
||
queryParamsType: 'undefined',
|
||
queryParams: function queryParams(params) {
|
||
var param = {
|
||
pageSize: params.pageSize,
|
||
pageNumber: params.pageNumber,
|
||
name: $('#name').val(),
|
||
status: $('#seachStatus').val(),
|
||
};
|
||
return param;
|
||
},
|
||
uniqueId: 'id',
|
||
toolbar: '#toolbar',
|
||
url: '/admin/appName/list',
|
||
onLoadSuccess: function () {
|
||
console.log('load success');
|
||
},
|
||
onLoadError: function () {
|
||
console.log('load fail');
|
||
}
|
||
});
|
||
|
||
// 编辑按钮点击事件
|
||
$('#table').on('click', '.opt-edit', function () {
|
||
clearModal();
|
||
var id = $(this).data('id');
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/appName/getById.action",
|
||
data: { id: id },
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json && json.code == 200) {
|
||
var data = json.data;
|
||
$("#modal_id").val(id);
|
||
$('#modal_app').val(data.app);
|
||
$('#modal_appName').val(data.appName);
|
||
$('#modal_status').val(data.status);
|
||
$('#modal_remark').val(data.remark);
|
||
} else {
|
||
$("#tipMsg").text("获取菜单信息出错");
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
$("#appNameModalLabel").text("编辑app配置");
|
||
$("#appNameModal").modal('show');
|
||
});
|
||
|
||
// 添加事件
|
||
$('#add').on('click', function () {
|
||
clearModal();
|
||
$('#appNameModal').modal('show');
|
||
});
|
||
|
||
// 保存
|
||
$('#save').on('click', function () {
|
||
if ($('#addForm').validationEngine('validate')) {
|
||
var param = {};
|
||
param.id = $('#modal_id').val();
|
||
param.app = $('#modal_app').val();
|
||
param.appName = $('#modal_appName').val();
|
||
param.status = $('#modal_status').val();
|
||
param.remark = $('#modal_remark').val();
|
||
|
||
$.ajax({
|
||
type: 'post',
|
||
url: '/admin/appName/saveOrUpdate',
|
||
data: param,
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
$('#appNameModal').modal('hide');
|
||
$('#tipMsg').text('保存成功');
|
||
$('#tipModal').modal('show');
|
||
TableHelper.doRefresh('#table')
|
||
} else {
|
||
$('#tipMsg').text('保存失败，错误码：' + res.message);
|
||
$('#tipModal').modal('show');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
|
||
$("#search").on('click', function () {
|
||
TableHelper.doRefresh('#table');
|
||
});
|
||
|
||
function clearModal() {
|
||
$('#addForm')[0].reset();
|
||
$('#addForm').validationEngine('hideAll');
|
||
$('#modal_id').val('');
|
||
}
|
||
|
||
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |