优化QC模块样式统一和功能完善

啊鑫

2 天以前 eaa506e57403d1b8502f16ca5dd6e82c347724d0

优化QC模块样式统一和功能完善

- 统一QC/LLJ、RKJ、SJ、XJ模块的UI样式风格
- 优化列表页面为现代卡片式布局
- 完善检验项目页面的水印效果和状态展示
- 修复RKJ/detail页面表格横向布局问题
- 添加可滑动标签栏功能
- 统一结果徽章和状态指示器样式
- 改进响应式设计和移动端适配

 .claude/settings.local.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
{
  "permissions": {
    "allow": [
      "Bash(git add:*)"
    ],
    "deny": []
  }
}

 CLAUDE.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,89 @@
# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview
This is a Vue.js 2 + UniApp mobile application called "GS-MES-AP" (StandardPda-Browse) for manufacturing quality control and warehouse management. The application is designed for PDA (Personal Digital Assistant) devices used in manufacturing environments.

## Key Technologies
- **Framework**: Vue.js 2 + UniApp (uni-app v2.0.2)
- **State Management**: Vuex
- **UI Components**: uView UI v2.0.38, Vant v2.13.7
- **Build Tool**: Vue CLI with @dcloudio/vue-cli-plugin-uni
- **Platform**: Multi-platform (Android/iOS app, H5, various mini-programs)

## Development Commands
Since this is a UniApp project, standard npm scripts are not present. Development should be done through:
- **HBuilderX IDE**: The recommended development environment for UniApp
- **Build**: Use HBuilderX to build for different platforms
- **Debug**: Use HBuilderX's built-in debugger or device debugging

## Architecture Overview

### Core Structure
- **Entry Point**: `main.js` - Sets up Vue instance, store, and global prototypes
- **State Management**: `store/index.js` - Vuex store with server configuration
- **Routing**: `pages.json` - UniApp page configuration (not Vue Router)
- **App Configuration**: `manifest.json` - App metadata and platform-specific settings

### Key Directories
- `pages/` - Application pages organized by feature modules
  - `BasePages/` - Core pages (login, main, user profile)
  - `QC/` - Quality Control modules (来料检验, é¦–检, å·¡æ£€, å…¥åº“检)
  - `Warehouse/` - Warehouse management modules
  - `fileView/` - File viewing components (PDF, Excel, Word, images)
- `components/` - Reusable UI components
- `common/` - Shared utilities and global mixins
- `utils/` - Utility functions for printing, scanning, messaging
- `static/` - Static assets (images, icons, sounds)

### Quality Control (QC) Modules
- **LLJ (来料检验)**: Incoming material inspection
- **SJ (首检)**: First article inspection  
- **XJ (巡检)**: Patrol inspection
- **RKJ (入库检)**: Warehouse inspection
- **THL (退换料)**: Return/exchange material confirmation

### Core Features
- **Barcode/QR Code Scanning**: Custom PDA integration via `utils/scanCode.js`
- **Image Capture**: Camera integration for quality documentation
- **File Viewing**: PDF, Excel, Word, and image preview capabilities
- **Bluetooth Printing**: Barcode and receipt printing via `components/kk-printer/`
- **Offline Storage**: Local data persistence using uni.storage APIs

### API Integration
- **Server Configuration**: Located in `store/index.js`
- **Request Handling**: Global methods `$get`, `$post`, `$uni_request` in `main.js`
- **Authentication**: User info stored in `$loginInfo` prototype

### PDA Hardware Integration
- **Barcode Scanning**: Android broadcast receiver implementation in `utils/scanCode.js`
- **Camera Access**: Native camera API through UniApp
- **Bluetooth Printing**: Thermal printer integration

## Development Guidelines

### Working with QC Modules
Each QC module follows a consistent pattern:
- `List.vue` - Data listing with pull-to-refresh
- `Add.vue` - Form for creating new entries
- `detail.vue` - Detailed view/editing
- `ImageItem.vue` - Image capture and upload

### Adding New Features
1. Create page in appropriate `pages/` subdirectory
2. Add page configuration to `pages.json`
3. Use global API methods (`$get`, `$post`) for server communication
4. Follow existing patterns for form handling and data validation

### Testing
- Test on actual PDA devices for barcode scanning functionality
- Verify camera and printing features on target hardware
- Test offline storage and sync capabilities

## Important Notes
- This is a PDA-specific application with hardware dependencies
- Server API endpoint is configured in `store/index.js`
- Image uploads are base64 encoded and sent to `/Base/saveImage`
- All text content is in Chinese (simplified)
- Application supports multiple deployment targets (Android, iOS, H5)

 pages/QC/LLJ/detail.vue

@@ -7,12 +7,14 @@
        </view>

        <!-- æ ‡ç­¾æ  -->
        <view class="tabs">
            <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
                @tap="switchTab(index,tab.id)">
                {{ tab.fcheckItem }}
        <scroll-view class="tabs" scroll-x="true" :show-scrollbar="false">
            <view class="tabs-container">
                <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
                    @tap="switchTab(index,tab.id)">
                    {{ tab.fcheckItem }}
                </view>
            </view>
        </view>
        </scroll-view>
        <view class="tab-content">
            <!-- åŸºæœ¬ä¿¡æ¯ -->
            <view class="section">
@@ -731,17 +733,25 @@
    }

    .tabs {
        display: flex;
        background-color: $bg-color;
        border-bottom: 1px solid $border-color;
        width: 100%;
        white-space: nowrap;

        .tabs-container {
            display: flex;
            min-width: 100%;
        }

        .tab {
            flex: 1;
            flex: none;
            min-width: 120px;
            text-align: center;
            padding: 12px 0;
            padding: 12px 16px;
            border-right: 1px solid $border-color;
            color: #666;
            transition: all 0.3s;
            white-space: nowrap;

            &:last-child {
                border-right: none;

 pages/QC/RKJ/Add.vue

@@ -1,148 +1,151 @@
<template>
    <view>
      <view class="form-container">
        <form :modelValue="formData">
          <view class="form-group">
            <label class="form-label">检验单号:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.releaseNo"/>
  <view class="container">
    <!-- å¤´éƒ¨ -->
    <view class="header">
      <view class="title">入库检验</view>
      <view class="order-number">检验单号: {{formData.releaseNo}}</view>
    </view>

    <!-- åŸºæœ¬ä¿¡æ¯ -->
    <view class="section">
      <view class="section-header">基本信息</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">检验单号</view>
            <view class="info-value">{{ formData.releaseNo }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">创建人:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.createBy"/>
          <view class="info-item">
            <view class="info-label">创建人</view>
            <view class="info-value">{{ formData.createBy }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">创建时间:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.createDate"/>
          <view class="info-item">
            <view class="info-label">创建时间</view>
            <view class="info-value">{{ formData.createDate }}</view>
          </view>
          <view class="uni-form-item uni-column form-item edit">
            <text class="form-label">生产线别:</text>
          <view class="info-item">
            <view class="info-label">生产线别</view>
            <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入"
                             v-model="formData.lineName"
                             @select="onDaa020Change"
                             class="picker form-input"
                             style="border: none;"></superwei-combox>
            <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa015"/>
                             class="picker-input"></superwei-combox>
            <view v-else class="info-value">{{ formData.daa015 }}</view>
          </view>
  
          <view class="uni-form-item uni-column form-item edit">
            <text class="form-label">工单号:</text>
          <view class="info-item">
            <view class="info-label">工单号</view>
            <superwei-combox v-if="isUpdate" :candidates="DAA001List" placeholder="请选择或输入"
                             v-model="formData.billNo"
                             @select="onDaa001Change"
                             class="picker form-input"
                             style="border: none;"></superwei-combox>
            <input v-else class="form-input" disabled="true" type="text" v-model="formData.billNo"/>
                             class="picker-input"></superwei-combox>
            <view v-else class="info-value">{{ formData.billNo }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">送检批次:</label>
            <input class="form-input" type="text" v-model="formData.rbillNo" :readonly="true" />
          <view class="info-item">
            <view class="info-label">送检批次</view>
            <input class="info-input" type="text" v-model="formData.rbillNo" :readonly="true" />
          </view>
          <view class="form-group">
            <label class="form-label">物料编码:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.itemNo"/>
          <view class="info-item">
            <view class="info-label">物料编码</view>
            <view class="info-value">{{ formData.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="formData.itemName"/>
            </view>
          <view class="info-item">
            <view class="info-label">产品名称</view>
            <view class="info-value">{{ formData.itemName }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">规格型号:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.itemModel"/>
          <view class="info-item">
            <view class="info-label">规格型号</view>
            <view class="info-value">{{ formData.itemModel }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">送检数量:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.quantity"/>
          <view class="info-item">
            <view class="info-label">送检数量</view>
            <view class="info-value highlight">{{ formData.quantity }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">报工人:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.bgr"/>
          <view class="info-item">
            <view class="info-label">报工人</view>
            <view class="info-value">{{ formData.bgr }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.fcheckResu"/>
          <view class="info-item">
            <view class="info-label">检验结果</view>
            <view class="info-value">{{ formData.fcheckResu }}</view>
          </view>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
          <view class="info-item" v-if="formData.remarks">
            <view class="info-label">不合格描述</view>
            <view class="info-value danger">{{ formData.remarks }}</view>
          </view>
        </form>
      </view>
  
      <view class="list-container">
        <uni-table ref="table" border emptyText="暂无更多数据">
          <uni-tr>
            <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th>
            <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th>
            <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">
              <input class="form-input" disabled="true" type="text" v-model="item.projName"/>
            </uni-td>
            <uni-td align="center">
              <input class="form-input" disabled="true" type="text" v-model="item.result"/>
            </uni-td>
            <uni-td>
              <view class="uni-group">
                <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
                  {{ item.levelNum + '/' + item.isCheck }}
                </button>
                <button v-else type="warn" @click="toDetail(item)">
                  {{ item.levelNum + '/' + item.isCheck }}
                </button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
  
      <view class="plus-button">
        <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">生成检验单</button>
      </view>
      
      <view class="plus-button">
        <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
      </view>
      
      <view class="plus-button">
        <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button>
      </view>
      
      <view class="plus-button">
        <button type="warn" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">清除检验结果</button>
      </view>
      
  <!--    <view class="plus-button">
        <button type="warn" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button>
      </view> -->
  
      <view class="plus-button">
        <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button>
      </view>
  
      <view class="plus-button">
        <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>
      </view>
  
  
      <view v-if="showPopup" class="overlay">
        <view class="popup">
          <h3>修改不合格描述</h3>
          <form>
            <view class="form-group">
              <label class="form-label">不合格描述:</label>
              <input class="form-input" type="text" v-model="remarks"/>
            </view>
            <button type="warn" @click="edit">修改</button>
            <button @click="showPopup = !showPopup">取消</button>
          </form>
        </view>
      </view>
  
    </view>
  </template>
  
    <!-- æ£€éªŒé¡¹ç›® -->
    <view class="section" v-if="tableData.length > 0">
      <view class="section-header">检验项目</view>
      <view class="section-body">
        <view class="inspection-table">
          <table>
            <thead>
              <tr>
                <th width="20%" style="text-align: center;">检验项目</th>
                <th width="50%" style="text-align: center;">检验描述</th>
                <th width="15%" style="text-align: center;">记录(点击)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.projName }}</td>
                <td>
                  <view v-if="item.result=='合格'" class="watermark approved">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view v-if="item.result=='不合格'" class="watermark rejected">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view v-if="item.result==null || item.result=='未完成'" class="watermark pending">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view class="description-text">{{ item.projName }}</view>
                </td>
                <td>
                  <button v-if="item.isCheck >= item.levelNum" class="record-btn" @click="toDetail(item)">查看</button>
                  <button v-else class="record-btn" @click="toDetail(item)">填写</button>
                </td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>
    </view>
  
    <!-- æ“ä½œæŒ‰é’® -->
    <view class="action-buttons">
      <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="getItem">生成检验单</button>
      <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
      <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button>
      <button class="action-btn danger" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">清除检验结果</button>
      <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button>
      <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>
    </view>
  
  
    <!-- ä¿®æ”¹ä¸åˆæ ¼æè¿°å¼¹å‡ºæ¡† -->
    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <view class="popup-header">
          <h3>修改不合格描述</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">不合格描述：</view>
            <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/>
          </view>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="edit">修改</button>
          <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button>
        </view>
      </view>
    </view>

  </view>
</template>
  
  <script>
  export default {
@@ -218,6 +221,27 @@
      }
    },
    methods: {
      getStatusClass(result) {
        if (result === '合格') return 'status-pass';
        if (result === '不合格') return 'status-fail';
        return 'status-pending';
      },
      
      getStatusText(status) {
        const statusMap = {
          approved: '合格',
          rejected: '不合格',
          pending: '待确认'
        }
        if (status == null || status == '未完成') {
          return statusMap['pending'] || '待确认';
        } else if (status == '合格') {
          return statusMap['approved'] || '合格';
        } else {
          return statusMap['rejected'] || '不合格';
        }
      },
      
      removeXJ() {
        if (this.formData.id) {
          this.$post({
@@ -491,79 +515,248 @@
  };
  </script>
  
  <style>
  .form-group {
  <style scoped>
  /* åŸºç¡€æ ·å¼ */
  .container {
    padding: 10px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  /* å¤´éƒ¨æ ·å¼ */
  .header {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
  }
  
  .order-number {
    font-size: 14px;
    color: #3498db;
    font-weight: 500;
  }
  
  /* åŒºåŸŸæ ·å¼ */
  .section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
  }
  
  .section-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
  }
  
  .section-body {
    padding: 20px;
  }
  
  /* ä¿¡æ¯ç½‘æ ¼ */
  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c9c9c9;
    flex-direction: column;
    gap: 5px;
  }
  
  .form-label {
    margin-bottom: 0;
    padding: 5px;
  }
  
  .form-input {
    flex: 1;
    margin-bottom: 0;
    padding: 5px;
  }
  
  
  .picker {
    flex: 1;
    margin-bottom: 0;
    padding: 5px;
  .info-label {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 500;
  }
  
  .uni-form-item {
    display: flex;
    border-bottom: 1px solid #c9c9c9;
  .info-value {
    font-size: 14px;
    color: #2c3e50;
  }
  
  .edit {
  .info-value.highlight {
    font-weight: 600;
    color: #3498db;
    font-size: 16px;
  }
  
  .info-value.danger {
    color: #e74c3c;
    font-weight: 500;
  }
  
  /* è¾“入框样式 */
  .info-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
  }
  
  /* é»˜è®¤æ ·å¼ */
  .list-container {
    height: 60vh;
    /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
    overflow-y: auto;
    /* å…è®¸åˆ—表容器垂直滚动 */
    padding: 10px;
    /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
  }
  
  /* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
  @media (max-width: 768px) {
    .list-container {
      height: calc(100vh - 500px);
      /* é€‚当调整高度 */
    }
  }
  
  
  .form-container {
    padding: 10px;
    /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
  }
  
  .th {
    background-color: lightskyblue;
    color: #FFFFFF;
  }
  
  
  .plus-button {
    line-height: 59px;
    font-size: 24px;
  /* é€‰æ‹©å™¨æ ·å¼ */
  .picker-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    cursor: pointer;
    z-index: 1000;
    margin-bottom: 10px;
    font-size: 14px;
    color: #2c3e50;
  }
  
  /* æ£€éªŒé¡¹ç›®è¡¨æ ¼ */
  .inspection-table {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 25px 0;
  }
  
  .inspection-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .inspection-table th {
    background-color: #f8f9fa;
    color: #34495e;
    padding: 12px 15px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #ddd;
  }
  
  .inspection-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
  }
  
  .inspection-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .inspection-table tr:hover {
    background-color: #f1f5f9;
  }
  
  /* æ°´å°æ ·å¼ */
  .watermark {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-15deg);
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
  }
  
  .watermark.approved {
    color: #2ecc71;
  }
  
  .watermark.rejected {
    color: #e74c3c;
  }
  
  .watermark.pending {
    color: #f39c12;
  }
  
  /* æè¿°æ–‡æœ¬å®¹å™¨ */
  .description-text {
    position: relative;
    z-index: 2;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.7);
  }
  
  /* è°ƒæ•´è¡¨æ ¼å•å…ƒæ ¼ */
  .inspection-table td:nth-child(2) {
    position: relative;
    overflow: hidden;
    padding: 0;
  }
  
  .record-btn {
    padding: 6px 12px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #333;
  }
  
  .record-btn:hover {
    background-color: #e9ecef;
  }
  
  
  /* æ“ä½œæŒ‰é’® */
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .action-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .action-btn.primary {
    background-color: #3498db;
    color: white;
  }
  
  .action-btn.secondary {
    background-color: #95a5a6;
    color: white;
  }
  
  .action-btn.danger {
    background-color: #e74c3c;
    color: white;
  }
  
  .action-btn.warning {
    background-color: #f39c12;
    color: white;
  }
  
  /* å¼¹å‡ºæ¡†æ ·å¼ */
  .overlay {
    position: fixed;
    top: 0;
@@ -574,16 +767,71 @@
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .popup {
    background-color: #fff;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .popup-header {
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 68vw;
    /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
    height: 25vh;
    /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
    border-bottom: 1px solid #eee;
  }
  
  .popup-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }
  
  .popup-content {
    padding: 20px;
  }
  
  .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .input-label {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 500;
  }
  
  .input-field {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
  }
  
  .popup-actions {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  
  /* å“åº”式设计 */
  @media (max-width: 768px) {
    .info-grid {
      grid-template-columns: 1fr;
    }
    
    .action-buttons {
      flex-direction: column;
    }
  }
  </style>

 pages/QC/RKJ/List.vue

@@ -1,228 +1,103 @@
<template>
  <view>
  <view class="inspection-app">
    <!-- åˆ·æ–°é¡µé¢åŽçš„顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</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+'&releaseNo='+item.releaseNo">
              <!-- é€šè¿‡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.releaseNo"/>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-note">
                      <view class="form-group">
                        <label class="form-label lab">送检批次号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                      </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.createDate"/>
                      </view>
                    </view>
                    <view class="uni-note">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                      </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.daa015"/>
                      </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.colorName"/>-->
                    <!--                      </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.itemName"/>
                      </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.itemModel"/>
                      </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.quantity"/>
                      </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.bgr"/>
                      </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.fcheckBy"/>
                      </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.fcheckResu"/>
                      </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+'&releaseNo='+item.releaseNo">
              <!-- é€šè¿‡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.releaseNo"/>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-note">
                      <view class="form-group">
                        <label class="form-label lab">送检批次号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                      </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.createDate"/>
                      </view>
                    </view>
                    <view class="uni-note">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                      </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.daa015"/>
                      </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.colorName"/>-->
                    <!--                      </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.itemName"/>
                      </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.itemModel"/>
                      </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.quantity"/>
                      </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.bgr"/>
                      </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.fcheckBy"/>
                      </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.fcheckResu"/>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
    <!-- é¡¶éƒ¨ç­›é€‰åŒº -->
    <view class="filter-section">
      <view class="filter-controls">
        <!-- çŠ¶æ€åˆ‡æ¢æ ‡ç­¾ -->
        <view class="status-tabs">
          <button :class="['tab-button', current === 0 ? 'active' : '']" @click="onClickItem({currentIndex: 0})">
            {{items[0]}}
          </button>
          <button :class="['tab-button', current === 1 ? 'active' : '']" @click="onClickItem({currentIndex: 1})">
            {{items[1]}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ£€éªŒå•åˆ—表 -->
    <view class="inspection-list">
      <!-- æ£€éªŒå•å¡ç‰‡ -->
      <view class="inspection-card" v-for="item in data" :key="item.id" @click="navigateToDetail(item)">
        <view class="card-header">
          <text class="card-title">检验单号: {{item.releaseNo}}</text>
          <text class="status pass" v-if="item.fcheckResu === '合格'">合格</text>
          <text class="status unqualified" v-if="item.fcheckResu === '不合格'">不合格</text>
          <text class="status pending" v-if="!item.fcheckResu">待检验</text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">送检批次号</text>
              <text class="info-content">{{item.billNo}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">产线</text>
              <text class="info-content">{{item.daa015}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">物料信息</text>
              <text class="info-content">{{item.itemNo}}<br>{{item.itemName}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">产品型号</text>
              <text class="info-content">{{item.itemModel}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">送检数量</text>
              <text class="info-content highlight">{{item.quantity}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">报工人</text>
              <text class="info-content">{{item.bgr}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">检验人</text>
              <text class="info-content">{{item.fcheckBy}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">创建人</text>
              <text class="info-content">{{item.createBy}}</text>
            </view>
          </view>

          <view class="meta-info">
            <text class="meta-item">
              <uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
              {{item.createDate}}
            </text>
            <text class="meta-item" v-if="item.fcheckResu">
              <uni-icons type="checkmarkempty" size="14" color="#95a5a6"></uni-icons>
              æ£€æµ‹ç»“æžœ: {{item.fcheckResu}}
            </text>
          </view>
        </view>

        <view class="card-actions">
          <button class="primary" @click.stop="navigateToDetail(item)">
            {{current === 0 ? '开始检验' : '查看详情'}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ–°å¢žæŒ‰é’® -->
    <view class="plus-button" @click="handleFabClick">
      +
    </view>
  </view>
</template>

@@ -302,6 +177,11 @@
        this.init();
      }
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: 'Add?id=' + item.id + '&releaseNo=' + item.releaseNo
      });
    },
  },
  /**
   * ä¸‹æ‹‰åˆ·æ–°å›žè°ƒå‡½æ•°
@@ -336,42 +216,169 @@
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

.uni-note {
  margin-top: 0;
<style scoped>
/* åŸºç¡€æ ·å¼é‡ç½® */
.inspection-app {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2;
  /* Or any other shade of gray you prefer */
/* é¡¶éƒ¨ç­›é€‰åŒº */
.filter-section {
  margin-bottom: 24px;
}

/* Ensure automatic adaptation based on page size */
.form-group {
.filter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-tabs {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background-color: #ecf0f1;
  width: 300px;
}

.tab-button {
  padding: 0px 16px;
  border: none;
  background: none;
  font-size: 14px;
  transition: all 0.3s;
  margin: 0;
  height: 35px;
  flex: 1;
}

.tab-button.active {
  background-color: #3498db;
  color: white;
}

/* æ£€éªŒå•åˆ—表 */
.inspection-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* æ£€éªŒå•å¡ç‰‡ */
.inspection-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.form-label {
  margin-bottom: 0;
  border-bottom: 1px solid #FFFFFF;
  padding: 5px;
  font-size: 12px;
  width: 80px;
  /* Adjust the font size as per your requirement */
.card-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  margin: 0 8px;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
.status {
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status.pending {
  background-color: #f39c12;
  color: white;
}

.status.pass {
  background-color: #00cd00;
  color: white;
}

.status.unqualified {
  background-color: #ff0000;
  color: white;
}

.card-body {
  padding: 16px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  gap: 16px;
}

.info-item {
  flex: 1;
}

.info-label {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.info-content {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

.highlight {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.meta-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #95a5a6;
  margin-top: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  transition: all 0.2s;
  flex: 1;
}

button.primary {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.plus-button {
@@ -381,7 +388,7 @@
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  background-color: #3498db;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
@@ -389,15 +396,6 @@
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
}

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
@@ -418,36 +416,26 @@
  opacity: 1;
}

.content {
  width: 100%;
/* å“åº”式设计 */
@media (min-width: 768px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
@media (min-width: 300px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}
</style>

 pages/QC/RKJ/detail.vue

@@ -1,148 +1,204 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">项目名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.projName"/>
        </view>
        <view class="form-group">
          <label class="form-label">质量要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验方法:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/>
        </view>
        <view class="form-group">
          <label class="form-label">使用仪表:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.levelNum"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验标准编码:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsCode"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验标准名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsName"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel"/>
        </view>
        <view class="form-group">
          <label class="form-label">接收水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.facLevel"/>
        </view>
        <view class="form-group">
          <label class="form-label">下限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.minValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">AC数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1"/>
        </view>
        <view class="form-group">
          <label class="form-label">RE数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.unqualified"/>
        </view>
        <view class="form-group">
          <label class="form-label">预览结果:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.result"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
        </view>
        <view class="form-group edit">
          <input class="form-input" style="color: red" disabled="true" type="text"
                 value="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"/>
        </view>
        <view class="form-group edit">
          <label class="form-label">检测结果:</label>
          <input class="form-input" type="number" v-model="formData.fcheckResu"/>
        </view>
        <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit">保存</button>
      </form>
    </view>
    <view>
      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">编号</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">判定标识</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">检验结果</uni-th>
          <uni-th width="150" align="center"
                  style="color: #FFFFFF;background-color: lightskyblue;">修改
          </uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            {{ index + 1 }}
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button type="warn" v-if="isNumber" @click="toDetail(item)">修改</button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
  <view class="container">
    <!-- å¤´éƒ¨ -->
    <view class="header">
      <view class="title">入库检验项目明细</view>
      <view class="order-number">检验单号: {{formData.id}}</view>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    </view>

    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
        <form :modelValue="editData">
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
    <!-- åŸºæœ¬ä¿¡æ¯ -->
    <view class="section">
      <view class="section-header">基本信息</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">项目名称</view>
            <view class="info-value">{{ formData.projName }}</view>
          </view>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
        </form>
          <view class="info-item" v-if="formData.itemMod">
            <view class="info-label">质量要求</view>
            <view class="info-value">{{ formData.itemMod }}</view>
          </view>
          <view class="info-item" v-if="formData.inspectionMethod">
            <view class="info-label">检验方法</view>
            <view class="info-value">{{ formData.inspectionMethod }}</view>
          </view>
          <view class="info-item" v-if="formData.usingInstruments">
            <view class="info-label">使用仪表</view>
            <view class="info-value">{{ formData.usingInstruments }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">检验数</view>
            <view class="info-value">{{ formData.levelNum }}</view>
          </view>
          <view class="info-item" v-if="formData.qsCode">
            <view class="info-label">检验标准编码</view>
            <view class="info-value">{{ formData.qsCode }}</view>
          </view>
          <view class="info-item" v-if="formData.qsName">
            <view class="info-label">检验标准名称</view>
            <view class="info-value">{{ formData.qsName }}</view>
          </view>
          <view class="info-item" v-if="formData.fcheckLevel">
            <view class="info-label">检验水平</view>
            <view class="info-value">{{ formData.fcheckLevel }}</view>
          </view>
          <view class="info-item" v-if="formData.facLevel">
            <view class="info-label">接收水平</view>
            <view class="info-value">{{ formData.facLevel }}</view>
          </view>
          <view class="info-item" v-if="formData.minValue">
            <view class="info-label">下限</view>
            <view class="info-value">{{ formData.minValue }}</view>
          </view>
          <view class="info-item" v-if="formData.standardValue">
            <view class="info-label">标准值</view>
            <view class="info-value">{{ formData.standardValue }}</view>
          </view>
          <view class="info-item" v-if="formData.maxValue">
            <view class="info-label">上限</view>
            <view class="info-value">{{ formData.maxValue }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- æ£€éªŒç»“æžœ -->
    <view class="section">
      <view class="section-header">检验结果</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">AC数</view>
            <view class="info-value">{{formData.freQty ? formData.freQty - 1 : 0}}</view>
          </view>
          <view class="info-item">
            <view class="info-label">RE数</view>
            <view class="info-value">{{formData.freQty || 0}}</view>
          </view>
          <view class="info-item">
            <view class="info-label">不合格数</view>
            <view class="info-value">{{formData.unqualified || 0}}</view>
          </view>
        </view>

        <view v-if="formData.result != null" class="result-preview">
          <view class="info-label">预览结果</view>
          <view class="info-value">{{formData.result}}</view>
        </view>

        <view v-if="formData.remarks != null" class="result-ng">
          <view class="info-label">不合格描述</view>
          <view class="info-value danger">{{formData.remarks}}</view>
        </view>
      </view>
    </view>

    <!-- ç»“果录入 -->
    <view class="section">
      <view class="section-header">检验结果录入</view>
      <view class="section-body">
        <view class="inspection-hint">
          <view class="hint-text">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</view>
        </view>
        <view class="input-group">
          <view class="input-wrapper">
            <input v-if="tableData.length < formData.levelNum"
              v-model="formData.fcheckResu"
              type="number"
              class="result-input"
              placeholder="请输入检验结果"
              placeholder-class="placeholder" />
            <button v-if="(tableData.length < formData.levelNum)"
              class="btn primary-btn"
              @click="submit">保存结果</button>
          </view>
        </view>
      </view>
    </view>
    <!-- å›¾ç‰‡é¢„览 -->
    <view v-if="isShowImg" class="section">
      <view class="section-header">相关图片</view>
      <view class="section-body">
        <view class="image-preview" @click="previewImage">
          <image :src="base64Image" mode="aspectFit" class="preview-image"/>
        </view>
      </view>
    </view>

    <!-- ç»“果表格 -->
    <view v-if="tableData.length > 0" class="section">
      <view class="section-header">检验记录</view>
      <view class="section-body">
        <view class="table-container">
          <view class="table-header">
            <view class="th">编号</view>
            <view class="th">判定标识</view>
            <view class="th">检验结果</view>
            <view class="th">操作</view>
          </view>

          <view v-for="(item, index) in tableData" :key="index" class="table-row">
            <view class="td">{{ index + 1 }}</view>
            <view class="td">
              <view class="result-badge" :class="item.fstand === '√' ? 'OK' : 'NG'">
                {{ item.fstand }}
              </view>
            </view>
            <view class="td">
              <view class="result-badge" :class="item.fcheckResu === '1' ? 'OK' : 'NG'">
                {{ item.fcheckResu }}
              </view>
            </view>
            <view class="td">
              <button v-if="isNumber" class="btn danger-btn" @click="toDetail(item)">修改</button>
              <button v-if="!isNumber" class="btn danger-btn" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- æ“ä½œæŒ‰é’® -->
    <view class="action-buttons">
      <button class="action-btn warning" @click="saveRemarks">添加不合格描述</button>
    </view>

    <!-- ä¿®æ”¹æ£€éªŒç»“果弹出框 -->
    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <view class="popup-header">
          <h3>修改检验结果</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">检验结果：</view>
            <input class="input-field" type="text" v-model="editData.fcheckResu" placeholder="请输入检验结果"/>
          </view>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="eidt">修改</button>
          <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button>
        </view>
      </view>
    </view>

    <!-- ä¿®æ”¹ä¸åˆæ ¼æè¿°å¼¹å‡ºæ¡† -->
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
        <view class="popup-header">
          <h3>修改不合格描述</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">不合格描述：</view>
            <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="editRemarks">修改</button>
          <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button>
        </view>
      </view>
    </view>
  </view>
@@ -402,49 +458,274 @@
}
</script>

<style>
.form-group {
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
<style lang="scss">
$primary-color: #409EFF;
$success-color: #67C23A;
$danger-color: #F56C6C;
$warning-color: #E6A23C;
$border-color: #DCDFE6;
$bg-color: #f5f7fa;

.container {
  padding: 20px;
  background-color: #fff;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
}
.header {
  padding: 20px;
  border-bottom: 1px solid $border-color;
  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
}
  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
  }

/* é»˜è®¤æ ·å¼ */
.list-container {
  height: calc(100vh - 750px);
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
}

/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* é€‚当调整高度 */
  .order-number {
    color: #666;
    font-size: 14px;
  }
}

.form-container {
  /* è®¾ç½®è¡¨å•å®¹å™¨çš„高度，使其可以滚动 */
  overflow-y: auto;
  /* å…è®¸è¡¨å•å®¹å™¨åž‚直滚动 */
.section {
  margin: 20px 0;
  border: 1px solid $border-color;
  border-radius: 4px;

  &-header {
    padding: 12px 16px;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;
    font-weight: bold;
  }

  &-body {
    padding: 16px;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .info-item {
    margin-bottom: 12px;

    .info-label {
      color: #909399;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .info-value {
      color: #333;
      font-weight: 500;
    }
  }
}

.inspection-hint {
  background-color: #fff3cd;
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
  border-radius: 4px;
  margin-bottom: 15px;
}

.hint-text {
  font-size: 12px;
  color: #856404;
}

.input-group {
  margin: 16px 0;

  .input-wrapper {
    display: flex;
    gap: 12px;

    .result-input {
      flex: 1;
      height: 45px;
      padding: 0 12px;
      border: 1px solid $border-color;
      border-radius: 4px;
      font-size: 14px;
    }
  }
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;

  &.primary-btn {
    background-color: $primary-color;
    color: white;
  }

  &.danger-btn {
    background-color: $danger-color;
    color: white;
  }
}

.table-container {
  border: 1px solid $border-color;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;

  .table-header {
    display: flex;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;

    .th {
      flex: 1;
      padding: 12px;
      font-weight: bold;
      text-align: center;
      border-right: 1px solid $border-color;
      
      &:last-child {
        border-right: none;
      }
    }
  }

  .table-row {
    display: flex;
    border-bottom: 1px solid $border-color;
    align-items: center;
    min-height: 50px;

    &:last-child {
      border-bottom: none;
    }

    .td {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border-right: 1px solid $border-color;
      
      &:last-child {
        border-right: none;
      }
    }
  }
}

.result-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;

  &.OK {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &.NG {
    background-color: rgba($danger-color, 0.1);
    color: $danger-color;
  }
}

.result-preview {
  margin: 16px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;

  .info-label {
    color: #909399;
    font-size: 14px;
    min-width: 80px;
  }

  .info-value {
    color: #333;
    font-weight: 500;
  }
}

.result-ng {
  margin: 16px 0;
  padding: 12px;
  background-color: rgba($danger-color, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;

  .info-label {
    color: $danger-color;
    font-size: 14px;
    min-width: 80px;
  }

  .info-value {
    color: $danger-color;
    font-weight: 500;
  }
}

.image-preview {
  text-align: center;
  cursor: pointer;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &.primary {
    background-color: $primary-color;
    color: white;
  }

  &.secondary {
    background-color: #95a5a6;
    color: white;
  }

  &.warning {
    background-color: $warning-color;
    color: white;
  }
}

.overlay {
@@ -457,20 +738,87 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw;
  /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
  height: 25vh;
  /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.edit {
.popup-header {
  padding: 20px;
  border-bottom: 1px solid #eee;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }
}

.popup-content {
  padding: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.popup-actions {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.danger {
  color: $danger-color;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .input-wrapper {
    flex-direction: column;
  }
  
  .table-container {
    .table-header .th {
      font-size: 12px;
      padding: 8px 4px;
    }
    
    .table-row .td {
      font-size: 12px;
      padding: 8px 4px;
    }
  }
}
</style>

 pages/QC/SJ/Add.vue

@@ -1,130 +1,159 @@
<template>
    <view>
        <view class="form-container">
            <form :modelValue="formData">
                <view class="form-group">
                    <label class="form-label">首检单号:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.billNo" />
                </view>
                <view class="form-group">
                    <label class="form-label">创建时间:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.createTime" />
                </view>
                <view class="form-group">
                    <label class="form-label">检验类型:</label>
                    <picker v-if="isUpdate" class="form-input" :range="SJ_MJList" :value="SJ_MJIndex" @change="onSJ_MJChange">
                        <view>{{ SJ_MJList[SJ_MJIndex] }}</view>
                    </picker>
                    <input v-else class="form-input" disabled="true" type="text" v-model="formData.SJ_MJ" />
                </view>
                <view class="uni-form-item uni-column form-item edit">
                    <text class="form-label">生产线别:</text>
                    <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入"
                        v-model="formData.line" @select="onDaa020Change" class="picker form-input"
                        style="border: none;"></superwei-combox>
                    <input v-else class="form-input" disabled="true" type="text" v-model="formData.line" />
                </view>
                <view class="uni-form-item uni-column form-item edit">
                    <text class="form-label">物料编码:</text>
                    <superwei-combox v-if="isUpdate" :candidates="boardItems" placeholder="请选择或输入"
                        v-model="formData.itemNo" :isJSON="true" keyName="itemName" @select="onItemChange"
                        class="picker form-input" style="border: none;"></superwei-combox>
                    <input v-else class="form-input" disabled="true" type="text" v-model="formData.itemNo" />
                </view>
                <view class="uni-form-item uni-column form-item edit">
                    <text class="form-label">计划编号:</text>
                    <picker v-if="isUpdate" class="picker form-input" name="selector" :range="DAA001List"
                        @change="onDaa001Change">
                        <text>{{ DAA001List[DAA001Index] }}</text>
                    </picker>
                    <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa001" />
                </view>
                <view class="form-group">
                    <label class="form-label">销售订单号:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.caa015" />
                </view>
                <view class="form-group">
                    <label class="form-label">客户:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.cust" />
                </view>
                <view class="form-group">
                    <label class="form-label">产品名称:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.daa003" />
                </view>
                <view class="form-group">
                    <label class="form-label">规格型号:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.daa004" />
                </view>
                <view class="form-group">
                    <label class="form-label">工单数量:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.daa008" />
                </view>
                <view class="form-group">
                    <label class="form-label">不合格描述:</label>
                    <input class="form-input" disabled="true" type="text" v-model="formData.remarks" />
                </view>
            </form>
    <view class="inspection-sheet">
        <!-- å¤´éƒ¨ä¿¡æ¯ -->
        <view class="sheet-header">
            <h1>首检检验单</h1>
            <view class="inspection-number">首检单号：{{formData.billNo}}</view>
        </view>
        <view class="list-container">
            <uni-table ref="table" border emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th>
                    <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th>
                    <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td align="center">
                        <input class="form-input" disabled="true" type="text" v-model="item.projName" />
                    </uni-td>
                    <uni-td align="center">
                        <input class="form-input" disabled="true" type="text" v-model="item.result" />
                    </uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">

        <!-- åŸºæœ¬ä¿¡æ¯åŒº -->
        <view class="basic-info">
            <view class="info-row">
                <span class="info-label">创建时间：</span>
                <span class="info-value">{{formData.createTime}}</span>
                <span class="info-label">检验类型：</span>
                <span class="info-value">{{formData.SJ_MJ}}</span>
            </view>
            <view class="info-row" v-if="isUpdate">
                <span class="info-label">检验类型：</span>
                <picker class="info-picker" :range="SJ_MJList" :value="SJ_MJIndex" @change="onSJ_MJChange">
                    <view>{{ SJ_MJList[SJ_MJIndex] }}</view>
                </picker>
            </view>
        </view>

        <!-- ç”Ÿäº§ä¿¡æ¯åŒº -->
        <view class="material-info">
            <view class="info-block">
                <view class="info-label">生产线别：</view>
                <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入"
                    v-model="formData.line" @select="onDaa020Change" class="info-picker-input"></superwei-combox>
                <view v-else class="info-value">{{formData.line}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">物料编码：</view>
                <superwei-combox v-if="isUpdate" :candidates="boardItems" placeholder="请选择或输入"
                    v-model="formData.itemNo" :isJSON="true" keyName="itemName" @select="onItemChange"
                    class="info-picker-input"></superwei-combox>
                <view v-else class="info-value">{{formData.itemNo}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">计划编号：</view>
                <picker v-if="isUpdate" class="info-picker" name="selector" :range="DAA001List"
                    @change="onDaa001Change">
                    <text>{{ DAA001List[DAA001Index] }}</text>
                </picker>
                <view v-else class="info-value">{{formData.daa001}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">销售订单号：</view>
                <view class="info-value">{{formData.caa015}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">客户：</view>
                <view class="info-value">{{formData.cust}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">产品名称：</view>
                <view class="info-value">{{formData.daa003}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">规格型号：</view>
                <view class="info-value">{{formData.daa004}}</view>
            </view>

            <view class="info-block">
                <view class="info-label">工单数量：</view>
                <view class="info-value highlight">{{formData.daa008}}</view>
            </view>

            <view class="info-block" v-if="formData.remarks">
                <view class="info-label">不合格描述：</view>
                <view class="info-value">{{formData.remarks}}</view>
            </view>
        </view>

        <!-- æ£€éªŒé¡¹ç›®è¡¨æ ¼ -->
        <view class="inspection-table" v-if="tableData.length > 0">
            <table>
                <thead>
                    <tr>
                        <th width="20%" style="text-align: center;">检验项目</th>
                        <th width="50%" style="text-align: center;">检验描述</th>
                        <th width="15%" style="text-align: center;">记录(点击)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td>{{ item.projName }}</td>
                        <td>
                            <view v-if="item.result=='合格'" class="watermark approved">
                                {{ getStatusText(item.result) }}
                            </view>
                            <view v-if="item.result=='不合格'" class="watermark rejected">
                                {{ getStatusText(item.result) }}
                            </view>
                            <view v-if="item.result==null || item.result==''" class="watermark pending">
                                {{ getStatusText(item.result) }}
                            </view>
                            <view class="description-text">检验项目详情</view>
                        </td>
                        <td>
                            <button class="record-btn" @click="toDetail(item)">
                                {{ item.levelNum + '/' + item.isCheck }}
                            </button>
                            <button v-else type="warn" @click="toDetail(item)">
                                {{ item.levelNum + '/' + item.isCheck }}</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="isUpdate && !isShowTable" @click="save">创建检验单并生成部分默认值</button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="!isUpdate && !isShowTable && formData.xjGenFlag == 0"
                @click="saveXJ">生成巡检</button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="!isUpdate && formData.result == '未完成' && !isShowTable" @click="removeXJ">删除单据
        <!-- æ“ä½œæŒ‰é’®åŒº -->
        <view class="action-buttons">
            <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="save">
                åˆ›å»ºæ£€éªŒå•å¹¶ç”Ÿæˆéƒ¨åˆ†é»˜è®¤å€¼
            </button>
            <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">
                ä¸Šä¼ /查看图片
            </button>
            <button class="action-btn secondary" v-if="!isUpdate && !isShowTable && formData.xjGenFlag == 0"
                @click="saveXJ">
                ç”Ÿæˆå·¡æ£€
            </button>
            <button class="action-btn danger" v-if="!isUpdate && formData.result == '未完成' && !isShowTable" @click="removeXJ">
                åˆ é™¤å•æ®
            </button>
            <button class="action-btn secondary" v-if="!isUpdate &&  !isShowTable" @click="saveRemarks">
                æ·»åŠ ä¸åˆæ ¼æè¿°
            </button>
            <button class="action-btn primary" v-if="isShowTable" @click="getTable">
                èŽ·å–检验项目
            </button>
            <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">
                ç”Ÿæˆæ£€éªŒé¡¹ç›®
            </button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="!isUpdate &&  !isShowTable" @click="saveRemarks">添加不合格描述</button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button>
        </view>
        <view class="plus-button">
            <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>
        </view>
        <!-- å¼¹å‡ºæ¡† -->
        <view v-if="remarksPopup" class="overlay">
            <view class="popup">
                <h3>修改不合格描述</h3>
                <form>
                    <view class="form-group">
                        <label class="form-label">不合格描述:</label>
                        <input class="form-input" type="text" v-model="remarks" />
                <view class="popup-header">
                    <h3>修改不合格描述</h3>
                </view>
                <view class="popup-content">
                    <view class="info-block">
                        <view class="info-label">不合格描述：</view>
                        <input class="info-input" type="text" v-model="remarks" placeholder="请输入不合格描述" />
                    </view>
                    <button type="warn" @click="editRemarks">修改</button>
                    <button @click="remarksPopup = !remarksPopup">取消</button>
                </form>
                </view>
                <view class="popup-actions">
                    <button class="action-btn primary" @click="editRemarks">修改</button>
                    <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button>
                </view>
            </view>
        </view>
    </view>
@@ -211,6 +240,16 @@
            }
        },
        methods: {
            getResultClass(result) {
                if (result === '合格') return 'result-pass';
                if (result === '不合格') return 'result-fail';
                return 'result-pending';
            },
            getStatusText(status) {
                if (status === '合格') return '合格';
                if (status === '不合格') return '不合格';
                return '未完成';
            },
            removeXJ() {
                if (this.formData.id) {
                    this.$post({
@@ -497,99 +536,322 @@
    };
</script>

<style>
    .form-group {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #c9c9c9;
    }
<style scoped>
/* åŸºç¡€æ ·å¼ */
.inspection-sheet {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

    .form-label {
        margin-bottom: 0;
        padding: 5px;
    }
/* å¤´éƒ¨æ ·å¼ */
.sheet-header {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

    .form-input {
        flex: 1;
        margin-bottom: 0;
        padding: 5px;
    }
.sheet-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.inspection-number {
  font-size: 16px;
  color: #3498db;
  font-weight: 500;
}

    .picker {
        flex: 1;
        margin-bottom: 0;
        padding: 5px;
        font-size: 12px;
    }
/* åŸºæœ¬ä¿¡æ¯åŒº */
.basic-info {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

    .uni-form-item {
        display: flex;
        border-bottom: 1px solid #c9c9c9;
    }
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

    .edit {
        background-color: white;
    }
.info-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-right: 10px;
  min-width: 80px;
}

    /* é»˜è®¤æ ·å¼ */
    .list-container {
        height: 60vh;
        /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
        overflow-y: auto;
        /* å…è®¸åˆ—表容器垂直滚动 */
        padding: 10px;
        /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
    }
.info-value {
  font-size: 14px;
  color: #2c3e50;
  margin-right: 20px;
}

    /* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
    @media (max-width: 768px) {
        .list-container {
            height: calc(100vh - 376px);
            /* é€‚当调整高度 */
        }
    }
.info-picker {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  margin-right: 20px;
}

/* ç‰©æ–™ä¿¡æ¯åŒº */
.material-info {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

    .form-container {
        padding: 10px;
        /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
    }
.info-block {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

    .th {
        background-color: lightskyblue;
        color: #FFFFFF;
    }
.info-block .info-label {
  min-width: 100px;
  font-size: 14px;
  color: #7f8c8d;
}

.info-block .info-value {
  font-size: 14px;
  color: #2c3e50;
  flex: 1;
}

    .plus-button {
        line-height: 59px;
        font-size: 24px;
        cursor: pointer;
        z-index: 1000;
        margin-bottom: 10px;
    }
.info-picker-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
.info-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

    .popup {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 68vw;
        /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
        height: 25vh;
        /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
    }
.highlight {
  font-weight: 600;
  color: #e74c3c;
  font-size: 16px;
}

/* æ£€éªŒé¡¹ç›®è¡¨æ ¼ */
.inspection-table {
  margin: 25px 0;
}

.inspection-table table {
  width: 100%;
  border-collapse: collapse;
}

.inspection-table th,
.inspection-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: left;
}

.inspection-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #34495e;
}

.inspection-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.inspection-table tr:hover {
  background-color: #f1f5f9;
}

/* æ°´å°æ ·å¼ */
.watermark {
  position: absolute;
  font-size: 40px;
  font-weight: bold;
  opacity: 1;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

.watermark.approved {
  color: #2ecc71;
}

.watermark.rejected {
  color: #e74c3c;
}

.watermark.pending {
  color: #f39c12;
}

/* æè¿°æ–‡æœ¬å®¹å™¨ */
.description-text {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  font-size: 14px;
  color: #2c3e50;
}

/* è°ƒæ•´è¡¨æ ¼å•å…ƒæ ¼ */
.inspection-table td:nth-child(2) {
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* æŒ‰é’®æ ·å¼ */
.record-btn {
  padding: 6px 12px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.record-btn:hover {
  background-color: #e9ecef;
}

/* æ“ä½œæŒ‰é’®åŒº */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.action-btn.primary {
  background-color: #3498db;
  color: white;
}

.action-btn.primary:hover {
  background-color: #2980b9;
}

.action-btn.secondary {
  background-color: #95a5a6;
  color: white;
}

.action-btn.secondary:hover {
  background-color: #7f8c8d;
}

.action-btn.danger {
  background-color: #e74c3c;
  color: white;
}

.action-btn.danger:hover {
  background-color: #c0392b;
}

/* å¼¹å‡ºæ¡†æ ·å¼ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.popup-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.popup-content {
  padding: 20px;
}

.popup-actions {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-label {
    margin-bottom: 5px;
  }
  
  .project-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .project-actions {
    margin-top: 10px;
    width: 100%;
  }
}
</style>

 pages/QC/SJ/List.vue

@@ -1,245 +1,113 @@
<template>
  <view>
  <view class="inspection-app">
    <!-- åˆ·æ–°é¡µé¢åŽçš„顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view>


    <!-- æœç´¢æ¡† -->
         <view class="search-bar">
             <view class="search-bar-box">
            <!-- <image class="search-span" src="../../static/image/searchSpan.png"/> -->
             <input type="text" value="" v-model="searchValue" placeholder="物料编码 ç‰©æ–™åç§°" class="search-text" maxlength="100" focus/>
             <button @click="btnclicked" class="search-btn">搜索</button>
             </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="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.SJ_MJ"/>
                      </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.caa015" />
                        </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.cust" />
                        </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 class="filter-section">
      <view class="filter-controls">
        <!-- æŸ¥è¯¢æ¡ä»¶é€‰æ‹©å™¨ -->
        <view class="dropdown-filter">
          <picker @change="onOptionsChange" :value="optionsIndex" :range="options">
            <view class="picker">{{options[optionsIndex]}}</view>
          </picker>
        </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.SJ_MJ"/>
                      </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.caa015" />
                        </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.cust" />
                        </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 class="search-container">
          <input class="search-input" v-model="searchValue" :placeholder="'请输入'+options[optionsIndex]" @confirm="btnclicked" />
          <button class="search-button" @click="btnclicked">搜索</button>
        </view>
        
        <!-- çŠ¶æ€åˆ‡æ¢æ ‡ç­¾ -->
        <view class="status-tabs">
          <button :class="['tab-button', current === 0 ? 'active' : '']" @click="onClickItem({currentIndex: 0})">
            {{items[0]}}
          </button>
          <button :class="['tab-button', current === 1 ? 'active' : '']" @click="onClickItem({currentIndex: 1})">
            {{items[1]}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ£€éªŒå•åˆ—表 -->
    <view class="inspection-list">
      <!-- æ£€éªŒå•å¡ç‰‡ -->
      <view class="inspection-card" v-for="item in data" :key="item.id" @click="navigateToDetail(item)">
        <view class="card-header">
          <text class="badge normal" v-if="item.SJ_MJ">{{item.SJ_MJ}}</text>
          <text class="card-title">检验单号: {{item.billNo}}</text>
          <text class="status pass" v-if="item.result === '合格'">合格</text>
          <text class="status unqualified" v-if="item.result === '不合格'">不合格</text>
          <text class="status pending" v-if="!item.result">待检验</text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">物料信息</text>
              <text class="info-content">{{item.itemNo}}<br>{{item.daa003}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">规格型号</text>
              <text class="info-content">{{item.daa004}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">产线</text>
              <text class="info-content">{{item.line}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">工单数量</text>
              <text class="info-content highlight">{{item.daa008}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">销售订单</text>
              <text class="info-content">{{item.caa015}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">客户</text>
              <text class="info-content">{{item.cust}}</text>
            </view>
          </view>

          <view class="meta-info">
            <text class="meta-item">
              <uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
              {{item.statusDate}}
            </text>
            <text class="meta-item">
              <uni-icons type="person" size="14" color="#95a5a6"></uni-icons>
              åˆ›å»ºäºº: {{item.fName}}
            </text>
          </view>
          
          <view class="meta-info" v-if="item.statusUser">
            <text class="meta-item">
              <uni-icons type="person" size="14" color="#95a5a6"></uni-icons>
              æ£€éªŒäºº: {{item.statusUser}}
            </text>
          </view>
        </view>

        <view class="card-actions">
          <button class="primary" @click.stop="navigateToDetail(item)">
            {{current === 0 ? '开始检验' : '查看详情'}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ–°å¢žæŒ‰é’® -->
    <view class="plus-button" @click="handleFabClick">
      +
    </view>
  </view>
</template>

@@ -252,7 +120,11 @@
      current: 0,
      data: [],
      tipShow: false ,// æ˜¯å¦æ˜¾ç¤ºé¡¶éƒ¨æç¤ºæ¡†
      searchValue:''
      searchValue: '',
      // ===== æ–°å¢žæœç´¢åŠŸèƒ½ç›¸å…³æ•°æ® =====
      optionsIndex: 0, // å½“前选择的查询条件索引
      options: ['工单', '检验单号', '产线', '物料编码', '物料名称'], // æŸ¥è¯¢æ¡ä»¶é€‰é¡¹
      selectedField: 'daa001' // å½“前选择的查询字段，默认为工单
    };
  },
  onLoad() {
@@ -260,20 +132,35 @@
    this.init();
  },
  methods: {
      //搜索框点击事件
  btnclicked() {
       this.init();
      },
    // ===== æ–°å¢žæŸ¥è¯¢æ¡ä»¶é€‰æ‹©æ–¹æ³• =====
    onOptionsChange(e) {
      this.optionsIndex = e.detail.value;
      // æ ¹æ®é€‰æ‹©çš„选项设置搜索字段
      const fieldMap = {
        0: 'daa001',     // å·¥å•
        1: 'billNo',     // æ£€éªŒå•å·
        2: 'line',       // äº§çº¿
        3: 'itemNo',     // ç‰©æ–™ç¼–码
        4: 'daa003'      // ç‰©æ–™åç§°(产品名称)
      };
      this.selectedField = fieldMap[this.optionsIndex];
    },
    
    //搜索框点击事件
    btnclicked() {
      this.init();
    },
    
    init() {
		
		
        //获取搜索条件内容
        let SearchValue=this.searchValue;
		
      //获取搜索条件内容
      let SearchValue = this.searchValue;
      
      let result = "未完成";
      if (this.current === 1) {
        result = "已完成";
      }
      
      // ===== ä¿®æ”¹åŽçš„API调用，添加搜索字段参数 =====
      //页面加载时调用的事件
      this.$post({
        url: "/SJ/GetPage",
@@ -282,7 +169,9 @@
          limit: 20,
          statusUser: this.$loginInfo.account,
          result: result,
          SearchValue:SearchValue
          SearchValue: SearchValue,
          selectedIndex: this.optionsIndex, // æ–°å¢žï¼šæœç´¢æ¡ä»¶ç´¢å¼•
          searchField: this.selectedField   // æ–°å¢žï¼šæœç´¢å­—段名
        }
      }).then(res => {
        this.data = res.data.tbBillList;
@@ -298,6 +187,11 @@
        this.current = index.currentIndex;
        this.init();
      }
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: 'Add?id=' + item.id + '&billNo=' + item.billNo
      });
    },
  },
  /**
@@ -327,41 +221,225 @@
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

.uni-note {
  margin-top: 0;
<style scoped>
/* åŸºç¡€æ ·å¼é‡ç½® */
.inspection-app {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
/* é¡¶éƒ¨ç­›é€‰åŒº */
.filter-section {
  margin-bottom: 24px;
}

/* Ensure automatic adaptation based on page size */
.form-group {
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* æŸ¥è¯¢æ¡ä»¶é€‰æ‹©å™¨ */
.dropdown-filter {
  min-width: 80px;
  margin-right: 10px;
}

.picker {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  min-width: 80px;
}

/* æœç´¢æ¡†æ ·å¼ */
.search-container {
  display: flex;
  flex: 1;
  margin-right: 10px;
  height: 36px;
  min-width: 200px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  background-color: white;
}

.search-button {
  padding: 0 12px;
  border: 1px solid #3498db;
  border-radius: 0 4px 4px 0;
  background-color: #3498db;
  color: white;
  font-size: 14px;
  margin: 0;
}

.status-tabs {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background-color: #ecf0f1;
  flex: 1;
  min-width: 200px;
}

.tab-button {
  padding: 0px 16px;
  border: none;
  background: none;
  font-size: 14px;
  transition: all 0.3s;
  margin: 0;
  height: 35px;
  flex: 1;
}

.tab-button.active {
  background-color: #3498db;
  color: white;
}

/* æ£€éªŒå•åˆ—表 */
.inspection-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* æ£€éªŒå•å¡ç‰‡ */
.inspection-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.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 */
.card-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  margin: 0 8px;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
.badge {
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 8px;
}

.badge.normal {
  background-color: #3498db;
  color: white;
}

.status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status.pending {
  background-color: #f39c12;
  color: white;
}

.status.pass {
  background-color: #00cd00;
  color: white;
}

.status.unqualified {
  background-color: #ff0000;
  color: white;
}

.card-body {
  padding: 16px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  gap: 16px;
}

.info-item {
  flex: 1;
}

.info-label {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.info-content {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

.highlight {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.meta-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #95a5a6;
  margin-top: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  transition: all 0.2s;
  flex: 1;
}

button.primary {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.plus-button {
@@ -371,7 +449,7 @@
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  background-color: #3498db;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
@@ -379,15 +457,6 @@
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
}

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
@@ -408,81 +477,26 @@
  opacity: 1;
}

.content {
  width: 100%;
/* å“åº”式设计 */
@media (min-width: 768px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


// æœç´¢æ¡†
.search-bar{
    width: 100%;
    height: 80rpx;
    margin-top: 2%;
}
.search-bar-box{
    display: flex;
    margin: 0 auto;
    width: 90vw;
    height: 60rpx;
    border:5rpx solid #00a8cc;
    border-radius: 50rpx;
}
.search-span{
    width: 100rpx;
    height: 56rpx;
    margin-top: 6rpx;
    margin-left: 30rpx;
}
.search-text{
    width: 100%;
    margin-top: 10rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
    color: #7f7f81;
}
.search-btn{
    background-color: #00a8cc; /* Green */
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 35rpx;
    width:100px;
    height: 60rpx;
    line-height: 65rpx;
    border-radius: 30rpx;
    letter-spacing: 3rpx;
}

uni-button{
    margin: 0px;
@media (min-width: 300px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}
</style>

 pages/QC/SJ/detail.vue

@@ -1,126 +1,206 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">项目名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.projName"/>
        </view>
        <view class="form-group">
          <label class="form-label">质量要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验方法:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/>
        </view>
        <view class="form-group">
          <label class="form-label">使用仪表:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.levelNum"/>
        </view>
        <view class="form-group">
          <label class="form-label">下限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.minValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新人:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updater"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updateTime"/>
        </view>
        <view class="form-group">
          <label class="form-label">预览结果:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.result"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
        </view>
        <view class="form-group edit">
          <input class="form-input" style="color: red" disabled="true" type="text"
                 value="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"/>
        </view>
        <view class="form-group edit">
          <label class="form-label">检测结果:</label>
          <input class="form-input" type="number" v-model="formData.fcheckResu"/>
        </view>
        <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit">保存</button>
      </form>
  <view class="container">
    <!-- å¤´éƒ¨ -->
    <view class="header">
      <view class="title">首检项目明细</view>
      <view class="order-number">首检单号: {{formData.billNo}}</view>
    </view>
    <view>
      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>

    <!-- æ ‡ç­¾æ  - å¦‚果有多个检验项目可以切换 -->
    <view class="tabs" v-if="tabs && tabs.length > 1">
      <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
        @tap="switchTab(index, tab.id)">
        {{ tab.projName }}
      </view>
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">编号</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">判定标识</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">检验结果</uni-th>
          <uni-th width="150" align="center" style="color: #FFFFFF;background-color: lightskyblue;">修改</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            {{ index + 1 }}
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
          </uni-td>
          <uni-td>
            <view class="uni-group edit">
              <button type="warn" v-if="isNumber" @click="toDetail(item)">修改</button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
    
    <view class="tab-content">
      <!-- åŸºæœ¬ä¿¡æ¯ -->
      <view class="section">
        <view class="section-header">基本信息</view>
        <view class="section-body">
          <view class="info-grid">
            <view class="info-item">
              <view class="info-label">项目名称</view>
              <view class="info-value">{{ formData.projName }}</view>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    </view>

    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
            <view class="info-item" v-if="formData.itemMod">
              <view class="info-label">质量要求</view>
              <view class="info-value">{{ formData.itemMod }}</view>
            </view>
            <view class="info-item" v-if="formData.inspectionMethod">
              <view class="info-label">检验方法</view>
              <view class="info-value">{{ formData.inspectionMethod }}</view>
            </view>
            <view class="info-item" v-if="formData.usingInstruments">
              <view class="info-label">使用仪表</view>
              <view class="info-value">{{ formData.usingInstruments }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">检验数</view>
              <view class="info-value">{{ formData.levelNum }}</view>
            </view>
            <view class="info-item" v-if="formData.minValue">
              <view class="info-label">下限</view>
              <view class="info-value">{{ formData.minValue }}</view>
            </view>
            <view class="info-item" v-if="formData.standardValue">
              <view class="info-label">标准值</view>
              <view class="info-value">{{ formData.standardValue }}</view>
            </view>
            <view class="info-item" v-if="formData.maxValue">
              <view class="info-label">上限</view>
              <view class="info-value">{{ formData.maxValue }}</view>
            </view>
            <view class="info-item" v-if="formData.updater">
              <view class="info-label">更新人</view>
              <view class="info-value">{{ formData.updater }}</view>
            </view>
            <view class="info-item" v-if="formData.updateTime">
              <view class="info-label">更新时间</view>
              <view class="info-value">{{ formData.updateTime }}</view>
            </view>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
        </view>
      </view>

      <!-- è§„格要求 -->
      <view class="section" v-if="formData.specRequ">
        <view class="section-header">规格要求</view>
        <view class="section-body">
          <text class="spec-text">{{ formData.specRequ }}</text>
        </view>
      </view>

      <!-- æ£€éªŒæè¿° -->
      <view class="section" v-if="formData.itemMod">
        <view class="section-header">检验描述</view>
        <view class="section-body">
          <text class="spec-text">{{ formData.itemMod }}</text>
        </view>
      </view>

      <!-- æ£€éªŒç»“æžœ -->
      <view class="section">
        <view class="section-header">检验结果</view>
        <view class="section-body">
          <view class="info-grid">
            <view class="info-item" v-if="formData.result">
              <view class="info-label">预览结果</view>
              <view class="info-value">{{formData.result}}</view>
            </view>
          </view>

          <view v-if="formData.result != null" class="result-preview">
            <view class="info-label">预览结果</view>
            <view class="info-value">{{formData.result}}</view>
          </view>

          <view v-if="formData.remarks != null" class="result-ng">
            <view class="info-label">不合格描述</view>
            <view class="info-value danger">{{formData.remarks}}</view>
          </view>
        </view>
      </view>

      <!-- ç»“果录入 -->
      <view class="section">
        <view class="section-header">检验结果录入</view>
        <view class="section-body">
          <view class="input-group">
            <view class="input-wrapper">
              <button class="btn upload-btn" @tap="saveRemarks">
                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                ä¸åˆæ ¼æè¿°
              </button>
              
              <input v-if="tableData.length < formData.levelNum"
                v-model="formData.fcheckResu"
                type="text"
                class="result-input"
                placeholder="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"
                placeholder-class="placeholder" />
              <button v-if="(tableData.length < formData.levelNum)"
                style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
                @tap="submit">保存结果</button>
            </view>
          </view>
        </view>
      </view>

      <!-- ç»“果表格 -->
      <view v-if="tableData.length > 0" class="table-container">
        <view class="table-header">
          <view class="th">编号</view>
          <view class="th">检验结果<i style="color: rgb(0 212 68);"
              v-if="!(tableData.length < formData.levelNum)">（输入已完成）</i></view>
          <view class="th">操作</view>
        </view>

        <view v-for="(item, index) in tableData" :key="index" class="table-row">
          <view class="td">{{ index + 1 }}</view>
          <view class="td">
            <view :class="['result-badge', getResultClass(item.fcheckResu, item.fstand)]">
              {{ item.fcheckResu }}
            </view>
          </view>
          <view class="td">
            <button v-if="!isNumber" class="btn danger-btn" @tap="numberEdit(item)">
              {{ editResult(item.fcheckResu) }}
            </button>
            <button v-if="isNumber" class="btn danger-btn" @tap="toDetail(item)">
              ä¿®æ”¹
            </button>
          </view>
        </view>
      </view>

      <!-- å›¾ç‰‡é¢„览 -->
      <view v-if="isShowImg" class="section">
        <view class="section-header">相关图片</view>
        <view class="section-body">
          <view class="image-preview" @click="previewImage">
            <image :src="base64Image" mode="aspectFit" class="preview-image"/>
          </view>
        </view>
      </view>
    </view>

    <!-- ä¿®æ”¹ä¸åˆæ ¼æè¿°å¼¹å‡ºæ¡† -->
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <view class="popup-header">
          <h3>修改不合格描述</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">不合格描述：</view>
            <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/>
          </view>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="editRemarks">修改</button>
          <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button>
        </view>
      </view>
    </view>

    <!-- ä¿®æ”¹æ£€éªŒç»“果弹出框 -->
    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
        <form :modelValue="editData">
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
        <view class="popup-header">
          <h3>修改检验结果</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">检验结果：</view>
            <input class="input-field" type="text" v-model="editData.fcheckResu" placeholder="请输入检验结果"/>
          </view>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
        </form>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="eidt">修改</button>
          <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button>
        </view>
      </view>
    </view>
  </view>
@@ -143,9 +223,31 @@
      isShowImg: false,
      remarks: "",
      remarksPopup: false,
      // ===== æ–°å¢žLLJ样式相关数据 =====
      currentTab: 0,
      tabs: []
    }
  },
  methods: {
    getResultClass(fcheckResu, fstand) {
      // æ ¹æ®æ£€éªŒç»“果和判定标识确定样式类
      if (fstand === '√' || fcheckResu === 'OK') {
        return 'OK';
      } else if (fstand === '×' || fcheckResu === 'NG') {
        return 'NG';
      } else {
        // å¯¹äºŽæ•°å­—结果，根据fstand判断
        return fstand === '√' ? 'OK' : 'NG';
      }
    },
    
    // ===== æ–°å¢žæ ‡ç­¾åˆ‡æ¢æ–¹æ³• =====
    switchTab(index, id) {
      this.currentTab = index;
      // å¦‚果需要切换检验项目，可以在这里添加逻辑
      // this.gid = id;
      // this.refreshResult();
    },

    previewImage() {
      uni.previewImage({
@@ -365,50 +467,258 @@
}
</script>

<style>
<style lang="scss">
$primary-color: #409EFF;
$success-color: #67C23A;
$danger-color: #F56C6C;
$border-color: #DCDFE6;
$bg-color: #f5f7fa;

.form-group {
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
.container {
  padding: 20px;
  background-color: #fff;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
}
.header {
  padding: 20px;
  border-bottom: 1px solid $border-color;
  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
}
  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
  }

/* é»˜è®¤æ ·å¼ */
.list-container {
  height: calc(100vh - 750px);
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
}

/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* é€‚当调整高度 */
  .order-number {
    color: #666;
    font-size: 14px;
  }
}

.form-container {
  /* è®¾ç½®è¡¨å•å®¹å™¨çš„高度，使其可以滚动 */
  overflow-y: auto;
  /* å…è®¸è¡¨å•å®¹å™¨åž‚直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
.tabs {
  display: flex;
  background-color: $bg-color;
  border-bottom: 1px solid $border-color;

  .tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    border-right: 1px solid $border-color;
    color: #666;
    transition: all 0.3s;

    &:last-child {
      border-right: none;
    }

    &.active {
      background-color: #fff;
      color: $primary-color;
      font-weight: bold;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: $primary-color;
      }
    }
  }
}

.section {
  margin: 20px 0;
  border: 1px solid $border-color;
  border-radius: 4px;

  &-header {
    padding: 12px 16px;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;
    font-weight: bold;
  }

  &-body {
    padding: 16px;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .info-item {
    margin-bottom: 12px;

    .info-label {
      color: #909399;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .info-value {
      color: #333;
      font-weight: 500;
    }
  }
}

.input-group {
  margin: 16px 0;

  .input-wrapper {
    display: flex;
    gap: 12px;

    .result-input {
      flex: 1;
      height: 45px;
      padding: 0 12px;
      border: 1px solid $border-color;
      border-radius: 4px;
      font-size: 14px;
    }

    .upload-btn {
      background-color: #909399;
      color: #fff;
      padding: 0 10px;
      margin: 0;
    }
  }
}

.table-container {
  border: 1px solid $border-color;
  border-radius: 4px;
  margin-top: 20px;

  .table-header {
    display: flex;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;

    .th {
      flex: 1;
      padding: 12px;
      font-weight: bold;
    }
  }

  .table-row {
    display: flex;
    border-bottom: 1px solid $border-color;
    padding: 12px;

    &:last-child {
      border-bottom: none;
    }

    .td {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}

.result-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;

  &.OK {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &.NG {
    background-color: rgba($danger-color, 0.1);
    color: $danger-color;
  }
}

.spec-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.result-preview {
  margin: 16px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;

  .info-label {
    color: #909399;
    font-size: 14px;
    min-width: 80px;
  }

  .info-value {
    color: #333;
    font-weight: 500;
  }
}

.result-ng {
  margin: 16px 0;
  padding: 12px;
  background-color: rgba($danger-color, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;

  .info-label {
    color: $danger-color;
    font-size: 14px;
    min-width: 80px;
  }

  .info-value {
    color: $danger-color;
    font-weight: 500;
  }
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .btn {
    padding: 8px 20px;
    border-radius: 4px;

    &.primary-btn {
      background-color: $primary-color;
      color: #fff;
    }

    &.cancel-btn {
      background-color: #909399;
      color: #fff;
    }
  }
}

.danger {
  color: $danger-color;
}

.overlay {
@@ -421,6 +731,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
@@ -428,11 +739,101 @@
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw; /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
  height: 25vh; /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
  width: 68vw;
  height: 25vh;
  border-radius: 8px;
}

.edit {
  background-color: white;
.popup-header {
  padding: 20px;
  border-bottom: 1px solid #eee;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }
}

.popup-content {
  padding: 20px;

  .input-group {
    margin-bottom: 15px;

    .input-label {
      font-size: 14px;
      color: #7f8c8d;
      margin-right: 10px;
      min-width: 80px;
    }

    .input-field {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      background-color: white;
    }
  }
}

.popup-actions {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;

  .action-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

    &.primary {
      background-color: #3498db;
      color: white;
    }

    &.secondary {
      background-color: #95a5a6;
      color: white;
    }
  }
}

/* å›¾ç‰‡é¢„览 */
.image-preview {
  text-align: center;
  cursor: pointer;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .input-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .input-label {
    margin-bottom: 5px;
  }
}
</style>

 pages/QC/XJ/Add.vue

@@ -1,121 +1,136 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">检验单号:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.releaseNo"/>
        </view>
        <view class="form-group">
          <label class="form-label">创建人:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.createBy"/>
        </view>
        <view class="form-group">
          <label class="form-label">创建时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.createDate"/>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">线体编号:</text>
          <picker v-if="isUpdate" class="picker form-input" name="selector" :range="DAA020List"
                  @change="onDaa020Change">
            <text>{{ DAA020List[DAA020Index] }}</text>
          </picker>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa020"/>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">物料编码:</text>
          <picker v-if="isUpdate" class="picker form-input" name="selector" :range="ItemList"
                  @change="onItemChange">
            <text>{{ ItemList[ItemIndex] }}</text>
          </picker>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.itemNo"/>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">计划编号:</text>
          <picker v-if="isUpdate" class="picker form-input" name="selector" :range="DAA001List"
                  @change="onDaa001Change">
            <text>{{ DAA001List[DAA001Index] }}</text>
          </picker>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.billNo"/>
        </view>

        <view class="form-group">
          <label class="form-label">物料名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemName"/>
        </view>
        <view class="form-group">
          <label class="form-label">规格型号:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemModel"/>
        </view>
        <view class="form-group">
          <label class="form-label">工单数量:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.planQty"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
        </view>
      </form>
  <view class="container">
    <!-- å¤´éƒ¨ -->
    <view class="header">
      <view class="title">巡检项目明细</view>
      <view class="order-number">巡检单号: {{formData.releaseNo}}</view>
    </view>

    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.projName"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.result"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
              <button v-else type="warn" @click="toDetail(item)">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    <!-- åŸºæœ¬ä¿¡æ¯ -->
    <view class="section">
      <view class="section-header">基本信息</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">检验单号</view>
            <view class="info-value">{{ formData.releaseNo }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">创建人</view>
            <view class="info-value">{{ formData.createBy }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">创建时间</view>
            <view class="info-value">{{ formData.createDate }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">线体编号</view>
            <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA020List"
                    @change="onDaa020Change">
              <view class="picker-value">{{ DAA020List[DAA020Index] || '请选择' }}</view>
            </picker>
            <view v-else class="info-value">{{ formData.daa020 }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">物料编码</view>
            <picker v-if="isUpdate" class="picker-input" name="selector" :range="ItemList"
                    @change="onItemChange">
              <view class="picker-value">{{ ItemList[ItemIndex] || '请选择' }}</view>
            </picker>
            <view v-else class="info-value">{{ formData.itemNo }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">计划编号</view>
            <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA001List"
                    @change="onDaa001Change">
              <view class="picker-value">{{ DAA001List[DAA001Index] || '请选择' }}</view>
            </picker>
            <view v-else class="info-value">{{ formData.billNo }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">物料名称</view>
            <view class="info-value">{{ formData.itemName }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">规格型号</view>
            <view class="info-value">{{ formData.itemModel }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">工单数量</view>
            <view class="info-value highlight">{{ formData.planQty }}</view>
          </view>
          <view class="info-item" v-if="formData.remarks">
            <view class="info-label">不合格描述</view>
            <view class="info-value danger">{{ formData.remarks }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="plus-button">
      <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">创建检验单并生成部分默认值</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button>
    <!-- æ£€éªŒé¡¹ç›® -->
    <view class="section" v-if="tableData.length > 0">
      <view class="section-header">检验项目</view>
      <view class="section-body">
        <view class="inspection-table">
          <table>
            <thead>
              <tr>
                <th width="20%" style="text-align: center;">检验项目</th>
                <th width="50%" style="text-align: center;">检验描述</th>
                <th width="15%" style="text-align: center;">记录(点击)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.projName }}</td>
                <td>
                  <view v-if="item.result=='合格'" class="watermark approved">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view v-if="item.result=='不合格'" class="watermark rejected">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view v-if="item.result==null || item.result=='未完成'" class="watermark pending">
                    {{ getStatusText(item.result) }}
                  </view>
                  <view class="description-text">{{ item.projName }}</view>
                </td>
                <td>
                  <button v-if="item.isCheck >= item.levelNum" class="record-btn" @click="toDetail(item)">查看</button>
                  <button v-else class="record-btn" @click="toDetail(item)">填写</button>
                </td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>
    </view>

    <view class="plus-button">
      <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button>
    <!-- æ“ä½œæŒ‰é’® -->
    <view class="action-buttons">
      <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="getItem">创建检验单并生成部分默认值</button>
      <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
      <button class="action-btn danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button>
      <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button>
      <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button>
      <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>
    </view>
    <!-- ä¿®æ”¹ä¸åˆæ ¼æè¿°å¼¹å‡ºæ¡† -->
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
        <view class="popup-header">
          <h3>修改不合格描述</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">不合格描述：</view>
            <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="editRemarks">修改</button>
          <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button>
        </view>
      </view>
    </view>

@@ -202,6 +217,27 @@
    }
  },
  methods: {
    getStatusClass(result) {
      if (result === '合格') return 'status-pass';
      if (result === '不合格') return 'status-fail';
      return 'status-pending';
    },
    
    getStatusText(status) {
      const statusMap = {
        approved: '合格',
        rejected: '不合格',
        pending: '待确认'
      }
      if (status == null || status == '未完成') {
        return statusMap['pending'] || '待确认';
      } else if (status == '合格') {
        return statusMap['approved'] || '合格';
      } else {
        return statusMap['rejected'] || '不合格';
      }
    },
    
    removeXJ() {
      if (this.formData.id) {
        this.$post({
@@ -454,65 +490,242 @@
  }
};
</script>
<style>
.form-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c9c9c9;
<style scoped>
/* åŸºç¡€æ ·å¼ */
.container {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.form-label {
  margin-bottom: 0;
  padding: 5px;
}
.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
}
.picker {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  font-size: 12px;
}
.uni-form-item {
  display: flex;
  border-bottom: 1px solid #c9c9c9;
}
.edit {

/* å¤´éƒ¨æ ·å¼ */
.header {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
/* é»˜è®¤æ ·å¼ */
.list-container {
  height: 60vh;
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */

.title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}
/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 376px);
    /* é€‚当调整高度 */
  }

.order-number {
  font-size: 14px;
  color: #3498db;
  font-weight: 500;
}
.form-container {
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */

/* åŒºåŸŸæ ·å¼ */
.section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}
.th {
  background-color: lightskyblue;
  color: #FFFFFF;

.section-header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}
.plus-button {
  line-height: 59px;
  font-size: 24px;

.section-body {
  padding: 20px;
}

/* ä¿¡æ¯ç½‘æ ¼ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  font-size: 12px;
  color: #7f8c8d;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #2c3e50;
}

.info-value.highlight {
  font-weight: 600;
  color: #3498db;
  font-size: 16px;
}

.info-value.danger {
  color: #e74c3c;
  font-weight: 500;
}

/* é€‰æ‹©å™¨æ ·å¼ */
.picker-input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  background-color: white;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 10px;
}

.picker-value {
  font-size: 14px;
  color: #2c3e50;
}

/* æ£€éªŒé¡¹ç›®è¡¨æ ¼ */
.inspection-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 25px 0;
}

.inspection-table table {
  width: 100%;
  border-collapse: collapse;
}

.inspection-table th {
  background-color: #f8f9fa;
  color: #34495e;
  padding: 12px 15px;
  font-weight: bold;
  text-align: left;
  border: 1px solid #ddd;
}

.inspection-table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.inspection-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.inspection-table tr:hover {
  background-color: #f1f5f9;
}

/* æ°´å°æ ·å¼ */
.watermark {
  position: absolute;
  font-size: 40px;
  font-weight: bold;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-15deg);
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

.watermark.approved {
  color: #2ecc71;
}

.watermark.rejected {
  color: #e74c3c;
}

.watermark.pending {
  color: #f39c12;
}

/* æè¿°æ–‡æœ¬å®¹å™¨ */
.description-text {
  position: relative;
  z-index: 2;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0.7);
}

/* è°ƒæ•´è¡¨æ ¼å•å…ƒæ ¼ */
.inspection-table td:nth-child(2) {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.record-btn {
  padding: 6px 12px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #333;
}

.record-btn:hover {
  background-color: #e9ecef;
}


/* æ“ä½œæŒ‰é’® */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn.primary {
  background-color: #3498db;
  color: white;
}

.action-btn.secondary {
  background-color: #95a5a6;
  color: white;
}

.action-btn.danger {
  background-color: #e74c3c;
  color: white;
}

.action-btn.warning {
  background-color: #f39c12;
  color: white;
}

/* å¼¹å‡ºæ¡†æ ·å¼ */
.overlay {
  position: fixed;
  top: 0;
@@ -523,15 +736,71 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background-color: #fff;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw;
  /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
  height: 25vh;
  /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
  border-bottom: 1px solid #eee;
}

.popup-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.popup-content {
  padding: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.popup-actions {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>

 pages/QC/XJ/List.vue

@@ -1,187 +1,91 @@
<template>
  <view>
  <view class="inspection-app">
    <!-- åˆ·æ–°é¡µé¢åŽçš„顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</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+'&releaseNo='+item.releaseNo">
              <!-- é€šè¿‡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.releaseNo"/>
                </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.createDate"/>
                      </view>
                    </view>
                    <view class="uni-note" >
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                      </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.daa020"/>
                      </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.itemName"/>
                      </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.itemModel"/>
                      </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.planQty"/>
                      </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.fcheckBy"/>
                      </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.fcheckResu"/>
                      </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+'&releaseNo='+item.releaseNo">
              <!-- é€šè¿‡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.releaseNo"/>
                </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.createDate"/>
                      </view>
                    </view>
                    <view class="uni-note" >
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                      </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.daa020"/>
                      </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.itemName"/>
                      </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.itemModel"/>
                      </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.planQty"/>
                      </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.fcheckBy"/>
                      </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.fcheckResu"/>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
    <!-- é¡¶éƒ¨ç­›é€‰åŒº -->
    <view class="filter-section">
      <view class="filter-controls">
        <!-- çŠ¶æ€åˆ‡æ¢æ ‡ç­¾ -->
        <view class="status-tabs">
          <button :class="['tab-button', current === 0 ? 'active' : '']" @click="onClickItem({currentIndex: 0})">
            {{items[0]}}
          </button>
          <button :class="['tab-button', current === 1 ? 'active' : '']" @click="onClickItem({currentIndex: 1})">
            {{items[1]}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ£€éªŒå•åˆ—表 -->
    <view class="inspection-list">
      <!-- æ£€éªŒå•å¡ç‰‡ -->
      <view class="inspection-card" v-for="item in data" :key="item.id" @click="navigateToDetail(item)">
        <view class="card-header">
          <text class="card-title">检验单号: {{item.releaseNo}}</text>
          <text class="status pass" v-if="item.fcheckResu === '合格'">合格</text>
          <text class="status unqualified" v-if="item.fcheckResu === '不合格'">不合格</text>
          <text class="status pending" v-if="!item.fcheckResu">待检验</text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">物料信息</text>
              <text class="info-content">{{item.itemNo}}<br>{{item.itemName}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">规格型号</text>
              <text class="info-content">{{item.itemModel}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">产线</text>
              <text class="info-content">{{item.daa020}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">工单数量</text>
              <text class="info-content highlight">{{item.planQty}}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">检验人</text>
              <text class="info-content">{{item.fcheckBy}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">创建人</text>
              <text class="info-content">{{item.createBy}}</text>
            </view>
          </view>

          <view class="meta-info">
            <text class="meta-item">
              <uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
              {{item.createDate}}
            </text>
            <text class="meta-item" v-if="item.fcheckResu">
              <uni-icons type="checkmarkempty" size="14" color="#95a5a6"></uni-icons>
              æ£€æµ‹ç»“æžœ: {{item.fcheckResu}}
            </text>
          </view>
        </view>

        <view class="card-actions">
          <button class="primary" @click.stop="navigateToDetail(item)">
            {{current === 0 ? '开始检验' : '查看详情'}}
          </button>
        </view>
      </view>
    </view>

    <!-- æ–°å¢žæŒ‰é’® -->
    <view class="plus-button" @click="handleFabClick">
      +
    </view>
  </view>
</template>
@@ -233,6 +137,11 @@
        this.init();
      }
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: 'Add?id=' + item.id + '&releaseNo=' + item.releaseNo
      });
    },
  },
  /**
   * ä¸‹æ‹‰åˆ·æ–°å›žè°ƒå‡½æ•°
@@ -261,41 +170,169 @@
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

.uni-note {
  margin-top: 0;
<style scoped>
/* åŸºç¡€æ ·å¼é‡ç½® */
.inspection-app {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
/* é¡¶éƒ¨ç­›é€‰åŒº */
.filter-section {
  margin-bottom: 24px;
}

/* Ensure automatic adaptation based on page size */
.form-group {
.filter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-tabs {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background-color: #ecf0f1;
  width: 300px;
}

.tab-button {
  padding: 0px 16px;
  border: none;
  background: none;
  font-size: 14px;
  transition: all 0.3s;
  margin: 0;
  height: 35px;
  flex: 1;
}

.tab-button.active {
  background-color: #3498db;
  color: white;
}

/* æ£€éªŒå•åˆ—表 */
.inspection-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* æ£€éªŒå•å¡ç‰‡ */
.inspection-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.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 */
.card-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  margin: 0 8px;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
.status {
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status.pending {
  background-color: #f39c12;
  color: white;
}

.status.pass {
  background-color: #00cd00;
  color: white;
}

.status.unqualified {
  background-color: #ff0000;
  color: white;
}

.card-body {
  padding: 16px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  gap: 16px;
}

.info-item {
  flex: 1;
}

.info-label {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.info-content {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

.highlight {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.meta-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #95a5a6;
  margin-top: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  transition: all 0.2s;
  flex: 1;
}

button.primary {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.plus-button {
@@ -305,7 +342,7 @@
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  background-color: #3498db;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
@@ -313,15 +350,6 @@
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
}

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
@@ -342,36 +370,26 @@
  opacity: 1;
}

.content {
  width: 100%;
/* å“åº”式设计 */
@media (min-width: 768px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
@media (min-width: 300px) {
  .inspection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .info-row {
    flex-direction: row;
  }
}
</style>

 pages/QC/XJ/detail.vue

@@ -1,128 +1,182 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">项目名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.projName"/>
        </view>
        <view class="form-group">
          <label class="form-label">质量要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验方法:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/>
        </view>
        <view class="form-group">
          <label class="form-label">使用仪表:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.levelNum"/>
        </view>
        <view class="form-group">
          <label class="form-label">下限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.minValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新人:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updater"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updateTime"/>
        </view>
        <view class="form-group">
          <label class="form-label">预览结果:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.result"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
        </view>
        <view class="form-group edit">
          <input class="form-input" style="color: red" disabled="true" type="text"
                 value="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"/>
        </view>
        <view class="form-group edit">
          <label class="form-label">检测结果:</label>
          <input class="form-input" type="number" v-model="formData.fcheckResu"/>
        </view>
        <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit">保存</button>
      </form>
    </view>
    <view>
      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">编号</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">判定标识</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">检验结果</uni-th>
          <uni-th width="150" align="center"
                  style="color: #FFFFFF;background-color: lightskyblue;">修改
          </uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            {{ index + 1 }}
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button type="warn" v-if="isNumber" @click="toDetail(item)">修改</button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
  <view class="container">
    <!-- å¤´éƒ¨ -->
    <view class="header">
      <view class="title">巡检项目明细</view>
      <view class="order-number">巡检单号: {{billNo}}</view>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    </view>

    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
    <!-- åŸºæœ¬ä¿¡æ¯ -->
    <view class="section">
      <view class="section-header">基本信息</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item">
            <view class="info-label">项目名称</view>
            <view class="info-value">{{ formData.projName }}</view>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
          <view class="info-item" v-if="formData.itemMod">
            <view class="info-label">质量要求</view>
            <view class="info-value">{{ formData.itemMod }}</view>
          </view>
          <view class="info-item" v-if="formData.inspectionMethod">
            <view class="info-label">检验方法</view>
            <view class="info-value">{{ formData.inspectionMethod }}</view>
          </view>
          <view class="info-item" v-if="formData.usingInstruments">
            <view class="info-label">使用仪表</view>
            <view class="info-value">{{ formData.usingInstruments }}</view>
          </view>
          <view class="info-item">
            <view class="info-label">检验数</view>
            <view class="info-value">{{ formData.levelNum }}</view>
          </view>
          <view class="info-item" v-if="formData.minValue">
            <view class="info-label">下限</view>
            <view class="info-value">{{ formData.minValue }}</view>
          </view>
          <view class="info-item" v-if="formData.standardValue">
            <view class="info-label">标准值</view>
            <view class="info-value">{{ formData.standardValue }}</view>
          </view>
          <view class="info-item" v-if="formData.maxValue">
            <view class="info-label">上限</view>
            <view class="info-value">{{ formData.maxValue }}</view>
          </view>
          <view class="info-item" v-if="formData.updater">
            <view class="info-label">更新人</view>
            <view class="info-value">{{ formData.updater }}</view>
          </view>
          <view class="info-item" v-if="formData.updateTime">
            <view class="info-label">更新时间</view>
            <view class="info-value">{{ formData.updateTime }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- æ£€éªŒç»“æžœ -->
    <view class="section">
      <view class="section-header">检验结果</view>
      <view class="section-body">
        <view class="info-grid">
          <view class="info-item" v-if="formData.result">
            <view class="info-label">预览结果</view>
            <view class="info-value">{{formData.result}}</view>
          </view>
        </view>

        <view v-if="formData.result != null" class="result-preview">
          <view class="info-label">预览结果</view>
          <view class="info-value">{{formData.result}}</view>
        </view>

        <view v-if="formData.remarks != null" class="result-ng">
          <view class="info-label">不合格描述</view>
          <view class="info-value danger">{{formData.remarks}}</view>
        </view>
      </view>
    </view>

    <!-- ç»“果录入 -->
    <view class="section">
      <view class="section-header">检验结果录入</view>
      <view class="section-body">
        <view class="inspection-hint">
          <view class="hint-text">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</view>
        </view>
        <view class="input-group">
          <view class="input-wrapper">
            <input v-if="tableData.length < formData.levelNum"
              v-model="formData.fcheckResu"
              type="number"
              class="result-input"
              placeholder="请输入检验结果"
              placeholder-class="placeholder" />
            <button v-if="(tableData.length < formData.levelNum)"
              style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
              @click="submit">保存结果</button>
          </view>
        </view>
      </view>
    </view>

    <!-- å›¾ç‰‡é¢„览 -->
    <view v-if="isShowImg" class="section">
      <view class="section-header">相关图片</view>
      <view class="section-body">
        <view class="image-preview" @click="previewImage">
          <image :src="base64Image" mode="aspectFit" class="preview-image"/>
        </view>
      </view>
    </view>
    <!-- ç»“果表格 -->
    <view v-if="tableData.length > 0" class="table-container">
      <view class="table-header">
        <view class="th">编号</view>
        <view class="th">检验结果<i style="color: rgb(0 212 68);"
            v-if="!(tableData.length < formData.levelNum)">(输入已完成)</i></view>
        <view class="th">操作</view>
      </view>

      <view v-for="(item, index) in tableData" :key="index" class="table-row">
        <view class="td">{{ index + 1 }}</view>
        <view class="td">
          <view :class="['result-badge', item.fstand === '√' ? 'OK' : 'NG']">
            {{ item.fcheckResu }}
          </view>
        </view>
        <view class="td">
          <button v-if="!isNumber" class="btn danger-btn" @click="numberEdit(item)">
            {{ editResult(item.fcheckResu) }}
          </button>
          <button v-if="isNumber" class="btn danger-btn" @click="toDetail(item)">
            ä¿®æ”¹
          </button>
        </view>
      </view>
    </view>

    <!-- æ“ä½œæŒ‰é’® -->
    <view class="action-buttons">
      <button class="action-btn warning" @click="saveRemarks">添加不合格描述</button>
    </view>

    <!-- ä¿®æ”¹ä¸åˆæ ¼æè¿°å¼¹å‡ºæ¡† -->
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <view class="popup-header">
          <h3>修改不合格描述</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">不合格描述：</view>
            <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/>
          </view>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="editRemarks">修改</button>
          <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button>
        </view>
      </view>
    </view>

    <!-- ä¿®æ”¹æ£€éªŒç»“果弹出框 -->
    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
        <form :modelValue="editData">
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
        <view class="popup-header">
          <h3>修改检验结果</h3>
        </view>
        <view class="popup-content">
          <view class="input-group">
            <view class="input-label">检验结果：</view>
            <input class="input-field" type="text" v-model="editData.fcheckResu" placeholder="请输入检验结果"/>
          </view>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
        </form>
        </view>
        <view class="popup-actions">
          <button class="action-btn primary" @click="eidt">修改</button>
          <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button>
        </view>
      </view>
    </view>
  </view>
@@ -148,6 +202,12 @@
    }
  },
  methods: {
    getResultClass(result) {
      if (result === '合格') return 'result-pass';
      if (result === '不合格') return 'result-fail';
      return 'result-pending';
    },
    

    previewImage() {
      uni.previewImage({
@@ -362,51 +422,266 @@
}
</script>

<style>
.form-group {
<style scoped>
/* åŸºç¡€æ ·å¼ */
.container {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* å¤´éƒ¨æ ·å¼ */
.header {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.order-number {
  font-size: 14px;
  color: #3498db;
  font-weight: 500;
}

/* åŒºåŸŸæ ·å¼ */
.section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.section-body {
  padding: 20px;
}

/* ä¿¡æ¯ç½‘æ ¼ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  font-size: 12px;
  color: #7f8c8d;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #2c3e50;
}

.info-value.danger {
  color: #e74c3c;
  font-weight: 500;
}

/* ç»“果忽章 */
.result-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  width: fit-content;
}

.result-badge.OK {
  background-color: #d4edda;
  color: #155724;
}

.result-badge.NG {
  background-color: #f8d7da;
  color: #721c24;
}

/* æ£€éªŒè¾“入区 */
.inspection-hint {
  background-color: #fff3cd;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.hint-text {
  font-size: 12px;
  color: #856404;
}

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
  margin-bottom: 15px;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
.input-wrapper {
  display: flex;
  gap: 12px;
  width: 100%;
}

.form-input {
.result-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

/* é»˜è®¤æ ·å¼ */
.list-container {
  height: calc(100vh - 750px);
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* é€‚当调整高度 */
  }
.btn.primary-btn {
  background-color: #3498db;
  color: white;
}

.form-container {
  /* è®¾ç½®è¡¨å•å®¹å™¨çš„高度，使其可以滚动 */
  overflow-y: auto;
  /* å…è®¸è¡¨å•å®¹å™¨åž‚直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
.btn.danger-btn {
  background-color: #e74c3c;
  color: white;
}

/* å›¾ç‰‡é¢„览 */
.image-preview {
  text-align: center;
  cursor: pointer;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* ç»“果预览 */
.result-preview {
  margin: 16px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-ng {
  margin: 16px 0;
  padding: 12px;
  background-color: #f8d7da;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* è¡¨æ ¼å®¹å™¨ */
.table-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 20px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #3498db;
  color: white;
}

.th {
  flex: 1;
  padding: 12px;
  font-weight: bold;
  text-align: center;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 12px;
}

.table-row:last-child {
  border-bottom: none;
}

.td {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* æ“ä½œæŒ‰é’® */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn.primary {
  background-color: #3498db;
  color: white;
}

.action-btn.secondary {
  background-color: #95a5a6;
  color: white;
}

.action-btn.warning {
  background-color: #f39c12;
  color: white;
}

/* å¼¹å‡ºæ¡†æ ·å¼ */
.overlay {
  position: fixed;
  top: 0;
@@ -417,20 +692,81 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw;
  /* è®¾ç½®å®½åº¦ä¸ºè§†å£å®½åº¦çš„80% */
  height: 25vh;
  /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.edit {
.popup-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.popup-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.popup-content {
  padding: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.popup-actions {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .input-wrapper {
    flex-direction: column;
  }
  
  .table-row {
    flex-direction: column;
    text-align: center;
  }
  
  .td {
    justify-content: center;
    margin-bottom: 8px;
  }
}
</style>

 store/index.js

@@ -10,9 +10,9 @@
            networkFlag:'内网', 
            serverURLInt:'http://192.168.11.251:10055',//服务器体检 10.0.1.104:10054
            serverURL:'http://localhost:10055',//本地调试地址
            serverAPI:'http://localhost:5184/api',//当前正在使用的服务器,默认为外网  localhost
            // serverAPI:'http://localhost:5184/api',//当前正在使用的服务器,默认为外网  localhost
            //serverAPI:'http://192.168.1.22:10054/api',//内网 
            //serverAPI:'http://36.26.21.214:10054/api',
            serverAPI:'http://36.26.21.214:10055/api',
        }
    },
    mutations: {