From 2075144baf459fe5ef89892d189784636f27f862 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 22 一月 2026 14:04:58 +0800
Subject: [PATCH] 湟水峡 1.发货分开类型货车和快递,并可以上传图片

---
 src/views/salesManagement/salesQuotation/index.vue |  501 ++++++++++++++++++++++++++++--------------------------
 1 files changed, 260 insertions(+), 241 deletions(-)

diff --git a/src/views/salesManagement/salesQuotation/index.vue b/src/views/salesManagement/salesQuotation/index.vue
index cefc769..7da8b7e 100644
--- a/src/views/salesManagement/salesQuotation/index.vue
+++ b/src/views/salesManagement/salesQuotation/index.vue
@@ -15,15 +15,6 @@
             </template>
           </el-input>
         </el-col>
-        <el-col :span="8">
-          <el-select v-model="searchForm.customer" placeholder="璇烽�夋嫨瀹㈡埛" 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-col>
 <!--        <el-col :span="6">-->
 <!--          <el-select v-model="searchForm.status" placeholder="璇烽�夋嫨鎶ヤ环鐘舵��" clearable>-->
 <!--            <el-option label="鑽夌" value="鑽夌"></el-option>-->
@@ -51,28 +42,14 @@
         height="calc(100vh - 22em)"
       >
 				<el-table-column align="center" label="搴忓彿" type="index" width="60" />
-        <el-table-column prop="quotationNo" label="鎶ヤ环鍗曞彿" width="150" />
-        <el-table-column prop="customer" label="瀹㈡埛鍚嶇О" />
-        <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="totalAmount" label="鎶ヤ环閲戦" width="120">
-          <template #default="scope">
-            楼{{ scope.row.totalAmount.toFixed(2) }}
-          </template>
-        </el-table-column>
-<!--        <el-table-column prop="status" label="鎶ヤ环鐘舵��" width="100">-->
-<!--          <template #default="scope">-->
-<!--            <el-tag :type="getStatusType(scope.row.status)">-->
-<!--              {{ scope.row.status }}-->
-<!--            </el-tag>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-        <el-table-column label="鎿嶄綔" width="250" fixed="right" align="center">
+        <el-table-column prop="quotationNo" label="鎶ヤ环鍗曞彿" />
+        <el-table-column prop="salesperson" label="涓氬姟鍛�" />
+        <el-table-column prop="quotationDate" label="鎶ヤ环鏃ユ湡" />
+        <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>
@@ -88,94 +65,62 @@
     </el-card>
 
     <!-- 鏂板/缂栬緫瀵硅瘽妗� -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1300px" :close-on-click-modal="false">
-      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
-        <!-- 鍩烘湰淇℃伅 -->
-        <el-card class="form-card" shadow="never">
+    <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="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-col :span="12">
-              <el-form-item label="浜よ揣鏈�" prop="deliveryPeriod">
-                <el-date-picker
-                  v-model="form.deliveryPeriod"
-                  type="date"
-                  placeholder="閫夋嫨浜よ揣鏈�"
-                  style="width: 100%"
-                  format="YYYY-MM-DD"
-                  value-format="YYYY-MM-DD"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <div class="form-content">
+            <el-row :gutter="24">
+              <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-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-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
@@ -207,24 +152,24 @@
 								</el-select>
               </template>
             </el-table-column>
-            <el-table-column prop="quantity" label="鏁伴噺">
-              <template #default="scope">
-                <el-input-number v-model="scope.row.quantity" :min="1" :precision="0" style="width: 100%" />
-              </template>
-            </el-table-column>
             <el-table-column prop="unit" label="鍗曚綅">
               <template #default="scope">
                 <el-input v-model="scope.row.unit" placeholder="鍗曚綅" />
               </template>
             </el-table-column>
-            <el-table-column prop="unitPrice" label="鍗曚环">
+            <el-table-column prop="unitPrice" label="涓�鎵瑰晢鍗曚环">
               <template #default="scope">
-                <el-input-number v-model="scope.row.unitPrice" :min="0" :precision="2" style="width: 100%" @change="calculateAmount(scope.row)" />
+                <el-input-number v-model="scope.row.unitPrice" :min="0" :precision="2" style="width: 100%" />
               </template>
             </el-table-column>
-            <el-table-column prop="amount" label="閲戦" width="120">
+            <el-table-column prop="unitPriceTwo" label="缁堢鍟嗗崟浠�">
               <template #default="scope">
-                <span>楼{{ scope.row.amount.toFixed(2) }}</span>
+                <el-input-number v-model="scope.row.unitPriceTwo" :min="0" :precision="2" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="unitPriceThree" label="鍗曚环">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.unitPriceThree" :min="0" :precision="2" style="width: 100%" />
               </template>
             </el-table-column>
             <el-table-column label="鎿嶄綔" width="80" align="center">
@@ -233,83 +178,41 @@
               </template>
             </el-table-column>
           </el-table>
-        </el-card>
-
-        <!-- 璐圭敤淇℃伅 -->
-        <el-card class="form-card" shadow="never">
-          <template #header>
-            <span class="card-title">璐圭敤淇℃伅</span>
-          </template>
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <el-form-item label="浜у搧灏忚">
-                <el-input-number v-model="form.subtotal" :precision="2" :min="0" style="width: 100%" readonly />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="杩愯垂">
-                <el-input-number v-model="form.freight" :precision="2" :min="0" style="width: 100%" @change="calculateTotal" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="鍏朵粬璐圭敤">
-                <el-input-number v-model="form.otherFee" :precision="2" :min="0" style="width: 100%" @change="calculateTotal" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <el-form-item label="鎶樻墸鐜�(%)">
-                <el-input-number v-model="form.discountRate" :precision="2" :min="0" :max="100" style="width: 100%" @change="calculateTotal" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="鎶樻墸閲戦">
-                <el-input-number v-model="form.discountAmount" :precision="2" :min="0" style="width: 100%" readonly />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="鎶ヤ环鎬婚">
-                <el-input-number v-model="form.totalAmount" :precision="2" :min="0" style="width: 100%" readonly />
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <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>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
-          <el-button type="primary" @click="handleSubmit">纭� 瀹�</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      </div>
+    </FormDialog>
 
     <!-- 鏌ョ湅璇︽儏瀵硅瘽妗� -->
     <el-dialog v-model="viewDialogVisible" title="鎶ヤ环璇︽儏" width="800px">
       <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="浜よ揣鏈�">{{ currentQuotation.deliveryPeriod }}</el-descriptions-item>
-<!--        <el-descriptions-item label="鎶ヤ环鐘舵��">-->
-<!--          <el-tag :type="getStatusType(currentQuotation.status)">{{ currentQuotation.status }}</el-tag>-->
-<!--        </el-descriptions-item>-->
-        <el-descriptions-item label="鎶ヤ环鎬婚" :span="2">
-          <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">楼{{ currentQuotation.totalAmount?.toFixed(2) }}</span>
-        </el-descriptions-item>
       </el-descriptions>
       
       <div style="margin-top: 20px;">
@@ -317,16 +220,20 @@
         <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="quantity" label="鏁伴噺" />
           <el-table-column prop="unit" label="鍗曚綅" />
-          <el-table-column prop="unitPrice" label="鍗曚环">
+          <el-table-column prop="unitPrice" label="涓�鎵瑰晢鍗曚环">
             <template #default="scope">
               楼{{ scope.row.unitPrice.toFixed(2) }}
             </template>
           </el-table-column>
-          <el-table-column prop="amount" label="閲戦">
+          <el-table-column prop="unitPriceTwo" label="缁堢鍟嗗崟浠�">
             <template #default="scope">
-              楼{{ scope.row.amount.toFixed(2) }}
+              楼{{ scope.row.unitPriceTwo?.toFixed(2) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="unitPriceThree" label="鍗曚环">
+            <template #default="scope">
+              楼{{ scope.row.unitPriceThree?.toFixed(2) }}
             </template>
           </el-table-column>
         </el-table>
@@ -343,8 +250,9 @@
 <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, 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'
 import {userListNoPage} from "@/api/system/user.js";
 import {customerList} from "@/api/salesManagement/salesLedger.js";
@@ -354,7 +262,6 @@
 const loading = ref(false)
 const searchForm = reactive({
   quotationNo: '',
-  customer: '',
   status: ''
 })
 
@@ -377,7 +284,6 @@
   quotationDate: '',
   validDate: '',
   paymentMethod: '',
-  deliveryPeriod: '',
   status: '鑽夌',
   remark: '',
   products: [],
@@ -390,12 +296,8 @@
 })
 
 const rules = {
-  customer: [{ required: true, message: '璇烽�夋嫨瀹㈡埛', trigger: 'change' }],
   salesperson: [{ required: true, message: '璇烽�夋嫨涓氬姟鍛�', trigger: 'change' }],
-  quotationDate: [{ required: true, message: '璇烽�夋嫨鎶ヤ环鏃ユ湡', trigger: 'change' }],
-  validDate: [{ required: true, message: '璇烽�夋嫨鏈夋晥鏈�', trigger: 'change' }],
-  paymentMethod: [{ required: true, message: '璇烽�夋嫨浠樻鏂瑰紡', trigger: 'change' }],
-  deliveryPeriod: [{ required: true, message: '璇烽�夋嫨浜よ揣鏈�', trigger: 'change' }]
+  quotationDate: [{ required: true, message: '璇烽�夋嫨鎶ヤ环鏃ユ湡', trigger: 'change' }]
 }
 const userList = ref([]);
 const customerOption = ref([]);
@@ -411,9 +313,6 @@
   if (searchForm.quotationNo) {
     list = list.filter(item => item.quotationNo.includes(searchForm.quotationNo))
   }
-  if (searchForm.customer) {
-    list = list.filter(item => item.customer === searchForm.customer)
-  }
   if (searchForm.status) {
     list = list.filter(item => item.status === searchForm.status)
   }
@@ -423,17 +322,16 @@
 // 鏂规硶
 const getStatusType = (status) => {
   const statusMap = {
-    '鑽夌': 'info',
-    '宸插彂閫�': 'primary',
-    '瀹㈡埛纭': 'success',
-    '宸茶繃鏈�': 'danger'
+    '寰呭鎵�': 'info',
+    '瀹℃牳涓�': 'primary',
+    '閫氳繃': 'success',
+    '鎷掔粷': 'danger'
   }
   return statusMap[status] || 'info'
 }
 
 const resetSearch = () => {
   searchForm.quotationNo = ''
-  searchForm.customer = ''
   searchForm.status = ''
 }
 
@@ -460,8 +358,10 @@
 	});
 }
 const getProductOptions = () => {
-	productTreeList().then((res) => {
+	// 杩斿洖 Promise锛屼究浜庣紪杈戞椂 await 纭繚鑳藉弽鏄�
+	return productTreeList().then((res) => {
 		productOptions.value = convertIdToValue(res);
+		return productOptions.value
 	});
 };
 function convertIdToValue(data) {
@@ -477,6 +377,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;
@@ -545,7 +458,6 @@
     quotationDate: row.quotationDate || '',
     validDate: row.validDate || '',
     paymentMethod: row.paymentMethod || '',
-    deliveryPeriod: row.deliveryPeriod || '',
     status: row.status || '',
     remark: row.remark || '',
     products: row.products ? row.products.map(product => ({
@@ -555,7 +467,9 @@
       specification: product.specification || '',
       quantity: product.quantity || 0,
       unit: product.unit || '',
-      unitPrice: product.unitPrice || 0,
+      unitPrice: product.unitPrice || 0, // 涓�鎵瑰晢鍗曚环
+      unitPriceTwo: product.unitPriceTwo || product.dealerUnitPrice || 0, // 缁堢鍟嗗崟浠�
+      unitPriceThree: product.unitPriceThree || 0, // 鍗曚环
       amount: product.amount || 0
     })) : [],
     totalAmount: row.totalAmount || 0
@@ -563,10 +477,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 || ''
@@ -574,25 +492,42 @@
   form.quotationDate = row.quotationDate || ''
   form.validDate = row.validDate || ''
   form.paymentMethod = row.paymentMethod || ''
-  form.deliveryPeriod = row.deliveryPeriod || ''
   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,
+      unitPriceTwo: product.unitPriceTwo || product.dealerUnitPrice || 0,
+      unitPriceThree: product.unitPriceThree || 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
+  
+  // 鍔犺浇鐢ㄦ埛鍒楄〃
+  let userLists = await userListNoPage();
+  userList.value = (userLists.data || []).map(item => ({
+    userId: item.userId,
+    nickName: item.nickName || '',
+    userName: item.userName || ''
+  }));
+  
   dialogVisible.value = true
 }
 
@@ -625,7 +560,6 @@
   form.quotationDate = ''
   form.validDate = ''
   form.paymentMethod = ''
-  form.deliveryPeriod = ''
   form.status = '鑽夌'
   form.remark = ''
   form.products = []
@@ -646,6 +580,8 @@
     specification: '',
     quantity: 1,
     unit: '',
+    unitPriceTwo: 0,
+    unitPriceThree: 0,
     unitPrice: 0,
     amount: 0
   })
@@ -683,6 +619,12 @@
         return
       }
       
+      // 璁$畻鎵�鏈変骇鍝佺殑鍗曚环鎬诲拰
+      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)
@@ -695,30 +637,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('鏂板鎴愬姛')
       }
       
     }
@@ -731,7 +659,7 @@
 }
 const handleSearch = ()=>{
   const params = {
-    page:pagination,
+    ...pagination,
     ...searchForm
   }
   getQuotationList(params).then(res=>{
@@ -746,7 +674,6 @@
         quotationDate: item.quotationDate || '',
         validDate: item.validDate || '',
         paymentMethod: item.paymentMethod || '',
-        deliveryPeriod: item.deliveryPeriod || '',
         status: item.status || '鑽夌',
         remark: item.remark || '',
         products: item.products ? item.products.map(product => ({
@@ -757,6 +684,8 @@
           quantity: product.quantity || 0,
           unit: product.unit || '',
           unitPrice: product.unitPrice || 0,
+          unitPriceTwo: product.unitPriceTwo || product.dealerUnitPrice || 0,
+          unitPriceThree: product.unitPriceThree || 0,
           amount: product.amount || 0
         })) : [],
         subtotal: item.subtotal || 0,
@@ -784,27 +713,117 @@
 })
 </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;
+}
+
+.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