From e6199a9d6c5f314f73cfdf8b3ea7ada411cf1b41 Mon Sep 17 00:00:00 2001
From: lsh <lsh@163.com>
Date: 星期日, 09 十一月 2025 17:51:24 +0800
Subject: [PATCH] *
---
src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html | 561 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 462 insertions(+), 99 deletions(-)
diff --git a/src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html b/src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html
index 638f1cb..964797c 100644
--- a/src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html
+++ b/src/main/webapp/views/orderCargoGrouping/orderCargoGroupingOperate.html
@@ -1,9 +1,8 @@
<!DOCTYPE html>
<html lang="en">
-
<head>
<meta charset="UTF-8">
- <title>纭寲缃愯澶�</title>
+ <title>涓昏〃涓庡瓙琛ㄨ鎯呴〉闈�</title>
<link rel="stylesheet" href="../../static/css/element.css">
<link rel="stylesheet" href="../../static/css/element-ui.css">
<link rel="icon" href="../../static/images/favicon.ico" type="image/x-icon">
@@ -11,107 +10,471 @@
<script type="text/javascript" src="../../static/js/common.js"></script>
<script type="text/javascript" src="../../static/js/vue.min.js"></script>
<script type="text/javascript" src="../../static/js/element.js"></script>
+ <style>
+ .container {
+ padding: 20px;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+ .table-container {
+ margin-bottom: 20px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+ }
+ .detail-dialog .el-dialog__body {
+ padding: 20px;
+ }
+ .pagination-container {
+ margin-top: 15px;
+ text-align: right;
+ }
+ .operation-cell {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ }
+ /* 鎼滅储鏍忔牱寮� */
+ .search-container {
+ background: #f5f7fa;
+ padding: 15px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+ .search-form {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 15px;
+ }
+ .search-item {
+ display: flex;
+ align-items: center;
+ margin-right: 15px;
+ }
+ .search-label {
+ min-width: 80px;
+ text-align: right;
+ margin-right: 10px;
+ font-size: 14px;
+ color: #606266;
+ }
+ .search-actions {
+ display: flex;
+ gap: 10px;
+ margin-left: auto;
+ }
+ </style>
</head>
-<style scoped>
-
-</style>
-
<body>
- <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
- <div style="width: 100%;">
- <el-table border ref="singleTable" :data="tableData" highlight-current-row
- max-height="350" style="width: 100%">
- <el-table-column property="category" label="绫诲埆">
- </el-table-column>
- <el-table-column property="equipmentNo" label="璁惧鍙�">
- </el-table-column>
- <el-table-column property="categoryOther" label="鐩稿叧璁惧绫诲埆">
- </el-table-column>
- <el-table-column property="equipmentNoOther" label="鐩稿叧璁惧鍙�">
- </el-table-column>
- <el-table-column property="errorM" label="寮傚父鎻忚堪">
- </el-table-column>
- </el-table>
- </div>
- <div style="width: 100%;">
- <el-table border ref="singleTable" :data="adjacentLocMast" highlight-current-row
- max-height="350" style="width: 100%">
- <el-table-column property="category" label="褰撳墠搴撲綅">
- </el-table-column>
- <el-table-column property="equipmentNo" label="褰撳墠搴撲綅鐘舵��">
- </el-table-column>
- <el-table-column property="categoryOther" label="鐩搁偦搴撲綅">
- </el-table-column>
- <el-table-column property="equipmentNoOther" label="鐩搁偦搴撲綅鐘舵��">
- </el-table-column>
- <el-table-column property="errorM" label="寮傚父鎻忚堪">
- </el-table-column>
- </el-table>
- </div>
-
+<div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
+ <!-- 鎼滅储鏍� -->
+ <div class="search-container" style="width: 100%;">
+ <el-form :inline="true" class="search-form">
+ <div class="search-item">
+ <span class="search-label">缁勮揣鍗曞彿:</span>
+ <el-input
+ v-model="searchForm.A1"
+ placeholder="璇疯緭鍏ョ粍璐у崟鍙�"
+ clearable
+ style="width: 150px;"
+ @keyup.enter.native="handleSearch"
+ ></el-input>
+ </div>
+ <div class="search-item">
+ <span class="search-label">瀹㈡埛鍚嶇О:</span>
+ <el-input
+ v-model="searchForm.A2"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ clearable
+ style="width: 180px;"
+ @keyup.enter.native="handleSearch"
+ ></el-input>
+ </div>
+ <div class="search-item">
+ <span class="search-label">鐘舵��:</span>
+ <el-input
+ v-model="searchForm.A3"
+ placeholder="璇疯緭鍏ョ姸鎬�"
+ clearable
+ style="width: 150px;"
+ @keyup.enter.native="handleSearch"
+ ></el-input>
+ </div>
+ <div class="search-item">
+ <span class="search-label">灞炴�4:</span>
+ <el-input
+ v-model="searchForm.A4"
+ placeholder="璇疯緭鍏ュ睘鎬4"
+ clearable
+ style="width: 150px;"
+ @keyup.enter.native="handleSearch"
+ ></el-input>
+ </div>
+ <div class="search-actions">
+ <el-button type="primary" icon="el-icon-search" @click="handleSearch">鎼滅储</el-button>
+ <el-button icon="el-icon-refresh" @click="handleReset">閲嶇疆</el-button>
+ </div>
+ </el-form>
</div>
- <script>
- var app = new Vue({
- el: '#app',
- data: {
- tableData: [],
- adjacentLocMast: []
- },
- created() {
- this.init()
- },
- watch: {
- },
- methods: {
- init() {
- this.getTableData()
- this.getAdjacentLocMast()
- setInterval(() => {
- this.getTableData()
- this.getAdjacentLocMast()
- // this.demoStatus()
- }, 1000)
- },
- confirmEvent() {
- },
- cancelEvent() {
- },
- getTableData() {
- let that = this;
- $.ajax({
- url: baseUrl + "/error/device/task/depthAndShallowness",
- headers: {
- 'token': localStorage.getItem('token')
- },
- data: {},
- dataType: 'json',
- contentType: 'application/json;charset=UTF-8',
- method: 'post',
- success: function (res) {
- that.tableData = res.data
- }
- });
- },
- getAdjacentLocMast() {
- let that = this;
- $.ajax({
- url: baseUrl + "/error/device/locSts/adjacentLocMast",
- headers: {
- 'token': localStorage.getItem('token')
- },
- data: {},
- dataType: 'json',
- contentType: 'application/json;charset=UTF-8',
- method: 'post',
- success: function (res) {
- that.adjacentLocMast = res.data
- }
- });
+ <!-- 涓昏〃A -->
+ <div class="table-container" style="width: 100%;">
+ <el-table
+ border
+ ref="mainTable"
+ :data="tableDataA"
+ highlight-current-row
+ style="width: 100%"
+ v-loading="loading">
+ <el-table-column prop="A1" label="缁勮揣鍗曞彿" width="100" align="center"></el-table-column>
+ <el-table-column prop="A2" label="瀹㈡埛鍚嶇О" min-width="120" align="center"></el-table-column>
+ <el-table-column prop="A3" label="鐘舵��" min-width="120" align="center"></el-table-column>
+ <el-table-column prop="A4" label="灞炴�4" min-width="120" align="center"></el-table-column>
+ <el-table-column label="鎿嶄綔" width="150" align="center" fixed="right">
+ <template slot-scope="scope">
+ <div class="operation-cell">
+ <el-button
+ type="primary"
+ size="mini"
+ @click="showDetail(scope.row)">
+ 鏄庣粏鏌ョ湅
+ </el-button>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鍒嗛〉鎺т欢 -->
+ <div class="pagination-container">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
+ </div>
+ </div>
+
+ <!-- 瀛愯〃B璇︽儏寮圭獥 -->
+ <el-dialog
+ title="鏄庣粏"
+ :visible.sync="detailDialogVisible"
+ width="80%"
+ class="detail-dialog"
+ @close="closeDetailDialog">
+ <div v-if="currentRow">
+ <h3>缁勮揣鍗曚富琛� (缁勮揣鍗曞彿: {{ currentRow.A1 }})</h3>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ currentRow.A2 }}</el-descriptions-item>
+ <el-descriptions-item label="鐘舵��">{{ currentRow.A3 }}</el-descriptions-item>
+ <el-descriptions-item label="灞炴�4">{{ currentRow.A4 }}</el-descriptions-item>
+ </el-descriptions>
+
+ <h3 style="margin-top: 20px;">缁勮揣鍗曟槑缁�</h3>
+ <el-table
+ border
+ :data="tableDataB"
+ style="width: 100%"
+ v-loading="detailLoading">
+ <el-table-column prop="B2" label="瀹㈡埛鍚嶇О" min-width="120" align="center"></el-table-column>
+ <el-table-column prop="B3" label="鐘舵��" min-width="120" align="center"></el-table-column>
+ <el-table-column prop="B4" label="娴佹按鍙�" min-width="120" align="center"></el-table-column>
+ <!-- 鍙牴鎹疄闄呴渶姹傛坊鍔犳洿澶氬瓙琛ㄥ垪 -->
+ </el-table>
+
+ <!-- 瀛愯〃鍒嗛〉 -->
+ <div class="pagination-container">
+ <el-pagination
+ @size-change="handleDetailSizeChange"
+ @current-change="handleDetailCurrentChange"
+ :current-page="detailCurrentPage"
+ :page-sizes="[5, 10, 20]"
+ :page-size="detailPageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="detailTotal">
+ </el-pagination>
+ </div>
+ </div>
+
+ <div slot="footer">
+ <el-button @click="closeDetailDialog">鍏抽棴</el-button>
+ </div>
+ </el-dialog>
+</div>
+
+<script>
+ var app = new Vue({
+ el: '#app',
+ data: {
+ // 鎼滅储琛ㄥ崟
+ searchForm: {
+ A1: '',
+ A2: '',
+ A3: '',
+ A4: ''
+ },
+ // 涓昏〃A鏁版嵁
+ tableDataA: [],
+ // 瀛愯〃B鏁版嵁
+ tableDataB: [],
+ // 鍒嗛〉鐩稿叧
+ currentPage: 1,
+ pageSize: 10,
+ total: 0,
+ // 璇︽儏寮圭獥鎺у埗
+ detailDialogVisible: false,
+ currentRow: null,
+ // 瀛愯〃鍒嗛〉
+ detailCurrentPage: 1,
+ detailPageSize: 5,
+ detailTotal: 0,
+ // 鍔犺浇鐘舵��
+ loading: false,
+ detailLoading: false,
+ // 鍘熷鏁版嵁澶囦唤锛堢敤浜庢悳绱級
+ originalTableDataA: []
+ },
+ created() {
+ this.init();
+ },
+ methods: {
+ init() {
+ setInterval(() => {
+ this.getTableDataA();
+ }, 2000);
+ },
+
+ // 鑾峰彇涓昏〃A鏁版嵁
+ getTableDataA() {
+ let that = this;
+ that.loading = true;
+
+ // 妯℃嫙API璋冪敤 - 鏇挎崲涓哄疄闄匒PI
+ $.ajax({
+ url: baseUrl + "/api/tableA/data",
+ headers: {
+ 'token': localStorage.getItem('token')
+ },
+ data: {
+ page: that.currentPage,
+ size: that.pageSize
+ },
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ method: 'post',
+ success: function (res) {
+ that.tableDataA = res.data || [];
+ that.originalTableDataA = JSON.parse(JSON.stringify(that.tableDataA)); // 澶囦唤鍘熷鏁版嵁
+ that.total = res.total || 0;
+ that.loading = false;
+ },
+ error: function() {
+ that.loading = false;
+ // 瀹為檯椤圭洰涓簲浣跨敤鐪熷疄API锛岃繖閲屼娇鐢ㄦā鎷熸暟鎹�
+ that.mockTableAData();
+ }
+ });
+ },
+
+ // 鑾峰彇瀛愯〃B鏁版嵁
+ getTableDataB(A1) {
+ let that = this;
+ that.detailLoading = true;
+
+ // 妯℃嫙API璋冪敤 - 鏇挎崲涓哄疄闄匒PI
+ $.ajax({
+ url: baseUrl + "/api/tableB/data",
+ headers: {
+ 'token': localStorage.getItem('token')
+ },
+ data: {
+ A1: A1,
+ page: that.detailCurrentPage,
+ size: that.detailPageSize
+ },
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ method: 'post',
+ success: function (res) {
+ that.tableDataB = res.data || [];
+ that.detailTotal = res.total || 0;
+ that.detailLoading = false;
+ },
+ error: function() {
+ that.detailLoading = false;
+ // 瀹為檯椤圭洰涓簲浣跨敤鐪熷疄API锛岃繖閲屼娇鐢ㄦā鎷熸暟鎹�
+ that.mockTableBData(A1);
+ }
+ });
+ },
+
+ // 鎼滅储澶勭悊[1,5](@ref)
+ handleSearch() {
+ this.currentPage = 1;
+ this.loading = true;
+
+ // 濡傛灉鏈夊悗绔悳绱PI锛屽彲浠ヨ皟鐢ㄥ悗绔悳绱�
+ // 杩欓噷浣跨敤鍓嶇杩囨护浣滀负绀轰緥
+ if (this.isSearchFormEmpty()) {
+ // 濡傛灉鎼滅储鏉′欢涓虹┖锛屾樉绀烘墍鏈夋暟鎹�
+ this.getTableDataA();
+ } else {
+ // 浣跨敤鍓嶇杩囨护杩涜鎼滅储[2,4](@ref)
+ this.filterTableData();
}
- }
- })
- </script>
-</body>
+ },
+ // 鍓嶇杩囨护琛ㄦ牸鏁版嵁[2,4](@ref)
+ filterTableData() {
+ let that = this;
+ // 妯℃嫙API璋冪敤 - 瀹為檯椤圭洰涓彲浠ヨ皟鐢ㄥ悗绔悳绱㈡帴鍙�
+ $.ajax({
+ url: baseUrl + "/api/tableA/search",
+ headers: {
+ 'token': localStorage.getItem('token')
+ },
+ data: {
+ ...that.searchForm,
+ page: that.currentPage,
+ size: that.pageSize
+ },
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ method: 'post',
+ success: function (res) {
+ that.tableDataA = res.data || [];
+ that.total = res.total || 0;
+ that.loading = false;
+ },
+ error: function() {
+ that.loading = false;
+ // 濡傛灉API璋冪敤澶辫触锛屼娇鐢ㄥ墠绔繃婊や綔涓哄閫夋柟妗�
+ that.frontendFilter();
+ }
+ });
+ },
+
+ // 鍓嶇杩囨护澶囬�夋柟妗圼2,4](@ref)
+ frontendFilter() {
+ const filteredData = this.originalTableDataA.filter(item => {
+ // 妫�鏌ユ瘡涓悳绱㈡潯浠禰4](@ref)
+ const matchA1 = !this.searchForm.A1 ||
+ (item.A1 && item.A1.toString().toLowerCase().includes(this.searchForm.A1.toLowerCase()));
+ const matchA2 = !this.searchForm.A2 ||
+ (item.A2 && item.A2.toString().toLowerCase().includes(this.searchForm.A2.toLowerCase()));
+ const matchA3 = !this.searchForm.A3 ||
+ (item.A3 && item.A3.toString().toLowerCase().includes(this.searchForm.A3.toLowerCase()));
+ const matchA4 = !this.searchForm.A4 ||
+ (item.A4 && item.A4.toString().toLowerCase().includes(this.searchForm.A4.toLowerCase()));
+
+ return matchA1 && matchA2 && matchA3 && matchA4;
+ });
+
+ this.tableDataA = filteredData;
+ this.total = filteredData.length;
+ this.loading = false;
+ },
+
+ // 閲嶇疆鎼滅储鏉′欢[5](@ref)
+ handleReset() {
+ this.searchForm = {
+ A1: '',
+ A2: '',
+ A3: '',
+ A4: ''
+ };
+ this.currentPage = 1;
+ this.getTableDataA();
+ },
+
+ // 妫�鏌ユ悳绱㈡潯浠舵槸鍚︿负绌�
+ isSearchFormEmpty() {
+ return !this.searchForm.A1 && !this.searchForm.A2 &&
+ !this.searchForm.A3 && !this.searchForm.A4;
+ },
+
+ // 鏄剧ず璇︽儏寮圭獥
+ showDetail(row) {
+ this.currentRow = row;
+ this.detailDialogVisible = true;
+ this.detailCurrentPage = 1;
+ this.getTableDataB(row.A1);
+ },
+
+ // 鍏抽棴璇︽儏寮圭獥
+ closeDetailDialog() {
+ this.detailDialogVisible = false;
+ this.currentRow = null;
+ this.tableDataB = [];
+ },
+
+ // 涓昏〃鍒嗛〉澶у皬鏀瑰彉
+ handleSizeChange(val) {
+ this.pageSize = val;
+ this.currentPage = 1;
+ this.getTableDataA();
+ },
+
+ // 涓昏〃椤电爜鏀瑰彉
+ handleCurrentChange(val) {
+ this.currentPage = val;
+ this.getTableDataA();
+ },
+
+ // 瀛愯〃鍒嗛〉澶у皬鏀瑰彉
+ handleDetailSizeChange(val) {
+ this.detailPageSize = val;
+ this.detailCurrentPage = 1;
+ if (this.currentRow) {
+ this.getTableDataB(this.currentRow.A1);
+ }
+ },
+
+ // 瀛愯〃椤电爜鏀瑰彉
+ handleDetailCurrentChange(val) {
+ this.detailCurrentPage = val;
+ if (this.currentRow) {
+ this.getTableDataB(this.currentRow.A1);
+ }
+ },
+
+ // 妯℃嫙涓昏〃鏁版嵁 - 瀹為檯椤圭洰涓簲鍒犻櫎
+ mockTableAData() {
+ this.tableDataA = [
+ { A1: '1001', A2: '绀轰緥鏁版嵁A2-1', A3: '绀轰緥鏁版嵁A3-1', A4: '绀轰緥鏁版嵁A4-1' },
+ { A1: '1002', A2: '绀轰緥鏁版嵁A2-2', A3: '绀轰緥鏁版嵁A3-2', A4: '绀轰緥鏁版嵁A4-2' },
+ { A1: '1003', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '10033', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '100333', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '10032', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '10031', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '100312', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '1003123', A2: '绀轰緥鏁版嵁A2-3', A3: '绀轰緥鏁版嵁A3-3', A4: '绀轰緥鏁版嵁A4-3' },
+ { A1: '1004', A2: '绀轰緥鏁版嵁A2-4', A3: '绀轰緥鏁版嵁A3-4', A4: '绀轰緥鏁版嵁A4-4' }
+ ];
+ this.originalTableDataA = JSON.parse(JSON.stringify(this.tableDataA)); // 澶囦唤鍘熷鏁版嵁
+ this.total = 4;
+ this.loading = false;
+ },
+
+ // 妯℃嫙瀛愯〃鏁版嵁 - 瀹為檯椤圭洰涓簲鍒犻櫎
+ mockTableBData(A1) {
+ this.tableDataB = [
+ { B2: `瀛愯〃鏁版嵁B2-${A1}-1`, B3: `瀛愯〃鏁版嵁B3-${A1}-1`, B4: `瀛愯〃鏁版嵁B4-${A1}-1` },
+ { B2: `瀛愯〃鏁版嵁B2-${A1}-2`, B3: `瀛愯〃鏁版嵁B3-${A1}-2`, B4: `瀛愯〃鏁版嵁B4-${A1}-2` },
+ { B2: `瀛愯〃鏁版嵁B2-${A1}-3`, B3: `瀛愯〃鏁版嵁B3-${A1}-3`, B4: `瀛愯〃鏁版嵁B4-${A1}-3` }
+ ];
+ this.detailTotal = 3;
+ this.detailLoading = false;
+ }
+ }
+ });
+</script>
+</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.1