form表单页面修改及保存

进入页面是全部为禁用,点击修改时解除禁用表单,最后保存信息

    <div class="header-top">
      <span class="header-title">基本设置</span>

      <el-button :type="saveButtonType" @click="toggleEdit('Editform')">
        {{ Editdisabled ? '修改信息' :'保存信息' }}
      </el-button>
    </div>
    <!-- <el-row :gutter="gutter">
          <el-col :span="24">
            <el-form-item label="负责人" prop="headers">
              <div class="userstyle">
                <div class="name" v-if="Editform.headers">
                  <span class="notice-scope-user" v-for="(v,i) in Editform.headerName" :key="i">
                    {{ v.slice(0,1) }}
                  </span>
                </div>

                <span class="notice-scope-add" @click="openSelectUser(Editform.headers)">
                  <svg-icon icon-class="tianjiayonghu"></svg-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row> -->

    <div>
      <el-form :disabled="Editdisabled" :model="Editform" ref="Editform" :rules="Editrules" label-position="top">
        <div class="Addform_div">
          <el-row :gutter="gutter">
            <el-col :span="24">
              <el-form-item label="库房名称" prop="name">
                <el-input v-model="Editform.name" maxlength="15" placeholder="请输入库房名称" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="gutter">
            <el-col :span="12">
              <el-form-item label="库房编号" prop="number">
                <el-input v-model="Editform.number" maxlength="15" placeholder="请输入库房编号" show-word-limit></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="区域" prop="roomArea">
                <el-input v-model="Editform.roomArea" maxlength="15" placeholder="请输入区域" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-form-item label="备注">
                <div class="Editor_div">
                  <myEditor style="width: 100%;" ref="RemarksRefs" :contenteditable="contenteditable" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>

data() {
    return {
      Editdisabled: true,
      contenteditable: false,
      gutter: 14,
      Editform: {
        // headers: "",
        // headerName: [],
        roomArea: "",
        name: "",
        number: "",
        roomRemarks: ""
      },
      saveButtonType: "primary", //保存（修改）type颜色

    };
  },

  methods: {
    // 修改信息或保存信息
    toggleEdit(formName) {
      if (this.Editdisabled) {
        this.Editdisabled = false;
        this.contenteditable = true;
        this.saveButtonType = "success";
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.contenteditable = false;
            this.Editdisabled = true;
            this.saveButtonType = "primary";
            this.addFileBox(); //保存方法
            //调用页面数据刷新
            // this.$EventBus.$emit("yzp_getRoomAll_Refresh");
          } else {
            return false;
          }
        });
      }
    },

    //保存信息
    addFileBox() {
      let oParam = {
        id: this.infoRow.id,
        name: this.Editform.name,
        number: this.Editform.number,
        // headerIds: this.Editform.headers,
        roomArea: this.Editform.roomArea,
        roomArea: this.Editform.roomArea,
        roomRemarks: this.$refs.RemarksRefs.getContent() //获取富文本内容
      };

      ApiroomUpdate(oParam).then((res) => {
        if (res.code == "200") {
          this.$message.success("编辑成功 !");
        }
      });
    },