|
|
@@ -0,0 +1,833 @@
|
|
|
+<%@ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row.mb-4 {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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">
|
|
|
+ <div style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;">
|
|
|
+ <select id="factoryId" class="form-control selectpicker" data-live-search="true" title="请选择工厂">
|
|
|
+ <option value="">请选择工厂</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;">
|
|
|
+ <select id="workshopId" class="form-control selectpicker" data-live-search="true" title="请选择车间">
|
|
|
+ <option value="">请选择车间</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;">
|
|
|
+ <select id="productionLineId" class="form-control selectpicker" data-live-search="true" title="请选择产线">
|
|
|
+ <option value="">请选择产线</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div style="width: 200px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;">
|
|
|
+ <input type="date" id="startDate" class="form-control" placeholder="修改开始时间" />
|
|
|
+ </div>
|
|
|
+ <div style="width: 200px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;">
|
|
|
+ <input type="date" id="endDate" class="form-control" placeholder="修改结束时间" />
|
|
|
+ </div>
|
|
|
+ <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-right: 5px; 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="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
|
|
|
+ <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="addModalLabel">新增品相更改记录</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="form-container">
|
|
|
+ <form id="addForm">
|
|
|
+ <input type="hidden" id="recordId" name="recordId">
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalChangeType" class="required control-label">修改品项方式</label>
|
|
|
+ <select id="modalChangeType" class="form-control" required>
|
|
|
+ <option value="">请选择修改品项方式</option>
|
|
|
+ <option value="1">按单号</option>
|
|
|
+ <option value="2">按箱码</option>
|
|
|
+ <option value="3">按托码</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalChangeValueInput" class="required control-label">修改值</label>
|
|
|
+ <input type="text" class="form-control" id="modalChangeValueInput" name="modalChangeValueInput" placeholder="请输入单号" required>
|
|
|
+ <textarea class="form-control" id="modalChangeValueTextarea" name="modalChangeValueTextarea" placeholder="请输入箱码或托码,多行以逗号分隔" rows="3" style="display: none;"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalFactoryId" class="required control-label">工厂</label>
|
|
|
+ <select id="modalFactoryId" class="form-control selectpicker" required>
|
|
|
+ <option value="">请选择工厂</option>
|
|
|
+ <!-- 工厂下拉框选项将通过JavaScript动态加载 -->
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalWorkshopId" class="required control-label">车间</label>
|
|
|
+ <select id="modalWorkshopId" class="form-control selectpicker" required>
|
|
|
+ <option value="">请选择车间</option>
|
|
|
+ <!-- 车间下拉框选项将通过JavaScript动态加载 -->
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalProductionLineId" class="required control-label">产线</label>
|
|
|
+ <select id="modalProductionLineId" class="form-control selectpicker" required>
|
|
|
+ <option value="">请选择产线</option>
|
|
|
+ <!-- 产线下拉框选项将通过JavaScript动态加载 -->
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalAfterItemId" class="required control-label">修改后品相</label>
|
|
|
+ <select id="modalAfterItemId" class="form-control selectpicker" required>
|
|
|
+ <option value="">请选择修改后品相</option>
|
|
|
+ <!-- 修改后品相下拉框选项将通过JavaScript动态加载 -->
|
|
|
+ </select>
|
|
|
+ </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="saveChangeRecord();">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 全局js -->
|
|
|
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
+<!-- 全局js -->
|
|
|
+<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 factories = [];
|
|
|
+ var workshops = [];
|
|
|
+ var productionLines = [];
|
|
|
+ var items = [];
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ $('.selectpicker').selectpicker({
|
|
|
+ liveSearch: true,
|
|
|
+ size: 5,
|
|
|
+ actionsBox: true,
|
|
|
+ selectedTextFormat: 'count > 2'
|
|
|
+ });
|
|
|
+ // 加载下拉框数据
|
|
|
+ loadFactories();
|
|
|
+ loadWorkshopsByFactoryId();
|
|
|
+ loadProductionLinesByWorkshopId();
|
|
|
+ loadItems();
|
|
|
+
|
|
|
+ table = $('#table').bootstrapTable("destroy");
|
|
|
+ initTable();
|
|
|
+ initValidation();
|
|
|
+
|
|
|
+ // 绑定重置按钮点击事件
|
|
|
+ $('#resetBtn').on('click', function() {
|
|
|
+ reset();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听模态框中工厂选择变化
|
|
|
+ $(document).on('change', '#modalFactoryId', function() {
|
|
|
+ const factoryId = $(this).val();
|
|
|
+ if (factoryId) {
|
|
|
+ loadModalWorkshopsByFactoryId(factoryId);
|
|
|
+ } else {
|
|
|
+ $('#modalWorkshopId').empty().append('<option value="">请选择车间</option>');
|
|
|
+ $('#modalWorkshopId').selectpicker('refresh');
|
|
|
+ $('#modalProductionLineId').empty().append('<option value="">请选择产线</option>');
|
|
|
+ $('#modalProductionLineId').selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听模态框中车间选择变化
|
|
|
+ $(document).on('change', '#modalWorkshopId', function() {
|
|
|
+ const workshopId = $(this).val();
|
|
|
+ if (workshopId) {
|
|
|
+ loadModalProductionLinesByWorkshopId(workshopId);
|
|
|
+ } else {
|
|
|
+ $('#modalProductionLineId').empty().append('<option value="">请选择产线</option>');
|
|
|
+ $('#modalProductionLineId').selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听修改品项方式变化
|
|
|
+ $(document).on('change', '#modalChangeType', function() {
|
|
|
+ toggleChangeValueInput();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 加载工厂数据
|
|
|
+ function loadFactories() {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/lineProduct/getFactoryList',
|
|
|
+ type: 'POST',
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#factoryId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#factoryId').empty();
|
|
|
+ factories = [];
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ factories = res.data;
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#factoryId').append('<option value="' + item.id + '">' + item.factory_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#factoryId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#factoryId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#factoryId').selectpicker('refresh');
|
|
|
+ layer.msg('获取工厂数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#factoryId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据工厂ID加载车间数据
|
|
|
+ function loadWorkshopsByFactoryId(factoryId) {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/lineProduct/getWorkshopList',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ factoryId: factoryId
|
|
|
+ },
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#workshopId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#workshopId').empty();
|
|
|
+ workshops = [];
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ workshops = res.data;
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#workshopId').append('<option value="' + item.id + '">' + item.workshop_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#workshopId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#workshopId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#workshopId').selectpicker('refresh');
|
|
|
+ layer.msg('获取车间数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#workshopId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据车间ID加载产线数据
|
|
|
+ function loadProductionLinesByWorkshopId(workshopId) {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/lineProduct/getLineList',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ workshopId: workshopId
|
|
|
+ },
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#productionLineId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#productionLineId').empty();
|
|
|
+ productionLines = [];
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ productionLines = res.data;
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#productionLineId').append('<option value="' + item.id + '">' + item.lineName + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#productionLineId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#productionLineId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#productionLineId').selectpicker('refresh');
|
|
|
+ layer.msg('获取产线数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#productionLineId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载品相数据
|
|
|
+ function loadItems() {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/qrcodeApply/getItemAll',
|
|
|
+ type: 'POST',
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ // 可以添加加载状态
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ items = [];
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ items = res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ layer.msg('获取品相数据失败: ' + xhr.statusText);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 监听工厂选择变化
|
|
|
+ $(document).on('change', '#factoryId', function() {
|
|
|
+ const factoryId = $(this).val();
|
|
|
+ if (factoryId) {
|
|
|
+ loadWorkshopsByFactoryId(factoryId);
|
|
|
+ } else {
|
|
|
+ $('#workshopId').empty().append('<option value="">请选择车间</option>');
|
|
|
+ $('#workshopId').selectpicker('refresh');
|
|
|
+ $('#lineId').empty().append('<option value="">请选择产线</option>');
|
|
|
+ $('#lineId').selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听车间选择变化
|
|
|
+ $(document).on('change', '#workshopId', function() {
|
|
|
+ const workshopId = $(this).val();
|
|
|
+ if (workshopId) {
|
|
|
+ loadLinesByWorkshopId(workshopId);
|
|
|
+ } else {
|
|
|
+ $('#lineId').empty().append('<option value="">请选择产线</option>');
|
|
|
+ $('#lineId').selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 切换修改值输入框类型
|
|
|
+ function toggleChangeValueInput() {
|
|
|
+ const changeType = $('#modalChangeType').val();
|
|
|
+ const inputElement = $('#modalChangeValueInput');
|
|
|
+ const textareaElement = $('#modalChangeValueTextarea');
|
|
|
+
|
|
|
+ if (changeType === '1') {
|
|
|
+ inputElement.show();
|
|
|
+ textareaElement.hide();
|
|
|
+ inputElement.prop('required', true);
|
|
|
+ textareaElement.prop('required', false);
|
|
|
+ } else {
|
|
|
+ inputElement.hide();
|
|
|
+ textareaElement.show();
|
|
|
+ inputElement.prop('required', false);
|
|
|
+ textareaElement.prop('required', true);
|
|
|
+ }
|
|
|
+ // 重置验证状态
|
|
|
+ if ($('#addForm').data('validator')) {
|
|
|
+ $('#addForm').data('validator').resetForm();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function queryParams(param) {
|
|
|
+ let factoryId = $.trim($("#factoryId").val());
|
|
|
+ let workshopId = $.trim($("#workshopId").val());
|
|
|
+ let productionLineId = $.trim($("#productionLineId").val());
|
|
|
+ let startDate = $.trim($("#startDate").val());
|
|
|
+ let endDate = $.trim($("#endDate").val());
|
|
|
+
|
|
|
+ if (factoryId) {
|
|
|
+ param['factoryId'] = factoryId;
|
|
|
+ }
|
|
|
+ if (workshopId) {
|
|
|
+ param['workshopId'] = workshopId;
|
|
|
+ }
|
|
|
+ if (productionLineId) {
|
|
|
+ param['productionLineId'] = productionLineId;
|
|
|
+ }
|
|
|
+ if (startDate) {
|
|
|
+ param['startDate'] = startDate;
|
|
|
+ }
|
|
|
+ if (endDate) {
|
|
|
+ param['endDate'] = endDate;
|
|
|
+ }
|
|
|
+
|
|
|
+ return param;
|
|
|
+ }
|
|
|
+
|
|
|
+ function search() {
|
|
|
+ table = $('#table').bootstrapTable("destroy");
|
|
|
+ initTable();
|
|
|
+ }
|
|
|
+
|
|
|
+ function reset() {
|
|
|
+ $("#factoryId").val('');
|
|
|
+ $("#factoryId").selectpicker('val', '');
|
|
|
+ $("#factoryId").selectpicker('deselectAll');
|
|
|
+ $("#factoryId").selectpicker('refresh');
|
|
|
+
|
|
|
+ $("#workshopId").val('');
|
|
|
+ $("#workshopId").selectpicker('val', '');
|
|
|
+ $("#workshopId").selectpicker('deselectAll');
|
|
|
+ $("#workshopId").selectpicker('refresh');
|
|
|
+
|
|
|
+ $("#productionLineId").val('');
|
|
|
+ $("#productionLineId").selectpicker('val', '');
|
|
|
+ $("#productionLineId").selectpicker('deselectAll');
|
|
|
+ $("#productionLineId").selectpicker('refresh');
|
|
|
+
|
|
|
+ $("#startDate").val('');
|
|
|
+ $("#endDate").val('');
|
|
|
+
|
|
|
+ table = $('#table').bootstrapTable("destroy");
|
|
|
+ initTable();
|
|
|
+ }
|
|
|
+
|
|
|
+ function showAddModal() {
|
|
|
+ loadModalFactories();
|
|
|
+ loadModalItems();
|
|
|
+ // 清空表单
|
|
|
+ $('#addForm')[0].reset();
|
|
|
+ $('#recordId').val('');
|
|
|
+ $('#addModalLabel').text('新增品相更改记录');
|
|
|
+
|
|
|
+ // 显式重置所有联动下拉框并刷新selectpicker
|
|
|
+ $('#modalFactoryId').val('').selectpicker('refresh');
|
|
|
+ $('#modalWorkshopId').val('').selectpicker('refresh');
|
|
|
+ $('#modalProductionLineId').val('').selectpicker('refresh');
|
|
|
+ $('#modalAfterItemId').val('').selectpicker('refresh');
|
|
|
+
|
|
|
+ // 重置修改值输入框
|
|
|
+ toggleChangeValueInput();
|
|
|
+
|
|
|
+ // 重置表单验证状态
|
|
|
+ if ($('#addForm').data('validator')) {
|
|
|
+ $('#addForm').data('validator').resetForm();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除所有错误类
|
|
|
+ $('#addForm .error').removeClass('error');
|
|
|
+ $('#addForm label.error').remove();
|
|
|
+
|
|
|
+ // 显示模态框
|
|
|
+ $('#addModal').modal('show');
|
|
|
+ }
|
|
|
+
|
|
|
+ function saveChangeRecord() {
|
|
|
+ if (!$('#addForm').valid()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const changeType = $('#modalChangeType').val();
|
|
|
+ let changeValue = '';
|
|
|
+ let referenceCodesArray = [];
|
|
|
+ if (changeType === '1') {
|
|
|
+ // 按单号方式,直接作为一个元素的数组
|
|
|
+ changeValue = $('#modalChangeValueInput').val();
|
|
|
+ referenceCodesArray = [changeValue];
|
|
|
+ } else {
|
|
|
+ // 按箱码或托码方式,按逗号分割成数组
|
|
|
+ changeValue = $('#modalChangeValueTextarea').val();
|
|
|
+ if (changeValue) {
|
|
|
+ // 按逗号分割,并去除每个元素的前后空格
|
|
|
+ referenceCodesArray = changeValue.split(',').map(code => code.trim()).filter(code => code.length > 0);
|
|
|
+ } else {
|
|
|
+ referenceCodesArray = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = {
|
|
|
+ recordId: $('#recordId').val(),
|
|
|
+ modifyType: changeType,
|
|
|
+ referenceCodes: referenceCodesArray,
|
|
|
+ factoryId: $('#modalFactoryId').val(),
|
|
|
+ workshopId: $('#modalWorkshopId').val(),
|
|
|
+ lineId: $('#modalProductionLineId').val(),
|
|
|
+ afterItemId: $('#modalAfterItemId').val()
|
|
|
+ };
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/prodBatch/changeItem',
|
|
|
+ type: 'POST',
|
|
|
+ data: JSON.stringify(formData),
|
|
|
+ contentType: 'application/json',
|
|
|
+ success: function (data) {
|
|
|
+ if (data.code === 0) {
|
|
|
+ layer.msg('保存成功', {icon: 6});
|
|
|
+ // 关闭模态框
|
|
|
+ $('#addModal').modal('hide');
|
|
|
+ // 刷新表格
|
|
|
+ search();
|
|
|
+ } else {
|
|
|
+ layer.msg(data.msg, {icon: 5});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ layer.msg('保存失败', {icon: 5});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载模态框中的工厂数据
|
|
|
+ function loadModalFactories() {
|
|
|
+ const modalFactorySelect = $('#modalFactoryId');
|
|
|
+ modalFactorySelect.empty().append('<option value="">请选择工厂</option>');
|
|
|
+
|
|
|
+ if (factories.length > 0) {
|
|
|
+ factories.forEach(factory => {
|
|
|
+ modalFactorySelect.append('<option value="' + factory.id + '">' + factory.factory_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 确保selectpicker刷新
|
|
|
+ modalFactorySelect.selectpicker('refresh');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模态框中根据工厂ID加载车间数据
|
|
|
+ function loadModalWorkshopsByFactoryId(factoryId) {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/lineProduct/getWorkshopList',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ factoryId: factoryId
|
|
|
+ },
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#modalWorkshopId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#modalWorkshopId').empty();
|
|
|
+ $('#modalWorkshopId').append('<option value="">请选择车间</option>');
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#modalWorkshopId').append('<option value="' + item.id + '">' + item.workshop_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#modalWorkshopId').selectpicker('refresh');
|
|
|
+ // 清空并重置产线选择框
|
|
|
+ $('#modalProductionLineId').empty().append('<option value="">请选择产线</option>');
|
|
|
+ $('#modalProductionLineId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#modalWorkshopId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#modalWorkshopId').selectpicker('refresh');
|
|
|
+ layer.msg('获取车间数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#modalWorkshopId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模态框中根据车间ID加载产线数据
|
|
|
+ function loadModalProductionLinesByWorkshopId(workshopId) {
|
|
|
+ $.ajax({
|
|
|
+ url: '${ctx}/lineProduct/getLineList',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ workshopId: workshopId
|
|
|
+ },
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function () {
|
|
|
+ $('#modalProductionLineId').prop('disabled', true).selectpicker('refresh');
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ $('#modalProductionLineId').empty();
|
|
|
+ $('#modalProductionLineId').append('<option value="">请选择产线</option>');
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#modalProductionLineId').append('<option value="' + item.id + '">' + item.lineName + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $('#modalProductionLineId').selectpicker('refresh');
|
|
|
+ },
|
|
|
+ error: function (xhr) {
|
|
|
+ $('#modalProductionLineId').empty().append('<option value="">加载失败</option>');
|
|
|
+ $('#modalProductionLineId').selectpicker('refresh');
|
|
|
+ layer.msg('获取产线数据失败: ' + xhr.statusText);
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ $('#modalProductionLineId').prop('disabled', false).selectpicker('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载模态框中的品相数据
|
|
|
+ function loadModalItems() {
|
|
|
+ const modalAfterItemSelect = $('#modalAfterItemId');
|
|
|
+
|
|
|
+ modalAfterItemSelect.empty().append('<option value="">请选择修改后品相</option>');
|
|
|
+
|
|
|
+ if (items.length > 0) {
|
|
|
+ items.forEach(item => {
|
|
|
+ modalAfterItemSelect.append('<option value="' + item.id + '">' + item.item_name + '</option>');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 确保selectpicker刷新
|
|
|
+ modalAfterItemSelect.selectpicker('refresh');
|
|
|
+ }
|
|
|
+
|
|
|
+ function initValidation() {
|
|
|
+ $('#addForm').validate({
|
|
|
+ rules: {
|
|
|
+ modalChangeType: {
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ modalChangeValueInput: {
|
|
|
+ required: function() {
|
|
|
+ return $('#modalChangeType').val() === '1';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalChangeValueTextarea: {
|
|
|
+ required: function() {
|
|
|
+ return $('#modalChangeType').val() !== '1' && $('#modalChangeType').val() !== '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalFactoryId: {
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ modalWorkshopId: {
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ modalProductionLineId: {
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ modalAfterItemId: {
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ modalChangeType: {
|
|
|
+ required: '请选择修改品项方式'
|
|
|
+ },
|
|
|
+ modalChangeValueInput: {
|
|
|
+ required: '请输入单号'
|
|
|
+ },
|
|
|
+ modalChangeValueTextarea: {
|
|
|
+ required: '请输入箱码或托码'
|
|
|
+ },
|
|
|
+ modalFactoryId: {
|
|
|
+ required: '请选择工厂'
|
|
|
+ },
|
|
|
+ modalWorkshopId: {
|
|
|
+ required: '请选择车间'
|
|
|
+ },
|
|
|
+ modalProductionLineId: {
|
|
|
+ required: '请选择产线'
|
|
|
+ },
|
|
|
+ modalAfterItemId: {
|
|
|
+ required: '请选择修改后品相'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ignore: [] // 必须设置,否则不会验证隐藏的元素
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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}/prodBatch/getItemChangeRecordList',//这个接口需要处理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: [{
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ formatter: function (value, row, index) {
|
|
|
+ // 使用this关键字访问表格实例
|
|
|
+ var pageNumber = this.pageNumber || 1;
|
|
|
+ var pageSize = this.pageSize || 10;
|
|
|
+ return (pageNumber - 1) * pageSize + index + 1;
|
|
|
+ },
|
|
|
+ width: "5%"
|
|
|
+ }, {
|
|
|
+ field: 'modifyType',
|
|
|
+ title: '修改品项方式',
|
|
|
+ align: 'center',
|
|
|
+ width: "10%",
|
|
|
+ formatter: function (value) {
|
|
|
+ if (value === 1) {
|
|
|
+ return '按单号';
|
|
|
+ } else if (value === 2) {
|
|
|
+ return '按箱码';
|
|
|
+ } else if (value === 3) {
|
|
|
+ return '按托码';
|
|
|
+ } else {
|
|
|
+ return '未知';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ field: 'referenceCode',
|
|
|
+ title: '对应的单号/箱码/托码',
|
|
|
+ align: 'center',
|
|
|
+ width: "15%"
|
|
|
+ }, {
|
|
|
+ field: 'factoryName',
|
|
|
+ title: '工厂名称',
|
|
|
+ align: 'center',
|
|
|
+ width: "10%"
|
|
|
+ }, {
|
|
|
+ field: 'workshopName',
|
|
|
+ title: '车间名称',
|
|
|
+ align: 'center',
|
|
|
+ width: "10%"
|
|
|
+ }, {
|
|
|
+ field: 'beforeItemName',
|
|
|
+ title: '修改前品项名称',
|
|
|
+ align: 'center',
|
|
|
+ width: "15%"
|
|
|
+ }, {
|
|
|
+ field: 'afterItemName',
|
|
|
+ title: '修改后品项名称',
|
|
|
+ align: 'center',
|
|
|
+ width: "15%"
|
|
|
+ }, {
|
|
|
+ field: 'modifyTime',
|
|
|
+ title: '修改时间',
|
|
|
+ align: 'center',
|
|
|
+ width: "15%"
|
|
|
+ }, {
|
|
|
+ field: 'modifyUser',
|
|
|
+ title: '修改人',
|
|
|
+ align: 'center',
|
|
|
+ width: "10%"
|
|
|
+ }],
|
|
|
+ onLoadSuccess: function (data) {
|
|
|
+ console.log("数据加载成功", data);
|
|
|
+ },
|
|
|
+ onLoadError: function () {
|
|
|
+ layer.msg('数据加载失败', {icon: 2});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</html>
|