Files
peko-admin-web/src/views/family/FamilyAdminView.vue
2024-04-22 10:45:13 +08:00

780 lines
39 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 -->
<div id="table"></div>
<div id="toolbar">
<form id="searchForm" action="/admin/family/export" method="get" target="_blank">
<div class="col-sm-12">
<label for="familyId" class="col-sm-1 control-label">家族ID:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="familyId" id="familyId">
</div>
<label for="familyNick" class="col-sm-1 control-label">家族昵称:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="familyNick" id="familyNick">
</div>
<label for="leaderId" class="col-sm-1 control-label">族长ID:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="leaderId" id="leaderId">
</div>
<label for="leaderNick" class="col-sm-1 control-label">族长昵称:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="leaderNick" id="leaderNick">
</div>
</div>
</form>
<div class="col-sm-12">
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>搜索
</button>
<button id="btnAdd" class="btn btn-default opt-apply">
<i class="glyphicon glyphicon-adjust"></i>增加
</button>
<button id="btnExport" class="btn btn-default ">
<i class="glyphicon glyphicon-export"></i>导出
</button>
</div>
</div>
</div>
</div>
</section>
<!--新增家族弹窗-->
<div class="modal fade" id="addFamilyModal" 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="addFamilyForm">
<div class="form-group">
<label for="familyName" class="col-sm-3 control-label">家族名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="name" id="familyName"
placeholder="请输入家族名称,不超过15个字">
</div>
</div>
<div class="form-group">
<label for="leader" class="col-sm-3 control-label">族长ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="leader" id="leader"
placeholder="请输入族长ID">
</div>
</div>
<div class="form-group">
<label for="enableMo" class="col-sm-3 control-label">是否开放家族币:</label>
<div class="col-sm-9">
<input type="radio" name="openMoney" id="enableMo" value="true">
<input type="radio" name="openMoney" id="enableMoNo" value="false">
</div>
</div>
<div class="form-group" id="familyMoNameGroup">
<label for="familyMoName" class="col-sm-3 control-label">家族币名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="moneyName"
id="familyMoName" placeholder="请输入家族币名称不超过3个字">
</div>
</div>
<div class="form-group" id="familyMoAwardGroup">
<label for="familyMoAward" class="col-sm-3 control-label">创建家族币奖励:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="money" id="familyMoAward"
placeholder="请输入创建家族币奖励">
</div>
</div>
<div class="form-group" id="familyGameGroup">
<label for="enableGame" class="col-sm-3 control-label">是否开放家族游戏:</label>
<div class="col-sm-9">
<input type="radio" name="openGame" id="enableGame" value="true">
<input type="radio" name="openGame" id="enableGameNo" value="false">
</div>
</div>
<div class="form-group">
<label for="pic" class="col-sm-3 control-label">家族头像</label>
<div class="col-sm-9">
<img src="" id="picImage" style="width:250px;height:90px;" alt="">
<input type="file" id="picFile" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
<button class="btn btn-success" type="button"
onclick="uploadfile('picFile','picImage','pic','picInfo')">上传</button>
<input type="hidden" id="pic" name="icon" class="form-control" />
<span id="picInfo" style="color:red;"></span>
</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="add">提交</button>
</div>
</div>
</div>
</div>
<!-- 编辑家族弹窗 -->
<div class="modal fade" id="editFamilyModal" 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">x</span></button>
<h4 class="modal-title" id="editFamilyLabel">编辑家族</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="editFamilyForm">
<input type="hidden" name="editFamilyId" id="editFamilyId" />
<div class="form-group">
<label for="editFalilyNick" class="col-sm-3 control-label">家族昵称</label>
<div class="col-sm-9">
<input type="text" name="editFalilyNick" id="editFalilyNick"
class="form-control validate[required]">
</div>
</div>
<div class="form-group">
<label for="editLeaderId" class="col-sm-3 control-label">族长ID</label>
<div class="col-sm-9">
<input type="text" name="editLeaderId" id="editLeaderId" readonly="readonly" />
</div>
</div>
<div class="form-group">
<label for="editYes" class="col-sm-3 control-label">是否开放家族币:</label>
<div class="col-sm-9">
<input type="radio" name="editOpenMoney" id="editYes" value="true">
<input type="radio" name="editOpenMoney" id="editNo" value="false">
</div>
</div>
<div class="form-group" id="editFamilyMoNameGroup">
<label for="editFamilyMoName" class="col-sm-3 control-label">家族币名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="editFamilyMoName" id="editFamilyMoName"
readonly="readonly">
</div>
</div>
<div class="form-group" id="editFamilyGameGroup">
<label for="editEnable" class="col-sm-3 control-label">是否开放家族游戏:</label>
<div class="col-sm-9">
<input type="radio" name="editOpenGame" id="editEnable" value="true">
<input type="radio" name="editOpenGame" id="editDisable" value="false">
</div>
</div>
<div class="form-group">
<label for="editPic" class="col-sm-3 control-label">家族头像</label>
<div class="col-sm-9">
<img src="" id="editPicImage" style="width:250px;height:90px;" alt="">
<input type="file" id="editPicFile" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
<button class="btn btn-success" type="button"
onclick="uploadfile('editPicFile','editPicImage','editPic','editPicInfo')">上传</button>
<input type="hidden" id="editPic" name="icon" class="form-control" />
<span id="editPicInfo" style="color:red;"></span>
</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="edit">保存</button>
</div>
</div>
</div>
</div>
<!--禁用家族弹窗-->
<div class="modal fade" id="forbidFamilyModal" 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">x</span></button>
<h4 class="modal-title" id="forbFamilyLabel">禁用家族</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="forbFamilyForm">
<input type="hidden" name="forbFamilyId" id="forbFamilyId" />
<div class="form-group">
<label for="forbReason" class="col-sm-3 control-label">禁用原因</label>
<div class="col-sm-9">
<input type="text" name="forbReason" id="forbReason"
class="form-control validate[required]">
</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="forb">保存</button>
</div>
</div>
</div>
</div>
<!--解禁家族弹窗-->
<div class="modal fade" id="recoverFamilyModal" 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">x</span></button>
<h4 class="modal-title" id="recoverFamilyLabel">解禁家族</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="recoverFamilyForm">
<input type="hidden" name="forbFamilyId" id="recoverFamilyId" />
<div class="form-group">
<label for="forbReason" class="col-sm-3 control-label">解禁原因</label>
<div class="col-sm-9">
<input type="text" name="forbReason" id="recoverReason"
class="form-control validate[required]">
</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="recover">保存</button>
</div>
</div>
</div>
</div>
<!--解散家族弹窗-->
<div class="modal fade" id="dissFamilyModal" 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">x</span></button>
<h4 class="modal-title" id="dissFamilyLabel">解散家族</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="dissFamilyForm">
<input type="hidden" name="dissFamilyId" id="dissFamilyId" />
<div class="form-group">
<label for="dissReason" class="col-sm-3 control-label">解散原因</label>
<div class="col-sm-9">
<input type="text" name="dissReason" id="dissReason"
class="form-control validate[required]">
</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="move">提交</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
export default {
name: "FamilyAdminView",
setup() {
function uploadfile(file, image, path, info) {
$(this).attr('disabled', "true");
$.ajaxFileUpload({
fileElementId: file, //需要上传的文件域的ID即<input type="file">的ID。
url: '/admin/upload/img', //后台方法的路径
type: 'post', //当要提交自定义参数时这个参数要设置成post
dataType: 'json', //服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。
secureuri: false, //是否启用安全提交默认为false。
async: true, //是否是异步
success: function (json) { //提交成功后自动执行的处理函数参数data就是服务器返回的数据。
if (json.path) {
$('#' + path).val(json.path);
$('#' + image).attr("src", json.path);
if (json.path != '') {
$("#" + info).html('已上传成功');
} else {
$("#" + info).html('未上传成功');
}
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
$(this).removeAttr("disabled");
console.error(e);
}
});
}
window.uploadfile = uploadfile;
return {
uploadfile
};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
initTable();
// 查询刷新
$('#btnSearch').on('click', function () {
$('#table').bootstrapTable('destroy');
initTable();
})
// 新增家族弹窗
$("#btnAdd").click(function () {
clearForm("addFamilyForm");
//默认开放家族币和家族游戏
$("#enableMo").prop("checked", true);
$("#enableGame").prop("checked", true);
$("#addFamilyModal").modal('show');
});
//选择开放家族币联动
$("#enableMo").on("click", function () {
$("#familyMoNameGroup").show();
$("#familyMoAwardGroup").show();
$("#familyGameGroup").show();
});
$("#editYes").on("click", function () {
$("#editFamilyMoNameGroup").show();
$("#editFamilyGameGroup").show();
});
//不开放家族币联动
$("#enableMoNo").on("click", function () {
$("#familyMoNameGroup").hide();
$("#familyMoAwardGroup").hide();
$("#familyGameGroup").hide();
});
$("#editNo").on("click", function () {
$("#editFamilyMoNameGroup").hide();
$("#editFamilyGameGroup").hide();
});
//新增家族保存
$("#add").on("click", function () {
var familyName = $("#familyName").val();
var leaderId = $("#leader").val();
var enableMo = $("#enableMo").is(":checked");
var familyMoName = $("#familyMoName").val();
var familyMoAward = $("#familyMoAward").val();
var enableGame = $("#enableGame").is(":checked");
var pic = $("#pic").val();
if ($("#addFamilyForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/family/saveOrUpdate',
data: {
name: familyName,
leader: leaderId,
openMoney: enableMo,
moneyName: familyMoName,
money: familyMoAward,
openGame: enableGame,
icon: pic
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#addFamilyModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
});
//初始化表格数据
function initTable() {
$('#table').bootstrapTable({
columns: [
{ field: 'tmp', title: 'familyId', align: 'center', checkbox: true, width: '5%', valign: 'middle' },
//{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
{ field: 'familyId', title: '家族ID', align: 'center', width: '5%', valign: 'middle' },
{ field: 'familyName', title: '家族昵称', align: 'center', width: '5%', valign: 'middle' },
{
field: 'familyIcon',
title: '家族头像',
align: 'center',
width: '5%',
//valign: 'middle',
formatter: function (val, row, index) {
if (val.indexOf("https") == 0) {
return "<img src='" + val + "' height='106'>";
} else {
return row.value;
}
}
},
{ field: 'leader.erbanNo', title: '族长ID', align: 'center', width: '5%', valign: 'middle' },
{ field: 'leader.name', title: '族长昵称', align: 'center', width: '5%', valign: 'middle' },
{ field: 'memberCount', title: '家族成员(人)', align: 'center', width: '5%', valign: 'middle' },
{ field: 'moneyName', title: '家族币昵称', align: 'center', width: '5%', valign: 'middle' },
{ field: 'leader.money', title: '家族币数量', align: 'center', width: '5%', valign: 'middle' },
{
field: 'groups',
title: '家族群',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var count = val.length;
return count;
} else {
return '0';
}
}
},
{
field: 'createTime',
title: '创建时间',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var date = new Date(val);
return date.format("yyyy-MM-dd hh:mm:00");
} else {
return '-';
}
}
},
{
field: 'temp',
title: '操作',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
var key = row.familyId;
var returnStr = '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + key + '>' +
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>&nbsp;&nbsp;';
if (row.status == 1) {//正在使用
returnStr = returnStr + '<button id="btnStop" name="btnStop" class="btn btn-sm btn-success opt-stop" data-id=' + key + '>' +
'<i class="glyphicon glyphicon-stop"></i> 禁用</button>&nbsp;&nbsp;';
} else if (row.status == 2) {//已禁用
returnStr = returnStr + '<button id="btnRecover" name="btnStop" class="btn btn-sm btn-danger opt-recover" data-id=' + key + '>' +
'<i class="glyphicon glyphicon-stop"></i> 解禁</button>&nbsp;&nbsp;';
}
return returnStr + '<button id="btnMove" name="btnMove" class="btn btn-sm btn-success opt-move" data-id=' + key + '>' +
'<i class="glyphicon glyphicon-move"></i> 解散</button>&nbsp;&nbsp;';
}
}
],
cache: false,
striped: true,
showRefresh: false,
pageSize: 20,
pagination: true,
pageList: [20, 50, 100, 200, 300, 500],
search: false,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
familyId: $('#familyId').val(),
familyNick: $('#familyNick').val(),
leaderId: $('#leaderId').val(),
leaderNick: $('#leaderNick').val(),
};
return param;
},
toolbar: '#toolbar',
url: '/admin/family/list',
onLoadSuccess: function () { //加载成功时执行
$(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
})
}
$("#table").on("click", '.opt-edit', function () {
clearForm("editFamilyForm");
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/family/getById",
data: { familyId: id },
dataType: "json",
success: function (json) {
if (json) {
$("#editFamilyId").val(id);
$("#editFalilyNick").val(json.name);
$("#editLeaderId").val(json.leader);
ComboboxHelper.setDef("#editYes", json.openMoney);
ComboboxHelper.setDef("#editEnable", json.openGame);
// 礼物状态的值跟其他不同, 1为有效 0为无效
if (json.openMoney == true) {
//$("input:radio[name='enable']")[0].checked = true;
$("#editYes").prop("checked", true);
$("#editFamilyMoNameGroup").show();
$("#editFamilyGameGroup").show();
} else {
$("#editNo").prop("checked", true);
$("#editFamilyMoNameGroup").hide();
$("#editFamilyGameGroup").hide();
}
//已经设置过家族币名称
if (json.moneyName != null && json.moneyName != "") {
$("#editFamilyMoName").val(json.moneyName);
$("#editFamilyMoName").attr("readonly", "readonly");
} else {
$("#editFamilyMoName").removeAttr("readonly");
}
if (json.openGame == true) {
$("#editEnable").prop("checked", true);
} else {
$("#editDisable").prop("checked", true);
}
// 设置礼物图片
$('#editPic').val(json.icon);
$('#editPicImage').attr("src", json.icon);
if (json.icon != '') {
$("#editPicInfo").html('已上传');
} else {
$("#editPicInfo").html('未上传');
}
// 打开编辑弹窗
$("#editFamilyModal").modal('show');
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
//编辑家族保存
$("#edit").on("click", function () {
var familyId = $("#editFamilyId").val();
var familyName = $("#editFalilyNick").val();
var enableMo = $("#editYes").is(":checked");
var familyMoName = $("#editFamilyMoName").val();
var familyMoAward = $("#editFamilyMoAward").val();
var enableGame = $("#editEnable").is(":checked");
var pic = $("#editPic").val();
if ($("#editFamilyForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/family/saveOrUpdate',
data: {
id: familyId,
name: familyName,
openMoney: enableMo,
moneyName: familyMoName,
money: familyMoAward,
openGame: enableGame,
icon: pic,
status: 1
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#editFamilyModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
//打开禁用家族弹窗
$("#table").on('click', '.opt-stop', function () {
//清除数据
clearForm("forbidFamilyForm");
//设置数据
var familyId = $(this).attr("data-id");
$('#forbFamilyId').val(familyId);
$('#forbidFamilyModal').modal('show');
});
//禁用家族保存
$("#forb").on("click", function () {
var familyId = $("#forbFamilyId").val();
//TODO 权限教研暂时没做
if ($("#forbFamilyForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/family/saveOrUpdate',
data: {
id: familyId,
status: 2,
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#forbidFamilyModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
//打开解禁家族弹窗
$("#table").on('click', '.opt-recover', function () {
//清除数据
clearForm("recoverFamilyForm");
//设置数据
var familyId = $(this).attr("data-id");
$('#recoverFamilyId').val(familyId);
$('#recoverFamilyModal').modal('show');
});
//禁用家族保存
$("#recover").on("click", function () {
var familyId = $("#recoverFamilyId").val();
//TODO 权限教研暂时没做
if ($("#recoverFamilyForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/family/saveOrUpdate',
data: {
id: familyId,
status: 1,
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#recoverFamilyModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
//打开解散家族弹窗
$("#table").on('click', '.opt-move', function () {
//清除数据
clearForm("dissFamilyForm");
//设置数据
var familyId = $(this).attr("data-id");
$('#dissFamilyId').val(familyId);
$('#dissFamilyModal').modal('show');
});
//解散家族保存
$("#move").on("click", function () {
var familyId = $("#dissFamilyId").val();
//TODO 权限教研暂时没做
$("#tipMsg").text("操作中,请稍后...");
$("#tipModal").modal('show');
if ($("#dissFamilyForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/family/remove',
data: {
familyId: familyId
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#dissFamilyModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
function clearForm(formId) {
var $form = $('#' + formId);
debugger;
//清空输入框
$form.find('input').val('');
//清空单选按钮
$form.find('input:radio').attr("checked", false);
//清空文本域
$form.find('textarea').val('');
//清空图片
$form.find('img').attr("src", "");
//清空已上传
$form.find('span').html("");
}
/**导出家族列表*/
$("#btnExport").on("click", function () {
$("#searchForm").submit();
})
}
},
};
</script>
<style scoped></style>