修改

src/views/index.vue

@@ -57,7 +57,46 @@
       </el-col>
     </el-row>
 
-    <!-- 图表与列表区域 -->
+    <!-- 数据图表区域 -->
+    <el-row :gutter="20" class="content-row">
+      <!-- 客户增长趋势 -->
+      <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <div class="clearfix">
+              <span class="section-title">最近七天客户趋势</span>
+            </div>
+          </template>
+          <div ref="barChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 订单金额趋势 -->
+      <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <div class="clearfix">
+              <span class="section-title">本月订单金额趋势</span>
+            </div>
+          </template>
+          <div ref="lineChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 客户类型分布 -->
+      <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col">
+        <el-card shadow="hover" class="chart-card">
+          <template #header>
+            <div class="clearfix">
+              <span class="section-title">客户类型分布</span>
+            </div>
+          </template>
+          <div ref="pieChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 列表区域 -->
     <el-row :gutter="20" class="content-row">
       <!-- 最新订单 -->
       <el-col :xs="24" :sm="24" :lg="16" class="card-panel-col">
@@ -116,33 +155,159 @@
 </template>
 
 <script setup name="Index" lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+// 图表引用
+const barChartRef = ref<HTMLElement | null>(null);
+const lineChartRef = ref<HTMLElement | null>(null);
+const pieChartRef = ref<HTMLElement | null>(null);
+
+let barChart: echarts.ECharts | null = null;
+let lineChart: echarts.ECharts | null = null;
+let pieChart: echarts.ECharts | null = null;
+
+// 图表初始化
+const initCharts = () => {
+  // 柱形图 - 客户趋势
+  if (barChartRef.value) {
+    barChart = echarts.init(barChartRef.value);
+    barChart.setOption({
+      tooltip: { trigger: 'axis' },
+      grid: { top: '15%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+      xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
+      yAxis: { type: 'value' },
+      series: [
+        {
+          name: '新增客户',
+          type: 'bar',
+          data: [12, 20, 15, 8, 7, 11, 13],
+          itemStyle: { color: '#409EFF' },
+          barWidth: '40%'
+        }
+      ]
+    });
+  }
+
+  // 折线图 - 订单金额
+  if (lineChartRef.value) {
+    lineChart = echarts.init(lineChartRef.value);
+    lineChart.setOption({
+      tooltip: { trigger: 'axis' },
+      grid: { top: '15%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+      xAxis: { type: 'category', boundaryGap: false, data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'] },
+      yAxis: { type: 'value' },
+      series: [
+        {
+          name: '订单金额(元)',
+          type: 'line',
+          data: [8200, 9320, 9010, 9340, 12900, 13300, 13200],
+          smooth: true,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(245, 108, 108, 0.5)' },
+              { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
+            ])
+          },
+          itemStyle: { color: '#f56c6c' }
+        }
+      ]
+    });
+  }
+
+  // 饼图 - 客户类型
+  if (pieChartRef.value) {
+    pieChart = echarts.init(pieChartRef.value);
+    pieChart.setOption({
+      tooltip: { trigger: 'item' },
+      legend: { bottom: '0%', left: 'center' },
+      series: [
+        {
+          name: '客户类型',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: { show: false, position: 'center' },
+          emphasis: {
+            label: { show: true, fontSize: 16, fontWeight: 'bold' }
+          },
+          labelLine: { show: false },
+          data: [
+            { value: 1048, name: '企业客户' },
+            { value: 735, name: '大客户' },
+            { value: 484, name: '代理商' },
+            { value: 300, name: '其他' }
+          ]
+        }
+      ]
+    });
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initCharts();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+const handleResize = () => {
+  barChart?.resize();
+  lineChart?.resize();
+  pieChart?.resize();
+};
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  barChart?.dispose();
+  lineChart?.dispose();
+  pieChart?.dispose();
+});
 
 // 模拟订单数据
 const orderList = ref([
   {
     orderNo: 'ORD20231001',
     customer: '张三网络',
-    product: '年度营销SaaS套餐(旗舰版)',
+    product: '达伯埃70gA4复印纸5包/箱',
     amount: '12800',
     status: '已支付',
     date: '2023-10-24 10:23:45'
   },
-  { orderNo: 'ORD20231002', customer: '李四科技', product: '短信按量计费包(10万条)', amount: '4500', status: '待发货', date: '2023-10-24 09:15:30' },
-  { orderNo: 'ORD20231003', customer: '王五实业', product: '私有化部署实施服务费用', amount: '35000', status: '已完成', date: '2023-10-23 16:40:12' },
-  { orderNo: 'ORD20231004', customer: '赵六电商', product: '会员积分商城插件', amount: '899', status: '待支付', date: '2023-10-23 15:20:00' },
+  {
+    orderNo: 'ORD20231002',
+    customer: '李四科技',
+    product: '惠普Q7551A(51A)硒鼓',
+    amount: '4500',
+    status: '待发货',
+    date: '2023-10-24 09:15:30'
+  },
+  {
+    orderNo: 'ORD20231003',
+    customer: '王五实业',
+    product: '兄弟TN-175M品红色大容量硒鼓',
+    amount: '35000',
+    status: '已完成',
+    date: '2023-10-23 16:40:12'
+  },
+  { orderNo: 'ORD20231004', customer: '赵六电商', product: '佳能IR2545i数码复印机', amount: '899', status: '待支付', date: '2023-10-23 15:20:00' },
   { orderNo: 'ORD20231005', customer: '钱七餐饮', product: '微信小程序点单系统', amount: '6800', status: '已完成', date: '2023-10-22 11:10:05' },
   { orderNo: 'ORD20231006', customer: '孙八教育', product: '在线直播课程系统升级', amount: '15000', status: '已支付', date: '2023-10-22 09:05:22' }
 ]);
 
 // 模拟商品排行榜数据
 const productRankings = ref([
-  { name: '年度营销SaaS套餐', sales: 1250, percentage: 90 },
-  { name: '微信小程序商城源码', sales: 980, percentage: 75 },
-  { name: '短信按量计费包', sales: 856, percentage: 65 },
-  { name: '私有化部署实施', sales: 420, percentage: 40 },
-  { name: '会员积分商城插件', sales: 315, percentage: 30 },
-  { name: '分销代理裂变系统', sales: 258, percentage: 20 }
+  { name: '达伯埃70gA4复印纸5包/箱', sales: 1250, percentage: 90 },
+  { name: '旗舰70gA4复印纸8包/箱', sales: 980, percentage: 75 },
+  { name: '惠普Q7551A(51A)硒鼓', sales: 856, percentage: 65 },
+  { name: '兄弟TN-175M品红色大容量硒鼓', sales: 420, percentage: 40 },
+  { name: '佳能IR2545i数码复印机', sales: 315, percentage: 30 },
+  { name: '汇金7*70mm钻刀', sales: 258, percentage: 20 }
 ]);
 
 // 获取状态对应标签类型
@@ -287,6 +452,12 @@ const getProgressColor = (index: number) => {
       }
     }
 
+    .chart-card {
+      border-radius: 8px;
+      border: none;
+      height: 100%;
+    }
+
     .table-card {
       border-radius: 8px;
       border: none;

src/views/order/saleOrder/deliverDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :model-value="modelValue" title="发货" width="1200px" @update:model-value="handleDialogChange" @open="handleOpen" @close="handleClose">
+  <el-dialog :model-value="modelValue" title="发货" width="1300px" @update:model-value="handleDialogChange" @open="handleOpen" @close="handleClose">
     <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
       <el-row :gutter="20">
         <el-col :span="12">

src/views/order/saleOrder/sendDetail.vue

@@ -159,19 +159,19 @@
     <el-card shadow="never" class="mb-2" v-show="orderDetail.orderStatus != '0'">
       <template #header>
         <div class="card-header">
-          <span>发货信息:共{{ 0 }}个包裹</span>
+          <span>发货信息:共{{ orderDeliverList.length }}个包裹</span>
           <el-button type="primary" style="float: right" @click="handleAddDeliver(orderDetail)">添加发货信息</el-button>
         </div>
       </template>
-      <div v-show="totalQuantitySent > 0">
+      <div v-for="deliver in orderDeliverList" :key="deliver.id" class="mb-4">
         <div style="white-space: nowrap" class="mb-2">
-          <span style="margin-right: 16px">发货单号:--</span>
-          <span style="margin-right: 16px">发货时间:--</span>
-          <span style="margin-right: 16px">发货方式:--</span>
-          <span style="margin-right: 16px">送货人:--</span>
-          <span style="margin-right: 16px">手机:--</span>
-          <span style="margin-right: 16px">物流状态:--</span>
-          <span>发货备注:--</span>
+          <span style="margin-right: 16px">发货单号:{{ deliver.orderCode || '--' }}</span>
+          <span style="margin-right: 16px">发货时间:{{ (deliver as any).createTime || '--' }}</span>
+          <span style="margin-right: 16px">发货方式:{{ getDictLabel(deliver_method, deliver.deliverMethod || '--') }}</span>
+          <span style="margin-right: 16px">送货人:{{ deliver.deliverMan || '--' }}</span>
+          <span style="margin-right: 16px">手机:{{ deliver.phone || '--' }}</span>
+          <span style="margin-right: 16px">物流状态:{{ deliver.logisticsStatus || '--' }}</span>
+          <span>发货备注:{{ deliver.deliverRemark || '--' }}</span>
         </div>
         <el-table :data="deliverProductList" border style="width: 100%">
           <el-table-column label="产品编号" prop="productNo" align="center" />
@@ -219,6 +219,8 @@ import { OrderMainVO } from '@/api/order/orderMain/types';
 import { listOrderProduct } from '@/api/order/orderProduct';
 import { OrderProductVO } from '@/api/order/orderProduct/types';
 import { DeliverProductVO } from '@/api/order/deliverProduct/types';
+import { listOrderDeliver } from '@/api/order/orderDeliver';
+import { OrderDeliverVO } from '@/api/order/orderDeliver/types';
 import { getShippingAddress } from '@/api/customer/customerFile/shippingAddress';
 import { ShippingAddressVO } from '@/api/customer/customerFile/shippingAddress/types';
 import { getWarehouse } from '@/api/company/warehouse';
@@ -231,8 +233,8 @@ import { getInvoiceType } from '@/api/customer/invoiceType';
 import { InvoiceTypeVO } from '@/api/customer/invoiceType/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { order_status, payment_status, fee_type, pay_method } = toRefs<any>(
-  proxy?.useDict('order_status', 'payment_status', 'fee_type', 'pay_method')
+const { order_status, payment_status, fee_type, pay_method, deliver_method } = toRefs<any>(
+  proxy?.useDict('order_status', 'payment_status', 'fee_type', 'pay_method', 'deliver_method')
 );
 const route = useRoute();
 const router = useRouter();
@@ -255,6 +257,8 @@ const invoiceTypeInfo = ref<InvoiceTypeVO>({} as InvoiceTypeVO);
 // 商品明细列表
 const productList = ref<OrderProductVO[]>([]);
 
+// 发货包裹列表
+const orderDeliverList = ref<OrderDeliverVO[]>([]);
 const deliverProductList = ref<DeliverProductVO[]>([]);
 
 // 收货地址信息
@@ -308,6 +312,11 @@ const getOrderDetail = async () => {
       await getDeliverProductList(orderDetail.value);
     }
 
+    // 获取发货单及关联的物流商品信息
+    if (orderDetail.value.id) {
+      await getOrderDeliverListData(orderDetail.value.id);
+    }
+
     // 获取收货地址
     if (orderDetail.value.shippingAddressId) {
       await getShippingAddressDetail(orderDetail.value.shippingAddressId);
@@ -367,6 +376,16 @@ const getDeliverProductList = async (orderDetail: OrderMainVO) => {
   }
 };
 
+// 获取发货单列表
+const getOrderDeliverListData = async (orderId: string | number) => {
+  try {
+    const res = await listOrderDeliver({ orderId, pageNum: 1, pageSize: 100 });
+    orderDeliverList.value = (res as any).rows || res.data || [];
+  } catch (error) {
+    console.error('获取发货单列表失败:', error);
+  }
+};
+
 // 获取收货地址详情
 const getShippingAddressDetail = async (addressId: string | number) => {
   try {