From 551026f4e45d1355926a4c998f81842217ec1812 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 14 一月 2026 17:50:24 +0800
Subject: [PATCH] 进销存-升级 1.开票登记、来票登记改成绑定订单，不绑定开票 2.客户往来、供应商往来展示联调修改 3.修改销售报价逻辑 4.新增销售台账时可以选择已通过报价的模版 5.指标统计页面数据展示修改

---
 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue |   82 +++++
 src/views/salesManagement/indicatorStats/index.vue                         |   47 +--
 src/views/salesManagement/receiptPaymentLedger/index.vue                   |   20 
 src/views/collaborativeApproval/approvalProcess/index.vue                  |    9 
 src/views/salesManagement/salesLedger/index.vue                            |  195 ++++++++++++
 src/views/salesManagement/salesQuotation/index.vue                         |  545 ++++++++++++++++++++++++++++-------
 6 files changed, 735 insertions(+), 163 deletions(-)

diff --git a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
index 9ff205f..42aebd1 100644
--- a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
+++ b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
@@ -32,7 +32,7 @@
 						</el-form-item>
 					</el-col>
 				</el-row>
-				<el-row>
+				<el-row v-if="!isQuotationApproval">
 					<el-col :span="24">
 						<el-form-item label="瀹℃壒浜嬬敱锛�" prop="approveReason">
 							<el-input v-model="form.approveReason" placeholder="璇疯緭鍏�" clearable type="textarea" disabled/>
@@ -73,6 +73,54 @@
 					</el-col>
 				</el-row>
 			</el-form>
+
+      <!-- 鎶ヤ环瀹℃壒锛氬睍绀烘姤浠疯鎯咃紙澶嶇敤閿�鍞姤浠封�滄煡鐪嬭鎯呭璇濇鈥濆唴瀹圭粨鏋勶級 -->
+      <div v-if="isQuotationApproval" style="margin: 10px 0 18px;">
+        <el-divider content-position="left">鎶ヤ环璇︽儏</el-divider>
+        <el-skeleton :loading="quotationLoading" animated>
+          <template #template>
+            <el-skeleton-item variant="h3" style="width: 30%" />
+            <el-skeleton-item variant="text" style="width: 100%" />
+            <el-skeleton-item variant="text" style="width: 100%" />
+          </template>
+          <template #default>
+            <el-empty v-if="!currentQuotation || !currentQuotation.quotationNo" description="鏈煡璇㈠埌瀵瑰簲鎶ヤ环璇︽儏" />
+            <template v-else>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="鎶ヤ环鍗曞彿">{{ currentQuotation.quotationNo }}</el-descriptions-item>
+                <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ currentQuotation.customer }}</el-descriptions-item>
+                <el-descriptions-item label="涓氬姟鍛�">{{ currentQuotation.salesperson }}</el-descriptions-item>
+                <el-descriptions-item label="鎶ヤ环鏃ユ湡">{{ currentQuotation.quotationDate }}</el-descriptions-item>
+                <el-descriptions-item label="鏈夋晥鏈熻嚦">{{ currentQuotation.validDate }}</el-descriptions-item>
+                <el-descriptions-item label="浠樻鏂瑰紡">{{ currentQuotation.paymentMethod }}</el-descriptions-item>
+                <el-descriptions-item label="鎶ヤ环鎬婚" :span="2">
+                  <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">
+                    楼{{ Number(currentQuotation.totalAmount ?? 0).toFixed(2) }}
+                  </span>
+                </el-descriptions-item>
+              </el-descriptions>
+
+              <div style="margin-top: 20px;">
+                <h4>浜у搧鏄庣粏</h4>
+                <el-table :data="currentQuotation.products || []" border style="width: 100%">
+                  <el-table-column prop="product" label="浜у搧鍚嶇О" />
+                  <el-table-column prop="specification" label="瑙勬牸鍨嬪彿" />
+                  <el-table-column prop="unit" label="鍗曚綅" />
+                  <el-table-column prop="unitPrice" label="鍗曚环">
+                    <template #default="scope">楼{{ Number(scope.row.unitPrice ?? 0).toFixed(2) }}</template>
+                  </el-table-column>
+                </el-table>
+              </div>
+
+              <div v-if="currentQuotation.remark" style="margin-top: 20px;">
+                <h4>澶囨敞</h4>
+                <p>{{ currentQuotation.remark }}</p>
+              </div>
+            </template>
+          </template>
+        </el-skeleton>
+      </div>
+
       <el-form :model="{ activities }" ref="formRef" label-position="top">
         <el-steps :active="getActiveStep()" finish-status="success" process-status="process" align-center direction="vertical">
           <el-step
@@ -130,7 +178,7 @@
 </template>
 
 <script setup>
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
+import { computed, getCurrentInstance, reactive, ref, toRefs } from "vue";
 import {
 	approveProcessDetails,
 	getDept,
@@ -139,8 +187,16 @@
 import useUserStore from "@/store/modules/user.js";
 import {userListNoPageByTenantId} from "@/api/system/user.js";
 import { WarningFilled, Edit, Check, MoreFilled } from '@element-plus/icons-vue'
+import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
 const emit = defineEmits(['close'])
 const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  approveType: {
+    type: [Number, String],
+    default: 0
+  }
+})
 
 const dialogFormVisible = ref(false);
 const operationType = ref('')
@@ -149,6 +205,10 @@
 const userStore = useUserStore()
 const productOptions = ref([]);
 const userList = ref([])
+const quotationLoading = ref(false)
+const currentQuotation = ref({})
+const isQuotationApproval = computed(() => Number(props.approveType) === 6)
+
 const data = reactive({
 	form: {
 		approveTime: "",
@@ -186,11 +246,27 @@
 const openDialog = (type, row) => {
   operationType.value = type;
   dialogFormVisible.value = true;
+  currentQuotation.value = {}
 	userListNoPageByTenantId().then((res) => {
 		userList.value = res.data;
 	});
 	form.value = {...row}
 	getProductOptions()
+
+  // 鎶ヤ环瀹℃壒锛氱敤瀹℃壒浜嬬敱瀛楁鎵胯浇鐨勨�滄姤浠峰崟鍙封�濆幓鏌ユ姤浠峰垪琛�
+  if (isQuotationApproval.value) {
+    const quotationNo = row?.approveReason;
+    if (quotationNo) {
+      quotationLoading.value = true
+      getQuotationList({ quotationNo }).then((res) => {
+        const records = res?.data?.records || []
+        currentQuotation.value = records[0] || {}
+      }).finally(() => {
+        quotationLoading.value = false
+      })
+    }
+  }
+
   approveProcessDetails(row.approveId).then((res) => {
     activities.value = res.data
     // 澧炲姞isApproval瀛楁
@@ -230,6 +306,8 @@
 const closeDia = () => {
   proxy.resetForm("formRef");
   dialogFormVisible.value = false;
+  quotationLoading.value = false
+  currentQuotation.value = {}
   emit('close')
 };
 defineExpose({
diff --git a/src/views/collaborativeApproval/approvalProcess/index.vue b/src/views/collaborativeApproval/approvalProcess/index.vue
index 8c84b27..5ce951d 100644
--- a/src/views/collaborativeApproval/approvalProcess/index.vue
+++ b/src/views/collaborativeApproval/approvalProcess/index.vue
@@ -35,7 +35,7 @@
         >
       </div>
       <div>
-        <el-button type="primary" @click="openForm('add')">鏂板</el-button>
+        <el-button type="primary" @click="openForm('add')" v-if="currentApproveType !== 6">鏂板</el-button>
         <el-button @click="handleOut">瀵煎嚭</el-button>
         <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
       </div>
@@ -54,7 +54,7 @@
       ></PIMTable>
     </div>
     <info-form-dia ref="infoFormDia" @close="handleQuery" :approveType="currentApproveType"></info-form-dia>
-    <approval-dia ref="approvalDia" @close="handleQuery"></approval-dia>
+    <approval-dia ref="approvalDia" @close="handleQuery" :approveType="currentApproveType"></approval-dia>
     <FileList ref="fileListRef" />
   </div>
 </template>
@@ -103,6 +103,7 @@
 const tableColumnCopy = computed(() => {
   const isLeaveType = currentApproveType.value === 2; // 璇峰亣绠＄悊
   const isReimburseType = currentApproveType.value === 4; // 鎶ラ攢绠＄悊
+  const isQuotationType = currentApproveType.value === 6; // 鎶ヤ环瀹℃壒
   
   // 鍩虹鍒楅厤缃�
   const baseColumns = [
@@ -149,7 +150,7 @@
       width: 220
     },
     {
-      label: "瀹℃壒浜嬬敱",
+      label: isQuotationType ? "鎶ヤ环鍗曞彿" : "瀹℃壒浜嬬敱",
       prop: "approveReason",
       width: 200
     },
@@ -204,7 +205,7 @@
         clickFun: (row) => {
           openForm("edit", row);
         },
-        disabled: (row) => row.approveStatus == 2 || row.approveStatus == 1 || row.approveStatus == 4
+        disabled: (row) => currentApproveType.value === 6 || row.approveStatus == 2 || row.approveStatus == 1 || row.approveStatus == 4
       },
       {
         name: "瀹℃牳",
diff --git a/src/views/salesManagement/indicatorStats/index.vue b/src/views/salesManagement/indicatorStats/index.vue
index 617ef6f..7bd609e 100644
--- a/src/views/salesManagement/indicatorStats/index.vue
+++ b/src/views/salesManagement/indicatorStats/index.vue
@@ -3,7 +3,7 @@
     <el-card class="box-card">
       <!-- KPI 姹囨�� -->
       <el-row :gutter="20" class="stats-row">
-        <el-col :span="6">
+        <el-col :span="8">
           <div class="stat-card">
             <div class="stat-icon" style="background: #ecf5ff;">
               <el-icon :size="30" color="#409eff"><Document /></el-icon>
@@ -14,7 +14,7 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <div class="stat-card">
             <div class="stat-icon" style="background: #f0f9ff;">
               <el-icon :size="30" color="#67c23a"><Tickets /></el-icon>
@@ -25,7 +25,7 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <div class="stat-card">
             <div class="stat-icon" style="background: #fef0f0;">
               <el-icon :size="30" color="#e6a23c"><Van /></el-icon>
@@ -33,17 +33,6 @@
             <div class="stat-content">
               <div class="stat-value">{{ indicatorKpis.shipmentRate }}%</div>
               <div class="stat-label">鍙戣揣鐜�</div>
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-card">
-            <div class="stat-icon" style="background: #f4f4f5;">
-              <el-icon :size="30" color="#f56c6c"><Wallet /></el-icon>
-            </div>
-            <div class="stat-content">
-              <div class="stat-value">{{ indicatorKpis.collectionRate }}%</div>
-              <div class="stat-label">鍥炴鐜�</div>
             </div>
           </div>
         </el-col>
@@ -93,7 +82,7 @@
       </div>
 
       <!-- 涓氱哗缁熻锛堝洟闃熺淮搴︼紝鏃犱釜浜哄鍚嶏級 -->
-      <el-table :data="teamPerformanceList" border stripe style="margin-top: 20px;">
+      <el-table v-if="showTeamPerformance" :data="teamPerformanceList" border stripe style="margin-top: 20px;">
         <el-table-column prop="team" label="閿�鍞洟闃�"/>
         <el-table-column prop="orderCount" label="璁㈠崟鏁�"/>
         <el-table-column prop="salesAmount" label="閿�鍞">
@@ -101,9 +90,6 @@
         </el-table-column>
         <el-table-column prop="shipmentRate" label="鍙戣揣鐜�">
           <template #default="scope">{{ scope.row.shipmentRate }}%</template>
-        </el-table-column>
-        <el-table-column prop="collectionRate" label="鍥炴鐜�">
-          <template #default="scope">{{ scope.row.collectionRate }}%</template>
         </el-table-column>
         <el-table-column prop="attainment" label="鐩爣杈炬垚鐜�">
           <template #default="scope">
@@ -119,15 +105,17 @@
 
 <script setup>
 import { ref, reactive, onMounted, nextTick } from 'vue'
-import { Document, Van, Tickets, Wallet } from '@element-plus/icons-vue'
+import { Document, Van, Tickets } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 
 const indicatorKpis = reactive({
   orderCount: 1280,
   salesAmount: 9650000,
-  shipmentRate: 89.2,
-  collectionRate: 76.4
+  shipmentRate: 89.2
 })
+
+// 鏄惁灞曠ず閿�鍞洟闃熸槑缁嗚〃锛屾寜闇�寮�鍚�
+const showTeamPerformance = ref(false)
 
 const indicatorFilter = reactive({
   product: '',
@@ -140,10 +128,10 @@
 let indicatorChart = null
 
 const teamPerformanceList = ref([
-  { team: '鍗庝笢澶у尯', orderCount: 320, salesAmount: 2850000, shipmentRate: 90, collectionRate: 80, attainment: 105 },
-  { team: '鍗庡寳澶у尯', orderCount: 280, salesAmount: 2150000, shipmentRate: 86, collectionRate: 73, attainment: 92 },
-  { team: '鍗庡崡澶у尯', orderCount: 210, salesAmount: 1850000, shipmentRate: 88, collectionRate: 70, attainment: 78 },
-  { team: '瑗垮崡澶у尯', orderCount: 180, salesAmount: 1500000, shipmentRate: 83, collectionRate: 68, attainment: 74 }
+  { team: '鍗庝笢澶у尯', orderCount: 320, salesAmount: 2850000, shipmentRate: 90, attainment: 105 },
+  { team: '鍗庡寳澶у尯', orderCount: 280, salesAmount: 2150000, shipmentRate: 86, attainment: 92 },
+  { team: '鍗庡崡澶у尯', orderCount: 210, salesAmount: 1850000, shipmentRate: 88, attainment: 78 },
+  { team: '瑗垮崡澶у尯', orderCount: 180, salesAmount: 1500000, shipmentRate: 83, attainment: 74 }
 ])
 
 const initIndicatorChart = () => {
@@ -153,7 +141,7 @@
   const option = {
     title: { text: '澶氱淮搴﹂攢鍞寚鏍囪秼鍔�', left: 'center' },
     tooltip: { trigger: 'axis' },
-    legend: { data: ['璁㈠崟鏁�', '閿�鍞', '鍙戣揣鐜�', '鍥炴鐜�'], top: 30 },
+    legend: { data: ['璁㈠崟鏁�', '閿�鍞', '鍙戣揣鐜�'], top: 30 },
     grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
     xAxis: { type: 'category', data: ['2024-12', '2025-01', '2025-02', '2025-03', '2025-04', '2025-05'] },
     yAxis: [
@@ -163,8 +151,7 @@
     series: [
       { name: '璁㈠崟鏁�', type: 'bar', data: [180, 220, 210, 260, 205, 225], itemStyle: { color: '#409eff' } },
       { name: '閿�鍞', type: 'bar', data: [820, 950, 910, 1080, 980, 1020], itemStyle: { color: '#67c23a' } },
-      { name: '鍙戣揣鐜�', type: 'line', yAxisIndex: 1, data: [86, 89, 88, 91, 87, 90], itemStyle: { color: '#e6a23c' } },
-      { name: '鍥炴鐜�', type: 'line', yAxisIndex: 1, data: [72, 76, 74, 79, 75, 78], itemStyle: { color: '#f56c6c' } }
+      { name: '鍙戣揣鐜�', type: 'line', yAxisIndex: 1, data: [86, 89, 88, 91, 87, 90], itemStyle: { color: '#e6a23c' } }
     ]
   }
   indicatorChart.setOption(option)
@@ -178,7 +165,6 @@
   indicatorKpis.orderCount = random(1280, 120)
   indicatorKpis.salesAmount = random(9650000, 350000)
   indicatorKpis.shipmentRate = (85 + Math.random() * 10).toFixed(1) * 1
-  indicatorKpis.collectionRate = (70 + Math.random() * 12).toFixed(1) * 1
   setTimeout(() => initIndicatorChart(), 200)
 }
 
@@ -191,13 +177,12 @@
 }
 
 const exportIndicatorTable = () => {
-  const header = ['閿�鍞洟闃�', '璁㈠崟鏁�', '閿�鍞', '鍙戣揣鐜�(%)', '鍥炴鐜�(%)', '鐩爣杈炬垚鐜�(%)']
+  const header = ['閿�鍞洟闃�', '璁㈠崟鏁�', '閿�鍞', '鍙戣揣鐜�(%)', '鐩爣杈炬垚鐜�(%)']
   const rows = teamPerformanceList.value.map(r => [
     r.team,
     r.orderCount,
     r.salesAmount,
     r.shipmentRate,
-    r.collectionRate,
     r.attainment
   ])
   const csv = [header, ...rows].map(r => r.join(',')).join('\n')
diff --git a/src/views/salesManagement/receiptPaymentLedger/index.vue b/src/views/salesManagement/receiptPaymentLedger/index.vue
index 2cec625..31bee75 100644
--- a/src/views/salesManagement/receiptPaymentLedger/index.vue
+++ b/src/views/salesManagement/receiptPaymentLedger/index.vue
@@ -41,7 +41,7 @@
 						width="200"
           />
           <el-table-column
-            label="寮�绁ㄩ噾棰�(鍏�)"
+            label="鍚堝悓閲戦(鍏�)"
             prop="invoiceTotal"
             show-overflow-tooltip
             :formatter="formattedNumber"
@@ -93,33 +93,39 @@
           />
           <el-table-column
             label="鍙戠敓鏃ユ湡"
-            prop="happenTime"
+            prop="receiptPaymentDate"
             show-overflow-tooltip
 						width="110"
           />
           <el-table-column
-            label="寮�绁ㄩ噾棰�(鍏�)"
-            prop="invoiceAmount"
+            label="閿�鍞悎鍚屽彿"
+            prop="salesContractNo"
+            show-overflow-tooltip
+						width="200"
+          />
+          <el-table-column
+            label="鍚堝悓閲戦(鍏�)"
+            prop="invoiceTotal"
             show-overflow-tooltip
             :formatter="formattedNumber"
 						width="200"
           />
           <el-table-column
             label="鍥炴閲戦(鍏�)"
-            prop="receiptAmount"
+            prop="receiptPaymentAmount"
             show-overflow-tooltip
             :formatter="formattedNumber"
 						width="200"
           />
           <el-table-column
             label="搴旀敹閲戦(鍏�)"
-            prop="unReceiptAmount"
+            prop="unReceiptPaymentAmount"
             show-overflow-tooltip
 						width="200"
           >
             <template #default="{ row, column }">
               <el-text type="danger">
-                {{ formattedNumber(row, column, row.unReceiptAmount) }}
+                {{ formattedNumber(row, column, row.unReceiptPaymentAmount) }}
               </el-text>
             </template>
           </el-table-column>
diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue
index 6fa5859..6fe7057 100644
--- a/src/views/salesManagement/salesLedger/index.vue
+++ b/src/views/salesManagement/salesLedger/index.vue
@@ -98,6 +98,11 @@
       @confirm="submitForm"
       @cancel="closeDia">
       <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
+        <el-row v-if="operationType !== 'view'">
+          <el-col :span="24" style="display:flex; justify-content:flex-end; gap:10px; margin-bottom: 6px;">
+            <el-button type="primary" plain @click="openQuotationDialog">浠庡鎵归�氳繃鐨勬姤浠峰崟瀵煎叆</el-button>
+          </el-col>
+        </el-row>
         <el-row :gutter="30">
           <el-col :span="12">
             <el-form-item label="閿�鍞悎鍚屽彿锛�" prop="salesContractNo">
@@ -203,6 +208,62 @@
         </el-row>
       </el-form>
     </FormDialog>
+
+    <!-- 浠庢姤浠峰崟瀵煎叆锛堜粎瀹℃壒閫氳繃锛� -->
+    <el-dialog
+      v-model="quotationDialogVisible"
+      title="閫夋嫨瀹℃壒閫氳繃鐨勯攢鍞姤浠峰崟"
+      width="80%"
+      :close-on-click-modal="false"
+    >
+      <div style="margin-bottom: 12px; display:flex; gap: 12px; align-items:center;">
+        <el-input
+          v-model="quotationSearchForm.quotationNo"
+          placeholder="璇疯緭鍏ユ姤浠峰崟鍙�"
+          clearable
+          style="max-width: 260px;"
+          @change="fetchQuotationList"
+        />
+        <el-input
+          v-model="quotationSearchForm.customer"
+          placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+          clearable
+          style="max-width: 260px;"
+          @change="fetchQuotationList"
+        />
+        <el-button type="primary" @click="fetchQuotationList">鎼滅储</el-button>
+        <el-button @click="resetQuotationSearch">閲嶇疆</el-button>
+      </div>
+
+      <el-table
+        :data="quotationList"
+        border
+        stripe
+        v-loading="quotationLoading"
+        height="420px"
+      >
+        <el-table-column align="center" label="搴忓彿" type="index" width="60" />
+        <el-table-column prop="quotationNo" label="鎶ヤ环鍗曞彿" width="180" show-overflow-tooltip />
+        <el-table-column prop="customer" label="瀹㈡埛鍚嶇О" min-width="220" show-overflow-tooltip />
+        <el-table-column prop="salesperson" label="涓氬姟鍛�" width="120" show-overflow-tooltip />
+        <el-table-column prop="quotationDate" label="鎶ヤ环鏃ユ湡" width="140" />
+        <el-table-column prop="status" label="瀹℃壒鐘舵��" width="120" align="center" />
+        <el-table-column prop="totalAmount" label="鎶ヤ环閲戦(鍏�)" width="160" align="right">
+          <template #default="scope">
+            {{ Number(scope.row.totalAmount ?? 0).toFixed(2) }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="鎿嶄綔" width="120" align="center">
+          <template #default="scope">
+            <el-button type="primary" link @click="applyQuotation(scope.row)">閫夋嫨</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <el-button @click="quotationDialogVisible = false">鍏抽棴</el-button>
+      </template>
+    </el-dialog>
     <FormDialog 
       v-model="productFormVisible" 
       :title="productOperationType === 'add' ? '鏂板浜у搧' : '缂栬緫浜у搧'" 
@@ -461,6 +522,7 @@
 import { userListNoPage } from "@/api/system/user.js";
 import FileListDialog from '@/components/Dialog/FileListDialog.vue';
 import FormDialog from '@/components/Dialog/FormDialog.vue';
+import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
 import {
 	ledgerListPage,
 	productList,
@@ -576,6 +638,16 @@
 const printPreviewVisible = ref(false);
 const printData = ref([]);
 
+// 鎶ヤ环鍗曞鍏ョ浉鍏�
+const quotationDialogVisible = ref(false);
+const quotationLoading = ref(false);
+const quotationList = ref([]);
+const quotationSearchForm = reactive({
+  quotationNo: "",
+  customer: "",
+});
+const selectedQuotation = ref(null);
+
 // 鍙戣揣鐩稿叧
 const deliveryFormVisible = ref(false);
 const currentDeliveryRow = ref(null);
@@ -644,8 +716,10 @@
 };
 // 鑾峰彇浜у搧澶х被tree鏁版嵁
 const getProductOptions = () => {
-  productTreeList().then((res) => {
+  // 杩斿洖 Promise锛屼究浜庡湪缂栬緫浜у搧鏃剁瓑寰呭姞杞藉畬鎴�
+  return productTreeList().then((res) => {
     productOptions.value = convertIdToValue(res);
+    return productOptions.value;
   });
 };
 const formattedNumber = (row, column, cellValue) => {
@@ -695,6 +769,19 @@
 
     return newItem;
   });
+}
+// 鏍规嵁鍚嶇О鍙嶆煡浜у搧澶х被 id锛屼究浜庝粎瀛樺悕绉版椂鐨勫弽鏄�
+function findNodeIdByLabel(nodes, label) {
+  if (!label) return null;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.label === label) return node.value;
+    if (node.children && node.children.length > 0) {
+      const found = findNodeIdByLabel(node.children, label);
+      if (found !== null && found !== undefined) return found;
+    }
+  }
+  return null;
 }
 // 琛ㄦ牸閫夋嫨鏁版嵁
 const handleSelectionChange = (selection) => {
@@ -746,6 +833,7 @@
   operationType.value = type;
   form.value = {};
   productData.value = [];
+  selectedQuotation.value = null;
   let userLists = await userListNoPage();
   userList.value = userLists.data;
   customerList().then((res) => {
@@ -774,6 +862,87 @@
   // });
   form.value.entryDate = getCurrentDate(); // 璁剧疆榛樿褰曞叆鏃ユ湡涓哄綋鍓嶆棩鏈�
   dialogFormVisible.value = true;
+};
+
+// 鎵撳紑鎶ヤ环鍗曢�夋嫨寮圭獥锛堜粎瀹℃壒閫氳繃锛�
+const openQuotationDialog = async () => {
+  if (operationType.value === "view") return;
+  quotationDialogVisible.value = true;
+  // 鍏堢‘淇濆鎴峰垪琛ㄥ凡鍔犺浇锛屼究浜庡悗缁洖濉� customerId
+  if (!customerOption.value || customerOption.value.length === 0) {
+    try {
+      const res = await customerList();
+      customerOption.value = res;
+    } catch (e) {
+      // ignore锛屽厑璁哥敤鎴峰悗缁墜鍔ㄩ�夋嫨瀹㈡埛
+    }
+  }
+  await fetchQuotationList();
+};
+
+const fetchQuotationList = async () => {
+  quotationLoading.value = true;
+  try {
+    const params = {
+      // 鍏煎鍚庣鍒嗛〉瀛楁锛氳繖閲屾部鐢ㄦ姤浠烽〉闈㈠凡鏈夊彲鐢ㄧ殑瀛楁鍛藉悕
+      currentPage: 1,
+      pageSize: 100,
+      ...quotationSearchForm,
+      status: "閫氳繃",
+    };
+    const res = await getQuotationList(params);
+    quotationList.value = res?.data?.records || [];
+  } finally {
+    quotationLoading.value = false;
+  }
+};
+
+const resetQuotationSearch = async () => {
+  quotationSearchForm.quotationNo = "";
+  quotationSearchForm.customer = "";
+  await fetchQuotationList();
+};
+
+// 閫変腑鎶ヤ环鍗曞悗鍥炲～鍒板彴璐﹁〃鍗�
+const applyQuotation = (row) => {
+  if (!row) return;
+  selectedQuotation.value = row;
+
+  // 涓氬姟鍛�
+  form.value.salesman = row.salesperson || "";
+
+  // 瀹㈡埛鍚嶇О -> customerId
+  const customer = (customerOption.value || []).find((c) => c.customerName === row.customer);
+  if (customer?.id) {
+    form.value.customerId = customer.id;
+  } else {
+    // 濡傛灉鎵句笉鍒帮紝淇濈暀鍘熷�硷紙鍏佽鐢ㄦ埛鎵嬪姩閫夋嫨/涓嶆墦鏂凡鏈夎緭鍏ワ級
+    form.value.customerId = form.value.customerId || "";
+  }
+
+  // 浜у搧淇℃伅鏄犲皠锛氭姤浠� products -> 鍙拌处 productData
+  const products = Array.isArray(row.products) ? row.products : [];
+  productData.value = products.map((p) => {
+    const quantity = Number(p.quantity ?? 0) || 0;
+    const unitPrice = Number(p.unitPrice ?? 0) || 0;
+    const taxRate = "13"; // 榛樿 13%锛屼究浜庣洿鎺ユ彁浜わ紙濡傞渶鍙湪浜у搧涓嚜琛屼慨鏀癸級
+    const taxInclusiveTotalPrice = (unitPrice * quantity).toFixed(2);
+    const taxExclusiveTotalPrice = proxy.calculateTaxExclusiveTotalPrice(taxInclusiveTotalPrice, taxRate);
+    return {
+      // 鍙拌处瀛楁
+      productCategory: p.product || p.productName || "",
+      specificationModel: p.specification || "",
+      unit: p.unit || "",
+      quantity: quantity,
+      taxRate: taxRate,
+      taxInclusiveUnitPrice: unitPrice.toFixed(2),
+      taxInclusiveTotalPrice: taxInclusiveTotalPrice,
+      taxExclusiveTotalPrice: taxExclusiveTotalPrice,
+      invoiceType: "澧炴櫘绁�",
+    };
+  });
+
+  quotationDialogVisible.value = false;
 };
 function changs(val) {
   console.log(val);
@@ -847,16 +1016,36 @@
 
 const productIndex = ref(0);
 // 鎵撳紑浜у搧寮规
-const openProductForm = (type, row,index) => {
+const openProductForm = async (type, row, index) => {
   productOperationType.value = type;
   productForm.value = {};
   proxy.resetForm("productFormRef");
   if (type === "edit") {
     productForm.value = { ...row };
     productIndex.value = index;
+    // 缂栬緫鏃舵牴鎹骇鍝佸ぇ绫诲悕绉板弽鏌� tree 鑺傜偣 id锛屽苟鍔犺浇瑙勬牸鍨嬪彿鍒楄〃
+    try {
+      const options = productOptions.value && productOptions.value.length > 0
+        ? productOptions.value
+        : await getProductOptions();
+      const categoryId = findNodeIdByLabel(options, productForm.value.productCategory);
+      if (categoryId) {
+        const models = await modelList({ id: categoryId });
+        modelOptions.value = models || [];
+        // 鏍规嵁褰撳墠瑙勬牸鍨嬪彿鍚嶇О鍙嶆煡骞惰缃� productModelId锛屼究浜庝笅鎷夋鏄剧ず宸查�夊��
+        const currentModel = (modelOptions.value || []).find(
+          (m) => m.model === productForm.value.specificationModel
+        );
+        if (currentModel) {
+          productForm.value.productModelId = currentModel.id;
+        }
+      }
+    } catch (e) {
+      // 鍔犺浇澶辫触鏃朵繚鎸佸彲缂栬緫锛屼笉涓柇寮圭獥
+      console.error("鍔犺浇浜у搧瑙勬牸鍨嬪彿澶辫触", e);
+    }
   }
   productFormVisible.value = true;
-  getProductOptions();
 };
 // 鎻愪氦浜у搧琛ㄥ崟
 const submitProduct = () => {
diff --git a/src/views/salesManagement/salesQuotation/index.vue b/src/views/salesManagement/salesQuotation/index.vue
index 0296517..cbbc4f8 100644
--- a/src/views/salesManagement/salesQuotation/index.vue
+++ b/src/views/salesManagement/salesQuotation/index.vue
@@ -56,16 +56,23 @@
         <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) }}
           </template>
         </el-table-column>
-        <el-table-column label="鎿嶄綔" width="250" fixed="right" align="center">
+        <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)" v-if="scope.row.status === '鑽夌'">缂栬緫</el-button>
-            <el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.status === '鑽夌'">鍒犻櫎</el-button>
+            <el-button link type="primary" @click="handleEdit(scope.row)" :disabled="!['寰呭鎵�','鎷掔粷'].includes(scope.row.status)">缂栬緫</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -81,82 +88,147 @@
     </el-card>
 
     <!-- 鏂板/缂栬緫瀵硅瘽妗� -->
-    <FormDialog v-model="dialogVisible" :title="dialogTitle" width="80%" :close-on-click-modal="false" @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false">
-      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+    <FormDialog v-model="dialogVisible" :title="dialogTitle" width="85%" :close-on-click-modal="false" @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false">
+      <div class="quotation-form-container">
+        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="quotation-form">
         <!-- 鍩烘湰淇℃伅 -->
-        <el-card class="form-card" shadow="never">
+        <el-card class="form-card" shadow="hover">
           <template #header>
-            <span class="card-title">鍩烘湰淇℃伅</span>
+            <div class="card-header-wrapper">
+              <el-icon class="card-icon"><Document /></el-icon>
+              <span class="card-title">鍩烘湰淇℃伅</span>
+            </div>
           </template>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="瀹㈡埛鍚嶇О" prop="customer">
-                <el-select v-model="form.customer" placeholder="璇烽�夋嫨瀹㈡埛" style="width: 100%" @change="handleCustomerChange">
-									<el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
-										{{
-											item.customerName + "鈥斺��" + item.taxpayerIdentificationNumber
-										}}
-									</el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="涓氬姟鍛�" prop="salesperson">
-                <el-select v-model="form.salesperson" placeholder="璇烽�夋嫨涓氬姟鍛�" style="width: 100%">
-									<el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
-														 :value="item.nickName" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="鎶ヤ环鏃ユ湡" prop="quotationDate">
-                <el-date-picker
-                  v-model="form.quotationDate"
-                  type="date"
-                  placeholder="閫夋嫨鎶ヤ环鏃ユ湡"
-                  style="width: 100%"
-                  format="YYYY-MM-DD"
-                  value-format="YYYY-MM-DD"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="鏈夋晥鏈熻嚦" prop="validDate">
-                <el-date-picker
-                  v-model="form.validDate"
-                  type="date"
-                  placeholder="閫夋嫨鏈夋晥鏈�"
-                  style="width: 100%"
-                  format="YYYY-MM-DD"
-                  value-format="YYYY-MM-DD"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="浠樻鏂瑰紡" prop="paymentMethod">
-                <el-select v-model="form.paymentMethod" placeholder="璇烽�夋嫨浠樻鏂瑰紡" style="width: 100%">
-                  <el-option label="鍏ㄦ鍒颁粯" value="鍏ㄦ鍒颁粯"></el-option>
-                  <el-option label="鍒嗘湡浠樻" value="鍒嗘湡浠樻"></el-option>
-                  <el-option label="鏈堢粨" value="鏈堢粨"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <div class="form-content">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="瀹㈡埛鍚嶇О" prop="customer">
+                  <el-select v-model="form.customer" placeholder="璇烽�夋嫨瀹㈡埛" style="width: 100%" @change="handleCustomerChange" clearable>
+                    <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
+                      {{
+                        item.customerName + "鈥斺��" + item.taxpayerIdentificationNumber
+                      }}
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="涓氬姟鍛�" prop="salesperson">
+                  <el-select v-model="form.salesperson" placeholder="璇烽�夋嫨涓氬姟鍛�" style="width: 100%" clearable>
+                    <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
+                      :value="item.nickName" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="鎶ヤ环鏃ユ湡" prop="quotationDate">
+                  <el-date-picker
+                    v-model="form.quotationDate"
+                    type="date"
+                    placeholder="閫夋嫨鎶ヤ环鏃ユ湡"
+                    style="width: 100%"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鏈夋晥鏈熻嚦" prop="validDate">
+                  <el-date-picker
+                    v-model="form.validDate"
+                    type="date"
+                    placeholder="閫夋嫨鏈夋晥鏈�"
+                    style="width: 100%"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <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>
+          </div>
         </el-card>
 
         <!-- 浜у搧淇℃伅 -->
-        <el-card class="form-card" shadow="never">
+        <el-card class="form-card" shadow="hover">
           <template #header>
-            <div class="card-header">
+            <div class="card-header-wrapper">
+              <el-icon class="card-icon"><Box /></el-icon>
               <span class="card-title">浜у搧淇℃伅</span>
-              <el-button type="primary" size="small" @click="addProduct">娣诲姞浜у搧</el-button>
+              <el-button type="primary" size="small" @click="addProduct" class="header-btn">
+                <el-icon><Plus /></el-icon>
+                娣诲姞浜у搧
+              </el-button>
             </div>
           </template>
-          <el-table :data="form.products" border style="width: 100%">
+          <div class="form-content">
+            <el-table :data="form.products" border style="width: 100%" class="product-table" v-if="form.products.length > 0">
             <el-table-column prop="product" label="浜у搧鍚嶇О" width="200">
               <template #default="scope">
 								<el-tree-select
@@ -204,18 +276,33 @@
               </template>
             </el-table-column>
           </el-table>
+          <el-empty v-else description="鏆傛棤浜у搧锛岃鐐瑰嚮娣诲姞浜у搧" :image-size="80" />
+          </div>
         </el-card>
 
         <!-- 澶囨敞淇℃伅 -->
-        <el-card class="form-card" shadow="never">
+        <el-card class="form-card" shadow="hover">
           <template #header>
-            <span class="card-title">澶囨敞淇℃伅</span>
+            <div class="card-header-wrapper">
+              <el-icon class="card-icon"><EditPen /></el-icon>
+              <span class="card-title">澶囨敞淇℃伅</span>
+            </div>
           </template>
-          <el-form-item label="澶囨敞" prop="remark">
-            <el-input type="textarea" v-model="form.remark" placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�" rows="3"></el-input>
-          </el-form-item>
+          <div class="form-content">
+            <el-form-item label="澶囨敞" prop="remark">
+              <el-input 
+                type="textarea" 
+                v-model="form.remark" 
+                placeholder="璇疯緭鍏ュ娉ㄤ俊鎭紙閫夊～锛�" 
+                :rows="4"
+                maxlength="500"
+                show-word-limit
+              ></el-input>
+            </el-form-item>
+          </div>
         </el-card>
       </el-form>
+      </div>
     </FormDialog>
 
     <!-- 鏌ョ湅璇︽儏瀵硅瘽妗� -->
@@ -260,7 +347,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
+import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete } 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'
@@ -311,15 +398,31 @@
   salesperson: [{ required: true, message: '璇烽�夋嫨涓氬姟鍛�', trigger: 'change' }],
   quotationDate: [{ required: true, message: '璇烽�夋嫨鎶ヤ环鏃ユ湡', trigger: 'change' }],
   validDate: [{ required: true, message: '璇烽�夋嫨鏈夋晥鏈�', trigger: 'change' }],
-  paymentMethod: [{ required: true, message: '璇烽�夋嫨浠樻鏂瑰紡', trigger: 'change' }]
+  paymentMethod: [{ required: true, message: '璇疯緭鍏ヤ粯娆炬柟寮�', trigger: 'blur' }]
 }
 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(() => {
@@ -339,10 +442,10 @@
 // 鏂规硶
 const getStatusType = (status) => {
   const statusMap = {
-    '鑽夌': 'info',
-    '宸插彂閫�': 'primary',
-    '瀹㈡埛纭': 'success',
-    '宸茶繃鏈�': 'danger'
+    '寰呭鎵�': 'info',
+    '瀹℃牳涓�': 'primary',
+    '閫氳繃': 'success',
+    '鎷掔粷': 'danger'
   }
   return statusMap[status] || 'info'
 }
@@ -357,6 +460,9 @@
   dialogTitle.value = '鏂板鎶ヤ环'
   isEdit.value = false
   resetForm()
+  // 閲嶇疆瀹℃壒浜鸿妭鐐�
+  approverNodes.value = [{ id: 1, userId: null }]
+  nextApproverId = 2
   dialogVisible.value = true
 	let userLists = await userListNoPage();
 	// 鍙鍒堕渶瑕佺殑瀛楁锛岄伩鍏嶅皢缁勪欢寮曠敤鏀惧叆鍝嶅簲寮忓璞�
@@ -376,8 +482,10 @@
 	});
 }
 const getProductOptions = () => {
-	productTreeList().then((res) => {
+	// 杩斿洖 Promise锛屼究浜庣紪杈戞椂 await 纭繚鑳藉弽鏄�
+	return productTreeList().then((res) => {
 		productOptions.value = convertIdToValue(res);
+		return productOptions.value
 	});
 };
 function convertIdToValue(data) {
@@ -393,6 +501,19 @@
 		
 		return newItem;
 	});
+}
+// 鏍规嵁鍚嶇О鍙嶆煡鑺傜偣 id锛屼究浜庝粎瀛樺悕绉版椂鐨勫弽鏄�
+function findNodeIdByLabel(nodes, label) {
+	if (!label) return null;
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node.label === label) return node.value;
+		if (node.children && node.children.length > 0) {
+			const found = findNodeIdByLabel(node.children, label);
+			if (found !== null && found !== undefined) return found;
+		}
+	}
+	return null;
 }
 const getModels = (value, row) => {
 	if (!row) return;
@@ -478,10 +599,14 @@
   viewDialogVisible.value = true
 }
 
-const handleEdit = (row) => {
+const handleEdit = async (row) => {
   dialogTitle.value = '缂栬緫鎶ヤ环'
   isEdit.value = true
   editId.value = row.id
+  form.id = row.id || form.id || null
+  // 鍏堝姞杞戒骇鍝佹爲鏁版嵁锛屽惁鍒� el-tree-select 鏃犳硶鍙嶆樉浜у搧鍚嶇О
+  await getProductOptions()
+
   // 鍙鍒堕渶瑕佺殑瀛楁锛岄伩鍏嶅皢缁勪欢寮曠敤鏀惧叆鍝嶅簲寮忓璞�
   form.quotationNo = row.quotationNo || ''
   form.customer = row.customer || ''
@@ -491,22 +616,51 @@
   form.paymentMethod = row.paymentMethod || ''
   form.status = row.status || '鑽夌'
   form.remark = row.remark || ''
-  form.products = row.products ? row.products.map(product => ({
-    productId: product.productId || '',
-    product: product.product || product.productName || '',
-    specificationId: product.specificationId || '',
-    specification: product.specification || '',
-    quantity: product.quantity || 0,
-    unit: product.unit || '',
-    unitPrice: product.unitPrice || 0,
-    amount: product.amount || 0
-  })) : []
+  form.products = row.products ? row.products.map(product => {
+    const productName = product.product || product.productName || ''
+    // 浼樺厛鐢� productId锛涘鏋滃彧鏈夊悕绉帮紝灏濊瘯鍙嶆煡 id 浠ヤ究鏍戦�夋嫨鍣ㄥ弽鏄�
+    const resolvedId = product.productId
+      ? Number(product.productId)
+      : findNodeIdByLabel(productOptions.value, productName) || ''
+    return {
+      productId: resolvedId,
+      product: productName,
+      specificationId: product.specificationId || '',
+      specification: product.specification || '',
+      quantity: product.quantity || 0,
+      unit: product.unit || '',
+      unitPrice: product.unitPrice || 0,
+      amount: product.amount || 0
+    }
+  }) : []
   form.subtotal = row.subtotal || 0
   form.freight = row.freight || 0
   form.otherFee = row.otherFee || 0
   form.discountRate = row.discountRate || 0
   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 => ({
+    userId: item.userId,
+    nickName: item.nickName || '',
+    userName: item.userName || ''
+  }));
+  
   dialogVisible.value = true
 }
 
@@ -596,6 +750,22 @@
         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
+        return sum + price
+      }, 0)
+      
       if (isEdit.value) {
         // 缂栬緫
         const index = quotationList.value.findIndex(item => item.id === editId.value)
@@ -608,30 +778,16 @@
               handleSearch()
             }
           })
-          // quotationList.value[index] = { ...form, id: editId.value }
-          // ElMessage.success('缂栬緫鎴愬姛')
         }
       } else {
         // 鏂板
-        // const newId = Math.max(...quotationList.value.map(item => item.id)) + 1
-        form.quotationNo = `QT${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}`
-
         addQuotation(form).then(res=>{
-          // console.log(res)
           if(res.code===200){
             ElMessage.success('鏂板鎴愬姛')
             dialogVisible.value = false
             handleSearch()
           }
         })
-
-        // quotationList.value.push({
-        //   ...form,
-        //   // id: newId,
-        //   quotationNo: quotationNo
-        // })
-        // pagination.total++
-        // ElMessage.success('鏂板鎴愬姛')
       }
       
     }
@@ -644,7 +800,7 @@
 }
 const handleSearch = ()=>{
   const params = {
-    page:pagination,
+    ...pagination,
     ...searchForm
   }
   getQuotationList(params).then(res=>{
@@ -660,6 +816,8 @@
         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 || '',
@@ -696,27 +854,182 @@
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .search-row {
   margin-bottom: 20px;
 }
 
+.quotation-form-container {
+  padding: 10px 0;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+}
+
+.quotation-form {
+  .el-form-item {
+    margin-bottom: 22px;
+  }
+}
+
 .form-card {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+  }
+  
+  :deep(.el-card__header) {
+    padding: 16px 20px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
+    border-bottom: 1px solid #ebeef5;
+  }
+  
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
 }
 
-.card-title {
-  font-weight: bold;
-  color: #303133;
-}
-
-.card-header {
+.card-header-wrapper {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 8px;
+  
+  .card-icon {
+    font-size: 18px;
+    color: #409eff;
+  }
+  
+  .card-title {
+    font-weight: 600;
+    font-size: 16px;
+    color: #303133;
+    flex: 1;
+  }
+  
+  .header-btn {
+    margin-left: auto;
+  }
+}
+
+.form-content {
+  padding: 8px 0;
+}
+
+.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;
+    
+    th {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+  
+  :deep(.el-table__row) {
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+  
+  :deep(.el-table__cell) {
+    padding: 12px 0;
+  }
 }
 
 .dialog-footer {
   text-align: right;
 }
+
+// 鍝嶅簲寮忎紭鍖�
+@media (max-width: 1200px) {
+  .approver-nodes-container {
+    gap: 16px;
+  }
+  
+  .approver-node-item {
+    min-width: 160px;
+  }
+}
 </style>

--
Gitblit v1.9.3