提交

web-admin/src/views/crm/clue/detailDrawer.vue

@@ -3,7 +3,7 @@
     v-model:visible="visible"
     :title="clueInfo.clueName || '线索详情'"
     :icon="User"
-    width="1200px"
+    width="1400px"
     layout="split"
     :meta="viewHeroMeta"
     :sections="viewSections"
@@ -212,6 +212,15 @@
     }
   }
 
+  function viewTableSection(title: string, fields: ViewField[]): ViewSection {
+    return {
+      title,
+      fields,
+      fieldLayout: 'table',
+      tableMode: 'dual'
+    }
+  }
+
   function parseClueRemark(remark?: string | null) {
     if (!remark?.trim()) return { remarkText: '', invalidReason: '' }
     const marker = '无效原因：'
@@ -258,38 +267,31 @@
     }
 
     const sections: ViewSection[] = [
-      { title: '基本信息', fields: basicFields },
-      { title: '线索信息', fields: clueFields }
+      viewTableSection('基本信息', basicFields),
+      viewTableSection('线索信息', clueFields)
     ]
 
     if (c.intentProducts || c.requirement) {
-      sections.push({
-        title: '需求信息',
-        fields: [
-          { label: '意向产品', value: c.intentProducts, span: true },
-          { label: '需求描述', value: c.requirement, span: true }
-        ]
-      })
+      sections.push(
+        viewTableSection('需求信息', [
+          { label: '意向产品', value: c.intentProducts },
+          { label: '需求描述', value: c.requirement }
+        ])
+      )
     }
 
     const { remarkText, invalidReason } = parseClueRemark(c.remark)
     if (remarkText || invalidReason) {
       const remarkFields: ViewField[] = []
       if (remarkText) {
-        remarkFields.push({ label: '备注', value: remarkText, span: true })
+        remarkFields.push({ label: '备注', value: remarkText })
       }
       if (invalidReason) {
-        remarkFields.push({ label: '无效原因', value: invalidReason, span: true })
+        remarkFields.push({ label: '无效原因', value: invalidReason })
       }
-      sections.push({
-        title: '备注信息',
-        fields: remarkFields
-      })
+      sections.push(viewTableSection('备注信息', remarkFields))
     } else if (c.remark) {
-      sections.push({
-        title: '备注信息',
-        fields: [{ label: '备注', value: c.remark, span: true }]
-      })
+      sections.push(viewTableSection('备注信息', [{ label: '备注', value: c.remark }]))
     }
 
     return sections
@@ -483,7 +485,13 @@
 <style lang="scss">
   .clue-view-dialog.system-view-dialog {
     &.el-dialog {
-      max-width: calc(100vw - 32px);
+      max-width: calc(100vw - 48px);
+    }
+
+    .view-split-left {
+      flex: 0 0 580px;
+      width: 580px;
+      max-width: 50%;
     }
 
     .view-split-left .view-hero {
@@ -497,7 +505,7 @@
       flex-basis: 100%;
       padding-top: 12px;
       margin-top: 4px;
-      border-top: 1px solid rgba(217, 232, 226, 0.85);
+      justify-content: flex-end;
     }
 
     .clue-view-hero-actions {
@@ -505,6 +513,7 @@
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
+      justify-content: flex-end;
       gap: 8px;
       min-width: 0;
       width: 100%;

web-admin/src/views/crm/clue/form.vue

@@ -2,7 +2,7 @@
   <el-dialog
     v-model="dialog.visible"
     :title="dialog.title"
-    width="960px"
+    width="1160px"
     class="dialog-form-layout"
     align-center
     destroy-on-close
@@ -18,7 +18,7 @@
       :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
     >
       <el-divider content-position="left">基本信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="线索姓名" prop="clueName">
           <el-input v-model="form.clueName" placeholder="请输入线索姓名" maxlength="100" />
         </el-form-item>
@@ -34,7 +34,7 @@
         <el-form-item label="公司名称" prop="company">
           <el-input v-model="form.company" placeholder="请输入公司名称" maxlength="200" />
         </el-form-item>
-        <el-form-item label="客户类型" prop="customerType">
+        <el-form-item label="客户类型" prop="customerType" class="form-field-span-2">
           <el-select v-model="form.customerType" placeholder="请选择客户类型" clearable>
             <el-option
               v-for="opt in dictStore.getOptions('crm_customer_type')"
@@ -44,13 +44,13 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="客户网站" prop="website" class="form-col-span-2">
+        <el-form-item label="客户网站" prop="website" class="form-field-span-2">
           <el-input v-model="form.website" placeholder="请输入客户网站" maxlength="500" />
         </el-form-item>
       </div>
 
       <el-divider content-position="left">详细信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="线索来源" prop="source">
           <el-select v-model="form.source" placeholder="请选择线索来源" clearable>
             <el-option
@@ -113,8 +113,8 @@
       </div>
 
       <el-divider content-position="left">需求信息</el-divider>
-      <div class="form-grid-3">
-        <el-form-item label="意向产品">
+      <div class="form-grid-4">
+        <el-form-item label="意向产品" class="form-field-span-2">
           <el-input
             v-model="form.intentProducts"
             placeholder="请输入意向产品，多个用逗号分隔"
@@ -133,7 +133,7 @@
       </div>
 
       <el-divider content-position="left">分配信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="负责人" prop="ownerUserId">
           <el-select v-model="form.ownerUserId" placeholder="请选择负责人" clearable filterable>
             <el-option
@@ -391,7 +391,7 @@
 </script>
 
 <style scoped lang="scss">
-  .form-grid-3 .form-field-span-2 {
+  .form-grid-4 .form-field-span-2 {
     grid-column: span 2;
   }
 </style>

web-admin/src/views/crm/contract/components/ContractFormDialog.vue

@@ -114,8 +114,8 @@
               @change="handleDateRangeChange"
             />
           </el-form-item>
-          <el-form-item label="供方主体" prop="supplierId" required>
-            <el-select v-model="form.supplierId" placeholder="请选择供方主体" clearable style="width: 100%" @change="handleSupplierChange">
+          <el-form-item label="交易主体" prop="supplierId" required>
+            <el-select v-model="form.supplierId" placeholder="请选择交易主体" clearable style="width: 100%" @change="handleSupplierChange">
               <el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" />
             </el-select>
           </el-form-item>
@@ -180,7 +180,23 @@
 
               <div class="party-flow-bridge" aria-hidden="true">
                 <span class="party-flow-bridge__label">供货</span>
-                <el-icon class="party-flow-bridge__arrow"><Right /></el-icon>
+                <span class="party-flow-bridge__arrow">
+                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path
+                      d="M5 12h11.5"
+                      stroke="currentColor"
+                      stroke-width="2.75"
+                      stroke-linecap="round"
+                    />
+                    <path
+                      d="M13.5 8.5 18.5 12l-5 3.5"
+                      stroke="currentColor"
+                      stroke-width="2.75"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
               </div>
 
               <div class="party-panel">
@@ -527,7 +543,6 @@ import {
   Document,
   Delete,
   Sort,
-  Right,
   Plus,
   Search,
   Close,
@@ -684,7 +699,7 @@ const rules = ref({
   contactId: [{ required: true, message: '联系人不能为空', trigger: 'change' }],
   signDate: [{ required: true, message: '签订日期不能为空', trigger: 'change' }],
   ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'change' }],
-  supplierId: [{ required: true, message: '供方主体不能为空', trigger: 'change' }],
+  supplierId: [{ required: true, message: '交易主体不能为空', trigger: 'change' }],
   startDate: [
     {
       validator: (_rule: any, _value: any, callback: any) => {
@@ -1759,7 +1774,7 @@ const handleSaveDraft = async () => {
     return
   }
   if (!form.value.supplierId) {
-    $modal.msgWarning('供方主体不能为空')
+    $modal.msgWarning('交易主体不能为空')
     return
   }
 
@@ -2136,20 +2151,39 @@ const loadSupplierList = async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 10px;
   padding: 0 8px;
 }
 
 .party-flow-bridge__label {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--primary-dark, #059669);
-  letter-spacing: 0.04em;
+  letter-spacing: 0.06em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  line-height: 1.2;
 }
 
 .party-flow-bridge__arrow {
-  font-size: 28px;
-  color: var(--primary, #10b981);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  color: var(--primary-dark, #059669);
+  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
+  border: 1px solid #a7f3d0;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.14);
+
+  svg {
+    width: 22px;
+    height: 22px;
+    display: block;
+  }
 }
 
 @media (max-width: 1100px) {
@@ -2161,6 +2195,7 @@ const loadSupplierList = async () => {
   .party-flow-bridge {
     flex: 0 0 auto;
     flex-direction: row;
+    gap: 12px;
     padding: 12px 0;
   }
 

web-admin/src/views/crm/customer/CustomerDetailDialog.vue

@@ -457,12 +457,12 @@
   <CustomerForm ref="customerFormRef" @success="getCustomerInfo" />
   <FollowForm ref="followFormRef" @success="handleFollowSuccess" />
   <ContactForm ref="contactFormRef" @success="handleContactSuccess" />
-  <OpportunityDetailDrawer ref="opportunityDetailRef" />
-  <ContractDetailDialog ref="contractDetailRef" />
+  <OpportunityDetailDrawer v-if="opportunityDialogActive" ref="opportunityDetailRef" />
+  <ContractDetailDialog v-if="contractDialogActive" ref="contractDetailRef" />
 </template>
 
 <script setup lang="ts" name="CustomerDetail">
-import { computed, ref } from 'vue'
+import { computed, ref, defineAsyncComponent, nextTick } from 'vue'
 import { User, Edit, Delete, Plus, View, Star } from '@element-plus/icons-vue'
 import SystemViewDialog, {
   type ViewField,
@@ -491,8 +491,13 @@ import CustomerForm from './CustomerFormDialog.vue'
 import FollowForm from './FollowFormDialog.vue'
 import ContactForm from './components/ContactFormDialog.vue'
 import InvoiceInfo from './components/InvoiceInfo.vue'
-import OpportunityDetailDrawer from '@/views/crm/opportunity/components/OpportunityDetailDrawer.vue'
-import ContractDetailDialog from '@/views/crm/contract/components/ContractDetailDialog.vue'
+
+const OpportunityDetailDrawer = defineAsyncComponent(
+  () => import('@/views/crm/opportunity/components/OpportunityDetailDrawer.vue')
+)
+const ContractDetailDialog = defineAsyncComponent(
+  () => import('@/views/crm/contract/components/ContractDetailDialog.vue')
+)
 
 const dictStore = useDictStore()
 const userStore = useUserStore()
@@ -528,8 +533,10 @@ const customerFormRef = ref<InstanceType<typeof CustomerForm>>()
 const followFormRef = ref<InstanceType<typeof FollowForm>>()
 const contactFormRef = ref<InstanceType<typeof ContactForm>>()
 const invoiceInfoRef = ref()
-const opportunityDetailRef = ref<InstanceType<typeof OpportunityDetailDrawer>>()
-const contractDetailRef = ref<InstanceType<typeof ContractDetailDialog>>()
+const opportunityDetailRef = ref<{ open: (id: string | number) => Promise<void> }>()
+const contractDetailRef = ref<{ open: (id: string | number) => Promise<void> }>()
+const opportunityDialogActive = ref(false)
+const contractDialogActive = ref(false)
 
 const isOverdue = computed(() => {
   if (!customerInfo.value.nextTime) return false
@@ -565,6 +572,15 @@ function tagField(
   }
 }
 
+function viewTableSection(title: string, fields: ViewField[]): ViewSection {
+  return {
+    title,
+    fields,
+    fieldLayout: 'table',
+    tableMode: 'pair'
+  }
+}
+
 const viewSections = computed<ViewSection[]>(() => {
   const c = customerInfo.value
   if (!c?.id) return []
@@ -604,8 +620,8 @@ const viewSections = computed<ViewSection[]>(() => {
   }
 
   const sections: ViewSection[] = [
-    { title: '基本信息', fields: basicFields },
-    { title: '业务信息', fields: bizFields }
+    viewTableSection('基本信息', basicFields),
+    viewTableSection('业务信息', bizFields)
   ]
 
   if (c.businessLicenseImages || c.businessPermitImages || c.otherCertImages) {
@@ -617,10 +633,7 @@ const viewSections = computed<ViewSection[]>(() => {
   }
 
   if (c.remark) {
-    sections.push({
-      title: '备注',
-      fields: [{ label: '备注', value: c.remark, span: true }]
-    })
+    sections.push(viewTableSection('备注', [{ label: '备注', value: c.remark, span: true }]))
   }
 
   return sections
@@ -798,11 +811,15 @@ function handleViewLogDetail(row: OperLogVO) {
   })
 }
 
-function handleViewOpportunity(id: number | string) {
+async function handleViewOpportunity(id: number | string) {
+  opportunityDialogActive.value = true
+  await nextTick()
   opportunityDetailRef.value?.open(id)
 }
 
-function handleViewContract(id: string | number) {
+async function handleViewContract(id: string | number) {
+  contractDialogActive.value = true
+  await nextTick()
   contractDetailRef.value?.open(id)
 }
 
@@ -1024,6 +1041,12 @@ defineExpose({ open })
     max-width: calc(100vw - 100px);
   }
 
+  .view-split-left {
+    flex: 0 0 580px;
+    width: 580px;
+    max-width: 50%;
+  }
+
   .view-split-left .view-hero {
     flex-wrap: wrap;
     align-items: flex-start;
@@ -1033,7 +1056,7 @@ defineExpose({ open })
     flex-basis: 100%;
     margin-left: 0;
     margin-top: 12px;
-    justify-content: flex-start;
+    justify-content: flex-end;
   }
 
   .customer-view-hero-actions {
@@ -1041,6 +1064,7 @@ defineExpose({ open })
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
+    justify-content: flex-end;
     gap: 8px;
     width: 100%;
 

web-admin/src/views/crm/customer/CustomerFormDialog.vue

@@ -18,7 +18,7 @@
       :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
     >
       <el-divider content-position="left">基本信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="客户名称" prop="customerName">
           <el-input v-model="form.customerName" placeholder="请输入客户名称" maxlength="200" />
         </el-form-item>
@@ -60,7 +60,7 @@
       </div>
 
       <el-divider content-position="left">详细信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="客户来源" prop="source">
           <el-select v-model="form.source" placeholder="请选择客户来源" clearable>
             <el-option
@@ -123,7 +123,7 @@
       </div>
 
       <el-divider content-position="left">分配信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="负责人" prop="ownerUserId">
           <el-select v-model="form.ownerUserId" placeholder="请选择负责人" clearable filterable>
             <el-option
@@ -149,7 +149,7 @@
       </div>
 
       <el-divider content-position="left">证件信息</el-divider>
-      <div class="form-grid-3">
+      <div class="form-grid-4">
         <el-form-item label="营业执照" prop="businessLicenseImages">
           <AttachmentUploadField
             ref="businessLicenseUploadRef"
@@ -186,7 +186,7 @@
 
       <template v-if="!form.id">
         <el-divider content-position="left">开票信息</el-divider>
-        <div class="form-grid-3">
+        <div class="form-grid-4">
           <el-form-item label="单位名称（章）">
             <el-input
               v-model="invoiceForm.companyName"
@@ -617,7 +617,7 @@ defineExpose({ open })
 </script>
 
 <style scoped lang="scss">
-.form-grid-3 .form-field-span-2 {
+.form-grid-4 .form-field-span-2 {
   grid-column: span 2;
 }
 </style>

web-admin/src/views/crm/opportunity/components/OpportunityDetailDrawer.vue

@@ -42,110 +42,110 @@
     </template>
 
     <template #split-right>
-      <div class="opportunity-view-side">
-        <div class="opportunity-view-side-block">
-          <div class="opportunity-view-side-head">
-            <h3>跟进记录</h3>
-            <el-button
-              v-if="hasOpportunityPerm('follow')"
-              class="btn-main"
-              type="primary"
-              size="small"
-              :disabled="!isFollowing"
-              @click="handleFollow"
-            >
-              <el-icon><Plus /></el-icon>添加跟进
-            </el-button>
-          </div>
+      <div class="opportunity-view-tabs-section">
+        <el-tabs v-model="activeSideTab">
+          <el-tab-pane label="跟进记录" name="follow">
+            <div class="tab-toolbar">
+              <el-button
+                v-if="hasOpportunityPerm('follow')"
+                class="btn-main"
+                type="primary"
+                size="small"
+                :disabled="!isFollowing"
+                @click="handleFollow"
+              >
+                <el-icon><Plus /></el-icon>添加跟进
+              </el-button>
+            </div>
 
-          <el-timeline v-if="followList.length > 0">
-            <el-timeline-item
-              v-for="item in followList"
-              :key="item.id"
-              :timestamp="formatDateTime(item.followTime || item.createTime)"
-              placement="top"
-            >
-              <div class="follow-card">
-                <div class="follow-header">
-                  <div class="follow-header-left">
-                  <el-tag
-                    :type="resolveOpportunityTagType(dictStore, 'crm_follow_type', item.followType)"
-                    size="small"
-                  >
-                    {{
-                      resolveOpportunityDictLabel(dictStore, 'crm_follow_type', item.followType) ||
-                        item.followType
-                    }}
-                  </el-tag>
-                    <span class="follow-creator">{{ item.followByName || item.createByName || '—' }}</span>
+            <el-timeline v-if="followList.length > 0">
+              <el-timeline-item
+                v-for="item in followList"
+                :key="item.id"
+                :timestamp="formatDateTime(item.followTime || item.createTime)"
+                placement="top"
+              >
+                <div class="follow-card">
+                  <div class="follow-header">
+                    <div class="follow-header-left">
+                      <el-tag
+                        :type="resolveOpportunityTagType(dictStore, 'crm_follow_type', item.followType)"
+                        size="small"
+                      >
+                        {{
+                          resolveOpportunityDictLabel(dictStore, 'crm_follow_type', item.followType) ||
+                            item.followType
+                        }}
+                      </el-tag>
+                      <span class="follow-creator">{{ item.followByName || item.createByName || '—' }}</span>
+                    </div>
+                    <div v-if="String(item.followBy) === String(currentUserId)" class="follow-actions">
+                      <el-button link type="primary" size="small" @click="handleEditFollow(item)">
+                        <el-icon><Edit /></el-icon>
+                      </el-button>
+                      <el-button link type="danger" size="small" @click="handleDeleteFollow(item.id!)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </div>
                   </div>
-                  <div v-if="String(item.followBy) === String(currentUserId)" class="follow-actions">
-                    <el-button link type="primary" size="small" @click="handleEditFollow(item)">
-                      <el-icon><Edit /></el-icon>
-                    </el-button>
-                    <el-button link type="danger" size="small" @click="handleDeleteFollow(item.id!)">
-                      <el-icon><Delete /></el-icon>
-                    </el-button>
+                  <div class="follow-content">{{ item.followContent }}</div>
+                  <div v-if="item.nextTime" class="follow-meta follow-meta--warn">
+                    下次联系：{{ formatDateTime(item.nextTime) }}
                   </div>
+                  <div v-if="item.nextPlan || item.nextContent" class="follow-meta">
+                    下次计划：{{ item.nextPlan || item.nextContent }}
+                  </div>
+                  <AttachmentUploadField
+                    v-if="item.attachments"
+                    :model-value="item.attachments"
+                    disabled
+                  />
+                  <div v-if="item.remark" class="follow-meta">备注：{{ item.remark }}</div>
                 </div>
-                <div class="follow-content">{{ item.followContent }}</div>
-                <div v-if="item.nextTime" class="follow-meta follow-meta--warn">
-                  下次联系：{{ formatDateTime(item.nextTime) }}
-                </div>
-                <div v-if="item.nextPlan || item.nextContent" class="follow-meta">
-                  下次计划：{{ item.nextPlan || item.nextContent }}
-                </div>
-                <AttachmentUploadField
-                  v-if="item.attachments"
-                  :model-value="item.attachments"
-                  disabled
-                />
-                <div v-if="item.remark" class="follow-meta">备注：{{ item.remark }}</div>
-              </div>
-            </el-timeline-item>
-          </el-timeline>
-          <p v-else class="view-empty-hint">暂无跟进记录</p>
-        </div>
+              </el-timeline-item>
+            </el-timeline>
+            <p v-else class="view-empty-hint">暂无跟进记录</p>
+          </el-tab-pane>
 
-        <div class="opportunity-view-side-block">
-          <h3>阶段记录</h3>
-          <el-timeline v-if="stageLogList.length > 0">
-            <el-timeline-item
-              v-for="item in stageLogList"
-              :key="item.id"
-              :timestamp="formatDateTime(item.createTime)"
-              placement="top"
-            >
-              <div class="stage-card">
-                <div class="stage-change-row">
-                  <el-tag
-                    v-if="item.fromStage || item.fromStageName"
-                    :type="resolveOpportunityTagType(dictStore, 'crm_opportunity_stage', item.fromStage)"
-                    size="small"
-                  >
-                    {{ resolveOpportunityStageLabel(dictStore, item.fromStage, item.fromStageName) }}
-                  </el-tag>
-                  <span v-else class="stage-dash">—</span>
-                  <el-icon class="stage-arrow"><Right /></el-icon>
-                  <el-tag
-                    :type="resolveOpportunityTagType(dictStore, 'crm_opportunity_stage', item.toStage)"
-                    size="small"
-                  >
-                    {{ resolveOpportunityStageLabel(dictStore, item.toStage, item.toStageName) }}
-                  </el-tag>
+          <el-tab-pane label="阶段记录" name="stage">
+            <el-timeline v-if="stageLogList.length > 0">
+              <el-timeline-item
+                v-for="item in stageLogList"
+                :key="item.id"
+                :timestamp="formatDateTime(item.createTime)"
+                placement="top"
+              >
+                <div class="stage-card">
+                  <div class="stage-change-row">
+                    <el-tag
+                      v-if="item.fromStage || item.fromStageName"
+                      :type="resolveOpportunityTagType(dictStore, 'crm_opportunity_stage', item.fromStage)"
+                      size="small"
+                    >
+                      {{ resolveOpportunityStageLabel(dictStore, item.fromStage, item.fromStageName) }}
+                    </el-tag>
+                    <span v-else class="stage-dash">—</span>
+                    <el-icon class="stage-arrow"><Right /></el-icon>
+                    <el-tag
+                      :type="resolveOpportunityTagType(dictStore, 'crm_opportunity_stage', item.toStage)"
+                      size="small"
+                    >
+                      {{ resolveOpportunityStageLabel(dictStore, item.toStage, item.toStageName) }}
+                    </el-tag>
+                  </div>
+                  <p v-if="item.toPercent != null" class="stage-meta">
+                    阶段进度：<strong>{{ item.toPercent }}%</strong>
+                  </p>
+                  <p v-if="item.changeReason" class="stage-meta">变更原因：{{ item.changeReason }}</p>
+                  <p v-if="item.lostDetail" class="stage-meta stage-meta--danger">输单说明：{{ item.lostDetail }}</p>
+                  <p v-if="item.wonRemark" class="stage-meta stage-meta--success">赢单说明：{{ item.wonRemark }}</p>
+                  <p class="stage-meta">变更人：{{ item.createByName || '—' }}</p>
                 </div>
-                <p v-if="item.toPercent != null" class="stage-meta">
-                  阶段进度：<strong>{{ item.toPercent }}%</strong>
-                </p>
-                <p v-if="item.changeReason" class="stage-meta">变更原因：{{ item.changeReason }}</p>
-                <p v-if="item.lostDetail" class="stage-meta stage-meta--danger">输单说明：{{ item.lostDetail }}</p>
-                <p v-if="item.wonRemark" class="stage-meta stage-meta--success">赢单说明：{{ item.wonRemark }}</p>
-                <p class="stage-meta">变更人：{{ item.createByName || '—' }}</p>
-              </div>
-            </el-timeline-item>
-          </el-timeline>
-          <p v-else class="view-empty-hint">暂无阶段变更记录</p>
-        </div>
+              </el-timeline-item>
+            </el-timeline>
+            <p v-else class="view-empty-hint">暂无阶段变更记录</p>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </template>
   </SystemViewDialog>
@@ -215,10 +215,15 @@ const userStore = useUserStore()
 const { loadPerms, hasOpportunityPerm } = useOpportunityPerm()
 const currentUserId = computed(() => userStore.info?.userId || '')
 
-const props = defineProps<{
-  modelValue: boolean
-  opportunityId?: number | string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    opportunityId?: number | string
+  }>(),
+  {
+    modelValue: false
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
@@ -235,6 +240,7 @@ const formVisible = ref(false)
 const changeStageVisible = ref(false)
 const followVisible = ref(false)
 const currentFollowData = ref<OpportunityFollowVO | null>(null)
+const activeSideTab = ref<'follow' | 'stage'>('follow')
 
 const currentOpportunityId = computed(() => props.opportunityId ?? opportunityInfo.value?.id)
 
@@ -278,6 +284,15 @@ function tagField(
   }
 }
 
+function viewTableSection(title: string, fields: ViewField[]): ViewSection {
+  return {
+    title,
+    fields,
+    fieldLayout: 'table',
+    tableMode: 'dual'
+  }
+}
+
 const viewHeroMeta = computed(() => {
   void dictStore.loaded
   const o = opportunityInfo.value
@@ -330,19 +345,18 @@ const viewSections = computed<ViewSection[]>(() => {
   ]
 
   const sections: ViewSection[] = [
-    { title: '基本信息', fields: basicFields },
-    { title: '跟进统计', fields: trackFields }
+    viewTableSection('基本信息', basicFields),
+    viewTableSection('跟进统计', trackFields)
   ]
 
   if (o.competitors || o.keyFactors || o.description) {
-    sections.push({
-      title: '业务信息',
-      fields: [
+    sections.push(
+      viewTableSection('业务信息', [
         { label: '竞争对手', value: o.competitors, span: true },
         { label: '关键决策因素', value: o.keyFactors, span: true },
         { label: '商机描述', value: o.description, span: true }
-      ]
-    })
+      ])
+    )
   }
 
   if (o.status === 'lost' && o.lostReason) {
@@ -353,10 +367,7 @@ const viewSections = computed<ViewSection[]>(() => {
   }
 
   if (o.remark) {
-    sections.push({
-      title: '备注',
-      fields: [{ label: '备注', value: o.remark, span: true }]
-    })
+    sections.push(viewTableSection('备注', [{ label: '备注', value: o.remark, span: true }]))
   }
 
   return sections
@@ -367,6 +378,7 @@ watch(
   async (val) => {
     visible.value = val
     if (val && props.opportunityId) {
+      activeSideTab.value = 'follow'
       await loadPerms()
       await loadData()
     }
@@ -378,6 +390,7 @@ watch(visible, (val) => {
 })
 
 const open = async (id: string | number) => {
+  activeSideTab.value = 'follow'
   await loadPerms()
   visible.value = true
   await loadDetail(id)
@@ -484,30 +497,38 @@ defineExpose({ open })
 </script>
 
 <style scoped lang="scss">
-.opportunity-view-side {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
+.opportunity-view-tabs-section {
+  min-height: 100%;
 
-.opportunity-view-side-block {
-  h3 {
-    margin: 0;
-    padding-left: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #1e293b;
-    border-left: 3px solid #10b981;
-    line-height: 1;
+  :deep(.el-tabs) {
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 200px);
+  }
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 12px;
+    padding: 0 4px;
+    border: none;
+    background: transparent;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+
+  :deep(.el-tabs__content) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  :deep(.el-tab-pane) {
+    min-height: 320px;
   }
 }
 
-.opportunity-view-side-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 16px;
+.tab-toolbar {
+  margin-bottom: 10px;
 }
 
 .follow-card,
@@ -593,7 +614,18 @@ defineExpose({ open })
 <style lang="scss">
 .opportunity-view-dialog.system-view-dialog {
   &.el-dialog {
-    max-width: calc(100vw - 200px);
+    max-width: calc(100vw - 48px);
+  }
+
+  .view-split-left {
+    flex: 0 0 580px;
+    width: 580px;
+    max-width: 50%;
+  }
+
+  .view-split-right {
+    flex: 1;
+    min-width: 0;
   }
 
   .view-split-left .view-hero {
@@ -605,7 +637,7 @@ defineExpose({ open })
     flex-basis: 100%;
     margin-left: 0;
     margin-top: 12px;
-    justify-content: flex-start;
+    justify-content: flex-end;
   }
 
   .opportunity-view-hero-actions {
@@ -613,6 +645,7 @@ defineExpose({ open })
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
+    justify-content: flex-end;
     gap: 8px;
     width: 100%;
 
@@ -622,5 +655,9 @@ defineExpose({ open })
       justify-content: center;
     }
   }
+
+  .view-split-right .opportunity-view-tabs-section {
+    padding: 0;
+  }
 }
 </style>

web-admin/src/views/crm/opportunity/components/OpportunityForm.vue

@@ -2,163 +2,165 @@
   <el-dialog
     :title="title"
     v-model="visible"
-    width="800px"
+    width="1160px"
+    class="dialog-form-layout"
+    align-center
     append-to-body
+    destroy-on-close
     :close-on-click-modal="false"
     @close="handleClose"
-    :destroy-on-close="false"
   >
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="商机名称" prop="opportunityName">
-            <el-input v-model="form.opportunityName" placeholder="请输入商机名称" maxlength="200" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="关联客户" prop="customerId">
-            <el-select
-              v-model="form.customerId"
-              placeholder="请输入客户名称搜索"
-              filterable
-              remote
-              :remote-method="searchCustomer"
-              :loading="customerLoading"
-              clearable
-              style="width: 100%"
-              @change="handleCustomerChange"
-              @focus="handleCustomerFocus"
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      scroll-to-error
+      :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
+    >
+      <div class="form-grid-4">
+        <el-form-item label="商机名称" prop="opportunityName">
+          <el-input v-model="form.opportunityName" placeholder="请输入商机名称" maxlength="200" />
+        </el-form-item>
+        <el-form-item label="关联客户" prop="customerId">
+          <el-select
+            v-model="form.customerId"
+            placeholder="请输入客户名称搜索"
+            filterable
+            remote
+            :remote-method="searchCustomer"
+            :loading="customerLoading"
+            clearable
+            style="width: 100%"
+            @change="handleCustomerChange"
+            @focus="handleCustomerFocus"
+          >
+            <el-option
+              v-for="item in customerList"
+              :key="item.id"
+              :label="`${item.customerNo || ''} - ${item.customerName}`"
+              :value="item.id"
             >
-              <el-option v-for="item in customerList" :key="item.id" :label="`${item.customerNo || ''} - ${item.customerName}`" :value="item.id">
-                <div style="display: flex; justify-content: space-between; align-items: center">
-                  <span>{{ item.customerName }}</span>
-                  <span style="color: #8492a6; font-size: 13px; margin-left: 10px">{{ item.customerNo }}</span>
-                </div>
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="商机阶段" prop="stage">
-            <el-select v-model="form.stage" placeholder="请选择商机阶段" style="width: 100%" @change="handleStageChange">
-              <el-option
-                v-for="opt in dictStore.getOptions('crm_opportunity_stage')"
-                :key="opt.value"
-                :label="opt.label"
-                :value="opt.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="阶段进度" prop="stagePercent">
-            <el-slider v-model="form.stagePercent" :min="0" :max="100" :step="5" show-input />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="预估赢单率(%)" prop="winRate">
-            <el-input-number v-model="form.winRate" :min="0" :max="100" :precision="2" placeholder="请输入赢单率" style="width: 100%" />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="12">
-          <el-form-item label="预估金额" prop="amount">
-            <el-input v-model="form.amount" placeholder="请输入预估金额" type="number" :min="0" style="width: 100%">
-              <template #prepend>¥</template>
-            </el-input>
-          </el-form-item>
-        </el-col> -->
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="预计成交日期" prop="expectDealDate">
-            <el-date-picker v-model="form.expectDealDate" type="date" placeholder="选择预计成交日期" value-format="YYYY-MM-DD" style="width: 100%" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="负责人" prop="ownerUserId">
-            <el-select v-model="form.ownerUserId" placeholder="请选择负责人" filterable clearable style="width: 100%">
-              <el-option
-                v-for="user in userList"
-                :key="user.id"
-                :label="user.nickName"
-                :value="user.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="商机类型" prop="type">
-            <el-select v-model="form.type" placeholder="请选择商机类型" clearable style="width: 100%">
-              <el-option
-                v-for="opt in typeOptions"
-                :key="opt.value"
-                :label="opt.label"
-                :value="opt.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="商机来源" prop="source">
-            <el-select v-model="form.source" placeholder="请选择商机来源" clearable style="width: 100%">
-              <el-option
-                v-for="opt in sourceOptions"
-                :key="opt.value"
-                :label="opt.label"
-                :value="opt.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="商机描述" prop="description">
-            <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入商机描述" maxlength="500" show-word-limit />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="竞争对手" prop="competitors">
-            <el-input v-model="form.competitors" type="textarea" :rows="2" placeholder="请输入竞争对手信息" maxlength="500" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="关键决策因素" prop="keyFactors">
-            <el-input v-model="form.keyFactors" type="textarea" :rows="2" placeholder="请输入客户的关键决策因素" maxlength="500" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" maxlength="500" />
-          </el-form-item>
-        </el-col>
-      </el-row>
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <span>{{ item.customerName }}</span>
+                <span style="color: #8492a6; font-size: 13px; margin-left: 10px">{{ item.customerNo }}</span>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商机阶段" prop="stage">
+          <el-select
+            v-model="form.stage"
+            placeholder="请选择商机阶段"
+            style="width: 100%"
+            @change="handleStageChange"
+          >
+            <el-option
+              v-for="opt in dictStore.getOptions('crm_opportunity_stage')"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预估赢单率(%)" prop="winRate">
+          <el-input-number
+            v-model="form.winRate"
+            :min="0"
+            :max="100"
+            :precision="2"
+            placeholder="请输入赢单率"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="预计成交日期" prop="expectDealDate">
+          <el-date-picker
+            v-model="form.expectDealDate"
+            type="date"
+            placeholder="选择预计成交日期"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="负责人" prop="ownerUserId">
+          <el-select
+            v-model="form.ownerUserId"
+            placeholder="请选择负责人"
+            filterable
+            clearable
+            style="width: 100%"
+          >
+            <el-option v-for="user in userList" :key="user.id" :label="user.nickName" :value="user.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商机类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择商机类型" clearable style="width: 100%">
+            <el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商机来源" prop="source">
+          <el-select v-model="form.source" placeholder="请选择商机来源" clearable style="width: 100%">
+            <el-option v-for="opt in sourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="阶段进度(%)" prop="stagePercent">
+          <el-input-number
+            v-model="form.stagePercent"
+            :min="0"
+            :max="100"
+            :step="5"
+            placeholder="请输入阶段进度"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="商机描述" prop="description">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入商机描述"
+            maxlength="500"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="竞争对手" prop="competitors">
+          <el-input
+            v-model="form.competitors"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入竞争对手信息"
+            maxlength="500"
+          />
+        </el-form-item>
+        <el-form-item label="关键决策因素" prop="keyFactors">
+          <el-input
+            v-model="form.keyFactors"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入客户的关键决策因素"
+            maxlength="500"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" class="form-col-span-2">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注信息"
+            maxlength="500"
+          />
+        </el-form-item>
+      </div>
     </el-form>
 
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
+        <el-button class="btn-ghost" @click="handleClose">
+          <el-icon><Close /></el-icon>取消
+        </el-button>
+        <el-button class="btn-main" type="primary" :loading="submitLoading" @click="submitForm">
+          <el-icon><Check /></el-icon>确定
+        </el-button>
       </div>
     </template>
   </el-dialog>
@@ -434,6 +436,6 @@ const resetForm = () => {
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  gap: 8px;
 }
 </style>

web-admin/src/views/crm/product/index.vue

@@ -113,13 +113,30 @@
           <el-table-column
             prop="productName"
             label="产品名称"
-            min-width="160"
+            min-width="200"
             align="center"
             header-align="center"
-            show-overflow-tooltip
           >
             <template #default="{ row }">
-              <el-link type="primary" @click="handleView(row)">{{ row.productName }}</el-link>
+              <div class="product-name-cell">
+                <el-link type="primary" @click="handleView(row)">{{ row.productName }}</el-link>
+                <el-tag
+                  v-if="Number(row.isToxic) === 1"
+                  type="danger"
+                  size="small"
+                  class="product-hazard-tag"
+                >
+                  毒
+                </el-tag>
+                <el-tag
+                  v-if="Number(row.isExplosive) === 1"
+                  type="danger"
+                  size="small"
+                  class="product-hazard-tag"
+                >
+                  爆
+                </el-tag>
+              </div>
             </template>
           </el-table-column>
           <el-table-column
@@ -187,30 +204,6 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column
-            label="易制毒"
-            min-width="90"
-            align="center"
-            header-align="center"
-          >
-            <template #default="{ row }">
-              <el-tag :type="getHazardFlagTagType(row.isToxic)" size="small">
-                {{ formatHazardFlag(row.isToxic) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="易制爆"
-            min-width="90"
-            align="center"
-            header-align="center"
-          >
-            <template #default="{ row }">
-              <el-tag :type="getHazardFlagTagType(row.isExplosive)" size="small">
-                {{ formatHazardFlag(row.isExplosive) }}
-              </el-tag>
-            </template>
-          </el-table-column>
           <el-table-column
             label="操作"
             min-width="160"
@@ -622,7 +615,7 @@ const productViewSections = computed<ViewSection[]>(() => {
   ]
 
   const sections: ViewSection[] = [
-    { title: '基本信息', fields: basicFields },
+    { title: '基本信息', fields: basicFields, fieldLayout: 'table', tableMode: 'triple' },
     { title: '价格信息', fields: priceFields },
     { title: '产品图片', fields: [], slot: 'images' }
   ]
@@ -929,6 +922,26 @@ onMounted(() => {
   font-weight: 600;
 }
 
+.product-name-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.product-name-cell .el-link {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-hazard-tag {
+  flex-shrink: 0;
+}
+
 .product-images {
   display: flex;
   flex-wrap: wrap;

web-admin/src/views/crm/quote/components/QuoteDetailDialog.vue

@@ -288,11 +288,11 @@
     </template>
   </SystemViewDialog>
 
-  <CustomerDetailDialog ref="customerDetailRef" />
+  <CustomerDetailDialog v-if="customerDialogActive" ref="customerDetailRef" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, defineAsyncComponent, nextTick } from 'vue'
 import {
   CircleClose,
   Delete,
@@ -306,7 +306,10 @@ import SystemViewDialog, {
   type ViewSection
 } from '@/components/business/system-view-dialog/index.vue'
 import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
-import CustomerDetailDialog from '@/views/crm/customer/CustomerDetailDialog.vue'
+
+const CustomerDetailDialog = defineAsyncComponent(
+  () => import('@/views/crm/customer/CustomerDetailDialog.vue')
+)
 import { useDictStore } from '@/store/modules/dict'
 import { useQuotePerm } from '@/hooks/business/useQuotePerm'
 import { $modal } from '@/utils/modal'
@@ -339,7 +342,8 @@ const visible = ref(false)
 const loading = ref(false)
 const quoteInfo = ref<QuoteVO>({} as QuoteVO)
 const approvalList = ref<QuoteApprovalVO[]>([])
-const customerDetailRef = ref<InstanceType<typeof CustomerDetailDialog> | null>(null)
+const customerDetailRef = ref<{ open: (id: string | number) => Promise<void> } | null>(null)
+const customerDialogActive = ref(false)
 const currentQuoteId = ref<string | number>()
 
 const isPurchase = computed(() => quoteInfo.value?.quoteType === 'purchase')
@@ -386,6 +390,16 @@ function getApprovalTimelineColor(result?: string) {
   return '#94a3b8'
 }
 
+/** 8 列表格区块：禁用长字段独占行，保证每行尽量排满 4 组 */
+function viewQuadTableSection(title: string, fields: ViewField[]): ViewSection {
+  return {
+    title,
+    fields: fields.map((field) => ({ ...field, long: false, fullSpan: false })),
+    fieldLayout: 'table',
+    tableMode: 'quad'
+  }
+}
+
 const viewHeroMeta = computed(() => {
   void dictStore.loaded
   const q = quoteInfo.value
@@ -444,7 +458,7 @@ const viewSections = computed<ViewSection[]>(() => {
   ]
 
   const sections: ViewSection[] = [
-    { title: '基本信息', fields: basicFields },
+    viewQuadTableSection('基本信息', basicFields),
     { title: '金额汇总', fields: amountFields },
     {
       title: '产品明细',
@@ -519,10 +533,11 @@ async function refresh() {
   await loadDetail(currentQuoteId.value)
 }
 
-function handleViewCustomer() {
-  if (quoteInfo.value?.customerId) {
-    customerDetailRef.value?.open(quoteInfo.value.customerId as number)
-  }
+async function handleViewCustomer() {
+  if (!quoteInfo.value?.customerId) return
+  customerDialogActive.value = true
+  await nextTick()
+  customerDetailRef.value?.open(quoteInfo.value.customerId as number)
 }
 
 function handleEdit() {

web-admin/src/views/db/inventory/index.vue

@@ -455,7 +455,7 @@
           />
         </el-form-item>
         <el-form-item label="车牌号" prop="vehicleNo">
-          <DbVehicleSelect ref="vehicleSelectRef" v-model="formData.vehicleNo" />
+          <PlVehicleSelect v-model="formData.vehicleNo" />
         </el-form-item>
         <el-form-item label="计划号" prop="planNo" class="form-col-span-2">
           <el-input v-model="formData.planNo" placeholder="请输入计划号" :readonly="isPlanNoReadonly" />
@@ -511,7 +511,7 @@
   import DbCrmProductSelect from '@/components/business/db/DbCrmProductSelect.vue'
   import DbInventoryRelatedViewDialog from '@/components/business/db/DbInventoryRelatedViewDialog.vue'
   import DbPoundSlipQrcodeDialog from '@/components/business/db/DbPoundSlipQrcodeDialog.vue'
-  import DbVehicleSelect from '@/components/business/db/DbVehicleSelect.vue'
+  import PlVehicleSelect from '@/components/business/pl/PlVehicleSelect.vue'
   import { useDbInstantSearch } from '@/composables/useDbInstantSearch'
   import { $modal } from '@/utils/modal'
   import {
@@ -549,7 +549,6 @@
 
   const modalOpen = ref(false)
   const editingRecord = ref<InventoryRecord | null>(null)
-  const vehicleSelectRef = ref<InstanceType<typeof DbVehicleSelect> | null>(null)
   const relatedModalOpen = ref(false)
   const loadingRelated = ref(false)
   const relatedData = ref<InventoryRelatedData>({ plan: null, weighing: null })
@@ -597,7 +596,7 @@
     partnerCompany: [{ required: true, message: '请输入往来单位', trigger: 'blur' }],
     productId: [{ required: true, message: '请选择 CRM 产品', trigger: 'change' }],
     quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
-    vehicleNo: [{ required: true, message: '请输入车牌号', trigger: 'blur' }]
+    vehicleNo: [{ required: true, message: '请选择车牌号', trigger: 'change' }]
   }
 
   const formatKgToTon = (kg: number | undefined | null) => {
@@ -926,10 +925,6 @@
       if (!valid) return
       saving.value = true
       try {
-        if (formData.vehicleNo?.trim()) {
-          await vehicleSelectRef.value?.ensureVehicleExists()
-        }
-
         const cleanData = (data: Record<string, unknown>) => {
           const cleaned: Record<string, unknown> = {}
           for (const key in data) {

web-admin/src/views/db/vehicles/index.vue

@@ -1,289 +0,0 @@
-<template>
-  <div class="page-container">
-    <section class="panel">
-      <div class="panel-top">
-        <h2 class="title-bar-heading">车牌管理</h2>
-      </div>
-
-      <div class="list-toolbar">
-        <div class="list-toolbar-row db-list-toolbar-row">
-          <div class="list-toolbar-selected">
-            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
-          </div>
-          <el-input
-            v-model="searchKeyword"
-            class="db-toolbar-quick-search-input"
-            placeholder="车牌号 / 备注"
-            clearable
-            @keyup.enter="handleQuickSearch"
-            @clear="handleQuickSearchClear"
-          >
-            <template #suffix>
-              <el-icon class="db-quick-search-icon" @click="handleQuickSearch"><Search /></el-icon>
-            </template>
-          </el-input>
-          <el-button class="btn-main" type="primary" @click="handleAdd">
-            <el-icon><Plus /></el-icon>
-            新增车牌号
-          </el-button>
-          <el-button class="btn-ghost" :loading="loading" @click="loadData">
-            <el-icon><Refresh /></el-icon>
-            刷新
-          </el-button>
-        </div>
-      </div>
-
-      <div class="list-body list-wrap">
-        <el-table
-          class="list-table"
-          :data="tableData"
-          v-loading="loading"
-          stripe
-          row-key="id"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column type="selection" min-width="55" align="center" />
-          <el-table-column
-            type="index"
-            label="序号"
-            min-width="68"
-            align="center"
-            header-align="center"
-          />
-          <el-table-column
-            prop="vehicleNo"
-            label="车牌号"
-            min-width="160"
-            align="center"
-            header-align="center"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            prop="remarks"
-            label="备注"
-            min-width="240"
-            align="center"
-            header-align="center"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            label="操作"
-            min-width="200"
-            align="center"
-            header-align="center"
-            fixed="right"
-          >
-            <template #default="{ row }">
-              <div class="db-op-actions">
-                <el-button class="btn-op-item primary" @click="handleEdit(row)">
-                  <el-icon><Edit /></el-icon>
-                  编辑
-                </el-button>
-                <el-button class="btn-op-item danger" @click="handleDelete(row.id)">
-                  <el-icon><Delete /></el-icon>
-                  删除
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div class="pagination list-pager-bar">
-          <el-pagination
-            v-show="total > 0"
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :total="total"
-            :page-sizes="[10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            @current-change="applyPagination"
-            @size-change="handleSizeChange"
-          />
-        </div>
-      </div>
-    </section>
-
-    <el-dialog
-      v-model="modalOpen"
-      :title="editingVehicle ? '修改车牌号' : '新增车牌号'"
-      width="520px"
-      align-center
-      destroy-on-close
-      :close-on-click-modal="false"
-      class="dialog-form-layout"
-      modal-class="order-module-dialog-mask"
-      @close="handleModalClose"
-    >
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-position="top"
-        class="form-grid-2"
-        scroll-to-error
-      >
-        <el-form-item label="车牌号" prop="vehicleNo">
-          <el-input v-model="formData.vehicleNo" placeholder="请输入车牌号" clearable />
-        </el-form-item>
-        <el-form-item label="备注" prop="remarks" class="form-col-span-2">
-          <el-input v-model="formData.remarks" type="textarea" :rows="3" placeholder="选填" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="handleModalClose">
-          <el-icon><Close /></el-icon>
-          取消
-        </el-button>
-        <el-button type="primary" :loading="saving" @click="handleSubmit">
-          <el-icon><Check /></el-icon>
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-  /**
-   * UI 模式 P01 · 标准列表 CRUD
-   * 参考：/#/crm/quote · src/views/crm/quote/index.vue
-   */
-  import { Check, Close, Delete, Edit, Plus, Refresh, Search } from '@element-plus/icons-vue'
-  import { vehicleApi, type Vehicle, type VehicleCreate } from '@/api/db/vehicles'
-  import { useDbInstantSearch } from '@/composables/useDbInstantSearch'
-  import { $modal } from '@/utils/modal'
-
-  defineOptions({ name: 'DbVehicles' })
-
-  const loading = ref(false)
-  const saving = ref(false)
-  const allRecords = ref<Vehicle[]>([])
-  const tableData = ref<Vehicle[]>([])
-  const total = ref(0)
-  const currentPage = ref(1)
-  const pageSize = ref(10)
-  const searchKeyword = ref('')
-  const selectedRows = ref<Vehicle[]>([])
-
-  const modalOpen = ref(false)
-  const editingVehicle = ref<Vehicle | null>(null)
-  const formRef = ref()
-  const formData = reactive<VehicleCreate>({
-    vehicleNo: '',
-    remarks: ''
-  })
-
-  const formRules = {
-    vehicleNo: [{ required: true, message: '请输入车牌号', trigger: 'blur' }]
-  }
-
-  const applyPagination = () => {
-    total.value = allRecords.value.length
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    tableData.value = allRecords.value.slice(start, end)
-  }
-
-  const loadData = async () => {
-    loading.value = true
-    try {
-      const keyword = searchKeyword.value.trim()
-      allRecords.value = await vehicleApi.list(keyword || undefined)
-      const maxPage = Math.ceil(allRecords.value.length / pageSize.value) || 1
-      if (currentPage.value > maxPage) {
-        currentPage.value = 1
-      }
-      applyPagination()
-    } catch (error) {
-      console.error('加载车牌列表失败', error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const handleQuickSearch = () => {
-    currentPage.value = 1
-    loadData()
-  }
-
-  const handleQuickSearchClear = () => {
-    searchKeyword.value = ''
-    handleQuickSearch()
-  }
-
-  const handleSelectionChange = (selection: Vehicle[]) => {
-    selectedRows.value = selection
-  }
-
-  const handleSizeChange = (size: number) => {
-    pageSize.value = size
-    currentPage.value = 1
-    applyPagination()
-  }
-
-  const handleAdd = () => {
-    editingVehicle.value = null
-    Object.assign(formData, { vehicleNo: '', remarks: '' })
-    modalOpen.value = true
-  }
-
-  const handleEdit = (record: Vehicle) => {
-    editingVehicle.value = record
-    Object.assign(formData, {
-      vehicleNo: record.vehicleNo,
-      remarks: record.remarks || ''
-    })
-    modalOpen.value = true
-  }
-
-  const handleDelete = async (id: string) => {
-    try {
-      await $modal.confirm('确定要删除该车牌号吗？')
-      await vehicleApi.delete(id)
-      $modal.msgSuccess('删除成功')
-      loadData()
-    } catch {
-      // 用户取消或请求失败
-    }
-  }
-
-  const handleSubmit = async () => {
-    if (!formRef.value) return
-
-    await formRef.value.validate(async (valid: boolean) => {
-      if (!valid) return
-      saving.value = true
-      try {
-        const payload: VehicleCreate = {
-          vehicleNo: formData.vehicleNo.trim(),
-          remarks: formData.remarks?.trim() || null
-        }
-        if (editingVehicle.value) {
-          await vehicleApi.update(editingVehicle.value.id, payload)
-          $modal.msgSuccess('修改成功')
-        } else {
-          await vehicleApi.create(payload)
-          $modal.msgSuccess('新增成功')
-        }
-        modalOpen.value = false
-        loadData()
-      } catch (error) {
-        console.error('保存车牌失败', error)
-      } finally {
-        saving.value = false
-      }
-    })
-  }
-
-  const handleModalClose = () => {
-    modalOpen.value = false
-    editingVehicle.value = null
-    formRef.value?.resetFields()
-  }
-
-  useDbInstantSearch(() => searchKeyword.value, handleQuickSearch)
-
-  onMounted(() => {
-    loadData()
-  })
-</script>

web-admin/src/views/db/weighing/index.vue

@@ -357,7 +357,7 @@
         scroll-to-error
       >
         <el-form-item label="车牌号" prop="vehicleNo">
-          <DbVehicleSelect ref="vehicleSelectRef" v-model="formData.vehicleNo" />
+          <PlVehicleSelect v-model="formData.vehicleNo" />
         </el-form-item>
         <el-form-item label="产品" prop="productId">
           <DbCrmProductSelect
@@ -504,7 +504,7 @@
   import DbCrmProductSelect from '@/components/business/db/DbCrmProductSelect.vue'
   import DbRelatedViewDialog from '@/components/business/db/DbRelatedViewDialog.vue'
   import { buildWeighingRelatedSections } from '@/components/business/db/db-related-view'
-  import DbVehicleSelect from '@/components/business/db/DbVehicleSelect.vue'
+  import PlVehicleSelect from '@/components/business/pl/PlVehicleSelect.vue'
   import { useDbInstantSearch } from '@/composables/useDbInstantSearch'
   import { $modal } from '@/utils/modal'
   import { inventoryApi } from '@/api/db/inventory'
@@ -552,7 +552,6 @@
   const timeRange = ref<[string, string] | null>([formatYmd(new Date()), formatYmd(new Date())])
 
   const modalOpen = ref(false)
-  const vehicleSelectRef = ref<InstanceType<typeof DbVehicleSelect> | null>(null)
   const editingRecord = ref<WeighingRecord | null>(null)
   const relatedModalOpen = ref(false)
   const loadingRelated = ref(false)
@@ -592,7 +591,7 @@
   })
 
   const formRules = {
-    vehicleNo: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
+    vehicleNo: [{ required: true, message: '请选择车牌号', trigger: 'change' }],
     productId: [{ required: true, message: '请选择 CRM 产品', trigger: 'change' }],
     supplier: [{ required: true, message: '请输入供货单位', trigger: 'blur' }],
     consignee: [{ required: true, message: '请输入收货单位', trigger: 'blur' }]
@@ -903,9 +902,6 @@
       if (!valid) return
       saving.value = true
       try {
-        if (formData.vehicleNo?.trim()) {
-          await vehicleSelectRef.value?.ensureVehicleExists()
-        }
         const hasGrossWeight = formData.grossWeight && formData.grossWeight > 0
         const hasTareWeight = formData.tareWeight && formData.tareWeight > 0
         if (hasGrossWeight && hasTareWeight) {

web-admin/src/views/system/dept/index.vue

@@ -496,18 +496,25 @@ const dictStore = useDictStore()
   const viewSections = computed(() => [
     {
       title: '基本信息',
+      fieldLayout: 'table' as const,
+      tableMode: 'triple' as const,
       fields: [
-        { label: '组织名称', value: viewRow.value?.deptName },
-        { label: '上级组织', value: getParentDeptDisplay(viewRow.value?.parentId) },
-        { label: '组织类别', value: getDeptCategoryLabel(viewRow.value?.deptCategoryCode || '') },
+        { label: '组织名称', value: viewRow.value?.deptName, long: false },
+        { label: '上级组织', value: getParentDeptDisplay(viewRow.value?.parentId), long: false },
+        {
+          label: '组织类别',
+          value: getDeptCategoryLabel(viewRow.value?.deptCategoryCode || ''),
+          long: false
+        },
         {
           label: '状态',
           value: viewRow.value?.status === '1' ? '正常' : '停用',
-          tagType: viewRow.value?.status === '1' ? 'success' : 'info'
+          tagType: viewRow.value?.status === '1' ? 'success' : 'info',
+          long: false
         },
-        { label: '负责人', value: viewRow.value?.leader },
-        { label: '联系电话', value: viewRow.value?.leaderPhone },
-        { label: '备注', value: viewRow.value?.remark, span: true }
+        { label: '负责人', value: viewRow.value?.leader, long: false },
+        { label: '联系电话', value: viewRow.value?.leaderPhone, long: false },
+        { label: '备注', value: viewRow.value?.remark, long: false }
       ]
     }
   ])

web-admin/src/views/system/dict/index.vue

@@ -547,11 +547,13 @@
   const viewSections = computed(() => [
     {
       title: '基本信息',
+      fieldLayout: 'table' as const,
+      tableMode: 'triple' as const,
       fields: [
-        { label: '字典名称', value: viewRow.value?.dictName },
-        { label: '字典类型编码', value: viewRow.value?.dictType },
-        { label: '备注', value: viewRow.value?.remark, span: true },
-        { label: '创建时间', value: viewRow.value?.createTime }
+        { label: '字典名称', value: viewRow.value?.dictName, long: false },
+        { label: '字典类型编码', value: viewRow.value?.dictType, long: false },
+        { label: '创建时间', value: viewRow.value?.createTime, long: false },
+        { label: '备注', value: viewRow.value?.remark, long: false }
       ]
     }
   ])

web-admin/src/views/system/menu/index.vue

@@ -62,6 +62,8 @@
             min-width="180"
             align="left"
             header-align="left"
+            class-name="col-menu-name"
+            label-class-name="col-menu-name"
           />
           <el-table-column
             prop="menuType"
@@ -340,28 +342,33 @@
   const viewSections = computed(() => [
     {
       title: '基本信息',
+      fieldLayout: 'table' as const,
+      tableMode: 'triple' as const,
       fields: [
-        { label: '菜单名称', value: viewRow.value?.menuName },
+        { label: '菜单名称', value: viewRow.value?.menuName, long: false },
         {
           label: '菜单类型',
           value: dictStore.getLabel('menu_type', viewRow.value?.menuType || ''),
-          tagType: dictStore.getTagType('menu_type', viewRow.value?.menuType || '')
+          tagType: dictStore.getTagType('menu_type', viewRow.value?.menuType || ''),
+          long: false
         },
-        { label: '路由路径', value: viewRow.value?.path },
-        { label: '组件路径', value: viewRow.value?.component },
-        { label: '权限标识', value: viewRow.value?.perms },
-        { label: '是否外链', value: viewRow.value?.isFrame === 1 ? '否' : '是' },
+        { label: '路由路径', value: viewRow.value?.path, long: false },
+        { label: '组件路径', value: viewRow.value?.component, long: false },
+        { label: '权限标识', value: viewRow.value?.perms, long: false },
+        { label: '是否外链', value: viewRow.value?.isFrame === 1 ? '否' : '是', long: false },
         {
           label: '显示状态',
           value: dictStore.getLabel('sys_visible', viewRow.value?.visible || ''),
-          tagType: dictStore.getTagType('sys_visible', viewRow.value?.visible || '')
+          tagType: dictStore.getTagType('sys_visible', viewRow.value?.visible || ''),
+          long: false
         },
         {
           label: '状态',
           value: dictStore.getLabel('sys_status', viewRow.value?.status || ''),
-          tagType: dictStore.getTagType('sys_status', viewRow.value?.status || '')
+          tagType: dictStore.getTagType('sys_status', viewRow.value?.status || ''),
+          long: false
         },
-        { label: '备注', value: viewRow.value?.remark, span: true }
+        { label: '备注', value: viewRow.value?.remark, long: false }
       ]
     }
   ])
@@ -570,4 +577,14 @@
       margin-bottom: 0;
     }
   }
+
+  :deep(.col-menu-name.el-table__cell) {
+    text-align: left !important;
+
+    > .cell {
+      display: flex;
+      justify-content: flex-start !important;
+      text-align: left !important;
+    }
+  }
 </style>

web-admin/src/views/system/post/index.vue

@@ -389,16 +389,19 @@ const dictStore = useDictStore()
     const sections: any[] = [
       {
         title: '基本信息',
+        fieldLayout: 'table' as const,
+        tableMode: 'triple' as const,
         fields: [
-          { label: '职位名称', value: row.postName },
-          { label: '职位编码', value: row.postCode },
+          { label: '职位名称', value: row.postName, long: false },
+          { label: '职位编码', value: row.postCode, long: false },
           {
             label: '状态',
             value: dictStore.getLabel('sys_status', row.status),
-            tagType: dictStore.getTagType('sys_status', row.status)
+            tagType: dictStore.getTagType('sys_status', row.status),
+            long: false
           },
-          { label: '创建时间', value: row.createTime },
-          { label: '备注', value: row.remark, span: true }
+          { label: '创建时间', value: row.createTime, long: false },
+          { label: '备注', value: row.remark, long: false }
         ]
       }
     ]

web-admin/src/views/system/role/index.vue

@@ -949,15 +949,18 @@ const dictStore = useDictStore()
     const sections: ViewSection[] = [
       {
         title: '基本信息',
+        fieldLayout: 'table',
+        tableMode: 'triple',
         fields: [
-          { label: '角色名称', value: row.roleName },
+          { label: '角色名称', value: row.roleName, long: false },
           {
             label: '状态',
             value: dictStore.getLabel('sys_status', row.status),
-            tagType: dictStore.getTagType('sys_status', row.status) as 'success' | 'info'
+            tagType: dictStore.getTagType('sys_status', row.status) as 'success' | 'info',
+            long: false
           },
-          { label: '创建时间', value: row.createTime },
-          { label: '备注', value: row.remark, span: true }
+          { label: '创建时间', value: row.createTime, long: false },
+          { label: '备注', value: row.remark, long: false }
         ]
       },
       {

web-admin/src/views/system/tenant/index.vue

@@ -294,12 +294,14 @@
     return [
       {
         title: '基本信息',
+        fieldLayout: 'table' as const,
+        tableMode: 'triple' as const,
         fields: [
-          { label: '租户编号', value: row.tenantNo },
-          { label: '租户名称', value: row.tenantName },
-          { label: '联系人', value: row.contactName },
-          { label: '联系电话', value: row.contactPhone },
-          { label: '备注', value: row.remark, span: true }
+          { label: '租户编号', value: row.tenantNo, long: false },
+          { label: '租户名称', value: row.tenantName, long: false },
+          { label: '联系人', value: row.contactName, long: false },
+          { label: '联系电话', value: row.contactPhone, long: false },
+          { label: '备注', value: row.remark, long: false }
         ]
       }
     ]

web-admin/src/views/system/user/index.vue

@@ -615,25 +615,29 @@ const dictStore = useDictStore()
     return [
       {
         title: '基本信息',
+        fieldLayout: 'table' as const,
+        tableMode: 'triple' as const,
         fields: [
-          { label: '用户账号', value: row.userNo },
-          { label: '用户名', value: row.nickName },
-          { label: '所属组织', value: formatUserDeptDisplay(row) },
-          { label: '手机号', value: row.phoneNo },
-          { label: '邮箱', value: row.email },
+          { label: '用户账号', value: row.userNo, long: false },
+          { label: '用户名', value: row.nickName, long: false },
+          { label: '所属组织', value: formatUserDeptDisplay(row), long: false },
+          { label: '手机号', value: row.phoneNo, long: false },
+          { label: '邮箱', value: row.email, long: false },
           {
             label: '性别',
             value:
-              ({ '0': '男', '1': '女', '2': '未知' } as Record<string, string>)[row.sex] || '未知'
+              ({ '0': '男', '1': '女', '2': '未知' } as Record<string, string>)[row.sex] || '未知',
+            long: false
           },
           {
             label: '状态',
             value: dictStore.getLabel('sys_status', row.status),
-            tagType: dictStore.getTagType('sys_status', row.status)
+            tagType: dictStore.getTagType('sys_status', row.status),
+            long: false
           },
-          { label: '角色', value: formatUserRoleDisplay(row), span: true },
-          { label: '创建时间', value: row.createTime },
-          { label: '备注', value: row.remark, span: true }
+          { label: '创建时间', value: row.createTime, long: false },
+          { label: '角色', value: formatUserRoleDisplay(row), long: false },
+          { label: '备注', value: row.remark, long: false }
         ]
       }
     ]