2020-2021暑期项目实训第四周——更改个人信息功能实现以及主要代码

更改个人信息的功能实现。在个人信息界面，点击修改按钮后，input变为可编辑状态，按钮变为确定和取消。点击取消恢复，点击确定进行修改信息，可同时进行多项信息同时修改。

<a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="姓名" prop="name">
        <a-input
          v-bind:disabled="!isEdit[0]"
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur();
            }
          "
        />
        <a-button v-show="!isShow[0]" type="link" @click="edit(1)">
          修改
        </a-button>
        <a-button v-show="isShow[0]" type="link" @click="confirm()">
          确认
        </a-button>
        <a-button
          v-show="isShow[0]"
          type="link"
          @click="cancel(1)"
          style="margin-left: 3%"
        >
          取消
        </a-button>
      </a-form-model-item>
      <a-form-item ref="sex" label="性别" prop="sex">
        <a-input
          v-bind:disabled="!isEdit[3]"
          v-if="!isShow[3]"
          v-model="form.sex"
        />
        <a-radio-group v-model="form.sex" v-if="isShow[3]">
          <a-radio-button value="男性"> 男性 </a-radio-button>
          <a-radio-button value="女性"> 女性 </a-radio-button>
        </a-radio-group>
        <a-button v-show="!isShow[3]" type="link" @click="edit(4)">
          修改
        </a-button>
        <a-button v-show="isShow[3]" type="link" @click="confirm()">
          确认
        </a-button>
        <a-button
          v-show="isShow[3]"
          type="link"
          @click="cancel(4)"
          style="margin-left: 3%"
        >
          取消
        </a-button>
      </a-form-item>

      <a-form-model-item ref="phone" label="手机号" required prop="phone">
        <a-input
          v-bind:disabled="!isEdit[1]"
          v-model="form.phone"
          @blur="
            () => {
              $refs.phone.onFieldBlur();
            }
          "
        />
        <a-button v-show="!isShow[1]" type="link" @click="edit(2)">
          修改
        </a-button>
        <a-button v-show="isShow[1]" type="link" @click="confirm()">
          确认
        </a-button>
        <a-button
          v-show="isShow[1]"
          type="link"
          @click="cancel(2)"
          style="margin-left: 3%"
        >
          取消
        </a-button>
      </a-form-model-item>
      <a-form-model-item ref="email" label="邮箱" required prop="email">
        <a-input
          v-bind:disabled="!isEdit[2]"
          v-model="form.email"
          @blur="
            () => {
              $refs.email.onFieldBlur();
            }
          "
        />
        <a-button v-show="!isShow[2]" type="link" @click="edit(3)">
          修改
        </a-button>
        <a-button v-show="isShow[2]" type="link" @click="confirm()">
          确认
        </a-button>
        <a-button
          v-show="isShow[2]"
          type="link"
          @click="cancel(3)"
          style="margin-left: 3%"
        >
          取消
        </a-button>
      </a-form-model-item>
      <a-form-model-item ref="password" label="密码" required prop="password">
        <a-input
          disabled
          v-model="form.password"
          @blur="
            () => {
              $refs.password.onFieldBlur();
            }
          "
        />
        <a-button type="link" @click="editPassword"> 修改 </a-button>
      </a-form-model-item>
      <a-form-model-item ref="companyName" label="企业" prop="companyName">
        <a-input
          v-bind:disabled="true"
          v-model="form.companyName"
          @blur="
            () => {
              $refs.companyName.onFieldBlur();
            }
          "
        />
        <a-button v-if="companyId == null" type="link" @click="createCompany">
          创建企业
        </a-button>
        <a-button
          v-if="form.companyId == null"
          type="link"
          @click="addCompany"
          style="margin-left: 3%"
        >
          加入企业
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="link" style="float: left; margin-left: 15%">
          注销账号
        </a-button>
      </a-form-model-item>
    </a-form-model>

 methods: {
    edit: function (num) {
      this.$set(this.isEdit, num - 1, !this.isEdit[num - 1]);
      this.$set(this.isShow, num - 1, !this.isShow[num - 1]);
      switch (num) {
        case 1:
          this.context = this.form.name;
          break;
        case 2:
          this.context = this.form.phone;
          break;
        case 3:
          this.context = this.form.email;
          break;
        case 4:
          this.context = this.form.sex;
          break;
      }
    },
    confirm: function () {
      console.log(this.form.sex);
      this.$refs.form.validate((valid) => {
        if (valid) {
          modifyUser(
            this.userId,
            this.form.name,
            this.form.phone,
            this.form.sex,
            this.form.email
          ).then(this.afterModity);
        } else {
          return false;
        }
      });
    },
    afterModity(res) {
      const modifyRse = res.data;
      if (modifyRse.code == 200) {
        this.setUserName(this.form.name);
        this.setTelephone(this.form.phone);
        this.setEmail(this.form.email);
        this.setSex(this.form.sex);
        this.$message.success("修改成功！");
        for (let i = 0; i < 4; i++) {
          this.$set(this.isEdit, i, false);
          this.$set(this.isShow, i, false);
        }
      }
    },
    cancel: function (num) {
      this.$set(this.isEdit, num - 1, !this.isEdit[num - 1]);
      this.$set(this.isShow, num - 1, !this.isShow[num - 1]);
      switch (num) {
        case 1:
          this.form.name = this.context;
          break;
        case 2:
          this.form.phone = this.context;
          break;
        case 3:
          this.form.email = this.context;
          break;
        case 4:
          this.form.sex = this.context;
          break;
      }
    },
  }