kunshan-bzfm-pda-uniapp/pages/materialManagement/recordInbound/index.vue

<template>
  <!-- 入库 -->
  <view class="common-box">
    <uni-card>
      <ScanInput
        @scanConfirm="scanConfirm"
        placeholder="请扫标签,操作入库"
      ></ScanInput>
    </uni-card>

    <view class="form-box">
      <uni-section title="填写入库单信息" type="line">
        <view class="example">
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :rules="valiFormData"
            label-position="top"
            label-width="120"
          >
            <uni-forms-item label="物料编码" name="materialCode" required>
              <!-- <uni-combox
                :candidates="candidates"
                placeholder="请选择物料编码"
                v-model="baseFormData.materialCode"	
              ></uni-combox> -->
              <uni-easyinput
                v-model="baseFormData.materialName"
                placeholder="请输入物料编码"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="物料名称" name="materialName">
              <uni-easyinput
                v-model="baseFormData.materialName"
                placeholder="请输入物料名称"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="标号" name="type">
              <uni-easyinput
                v-model="baseFormData.type"
                placeholder="请输入标号"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="供应商名称" name="supplierName">
              <uni-easyinput
                v-model="baseFormData.supplierName"
                placeholder="请输入供应商名称"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="库位编码" name="locationCode" required>
              <uni-easyinput
                v-model="baseFormData.locationCode"
                placeholder="请输入库位编码"
              />
            </uni-forms-item>

            <uni-forms-item label="库位名称" name="locationName">
              <uni-easyinput
                v-model="baseFormData.locationName"
                placeholder="请输入库位名称"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="仓库编码" name="warehouseCode" required>
              <uni-easyinput
                v-model="baseFormData.warehouseCode"
                placeholder="请输入仓库编码"
                :disabled="true"
              />
            </uni-forms-item>

            <uni-forms-item label="入库类型" name="transportType" required>
              <uni-easyinput
                v-model="baseFormData.transportType"
                placeholder="请输入入库类型"
              />
            </uni-forms-item>

            <uni-forms-item label="入库数量" name="quantity" required>
              <uni-easyinput
                v-model="baseFormData.quantity"
                placeholder="请输入入库数量"
              />
            </uni-forms-item>

            <uni-forms-item label="批次号" name="batchNo" required>
              <uni-easyinput
                v-model="baseFormData.batchNo"
                placeholder="请输入批次号"
              />
            </uni-forms-item>

            <uni-forms-item label="炉号" name="ovenNo">
              <uni-easyinput
                v-model="baseFormData.ovenNo"
                placeholder="请输入炉号"
              />
            </uni-forms-item>

            <uni-forms-item label="操作员" name="operator">
              <uni-easyinput
                v-model="baseFormData.operator"
                placeholder="请输入操作员"
              />
            </uni-forms-item>
          </uni-forms>
          <button type="primary" @click="submit('customForm')">提交</button>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        materialCode: "",
        materialName: "",
        type: "",
        transportType: "",
        supplierName: "",
        locationCode: "",
        locationName: "",
        warehouseCode: "",
        quantity: null,
        batchNo: "",
        stoveCode: "",
        operator: "",
      },
      // 校验表单数据
      valiFormData: {
        materialCode: "",
        locationCode: "",
        warehouseCode: "",
        transportType: "",
        quantity: "",
        batchNo: "",
      },
      // 校验规则
      rules: {
        materialCode: {
          rules: [
            {
              required: true,
              errorMessage: "物料编码不能为空",
            },
          ],
        },
        locationCode: {
          rules: [
            {
              required: true,
              errorMessage: "库位编码不能为空",
            },
          ],
        },
        warehouseCode: {
          rules: [
            {
              required: true,
              errorMessage: "仓库编码不能为空",
            },
          ],
        },
        transportType: {
          rules: [
            {
              required: true,
              errorMessage: "入库类型不能为空",
            },
          ],
        },
        quantity: {
          rules: [
            {
              required: true,
              errorMessage: "入库数量不能为空",
            },
            {
              format: "number",
              errorMessage: "入库数量只能输入数字",
            },
          ],
        },
        batchNo: {
          rules: [
            {
              required: true,
              errorMessage: "批次号不能为空",
            },
          ],
        },
      },

      // candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
    };
  },
  computed: {},
  onLoad() {},
  onReady() {},
  methods: {
    // 提交表单
    submit(ref) {
      this.$refs.baseForm
        .validate()
        .then((res) => {
          console.log("表单数据信息：", res);
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>

<style scoped>
@import "./index.css";
</style>