drp-ui/src/views/material/label/label-auto-bind-dialog.vue

<script>
import { classifyTree, autoBind } from "@/api/material/label";
export default {
  name: "AutoBindDialog",
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      options: [],
      form: {},
    };
  },
  methods: {
    async fetchItem(prop) {
      this.dialogFormVisible = true;
      this.form = { ...this.form, ...prop };
    },

    async fetchClassifyTree() {
      let data = await classifyTree();
      this.options = data;
    },

    onOpen() {
      this.fetchClassifyTree();
    },

    onClose() {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("BindDialog") > -1)
        .fetchItem({});
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let p = {
            ...this.form,
            labelId: this.form.id,
          };
          this.loading = true;
          autoBind(p)
            .then((res) => {
              let { code } = res;
              if (code === 200) {
                this.dialogFormVisible = false;
                this.$message.success("success");
                this.form = {};
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>

<template>
  <el-dialog
    title="自动绑定"
    :visible.sync="dialogFormVisible"
    append-to-body
    @open="onOpen"
    @close="onClose"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="匹配类别" prop="flag" required>
            <el-select
              v-model="form.flag"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="物料分类" value="1"></el-option>
              <el-option label="特殊属性" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-show="form.flag === '1'" :span="24">
          <el-form-item label="物料名称" required>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="物料分类">
            <el-cascader
              v-model="form.classifyId"
              :options="options"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'materialType',
                children: 'childrens',
              }"
              clearable
              style="width: 100%"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="form.flag === '2'" :gutter="20">
        <el-col :span="24">
          <el-form-item label="颜色">
            <el-input v-model="form.color"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="长度">
            <el-input v-model="form.length"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="宽度">
            <el-input v-model="form.width"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="试用范围">
            <el-input v-model="form.scope"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="包装">
            <el-input v-model="form.wrap"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<style scoped></style>