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

啊鑫

2 天以前 eaa506e57403d1b8502f16ca5dd6e82c347724d0

 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>