| | |
| | | <div class="search-item"> |
| | | <span class="search-label">组货单号:</span> |
| | | <el-input |
| | | v-model="searchForm.A1" |
| | | v-model="searchForm.uuid" |
| | | placeholder="请输入组货单号" |
| | | clearable |
| | | style="width: 150px;" |
| | |
| | | <div class="search-item"> |
| | | <span class="search-label">客户名称:</span> |
| | | <el-input |
| | | v-model="searchForm.A2" |
| | | v-model="searchForm.cstmrName" |
| | | placeholder="请输入客户名称" |
| | | clearable |
| | | style="width: 180px;" |
| | |
| | | </div> |
| | | <div class="search-item"> |
| | | <span class="search-label">状态:</span> |
| | | <el-input |
| | | v-model="searchForm.A3" |
| | | placeholder="请输入状态" |
| | | <el-select |
| | | v-model="searchForm.settle" |
| | | placeholder="请选择状态" |
| | | clearable |
| | | style="width: 150px;" |
| | | @keyup.enter.native="handleSearch" |
| | | ></el-input> |
| | | > |
| | | <el-option label="全部" value=""></el-option> |
| | | <el-option label="正常" value="1"></el-option> |
| | | <el-option label="禁用" value="0"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="search-item"> |
| | | <span class="search-label">属性A4:</span> |
| | | <span class="search-label">订单编号:</span> |
| | | <el-input |
| | | v-model="searchForm.A4" |
| | | placeholder="请输入属性A4" |
| | | v-model="searchForm.orderNo" |
| | | placeholder="请输入订单编号" |
| | | clearable |
| | | style="width: 150px;" |
| | | @keyup.enter.native="handleSearch" |
| | |
| | | :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="属性A4" min-width="120" align="center"></el-table-column> |
| | | v-loading="loading" |
| | | @sort-change="handleSortChange"> |
| | | <el-table-column prop="uuid" label="组货单号" width="120" align="center" sortable="custom"></el-table-column> |
| | | <el-table-column prop="orderNo" label="订单编号" min-width="140" align="center"></el-table-column> |
| | | <el-table-column prop="cstmrName" label="客户名称" min-width="120" align="center"></el-table-column> |
| | | <el-table-column prop="settle" label="状态" min-width="100" align="center" :formatter="formatStatus"></el-table-column> |
| | | <el-table-column prop="totalFee" label="合计金额" min-width="100" align="center" :formatter="formatCurrency"></el-table-column> |
| | | <el-table-column prop="createTime" label="创建时间" min-width="140" align="center" sortable="custom"></el-table-column> |
| | | <el-table-column label="操作" width="150" align="center" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation-cell"> |
| | |
| | | class="detail-dialog" |
| | | @close="closeDetailDialog"> |
| | | <div v-if="currentRow"> |
| | | <h3>组货单主表 (组货单号: {{ currentRow.A1 }})</h3> |
| | | <h3>组货单主表 (组货单号: {{ currentRow.uuid }})</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="属性A4">{{ currentRow.A4 }}</el-descriptions-item> |
| | | <el-descriptions-item label="订单编号">{{ currentRow.orderNo }}</el-descriptions-item> |
| | | <el-descriptions-item label="客户名称">{{ currentRow.cstmrName }}</el-descriptions-item> |
| | | <el-descriptions-item label="状态">{{ formatStatus(currentRow) }}</el-descriptions-item> |
| | | <el-descriptions-item label="合计金额">{{ formatCurrency(currentRow) }}</el-descriptions-item> |
| | | <el-descriptions-item label="创建时间">{{ formatDate(currentRow.createTime) }}</el-descriptions-item> |
| | | <el-descriptions-item label="备注">{{ currentRow.memo || '无' }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | |
| | | <h3 style="margin-top: 20px;">组货单明细</h3> |
| | |
| | | :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-column prop="productName" label="产品名称" min-width="120" align="center"></el-table-column> |
| | | <el-table-column prop="quantity" label="数量" min-width="80" align="center"></el-table-column> |
| | | <el-table-column prop="price" label="单价" min-width="100" align="center" :formatter="formatCurrency"></el-table-column> |
| | | <el-table-column prop="totalPrice" label="金额" min-width="100" align="center" :formatter="formatCurrency"></el-table-column> |
| | | <!-- 可根据实际需求添加更多子表列 --> |
| | | </el-table> |
| | | |
| | |
| | | data: { |
| | | // 搜索表单 |
| | | searchForm: { |
| | | A1: '', |
| | | A2: '', |
| | | A3: '', |
| | | A4: '' |
| | | uuid: '', |
| | | cstmrName: '', |
| | | settle: '', |
| | | orderNo: '' |
| | | }, |
| | | // 排序相关 |
| | | orderByField: '', |
| | | orderByType: 'asc', |
| | | // 主表A数据 |
| | | tableDataA: [], |
| | | // 子表B数据 |
| | |
| | | // 加载状态 |
| | | loading: false, |
| | | detailLoading: false, |
| | | reportLoading: false, |
| | | // 原始数据备份(用于搜索) |
| | | originalTableDataA: [] |
| | | reportLoading: false |
| | | }, |
| | | created() { |
| | | this.init(); |
| | |
| | | init() { |
| | | this.getTableDataA(); |
| | | |
| | | // 每5秒自动刷新数据 |
| | | setInterval(() => { |
| | | this.getTableDataA(); |
| | | }, 5000); |
| | | }, |
| | | |
| | | // 获取主表A数据 |
| | | // 获取主表A数据 - 使用新的API |
| | | getTableDataA() { |
| | | let that = this; |
| | | that.loading = true; |
| | | |
| | | // 模拟API调用 - 替换为实际API |
| | | // 构建请求参数 |
| | | let params = { |
| | | curr: that.currentPage, |
| | | limit: that.pageSize |
| | | }; |
| | | |
| | | // 添加排序参数 |
| | | if (that.orderByField) { |
| | | params.orderByField = that.orderByField; |
| | | params.orderByType = that.orderByType; |
| | | } |
| | | |
| | | // 添加搜索参数 |
| | | Object.keys(that.searchForm).forEach(key => { |
| | | if (that.searchForm[key] !== '') { |
| | | params[key] = that.searchForm[key]; |
| | | } |
| | | }); |
| | | |
| | | $.ajax({ |
| | | url: baseUrl + "/api/tableA/data", |
| | | // url: baseUrl + "/order/pakout/order/cargo/grouping/auth/v1", |
| | | url: baseUrl + "/order/head/page/auth", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: { |
| | | page: that.currentPage, |
| | | size: that.pageSize |
| | | }, |
| | | data: params, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | method: 'get', |
| | | success: function (res) { |
| | | that.tableDataA = res.data || []; |
| | | that.originalTableDataA = JSON.parse(JSON.stringify(that.tableDataA)); // 备份原始数据 |
| | | that.total = res.total || 0; |
| | | if (res.code === 200 || res.success) { |
| | | that.tableDataA = res.data.records || []; |
| | | that.total = res.data.total || 0; |
| | | } else { |
| | | that.$message.error(res.message || '获取数据失败'); |
| | | that.tableDataA = []; |
| | | that.total = 0; |
| | | } |
| | | that.loading = false; |
| | | }, |
| | | error: function() { |
| | | error: function(xhr, status, error) { |
| | | that.loading = false; |
| | | // 实际项目中应使用真实API,这里使用模拟数据 |
| | | that.$message.error('网络请求失败'); |
| | | console.error('API调用失败:', error); |
| | | // 模拟数据(实际项目中应删除) |
| | | that.mockTableAData(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 获取子表B数据 |
| | | getTableDataB(A1) { |
| | | // 获取子表B数据(根据实际业务调整) |
| | | getTableDataB(uuid) { |
| | | let that = this; |
| | | that.detailLoading = true; |
| | | |
| | | // 模拟API调用 - 替换为实际API |
| | | // 模拟API调用 - 根据实际业务调整API地址 |
| | | $.ajax({ |
| | | url: baseUrl + "/api/tableB/data", |
| | | url: baseUrl + "/api/order/detail/list", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: { |
| | | A1: A1, |
| | | uuid: uuid, |
| | | page: that.detailCurrentPage, |
| | | size: that.detailPageSize |
| | | }, |
| | |
| | | error: function() { |
| | | that.detailLoading = false; |
| | | // 实际项目中应使用真实API,这里使用模拟数据 |
| | | that.mockTableBData(A1); |
| | | that.mockTableBData(uuid); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 表格排序变化 |
| | | handleSortChange(column) { |
| | | if (column.prop) { |
| | | this.orderByField = column.prop; |
| | | this.orderByType = column.order === 'ascending' ? 'asc' : 'desc'; |
| | | } else { |
| | | this.orderByField = ''; |
| | | this.orderByType = 'asc'; |
| | | } |
| | | this.currentPage = 1; |
| | | this.getTableDataA(); |
| | | }, |
| | | |
| | | // 显示二次确认对话框 |
| | |
| | | return; |
| | | } |
| | | |
| | | const groupOrderNo = this.currentRow.A1; |
| | | const groupOrderNo = this.currentRow.uuid; |
| | | |
| | | this.$confirm( |
| | | `是否确认开始上报组货单号 <strong style="color: #F56C6C; font-size: 16px;">${groupOrderNo}</strong>?<br/><br/>将生成实际组货单,单一组货单号只能操作一次!!!`, |
| | |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: JSON.stringify({ |
| | | A1: groupOrderNo // 传递组货单号 |
| | | uuid: groupOrderNo // 传递组货单号 |
| | | }), |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | |
| | | type: 'success', |
| | | duration: 3000 |
| | | }); |
| | | // 上报成功后关闭弹窗 |
| | | // 上报成功后关闭弹窗并刷新数据 |
| | | setTimeout(() => { |
| | | this.closeDetailDialog(); |
| | | this.getTableDataA(); // 刷新主表数据 |
| | | }, 1500); |
| | | } else { |
| | | this.$message.error(res.message || '上报失败'); |
| | |
| | | done(); |
| | | } |
| | | console.error('上报失败:', error); |
| | | // 模拟上报成功(实际项目中应删除此部分) |
| | | this.mockReportSuccess(groupOrderNo); |
| | | this.$message.error('上报失败,请检查网络连接'); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 模拟上报成功(实际项目中应删除) |
| | | mockReportSuccess(groupOrderNo) { |
| | | this.$message({ |
| | | message: `组货单号 ${groupOrderNo} 上报成功(模拟)`, |
| | | type: 'success', |
| | | duration: 3000 |
| | | }); |
| | | // 上报成功后关闭弹窗 |
| | | setTimeout(() => { |
| | | this.closeDetailDialog(); |
| | | }, 1500); |
| | | }, |
| | | |
| | | // 搜索处理 |
| | | handleSearch() { |
| | | this.currentPage = 1; |
| | | this.loading = true; |
| | | |
| | | // 如果有后端搜索API,可以调用后端搜索 |
| | | // 这里使用前端过滤作为示例 |
| | | if (this.isSearchFormEmpty()) { |
| | | // 如果搜索条件为空,显示所有数据 |
| | | this.getTableDataA(); |
| | | } else { |
| | | // 使用前端过滤进行搜索 |
| | | this.filterTableData(); |
| | | } |
| | | }, |
| | | |
| | | // 前端过滤表格数据 |
| | | 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(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 前端过滤备选方案 |
| | | frontendFilter() { |
| | | const filteredData = this.originalTableDataA.filter(item => { |
| | | // 检查每个搜索条件 |
| | | 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; |
| | | this.orderByField = ''; |
| | | this.orderByType = 'asc'; |
| | | this.getTableDataA(); |
| | | }, |
| | | |
| | | // 重置搜索条件 |
| | | handleReset() { |
| | | this.searchForm = { |
| | | A1: '', |
| | | A2: '', |
| | | A3: '', |
| | | A4: '' |
| | | uuid: '', |
| | | cstmrName: '', |
| | | settle: '', |
| | | orderNo: '' |
| | | }; |
| | | this.orderByField = ''; |
| | | this.orderByType = 'asc'; |
| | | this.currentPage = 1; |
| | | this.getTableDataA(); |
| | | }, |
| | | |
| | | // 检查搜索条件是否为空 |
| | | isSearchFormEmpty() { |
| | | return !this.searchForm.A1 && !this.searchForm.A2 && |
| | | !this.searchForm.A3 && !this.searchForm.A4; |
| | | }, |
| | | |
| | | // 显示详情弹窗 |
| | |
| | | this.currentRow = row; |
| | | this.detailDialogVisible = true; |
| | | this.detailCurrentPage = 1; |
| | | this.getTableDataB(row.A1); |
| | | this.getTableDataB(row.uuid); |
| | | }, |
| | | |
| | | // 关闭详情弹窗 |
| | |
| | | this.detailPageSize = val; |
| | | this.detailCurrentPage = 1; |
| | | if (this.currentRow) { |
| | | this.getTableDataB(this.currentRow.A1); |
| | | this.getTableDataB(this.currentRow.uuid); |
| | | } |
| | | }, |
| | | |
| | |
| | | handleDetailCurrentChange(val) { |
| | | this.detailCurrentPage = val; |
| | | if (this.currentRow) { |
| | | this.getTableDataB(this.currentRow.A1); |
| | | this.getTableDataB(this.currentRow.uuid); |
| | | } |
| | | }, |
| | | |
| | | // 格式化状态显示 |
| | | formatStatus(row) { |
| | | if (row.settle === 1) { |
| | | return '正常'; |
| | | } else if (row.settle === 0) { |
| | | return '禁用'; |
| | | } else { |
| | | return row.settle || '未知'; |
| | | } |
| | | }, |
| | | |
| | | // 格式化金额显示 |
| | | formatCurrency(row) { |
| | | if (row.totalFee) { |
| | | return '¥' + parseFloat(row.totalFee).toFixed(2); |
| | | } |
| | | return '¥0.00'; |
| | | }, |
| | | |
| | | // 格式化日期显示 |
| | | formatDate(dateStr) { |
| | | if (!dateStr) return ''; |
| | | // 简单的日期格式化,可以根据实际格式调整 |
| | | return dateStr; |
| | | }, |
| | | |
| | | // 模拟主表数据 - 实际项目中应删除 |
| | | 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: '1004', A2: '示例数据A2-4', A3: '示例数据A3-4', A4: '示例数据A4-4' } |
| | | { |
| | | uuid: 'ZH1001', |
| | | orderNo: 'ORDER2024001', |
| | | cstmrName: '示例客户A', |
| | | settle: 1, |
| | | totalFee: 1500.00, |
| | | createTime: '2024-01-15 10:30:00', |
| | | memo: '测试数据' |
| | | }, |
| | | { |
| | | uuid: 'ZH1002', |
| | | orderNo: 'ORDER2024002', |
| | | cstmrName: '示例客户B', |
| | | settle: 1, |
| | | totalFee: 2300.50, |
| | | createTime: '2024-01-16 14:20:00', |
| | | memo: '测试数据' |
| | | } |
| | | ]; |
| | | this.originalTableDataA = JSON.parse(JSON.stringify(this.tableDataA)); // 备份原始数据 |
| | | this.total = 4; |
| | | this.total = 2; |
| | | this.loading = false; |
| | | }, |
| | | |
| | | // 模拟子表数据 - 实际项目中应删除 |
| | | mockTableBData(A1) { |
| | | mockTableBData(uuid) { |
| | | 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` } |
| | | { productName: `产品A-${uuid}`, quantity: 2, price: 500.00, totalPrice: 1000.00 }, |
| | | { productName: `产品B-${uuid}`, quantity: 1, price: 300.50, totalPrice: 300.50 } |
| | | ]; |
| | | this.detailTotal = 3; |
| | | this.detailTotal = 2; |
| | | this.detailLoading = false; |
| | | } |
| | | } |