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

1068 lines
56 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>
<div id="toolbar">
<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">
<i class="glyphicon glyphicon-plus"></i>增加
</button>
</div>
</div>
</div>
<!-- .content -->
<div id="table"></div>
</div>
</section>
<div class="modal fade" id="roomTagModal" 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">底部bar配置</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="addForm">
<input type="hidden" name="id" id="id" />
<div class="form-group">
<label for="configName" class="col-sm-3 control-label" id="configNameLab">配置名称<font color="red">
*</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="configName" id="configName"
placeholder="配置名称">
</div>
</div>
<!--底部配置-->
<div class="form-group">
<label for="tabNameA" class="col-sm-3 control-label" id="tabNameLabA">icon1<font color="red">*
</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="tabNameA" id="tabNameA"
placeholder="tab名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">未选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconImgUrlA" style='width:108px;height:45px;' alt="">
<input type="file" id="iconFileA" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconBtnA">上传</button>
<input type="hidden" id="iconUrlA" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconSelectedImgUrlA" style='width:108px;height:45px;' alt="">
<input type="file" id="iconSelectedFileA" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconSelectedBtnA">上传</button>
<input type="hidden" id="iconSelectedUrlA" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示动图</label>
<div class="col-sm-8">
<input type="file" id="tabSelectedAnimationFileA" name='uploadFile' accept='image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="tabSelectedAnimationA_tabSelectedAnimationUrlA">上传</button>
<input type="text" id="tabSelectedAnimationUrlA" name='alertWinPic' class="form-control">
</div>
</div>
<!--底部配置-->
<div class="form-group">
<label for="tabNameB" class="col-sm-3 control-label" id="tabNameLabB">icon2<font color="red">*
</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="tabNameB" id="tabNameB"
placeholder="tab名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">未选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconImgUrlB" style='width:108px;height:45px;' alt="">
<input type="file" id="iconFileB" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconBtnB">上传</button>
<input type="hidden" id="iconUrlB" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconSelectedImgUrlB" style='width:108px;height:45px;' alt="">
<input type="file" id="iconSelectedFileB" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconSelectedBtnB">上传</button>
<input type="hidden" id="iconSelectedUrlB" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示动图</label>
<div class="col-sm-8">
<input type="file" id="tabSelectedAnimationFileB" name='uploadFile' accept='image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="tabSelectedAnimationB_tabSelectedAnimationUrlB">上传</button>
<input type="text" id="tabSelectedAnimationUrlB" name='alertWinPic' class="form-control">
</div>
</div>
<!--底部配置-->
<div class="form-group">
<label for="tabNameC" class="col-sm-3 control-label" id="tabNameLabC">icon3<font color="red">*
</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="tabNameC" id="tabNameC"
placeholder="tab名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">未选中展示图</label>
<div class="col-sm-8">
<input type="file" id="iconFileC" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconBtnC">上传</button>
<input type="hidden" id="iconUrlC" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconSelectedImgUrlC" style='width:108px;height:45px;' alt="">
<input type="file" id="iconSelectedFileC" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="iconSelectedBtnC">上传</button>
<input type="hidden" id="iconSelectedUrlC" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示动图</label>
<div class="col-sm-8">
<input type="file" id="tabSelectedAnimationFileC" name='uploadFile' accept='image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="tabSelectedAnimationC_tabSelectedAnimationUrlC">上传</button>
<input type="text" id="tabSelectedAnimationUrlC" name='alertWinPic' class="form-control">
</div>
</div>
<!--底部配置-->
<div class="form-group">
<label for="tabNameD" class="col-sm-3 control-label" id="tabNameLabD">icon4<font color="red">*
</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="tabNameD" id="tabNameD"
placeholder="tab名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">未选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconImgUrlD" style='width:108px;height:45px;' alt="">
<input type="file" id="iconFileD" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconBtnD">上传</button>
<input type="hidden" id="iconUrlD" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconSelectedImgUrlD" style='width:108px;height:45px;' alt="">
<input type="file" id="iconSelectedFileD" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconSelectedBtnD">上传</button>
<input type="hidden" id="iconSelectedUrlD" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示动图</label>
<div class="col-sm-8">
<input type="file" id="tabSelectedAnimationFileD" name='uploadFile' accept='image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="tabSelectedAnimationD_tabSelectedAnimationUrlD">上传</button>
<input type="text" id="tabSelectedAnimationUrlD" name='alertWinPic' class="form-control">
</div>
</div>
<!--底部配置-->
<div class="form-group">
<label for="tabNameE" class="col-sm-3 control-label" id="tabNameLabE">icon5<font color="red">*
</font></label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="tabNameE" id="tabNameE"
placeholder="tab名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">未选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconImgUrlE" style='width:108px;height:45px;' alt="">
<input type="file" id="iconFileE" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconBtnE">上传</button>
<input type="hidden" id="iconUrlE" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示图</label>
<div class="col-sm-8">
<img src="" id="iconSelectedImgUrlE" style='width:108px;height:45px;' alt="">
<input type="file" id="iconSelectedFileE" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="iconSelectedBtnE">上传</button>
<input type="hidden" id="iconSelectedUrlE" name='alertWinPic'
class="form-control validate[required]">
</div>
<label class="col-sm-3 control-label">选中展示动图</label>
<div class="col-sm-8">
<input type="file" id="tabSelectedAnimationFileE" name='uploadFile' accept='image/svg'>
<button class="btn btn-success" type='button' name="animationBtn"
id="tabSelectedAnimationE_tabSelectedAnimationUrlE">上传</button>
<input type="text" id="tabSelectedAnimationUrlE" name='alertWinPic' class="form-control">
</div>
</div>
<div class="form-group" style="height: 150px">
<label class="col-sm-3 control-label">生效时段<font color="red">*</font>:</label>
<div class="col-sm-8">
<input type="text" class="input-sm datetime validate[required]" name="beginTime"
id="beginTime">
-<input type="text" class="input-sm datetime validate[required]" name="endTime"
id="endTime">
</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>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { formatTime } from '@/utils/maintainer';
export default {
name: "AppBottomBarAdminView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
$('.datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
$("#beginTime").datetimepicker({
minView: "month",
language: 'zh-CN',
todayBtn: 1,
autoclose: 1
}).on("changeDate", function (event) {
$("#endTime").datetimepicker('setStartDate', event.date);
});
$("#endTime").datetimepicker({
minView: "month",
language: 'zh-CN',
todayBtn: 1,
autoclose: 1,
useCurrent: false
}).on("changeDate", function (event) {
$("#beginTime").datetimepicker('setEndDate', event.date);
});
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'id', title: '序号', align: 'center', width: '5%' },
{ field: 'configName', title: '配置名称', align: 'center', width: '5%' },
{
field: 'tabIconA',
title: 'icon1',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='60' height='50'>";
}
},
{
field: 'tabIconB',
title: 'icon2',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='60' height='50'>";
}
},
{
field: 'tabIconC',
title: 'icon3',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='60' height='50'>";
}
},
{
field: 'tabIconD',
title: 'icon4',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='60' height='50'>";
}
},
{
field: 'tabIconE',
title: 'icon5',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='60' height='50'>";
}
},
{
field: 'beginTime', 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: 'endTime', 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: 'id',
title: '操作',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
if (row.isDefault) return '';
return '<button id="btnEdit" name="btnEdit" 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>';
}
}
],
undefinedText: "-",
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [20, 50, 100, 200, 300, 500],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNum: params.pageNumber,
pageSize: params.pageSize
};
return param;
},
ajax: function (request) { //使用ajax请求
$.ajax({
type: "GET",
url: '/admin/bottomBar/list',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: request.data,
success: function (res) {
apiResult(res);
request.success({
rows: res.data.rows,
total: res.data.total,
});
},
error: function (req) {
serverError(req);
}
})
},
toolbar: '#toolbar',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
//新建标签
$("#btnAdd").click(function () {
clearModal();
$("#roomTagModal").modal('show');
});
$("#add").click(function () {
var refSeq = $("#id").val();
var configName = $("#configName").val();
var tabNameA = $("#tabNameA").val();
var tabNameB = $("#tabNameB").val();
var tabNameC = $("#tabNameC").val();
var tabNameD = $("#tabNameD").val();
var tabNameE = $("#tabNameE").val();
var tabIconA = $("#iconUrlA").val();
var tabIconB = $("#iconUrlB").val();
var tabIconC = $("#iconUrlC").val();
var tabIconD = $("#iconUrlD").val();
var tabIconE = $("#iconUrlE").val();
var tabIconSelectedA = $("#iconSelectedUrlA").val();
var tabIconSelectedB = $("#iconSelectedUrlB").val();
var tabIconSelectedC = $("#iconSelectedUrlC").val();
var tabIconSelectedD = $("#iconSelectedUrlD").val();
var tabIconSelectedE = $("#iconSelectedUrlE").val();
var tabAnimationSelectedA = $("#tabSelectedAnimationUrlA").val();
var tabAnimationSelectedB = $("#tabSelectedAnimationUrlB").val();
var tabAnimationSelectedC = $("#tabSelectedAnimationUrlC").val();
var tabAnimationSelectedD = $("#tabSelectedAnimationUrlD").val();
var tabAnimationSelectedE = $("#tabSelectedAnimationUrlE").val();
var beginTime = $("#beginTime").val();
var endTime = $("#endTime").val();
if (tabIconA == null || tabIconA == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconB == null || tabIconB == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconC == null || tabIconC == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconD == null || tabIconD == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconE == null || tabIconE == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconSelectedA == null || tabIconSelectedA == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconSelectedB == null || tabIconSelectedB == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconSelectedC == null || tabIconSelectedC == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconSelectedD == null || tabIconSelectedD == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if (tabIconSelectedE == null || tabIconSelectedE == '') {
$("#tipMsg").text("保存失败,请先上传图片!");
$("#tipModal").modal('show');
return;
}
if ($("#addForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/bottomBar/saveBottomBar",
data: {
refSeq: refSeq,
configName: configName,
tabNameA: tabNameA,
tabNameB: tabNameB,
tabNameC: tabNameC,
tabNameD: tabNameD,
tabNameE: tabNameE,
tabIconA: tabIconA,
tabIconB: tabIconB,
tabIconC: tabIconC,
tabIconD: tabIconD,
tabIconE: tabIconE,
tabIconSelectedA: tabIconSelectedA,
tabIconSelectedB: tabIconSelectedB,
tabIconSelectedC: tabIconSelectedC,
tabIconSelectedD: tabIconSelectedD,
tabIconSelectedE: tabIconSelectedE,
tabAnimationSelectedA: tabAnimationSelectedA,
tabAnimationSelectedB: tabAnimationSelectedB,
tabAnimationSelectedC: tabAnimationSelectedC,
tabAnimationSelectedD: tabAnimationSelectedD,
tabAnimationSelectedE: tabAnimationSelectedE,
beginTime: beginTime,
endTime: endTime
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTagModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.message);
$("#tipModal").modal('show');
}
}
});
}
});
$("#table").on("click", '.opt-edit', function () {
var refSeq = $(this).attr("data-id");
clearModal();
$.ajax({
type: "get",
url: "/admin/bottomBar/getBarByRefSeq",
data: { refSeq: refSeq },
dataType: "json",
success: function (res) {
var json = res.data;
if (json) {
$("#id").val(refSeq);
$("#configName").val(json.configName);
$("#beginTime").val(formatTime(json.beginTime));
$("#endTime").val(formatTime(json.endTime));
$("#tabNameA").val(json.tabNameA);
$("#tabNameB").val(json.tabNameB);
$("#tabNameC").val(json.tabNameC);
$("#tabNameD").val(json.tabNameD);
$("#tabNameE").val(json.tabNameE);
$('#iconUrlA').val(json.tabIconA);
$('#iconImgUrlA').attr('src', json.tabIconA);
$('#iconUrlB').val(json.tabIconB);
$('#iconImgUrlB').attr('src', json.tabIconB);
$('#iconUrlC').val(json.tabIconC);
$('#iconImgUrlC').attr('src', json.tabIconC);
$('#iconUrlD').val(json.tabIconD);
$('#iconImgUrlD').attr('src', json.tabIconD);
$('#iconUrlE').val(json.tabIconE);
$('#iconImgUrlE').attr('src', json.tabIconE);
$('#iconSelectedUrlA').val(json.tabIconSelectedA);
$('#iconSelectedImgUrlA').attr('src', json.tabIconSelectedA);
$('#iconSelectedUrlB').val(json.tabIconSelectedB);
$('#iconSelectedImgUrlB').attr('src', json.tabIconSelectedB);
$('#iconSelectedUrlC').val(json.tabIconSelectedC);
$('#iconSelectedImgUrlC').attr('src', json.tabIconSelectedC);
$('#iconSelectedUrlD').val(json.tabIconSelectedD);
$('#iconSelectedImgUrlD').attr('src', json.tabIconSelectedD);
$('#iconSelectedUrlE').val(json.tabIconSelectedE);
$('#iconSelectedImgUrlE').attr('src', json.tabIconSelectedE);
$('#tabSelectedAnimationUrlA').val(json.tabAnimationSelectedA);
$('#tabSelectedAnimationUrlB').val(json.tabAnimationSelectedB);
$('#tabSelectedAnimationUrlC').val(json.tabAnimationSelectedC);
$('#tabSelectedAnimationUrlD').val(json.tabAnimationSelectedD);
$('#tabSelectedAnimationUrlE').val(json.tabAnimationSelectedE);
// 打开编辑弹窗
$("#roomTagModal").modal('show');
$("#modalLabel").text("编辑房间标签");
} else {
$("#tipMsg").text("获取信息出错");
$("#tipModal").modal('show');
}
}
});
});
$("#table").on("click", '.opt-remove', function () {
var refSeq = $(this).attr("data-id");
if (refSeq == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回,请谨慎操作!")) {
$.ajax({
type: 'post',
url: "/admin/bottomBar/deleteByRefSeq",
data: { refSeq: refSeq },
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
function apiResult(json) {
if (json.code == 200 && json.message == 'success') {
return true;
}
$("#tipMsg").text("请求失败,错误信息:" + json.message);
$("#tipModal").modal('show');
return false;
}
$('#iconBtnA').on('click', function () {
if ($('#iconFileA').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconFileA', //需要上传的文件域的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) {
$('#iconUrlA').val(json.path);
$('#iconImgUrlA').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconBtnB').on('click', function () {
if ($('#iconFileB').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconFileB', //需要上传的文件域的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) {
$('#iconUrlB').val(json.path);
$('#iconImgUrlB').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconBtnC').on('click', function () {
if ($('#iconFileC').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconFileC', //需要上传的文件域的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) {
$('#iconUrlC').val(json.path);
$('#iconImgUrlC').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconBtnD').on('click', function () {
if ($('#iconFileD').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconFileD', //需要上传的文件域的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) {
$('#iconUrlD').val(json.path);
$('#iconImgUrlD').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconBtnE').on('click', function () {
if ($('#iconFileE').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconFileE', //需要上传的文件域的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) {
$('#iconUrlE').val(json.path);
$('#iconImgUrlE').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconSelectedBtnA').on('click', function () {
if ($('#iconSelectedFileA').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconSelectedFileA', //需要上传的文件域的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) {
$('#iconSelectedUrlA').val(json.path);
$('#iconSelectedImgUrlA').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconSelectedBtnB').on('click', function () {
if ($('#iconSelectedFileB').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconSelectedFileB', //需要上传的文件域的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) {
$('#iconSelectedUrlB').val(json.path);
$('#iconSelectedImgUrlB').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconSelectedBtnC').on('click', function () {
if ($('#iconSelectedFileC').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconSelectedFileC', //需要上传的文件域的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) {
$('#iconSelectedUrlC').val(json.path);
$('#iconSelectedImgUrlC').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconSelectedBtnD').on('click', function () {
if ($('#iconSelectedFileD').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconSelectedFileD', //需要上传的文件域的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) {
$('#iconSelectedUrlD').val(json.path);
$('#iconSelectedImgUrlD').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$('#iconSelectedBtnE').on('click', function () {
if ($('#iconSelectedFileE').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
$.ajaxFileUpload({
fileElementId: 'iconSelectedFileE', //需要上传的文件域的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) {
$('#iconSelectedUrlE').val(json.path);
$('#iconSelectedImgUrlE').attr("src", json.path);
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
})
$("[name='animationBtn']").on('click', function () {
let id = $(this).attr('id');
let b = id.split("_");
let inputId = b[1];
console.log(inputId)
var options = {
type: 'post',
url: '/admin/upload/img',
dataType: 'json',
success: function (json) {
if (json.path) {
$("#" + inputId).val(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
}
};
$("#addForm").ajaxSubmit(options);
});
function clearModal() {
$('#iconImgUrlA').attr('src', '');
$('#iconImgUrlB').attr('src', '');
$('#iconImgUrlC').attr('src', '');
$('#iconImgUrlD').attr('src', '');
$('#iconImgUrlE').attr('src', '');
$('#iconSelectedImgUrlA').attr('src', '');
$('#iconSelectedImgUrlB').attr('src', '');
$('#iconSelectedImgUrlC').attr('src', '');
$('#iconSelectedImgUrlD').attr('src', '');
$('#iconSelectedImgUrlE').attr('src', '');
$('#addForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
$(this).val('');
})
}
function serverError(req) {
$("#tipMsg").text(req.responseJSON.message);
$("#tipModal").modal('show');
}
});
}
},
};
</script>
<style scoped></style>