jonhon-mes-web/src/views/warehouseManagement/components/materialAdd.vue

<template>
  <el-dialog :title="title" append-to-body :modelValue="openShow" width="60%" @close="closeDialog">
    <avue-form ref="form" v-model="form" :option="option"></avue-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { submitGoods } from '@/api/storeManagement/materialMaintenance';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    rowItem: {
      type: Object,
      default: {},
    },
    title: {
      type: String,
      default: '新增',
    },
  },
  data() {
    return {
      openShow: false,
      showLoading: false,
      form: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '物料编码',
            prop: 'goodsCode',
            span: 12,
            disabled: true,
            overflow: true,
            search: true,
            width: 120,
          },
          {
            label: '物料名称',
            prop: 'goodsName',
            disabled: true,
            span: 12,
            overflow: true,
            search: true,
            width: 120,
          },
          {
            label: '计量单位',
            prop: 'unitName',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入计量单位',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '物料类别',
            prop: 'gcId',
            span: 12,
            type: 'select',
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: false,
                message: '请输入物料类别',
                trigger: 'blur',
              },
            ],
            dicUrl: '/api/blade-wms/stGoodsClass/findGoodsClass',
            props: {
              label: 'gcName',
              value: 'id',
            },
          },
          {
            label: '是否工艺审批',
            prop: 'processApproval',
            type: 'select',
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
          },
          {
            label: '补制类型',
            prop: 'reissueType',
            type: 'select',
            dicData: [
              { label: '无', value: 0 },
              { label: '物料出库', value: 1 },
              { label: '最低库存', value: 2 },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请选择补制类型',
                trigger: 'blur',
              },
            ],
            change: val => {
              if (val.value != 0) {
                let tmp = this.option.column.find(item => item.prop == 'gcId');
                tmp.rules[0].required = true;
                if (val.value == 2) {
                  let tmp = this.option.column.find(item => item.prop == 'minNum');
                  tmp.rules[0].required = true;
                } else {
                  let tmp = this.option.column.find(item => item.prop == 'minNum');
                  tmp.rules[0].required = false;
                }
              } else {
                let tmp = this.option.column.find(item => item.prop == 'gcId');
                tmp.rules[0].required = false;
                let tmp1 = this.option.column.find(item => item.prop == 'minNum');
                tmp1.rules[0].required = false;
              }
            },
          },

          {
            label: '最高库存',
            prop: 'maxNum',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
          },
          {
            label: '最低库存',
            prop: 'minNum',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: false,
                message: '请输入最低库存',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '采购数量',
            prop: 'purchaseQuantity',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
          },
          {
            label: '是否停用',
            editDisplay: true,
            prop: 'used',
            type: 'switch',
            dicData: [
              { label: '关', value: false },
              { label: '开', value: true },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入是否停用',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '组件模式',
            prop: 'prtType',
            span: 12,
            overflow: true,
            search: false,
            hide: true,
            width: 120,
          },
          {
            label: '最低库存预警',
            prop: 'minWarning',
            type: 'switch',
            dicData: [
              { label: '关', value: false },
              { label: '开', value: true },
            ],
            span: 12,
            overflow: true,
            search: false,
            labelWidth: 120,
            rules: [
              {
                required: true,
                message: '请选择是否开启最低库存预警',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.form = this.rowItem;
    this.form.minWarning = this.form.minWarning ? true : false;
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.showLoading = true;
           this.form.minWarning = this.form.minWarning ? 1 : 0;
          submitGoods(this.form)
            .then(res => {
              this.showLoading = false;
              this.$message.success('新增成功');
              this.closeDialog();
            })
            .catch(err => {
              this.showLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>