refinery-admin/src/views/refineryInfo/components/add.vue

<template>
  <el-drawer
    :title="controlWindows.addInfo.title"
    direction="ltr"
    size="40%"
    :visible="controlWindows.add"
    @opened="openDrawer"
    :before-close="closeWindow"
  >
    <div class="add">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="炼厂名称" prop="refineryName">
          <el-input
            maxlength="50"
            v-model="form.refineryName"
            placeholder="请输入炼厂名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="炼厂类型" prop="refineryType">
          <el-select v-model="form.refineryType" placeholder="请选择炼厂类型">
            <el-option
              v-for="(item, index) in refineryTypeEnum"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态" prop="enableMark">
          <el-radio-group v-model="form.enableMark">
            <el-radio label="ENABLE">启用</el-radio>
            <el-radio label="DISABLE">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="炼厂等级" prop="refineryLevel">
          <el-select v-model="form.refineryLevel" placeholder="请选择炼厂等级">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
            <el-option label="C" value="C"></el-option>
            <el-option label="D" value="D"></el-option>
            <el-option label="E" value="E"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="炼厂地址" prop="address">
          <el-input
            type="textarea"
            :rows="5"
            maxlength="255"
            placeholder="请输入炼厂地址"
            v-model="form.address"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="closeWindow">取消 </el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import serve from "api/refineryInfo.js";
export default {
  props: {
    controlWindows: Object,
    refineryTypeEnum: Array,
  },
  data() {
    return {
      form: {},
      rules: {
        refineryName: [
          { required: true, message: "请输入炼厂名称", trigger: "blur" },
        ],
        refineryType: [
          { required: true, message: "请选择炼厂类型", trigger: "change" },
        ],
        enableMark: [
          { required: true, message: "请选择启用状态", trigger: "change" },
        ],
        refineryLevel: [
          { required: true, message: "请选择炼厂等级", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入炼厂地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    openDrawer() {
      let { id } = this.controlWindows.addInfo;
      if (id) {
        //回显
        this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
      }
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.judgeInterface(this.form).then((res) => {
            if (res.code === 20000) {
              this.$message.success(res.msg);
              this.closeWindow();
            }
          });
        }
      });
    },
    judgeInterface(form) {
      let { id } = this.controlWindows.addInfo;
      if (id) return serve.update(form);
      else return serve.save(form);
    },
    closeWindow() {
      this.$emit("closeWindow");
      this.form = {};
      this.controlWindows.addInfo = {};
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
        this.controlWindows.add = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  padding: 20px;
  .el-input,
  .el-select,
  .el-textarea {
    width: 300px;
  }
}
.buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>