最新代码

kyy

2 天以前 ab826d12b52265bc4f25044d43a042df2104f972

 pages/QC/SJ/List.vue

@@ -1,384 +1,1003 @@
<template>
  <view>
    <!-- 刷新页面后的顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view>
   <view class="container">
      <!-- 固定顶部搜索栏 -->
      <view class="fixed-search-container">
         <!-- 生产车间下拉框和搜索框并列 -->
         <view class="top-bar-container">
            <!-- 生产车间下拉框 -->
            <view class="workshop-selector-wrapper">
               <view class="form-group-row">
                  <text class="form-label inline-label font-bold">生产车间</text>
                  <view class="workshop-selector flex-1">
                     <picker mode="selector" :range="workshopList" @change="handleWorkshopChange"
                        v-model="workshopIndex">
                        <view class="picker">
                           {{ workshopIndex >= 0 ? workshopList[workshopIndex] : '请选择车间' }}
                        </view>
                     </picker>
                  </view>
               </view>
            </view>

    <view class="newsTab">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
                             active-color="#87cefa"></uni-segmented-control>
      <view class="content">
        <view v-show="current===0">
          <!-- 基于 uni-list 的页面布局 -->
          <uni-list>
            <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- 通过header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                </view>
              </template>
              <!-- 通过body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                      </view>
                    </view>
            <!-- 搜索框 -->
            <view class="search-bar-wrapper">
               <view class="search-bar-box">
                  <picker mode="selector" :range="searchOptions" v-model="selectedOption"
                     @change="onPickerChange">
                     <view class="picker">{{ searchOptions[selectedOption] }}</view>
                  </picker>
                  <input class="search-text" type="text" v-model="searchValue" @keypress.enter="getInputValue"
                     placeholder="请输入搜索值" style="height: 40px;" />
                  <button class="search-btn" @click="getInputValue">搜索</button>
               </view>
            </view>
         </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                      </view>
                    </view>
         <!-- 固定分段控件 -->
         <view class="fixed-newsTab">
            <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
               active-color="#165DFF"></uni-segmented-control>
         </view>
      </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                      </view>
                    </view>

                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
          <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
          <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->

          <!-- <view class="fab" @click="handleFabClick">
            <text class="fab-icon">+</text>
          </view> -->
          <view class="plus-button" @click="handleFabClick">
            +
          </view>
        </view>
        <view v-show="current===1">
          <uni-list>
            <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- 通过header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                </view>
              </template>
              <!-- 通过body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
        </view>
      </view>
    </view>
      <!-- 内容区域 -->
      <view class="content-wrapper">
         <view class="content">
            <!-- 未完成列表 -->
            <view v-show="current===0">
               <uni-list>
                  <uni-list-item style="margin-top: 10px; border-radius: 8px;" class="list-item"
                     direction="column" v-for="item in data" :key="item.id"
                     :to="'Add?id='+item.id+'&billNo='+item.billNo">
                     <template v-slot:header>
                        <view class="header-row">
                           <!-- 检验单号 - 自适应显示 -->
                           <view class="form-item header-item item-flex-2">
                              <label class="form-label font-bold">检验单号</label>
                              <span class="value-text billNo-bg">{{ item.billNo || '暂无数据' }}</span>
                           </view>
                           <!-- 车间 - 自适应显示 -->
                           <view class="form-item header-item item-flex-1">
                              <label class="form-label font-bold">车间</label>
                              <span class="value-text">{{ item.itemCj || '暂无数据' }}</span>
                           </view>


  </view>

                           <!-- 审核标识 - 自适应显示 -->
                           <view class="form-item header-item item-flex-1">
                              <label class="form-label font-bold">审核标识</label>
                              <span class="value-text audit-status">
                                 <checkbox value="FSUBMIT" disabled="true" :checked="item.fsubmit == 1"
                                    class="audit-checkbox" />

                              </span>
                           </view>
                        </view>
                     </template>

                     <template v-slot:body>
                        <view style="margin-top: 0; padding: 0 15px;">
                           <view class="uni-content">
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">创建时间:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.statusDate" />
                                 </view>
                              </view>
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">工单单号:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa001" />
                                 </view>
                              </view>
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">产线:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.line" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">物料编码:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.itemNo" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">产品名称:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa003" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">规格型号:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa004" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">工单数量:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa008" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">创建人:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.fName" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">检验人:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.statusUser" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">检测结果:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.result" />
                                 </view>
                              </view>

                           </view>
                        </view>
                     </template>
                  </uni-list-item>
               </uni-list>
               <view class="plus-button" @click="handleFabClick">+</view>
            </view>

            <!-- 已完成列表 -->
            <view v-show="current===1">
               <uni-list>
                  <uni-list-item style="margin-top: 10px; border-radius: 8px;" class="list-item"
                     direction="column" v-for="item in data" :key="item.id"
                     :to="'Add?id='+item.id+'&billNo='+item.billNo">
                     <template v-slot:header>
                        <view class="header-row">

                           <view class="form-item header-item item-flex-2">
                              <label class="form-label font-bold">检验单号</label>
                              <span class="value-text billNo-bg">{{ item.billNo || '暂无数据' }}</span>
                           </view>
                           <view class="form-item header-item item-flex-1">
                              <label class="form-label font-bold">车间</label>
                              <span class="value-text">{{ item.itemCj || '暂无数据' }}</span>
                           </view>



                           <view class="form-item header-item item-flex-1">
                              <label class="form-label font-bold">审核标识</label>
                              <span class="value-text audit-status">
                                 <checkbox value="RKJY_FSUBMIT" disabled="true" :checked="item.fsubmit == 1"
                                    class="audit-checkbox" />

                              </span>
                           </view>
                        </view>
                     </template>

                     <template v-slot:body>
                        <view style="margin-top: 0; padding: 0 15px;">
                           <view class="uni-content">
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">创建时间:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.statusDate" />
                                 </view>
                              </view>
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">工单单号:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa001" />
                                 </view>
                              </view>
                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">产线:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.line" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">物料编码:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.itemNo" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">产品名称:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa003" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">规格型号:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa004" />
                                 </view>
                              </view>

                              <view class="uni-title-sub uni-ellipsis-2 font-bold">
                                 <view class="form-group">
                                    <label class="form-label font-bold">工单数量:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.daa008" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">创建人:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.fName" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">检验人:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.statusUser" />
                                 </view>
                              </view>

                              <view class="uni-note" style="color: #4B5563;">
                                 <view class="form-group">
                                    <label class="form-label lab font-bold">检测结果:</label>
                                    <input class="form-input" disabled="true" type="text"
                                       v-model="item.result" />
                                 </view>
                              </view>

                           </view>
                        </view>
                     </template>
                  </uni-list-item>
               </uni-list>
            </view>
         </view>
      </view>

      <!-- 刷新提示弹窗 -->
      <view class="toast-mask" v-if="toastVisible">
         <view class="toast-container">
            <view class="toast-icon">
               <image src="https://picsum.photos/id/237/40/40" mode="aspectFit"></image>
            </view>
            <view class="toast-message">
               <text class="toast-title font-bold">刷新成功</text>
               <text class="toast-content">数据已更新到最新状态</text>
            </view>
         </view>
      </view>
   </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      items: ['未完成', '已完成'],
      current: 0,
      data: [],
      tipShow: false // 是否显示顶部提示框
    };
  },
  onLoad() {
    //页面加载时调用的事件
    this.init();
  },
  methods: {
    init() {
      let result = "未完成";
      if (this.current === 1) {
        result = "已完成";
      }
      //页面加载时调用的事件
      this.$post({
        url: "/SJ/GetPage",
        data: {
          pageIndex: 1,
          limit: 20,
          statusUser: this.$loginInfo.account,
          result: result
        }
      }).then(res => {
        this.data = res.data.tbBillList;
      })
    },
    handleFabClick() {
      uni.navigateTo({
        url: 'Add?id'
      });
    },
    onClickItem(index) {
      if (this.current !== index.currentIndex) {
        this.current = index.currentIndex;
        this.init();
      }
    },
  },
  /**
   * 下拉刷新回调函数
   */
  onPullDownRefresh() {
    //重新执行一遍查询
    this.init();
    this.tipShow = true;
    //关闭动画
    uni.stopPullDownRefresh();
   export default {
      data() {
         return {
            items: ['未完成', '已完成'],
            current: 0,
            data: [],
            tipShow: false,
            pageIndex: 1,
            limit: 20,
            totalPage: 0,
            totalCount: 0,
            noData: false,
            isLoading: false,
            searchOptions: ['产品编码', '工单单号', '产品名称', '规格', '送检人', '检验单号'],
            selectedOption: 0,
            searchValue: '',
            workshopList: [],
            workshopIndex: -1,
            fixedSearchHeight: 0,
            // 弹窗提示相关
            toastVisible: false,
            toastTimer: null,
         };
      },

    setTimeout(function () {
      this.tipShow = false;
    }, 3000);
  },
  /**
   * 上拉加载回调函数
   */
  onReachBottom() {
    this.init();
  },
  onShow() {
    //每次进入页面都会执行的方法
    this.init();
  }
};
      onLoad() {
         this.init();
         this.loadWorkshops();
         this.$nextTick(() => {
            uni.createSelectorQuery().select('.fixed-search-container').boundingClientRect(rect => {
               if (rect) {
                  this.fixedSearchHeight = rect.height;
                  console.log('固定搜索区域高度:', this.fixedSearchHeight);
               }
            }).exec();
         });
      },
      methods: {
         // 车间相关方法
         loadWorkshops() {
            this.$post({
                  url: "/SJ/getWorkshop"
               })
               .then(res => {
                  console.log('车间列表响应:', res); // 添加调试日志
                  if (res?.data?.tbBillList) {
                     this.workshopList = res.data.tbBillList.map(item => item.departmentname);
                     console.log('车间列表:', this.workshopList); // 添加调试日志
                  } else {
                     this.workshopList = [];
                  }
               })
               .catch(err => {
                  console.error("获取车间列表失败:", err);
               });
         },

         handleWorkshopChange(e) {
            this.workshopIndex = e.detail.value;
            console.log('选择的车间索引:', this.workshopIndex);

            const workshop = this.workshopList[this.workshopIndex];
            console.log('选择的车间:', workshop);

            if (!workshop) {
               console.log('车间值为空，不执行后续操作');
               return;
            }

            uni.showToast({
               title: `选择的车间: ${workshop}`,
               icon: 'none',
               duration: 2000
            });

            this.pageIndex = 1;
            this.loadData();
         },

         // 搜索相关方法
         onPickerChange(e) {
            this.selectedOption = e.detail.value;
         },

         getInputValue() {
            this.pageIndex = 1;
            this.loadData();
         },

         // 数据加载方法
         init() {
            this.loadData();
         },

         loadData() {
            if (this.isLoading) return;

            this.isLoading = true;
            const userName = this.$loginInfo.account;
            const result = this.current === 1 ? "已完成" : "未完成";

            // 根据搜索值决定请求URL
            const url = this.searchValue && this.searchValue.trim() !== '' ?
               '/SJ/getSearchPage' :
               '/SJ/GetPage';

            // 构造请求数据
            const requestData = {
               pageIndex: this.pageIndex,
               limit: this.limit,
               statusUser: userName,
               result: result
            };

            // 添加搜索条件
            if (this.searchValue && this.searchValue.trim() !== '') {
               switch (this.selectedOption) {
                  case 0:
                     requestData.ItemNo = this.searchValue;
                     break;
                  case 1:
                     requestData.daa001 = this.searchValue;
                     break;
                  case 2:
                     requestData.ItemName = this.searchValue;
                     break;
                  case 3:
                     requestData.ItemModel = this.searchValue;
                     break;
                  case 4:
                     requestData.SongJ = this.searchValue;
                     break;
                  case 5:
                     requestData.billNo = this.searchValue;
                     break;
               }
            }

            // 添加车间筛选条件
            if (this.workshopIndex >= 0 && this.workshopList.length > 0) {
               requestData.itemCj = this.workshopList[this.workshopIndex];
            }

            console.log('发送请求:', requestData); // 添加调试日志

            // 发送请求
            this.$post({
                  url,
                  data: requestData
               })
               .then(res => {
                  console.log('请求成功:', res); // 添加调试日志
                  if (this.pageIndex === 1) {
                     this.data = res.data.tbBillList;
                  } else {
                     if (res.data.tbBillList.length > 0) {
                        this.data = [...this.data, ...res.data.tbBillList];
                     }
                  }
                  this.totalCount = res.data.totalCount;
                  this.totalPage = Math.ceil(this.totalCount / this.limit);
                  this.noData = this.pageIndex >= this.totalPage;
               })
               .catch(err => {
                  console.error('请求失败:', err);
               })
               .finally(() => {
                  this.isLoading = false;
               });
         },

         // 其他方法
         handleFabClick() {
            uni.navigateTo({
               url: '/pages/RKJ/Add?id'
            });
         },

         onClickItem(index) {
            if (this.current !== index.currentIndex) {
               this.current = index.currentIndex;
               this.data = [];
               this.pageIndex = 1;
               this.init();
            }
         },

         // 显示刷新提示弹窗
         showToast() {
            this.toastVisible = true;

            // 清除之前的定时器
            if (this.toastTimer) {
               clearTimeout(this.toastTimer);
            }

            // 设置新的定时器，2秒后自动关闭弹窗
            this.toastTimer = setTimeout(() => {
               this.toastVisible = false;
            }, 1300);
         },
      },

      // 下拉刷新
      onPullDownRefresh() {
         this.pageIndex = 1;
         this.init();

         // 显示弹窗提示
         this.showToast();

         uni.stopPullDownRefresh();
      },

      // 上拉加载
      onReachBottom() {
         if (this.noData || this.isLoading) return;
         this.pageIndex++;
         this.init();
      },

      // 页面卸载时清除定时器
      onUnload() {
         if (this.toastTimer) {
            clearTimeout(this.toastTimer);
         }
      }
   };
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';
   /* 颜色变量定义 */
   $primary: #165DFF;
   $primary-light: #E8F3FF;
   $success: #36D399;
   $warning: #FBBD23;
   $error: #F87272;
   $bg-light: #F9FAFB;
   $bg-card: #FFFFFF;
   $border: #E5E7EB;
   $text-primary: #1F2937;
   $text-secondary: #4B5563;
   $text-muted: #9CA3AF;
   $shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

.uni-note {
  margin-top: 0;
}
   /* 新增微蓝色调 */
   $blue-50: #F0F7FF;
   $blue-100: #E0EEFF;

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
}
   /* 新增字体加粗类 */
   .font-bold {
      font-weight: 600;
   }

/* Ensure automatic adaptation based on page size */
.form-group {
  display: flex;
  align-items: center;
}
   /* 列表项样式 - 添加微蓝色背景 */
   .list-item {
      margin: 10px 15px;
      border-radius: 8px;
      overflow: hidden;
      background-color: $blue-50;
      /* 添加微蓝色背景 */
      box-shadow: $shadow-sm;
      transition: all 0.2s;
      cursor: pointer;

.form-label {
  margin-bottom: 0;
  border-bottom: 1px solid #FFFFFF;
  padding: 5px;
  font-size: 12px;
  width: 60px;
  /* Adjust the font size as per your requirement */
}
      &:hover {
         transform: translateY(-2px);
         box-shadow: $shadow-md;
         background-color: $blue-100;
         /* 悬停时加深蓝色调 */
      }
   }

.form-input {
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
}
   /* 列表头部样式 - 与列表项背景协调 */
   .header-row {
      display: flex;
      flex-wrap: nowrap;
      /* 保持单行显示，不换行 */
      gap: 10px;
      padding: 15px;
      background-color: $blue-100;
      /* 头部使用稍深的蓝色调 */
      border-radius: 8px 8px 0 0;
      margin-bottom: 10px;

.plus-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
}
      /* 确保子元素有最小宽度，防止内容溢出 */
      .header-item {
         min-width: 120px;
         /* 缩小最小宽度，确保在小屏幕上也能一行显示 */
         flex-grow: 1;
      }

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}
      /* 平板和桌面视图 */
      @media (min-width: 768px) {
         .item-flex-1 {
            flex: 1;
            /* 第一个和第三个元素各占1份空间 */
         }

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}
         .item-flex-2 {
            flex: 2;
            /* 第二个元素占2份空间 */
         }
      }

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}
      /* 移动视图 - 仍然保持在一行 */
      @media (max-width: 767px) {
         .item-flex-1 {
            flex: 1;
            /* 第一个和第三个元素各占1份空间 */
         }

.content {
  width: 100%;
}
         .item-flex-2 {
            flex: 2;
            /* 第二个元素占2份空间 */
         }

.list-picture {
  width: 100%;
  height: 145px;
}
         /* 进一步缩小标签和值的字体大小 */
         .form-label {
            font-size: 12px;
            min-width: 50px;
         }

.thumb-image {
  width: 100%;
  height: 100%;
}
         .value-text {
            font-size: 12px;
         }
      }
   }

.ellipsis {
  display: flex;
  overflow: hidden;
}
   /* 表单项目样式 - 与整体背景协调 */
   .form-item {
      display: flex;
      align-items: center;
      gap: 5px;
      /* 减小间距，节省空间 */
      background-color: rgba(255, 255, 255, 0.8);
      /* 半透明白色背景 */
      border-radius: 6px;
      padding: 0 8px;
      /* 减小内边距，节省空间 */
      height: 40px;
      /* 减小高度，节省空间 */
      border: 1px solid $border;
      box-sizing: border-box;
      box-shadow: $shadow-sm;
      transition: all 0.2s;

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
      &:hover {
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      }

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
      /* 标签和值的布局优化 */
      .form-label {
         min-width: 60px;
         /* 标签最小宽度 */
         white-space: nowrap;
         font-size: 13px;
         /* 减小字体大小 */
      }

      .value-text {
         flex: 1;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 13px;
         /* 减小字体大小 */
      }
   }

   /* 整体容器 */
   .container {
      padding: 0;
      background-color: #F3F4F6;
   }

   /* 固定顶部搜索容器 */
   .fixed-search-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      background-color: $bg-card;
      box-shadow: $shadow-md;
   }

   /* 顶部搜索栏容器 */
   .top-bar-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 20px;
      background-color: $bg-card;
   }

   /* 生产车间下拉框容器 */
   .workshop-selector-wrapper {
      flex: 1;
      min-width: 200px;
   }

   /* 行内布局的表单组 */
   .form-group-row {
      display: flex;
      align-items: center;
   }

   /* 行内标签 - 基础样式 */
   .form-label {
      color: $text-primary;
      font-weight: 500;
      margin: 0;
      white-space: nowrap;
   }

   /* 下拉框容器 - 占满剩余空间 */
   .flex-1 {
      flex: 1;
   }

   /* 搜索框容器 */
   .search-bar-wrapper {
      flex: 2;
      min-width: 200px;
   }

   .search-bar-box {
      display: flex;
      width: 100%;
      height: 44px;
      border: 1px solid $border;
      border-radius: 8px;
      overflow: hidden;
      background-color: $bg-light;
      transition: all 0.2s;

      &:hover {
         border-color: $primary;
      }
   }

   .picker {
      width: 120px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      color: $text-secondary;
      border-right: 1px solid $border;
      background-color: $bg-light;
      cursor: pointer;
   }

   .search-text {
      flex: 1;
      height: 44px;
      line-height: 44px;
      padding: 0 15px;
      font-size: 14px;
      border: none;
      outline: none;
      background-color: $bg-light;
      color: $text-primary;

      &::placeholder {
         color: $text-muted;
      }
   }

   .search-btn {
      background-color: $primary;
      color: white;
      font-size: 14px;
      width: 80px;
      height: 44px;
      line-height: 44px;
      border-radius: 0;
      padding: 0;
      margin: 0;
      border: none;
      transition: all 0.2s;
      cursor: pointer;

      &:hover {
         background-color: #0E52EA;
         box-shadow: 0 2px 4px rgba(22, 93, 255, 0.3);
      }

      &:active {
         transform: scale(0.98);
      }
   }

   /* 分段控件 */
   .fixed-newsTab {
      background-color: $bg-card;
      padding: 10px 0;
      border-bottom: 1px solid $border;
   }

   /* 内容区域 - 增加顶部边距，避免被固定元素遮挡 */
   .content-wrapper {
      padding-top: calc(var(--window-top) + 120px);
   }

   /* 值文本样式 */
   .value-text {
      flex: 1;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: $text-primary;
      font-size: 14px;
   }

   /* 检验单号特殊背景样式 */
   .billNo-bg {
      background: linear-gradient(135deg, $primary-light 0%, #D1E8FF 100%);
      color: $primary;
      border-radius: 6px;
      padding: 0 8px;
      /* 减小内边距 */
      font-weight: 500;
      border: 1px solid #B5D8FF;
      box-shadow: 0 1px 2px rgba(22, 93, 255, 0.1);
      font-size: 13px;
      /* 减小字体大小 */
   }

   /* 审核状态样式 */
   .audit-status {
      display: flex;
      align-items: center;
      gap: 5px;
      /* 减小间距 */
   }

   .audit-checkbox {
      transform: scale(0.85);
      /* 缩小复选框 */
      accent-color: $success;
      cursor: pointer;
   }

   .audit-text {
      color: $text-secondary;
      font-size: 13px;
      /* 减小字体大小 */
   }

   .audit-text:checked+.audit-text {
      color: $success;
      font-weight: 500;
   }

   /* 加号按钮 */
   .plus-button {
      position: fixed;
      bottom: 25px;
      right: 25px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: $primary;
      color: white;
      text-align: center;
      line-height: 62px;
      font-size: 28px;
      cursor: pointer;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
      transition: all 0.2s;

      &:hover {
         transform: scale(1.05);
         box-shadow: 0 6px 16px rgba(22, 93, 255, 0.4);
      }

      &:active {
         transform: scale(0.95);
      }
   }

   /* 输入框样式 */
   .form-input {
      background-color: rgba(255, 255, 255, 0.8);
      /* 半透明白色背景 */
      border: 1px solid $border;
      border-radius: 6px;
      padding: 0 12px;
      height: 36px;
      line-height: 36px;
      color: $text-primary;
      font-size: 14px;
      transition: all 0.2s;

      &:focus {
         border-color: $primary;
         outline: none;
      }
   }

   /* 标签样式 */
   .lab {
      width: 80px;
      color: $text-secondary;
   }

   /* 统一圆角 */
   * {
      border-radius: 6px;
   }

   /* 平滑滚动 */
   html {
      scroll-behavior: smooth;
   }

   /* 弹窗提示样式 */
   .toast-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 2000;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.3s ease-in-out;
   }

   .toast-container {
      width: 280px;
      background-color: $bg-card;
      border-radius: 12px;
      box-shadow: $shadow-lg;
      padding: 24px;
      text-align: center;
      animation: zoomIn 0.3s ease-out;
   }

   .toast-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background-color: $success;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(54, 211, 153, 0.3);
   }

   .toast-icon image {
      width: 32px;
      height: 32px;
      border-radius: 50%;
   }

   .toast-title {
      font-size: 18px;
      color: $text-primary;
      margin-bottom: 8px;
   }

   .toast-content {
      font-size: 14px;
      color: $text-secondary;
   }

   /* 动画效果 */
   @keyframes fadeIn {
      from {
         opacity: 0;
      }

      to {
         opacity: 1;
      }
   }

   @keyframes zoomIn {
      from {
         transform: scale(0.8);
         opacity: 0;
      }

      to {
         transform: scale(1);
         opacity: 1;
      }
   }
</style>