factory_web/src/views/mtm/materials_form.vue

<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="物料编号" prop="number">
                <el-input v-model="form.number" placeholder="物料编号" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" prop="name">
              <el-form-item label="物料名称">
                <el-input v-model="form.name" placeholder="物料名称" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" prop="cate">
              <el-form-item label="物料系列">
                <el-input v-model="form.cate" placeholder="物料系列" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="规格">
                <el-input v-model="form.specification" placeholder="规格" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="型号">
                <el-input v-model="form.model" placeholder="型号" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="物料类别" prop="type">
                <el-select v-model="form.type" placeholder="物料类别" clearable style="width:100%" @change="typeChange">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="关联物料" prop="type">
                <el-select v-model="brothers" placeholder="关联物料" clearable multiple style="width:100%">
                  <el-option v-for="item in materialOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="工艺路线" prop="need_route">
                <el-switch v-model="form.need_route" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="安全库存" prop="count_safe">
                <el-input-number v-model="form.count_safe" :min="0"/> 
              </el-form-item>
            </el-col>
            <!-- <el-col :md="12" :sm="24">
              <el-form-item label="计量单位" prop="unit">
                <el-select
                  v-model="form.unit"
                  placeholder="计量单位"
                  clearable
                  style="width:100%"
                >
                  <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增物料",
        edit: "编辑物料",
        show: "查看物料",
      },
      brothers: [],
      form: {},
      rules: {
        name: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
        number: [{ required: true, message: "请输入物料编号", trigger: "blur" }],
      },
      visible: false,
      isSaveing: false,
      options: [
        { id: 0, name: '电/水/气' },
        { id: 10, name: '成品' },
        { id: 20, name: '半成品' },
        { id: 30, name: '主要原料' },
        { id: 40, name: '辅助材料' },
        { id: 50, name: '加工工具' },
        { id: 60, name: '辅助工装' },
        { id: 70, name: '办公用品' },
      ],
      handle_user: [],
      selectionFilters: [],
      materialOptions: [],
      setFiltersVisible: false,
    };
  },
  mounted() {

  },
  methods: {
    //显示
    open(mode = "add", type) {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    getMaterial(val) {
      let that = this;
      let query = {};
      query.type = val;
      query.page = 0;
      query.is_hidden = false;
      this.$API.mtm.material.list.req(query).then(res => {
        that.materialOptions = res;
      })
    },
    typeChange(val) {
      this.getMaterial(val);
    },
    //提交
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.form.brothers = this.brothers;
          if (this.mode == "add") {
            this.$API.mtm.material.create.req(this.form).then(res => {
              this.isSaveing = false;
              this.$emit("success", this.form, this.mode);
              this.visible = false;
              this.$message.success("操作成功");
            }).catch(() => {
              this.isSaveing = false;
              this.visible = false;
            })
          } else if (this.mode == "edit") {
            this.$API.mtm.material.update.req(this.form.id, this.form).then(res => {
              this.isSaveing = false;
              this.$emit("success", this.form, this.mode);
              this.visible = false;
              this.$message.success("操作成功");
            }).catch(() => {
              this.isSaveing = false;
            })
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
      this.brothers = data.brothers;
      this.getMaterial(data.type)
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>
<style></style>