vue+element, keep the last value entered in the form and modify it (shj

 Implementation function:

Give a new and modified button and click OK to save the value in the form to data after clicking the new button 

If you enter 'vue' after adding a new button, you can change the 'vue' saved in the modification form after clicking the modify button

Note: The new and modified form.xz can use the same xz so that the value in the data can be assigned to the past formxg 

Simple understanding of formxg.xzdate = form.zxdate

Note: If the value in the form is saved to the form of the new button, the code for copying the object should be added to the function that is processed after each click of OK

 If it is to modify the value of the new button form, the code of the copied object should be added to the function of clicking 'modify'. Once you click to modify, the value in the new form will be assigned to the value in the modified form.

As shown above, if you want to print whether the value is obtained. You can log and print this.formxg or this.data without this pointing, it will report an error that it is not defined

<template>
  <div>
    <br />
    <el-button type="warning" plain @click="addClick">新增2</el-button>
    <el-button type="warning" plain @click="changeClick">修改</el-button>
    <!-- 弹出新增 -->
    <el-dialog
      title="新增设备信息"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="closexz"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="设备编号" prop="xzdate">
          <el-input v-model.trim="form.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>

        <el-form-item label="设备描述" prop="xzsec">
          <el-input
            v-model.trim="form.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm('form')"> 确定</el-button>
      <el-button @click="cancelxz">取 消</el-button>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog
      title="修改设备信息"
      :visible.sync="dialogFormChange"
      width="30%"
      @close="closexz"
    >
      <el-form ref="formxg" :model="formxg" :rules="rules">
        <el-form-item label="设备编号" prop="xzdate">
          <el-input v-model.trim="formxg.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>

        <el-form-item label="设备描述" prop="xzsec">
          <el-input
            v-model.trim="formxg.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="changeForm('formxg')"> 确定</el-button>
      <el-button @click="cancelxz">取 消</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //弹出新增表单
      form: {
        xzdate: "1",
        xzsec: "2",
      },
      //修改 表单
      formxg: {
        xgdate: "",
        xgsec: "",
      },
      data: {},
      rules: {
        xzdate: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
          {
            min: 1,
            max: 10,
            message: "长度在1到10个字符",
          },
        ],
        xzsec: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
      },
      //设置的弹出新增窗口
      dialogFormVisible: false,
      dialogFormChange: false,
    };
  },
  methods: {
    //1.新增一个 修改按钮
    //2.点击新增弹出框 的确定按钮 把 新增表单里 的值 保存 到 data中

    //3.关闭新增 清空数据
    // 点击修改按钮
    // 1. 取值
    // 2. 赋值
    // 3. 显示
    //4.把数据 赋值到 修改的表单里
    //5. 修改数据的值 并确定
    // 新增
    addClick() {
      //复制两份form
      // this.formxg = this.form; 如果关闭表单则保留上次输入的数据
      this.form = {};
      this.dialogFormVisible = true;
    },
    //修改
    changeClick() {
      // 在点修改按钮的时候 把data里的值赋值到修改的表单里
       this.formxg = Object.assign({}, this.data); 
      console.log(this.formxg, "this.formxg");
      this.dialogFormChange = true;
    },
    //新增  确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.data = Object.assign({}, this.form);
          alert("新增成功!");
          this.dialogFormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改  确定按钮
    changeForm() {
      this.$refs[formxg].validate((valid) => {
        if (valid) {
          console.log(this.form, "this.form");  //是否拿到新增表单输入的值
          this.dialogFormChange = false;
          alert("修改成功!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancelxz() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields(); //移除校验结果并重置字段值
      this.form = {};
    },
    //Dialog 弹窗关闭的回调
    closexz() {
      this.$refs.form.resetFields(); //移除校验结果并重置字段值
      console.log(this.form, "this.form");
      console.log(this.data, "this.data");
    },
  },
};
</script>
<style>
</style>