|  |  | 
 |  |  |     <el-card class="box-card"> | 
 |  |  |       <!-- 搜索区域 --> | 
 |  |  |       <el-row :gutter="20" class="search-row"> | 
 |  |  |         <el-col :span="6"> | 
 |  |  |         <el-col :span="8"> | 
 |  |  |           <el-input | 
 |  |  |             v-model="searchForm.quotationNo" | 
 |  |  |             placeholder="请输入报价单号" | 
 |  |  | 
 |  |  |             </template> | 
 |  |  |           </el-input> | 
 |  |  |         </el-col> | 
 |  |  |         <el-col :span="6"> | 
 |  |  |         <el-col :span="8"> | 
 |  |  |           <el-select v-model="searchForm.customer" placeholder="请选择客户" clearable> | 
 |  |  |             <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option> | 
 |  |  |             <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option> | 
 |  |  |             <el-option label="北京贸易公司" value="北京贸易公司"></el-option> | 
 |  |  |                   <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> | 
 |  |  |             <el-option label="已发送" value="已发送"></el-option> | 
 |  |  |             <el-option label="客户确认" value="客户确认"></el-option> | 
 |  |  |             <el-option label="已过期" value="已过期"></el-option> | 
 |  |  |           </el-select> | 
 |  |  |         </el-col> | 
 |  |  |         <el-col :span="6"> | 
 |  |  | <!--        <el-col :span="6">--> | 
 |  |  | <!--          <el-select v-model="searchForm.status" placeholder="请选择报价状态" clearable>--> | 
 |  |  | <!--            <el-option label="草稿" value="草稿"></el-option>--> | 
 |  |  | <!--            <el-option label="已发送" value="已发送"></el-option>--> | 
 |  |  | <!--            <el-option label="客户确认" value="客户确认"></el-option>--> | 
 |  |  | <!--            <el-option label="已过期" value="已过期"></el-option>--> | 
 |  |  | <!--          </el-select>--> | 
 |  |  | <!--        </el-col>--> | 
 |  |  |         <el-col :span="8"> | 
 |  |  |           <el-button type="primary" @click="handleSearch">搜索</el-button> | 
 |  |  |           <el-button @click="resetSearch">重置</el-button> | 
 |  |  |           <el-button style="float: right;" type="primary" @click="handleAdd"> | 
 |  |  | 
 |  |  |         stripe | 
 |  |  |         height="calc(100vh - 22em)" | 
 |  |  |       > | 
 |  |  |         <el-table-column prop="id" label="ID" width="80" align="center"/> | 
 |  |  |             <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" /> | 
 |  |  | 
 |  |  |             ¥{{ 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 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"> | 
 |  |  |           <template #default="scope"> | 
 |  |  |             <el-button link type="primary" @click="handleView(scope.row)">查看</el-button> | 
 |  |  | 
 |  |  |     </el-card> | 
 |  |  |  | 
 |  |  |     <!-- 新增/编辑对话框 --> | 
 |  |  |     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" :close-on-click-modal="false"> | 
 |  |  |     <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"> | 
 |  |  | 
 |  |  |             <el-col :span="12"> | 
 |  |  |               <el-form-item label="客户名称" prop="customer"> | 
 |  |  |                 <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%" @change="handleCustomerChange"> | 
 |  |  |                   <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option> | 
 |  |  |                   <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option> | 
 |  |  |                   <el-option label="北京贸易公司" value="北京贸易公司"></el-option> | 
 |  |  |                            <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 label="陈志强" value="陈志强"></el-option> | 
 |  |  |                   <el-option label="刘雅婷" value="刘雅婷"></el-option> | 
 |  |  |                   <el-option label="王建国" value="王建国"></el-option> | 
 |  |  |                            <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" | 
 |  |  |                                            :value="item.nickName" /> | 
 |  |  |                 </el-select> | 
 |  |  |               </el-form-item> | 
 |  |  |             </el-col> | 
 |  |  | 
 |  |  |                 <el-input v-model="scope.row.specification" placeholder="规格型号" /> | 
 |  |  |               </template> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column prop="quantity" label="数量" width="100"> | 
 |  |  |             <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="单位" width="80"> | 
 |  |  |             <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="单价" width="120"> | 
 |  |  |             <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)" /> | 
 |  |  |               </template> | 
 |  |  | 
 |  |  |         <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="报价状态">--> | 
 |  |  | <!--          <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> | 
 |  |  | 
 |  |  | import { Search } from '@element-plus/icons-vue' | 
 |  |  | // import Pagination from '@/components/PIMTable/Pagination.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"; | 
 |  |  |  | 
 |  |  | // 响应式数据 | 
 |  |  | const loading = ref(false) | 
 |  |  | 
 |  |  |   paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }], | 
 |  |  |   deliveryPeriod: [{ required: true, message: '请输入交货期', trigger: 'blur' }] | 
 |  |  | } | 
 |  |  | const userList = ref([]); | 
 |  |  | const customerOption = ref([]); | 
 |  |  |  | 
 |  |  | const isEdit = ref(false) | 
 |  |  | const editId = ref(null) | 
 |  |  | 
 |  |  |   searchForm.status = '' | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const handleAdd = () => { | 
 |  |  | const handleAdd = async () => { | 
 |  |  |   dialogTitle.value = '新增报价' | 
 |  |  |   isEdit.value = false | 
 |  |  |   resetForm() | 
 |  |  |   dialogVisible.value = true | 
 |  |  |    let userLists = await userListNoPage(); | 
 |  |  |    userList.value = userLists.data; | 
 |  |  |    customerList().then((res) => { | 
 |  |  |       customerOption.value = res; | 
 |  |  |    }); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const handleView = (row) => { | 
 |  |  | 
 |  |  |       pagination.total = res.data.total | 
 |  |  |     } | 
 |  |  |   }) | 
 |  |  |    customerList().then((res) => { | 
 |  |  |       customerOption.value = res; | 
 |  |  |    }); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | onMounted(()=>{ |