feat: 销售单打印出库单增加盘具

src/BIZComponents/outdetails.vue

@@ -287,6 +287,12 @@
               prop="purpose"
               :show-overflow-tooltip="true"
             ></el-table-column>
+            <el-table-column
+              label="盘具"
+              align="center"
+              prop="reelSpecification"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
           </el-table>
         </div>
         <div class="mt20">

src/views/home/statisticsScreen.vue

@@ -26,12 +26,36 @@
         <div class="chart-header">
           <span class="chart-title">产销采月度综合趋势</span>
           <div class="chart-tools">
-            <span
-              v-for="t in trendTabs"
-              :key="t"
-              :class="['tool-tab', { active: trendTab === t }]"
-              @click="trendTab = t"
-            >{{ t }}</span>
+            <template v-for="t in trendTabs">
+              <span
+                v-if="t !== '自定义'"
+                :key="'tab-' + t"
+                :class="['tool-tab', { active: trendTab === t }]"
+                @click="trendTabClick(t)"
+              >{{ t }}</span>
+              <el-dropdown
+                v-else
+                :key="'tab-custom'"
+                trigger="click"
+                @visible-change="onCustomDropdownChange"
+              >
+                <span :class="['tool-tab', { active: trendTab === t }]">{{ t }}</span>
+                <el-dropdown-menu slot="dropdown">
+                  <div class="custom-date-dropdown">
+                    <el-date-picker
+                      v-model="trendDateRange"
+                      type="daterange"
+                      range-separator="至"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      value-format="yyyy-MM-dd"
+                      :clearable="false"
+                      @change="onCustomDateChange"
+                    />
+                  </div>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
           </div>
         </div>
         <v-chart ref="barRef" :option="barOption" />
@@ -62,7 +86,7 @@
         </div>
       </div>
       <div class="lower-right">
-        <div class="risk-card">
+        <div class="chart-card risk-card">
           <div class="chart-header">
             <span class="chart-title">经营风险预警</span>
           </div>
@@ -140,8 +164,10 @@
     mixins: [echartsMixin(['barRef', 'lineRef', 'pieRef'])],
     data() {
       return {
+        trendDateRange: [],
         trendTab: '近6月',
         trendTabs: ['近6月', '本年度', '近12月', '自定义'],
+        trendCustomApplied: false,
         metrics: [
           { label: '本期营业收入', value: '3,268.5', unit: '万元', color: '#00d9a6', trend: '12.5% 环比', trendColor: '#00d9a6', trendIcon: 'el-icon-top' },
           { label: '在手订单总产值', value: '5,842.0', unit: '万元', color: '#f5a623', trend: '待交付', trendColor: '#f5a623', trendIcon: 'el-icon-warning-outline' },
@@ -376,6 +402,65 @@
           ]
         };
       }
+    },
+    mounted() {
+      // 默认加载近6月数据
+      this.updateChartDataByTab('近6月');
+    },
+    methods: {
+      trendTabClick(tab) {
+        if (tab !== '自定义') {
+          this.trendTab = tab;
+          this.trendCustomApplied = false;
+          this.updateChartDataByTab(tab);
+        }
+      },
+      onCustomDropdownChange(visible) {
+        if (visible) {
+          this.trendTab = '自定义';
+        }
+      },
+      onCustomDateChange(val) {
+        if (val && val.length === 2) {
+          this.trendCustomApplied = true;
+          this.updateChartDataByDateRange();
+        }
+      },
+      updateChartDataByTab(tab) {
+        // 根据预设标签更新时间范围并刷新图表数据
+        const now = new Date();
+        let start, end;
+        end = this.formatDate(now);
+        switch (tab) {
+          case '近6月':
+            start = this.formatDate(new Date(now.getFullYear(), now.getMonth() - 5, 1));
+            break;
+          case '本年度':
+            start = this.formatDate(new Date(now.getFullYear(), 0, 1));
+            break;
+          case '近12月':
+            start = this.formatDate(new Date(now.getFullYear() - 1, now.getMonth(), 1));
+            break;
+        }
+        this.trendDateRange = [start, end];
+        this.fetchChartData();
+      },
+      updateChartDataByDateRange() {
+        // 根据自定义日期范围刷新图表数据
+        this.fetchChartData();
+      },
+      formatDate(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+      },
+      fetchChartData() {
+        // TODO: 调用接口获取实际数据，当前使用静态数据演示
+        console.log('数据请求参数：', this.trendDateRange);
+        // 实际项目中此处调用 API：
+        // fetchTrendData(this.trendDateRange).then(res => { ...更新图表... });
+      }
     }
   };
 </script>
@@ -386,7 +471,7 @@
     min-height: 100vh;
     background: #070d1a;
     color: #fff;
-    padding: 16px;
+    padding: 12px;
     box-sizing: border-box;
     font-family: 'Microsoft YaHei', sans-serif;
   }
@@ -394,8 +479,8 @@
   .metric-row {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
-    gap: 14px;
-    margin-bottom: 16px;
+    gap: 12px;
+    margin-bottom: 12px;
   }
 
   .metric-card {
@@ -403,7 +488,7 @@
     border: 1px solid #162a45;
     border-top: 3px solid var(--top-color);
     border-radius: 6px;
-    padding: 16px;
+    padding: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
     .metric-label {
       font-size: 13px;
@@ -435,23 +520,23 @@
   .middle-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 14px;
-    margin-bottom: 14px;
-    height: 340px;
+    gap: 12px;
+    margin-bottom: 12px;
+    height: 300px;
   }
 
   .lower-row {
     display: grid;
     // grid-template-columns: 1.3fr 2fr;
     grid-template-columns: 1fr 1fr;
-    gap: 14px;
-    height: 350px;
+    gap: 12px;
+    height: 300px;
   }
 
   .lower-left {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 12px;
   }
 
   .lower-right {
@@ -462,7 +547,7 @@
     background: linear-gradient(180deg, #0f1a30 0%, #0a1224 100%);
     border: 1px solid #162a45;
     border-radius: 6px;
-    padding: 14px 18px;
+    padding: 12px;
     display: flex;
     align-items: center;
     color: #c5d4e8;
@@ -488,7 +573,7 @@
     background: linear-gradient(180deg, #0f1a30 0%, #0a1224 100%);
     border: 1px solid #162a45;
     border-radius: 6px;
-    padding: 14px;
+    padding: 12px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -544,7 +629,7 @@
     background: linear-gradient(180deg, #0f1a30 0%, #0a1224 100%);
     border: 1px solid #162a45;
     border-radius: 6px;
-    padding: 14px;
+    padding: 12px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -564,15 +649,15 @@
   .summary-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
-    margin-top: 14px;
+    gap: 12px;
+    margin-top: 12px;
   }
 
   .chart-card {
     background: linear-gradient(180deg, #0f1a30 0%, #0a1224 100%);
     border: 1px solid #162a45;
     border-radius: 6px;
-    padding: 14px;
+    padding: 12px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -603,6 +688,12 @@
         }
       }
     }
+    .custom-date-dropdown {
+      padding: 12px;
+      background: #0f1a30;
+      border: 1px solid #162a45;
+      border-radius: 4px;
+    }
     .echarts {
       flex: 1;
     }

vue.config.js

@@ -38,7 +38,7 @@ module.exports = {
       '/api': {
         target: 'http://192.168.1.251:18086', //开发
         // target: 'http://192.168.1.251:18186', //测试
-        // target: 'http://192.168.1.25:18086',//罗
+        // target: 'http://192.168.1.3:18086',//罗
         // target: 'http://192.168.1.144:18086',//付
 
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域