byte-sailing-vue/src/views/product-material/warehouse/addWarehouse.vue

<template>
  <div v-loading="loading">
    <div class="form-box">
      <el-form
        label-position="top"
        :model="form"
        :rules="formRules"
        ref="form"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="$t('product_material.warehouse.warehouseType')"
              prop="type"
            >
              <el-select
                v-model="form.type"
                :placeholder="$t('pleaseSelect')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          :label="$t('product_material.warehouse.warehouseName')"
          prop="name"
        >
          <el-input
            v-model="form.name"
            :placeholder="$t('pleaseInput')"
          ></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="$t('product_material.warehouse.storekeeper')"
              prop="warehouseKeeperId"
            >
              <el-select
                v-model="form.warehouseKeeperId"
                :placeholder="$t('pleaseSelect')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :label="$t('product_material.warehouse.warehouseDescription')"
        >
          <el-input
            v-model="form.remarks"
            type="textarea"
            :placeholder="$t('pleaseInput')"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center; margin-top: 15px">
      <el-button size="small" @click="handleCancel"
        >{{ $t("cancel") }}
      </el-button>
      <el-button type="primary" size="small" @click="handleSubmit">
        {{ $t("submit") }}</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "addWarehouse",
  props: {
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      // form: {
      //   warehouseKeeperId: "",
      //   type: "",
      //   name: "",
      //   remarks: "",
      // },

      formRules: {
        type: [
          {
            required: true,
            message: this.$t("product_material.warehouse.warehouseTypeRules"),
            trigger: "change",
          },
        ],
        warehouseKeeperId: [
          {
            required: true,
            message: this.$t(
              "product_material.warehouse.warehouseKeeperIdRules"
            ),
            trigger: "change",
          },
        ],

        name: [
          {
            required: true,
            message: this.$t("product_material.warehouse.warehouseNameRules"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$emit("submit");
        }
      });
    },
    handleCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  height: calc(100vh - 280px);
  overflow: auto;
  box-sizing: border-box;
  padding: 5px;
}
</style>