jsh_erp_app/pages/goods-enter/addGood.vue

<template>
  <view class="goods-page">
    <u-navbar
      height="40px"
      title="新增录入"
      bgColor="rgba(2, 86, 255, 1)"
      autoBack
      placeholder
      titleStyle="color:#fff"
      leftIconColor="#fff"
    >
      <view class="u-nav-slot depot-label" slot="right">
        <view class="name" style="color: #fff">{{ curDepotName }}</view>
      </view>
    </u-navbar>
    <view class="container_main">
      <u--form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="uForm"
        labelWidth="90"
      >
        <u-form-item
          label="货物条码"
          prop="barCode"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <u-input v-model="form.barCode" border="none" placeholder="请输入">
            <u-image
              slot="suffix"
              src="@/static/image/scan-icon-2.png"
              width="40rpx"
              height="40rpx"
              @click="scanCode"
            ></u-image>
          </u-input>
        </u-form-item>
        <u-form-item
          label="货物名称"
          prop="name"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <u-input
            v-model="form.name"
            border="none"
            placeholder="请输入"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="规格"
          prop="standard"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <u-input
            v-model="form.standard"
            border="none"
            placeholder="请输入"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="生产日期"
          prop="productionDate"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <view
            :class="['date-val', { grey: !form.productionDate }]"
            @click="showDatePicker = true"
            >{{ form.productionDate ? form.productionDate : "请输入" }}</view
          >
        </u-form-item>
        <u-form-item
          label="上传图片"
          prop="imgName"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <upload-image
            v-model="form.imgName"
            width="196rpx"
            height="196rpx"
          ></upload-image>
        </u-form-item>
        <u-form-item
          label="库位"
          prop="position"
          borderBottom
          required
          customStyle="padding: 30rpx 0"
        >
          <u-input
            v-model="form.position"
            border="none"
            placeholder="请输入"
          ></u-input>
        </u-form-item>
      </u--form>
    </view>
    <u-datetime-picker
      :show="showDatePicker"
      @cancel="showDatePicker = false"
      @confirm="confirmDate"
      v-model="dateVal"
      mode="date"
    ></u-datetime-picker>
    <!-- 新增录入-->
    <view class="footer">
      <u-button class="add-btn" type="primary" plain @click="save">
        保存
      </u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { goodsSave } from "@/common/request/apis/goodsEnter.js";
export default {
  data() {
    return {
      form: {
        barCode: "",
        name: "",
        standard: "",
        imgName: "",
        position: "",
        productionDate: "",
      },
      rules: {
        barCode: [
          {
            required: true,
            message: "请输入货物条码",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入货物名称",
            trigger: ["blur", "change"],
          },
        ],
        standard: [
          {
            required: true,
            message: "请输入规格",
            trigger: ["blur", "change"],
          },
        ],
        productionDate: [
          {
            required: true,
            message: "请输入生产日期",
            trigger: ["blur", "change"],
          },
        ],
        imgName: [
          {
            required: true,
            message: "请上传图片",
            trigger: ["blur", "change"],
          },
        ],
        position: [
          {
            required: true,
            message: "请输入库位",
            trigger: ["blur", "change"],
          },
        ],
      },
      showDatePicker: false,
      dateVal: "",
    };
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    curDepotId() {
      return this.depotInfo ? this.depotInfo.id : "";
    },
    curDepotName() {
      return this.depotInfo ? this.depotInfo.depotName : "";
    },
  },
  onHide() {
    uni.$off("scanFinish");
  },
  onShow() {
    uni.$on("scanFinish", (data) => {
      this.form.barCode = data;
    });
  },
  methods: {
    scanCode() {
      this.$scan.scanCode();
    },
    confirmDate(e) {
      console.log("confirmDate====", e);
      const { value } = e;
      this.form.productionDate = this.$u.date(value, "yyyy-mm-dd");
      console.log("form====", this.form);
      this.showDatePicker = false;
    },
    save() {
      this.$refs.uForm
        .validate()
        .then(async (res) => {
          try {
            const params = { ...this.form, depotId: this.curDepotId };
            const result = await goodsSave(params);
            console.log("result====", result);
            if (result.code === 200) {
              uni.$u.toast(result.msg);
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
              uni.setStorageSync("goodsEnterRefresh", true);
            } else {
              uni.$u.toast(res.data);
            }
          } catch (error) {}
        })
        .catch((errors) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  .container_main {
    margin: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 144rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  .add-btn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 16rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    background-color: #0256ff;
    line-height: 88rpx;
    text-align: center;
  }
}

.date-val {
  width: 100%;
  font-size: 28rpx;
}
.grey {
  color: #999;
}
</style>