| | |
| | | prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="产品宽(mm):"> |
| | | <el-input v-model="searchForm.width" |
| | | placeholder="请输入" |
| | | clearable |
| | | prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="产品高(mm):"> |
| | | <el-input v-model="searchForm.height" |
| | | placeholder="请输入" |
| | | clearable |
| | | prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="录入日期:"> |
| | | <el-date-picker v-model="searchForm.entryDate" |
| | | value-format="YYYY-MM-DD" |
| | |
| | | width="220" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" /> |
| | | <el-table-column label="面积" |
| | | prop="productTotalArea" |
| | | width="120" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="数量" |
| | | prop="productTotalQuantity" |
| | | width="120" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="发货状态" |
| | | width="140" |
| | | align="center"> |
| | |
| | | label-width="140px" |
| | | label-position="top" |
| | | :rules="rules" |
| | | @keydown.capture="handleTabScrollFollow" |
| | | ref="formRef"> |
| | | <!-- 报价单导入入口:放在表单顶部,选择后反显客户/业务员等 --> |
| | | <el-row v-if="operationType === 'add'" |
| | |
| | | title="选择入库产品" |
| | | width="60%" |
| | | :close-on-click-modal="false"> |
| | | <div style="margin-bottom: 12px;"> |
| | | <el-form> |
| | | <el-form-item required> |
| | | <template #label> |
| | | <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;"> |
| | | <span>审批人选择:</span> |
| | | <el-button type="primary" |
| | | size="small" |
| | | @click="addStockApproverNode" |
| | | icon="Plus">新增节点</el-button> |
| | | </div> |
| | | </template> |
| | | <div class="approver-nodes-container"> |
| | | <div v-for="(node, index) in stockApproverNodes" |
| | | :key="node.id" |
| | | class="approver-node-item"> |
| | | <div class="approver-node-header"> |
| | | <span class="approver-node-label">审批节点 {{ index + 1 }}</span> |
| | | <el-button v-if="stockApproverNodes.length > 1" |
| | | type="danger" |
| | | size="small" |
| | | text |
| | | @click="removeStockApproverNode(index)" |
| | | icon="Delete">删除</el-button> |
| | | </div> |
| | | <el-select v-model="node.userId" |
| | | placeholder="请选择审批人" |
| | | filterable |
| | | clearable |
| | | style="width: 100%;"> |
| | | <el-option v-for="item in stockApproverOptions" |
| | | :key="item.userId" |
| | | :label="item.userName" |
| | | :value="item.userId" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <el-table :data="stockProductList" |
| | | border |
| | | stripe |
| | |
| | | const selectedStockProductIds = ref([]); |
| | | const stockLoading = ref(false); |
| | | const currentStockLedgerId = ref(null); |
| | | const stockApproverOptions = ref([]); |
| | | const stockApproverNodes = ref([{ id: 1, userId: null }]); |
| | | let nextStockApproverId = 2; |
| | | const addStockApproverNode = () => { |
| | | stockApproverNodes.value.push({ id: nextStockApproverId++, userId: null }); |
| | | }; |
| | | const removeStockApproverNode = index => { |
| | | stockApproverNodes.value.splice(index, 1); |
| | | }; |
| | | |
| | | const ledgerQrDialogVisible = ref(false); |
| | | const ledgerQrCompositeUrl = ref(""); |
| | |
| | | customerName: "", // 客户名称 |
| | | customerId: "", // 客户ID(查询下拉) |
| | | salesContractNo: "", // 销售合同编号 |
| | | width: undefined, // 产品宽(mm) |
| | | height: undefined, // 产品高(mm) |
| | | entryDate: null, // 录入日期 |
| | | entryDateStart: undefined, |
| | | entryDateEnd: undefined, |
| | |
| | | delete params.customerName; |
| | | } |
| | | } |
| | | const widthValue = |
| | | params.width != null ? String(params.width).trim() : ""; |
| | | if (widthValue) { |
| | | params.width = widthValue; |
| | | } else { |
| | | delete params.width; |
| | | } |
| | | const heightValue = |
| | | params.height != null ? String(params.height).trim() : ""; |
| | | if (heightValue) { |
| | | params.height = heightValue; |
| | | } else { |
| | | delete params.height; |
| | | } |
| | | const shouldAutoExpandBySize = Boolean(params.width || params.height); |
| | | delete params.customerId; |
| | | return ledgerListPage(params) |
| | | .then(res => { |
| | | .then(async res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.records; |
| | | tableData.value.map(item => { |
| | | item.children = []; |
| | | }); |
| | | if (shouldAutoExpandBySize && tableData.value.length > 0) { |
| | | const loadChildrenTasks = tableData.value.map(item => |
| | | productList({ salesLedgerId: item.id, type: 1 }) |
| | | .then(productRes => { |
| | | item.children = Array.isArray(productRes?.data) |
| | | ? productRes.data |
| | | : []; |
| | | }) |
| | | .catch(() => { |
| | | item.children = []; |
| | | }) |
| | | ); |
| | | await Promise.all(loadChildrenTasks); |
| | | expandedRowKeys.value = tableData.value.map(item => item.id); |
| | | } |
| | | total.value = res.total; |
| | | return res; |
| | | }) |
| | |
| | | currentStockLedgerId.value = id; |
| | | selectedStockProductIds.value = []; |
| | | stockProductList.value = []; |
| | | stockApproverNodes.value = [{ id: 1, userId: null }]; |
| | | nextStockApproverId = 2; |
| | | stockDialogVisible.value = true; |
| | | stockLoading.value = true; |
| | | |
| | | try { |
| | | const approverRes = await approveUserList({ approveType: 9 }); |
| | | stockApproverOptions.value = Array.isArray(approverRes?.data) |
| | | ? approverRes.data.map(item => ({ |
| | | userId: item.userId, |
| | | userName: item.userName, |
| | | })) |
| | | : []; |
| | | const res = await productList({ salesLedgerId: id, type: 1 }); |
| | | stockProductList.value = []; |
| | | stockProductList.value = |
| | | res.data.filter(item => item.productStockStatus == 0 || item.productStockStatus == 1) || []; |
| | | } catch (e) { |
| | | proxy?.$modal?.msgError?.("获取产品列表失败"); |
| | | proxy?.$modal?.msgError?.("获取产品或审批人失败"); |
| | | } finally { |
| | | stockLoading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const submitStock = async () => { |
| | | const hasEmptyApprover = stockApproverNodes.value.some(node => !node.userId); |
| | | if (hasEmptyApprover) { |
| | | ElMessage.warning("请为所有审批节点选择审批人"); |
| | | return; |
| | | } |
| | | if (selectedStockProductIds.value.length === 0) { |
| | | ElMessage.warning("请选择至少一个产品进行入库"); |
| | | return; |
| | |
| | | |
| | | proxy?.$modal?.loading?.("正在入库,请稍候..."); |
| | | try { |
| | | const approveUserIds = stockApproverNodes.value.map(node => node.userId).join(","); |
| | | const approveUserName = stockApproverNodes.value |
| | | .map(node => stockApproverOptions.value.find(item => String(item.userId) === String(node.userId))?.userName) |
| | | .filter(Boolean) |
| | | .join(","); |
| | | await salesStock({ |
| | | salesLedgerId: currentStockLedgerId.value, |
| | | salesLedgerProducts: selectedStockProductIds.value, |
| | | approveUserIds, |
| | | approveUserName, |
| | | }); |
| | | proxy?.$modal?.msgSuccess?.("入库成功"); |
| | | stockDialogVisible.value = false; |
| | |
| | | } |
| | | const num = Number(cellValue); |
| | | return Number.isFinite(num) ? num.toFixed(2) : ""; |
| | | }; |
| | | |
| | | const scrollElementIntoVisibleArea = target => { |
| | | if (!target || !(target instanceof HTMLElement)) return; |
| | | let parent = target.parentElement; |
| | | while (parent && parent !== document.body) { |
| | | const style = window.getComputedStyle(parent); |
| | | const canScrollX = |
| | | (style.overflowX === "auto" || |
| | | style.overflowX === "scroll" || |
| | | style.overflowX === "overlay") && |
| | | parent.scrollWidth > parent.clientWidth; |
| | | const canScrollY = |
| | | (style.overflowY === "auto" || |
| | | style.overflowY === "scroll" || |
| | | style.overflowY === "overlay") && |
| | | parent.scrollHeight > parent.clientHeight; |
| | | |
| | | if (canScrollX || canScrollY) { |
| | | const parentRect = parent.getBoundingClientRect(); |
| | | const targetRect = target.getBoundingClientRect(); |
| | | if (canScrollX) { |
| | | const targetCenterX = targetRect.left + targetRect.width / 2; |
| | | const parentCenterX = parentRect.left + parentRect.width / 2; |
| | | const deltaX = targetCenterX - parentCenterX; |
| | | if (Math.abs(deltaX) > 2) { |
| | | parent.scrollLeft += deltaX; |
| | | } |
| | | } |
| | | |
| | | if (canScrollY) { |
| | | const targetCenterY = targetRect.top + targetRect.height / 2; |
| | | const parentCenterY = parentRect.top + parentRect.height / 2; |
| | | const deltaY = targetCenterY - parentCenterY; |
| | | if (Math.abs(deltaY) > 2) { |
| | | parent.scrollTop += deltaY; |
| | | } |
| | | } |
| | | } |
| | | |
| | | parent = parent.parentElement; |
| | | } |
| | | }; |
| | | |
| | | const handleTabScrollFollow = e => { |
| | | if (!e || e.key !== "Tab") return; |
| | | requestAnimationFrame(() => { |
| | | const active = document.activeElement; |
| | | if (active instanceof HTMLElement) { |
| | | scrollElementIntoVisibleArea(active); |
| | | } |
| | | }); |
| | | }; |
| | | // 获取tree子数据 |
| | | const getModels = value => { |
| | |
| | | const summarizeMainTable = param => { |
| | | return proxy.summarizeTable(param, [ |
| | | "contractAmount", |
| | | "productTotalQuantity", |
| | | "productTotalArea", |
| | | "taxInclusiveTotalPrice", |
| | | "taxExclusiveTotalPrice", |
| | | ]); |
| | |
| | | .ledger-qr-save-btn { |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .approver-nodes-container { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 16px; |
| | | padding: 16px; |
| | | background-color: #f8f9fa; |
| | | border-radius: 4px; |
| | | border: 1px solid #e4e7ed; |
| | | } |
| | | |
| | | .approver-node-item { |
| | | flex: 0 0 calc(33.333% - 12px); |
| | | min-width: 200px; |
| | | padding: 12px; |
| | | background-color: #fff; |
| | | border-radius: 4px; |
| | | border: 1px solid #dcdfe6; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .approver-node-item:hover { |
| | | border-color: #409eff; |
| | | box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1); |
| | | } |
| | | |
| | | .approver-node-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .approver-node-label { |
| | | font-size: 13px; |
| | | font-weight: 500; |
| | | color: #606266; |
| | | } |
| | | |
| | | @media (max-width: 1200px) { |
| | | .approver-node-item { |
| | | flex: 0 0 calc(50% - 8px); |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .approver-node-item { |
| | | flex: 0 0 100%; |
| | | } |
| | | } |
| | | </style> |