3/19 界面优化1.0

src/views/biz/DrugTraceQuery.vue

@@ -55,7 +55,7 @@
                 <i class="el-icon-document" style="font-weight: bold; ">追溯记录</i>
               </div>
               <el-table v-loading="tableLoading" :data="orderRecords" border stripe highlight-current-row
-                style="width: 100%">
+                style="width: 100%"    @row-click="handleRowClick">
                 <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                 <el-table-column prop="billNo" label="单据号" align="center"></el-table-column>
                 <el-table-column prop="busTypeName" label="单据类型" align="center"></el-table-column>
@@ -78,11 +78,14 @@
               <div slot="header" class="clearfix">
                 <i class="el-icon-share"  style="font-weight: bold; ">流通流程</i>
               </div>
-              <el-steps :active="orderRecords.length" direction="vertical" finish-status="success" class="custom-steps">
+              <el-steps  active="3"  direction="vertical" finish-status="success" class="custom-steps" style="height: 150px">
-                <el-step v-for="(item, index) in orderRecords" :key="index" :title="item.billTypeName"
+                <el-step :title="stepData.oneCreateTime" class="flow-step"></el-step>
-                  :description="item.createTime + ' ' + item.billNo + ' ' + item.fromCorpName" class="flow-step">
+                <el-step :title="stepData.createTime" class="flow-step"></el-step>
-                  <i slot="icon" :class="getStepIcon(item.billTypeName)"></i>
+                <el-step :title="stepData.finishTime" class="flow-step"></el-step>
-                </el-step>
+                <!--<el-step v-for="(item, index) in orderRecords" :key="index" :title="item.billTypeName"-->
+                <!--  :description="item.createTime + ' ' + item.billNo + ' ' + item.fromCorpName" class="flow-step">-->
+                <!--  <i slot="icon" :class="getStepIcon(item.billTypeName)"></i>-->
+                <!--</el-step>-->
               </el-steps>
             </el-card>
           </el-col>
@@ -196,7 +199,12 @@ export default {
         billNo: "",
         busTypeName:"",
         createTime:""
-      }
+      },
+      stepData:{
+        oneCreateTime: "",
+        createTime: "",
+        finishTime:"",
+      },
     }
   },
   beforeCreate() {
@@ -270,6 +278,12 @@ export default {
           response.data.list.forEach(item => {
             this.orderRecords.push(item.order);
           })
+          if (this.orderRecords.length > 0){
+            this.stepData.oneCreateTime = "单据创建时间:" + this.orderRecords[0].billTime
+            this.stepData.createTime = "单据处理时间:" + this.orderRecords[0].createTime
+            this.stepData.finishTime = "单据完成时间:" + this.orderRecords[0].updateTime
+          }
+
           // orderRecords
           // this.currentOrder
         } else {
@@ -310,7 +324,11 @@ export default {
         this.orderDetails = []
       })
     },
-
+    handleRowClick(row, column, event){
+      this.stepData.oneCreateTime = "单据创建时间:" + row.billTime
+      this.stepData.createTime = "单据处理时间:" + row.createTime
+      this.stepData.finishTime = "单据完成时间:" + row.updateTime
+    },
     // 重置表单
     resetForm() {
       this.filterQuery = {
@@ -715,6 +733,10 @@ export default {
 .pulse-icon {
   animation: pulse 2s infinite;
 }
+/* 去掉步骤条的中间线条 */
+.custom-steps .el-step__line {
+  display: none; /* 隐藏线条 */
+}
 
 @keyframes pulse {
   0% {
@@ -812,6 +834,7 @@ export default {
   padding: 40px 0;
 }
 
+
 /* 响应式调整 */
 @media screen and (max-width: 768px) {
   .app-container {

src/views/collect/CollectOrderTabs.vue

@@ -1162,7 +1162,7 @@ export default {
   width: 80px;
   height: 40px;
   vertical-align: middle;
-  margin-left: 25px;
+  margin-left: 20px;
 }
 
 .context-menu {

src/views/collect/IoCreateOrder.vue

@@ -2625,14 +2625,16 @@ export default {
       window.removeEventListener('keydown', this.handleKeyboardShortcut);
     },
     handleKeyboardShortcut(event) {
-      if (event.key === 'F9' || event.keyCode === 120) { // keyCode 120 是 F9 的键码
+      if (this.orderFormData.billNo != null){
-        event.preventDefault(); // 阻止默认行为
+        if (event.key === 'F9' || event.keyCode === 120) { // keyCode 120 是 F9 的键码
-        this.submit()
+          event.preventDefault(); // 阻止默认行为
-      }
+          this.submit()
-      if (event.key === 'F10' || event.keyCode === 121) {
+        }
-        event.preventDefault(); // 阻止默认行为（如果有的话）
+        if (event.key === 'F10' || event.keyCode === 121) {
-        // this.push();
+          event.preventDefault(); // 阻止默认行为（如果有的话）
-        this.fastDelOrder()
+          // this.push();
+          this.fastDelOrder()
+        }
       }
     }
   },

src/views/collect/IosplitFifoStock.vue

@@ -16,65 +16,54 @@
       </div>
     </div>
 
-    <!-- 展示区域 -->
+     <!--展示区域-->
-    <div class="display-section">
+
-      <div class="card-container">
+
-        <el-row :gutter="20">
+    <div class="card-container" ref="scrollContainer">
-          <el-col :span="8" v-for="(item, index) in displayData" :key="index">
+      <el-row :gutter="20">
-            <el-card class="product-card" :body-style="{ padding: '0px' }">
+        <el-col :span="8" v-for="(item, index) in displayedData" :key="index">
-              <div class="card-header">
+          <el-card class="product-card" :body-style="{ padding: '0px' }">
-                <h3 class="product-name" :title="item.productName">{{ item.productName }}</h3>
+            <div class="card-header">
-                <div class="product-info">
+              <h3 class="product-name" :title="item.productName">{{ item.productName }}</h3>
-                  <span class="batch-no">{{ item.prepnSpec }}</span>
+              <div class="product-info">
-                  <span class="expire-date">{{ item.ggxh }}</span>
+                <span class="batch-no">{{ item.prepnSpec }}</span>
-                </div>
+                <span class="expire-date">{{ item.ggxh }}</span>
               </div>
-              <div class="card-body">
+            </div>
-                <div class="progress-item">
+            <div class="card-body">
-                  <div class="progress-label">
+              <div class="progress-item">
-                    <span>工位存量</span>
+                <div class="progress-label">
-                    <span class="progress-value">{{ item.workplaceStock }}/{{ item.workplaceTotal }}</span>
+                  <span>工位存量</span>
-                  </div>
+                  <span class="progress-value">{{ item.workplaceStock }}/{{ item.workplaceTotal }}</span>
-                  <el-progress
-                    :text-inside="true"
-                    :percentage="calculatePercentage(item.workplaceStock, item.workplaceTotal)"
-                    :color="getProgressColor(item.workplaceStock, item.workplaceTotal)"
-                    :stroke-width="20"
-                  ></el-progress>
                 </div>
-                <div class="progress-item">
+                <el-progress
-                  <div class="progress-label">
+                  :text-inside="true"
-                    <span>拆零存量</span>
+                  :percentage="calculatePercentage(item.workplaceStock, item.workplaceTotal)"
-                    <span class="progress-value">{{ item.splitStock }}/{{ item.splitTotal }}</span>
+                  :color="getProgressColor(item.workplaceStock, item.workplaceTotal)"
-                  </div>
+                  :stroke-width="20"
-                  <el-progress
+                ></el-progress>
-                    :text-inside="true"
+              </div>
-                    :percentage="calculatePercentage(item.splitStock, item.splitTotal)"
+              <div class="progress-item">
-                    :color="getProgressColor(item.splitStock, item.splitTotal)"
+                <div class="progress-label">
-                    :stroke-width="20"
+                  <span>拆零存量</span>
-                  ></el-progress>
+                  <span class="progress-value">{{ item.splitStock }}/{{ item.splitTotal }}</span>
                 </div>
+                <el-progress
+                  :text-inside="true"
+                  :percentage="calculatePercentage(item.splitStock, item.splitTotal)"
+                  :color="getProgressColor(item.splitStock, item.splitTotal)"
+                  :stroke-width="20"
+                ></el-progress>
               </div>
-            </el-card>
+            </div>
-          </el-col>
+          </el-card>
-        </el-row>
+        </el-col>
-      </div>
+      </el-row>
-
+      <div v-if="dataLoading" class="loading-more">加载中...</div>
-      <!-- 分页 -->
+      <div v-if="!dataLoading && displayedData.length >= displayData.length" class="no-more-data">没有更多数据了</div>
-      <div class="pagination-container">
-          <el-pagination
-            background
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="filterQuery.page"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="filterQuery.limit"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-          >
-          </el-pagination>
     </div>
-   </div>
+
+
   </div>
 </template>
 
@@ -87,25 +76,84 @@ export default {
     return {
       filterQuery: {
         page: 1,
-        limit: 10,
+        limit: 1000,
         cpmctymc:""
       },
       total: 0,
+      limit: 6,
+      loadLimit:3,
+      page: 1, // 当前页码
       displayData: [],
+      displayedData:[],
       loading: false,
+      dataLoading: false,
       colorRanges: [
         { min: 0, max: 20, color: '#F56C6C' },   // 红色 - 危险
         { min: 20, max: 50, color: '#E6A23C' },  // 橙色 - 警告
         { min: 50, max: 80, color: '#409EFF' },  // 蓝色 - 正常
         { min: 80, max: 101, color: '#67C23A' }  // 绿色 - 良好
-      ]
+      ],
+      delay:1500,
+      timer: null,
+      fast: false,
     }
   },
+  mounted() {
+    // this.loadInitialData();
+    const scrollContainer = this.$refs.scrollContainer;
+
+    scrollContainer.addEventListener("scroll", this.handleScroll);
+    this.startTimer()
+  },
+  beforeDestroy(){
+    const scrollContainer = this.$refs.scrollContainer;
+
+    scrollContainer.removeEventListener("scroll", this.handleScroll);
+    this.clearTimer()
+  },
   methods: {
+    loadInitialData() {
+      this.displayedData = this.displayData.slice(0, this.limit);
+    },
+    handleScroll() {
+      // alert("jajajjaja")
+      const { scrollTop, clientHeight, scrollHeight } = this.$refs.scrollContainer;
+      const threshold = 10; // 阈值（距离底部10px时触发）
+      if (scrollTop + clientHeight >= scrollHeight - threshold) {
+        this.loadMoreData();
+      }
+      // 检测是否滚动到底部
+      // if (
+      //   window.innerHeight + document.documentElement.scrollTop >=
+      //   document.documentElement.offsetHeight - 10
+      // ) {
+      //   this.loadMoreData();
+      // }
+    },
+    loadMoreData() {
+      if (this.dataLoading) return; // 如果正在加载，直接返回
+      this.dataLoading = true;
+      setTimeout(() => {
+        // 计算下一页的数据范围
+        const start = this.displayedData.length;
+        const end = start + this.loadLimit; // 每次加载3条数据
+
+
+        // 加载更多数据
+        const moreData = this.displayData.slice(start, end);
+
+        if (moreData.length > 0) {
+          this.displayedData = [...this.displayedData, ...moreData];
+        }
+
+        this.dataLoading = false; // 关闭加载状态
+      }, this.delay); // 延迟3秒后加载数据
+
+    },
     onReset() {
       this.filterQuery = {
         page: 1,
-        limit: 10,
+        limit: 1000,
         cpmctymc:""
       }
       this.getList();
@@ -124,7 +172,7 @@ export default {
     },
     getList() {
       this.loading = true;
-      // 调用API获取数据
+      // // 调用API获取数据
       getStockList(this.filterQuery)
         .then(response => {
           if (response.code === 20000) {
@@ -142,6 +190,7 @@ export default {
                 splitTotal: item.maxDrugCount || 100
               };
             });
+            this.loadInitialData()
           } else {
             this.$message.error(response.message || '获取数据失败');
             this.displayData = [];
@@ -177,6 +226,61 @@ export default {
       }
 
       return this.colorRanges[0].color;
+    },
+    timeGetList() {
+      this.loading = true;
+      // // 调用API获取数据
+      getStockList(this.filterQuery)
+        .then(response => {
+          if (response.code === 20000) {
+            // 处理返回的数据
+            this.total = response.data.total || 0;
+            // 转换数据格式以适应展示需求
+            this.displayData = (response.data.list || []).map(item => {
+              return {
+                productName: item.cpmctymc || '未知产品',
+                prepnSpec: item.prepnSpec ,
+                ggxh: item.ggxh ,
+                workplaceStock: item.remCount || 0,
+                workplaceTotal: item.maxDrugCount || 100,
+                splitStock: item.splitRemCount || 0,
+                splitTotal: item.maxDrugCount || 100
+              };
+            });
+          } else {
+            this.$message.error(response.message || '获取数据失败');
+            this.displayData = [];
+            this.total = 0;
+          }
+          this.loading = false;
+        })
+        .catch(error => {
+          console.error('获取数据失败:', error);
+          this.$message.error('获取数据失败，请稍后重试');
+          this.displayData = [];
+          this.total = 0;
+          this.loading = false;
+        });
+    },
+    startTimer() {
+      // 使用箭头函数保持正确的 this 指向
+      this.timer = setInterval(() => {
+        this.timeGetList()
+      }, 5000) // 2分钟 = 120秒 * 1000毫秒
+    },
+    clearTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+  },
+  computed: {
+    noMore () {
+      return this.count >= 21
+    },
+    disabled () {
+      return this.loading || this.noMore
     }
   },
   created() {
@@ -187,7 +291,7 @@ export default {
 
 <style scoped>
 .dashboard-container {
-  height: 100vh; /* 使用视口高度单位，确保铺满整个屏幕 */
+  height: 85vh; /* 使用视口高度单位，确保铺满整个屏幕 */
   width: 100%;
   background-color: #f5f7fa;
   padding: 20px;
@@ -218,6 +322,7 @@ export default {
 .card-container {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
   padding-bottom: 20px; /* 为分页腾出空间 */
 }
 
@@ -339,5 +444,14 @@ export default {
     margin-bottom: 25px;
   }
 }
+
+.loading-more,
+.no-more-data {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #999;
+}
+
 </style>