From f2a6e4d05709739659817dae2a49c16f1fd6277f Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 01 四月 2026 13:14:42 +0800
Subject: [PATCH] fix: 库存样式调整
---
src/views/inventoryManagement/stockManagement/Qualified.vue | 110 +++++++++++----
src/views/salesManagement/salesQuotation/index.vue | 200 ----------------------------
src/views/inventoryManagement/stockManagement/Unqualified.vue | 108 ++++++++++----
3 files changed, 157 insertions(+), 261 deletions(-)
diff --git a/src/views/inventoryManagement/stockManagement/Qualified.vue b/src/views/inventoryManagement/stockManagement/Qualified.vue
index eb91974..edaa612 100644
--- a/src/views/inventoryManagement/stockManagement/Qualified.vue
+++ b/src/views/inventoryManagement/stockManagement/Qualified.vue
@@ -1,36 +1,52 @@
<template>
<div class="app-container">
- <div class="search_form">
- <div>
- <span class="search_title ml10">浜у搧绫诲瀷锛�</span>
+ <div class="search_form search_form--wrap">
+ <div class="search-field">
+ <span class="search_title">浜у搧绫诲瀷锛�</span>
<el-radio-group v-model="productScope" class="qualified-product-scope" @change="onProductScopeChange">
<el-radio-button label="鎴愬搧">鎴愬搧</el-radio-button>
<el-radio-button label="鍏朵粬浜у搧">鍏朵粬浜у搧</el-radio-button>
</el-radio-group>
- <!-- <span class="search_title ml10" style="margin-left: 20px">浜у搧澶х被锛�</span>
- <el-input v-model="searchForm.productName"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- clearable/> -->
- <span class="search_title ml10" style="margin-left: 20px">瑙勬牸鍨嬪彿锛�</span>
- <el-input v-model="searchForm.model"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <span class="search_title ml10" style="margin-left: 20px">UID鐮侊細</span>
- <el-input v-model="searchForm.uidNo"
- style="width: 200px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <span class="search_title ml10" style="margin-left: 20px">鎵规鍙凤細</span>
- <el-input v-model="searchForm.batchNo"
- style="width: 200px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
</div>
- <div>
- <el-button type="primary" @click="isShowNewModal = true">鏂板搴撳瓨</el-button>
+ <div class="search-field">
+ <span class="search_title">浜у搧鍚嶇О锛�</span>
+ <el-input
+ v-model="searchForm.productName"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field">
+ <span class="search_title">瑙勬牸鍨嬪彿锛�</span>
+ <el-input
+ v-model="searchForm.model"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field">
+ <span class="search_title">UID鐮侊細</span>
+ <el-input
+ v-model="searchForm.uidNo"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field">
+ <span class="search_title">鎵规鍙凤細</span>
+ <el-input
+ v-model="searchForm.batchNo"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field search-field--actions">
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" @click="isShowNewModal = true">鏂板搴撳瓨</el-button>
<el-button type="info" plain icon="Upload" @click="isShowImportModal = true">
瀵煎叆搴撳瓨
</el-button>
@@ -40,7 +56,7 @@
<div class="table_list">
<el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
:expand-row-keys="expandedRowKeys" :row-key="row => row.id" style="width: 100%"
- :row-class-name="tableRowClassName" height="calc(100vh - 18.5em)">
+ :row-class-name="tableRowClassName" height="calc(100vh - 26.5em)">
<el-table-column align="center" type="selection" width="55" />
<el-table-column align="center" label="搴忓彿" type="index" width="60" />
<el-table-column label="浜у搧澶х被" prop="productName" show-overflow-tooltip />
@@ -133,10 +149,7 @@
const productScope = ref('鎴愬搧')
const getProductScopeParams = () => {
- if (productScope.value === '鎴愬搧') {
- return { productType: 2 }
- }
- return { productTypes: '1,3' }
+ return { productScope: productScope.value }
}
const onProductScopeChange = () => {
@@ -239,6 +252,41 @@
</script>
<style scoped lang="scss">
+.search_form--wrap {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px 16px;
+}
+
+.search-field {
+ display: inline-flex;
+ align-items: center;
+ flex: 0 1 auto;
+ min-width: 0;
+ gap: 8px;
+
+ .search_title {
+ flex-shrink: 0;
+ white-space: nowrap;
+ text-align: right;
+ min-width: 4.5em;
+ }
+
+ .search-input {
+ width: 200px;
+ }
+
+ .qualified-product-scope {
+ flex-shrink: 0;
+ }
+}
+
+.search-field--actions {
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
.qualified-product-scope {
vertical-align: middle;
}
diff --git a/src/views/inventoryManagement/stockManagement/Unqualified.vue b/src/views/inventoryManagement/stockManagement/Unqualified.vue
index a5c22ba..fe9a90a 100644
--- a/src/views/inventoryManagement/stockManagement/Unqualified.vue
+++ b/src/views/inventoryManagement/stockManagement/Unqualified.vue
@@ -1,31 +1,45 @@
<template>
<div class="app-container">
- <div class="search_form">
- <div>
- <span class="search_title ml10">浜у搧澶х被锛�</span>
- <el-input v-model="searchForm.productName"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <span class="search_title ml10" style="margin-left: 20px">瑙勬牸鍨嬪彿锛�</span>
- <el-input v-model="searchForm.model"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <span class="search_title ml10" style="margin-left: 20px">UID鐮侊細</span>
- <el-input v-model="searchForm.uidNo"
- style="width: 200px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <span class="search_title ml10" style="margin-left: 20px">鎵规鍙凤細</span>
- <el-input v-model="searchForm.batchNo"
- style="width: 200px"
- placeholder="璇疯緭鍏�"
- clearable/>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
+ <div class="search_form search_form--wrap">
+ <div class="search-field">
+ <span class="search_title">浜у搧鍚嶇О锛�</span>
+ <el-input
+ v-model="searchForm.productName"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
</div>
- <div>
- <el-button type="primary" @click="isShowNewModal = true">鏂板搴撳瓨</el-button>
+ <div class="search-field">
+ <span class="search_title">瑙勬牸鍨嬪彿锛�</span>
+ <el-input
+ v-model="searchForm.model"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field">
+ <span class="search_title">UID鐮侊細</span>
+ <el-input
+ v-model="searchForm.uidNo"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field">
+ <span class="search_title">鎵规鍙凤細</span>
+ <el-input
+ v-model="searchForm.batchNo"
+ class="search-input"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </div>
+ <div class="search-field search-field--actions">
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" @click="isShowNewModal = true">鏂板搴撳瓨</el-button>
<el-button @click="handleOut">瀵煎嚭</el-button>
</div>
</div>
@@ -78,7 +92,7 @@
<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
-import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
+import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
import { ElMessageBox } from "element-plus";
import { getStockUninventoryListPage } from "@/api/inventoryManagement/stockUninventory.js";
const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue"));
@@ -166,13 +180,8 @@
const expandedRowKeys = ref([])
// 琛ㄦ牸琛岀被鍚�
-const tableRowClassName = ({ row }) => {
- // const stock = Number(row?.unLockedQuantity ?? 0);
- // const warn = Number(row?.warnNum ?? 0);
- // if (!Number.isFinite(stock) || !Number.isFinite(warn)) {
- // return '';
- // }
- // return stock < warn ? 'row-low-stock' : '';
+const tableRowClassName = () => {
+ return '';
};
// 瀵煎嚭
@@ -185,7 +194,7 @@
type: 'warning',
}
).then(() => {
- proxy.download("/stockUninventory/exportStockUninventory", {}, '涓嶅悎鏍煎簱瀛樹俊鎭�.xlsx')
+ proxy.download("/stockUninventory/exportStockUninventory", { ...searchForm.value }, '涓嶅悎鏍煎簱瀛樹俊鎭�.xlsx')
}).catch(() => {
proxy.$modal.msg("宸插彇娑�")
})
@@ -197,6 +206,37 @@
</script>
<style scoped lang="scss">
+.search_form--wrap {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 12px 16px;
+}
+
+.search-field {
+ display: inline-flex;
+ align-items: center;
+ flex: 0 1 auto;
+ min-width: 0;
+ gap: 8px;
+
+ .search_title {
+ flex-shrink: 0;
+ white-space: nowrap;
+ text-align: right;
+ min-width: 4.5em;
+ }
+
+ .search-input {
+ width: 200px;
+ }
+}
+
+.search-field--actions {
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
:deep(.row-low-stock td) {
background-color: #fde2e2;
color: #c45656;
diff --git a/src/views/salesManagement/salesQuotation/index.vue b/src/views/salesManagement/salesQuotation/index.vue
index 5bd5cef..9718a11 100644
--- a/src/views/salesManagement/salesQuotation/index.vue
+++ b/src/views/salesManagement/salesQuotation/index.vue
@@ -56,13 +56,6 @@
<el-table-column prop="salesperson" label="涓氬姟鍛�" width="100" />
<el-table-column prop="quotationDate" label="鎶ヤ环鏃ユ湡" width="120" />
<el-table-column prop="validDate" label="鏈夋晥鏈熻嚦" width="120" />
- <el-table-column prop="status" label="瀹℃壒鐘舵��" width="120" align="center">
- <template #default="{ row }">
- <el-tag :type="getStatusType(row.status)" disable-transitions>
- {{ row.status || '--' }}
- </el-tag>
- </template>
- </el-table-column>
<el-table-column prop="totalAmount" label="鎶ヤ环閲戦" width="120">
<template #default="scope">
楼{{ scope.row.totalAmount.toFixed(2) }}
@@ -71,7 +64,7 @@
<el-table-column label="鎿嶄綔" width="200" fixed="right" align="center">
<template #default="scope">
<el-button link type="primary" @click="handleView(scope.row)">鏌ョ湅</el-button>
- <el-button link type="primary" @click="handleEdit(scope.row)" :disabled="!['寰呭鎵�','鎷掔粷'].includes(scope.row.status)">缂栬緫</el-button>
+ <el-button link type="primary" @click="handleEdit(scope.row)">缂栬緫</el-button>
<el-button link type="danger" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
@@ -149,69 +142,13 @@
</el-form-item>
</el-col>
</el-row>
- <el-row :gutter="24">
+ <!-- <el-row :gutter="24">
<el-col :span="12">
<el-form-item label="浠樻鏂瑰紡" prop="paymentMethod">
<el-input v-model="form.paymentMethod" placeholder="璇疯緭鍏ヤ粯娆炬柟寮�" clearable />
</el-form-item>
</el-col>
- </el-row>
- </div>
- </el-card>
-
- <!-- 瀹℃壒浜轰俊鎭� -->
- <el-card class="form-card" shadow="hover">
- <template #header>
- <div class="card-header-wrapper">
- <el-icon class="card-icon"><UserFilled /></el-icon>
- <span class="card-title">瀹℃壒浜洪�夋嫨</span>
- <el-button type="primary" size="small" @click="addApproverNode" class="header-btn">
- <el-icon><Plus /></el-icon>
- 鏂板鑺傜偣
- </el-button>
- </div>
- </template>
- <div class="form-content">
- <el-row>
- <el-col :span="24">
- <el-form-item>
- <div class="approver-nodes-container">
- <div
- v-for="(node, index) in approverNodes"
- :key="node.id"
- class="approver-node-item"
- >
- <div class="approver-node-label">
- <span class="node-step">{{ index + 1 }}</span>
- <span class="node-text">瀹℃壒浜�</span>
- <el-icon class="arrow-icon"><ArrowRight /></el-icon>
- </div>
- <el-select
- v-model="node.userId"
- placeholder="閫夋嫨浜哄憳"
- class="approver-select"
- clearable
- >
- <el-option
- v-for="user in userList"
- :key="user.userId"
- :label="user.nickName"
- :value="user.userId"
- />
- </el-select>
- <el-button
- type="danger"
- size="small"
- :icon="Delete"
- @click="removeApproverNode(index)"
- v-if="approverNodes.length > 1"
- class="remove-btn"
- >鍒犻櫎</el-button>
- </div>
- </div>
- </el-form-item>
- </el-col>
- </el-row>
+ </el-row> -->
</div>
</el-card>
@@ -356,7 +293,7 @@
<script setup>
import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete } from '@element-plus/icons-vue'
+import { Search, Document, Box, EditPen, Plus } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import FormDialog from '@/components/Dialog/FormDialog.vue'
import {getQuotationList,addQuotation,updateQuotation,deleteQuotation} from '@/api/salesManagement/salesQuotation.js'
@@ -429,26 +366,10 @@
const userList = ref([]);
const customerOption = ref([]);
-// 瀹℃壒浜鸿妭鐐圭浉鍏�
-const approverNodes = ref([
- { id: 1, userId: null }
-])
-let nextApproverId = 2
-
const isEdit = ref(false)
const editId = ref(null)
const currentQuotation = ref({})
const formRef = ref()
-
-// 娣诲姞瀹℃壒浜鸿妭鐐�
-function addApproverNode() {
- approverNodes.value.push({ id: nextApproverId++, userId: null })
-}
-
-// 鍒犻櫎瀹℃壒浜鸿妭鐐�
-function removeApproverNode(index) {
- approverNodes.value.splice(index, 1)
-}
// 璁＄畻灞炴��
const filteredList = computed(() => {
@@ -457,16 +378,6 @@
})
// 鏂规硶
-const getStatusType = (status) => {
- const statusMap = {
- '寰呭鎵�': 'info',
- '瀹℃牳涓�': 'primary',
- '閫氳繃': 'success',
- '鎷掔粷': 'danger'
- }
- return statusMap[status] || 'info'
-}
-
const resetSearch = () => {
searchForm.quotationNo = ''
searchForm.customer = ''
@@ -480,9 +391,6 @@
dialogTitle.value = '鏂板鎶ヤ环'
isEdit.value = false
resetForm()
- // 閲嶇疆瀹℃壒浜鸿妭鐐�
- approverNodes.value = [{ id: 1, userId: null }]
- nextApproverId = 2
dialogVisible.value = true
let userLists = await userListNoPage();
// 鍙鍒堕渶瑕佺殑瀛楁锛岄伩鍏嶅皢缁勪欢寮曠敤鏀惧叆鍝嶅簲寮忓璞�
@@ -684,19 +592,6 @@
form.discountAmount = row.discountAmount || 0
form.totalAmount = row.totalAmount || 0
- // 鍙嶆樉瀹℃壒浜�
- if (row.approveUserIds) {
- const userIds = row.approveUserIds.split(',')
- approverNodes.value = userIds.map((userId, idx) => ({
- id: idx + 1,
- userId: parseInt(userId.trim())
- }))
- nextApproverId = userIds.length + 1
- } else {
- approverNodes.value = [{ id: 1, userId: null }]
- nextApproverId = 2
- }
-
// 鍔犺浇鐢ㄦ埛鍒楄〃
let userLists = await userListNoPage();
userList.value = (userLists.data || []).map(item => ({
@@ -795,16 +690,6 @@
return
}
- // 瀹℃壒浜哄繀濉牎楠�
- const hasEmptyApprover = approverNodes.value.some(node => !node.userId)
- if (hasEmptyApprover) {
- ElMessage.error('璇蜂负鎵�鏈夊鎵硅妭鐐归�夋嫨瀹℃壒浜猴紒')
- return
- }
-
- // 鏀堕泦鎵�鏈夎妭鐐圭殑瀹℃壒浜篿d
- form.approveUserIds = approverNodes.value.map(node => node.userId).join(',')
-
// 璁＄畻鎵�鏈変骇鍝佺殑鍗曚环鎬诲拰
form.totalAmount = form.products.reduce((sum, product) => {
const price = Number(product.unitPrice) || 0
@@ -865,8 +750,6 @@
validDate: item.validDate || '',
paymentMethod: item.paymentMethod || '',
status: item.status || '鑽夌',
- // 瀹℃壒浜猴紙鐢ㄤ簬缂栬緫鏃跺弽鏄撅級
- approveUserIds: item.approveUserIds || '',
remark: item.remark || '',
products: item.products ? item.products.map(product => ({
productId: product.productId || '',
@@ -991,71 +874,6 @@
}
}
-.approver-nodes-container {
- display: flex;
- flex-wrap: wrap;
- gap: 24px;
- padding: 12px 0;
-}
-
-.approver-node-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 12px;
- padding: 16px;
- background: #f8f9fa;
- border-radius: 8px;
- border: 1px solid #e4e7ed;
- transition: all 0.3s ease;
- min-width: 180px;
-
- &:hover {
- border-color: #409eff;
- background: #f0f7ff;
- box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
- }
-}
-
-.approver-node-label {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 14px;
- color: #606266;
-
- .node-step {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- background: #409eff;
- color: #fff;
- border-radius: 50%;
- font-size: 12px;
- font-weight: 600;
- }
-
- .node-text {
- font-weight: 500;
- }
-
- .arrow-icon {
- color: #909399;
- font-size: 14px;
- }
-}
-
-.approver-select {
- width: 100%;
- min-width: 150px;
-}
-
-.remove-btn {
- margin-top: 4px;
-}
-
.product-table {
:deep(.el-table__header) {
background-color: #f5f7fa;
@@ -1082,14 +900,4 @@
text-align: right;
}
-// 鍝嶅簲寮忎紭鍖�
-@media (max-width: 1200px) {
- .approver-nodes-container {
- gap: 16px;
- }
-
- .approver-node-item {
- min-width: 160px;
- }
-}
</style>
--
Gitblit v1.9.3