111

啊鑫

6 天以前 2b0e70bb88ced210dbc693a4d2ded2d658b1da02

 pages/QC/OQC/Add.vue

@@ -1,284 +1,287 @@
<template>
   <view class="page-container">
      <!-- 表单容器 -->
      <view class="form-card">
         <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.itemNo" />
            </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.saleOrderNo" />
            </view>
            <view class="form-group">
               <label class="form-label">送检数量:</label>
               <input class="form-input" disabled="true" type="number" 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.createDate" />
            </view>
            <view class="form-group">
               <label class="form-label">创建人:</label>
               <input class="form-input" disabled="true" type="text" v-model="formData.createUser" />
            </view>
            <view class="form-group">
               <label class="form-label">不良描述:</label>
               <input class="form-input" disabled="true" type="text" v-model="formData.remeke" />
            </view>
         </form>
      </view>
  <view class="page-container">
    <!-- 表单容器 -->
    <view class="form-card">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">检验单号:</label>
          <input v-model="formData.releaseNo" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">物料编码:</label>
          <input v-model="formData.itemNo" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">物料名称:</label>
          <input v-model="formData.itemName" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">物料规格:</label>
          <input v-model="formData.itemModel" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">订单编号:</label>
          <input v-model="formData.saleOrderNo" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">送检数量:</label>
          <input v-model="formData.planQty" class="form-input" disabled="true" type="number"/>
        </view>
        <view class="form-group">
          <label class="form-label">创建时间:</label>
          <input v-model="formData.createDate" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">创建人:</label>
          <input v-model="formData.createUser" class="form-input" disabled="true" type="text"/>
        </view>
        <view class="form-group">
          <label class="form-label">不良描述:</label>
          <input v-model="formData.remeke" class="form-input" disabled="true" type="text"/>
        </view>
      </form>
    </view>

      <!-- 检验项目卡片 -->
      <view class="inspection-card">
         <view class="card-header">
            <view class="header-icon">🔍</view>
            <text class="header-title">检验项目</text>
            <view class="header-badge">{{ tableData.length }}</view>
         </view>
			
         <view class="inspection-list" v-if="tableData.length > 0">
            <view v-for="(item, index) in tableData" :key="index" class="inspection-item" 
               :class="{ 'item-completed': item.fcheckResu === '合格', 'item-failed': item.fcheckResu === '不合格' }">
					
               <!-- 左侧状态指示器 -->
               <view class="status-indicator" 
                  :class="{ 'status-pass': item.fcheckResu === '合格', 'status-fail': item.fcheckResu === '不合格', 'status-pending': item.fcheckResu === '未检验' }">
               </view>
					
               <!-- 主要内容区域 -->
               <view class="item-content">
                  <view class="item-header">
                     <view class="item-title">{{ item.fcheckItem }}</view>
                     <view class="status-badge" 
                        :class="{ 'badge-pass': item.fcheckResu === '合格', 'badge-fail': item.fcheckResu === '不合格', 'badge-pending': item.fcheckResu === '未检验' }">
                        <text class="status-icon">{{ item.fcheckResu === '合格' ? '✓' : item.fcheckResu === '不合格' ? '✗' : '○' }}</text>
                        <text class="status-text">{{ item.fcheckResu }}</text>
                     </view>
                  </view>
						
                  <view class="item-description" v-if="item.fcheckItemDesc">
                     <text class="description-text">{{ item.fcheckItemDesc }}</text>
                  </view>
						
                  <view class="item-footer">
                     <view class="progress-info">
                        <text class="progress-label">检验进度:</text>
                        <view class="progress-bar">
                           <view class="progress-fill" 
                              :style="{ width: (item.fenterQty / item.checkQyt * 100) + '%' }"
                              :class="{ 'progress-complete': item.fenterQty >= item.checkQyt, 'progress-incomplete': item.fenterQty < item.checkQyt }">
                           </view>
                        </view>
                        <text class="progress-text">{{ item.fenterQty }}/{{ item.checkQyt }}</text>
                     </view>
							
                     <view class="action-button" @click="toDetail(item)"
                        :class="{ 'btn-complete': item.fenterQty >= item.checkQyt, 'btn-incomplete': item.fenterQty < item.checkQyt }">
                        <text class="btn-text">{{ item.fenterQty >= item.checkQyt ? '查看详情' : '开始检验' }}</text>
                        <text class="btn-icon">→</text>
                     </view>
                  </view>
               </view>
            </view>
         </view>
			
         <!-- 空状态 -->
         <view v-else class="empty-state">
            <view class="empty-icon">📋</view>
            <text class="empty-text">暂无检验项目</text>
            <text class="empty-desc">请先生成检验项目</text>
         </view>
      </view>
    <!-- 检验项目卡片 -->
    <view class="inspection-card">
      <view class="card-header">
        <view class="header-icon">🔍</view>
        <text class="header-title">检验项目</text>
        <view class="header-badge">{{ tableData.length }}</view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="action-buttons">
         <button class="btn btn-primary" @click="submitInspection">提交</button>
         <button class="secondary-btn" @click="uploadImages">上传/查看图片</button>
         <button class="btn btn-secondary" @click="addDefectDescription">添加不合格描述</button>
      </view>
		
		
      <!-- 不合格描述弹出层 -->
      <view v-if="remarksPopup" class="overlay active">
        <view class="popup" :class="{ 'popup-scale': isPopupAnimated }" @animationend="isPopupAnimated = false">
          <view class="popup-header">
            <h3 class="popup-title">修改不合格描述</h3>
            <view class="close-btn" @click="remarksPopup = !remarksPopup">×</view>
          </view>
          <form>
            <view class="form-group">
              <label class="form-label">不合格描述:</label>
              <input class="form-input" type="text" v-model="remarks" />
            </view>
            <view class="button-group popup-buttons">
              <button :class="['action-btn', 'btn-danger']" @click="editRemarks">
                修改
              </button>
              <button :class="['action-btn', 'btn-light']" @click="remarksPopup = !remarksPopup">
                取消
              </button>
            </view>
          </form>
        </view>
      </view>
   </view>
      <view v-if="tableData.length > 0" class="inspection-list">
        <view v-for="(item, index) in tableData" :key="index" :class="{ 'item-completed': item.fcheckResu === '合格', 'item-failed': item.fcheckResu === '不合格' }"
              class="inspection-item">

          <!-- 左侧状态指示器 -->
          <view :class="{ 'status-pass': item.fcheckResu === '合格', 'status-fail': item.fcheckResu === '不合格', 'status-pending': item.fcheckResu === '未检验' }"
                class="status-indicator">
          </view>

          <!-- 主要内容区域 -->
          <view class="item-content">
            <view class="item-header">
              <view class="item-title">{{ item.fcheckItem }}</view>
              <view :class="{ 'badge-pass': item.fcheckResu === '合格', 'badge-fail': item.fcheckResu === '不合格', 'badge-pending': item.fcheckResu === '未检验' }"
                    class="status-badge">
                <text class="status-icon">{{
                    item.fcheckResu === '合格' ? '✓' : item.fcheckResu === '不合格' ? '✗' : '○'
                  }}
                </text>
                <text class="status-text">{{ item.fcheckResu }}</text>
              </view>
            </view>

            <view v-if="item.fcheckItemDesc" class="item-description">
              <text class="description-text">{{ item.fcheckItemDesc }}</text>
            </view>

            <view class="item-footer">
              <view class="progress-info">
                <text class="progress-label">检验进度:</text>
                <view class="progress-bar">
                  <view :class="{ 'progress-complete': item.fenterQty >= item.checkQyt, 'progress-incomplete': item.fenterQty < item.checkQyt }"
                        :style="{ width: (item.fenterQty / item.checkQyt * 100) + '%' }"
                        class="progress-fill">
                  </view>
                </view>
                <text class="progress-text">{{ item.fenterQty }}/{{ item.checkQyt }}</text>
              </view>

              <view :class="{ 'btn-complete': item.fenterQty >= item.checkQyt, 'btn-incomplete': item.fenterQty < item.checkQyt }" class="action-button"
                    @click="toDetail(item)">
                <text class="btn-text">{{ item.fenterQty >= item.checkQyt ? '查看详情' : '开始检验' }}</text>
                <text class="btn-icon">→</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">📋</view>
        <text class="empty-text">暂无检验项目</text>
        <text class="empty-desc">请先生成检验项目</text>
      </view>
    </view>

    <!-- 操作按钮区域 -->
    <view class="action-buttons">
      <button class="btn btn-primary" @click="submitInspection">提交</button>
      <button class="secondary-btn" @click="uploadImages">上传/查看图片</button>
      <button class="btn btn-secondary" @click="addDefectDescription">添加不合格描述</button>
    </view>


    <!-- 不合格描述弹出层 -->
    <view v-if="remarksPopup" class="overlay active">
      <view :class="{ 'popup-scale': isPopupAnimated }" class="popup" @animationend="isPopupAnimated = false">
        <view class="popup-header">
          <h3 class="popup-title">修改不合格描述</h3>
          <view class="close-btn" @click="remarksPopup = !remarksPopup">×</view>
        </view>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input v-model="remarks" class="form-input" type="text"/>
          </view>
          <view class="button-group popup-buttons">
            <button :class="['action-btn', 'btn-danger']" @click="editRemarks">
              修改
            </button>
            <button :class="['action-btn', 'btn-light']" @click="remarksPopup = !remarksPopup">
              取消
            </button>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            formData: {},
            tableData: [],
            remarks: "",
            remarksPopup: false,
            isPopupAnimated: false,
         }
      },
      onLoad(options) {
         //options中包含了url附带的参数
         let params = options;
export default {
  data() {
    return {
      formData: {},
      tableData: [],
      remarks: "",
      remarksPopup: false,
      isPopupAnimated: false,
    }
  },
  onLoad(options) {
    //options中包含了url附带的参数
    let params = options;

         if (params["id"]) {
            this.formData.id = params["id"];
            this.init();
         }
      },
      methods: {
         init() {
            let userName = this.$loginInfo.account;
            this.$post({
               url: "/MesOqcItemsDetect02/getPage",
               data: {
                  id: this.formData.id,
                  createUser: userName,
                  pageIndex: 1,
                  limit: 1,
               }
            }).then(res => {
               let data = res.data[0];
               if (data) {
                  this.formData = data;
                  this.getDetail5();
               }
            });
         },
    if (params["id"]) {
      this.formData.id = params["id"];
      this.init();
    }
  },
  methods: {
    init() {
      let userName = this.$loginInfo.account;
      this.$post({
        url: "/MesOqcItemsDetect02/getPage",
        data: {
          id: this.formData.id,
          createUser: userName,
          pageIndex: 1,
          limit: 1,
        }
      }).then(res => {
        let data = res.data[0];
        if (data) {
          this.formData = data;
          this.getDetail5();
        }
      });
    },

         getDetail5() {
            let userName = this.$loginInfo.account;
            this.$post({
               url: "/MesOqcItemsDetect02/GetDetail5",
               data: {
                  id: this.formData.id,
                  createUser: userName,
                  releaseNo: this.formData.releaseNo,
               }
            }).then(res => {
               let data = res.data;
               this.tableData = data;
            });
         },
         uploadImages() {
            // 上传/查看图片的逻辑
            uni.navigateTo({
               url: 'ImageItem?id=' + this.formData.releaseNo
            });
         },
         addDefectDescription() {
            // 确保表单数据存在
            if (!this.formData) return;
    getDetail5() {
      let userName = this.$loginInfo.account;
      this.$post({
        url: "/MesOqcItemsDetect02/GetDetail5",
        data: {
          id: this.formData.id,
          createUser: userName,
          releaseNo: this.formData.releaseNo,
        }
      }).then(res => {
        let data = res.data;
        this.tableData = data;
      });
    },
    uploadImages() {
      // 上传/查看图片的逻辑
      uni.navigateTo({
        url: 'ImageItem?id=' + this.formData.id
      });
    },
    addDefectDescription() {
      // 确保表单数据存在
      if (!this.formData) return;

            this.remarksPopup = !this.remarksPopup;
            this.remarks = this.formData.remeke || '';
            this.isPopupAnimated = true;
         },
         toDetail(item) {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remeke || '';
      this.isPopupAnimated = true;
    },
    toDetail(item) {

            uni.navigateTo({
               url: 'detail?mainId=' + item.id + '&releaseNo=' + this.formData
                  .releaseNo
            });
      uni.navigateTo({
        url: 'detail?mainId=' + item.id + '&releaseNo=' + this.formData
            .releaseNo
      });

         },
         submitInspection() {
            // 检验提交的逻辑
            this.$post({
               url: "/MesOqcItemsDetect02/IqcQaSubmit",
               data: {
                  userNo: this.$loginInfo.account,
                  releaseNo: this.formData.releaseNo
               }
            }).then(res => {
               if (res.status == 0) {
    },
    submitInspection() {
      // 检验提交的逻辑
      this.$post({
        url: "/MesOqcItemsDetect02/IqcQaSubmit",
        data: {
          userNo: this.$loginInfo.account,
          releaseNo: this.formData.releaseNo
        }
      }).then(res => {
        if (res.status == 0) {

                  uni.showToast({
                     title: res.message.toString(),
                     icon: 'success',
                     duration: 2000
                  })
                  // 如果有页面跳转，需要用定时器延迟
                  setTimeout(() => {
                     uni.navigateTo({
                        url: 'List'
                     });
                  }, 2000); // 保持与 duration 相同的时长
          uni.showToast({
            title: res.message.toString(),
            icon: 'success',
            duration: 2000
          })
          // 如果有页面跳转，需要用定时器延迟
          setTimeout(() => {
            uni.navigateTo({
              url: 'List'
            });
          }, 2000); // 保持与 duration 相同的时长

               } else {
                  uni.showModal({
                     title: "提示",
                     content: res.message.toString(),
                     confirmText: "确定",
                     showCancel: false,
                     success: (res) => {
        } else {
          uni.showModal({
            title: "提示",
            content: res.message.toString(),
            confirmText: "确定",
            showCancel: false,
            success: (res) => {

                     }
                  })
               }
            })
         },
         editRemarks() {
           if (this.remarks && this.formData.id) {
             this.$post({
               url: "/MesOqcItemsDetect02/saveRemarksGid",
               data: {
                 gid: this.formData.id,
                 remarks: this.remarks,
                 releaseNo: this.formData.releaseNo,
               }
             }).then(res => {
               if (res.data.tbBillList > 0) {
                 this.formData.remarks = this.remarks;
                 this.remarksPopup = false;
                 this.$showMessage("保存成功");
               this.init();
               } else {
                 this.$showMessage("保存失败");
               }
             }).catch(() => {
               this.$showMessage("保存失败，请重试");
             });
           } else if (!this.formData.id) {
             this.$showMessage("请先生成检验单");
           } else {
             this.$showMessage("请输入不合格描述");
           }
         },
      }
   }
            }
          })
        }
      })
    },
    editRemarks() {
      if (this.remarks && this.formData.id) {
        this.$post({
          url: "/MesOqcItemsDetect02/saveRemarksGid",
          data: {
            gid: this.formData.id,
            remarks: this.remarks,
            releaseNo: this.formData.releaseNo,
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = false;
            this.$showMessage("保存成功");
            this.init();
          } else {
            this.$showMessage("保存失败");
          }
        }).catch(() => {
          this.$showMessage("保存失败，请重试");
        });
      } else if (!this.formData.id) {
        this.$showMessage("请先生成检验单");
      } else {
        this.$showMessage("请输入不合格描述");
      }
    },
  }
}
</script>

<style scoped>
@@ -342,13 +345,13 @@
/* 操作按钮区域 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-direction: column;
  gap: 12px;
  padding: 15px 0;
}

.btn {
  flex: 1;
.btn, .secondary-btn {
  width: 100%;
  height: 45px;
  border-radius: 8px;
  border: none;
@@ -386,6 +389,19 @@
  background-color: #6D6D70;
}

/* 大屏幕时保持横向排列 */
@media (min-width: 768px) {
  .action-buttons {
    flex-direction: row;
    gap: 15px;
  }

  .btn, .secondary-btn {
    flex: 1;
    width: auto;
  }
}

/* 检验项目卡片 */
.inspection-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
@@ -414,7 +430,7 @@
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

@@ -699,41 +715,41 @@
    margin: 0 -8px 24px -8px;
    border-radius: 12px;
  }
  

  .card-header {
    padding: 16px 20px;
  }
  

  .header-title {
    font-size: 16px;
  }
  

  .inspection-list {
    padding: 16px 20px;
  }
  

  .item-content {
    padding: 16px 20px;
  }
  

  .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  

  .item-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  

  .progress-info {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  

  .action-button {
    justify-content: center;
  }