jonhon-mes-PDA/pages/logistics/weighing.vue

<template>
  <ifrm ref="ifrm">
    <u-sticky offset-top="0">
      <uni-forms ref="wrForm" class="formBox">
        <uni-forms-item>
          <input
            class="uni-input-border"
            v-model="processCardNo"
            placeholder="请扫描流程卡号"
            placeholder-class="input-placeholder"
            @confirm="handleCardNoConfirm"
          />
        </uni-forms-item>
        <uni-forms-item>
          <view class="bottom-input-row">
            <view class="weight-input-wrapper">
              <view class="input-box">
                <input
                  class="input-field"
                  v-model="weight"
                  type="digit"
                  placeholder="重量 (克)"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
            <button
              class="submit-btn"
              :class="{ disabled: !canSubmit }"
              :disabled="!canSubmit"
              @tap="handleSubmit"
            >
              提交
            </button>
          </view>
        </uni-forms-item>
      </uni-forms>
      <!-- 信息显示区域 -->
      <t-table style="margin-top: 20rpx">
        <t-tr>
          <t-td>车间订单号</t-td>
          <t-td>{{ tableObj.ypCode }}</t-td>
        </t-tr>

        <t-tr>
          <t-td>零件编码</t-td>
          <t-td>{{ tableObj.partCode }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>零件名称</t-td>
          <t-td>{{ tableObj.partName }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>流程卡号</t-td>
          <t-td>{{ tableObj.cardNo }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>批次号</t-td>
          <t-td>{{ tableObj.batchNo }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>数量</t-td>
          <t-td>{{ tableObj.ypQty }}</t-td>
        </t-tr>
      </t-table>
    </u-sticky>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import tTable from "@/components/t-table/t-table.vue";
import tTh from "@/components/t-table/t-th.vue";
import tTr from "@/components/t-table/t-tr.vue";
import tTd from "@/components/t-table/t-td.vue";
export default {
  components: {
    ifrm,
    tTable,
    tTh,
    tTr,
    tTd,
  },
  data() {
    return {
      processCardNo: "",
      weight: "",
      tableObj: {},
      orderInfo: {
        orderNo: "",
        materialCode: "",
        materialName: "",
        specification: "",
        batch: "",
        customerName: "",
        plannedQuantity: "",
        currentProcess: "",
        currentStatus: "",
        remarks: "",
      },
    };
  },
  computed: {
    canSubmit() {
      return this.processCardNo && this.weight;
    },
  },
  methods: {
    handleCardNoConfirm() {
      if (this.processCardNo) {
        // 自动聚焦到重量输入框（可选）
        this.$u.api.queryCardNo({cardNo:this.processCardNo}).then((res) => {
          this.tableObj = res.data;
        });
      }
    },
    // 处理提交
    handleSubmit() {
      if (!this.canSubmit) return;

      // 提交称重数据
      this.submitWeight();
    },

    // 提交称重数据
    submitWeight() {
      // 实际项目中这里应该调用API提交数据
      uni.showLoading({
        title: "提交中...",
      });

      setTimeout(() => {
        uni.hideLoading();
        let query_ = {
          cardNo: this.processCardNo,
          actualWeight: this.weight,
        };

        this.$u.api.getWeighing(query_).then((res) => {
          uni.showToast({
            title: "提交成功",
            icon: "success",
          });
          this.processCardNo = "";
          this.weight = "";
          this.tableObj = {};
        });
        // if (this.processCardNo !== "PC99999") {
        // uni.showToast({
        //   title: "提交成功",
        //   icon: "success",
        // });

        //   // 清空输入
        //   setTimeout(() => {
        // this.processCardNo = "";
        // this.weight = "";
        //   }, 1500);
        // }
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* 输入区域 */

.input-wrapper {
  margin-bottom: 12px;
}

.input-box {
  position: relative;
  height: 50px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding-left: 40px;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
}

.icon {
  width: 100%;
  height: 100%;
}

.input-field {
  flex: 1;
  font-size: 16px;
  color: #1d293d;
}

.input-placeholder {
  color: #90a1b9;
  font-size: 16px;
}

/* 重量输入和提交按钮行 */
.bottom-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.weight-input-wrapper {
  flex: 1;
}

.submit-btn {
  width: 88px;
  height: 50px;
  background-color: #155dfc;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0;
  line-height: 50px;
}

.submit-btn.disabled {
  opacity: 0.5;
}

</style>