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"
        labelWidth="90"
      >
        <u-form-item
          label="货物条码"
          prop="barCode"
          borderBottom
          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="materialName"
          borderBottom
          customStyle="padding: 30rpx 0"
        >
          <u-input
            v-model="form.materialName"
            border="none"
            placeholder="请输入"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="规格"
          prop="materialStandard"
          borderBottom
          customStyle="padding: 30rpx 0"
        >
          <u-input
            v-model="form.materialStandard"
            border="none"
            placeholder="请输入"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="生产日期"
          prop="productionDate"
          borderBottom
          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="img"
          borderBottom
          customStyle="padding: 30rpx 0"
        >
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            name="file"
            width="120rpx"
            height="120rpx"
            :maxCount="2"
          >
            <u-image
              src="@/static/image/upload-img.png"
              width="120rpx"
              height="120rpx"
            ></u-image>
          </u-upload>
        </u-form-item>
        <u-form-item
          label="库位"
          prop="position"
          borderBottom
          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";

export default {
  data() {
    return {
      form: {
        materialName: "",
        barCode: "",
        productionDate: "",
        unit: "",
      },
      rules: {},
      showDatePicker: false,
      dateVal: "",
      fileList: [],
    };
  },
  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;
    },
    deletePic(e) {
      console.log("deletePic====", e);
      this.fileList.splice(e.index, 1);
    },
    afterRead(e) {
      console.log("afterRead====", e);
      const { file } = e;
      this.fileList.push(file);
    },
    save() {},
  },
};
</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>