|
|
@@ -0,0 +1,512 @@
|
|
|
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|
|
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
|
+<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>产品分类管理</title>
|
|
|
+ <meta name="keywords" content="产品分类管理">
|
|
|
+ <meta name="description" content="产品分类信息管理页面">
|
|
|
+ <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
|
|
+ <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
|
|
|
+ <link href="${ctx}/css/bootstrap-select.min.css" rel="stylesheet">
|
|
|
+ <link href="${ctx}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
|
|
|
+ <link href="${ctx}/css/animate.css" rel="stylesheet">
|
|
|
+ <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ .required::before {
|
|
|
+ content: '*';
|
|
|
+ color: red;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row.mb-4 {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-switch {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 60px;
|
|
|
+ height: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toggle-switch input {
|
|
|
+ opacity: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #ccc;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider:before {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 26px;
|
|
|
+ width: 26px;
|
|
|
+ left: 4px;
|
|
|
+ bottom: 4px;
|
|
|
+ background-color: white;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:checked + .slider {
|
|
|
+ background-color: #2196F3;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:checked + .slider:before {
|
|
|
+ transform: translateX(26px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-container {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-inline-flex {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .form-inline-flex {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-inline-flex .form-control,
|
|
|
+ .form-inline-flex .btn,
|
|
|
+ .form-inline-flex .selectpicker {
|
|
|
+ width: 100% !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body class="gray-bg">
|
|
|
+<div class="wrapper wrapper-content animated fadeInRight">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <div class="ibox">
|
|
|
+ <div class="ibox-title">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <h3>产品分类管理</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ibox-content">
|
|
|
+ <div class="row row-lg mb-4">
|
|
|
+ <div class="col-lg-12">
|
|
|
+ <div class="form-inline-flex">
|
|
|
+ <input id="typeName" class="form-control" style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;" placeholder="请输入分类名称"/>
|
|
|
+ <button type="button" id="searchBtn" class="btn btn-success" onclick="search();return false;" style="margin-right: 5px; margin-bottom: 5px;">查询
|
|
|
+ </button>
|
|
|
+ <button type="button" id="resetBtn" class="btn btn-default" style="margin-right: 5px; margin-bottom: 5px;">重置
|
|
|
+ </button>
|
|
|
+ <button type="button" class="btn btn-primary" onclick="showAddModal();" style="margin-bottom: 5px;">新增
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row row-lg mt-3">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <table id="table" data-toggle="table" data-mobile-responsive="true"></table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 新增/编辑产品分类模态框 -->
|
|
|
+<div class="modal fade" id="productTypeModal" tabindex="-1" role="dialog" aria-labelledby="productTypeModalLabel">
|
|
|
+ <div class="modal-dialog modal-lg" 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">×</span></button>
|
|
|
+ <h4 class="modal-title" id="productTypeModalLabel">新增产品分类</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="form-container">
|
|
|
+ <form id="productTypeForm">
|
|
|
+ <input type="hidden" id="typeId" name="typeId">
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalTypeNo" class="required control-label">类别编号</label>
|
|
|
+ <input type="text" class="form-control" id="modalTypeNo" name="modalTypeNo" placeholder="请输入" required>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalTypeName" class="required control-label">类别名称</label>
|
|
|
+ <input type="text" class="form-control" id="modalTypeName" name="modalTypeName" placeholder="请输入" required>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalParentId" class="control-label">上级类别</label>
|
|
|
+ <select id="modalParentId" class="form-control selectpicker" data-live-search="true" title="请选择上级类别">
|
|
|
+ <option value="0">无</option>
|
|
|
+ <!-- 上级类别下拉框选项将通过JavaScript动态加载 -->
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label class="required control-label">状态</label>
|
|
|
+ <div class="d-flex align-items-center gap-2">
|
|
|
+ <label class="toggle-switch">
|
|
|
+ <input type="checkbox" id="modalStatus" name="modalStatus" checked>
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ <span id="statusText">启用</span>
|
|
|
+ <div class="text-muted">状态:启用、禁用,默认启用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
|
|
+ <button type="button" class="btn btn-primary" onclick="saveProductType();">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 全局js -->
|
|
|
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
+<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
|
|
|
+<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
|
|
|
+<script src="${ctx}/js/bootstrap-select.min.js"></script>
|
|
|
+<!-- 自定义js -->
|
|
|
+<script src="${ctx}/js/content.js?v=1.0.0"></script>
|
|
|
+<!-- jQuery Validation plugin javascript-->
|
|
|
+<script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
|
|
|
+<script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
|
|
|
+<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
|
|
|
+<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
|
|
|
+<script src="${ctx}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
|
|
|
+<script src="${ctx}/js/common.js"></script>
|
|
|
+<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
|
|
|
+<script src="${ctx}/js/Math.uuid.js"></script>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ var table = null;
|
|
|
+ var productTypes = []; // 存储产品分类数据
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ // 加载产品分类数据
|
|
|
+ loadProductTypes();
|
|
|
+
|
|
|
+ // 初始化表格
|
|
|
+ table = $('#table').bootstrapTable("destroy");
|
|
|
+ initTable();
|
|
|
+ initValidation();
|
|
|
+
|
|
|
+ // 绑定重置按钮点击事件
|
|
|
+ $('#resetBtn').on('click', function() {
|
|
|
+ reset();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 状态切换按钮
|
|
|
+ const statusToggle = document.getElementById('modalStatus');
|
|
|
+ const statusText = document.getElementById('statusText');
|
|
|
+
|
|
|
+ statusToggle.addEventListener('change', function () {
|
|
|
+ if (this.checked) {
|
|
|
+ statusText.textContent = '启用';
|
|
|
+ } else {
|
|
|
+ statusText.textContent = '禁用';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 加载产品分类数据
|
|
|
+ function loadProductTypes() {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/productTypeNew/getAllProductTypes',
|
|
|
+ type: 'POST',
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#modalParentId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#modalParentId').empty();
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#modalParentId').append('<option value="' + item.id + '">' + item.type_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#modalParentId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#modalParentId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#modalParentId').selectpicker('refresh');
|
|
|
+ layer.msg('获取品牌数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#modalParentId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 初始化表格
|
|
|
+ function initTable() {
|
|
|
+ table = $('#table').bootstrapTable({
|
|
|
+ method: 'get',
|
|
|
+ sortable: true,
|
|
|
+ toolbar: '#toolbar', //工具按钮用哪个容器
|
|
|
+ striped: true, //是否显示行间隔色
|
|
|
+ cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
|
|
|
+ pagination: true, //是否显示分页(*)
|
|
|
+ pageNumber: 1, //初始化加载第一页,默认第一页
|
|
|
+ pageSize: 10, //每页的记录行数(*)
|
|
|
+ pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
|
|
|
+ url: '${ctx}/productTypeNew/list',//这个接口需要处理bootstrap table传递的固定参数
|
|
|
+ queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
|
|
|
+ // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber
|
|
|
+
|
|
|
+ queryParams: queryParams,//前端调用服务时,会默认传递上边所述的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
|
|
|
+ sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
|
|
|
+ strictSearch: false,
|
|
|
+ minimumCountColumns: 2, //最少允许的列数
|
|
|
+ clickToSelect: true, //是否启用点击选中行
|
|
|
+ searchOnEnterKey: true,
|
|
|
+ idField: "id",
|
|
|
+ responseHandler: function (res) {
|
|
|
+ // 这里假设接口返回的data就是我们需要的表格数据
|
|
|
+ return {
|
|
|
+ total: res.total, // 总记录数
|
|
|
+ rows: res.records // 数据列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ field: 'id',
|
|
|
+ title: '序号',
|
|
|
+ formatter: function (value, row, index) {
|
|
|
+ // 使用this关键字访问表格实例
|
|
|
+ var pageNumber = this.pageNumber || 1;
|
|
|
+ var pageSize = this.pageSize || 10;
|
|
|
+ return (pageNumber - 1) * pageSize + index + 1;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'typeName',
|
|
|
+ title: '类别名称',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'typeNo',
|
|
|
+ title: '类别编号',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'parentTypeName',
|
|
|
+ title: '上级分类',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'status',
|
|
|
+ title: '状态',
|
|
|
+ align: 'center',
|
|
|
+ formatter: function(value) {
|
|
|
+ return value === 1 ? '<span class="label label-primary">启用</span>' : '<span class="label label-danger">禁用</span>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'action',
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ formatter: function(value, row) {
|
|
|
+ let actions = '';
|
|
|
+ actions += '<button type="button" class="btn btn-primary btn-xs" onclick="showEditModal(' + row.id + ')">编辑</button> ';
|
|
|
+ actions += '<button type="button" class="btn btn-danger btn-xs" onclick="deleteProductType(' + row.id + ')">删除</button>';
|
|
|
+ return actions;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查询参数
|
|
|
+ function queryParams(params) {
|
|
|
+ return {
|
|
|
+ pageNumber: params.pageNumber,
|
|
|
+ pageSize: params.pageSize,
|
|
|
+ typeName: $('#typeName').val()
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化表单验证
|
|
|
+ function initValidation() {
|
|
|
+ $('#productTypeForm').validate({
|
|
|
+ rules: {
|
|
|
+ modalTypeNo: {
|
|
|
+ required: true,
|
|
|
+ maxlength: 20
|
|
|
+ },
|
|
|
+ modalTypeName: {
|
|
|
+ required: true,
|
|
|
+ maxlength: 50
|
|
|
+ }
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ modalTypeNo: {
|
|
|
+ required: "请输入类别编号",
|
|
|
+ maxlength: "类别编号不能超过20个字符"
|
|
|
+ },
|
|
|
+ modalTypeName: {
|
|
|
+ required: "请输入类别名称",
|
|
|
+ maxlength: "类别名称不能超过50个字符"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ function search() {
|
|
|
+ table.bootstrapTable('refresh');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ function reset() {
|
|
|
+ $('#typeName').val('');
|
|
|
+ table.bootstrapTable('refresh');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示新增模态框
|
|
|
+ function showAddModal() {
|
|
|
+ $('#productTypeModalLabel').text('新增产品分类');
|
|
|
+ $('#productTypeForm')[0].reset();
|
|
|
+ $('#typeId').val('');
|
|
|
+ $('#modalStatus').prop('checked', true);
|
|
|
+ $('#statusText').text('启用');
|
|
|
+ loadProductTypes(); // 重新加载分类数据以确保最新
|
|
|
+ $('#productTypeModal').modal('show');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示编辑模态框
|
|
|
+ function showEditModal(id) {
|
|
|
+ loadProductTypes();
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/productTypeNew/getById?id=' + id,
|
|
|
+ type: 'GET',
|
|
|
+ dataType: 'json',
|
|
|
+ success: function (data) {
|
|
|
+ if (data.code === 0 && data.data) {
|
|
|
+ const typeData = data.data;
|
|
|
+ $('#productTypeModalLabel').text('编辑产品分类');
|
|
|
+ $('#typeId').val(typeData.id);
|
|
|
+ $('#modalTypeNo').val(typeData.typeNo);
|
|
|
+ $('#modalTypeName').val(typeData.typeName);
|
|
|
+ $('#modalStatus').prop('checked', typeData.status === 1);
|
|
|
+ $('#statusText').text(typeData.status === 1 ? '启用' : '禁用');
|
|
|
+ $('#productTypeModal').modal('show');
|
|
|
+
|
|
|
+ // 设置销售地区,需要等待selectpicker初始化完成后再设置
|
|
|
+ setTimeout(function () {
|
|
|
+ if (typeData.parentId) {
|
|
|
+ $('#modalParentId').val(typeData.parentId);
|
|
|
+ $('#modalParentId').selectpicker('refresh');
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ } else {
|
|
|
+ layer.alert(data.msg || '获取分类信息失败', {icon: 2});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ layer.alert('获取分类信息失败', {icon: 2});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存产品分类
|
|
|
+ function saveProductType() {
|
|
|
+ if (!$('#productTypeForm').valid()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const typeId = $('#typeId').val();
|
|
|
+ const url = typeId ? '${ctx}/productTypeNew/update' : '${ctx}/productTypeNew/save';
|
|
|
+
|
|
|
+ const productTypeData = {
|
|
|
+ id: typeId ? parseInt(typeId) : null,
|
|
|
+ typeNo: $('#modalTypeNo').val(),
|
|
|
+ typeName: $('#modalTypeName').val(),
|
|
|
+ parentId: parseInt($('#modalParentId').val()),
|
|
|
+ status: $('#modalStatus').is(':checked') ? 1 : 0
|
|
|
+ };
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: url,
|
|
|
+ type: 'POST',
|
|
|
+ data: JSON.stringify(productTypeData),
|
|
|
+ contentType: 'application/json',
|
|
|
+ dataType: 'json',
|
|
|
+ success: function (data) {
|
|
|
+ if (data.code === 0) {
|
|
|
+ layer.alert(data.msg || '保存成功', {icon: 1});
|
|
|
+ $('#productTypeModal').modal('hide');
|
|
|
+ table.bootstrapTable('refresh');
|
|
|
+ } else {
|
|
|
+ layer.alert(data.msg || '保存失败', {icon: 2});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ layer.alert('保存失败', {icon: 2});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除产品分类
|
|
|
+ function deleteProductType(id) {
|
|
|
+ layer.confirm('确定要删除该分类吗?删除后可能影响相关产品数据!', {
|
|
|
+ btn: ['确定', '取消']
|
|
|
+ }, function() {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/productTypeNew/delete?id=' + id,
|
|
|
+ type: 'GET',
|
|
|
+ dataType: 'json',
|
|
|
+ success: function (data) {
|
|
|
+ if (data.code === 0) {
|
|
|
+ layer.alert(data.msg || '删除成功', {icon: 1});
|
|
|
+ table.bootstrapTable('refresh');
|
|
|
+ } else {
|
|
|
+ layer.alert(data.msg || '删除失败', {icon: 2});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ layer.alert('删除失败', {icon: 2});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</html>
|