OQC检验

啊鑫

8 天以前 1b8ed4768feeb6433cef55ea8e7c4ad7070c151c

 pages/QC/XJ/Add.vue

@@ -1,6 +1,7 @@
<template>
  <view>
    <view class="form-container">
  <view class="page-container">
    <!-- 表单容器 - 高级卡片设计 -->
    <view class="form-card">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">检验单号:</label>
@@ -58,12 +59,13 @@
      </form>
    </view>

    <view class="list-container">
    <!-- 表格容器 - 高级卡片设计 -->
    <view class="table-card">
      <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-th align="center" class="th">检验项目</uni-th>
          <uni-th align="center" class="th">是否合格</uni-th>
          <uni-th align="center" class="th">记录(点击)</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
@@ -74,10 +76,10 @@
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
              <button v-if="item.isCheck >= item.levelNum" type="default" @click="toDetail(item)" class="record-btn success">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
              <button v-else type="warn" @click="toDetail(item)">
              <button v-else type="warn" @click="toDetail(item)" class="record-btn warning">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
            </view>
@@ -86,39 +88,56 @@
      </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 && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button>
    <!-- 操作按钮组 - 优化布局 -->
    <view class="action-buttons">
      <view class="button-group">
        <button type="warn" v-if="!isUpdate && !isShowTable" @click="submit" class="action-btn primary">
          审核单据
        </button>
        <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem" class="action-btn secondary">
          创建检验单并生成部分默认值
        </button>
      </view>
      <view class="button-group">
        <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage" class="action-btn secondary">
          上传/查看图片
        </button>
      </view>
      <view class="button-group">
        <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks" class="action-btn secondary">
          添加不合格描述
        </button>
      </view>
      <view class="button-group">
        <button type="warn" v-if="isShowTable" @click="getTable" class="action-btn secondary">
          获取检验项目
        </button>
      </view>
      <view class="button-group">
        <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable" class="action-btn secondary">
          生成检验项目
        </button>
      </view>
    </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">
      <view class="popup" :class="{ 'popup-animate': remarksPopup }">
        <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="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
          <button type="warn" @click="editRemarks" class="action-btn primary">
            修改
          </button>
          <button @click="remarksPopup = !remarksPopup" class="action-btn cancel">
            取消
          </button>
        </form>
      </view>
    </view>

  </view>
</template>

@@ -142,7 +161,7 @@
        planQty: "",
        mocode: "",
        boardStyle: "",
         itemId: "",
        itemId: "",
      },

      DAA020List: [],
@@ -174,7 +193,6 @@
  },
  onLoad(options) {
    //options中包含了url附带的参数

    let params = options;

    if (params["id"]) {
@@ -224,7 +242,6 @@
      }
    },
    getItem() {

      if (this.isSubmit) {
        this.$showMessage("此物料无启用的检验项目，请维护!");
        return;
@@ -331,6 +348,27 @@
        });
      });
    },
    submit() {
      this.$post({
        url: "/XJ/XJQaSubmit",
        data: {
          userNo: this.$loginInfo.account,
          gid: this.formData.id
        }
      }).then(res => {
        //2024-11-28 kyy 校验合格提交增加提示
        console.log("Status Code的值:", res.statusCode);
        if (res.statusCode === 200) {
          this.$showMessage("成功提交检验");
          // 使用setTimeout在7秒后隐藏消息
          setTimeout(() => {
            this.hideCustomMessage();
          }, 7000); // 7000毫秒等于7秒
        } else {
          this.$showMessage(res.data.message);
        }
      })
    },
    init() {
      this.$post({
        url: "/XJ/getPage",
@@ -378,11 +416,11 @@
        });
      } else {
        uni.navigateTo({
          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData
              .id
          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id
        });
      }
    }, saveRemarks() {
    },
    saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remarks;
    },
@@ -455,65 +493,308 @@
  }
};
</script>
<style>

<style lang="scss">
/* 全局样式 - 莫兰迪色系 */
:root {
  --primary: #5B6EF4;        /* 主色调 - 灰蓝色 */
  --primary-light: #E8EBFF;   /* 主色浅色 */
  --secondary: #86909C;       /* 次要色 - 浅灰色 */
  --success: #00B42A;         /* 成功色 - 橄榄绿 */
  --warning: #F7BA1E;         /* 警告色 - 琥珀黄 */
  --danger: #F53F3F;          /* 危险色 - 珊瑚红 */
  --text-primary: #1D2129;     /* 主文本色 */
  --text-secondary: #4E5969;   /* 次文本色 */
  --bg-primary: #F2F3F5;       /* 背景色 */
  --bg-card: #FFFFFF;         /* 卡片背景 */
  --border-color: #E5E6EB;     /* 边框色 */
}

page {
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

/* 页面容器 */
.page-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 卡片样式 - 高级设计 */
.form-card, .table-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(91, 110, 244, 0.12);
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.form-card::before, .table-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary), #8A94FF);
  border-radius: 20px 0 0 20px;
}

.form-card:hover, .table-card:hover {
  box-shadow: 0 12px 40px rgba(91, 110, 244, 0.18);
  transform: translateY(-5px);
}

/* 表单组样式 */
.form-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c9c9c9;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.form-group:last-child {
  border-bottom: none;
}

.form-group:hover {
  background-color: var(--primary-light);
  border-radius: 12px;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
  min-width: 120px;
  color: var(--text-primary);
  font-weight: 500;
  margin-right: 18px;
  font-size: 15px;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  padding: 14px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-size: 15px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.picker {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  font-size: 12px;

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 244, 0.2);
  outline: none;
}

/* 下拉选择器样式 */
.uni-form-item {
  display: flex;
  border-bottom: 1px solid #c9c9c9;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.uni-form-item:last-child {
  border-bottom: none;
}

.uni-form-item:hover {
  background-color: var(--primary-light);
  border-radius: 12px;
}

.picker {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-size: 15px;
  appearance: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.picker::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 14px;
}

.edit {
  background-color: white;
  background-color: var(--bg-card);
}
/* 默认样式 */

/* 表格样式 */
.list-container {
  height: 60vh;
  /* 设置列表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* 允许列表容器垂直滚动 */
  padding: 10px;
  /* 可选：添加一些内边距，使列表内容更美观 */
}
/* 在小屏幕设备上，重置高度为适应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 376px);
    /* 适当调整高度 */
  }
}
.form-container {
  padding: 10px;
  /* 可选：添加一些内边距，使表单内容更美观 */
}

.th {
  background-color: lightskyblue;
  color: #FFFFFF;
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  padding: 16px 20px;
  font-size: 15px;
  border-radius: 12px 12px 0 0;
}
.plus-button {
  line-height: 59px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 10px;

.uni-tr {
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.uni-tr:last-child {
  border-bottom: none;
}

.uni-tr:hover {
  background-color: var(--primary-light);
}

.uni-td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  color: var(--text-primary);
}

.uni-td:last-child {
  border-right: none;
}

/* 记录按钮样式 */
.record-btn {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: none;
  font-size: 14px;
  min-width: 80px;
}

.success {
  background-color: rgba(0, 180, 42, 0.1);
  color: var(--success);
  border: 1px solid rgba(0, 180, 42, 0.2);
}

.success:hover {
  background-color: rgba(0, 180, 42, 0.2);
}

.warning {
  background-color: rgba(247, 186, 30, 0.1);
  color: var(--warning);
  border: 1px solid rgba(247, 186, 30, 0.2);
}

.warning:hover {
  background-color: rgba(247, 186, 30, 0.2);
}

/* 操作按钮组 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}

.button-group {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  padding: 14px 20px;
  border-radius: 24px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: none;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(91, 110, 244, 0.15);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.action-btn:hover::before {
  transform: translateX(100%);
}

.action-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(91, 110, 244, 0.1);
}

.primary {
  background: linear-gradient(135deg, var(--primary), #7B88FF);
  color: white;
}

.secondary {
  background-color: white;
  color: var(--primary);
  border: 1px solid var(--border-color);
}

.secondary:hover {
  background-color: var(--primary-light);
}

.cancel {
  background-color: #F2F3F5;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel:hover {
  background-color: #E5E6EB;
}

/* 弹出层样式 */
.overlay {
  position: fixed;
  top: 0;
@@ -524,15 +805,69 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.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: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 32px;
  width: 90%;
  max-width: 560px;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.popup-animate {
  opacity: 1;
  transform: translateY(0);
}

.popup h3 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-card, .table-card {
    padding: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .button-group {
    min-width: 100%;
  }
  
  .form-label {
    min-width: 90px;
    font-size: 14px;
  }
  
  .form-input, .picker {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>